/* Orrery Arcade phone controller. Phones only (modern browsers), but kept
   conservative anyway: no :has(), no container queries. */

:root {
  --bg: #060819;
  --panel: rgba(20, 26, 66, 0.86);
  --panel-2: rgba(30, 38, 92, 0.9);
  --line: rgba(160, 180, 255, 0.18);
  --ink: #eef1ff;
  --dim: #9099cc;
  --gold: #ffcf6b;
  --good: #5dff8a;
  --bad: #ff4b5c;
  --c: #38e8ff;
  --me: #38e8ff;
  --display: 'Orbitron', 'Trebuchet MS', sans-serif;
  --body: 'Exo 2', 'Segoe UI', Roboto, sans-serif;
  --r: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 80% at 50% 0%, #121a4a 0%, #070a1d 55%, #04050f 100%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }

/* ---------- app frame ---------- */

.app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; }

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  height: calc(52px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 32, 0.8);
}
.topbar .me {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.topbar .me i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--me);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.topbar .me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .game { flex: 1 1 auto; text-align: right; font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }
.topbar .net { flex: 0 0 auto; width: 10px; height: 10px; margin-left: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.topbar .net.is-off { background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: blink 1s steps(2) infinite; }

.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.connection-note { display: none; flex: 0 0 auto; padding: 12px 16px; color: #fff1d7; background: #4b301c; border-bottom: 1px solid #a9804d; font: 600 14px/1.4 var(--body); text-align: center; }
.connection-note.is-visible { display: block; animation: rise .2s ease both; }
.stage.is-offline { pointer-events: none; opacity: .72; }

@keyframes blink { 50% { opacity: 0.3; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---------- shared building blocks ---------- */

.c-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 100%;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  animation: rise 0.28s ease-out;
}
.c-screen > * + * { margin-top: 14px; }

.c-title { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.15; letter-spacing: 0.02em; }
.c-sub { color: var(--dim); font-size: 17px; line-height: 1.4; }
.c-big { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1; color: var(--c); }
.c-label { font-family: var(--display); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }

.c-btn {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  transition: transform 0.08s ease;
}
.c-btn:active { transform: scale(0.97); }
.c-btn-primary {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), var(--c);
  color: #070a1a;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.c-btn-ghost { border-color: transparent; background: none; color: var(--dim); }
.c-btn[disabled], .c-btn.is-disabled { opacity: 0.4; pointer-events: none; }

.c-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.c-grid-1 { grid-template-columns: 1fr; }

.c-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px;
  border-radius: var(--r);
  border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%), var(--c);
  color: #070a1a;
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, opacity 0.2s ease;
}
.c-choice:active { transform: scale(0.97); }
.c-choice.is-picked { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3); }
.c-choice.is-right { box-shadow: 0 0 0 5px var(--good), 0 0 30px var(--good); }
.c-choice.is-wrong { opacity: 0.35; }
.c-choice.is-disabled { pointer-events: none; opacity: 0.45; }

.c-input {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--body);
  font-size: 20px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.c-input:focus { border-color: var(--c); }

.c-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.c-bar-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--c); transition: width 0.2s linear; }

.c-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.c-wait { color: var(--dim); font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.c-wait::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--c);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- join flow (owned by controller.js) ---------- */

.join-brand { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: 0.08em; }
.join-brand span { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.6em; color: var(--gold); padding-left: 0.6em; }
.code-input { text-transform: uppercase; text-align: center; letter-spacing: 0.5em; font-family: var(--display); font-weight: 900; font-size: 30px; padding-left: calc(18px + 0.5em); }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; }
.swatch {
  width: 46px;
  height: 46px;
  margin: 5px;
  border-radius: 50%;
  background: var(--sw);
  border: 3px solid transparent;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.25);
}
.swatch.is-on { border-color: #fff; box-shadow: 0 0 0 3px var(--sw), inset 0 -6px 12px rgba(0, 0, 0, 0.25); }
.swatch.is-taken { opacity: 0.18; pointer-events: none; }
.opt-row { text-align: left; }
.opt-row .c-label { display: block; margin-bottom: 8px; }
.opt-pills { display: flex; flex-wrap: wrap; margin: -4px; }
.opt-pill { margin: 4px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line); font-family: var(--display); font-size: 14px; }
.opt-pill.is-on { background: var(--c); border-color: transparent; color: #070a1a; font-weight: 700; }
.err { color: var(--bad); font-family: var(--display); font-size: 14px; min-height: 1.2em; }

.lobby-list { display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; }
.lobby-list .c-chip { margin: 5px; border-color: var(--pc); }

.place { font-family: var(--display); font-weight: 900; font-size: 88px; line-height: 1; background: linear-gradient(180deg, #fff6d8, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- cards (shared by card party games) ---------- */

/* Playing card: <button class="pc red" data-card="AH"><b>A</b><i>♥</i></button> */
.hand { display: flex; flex-wrap: nowrap; justify-content: flex-start; padding: 18px 8px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hand .pc:first-child { margin-left: auto; }
.hand .pc:last-child { margin-right: auto; }
.hand .pc + .pc { margin-left: -18px; }
.hand.is-spread .pc + .pc { margin-left: 6px; }
.pc {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 104px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #e9ecf6);
  color: #151a33;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(20, 26, 60, 0.25);
  font-family: 'Trebuchet MS', Arial, sans-serif;
  text-align: left;
  transition: transform 0.12s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.pc b { position: absolute; top: 6px; left: 8px; font-size: 22px; font-weight: 900; line-height: 1; }
.pc i { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-size: 34px; line-height: 1; }
.pc.red { color: #d6263b; }
.pc.big { width: 96px; height: 136px; }
.pc.big b { font-size: 28px; }
.pc.big i { font-size: 46px; }
.pc.back { background: linear-gradient(135deg, #1d2a78, #0b1033); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 0 0 2px #ffcf6b; }
.pc.back b, .pc.back i { display: none; }
.pc.is-playable { box-shadow: 0 0 0 3px var(--good), 0 6px 16px rgba(0, 0, 0, 0.45); }
.pc.is-sel { transform: translateY(-16px); box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 0, 0, 0.5); z-index: 2; }
.pc.is-dim { opacity: 0.45; }

/* Text cards (fill-in-the-blank games). Prompt: .tc.tc-prompt; answers: .tc */
.tc {
  display: block;
  width: 100%;
  min-height: 74px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f4f5fb;
  color: #10132b;
  font-family: var(--body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.tc + .tc { margin-top: 10px; }
.tc:active { transform: scale(0.98); }
.tc.is-sel { box-shadow: 0 0 0 4px var(--c), 0 8px 22px rgba(0, 0, 0, 0.45); }

/* Large touch targets, readable focus, and a reachable first card on small phones. */
button:focus, input:focus, textarea:focus, select:focus { outline: 3px solid #b5eaff; outline-offset: 3px; }
button:disabled { cursor: default; }
.swatch, .opt-pill { transition: transform .15s ease, border-color .18s ease, opacity .18s ease, background-color .18s ease; }
.opt-pill { min-height: 46px; }
.swatch:active, .opt-pill:active { transform: scale(.95); }
.c-screen > .c-sub, .c-title, .tc { overflow-wrap: break-word; }
.stage > .c-screen { width: 100%; max-width: 820px; margin: 0 auto; }
@media (max-width:360px) { .topbar { padding-left: 12px; padding-right: 12px; } .topbar .game { letter-spacing:.04em; font-size:10px; } .c-title { font-size:25px; } .c-screen { padding-left:14px; padding-right:14px; } }
@media (max-height:500px) and (orientation:landscape) { .topbar { height:40px; } .c-screen { justify-content:flex-start; padding-top:14px; } .c-screen > * + * { margin-top:12px; } .c-btn { min-height:48px; } }
@media (prefers-reduced-motion:reduce) { .c-screen, .c-wait:before, .topbar .net.is-off, .connection-note.is-visible { animation:none; } .c-btn, .pc, .tc, .swatch, .opt-pill { transition:none; } }
.tc.is-dim { opacity: 0.4; }
.tc-prompt { background: #10132b; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.18); font-size: 20px; }
.tc-prompt u { text-decoration: none; display: inline-block; min-width: 3.2em; border-bottom: 3px solid var(--c); }
.tc-list { text-align: left; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.tc-grid .tc + .tc { margin-top: 0; }
.tc-word { min-height: 56px; text-align: center; font-size: 17px; display: flex; align-items: center; justify-content: center; }

/* Chips / betting */
.chips { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--gold); }
.bet-row { display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; }
.bet-row .c-btn { width: auto; flex: 1 1 28%; margin: 5px; min-height: 54px; padding: 12px 8px; font-size: 16px; }

/* A keyboard changes the app frame only while an editable field is focused. */
body.phone-keyboard .app { top:var(--phone-viewport-top,0px); bottom:auto; height:var(--phone-viewport-height,100%); }

/* Explanation consent stays a single bounded screen, never game controls. */
.c-screen.c-guide-wait { height:100%; min-height:0; padding:18px; gap:16px; justify-content:center; overflow:hidden; }
.c-guide-wait > * + * { margin-top:0; }
.cg-head,.cg-watch,.cg-vote { min-width:0; width:100%; }
.cg-kicker { color:#8fcbd9; text-transform:uppercase; letter-spacing:.13em; font:800 11px/1.3 var(--body); }
.cg-game { margin:6px 0 0; color:#e8efff; font:800 clamp(19px,5vw,26px)/1.2 var(--display); overflow-wrap:anywhere; }
.cg-screen { display:grid; place-items:center; width:62px; height:42px; margin:0 auto 14px; border:2px solid #73c6da; border-radius:9px; background:linear-gradient(140deg,#153851,#17233e); box-shadow:0 6px 30px #35c1d512; color:#c1f2ff; font:800 26px/1 var(--body); }
.cg-heading { margin:0; color:#f1f5ff; font:800 22px/1.2 var(--body); }
.cg-watch > p { margin:7px 0 0; color:#a6c2d8; font:500 13px/1.35 var(--body); }
.cg-progress { margin:0 0 8px; color:#a8c9db; font:700 13px/1.3 var(--body); }
.cg-skip { width:100%; min-height:48px; padding:10px 12px; border:1px solid #5d9bae; border-radius:14px; color:#d9f6ff; background:#193247; font:800 15px/1.25 var(--body); transition:background-color .16s,border-color .16s,color .16s; }
.cg-skip:focus-visible { outline:3px solid #ffda88; outline-offset:3px; }
.cg-skip:disabled { cursor:default; color:#a9bdcc; border-color:#42566d; background:#172638; }
.cg-status { min-height:34px; margin:10px 0 0; color:#9cb9ce; font:500 12px/1.35 var(--body); }
.c-guide-wait.is-voted .cg-progress { color:#9de7ba; }
.c-guide-wait.is-complete .cg-screen { color:#b9efd0; border-color:#79b99a; }
@media(max-height:500px) and (orientation:landscape) {
  .c-screen.c-guide-wait { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:center; gap:10px 20px; padding:12px 18px; }
  .cg-head { grid-column:1/-1; }
  .cg-game { font-size:19px; margin-top:4px; }
  .cg-watch { grid-column:1; }
  .cg-vote { grid-column:2; }
  .cg-heading { font-size:19px; }
  .cg-screen { width:48px; height:32px; margin-bottom:8px; font-size:22px; }
  .cg-watch > p { font-size:12px; margin-top:5px; }
  .cg-status { font-size:11px; min-height:30px; margin-top:7px; }
  .cg-skip { min-height:44px; font-size:14px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) { .cg-skip { transition:none; } }

/* Bounded shared phone shell. These selectors never match game controllers. */
.c-screen.c-shared-lobby { height:100%; min-height:0; padding:12px; gap:12px; justify-content:center; }
.c-shared-lobby > * + * { margin-top:0; }
.cs-lobby-head { flex:0 0 auto; min-width:0; }
.cs-lobby-head .c-title { margin:6px 0; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.cs-lobby-head .c-sub,.cs-lobby-action .c-sub { margin:0; font-size:15px; line-height:1.3; }
.cs-lobby-roster { flex:0 0 auto; min-width:0; }
.cs-roster-label { font:600 12px/1.3 var(--body); color:var(--dim); margin-bottom:7px; }
.cs-roster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cs-roster-player { display:flex; gap:7px; align-items:center; min-height:46px; padding:8px; border:1px solid var(--pc); border-radius:13px; background:#ffffff05; min-width:0; }
.cs-roster-player i { flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:var(--pc); }
.cs-roster-player span { font:600 13px/1.25 var(--body); overflow-wrap:anywhere; text-align:left; }
.cs-roster-pages { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--dim); }
.cs-roster-pages button { min-height:44px; font-size:22px; background:var(--panel); border:1px solid var(--line); border-radius:11px; }
.cs-roster-pages button:disabled { opacity:.3; }
.cs-lobby-action { flex:0 0 auto; }
.cs-lobby-action .c-btn { min-height:48px; padding:10px; font-size:16px; }
.cs-lobby-action .c-btn + .c-sub { margin-top:8px; }
.c-screen.c-shared-results { height:100%; min-height:0; padding:14px; gap:12px; justify-content:center; }
.c-shared-results > * + * { margin-top:0; }
.cs-result-head .c-label { line-height:1.4; letter-spacing:.12em; overflow-wrap:anywhere; }
.cs-result-standing .place { font-size:64px; line-height:1.1; }
.cs-result-standing .cs-team-place { font-size:30px; line-height:1.2; }
.cs-result-standing .c-sub { margin-top:6px; font-size:16px; }
.cs-result-score { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cs-result-score strong { font:900 36px/1.1 var(--display); color:var(--c); overflow-wrap:anywhere; }
.cs-result-score span { font:500 12px var(--body); color:var(--dim); }
.cs-result-line { margin:0; font:500 15px/1.35 var(--body); overflow-wrap:anywhere; }
.cs-result-rival { margin:0; text-align:center; font:600 15px/1.3 var(--body); color:var(--dim); overflow-wrap:anywhere; }
.cs-result-rival b { color:var(--ink,#eef5ff); font-size:18px; }
.cs-result-next { margin:0; color:var(--dim); font:600 13px/1.3 var(--body); }
.c-screen.c-shared-wait { height:100%; min-height:0; padding:16px; }
.c-shared-wait .c-wait { font-size:16px; line-height:1.45; letter-spacing:.025em; overflow-wrap:anywhere; }
.c-shared-wait .c-wait:before { width:32px; height:32px; margin-bottom:12px; }
@media (max-height:500px) and (orientation:landscape) {
  .c-screen.c-shared-lobby { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:10px 20px; padding:10px 16px; align-items:center; }
  .cs-lobby-head { grid-column:1; grid-row:1; }
  .cs-lobby-head .c-title { font-size:23px; }
  .cs-lobby-roster { grid-column:2; grid-row:1/3; }
  .cs-lobby-action { grid-column:1; grid-row:2; }
  .cs-lobby-action .c-sub { font-size:13px; }
  .c-screen.c-shared-results { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto; align-items:center; gap:8px 20px; padding:10px 16px; }
  .cs-result-head { grid-column:1/-1; }
  .cs-result-standing { grid-column:1; }
  .cs-result-score { grid-column:2; }
  .cs-result-line,.cs-result-next,.cs-result-rival { grid-column:1/-1; }
}

/* Mashup handoffs are one bounded status card, including on a320px phone. */
.c-screen.c-mashup { height:100%; min-height:100%; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); gap:10px; overflow:hidden; }
.c-mashup > * + * { margin-top:0; }
.cm-head { display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; flex:0 0 auto; }
.cm-head > div { min-width:0; }
.cm-label { color:#a8c4d9; font:700 10px/1.3 var(--body); letter-spacing:.1em; }
.cm-head h1 { margin:4px 0 0; font:800 22px/1.15 var(--display); overflow-wrap:anywhere; }
.cm-progress { flex:0 0 auto; font:700 14px/1.2 var(--body); text-align:right; color:#e8f6ff; white-space:nowrap; }
.cm-progress small { display:block; margin-top:2px; color:#a8c4d9; font:500 10px/1.2 var(--body); }
.cm-score { display:grid; grid-template-columns:1fr 1fr; grid-gap:8px; flex:0 0 auto; padding:12px 8px; border:1px solid #77c7dc44; border-radius:16px; background:linear-gradient(120deg,#17415466,#18244588); }
.cm-score > div { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.cm-score small { font:600 11px/1.3 var(--body); color:#bbd4e6; }
.cm-score strong { margin-top:4px; font:900 32px/1.1 var(--display); color:#8ee8e0; white-space:nowrap; }
.cm-score > div:first-child strong { color:#ffe09a; }
.cm-score span { margin-top:2px; font:500 10px/1.2 var(--body); color:#bbd4e6; }
.cm-next { flex:0 0 auto; text-align:left; padding:10px 12px; border:1px solid #8da6d333; border-radius:13px; background:#ffffff05; min-width:0; }
.cm-next h2 { margin:5px 0 0; font:750 20px/1.2 var(--display); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cm-next p { margin:5px 0 0; color:#b7ccde; font:500 13px/1.3 var(--body); overflow-wrap:anywhere; }
.cm-status { flex:0 0 auto; margin:0; color:#e0edf8; text-align:left; font:600 14px/1.35 var(--body); overflow-wrap:anywhere; }
.cm-foot { flex:0 0 auto; margin:0; color:#9eb8d0; font:500 12px/1.3 var(--body); }
@media (max-height:600px) { .c-screen.c-mashup { gap:8px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); } .cm-head h1 { font-size:20px; } .cm-score { padding:10px 6px; } .cm-score strong { font-size:30px; } .cm-next { padding:9px 11px; } .cm-next h2 { font-size:18px; } .cm-next p { font-size:12px; } .cm-status { font-size:13px; line-height:1.32; } .cm-foot { font-size:11px; } }
@media (max-height:500px) and (orientation:landscape) { .c-screen.c-mashup { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto minmax(0,1fr) auto; justify-content:normal; align-items:center; gap:8px 16px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); } .cm-head { grid-column:1; grid-row:1; } .cm-head h1 { font-size:20px; } .cm-score { grid-column:1; grid-row:2; align-self:center; } .cm-next { grid-column:2; grid-row:1/3; align-self:center; } .cm-status { grid-column:2; grid-row:3; font-size:13px; line-height:1.3; } .cm-foot { grid-column:1; grid-row:3; font-size:11px; } .cm-next h2 { font-size:20px; } .cm-score strong { font-size:32px; } }


.player-device{display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;color:#9fbbcc}.player-device .device-icon{width:15px;height:15px}.my-device{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:9px;background:transparent;color:#a9c5d5;cursor:pointer;flex-shrink:0}.my-device .device-icon{width:19px;height:19px}.my-device:focus-visible{outline:2px solid #fff;outline-offset:-3px}.topbar .me{min-width:0}.topbar .me #me-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The join form sits in the middle of the phone, within thumb reach, and never clips when long. */
.c-screen.c-join > :first-child { margin-top:auto; }
.c-screen.c-join > :last-child { margin-bottom:auto; }
.c-screen.c-join { padding-bottom:22px; }

/* A lone player in the last row sits in the middle, like the rest of the lobby. */
.cs-roster-grid > :last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 4px); }

/* Seasonal accent (js/seasons.js): a hairline of the season's colours along the top edge. Fixed, so it takes no layout space. */
html[data-season] body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--season-a), var(--season-b), rgba(0, 0, 0, 0)); opacity: .8; pointer-events: none; z-index: 60; }

/* ---------- P4 (audit B-7): "The big screen is away" offer after 15 minutes. A fixed sheet over the frozen
   controls, so nothing underneath moves; short enough for a 568x320 landscape phone without scrolling. ---------- */
.c-away { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(3, 5, 16, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: c-away-in .25s ease both; }
.c-away-card { width: 100%; max-width: 380px; max-height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); text-align: center; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }
.c-away-card .c-title { font-size: 21px; }
.c-away-card .c-sub { font-size: 15px; }
.c-away-card .c-btn { min-height: 52px; padding: 12px 16px; font-size: 16px; }
@media (max-height: 360px) { .c-away-card { gap: 8px; padding: 12px 16px; } .c-away-card .c-title { font-size: 18px; } .c-away-card .c-sub { font-size: 13px; } .c-away-card .c-btn { min-height: 44px; padding: 8px 14px; } }
@keyframes c-away-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c-away { animation: none; } }
/* ---------- end P4 ---------- */
/* Guest end (W9.8): "Get your own arcade" under JOIN ANOTHER GAME once a party is over. Built only while the
   front door sends boot.guestEnd (GUEST_END_ENABLED); scoped to .c-home-link, so nothing else can match it. */
.c-screen > .c-home-link { display: inline-flex; align-self: center; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0 18px; border: 1px solid rgba(255, 207, 107, 0.45); border-radius: 999px; color: var(--gold); font: 700 15px/1 var(--body); letter-spacing: 0.02em; text-decoration: none; animation: c-home-in .5s ease .35s both; }
.c-screen > .c-home-link:active { background: rgba(255, 207, 107, 0.12); }
@keyframes c-home-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .c-screen > .c-home-link { animation: none; } }
@media (max-height: 500px) and (orientation: landscape) { .c-screen > .c-home-link { margin-top: 12px; min-height: 44px; } }
/* "Want this at home?" (W2.3): a top-bar chip on the lobby and results screens, and a one-field sheet. Every rule
   here is scoped to .c-lead*, so no game controller or shared phone screen can match it. Built only while the
   front door sends boot.leads (LEADS_ENABLED). Sized to fit 360x640, 390x844 and 568x320, and the keyboard-open
   390x500 and 568x200, with no page scroll and nothing clipped (tests/phone-leads.test.cjs group 10). */
.topbar .c-lead-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; margin-left: 10px; padding: 0 12px; border: 1px solid rgba(255, 207, 107, 0.55); border-radius: 999px; background: rgba(255, 207, 107, 0.1); color: var(--gold); font: 700 12px/1 var(--body); letter-spacing: 0.02em; white-space: nowrap; transition: background .2s ease, transform .15s ease; animation: c-lead-in .35s ease both; }
.topbar .c-lead-chip::after { content: ''; position: absolute; top: -5px; right: -4px; bottom: -5px; left: -4px; }
.topbar .c-lead-chip[hidden] { display: none; }
.topbar .c-lead-chip:active { transform: scale(.96); background: rgba(255, 207, 107, 0.2); }
.topbar .c-lead-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.c-lead-house { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-lead-short { display: none; }
@media (max-width: 399px) { .c-lead-long { display: none; } .c-lead-short { display: inline; } }
@media (max-width: 374px) { .topbar .c-lead-chip { width: 34px; padding: 0; } .c-lead-short { display: none; } }

.c-lead { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(3, 5, 16, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: c-lead-fade .2s ease both; }
.c-lead-card { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border: 1px solid rgba(255, 207, 107, 0.32); border-radius: var(--r); background: linear-gradient(160deg, #18205a 0%, #0d1233 75%); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); animation: c-lead-rise .28s cubic-bezier(.2, .8, .2, 1) both; }
.c-lead-copy { display: flex; flex-direction: column; gap: 6px; }
.c-lead-kicker { font: 700 11px/1 var(--display); letter-spacing: 0.28em; color: var(--gold); }
.c-lead-title { margin: 0; font: 800 22px/1.15 var(--display); letter-spacing: 0.02em; color: #fff; }
.c-lead-desc { margin: 0; font: 400 14px/1.4 var(--body); color: #c9cff0; }
.c-lead-fields { position: relative; display: flex; flex-direction: column; gap: 10px; }
.c-lead-email { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 8, 25, 0.78); color: var(--ink); font: 500 16px/1 var(--body); -webkit-user-select: text; user-select: text; }
.c-lead-email::placeholder { color: #6f78a8; }
.c-lead-email:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 207, 107, 0.22); }
.c-lead-consent { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.38 var(--body); color: #c9cff0; cursor: pointer; }
.c-lead-tick { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--gold); }
.c-lead-consent a { color: var(--gold); }
.c-lead-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.c-lead-status { min-height: 18px; margin: 0; font: 600 13px/1.38 var(--body); color: #ffd9a8; text-align: center; }
.c-lead-actions { display: flex; gap: 10px; }
.c-lead-later, .c-lead-send { min-height: 48px; border-radius: 999px; font: 800 15px/1 var(--body); letter-spacing: 0.02em; white-space: nowrap; }
.c-lead-later { flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--line); color: var(--dim); }
.c-lead-send { flex: 1 1 auto; padding: 0 16px; background: var(--gold); color: #0a0d24; box-shadow: 0 6px 22px rgba(255, 207, 107, 0.28); transition: opacity .2s ease, transform .15s ease; }
.c-lead-send:active:not(:disabled) { transform: scale(.98); }
.c-lead-send:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.c-lead.is-sent .c-lead-status { color: var(--good); font-size: 15px; }
@keyframes c-lead-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes c-lead-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-lead-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* The keyboard is up on a short portrait screen: the description steps aside so field and button stay in view. */
@media (max-height: 420px) and (orientation: portrait) { .c-lead-desc { display: none; } .c-lead-card { gap: 10px; padding: 14px 16px 12px; } }
/* Landscape: words on the left, field and buttons on the right; the status line sits under the words. */
@media (max-height: 500px) and (orientation: landscape) {
  .c-lead { align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .c-lead-card { max-width: 640px; display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-areas: "copy email" "copy consent" "status actions"; align-items: center; gap: 8px 18px; padding: 14px 16px; }
  .c-lead-fields { display: contents; }
  .c-lead-copy { grid-area: copy; align-self: center; }
  .c-lead-email { grid-area: email; height: 42px; }
  .c-lead-consent { grid-area: consent; font-size: 12px; line-height: 1.35; }
  .c-lead-status { grid-area: status; min-height: 0; text-align: left; font-size: 12px; }
  .c-lead-actions { grid-area: actions; }
  .c-lead-later, .c-lead-send { min-height: 44px; }
  .c-lead-title { font-size: 19px; }
  .c-lead-desc { font-size: 13px; line-height: 1.35; }
}
/* Landscape with the keyboard up (about 568x200): the description steps aside, the rest tightens. */
@media (max-height: 260px) and (orientation: landscape) { .c-lead { padding-top: 6px; padding-bottom: 6px; } .c-lead-desc { display: none; } .c-lead-card { gap: 6px 16px; padding: 10px 14px; } .c-lead-email { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .topbar .c-lead-chip, .c-lead, .c-lead-card { animation: none; } .topbar .c-lead-chip, .c-lead-send { transition: none; } }