/* Host / shared-screen layout — optimized for widescreen, readable across a room. */
/* 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; }

.hostbar { display:flex; align-items:center; gap:20px; padding:14px 26px; background:rgba(10,5,30,.55);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20; }
.hostbar .brand { font-weight:800; font-size:1.3rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hostbar .spacer { flex:1; }
.hostbar .join-hint { text-align:right; line-height:1.15; }
.hostbar .join-hint .u { font-weight:800; font-size:1.05rem; }
.hostbar .code { font-family:var(--mono); font-weight:800; font-size:2rem; letter-spacing:.28em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gear { font-size:1.5rem; background:none; border:none; cursor:pointer; color:var(--ink); }

/* 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:20px; }
.start-gate .logo-xl { font-size:clamp(3rem,9vw,5.5rem); font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.start-gate p { max-width:520px; font-size:1.2rem; }
.start-gate .btn { font-size:1.5rem; padding:1.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; }
#stagefit { 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(2rem,5vw,3.4rem); }
.join-callout { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; margin:10px 0 6px; }
.join-callout .big-code { font-family:var(--mono); font-weight:800; font-size:clamp(3rem,12vw,7rem); letter-spacing:.1em;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.join-callout .url { font-size:clamp(1.2rem,3vw,1.8rem); color:var(--ink-dim); }
.join-callout .url b { color:var(--ink); }

.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(--card); border:2px solid var(--pc,#7c4dff); min-width:120px; animation:pop .3s ease; position:relative; }
.pcard .ava { font-size:2.4rem; }
.pcard .nm { font-weight:800; font-size:1.1rem; }
.pcard .st { font-size:.75rem; font-weight:700; }
.pcard.ready .st { color:var(--good); }
.pcard.off { opacity:.5; filter:grayscale(.6); }
.pcard .kick { position:absolute; top:-8px; right:-8px; background:var(--bad); border:none; color:#fff; width:26px; height:26px;
  border-radius:50%; cursor:pointer; font-weight:800; 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:var(--ink-mute); font-weight:700; }

/* Game select */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; max-width:1000px; width:100%; }
.gcard { text-align:left; cursor:pointer; border:2px solid var(--line); transition:transform .1s, border-color .15s; }
.gcard:hover { transform:translateY(-4px); border-color:var(--brand); }
.gcard .emoji { font-size:2.6rem; }
.gcard h3 { font-size:1.4rem; margin-top:6px; }
.gcard .meta { color:var(--ink-mute); font-size:.85rem; font-weight:700; }
.gcard.soon { opacity:.55; cursor:not-allowed; }
.gcard.soon:hover { transform:none; border-color:var(--line); }

/* Host control drawer */
.drawer-scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); 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(--bg-1); border-left:1px solid var(--line);
  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.3rem; }
.drawer .sect { border-top:1px solid var(--line); 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; }