/* Host / shared-screen layout — optimized for widescreen, readable across a room.
   This file also re-points the shared surface tokens to the theme's purple
   illustrated world. base.css loads first, so these :root values win on the TV
   only; the phone (play.css) and hub keep the cream paper surfaces. */
:root {
  --bg-0:#6753ed; --bg-1:#fffdf7; --bg-2:rgba(23,20,44,.22);
  --on-bg:#ffffff;
  --countdown-ink:#ffd44d; --countdown-go:#ffffff;   /* yellow on the purple world */
  --app-bg-image:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.13), transparent 26%),
    linear-gradient(155deg,#8975ff 0%,#6753ed 56%,#4d3bc8 100%);
}
/* Fine dot texture over the world, exactly as the theme reference draws it. */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.13;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:11px 11px;
  -webkit-mask-image:linear-gradient(#000, transparent 85%); mask-image:linear-gradient(#000, transparent 85%);
}

/* Exactly one viewport tall + clipped, so #stage (flex:1) is height-constrained and
   host.js can scale game content to fit — the host never scrolls. */
#app { height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:1; }

.hostbar { display:flex; align-items:center; gap:20px; padding:14px 26px; background:rgba(23,20,44,.34);
  border-bottom:2px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20; }
.hostbar .brand { font-weight:900; font-size:1.45rem; letter-spacing:-.06em; color:var(--white);
  transform:rotate(-3deg); text-transform:uppercase; }
.hostbar .brand b, .hostbar .brand span:last-child { color:var(--yellow); }
.hostbar .spacer { flex:1; }
.hostbar .join-hint { text-align:right; line-height:1.15; }
.hostbar .join-hint .u { font-weight:900; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.hostbar .code { font-family:var(--mono); font-weight:800; font-size:2rem; letter-spacing:.28em; color:var(--yellow); }
.gear { font-size:1.5rem; background:none; border:none; cursor:pointer; color:var(--white); }

/* Start gate — the first tap on the host screen (creates the room + unlocks audio) */
.start-gate { display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.start-gate .logo-xl { font-family:var(--display); font-size:clamp(3.4rem,10vw,7rem); font-weight:400;
  line-height:.85; letter-spacing:-.055em; color:var(--white); }
.start-gate .logo-xl em { font-style:italic; color:var(--yellow); }
.start-gate p { max-width:540px; font-size:1.15rem; color:#edeafd; }
.start-modes { display:flex; flex-direction:column; gap:14px; width:min(440px,92vw); }
.start-gate .btn { font-size:1.2rem; padding:1em 2em; }

/* #stage is a fixed viewport-height clip box; #stagefit holds the game content and
   is auto-scaled by host.js so any screen fits without scrolling or manual zoom. */
.stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
/* Game picker: scroll at full size instead of scaling everything to fit. */
.stage.scroll { overflow-y:auto; align-items:flex-start; }
.stage.scroll #stagefit { transform:none !important; }

/* ── Single-player mode ─────────────────────────────────────────────────────
   The shared screen (game board) sits on top; the docked play.html controller
   fills the bottom. Hide the multiplayer join chrome — there's nobody to invite. */
.solo-dock { flex:0 0 46vh; min-height:0; border-top:4px solid var(--ink); background:var(--cream); overflow:hidden; }
.solo-dock iframe { width:100%; height:100%; border:0; display:block; }
body.solo .join-hint, body.solo #hb-code, body.solo #btn-invite { display:none; }
/* Shorter board / taller controller on tall (portrait) screens. */
@media (orientation:portrait) { .solo-dock { flex-basis:52vh; } }
#stagefit { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:20px; padding:18px; transform-origin:center center; }

/* ── Lobby ──────────────────────────────────────────────────────────────── */
.lobby-hero { text-align:center; }
.lobby-hero h1 { font-size:clamp(2.4rem,6vw,4.4rem); color:var(--white); line-height:.88; }
.lobby-hero h1 em { color:var(--yellow); font-style:italic; }
.join-callout { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; margin:14px 0 6px; }
.join-callout .join-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.join-callout .join-qr { border-radius:var(--r-md); background:#fff; padding:10px; border:4px solid var(--ink);
  box-shadow:var(--shadow); display:block; }
.join-callout .join-lines { display:flex; flex-direction:column; gap:12px; }
.join-callout .big-code { font-family:var(--mono); font-weight:800; font-size:clamp(3rem,12vw,7rem);
  letter-spacing:.1em; color:var(--yellow); }
.join-callout .url { font-size:clamp(1.15rem,3vw,1.7rem); color:#e4dffb; }
.join-callout .url b { color:var(--white); }

.player-grid { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:1100px; }
.pcard { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 18px; border-radius:var(--r-md);
  background:var(--paper); color:var(--ink); border:4px solid var(--pc,var(--purple));
  box-shadow:var(--shadow-sm); min-width:120px; animation:pop .3s ease; position:relative; }
.pcard .ava { font-size:2.4rem; }
.pcard .nm { font-weight:900; font-size:1.05rem; }
.pcard .st { font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.pcard.ready .st { color:var(--good); }
.pcard.off { opacity:.5; filter:grayscale(.6); }
.pcard .kick { position:absolute; top:-10px; right:-10px; background:var(--bad); border:2px solid var(--ink); color:#fff;
  width:28px; height:28px; border-radius:50%; cursor:pointer; font-weight:900; display:none; }
.host-cankick .pcard:hover .kick { display:block; }
@keyframes pop { from{ transform:scale(.7); opacity:0; } to{ transform:none; opacity:1; } }

.empty-slots { color:#ded8f7; font-weight:900; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }

/* ── Game select — printed game-box cards ───────────────────────────────── */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; max-width:1000px; width:100%; }
.gcard { position:relative; text-align:left; cursor:pointer; color:var(--ink);
  background:var(--gc,var(--coral)); border:4px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s; overflow:hidden; }
.gcard:hover { transform:translate(-3px,-7px) rotate(var(--tilt,-1deg)); box-shadow:var(--shadow-lg); }
/* Cycle the theme's accents so a row of games reads like a shelf of game boxes. */
.gcard:nth-child(6n+1) { --gc:var(--coral);  --tilt:-1deg; }
.gcard:nth-child(6n+2) { --gc:var(--yellow); --tilt:1deg; }
.gcard:nth-child(6n+3) { --gc:var(--mint);   --tilt:-1deg; }
.gcard:nth-child(6n+4) { --gc:var(--blue);   --tilt:1deg; }
.gcard:nth-child(6n+5) { --gc:var(--lilac);  --tilt:-1deg; }
.gcard:nth-child(6n+6) { --gc:var(--pink);   --tilt:1deg; }
.gcard .emoji { font-size:2.6rem; }
.gcard h3 { font-size:1.7rem; margin-top:6px; letter-spacing:-.035em; }
.gcard .meta { color:rgba(23,20,44,.68); font-size:.66rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.gcard.soon { opacity:.5; cursor:not-allowed; }
.gcard.soon:hover { transform:none; box-shadow:var(--shadow); }
.gcard-howto { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.5); border:2px solid var(--ink); color:var(--ink); font-weight:900; font-size:.9rem; cursor:pointer; z-index:2; }
.gcard-howto:hover { background:var(--ink); color:var(--white); }

/* ── How-to-play intro screen ───────────────────────────────────────────── */
.howto { max-width:780px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
/* Paddy stands beside the how-to card, anchored to the screen edge so his
   walk-in comes from off stage rather than through the text. Overflow stays
   hidden on #stagefit, so the start of the walk is genuinely off screen. */
.howto.with-paddy { position:relative; }
.howto-paddy { position:absolute; left:-250px; bottom:-30px; }
.countdown-paddy { position:absolute; left:34px; bottom:10px; }
.lb-paddy { position:absolute; right:20px; bottom:0; }
@media (max-width:1100px){ .howto-paddy, .countdown-paddy, .lb-paddy { display:none; } }
.howto-emoji { font-size:4.6rem; line-height:1; }
.howto h1 { font-size:clamp(2rem,4.6vw,3.4rem); margin:2px 0 16px; color:var(--white); }
.howto-steps { text-align:left; max-width:640px; width:100%; display:grid; gap:14px; list-style:none; padding:0; margin:0 0 8px;
  counter-reset:step; font-size:clamp(1.05rem,2.2vw,1.45rem); font-weight:600; line-height:1.45; color:#f0edfd; }
.howto-steps li { position:relative; padding-left:56px; }
.howto-steps li:before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-3px; width:38px; height:38px;
  border-radius:50%; background:var(--yellow); color:var(--ink); border:3px solid var(--ink);
  font-weight:900; font-size:1.05rem; display:grid; place-items:center; }

/* ── Categorized game select ────────────────────────────────────────────── */
.lobby-hero.compact h1 { font-size:clamp(1.8rem,4vw,2.8rem); }
.lobby-hero.compact { margin-bottom:6px; }
.cat-list { display:flex; flex-direction:column; gap:26px; max-width:1040px; width:100%; }
.cat-section { width:100%; }
.cat-head { font-family:var(--font); font-size:.76rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase;
  color:var(--yellow); margin:0 0 14px; text-align:left; display:flex; align-items:center; gap:8px;
  border-bottom:2px solid rgba(255,255,255,.25); padding-bottom:8px; }
.cat-section .game-grid { max-width:none; }

/* ── Party Points strip (shown between games) ───────────────────────────── */
.party-strip { width:100%; max-width:1040px; background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  padding:14px 18px; margin:2px 0 20px; }
.party-strip-title { font-weight:900; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:10px; color:var(--ink-soft); }
.party-strip-row { display:flex; flex-wrap:wrap; gap:8px; }
.party-chip { display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill); background:var(--white);
  color:var(--ink); border:2px solid var(--pc,var(--purple)); font-weight:800; }
.party-chip.lead { box-shadow:0 0 0 3px var(--yellow) inset; }
.party-chip .pc-rank { font-size:.75rem; color:var(--ink-mute); font-weight:900; }
.party-chip .ava { font-size:1.15rem; }
.party-chip .pc-name { font-weight:900; }
.party-chip .pc-pts { font-weight:900; color:var(--coral); margin-left:2px; }

/* ── Host control drawer ────────────────────────────────────────────────── */
.drawer-scrim { position:fixed; inset:0; background:rgba(23,20,44,.55); z-index:40; display:none; }
.drawer-scrim.open { display:block; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:min(360px,90vw); background:var(--cream); color:var(--ink);
  border-left:4px solid var(--ink); z-index:50; transform:translateX(100%); transition:transform .2s;
  padding:22px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.drawer.open { transform:none; }
.drawer h2 { font-size:1.6rem; }
.drawer .sect { border-top:2px solid var(--line-soft); padding-top:12px; margin-top:6px; }
.drawer .kick-list { display:flex; flex-direction:column; gap:8px; }
.drawer .kick-row { display:flex; align-items:center; gap:8px; }

/* ── The game board ──────────────────────────────────────────────────────────
   Game screens sit on a cream board over the purple world — the same cream
   content surface the theme uses between its purple hero and its dark steps
   section. Everything inside inherits ink text, so game components share one
   set of colours with the phone. The lobby and game picker are exempt: they
   draw straight onto the world. */
body.in-game #stagefit {
  background:var(--cream); color:var(--ink);
  border:4px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:min(1180px, calc(100% - 40px)); padding:30px 34px;
}
body.in-game #stagefit h1,
body.in-game #stagefit h2,
body.in-game #stagefit h3 { color:var(--ink); }
body.in-game #stagefit h1 em,
body.in-game #stagefit h2 em { color:var(--coral); }
/* Paper on cream is too quiet — panels on the board go white so they separate. */
body.in-game #stagefit .card { background:var(--white); }

/* ── Full-bleed games ───────────────────────────────────────────────────────
   A wide, edge-to-edge game (Blast Borough's 1800x850 battlefield) drops the
   centred cream board entirely and fills the whole stage. Without this the wide
   canvas was object-fit:contain'd into the 1180px board and rendered as a small
   letterboxed strip. host.js also skips scale-to-fit for these, so the iframe's
   own 100%x100% sizing is what fills the screen. */
body.game-fullbleed .stage { padding:0; align-items:stretch; justify-content:stretch; }
body.game-fullbleed #stagefit {
  width:100% !important; height:100%; max-width:none !important;
  padding:0 !important; gap:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; transform:none !important;
}
body.game-fullbleed .bb-host-wrap { width:100%; height:100%; }
body.game-fullbleed .bb-frame {
  width:100% !important; height:100% !important;
  min-height:0 !important; border-radius:0 !important;
}

/* ── Rotation queue ─────────────────────────────────────────────────────────
   Shown on the game picker so the room can see who is next in line for a seat
   when a game holds fewer players than are present. */
.queue-strip { width:100%; max-width:1040px; background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  padding:12px 16px; margin:2px 0 18px; }
.queue-title { font-weight:900; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:9px; }
.queue-row { display:flex; flex-wrap:wrap; gap:8px; }
.queue-chip { display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--white); border:2px solid var(--pc,var(--purple)); font-weight:800; font-size:.92rem; }
.queue-chip.first { box-shadow:0 0 0 3px var(--yellow) inset; }
.queue-chip .ava { font-size:1.05rem; }