/* ============================================================================
   NEONDECK — design system
   Dark, neon, and built to stay readable while it glows. Everything here is
   CSS-drawn: there is not a single image asset in the card table, which keeps
   the whole app under a few hundred KB and makes it snap on a phone.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* surfaces */
  --void:        #04050d;
  --bg-0:        #070819;
  --bg-1:        #0c0d22;
  --bg-2:        #13142e;
  --panel:       rgba(255, 255, 255, .045);
  --panel-2:     rgba(255, 255, 255, .075);
  --line:        rgba(150, 190, 255, .14);
  --line-2:      rgba(150, 190, 255, .26);

  /* neon */
  --cyan:        #22eeff;
  --magenta:     #ff2daa;
  --violet:      #9b5cff;
  --lime:        #5cff9b;
  --amber:       #ffb020;
  --rose:        #ff3f6c;

  /* suit hues — four distinct colours instead of red/black, because in Getaway
     reading the suit at a glance is the whole game */
  --s-spade:     #22eeff;
  --s-heart:     #ff3f6c;
  --s-diamond:   #ffb020;
  --s-club:      #5cff9b;

  /* text */
  --ink:         #eaf2ff;
  --ink-2:       #a8b6d6;
  --ink-3:       #6b789b;

  /* geometry */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --pad: clamp(14px, 3.2vw, 22px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --font-display: 'Orbitron', 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Rajdhani', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Rajdhani', ui-monospace, 'SF Mono', monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;  --t: .32s;  --t-slow: .6s;
}

/* --------------------------------------------------------------- foundation */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  touch-action: manipulation;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; }
p { margin: 0 0 .7em; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(150,190,255,.18); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------ ambient stage */
#stage {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(255,45,170,.22), transparent 60%),
    radial-gradient(110% 80% at 85% 110%, rgba(34,238,255,.18), transparent 60%),
    radial-gradient(90%  70% at 50% 50%,  rgba(155,92,255,.10), transparent 70%),
    linear-gradient(180deg, var(--bg-0), var(--void) 70%);
  z-index: 0;
}
#stage::before {
  /* perspective grid floor */
  content: '';
  position: absolute;
  inset: 40% -50% -20% -50%;
  background-image:
    linear-gradient(rgba(120,200,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,200,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(66deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, transparent, #000 22%, transparent 88%);
  opacity: .5;
  animation: gridDrift 14s linear infinite;
}
#stage::after {
  /* faint scanlines, kept very low contrast so text stays crisp */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
@keyframes gridDrift { to { background-position: 0 64px, 0 0; } }

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

/* ---------------------------------------------------------------- utilities */
.neon { text-shadow: 0 0 14px currentColor, 0 0 38px color-mix(in srgb, currentColor 55%, transparent); }
.c-cy { color: var(--cyan); } .c-mg { color: var(--magenta); }
.c-vi { color: var(--violet); } .c-li { color: var(--lime); }
.c-am { color: var(--amber); } .c-dim { color: var(--ink-2); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-2); font-size: .88rem; }
.eyebrow {
  font-family: var(--font-display); font-size: .66rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3);
}

/* -------------------------------------------------------------------- panel */
.panel {
  position: relative;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.panel--glow::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--cyan), transparent 35%, transparent 65%, var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  --accent: var(--cyan);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  min-height: 46px;
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), border-color var(--t) var(--ease);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent),
              inset 0 1px 0 rgba(255,255,255,.12);
}
.btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 26px -4px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--primary {
  color: #04121a;
  background: linear-gradient(135deg, var(--cyan), #64f7ff 45%, var(--violet));
  border-color: transparent;
  box-shadow: 0 10px 34px -10px var(--cyan), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: none;
}
.btn--primary:hover:not(:disabled) { box-shadow: 0 14px 44px -10px var(--cyan), inset 0 1px 0 rgba(255,255,255,.6); }
.btn--mg { --accent: var(--magenta); }
.btn--vi { --accent: var(--violet); }
.btn--li { --accent: var(--lime); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--sm { padding: 8px 14px; min-height: 36px; font-size: .7rem; letter-spacing: .1em; }
.btn--lg { padding: 17px 30px; min-height: 56px; font-size: .92rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 42px; min-height: 42px; border-radius: 50%; }

/* ------------------------------------------------------------------ screens */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.99);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.screen.is-active { opacity: 1; visibility: visible; transform: none; }
.screen__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + 24px);
}
.wrap { width: min(100%, 760px); margin: 0 auto; }
.wrap--wide { width: min(100%, 1100px); }

/* ---------------------------------------------------------------- app header */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(7,8,25,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex: none;
}
.topbar h2 { font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .18em;
  background: linear-gradient(100deg, var(--cyan), #fff 40%, var(--magenta) 75%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(34,238,255,.45));
}

/* ------------------------------------------------------------------- splash */
#splash {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--void);
  transition: opacity .5s var(--ease), visibility .5s;
}
#splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__mark { font-size: clamp(2rem, 9vw, 3.6rem); animation: splashIn .9s var(--ease-back) both; }
.splash__bar {
  margin-top: 22px; width: 190px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.splash__bar i { display: block; height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  animation: splashBar 1.1s var(--ease) infinite; }
@keyframes splashIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes splashBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }

/* ================================================================== CARDS == */
.card {
  --w: var(--cw, 72px);
  --h: calc(var(--w) * 1.42);
  --hue: var(--s-spade);
  position: relative;
  width: var(--w); height: var(--h);
  border-radius: calc(var(--w) * .11);
  flex: none;
  transform-style: preserve-3d;
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease), opacity var(--t) var(--ease);
  will-change: transform;
}
.card__face, .card__back {
  position: absolute; inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card__face {
  background: linear-gradient(165deg, #12162b 0%, #0a0c1c 55%, #070810 100%);
  border: 1.5px solid color-mix(in srgb, var(--hue) 62%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 6px 18px -6px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 26px -10px var(--hue);
}
.card__back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(34,238,255,.09) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #2a0b3d, #0a1330 55%, #06213a);
  border: 1.5px solid rgba(155,92,255,.5);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.85), inset 0 0 30px -8px var(--violet);
  display: grid; place-items: center;
}
.card__back::after {
  content: '♠';
  font-size: calc(var(--w) * .42);
  color: rgba(34,238,255,.5);
  text-shadow: 0 0 16px rgba(34,238,255,.7);
}
.card.is-down .card__face { transform: rotateY(180deg); }
.card.is-down .card__back { transform: rotateY(0); }

.card__corner {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; line-height: .92;
  color: var(--hue);
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(var(--w) * .225);
  text-shadow: 0 0 10px color-mix(in srgb, var(--hue) 65%, transparent);
}
.card__corner--tl { top: calc(var(--w) * .07); left: calc(var(--w) * .085); }
.card__corner--br { bottom: calc(var(--w) * .07); right: calc(var(--w) * .085); transform: rotate(180deg); }
.card__corner span { font-size: calc(var(--w) * .2); margin-top: 1px; }
.card__pip {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: calc(var(--w) * .52);
  color: var(--hue);
  text-shadow: 0 0 18px color-mix(in srgb, var(--hue) 70%, transparent);
  opacity: .95;
}
.card__pip--face { font-size: calc(var(--w) * .40); font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; }
.card__sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 46%, transparent 58%);
  opacity: 0; transition: opacity var(--t);
}
.card[data-suit="S"] { --hue: var(--s-spade); }
.card[data-suit="H"] { --hue: var(--s-heart); }
.card[data-suit="D"] { --hue: var(--s-diamond); }
.card[data-suit="C"] { --hue: var(--s-club); }

/* playable / blocked states in the player's hand */
.card.is-playable { cursor: pointer; }
.card.is-playable:hover, .card.is-lifted { filter: brightness(1.14); }
.card.is-playable:hover .card__sheen { opacity: 1; }
/* Dimmed, not hidden. You still need to read the cards you cannot legally play
   — knowing you are holding three more spades is half of planning the next
   trick — so this pulls them back rather than blacking them out. */
.card.is-blocked { filter: grayscale(.55) brightness(.62); opacity: .82; }
.card.is-blocked .card__face {
  border-color: rgba(150,170,200,.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 6px 18px -6px rgba(0,0,0,.85);
}
.card.is-selected { filter: brightness(1.2) drop-shadow(0 0 16px var(--hue)); }

.card--mini { --w: 30px; }
.card--tiny { --w: 20px; }

/* ================================================================== TABLE == */
#table {
  display: grid;
  /* minmax(0, 1fr), never a bare 1fr: a 1fr row has an automatic minimum of
     min-content, so the felt refuses to shrink below the size of the seats and
     pile and shoves the hand dock off the bottom of a phone. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.table__hud {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad);
  flex: none;
  border-bottom: 1px solid var(--line);
  background: rgba(4,5,13,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.chip-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 99px;
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.chip-stat b { font-family: var(--font-num); font-size: .9rem; }

.felt {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  padding: 10px var(--pad) 0;
}
/* ----- pile ----- */
.pile-wrap {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  min-height: 0;
}
/* The table surface — a soft neon ellipse rather than green baize. It lives on
   the pile row, not the whole felt, so the table is centred on the cards rather
   than floating above them with dead space underneath. */
.pile-wrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(104%, 760px);
  height: min(92%, 440px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(34,238,255,.10), rgba(155,92,255,.06) 45%, transparent 72%);
  border: 1px solid rgba(150,190,255,.12);
  box-shadow: inset 0 0 90px -30px rgba(34,238,255,.35), 0 0 80px -40px rgba(255,45,170,.5);
  pointer-events: none;
}

/* ----- opponents ----- */
.seats {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(6px, 2vw, 20px);
  flex-wrap: wrap;
  position: relative; z-index: 2;
  padding-top: 2px;
}
.seat {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: clamp(64px, 15vw, 96px);
  transition: transform var(--t) var(--ease), opacity var(--t);
}
.seat__ring {
  position: relative;
  width: clamp(44px, 11vw, 58px); aspect-ratio: 1;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--line-2), var(--line-2));
  transition: background var(--t), box-shadow var(--t);
}
.seat__ring > svg, .seat__ring > img {
  width: 100%; height: 100%; border-radius: 50%; display: block;
  background: var(--bg-1);
}
.seat.is-turn .seat__ring {
  background: conic-gradient(from var(--spin, 0deg), var(--cyan), var(--magenta), var(--violet), var(--cyan));
  box-shadow: 0 0 24px -4px var(--cyan);
  animation: seatSpin 2.4s linear infinite;
}
@keyframes seatSpin { to { --spin: 360deg; } }
@property --spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.seat.is-out { opacity: .42; }
.seat.is-out .seat__ring { background: rgba(92,255,155,.5); box-shadow: 0 0 18px -6px var(--lime); }
.seat.is-donkey .seat__ring { background: var(--rose); box-shadow: 0 0 22px -4px var(--rose); }
.seat__name {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seat__count {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-num); font-size: .74rem; font-weight: 700;
  color: var(--ink-2);
}
.seat__count i {
  width: 12px; height: 16px; border-radius: 2px; display: inline-block;
  background: linear-gradient(150deg, #2a0b3d, #06213a);
  border: 1px solid rgba(155,92,255,.6);
}
.seat__badge {
  position: absolute; top: -4px; right: 2px;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 99px;
  background: var(--lime); color: #03210f;
}
.seat__bubble {
  position: absolute; top: -30px; left: 50%;
  transform: translate(-50%, 6px);
  padding: 5px 10px; border-radius: 12px;
  background: rgba(12,13,34,.96); border: 1px solid var(--line-2);
  font-size: .7rem; white-space: nowrap; max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t) var(--ease);
  z-index: 5;
}
.seat__bubble.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ----- the pile ----- */
.pile {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.pile .card {
  position: absolute;
  animation: cardToPile .34s var(--ease-back) both;
  box-shadow: 0 14px 34px -12px #000;
}
@keyframes cardToPile {
  from { transform: translate(var(--fx, 0), var(--fy, -120px)) scale(.75) rotate(var(--fr, 0deg)); opacity: 0; }
}
.pile__lead {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--font-display); font-weight: 700;
  white-space: nowrap;
}
.pile__empty {
  display: grid; place-items: center; gap: 6px;
  color: var(--ink-3); text-align: center;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  font-family: var(--font-display);
}
.pile__empty .ring {
  width: 74px; height: 105px; border-radius: 10px;
  border: 1.5px dashed rgba(150,190,255,.22);
}

/* trick resolution flashes */
.burst {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.3rem, 6vw, 2.3rem);
  letter-spacing: .18em; text-transform: uppercase;
  pointer-events: none; z-index: 9;
  animation: burst 1.15s var(--ease) both;
  white-space: nowrap;
}
@keyframes burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  70%  { opacity: 1; transform: translate(-50%, -56%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.96); }
}
.burst--burn { color: var(--lime); text-shadow: 0 0 22px var(--lime); }
.burst--pickup { color: var(--rose); text-shadow: 0 0 22px var(--rose); }
.burst--out { color: var(--cyan); text-shadow: 0 0 22px var(--cyan); }

/* ----- your hand ----- */
.hand-dock {
  flex: none;
  padding: 0 var(--pad) max(10px, var(--safe-b));
  display: grid;
  gap: 8px;
}
.hand-msg {
  text-align: center; min-height: 22px;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  color: var(--ink-2);
  transition: color var(--t);
}
.hand-msg.is-urgent { color: var(--cyan); text-shadow: 0 0 14px rgba(34,238,255,.6); }
.hand {
  position: relative;
  /* Card height, plus headroom for the bow of the fan and for a lifted card. */
  height: calc(var(--cw, 72px) * 1.42 + 38px);
  display: flex; align-items: flex-end; justify-content: center;
}
.hand .card {
  position: absolute;
  /* Rotating about a pivot below the card swings its lower corners down, so the
     fan sits clear of the floor rather than flush against it. */
  bottom: 8px;
  transform-origin: 50% 130%;
}
.hand .card.is-dealt { animation: dealIn .5s var(--ease-back) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(90px) scale(.6) rotate(0); } }
.hand .card.is-leaving { opacity: 0; transform: translateY(-60px) scale(.8) !important; }

/* ---------------------------------------------------------------- side dock */
.dock {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(330px, 86vw);
  z-index: 40;
  display: flex; flex-direction: column;
  background: linear-gradient(200deg, rgba(19,20,46,.97), rgba(7,8,25,.98));
  border-left: 1px solid var(--line-2);
  transform: translateX(101%);
  transition: transform var(--t) var(--ease);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  box-shadow: -30px 0 70px -30px #000;
}
.dock.is-open { transform: none; }
.dock__head { display: flex; align-items: center; gap: 10px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.dock__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px var(--pad); display: flex; flex-direction: column; gap: 8px; }
.dock__foot { padding: 10px var(--pad); border-top: 1px solid var(--line); display: grid; gap: 8px; }

.msg { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; animation: msgIn .3s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg__who { font-weight: 800; color: var(--cyan); flex: none; }
.msg--sys { color: var(--ink-3); font-size: .78rem; font-style: italic; }
.msg--me .msg__who { color: var(--magenta); }

.emotes { display: flex; flex-wrap: wrap; gap: 6px; }
.emote {
  padding: 7px 11px; border-radius: 99px; font-size: .95rem; line-height: 1;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  transition: transform var(--t-fast) var(--ease), border-color var(--t);
}
.emote:hover { transform: translateY(-2px) scale(1.08); border-color: var(--cyan); }

.field {
  width: 100%; padding: 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-size: .95rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.field:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,238,255,.16); }
.field::placeholder { color: var(--ink-3); }

/* --------------------------------------------------------------------- home */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(20px, 5vw, 34px);
  border-radius: var(--r-xl);
  margin-bottom: 16px;
}
.hero h1 { font-size: clamp(1.9rem, 8vw, 3.1rem); line-height: 1; }
.hero__sub { color: var(--ink-2); margin-top: 8px; font-size: .95rem; }

/* 68px, not 88: four tiles have to survive one row on a 390px phone, and a
   3 + 1 wrap reads as a mistake rather than a layout. */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; margin-top: 18px; }
.stat {
  padding: 11px 12px; border-radius: var(--r-md);
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
  text-align: center;
}
.stat b { display: block; font-family: var(--font-num); font-size: 1.28rem; line-height: 1.1; }
.stat span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.tile {
  position: relative; overflow: hidden;
  padding: 18px; border-radius: var(--r-lg);
  text-align: left; width: 100%;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t);
}
.tile:hover:not(.is-locked) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--cyan)) 70%, transparent);
  box-shadow: 0 18px 44px -22px var(--accent, var(--cyan));
}
.tile h3 { font-size: 1.02rem; letter-spacing: .05em; }
.tile p { font-size: .82rem; color: var(--ink-2); margin: 6px 0 0; }
.tile__tag {
  position: absolute; top: 12px; right: 12px;
  font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(34,238,255,.14); color: var(--cyan); border: 1px solid rgba(34,238,255,.35);
}
.tile.is-locked { opacity: .5; cursor: not-allowed; }
.tile.is-locked .tile__tag { background: rgba(150,170,200,.12); color: var(--ink-3); border-color: var(--line); }
.tile__icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }

/* ------------------------------------------------------------- leaderboard */
.lb-row {
  display: grid;
  grid-template-columns: 42px auto 1fr auto;
  align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
  border: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.lb-row + .lb-row { margin-top: 6px; }
.lb-row:hover { background: rgba(255,255,255,.06); }
.lb-row.is-me { border-color: var(--cyan); background: rgba(34,238,255,.09); }
.lb-rank { font-family: var(--font-display); font-weight: 900; font-size: 1.02rem; text-align: center; color: var(--ink-3); }
.lb-row:nth-child(1) .lb-rank { color: #ffd75c; text-shadow: 0 0 14px rgba(255,215,92,.7); }
.lb-row:nth-child(2) .lb-rank { color: #d8e4ff; text-shadow: 0 0 12px rgba(216,228,255,.6); }
.lb-row:nth-child(3) .lb-rank { color: #ff9a5c; text-shadow: 0 0 12px rgba(255,154,92,.6); }
.lb-row svg { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-1); }
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: .68rem; color: var(--ink-3); }
.lb-score { font-family: var(--font-num); font-weight: 800; font-size: 1.02rem; color: var(--cyan); }

.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 99px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.tab {
  flex: 1; padding: 8px 12px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); transition: all var(--t) var(--ease);
}
.tab.is-on { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #051019; }

/* ----------------------------------------------------------- daily rewards */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.rung {
  position: relative;
  padding: 13px 8px; border-radius: var(--r-md); text-align: center;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  transition: all var(--t) var(--ease);
}
.rung b { display: block; font-family: var(--font-num); font-size: 1.02rem; color: var(--amber); }
.rung span { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rung.is-claimed { opacity: .45; border-color: rgba(92,255,155,.4); }
.rung.is-claimed::after { content: '✓'; position: absolute; top: 4px; right: 6px; color: var(--lime); font-size: .8rem; }
.rung.is-next {
  border-color: var(--amber);
  box-shadow: 0 0 26px -8px var(--amber);
  animation: pulseGlow 2.2s var(--ease) infinite;
}
@keyframes pulseGlow { 50% { box-shadow: 0 0 34px -4px var(--amber); } }

/* ------------------------------------------------------------- season track */
.track { position: relative; padding: 20px 0 8px; }
.track__bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.track__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  box-shadow: 0 0 18px rgba(155,92,255,.7);
  transition: width .9s var(--ease);
}
.track__nodes { display: flex; justify-content: space-between; margin-top: 12px; gap: 4px; }
.node { flex: 1; text-align: center; font-size: .58rem; color: var(--ink-3); letter-spacing: .06em; }
.node i {
  display: block; width: 13px; height: 13px; margin: 0 auto 6px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 2px solid var(--line-2);
  transition: all var(--t) var(--ease);
}
.node.is-hit i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.node.is-hit { color: var(--ink); }

/* ------------------------------------------------------------------- avatar */
.avatar-stage { display: grid; place-items: center; padding: 8px 0 16px; }
.avatar-stage svg { width: clamp(110px, 34vw, 150px); height: auto; border-radius: 50%; background: var(--bg-1);
  box-shadow: 0 0 42px -12px var(--cyan); border: 2px solid var(--line-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; transition: transform var(--t-fast) var(--ease), border-color var(--t);
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-on { border-color: #fff; box-shadow: 0 0 16px currentColor; }
.picker { display: flex; align-items: center; gap: 8px; }
.picker__val { flex: 1; text-align: center; font-weight: 700; font-size: .85rem; letter-spacing: .06em; }

/* -------------------------------------------------------------------- modal */
.modal-bg {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--pad);
  background: rgba(2,3,10,.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.modal-bg.is-open { opacity: 1; visibility: visible; }
.modal {
  width: min(100%, 460px);
  max-height: 86vh; overflow-y: auto;
  padding: clamp(20px, 5vw, 30px);
  border-radius: var(--r-xl);
  transform: translateY(18px) scale(.97);
  transition: transform var(--t) var(--ease-back);
}
.modal-bg.is-open .modal { transform: none; }
.modal h2 { font-size: 1.3rem; margin-bottom: 6px; }

/* ------------------------------------------------------------------- toasts */
#toasts {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 14px);
  transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: min(92vw, 420px);
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 99px;
  background: rgba(12,13,34,.96);
  border: 1px solid var(--line-2);
  font-size: .85rem; font-weight: 600;
  box-shadow: 0 14px 40px -16px #000;
  animation: toastIn .34s var(--ease-back) both;
}
.toast.is-out { animation: toastOut .3s var(--ease) both; }
.toast--good { border-color: rgba(92,255,155,.6); box-shadow: 0 0 26px -10px var(--lime); }
.toast--bad  { border-color: rgba(255,63,108,.6); box-shadow: 0 0 26px -10px var(--rose); }
.toast--gold { border-color: rgba(255,176,32,.6); box-shadow: 0 0 26px -10px var(--amber); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(.97); } }

/* ------------------------------------------------------------------ confetti */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
.spark {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: sparkFall linear both;
}
@keyframes sparkFall {
  from { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
  to   { transform: translate3d(var(--dx), 108vh, 0) rotate(var(--dr)); opacity: 0; }
}

/* ------------------------------------------------------------------ results */
.result-row {
  display: grid; grid-template-columns: 46px auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  animation: resultIn .45s var(--ease-back) both;
}
.result-row + .result-row { margin-top: 7px; }
@keyframes resultIn { from { opacity: 0; transform: translateX(-22px); } }
.result-row.is-me { border-color: var(--cyan); background: rgba(34,238,255,.1); }
.result-row.is-donkey { border-color: var(--rose); background: rgba(255,63,108,.1); }
.place { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; text-align: center; }
.result-row svg { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-1); }

/* ----------------------------------------------------------------- tutorial */
.coach {
  position: fixed; z-index: 75;
  width: min(330px, 88vw);
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(19,20,46,.99), rgba(9,10,28,.99));
  border: 1px solid var(--cyan);
  box-shadow: 0 0 40px -10px var(--cyan), 0 20px 60px -20px #000;
  animation: coachIn .38s var(--ease-back) both;
}
@keyframes coachIn { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.coach h4 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 7px; }
.coach p { font-size: .88rem; color: var(--ink-2); margin-bottom: 12px; }
.coach__nav { display: flex; align-items: center; gap: 8px; }
.coach__dots { display: flex; gap: 5px; }
.coach__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.coach__dots i.is-on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.spotlight {
  position: fixed; z-index: 74; pointer-events: none;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 9999px rgba(2,3,10,.8), 0 0 40px -6px var(--cyan);
  border: 2px solid var(--cyan);
  transition: all .45s var(--ease);
}

/* ----------------------------------------------------------------- room code */
.code-box {
  display: flex; gap: 8px; justify-content: center; margin: 14px 0;
}
.code-box b {
  width: 42px; height: 54px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 900;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2);
  color: var(--cyan); text-shadow: 0 0 16px var(--cyan);
}

/* ------------------------------------------------------------------ layout */
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  width: 100%; text-align: left;
  transition: border-color var(--t), background var(--t), transform var(--t) var(--ease);
}
.item:hover { border-color: var(--line-2); background: rgba(255,255,255,.06); }
.item__icon { font-size: 1.15rem; width: 26px; text-align: center; flex: none; }
.item__main { flex: 1; min-width: 0; }
.item__main b { display: block; font-size: .92rem; }
.item__main span { font-size: .74rem; color: var(--ink-3); }

.divider { height: 1px; background: var(--line); margin: 18px 0; }
.section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 11px;
}
.section-title h3 { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 560px) {
  .topbar { padding: 10px 14px; }
  .hand-dock { padding-left: 8px; padding-right: 8px; }
  .felt { padding: 6px 8px 0; }
  .chip-stat { padding: 4px 9px; font-size: .68rem; }
}
@media (min-width: 900px) {
  .felt::before { width: min(80%, 760px); }
}
@media (max-height: 620px) {
  .seat__ring { width: 40px; }
  .hand { height: calc(var(--cw, 60px) * 1.42 + 14px); }
}

/* ------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #stage::before { animation: none; }
}
body.no-fx #stage::before,
body.no-fx #stage::after { display: none; }
body.no-fx .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(16,18,42,.9); }