/* Lobby shell styles (public/lobby.js). Structure is fixed; the look comes from the variables
   below -- lab defaults here, and a game sets its own on :root (Blood Valley: client.css).
   The `.embedded` rules apply when an arcade page frames the lobby (the card is the screen). */
:root{
  --lobby-ink:#f4f4fa;--lobby-muted:#a1a5bd;--lobby-panel:#1b1e2d;--lobby-panel-border:#35394e;--lobby-rule:#2a2d3d;
  --lobby-side-0:#2C7DF0;--lobby-side-0-ink:#9CC6FF;--lobby-side-1:#E0362C;--lobby-side-1-ink:#FF9A8F;
  --lobby-accent:#b9ff80;--lobby-accent-ink:#14240b;--lobby-ash:#7C7F86;--lobby-bot:#C4B3A0;
  --lobby-ground:#241A14;--lobby-font:system-ui,sans-serif;
}
#mp-controls{display:contents}
#lobby-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#lobby-title,#browser-title{margin:0 0 12px;font-size:22px;letter-spacing:.04em}
#lobby-count,#browser-count{font-size:13px;color:var(--lobby-muted)}
#lobby-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#lobby-actions button{margin:0}
#lobby-leave,#browser-back{background:#35394e;color:#fff}
#lobby-hint,#browser-hint{margin:12px 0 0;font-size:13px;min-height:1.2em;word-break:break-all}
#seats{list-style:none;margin:0 0 16px;padding:0}
#seats li{padding:8px 0;border-bottom:1px solid var(--lobby-rule)}
#bots-row{display:flex;align-items:center;gap:8px;margin:12px 0}
#bots-row button{padding:6px 14px;margin:0}
#browser-list{list-style:none;margin:0 0 4px;padding:0;max-height:40vh;overflow-y:auto}
#browser-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lobby-rule);text-align:left}
#browser-list .lobby-name{flex:1;font-weight:650}
#browser-list .lobby-meta{font-size:13px;color:var(--lobby-muted);white-space:nowrap}
#browser-list button{margin:0;padding:8px 16px}
#browser-empty{margin:8px 0 4px}
/* Sides: the two columns ARE the team picker; the odds bar re-splits with the roster. */
#odds{height:10px;margin:14px 0 12px;background:var(--lobby-side-1);overflow:hidden}
#odds-blue{display:block;height:100%;width:50%;background:var(--lobby-side-0);transition:width .25s ease}
#sides{display:grid;grid-template-columns:1fr 1fr;gap:0;text-align:left}
.side{padding:12px 14px 14px;border-top:3px solid transparent}
.side[data-team="0"]{border-top-color:var(--lobby-side-0);background:color-mix(in srgb,var(--lobby-side-0) 10%,transparent)}
.side[data-team="1"]{border-top-color:var(--lobby-side-1);background:color-mix(in srgb,var(--lobby-side-1) 10%,transparent)}
.side h3{margin:0 0 8px;font-size:20px;letter-spacing:.02em}
.side[data-team="0"] h3{color:var(--lobby-side-0-ink)}
.side[data-team="1"] h3{color:var(--lobby-side-1-ink)}
.side-list{list-style:none;margin:0 0 10px;padding:0;min-height:5.2em}
.side-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff14}
.side-list li.open{color:var(--lobby-ash);font-style:italic}
.side-list li.bot{color:var(--lobby-bot)}
.side-list li.you{font-weight:700}
.side-list li.you::before{content:"▸";color:var(--lobby-accent)}
.side-list li .ready-mark{margin-left:auto;color:var(--lobby-accent);font-size:12px;letter-spacing:.04em}
.join-side{margin:0;padding:8px 14px;font-size:13px}
.side[data-team="0"] .join-side{background:var(--lobby-side-0);border-color:var(--lobby-side-0);color:#fff}
.side[data-team="1"] .join-side{background:var(--lobby-side-1);border-color:var(--lobby-side-1);color:#fff}
.side.yours .join-side{visibility:hidden}
#lobby-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
#lobby-bar #lobby-actions,#lobby-bar #bots-row{margin:0}
@media (prefers-reduced-motion:reduce){#odds-blue{transition:none}}
/* Embedded in an arcade page: no lab chrome, the card is the screen. `.playing` is toggled by
   the shell so the game's own surface can take over the frame. */
.embedded body{padding:0;background:var(--lobby-ground);min-height:100vh}
.embedded main{max-width:none;margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;box-sizing:border-box;font-family:var(--lobby-font);color:var(--lobby-ink)}
.embedded .brand,.embedded main>h1,.embedded main>p,.embedded .note,.embedded #mp-controls,.embedded #create,.embedded #quick-play,.embedded #join,.embedded #resume,.embedded #invite-label,.embedded #role{display:none!important}
.embedded section{width:min(560px,94vw);margin:0;padding:26px 28px 24px;border:1px solid color-mix(in srgb,var(--lobby-ink) 15%,transparent);border-radius:6px;background:var(--lobby-panel);box-shadow:0 22px 70px #000b;text-align:center;box-sizing:border-box}
.embedded #status{margin:0 0 16px;color:var(--lobby-muted)}
.embedded #lobby-head{justify-content:space-between;align-items:baseline}
.embedded #lobby-title,.embedded #browser-title{font-size:clamp(28px,4.4vw,40px);font-weight:800;letter-spacing:.01em;line-height:1}
.embedded #lobby-count,.embedded #browser-count,.embedded #browser-empty,.embedded #browser-hint,.embedded #lobby-hint,.embedded label{color:var(--lobby-muted)}
.embedded #browser-list li,.embedded #seats li{border-bottom:1px solid color-mix(in srgb,var(--lobby-ink) 12%,transparent);color:var(--lobby-ink)}
.embedded #browser-list .lobby-meta{color:var(--lobby-muted)}
.embedded button{background:color-mix(in srgb,var(--lobby-panel) 70%,var(--lobby-ink) 8%);color:var(--lobby-ink);border:1px solid color-mix(in srgb,var(--lobby-ink) 30%,transparent);border-radius:4px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.embedded button:focus-visible{outline:2px solid var(--lobby-accent);outline-offset:2px}
.embedded #start,.embedded #browser-quick{background:var(--lobby-accent);color:var(--lobby-accent-ink);border-color:var(--lobby-accent)}
.embedded #start:disabled{background:var(--lobby-ash);border-color:var(--lobby-ash);color:var(--lobby-accent-ink)}
.embedded #lobby-leave,.embedded #leave,.embedded #browser-back{background:transparent;border-color:color-mix(in srgb,var(--lobby-ink) 30%,transparent);color:var(--lobby-ink)}
.embedded #browser-list button{font-size:12px;padding:8px 14px}
.embedded #bots-row button{padding:4px 12px;margin:0}
/* Room browser fills the cabinet; waiting-room cards retain their compact layout. */
.embedded:has(#browser:not([hidden])) main{height:100vh;height:100dvh;min-height:0;padding:0;place-items:stretch;overflow:hidden}
.embedded:has(#browser:not([hidden])) section{width:100%;max-width:none;height:100%;min-height:0;display:flex;flex-direction:column;padding:clamp(16px,3vw,32px);border:0;border-radius:0;box-shadow:none;text-align:left;overflow:hidden}
.embedded:has(#browser:not([hidden])) #status{flex-shrink:0;overflow-wrap:anywhere}
.embedded:has(#browser:not([hidden])) #mp{flex:1;min-height:0}
.embedded:has(#browser:not([hidden])) #lobby-root{height:100%;min-height:0}
.embedded #browser:not([hidden]){height:100%;min-height:0;display:flex;flex-direction:column}
.embedded #browser #lobby-head,.embedded #browser #lobby-actions,.embedded #browser-hint{flex-shrink:0}
.embedded #browser-list{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
.embedded #browser-list li{display:grid;grid-template-columns:minmax(130px,.3fr) minmax(0,1fr) auto;gap:12px 24px;padding:18px 0}
.embedded #browser-list .lobby-name{min-width:0;overflow-wrap:anywhere}
.embedded #browser-list .lobby-meta{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.embedded #browser-list button{white-space:nowrap}
@media(max-width:600px){
  .embedded #browser-list li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .embedded #browser-list .lobby-meta{grid-column:1;grid-row:2}
  .embedded #browser-list button{grid-column:2;grid-row:1 / 3}
}
.embedded.playing main{padding:0;place-items:stretch}
.embedded.playing section{width:100%;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.embedded.playing #status{display:none}