/* Colours: the night stage by default, a light stage when the phone is light (prefers-color-scheme), and whatever
   the Funn app asks for inside it (html[data-theme], set from ?theme= and the app's {type: 'funn:theme'} message by
   js/theme.js). Switching the phone's appearance changes it on the spot. Bright fills (your colour, the answer
   tiles, the big buttons) are the same in both; only the stage around them changes. */
:root {
  --me: #FF3D8B; --ink: #1A1033; --sun: #FFD60A;
  --stage: #0D0720; --card: #1C1238; --well: #2B1C55; --on-well: #fff; --plate: var(--plate);
  --fg: #fff; --fg-80: rgba(255, 255, 255, 0.8); --fg-75: rgba(255, 255, 255, 0.75); --fg-60: rgba(255, 255, 255, 0.6);
  --fg-55: rgba(255, 255, 255, 0.55); --fg-50: rgba(255, 255, 255, 0.5); --fg-45: rgba(255, 255, 255, 0.45); --fg-35: rgba(255, 255, 255, 0.35);
  --line: rgba(255, 255, 255, 0.2); --line-strong: rgba(255, 255, 255, 0.3); --line-soft: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.05); --glass-2: rgba(255, 255, 255, 0.07);
  --sun-text: var(--sun); --ok-text: #00D6A3; --err-text: #FF9EC4; --scrim: rgba(13, 7, 32, 0.94);
  --brand-mark: var(--sun); --who: var(--me); --who-dot: none;
  color-scheme: dark;
}
/* The light stage (the app's "Stage light"): lavender page, white cards, ink type, the same neon. Every text colour
   is at least 4.5:1 on the page and on cards. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --stage: #F3EEFF; --card: #FFFFFF; --well: #FFFFFF; --on-well: #1A1033; --plate: #1A1033;
    --fg: #1A1033; --fg-80: #3B3252; --fg-75: #3B3252; --fg-60: #564C6D; --fg-55: #564C6D; --fg-50: #564C6D; --fg-45: #564C6D; --fg-35: #564C6D;
    --line: rgba(26, 16, 51, 0.28); --line-strong: #1A1033; --line-soft: rgba(26, 16, 51, 0.12);
    --glass: rgba(26, 16, 51, 0.04); --glass-2: #FFFFFF;
    --sun-text: #765B00; --ok-text: #00735A; --err-text: #C41F47; --scrim: rgba(243, 238, 255, 0.96);
    --brand-mark: var(--ink); --who: var(--fg); --who-dot: inline-block;
    color-scheme: light;
  }
}
:root[data-theme='light'] {
  --stage: #F3EEFF; --card: #FFFFFF; --well: #FFFFFF; --on-well: #1A1033; --plate: #1A1033;
  --fg: #1A1033; --fg-80: #3B3252; --fg-75: #3B3252; --fg-60: #564C6D; --fg-55: #564C6D; --fg-50: #564C6D; --fg-45: #564C6D; --fg-35: #564C6D;
  --line: rgba(26, 16, 51, 0.28); --line-strong: #1A1033; --line-soft: rgba(26, 16, 51, 0.12);
  --glass: rgba(26, 16, 51, 0.04); --glass-2: #FFFFFF;
  --sun-text: #765B00; --ok-text: #00735A; --err-text: #C41F47; --scrim: rgba(243, 238, 255, 0.96);
  --brand-mark: var(--ink); --who: var(--fg); --who-dot: inline-block;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* A controller, not a page: no text selection, no callouts, no pull-to-refresh, no double-tap zoom. */
html, body { margin: 0; height: 100%; background: var(--stage); color: var(--fg); font-family: Figtree, system-ui, sans-serif; font-weight: 800; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; }
.screen { min-height: 100%; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.screen[hidden], #pad[hidden] { display: none !important; }
.brand { margin: 0; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 56px; color: var(--brand-mark); line-height: 1; }
.brand span { display: block; font-family: Figtree, sans-serif; font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg); }
h1, h2 { margin: 0; font-family: 'Bagel Fat One', Figtree, sans-serif; font-weight: 400; line-height: 1; }
h1 { font-size: 34px; max-width: 14ch; }
h2 { font-size: 30px; }
form { width: 100%; max-width: 360px; display: grid; gap: 8px; text-align: left; }
label, .label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-60); margin: 0; }
input, textarea { width: 100%; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--line); background: var(--card); color: var(--fg); font-size: 20px; outline: none; }
#join-code { font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 44px; letter-spacing: 0.25em; text-align: center; text-transform: uppercase; }
input:focus, textarea:focus { border-color: var(--sun); }
/* On the light stage the sunshine focus ring is faint on white: ink instead. */
:root[data-theme='light'] input:focus, :root[data-theme='light'] textarea:focus { border-color: var(--ink); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) input:focus, :root:not([data-theme='dark']) textarea:focus { border-color: var(--ink); } }
.big { width: 100%; max-width: 360px; padding: 18px; border: 0; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 var(--plate); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--plate); }
.big.quick { background: #00D6A3; }
.ghost { padding: 12px 22px; border-radius: 999px; border: 2px solid var(--line-strong); background: transparent; color: var(--fg); font-weight: 900; }
.link { border: 0; background: none; color: var(--fg-50); text-decoration: underline; padding: 8px; }
.err { color: var(--err-text); min-height: 1.2em; margin: 4px 0; font-size: 15px; }
.small { color: var(--fg-60); font-size: 14px; margin: 0; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--line-soft); border-top-color: var(--sun); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; width: 100%; max-width: 360px; }
/* The buddy colours: 12, in two rows of six (the drawing palette keeps its own grid). */
#join-colors, .lobbyv .swatches { grid-template-columns: repeat(6, 1fr); }
.swatches button { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--ink); background: var(--c); box-shadow: 0 0 0 2px var(--line); padding: 0; }
.swatches button.on { box-shadow: 0 0 0 4px var(--fg); transform: scale(1.08); }
.swatches button:disabled { opacity: 0.18; }
.tapper { position: fixed; left: -100px; top: 0; opacity: 0; pointer-events: none; }

/* --- the controller frame: a bar, then the view (what you see), then the layout (what you press) --- */
#pad { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); touch-action: none; overflow: hidden; background: radial-gradient(circle at 25% 70%, var(--glass), transparent 45%), var(--stage); }
.bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; font-size: 15px; color: var(--fg-80); }
.bar #who { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--who); }
/* On the light stage your name is ink (a yellow or mint name is faint on lavender) with your colour as a dot. */
.bar #who::before { content: ''; display: var(--who-dot); width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--me); border: 2px solid var(--ink); vertical-align: -1px; }
.bar .crown { font-size: 18px; }
.bar .code { font-size: 13px; letter-spacing: 0.2em; color: var(--fg-45); }
.sig { width: 12px; height: 12px; border-radius: 50%; background: #6B6585; flex: 0 0 auto; transition: background 0.3s; }
.sig.good { background: #00D6A3; box-shadow: 0 0 8px #00D6A3; }
.sig.ok { background: #FFD60A; }
.sig.bad { background: #FF3D8B; }
#view { flex: 0 0 auto; padding: 0 16px; max-height: 50%; overflow: auto; touch-action: pan-y; }
#view:empty { display: none; }
#layout { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
/* Nothing to press: the view gets the whole phone. */
#pad[data-layout='wait'] #view { flex: 1 1 auto; max-height: none; display: flex; flex-direction: column; justify-content: center; }
#pad[data-layout='wait'] #layout { flex: 0 0 auto; }
.lhint { margin: 6px 16px 0; font-size: 14px; color: var(--fg-55); text-align: center; }
.lhint.title { font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 22px; color: var(--sun-text); }
.lhint.mfocus { margin-top: -6px; font-size: 18px; font-weight: 900; color: var(--fg); max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lhint.auto { color: var(--sun-text); font-size: 16px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.prompt { margin: 8px 16px; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 24px; text-align: center; }
button.down { filter: brightness(1.2); }

/* menu: the master's remote */
.menu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px 18px; }
.cross { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; width: min(84vw, 46vh, 360px); aspect-ratio: 1; }
.cross button { border: 5px solid var(--ink); border-radius: 26px; background: var(--well); color: var(--on-well); font-size: 30px; box-shadow: 0 7px 0 var(--plate); padding: 0; }
.cross .k-up { grid-area: 1 / 2; } .cross .k-left { grid-area: 2 / 1; } .cross .k-ok { grid-area: 2 / 2; } .cross .k-right { grid-area: 2 / 3; } .cross .k-down { grid-area: 3 / 2; }
.cross .k-ok { border-radius: 50%; background: var(--sun); color: var(--ink); font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 34px; }
.cross button.down, .menu .back.down { transform: translateY(5px); box-shadow: 0 2px 0 var(--plate); background: var(--me); }
.menu .back { width: min(84vw, 360px); padding: 16px; border-radius: 999px; border: 4px solid var(--ink); background: #fff; color: var(--ink); font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 var(--plate); }
/* the difficulty picker's options above the pad: a tap picks one, the arrows move the focus */
.mopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(92vw, 420px); }
.mopts button { padding: 14px 4px; border-radius: 18px; border: 4px solid var(--ink); background: var(--well); color: var(--on-well); font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 20px; box-shadow: 0 5px 0 var(--plate); }
.mopts button.on { background: var(--sun); color: var(--ink); transform: scale(1.05); }
.mopts ~ .cross { width: min(76vw, 38vh, 320px); }

/* stick and dpad: thumb zone on the left, buttons on the right */
.stickpad { flex: 1; position: relative; display: flex; }
.zone { flex: 1 1 55%; position: relative; touch-action: none; }
.stick { position: absolute; left: 50%; top: 55%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 4px solid var(--line); background: var(--glass); pointer-events: none; will-change: transform; }
.stick.live { border-color: var(--me); }
.knob { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--me); border: 5px solid var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); will-change: transform; }
.zhelp { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; font-size: 13px; color: var(--fg-35); text-align: center; pointer-events: none; }
.btns { flex: 0 0 auto; display: flex; flex-direction: column-reverse; gap: 18px; align-items: center; justify-content: center; padding: 0 5vw 0 8px; }
.btns button { width: 132px; height: 132px; border-radius: 50%; border: 6px solid var(--ink); background: var(--me); color: #fff; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 26px; -webkit-text-stroke: 1px var(--ink); box-shadow: 0 10px 0 var(--plate); touch-action: none; padding: 0; }
.btns .bb { width: 96px; height: 96px; font-size: 20px; background: #fff; color: var(--ink); -webkit-text-stroke: 0; }
.btns button.down { transform: translateY(8px); box-shadow: 0 2px 0 var(--plate); }
.cross.small { width: min(52vw, 40vh, 280px); align-self: center; margin-left: 4vw; }
.cross.small button { touch-action: none; }
@media (orientation: landscape) { .btns { flex-direction: row; } .btns button { width: 150px; height: 150px; } .btns .bb { width: 110px; height: 110px; } }

/* buttons: 1-4 huge buttons */
.bigbtns { flex: 1; display: grid; gap: 14px; padding: 12px 16px 18px; }
.bigbtns.n2 { grid-template-rows: 1fr 1fr; }
.bigbtns.n3, .bigbtns.n4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.bigbtns.n3 button:first-child { grid-column: 1 / span 2; }
.bigbtns button { border: 6px solid var(--ink); border-radius: 36px; background: var(--c); color: var(--ink); font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: clamp(26px, 8vw, 56px); box-shadow: 0 10px 0 var(--plate); touch-action: none; padding: 8px; }
.bigbtns.n1 button { color: #fff; -webkit-text-stroke: 2px var(--ink); }
.bigbtns button.down { transform: translateY(8px); box-shadow: 0 2px 0 var(--plate); }
@media (orientation: landscape) { .bigbtns.n2 { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }

/* wheel: tilt to steer, gas and brake */
.wheel { flex: 1; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; padding: 8px 16px 16px; align-items: stretch; }
.wheel .side { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.wheel .ba, .wheel .bb { flex: 1; min-height: 90px; border: 6px solid var(--ink); border-radius: 30px; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 26px; box-shadow: 0 8px 0 var(--plate); touch-action: none; }
.wheel .ba { background: #00D6A3; color: var(--ink); }
.wheel .bb { background: #fff; color: var(--ink); flex: 0.6; }
.wheel .bc { flex: 0.6; min-height: 70px; border: 6px solid var(--ink); border-radius: 30px; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 22px; box-shadow: 0 8px 0 var(--plate); touch-action: none; background: #2D5BFF; color: #fff; }
.wheel .arrows { display: flex; gap: 10px; flex: 0.8; }
.wheel .arrows button { flex: 1; border: 5px solid var(--ink); border-radius: 24px; background: var(--well); color: var(--on-well); font-size: 30px; box-shadow: 0 6px 0 var(--plate); touch-action: none; }
.wheel.tilting .arrows, .tilting .wheel .arrows { display: none; }
.tilting .whelp { visibility: hidden; }
.wheel button.down { transform: translateY(6px); box-shadow: 0 2px 0 var(--plate); }
.dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rim { width: min(36vw, 60vh); aspect-ratio: 1; border-radius: 50%; border: 18px solid var(--me); box-shadow: inset 0 0 0 5px var(--ink), 0 0 0 5px var(--ink); position: relative; will-change: transform; }
.rim i { position: absolute; left: 50%; top: -14px; width: 10px; height: 26px; margin-left: -5px; border-radius: 5px; background: #fff; }
.whelp { margin: 0; font-size: 13px; color: var(--fg-50); }
#turn { display: none; position: absolute; inset: 0; z-index: 5; background: var(--scrim); flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-size: 22px; }
.phone-turn { width: 60px; height: 100px; border: 6px solid var(--fg); border-radius: 14px; animation: turn 1.6s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #pad[data-layout='wheel'] #turn { display: flex; } }

/* choices: a list of answers */
.choices { flex: 1; overflow: auto; touch-action: pan-y; display: grid; gap: 12px; align-content: start; padding: 4px 16px 18px; }
.choices button { text-align: left; padding: 16px 18px; border-radius: 22px; border: 3px solid var(--ink); background: var(--t); color: #fff; box-shadow: 0 5px 0 var(--plate); min-height: 64px; }
.choices button b { display: block; font-family: 'Bagel Fat One', Figtree, sans-serif; font-weight: 400; font-size: 24px; -webkit-text-stroke: 1px var(--ink); }
.choices button span { display: block; font-size: 15px; margin-top: 4px; color: var(--ink); }
.choices button.on { outline: 5px solid var(--fg); transform: scale(1.02); }
.choices button:disabled { opacity: 0.4; }
.choices button.tile { min-height: 90px; }
@media (orientation: landscape) { .choices { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* Long lists (votes with up to 11 names) fit on one screen: two columns, compact buttons. */
.choices.many { grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 12px; }
.choices.many button { padding: 10px 12px; min-height: 52px; border-radius: 18px; }
.choices.many button b { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choices.lots button { min-height: 44px; padding: 8px 10px; box-shadow: 0 3px 0 var(--plate); }
.choices.lots button b { font-size: 17px; }
.choices.lots button span { display: none; }

/* text */
.textpad { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; max-width: none; align-items: center; }
.textpad textarea { resize: none; max-width: 480px; }
.textpad .count, .textpad .sent { margin: 0; font-size: 13px; color: var(--fg-50); }
.textpad .sent { color: var(--ok-text); font-size: 16px; }

/* draw */
.drawpad { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 16px; }
.paper { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.paper canvas { border-radius: 18px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--plate); background: #fff; touch-action: none; }
.tools { display: flex; gap: 10px; align-items: center; }
.tools .swatches { flex: 1; gap: 6px; max-width: none; }
.tools .swatches button { border-width: 3px; }
.tool { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 24px; box-shadow: 0 4px 0 var(--plate); padding: 0; }
.tool.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--plate); }
@media (orientation: landscape) { .drawpad { flex-direction: row; } .tools { flex-direction: column; width: 120px; } .tools .swatches { grid-template-columns: repeat(2, 1fr); } }

/* wait */
.waitpad { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 20px 26px; text-align: center; }
.waitpad p { margin: 0; font-size: 17px; color: var(--fg-75); }
.mini { width: 40px; height: 44px; border-radius: 50% 50% 46% 46%; background: var(--me); border: 4px solid var(--ink); animation: hop 1.4s ease-in-out infinite; }

/* --- views --- */
.me-bean { width: 130px; height: 140px; border-radius: 50% 50% 46% 46%; background: var(--me); border: 6px solid var(--ink); box-shadow: 0 0 0 4px var(--line-soft); position: relative; animation: hop 1.4s ease-in-out infinite; flex: 0 0 auto; }
.me-bean::before, .me-bean::after { content: ''; position: absolute; top: 30%; width: 20%; height: 23%; border-radius: 50%; background: radial-gradient(circle at 60% 55%, var(--ink) 0 30%, #fff 34%); }
.me-bean::before { left: 23%; }
.me-bean::after { right: 23%; }
@keyframes hop { 50% { transform: translateY(-10px); } }
.lobbyv { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0; text-align: center; }
.me-name { max-width: 300px; text-align: center; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 28px; padding: 10px 14px; }
/* The master's lobby is compact: the remote needs the room. */
#pad[data-layout='menu'] .lobbyv { display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; align-items: center; padding: 4px 0; }
#pad[data-layout='menu'] .me-bean { width: 56px; height: 60px; border-width: 4px; grid-row: 1 / span 2; }
#pad[data-layout='menu'] .me-name { font-size: 20px; padding: 8px 12px; max-width: none; }
#pad[data-layout='menu'] .lobbyv .swatches { gap: 5px; }
#pad[data-layout='menu'] .lobbyv .host-note, #pad[data-layout='menu'] .lobbyv .leave { display: none; }
.cardv { margin: 6px 0; padding: 14px 18px; border-radius: 22px; background: var(--t, var(--card)); text-align: center; }
.cardv h2 { font-size: 26px; }
.cardv p { margin: 6px 0 0; font-size: 15px; color: var(--fg-80); }
/* A card the TV tinted keeps white type on its colour in both looks. */
.cardv[style*='--t'] { color: #fff; }
.cardv[style*='--t'] p { color: rgba(255, 255, 255, 0.8); }
.cardv .big-word { font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 44px; color: var(--fg); -webkit-text-stroke: 1px var(--ink); }
.cardv[style*='--t'] .big-word { color: #fff; }
#pad[data-layout='wait'] .cardv { padding: 28px 20px; }
#pad[data-layout='wait'] .cardv h2 { font-size: 34px; }
.resv, .outv { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0 12px; }
.resv .place { margin: 0; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 96px; line-height: 1; color: var(--me); -webkit-text-stroke: 3px var(--ink); }
.resv .score { margin: 0; color: var(--sun-text); font-size: 20px; }
.resv .notes { margin: 0; color: var(--ok-text); font-size: 15px; }
.resv .standing { margin: 0; color: var(--fg-75); font-size: 15px; }
.resv .award { margin: 0; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 24px; color: var(--sun-text); }
.resv .lb-link { margin-top: 2px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line-strong); color: var(--fg); text-decoration: none; font-weight: 900; font-size: 15px; }
.resv .lb-link:active { background: var(--card); }
#pad[data-layout='buttons'] .resv .place { font-size: 64px; }
#pad[data-layout='buttons'] .resv h2 { font-size: 24px; }
.reacts { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 8px; width: 100%; max-width: 380px; justify-content: center; margin-top: 6px; }
.reacts button { width: 100%; aspect-ratio: 1; border-radius: 16px; border: 0; background: var(--card); font-size: 30px; padding: 0; touch-action: manipulation; }
.reacts button:active { background: var(--well); }
:root[data-theme='light'] .reacts button { border: 2px solid var(--line-soft); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .reacts button { border: 2px solid var(--line-soft); } }
.bets { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 420px; }
.bets button { padding: 14px 18px; border-radius: 999px; border: 3px solid var(--ink); background: var(--c); color: #fff; font-weight: 900; font-size: 18px; -webkit-text-stroke: 0.5px var(--ink); }
.bets button.on { outline: 4px solid var(--fg); transform: scale(1.06); }

/* Short landscape screens (phones held sideways, the app's controller). */
@media (orientation: landscape) and (max-height: 500px) {
  .screen { padding: 14px 70px; gap: 10px; }
  .bar { height: 34px; }
  #view { max-height: 40%; }
  .lobbyv { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .me-bean { width: 80px; height: 86px; }
  .resv .place { font-size: 64px; }
  .cross { width: min(40vw, 62vh); }
}

/* After a ranked game: league + progress, rival, daily challenge, challenge a friend (pad.js rankCard). */
.rk { width: min(100%, 360px); display: grid; gap: 7px; margin-top: 4px; padding: 12px 14px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--line-soft); text-align: left; }
.rk-head { margin: 0; font-family: 'Bagel Fat One', Figtree, sans-serif; font-size: 19px; line-height: 1.1; color: var(--fg); }
.rk-league { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 900; }
.rk-league b { color: var(--g); }
.rk-league span:last-child { margin-left: auto; color: var(--fg-80); font-size: 13px; text-align: right; }
.rk-gem { width: 14px; height: 14px; flex: 0 0 auto; background: var(--g); clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%); }
.rk-bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--g); }
.rk-rival { margin: 0; padding: 7px 10px; border-radius: 12px; background: rgba(255, 61, 139, 0.18); font-size: 14px; font-weight: 900; }
.rk-daily { margin: 0; font-size: 14px; font-weight: 900; color: var(--ok-text); }
.rk-daily.is-new { font-size: 17px; }
.rk-chal { margin-top: 2px; padding: 12px; border: 0; border-radius: 999px; background: #FF3D8B; color: #fff; font: inherit; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 var(--plate); }
.rk-chal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--plate); }
.rk-chal:disabled { opacity: 0.7; }
.rk-link { margin: 0; font-size: 12px; color: var(--fg-75); word-break: break-all; user-select: all; -webkit-user-select: all; }

/* The lobby playground pad: emoji row, the quick poll, the host's button, then the stick + BOING / WAVE. */
#pad[data-layout='playground'] .lobbyv { display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; align-items: center; padding: 4px 0; }
#pad[data-layout='playground'] .me-bean { width: 56px; height: 60px; border-width: 4px; grid-row: 1 / span 2; }
#pad[data-layout='playground'] .me-name { font-size: 20px; padding: 8px 12px; max-width: none; }
#pad[data-layout='playground'] .lobbyv .swatches { gap: 5px; }
#pad[data-layout='playground'] .lobbyv .host-note, #pad[data-layout='playground'] .lobbyv .leave { display: none; }
#pad[data-layout='playground'] #view { max-height: 34%; }
.pgtop { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 0; }
.pghost { min-height: 54px; border-radius: 999px; border: 5px solid var(--ink); background: var(--sun); color: var(--ink); font: 900 20px Figtree, system-ui, sans-serif; box-shadow: 0 6px 0 var(--plate); }
.pghost:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--plate); }
.pgemo { display: flex; justify-content: center; gap: 10px; }
.pgemo button { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--line); background: var(--glass); font-size: 24px; padding: 0; }
.pgemo button:active { transform: scale(0.9); }
.pgpoll { padding: 10px 12px; border-radius: 22px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--plate); }
.pgpoll[hidden] { display: none; }
.pgq { margin: 0 0 8px; font-weight: 900; font-size: 18px; text-align: center; }
.pgq span { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #FF3D8B; }
.pgab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pgab button { min-height: 52px; border-radius: 16px; border: 4px solid var(--ink); background: #F2EEFF; color: var(--ink); font: 900 17px Figtree, system-ui, sans-serif; }
.pgab button:first-child.on { background: #00D6A3; }
.pgab button:last-child.on { background: #FFD60A; }
.pgab button b { font-family: 'Bagel Fat One', Figtree, sans-serif; font-weight: 400; margin-left: 4px; }
/* The lobby warm-up: your entry sound, a calm row of chips (the TV makes the noise). */
.pgentry { padding: 8px 10px; border-radius: 20px; background: var(--glass); border: 3px solid var(--line); }
.pgentry[hidden] { display: none; }
.pgentry .pgq { margin: 0 0 6px; }
.pgsounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pgsounds button { min-height: 40px; border-radius: 14px; border: 3px solid var(--line); background: transparent; color: inherit; font: 800 14px Figtree, system-ui, sans-serif; padding: 0 4px; }
.pgsounds button.on { background: var(--sun); color: var(--ink); border-color: var(--ink); }
.pgsounds button:active { transform: scale(0.96); }
.pgstick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pgstick .btns .ba { font-size: 24px; }
.waitpad .skip { margin-top: 6px; font-size: 14px; opacity: 0.7; }

/* A notice from the TV ("Ek Shabd needs 3 people — get more phones in!"), over whatever layout is showing. */
#toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; border-radius: 18px; background: #FF3D8B; color: #fff; font-weight: 900; font-size: 16px; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); pointer-events: none; animation: toastin 0.25s ease-out; }
#toast[hidden] { display: none; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -8px); } }

/* --- roles: the badge in the bar, the host's sheet, the audience view (console roles, docs/roles) --- */
.bar .roles { display: inline-flex; gap: 4px; flex: 0 1 auto; overflow: hidden; }
.bar #who { min-width: 64px; }
.rb { display: inline-flex; align-items: center; gap: 3px; line-height: 1.1; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; border: 2px solid var(--ink); background: var(--card); color: var(--fg); }
.rb-host { background: var(--sun); color: var(--ink); }
.rb-audience { background: #B98CFF; color: var(--ink); }
.rb-teen { background: #00D6A3; color: var(--ink); }
.rb-guest { background: var(--well); color: var(--on-well); }
.host-btn { border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink); font: 900 13px Figtree, system-ui, sans-serif; padding: 5px 10px; }
#sheet { position: fixed; inset: 0; z-index: 30; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
#sheet[hidden] { display: none; }
.sheet-card { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; box-sizing: border-box; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--card); display: flex; flex-direction: column; gap: 10px; animation: sheetUp 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-card { animation: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 22px; }
.sheet-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--well); color: var(--on-well); font: 900 17px Figtree, system-ui, sans-serif; }
.sheet-btn[disabled] { opacity: 0.5; }
.sheet-btn.small { width: auto; flex: 0 0 auto; padding: 12px 14px; font-size: 15px; }
.sheet-why { margin-top: -4px; }
.sheet-label { margin-top: 6px; }
.sheet-row { display: flex; gap: 8px; }
.sheet-row select { flex: 1; min-width: 0; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--well); color: var(--on-well); font: 800 16px Figtree, system-ui, sans-serif; }
.sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sheet-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 8px; border-radius: 12px; background: var(--well); color: var(--on-well); }
.sheet-list li > span { flex: 1; min-width: 0; }
.sheet-face { width: 28px; height: 28px; flex: none; }
.link.danger { color: var(--err-text); }
.check { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--fg-80); margin-top: 6px; }
.check input { width: 22px; height: 22px; padding: 0; }
.audv { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 16px 20px; text-align: center; }
.audv h2 { margin: 0; font-size: 24px; }
.aud-line { margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); font-size: 20px; max-width: 420px; }
.aud-heart { padding: 14px 22px; border-radius: 999px; border: 3px solid var(--ink); background: #FF3D8B; color: #fff; font: 900 18px Figtree, system-ui, sans-serif; }
.aud-heart.on, .aud-heart[disabled] { opacity: 0.7; }
.aud-wall { display: grid; gap: 8px; width: 100%; max-width: 420px; }
.aud-wall button { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--well); color: var(--on-well); font: 800 16px Figtree, system-ui, sans-serif; text-align: left; }
.aud-wall button.on { border-color: #FF3D8B; box-shadow: 0 0 0 3px #FF3D8B; }
.aud-seat { max-width: 360px; }
.lobbyv .watch { margin-top: 4px; }
#pad[data-layout='playground'] .lobbyv .watch, #pad[data-layout='menu'] .lobbyv .watch { grid-column: 1 / -1; justify-self: center; margin: 0; padding: 2px 8px; font-size: 14px; }

/* The Funn mark beside the wordmark on the controller. */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand b { font-weight: 400; display: block; }
.brand__mark { height: 64px; width: auto; filter: drop-shadow(0 0 16px rgba(255, 214, 10, 0.3)); }