/* ============================================================
   Room setup — the page you land on from a thumbnail.
   One settings engine, three layouts, switched by ?layout=
   ============================================================ */

.stage{ position:relative; min-height:100svh; overflow:hidden; }
.plate{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%; }

/* the primary action sits with the room it starts, not at the foot of the page */
.room-go{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.room-go .sum{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); }
.room-go .sum b{ color:var(--fg); font-weight:400; }
/* ---------- sections: room, then rules ---------- */
.sec{ display:flex; flex-direction:column; gap:18px; }
.sec + .sec{ margin-top:clamp(26px,3vw,36px); padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid rgba(255,255,255,.13); }
.sec-h{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; }
.sec-h h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 700; }
.sec-sub{ margin:5px 0 0; font-size:12.5px; color:var(--fg-3); max-width:46ch; }
.sec-acts{ display:flex; gap:7px; flex-wrap:wrap; }

/* one row: title, the counts, and the invite button */
.room-bar{ display:flex; align-items:flex-end; gap:clamp(16px,2.6vw,34px); flex-wrap:wrap; }
.room-bar h2{ margin-right:auto; line-height:1.1; font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.03em; }
.room-bar .f{ gap:7px; }
.room-bar .invite-btn{ margin-bottom:2px; }
.invite-btn.on{ border-color:rgba(255,255,255,.4); color:var(--fg); }
.invite-btn b{ display:inline-grid; place-items:center; min-width:18px; height:18px;
  margin-left:7px; padding:0 5px; border-radius:9px; background:var(--fg); color:#000;
  font-size:10.5px; font-weight:700; }
.invite-open{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-radius:5px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); }
.invite-open .f-note{ margin:0; max-width:40ch; }
@media(max-width:680px){ .room-bar h2{ width:100%; margin-right:0; } }

/* Bands rather than one justified row. Growing the items spread them to the
   far edges of the panel, which read as unrelated controls; a fixed rhythm,
   left aligned, reads as a set. min-content means a segmented control can never
   be given less room than its labels need. */
.rules-grid{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,26px); }
.band{ display:flex; flex-wrap:wrap; gap:20px clamp(28px,3.4vw,52px); align-items:flex-start; }
.band > .f{ flex:0 1 auto; min-width:min-content; }
.band-toggles{ gap:16px clamp(28px,3.4vw,52px); }
.band-toggles > .f-toggle{ align-items:center; }
.rules-grid > .f-cards{ width:100%; }

/* the rules most people never touch */
details.adv{ border-top:1px solid rgba(255,255,255,.11); padding-top:16px; }
details.adv summary{ list-style:none; cursor:pointer; display:inline-flex;
  align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); transition:color .18s; }
details.adv summary::-webkit-details-marker{ display:none; }
details.adv summary:hover{ color:var(--fg); }
/* the glyph never centres reliably inside a small box across fonts, so the
   plus is drawn with two gradient bars instead — always dead centre */
details.adv summary::after{ content:""; width:17px; height:17px; border-radius:3px;
  border:1px solid rgba(255,255,255,.22); flex:0 0 auto;
  background:linear-gradient(currentColor,currentColor) center/7px 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 7px no-repeat; }
details.adv[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/7px 1px no-repeat; }
/* Advanced uses the same bands. Rows of hairlines inside an already-bordered
   disclosure inside an already-bordered section read as nested boxes; spacing
   separates these perfectly well. */
.adv-grid{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,26px); margin-top:18px; }
.adv-grid .f{ display:flex; }
.adv-grid .band > .f{ flex-direction:column; }
.adv-grid .band-toggles > .f-toggle{ flex-direction:row; }

/* ---------- seat roster ---------- */
.ghost-btn{ padding:8px 14px; border-radius:3px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  font-size:12.5px; font-weight:500; color:var(--fg-2); transition:.18s var(--ease); }
.ghost-btn:hover{ border-color:rgba(255,255,255,.4); color:var(--fg);
  background:rgba(255,255,255,.09); }

.seats{ display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
.seat-team{ display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; }
.seat-team-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,228,198,.55); }
.seat-team.mine .seat-team-tag{ color:#e4bd68; }
.seat-card{ display:flex; flex-direction:column; align-items:center; gap:9px;
  /* min-width:0 is load-bearing: grid items default to min-width:auto, so the
     480px portrait would otherwise force every track to 480px wide */
  min-width:0;
  padding:18px 10px 14px; border-radius:6px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  transition:border-color .2s, background .2s; }
.seat-card{ position:relative; }
/* one plate size for every seat. Deliberately NOT called .plate: that class is
   already the hero artwork, and the collision sized every avatar to the panel. */
.seat-card .seat-plate{ width:100%; max-width:100%; aspect-ratio:1; border-radius:4px; display:grid;
  place-items:center; overflow:hidden; }
/* The portraits ship with a flat cream ground, which reads as a cutout floating
   on nothing. The cream is knocked out (see assets/agents) and each game sets
   --seat-bg to a ground drawn from its own plate, so the cast stands in the
   world of the game rather than on a sticker. */
.seat-card .seat-plate{ background:var(--seat-bg,
  radial-gradient(72% 62% at 50% 28%, #1e4590 0%, #0c1c46 62%, #060e26 100%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),
             inset 0 -20px 30px -20px rgba(0,0,0,.85); }
.seat-card .seat-plate.portrait{ object-fit:contain; padding:3px; }
.seat-card .seat-plate.person{ color:#f2e4c6;
  font-size:clamp(20px,2vw,27px); font-weight:800; letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 800; }
.seat-card{ padding:10px 10px 14px; }
.seat-card .nm{ font-size:13.5px; font-weight:600; text-align:center; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.seat-card .tag{ font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 7px; border-radius:2px;
  border:1px solid rgba(255,255,255,.16); color:var(--fg-3); }
/* you and your friends read warm, the machines read cold */
.seat-card.you{ border-color:rgba(242,228,198,.42); background:rgba(242,228,198,.07); }
.seat-card.you .tag{ border-color:rgba(242,228,198,.5); color:var(--cream, #f2e4c6); }
.seat-card.agent{ border-color:rgba(120,150,255,.2); background:rgba(80,110,220,.05); }
.seat-card.agent .tag{ border-color:rgba(120,150,255,.3); color:var(--blue-2); }

/* ---------- model picker ----------
   One control at the foot of every AI seat card saying which model will sit
   there; human cards carry a matching plain footer so the row stays level.
   The model reads as a property of the seat, not a second list to reconcile
   with the first. */
.mdl-pick, .mdl-human{ position:relative; z-index:2; display:flex; align-items:center; gap:7px;
  width:100%; min-height:34px; margin-top:2px; padding:6px 8px 6px 9px; border-radius:4px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.34);
  font-size:11.5px; font-weight:500; line-height:1.25; text-align:left; }
.mdl-pick{ color:var(--fg-3); transition:.16s var(--ease); }
.mdl-pick:hover, .mdl-pick[aria-expanded="true"]{ border-color:rgba(255,255,255,.34);
  color:var(--fg); background:rgba(0,0,0,.5); }
.mdl-pick.set{ color:var(--fg); border-color:rgba(120,150,255,.38);
  background:rgba(43,108,255,.12); }
/* dimmed reads as present but not yours yet; still clickable so the tap can explain */
.mdl-pick.locked{ opacity:.55; cursor:default; }
.mdl-pick.locked:hover{ border-color:rgba(255,255,255,.12); color:var(--fg-3); background:rgba(0,0,0,.34); }
/* names wrap to a second line rather than losing their version */
.mdl-pick .mdl-nm{ flex:1; min-width:0; text-wrap:balance;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  overflow-wrap:anywhere; }
.mdl-pick .mdl-dice{ width:14px; height:14px; flex:0 0 auto; opacity:.8; }
.mdl-pick .mdl-chev, .mdl-pick .mdl-lock{ width:11px; height:11px; flex:0 0 auto; opacity:.6;
  transition:transform .16s var(--ease); }
.mdl-pick[aria-expanded="true"] .mdl-chev{ transform:rotate(180deg); }
.mdl-pick:focus{ outline:none; }
.mdl-pick:focus-visible{ outline:2px solid var(--blue-2); outline-offset:-2px; }
.mdl-human{ justify-content:center; color:rgba(242,228,198,.7);
  border-color:rgba(242,228,198,.22); background:rgba(242,228,198,.05);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

/* one dot per family: enough to scan a long list, never a logo wall */
.mdl-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#7a7a85;
  box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.mdl-dot[data-fam="Anthropic"]{ background:#d4a27f; }
.mdl-dot[data-fam="OpenAI"]{ background:#f4f4f5; }
.mdl-dot[data-fam="Google"]{ background:#4f8df7; }
.mdl-dot[data-fam="xAI"]{ background:#b9b9c4; }
.mdl-dot[data-fam="Amazon"]{ background:#ff9900; }
.mdl-dot[data-fam="DeepSeek"]{ background:#4d6bfe; }
.mdl-dot[data-fam="Alibaba"]{ background:#ff6a00; }
.mdl-dot[data-fam="Zhipu"]{ background:#5b7cfa; }
.mdl-dot[data-fam="MiniMax"]{ background:#ff4d8d; }
.mdl-dot[data-fam="Mistral"]{ background:#f7931e; }
.mdl-dot[data-fam="Moonshot"]{ background:#7c6cf0; }

/* the menu: a fixed panel like the tooltip, so it is never clipped; it
   hangs under its seat and scrolls inside itself */
.mdl-menu{ position:fixed; z-index:9600; padding:5px; border-radius:6px;
  overflow-y:auto; scrollbar-width:thin;
  background:#0b0b0e; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 70px -24px #000, 0 0 0 1px rgba(0,0,0,.6);
  font-family:var(--ui); color:var(--fg); }
.mdl-opt{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 8px 8px 9px;
  border-radius:4px; text-align:left; color:var(--fg-2); font-size:13px; font-weight:500;
  transition:background .12s; }
.mdl-opt .mdl-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdl-opt .mdl-dice{ width:15px; height:15px; flex:0 0 auto; }
.mdl-opt.act{ background:rgba(255,255,255,.07); color:var(--fg); }
.mdl-opt.sel{ color:var(--fg); }
.mdl-opt .mdl-check{ width:13px; height:13px; flex:0 0 auto; color:var(--blue-2); opacity:0; }
.mdl-opt.sel .mdl-check{ opacity:1; }
.mdl-opt:focus{ outline:none; }

/* ---------- tabs ---------- */
/* Focus rings are drawn OUTSIDE the element by default. On a white pill inside
   a dark track that reads as the button bulging out of its own container, which
   is exactly what it looks like after you click one. Inset the ring instead. */
.seg button:focus, .stp button:focus, .checks button:focus,
.ghost-btn:focus, .sw:focus, .cards button:focus{ outline:none; }
.seg button:focus-visible, .stp button:focus-visible, .checks button:focus-visible,
.ghost-btn:focus-visible, .sw:focus-visible, .cards button:focus-visible{
  outline:2px solid var(--blue-2); outline-offset:-3px; }

/* placed by GG tips(); fixed to the viewport so it cannot be clipped or run
   off the edge */
.tip{ position:fixed; z-index:9500; width:max-content; max-width:min(84vw,300px);
  padding:11px 14px; border-radius:5px; pointer-events:none;
  background:#0b0b0e; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 24px 60px -24px #000;
  font-family:var(--ui); font-size:12.5px; line-height:1.5; letter-spacing:0;
  text-transform:none; color:rgba(255,255,255,.82); }
.tip[hidden]{ display:none; }

/* ---------- hover help for jargon ----------
   Opens downward so it is less likely to clip against the top of a scrolling
   panel. Pure CSS: the text lives in data-help. */
.term{ position:relative; border-bottom:1px dotted rgba(255,255,255,.45); cursor:help; }

/* Option buttons carry help too, but take no marker: a dotted underline across
   a segment label fights the pill, and the tooltip is the affordance. They must
   stay optically centred in their column, so nothing may occupy inline space
   beside the label. */
.seg button.term{ border-bottom:0; }

/* ---------- shared controls ---------- */
.f{ display:flex; flex-direction:column; gap:9px; }
.f-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.68); }
.f-note{ margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.66);
  max-width:44ch; }
.f-note.standalone{ margin-top:-4px; }

/* segmented control */
/* grid rather than flex: equal columns sized to the widest label, so the
   segments stay even, while the track still shrinks to its content instead of
   stretching across whatever column it lands in */
.seg{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  width:fit-content; max-width:100%; gap:3px; padding:3px;
  border-radius:7px; background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.seg button{ padding:9px 16px; border-radius:4px; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--fg-2); transition:.18s var(--ease); }
.seg button:hover{ color:var(--fg); background:rgba(255,255,255,.06); }
.seg button.on{ background:var(--fg); color:#000;
  box-shadow:0 1px 3px rgba(0,0,0,.5); }

/* stepper */
.stp{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:7px;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5); align-self:flex-start; }
.stp button{ width:34px; height:34px; border-radius:4px; color:var(--fg-2);
  transition:.16s; font-size:0; position:relative; }
.stp button::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(currentColor,currentColor) center/9px 1.4px no-repeat; }
.stp button[data-plus]::before{
  background:linear-gradient(currentColor,currentColor) center/9px 1.4px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.4px 9px no-repeat; }
.stp button:hover:not(:disabled){ background:rgba(255,255,255,.12); color:var(--fg); }
.stp button:disabled{ opacity:.25; cursor:default; }
.stp b{ min-width:52px; text-align:center; font-size:16px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.stp b span{ font-size:11px; font-weight:400; color:var(--fg-3); margin-left:3px; }

/* toggle */
.f-toggle{ flex-direction:row; align-items:flex-start; gap:14px; }
.sw{ flex:0 0 auto; width:40px; height:23px; border-radius:99px; position:relative;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.12);
  transition:background .22s var(--ease); margin-top:1px; }
.sw i{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--fg-2); transition:.22s var(--ease); }
.sw.on{ background:var(--blue); border-color:var(--blue); }
.sw.on i{ transform:translateX(17px); background:#fff; }
.f-toggle > div{ display:flex; flex-direction:column; gap:5px; }
.f-toggle .f-label{ color:var(--fg); letter-spacing:.02em; text-transform:none;
  font-family:var(--ui); font-size:14px; font-weight:500; }

/* multi-select, for the roles in the bag */
.checks{ display:flex; flex-wrap:wrap; gap:6px; }
.checks button{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px 8px 10px;
  border-radius:3px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); font-size:13px; font-weight:500;
  color:var(--fg-2); transition:.18s var(--ease); }
.checks button:hover{ border-color:rgba(255,255,255,.3); color:var(--fg); }
.checks button i{ width:15px; height:15px; border-radius:3px; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.28); transition:.18s var(--ease); }
.checks button.on{ border-color:var(--blue); background:rgba(43,108,255,.14); color:var(--fg); }
/* a real tick, drawn from two borders — the gradient version never read as one */
.checks button i{ position:relative; }
.checks button.on i{ background:var(--blue); border-color:var(--blue); }
.checks button.on i::after{ content:""; position:absolute; left:4.6px; top:1.4px;
  width:3.6px; height:7.4px; border:solid #fff; border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg); }
.checks button.term{ border-bottom-width:1px; }

/* option cards (scripts, stakes) */
.cards{ display:grid; gap:6px; }
.rules-grid .f-cards{ grid-column:1 / -1; }
.cards button{ display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border-radius:3px; text-align:left; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); transition:.18s var(--ease); }
.cards button:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.cards button.on{ border-color:var(--blue); background:rgba(43,108,255,.14); }
.cards b{ font-size:13.5px; font-weight:600; }
.cards span{ font-size:12px; color:var(--fg-3); line-height:1.45; }

/* seat mix bar */
.mix{ display:flex; gap:3px; }
.mix i{ flex:1; height:6px; border-radius:1px; }
.mix i.h{ background:var(--fg); } .mix i.a{ background:var(--blue); }
.mix-key{ display:flex; gap:16px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.mix-key b{ color:var(--fg); font-weight:400; }
.mix-key .a b{ color:var(--blue-2); }

/* invite */
.code{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  height:36px; padding:0 4px 0 11px; max-width:100%; border-radius:4px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  transition:border-color .18s; }
.code:hover{ border-color:rgba(255,255,255,.3); }
.code .url{ font-family:var(--mono); font-size:12.5px; color:var(--fg-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.code .url b{ color:var(--fg); font-weight:500; letter-spacing:.08em; }
.code button{ flex:0 0 auto; width:28px; height:28px; border-radius:3px;
  display:grid; place-items:center; color:var(--fg-2);
  background:rgba(255,255,255,.08); transition:.16s var(--ease); }
.code button:hover{ background:var(--fg); color:#000; }
.code button svg{ width:14px; height:14px; }
.code.copied button{ background:var(--blue); color:#fff; }

/* group */
.grp{ display:flex; flex-direction:column; gap:20px; }
.grp-h{ display:flex; align-items:center; gap:12px; }
.grp-h h3{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--fg-2); white-space:nowrap; }
.grp-h hr{ flex:1; border:0; height:1px; background:rgba(255,255,255,.1); margin:0; }

/* summary + play */
.go{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.go .sum{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); }
.go .sum b{ color:var(--fg); font-weight:400; }

/* ============================================================
   LAYOUT — panel: a centred card over the art. Console's two columns
   and the rail's translucency, but narrower than the screen and set
   high, so the art reads around all four edges.
   ============================================================ */
[data-layout="panel"] .stage{ min-height:100svh; }
/* The plate is fixed so the art holds while the panel scrolls over it. Every
   layer pinned to a point ON the plate has to be fixed with it. Filtered image
   children stay absolute inside their fixed motion wrappers so their cached
   filter surfaces remain reusable. */
[data-layout="panel"] .plate,
[data-layout="panel"] .glow-motion,
[data-layout="panel"] .spot{ position:fixed; }
[data-layout="panel"] .veil{ position:fixed;
  background:radial-gradient(120% 80% at 50% 22%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.9) 100%),
             linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 20%, transparent 36%); }
/* same box as the panel below, so the title and the How to play button line up
   with the panel's left edge instead of sitting inset from it */
[data-layout="panel"] .art-copy{ position:relative; z-index:5;
  width:min(1040px, calc(100% - 2 * var(--edge))); max-width:none;
  margin:clamp(44px,7vh,84px) auto 0; padding:0;
  /* the plate is at its brightest right here, so the copy carries its own shadow */
  text-shadow:0 2px 22px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.8); }
[data-layout="panel"] .art-copy .name{ font-size:clamp(46px,8.6vw,124px); }
[data-layout="panel"] .panel{ position:relative; z-index:5;
  width:min(1040px, calc(100% - 2 * var(--edge))); max-width:none; margin:18px auto 90px;
  padding:clamp(22px,2.8vw,34px);
  background:rgba(6,6,9,.7); backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.13); border-radius:6px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
/* one vertical flow: the room on top, the rules underneath */
[data-layout="panel"] .panel-grid{ display:block; }
/* the panel's own footer is retired: Start room now lives in the room section,
   directly under its heading */
[data-layout="panel"] .panel-foot{ display:none; }
[data-layout="panel"] .rail, [data-layout="panel"] .console,
[data-layout="panel"] .chips, [data-layout="panel"] .go-bar{ display:none; }
[data-layout="panel"] .top{ position:fixed; }

[data-layout="rail"] .panel, [data-layout="console"] .panel,
[data-layout="inline"] .panel{ display:none; }

/* ============================================================
   LAYOUT A — rail: art full bleed, settings docked right
   ============================================================ */
[data-layout="rail"] .veil{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 34%, transparent 55%); }
[data-layout="rail"] .art-copy{ position:absolute; left:var(--edge); bottom:clamp(34px,6vh,64px);
  z-index:2; max-width:min(46vw,520px); }
[data-layout="rail"] .rail{
  position:absolute; top:0; right:0; bottom:0; width:min(94vw,420px); z-index:5;
  background:rgba(4,4,6,.8); backdrop-filter:blur(26px);
  border-left:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column;
}
[data-layout="rail"] .rail-body{ flex:1; overflow-y:auto; padding:26px var(--pad) 24px;
  display:flex; flex-direction:column; gap:30px; }
[data-layout="rail"] .rail-foot{ padding:18px var(--pad) 22px;
  border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:14px; }
[data-layout="rail"] .rail{ --pad:26px; }
[data-layout="rail"] .rail-foot .play{ width:100%; }
[data-layout="rail"] .console, [data-layout="rail"] .chips{ display:none; }

/* ============================================================
   LAYOUT B — console: art as banner, settings below
   ============================================================ */
[data-layout="console"] .stage{ min-height:0; height:min(56vh,520px); }
[data-layout="console"] .veil{ position:absolute; inset:0;
  background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 26%, transparent 62%),
             linear-gradient(90deg, rgba(0,0,0,.6) 0%, transparent 48%); }
[data-layout="console"] .art-copy{ position:absolute; left:var(--edge);
  bottom:clamp(22px,4vh,40px); z-index:2; max-width:min(60vw,640px); }
[data-layout="console"] .console{ max-width:1180px; margin:0 auto;
  padding:clamp(26px,4vw,44px) var(--edge) 140px; }
[data-layout="console"] .go{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:14px max(var(--edge), env(safe-area-inset-right, 0px))
           calc(14px + env(safe-area-inset-bottom, 0px))
           max(var(--edge), env(safe-area-inset-left, 0px));
  background:rgba(4,4,6,.9); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.12); justify-content:space-between; }
[data-layout="console"] .rail, [data-layout="console"] .chips{ display:none; }

/* ============================================================
   LAYOUT C — inline: chips over the art, minimum chrome
   ============================================================ */
[data-layout="inline"] .veil{ position:absolute; inset:0;
  background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.2) 48%, transparent 68%); }
[data-layout="inline"] .art-copy{ position:absolute; left:var(--edge);
  bottom:clamp(200px,30vh,290px); z-index:2; max-width:min(52vw,560px); }
[data-layout="inline"] .chips{ position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:0 var(--edge) clamp(26px,4vh,46px); display:flex; flex-direction:column; gap:18px; }
[data-layout="inline"] .chip-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
[data-layout="inline"] .chip{ display:inline-flex; align-items:center; gap:10px;
  padding:9px 15px; border-radius:99px; border:1px solid rgba(255,255,255,.18);
  background:rgba(6,6,8,.62); backdrop-filter:blur(14px); transition:.18s var(--ease); }
[data-layout="inline"] .chip:hover{ border-color:rgba(255,255,255,.5); background:rgba(6,6,8,.85); }
[data-layout="inline"] .chip .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); }
[data-layout="inline"] .chip .v{ font-size:13.5px; font-weight:500; }
[data-layout="inline"] .chip .step{ display:inline-flex; gap:2px; margin-left:2px; }
[data-layout="inline"] .chip .step button{ width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.12); font-size:13px; line-height:1; color:var(--fg-2); }
[data-layout="inline"] .chip .step button:hover{ background:var(--fg); color:#000; }
[data-layout="inline"] .rail, [data-layout="inline"] .console{ display:none; }

/* ---------- art-side copy, shared ---------- */
.art-copy .name{ font-size:clamp(30px,6vw,86px); }
/* one prominent way in, with the pitch beside it */
.art-copy .links{ display:flex; gap:22px; margin-top:22px; align-items:center; flex-wrap:wrap; }
.howto{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto;
  height:48px; padding:0 26px; border-radius:4px;
  border:1px solid rgba(255,255,255,.38); background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px); font-size:15px; font-weight:600;
  transition:.18s var(--ease); }
.howto:hover{ background:var(--fg); color:#000; border-color:var(--fg); }
.art-copy .tagline{ margin:0; font-size:15px; line-height:1.45; max-width:38ch;
  color:rgba(255,255,255,.88); }

.top{ position:absolute; top:0; left:0; right:0; z-index:9;
  display:flex; align-items:center; gap:20px;
  padding:max(22px, env(safe-area-inset-top, 0px)) max(var(--edge), env(safe-area-inset-right, 0px)) 22px
          max(var(--edge), env(safe-area-inset-left, 0px));
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 100%); }
[data-layout="rail"] .top{ right:min(94vw,420px); }
.top .spacer{ flex:1; }

/* the action bar only belongs to the console layout */
[data-layout="rail"] .go-bar, [data-layout="inline"] .go-bar{ display:none; }

/* inline layout needs the invite somewhere, since chips only carry fields */
.chip-invite{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip-invite .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); }
.chip-invite .code{ height:38px; flex:0 0 auto; min-width:190px; }
.chip-invite .soon-tag{ align-self:center; }

/* ---------- layout switcher (mock chrome, not product) ---------- */
.lay{ position:fixed; left:14px; bottom:14px; z-index:9000; display:flex; gap:1px; padding:5px;
  opacity:.34; transition:opacity .22s;
  background:rgba(10,10,12,.92); border:1px solid var(--line); border-radius:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.lay span{ padding:7px 10px; color:var(--fg-3); }
.lay a{ padding:7px 11px; border-radius:4px; color:var(--fg-3); }
.lay a:hover{ color:var(--fg); background:var(--panel-2); }
.lay a.on{ background:var(--fg); color:#000; }
.lay .sep{ width:1px; align-self:stretch; background:var(--line); margin:0 5px; }
.lay:hover{ opacity:1; }
/* clear of the action bar and the Start button */
[data-layout="console"] .lay, [data-layout="inline"] .lay{ bottom:82px; }
/* keep the mock-kit widget off the Start button */
[data-layout="rail"] .kit{ right:auto; left:14px; bottom:62px; }
[data-layout="inline"] .kit{ bottom:82px; }

.go[hidden], .go-bar[hidden], .room-go[hidden], a.play[hidden], .join-code[hidden]{ display:none; }

@media(max-width:720px){
  .room-go .sum, .go .sum, .invite-btn b, details.adv summary, .f-label,
  .mix-key, .grp-h h3, .seat-card .tag, [data-layout="inline"] .chip .k,
  .chip-invite .k{ font-size:11px; }
}

@media (pointer:coarse){
  .seg button{ min-height:44px; }
  .stp button{ width:44px; height:44px; }
  [data-layout="inline"] .chip .step button{ width:44px; height:44px; }
  .ghost-btn, .howto, .checks button, .cards button, .code button, .sw{
    min-height:44px;
  }
  .sw{ width:44px; height:44px; }
  .sw i{ top:11px; left:4px; width:22px; height:22px; }
  .sw.on i{ transform:translateX(16px); }
  .code{ height:44px; }
  .code button{ width:44px; height:44px; }
  .mdl-pick, .mdl-human{ min-height:44px; }
  .mdl-opt{ min-height:44px; }
}

@media(max-width:900px){
  [data-layout="rail"] .rail{ position:static; width:auto; height:auto;
    border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  [data-layout="rail"] .stage{ min-height:0; height:52svh; }
  [data-layout="rail"] .top{ right:0; }
  [data-layout="rail"] .rail-body{ overflow:visible; }
  [data-layout="inline"] .art-copy{ bottom:auto; top:100px; }
  [data-layout="inline"] .chips{ position:static; padding-top:20px; }
  [data-layout="inline"] .stage{ min-height:0; }
}