/* The lobby reads as one ordered flow: join a game, choose a settler, set the
   game up, start. Step one spans the top because nothing below it means anything
   until you are connected; steps two and three sit side by side beneath it. */
#lobby{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:70px 28px 35px;background:#02172166}
#lobby::after{display:none}
.sheetbox{position:relative;width:min(1210px,94vw);height:min(760px,82vh);border:24px solid transparent;border-image:var(--frame) 48 stretch;background:#062b38aa;box-shadow:0 16px 70px #0009;color:var(--ink)}
.lobby-heading{position:absolute;z-index:3;left:50%;top:-77px;transform:translateX(-50%);width:470px;height:106px;display:grid;place-items:center;padding-bottom:18px;background:var(--ribbon) center/100% 100% no-repeat;font-size:calc(31px * var(--text-scale, 1));font-weight:bold;font-variant:small-caps;color:#f6e9cb;text-shadow:2px 2px 1px #2f0c04;white-space:nowrap}
#bLobbyBack{position:absolute;right:-7px;top:-66px;padding:6px 12px;font-size:calc(14px * var(--text-scale, 1))}

.lobby-layout{display:grid;grid-template-columns:1.06fr .94fr;grid-template-rows:auto minmax(0,1fr) auto;gap:18px 22px;height:100%;padding:30px 32px 22px;overflow:auto;touch-action:pan-y}
.step-join{grid-column:1/-1}
.step-character{grid-column:1;grid-row:2}
.step-setup{grid-column:2;grid-row:2}
#bStart{grid-column:1/-1;width:100%;font-size:calc(23px * var(--text-scale, 1));min-height:54px;align-self:end}

/* ------------------------------------------------------------- step frames */
.lobby-step{display:flex;flex-direction:column;min-width:0;min-height:0}
.step-join{background:#664b32 var(--wood) center/100% 100%;box-shadow:0 5px 9px #0008;border-top:2px solid #b98e53;padding:14px 18px 15px;color:#fff0d5}
.step-character,.step-setup{background:var(--paper) var(--parchment);background-size:160px;box-shadow:inset 0 0 32px #6b3a2260,0 5px 10px #0008;border:2px solid #9c784e;padding:14px 18px 16px;overflow:auto}

.step-head{display:flex;align-items:center;gap:11px;margin:0 0 11px;font-size:calc(23px * var(--text-scale, 1));font-variant:small-caps;font-weight:bold;line-height:1.1}
.step-join .step-head{color:#ffeccb;text-shadow:1px 2px 2px #211307;border-bottom:1px solid #ffffff26;padding-bottom:9px}
.step-character .step-head,.step-setup .step-head{color:#3a2716;border-bottom:1px solid #9673444d;padding-bottom:8px}
.step-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A wax seal carries the step number so the order is legible at a glance. */
.step-no{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d4442c,#8d1508 70%);border:1px solid #641406;color:#ffe9c2;font:bold calc(17px * var(--text-scale, 1))/1 var(--serif);font-variant:normal;text-shadow:1px 1px 1px #4a0f05;box-shadow:inset 0 1px 2px #ffb59a55,0 2px 3px #2b0f0766}
.step-head.done .step-no{background:radial-gradient(circle at 35% 30%,#5aa03c,#256315 70%);border-color:#1c4a10;box-shadow:inset 0 1px 2px #cdf0a555,0 2px 3px #12300866}
.step-head.done .step-no::after{content:'✓';font-size:calc(16px * var(--text-scale, 1))}
.step-head.done .step-no>span{display:none}
.step-tag{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--text-scale, 1));font-variant:normal;font-weight:normal;letter-spacing:.04em;padding:3px 9px;border-radius:11px}
.step-join .step-tag{background:#00000038;color:#f0dcb6;border:1px solid #ffffff2e}
.step-character .step-tag,.step-setup .step-tag{background:#00000012;color:#6d4c28;border:1px solid #9673444d}

/* Steps two and three are dimmed until there is a game to belong to. */
#lobby[data-stage="joining"] :is(.step-character,.step-setup){opacity:.45;filter:saturate(.55)}
#lobby :is(.step-character,.step-setup){transition:opacity .22s,filter .22s}

/* ---------------------------------------------------------- 1 · join a game */
.join-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.join-row .field{display:flex;flex-direction:column;min-width:0}
.join-row .field.wide{flex:1 1 190px}
.join-row .field.narrow{flex:0 1 170px}
.join-row label{margin:0 0 5px;color:#ebd8b7;font-size:calc(14px * var(--text-scale, 1));font-variant:small-caps}
.join-row input{width:100%;padding:9px 12px;background:#e5caa4;color:#332317;border:2px solid #b99466;box-shadow:inset 0 2px 5px #27150d80;font-size:calc(18px * var(--text-scale, 1));text-transform:uppercase;border-radius:2px;letter-spacing:.08em}
.join-row #code{letter-spacing:.16em}
#bJoin{white-space:nowrap;flex:none;min-height:46px}
#joinStatus{display:flex;align-items:center;gap:8px;margin:11px 0 0;font-size:calc(13px * var(--text-scale, 1));color:#e8d6b5}
#joinStatus .dot{flex:none;width:9px;height:9px;border-radius:50%;background:#d8a33f;box-shadow:0 0 0 3px #d8a33f2e}
#joinStatus[data-state="on"] .dot{background:#6ec24a;box-shadow:0 0 0 3px #6ec24a2e}
#joinStatus[data-state="wait"] .dot{animation:joinPulse 1.1s ease-in-out infinite}
@keyframes joinPulse{50%{opacity:.3}}

/* ------------------------------------------------------ 2 · choose a settler */
.character-intro{text-align:center;font-size:calc(13px * var(--text-scale, 1));color:#674c30;margin:0 0 11px}
.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.character-card{position:relative;display:flex;align-items:center;flex-direction:column;min-width:0;padding:8px 3px 7px;gap:3px;border:3px double #9b7748;border-image:none;background:radial-gradient(ellipse at 50% 35%,#fff0ceaa,transparent 70%),var(--parchment),#d6b88c;color:#382719;text-shadow:none;box-shadow:inset 0 0 0 2px #f8e3b855,0 3px 4px #4c2c1933;transition:transform .16s,box-shadow .16s,background-color .16s}
.character-card:not(:disabled):hover{filter:none;transform:translateY(-3px);background-color:#ecd1a4;box-shadow:inset 0 0 0 2px #f8e3b8,0 6px 9px #4c2c1944}
.character-card:focus-visible{outline:3px solid #672314;outline-offset:2px;z-index:1}
.character-portrait{display:grid;place-items:center;width:100%;height:91px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--character-color) 22%,transparent),transparent 68%)}
.character-portrait .ui-icon{width:91px;height:91px;max-width:100%;filter:drop-shadow(0 4px 3px #3b211655)}
.character-name{font-size:calc(15px * var(--text-scale, 1));font-variant:small-caps;line-height:1.2;letter-spacing:0;white-space:nowrap}
.character-status{font-size:calc(11px * var(--text-scale, 1));font-weight:normal;font-variant:normal;letter-spacing:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6d4c28}
.character-seal{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #9b774866;border-radius:50%;font:calc(14px * var(--text-scale, 1)) Georgia;color:#8b6537}
.character-card.selected{border-color:#74321b;background-color:#f3d6a0;box-shadow:inset 0 0 0 2px #fbe7b7,0 0 0 1px #b18a49,0 4px 7px #4c2c1944}
.character-card.selected .character-seal{background:linear-gradient(#b62c1a,#80140a);border-color:#6f1d0d;color:#ffedba;box-shadow:0 2px 3px #41160866}
.character-card.selected .character-status{color:#852514;font-weight:bold}
.character-card:disabled{opacity:1;cursor:default}
.character-card.taken{background-color:#c8b391;border-color:#ab9470;box-shadow:inset 0 1px 5px #60452a22}
.character-card.taken .character-portrait{filter:grayscale(.8);opacity:.48}
.character-card.taken .character-name{color:#6b5840}
.character-card.taken .character-seal{background:#75614b;color:#f1dfc2;border-color:#5c4935}
#characterNote{min-height:18px;margin:11px 0 0;text-align:center;color:#694b2a;font-size:calc(12px * var(--text-scale, 1));line-height:1.4}

/* -------------------------------------------------------- 3 · set up the game */
.step-setup .subhead{margin:0 0 6px;font-size:calc(15px * var(--text-scale, 1));font-variant:small-caps;color:#5c4126}
.step-setup .subhead:not(:first-of-type){margin-top:14px}
#lobbySeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 8px}
.lseat{display:flex;align-items:center;gap:5px;min-height:42px;padding:2px 5px 2px 2px;border:1px solid #6a4d2c;background:linear-gradient(90deg,#efe1c7,#d4b88d);box-shadow:inset 0 0 0 1px #f0dab1;font-weight:bold;font-size:calc(13px * var(--text-scale, 1));font-variant:small-caps;color:var(--ink)}
.lseat>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lseat .avatar{width:33px;height:37px;flex:none}
.lseat .tagit{margin-left:auto;font-size:calc(10px * var(--text-scale, 1));color:#664a2c}
.lseat.is-you{background:linear-gradient(90deg,#efe0b6,#dfbc80);border-color:#8f4928}
.lseat.is-you .tagit{color:#852514;font-weight:bold}
#lobbyNote{font-size:calc(13px * var(--text-scale, 1));text-align:center;color:#705234;margin:0 0 6px}
#fill{justify-content:center;gap:6px}
#fill .fill{min-width:44px;padding:5px 10px;border-width:3px}
.fill.on{background:#a7190b!important;color:#fff5df;outline:1px solid #edc478}
.setup-hint{font-size:calc(12px * var(--text-scale, 1));color:#6b4d2e;text-align:center;margin:8px 0 0}
.lobby-tools{margin-top:auto;padding-top:14px;gap:8px}
.lobby-tools button{flex:1 1 46%;font-size:calc(13px * var(--text-scale, 1));padding:5px}

@media(prefers-reduced-motion:reduce){.character-card,#lobby :is(.step-character,.step-setup){transition:none}.character-card:not(:disabled):hover{transform:none}#joinStatus[data-state="wait"] .dot{animation:none}}

/* Shorter desktop windows: shrink the portraits before anything has to scroll. */
@media(min-width:761px) and (max-height:820px){
  .lobby-layout{padding:22px 24px 16px;gap:14px 18px}
  .character-portrait,.character-portrait .ui-icon{width:68px;height:68px}
  .character-grid{gap:7px}
  .character-intro{margin-bottom:8px}
  .step-head{font-size:calc(20px * var(--text-scale, 1));margin-bottom:8px}
  .step-no{width:27px;height:27px;font-size:calc(15px * var(--text-scale, 1))}
  .join-row input{padding:7px 10px;font-size:calc(16px * var(--text-scale, 1))}
  #bStart{min-height:48px;font-size:calc(20px * var(--text-scale, 1))}
}
@media(min-width:761px) and (min-height:950px){.sheetbox{height:min(850px,86vh)}}

/* Phones: one column, the same order, nothing side by side. */
@media(max-width:760px){
  #lobby{padding:55px 8px 12px}
  .sheetbox{width:100%;height:calc(100dvh - 80px);max-height:90vh;border-width:15px}
  .lobby-heading{width:290px;top:-61px;height:86px;font-size:calc(24px * var(--text-scale, 1))}
  #bLobbyBack{top:-46px;right:-12px;font-size:0;width:36px;padding:2px}
  #bLobbyBack::after{content:'×';font-size:calc(21px * var(--text-scale, 1))}
  /* Keep content at its natural height and scroll the whole lobby. Auto grid
     tracks with min-height:0 squeezed the frames while their children overflowed. */
  .lobby-layout{display:flex;flex-direction:column;gap:13px;padding:20px 8px 12px}
  .lobby-layout> *{flex-shrink:0}
  .lobby-step> *{flex-shrink:0}
  .step-join,.step-character,.step-setup{grid-column:1;grid-row:auto}
  .step-character,.step-setup{overflow:visible}
  #bStart{grid-column:1;font-size:calc(20px * var(--text-scale, 1));min-height:50px}
  .step-head{font-size:calc(20px * var(--text-scale, 1))}
  .step-no{width:27px;height:27px;font-size:calc(15px * var(--text-scale, 1))}
  .step-tag{font-size:calc(11px * var(--text-scale, 1));padding:2px 7px}
  .join-row{gap:9px}
  .join-row .field.wide,.join-row .field.narrow{flex:1 1 44%}
  .join-row input{font-size:calc(16px * var(--text-scale, 1));padding:7px 9px}
  #bJoin{flex:1 1 100%;font-size:calc(14px * var(--text-scale, 1))}
  .character-intro{font-size:calc(12px * var(--text-scale, 1))}
  .character-grid{gap:6px}
  .character-card{padding:7px 1px 6px;border-width:2px}
  .character-portrait,.character-portrait .ui-icon{width:75px;height:75px}
  .character-name{font-size:calc(12px * var(--text-scale, 1))}
  .character-status{font-size:calc(10px * var(--text-scale, 1))}
  .character-seal{width:18px;height:18px;font-size:calc(12px * var(--text-scale, 1));right:3px;top:3px}
  #characterNote{font-size:calc(11px * var(--text-scale, 1))}
  .lseat{font-size:calc(12px * var(--text-scale, 1))}
  .lseat .tagit{font-size:calc(9px * var(--text-scale, 1))}
  #fill .fill{min-height:44px}
  .lobby-tools{margin-top:14px}
}
@media(max-width:380px){
  .character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .character-portrait,.character-portrait .ui-icon{width:82px;height:82px}
  .character-name{font-size:calc(13px * var(--text-scale, 1))}
  .character-card{padding:7px 2px}
  .character-status{font-size:calc(11px * var(--text-scale, 1))}
  #lobbySeats{grid-template-columns:1fr}
}