/* Project Zozfil

   One stylesheet, one set of tokens, written in one pass.

   The look: a deep blue room, cool light, gold kept for money. Simple
   surfaces with soft edges, a clear primary action, type that is big enough
   to read without squinting. Nothing glows unless it means something.

   Theming: every colour below comes from a token. A game page is a "room",
   and a skin is just a different set of values for the same tokens written
   onto that room, so the panels, buttons, chips and canvases inside it all
   repaint without any of them knowing a skin exists.

   Performance: this runs on Chromebooks. Animations move transform and
   opacity and nothing else. There is no blur behind the header, no grain
   over the page, and no card that animates forever while it sits on screen.
   Anything decorative and continuous is switched off under
   html[data-motion="lite"]. */

/* ================================================================
   tokens
   ================================================================ */

:root {
  --bg: #070b16;
  --surface: #0d1528;
  --surface-2: #121d35;
  --surface-3: #182543;
  --line: #1e2c4c;
  --line-soft: #162240;
  --text: #e9f0ff;
  --muted: #94a4c6;
  --faint: #62739b;

  --accent: #3b9dff;
  --accent-2: #35d6ff;
  --accent-ink: #021026;
  --up: #3ddc97;
  --down: #ff5d73;
  --warn: #ffb547;
  --money: #ffc94d;

  --heat-0: #1b3160;
  --heat-1: #ffcf5c;
  --felt: #0c2244;
  --card-a: #3b9dff;
  --card-b: #12305c;
  --slot-a: #e5485f;
  --slot-b: #16213a;
  --slot-j: #ffcf5c;
  --slot-ink: #ffffff;
  --coin-a: #ffe08a;
  --coin-b: #d89a1c;
  --particle: #7cc4ff;
  --room-backdrop: none;
  --room-texture: none;

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --rail: 228px;
  --chat: 330px;
  --top: 60px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* Derived tokens are declared on every room as well as on :root. A custom
   property that refers to another is resolved where it is declared, so these
   have to be re-declared wherever the base tokens change or a skin would keep
   the house accent in its gradients. */
:root,
.room {
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --glow: color-mix(in srgb, var(--accent) 40%, transparent);
  --up-soft: color-mix(in srgb, var(--up) 14%, transparent);
  --down-soft: color-mix(in srgb, var(--down) 14%, transparent);
  --money-soft: color-mix(in srgb, var(--money) 14%, transparent);
  --hover: color-mix(in srgb, var(--text) 5%, transparent);
  --press: color-mix(in srgb, var(--text) 9%, transparent);
  --shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

/* ================================================================
   base
   ================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background:
    radial-gradient(90% 60% at 50% -20%, rgba(59, 157, 255, 0.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
h1, h2, h3 { letter-spacing: -0.015em; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 22%, transparent); }

.icon { width: 20px; height: 20px; display: block; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }
.icon-lg { width: 26px; height: 26px; }
.icon-xl { width: 36px; height: 36px; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

.label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.up { color: var(--up); }
.down { color: var(--down); }
.gold, .money { color: var(--money); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.wrapf { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: 14px; }
/* An empty message in a card grid takes the whole row, not one card's cell. */
.grid > .empty { grid-column: 1 / -1; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gauto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.scroll-x { overflow-x: auto; }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--surface-2);
  font: 600 11px var(--sans);
  color: var(--muted);
}

/* ================================================================
   shell
   ================================================================ */

body:not(.admin) #root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
#app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) auto;
  grid-template-rows: var(--top) minmax(0, 1fr);
  grid-template-areas: "top top top" "rail main chat";
}
@media (min-width: 901px) {
  body.rail-collapsed #app { grid-template-columns: 72px minmax(0, 1fr) auto; }
}
body.chat-hidden .chatpanel { display: none; }

.scrim { display: none; position: fixed; inset: var(--top) 0 0; background: rgba(2, 5, 12, 0.6); z-index: 65; }

/* top bar */

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 88%, #0e1a33);
  border-bottom: 1px solid var(--line-soft);
  z-index: 40;
  min-width: 0;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 6px; }
.brand img { width: 32px; height: 32px; }
.brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #7cc8ff, #35d6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The live feed of wins and losses. A single row that scrolls on the
   compositor; new results are queued and swapped in at the end of a loop so
   the strip never jumps back to the start mid scroll. */
.ticker {
  flex: 1;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  position: relative;
  /* The fade has to be wide enough to swallow a whole chip, or a result
     arriving at the edge is chopped down the middle and you read "imbo" for
     half a second. A chip is around 240px, so the old 6% (about 40px on this
     bar) faded the border and left the text hard cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 min(120px, 22%), #000 calc(100% - min(120px, 22%)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 min(120px, 22%), #000 calc(100% - min(120px, 22%)), transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
}

.tick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  flex: none;
}
.tick .av { border-radius: 50%; }
.tick b { font-weight: 650; }
.tick .tick-game { color: var(--faint); }
.tick .amt { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tick.win .amt { color: var(--up); }
.tick.loss .amt { color: var(--down); }
.tick .mult { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.topbar-right { display: flex; align-items: center; gap: 6px; flex: none; }

/* balance */

.balance {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 750;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.balance:hover { border-color: var(--accent-line); }
.balance img { width: 24px; height: 24px; }
.balance .cur { font-size: 11px; font-weight: 800; color: var(--money); letter-spacing: 0.04em; }
.balance.flash-up { border-color: color-mix(in srgb, var(--up) 70%, transparent); }
.balance.flash-down { border-color: color-mix(in srgb, var(--down) 60%, transparent); }
.balance.popped { animation: bal-pop 0.4s var(--ease); }
@keyframes bal-pop { 40% { transform: scale(1.06); } }
.float-delta {
  position: absolute;
  left: 50%;
  top: 2px;
  font-weight: 800;
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  animation: float-up 1.1s var(--ease) forwards;
}
.float-delta.up { color: var(--up); }
.float-delta.down { color: var(--down); }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -14px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -36px); }
}

.pill-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--down);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.me-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.me-chip:hover { border-color: var(--accent-line); }
.me-chip .av { border-radius: 50%; }

/* rail */

.rail {
  grid-area: rail;
  background: color-mix(in srgb, var(--bg) 80%, #0c1630);
  border-right: 1px solid var(--line-soft);
  padding: 12px 10px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-group {
  margin: 16px 0 6px;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.rail-group:first-child { margin-top: 2px; }

.navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 560;
  font-size: 14px;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.navitem:hover { background: var(--hover); color: var(--text); }
.navitem.on {
  background: linear-gradient(90deg, var(--accent-soft), transparent 90%);
  color: var(--text);
}
.navitem.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
}
.navitem.on .icon { color: var(--accent-2); }
.nav-tag {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.rail-foot {
  margin-top: auto;
  padding: 14px 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 12.5px;
}
.rail-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }

@media (min-width: 901px) {
  body.rail-collapsed .rail-group,
  body.rail-collapsed .navitem span,
  body.rail-collapsed .nav-tag,
  body.rail-collapsed .rail-foot { display: none; }
  body.rail-collapsed .navitem { justify-content: center; padding: 0; }
}

/* main */

.main {
  grid-area: main;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 24px 70px;
  min-width: 0;
  scroll-behavior: auto;
}
.main.room {
  background: var(--room-backdrop), var(--bg);
  background-attachment: local;
  color: var(--text);
}
.wrap { max-width: 1200px; margin: 0 auto; position: relative; }
.main > .wrap { animation: view-in 0.24s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; min-height: 40px; }
/* The title shrinks beside its icon instead of dropping below it, and a
   button that does not fit wraps under both, on the right. */
.page-head .head-text { flex: 1 1 220px; min-width: 0; }
.page-head > .head-text + .spacer + * { margin-left: auto; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 800; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; }
.page-head .head-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-2);
  flex: none;
}

/* ================================================================
   components
   ================================================================ */

/* buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease), opacity 0.15s;
}
.btn:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--text) 16%, var(--line)); }
.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.is-blocked { cursor: not-allowed; }
.btn.is-busy { cursor: progress; opacity: 0.7; }

.btn-primary {
  border: 0;
  background: var(--grad);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); }
.btn-primary:disabled { filter: saturate(0.4); }

.btn-success { border: 0; background: linear-gradient(135deg, var(--up), color-mix(in srgb, var(--up) 70%, #fff)); color: #03251a; }
.btn-success:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--up), color-mix(in srgb, var(--up) 70%, #fff)); }
.btn-danger { background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 45%, transparent); color: color-mix(in srgb, var(--down) 75%, #fff); }
.btn-danger:hover { background: color-mix(in srgb, var(--down) 22%, transparent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.btn-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-2); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.btn-lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: var(--r-md); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* inputs */

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > .label { display: flex; align-items: center; gap: 6px; }

.input, .select, .textarea {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  color: var(--text);
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.textarea { height: auto; padding: 10px 13px; resize: vertical; }
.input::placeholder { color: var(--faint); }
.input:hover, .select:hover { border-color: color-mix(in srgb, var(--text) 14%, var(--line)); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; height: 42px; margin-left: -1px; }

/* An amount field with its coin and quick actions inside the box. */
.amount {
  position: relative;
  display: flex;
  align-items: center;
}
.amount > img { position: absolute; left: 10px; width: 22px; height: 22px; pointer-events: none; }
.amount .input { padding-left: 40px; padding-right: 116px; height: 46px; font-size: 16px; }
.amount.plain .input { padding-left: 13px; }
.amount.readonly {
  height: 46px;
  padding: 0 13px 0 40px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.amount-actions { position: absolute; right: 6px; display: flex; gap: 4px; }
.amount-actions .btn { height: 32px; min-width: 34px; padding: 0 8px; font-size: 12.5px; border-radius: 7px; background: var(--surface-3); border-color: transparent; color: var(--muted); }
.amount-actions .btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, var(--surface-3)); }

/* segmented control */

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line-soft);
  width: 100%;
}
.seg button {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.seg button:hover:not(.on):not(:disabled) { color: var(--text); background: var(--hover); }
/* Locked mid round (mines, plinko while balls fall). The pick stays readable,
   the rest fade so it is obvious nothing can be changed right now. */
.seg button:disabled { cursor: not-allowed; }
.seg button:disabled:not(.on) { opacity: 0.4; }
.input:disabled, .select:disabled { opacity: 0.55; cursor: not-allowed; }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px -8px #000; }
.seg.seg-accent button.on { background: var(--grad); color: var(--accent-ink); }

/* switch */

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.switch i {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transform: translateY(-50%);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.switch.on { background: var(--grad); border-color: transparent; }
.switch.on i { transform: translate(18px, -50%); background: #fff; }

input[type="range"] { accent-color: var(--accent); width: 100%; }

/* cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card-tight { padding: 12px 14px; border-radius: var(--r-md); }
.card-flat { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 32px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 16px; font-weight: 750; }
.card-head .head-note { color: var(--faint); font-size: 12.5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); }
.chip.up { background: var(--up-soft); border-color: transparent; color: var(--up); }
.chip.down { background: var(--down-soft); border-color: transparent; color: var(--down); }
.chip.money { background: var(--money-soft); border-color: transparent; color: var(--money); }
button.chip { cursor: pointer; }
button.chip:hover { color: var(--text); }

.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; }
.stat .s { font-size: 12.5px; color: var(--faint); }

.statrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.statrow > * { padding: 16px 18px; }
.statrow > * + * { border-left: 1px solid var(--line-soft); }

.bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width 0.5s var(--ease); }
.bar.gold > i { background: linear-gradient(90deg, #f0a92a, var(--money)); }
.bar.up > i { background: linear-gradient(90deg, color-mix(in srgb, var(--up) 70%, #000), var(--up)); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background-color 0.12s; }
table.tbl tbody tr:hover { background: var(--hover); }
table.tbl td.n, table.tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.me td { background: var(--accent-soft); }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.tabs button {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.tabs button:hover { color: var(--text); background: var(--hover); }
.tabs button.on { background: var(--surface-2); border-color: var(--line); color: var(--text); }

.empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.empty .empty-title { color: var(--muted); font-weight: 650; }

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.coin { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin img { width: 16px; height: 16px; }
.coin.lg { font-size: 18px; font-weight: 800; }
.coin.lg img { width: 22px; height: 22px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; }
.kv .k { color: var(--faint); }
.kv .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================================================================
   identity: avatars, names, tags, badges
   ================================================================ */

img.av {
  border-radius: 28%;
  flex: none;
  background: var(--surface-3);
  object-fit: cover;
}
.av-ring { border-radius: 30%; padding: 2px; background: var(--grad); flex: none; }
.av-ring img.av { border-radius: 26%; }

.uname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 650;
}
.uname .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.uname .nm:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.nm-grad {
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ulvl {
  display: inline-grid;
  place-items: center;
  height: 18px;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Chat tags: a gradient pill with the text in white or a dark ink. The
   shimmer is a highlight that crosses the pill every few seconds. */
.ctag {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.ctag.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: tag-shine 3.4s ease-in-out infinite;
}
@keyframes tag-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.role-tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-2);
}
.role-tag.root { background: var(--money-soft); color: var(--money); }

.ubadge { width: 16px; height: 16px; flex: none; }

.pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.pdot.online { background: var(--up); box-shadow: 0 0 0 2px color-mix(in srgb, var(--up) 22%, transparent); }
.pdot.idle { background: var(--warn); }

/* ================================================================
   items
   ================================================================ */

.item {
  --rar: var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s;
}
.item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--rar) 55%, var(--line)); }
.item.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.item-art {
  position: relative;
  height: 110px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.item-rar { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rar); }
.item-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.item-sub { font-size: 12px; color: var(--faint); }
.item-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.item .own { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Rarity treatments. The loud tiers get their effect on hover and in the
   reveal, not forever while a grid of forty of them sits on screen. */
.fx-sheen .item-art::after,
.fx-shine .item-art::after,
.fx-glow .item-art::after,
.fx-radiant .item-art::after,
.fx-holo .item-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
}
.item:hover .item-art::after { transform: translateX(100%); }
.fx-glow, .fx-radiant { border-color: color-mix(in srgb, var(--rar) 35%, var(--line-soft)); }
.fx-radiant { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 20%, transparent), 0 12px 30px -20px var(--rar); }
.fx-holo {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #ff5f8a, #ffc24d, #3ddc97, #35d6ff, #ff5f8a) border-box;
}

/* item art pieces */

.art-skin {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 10px;
  gap: 6px;
  border-radius: inherit;
}
.art-skin .mini-stage {
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.art-skin .mini-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.art-part img, .art-part-img { width: 84px; height: 84px; border-radius: 22px; }
.art-color { font-size: 26px; font-weight: 850; letter-spacing: -0.02em; }
.art-badge { width: 54px; height: 54px; }

/* detail sheet */

.detail-art { height: 180px; border-radius: var(--r-lg); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; position: relative; }
.detail-art .art-part-img { width: 130px; height: 130px; border-radius: 32px; }
.detail-art .art-badge { width: 80px; height: 80px; }
.detail-art .art-color { font-size: 40px; }
.detail-art .ctag { height: 30px; font-size: 16px; padding: 0 12px; border-radius: 9px; }
.detail-rar { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-blurb { color: var(--muted); font-size: 13.5px; margin: 4px 0 14px; }

/* ================================================================
   overlays
   ================================================================ */

.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 140;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-width: 260px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 96%, #000);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: toast-in 0.26s var(--spring);
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.toast.good::before { background: var(--up); }
.toast.err::before { background: var(--down); }
.toast.warn::before { background: var(--warn); }
.toast .t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.toast .b { font-size: 13px; color: var(--muted); margin-top: 1px; }
.toast-count { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.toast.bump { animation: toast-bump 0.3s var(--ease); }
.toast.leaving { opacity: 0; transform: translateX(16px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(0.97); } }
@keyframes toast-bump { 40% { transform: scale(1.03); } }

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 12, 0.72);
  animation: fade 0.16s var(--ease);
}
.modal-back.leaving { opacity: 0; transition: opacity 0.15s; }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%;
  max-width: 470px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.22s var(--spring);
}
.modal-wide { max-width: 820px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.modal h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.modal .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.banner { padding: 10px 16px; font-size: 13.5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--line-soft); }
.banner.info { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: #bfe0ff; }
.banner.warn { background: color-mix(in srgb, var(--warn) 14%, var(--bg)); color: #ffd99a; }
.banner.good { background: color-mix(in srgb, var(--up) 14%, var(--bg)); color: #a9f0cf; }

.landing { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

/* reveal */

.reveal-back {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(2, 5, 12, 0.82);
  animation: fade 0.18s var(--ease);
}
.reveal-card {
  --rar: var(--accent);
  position: relative;
  width: min(340px, 88vw);
  padding: 24px;
  text-align: center;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--rar) 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 20%, transparent), 0 30px 80px -30px var(--rar);
  overflow: hidden;
  animation: reveal-in 0.5s var(--spring);
}
.reveal-card > * { position: relative; z-index: 1; }
@keyframes reveal-in { 0% { opacity: 0; transform: scale(0.7) rotate(-4deg); } }
.reveal-card .item-art { height: 170px; margin-bottom: 14px; }
.reveal-tier { font-size: 12px; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rar); }
.reveal-name { font-size: 22px; font-weight: 800; margin: 4px 0 10px; }
.reveal-rays {
  position: absolute;
  inset: -60%;
  z-index: 0 !important;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar) 30%, transparent) 0deg 7deg, transparent 7deg 20deg);
  animation: spin 12s linear infinite;
  opacity: 0.5;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bigwin {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 118;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
  animation: bigwin 2.2s var(--ease) forwards;
}
.bigwin .m {
  font-weight: 900;
  font-size: clamp(44px, 11vw, 84px);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6d5, var(--money) 60%, #e39217);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}
@keyframes bigwin {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  16% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  28% { transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

.confetti-layer { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -20px; border-radius: 2px; animation: confetti-fall var(--dur, 2s) linear var(--delay, 0s) forwards; }
@keyframes confetti-fall { to { opacity: 0; transform: translate(var(--drift, 0), 105vh) rotate(var(--spin, 360deg)); } }

/* ================================================================
   game rooms
   ================================================================ */

.game { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }

.betpanel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.betpanel .btn-lg { width: 100%; }
.bet-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--faint); min-height: 18px; }
.bet-foot b { font-variant-numeric: tabular-nums; }
.bet-session { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; font-variant-numeric: tabular-nums; }

.stage {
  position: relative;
  min-width: 0;
  min-height: 460px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 70% at 50% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}
.stage > *:not(.particles) { position: relative; z-index: 1; }
.stage .particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.stage.won { animation: stage-win 0.7s var(--ease); }
@keyframes stage-win { 35% { box-shadow: inset 0 0 0 2px var(--up), inset 0 0 80px -20px var(--up); } }
.stage-center { flex: 1; display: grid; place-items: center; }

.readout {
  font-size: clamp(40px, 9vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readout.win { color: var(--up); }
.readout.lose { color: var(--down); }

.history-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.strip-wrap { margin-top: auto; }
.hchip {
  height: 26px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--muted);
}
.hchip.win { background: var(--up-soft); color: var(--up); }
.hchip.lose { background: var(--down-soft); color: var(--down); }
.hchip.new { animation: chip-in 0.3s var(--spring); }
@keyframes chip-in { from { opacity: 0; transform: scale(0.6); } }

/* dice */
.dice-track { position: relative; height: 70px; margin: 44px 0 14px; }
.dice-rail { position: absolute; inset: 26px 0 auto; height: 16px; border-radius: 999px; }
.dice-marker {
  position: absolute;
  top: 10px;
  width: 4px;
  height: 48px;
  border-radius: 3px;
  background: var(--text);
  transform: translateX(-2px);
  transition: left 0.3s var(--ease);
  box-shadow: 0 0 12px var(--glow);
}
.dice-bubble {
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-weight: 850;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: left 0.3s var(--ease);
}
/* Each number sits exactly under its point on the track. Spread out with
   space-between they drifted, and the 50 was visibly left of the middle. */
.dice-scale { position: relative; height: 16px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dice-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.dice-scale span:first-child { transform: none; }
.dice-scale span:last-child { transform: translateX(-100%); }
/* The three readouts under the slider. The stage is narrow whenever chat is
   open, and the target box used to cut its own number off ("50.0").
*/
.dice-fields .card { padding: 10px 12px; min-width: 0; }
.dice-fields .input { padding: 0 8px; min-width: 0; font-variant-numeric: tabular-nums; }

/* coinflip */
.flip-coin {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.04em;
  background: radial-gradient(circle at 34% 28%, var(--coin-a), var(--coin-b));
  color: color-mix(in srgb, var(--coin-b) 30%, #000);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), inset 0 6px 0 rgba(255, 255, 255, 0.3), 0 20px 40px -20px #000;
  transition: transform 0.55s var(--ease);
}
.flip-coin.ink { background: radial-gradient(circle at 34% 28%, var(--surface-3), var(--bg)); color: var(--text); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.3), inset 0 6px 0 rgba(255, 255, 255, 0.08), 0 20px 40px -20px #000; }

/* plinko */
.plinko-board { width: 100%; max-width: 460px; margin: 0 auto; }
.peg { fill: color-mix(in srgb, var(--text) 55%, var(--surface-3)); }
.plinko-ball { fill: var(--accent-2); }
.buckets { display: grid; width: 100%; max-width: 460px; margin: 6px auto 0; gap: 2px; font-size: 11px; }
.bucket {
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  min-width: 0;
}
.bucket.hit { animation: bucket-pop 0.45s var(--ease); }
@keyframes bucket-pop { 35% { transform: translateY(5px); filter: brightness(1.6); } }

/* wheel */
.wheel-wrap { position: relative; width: 320px; height: 320px; max-width: 100%; margin: 0 auto; }
.wheel-wrap svg { width: 100%; height: 100%; }
.wheel-svg { transition: transform 4.2s cubic-bezier(0.15, 0.85, 0.15, 1); }
.wheel-needle {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 20px solid var(--text);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  z-index: 2;
}
.wheel-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wheel-center .readout { font-size: 30px; }

/* mines */
.mine-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; width: 100%; max-width: 460px; margin: 0 auto; }
.tile {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 0;
  background: linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 70%, #000));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s var(--ease), filter 0.12s;
}
.tile:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.15); }
.tile:disabled { cursor: default; }
.tile.safe { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, var(--surface-3)), color-mix(in srgb, var(--accent) 22%, var(--surface-2))); color: var(--accent-2); animation: tile-flip 0.3s var(--ease); }
.tile.bomb { background: linear-gradient(180deg, color-mix(in srgb, var(--down) 45%, var(--surface-3)), color-mix(in srgb, var(--down) 25%, var(--surface-2))); color: #fff; animation: tile-flip 0.3s var(--ease); }
.tile.dim { opacity: 0.45; }
.tile .icon { width: 44%; height: 44%; }
@keyframes tile-flip { from { transform: rotateY(90deg); } }
.mines-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mines-stats .stat { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.mines-stats .stat .v { font-size: 18px; }

/* cards */
.pcard {
  position: relative;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(168deg, #ffffff, #e3e8f2);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8);
  color: var(--card-ink, #121726);
  font-weight: 850;
  overflow: hidden;
}
.pcard-rank { position: absolute; top: 5px; left: 7px; line-height: 1; }
.pcard-rank.flip { top: auto; left: auto; right: 7px; bottom: 5px; transform: rotate(180deg); }
.pcard-pip { position: absolute; top: 23px; left: 8px; }
.pcard-mid { position: absolute; inset: 0; display: grid; place-items: center; }
.pcard-back { background: repeating-linear-gradient(45deg, var(--card-a) 0 6px, var(--card-b) 6px 12px); }
.pcard-back::after { content: ""; position: absolute; inset: 6px; border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 5px; }
.pcard-row { display: flex; gap: 8px; align-items: center; min-height: 96px; flex-wrap: wrap; }
.pcard-deal { animation: pcard-deal 0.34s var(--spring) backwards; }
@keyframes pcard-deal { from { opacity: 0; transform: translateY(-28px) rotate(-8deg) scale(0.9); } }
.felt {
  border-radius: var(--r-lg);
  padding: 18px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--felt);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-soft));
}
.hand-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hand-total { height: 24px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-2); font-weight: 850; font-size: 13px; font-variant-numeric: tabular-nums; }
.hand-total.bust { color: var(--down); background: var(--down-soft); }
.hand-total.good { color: var(--up); background: var(--up-soft); }
.bj-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bj-actions .btn { min-width: 96px; }

.hilo-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hilo-choice .btn { height: auto; padding: 12px 10px; flex-direction: column; gap: 3px; }
.hilo-choice .btn b { font-size: 15px; }
.hilo-choice .btn span { font-size: 12px; opacity: 0.75; font-weight: 600; }

/* crash */
.crash-screen {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line-soft);
}
.crash-canvas { display: block; width: 100%; height: clamp(230px, 38vw, 360px); }
.crash-hud { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.crash-m { font-size: clamp(46px, 10vw, 86px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }
.crash-m.running { color: var(--text); }
.crash-m.busted { color: var(--down); }
.crash-m.cashed { color: var(--up); }
.crash-phase { margin-top: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
.crash-countdown { height: 5px; width: min(240px, 60%); margin: 10px auto 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.crash-countdown i { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.busted-flash { animation: bust 0.5s var(--ease); }
@keyframes bust { 20% { transform: scale(1.08); } }

/* Your seat in a live round. The one thing on the page that says, at a
   glance, whether you are in, riding, out, or gone. */
.my-bet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color 0.2s, background-color 0.2s;
}
.my-bet .mb-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--muted); }
.my-bet .mb-title { font-weight: 750; }
.my-bet .mb-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.my-bet .mb-value { margin-left: auto; text-align: right; font-weight: 850; font-size: 17px; font-variant-numeric: tabular-nums; }
.my-bet.waiting { border-color: var(--accent-line); background: var(--accent-soft); }
.my-bet.waiting .mb-icon { background: var(--accent); color: var(--accent-ink); }
.my-bet.riding { border-color: color-mix(in srgb, var(--up) 55%, transparent); background: var(--up-soft); }
.my-bet.riding .mb-icon { background: var(--up); color: #03251a; }
.my-bet.riding .mb-value { color: var(--up); }
.my-bet.cashed { border-color: color-mix(in srgb, var(--up) 55%, transparent); background: var(--up-soft); }
.my-bet.cashed .mb-icon { background: var(--up); color: #03251a; }
.my-bet.cashed .mb-value { color: var(--up); }
.my-bet.busted { border-color: color-mix(in srgb, var(--down) 50%, transparent); background: var(--down-soft); }
.my-bet.busted .mb-icon { background: var(--down); color: #fff; }
.my-bet.busted .mb-value { color: var(--down); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; transform: scale(0.7); } }

.cashout-btn { height: 56px; font-size: 17px; }
.cashout-btn .co-amt { font-variant-numeric: tabular-nums; opacity: 0.85; font-weight: 700; }

.players { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.player-row:nth-child(odd) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.player-row.me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.player-row.out .p-out { color: var(--up); font-weight: 800; }
.player-row.lost .p-out { color: var(--down); }
.player-row .p-wager { color: var(--muted); }
.player-row.enter { animation: row-in 0.3s var(--ease); }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } }

.auto-status { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.auto-status .row b { font-variant-numeric: tabular-nums; }

/* roulette */
.roul-window {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 75%, var(--surface));
  border: 1px solid var(--line-soft);
}
.roul-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg), transparent 20%, transparent 80%, var(--bg));
}
.roul-reel { display: flex; gap: 5px; padding: 10px 0; will-change: transform; }
.roul-slot {
  flex: none;
  width: 58px;
  height: 74px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: var(--slot-ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.slot-a { background: var(--slot-a); }
.slot-b { background: var(--slot-b); color: var(--text); }
.slot-j { background: linear-gradient(180deg, color-mix(in srgb, var(--slot-j) 80%, #fff), var(--slot-j)); color: #2a1a00; }
.roul-slot.landed { box-shadow: 0 0 0 3px var(--text), 0 0 30px var(--glow); transform: scale(1.06); transition: transform 0.3s var(--ease); }
.roul-pointer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.roul-pointer::before, .roul-pointer::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; }
.roul-pointer::before { top: 0; border-top: 13px solid var(--text); }
.roul-pointer::after { bottom: 0; border-bottom: 13px solid var(--text); }
.roul-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.roul-pick {
  position: relative;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
.roul-pick:hover { transform: translateY(-2px); }
.roul-pick .rp-head { display: flex; align-items: center; gap: 8px; }
.roul-pick .rp-swatch { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.roul-pick .rp-name { font-weight: 800; text-transform: capitalize; }
.roul-pick .rp-mult { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.roul-pick .rp-pool { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roul-pick.sel { border-color: var(--accent); background: var(--accent-soft); }
.roul-pick.mine::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--up); pointer-events: none; }
.roul-pick .rp-mine { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--up); color: #03251a; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.roul-pick.won { border-color: var(--up); animation: pick-win 0.6s var(--ease); }
.roul-pick.lost-pick { opacity: 0.55; }
@keyframes pick-win { 30% { transform: scale(1.04); } }
.roul-result-line { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.roul-result {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  flex: none;
}
.roul-result.waiting { background: var(--surface-2); color: var(--faint); border: 1px dashed var(--line); }
.roul-result.waiting .icon { width: 20px; height: 20px; }
.round-outcome { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.round-outcome.up { color: var(--up); }
.round-outcome.down { color: var(--down); }

/* crates */
.crate-tile {
  --accent-a: var(--accent);
  --accent-b: var(--accent-2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s;
}
.crate-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-a) 50%, var(--line)); }
.crate-tile .crate-name { font-weight: 800; font-size: 16px; }
.crate-tile .crate-blurb { color: var(--faint); font-size: 12.5px; min-height: 36px; }
.crate-art {
  position: relative;
  height: 130px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--accent-a) 28%, transparent), transparent 70%);
}
/* The crate itself: a box drawn in CSS from the crate's two colours. */
.crate-box { position: relative; width: 84px; height: 72px; transform: translateY(4px); transition: transform 0.3s var(--ease); }
.crate-tile:hover .crate-box { transform: translateY(-2px) rotate(-3deg); }
.crate-box .lid { position: absolute; left: -6px; right: -6px; top: 0; height: 22px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-b) 80%, #fff), var(--accent-b)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.crate-box .body { position: absolute; left: 0; right: 0; top: 18px; bottom: 0; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, var(--accent-a), color-mix(in srgb, var(--accent-a) 60%, #000)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2); }
.crate-box .band { position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; transform: translateX(-50%); background: linear-gradient(180deg, #fff6d0, #f0b43a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.crate-box .lock { position: absolute; left: 50%; top: 22px; width: 20px; height: 18px; transform: translateX(-50%); border-radius: 5px; background: #ffe39a; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); }
.crate-box.vault .body { border-radius: 10px; }
/* margin-top: auto keeps the price on the bottom edge, so a crate with a longer
   blurb does not sit its price lower than the crates beside it. */
.crate-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }

.reel-window {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line-soft);
}
.reel-window::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--bg), transparent 18%, transparent 82%, var(--bg)); }
.reel { display: flex; gap: 10px; padding: 12px; will-change: transform; }
.reel.drifting { animation: reel-drift 90s linear infinite; }
@keyframes reel-drift { to { transform: translateX(-2400px); } }
.reel-item {
  --rar: var(--line);
  flex: none;
  width: 112px;
  height: 124px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 20%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 650;
}
.reel-item .reel-art { height: 64px; display: grid; place-items: center; }
.reel-item .art-part-img { width: 56px; height: 56px; border-radius: 16px; }
.reel-window.building { box-shadow: inset 0 0 40px -12px var(--accent); }

.spin-marker { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.spin-marker::before, .spin-marker::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; }
.spin-marker::before { top: 0; border-top: 12px solid var(--accent-2); }
.spin-marker::after { bottom: 0; border-bottom: 12px solid var(--accent-2); }
.spin-marker > i { position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; transform: translateX(-1px); background: var(--accent-2); }
.spin-marker.h::before, .spin-marker.h::after { left: auto; top: 50%; transform: translateY(-50%); border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.spin-marker.h::before { left: 0; border-left: 11px solid var(--accent-2); }
.spin-marker.h::after { right: 0; border-right: 11px solid var(--accent-2); }
.spin-marker.h > i { top: 50%; bottom: auto; left: 10px; right: 10px; width: auto; height: 2px; transform: translateY(-1px); }

.drop-feed { display: flex; gap: 6px; overflow: hidden; }
.drop-feed .drop { flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 12.5px; animation: row-in 0.3s var(--ease); }

/* battles */
.battle-board { display: grid; gap: 12px; }
.seat { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); }
.seat.winner { border-color: var(--money); box-shadow: 0 0 0 1px color-mix(in srgb, var(--money) 30%, transparent); }
.seat.open { border-style: dashed; align-items: center; justify-content: center; color: var(--faint); min-height: 160px; }
.pull-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pull {
  --rar: var(--line);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent);
  background: color-mix(in srgb, var(--rar) 14%, var(--surface-2));
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
}
.pull .art-part-img { width: 36px; height: 36px; border-radius: 10px; }
.pull .ctag { transform: scale(0.62); }
.pull .ubadge { width: 24px; height: 24px; }
.lane { position: relative; height: 60px; overflow: hidden; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 70%, var(--surface)); border: 1px solid var(--line-soft); }
.lane-strip { display: flex; flex-direction: column; will-change: transform; }
.lane-cell { height: 60px; flex: none; display: grid; place-items: center; }
.lane-cell.landed { background: color-mix(in srgb, var(--rar) 18%, transparent); }
.round-banner { text-align: center; font-size: 13px; font-weight: 750; color: var(--muted); padding: 6px 0 12px; }
.round-banner.flashing { animation: round-pop 0.5s var(--ease); }
@keyframes round-pop { 40% { transform: scale(1.05); color: var(--accent-2); } }
[data-tally].bumped { animation: round-pop 0.4s var(--ease); }

/* ================================================================
   lobby
   ================================================================ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft);
  margin-bottom: 14px;
  overflow: hidden;
}
.hero-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hero-who img.av { border-radius: 26px; box-shadow: 0 10px 30px -14px #000; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 850; }
.hero .hero-sub { color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.hero-level { min-width: 220px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.quick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
.quick-card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.quick-card .qc-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-2); }
.quick-card.ready .qc-icon { background: var(--up-soft); color: var(--up); }
.quick-card .qc-title { font-weight: 750; font-size: 14px; }
.quick-card .qc-sub { font-size: 12.5px; color: var(--faint); }
.quick-card.ready .qc-sub { color: var(--up); font-weight: 650; }

.section-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.section-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.section-head .spacer { flex: 1; }

/* dense, so a wide card that cannot fit the columns left in a row does not
   leave a hole: the next small card moves up into it. Crash used to sit
   alone with an empty column beside it. */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-flow: dense; gap: 12px; }
.game-card {
  --ga: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 132px;
  padding: 16px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--ga) 26%, transparent), transparent 65%),
    var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s;
}
.game-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ga) 55%, var(--line)); }
.game-card .gc-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--ga) 22%, transparent); color: var(--ga); }
.game-card .gc-name { font-weight: 800; font-size: 16px; }
.game-card .gc-sub { font-size: 12.5px; color: var(--faint); }
.game-card .gc-live { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--down) 18%, transparent); color: #ff9aa8; font-size: 11px; font-weight: 800; }
.game-card .gc-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff5d73; }
.game-card .gc-arrow { position: absolute; right: 14px; bottom: 14px; color: var(--faint); transition: transform 0.18s var(--ease), color 0.18s; }
.game-card:hover .gc-arrow { transform: translateX(3px); color: var(--ga); }
.game-card.feature { grid-column: span 2; min-height: 132px; }
.game-card .gc-ticks { display: flex; gap: 5px; flex-wrap: wrap; }

.lobby-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; align-items: start; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.board-row + .board-row { border-top: 1px solid var(--line-soft); }
.board-rank { width: 24px; text-align: center; font-weight: 850; color: var(--faint); font-variant-numeric: tabular-nums; }
.board-row:nth-child(1) .board-rank { color: #ffd166; }
.board-row:nth-child(2) .board-rank { color: #cfd8e6; }
.board-row:nth-child(3) .board-rank { color: #e0a36b; }

/* ================================================================
   arcade
   ================================================================ */

.arcade-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: var(--r-xl);
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--up) 18%, transparent), transparent 60%), var(--surface);
  border: 1px solid var(--line-soft);
}
.arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.arcade-card {
  --ga: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--r-xl);
  background: radial-gradient(100% 90% at 100% 0%, color-mix(in srgb, var(--ga) 22%, transparent), transparent 65%), var(--surface);
  border: 1px solid var(--line-soft);
}
.arcade-card .ac-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--ga) 20%, transparent); color: var(--ga); }
.arcade-card .ac-name { font-weight: 800; font-size: 17px; }
.arcade-card .ac-desc { color: var(--muted); font-size: 13px; min-height: 40px; }
.arcade-card .ac-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.arcade-play { max-width: 720px; margin: 0 auto; }
.arcade-hud { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.arcade-timer { flex: 1; min-width: 160px; }

.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.mem-card {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
}
.mem-card.up, .mem-card.matched { transform: rotateY(180deg); }
.mem-card .face, .mem-card .back {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mem-card .back { background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line); color: var(--faint); }
.mem-card .face { transform: rotateY(180deg); background: var(--surface-2); border: 2px solid var(--accent-line); font-size: 30px; }
.mem-card.matched .face { border-color: var(--up); background: var(--up-soft); }
.mem-card .face svg { width: 52%; height: 52%; }

.math-q { font-size: clamp(40px, 9vw, 64px); font-weight: 900; text-align: center; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 18px 0; }
.math-input { height: 60px; font-size: 26px; text-align: center; font-weight: 800; }
.answer-flash.ok { animation: flash-ok 0.35s var(--ease); }
.answer-flash.bad { animation: flash-bad 0.35s var(--ease); }
@keyframes flash-ok { 40% { box-shadow: 0 0 0 4px var(--up); } }
@keyframes flash-bad { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* wave five boards */
.reflex-pad {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  border: 0;
  border-radius: var(--r-xl);
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.12s, transform 0.08s;
  user-select: none;
}
.reflex-pad:active { transform: scale(0.985); }
.reflex-pad.waiting { background: #b3392f; color: #fff; }
.reflex-pad.go { background: #22b866; color: #06281a; }
.reflex-pad.hit { background: var(--accent); color: var(--accent-ink); }
.reflex-pad.early { background: var(--surface-3); color: var(--down); }
.reflex-label { font-size: 26px; font-weight: 800; }
.reflex-time { font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; min-height: 52px; }

.stroop-word { font-size: clamp(44px, 10vw, 72px); font-weight: 900; text-align: center; letter-spacing: 0.02em; margin: 18px 0 22px; text-transform: uppercase; min-height: 1.2em; }
.stroop-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stroop-choice {
  --c: var(--accent);
  height: 64px;
  border: 0;
  border-radius: var(--r-lg);
  cursor: pointer;
  background: var(--c);
  color: #0b0f14;
  font-weight: 800;
  font-size: 15px;
  text-transform: capitalize;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, filter 0.08s;
}
.stroop-choice:hover { filter: brightness(1.1); }
.stroop-choice:active { transform: scale(0.96); }

.digits-show { font-size: clamp(40px, 9vw, 64px); font-weight: 900; text-align: center; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; margin: 18px 0; min-height: 80px; }
.digits-show.gone { color: var(--faint); letter-spacing: 0.3em; }

.type-target {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  margin: 14px 0 16px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--muted);
  letter-spacing: 0.01em;
}
.type-target span.ok { color: var(--up); }
.type-target span.bad { color: var(--down); text-decoration: underline; }
.type-input { resize: none; font-size: 18px; height: auto; padding: 12px 14px; line-height: 1.4; }

.odd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin: 0 auto 14px; }
.odd-tile { aspect-ratio: 1; border: 0; border-radius: var(--r-md); cursor: pointer; transition: transform 0.08s; }
.odd-tile:active { transform: scale(0.94); }
.odd-tile.reveal { outline: 3px solid #fff; outline-offset: -3px; }
.odd-tile.wrong { outline: 3px solid var(--down); outline-offset: -3px; }

.seq-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 360px; margin: 0 auto; }
.seq-key {
  --k: var(--accent);
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-lg);
  cursor: pointer;
  background: color-mix(in srgb, var(--k) 28%, var(--surface-2));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, filter 0.08s, background-color 0.12s;
}
.seq-key:active { transform: scale(0.96); }
.seq-key.lit { background: var(--k); filter: brightness(1.25); box-shadow: 0 0 30px var(--k); }
.seq-key:disabled { cursor: default; }

.word-scramble { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.letter {
  width: 52px;
  height: 58px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

.result-card { text-align: center; padding: 26px 20px; }
.result-card .rc-score { font-size: 48px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.result-card .rc-pay { margin: 8px 0 18px; }

/* ================================================================
   chat
   ================================================================ */

.chatpanel {
  grid-area: chat;
  width: var(--chat);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--bg) 82%, #0c1630);
  border-left: 1px solid var(--line-soft);
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.chat-head .chat-title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.chat-tabs { display: flex; gap: 6px; padding: 10px 12px 4px; overflow-x: auto; }
.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.chat-tab:hover { color: var(--text); }
.chat-tab.on { background: var(--grad); color: var(--accent-ink); border-color: transparent; }
.chat-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-body { flex: 1; overflow-y: auto; padding: 6px 4px 10px; contain: strict; }

.msg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 5px 10px; border-radius: var(--r-sm); }
.msg:hover { background: var(--hover); }
.msg.cont { padding-top: 1px; }
.msg.cont .msg-av { visibility: hidden; height: 0; }
.msg.cont .msg-head { display: none; }
.msg-av img.av { border-radius: 9px; }
.msg-main { min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.msg-head .uname { font-size: 13.5px; }
.msg-time { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.msg-text { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--text) 88%, var(--muted)); word-break: break-word; }
.msg.staff .msg-text { color: var(--text); }
.msg.mentioned { background: color-mix(in srgb, var(--money) 9%, transparent); box-shadow: inset 3px 0 0 var(--money); }
.mention { color: var(--accent-2); font-weight: 700; }
.msg-actions { position: absolute; top: 3px; right: 6px; display: none; gap: 2px; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { display: flex; }
.msg-actions .btn { height: 26px; width: 26px; padding: 0; border-radius: 7px; background: var(--surface-3); border-color: transparent; color: var(--muted); }
.msg-actions .btn:hover { color: var(--down); }
.msg.system { display: block; margin: 4px 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-2); font-size: 13px; }
.msg.removing { opacity: 0; transform: translateX(8px); transition: opacity 0.18s, transform 0.18s; }
.chat-new { position: sticky; bottom: 6px; margin: 0 auto; display: block; }
.chat-foot { position: relative; padding: 10px 12px 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }

/* The list that comes up when you type /. */
.cmd-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  animation: pop-in 0.12s ease-out;
}
.cmd-group { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cmd-row { padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.cmd-row.on { background: var(--surface-2); }
.cmd-using { cursor: default; }
.cmd-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.cmd-name { font-weight: 800; color: var(--text); font-size: 13px; }
.cmd-arg { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--muted); }
.cmd-arg.on { background: var(--accent-soft); color: var(--accent-2); }
.cmd-desc { font-size: 12px; color: var(--faint); margin-top: 2px; }
.chat-compose { display: flex; gap: 8px; }
.chat-compose .input { height: 42px; border-radius: 999px; padding: 0 16px; }
.chat-compose .btn { height: 42px; width: 42px; padding: 0; border-radius: 50%; }
.chat-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); padding-left: 6px; min-height: 16px; }

/* ---------- the front page post ---------- */

.front-post { margin-bottom: 18px; }
.post-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.post-body { position: relative; }
.post-body.folded { max-height: 420px; overflow: hidden; }
.post-body.folded::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}
.post-more { margin-top: 8px; }
.post-date { margin-top: 10px; }
.modal-wide:has(.post-edit-wrap) { width: min(1180px, 96vw); max-width: none; }
.post-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0; }
.post-editor {
  height: min(62vh, 640px);
  resize: vertical;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.post-preview {
  height: min(62vh, 640px);
  overflow-y: auto;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.post-restored { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); }
@media (max-width: 760px) {
  .post-edit { grid-template-columns: minmax(0, 1fr); }
  .post-editor, .post-preview { height: 40vh; }
}

/* Markdown, as the post draws it. */
.md { font-size: 14.5px; line-height: 1.65; color: color-mix(in srgb, var(--text) 90%, var(--muted)); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { color: var(--text); line-height: 1.25; margin: 1.3em 0 0.5em; }
.md h1 { font-size: 28px; font-weight: 850; }
.md h2 { font-size: 22px; font-weight: 800; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.md h3 { font-size: 18px; font-weight: 750; }
.md h4 { font-size: 16px; font-weight: 700; }
.md h5 { font-size: 14.5px; font-weight: 700; }
.md h6 { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.md p { margin: 0 0 0.9em; }
.md ul, .md ol { margin: 0 0 0.9em; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li > ul, .md li > ol { margin: 4px 0 0; }
.md li.md-task { list-style: none; margin-left: -20px; display: flex; gap: 8px; align-items: baseline; }
.md-box { flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line); display: inline-grid; place-items: center; transform: translateY(2px); }
.md-box.done { background: var(--up); border-color: var(--up); color: var(--bg); }
.md a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.md strong { color: var(--text); font-weight: 750; }
.md del { color: var(--faint); }
.md code { font-family: var(--mono); font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.md pre { margin: 0 0 1em; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 70%, var(--surface)); border: 1px solid var(--line-soft); overflow-x: auto; }
.md pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.55; white-space: pre; }
.md blockquote { margin: 0 0 1em; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 8px 8px 0; }
.md blockquote p:last-child { margin-bottom: 0.4em; }
.md hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.4em 0; }
.md-table { overflow-x: auto; margin: 0 0 1em; }
.md table { border-collapse: collapse; font-size: 13.5px; min-width: 50%; }
.md th, .md td { padding: 7px 12px; border: 1px solid var(--line-soft); text-align: left; }
.md th { background: var(--surface-2); color: var(--text); font-weight: 700; }

/* The three sides of the chat, and the strip under them. */
.chat-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 10px 0; }
.chat-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.chat-mode:hover { color: var(--text); background: var(--hover); }
.chat-mode.on { color: var(--text); background: var(--surface-2); border-color: var(--line-soft); }
.chat-mode .tab-count { position: absolute; top: -4px; right: 2px; }
.tab-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--down);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.chat-tab .tab-count { margin-left: 2px; }
.chat-sub { min-height: 0; }
.chat-subbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; min-width: 0; }
.chat-subbar .user-picker { flex: 1; min-width: 0; }
.chat-subbar .seg { flex: 1; }
.chat-subtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-explain { font-size: 12px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.chat-explain .icon { color: var(--accent-2); flex: none; }
.ticket-bar { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.ticket-bar > .tiny { padding: 0 12px; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.chip-hot { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.staff-chip { height: 18px; padding: 0 6px; font-size: 10px; color: var(--accent-2); }
.chat-note { padding: 24px 12px; }

/* A conversation, or a ticket in the queue. */
.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-row:hover { background: var(--hover); }
.chat-row-main { flex: 1; min-width: 0; }
.chat-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.chat-row-top .chip { height: 18px; padding: 0 7px; font-size: 10.5px; }
.chat-row-last { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row.unread .chat-row-last { color: var(--text); }

/* Lines only you see, from a command. */
.msg.system.local { background: var(--surface-2); color: var(--muted); }
.msg.system.error { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.msg.system.help { display: flex; flex-direction: column; gap: 7px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.help-row { display: flex; flex-direction: column; gap: 1px; }
.help-row code { font-family: var(--mono); font-size: 11.5px; color: var(--accent-2); }
.msg.system.staff-only { background: transparent; color: var(--faint); font-size: 12px; padding: 2px 10px; }

/* The count on the chat button says where the newest message is, for a
   moment, then goes back to being a number. */
.pill-count.peek { top: calc(100% + 4px); right: 50%; transform: translateX(50%); height: 20px; padding: 0 8px; font-size: 11px; white-space: nowrap; z-index: 30; animation: peek-in 0.2s ease-out; }
@keyframes peek-in { from { opacity: 0; transform: translate(50%, -4px); } }

/* ================================================================
   pages
   ================================================================ */

/* rewards */
.reward-card { display: flex; flex-direction: column; gap: 12px; }
.reward-card .rw-top { display: flex; align-items: center; gap: 12px; }
.reward-card .rw-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); flex: none; }
.reward-card.ready .rw-icon { background: var(--up-soft); color: var(--up); }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.task + .task { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.task .t-title { font-weight: 700; }
.task .t-prog { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* bank */
.bank-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cap-meter .bar { height: 10px; }

/* settings */
.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--line-soft); }
.setting-row .sr-text { flex: 1; min-width: 0; }
.setting-row .sr-title { font-weight: 650; }
.setting-row .sr-note { font-size: 12.5px; color: var(--faint); }
/* A control too wide to sit beside its text goes underneath it, instead of
   squeezing the text into a column one word wide. */
.setting-row.stack { flex-direction: column; align-items: stretch; gap: 8px; }

/* avatar editor */
.avatar-editor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.ae-preview { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ae-preview img.av { width: 200px; height: 200px; border-radius: 52px; box-shadow: 0 20px 50px -24px #000; }
.ae-slot + .ae-slot { margin-top: 16px; }
.ae-slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ae-slot-head .label { text-transform: capitalize; }
.ae-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.ae-opt {
  --rar: var(--line);
  position: relative;
  padding: 3px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.12s var(--ease), border-color 0.12s;
}
.ae-opt:hover { transform: translateY(-2px); }
.ae-opt img.av { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.ae-opt.on { border-color: var(--accent); }
/* A locked part is a shop window, so it has to stay legible. Draining the
   colour out of it turned every one of these into the same grey blob and you
   could not tell a visor from a pair of shades without reading the tooltip.
   A light scrim and the badge say "locked" on their own, and the scrim goes
   on hover so you can see exactly what you would be buying. */
.ae-opt.locked img.av { filter: saturate(0.8) brightness(0.88); }
.ae-opt.locked::after {
  content: ''; position: absolute; inset: 3px; border-radius: 12px;
  background: rgba(8, 14, 28, 0.28); pointer-events: none;
  transition: opacity 0.12s var(--ease);
}
.ae-opt.locked:hover img.av { filter: none; }
.ae-opt.locked:hover::after { opacity: 0; }
.ae-opt .lock { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--rar) 85%, #000); color: #fff; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.ae-opt .lock .icon { width: 12px; height: 12px; }
.ae-swatch { aspect-ratio: 1; border-radius: 12px; }
.hue-range { height: 16px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, #ff4d4d, #ffb14d, #f5ff4d, #4dff88, #4dfff6, #4d8dff, #b44dff, #ff4dd8, #ff4d4d); outline: none; }
.hue-range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); cursor: pointer; }

/* skin picker */
.skin-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); }
.skin-swatch { height: 86px; border-radius: var(--r-md); display: grid; grid-template-columns: 1fr auto; padding: 10px; gap: 8px; align-items: end; }
.skin-swatch .sw-dots { display: flex; gap: 4px; }
.skin-swatch .sw-dots i { width: 14px; height: 14px; border-radius: 5px; }

/* trades and the user picker */
.user-picker { position: relative; }
.up-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 290px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.up-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.up-row:hover, .up-row.active { background: var(--accent-soft); }
.up-row .up-sub { margin-left: auto; font-size: 12px; color: var(--faint); }
.up-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.trade-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.trade-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; }
.trade-side .ts-head { display: flex; align-items: center; gap: 8px; font-weight: 750; }
.trade-items { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.trade-sum { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); font-variant-numeric: tabular-nums; }
.fair-meter { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--down), var(--warn) 42%, var(--up) 50%, var(--warn) 58%, var(--down)); }
.fair-meter i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--bg); transform: translate(-50%, -50%); transition: left 0.25s var(--ease); }

/* store / collection */
.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.filters .row { gap: 8px; }
.kind-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* guide */
.guide-row + .guide-row { border-top: 1px solid var(--line-soft); }
.guide-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: none; border: 0; color: var(--text); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.guide-head:hover { background: var(--hover); }
.guide-head .icon { transition: transform 0.2s var(--ease); color: var(--faint); }
.guide-head.on .icon { transform: rotate(180deg); color: var(--accent-2); }
.guide-body { padding: 0 18px 16px; }
.guide-body p { margin: 0 0 9px; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 70ch; }

/* auth dialog */
.authbox { display: flex; flex-direction: column; gap: 12px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-brand img { width: 34px; height: 34px; }
.auth-field { display: grid; gap: 6px; }
.auth-field > span { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 64px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.auth-copy { font-size: 12.5px; color: var(--faint); margin: 0; }

/* shortcuts sheet */
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; }

/* ================================================================
   motion levels
   ================================================================ */

html[data-motion="lite"] .reel.drifting,
html[data-motion="lite"] .ctag.shimmer::after,
html[data-motion="lite"] .reveal-rays,
html[data-motion="lite"] .skeleton,
html[data-motion="lite"] .pulse-dot,
html[data-motion="lite"] .main > .wrap { animation: none; }
html[data-motion="lite"] .confetti-layer { display: none; }
html[data-motion="lite"] .item:hover,
html[data-motion="lite"] .game-card:hover,
html[data-motion="lite"] .crate-tile:hover { transform: none; }

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

/* ================================================================
   responsive

   1180  chat becomes a drawer
    900  the rail becomes a drawer and games go to one column
    620  phone: one column everywhere, no ticker
   ================================================================ */

@media (max-width: 1180px) {
  .chatpanel {
    position: fixed;
    top: var(--top);
    right: 0;
    bottom: 0;
    width: min(var(--chat), 88vw);
    z-index: 70;
    transform: translateX(100%);
    transition: transform 0.22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.chat-open .chatpanel { transform: none; }
  body.chat-open .scrim { display: block; }
  body.chat-hidden .chatpanel { display: flex; }
  .lobby-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  body.rail-collapsed #app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed;
    top: var(--top);
    bottom: 0;
    left: 0;
    width: min(260px, 84vw);
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.rail-open .rail { transform: none; }
  body.rail-open .scrim { display: block; }
  .main { padding: 16px 14px calc(70px + env(safe-area-inset-bottom)); }
  .game { grid-template-columns: minmax(0, 1fr); }
  .betpanel { position: static; }
  .g3, .g4, .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statrow > *:nth-child(3) { border-left: 0; }
  .statrow > *:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .avatar-editor { grid-template-columns: minmax(0, 1fr); }
  .ae-preview { position: static; }
  .trade-cols { grid-template-columns: minmax(0, 1fr); }
  .bank-hero { grid-template-columns: minmax(0, 1fr); }
  .game-card.feature { grid-column: auto; }
}

@media (max-width: 620px) {
  :root { --top: 56px; }
  .ticker { display: none; }
  .brand-name { display: none; }
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar-right { margin-left: auto; gap: 4px; }
  .balance { height: 38px; padding: 0 12px 0 6px; font-size: 14px; }
  .me-chip span { display: none; }
  .me-chip { padding: 0 4px; }
  .grid.g2, .grid.g3, .grid.g4, .quick { grid-template-columns: minmax(0, 1fr); }
  .gauto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .card { padding: 14px; }
  .stage { padding: 14px; min-height: 0; border-radius: var(--r-lg); }
  .modal { padding: 18px; border-radius: var(--r-lg); }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
  .mem-grid { gap: 7px; }
  .roul-picks { grid-template-columns: minmax(0, 1fr); }
  .mines-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three short readouts fit side by side, and stacked they pushed the bet
     button off the bottom of the screen. */
  .grid.g3.dice-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; }
  .dice-track { margin-top: 20px; }
  .dice-fields .card { padding: 10px; }
  .dice-fields .label { font-size: 11px; }
  /* Stacked, the 2nd, 1st, 3rd podium read as a list starting at second. */
  .grid.g3.podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .podium > .card { padding: 12px 6px; }
  .podium .uname { max-width: 100%; }
  .podium .uname .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reel-item { width: 96px; height: 112px; }
  .page-head h1 { font-size: 21px; }
  .hero h1 { font-size: 22px; }
}

@media (pointer: coarse) {
  .navitem { height: 46px; }
  .msg-actions { display: flex; }
  .seg button { height: 38px; }
}


/* ================================================================
   additions: menus, sliders, previews
   ================================================================ */

.popover {
  position: fixed;
  z-index: 100;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.16s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } }
.popover-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-weight: 560;
  text-align: left;
  cursor: pointer;
}
.popover-item:hover { background: var(--hover); }
.popover-item .icon { color: var(--muted); }
.popover-item kbd { margin-left: auto; }
.popover-item.danger, .popover-item.danger .icon { color: var(--down); }
.popover-sep { height: 1px; margin: 6px 4px; background: var(--line-soft); }

.art-skin .mini-stage { background: var(--surface); }
.art-skin .mini-foot { display: flex; align-items: center; gap: 8px; }
.art-skin .mini-bar { flex: 1; }
.sw-dots { display: flex; gap: 4px; }
.sw-dots i { width: 12px; height: 12px; border-radius: 4px; display: block; }

.dice-slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 2;
}
.dice-slider::-webkit-slider-runnable-track { background: transparent; height: 32px; }
.dice-slider::-moz-range-track { background: transparent; }
.dice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 9px;
  background: var(--text);
  border: 4px solid var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.dice-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 9px;
  background: var(--text);
  border: 4px solid var(--accent);
}
.dice-marker { z-index: 1; pointer-events: none; }
.dice-bubble { z-index: 3; pointer-events: none; }

.flip-coin span { pointer-events: none; }
.crash-countdown i { width: 100%; }
.my-bet .btn { flex: none; }
.my-bet > div:nth-child(2) { flex: 1; }
.my-bet .mb-value:empty { display: none; }
.hero-level { width: 300px; }
.hero-sub .ulvl { margin-right: 2px; }
.game-card .gc-ticks .hchip { padding: 0 8px; }
.drop .pull { flex: none; }
.lane-cell .pull { width: 44px; height: 44px; }
.chat-list { display: flex; flex-direction: column; }
.betpanel.placing .btn-lg { transform: scale(0.99); }
.result-card .coin.lg.up { color: var(--up); font-size: 30px; }
.result-card .coin.lg.up img { width: 30px; height: 30px; }
.arcade-hud .arcade-timer { flex: 1; min-width: 140px; }
.mem-card .back .icon { opacity: 0.5; }
.mem-card .face .icon { width: 46%; height: 46%; color: var(--accent-2); }
.mem-card.matched .face .icon { color: var(--up); }
.mem-card:disabled { cursor: default; }
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
.item .own { display: flex; gap: 4px; }
.pull.sel { outline: 3px solid var(--accent); outline-offset: -1px; }
.board-row .uname { min-width: 0; }
.quick-card:hover .qc-icon { transform: scale(1.05); }
.qc-icon { transition: transform 0.15s var(--ease); }

/* Old variable names the control room still reads. */
:root {
  --bg-grain: #0a1122;
  --brand: var(--accent);
  --brand-dim: color-mix(in srgb, var(--accent) 45%, var(--surface-2));
  --info: var(--accent);
  --gold: var(--money);
}

@media (max-width: 900px) {
  .hero-level { width: auto; }
}
@media (max-width: 620px) {
  .hilo-choice .btn b { font-size: 13px; }
  .roul-slot { width: 50px; height: 66px; font-size: 16px; }
  .crate-tile .crate-blurb { min-height: 0; }
}

/* The control room's switches are a checkbox inside a label. */
label.switch { display: inline-block; }
label.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
label.switch .track { position: absolute; inset: 0; border-radius: 999px; transition: background-color 0.18s var(--ease); }
label.switch .track::after { content: ""; position: absolute; top: 50%; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transform: translateY(-50%); transition: transform 0.18s var(--ease), background-color 0.18s var(--ease); }
label.switch input:checked + .track { background: var(--grad); }
label.switch input:checked + .track::after { transform: translate(18px, -50%); background: #fff; }
label.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

.crash-m.idle { font-size: clamp(30px, 5vw, 48px); letter-spacing: -0.02em; }

/* Toasts sit beside the chat rather than on top of its send box. */
@media (min-width: 1181px) {
  body:not(.chat-hidden) .toasts { right: calc(var(--chat) + 18px); }
}

/* Headings: heavy enough to lead, not so heavy they turn into blocks. */
.page-head h1, .hero h1 { font-weight: 750; }
.game-card .gc-name, .crate-tile .crate-name, .arcade-card .ac-name, .reveal-name, .modal h2 { font-weight: 750; }
.section-head h2 { font-weight: 750; }

.roul-pick .rp-head { flex-wrap: wrap; }
.roul-pick .rp-name { flex: 1; min-width: 0; }
.roul-pick .rp-mult { margin-left: 0; font-size: 20px; color: var(--text); flex-basis: 100%; letter-spacing: -0.02em; }
.avatar-editor .tabs { flex-wrap: wrap; }

/* On narrow screens the game comes first, so the round you are betting on is
   on screen with the button right under it. */
@media (max-width: 900px) {
  .game > .stage { order: -1; }
}
@media (max-width: 620px) {
  .hero-level { display: none; }
  .hero { padding: 18px; }
  .hero-who img.av { width: 60px !important; height: 60px !important; }
  .crash-canvas { height: 220px; }
}
/* Keyboard hints mean nothing on a touch screen. */
@media (pointer: coarse) {
  .bet-foot .tiny.faint, .chat-hint, .keys-only, .btn kbd { display: none; }
}
.roul-pick .rp-swatch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
@media (max-width: 620px) {
  .roul-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .roul-pick { padding: 10px; gap: 4px; }
  .roul-pick .rp-name { font-size: 12.5px; }
  .roul-pick .rp-mult { font-size: 16px; }
  .roul-pick .rp-pool { font-size: 11px; }
  .roul-pick .rp-swatch { width: 16px; height: 16px; border-radius: 5px; }
}
.arcade-play .mem-grid { max-width: 500px; margin: 0 auto; }
.arcade-play .page-head .btn-icon { align-self: flex-start; margin-top: 2px; }

/* ---------- wave two: mythic skins ----------

   A theme may carry a texture, which is a repeating background painted over
   the stage and the crate reel, and a mythic theme may carry an fx layer,
   which is a canvas of its own plus a flash that reaches the whole room. */

.theme-fx { mix-blend-mode: screen; }
html[data-motion="lite"] .theme-fx { display: none; }

.stage::after,
.reel-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--room-texture, none);
  opacity: 0.6;
}

/* The one part of an effect that escapes the canvas. Brightness is cheap to
   animate and it is over inside a third of a second. */
.room[data-flash] { will-change: filter; }
.room[data-flash="tempest"] { animation: flash-storm 0.26s steps(1, end); }
@keyframes flash-storm {
  0% { filter: brightness(1.85) contrast(1.06); }
  18% { filter: brightness(1); }
  34% { filter: brightness(1.5); }
  52% { filter: brightness(1); }
  100% { filter: brightness(1); }
}
.room[data-flash="phoenix"] { animation: flash-rebirth 0.7s var(--ease); }
@keyframes flash-rebirth {
  0% { filter: brightness(1); }
  22% { filter: brightness(1.28) saturate(1.3); }
  100% { filter: brightness(1); }
}
html[data-motion="lite"] .room[data-flash] { animation: none; }

/* A mythic item is marked wherever it is drawn, not only in the reveal.

   It glows up from underneath and the glow breathes. This used to be a cone
   of light spinning behind the art, which looked like a loading spinner and
   fought with whatever was drawn on top of it. Opacity and scale only, so a
   page with forty of these stays on the compositor. */
.item-art.mythic, .reel-item.mythic .reel-art { position: relative; }
.item-art.mythic::before, .reel-item.mythic .reel-art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(75% 60% at 50% 105%, color-mix(in srgb, var(--rar) 42%, transparent), transparent 72%),
    radial-gradient(38% 26% at 50% 100%, color-mix(in srgb, var(--rar) 55%, #fff 12%), transparent 80%);
  opacity: 0.6;
  transform-origin: 50% 100%;
  animation: mythic-breathe 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mythic-breathe { 50% { opacity: 1; transform: scale(1.08); } }
.item:nth-child(3n + 2) .item-art.mythic::before { animation-delay: -1.3s; }
.item:nth-child(3n) .item-art.mythic::before { animation-delay: -2.5s; }
html[data-motion="lite"] .item-art.mythic::before,
html[data-motion="lite"] .reel-item.mythic .reel-art::before { animation: none; opacity: 0.85; }

.fx-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar, var(--accent));
  background: color-mix(in srgb, var(--rar, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar, var(--accent)) 40%, transparent);
}

/* ---------- wave two: a reel per crate ----------

   Opening five crates spins five reels, not one. They share a height budget
   so the stack takes about as much room as a single reel used to. */

.reel-stack { display: grid; gap: 8px; }
.reel-stack .reel-window { height: var(--reel-h, 150px); }
.reel-stack .reel-item { width: var(--reel-w, 112px); height: calc(var(--reel-h, 150px) - 26px); }
.reel-stack .reel-item .reel-art { height: var(--reel-art, 64px); }
.reel-stack .reel-item .art-part-img { width: var(--reel-art, 64px); height: var(--reel-art, 64px); }
.reel-stack[data-n="2"] { --reel-h: 118px; --reel-w: 96px; --reel-art: 48px; }
.reel-stack[data-n="3"] { --reel-h: 104px; --reel-w: 88px; --reel-art: 40px; }
.reel-stack[data-n="5"] { --reel-h: 86px; --reel-w: 78px; --reel-art: 32px; }
.reel-stack[data-n="3"] .reel-item .tiny,
.reel-stack[data-n="5"] .reel-item .tiny { font-size: 10.5px; }
.reel-stack .reel-window.done { border-color: color-mix(in srgb, var(--rar, var(--accent)) 55%, var(--line-soft)); }
.reel-row { position: relative; }
.reel-row .reel-tag {
  position: absolute;
  top: 5px;
  left: 8px;
  z-index: 6;
  font-size: 10px;
  font-weight: 800;
  color: var(--faint);
  pointer-events: none;
}
@media (max-width: 620px) {
  .reel-stack[data-n="2"] { --reel-h: 104px; --reel-w: 84px; --reel-art: 40px; }
  .reel-stack[data-n="3"] { --reel-h: 92px; --reel-w: 76px; --reel-art: 34px; }
  .reel-stack[data-n="5"] { --reel-h: 78px; --reel-w: 68px; --reel-art: 28px; }
}

/* The tile the marker stops on. It never had a style of its own, so a reel
   used to finish with nothing to say which tile it had picked. */
.reel-item.landed {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 38%, var(--surface)), var(--surface));
  border-color: var(--rar);
  box-shadow: 0 0 0 1px var(--rar), 0 0 26px -6px var(--rar);
}

/* A mythic skin's preview shows that it moves, without running the real
   effect in a tile that might be one of forty on a page: every few seconds a
   glint in the skin's own colour runs across the glass. Staggered, so a row
   of them never flashes in step. */
.art-skin .mini-stage.fx { position: relative; overflow: hidden; }
.art-skin .mini-stage.fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--accent-2) 24%, transparent) 50%, transparent 62%);
  transform: translateX(-110%);
  animation: skin-glint 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes skin-glint { 0%, 64% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.item:nth-child(3n + 2) .art-skin .mini-stage.fx::after { animation-delay: -2s; }
.item:nth-child(3n) .art-skin .mini-stage.fx::after { animation-delay: -4s; }
html[data-motion="lite"] .art-skin .mini-stage.fx::after { animation: none; display: none; }

/* ---------- wave three ---------- */

/* Zozfilical. One tier above mythic and it has to look like it from across
   the room: a moving prismatic border and a slow drifting sheen. */
.fx-cosmic .item-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
}
.fx-cosmic {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #63f5ff, #ffe9a8, #5cffc8, #63f5ff, #ffe9a8) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: cosmic-drift 9s linear infinite;
  box-shadow: 0 0 0 1px rgba(99, 245, 255, 0.25), 0 16px 44px -22px #63f5ff;
}
@keyframes cosmic-drift { to { background-position: 0 0, 300% 0; } }
html[data-motion="lite"] .fx-cosmic { animation: none; }

/* The redacted row. Deliberately plain: a question mark and nothing to read
   into. */
.art-secret {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--rar) 10%, transparent) 0 8px, transparent 8px 16px),
    color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--rar) 50%, transparent);
}
.art-secret > span {
  font-size: 34px;
  font-weight: 900;
  color: var(--rar);
  opacity: 0.85;
  text-shadow: 0 0 18px var(--rar);
}

/* The galaxy crate. A sky rather than a painted box. */
.crate-box.galaxy .body,
.crate-box.galaxy .lid {
  background:
    radial-gradient(65% 55% at 28% 28%, rgba(99, 245, 255, 0.95), rgba(99, 245, 255, 0.25) 45%, transparent 72%),
    radial-gradient(55% 50% at 78% 68%, rgba(255, 196, 120, 0.85), rgba(255, 150, 90, 0.3) 45%, transparent 72%),
    radial-gradient(70% 60% at 50% 105%, rgba(92, 255, 200, 0.5), transparent 68%),
    radial-gradient(40% 40% at 62% 20%, rgba(255, 255, 255, 0.55), transparent 65%),
    linear-gradient(160deg, #16215c, #060a24 65%);
}
.crate-box.galaxy .body { border-radius: 10px; }
.crate-box.galaxy .band {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(99, 245, 255, 0.5));
  opacity: 0.6;
}
.crate-box.galaxy .lock { background: #eafcff; box-shadow: 0 0 14px #63f5ff, 0 0 0 2px rgba(0, 0, 0, 0.25); }
.crate-box.galaxy .stars {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 68% 14%, #fff, transparent),
    radial-gradient(1px 1px at 34% 62%, #fff, transparent), radial-gradient(1.4px 1.4px at 82% 48%, #fff, transparent),
    radial-gradient(1px 1px at 52% 84%, #fff, transparent), radial-gradient(1px 1px at 22% 78%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 91% 80%, #fff, transparent), radial-gradient(1px 1px at 45% 34%, #fff, transparent);
  animation: star-breathe 5s ease-in-out infinite;
}
@keyframes star-breathe { 50% { opacity: 0.45; } }
html[data-motion="lite"] .crate-box.galaxy .stars { animation: none; }

/* The ten second spin. The window itself reacts, so the last seconds feel
   like the machine is straining rather than just moving slowly. */
.reel-window.dramatic { border-color: color-mix(in srgb, var(--rar, var(--accent)) 45%, var(--line-soft)); }
.reel-window.dramatic::before { background: linear-gradient(90deg, var(--bg), transparent 12%, transparent 88%, var(--bg)); }
.reel-window.creeping {
  box-shadow: inset 0 0 60px -14px var(--rar, var(--accent));
  animation: reel-strain 0.9s ease-in-out infinite;
}
@keyframes reel-strain {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
html[data-motion="lite"] .reel-window.creeping { animation: none; }

/* Origin is the only thing allowed to touch the room's own hue. */
.room[data-flash="origin"] { animation: flash-origin 0.9s var(--ease); }
@keyframes flash-origin {
  0% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
  30% { filter: brightness(1.22) saturate(1.5) hue-rotate(40deg); }
  65% { filter: brightness(1.08) saturate(1.2) hue-rotate(-30deg); }
  100% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
}
.room[data-fx="origin"] .stage { animation: origin-breathe 24s linear infinite; }
@keyframes origin-breathe { to { filter: hue-rotate(360deg); } }
html[data-motion="lite"] .room[data-fx="origin"] .stage { animation: none; }

/* ---------- wave five: three more mythics, ambient motion, more boxes ---------- */

.room[data-flash="eclipse"] { animation: flash-eclipse 0.6s var(--ease); }
@keyframes flash-eclipse {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.6) contrast(1.08); }
  100% { filter: brightness(1); }
}
.room[data-flash="glitch"] { animation: flash-glitch 0.42s steps(1, end); }
@keyframes flash-glitch {
  0% { transform: translateX(-6px); filter: hue-rotate(60deg) saturate(1.6); }
  20% { transform: translateX(5px) skewX(-2deg); filter: hue-rotate(-40deg); }
  40% { transform: translateX(-3px); filter: contrast(1.4); }
  60% { transform: translateX(2px) skewX(1deg); filter: hue-rotate(20deg); }
  80%, 100% { transform: none; filter: none; }
}
.room[data-flash="bloom"] { animation: flash-bloom 0.8s var(--ease); }
@keyframes flash-bloom { 30% { filter: saturate(1.5) brightness(1.1); } }

/* Ambient motion. One extra element inside the stage carrying the theme's
   own backdrop or accent, moved with transform and opacity only. */
.stage .ambient {
  position: absolute;
  inset: -12%;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ambient[data-ambient="drift"] {
  background: var(--room-backdrop);
  animation: ambient-drift 38s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  from { transform: translate(-3%, -2%) scale(1.02); }
  to { transform: translate(3%, 2%) scale(1.06); }
}
.ambient[data-ambient="pulse"] {
  background: radial-gradient(55% 55% at 50% 50%, var(--glow), transparent 70%);
  animation: ambient-pulse 5.5s ease-in-out infinite;
}
@keyframes ambient-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.85; transform: scale(1.04); }
}
.ambient[data-ambient="sway"] {
  background: var(--room-backdrop);
  animation: ambient-sway 14s ease-in-out infinite alternate;
}
@keyframes ambient-sway {
  from { transform: rotate(-1.4deg) translateX(-12px); }
  to { transform: rotate(1.4deg) translateX(12px); }
}
.ambient[data-ambient="scan"] {
  inset: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent);
  animation: ambient-scan 7s linear infinite;
}
@keyframes ambient-scan {
  from { transform: translateY(-120%); }
  to { transform: translateY(560%); }
}
.stage[data-ambient="hue"] { animation: origin-breathe 40s linear infinite; }
html[data-motion="lite"] .ambient,
html[data-motion="lite"] .stage[data-ambient="hue"] { display: none; animation: none; }

/* More box shapes. Each is still drawn from the crate's two colours. */
.crate-box.tin .lid { height: 14px; border-radius: 4px; background: linear-gradient(180deg, #d5dbe3, #9aa4b1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.crate-box.tin .body { top: 12px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, var(--accent-a), color-mix(in srgb, var(--accent-a) 55%, #000)); }
.crate-box.tin .band { display: none; }
.crate-box.tin .lock { top: 16px; width: 26px; height: 8px; border-radius: 3px; background: #c9d1da; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }

.crate-box.neon .body, .crate-box.neon .lid { background: #0b0713; }
.crate-box.neon .body { box-shadow: inset 0 0 0 2px var(--accent-a), 0 0 18px -2px var(--accent-a), inset 0 -5px 0 rgba(0, 0, 0, 0.2); }
.crate-box.neon .lid { box-shadow: inset 0 0 0 2px var(--accent-b), 0 0 18px -2px var(--accent-b); }
.crate-box.neon .band { background: linear-gradient(180deg, var(--accent-b), var(--accent-a)); box-shadow: 0 0 10px var(--accent-a); opacity: 0.9; }
.crate-box.neon .lock { background: #fff; box-shadow: 0 0 12px var(--accent-b), 0 0 0 2px rgba(0, 0, 0, 0.3); }

.crate-box.case .lid { height: 12px; left: 26px; right: 26px; top: -7px; border-radius: 7px 7px 0 0; background: transparent; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent-b) 70%, #000); }
.crate-box.case .body { top: 4px; border-radius: 8px; background: linear-gradient(180deg, var(--accent-a), color-mix(in srgb, var(--accent-a) 65%, #000)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-b) 60%, transparent), inset 0 -5px 0 rgba(0, 0, 0, 0.2); }
.crate-box.case .band { top: 4px; width: 10px; background: linear-gradient(180deg, var(--accent-b), color-mix(in srgb, var(--accent-b) 60%, #000)); }
.crate-box.case .lock { top: 30px; width: 14px; height: 12px; border-radius: 3px; background: var(--accent-b); }

.crate-box.reliquary .lid { border-radius: 14px 14px 4px 4px; height: 26px; background: linear-gradient(180deg, #2a2230, #120d18); box-shadow: inset 0 0 0 2px var(--accent-b), inset 0 -3px 0 rgba(0, 0, 0, 0.4); }
.crate-box.reliquary .body { background: linear-gradient(180deg, #1c1622, #0a070d); box-shadow: inset 0 0 0 2px var(--accent-b), inset 0 -5px 0 rgba(0, 0, 0, 0.35); }
.crate-box.reliquary .band { width: 6px; background: var(--accent-b); opacity: 0.7; }
.crate-box.reliquary .lock { top: 26px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--accent-a) 45%, color-mix(in srgb, var(--accent-a) 40%, #000)); box-shadow: 0 0 14px var(--accent-a), 0 0 0 2px rgba(0, 0, 0, 0.3); }

.crate-box.wardrobe .lid { height: 8px; left: -4px; right: -4px; border-radius: 4px 4px 0 0; }
.crate-box.wardrobe .body { top: 6px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, transparent 0 48%, rgba(0, 0, 0, 0.4) 48% 52%, transparent 52%), linear-gradient(180deg, var(--accent-a), color-mix(in srgb, var(--accent-a) 60%, #000)); }
.crate-box.wardrobe .band { width: 2px; background: color-mix(in srgb, var(--accent-a) 40%, #000); box-shadow: none; }
.crate-box.wardrobe .lock { top: 34px; width: 22px; height: 6px; border-radius: 3px; background: var(--accent-b); }

/* ---------- the pop-up admin panel ---------- */

.popup-panel {
  position: fixed;
  z-index: 300;
  width: 330px;
  max-width: calc(100vw - 24px);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.pp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
  font-size: 13px;
}
.pp-head:active { cursor: grabbing; }
.pp-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pp-x:hover { color: var(--text); }
.pp-body { padding: 12px; max-height: min(60vh, 520px); overflow-y: auto; }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-stats > div { background: var(--surface-2); border-radius: var(--r-sm); padding: 7px 9px; display: grid; gap: 1px; }
.pp-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pp-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 14px 0 6px;
}
.pp-armed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  margin-bottom: 8px;
}
.pp-modes { display: grid; gap: 6px; }
.pp-modes .btn { width: 100%; }
.pp-log { display: grid; gap: 3px; }
.pp-log-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  padding: 5px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
}
.pp-log-row .up { color: var(--up); }
.pp-log-row .down { color: var(--down); }
@media (max-width: 620px) {
  .popup-panel { left: 12px !important; right: 12px; width: auto; }
}

/* ---------- typed crate counts and the grid ---------- */

.count-box { display: grid; gap: 6px; }
.count-input { width: 96px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 750; }
.count-input::-webkit-outer-spin-button, .count-input::-webkit-inner-spin-button { opacity: 1; height: 26px; }
.count-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.count-chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); }
.count-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.count-chip:disabled { opacity: 0.5; cursor: default; }

/* One cell per crate. The cell size is written by the client so that however
   many are opened, the whole lot fits on the screen at once. */
.reel-grid {
  display: grid;
  /* Fixed, not 1fr: the reels have to be exactly the size the client
     computed, because the scroll distance is measured in whole tiles. */
  grid-template-columns: repeat(auto-fill, var(--cell, 40px));
  gap: var(--gap, 4px);
  justify-content: center;
  align-content: start;
  padding: 10px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 1px solid var(--line-soft);
  max-height: 60vh;
  overflow: hidden;
}
/* A real reel: a column of tiles that scrolls and stops on the one you won.
   The window shows exactly one tile, so however small they get, what you see
   is a spinner coming to rest rather than a colour changing. */
.mini-reel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.reel-grid[data-size="lg"] .mini-reel { border-radius: 10px; }
.reel-grid[data-size="md"] .mini-reel { border-radius: 6px; }
.mini-strip { display: flex; flex-direction: column; will-change: transform; }
.mtile {
  --rar: var(--line);
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--rar) 55%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 70%, transparent);
}
.mtile-art { width: 76%; height: 76%; display: grid; place-items: center; }
.mtile-art .art-part-img { width: 100%; height: 100%; border-radius: 8px; }
.reel-grid[data-size="sm"] .mtile-art { display: none; }
/* The line that says where the reel stops. */
.mini-mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-2);
  opacity: 0.35;
  pointer-events: none;
}
.mini-reel.done { box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 12px -4px var(--accent-2); }
.mini-reel.done .mini-mark { opacity: 0.9; }
.mtile.win { position: relative; z-index: 1; }

/* The summary that replaces a wall of cards on a big open. */
.result-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.result-head > div { display: grid; gap: 2px; }
.result-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.result-head .up { color: var(--up); }
.result-head .down { color: var(--down); }

/* ---------- reading the reel ----------

   The marker used to be a two pixel line and nothing else changed when a
   reel stopped, so it was genuinely hard to tell which tile had been landed
   on. Now the marker is loud, and once a reel is done everything except the
   winning tile steps back. */

.spin-marker > i {
  width: 3px;
  transform: translateX(-1.5px);
  background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 40%, transparent));
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent-2) 70%, transparent);
  border-radius: 2px;
}
.spin-marker::before { border-top-width: 14px; filter: drop-shadow(0 0 6px var(--accent-2)); }
.spin-marker::after { border-bottom-width: 14px; filter: drop-shadow(0 0 6px var(--accent-2)); }

.reel-window.done .reel-item { opacity: 0.32; filter: saturate(0.5); transition: opacity 0.35s var(--ease), filter 0.35s var(--ease); }
.reel-window.done .reel-item.landed { opacity: 1; filter: none; transform: scale(1.04); }
.reel-item.landed { position: relative; z-index: 2; }

/* A round that was set rather than rolled. Shown to everybody in it. */
.rigged-flag {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1a1200;
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  box-shadow: 0 6px 20px -8px rgba(255, 154, 60, 0.9);
  pointer-events: none;
  white-space: nowrap;
}
.crash-screen, .roul-holder { position: relative; }

/* Panel: shared round cheats read differently from private ones. */
.pp-armed.shared { background: color-mix(in srgb, var(--money) 14%, transparent); border-color: color-mix(in srgb, var(--money) 45%, transparent); }
.pp-quick { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.pp-quick .chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); }
.pp-quick .chip:hover { border-color: var(--accent); color: var(--accent); }
.pp-body .select { width: 100%; }

/* ---------- trade item rows ---------- */

.trade-row {
  --rar: var(--line);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex: none;
}
.trade-row:hover { border-color: color-mix(in srgb, var(--rar) 60%, var(--line)); }
.trade-row.sel { border-color: var(--accent); background: var(--accent-soft); }
.tr-art {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--rar) 16%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 45%, transparent);
}
/* Whatever the art is, it is made to fit the thumb rather than spill out of
   it. A chat tag at full size is what used to overlap its neighbours. */
.tr-art > * { max-width: 100%; max-height: 100%; transform: scale(0.72); }
.tr-art .art-part-img { width: 30px; height: 30px; border-radius: 8px; transform: none; }
.tr-art .art-skin { width: 100%; height: 100%; transform: none; }
.tr-name { display: flex; flex-direction: column; min-width: 0; }
.tr-name b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sub { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-val { font-size: 11.5px; color: var(--money); font-variant-numeric: tabular-nums; }
.tr-tick { opacity: 0; color: var(--accent); display: grid; place-items: center; }
.trade-row.sel .tr-tick { opacity: 1; }

/* Origin does not stop at the canvas. The room's panels get a prismatic
   edge that cycles with it, because at this point what is one more layer. */
.room[data-fx="origin"] .card,
.room[data-fx="origin"] .stage {
  border-color: transparent;
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(135deg, #63f5ff, #ffe9a8, #5cffc8, #ff8fd0, #63f5ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 400% 400%;
  animation: origin-edge 12s linear infinite;
}
@keyframes origin-edge { to { background-position: 0 0, 400% 0; } }
.room[data-fx="origin"] .btn-primary { animation: origin-edge 6s linear infinite; background-size: 300% 300%; }
html[data-motion="lite"] .room[data-fx="origin"] .card,
html[data-motion="lite"] .room[data-fx="origin"] .stage,
html[data-motion="lite"] .room[data-fx="origin"] .btn-primary { animation: none; }

/* ---------- wave four fixes ----------

   A chat tag drawn at its natural width inside a small square chip was what
   made the trade panel look like a pile of overlapping cards. Nothing inside
   a chip is allowed out of it, whatever it is. */
.pull { overflow: hidden; }
.pull > * { max-width: 100%; }
.pull .ctag { transform: scale(0.52); transform-origin: center; max-width: none; }
.pull .art-color, .pull .ctag span { white-space: nowrap; }

/* ---------- the record, and appeals ---------- */

.record { display: flex; flex-direction: column; gap: 10px; }
.rec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.rec-head { display: flex; align-items: center; gap: 8px; }
.rec-state {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--faint);
}
.rec-state.active { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.rec-state.overturned { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.rec-form { margin-top: 6px; }
.rec-form textarea { resize: vertical; min-height: 84px; }
.rec-appeal {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
}
.rec-appeal.accepted { border-left-color: var(--up); }
.rec-appeal.denied { border-left-color: var(--down); }