/* Telly Tussle: bright arcade on a dark stage. Chunky toy colours, big type
   for a TV across the room, thumb-sized controls on the phone. */

@font-face { font-family: 'Bagel Fat One'; src: url('fonts/bagel-fat-one-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('fonts/rubik-var-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --bg: #0b0820; --bg2: #140f38; --card: #1b1448; --card2: #241b5c; --line: rgba(190, 175, 255, 0.22);
  --ink: #0b0820; --text: #f4f1ff; --muted: rgba(230, 225, 255, 0.68);
  --blue: #38a8ff; --orange: #ff8c1a; --yellow: #ffe03a; --pink: #ff4fc8; --mint: #2be8a0; --violet: #a57bff; --red: #ff5a6a;
  --display: 'Bagel Fat One', 'Rubik', system-ui, sans-serif;
  --ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 10% 0%, #2a1a7a 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #5a1259 0%, transparent 55%), var(--bg);
  color: var(--text); font: 400 16px/1.4 var(--ui); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
body.is-tv, body.is-pad { overflow: hidden; }
[hidden] { display: none !important; }
#insets { position: fixed; inset: 0; pointer-events: none; padding: var(--sat) var(--sar) var(--sab) var(--sal); visibility: hidden; }
button { font: inherit; color: inherit; }
a { color: var(--yellow); }
.muted { color: var(--muted); }
.small { font-size: 0.86em; }

/* ---------- the logo ---------- */

.logo { margin: 0; font: 400 clamp(3rem, 13vw, 6.5rem)/0.92 var(--display); letter-spacing: 0.01em; display: inline-flex; flex-direction: column; transform: rotate(-3deg); }
.logo .l1 { color: var(--yellow); text-shadow: 0.05em 0.06em 0 #c4168f, 0.1em 0.12em 0 var(--ink); }
.logo .l2 { color: var(--pink); margin-left: 0.5em; text-shadow: 0.05em 0.06em 0 #1764d6, 0.1em 0.12em 0 var(--ink); }
.logo.small { font-size: 2.2em; flex-direction: row; gap: 0.25em; }
.logo.small .l2 { margin-left: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 48px; padding: 0.55em 1.2em;
  border: 0; border-radius: 999px; background: var(--card2); color: var(--text); font-weight: 800; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), 0 0.22em 0 rgba(0, 0, 0, 0.45); transition: transform 0.08s, background 0.15s;
  text-decoration: none; user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translateY(0.12em); box-shadow: inset 0 0 0 2px var(--line), 0 0.1em 0 rgba(0, 0, 0, 0.45); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.go { background: var(--mint); color: var(--ink); box-shadow: 0 0.22em 0 #0b7a51; }
.btn.danger { background: #3a1430; color: #ffb3c0; box-shadow: inset 0 0 0 2px rgba(255, 90, 106, 0.5), 0 0.22em 0 rgba(0, 0, 0, 0.45); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn.big { min-height: 58px; padding: 0.6em 1.6em; font-size: 1.12em; }
.btn.small { min-height: 40px; padding: 0.35em 0.9em; font-size: 0.9em; }
.btn:focus-visible, .tile:focus-visible, .seg button:focus-visible, .chip-btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; color: var(--yellow); text-decoration: underline; cursor: pointer; }
.chip-btn { min-height: 40px; padding: 0.3em 0.9em; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line); }
.row-btns { display: flex; flex-wrap: wrap; gap: 0.7em; align-items: center; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 0.3em; padding: 0.25em; border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
.seg button { min-height: 42px; padding: 0.3em 1em; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-weight: 700; cursor: pointer; }
.seg button[aria-checked='true'] { background: var(--yellow); color: var(--ink); box-shadow: 0 0.15em 0 #b08b00; }
.seg button:disabled { opacity: 0.35; cursor: default; }

/* ---------- player badges ---------- */

.badge { --pc: var(--blue); position: relative; flex: none; display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--pc); color: var(--ink); box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.9); overflow: visible; }
.badge img { width: 100%; height: 100%; border-radius: 50%; image-rendering: pixelated; }
.badge b { font: 400 1.25em/1 var(--display); }
.badge .bot-tag { position: absolute; right: -0.15em; top: -0.35em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0.12em #fff; }
.badge.sm { width: 1.7em; height: 1.7em; font-size: 0.9em; }
.badge.md { width: 2.2em; height: 2.2em; }
.badge.lg { width: 4em; height: 4em; font-size: 1em; }
.badge.lg b { font-size: 2em; }
.badge.xl { width: 6em; height: 6em; }
.badge.xl b { font-size: 3em; }

/* ---------- the first screen ---------- */

.home { min-height: 100dvh; display: grid; place-items: center; padding: calc(1.5rem + var(--sat)) 1.2rem calc(1.5rem + var(--sab)); text-align: center; }
.home-in { width: min(100%, 760px); display: grid; gap: 1.4rem; justify-items: center; }
.tagline { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: 30em; }
.home-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; width: 100%; }
.big-btn { display: grid; justify-items: center; gap: 0.3rem; padding: 1.4rem 1rem; border: 0; border-radius: 1.6rem; cursor: pointer; color: var(--ink); box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
.big-btn:active { transform: translateY(0.2rem); }
.big-btn svg { width: 3.4rem; height: 3.4rem; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.big-btn b { font: 400 1.6rem/1.1 var(--display); }
.big-btn small { font-weight: 600; opacity: 0.8; }
.big-btn.host { background: var(--yellow); }
.big-btn.join { background: var(--blue); }
.big-btn:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.home-foot { color: var(--muted); font-size: 0.95rem; }
.quiet-link { color: var(--muted); }
.ver { color: var(--muted); font-weight: 700; }

/* ---------- sheets (About, and the phone's) ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(5, 3, 18, 0.72); }
.sheet { position: relative; width: min(100%, 560px); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.4rem 1.4rem 1.2rem; border-radius: 1.4rem; background: var(--bg2); box-shadow: inset 0 0 0 2px var(--line), 0 1rem 3rem rgba(0, 0, 0, 0.5); }
.sheet h2 { margin: 0 2rem 0.6rem 0; font: 400 1.8rem/1.1 var(--display); color: var(--yellow); }
.sheet-x { position: absolute; right: 0.6rem; top: 0.6rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text); }
.changelog .change h4 { margin: 0.8rem 0 0.2rem; }
.changelog ul { margin: 0; padding-left: 1.2rem; }
.toast { position: fixed; left: 50%; bottom: calc(1.2rem + var(--sab)); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 640px); padding: 0.7rem 1.2rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.4); }

/* =================================================================
   THE TV
   ================================================================= */

.tv { position: fixed; inset: 0; font-size: clamp(12px, min(1.2vmin + 0.5vw, 2.1vh), 26px); overflow: hidden; }
.tv-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tv-screen { position: absolute; inset: 0; }
.tv-start { display: grid; place-items: center; text-align: center; }
.tv-start-in { display: grid; gap: 1.2em; justify-items: center; }
.tv-start p { font-size: 1.3em; color: var(--muted); }

.tv-lobby {
  display: grid; grid-template-columns: minmax(13em, 23%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1em 1.4em; padding: 1em 1.6em 1.2em;
}
.tv-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.tv-head .logo.small { font-size: 2.1em; }
.tv-head-r { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; justify-content: flex-end; }
.tv-head-r .chip-btn { font-size: 0.85em; }

.tv-join { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em; padding: 1em; border-radius: 1.4em; background: rgba(20, 15, 56, 0.85); box-shadow: inset 0 0 0 0.12em var(--line); text-align: center; }
.tv-join h2 { margin: 0; font: 400 1.35em/1.1 var(--display); color: var(--yellow); }
.tv-qrcard { width: min(100%, 11.5em, 30vh); aspect-ratio: 1; padding: 0.35em; border-radius: 0.9em; background: #fff; }
.tv-qrcard canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tv-url { margin: 0.2em 0 0; font-size: 0.82em; color: var(--muted); overflow-wrap: anywhere; }
.tv-url b { color: var(--text); }
.tv-code-label { margin: 0; font-size: 0.82em; color: var(--muted); }
.tv-code { margin: 0; font: 400 3.4em/1 var(--display); letter-spacing: 0.08em; color: #fff; text-shadow: 0.05em 0.07em 0 var(--pink); }
.tv-conn { margin: 0; color: var(--red); font-weight: 700; font-size: 0.85em; }

.tv-games { min-height: 0; display: flex; flex-direction: column; gap: 0.6em; }
.tv-games h2 { margin: 0; font: 400 1.5em/1.1 var(--display); }
.tv-tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.8em; }
.tile-wrap { min-height: 0; display: flex; }
.tv-tiles.many { gap: 0.6em; font-size: 0.86em; }
.tv-tiles.many .tile-txt small { -webkit-line-clamp: 1; }
.tile {
  --gc: var(--yellow); flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 1.1em; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25)), var(--card); color: var(--text); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 0.14em color-mix(in srgb, var(--gc) 70%, transparent), 0 0.3em 0 rgba(0, 0, 0, 0.45); transition: transform 0.12s;
}
.tile:hover:not(.soon), .tile:focus-visible { transform: translateY(-0.15em) scale(1.02); }
.tile-art { flex: 1; min-height: 0; width: 100%; display: block; contain: size; /* its pixel size must never size the grid */ background: radial-gradient(80% 90% at 50% 40%, color-mix(in srgb, var(--gc) 30%, transparent), transparent 70%); }
.tile-txt { display: grid; gap: 0.1em; padding: 0.45em 0.7em 0.6em; background: rgba(8, 6, 24, 0.55); }
.tile-txt b { font: 400 1.15em/1.1 var(--display); color: var(--gc); }
.tile-txt small { font-size: 0.72em; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-tags { display: flex; gap: 0.3em; flex-wrap: wrap; }
.tile-tags i { font-style: normal; font-size: 0.66em; font-weight: 700; padding: 0.1em 0.55em; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.tile.soon { cursor: default; filter: saturate(0.4); opacity: 0.62; }
.tile.soon .soon-tag { background: rgba(255, 224, 58, 0.2); color: var(--yellow); }

.tv-seats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7em; }
.seat { --pc: rgba(255, 255, 255, 0.3); position: relative; min-width: 0; display: flex; align-items: center; gap: 0.55em; padding: 0.5em 0.6em; border-radius: 1em; background: rgba(20, 15, 56, 0.88); box-shadow: inset 0 0 0 0.12em color-mix(in srgb, var(--pc) 70%, transparent); transition: box-shadow 0.15s, transform 0.15s; }
.seat .seat-badge { width: 2.3em; height: 2.3em; }
.seat-txt { min-width: 0; display: grid; }
.seat-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-txt small { font-size: 0.72em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .vip { padding: 0 0.4em; border-radius: 0.4em; background: var(--yellow); color: var(--ink); font-weight: 800; }
.seat.free { box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.14); background: rgba(20, 15, 56, 0.5); }
.seat.free .seat-txt b { color: var(--muted); }
.seat-free-i { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; border: 0.12em dashed rgba(255, 255, 255, 0.3); color: var(--muted); font-weight: 800; flex: none; }
.seat.joining { opacity: 0.8; }
.seat.away { opacity: 0.55; }
.seat.poke { box-shadow: inset 0 0 0 0.16em var(--pc), 0 0 1.2em color-mix(in srgb, var(--pc) 60%, transparent); transform: translateY(-0.1em); }
.seat-poke { margin-left: auto; display: none; gap: 0.15em; align-items: center; }
.seat.poke .seat-poke { display: inline-flex; }
.seat-poke i { width: 0.55em; height: 0.55em; border-radius: 0.15em; background: rgba(255, 255, 255, 0.2); }
/* The phone's delay to the TV: four small signal bars (the ms on hover). */
.seat-sig { margin-left: auto; flex: none; display: inline-flex; align-items: flex-end; gap: 0.08em; height: 0.8em; opacity: 0.75; }
.seat.poke .seat-sig { margin-left: 0.45em; }
.seat-sig i { width: 0.16em; border-radius: 0.05em; background: rgba(255, 255, 255, 0.22); }
.seat-sig i:nth-child(1) { height: 30%; } .seat-sig i:nth-child(2) { height: 52%; } .seat-sig i:nth-child(3) { height: 76%; } .seat-sig i:nth-child(4) { height: 100%; }
.seat-sig[data-l='4'] i, .seat-sig[data-l='3'] i:nth-child(-n+3), .seat-sig[data-l='2'] i:nth-child(-n+2) { background: #2be8a0; }
.seat-sig[data-l='1'] i:nth-child(1) { background: #ffb43a; }
.seat-sig[data-l='1'] { opacity: 1; }
.seat.pk-left .pk-l, .seat.pk-right .pk-r, .seat.pk-btn .pk-b { background: var(--pc); }
.seat-poke .pk-b { border-radius: 50%; }
.seat-x { position: absolute; right: 0.25em; top: 0.25em; width: 1.6em; height: 1.6em; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); cursor: pointer; }

/* TV sheets: setup, results, champion, pause, settings. */
.tv-sheet { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1.4em; background: rgba(5, 3, 18, 0.66); }
.sheet-card { position: relative; width: min(100%, 64em); max-height: 100%; overflow: auto; padding: 1.4em 1.6em; border-radius: 1.4em; background: var(--bg2); box-shadow: inset 0 0 0 0.12em var(--line), 0 1em 3em rgba(0, 0, 0, 0.5); }
.sheet-card h2 { margin: 0 0 0.4em; font: 400 2.2em/1.05 var(--display); }
.opt { display: grid; gap: 0.25em; margin: 0 0 0.55em; }
.opt-l { font-size: 0.85em; font-weight: 700; color: var(--muted); }
.opt-note { font-size: 0.78em; font-weight: 600; line-height: 1.25; color: var(--muted); }
.note { margin: 0.3em 0; padding: 0.5em 0.8em; border-radius: 0.8em; background: rgba(255, 224, 58, 0.12); color: var(--yellow); font-weight: 600; font-size: 0.9em; }

.setup-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4em; }
.setup-l { display: flex; flex-direction: column; gap: 0.3em; }
.setup-l h2 { color: var(--gc); }
.setup-art { width: 100%; aspect-ratio: 2.8; border-radius: 1em; background: radial-gradient(80% 90% at 50% 40%, color-mix(in srgb, var(--gc) 28%, transparent), rgba(0, 0, 0, 0.3) 75%); }
.blurb { margin: 0; color: var(--muted); }
.how { margin: 0.4em 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 0.45em; }
.how li { counter-increment: how; display: grid; grid-template-columns: 1.8em 1fr; gap: 0.5em; align-items: start; font-weight: 600; }
.how li::before { content: counter(how); display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--gc); color: var(--ink); font: 400 1em/1 var(--display); }
.ctl-line { margin: 0.2em 0 0; font-size: 0.9em; color: var(--muted); }
.ctl-line b { color: var(--text); }
.lu-row, .lu-teams { display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; }
.lu-team { flex: 1; min-width: 8em; padding: 0.5em 0.7em; border-radius: 0.8em; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 0.12em var(--tc); display: grid; gap: 0.3em; }
.lu-team h4 { margin: 0; color: var(--tc); }
.lu-p { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; }
.setup-r .row-btns { margin-top: 0.4em; }
.setup-l > .opt { margin-top: 0.6em; }
.setup-r.many .opt { margin-bottom: 0.4em; }
.tv .seg button { min-height: 2.1em; padding: 0.2em 0.9em; }
.lu-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.lu-team { padding: 0.35em 0.6em; gap: 0.15em; }

.results-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'l r' 'b b'; gap: 1em 1.8em; }
.res-l { grid-area: l; }
.res-r { grid-area: r; }
.res-btns { grid-area: b; justify-content: center; }
.kicker { margin: 0; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85em; }
.res-win { color: var(--wc); text-shadow: 0.05em 0.06em 0 var(--ink); }
.places { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.places li { display: grid; grid-template-columns: 2.6em auto 1fr auto; align-items: center; gap: 0.6em; padding: 0.35em 0.7em; border-radius: 0.9em; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0.3em 0 0 var(--pc); }
.places li.first { background: color-mix(in srgb, var(--pc) 22%, rgba(0, 0, 0, 0.3)); }
.places .pl { font: 400 1.2em/1 var(--display); }
.places .pn { min-width: 0; display: grid; }
.places .pn small { color: var(--muted); font-size: 0.78em; }
.places .pp { font: 400 1.3em/1 var(--display); color: var(--mint); }
.places .pp small { font: 600 0.6em var(--ui); color: var(--muted); }
.res-r h3, .champ-table h3 { margin: 0 0 0.4em; }
.night { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3em; }
.night li { display: grid; grid-template-columns: 1.8em auto 1fr auto; gap: 0.55em; align-items: center; padding: 0.3em 0.6em; border-radius: 0.8em; background: rgba(0, 0, 0, 0.22); }
.n-place { font: 400 1.1em/1 var(--display); color: var(--muted); }
.n-pts { font: 400 1.2em/1 var(--display); }
.n-pts em { font: 700 0.65em var(--ui); color: var(--mint); font-style: normal; }

.champ-card { width: min(100%, 44em); display: grid; gap: 0.7em; text-align: center; justify-items: center; }
.champ-top { display: grid; justify-items: center; gap: 0.3em; }
.champ-top h2 { color: var(--pc, var(--yellow)); font-size: 2.6em; margin: 0; }
.champ-card .badge.xl { width: 4.4em; height: 4.4em; }
.champ-card .badge.xl b { font-size: 2.2em; }
.crown { width: 3.6em; fill: var(--yellow); stroke: var(--ink); stroke-width: 2; filter: drop-shadow(0 0 0.6em rgba(255, 224, 58, 0.6)); }
.champ-table { width: 100%; text-align: left; }
.pause-card, .settings-card { width: min(100%, 34em); text-align: center; display: grid; gap: 0.6em; justify-items: center; }
.settings-card { text-align: left; justify-items: stretch; }
.tv-pausebtn { position: absolute; right: 0.8em; bottom: 0.8em; z-index: 4; width: 2.6em; height: 2.6em; border: 0; border-radius: 50%; background: rgba(20, 15, 56, 0.6); color: #fff; cursor: pointer; opacity: 0.35; transition: opacity 0.2s; }
.tv-pausebtn:hover, .tv-pausebtn:focus-visible { opacity: 1; }
.tv-pausebtn svg { width: 1.3em; fill: currentColor; }
.tv-toast { position: absolute; left: 50%; top: 1em; transform: translateX(-50%); z-index: 8; max-width: 80%; padding: 0.6em 1.2em; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 0.4em 1.4em rgba(0, 0, 0, 0.4); }
.tv[data-phase='play'] .tv-toast { top: auto; bottom: 1em; }

@media (max-aspect-ratio: 4/3) {
  .tv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .tv-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =================================================================
   THE PHONE
   ================================================================= */

.pad { position: fixed; inset: 0; --pc: var(--blue); --pd: #1764d6; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pd-screen { position: absolute; inset: 0; overflow: auto; padding: calc(1rem + var(--sat)) calc(1rem + var(--sar)) calc(1rem + var(--sab)) calc(1rem + var(--sal)); }
.pd-join, .pd-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; }
.pd-join form, .pd-me form { width: min(100%, 360px); display: grid; gap: 0.7rem; }
.pd-join label, .pd-me label, .lbl { font-weight: 700; color: var(--muted); margin: 0; }
.code-in { width: 100%; min-height: 72px; text-align: center; font: 400 2.6rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; border: 0; border-radius: 1rem; background: #fff; color: var(--ink); }
.pd-me { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.pd-me h2 { margin: 0; font: 400 2rem/1.1 var(--display); color: var(--yellow); }
#pd-name { min-height: 54px; padding: 0 1rem; border: 0; border-radius: 0.9rem; background: #fff; color: var(--ink); font: 700 1.2rem var(--ui); }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.sw { --pc: var(--blue); aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--pc); cursor: pointer; box-shadow: 0 0.15rem 0 rgba(0, 0, 0, 0.4); }
.sw svg { width: 55%; fill: rgba(11, 8, 32, 0.75); }
.sw[aria-checked='true'] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff; }
.sw:disabled { opacity: 0.2; }
.face-row { display: flex; gap: 0.8rem; align-items: center; text-align: left; padding: 0.6rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.05); }
.face-row small { display: block; color: var(--muted); }
.face-btns { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.err { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.8rem; background: rgba(255, 90, 106, 0.16); color: #ffb3c0; font-weight: 700; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.15); border-top-color: var(--yellow); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The controller page. */
.pd-play { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0.5rem; overflow: hidden; padding-top: calc(0.5rem + var(--sat)); padding-bottom: calc(0.5rem + var(--sab)); background: radial-gradient(120% 60% at 50% 110%, color-mix(in srgb, var(--pc) 28%, transparent), transparent 70%); }
.pd-top { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.pd-who { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1; }
.pd-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; }
.pd-who small { color: var(--muted); white-space: nowrap; }
.pd-who .vip { padding: 0.05rem 0.4rem; border-radius: 0.4rem; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 0.75rem; }
.pd-pill { padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.pd-pill.practice { background: rgba(255, 190, 90, 0.18); color: #ffd9ad; box-shadow: inset 0 0 0 2px rgba(255, 190, 90, 0.6); }
.pd-pill.live { background: var(--mint); color: var(--ink); }
.pd-pill.paused { background: #fff; color: var(--ink); }
.pd-menu-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; }
.pd-menu-btn svg { width: 22px; fill: var(--text); }
.pd-status { display: flex; align-items: center; gap: 0.8rem; min-height: 56px; padding: 0.4rem 0.8rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent); }
.pd-status.out { opacity: 0.6; }
.pd-score { font: 400 2.2rem/1 var(--display); color: var(--pc); min-width: 1.2em; text-align: center; }
.pd-stext { min-width: 0; display: grid; }
.pd-stext small { color: var(--muted); font-weight: 700; font-size: 0.78rem; }
.pd-stext b { font-size: 1rem; }

.pd-ctl { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; border-radius: 1.2rem; padding: 0.4rem; touch-action: none; }
.pd-ctl.practice { box-shadow: inset 0 0 0 2px rgba(255, 190, 90, 0.75); background-image: repeating-linear-gradient(135deg, rgba(255, 190, 90, 0.04) 0 14px, transparent 14px 28px); }
.practice-tag { display: none; position: absolute; left: 1rem; top: -0.6rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: #2a1806; color: #ffd9ad; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.pd-ctl.practice .practice-tag { display: block; }
.pd-modes { display: flex; justify-content: center; gap: 0.3rem; flex: none; }
.pd-modes button { flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 0.2rem clamp(0.45rem, 2.2vw, 0.9rem); border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-weight: 700; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
/* Five choices (Halves, Arrows, Slider, Keypad, Tilt) still fit a 360 px phone. */
.pd-modes button:first-child:nth-last-child(n + 5), .pd-modes button:first-child:nth-last-child(n + 5) ~ button { font-size: 0.8rem; }
.pd-modes button[aria-checked='true'] { background: var(--pc); color: var(--ink); }
.pd-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.zone { position: relative; min-height: 0; border-radius: 1.1rem; touch-action: none; }
.zone-hint { position: absolute; left: 0; right: 0; bottom: 0.6rem; margin: 0; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); pointer-events: none; }
.halves { flex: 3; display: flex; gap: 0.5rem; }
.half { flex: 1; display: grid; place-items: center; border-radius: 1.1rem; background: color-mix(in srgb, var(--pc) 22%, rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 60%, transparent); transition: background 0.06s, transform 0.06s; }
.half svg, .pbtn svg { width: 42%; max-width: 90px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.half.down { background: var(--pc); transform: scale(0.98); }
.half.down svg { stroke: var(--ink); }
.btns { flex: 1.5; display: flex; gap: 0.5rem; }
.pbtn { flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; border-radius: 1.1rem; background: var(--pc); color: var(--ink); font: 400 1.35rem/1 var(--display); box-shadow: 0 0.35rem 0 var(--pd); touch-action: none; transition: transform 0.05s; cursor: pointer; }
.pbtn svg { width: 2.2rem; height: 2.2rem; stroke: var(--ink); }
.pbtn.down { transform: translateY(0.25rem); box-shadow: 0 0.1rem 0 var(--pd); filter: brightness(1.15); }
.pbtn span { pointer-events: none; text-align: center; }
.pbtn small, .pbtn b, .pbtn i { pointer-events: none; }
/* What the game says about a button now (status btn): a picture badge and a big name, a line under it, ammo pips, dimmed or empty. */
.pbtn.art { container-type: size; gap: 0.25rem; }
.pb-art { flex: none; display: grid; place-items: center; height: min(50cqh, 58cqw, 7.5rem); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.24rem var(--ink), 0 0.3rem 0.7rem rgba(0, 0, 0, 0.35); }
.pb-art.none { background: rgba(255, 255, 255, 0.28); box-shadow: none; }
#pd-ctl .pbtn .pb-art svg, #pd-call .pb-art svg { width: 84%; height: 84%; max-width: none; stroke: none; stroke-width: 1; }
.pbtn.art > span { font-size: clamp(1.25rem, 12cqw, 2.2rem); line-height: 1; letter-spacing: 0.01em; }
.pb-sub { font: 800 0.82rem/1.15 var(--ui); opacity: 0.8; text-align: center; }
.pb-pips { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.pb-pips i { width: 1.4rem; height: 1.4rem; border-radius: 50%; box-shadow: inset 0 0 0 0.2rem rgba(11, 8, 32, 0.5); }
.pb-pips i.on { background: var(--ink); box-shadow: 0 0 0 0.13rem rgba(255, 255, 255, 0.75); }
.pbtn.dim, .pbtn.empty { filter: saturate(0.35) brightness(0.82); }
.pbtn.empty .pb-pips i { box-shadow: inset 0 0 0 0.2rem #b0102a; }
.pbtn.dry .pb-pips { animation: pb-dry 0.34s ease-out; }
@keyframes pb-dry { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.pbtn.ready .pb-art { animation: pb-ready 1.1s ease-in-out infinite; }
@keyframes pb-ready { 50% { transform: scale(1.07); } }
.btns.minor .pbtn .pb-sub, .btns.minor .pbtn .pb-pips { display: none; }
.slider { flex: 3; display: grid; place-items: center; background: rgba(0, 0, 0, 0.25); }
.slider .track { position: relative; width: 88%; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--pc) 35%, rgba(255, 255, 255, 0.1)); }
.slider .mid { position: absolute; left: 50%; top: -10px; bottom: -10px; width: 3px; background: rgba(255, 255, 255, 0.35); }
.slider .knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--pc), 0 0.3rem 1rem rgba(0, 0, 0, 0.5); }
.stick { flex: 3; overflow: hidden; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 40%, transparent); }
/* The stick's ring and knob rest in the middle; while a thumb is down, pad.js sets left and top (px) to where it is. */
.stick .ring, .stick .knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.stick .ring { width: 150px; height: 150px; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--pc) 60%, transparent); }
.stick .knob { width: 74px; height: 74px; background: var(--pc); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85); }
/* The D-pad (four arrows) and, for steering, the Arrows (left and right under one thumb). */
.dpad { flex: 3; display: grid; place-items: center; container-type: size; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 40%, transparent); }
.dp-pad { position: relative; width: min(94cqw, 94cqh, 380px); aspect-ratio: 1; display: grid; grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; gap: 3%; pointer-events: none; }
.dp { display: grid; place-items: center; border-radius: 22%; background: color-mix(in srgb, var(--pc) 22%, rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 60%, transparent); transition: background 0.06s, transform 0.06s; }
.dp svg { width: 62%; max-width: 80px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dp.on { background: var(--pc); transform: scale(0.96); }
.dp.on svg { stroke: var(--ink); }
.dp.up { grid-area: 1 / 2; } .dp.left { grid-area: 2 / 1; } .dp.right { grid-area: 2 / 3; } .dp.down { grid-area: 3 / 2; }
.dp.idle { opacity: 0.3; }
.dp-hub { grid-area: 2 / 2; border-radius: 50%; margin: 18%; background: rgba(255, 255, 255, 0.08); }
/* With spec.tap the D-pad's middle is a button too (Block Battle: a tap turns). */
.dp-hub.tap { display: grid; place-items: center; margin: 8%; background: color-mix(in srgb, var(--pc) 30%, rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 60%, transparent); transition: background 0.06s; }
.dp-hub.tap svg { width: 58%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dp-hub.tap.on { background: var(--pc); }
.dp-hub.tap.on svg { stroke: var(--ink); }
/* The keypad: the four arrows as the D-pad (kp4), or eight keys round a blank middle like a number pad (kp8). */
.kp8 .dp.ul { grid-area: 1 / 1; } .kp8 .dp.ur { grid-area: 1 / 3; } .kp8 .dp.dl { grid-area: 3 / 1; } .kp8 .dp.dr { grid-area: 3 / 3; }
.arrows .dp-pad { width: 96cqw; height: min(78cqh, 150cqw); aspect-ratio: auto; grid-template: 1fr / 1fr 1fr; gap: 4%; }
.arrows .dp.left, .arrows .dp.right { grid-area: auto; }
.arrows .dp svg { width: 46%; }
/* Arrows: steer with one thumb, the buttons beside it for the other. */
.pd-ctl.mode-arrows .pd-area { flex-direction: row; }
.pd-ctl.mode-arrows .dpad { flex: 1.5; }
.pd-ctl.mode-arrows .btns { flex: 1; flex-direction: column; }
.tiltz { flex: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(0, 0, 0, 0.25); padding-bottom: 2rem; }
.gauge { width: 150px; height: 75px; border-radius: 150px 150px 0 0; background: color-mix(in srgb, var(--pc) 25%, rgba(0, 0, 0, 0.3)); position: relative; overflow: hidden; }
.needle { position: absolute; left: calc(50% - 3px); bottom: 0; width: 6px; height: 68px; background: #fff; border-radius: 3px; transform-origin: 50% 100%; }
.ball-box { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--pc); }
.ball { width: 40px; height: 40px; border-radius: 50%; background: var(--pc); }
/* Big buttons with a row of small ones under them (Block Battle: Turn left and right, then Hold and Drop). */
.bside { flex: 1.5; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bside > .btns { flex: 1; min-height: 0; }
.bside > .btns.minor { flex: none; height: 58px; }
.btns.minor .pbtn { min-height: 0; flex-direction: row; gap: 0.45rem; font-size: 1.1rem; box-shadow: 0 0.25rem 0 var(--pd); }
.btns.minor .pbtn svg { width: 1.6rem; height: 1.6rem; }
.keys { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.krow { flex: 1; display: flex; gap: 0.5rem; min-height: 0; }
.keys .pbtn { min-height: 0; font-size: 1.15rem; }
.keys .pbtn svg { width: 1.9rem; height: 1.9rem; }
.swipe { flex: 3; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 40%, transparent); }
.swipe .zone-hint { top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 1rem; font-size: 0.95rem; }
/* The touchpad: a big blank pad (pad.js draws the finger's trail and the heading on its canvas), the buttons in a row along the bottom. */
.tpad { flex: 3; overflow: hidden; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 40%, transparent); }
.tpad.down { box-shadow: inset 0 0 0 3px var(--pc); }
.tpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pd-ctl.mode-touchpad .pd-area > .btns { flex: none; height: 92px; }

/* The panel (turn-based games): a map, dials and sliders with -/+ nudges, and the buttons (Lock in). */
.pd-ctl.kind-panel .pd-area { gap: 0.45rem; }
.pn-map { position: relative; flex: 0 1 auto; aspect-ratio: 16 / 9; min-height: 96px; border-radius: 1rem; overflow: hidden; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent); touch-action: none; }
.pn-map canvas, .pn-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pn-note { position: absolute; left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(8, 6, 24, 0.85); font-size: 0.8rem; font-weight: 800; pointer-events: none; }
.pn-dials { flex: 1 1 auto; min-height: 110px; display: flex; justify-content: center; gap: 0.5rem; }
.pn-dial { display: grid; grid-template-columns: 56px auto 56px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 0.6rem; height: 100%; }
.pn-face { position: relative; height: 100%; max-height: 210px; aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; }
.pn-side { flex: none; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.pn-slider { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 0.4rem; height: 58px; }
.pn-track { position: relative; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 35%, transparent); touch-action: none; cursor: pointer; }
.pn-track.down { box-shadow: inset 0 0 0 3px var(--pc); }
.pn-lab { position: absolute; left: 0.8rem; top: 0.35rem; font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; }
.pn-val { position: absolute; right: 0.8rem; top: 0.2rem; font: 400 1.1rem/1.2 var(--display); pointer-events: none; }
.pn-rail { position: absolute; left: 16px; right: 16px; bottom: 13px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); pointer-events: none; }
.pn-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--pc); }
.pn-knob { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--pc), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5); }
.pn-nudge { min-height: 52px; padding: 0; border: 0; border-radius: 0.9rem; background: color-mix(in srgb, var(--pc) 22%, rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 60%, transparent); font: 400 1.9rem/1 var(--display); color: #fff; touch-action: none; cursor: pointer; }
.pn-nudge.down { background: var(--pc); color: var(--ink); }
.pn-side .btns { flex: none; height: 64px; }
.pd-ctl.locked .pn-map, .pd-ctl.locked .pn-dials, .pd-ctl.locked .pn-slider { opacity: 0.45; pointer-events: none; }
.pd-ctl.locked .pn-side .pbtn { background: color-mix(in srgb, var(--pc) 45%, #1b1448); color: #fff; }
.pd-ctl.locked .pn-side .pbtn svg { stroke: #fff; }

.pd-bar { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; min-height: 0; }
.pd-bar .btn { flex: 1; min-width: 0; padding-left: 0.6rem; padding-right: 0.6rem; }
.bar-line { margin: 0; color: var(--muted); font-weight: 700; text-align: center; }
.pd-call { position: absolute; left: 1rem; right: 1rem; top: 32%; z-index: 4; display: grid; justify-items: center; padding: 1rem; border-radius: 1.2rem; background: rgba(8, 6, 24, 0.88); box-shadow: inset 0 0 0 3px var(--pc); pointer-events: none; }
.pd-call b { font: 400 3rem/1 var(--display); color: var(--pc); }
.pd-call small { font-weight: 800; }
.pd-call.pop { animation: pop 0.3s ease-out; }
.pd-call .pb-art { height: 4.6rem; margin-bottom: 0.45rem; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pd-flash { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 var(--pc); z-index: 3; }
.pd-flash.on { animation: edge 0.35s ease-out; }
@keyframes edge { from { box-shadow: inset 0 0 0 14px var(--pc); } to { box-shadow: inset 0 0 0 0 var(--pc); } }

.pd-sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 3, 18, 0.7); }
.pd-sheet-card { position: relative; width: min(100%, 520px); max-height: 92dvh; overflow: auto; padding: 1.2rem 1rem calc(1rem + var(--sab)); border-radius: 1.4rem 1.4rem 0 0; background: var(--bg2); display: grid; gap: 0.6rem; user-select: none; }
.pd-sheet-card h2 { margin: 0 2.6rem 0.2rem 0; font: 400 1.6rem/1.1 var(--display); color: var(--yellow); }
.pd-games { display: grid; gap: 0.5rem; }
.pd-game { --gc: var(--yellow); display: grid; gap: 0.1rem; text-align: left; padding: 0.7rem 0.9rem; border: 0; border-radius: 1rem; background: var(--card); box-shadow: inset 0.35rem 0 0 var(--gc); cursor: pointer; }
.pd-game b { font: 400 1.25rem var(--display); color: var(--gc); }
.pd-game small { color: var(--muted); }
.pd-game.soon { opacity: 0.45; }

@media (orientation: landscape) and (max-height: 520px) {
  .pd-play { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .pd-top { grid-column: 1; }
  .pd-status { grid-column: 2; grid-row: 1; min-height: 44px; padding: 0.2rem 0.6rem; }
  .pd-score { font-size: 1.6rem; }
  .pd-ctl { grid-column: 1 / -1; }
  .pd-bar { grid-column: 1 / -1; }
  .pd-area { flex-direction: row; }
  .btns { flex-direction: column; flex: 1.2; }
  .bside { flex: 1.2; }
  .bside > .btns { flex-direction: row; }
  .pd-ctl.mode-touchpad .pd-area > .btns { height: auto; flex: 0 0 30%; }
  .pd-call { top: 20%; }
  .pn-map { flex: 1.15 1 0; min-width: 0; min-height: 0; aspect-ratio: auto; }
  .pn-dials { flex: none; flex-direction: column; justify-content: center; min-height: 0; }
  .pn-dial { grid-template-columns: 52px 52px; grid-template-rows: auto auto; gap: 0.4rem; justify-content: center; height: auto; }
  .pn-face { grid-column: 1 / -1; grid-row: 1; width: 112px; height: 112px; max-height: none; justify-self: center; }
  .pn-side { flex: 1 1 0; justify-content: center; }
  .pn-slider { height: 52px; }
  .pn-side .btns { height: 56px; flex-direction: row; }
}

/* Pixel faces (from Front Room). */
.px { width: min(100%, 320px); display: grid; gap: 0.7em; justify-items: center; margin: 0 auto; }
.px-stage { width: 100%; aspect-ratio: 1; border-radius: 0.8em; overflow: hidden; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
.px-grid { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.px-tools { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.px-tool { display: grid; justify-items: center; gap: 0.1em; min-height: 52px; padding: 0.35em 0.2em; border: 0; border-radius: 0.8em; background: rgba(255, 255, 255, 0.1); color: var(--text); font-size: 0.82em; font-weight: 600; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.px-tool svg { width: 1.5em; height: 1.5em; }
.px-tool[aria-pressed='true'] { background: var(--text); color: var(--ink); }
.px-tool:disabled { opacity: 0.4; }
.px-pal { width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45em; }
.px-sw { aspect-ratio: 1; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28); }
.px-sw[aria-pressed='true'] { transform: scale(1.1); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--bg), 0 0 0 5.5px #fff; }
.px-more { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45em; }
.px-label { width: 100%; color: var(--muted); font-size: 0.85em; text-align: center; }
.px-start { width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.px-start img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.px-clear { min-height: 44px; padding: 0 1em; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}