/* Lobby: the strip atop setup, the lobby menu, joining, and the pause every player sees. */

/* ---- strip (replaces the setup flavour text) ---- */
.console-head{align-items:center}
.lobby-strip{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;flex:1;min-width:0;position:relative}
.lobby-strip.empty p{margin:4px 0 0;color:var(--muted);font-size:13px;max-width:70ch}
.lobby-title{min-width:0}
.lobby-title .lobby-eyebrow{display:block}
.lobby-strip h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.member-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:99px;background:var(--well);border:1px solid var(--edge);font-size:12px;color:var(--text);max-width:180px}
.member-chip:hover{border-color:var(--accent)}
.member-chip.you{border-color:color-mix(in srgb,var(--you) 55%,transparent)}
.member-chip.offline{opacity:.55}
.member-chip .member-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-chip .member-host{color:var(--accent2);width:13px;height:13px}
.member-state{display:inline-flex;width:15px;height:15px;border-radius:50%;align-items:center;justify-content:center}
.member-state .icon{width:10px;height:10px;stroke-width:2.4}
.member-state.ready{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.member-state.waiting{color:var(--muted)}
.member-state.watching{color:var(--priv)}
.lobby-avatar{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;font:700 9.5px var(--sans);letter-spacing:.02em;color:#0b0d10;background:hsl(var(--h) 60% 68%)}
.lobby-invite{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.invite-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--well));border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font-size:12px}
.invite-chip .mono{letter-spacing:.08em}
.rule-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font-size:11px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge)}
.lobby-flash{position:absolute;right:0;top:-2px;padding:4px 10px;border-radius:8px;background:var(--raised);color:var(--text);font-size:12px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none;max-width:min(360px,70vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-flash.on{opacity:1;transform:none}
/* Your code, and beside it a field for someone else's: one pill, so finding either finds both. */
.invite-pair{display:inline-flex;align-items:stretch;min-width:0}
.invite-pair.joinable{border-radius:8px;background:var(--well);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.invite-pair.joinable .invite-chip{border-color:transparent;border-radius:8px 0 0 8px}
.strip-join{display:flex;align-items:center;gap:6px;min-width:0;padding:3px 3px 3px 10px;border-left:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.strip-join[hidden]{display:none}
.strip-join label{font-size:11.5px;color:var(--muted);white-space:nowrap}
.strip-join input{width:13ch;padding:3px 7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.strip-join button{padding:3px 11px;font-size:12px}

/* ---- guests on the setup screen ---- */
#setup [inert]{opacity:.72}
#setup [inert] .seat-token{cursor:default}
#setup.table-locked #scriptDeck .script-card:disabled{opacity:.8;cursor:default}
#characters.read-only .character{cursor:default}
#characters.read-only .character input{pointer-events:none}
#setup.table-locked #scriptDeck .script-card[aria-checked=true]:disabled{opacity:1}
#setup.guest-view .pane-minds>h3:after{content:"Host";margin-left:6px;padding:1px 6px;border-radius:99px;font:600 9.5px var(--sans);color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge-strong)}
#setup.table-locked .pane-table>h3:after,#setup.table-locked .pane-script>h3:after{content:"Host";margin-left:6px;padding:1px 6px;border-radius:99px;font:600 9.5px var(--sans);color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge-strong)}
.host-minds{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.host-minds b{color:var(--text);font-weight:600}
.play-as.locked{opacity:.6}
#btnStart.is-ready{background:color-mix(in srgb,var(--ok) 22%,var(--well));color:var(--ok);border-color:var(--ok)}

/* ---- lobby menu ---- */
#lobbyDialog{width:min(560px,calc(100vw - 32px))}
.lobby-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.lobby-tabs[hidden]{display:none}
.lobby-tabs button{border:0;border-radius:0;background:none;padding:11px 12px;color:var(--muted);font-size:12.5px;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lobby-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.lobby-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab-badge{min-width:17px;padding:0 5px;border-radius:99px;background:var(--raised);color:var(--text);font-size:10.5px;line-height:17px;text-align:center}
.lobby-panel{padding:18px 24px 22px;display:flex;flex-direction:column;gap:14px}
.lobby-panel[hidden],.join-by-code[hidden]{display:none}
.lobby-panel small{color:var(--muted);font-size:11.5px;line-height:1.5}
.lobby-lead{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.lobby-you{display:flex;flex-direction:column;gap:8px}
.lobby-you>label:first-child{font-size:12px;font-weight:600}
.name-row{display:flex;gap:8px}
.name-row input{flex:1;min-width:0}
.member-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.member-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--well)}
.member-row.you{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--you) 40%,transparent)}
.member-row .lobby-avatar{flex-basis:30px;width:30px;height:30px;font-size:11px}
.member-main{display:flex;flex-direction:column;min-width:0;flex:1}
.member-main strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-main em{font:italic 600 10px var(--sans);color:var(--you);margin-left:4px}
.member-main small{display:flex;align-items:center;gap:4px}
.member-main small .icon{color:var(--accent2)}
.member-main .offline{color:var(--danger)}
.member-actions{display:flex;gap:2px}
.member-actions button{padding:6px}
.danger-text{color:var(--danger)!important}
.lobby-game{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 7%,var(--well))}
.lobby-game button{display:inline-flex;align-items:center;gap:7px}
.lobby-paused{margin:0;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--accent2)}
.lobby-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.lobby-foot button{display:inline-flex;align-items:center;gap:7px}
.lobby-foot small{flex:1;min-width:180px}
.invite-box{display:flex;gap:8px;flex-wrap:wrap}
.invite-box input{flex:1 1 220px;min-width:0;font-family:var(--mono);font-size:12px}
.invite-box button{display:inline-flex;align-items:center;gap:7px}
.invite-code{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.invite-code strong{font-size:20px;letter-spacing:.14em;color:var(--text)}
.invite-controls{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.invite-controls button{display:inline-flex;align-items:center;gap:7px}
.capacity{font-size:12px;color:var(--muted)}
.capacity input{width:58px;margin:0 4px}
.rule{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--raised)}
.rule:last-of-type{border-bottom:0}
.rule>div:first-child{display:flex;flex-direction:column;gap:3px;flex:1 1 220px;min-width:0}
.rule strong{font-size:13px;color:var(--text);font-weight:600}
.rule.switch{cursor:pointer}
.segmented button:disabled{opacity:.6;cursor:default}
.lobby-warning{margin:0;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--accent2)}
.chat-log{list-style:none;margin:0;padding:10px;border-radius:10px;background:var(--well);height:min(300px,45dvh);overflow-y:auto;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.45}
.chat-log li{overflow-wrap:anywhere}
.chat-log li b{color:var(--accent2);margin-right:4px}
.chat-log li.mine b{color:var(--you)}
.chat-log li.system{color:var(--muted);font-size:11.5px;font-style:italic}
.chat-form{display:flex;gap:8px}
.chat-form input{flex:1;min-width:0}
.join-by-code{padding:0 24px 22px}
.join-by-code label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}
.join-by-code input{letter-spacing:.08em;text-transform:uppercase}
.join-dialog form{display:flex;flex-direction:column;gap:10px}
.join-dialog #joinName{padding:11px;font-size:14px}
.join-actions{display:flex;gap:10px;align-items:center}
.join-actions .primary{display:inline-flex;align-items:center;gap:8px;padding:10px 16px}
#joinSummary{margin:0 0 6px}

/* ---- in game ---- */
.person-tag{font:italic 600 9px var(--sans);letter-spacing:.03em;color:var(--accent2);padding:0 5px;margin-left:4px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 40%,transparent);max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.person-tag[hidden]{display:none}
.person-tag.stand-in{color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge-strong);text-decoration:line-through}
main{position:relative}
.pause-banner{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:18px 16px;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(2px)}
.pause-banner[hidden]{display:none}
.pause-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:720px;width:100%;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent);box-shadow:0 18px 50px color-mix(in srgb,var(--shade) 60%,transparent)}
.pause-glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2)}
.pause-glyph .icon{width:20px;height:20px}
.pause-text{display:flex;flex-direction:column;gap:3px;flex:1 1 240px;min-width:0}
.pause-text strong{font-size:14px}
.pause-text small{color:var(--muted);font-size:12px;line-height:1.5}
.pause-actions{display:flex;gap:8px;flex-wrap:wrap}
.pause-actions button{display:inline-flex;align-items:center;gap:7px}
body.game-paused #action{pointer-events:none;opacity:.6}
/* Someone lost their connection: a note above the record, never in the way of play. */
.away-banner{flex-shrink:0;display:flex;flex-direction:column;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent2) 7%,var(--panel));position:relative;z-index:6}
.away-banner[hidden]{display:none}
.away-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 18px;font-size:12.5px;line-height:1.45;color:var(--text)}
.away-row+.away-row{border-top:1px solid var(--line)}
.away-row>.icon{color:var(--accent2)}
.away-text{flex:1 1 220px;min-width:0}
.away-actions{display:flex;gap:4px;margin-left:auto}
.away-actions button{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font-size:12px}
/* Where a returning player's absence began in the record. */
.away-divider{display:flex;align-items:center;gap:10px;margin:10px 0;font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--accent2)}
.away-divider::before,.away-divider::after{content:"";flex:1;border-top:1px dashed color-mix(in srgb,var(--accent2) 55%,transparent)}
.watch-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--priv) 8%,var(--panel));font-size:12.5px;color:var(--text)}
.watch-note[hidden]{display:none}
.watch-note .icon{color:var(--priv)}
.watch-note button{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px}
.pane-minds.is-collapsed .host-minds{display:none}
.host-name{display:flex;flex-direction:column;gap:6px}
.host-name label{font-size:12px;font-weight:600}
/* Phones: the header grid has no room; Pause lives in the game menu. */
@media (max-width:760px){#app.ingame #btnPause{display:none}}

@media (max-width:600px){
  .lobby-strip{gap:8px}
  .member-chip .member-name{max-width:90px}
  .lobby-flash{position:static;max-width:100%}
  .lobby-invite:has(.joinable){width:100%}
  .invite-pair.joinable{display:flex;width:100%}
  .strip-join{flex:1}
  .strip-join input{flex:1;min-width:0;width:auto}
  .lobby-panel,.join-by-code{padding-left:18px;padding-right:18px}
  .member-actions button{padding:5px}
  .pause-actions{width:100%}
  .away-row{padding:6px 12px}
}

/* Free play: the server chooses the minds and there is no debug view, so those controls step aside. */
body.free-play .pane-minds,body.free-play #debugSwitch,body.free-play #btnDebug{display:none!important}
body.free-play .console-grid,body.free-play .console-grid.minds-collapsed{grid-template-columns:clamp(300px,27vw,400px) minmax(0,1fr)}
@media (max-width:1180px){
  body.free-play .console-grid,body.free-play .console-grid.minds-collapsed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.free-play .console-grid .pane-table{grid-column:1;grid-row:1}
  body.free-play .console-grid .pane-script{grid-column:2;grid-row:1}
}
@media (max-width:760px){
  body.free-play .console-grid,body.free-play .console-grid.minds-collapsed{grid-template-columns:1fr}
  body.free-play .console-grid .pane-table,body.free-play .console-grid .pane-script{grid-column:auto;grid-row:auto}
}
/* Out of free allowance: the thank-you note points here. */
body:not(.coach-open) .lobby-button.spotlight{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){body:not(.coach-open) .lobby-button.spotlight{animation:lobby-spotlight 1.2s ease-in-out infinite}}
@keyframes lobby-spotlight{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 0%,transparent)}}
#freeThanksDialog.free-thanks{position:fixed;inset:auto;margin:0;z-index:80;width:min(420px,calc(100vw - 24px));overflow:visible}
#freeThanksDialog.free-thanks:before{content:"";position:absolute;top:-8px;right:var(--arrow-right,40px);width:14px;height:14px;background:inherit;border-left:inherit;border-top:inherit;transform:rotate(45deg)}
body.thanks-open #setup{filter:brightness(.4) saturate(.7);pointer-events:none;transition:filter .25s ease}
.free-thanks p{margin:0;line-height:1.55}
.free-note{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.free-note>.icon{flex:none;margin-top:2px;color:var(--accent)}
.free-note p{flex:1 1 220px;margin:0;line-height:1.5}
.free-note button{display:inline-flex;align-items:center;gap:6px}