/* 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; }
/* A skin in its details is running: the same layers a stage gets. */
/* The little stage is a window onto the real thing here, not a picture. */
.detail-art.live { height: 200px; cursor: pointer; }
.detail-art.live .mini-stage { position: relative; overflow: hidden; isolation: isolate; }
.detail-art.live .mini-stage > .particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.detail-art.live .mini-stage > .icon { opacity: 0; }
.detail-art.live .mini-stage.fx::after { display: none; }
.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.4s 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(46px) scale(0.9); } }
@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.34s var(--spring);
}
.modal-wide { max-width: 820px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(28px) scale(0.92); } }
.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-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 { display: flex; width: min(320px, 100%); height: 42px; margin: 0 auto; }
/* Pulled up into the fade while the post is folded, so it reads as where
   the text stops and not as something below it. */
.post-body.folded + .post-more { position: relative; z-index: 1; margin-top: -30px; box-shadow: 0 10px 26px -12px var(--glow), 0 0 0 6px var(--surface); }
.post-more .icon { transition: transform 0.25s var(--ease); }
.post-more.open { margin-top: 14px; }
.post-more.open .icon { transform: rotate(180deg); }
.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; }
.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; }
/* 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; }

/* 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; }
  /* Small controls keep their size and get a bigger place to land a thumb.
     The switch and the slider were 24 and 16 pixels tall, which on a phone
     is a coin toss. */
  .btn-sm { height: 36px; }
  .count-chip { min-width: 38px; height: 34px; justify-content: center; }
  .switch::after { content: ""; position: absolute; inset: -10px -6px; }
  input[type="range"] { height: 32px; }
}


/* ================================================================
   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.24s var(--spring);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.92); } }
.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; }
/* A sky comes out of the shader already meant to lie over a dark room, so
   the browser has no blending to do. Nor does anything drawn over one. */
.theme-fx.over { mix-blend-mode: normal; }
.theme-gl[data-sky="glitch"], .theme-gl[data-sky="matrix"] { image-rendering: pixelated; }
html[data-motion="lite"] .theme-fx, html[data-motion="lite"] .theme-gl { 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: the stage lights up.

   This used to be a brightness filter on the whole room. A filter has to be
   worked out again for every pixel of everything inside it on every frame it
   runs, and the room is the entire page, so the biggest wins were exactly
   when the frame rate fell over. It is a sheet of light over the stage now,
   and the only thing that changes is how see-through it is. */
.room[data-flash] .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(90% 80% at 50% 50%, color-mix(in srgb, var(--accent-2) 60%, #fff), color-mix(in srgb, var(--accent) 50%, transparent) 60%, transparent);
  animation: flash-swell 0.7s var(--ease);
}
@keyframes flash-swell { 22% { opacity: 0.34; } }
.room[data-flash="tempest"] .stage::before { background: #fff; animation: flash-storm 0.26s steps(1, end); }
@keyframes flash-storm {
  0% { opacity: 0.5; }
  18% { opacity: 0; }
  34% { opacity: 0.3; }
  52%, 100% { opacity: 0; }
}
html[data-motion="lite"] .room[data-flash] .stage::before { display: 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 ---------- */

/* The two tiers above mythic have to look like it from across the room: a
   lit edge, a glow underneath, and a sheen that crosses the art when it is
   pointed at. Celestial is starlight, pale gold going to white going to ice.
   Zozfilical is the site's own colours, the blue and cyan of the mark and
   the gold of the dot, and twice the glow.

   The edge used to slide round by animating background-position, for ever,
   which is a repaint a frame. It holds still now. */
.fx-astral .item-art::after,
.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-astral {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #ffe9b8, #ffffff 35%, #9fe8ff 60%, #ffe9b8) border-box;
  box-shadow: 0 0 0 1px rgba(255, 233, 184, 0.22), 0 16px 44px -22px #ffe9b8;
}
.fx-cosmic {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 210deg, #5fe6ff, #3b8dff 25%, #ffc23f 50%, #ffffff 58%, #5fe6ff 75%, #3b8dff 90%, #5fe6ff) border-box;
  box-shadow: 0 0 0 1px rgba(95, 230, 255, 0.3), 0 0 34px -8px rgba(59, 141, 255, 0.8), 0 18px 50px -20px #ffc23f;
}

/* 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's flash is starlight: white in the middle, gold, then its blue. */
.room[data-flash="origin"] .stage::before {
  background: radial-gradient(70% 70% at 50% 50%, #fff, rgba(255, 240, 196, 0.85) 25%, rgba(111, 220, 255, 0.5) 55%, transparent 80%);
  animation-duration: 0.9s;
}
/* Turning the hue of a stage is what a skin does where there is no graphics
   chip to draw it a sky. With one, the sky changes colour by itself. */
@keyframes origin-breathe { to { filter: hue-rotate(360deg); } }

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

/* Glitch shoves the stage sideways as well, which is a transform and free. */
.room[data-flash="glitch"] .stage { animation: flash-glitch 0.42s steps(1, end); }
@keyframes flash-glitch {
  0% { transform: translateX(-6px); }
  20% { transform: translateX(5px) skewX(-2deg); }
  40% { transform: translateX(-3px); }
  60% { transform: translateX(2px) skewX(1deg); }
  80%, 100% { transform: none; }
}
html[data-motion="lite"] .room[data-flash="glitch"] .stage { animation: none; }

/* 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"]:not(.has-sky) { animation: origin-breathe 40s linear infinite; }
html[data-motion="lite"] .ambient { display: none; }
html[data-motion="lite"] .stage[data-ambient="hue"] { 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; }

/* A skin from above mythic does not stop at the canvas. The room's panels
   get a lit edge, because at this point what is one more layer.

   The edge used to crawl: a gradient four times the size of the panel slid
   along by animating background-position. The browser cannot hand that to
   the graphics chip, so it repainted every panel in the room, and the stage,
   sixty times a second for as long as the skin was worn. That was most of
   why Origin felt slow. The edge holds still now and the sky does the
   moving.

   It is not a rainbow any more either. Origin is midnight, ice and
   starlight: a hairline of its blue round every panel and a line of its
   gold along the top, the way light catches the top edge of glass. The
   other two get the same edge in their own colours. */
.room:is([data-fx="origin"], [data-fx="lastlight"], [data-fx="zozfil"]) :is(.card, .stage, .item, .crate-tile, .game-card, .quick-card, .arcade-card, .modal) {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-2) 26%, transparent), 0 24px 60px -36px #000;
}
.room[data-fx="origin"] .btn-primary {
  background-image: linear-gradient(120deg, #6fdcff, #d8f4ff 45%, #fff0c4);
  box-shadow: 0 8px 26px -12px rgba(111, 220, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.room[data-fx="lastlight"] .btn-primary {
  background-image: linear-gradient(120deg, #3fe8cf, #c9fff4 50%, #ffd9a0);
  box-shadow: 0 8px 26px -12px rgba(63, 232, 207, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.room[data-fx="zozfil"] .btn-primary {
  background-image: linear-gradient(135deg, #5fe6ff, #3b8dff);
  box-shadow: 0 8px 30px -10px rgba(59, 141, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(255, 194, 63, 0.35);
}
.room:is([data-fx="origin"], [data-fx="lastlight"], [data-fx="zozfil"]) .page-head h1 { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- a skin that takes the whole page ----------

   Origin is worn by the body, not by a game. `page-skin` is its colours on
   everything. `page-sky` is added once its sky is really running behind the
   site, and that is when the shell lets go of its own backgrounds so the sky
   can be seen: the bars go to tinted glass and the main column to nothing.
   No blur behind any of it. Blur is the one thing here a Chromebook cannot
   afford, and a galaxy looks better sharp. */
.page-sky-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict; }
.page-sky-layer canvas { display: block; width: 100%; height: 100%; }
body.page-skin { background: var(--room-backdrop), var(--bg); background-attachment: fixed; }
body.page-sky #root, body.page-sky .banner { position: relative; z-index: 1; }
body.page-sky .topbar,
body.page-sky .rail,
body.page-sky .chatpanel,
body.page-sky .tabbar { background: color-mix(in srgb, var(--bg) 54%, transparent); }
body.page-sky .main,
body.page-sky .main.room { background: transparent; }
body.page-sky .ticker .tick,
body.page-sky .balance,
body.page-sky .me-chip { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
/* Nor a flash: the wave going out through the whole page is the flash. */
body.page-sky .room[data-flash] .stage::before { display: none; }
/* A stage on top of the page's own sky has nothing to add to it. */
.stage.sees-through { background: color-mix(in srgb, var(--bg) 30%, transparent); }
.stage.sees-through::after { opacity: 0.9; }
/* The boxes games draw in are let through as well, so the galaxy is behind
   the crash graph and not behind a black rectangle with a graph on it. */
.stage.sees-through .crash-screen { background: color-mix(in srgb, var(--bg) 38%, transparent); }

/* ---------- 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); }

/* ================================================================
   the polish pass

   Nothing new lives here. It is the same site with the friction taken
   out: a sidebar that folds, a way to find anything, a bar for thumbs on
   phones, a bet button that is always within reach, and long pages that
   only lay out what is on screen.
   ================================================================ */

/* ---------- sidebar groups fold ---------- */

button.rail-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 4px);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  padding: 4px 8px 4px 12px;
  margin: 12px 0 2px;
  border-radius: var(--r-xs);
  transition: color 0.15s var(--ease);
}
button.rail-group:hover { color: var(--muted); }
button.rail-group .icon { opacity: 0; transition: opacity 0.15s var(--ease), transform 0.2s var(--ease); }
button.rail-group:hover .icon, button.rail-group:focus-visible .icon, button.rail-group[aria-expanded="false"] .icon { opacity: 1; }
button.rail-group[aria-expanded="false"] .icon { transform: rotate(-90deg); }
/* The wrapper exists to be folded and takes no part in the layout. The rows
   stay children of the sidebar's own column, which is what lets them squeeze
   to fit a short screen instead of scrolling. */
.rail-items { display: contents; }
/* The page you are on shows through a folded group. */
.rail-items.folded .navitem:not(.on) { display: none; }
@media (min-width: 901px) {
  body.rail-collapsed button.rail-group { display: none; }
  body.rail-collapsed .rail-items.folded .navitem { display: flex; }
}
button.rail-group { flex: none; }
@media (max-height: 820px) and (min-width: 901px) {
  button.rail-group { margin-top: 6px; }
}

/* ---------- find anything ---------- */

.search-box { display: flex; flex-direction: column; gap: 10px; }
.search-input { height: 48px; font-size: 16px; }
.search-results { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.search-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-row.on { background: var(--accent-soft); }
.search-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-2); }
.search-label { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sub { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.search-none { padding: 22px 0; text-align: center; color: var(--faint); font-size: 13.5px; }
.search-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.search-foot .spacer { flex: 0 0 10px; }
@media (pointer: coarse) { .search-foot { display: none; } }

/* ---------- bet panel ---------- */

.bet-limit { margin-top: 6px; min-height: 16px; line-height: 1.3; }
.dice-box { position: relative; }
.dice-box .input { width: 100%; }
.dice-box i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px; color: var(--faint); pointer-events: none; }
.dice-box i + .input, .dice-box .input:has(+ i) { padding-right: 24px; }
label.card { display: block; cursor: text; }
/* The number you are aiming at rides above the handle. */
.dice-target {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  pointer-events: none;
}

/* ---------- phones: a bar for thumbs ---------- */

.tabbar { display: none; }
@media (max-width: 900px) {
  #app { grid-template-rows: var(--top) minmax(0, 1fr) auto; grid-template-areas: "top" "main" "tabs"; }
  .tabbar {
    grid-area: tabs;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 82%, #0c1630);
    border-top: 1px solid var(--line-soft);
    z-index: 60;
  }
  .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 48px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--faint);
    font: inherit;
    font-size: 10.5px;
    font-weight: 650;
    cursor: pointer;
  }
  .tab .icon { width: 21px; height: 21px; }
  .tab.on { color: var(--accent-2); }
  .tab:active { background: var(--hover); }
  .tab .pill-count { position: absolute; top: 3px; left: calc(50% + 4px); }
  /* Both are in the bar now, and the header was getting crowded. */
  .topbar-chat, .topbar-search { display: none; }
  .rail, .chatpanel { bottom: calc(57px + env(safe-area-inset-bottom)); }
  .main { padding-bottom: 28px; }
  .toasts { bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* The bet button follows you down the page. It used to sit a screen and a
     half below the game on a phone. */
  .betpanel > .col:has(> .btn-lg) {
    position: sticky;
    bottom: 0;
    z-index: 5;
    gap: 0;
    margin: 0 -14px -14px;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--surface);
  }
  .betpanel > .col:has(> .btn-lg) .bet-foot { display: none; }
}
@media (max-width: 620px) {
  /* Two across and shorter: four tall cards pushed the games off the first
     screen. */
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-card { padding: 11px; gap: 10px; }
  .quick-card .qc-icon { width: 34px; height: 34px; border-radius: 11px; }
  .quick-card .qc-title { font-size: 13.5px; }
  .stage-center { min-height: 84px !important; }
  .dice-track { margin-bottom: 8px; }
}

/* ---------- display options ---------- */

body.compact { --top: 52px; --rail: 204px; --chat: 300px; }
body.compact .navitem { height: 34px; font-size: 13.5px; gap: 10px; }
body.compact button.rail-group { margin-top: 8px; }
body.compact .main { padding-top: 14px; padding-left: 16px; padding-right: 16px; }
body.compact .card { padding: 14px; }
body.compact .card-tight { padding: 10px 12px; }
body.compact .page-head { margin-bottom: 12px; }
body.compact .page-head h1 { font-size: 21px; }
body.compact .section-head { margin: 16px 0 10px; }
body.compact .stage { min-height: 400px; padding: 18px; gap: 14px; }
body.compact .msg { padding: 3px 8px; }
body.compact .hero { padding: 18px; }
body.compact .game-card, body.compact .crate-tile, body.compact .arcade-card { padding: 14px; }

body.no-ticker .ticker { visibility: hidden; }

body.hide-balance .balance:not(:hover):not(:focus-visible) .num { position: relative; color: transparent; }
body.hide-balance .balance:not(:hover):not(:focus-visible) .num::after {
  content: "\2022\2022\2022\2022\2022";
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-align: right;
  letter-spacing: 2px;
  color: var(--muted);
}

body.chat-sm .msg-text { font-size: 13px; }
body.chat-sm .msg-head .uname { font-size: 12.5px; }
body.chat-lg .msg-text { font-size: 15.5px; line-height: 1.5; }
body.chat-lg .msg-head .uname { font-size: 14.5px; }

/* Cool colours and one warm one. The house look stays the house look. */
html[data-accent="cyan"] { --accent: #22b8e6; --accent-2: #6fe6ff; --accent-ink: #011a24; }
html[data-accent="teal"] { --accent: #1fc4a8; --accent-2: #6df0d6; --accent-ink: #00201a; }
html[data-accent="green"] { --accent: #3fcf74; --accent-2: #8df0a8; --accent-ink: #03210f; }
html[data-accent="amber"] { --accent: #ffab3d; --accent-2: #ffd27a; --accent-ink: #2a1600; }

.accent-row { display: flex; gap: 10px; }
.accent-dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--dot);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--surface);
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
.accent-dot:hover { transform: scale(1.08); }
.accent-dot.on { border-color: var(--text); }

/* ---------- long pages ----------

   The store is six thousand pixels tall and the browser was laying out and
   painting every card in it to show the first twelve. These skip whatever
   is off screen and remember their size, so the scrollbar does not jump. */

.item, .crate-tile, .arcade-card, .board-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
.board-row { contain-intrinsic-size: auto 48px; }

/* ================================================================
   motion for the fun of it

   The other half of anim.js. None of this is needed and all of it is
   wanted. It keeps the promise at the top of this file all the same:
   transform and opacity only, once and then still, nothing looping
   behind your back, and the whole section goes quiet under lite motion.

   Keyframes here move `translate`, `rotate` and `scale` rather than
   `transform`, so they stack on top of an element's own transform (a
   hover lift, a folded chevron) and never fight it.
   ================================================================ */

/* ---------- between pages ---------- */

.curtain {
  grid-area: main;
  position: relative;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.curtain i {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(20% + 1px);
  transform: translateX(-101%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: inset 6px 0 0 rgba(255, 255, 255, 0.32), inset -6px 0 0 rgba(255, 255, 255, 0.32);
}
.curtain i:nth-child(2) { top: 20%; }
.curtain i:nth-child(3) { top: 40%; }
.curtain i:nth-child(4) { top: 60%; }
.curtain i:nth-child(5) { top: 80%; }
.curtain i:nth-child(even) { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, #021026), var(--accent)); }
.curtain-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  opacity: 0;
  color: var(--accent-ink);
  font-size: clamp(30px, 5.2vw, 58px);
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.curtain-label .icon { width: 1em; height: 1em; }

/* ---------- arriving ----------
   Wrapped in :where() so it weighs nothing. Anything on the page with an
   entrance of its own keeps it. */

.main.arriving > .wrap { animation: none; }
:where(.main.arriving > .wrap > *) {
  animation: arrive 0.46s var(--ease) backwards;
  animation-delay: calc(var(--arrive-wait, 0ms) + var(--n, 7) * 45ms);
}
:where(.main.arriving > .wrap) > :nth-child(1) { --n: 0; }
:where(.main.arriving > .wrap) > :nth-child(2) { --n: 1; }
:where(.main.arriving > .wrap) > :nth-child(3) { --n: 2; }
:where(.main.arriving > .wrap) > :nth-child(4) { --n: 3; }
:where(.main.arriving > .wrap) > :nth-child(5) { --n: 4; }
:where(.main.arriving > .wrap) > :nth-child(6) { --n: 5; }
:where(.main.arriving > .wrap) > :nth-child(7) { --n: 6; }
@keyframes arrive { from { opacity: 0; translate: 0 16px; } }

/* The first sixteen tiles of a grid are dealt out. The rest are below the
   fold, and animating three hundred store items nobody can see is how a
   Chromebook ends up with three hundred layers. */
:where(.main.arriving) :is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(-n + 16) {
  animation: arrive-tile 0.5s var(--spring) backwards;
  animation-delay: calc(var(--arrive-wait, 0ms) + 110ms + var(--k, 0) * 32ms);
}
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(2) { --k: 1; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(3) { --k: 2; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(4) { --k: 3; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(5) { --k: 4; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(6) { --k: 5; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(7) { --k: 6; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(8) { --k: 7; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(n + 9) { --k: 8; }
:is(.game-card, .quick-card, .crate-tile, .arcade-card, .item):nth-child(n + 13) { --k: 10; }
@keyframes arrive-tile { from { opacity: 0; translate: 0 24px; scale: 0.93; } }

.main.arriving .head-icon { animation: arrive-spin 0.62s var(--spring) backwards; animation-delay: var(--arrive-wait, 0ms); }
@keyframes arrive-spin { from { opacity: 0; rotate: -140deg; scale: 0.3; } }

.ch-word { display: inline-block; white-space: nowrap; }
.ch {
  display: inline-block;
  animation: ch-in 0.44s var(--spring) backwards;
  animation-delay: calc(var(--arrive-wait, 0ms) + 60ms + var(--c) * 26ms);
}
@keyframes ch-in { from { opacity: 0; translate: 0 0.6em; rotate: 14deg; } }

.bar > i { transform-origin: left; }
.main.arriving .bar > i { animation: arrive-bar 0.85s var(--ease) backwards; animation-delay: calc(var(--arrive-wait, 0ms) + 220ms); }
@keyframes arrive-bar { from { scale: 0 1; } }

.main.arriving .board-row:nth-child(-n + 3) .board-rank { animation: ico-flicker 0.7s var(--ease) 0.55s backwards; }

/* Further down the page, as it scrolls into view. */
.rise { animation: rise 0.46s var(--ease) backwards; animation-delay: calc(var(--r, 0) * 38ms); }
@keyframes rise { from { opacity: 0; translate: 0 22px; scale: 0.95; } }

/* ---------- presses ---------- */

.click-sparks, .coin-flight {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.click-spark {
  position: absolute;
  width: 9px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--tint, var(--accent-2));
  transform-origin: 0 50%;
}
.click-ring {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid var(--tint, var(--accent-2));
}

.ink, .glare {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ink i { position: absolute; border-radius: 50%; background: currentColor; }

.btn { transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease), translate 0.15s var(--ease), opacity 0.15s; }
.btn:hover:not(:disabled):not(.is-blocked) { translate: 0 -1px; }
.btn:active:not(:disabled) { translate: 0 0; }
.btn-lg:active:not(:disabled) { transform: scale(0.96); }

.switch i { transition: transform 0.22s var(--spring), width 0.15s var(--ease), background-color 0.18s var(--ease); }
.switch:active i { width: 21px; }
.switch.on:active i { transform: translate(13px, -50%); }

/* ---------- cards lean toward the pointer ---------- */

.quick-card, .arcade-card { position: relative; }
.arcade-card { transition: transform 0.18s var(--ease), border-color 0.18s; }
.arcade-card:hover { border-color: color-mix(in srgb, var(--ga) 50%, var(--line)); }
.glare { z-index: 3; animation: fade 0.25s var(--ease); }
.glare i {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.13), transparent 58%);
}

.crate-box .lid { transition: translate 0.3s var(--spring), rotate 0.3s var(--spring); transform-origin: 10% 100%; }
.crate-tile:hover .crate-box:not(.case):not(.wardrobe) .lid { translate: 0 -6px; rotate: -7deg; }
.crate-tile:hover .crate-box .lock { animation: ico-shake 0.5s var(--ease); }

/* ---------- every glyph has a move ----------
   Set by name here, played when the thing it sits in is pointed at or
   pressed. anim.js adds .kicked for the press. */

.icon { --move: ico-pop; }
.icon:is([data-i="cog"], [data-i="refresh"], [data-i="wheel"], [data-i="roulette"], [data-i="history"], [data-i="clock"], [data-i="target"]) { --move: ico-spin; }
.icon:is([data-i="dice"], [data-i="digits"], [data-i="memory"], [data-i="pattern"], [data-i="math"], [data-i="letters"]) { --move: ico-roll; }
.icon:is([data-i="coin"], [data-i="help"], [data-i="cards"], [data-i="blackjack"], [data-i="hilo"], [data-i="copy"], [data-i="eye"]) { --move: ico-flip; }
.icon:is([data-i="crash"], [data-i="rocket"], [data-i="send"], [data-i="limbo"], [data-i="trend"], [data-i="logout"]) { --move: ico-launch; }
.icon:is([data-i="bell"], [data-i="gift"], [data-i="bag"], [data-i="store"], [data-i="palette"]) { --move: ico-swing; transform-origin: 50% 12%; }
.icon:is([data-i="home"], [data-i="trophy"], [data-i="crown"], [data-i="crate"], [data-i="users"], [data-i="user"], [data-i="bank"], [data-i="arcade"], [data-i="chat"], [data-i="mail"], [data-i="keyboard"]) { --move: ico-hop; }
.icon:is([data-i="mine"], [data-i="trash"], [data-i="lock"], [data-i="bolt"], [data-i="swords"], [data-i="battle"]) { --move: ico-shake; }
.icon:is([data-i="sparkle"], [data-i="flame"], [data-i="star"]) { --move: ico-flicker; }
.icon[data-i="plinko"] { --move: ico-drop; }
.icon[data-i="search"] { --move: ico-peek; }
.icon:is([data-i^="chev"], [data-i="close"], [data-i="check"], [data-i="plus"], [data-i="minus"]) { --move: none; }

:is(.navitem, .btn, .tab, .game-card, .quick-card, .arcade-card, .popover-item):hover .icon,
.search-row.on .icon,
.navitem.on .icon,
.tab.on .icon,
.icon.kicked { animation: var(--move) 0.62s var(--ease); }

@keyframes ico-pop { 45% { scale: 1.24; } }
@keyframes ico-spin { to { rotate: 360deg; } }
@keyframes ico-roll { 40% { translate: 0 -6px; rotate: 190deg; } 100% { rotate: 360deg; } }
@keyframes ico-flip { to { rotate: y 360deg; } }
@keyframes ico-launch {
  45% { translate: 15px -15px; opacity: 0; }
  46% { translate: -13px 13px; opacity: 0; }
}
@keyframes ico-swing { 20% { rotate: 17deg; } 40% { rotate: -13deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
@keyframes ico-hop { 30% { translate: 0 -5px; scale: 1.06; } 55% { translate: 0 0; scale: 1.12 0.88; } 75% { translate: 0 -2px; scale: 1; } }
@keyframes ico-shake { 15% { translate: -2px 0; rotate: -9deg; } 35% { translate: 2px 0; rotate: 8deg; } 55% { translate: -2px 0; rotate: -5deg; } 75% { translate: 1px 0; rotate: 3deg; } }
@keyframes ico-flicker { 25% { scale: 1.32; rotate: 14deg; } 50% { scale: 0.86; } 75% { scale: 1.16; rotate: -9deg; } }
@keyframes ico-drop { 0% { translate: 0 -9px; opacity: 0; } 55% { translate: 0 2px; opacity: 1; } 78% { translate: 0 -2px; } }
@keyframes ico-peek { 35% { translate: 3px -3px; scale: 1.16; } 70% { translate: -2px 2px; } }

/* ---------- the top bar ---------- */

.brand img { transition: rotate 0.7s var(--spring), scale 0.3s var(--spring); }
.brand:hover img { rotate: 360deg; scale: 1.08; }
.me-chip .av { transition: rotate 0.3s var(--spring), scale 0.3s var(--spring); }
.me-chip:hover .av { rotate: -9deg; scale: 1.1; }
.balance.popped img { animation: ico-flip 0.6s var(--ease); }
.pill-count:not([hidden]) { animation: chip-in 0.32s var(--spring); }

/* The balance is a row of wheels, one to a digit. */
.num.odo { display: inline-flex; height: 1.3em; line-height: 1.3em; overflow: hidden; }
.odo-wheel, .odo-mark { display: block; height: 1.3em; }
.odo-strip {
  display: block;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.3, 1);
  transition-delay: calc(var(--p, 0) * 34ms);
}
.odo-strip b { display: block; height: 1.3em; font-weight: inherit; text-align: center; }

.coin-flight span { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.coin-flight img { display: block; width: 100%; height: 100%; }

/* ---------- things that slide between choices ---------- */

@media (min-width: 901px) { .rail { position: relative; } }
.rail-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  opacity: 0;
  pointer-events: none;
}
.rail-mark.live { transition: transform 0.4s var(--spring), height 0.2s var(--ease), opacity 0.15s; }
.rail.marked .navitem.on::before { display: none; }
.navitem > span:not(.nav-tag) { transition: translate 0.18s var(--ease); }
.navitem:hover > span:not(.nav-tag) { translate: 3px 0; }

.seg, .tabs { position: relative; }
.seg > button, .tabs > button { position: relative; z-index: 1; }
.seg.glide::before, .tabs.glide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gw);
  height: var(--gh);
  transform: translate(var(--gx), var(--gy));
  pointer-events: none;
}
.seg.glide::before { border-radius: 7px; background: var(--surface-3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px -8px #000; }
.seg.seg-accent.glide::before { background: var(--grad); }
.tabs.glide::before { border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg.glide-live::before, .tabs.glide-live::before { transition: transform 0.36s var(--spring), width 0.2s var(--ease); }
.seg.glide > button.on, .seg.seg-accent.glide > button.on { background: transparent; box-shadow: none; }
.tabs.glide > button.on { background: transparent; border-color: transparent; }

@media (max-width: 900px) {
  .tab.on::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 30%;
    right: 30%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad);
    animation: tab-on 0.34s var(--spring);
  }
}
@keyframes tab-on { from { scale: 0 1; } }

/* ---------- dialogs, menus, toasts, chat ---------- */

.modal-back.leaving .modal { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.15s, transform 0.16s ease-in; }
:where(.modal > div > *) { animation: arrive 0.4s var(--ease) backwards; animation-delay: calc(70ms + var(--n, 6) * 38ms); }
:where(.modal > div) > :nth-child(1) { --n: 0; }
:where(.modal > div) > :nth-child(2) { --n: 1; }
:where(.modal > div) > :nth-child(3) { --n: 2; }
:where(.modal > div) > :nth-child(4) { --n: 3; }
:where(.modal > div) > :nth-child(5) { --n: 4; }
:where(.modal > div) > :nth-child(6) { --n: 5; }

.popover { transform-origin: 50% 0; }
:where(.popover-item) { animation: arrive 0.3s var(--ease) backwards; animation-delay: calc(30ms + var(--n, 7) * 26ms); }
:where(.popover) > :nth-child(1) { --n: 0; }
:where(.popover) > :nth-child(2) { --n: 1; }
:where(.popover) > :nth-child(3) { --n: 2; }
:where(.popover) > :nth-child(4) { --n: 3; }
:where(.popover) > :nth-child(5) { --n: 4; }
:where(.popover) > :nth-child(6) { --n: 5; }
:where(.popover) > :nth-child(7) { --n: 6; }

.toast { position: relative; overflow: hidden; }
.toast-fuse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.75;
  transform-origin: left;
  animation: fuse 4s linear forwards;
}
.toast.good .toast-fuse { background: var(--up); }
.toast.err .toast-fuse { background: var(--down); }
.toast.warn .toast-fuse { background: var(--warn); }
@keyframes fuse { to { transform: scaleX(0); } }

.msg.fresh { transform-origin: 0 100%; animation: msg-in 0.34s var(--spring) backwards; }
@keyframes msg-in { from { opacity: 0; translate: -14px 6px; scale: 0.96; } }

/* ---------- and none of it under lite ---------- */

html[data-motion="lite"] :is(.curtain, .click-sparks, .coin-flight, .glare, .ink, .toast-fuse) { display: none; }
html[data-motion="lite"] :is(.icon, .ch, .rise, .msg.fresh, .popover-item, .pill-count, .modal > div > *) { animation: none; }
html[data-motion="lite"] .tab.on::before { animation: none; }
html[data-motion="lite"] :is(.rail-mark.live, .odo-strip, .brand img, .me-chip .av, .crate-box .lid) { transition: none; }
html[data-motion="lite"] .seg.glide-live::before,
html[data-motion="lite"] .tabs.glide-live::before { transition: none; }
html[data-motion="lite"] .btn:hover { translate: none; }


/* ================================================================
   keno, baccarat, slots
   ================================================================

   Built from the same tokens as every other table, so a skin that repaints
   dice repaints these without knowing they exist. */

.keno { display: flex; flex-direction: column; gap: 12px; width: min(100%, 560px); margin: 0 auto; }
.keno-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.keno-cell {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background-color 0.15s, border-color 0.15s, color 0.15s;
}
.keno-cell:hover { border-color: var(--accent-line); color: var(--text); }
.keno-cell:active { transform: scale(0.94); }
.keno-cell.marked { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.keno-cell.drawn { background: var(--surface-3); color: var(--faint); animation: keno-land 0.28s var(--spring); }
.keno-cell.hit { background: var(--up); border-color: var(--up); color: #04130c; box-shadow: 0 0 18px color-mix(in srgb, var(--up) 55%, transparent); animation: keno-land 0.34s var(--spring); }
@keyframes keno-land { from { transform: scale(0.7); } }
/* The ladder sits under the card as a row, because the stage is often
   narrow: the chat takes a third of a laptop screen. */
.keno-ladder { display: flex; flex-wrap: wrap; gap: 4px; }
.keno-step { flex: 1 1 60px; display: flex; flex-direction: column; align-items: center; padding: 5px 6px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.keno-step small { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.keno-step b { font-size: 13px; }
.keno-step.dud b { color: var(--faint); }
.keno-step.on { border-color: var(--down); }
.keno-step.on.win { border-color: var(--up); background: var(--up-soft); }
.keno-step.on.win b { color: var(--up); }

.bac-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 640px); margin: 0 auto; }
.bac-hand { padding: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line-soft); }
.bac-hand .pcard-row { min-height: 112px; }
.bac-verdict { min-height: 26px; text-align: center; font-weight: 800; font-size: 17px; }
.bac-verdict.win { color: var(--up); }
.bac-verdict.lose { color: var(--down); }
.bac-verdict.push { color: var(--muted); }
.bac-picks { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 6px; }
.bac-pick { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--muted); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.bac-pick b { font-size: 14px; color: var(--text); }
.bac-pick span { font-size: 11.5px; font-weight: 700; }
.bac-pick small { font-size: 10.5px; color: var(--faint); }
.bac-pick:hover { border-color: var(--accent-line); }
.bac-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.bac-pick.tie.on { border-color: var(--money); background: var(--money-soft); }

.slot-cabinet { width: min(100%, 420px); margin: 0 auto; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent), 0 18px 40px rgba(0, 0, 0, 0.35); }
.slot-window { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: 288px; padding: 0; border-radius: 14px; overflow: hidden; }
.slot-reel { position: relative; height: 288px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #05080f, var(--bg) 22%, var(--bg) 78%, #05080f); border: 1px solid var(--line-soft); }
.slot-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.6)); }
.slot-reel.lit { border-color: var(--money); box-shadow: inset 0 0 0 1px var(--money), 0 0 22px color-mix(in srgb, var(--money) 40%, transparent); }
.slot-band { will-change: transform; }
.slot-sym { height: 96px; display: grid; place-items: center; }
.slot-glyph { width: 62px; height: 62px; }
.slot-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--money) 70%, transparent); box-shadow: 0 0 10px var(--money); opacity: 0.55; pointer-events: none; }
.slot-verdict { min-height: 26px; text-align: center; font-weight: 800; font-size: 17px; }
.slot-verdict.win { color: var(--up); }
.slot-verdict.lose { color: var(--faint); font-weight: 650; font-size: 14px; }
.slot-verdict.push { color: var(--money); }
.slot-pays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: min(100%, 640px); margin: 0 auto; }
.slot-pay { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.slot-pay span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.slot-pay small { font-size: 9.5px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.slot-pay b { font-size: 12px; }
.slot-mini .slot-glyph { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .keno-cell { font-size: 13px; border-radius: 9px; }
  .keno-grid { gap: 5px; }
  .bac-table { grid-template-columns: 1fr; }
  .slot-pays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html[data-motion="lite"] .keno-cell.drawn, html[data-motion="lite"] .keno-cell.hit { animation: none; }

/* An arena wrap on an item tile: a painted weapon outline, as an image. */
.art-wrap { display: block; width: 100%; max-width: 132px; height: auto; margin: 0 auto; }
.pull .art-wrap { max-width: 86%; }

/* The way into the arena from the lobby: one wide link. */
.arena-door { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 18px; color: inherit; border-radius: var(--r-xl); border: 1px solid var(--accent-line); background: radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--surface); transition: transform 0.18s var(--ease), border-color 0.18s; }
.arena-door:hover { transform: translateY(-2px); border-color: var(--accent); }
.ad-icon { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.ad-title { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 18px; }
@media (max-width: 640px) { .arena-door { flex-wrap: wrap; } .arena-door .btn { width: 100%; } }

/* ================================================================
   made tags: the ones from the diamond shop
   Every layer is its own element so each can move on its own. The
   fill is under everything, the outline and the sheen are over it,
   and the glow is outside. Nothing here repaints; it all moves.
   ================================================================ */

.ctag.made { padding: 0; overflow: visible; background: none; text-shadow: none; }
.ctag.made.moves { animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.ct-body { position: relative; display: inline-flex; align-items: center; gap: 0.35em; height: 100%; overflow: hidden; isolation: isolate; }
.ct-fill { position: absolute; inset: 0; z-index: 0; }
.ct-fill.flow { width: 500%; background-size: 20% 100%; animation: ct-flow linear infinite; }
.ct-fill.spin { inset: -80%; animation: ct-spin linear infinite; }
.ct-edge { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ct-sheen { position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); transform: translateX(-120%); animation: tag-shine ease-in-out infinite; }
.ct-text { position: relative; z-index: 1; line-height: 1; white-space: nowrap; }
.ct-text.grad { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ct-text.wave span { display: inline-block; animation: ct-wave ease-in-out infinite; }
.ct-text.glitch { animation: ct-glitch var(--ct-d, 2.6s) steps(1, end) infinite; }
.ct-icon { position: relative; z-index: 1; width: 1.15em; height: 1.15em; flex: none; }
.ct-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ct-glow.inner { z-index: 4; }
.ct-glow.pulse { animation: ct-pulse ease-in-out infinite; }
.ct-spark { position: absolute; z-index: 2; width: 0.5em; height: 0.5em; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: ct-sparkle ease-in-out infinite; }
.ct-spark.s0 { left: 12%; top: 10%; }
.ct-spark.s1 { left: 55%; top: 55%; animation-delay: -0.7s; }
.ct-spark.s2 { left: 80%; top: 15%; animation-delay: -1.4s; }
/* Bigger where a tag is the thing on show. */
.detail-art .ctag.made { height: 30px; font-size: 16px; }
.item-art .ctag.made { height: 26px; font-size: 14px; }

@keyframes ct-flow { to { transform: translateX(-80%); } }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-pulse { 50% { opacity: 0.35; } }
@keyframes ct-float { 50% { transform: translateY(-2px); } }
@keyframes ct-wobble { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes ct-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.08); } 28% { transform: scale(1); } 42% { transform: scale(1.06); } }
@keyframes ct-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.35; } 44% { opacity: 1; } 71% { opacity: 1; } 72% { opacity: 0.5; } 74% { opacity: 1; } }
@keyframes ct-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.18em); } }
@keyframes ct-sparkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes ct-glitch { 0%, 92% { transform: none; clip-path: none; } 93% { transform: translate(-0.08em, 0); clip-path: inset(0 0 60% 0); } 95% { transform: translate(0.08em, 0); clip-path: inset(40% 0 0 0); } 97% { transform: translate(-0.04em, 0.04em); clip-path: inset(20% 0 30% 0); } 98% { transform: none; clip-path: none; } }

html[data-motion="lite"] .ctag.made.moves,
html[data-motion="lite"] .ct-fill,
html[data-motion="lite"] .ct-sheen,
html[data-motion="lite"] .ct-text.wave span,
html[data-motion="lite"] .ct-text.glitch,
html[data-motion="lite"] .ct-glow,
html[data-motion="lite"] .ct-spark { animation: none; }
html[data-motion="lite"] .ct-fill.flow { width: 100%; background-size: 100% 100%; }
html[data-motion="lite"] .ct-fill.spin { inset: 0; }

/* the diamond shop */

.balance.gems { padding-right: 12px; }
.balance.gems img { width: 22px; height: 22px; }
.coin.gem img { width: 16px; height: 16px; }
.gem-shelf { padding: 18px 20px; background: radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface); }
.gem-row { display: flex; align-items: center; gap: 18px; }
.gem-big { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.gem-text { flex: 1; min-width: 0; }
.gem-text h2 { margin: 0 0 4px; }
.gem-text p { margin: 0; color: var(--muted); font-size: 13.5px; }
.gem-text p + p { margin-top: 4px; }
.gem-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
@media (max-width: 640px) {
  .gem-row { flex-wrap: wrap; }
  .gem-big { width: 56px; height: 56px; }
  .gem-buy { width: 100%; align-items: stretch; }
  .gem-buy .row { width: 100%; }
  .gem-buy .row .btn { flex: 1; }
}

/* ---------- the classics ---------- */

.classic-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
canvas.classic { width: min(100%, 560px); aspect-ratio: 1; border-radius: 14px; background: #0b1426; border: 1px solid var(--line-soft); touch-action: none; outline: none; }
.classic-pad { display: none; gap: 8px; flex-wrap: wrap; justify-content: center; }
.classic-pad .btn { min-width: 64px; height: 48px; font-size: 18px; touch-action: none; user-select: none; }
@media (pointer: coarse) { .classic-pad { display: flex; } }

/* ---------- stocks ---------- */
.st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.st-left, .st-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-mood { padding: 10px 14px; border-radius: 12px; background: rgba(255, 194, 63, 0.1); border: 1px solid rgba(255, 194, 63, 0.35); color: var(--gold); font-weight: 700; font-size: 14px; }
.st-chart .row { align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.st-canvas { position: relative; height: 340px; }
.st-canvas canvas { display: block; }
.st-readout { position: absolute; left: 8px; top: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(6, 12, 24, 0.8); font: 600 11px var(--mono, monospace); color: var(--muted); display: none; pointer-events: none; }
.st-readout.on { display: block; }
.st-board { display: flex; flex-direction: column; gap: 2px; }
.st-row { display: grid; grid-template-columns: 76px 1fr auto 82px; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.st-row:hover { background: rgba(255, 255, 255, 0.04); }
.st-row.on { background: rgba(53, 214, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(53, 214, 255, 0.4); }
.st-t { font-weight: 800; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.st-t small { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 99px; background: rgba(61, 220, 151, 0.15); color: var(--up); }
.st-name { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.st-chg { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; color: var(--muted); }
.st-chg.up { color: var(--up); }
.st-chg.down { color: var(--down); }
.st-chg.big { font-size: 15px; }
.st-quote .row { align-items: baseline; gap: 10px; }
.st-big { font-size: 22px; }
.st-bigprice { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-blurb { color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.st-held { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.st-trade { display: flex; flex-direction: column; gap: 12px; }
.st-field { display: flex; flex-direction: column; gap: 6px; }
.st-field label { font-size: 12px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.st-field .row.tight { gap: 6px; }
.st-trade > .row { gap: 8px; }
.st-trade > .row .btn { flex: 1; }
.st-limit summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; }
.st-limit .st-field { margin-top: 10px; }
.st-sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.st-list { display: flex; flex-direction: column; gap: 2px; }
.st-orders { margin-top: 12px; }
.st-order { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.st-news { display: flex; flex-direction: column; gap: 2px; }
.st-story { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.st-story:first-child { border-top: 0; }
.st-story .st-chg { text-align: left; }
.st-top { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-top th, .st-top td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.st-top td.up { color: var(--up); } .st-top td.down { color: var(--down); }
.up { color: var(--up); } .down { color: var(--down); }
@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-canvas { height: 260px; }
  .st-row { grid-template-columns: 64px 1fr auto 70px; gap: 8px; }
}

/* ---------- bring a friend ---------- */
.ref-row { display: flex; gap: 8px; margin-top: 10px; }
.ref-row .input { flex: 1; font-family: var(--mono, monospace); font-size: 13px; }
.ref-people { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.ref-person { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- referral ---------- */
.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; }
.st-stack { display: flex; flex-direction: column; gap: 12px; }
.st-title { font-size: 15px; font-weight: 800; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.st-title .dim { font-weight: 600; font-size: 13px; }
.st-comes { font-size: 13px; color: var(--muted); }
.st-sell select.input { width: 100%; }
.st-hold { grid-template-columns: 62px 1fr auto auto auto; cursor: default; }
.st-hold:hover { background: none; }

/* ---------- polls ---------- */

.poll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.poll { display: flex; flex-direction: column; gap: 12px; }
.poll-q { font-weight: 750; font-size: 15px; line-height: 1.35; }
.poll-options { display: flex; flex-direction: column; gap: 7px; }
.poll-option { justify-content: flex-start; text-align: left; width: 100%; white-space: normal; height: auto; min-height: 38px; padding: 8px 12px; }
.poll-result { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; font-size: 13.5px; }
.poll-result.mine { border-color: var(--accent-line); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width 0.6s var(--ease); }
.poll-result > :not(.poll-fill) { position: relative; }
.poll-label { display: inline-flex; align-items: center; gap: 6px; }
.poll-foot { gap: 6px; }

/* ---------- giveaways ---------- */

.gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gw-card { display: flex; flex-direction: column; gap: 12px; }
.gw-title { font-weight: 800; font-size: 16px; }
.gw-prize { display: flex; align-items: center; min-height: 56px; }
.gw-gems { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: var(--accent-2); }
.gw-item { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.gw-item .gw-art { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--rar, var(--line)); background: var(--surface-2); }
.gw-item b { display: block; }
.gw-meta { gap: 6px; font-size: 13px; color: var(--muted); }
.gw-past { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gw-winners { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }