/* ═══════════════════════════════════════════════════════════════
   KINKY KILLA — after-dark club neon
   Built for iPad landscape. Everything scales from --u.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* one unit drives the whole layout; shrinks on short screens */
  --u: clamp(7px, 1.05vh, 12px);

  --void:        #07060b;
  --void-2:      #0d0a16;
  --ink:         #f4eefb;
  --ink-dim:     #a396b8;
  --ink-faint:   #6b5f80;

  --pink:        #ff2d95;
  --violet:      #a855ff;
  --cyan:        #22e0ff;
  --lime:        #b6ff3d;
  --amber:       #ffb020;
  --red:         #ff2d55;

  --felt-a:      #0a3a2c;
  --felt-b:      #05201a;

  --glass:       rgba(22, 16, 34, .72);
  --glass-line:  rgba(168, 85, 255, .28);

  --easy:   var(--lime);
  --medium: var(--amber);
  --hard:   var(--red);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  /* dvh tracks the *visible* height, so the bottom row can't hide behind
     Safari's toolbar. The 100% above it is the fallback for old browsers. */
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: 'Sora', ui-sans-serif, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
b, strong { font-weight: 800; }

/* ── Backdrop: the table, lit like a club ────────────────────── */

.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.felt {
  position: absolute;
  inset: 6% 8%;
  border-radius: calc(var(--u) * 1.4);
  background:
    radial-gradient(90% 70% at 50% 45%, var(--felt-a) 0%, var(--felt-b) 70%, #041310 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 1.6) #2a1508,
    0 0 0 calc(var(--u) * 1.9) #150a05,
    0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, .9),
    inset 0 0 calc(var(--u) * 12) rgba(0, 0, 0, .65);
  opacity: .85;
  transform: rotate(-1.1deg);
}

/* faint baize weave */
.felt-lines {
  position: absolute; inset: 0; border-radius: inherit; opacity: .16;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.rail { position: absolute; background: linear-gradient(180deg, #3a1d0c, #1c0d05); }
.rail-t, .rail-b { left: 3%; right: 3%; height: calc(var(--u) * .8); }
.rail-t { top: calc(var(--u) * -.4); } .rail-b { bottom: calc(var(--u) * -.4); }
.rail-l, .rail-r { top: 3%; bottom: 3%; width: calc(var(--u) * .8); }
.rail-l { left: calc(var(--u) * -.4); } .rail-r { right: calc(var(--u) * -.4); }

.pocket {
  position: absolute;
  width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1a1a1a, #000 70%);
  box-shadow: inset 0 0 calc(var(--u)) #000, 0 0 calc(var(--u) * .6) rgba(0,0,0,.9);
}
.p-tl { top: calc(var(--u) * -1.2); left: calc(var(--u) * -1.2); }
.p-tr { top: calc(var(--u) * -1.2); right: calc(var(--u) * -1.2); }
.p-bl { bottom: calc(var(--u) * -1.2); left: calc(var(--u) * -1.2); }
.p-br { bottom: calc(var(--u) * -1.2); right: calc(var(--u) * -1.2); }
.p-tc { top: calc(var(--u) * -1.4); left: 50%; margin-left: calc(var(--u) * -1.8); }
.p-bc { bottom: calc(var(--u) * -1.4); left: 50%; margin-left: calc(var(--u) * -1.8); }

/* magenta wash + overhead lamp */
.spotlight {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 8%,  rgba(255, 45, 149, .30), transparent 60%),
    radial-gradient(70% 60% at 12% 95%, rgba(168, 85, 255, .26), transparent 65%),
    radial-gradient(50% 45% at 88% 90%, rgba(34, 224, 255, .14), transparent 60%),
    radial-gradient(75% 60% at 50% 42%, rgba(255, 230, 190, .10), transparent 70%);
  mix-blend-mode: screen;
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 35%, rgba(3, 2, 6, .85) 100%);
}

/* Static on purpose: an animated grain under the overlay's
   backdrop-filter forces a full-screen re-blur every frame and drops
   the dare card to single-digit fps on an iPad. */
.grain {
  position: absolute; inset: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Screen system ───────────────────────────────────────────── */

#app { position: relative; z-index: 1; height: 100%; }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
  padding-left:  max(calc(var(--u) * 3), env(safe-area-inset-left));
  padding-right: max(calc(var(--u) * 3), env(safe-area-inset-right));
}
.screen.is-active { display: flex; animation: screen-in .38s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(calc(var(--u) * 1.4)); } }

.is-hidden { display: none !important; }

/* ── Menu ────────────────────────────────────────────────────── */

.brand { text-align: center; margin-top: calc(var(--u) * 1); }

.wordmark {
  font-family: 'Monoton', cursive;
  font-weight: 400;
  line-height: .96;
  letter-spacing: .02em;
  font-size: clamp(30px, 7.4vh, 76px);
  display: flex; flex-direction: column; align-items: center;
}
.wordmark span {
  color: #ffe9f6;
  text-shadow:
    0 0 calc(var(--u) * .5) #fff,
    0 0 calc(var(--u) * 1.6) var(--pink),
    0 0 calc(var(--u) * 3.4) var(--pink),
    0 0 calc(var(--u) * 7) rgba(255, 45, 149, .65);
  animation: flicker 7s infinite;
}
.wordmark em {
  font-style: normal;
  color: #f2e6ff;
  text-shadow:
    0 0 calc(var(--u) * .5) #fff,
    0 0 calc(var(--u) * 1.6) var(--violet),
    0 0 calc(var(--u) * 3.4) var(--violet),
    0 0 calc(var(--u) * 7) rgba(168, 85, 255, .6);
  animation: flicker 9s .6s infinite;
}
@keyframes flicker {
  0%, 88%, 100% { opacity: 1; }
  89%  { opacity: .35; }
  90%  { opacity: 1; }
  93%  { opacity: .55; }
  94%  { opacity: 1; }
}

.tagline {
  margin-top: calc(var(--u) * 1.2);
  font-size: clamp(11px, 1.9vh, 17px);
  font-weight: 300;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* the rack of ball-buttons */
.rack {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 56px);
  flex-wrap: wrap;
}

.ball {
  --hue: var(--pink);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 1.1);
  transition: transform .3s var(--ease);
  animation: ball-drop .6s var(--ease) both;
}
.ball:nth-child(1) { animation-delay: .05s; }
.ball:nth-child(2) { animation-delay: .12s; }
.ball:nth-child(3) { animation-delay: .19s; }
.ball:nth-child(4) { animation-delay: .26s; }
@keyframes ball-drop {
  from { opacity: 0; transform: translateY(calc(var(--u) * -3)) scale(.82); }
}

.ball-face {
  position: relative;
  width: clamp(88px, 20vh, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.28) 9%, transparent 30%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hue) 92%, white) 0%, var(--hue) 48%, color-mix(in srgb, var(--hue) 45%, #000) 88%, #050208 100%);
  box-shadow:
    0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--hue) 55%, transparent),
    0 0 calc(var(--u) * 6)   color-mix(in srgb, var(--hue) 32%, transparent),
    inset 0 calc(var(--u) * -1.4) calc(var(--u) * 2.4) rgba(0,0,0,.6),
    0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0,0,0,.75);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.ball-num {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #ded3e8 70%, #b4a7c2);
  display: grid; place-items: center;
  font-family: 'Anton', sans-serif;
  font-size: clamp(20px, 4.4vh, 40px);
  color: #16101f;
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.28);
}
.ball-label {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(13px, 2.5vh, 24px);
  color: var(--ink);
  text-shadow: 0 0 calc(var(--u) * 1.4) color-mix(in srgb, var(--hue) 70%, transparent);
}

.ball:active { transform: scale(.94); }
.ball:active .ball-face {
  box-shadow:
    0 0 calc(var(--u) * 4) color-mix(in srgb, var(--hue) 80%, transparent),
    0 0 calc(var(--u) * 9) color-mix(in srgb, var(--hue) 50%, transparent),
    inset 0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(0,0,0,.6);
}

.ball-new      { --hue: var(--pink); }
.ball-resume   { --hue: var(--cyan); }
.ball-dares    { --hue: var(--violet); }
.ball-funhouse { --hue: var(--amber, #ffb02e); text-decoration: none; color: inherit; }
.ball:nth-child(5) { animation-delay: .33s; }
.ball-settings { --hue: #2b2438; }
.ball-settings .ball-num { background: radial-gradient(circle at 38% 32%, #fff, #cfc4dd 70%, #9d8fb0); }

.menu-foot {
  text-align: center;
  font-size: clamp(10px, 1.7vh, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-height: calc(var(--u) * 2);
}

/* ── Panels / shared controls ────────────────────────────────── */

.sheet {
  flex: 1;
  display: flex; flex-direction: column;
  gap: calc(var(--u) * 1.6);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-line);
  border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.sheet-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 1.6);
  border-bottom: 1px solid rgba(168,85,255,.18);
}
.sheet-head h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(17px, 3.4vh, 32px);
  text-align: center;
  text-shadow: 0 0 calc(var(--u) * 2) rgba(255,45,149,.5);
}
.sheet-head > :first-child { justify-self: start; }
.sheet-head > :last-child  { justify-self: end; }

.label {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: clamp(10px, 1.7vh, 14px);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--violet);
}
.label small { color: var(--ink-faint); letter-spacing: .1em; margin-left: .6em; }

.muted { color: var(--ink-dim); font-size: clamp(11px, 1.8vh, 15px); font-weight: 300; line-height: 1.55; }

.btn-primary, .btn-secondary, .btn-ghost {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(12px, 2.1vh, 19px);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #fff;
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255,45,149,.5), 0 calc(var(--u)*.6) calc(var(--u)*1.6) rgba(0,0,0,.5);
}
.btn-secondary {
  background: rgba(168,85,255,.16);
  border: 1px solid rgba(168,85,255,.45);
  color: var(--ink);
}
.btn-ghost {
  color: var(--ink-dim);
  border: 1px solid rgba(168,85,255,.22);
  background: rgba(255,255,255,.03);
}
.btn-ghost.sm { font-size: clamp(10px, 1.7vh, 15px); padding: calc(var(--u)*.7) calc(var(--u)*1.6); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active { transform: scale(.95); }
button:disabled { opacity: .32; pointer-events: none; }

input[type=text], input[type=url], textarea {
  background: rgba(8, 5, 14, .7);
  border: 1px solid rgba(168,85,255,.3);
  border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  font-size: clamp(13px, 2.1vh, 18px);
  width: 100%;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,45,149,.18); }
::placeholder { color: var(--ink-faint); }

.add-row { display: flex; gap: calc(var(--u) * 1.2); }
.add-row.wide { max-width: 100%; }

.status-line { font-size: clamp(11px, 1.8vh, 15px); min-height: 1.4em; }
.status-line.ok  { color: var(--lime); }
.status-line.bad { color: var(--red); }

/* ── Setup screen ────────────────────────────────────────────── */

.setup-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: calc(var(--u) * 3);
}
.setup-col { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-height: 0; }

.chips {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: calc(var(--u) * 1);
  padding-right: calc(var(--u) * .6);
}
.chip {
  padding: calc(var(--u) * .9) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 5);
  border: 1px solid rgba(168,85,255,.35);
  background: rgba(168,85,255,.08);
  font-size: clamp(12px, 2vh, 17px);
  transition: all .2s var(--ease);
}
.chip.is-on {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  border-color: transparent; color: #fff;
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255,45,149,.55);
}
.chip:active { transform: scale(.94); }

.roster { flex: 1; min-height: 0; overflow-y: auto; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.roster li {
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.4);
  font-size: clamp(12px, 2vh, 17px);
  animation: screen-in .25s var(--ease) both;
}
.roster .idx { font-family: 'Anton', sans-serif; color: var(--violet); min-width: 1.6em; }
.roster .nm  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .rm  { color: var(--ink-faint); font-size: 1.3em; line-height: 1; padding: 0 .3em; }
.roster .rm:active { color: var(--red); }

/* optional per-player M/F, only used to gate gender-specific mini-games */
.mf-toggle { display: flex; gap: calc(var(--u) * .3); }
.mf-btn {
  min-width: 1.9em;
  padding: .2em 0;
  border-radius: calc(var(--u) * .7);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ink-faint);
  font-size: .82em; font-weight: 700;
}
.mf-btn.is-on { border-color: var(--cyan); color: var(--cyan); background: rgba(34,224,255,.12); }

.toggle { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: clamp(12px, 2vh, 17px); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: calc(var(--u) * 5.2); height: calc(var(--u) * 2.8);
  border-radius: calc(var(--u) * 5);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(168,85,255,.3);
  position: relative; transition: background .25s, box-shadow .25s;
}
.toggle-thumb {
  position: absolute; top: 50%; left: calc(var(--u) * .3);
  width: calc(var(--u) * 2.1); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink-dim);
  transform: translateY(-50%);
  transition: left .25s var(--ease), background .25s;
}
.toggle input:checked + .toggle-track { background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 calc(var(--u)*1.4) rgba(255,45,149,.5); }
.toggle input:checked + .toggle-track .toggle-thumb { left: calc(100% - var(--u) * 2.4); background: #fff; }

/* ── Game screen ─────────────────────────────────────────────── */

#screen-game {
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
  /* keep the action row clear of the home indicator and rounded corners */
  padding-bottom: max(calc(var(--u) * 1.6), env(safe-area-inset-bottom));
  padding-left:   max(calc(var(--u) * 2.4), env(safe-area-inset-left));
  padding-right:  max(calc(var(--u) * 2.4), env(safe-area-inset-right));
  gap: calc(var(--u) * 1.4);
}

.game-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u)*1.6); }
.round-pill {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .22em;
  font-size: clamp(11px, 1.9vh, 16px); color: var(--ink-dim);
}
.round-pill b { color: var(--cyan); text-shadow: 0 0 calc(var(--u)*1.4) rgba(34,224,255,.6); }

.game-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(190px, 26%); gap: calc(var(--u) * 2.4); }

.now-up {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.6);
  text-align: center;
}
.eyebrow {
  font-family: 'Sora', sans-serif; font-weight: 300;
  text-transform: uppercase; letter-spacing: .42em;
  font-size: clamp(10px, 1.9vh, 16px);
  color: var(--ink-dim);
}
.player-name {
  font-family: 'Anton', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em;
  line-height: .94;
  font-size: clamp(38px, 11vh, 118px);
  color: #fff;
  text-shadow:
    0 0 calc(var(--u) * 1.2) rgba(255,255,255,.5),
    0 0 calc(var(--u) * 3)   var(--pink),
    0 0 calc(var(--u) * 7)   rgba(255,45,149,.55);
  word-break: break-word;
  animation: name-in .45s var(--ease) both;
}
@keyframes name-in { from { opacity: 0; transform: scale(.9) translateY(calc(var(--u)*1.6)); } }

.lives { display: flex; gap: calc(var(--u) * .9); justify-content: center; }
.life {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff9, transparent 34%),
              radial-gradient(circle at 50% 50%, var(--pink), #7a0f45 80%);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255,45,149,.7);
  transition: all .35s var(--ease);
}
.life.spent {
  background: radial-gradient(circle at 50% 50%, #241c30, #120d1a);
  box-shadow: inset 0 0 calc(var(--u)*.8) #000;
  opacity: .5;
}
.lives-lg .life { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
.lives-sm .life { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }

.rail-list { display: flex; flex-direction: column; gap: calc(var(--u) * .8); overflow-y: auto; min-height: 0; }
.rail-row {
  display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  font-size: clamp(11px, 1.9vh, 16px);
  transition: all .3s var(--ease);
}
.rail-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row.is-current {
  background: linear-gradient(90deg, rgba(255,45,149,.28), rgba(168,85,255,.12));
  border-color: rgba(255,45,149,.6);
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255,45,149,.35);
}
.rail-row.is-out { opacity: .34; }
.rail-row.is-out .nm { text-decoration: line-through; }
.rail-row .tag {
  font-family: 'Anton', sans-serif; font-size: .78em; letter-spacing: .12em;
  color: var(--cyan); text-transform: uppercase;
}

/* action buttons */
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.2); }
.act {
  --hue: var(--violet);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .3);
  padding: calc(var(--u) * 1.6) calc(var(--u) * .8);
  min-height: calc(var(--u) * 8.5);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 26%, #0d0a16), #0d0a16);
  border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent);
  box-shadow: 0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--hue) 26%, transparent),
              inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.act b {
  font-family: 'Anton', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(14px, 2.9vh, 27px);
  color: #fff;
  text-shadow: 0 0 calc(var(--u) * 1.6) var(--hue);
  text-align: center; line-height: 1.05;
}
.act small { font-size: clamp(9px, 1.5vh, 13px); color: var(--ink-dim); letter-spacing: .14em; text-transform: uppercase; }
.act:active { transform: translateY(3px) scale(.97); box-shadow: 0 0 calc(var(--u)*3) color-mix(in srgb, var(--hue) 55%, transparent); }

.act-pot   { --hue: var(--lime); }
.act-black { --hue: #8b5cf6; }
.act-miss  { --hue: var(--red); }
.act-skip  { --hue: var(--cyan); }

/* ── Overlay (dares, prompts) ────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  padding: calc(var(--u) * 2.4);
  /* No backdrop-filter here on purpose: it's a full-screen blur that
     iOS Safari repaints constantly, and at .92 opacity you can't see
     the difference anyway. */
  background: rgba(4, 2, 9, .92);
}
.overlay.is-open { display: flex; animation: fade-in .25s ease both; }
@keyframes fade-in { from { opacity: 0; } }

.card {
  --hue: var(--violet);
  position: relative;
  width: min(94vw, 880px);
  max-height: 92vh;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 2);
  text-align: center;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 3.4);
  border-radius: calc(var(--u) * 2.4);
  background: linear-gradient(165deg, color-mix(in srgb, var(--hue) 16%, #0c0813), #0c0813 65%);
  border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent);
  box-shadow: 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--hue) 34%, transparent),
              0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(0,0,0,.75);
  animation: card-in .4s var(--ease) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(calc(var(--u) * 2.4)) scale(.95); } }

.card.easy   { --hue: var(--lime); }
.card.medium { --hue: var(--amber); }
.card.hard   { --hue: var(--red); }
.card.win    { --hue: var(--pink); }

.card-music-btn {
  position: absolute; top: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4);
  width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.4); color: #fff;
  font-size: clamp(14px, 2.4vh, 19px); line-height: 1;
  cursor: pointer; z-index: 2;
}
.card-music-btn.is-on {
  border-color: var(--pink); color: var(--pink);
  box-shadow: 0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--pink) 55%, transparent);
}

.badge {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .34em;
  font-size: clamp(11px, 2vh, 18px);
  padding: calc(var(--u) * .7) calc(var(--u) * 2.2) calc(var(--u) * .7) calc(var(--u) * 2.5);
  border-radius: calc(var(--u) * 5);
  background: var(--hue);
  color: #0b0611;
  box-shadow: 0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--hue) 70%, transparent);
}

.card-who {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  /* the challenger line — who is actually on the hook. Bumped up and lit
     harder than the body copy, because across a dark room this is the bit
     that tells everyone who to look at. */
  font-size: clamp(24px, 5.2vh, 54px);
  letter-spacing: .05em; line-height: 1.05;
  color: #fff;
  text-shadow:
    0 0 calc(var(--u) * .6) rgba(255, 255, 255, .55),
    0 0 calc(var(--u) * 2.6) var(--hue),
    0 0 calc(var(--u) * 5) color-mix(in srgb, var(--hue) 55%, transparent);
}
.dare-text {
  font-size: clamp(19px, 4.6vh, 46px);
  font-weight: 600; line-height: 1.25;
  color: #fff;
}
.dare-author {
  font-size: clamp(11px, 2vh, 17px); font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.dare-author b { color: var(--hue); font-weight: 600; }

.card-actions { display: flex; gap: calc(var(--u) * 1.4); flex-wrap: wrap; justify-content: center; }
.card-note { font-size: clamp(13px, 2.3vh, 19px); color: var(--ink-faint); }

.big-stat {
  font-family: 'Anton', sans-serif;
  font-size: clamp(30px, 8vh, 88px); line-height: 1;
  color: #fff; text-shadow: 0 0 calc(var(--u)*3) var(--hue);
  text-transform: uppercase;
}

/* ── game-intro dressing (cards built with bigFirst) ──────────────
   The game's NAME is the thing to read from across the room, so it
   gets the Funhouse handwriting and the room to breathe. "The Gamble"
   keeps its little pill above it, the contestants drop underneath,
   and the tagline is pulled right down — it's a subtitle, not a
   headline, and it was competing with the name on every card. */

.big-stat.is-title {
  font-family: 'Pacifico', cursive;
  font-size: clamp(30px, 7.4vh, 76px);
  line-height: 1.06;
  text-transform: none;              /* handwriting in caps looks wrong */
  letter-spacing: 0;
  transform: rotate(-1.5deg);
  color: #fff;
  text-shadow:
    0 0 .1em rgba(255, 255, 255, .8),
    0 0 .42em var(--hue),
    0 0 1em color-mix(in srgb, var(--hue) 65%, transparent);
}

/* contestants: small, tinted, sat right under the name */
.card-who.is-sub {
  font-size: clamp(13px, 2.2vh, 21px);
  letter-spacing: .22em; text-indent: .22em;
  margin-top: calc(var(--u) * -.2);   /* clear of the handwriting descenders */
  color: var(--hue);
  text-shadow: 0 0 calc(var(--u) * 1.5) color-mix(in srgb, var(--hue) 60%, transparent);
}

/* the tagline, on every game card — a quiet subtitle in its own panel */
.card.has-title .dare-text {
  font-size: clamp(13px, 2.3vh, 20px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-dim);
  padding: calc(var(--u) * .9) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.1);
  background: rgba(255, 255, 255, .04);
}

/* ── Dare pool screen ────────────────────────────────────────── */

.pool-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }
.pool-card {
  --hue: var(--lime);
  padding: calc(var(--u) * 2) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 18%, #0d0a16), #0d0a16);
  border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent);
  text-align: center;
}
.pool-card.medium { --hue: var(--amber); }
.pool-card.hard   { --hue: var(--red); }
.pool-card .n { font-family: 'Anton', sans-serif; font-size: clamp(28px, 6.5vh, 62px); color: #fff; text-shadow: 0 0 calc(var(--u)*2.4) var(--hue); }
.pool-card .t { font-size: clamp(10px, 1.7vh, 14px); text-transform: uppercase; letter-spacing: .28em; color: var(--ink-dim); }

.pool-authors { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; gap: calc(var(--u) * .8); align-content: flex-start; }
.author-tag {
  padding: calc(var(--u) * .6) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 5);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  font-size: clamp(11px, 1.8vh, 15px);
  color: var(--ink-dim);
}

.fallback { border-top: 1px solid rgba(168,85,255,.18); padding-top: calc(var(--u) * 1.4); }
.fallback summary { cursor: pointer; color: var(--violet); font-size: clamp(11px, 1.9vh, 16px); letter-spacing: .1em; text-transform: uppercase; }
.fallback > * + * { margin-top: calc(var(--u) * 1.2); }

.danger-row { margin-top: auto; display: flex; gap: calc(var(--u) * 1.2); justify-content: flex-end; }

/* ── Winner screen ───────────────────────────────────────────── */

.winner-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.confetti-ball {
  position: fixed; top: -8vh; width: calc(var(--u)*1.8); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; z-index: 60;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); opacity: .2; } }

/* ── Remote-control focus ring (Fire Stick / TV browsers) ────────
   Only visible once an arrow key has been pressed (body.remote). */

body.remote *:focus {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  box-shadow: 0 0 calc(var(--u) * 2.2) rgba(34, 224, 255, .65);
}
body.remote .ball:focus { outline-offset: 8px; border-radius: calc(var(--u) * 2); }

/* ── Davy's Funhouse logo lockup ─────────────────────────────────
   Neon recreation of the event branding. Scale it by setting
   font-size on .fh-logo — everything inside is in em. */

.fh-logo {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; text-align: center;
  pointer-events: none;
  user-select: none;
}
.fh-script {
  font-family: 'Pacifico', cursive;
  font-size: .46em;
  color: #ffe3f2;
  transform: rotate(-3deg) translateY(.18em);
  text-shadow:
    0 0 .18em #fff,
    0 0 .5em  var(--pink),
    0 0 1.1em rgba(255, 45, 149, .75);
  z-index: 1;
}
.fh-word {
  font-family: 'Anton', sans-serif;
  font-size: 1em;
  letter-spacing: .05em;
  color: #eafaff;
  text-shadow:
    0 0 .12em rgba(255,255,255,.8),
    0 0 .38em var(--cyan),
    0 0 .9em  rgba(34, 224, 255, .65),
    .04em .05em 0 rgba(10, 40, 60, .9);
}
.fh-banner {
  margin-top: .34em;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: max(.13em, 10px);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--amber);
  padding: .55em 1.4em;
  border: 1px solid rgba(255, 176, 32, .55);
  border-radius: 3em;
  text-shadow: 0 0 .8em rgba(255, 176, 32, .8);
  box-shadow: 0 0 1.2em rgba(255, 176, 32, .22);
}

.fh-logo--splash { font-size: clamp(52px, 13vh, 130px); }
.fh-logo--winner { font-size: clamp(30px, 6vh, 58px); margin-top: calc(var(--u) * .6); }
.fh-logo--mark   { font-size: clamp(22px, 3.6vh, 36px); opacity: .55; margin-top: calc(var(--u) * 2); }
.fh-logo--mark .fh-script {
  font-size: .58em;
  text-shadow: 0 0 .22em #fff, 0 0 .6em var(--pink);
}
.fh-logo--mark .fh-word { text-shadow: 0 0 .38em rgba(34, 224, 255, .5); }

/* ── Startup splash ──────────────────────────────────────────── */

.splash {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 3);
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(168, 85, 255, .16), transparent 70%),
    var(--void);
  transition: opacity .55s ease;
}
.splash .fh-logo { animation: splash-in .7s var(--ease) both; }
.splash-presents {
  font-family: 'Sora', sans-serif; font-weight: 300;
  font-size: clamp(12px, 2.2vh, 18px);
  letter-spacing: .5em; text-indent: .5em; text-transform: uppercase;
  color: var(--ink-dim);
  animation: splash-in .7s .35s var(--ease) both;
}
.splash-tap {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: clamp(13px, 2.4vh, 19px);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink, #ff2d95);
  animation: splash-pulse 1.6s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.splash.is-done { opacity: 0; pointer-events: none; }
@keyframes splash-in {
  from { opacity: 0; transform: scale(.92) translateY(2vh); }
}

/* ── Rotate nag ──────────────────────────────────────────────── */

.rotate-nag {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--void); text-align: center;
}
.rotate-icon { font-size: 76px; color: var(--pink); animation: spin-hint 2.4s ease-in-out infinite; }
@keyframes spin-hint { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.rotate-nag p { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 20px; }

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-nag { display: flex; }
}

/* scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(168,85,255,.35); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── THE GAMBLE — mini-game presentation (js/games.js) ──────────── */

.card.gamble { --hue: var(--cyan); }

/* ── THE GAMBLE offer: the fork ──────────────────────────────────
   Two paths, side by side, each its own big tap target. The choice
   IS the screen — nothing to read across, you glance and you tap. */

.gamble-fork { display: flex; flex-direction: column; align-items: center;
               gap: calc(var(--u) * 2); width: 100%; }

/* the cocky little script line, same hand as the Funhouse logo */
.gamble-tease {
  font-family: 'Pacifico', cursive;
  font-size: clamp(20px, 4.2vh, 40px);
  line-height: 1.1;
  color: #ffe3f2;
  transform: rotate(-2deg);
  text-shadow: 0 0 .18em #fff, 0 0 .55em var(--pink), 0 0 1.2em rgba(255, 45, 149, .7);
}

.fork { display: grid; grid-template-columns: 1fr 1fr;
        gap: calc(var(--u) * 1.8); width: 100%; }

.fork-opt {
  --c: var(--lime);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.8);
  text-align: center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 15%, #0c0813), #0c0813 70%);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: 0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--c) 22%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.fork-opt.risk { --c: var(--cyan); }
.fork-opt:hover, .fork-opt:focus-visible {
  transform: translateY(calc(var(--u) * -.5));
  border-color: color-mix(in srgb, var(--c) 80%, transparent);
  box-shadow: 0 0 calc(var(--u) * 3.6) color-mix(in srgb, var(--c) 42%, transparent);
  outline: none;
}
.fork-opt:active { transform: scale(.97); }

.fork-kicker {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(10px, 1.7vh, 14px);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c); opacity: .9;
}
.fork-title {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1;
  font-size: clamp(22px, 4.6vh, 44px);
  color: #fff; text-shadow: 0 0 calc(var(--u) * 2) var(--c);
}
.fork-line {
  font-family: 'Sora', sans-serif; font-weight: 300;
  font-size: clamp(12px, 2.2vh, 18px); line-height: 1.5;
  color: var(--ink-dim);
}
.fork-line b { color: #fff; font-weight: 700; }
.fork-line .win  { color: var(--lime); font-weight: 700; }
.fork-line .lose { color: var(--red);  font-weight: 700; }

/* on a short or narrow screen stack them rather than squash them */
@media (max-width: 620px), (max-height: 460px) {
  .fork { grid-template-columns: 1fr; gap: calc(var(--u) * 1.2); }
  .fork-opt { padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4); }
}

/* Mini-game rules, built to be read across a room by someone three
   drinks in: a colour-coded tag, then four or five words. Never a
   sentence. WIN is what you're chasing, OUT is how you lose it. */
.g-rules {
  display: flex; flex-direction: column;
  gap: calc(var(--u) * .8);
  width: 100%;
}
.g-rule {
  --k: var(--hue);
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.1);
  background: rgba(255, 255, 255, .035);
  border-left: 3px solid var(--k);
  text-align: left;
}
.g-rule.k-win  { --k: var(--lime); }
.g-rule.k-out  { --k: var(--red); }
.g-rule.k-hint { --k: var(--amber); }
.g-rule.k-rule { --k: var(--violet); }
.g-rule.k-solo { --k: var(--cyan); }
.g-rule.k-like { --k: var(--pink); }

.g-rule-k {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(11px, 1.9vh, 16px);
  color: var(--k);
  min-width: 4.4em;
}
.g-rule-v {
  font-family: 'Sora', sans-serif; font-weight: 400;
  font-size: clamp(13px, 2.2vh, 19px);
  line-height: 1.35;
  color: var(--ink);
}

/* the solo story round: the story itself is the hero, then the names */
.g-story-ask {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(14px, 2.5vh, 22px);
  color: var(--hue);
}

.g-countdown {
  font-family: 'Anton', sans-serif;
  font-size: clamp(60px, 16vh, 160px); line-height: 1;
  color: #fff; text-shadow: 0 0 calc(var(--u) * 3.4) var(--hue);
  text-transform: uppercase;
}

.g-item {
  font-family: 'Anton', sans-serif;
  font-size: clamp(26px, 6.4vh, 68px); line-height: 1.1;
  color: #fff; text-shadow: 0 0 calc(var(--u) * 3) var(--hue);
  text-transform: uppercase;
}

/* Lap Dance Showdown's song stage */
.g-yt { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); width: 100%; }
.g-yt-frame {
  width: 100%; max-width: 360px; aspect-ratio: 16/9;
  border-radius: calc(var(--u) * 1.2);
  overflow: hidden;
  background: #0a0710;
  border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent);
}
.g-yt-frame:empty::before {
  content: '';
  display: block; width: 100%; height: 100%;
}
.g-yt-play { min-width: 12em; }
.g-yt-play:disabled { opacity: .6; }

/* Whose Story Is It? */
.g-story { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); width: 100%; }
.g-story-text {
  font-size: clamp(17px, 3.4vh, 30px);
  font-weight: 600; line-height: 1.4;
  color: #fff;
}
.g-names { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); justify-content: center; }
.g-name-btn {
  padding: calc(var(--u) * .9) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.2);
  font-size: clamp(13px, 2.1vh, 18px); font-weight: 700;
  color: var(--ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 22%, #1a1424), #1a1424);
  border: 1px solid color-mix(in srgb, var(--hue) 50%, transparent);
  transition: transform .15s var(--ease);
}
.g-name-btn:active { transform: scale(.94); }

.g-rhyme { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); width: 100%; }
.g-rhyme-img {
  width: 100%; max-width: calc(var(--u) * 34);
  max-height: 34vh;
  object-fit: contain;
  border-radius: calc(var(--u) * 1.4);
  border: 1px solid var(--glass-line);
  background: #000;
}
.g-rhyme-mask {
  font-family: 'Anton', sans-serif;
  font-size: clamp(20px, 4vh, 40px);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 calc(var(--u) * 1.6) var(--hue);
  text-transform: uppercase;
  text-align: center;
}
.g-rhyme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); width: 100%; }
.g-rhyme-col {
  display: flex; flex-direction: column; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 1.2);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-line);
  transition: opacity .2s var(--ease);
}
.g-rhyme-col.is-out { opacity: .35; }
.g-rhyme-name {
  font-weight: 700; text-align: center;
  font-size: clamp(13px, 2vh, 17px);
  color: var(--ink);
}
.g-rhyme-btn {
  padding: calc(var(--u) * .8) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1);
  font-weight: 700; font-size: clamp(12px, 1.9vh, 16px);
  transition: transform .15s var(--ease);
}
.g-rhyme-btn:active { transform: scale(.94); }
.g-rhyme-btn:disabled { opacity: .4; }
.g-rhyme-right {
  color: #04220f;
  background: linear-gradient(160deg, var(--lime), color-mix(in srgb, var(--lime) 70%, #0d0a16));
  border: 1px solid color-mix(in srgb, var(--lime) 60%, transparent);
}
.g-rhyme-wrong {
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--red) 55%, #1a1424), #1a1424);
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
}

/* game icons (js/game-icons.js) — same --hue as the card they're on, so
   they never need a colour of their own to keep in sync */
.g-icon {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  color: var(--hue);
  filter: drop-shadow(0 0 calc(var(--u) * .8) color-mix(in srgb, var(--hue) 65%, transparent));
}
.g-icon svg { width: 100%; height: 100%; display: block; }
.g-icon.g-icon-lg { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); margin: 0 auto; }

/* the "which mini-game?" reveal — a decorative ring spins while the icon
   flickers through the options, then both settle on the true pick */
.g-icon-reel {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: calc(var(--u) * 8); height: calc(var(--u) * 8);
  margin: 0 auto;
}
.g-icon-reel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--hue) 55%, transparent);
  opacity: 0;
}
.g-icon-reel.is-spinning::before { opacity: 1; animation: g-reel-ring 1s linear infinite; }
@keyframes g-reel-ring { to { transform: rotate(360deg); } }

.g-icon-reel .g-icon {
  width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4);
  filter: drop-shadow(0 0 calc(var(--u) * 1.1) color-mix(in srgb, var(--hue) 70%, transparent));
}
.g-icon-reel.is-spinning .g-icon { animation: g-icon-blip .16s ease; }
@keyframes g-icon-blip { from { transform: scale(.78); opacity: .5; } to { transform: scale(1); opacity: 1; } }

.g-icon-reel.is-landed .g-icon { animation: g-icon-land .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes g-icon-land {
  0%   { transform: scale(1.55) rotate(-8deg); opacity: .3; }
  60%  { transform: scale(.92) rotate(2deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* the sealed-fantasy PIN gate (js/main.js runFantasyForfeit) */
.gate-body { display: flex; justify-content: center; width: 100%; }
.pin-input {
  font-size: clamp(24px, 5vh, 40px);
  letter-spacing: .55em; text-indent: .55em;
  text-align: center;
  width: min(280px, 100%);
  padding: calc(var(--u) * .8) 0;
  border-radius: calc(var(--u) * 1.2);
  background: var(--void-2);
  border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent);
  color: var(--ink);
  outline: none;
}
.pin-input:focus { border-color: var(--hue); box-shadow: 0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--hue) 45%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   THE CHOOSER — the front door, after the splash

   One centred column: masthead, neon hairline, a narrow pair of
   upright cabinets, footer line. Each cabinet carries a lit square
   "screen" showing its own game, and under it a stacked name
   lockup that echoes the KINKY KILLA wordmark. Everything scales
   from --u, and the card width is tied to viewport HEIGHT so the
   square screens always fit an iPad in landscape.
   ═══════════════════════════════════════════════════════════════ */

.chooser {
  position: fixed; inset: 0; z-index: 250;
  display: flex; flex-direction: column;
  align-items: center;
  /* Centring is done with auto margins on the first/last child, not
     justify-content:center. Both centre identically when the stack fits;
     only this one degrades safely — plain centring crops the masthead off
     the top of a short window instead of letting it scroll. */
  justify-content: flex-start;
  overflow-y: auto; overscroll-behavior: contain;
  gap: calc(var(--u) * 2.9);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3);
  background:
    /* the light pool each cabinet throws into the room */
    radial-gradient(42% 46% at 31% 54%, rgba(34, 224, 255, .11), transparent 70%),
    radial-gradient(42% 46% at 69% 54%, rgba(168, 85, 255, .13), transparent 70%),
    /* magenta haze up top so the masthead sits in light */
    radial-gradient(58% 32% at 50% 2%, rgba(255, 45, 149, .12), transparent 72%),
    /* the floor falling away underneath */
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .5) 100%),
    var(--void);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chooser.is-done {
  opacity: 0; pointer-events: none;
  transform: scale(1.03);
}
/* beats the display:flex above — without this the hidden attribute does
   nothing, and a tap meant for the splash falls straight through onto a
   game card underneath */
.chooser[hidden] { display: none; }

/* ── masthead ────────────────────────────────────────────────── */

.chooser-head {
  margin-top: auto;            /* half of the safe centring, see .chooser */
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  animation: chooser-in .6s var(--ease) both;
}
.chooser-eyebrow {
  font-family: 'Pacifico', cursive;
  font-size: clamp(14px, 2.5vh, 23px);
  color: #ffe3f2;
  transform: rotate(-2.5deg);
  text-shadow: 0 0 .2em #fff, 0 0 .6em var(--pink), 0 0 1.3em rgba(255, 45, 149, .7);
}
.chooser-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(26px, 6.1vh, 58px);
  font-weight: 400;
  letter-spacing: .06em; text-indent: .06em;   /* indent cancels the trailing gap */
  line-height: 1.02;
  text-transform: uppercase;
  color: #eafaff;
  margin-top: calc(var(--u) * .55);
  text-shadow: 0 0 .1em rgba(255,255,255,.75), 0 0 .4em rgba(34, 224, 255, .55);
}
.chooser-title em {
  font-style: normal;
  color: var(--pink);
  text-shadow: 0 0 .1em rgba(255,255,255,.6), 0 0 .45em var(--pink), 0 0 1em rgba(255, 45, 149, .6);
}
/* the neon hairline that closes the masthead off from the cards, and
   carries both card accents so the pair below feels announced */
.chooser-head::after {
  content: '';
  width: clamp(120px, 22vh, 240px); height: 1px;
  margin-top: calc(var(--u) * 1.6);
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--cyan) 24%, #fff 50%, var(--violet) 76%, transparent);
  box-shadow: 0 0 calc(var(--u) * 1.1) rgba(255, 45, 149, .45);
  opacity: .8;
}

/* ── the two cabinets ────────────────────────────────────────── */

.chooser-cards {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--u) * 2.9);
  width: 100%;
}
/* the light each cabinet throws down onto the floor it stands on */
.chooser-cards::after {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  inset-inline: 0;
  bottom: calc(var(--u) * -1.2); height: calc(var(--u) * 6);
  background:
    radial-gradient(44% 100% at 30% 0%, rgba(34, 224, 255, .16), transparent 72%),
    radial-gradient(44% 100% at 70% 0%, rgba(168, 85, 255, .18), transparent 72%);
  filter: blur(calc(var(--u) * .8));
}

.pick {
  --accent: var(--cyan);
  /* narrow and upright — a cabinet, not a banner. Tied to viewport
     HEIGHT, so the square screen inside can never outgrow the screen. */
  width: min(40vw, clamp(228px, 42vh, 372px));
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  text-align: center;
  border-radius: calc(var(--u) * 1.9);
  background:
    radial-gradient(88% 50% at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    radial-gradient(80% 32% at 50% 72%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 74%),
    linear-gradient(168deg, rgba(30, 22, 46, .95), rgba(10, 7, 19, .98));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 calc(var(--u) * 2) calc(var(--u) * 4.2) rgba(0, 0, 0, .6),
    0 0 calc(var(--u) * 4) color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .035);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
  animation: chooser-rise .65s var(--ease) both;
}
.pick-killa { --accent: var(--cyan);   animation-delay: .1s; }
.pick-wheel { --accent: var(--violet); animation-delay: .2s; }

/* the marquee light across the top of the cabinet */
.pick::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 16%, #fff 50%, var(--accent) 84%, transparent);
  box-shadow: 0 0 calc(var(--u) * 1.6) var(--accent);
  opacity: .9;
  transition: opacity .3s var(--ease);
}

.pick:hover, .pick:focus-visible {
  transform: translateY(calc(var(--u) * -.7));
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  box-shadow:
    0 calc(var(--u) * 3) calc(var(--u) * 5.5) rgba(0, 0, 0, .66),
    0 0 calc(var(--u) * 7) color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  outline: none;
}
.pick:hover::before, .pick:focus-visible::before { opacity: 1; }
.pick:active { transform: translateY(calc(var(--u) * -.2)) scale(.995); }

/* ── the screen: artwork panel, set into the cabinet ─────────── */

.pick-art {
  position: relative; display: block;
  margin: calc(var(--u) * 1.05) calc(var(--u) * 1.05) 0;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--u) * 1.25);
  overflow: hidden;
  /* lets everything inside the screen be sized off the screen's own box,
     so the art survives the short wide panel used when the cards stack.
     Browsers without cq units fall back to the clamp()ed vh sizes. */
  container-type: size;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    inset 0 0 calc(var(--u) * 2.4) rgba(0, 0, 0, .7),
    0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--accent) 18%, transparent);
}
/* glass over the screen: a soft sheen and a corner-darkening vignette */
.pick-art::after {
  content: '';
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(146deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .012) 26%, transparent 46%),
    radial-gradient(120% 102% at 50% 42%, transparent 58%, rgba(0, 0, 0, .34) 100%);
}

/* Kinky Killa: a slice of the table, lit from above */
.pick-felt {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 80% at 50% 4%, rgba(255, 255, 255, .22), transparent 66%),
    linear-gradient(175deg, var(--felt-a), var(--felt-b));
}
.pick-felt::after {
  /* the rail, along the bottom — slim, with a lit top edge */
  content: '';
  position: absolute; inset-inline: 0; bottom: 0;
  height: 11%;
  background: linear-gradient(180deg, #7a4a29 0 1px, #43250f, #1c0d06);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, .55);
}
.pick-ball {
  /* sized off the screen's HEIGHT, never its width — a ball has to stay
     a ball when the panel goes short and wide in the stacked layout */
  position: absolute;
  height: 16.5%; width: auto; aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  /* real lengths, not percentages: a % in box-shadow is invalid and
     silently kills the whole declaration, taking the depth with it */
  box-shadow:
    inset 0 -5px 9px rgba(0, 0, 0, .55),
    inset 0 5px 8px rgba(255, 255, 255, .26),
    0 4px 9px rgba(0, 0, 0, .5);
}
.pick-ball i {
  font-family: 'Anton', sans-serif; font-style: normal;
  color: #1a1020;
  background: #f6f2ea;
  width: 54%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .5em;
}
/* a loose rack resting toward the rail, all of it under the cue's line */
.pb-1 { background: radial-gradient(circle at 32% 28%, #4a4560, #0e0c16);
        left: 14%; top: 47%;
        font-size: clamp(22px, 6.8vh, 62px); font-size: 16.5cqh; }
.pb-2 { background: radial-gradient(circle at 32% 28%, #ff6fb5, #b3186b);
        left: 40%; top: 60%; height: 14.5%;
        font-size: clamp(19px, 6vh, 54px); font-size: 14.5cqh; }
.pb-3 { background: radial-gradient(circle at 32% 28%, #6fe6ff, #12708c);
        left: 64%; top: 49%; height: 12.5%;
        font-size: clamp(17px, 5.2vh, 47px); font-size: 12.5cqh; }
.pick-cue {
  /* long enough that BOTH ends leave the frame — a cue laid across the
     table, rather than a stick dead-ending in the middle of it */
  position: absolute; right: -14%; top: 15%;
  width: 130%; height: 2.7%;
  border-radius: 99px;
  background: linear-gradient(90deg,
    #e9eef3 0 3.5%, #14202b 3.5% 8%, #e2c197 8% 60%, #b98d5b 60% 88%, #6b4a2a 88%);
  transform: rotate(-14deg);
  transform-origin: right center;
  box-shadow: 0 6px 13px rgba(0, 0, 0, .55);
}

/* The Wheel: a real, slowly turning disc */
.pick-wheel .pick-art {
  background:
    radial-gradient(78% 78% at 50% 46%, rgba(168, 85, 255, .34), transparent 72%),
    linear-gradient(175deg, #17112c, #090613);
  display: grid; place-items: center;
}
.pick-wheel-disc {
  position: relative;
  height: 70%; width: auto; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;            /* keeps the .pw-seg hairlines inside the disc */
  background: conic-gradient(
    var(--pink) 0deg 60deg, var(--violet) 60deg 120deg,
    var(--cyan) 120deg 180deg, var(--amber) 180deg 240deg,
    var(--lime) 240deg 300deg, var(--red) 300deg 360deg);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .13),
    0 0 calc(var(--u) * 2.8) rgba(168, 85, 255, .45),
    0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, .55);
  animation: pick-spin 14s linear infinite;
}
.pw-seg {
  position: absolute; inset: 0;
  border-top: 1px solid rgba(10, 6, 18, .5);
  transform-origin: center;
}
.pw-seg:nth-child(1) { transform: rotate(0deg); }
.pw-seg:nth-child(2) { transform: rotate(30deg); }
.pw-seg:nth-child(3) { transform: rotate(60deg); }
.pw-seg:nth-child(4) { transform: rotate(90deg); }
.pw-seg:nth-child(5) { transform: rotate(120deg); }
.pw-seg:nth-child(6) { transform: rotate(150deg); }
.pw-hub {
  position: absolute; inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #241a3c, #0b0714);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), inset 0 2px 8px rgba(0, 0, 0, .7);
}
.pick-pointer {
  /* sits ON the rim, not floating above it, so it reads as pointing IN */
  position: absolute; top: 10%; left: 50%; z-index: 5;
  width: 0; height: 0; transform: translateX(-50%);
  border-inline: clamp(6px, 1.3vh, 12px) solid transparent;
  border-top: clamp(11px, 2.4vh, 22px) solid #fff;
  border-inline-width: 3.6cqh;
  border-top-width: 6.6cqh;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8));
}
.pick:hover .pick-wheel-disc { animation-duration: 3.2s; }

/* ── the words underneath — a mini wordmark, centred ─────────── */

.pick-body {
  flex: 1;                     /* fills the card so the CTA can pin low */
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .85);
  padding: calc(var(--u) * 1.7) calc(var(--u) * 1.6) calc(var(--u) * 1.9);
}
/* stacked lockup, both words the same size — it quotes the KINKY KILLA
   wordmark on the menu screen, and it makes both cards the same shape,
   which one long inline name never manages */
.pick-name {
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Anton', sans-serif;
  font-size: clamp(17px, 3.5vh, 34px);
  letter-spacing: .05em; text-indent: .05em;
  line-height: .98;
  text-transform: uppercase;
}
.pick-name b {
  font-weight: 400;
  color: #ffe9f6;
  text-shadow: 0 0 .1em rgba(255,255,255,.7), 0 0 .45em rgba(255, 45, 149, .55);
}
.pick-name em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 .1em rgba(255,255,255,.45), 0 0 .5em var(--accent),
               0 0 1.1em color-mix(in srgb, var(--accent) 55%, transparent);
}
.pick-blurb {
  /* short measure + balance = two even centred lines in BOTH cards */
  max-width: 19ch;
  text-wrap: balance;
  font-size: clamp(11px, 1.8vh, 15px);
  font-weight: 300;
  color: color-mix(in srgb, var(--ink-dim) 76%, var(--ink));
  line-height: 1.5;
}
.pick-go {
  margin-top: auto;            /* pinned to the foot, so both pills line up */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--u) * 4.4);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.9);
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: clamp(10px, 1.55vh, 13px);
  font-weight: 700;
  letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 68%, #ffffff);
  box-shadow: 0 0 calc(var(--u) * 1.5) color-mix(in srgb, var(--accent) 15%, transparent);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pick:hover .pick-go, .pick:focus-visible .pick-go, .pick:active .pick-go {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 calc(var(--u) * 2.6) color-mix(in srgb, var(--accent) 36%, transparent);
  transform: translateY(calc(var(--u) * -.15));
}

/* ── foot ────────────────────────────────────────────────────── */

.chooser-foot {
  margin-bottom: auto;         /* the other half of the safe centring */
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.5);
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: max(10px, 1.35vh);
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--amber);
  opacity: .8;
  text-align: center;
  text-shadow: 0 0 .9em rgba(255, 176, 32, .65);
  animation: chooser-in .6s .35s var(--ease) both;
}
.chooser-foot::before, .chooser-foot::after {
  content: ''; flex: 0 0 auto;
  width: calc(var(--u) * 3.2); height: 1px;
  background: currentColor; opacity: .4;
}

@keyframes chooser-in   { from { opacity: 0; transform: translateY(1.6vh); } }
@keyframes chooser-rise { from { opacity: 0; transform: translateY(2.6vh) scale(.975); } }
@keyframes pick-spin    { to { transform: rotate(360deg); } }

/* narrow / portrait — stack them, and lay each cabinet on its side so
   the whole composition still fits without scrolling */
@media (max-width: 760px), (orientation: portrait) {
  .chooser { gap: calc(var(--u) * 1.9); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4); }
  .chooser-title { font-size: clamp(22px, 4.8vh, 40px); }
  .chooser-head::after { margin-top: calc(var(--u) * 1.1); width: clamp(100px, 16vh, 170px); }

  .chooser-cards { grid-auto-flow: row; gap: calc(var(--u) * 1.7); }
  .chooser-cards::after { display: none; }
  .pick { width: min(94vw, 430px); }
  .pick-art { aspect-ratio: auto; height: clamp(84px, 16vh, 172px);
              margin: calc(var(--u) * .85) calc(var(--u) * .85) 0; }

  /* the panel is short and wide now: lay the cue almost flat, or it sweeps
     down through the rack and straight into the rail */
  .pick-cue { right: -8%; top: 8%; width: 118%; height: 5.2%; transform: rotate(-6deg); }
  /* and pull the rack together — spread across a wide panel it stops
     reading as a rack and starts reading as three loose dots */
  .pb-1 { left: 22%; top: 42%; height: 25%; }
  .pb-2 { left: 42%; top: 55%; height: 22%; }
  .pb-3 { left: 61%; top: 45%; height: 19%; }
  .pick-wheel-disc { height: 86%; }

  .pick-body { gap: calc(var(--u) * .55);
               padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 1.4); }
  .pick-name { flex-direction: row; align-items: baseline; gap: .3em;
               font-size: clamp(17px, 3.1vh, 28px); }
  .pick-blurb { max-width: 34ch; }
  .pick-go { min-height: calc(var(--u) * 3.9); padding: calc(var(--u) * .6) calc(var(--u) * 1.6); }
  .chooser-foot { font-size: max(9px, 1.2vh); letter-spacing: .22em; text-indent: .22em; }
  /* no room for the flanking rules once the line is this long */
  .chooser-foot::before, .chooser-foot::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pick-wheel-disc { animation: none; }
  .pick, .chooser-head, .chooser-foot { animation-duration: .01ms; }
}

/* ── back to the front door, from the Kinky Killa menu ───────── */

.to-chooser {
  position: absolute; top: calc(var(--u) * 1.6); left: calc(var(--u) * 2);
  z-index: 5;
  font-size: max(11px, 1.5vh); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  border: 1px solid rgba(107, 95, 128, .3);
  border-radius: 99px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.to-chooser:hover, .to-chooser:focus-visible {
  color: var(--ink); border-color: var(--glass-line); outline: none;
}

/* "Is it actually saved on this device?" — the Fire Stick travels to
   venues with captive-portal wifi, so this has to be a plain statement of
   fact readable across a room, not a subtle icon. */
.offline-line {
  display: block;
  margin-top: calc(var(--u) * .6);
  font-size: max(11px, 1.4vh);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.offline-line.is-good {
  color: var(--lime);
  text-shadow: 0 0 calc(var(--u) * 1.4) rgba(182, 255, 61, .55);
}
.offline-line.is-bad {
  color: var(--amber);
  text-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 176, 32, .5);
}