@import url("../tokens/fonts.css");

/* ==========================================================================
   Arcade: Pop meets the arcade cabinet.
   Thick outlines, hard unblurred offset shadows, flat saturated fills, keys
   that lift on hover and sink on press. Every colour, radius, space and
   shadow comes from tokens.css; motion lives here.
   Perf rules: transform + opacity only; box-shadow changes only on the
   hover/active of one element; entrance animations use fill-mode BACKWARDS
   (never both/forwards, which would own transform and make hovers snap);
   no blur, no backdrop-filter; two tiny idle loops at most.
   ========================================================================== */

:root {
  --ac-snap: cubic-bezier(.2, .9, .3, 1);       /* hover lifts, settles: quick, no overshoot */
  --ac-boing: cubic-bezier(.34, 1.56, .64, 1);  /* releases, pops, snaps: ~10% overshoot */
  --ac-thunk: cubic-bezier(.1, .9, .2, 1);      /* press-in: front-loaded, lands at once */
  --ac-slide: cubic-bezier(.16, 1.2, .3, 1);    /* marquee slides: long glide, small overshoot */
  --ac-t-press: 120ms;
  --ac-t-lift: 180ms;
  --ac-t-pop: 280ms;
  --ac-t-slide: 380ms;
  --ac-t-roll: 400ms;
  --ac-white: #ffffff;
  color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  /* dark (default): a faint LED-matrix screen. 4px square pixels in 1px board-dot gutters */
  background-color: var(--board);
  background-image: linear-gradient(var(--board-dot) 1px, transparent 1px), linear-gradient(90deg, var(--board-dot) 1px, transparent 1px);
  background-size: 5px 5px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* daytime: arcade carpet. Sparse stars, zigzags, squares, rings and triangles in faint brand tints on a pale cool board (static 200px tile) */
[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Cpolygon points=%2230.0,27.0 31.9,31.5 36.7,31.8 33.0,35.0 34.1,39.7 30.0,37.1 25.9,39.7 27.0,35.0 23.3,31.8 28.1,31.5%22 fill=%22%23ffe59a%22/%3E%3Cpath d=%22M118 30l4-4 4 4 4-4 4 4%22 fill=%22none%22 stroke=%22%23ffcbe8%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2270%22 y=%2292%22 width=%228%22 height=%228%22 rx=%221.5%22 fill=%22%23b9ecf0%22 transform=%22rotate(18 74 96)%22/%3E%3Ccircle cx=%22162%22 cy=%2278%22 r=%224.5%22 fill=%22none%22 stroke=%22%23d9cbff%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M36 140l6 10h-12z%22 fill=%22%23cff0a6%22/%3E%3Cpath d=%22M96 168l4-4 4 4 4-4 4 4%22 fill=%22none%22 stroke=%22%23b9ecf0%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%22150.0,144.0 151.6,147.8 155.7,148.1 152.6,150.8 153.5,154.9 150.0,152.7 146.5,154.9 147.4,150.8 144.3,148.1 148.4,147.8%22 fill=%22%23ffcbe8%22/%3E%3Crect x=%22178%22 y=%2224%22 width=%226%22 height=%226%22 rx=%221.5%22 fill=%22%23cff0a6%22 transform=%22rotate(-12 181 27)%22/%3E%3Ccircle cx=%22100%22 cy=%22120%22 r=%224.5%22 fill=%22none%22 stroke=%22%23ffe59a%22 stroke-width=%222.5%22/%3E%3Crect x=%2222%22 y=%2288%22 width=%225%22 height=%225%22 rx=%221.5%22 fill=%22%23d9cbff%22 transform=%22rotate(30 24 90)%22/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- layout + type helpers ---------- */
.ac-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.ac-stage--top { align-items: flex-start; }
.ac-col { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ac-spacer { flex: 1; }
.ac-overline { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--_soft, var(--ink-soft)); }
.ac-d { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 56px; letter-spacing: -.01em; }
.ac-t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 34px; }
.ac-h { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 26px; }
.ac-p { margin: 0; font-size: 16px; line-height: 24px; }
.ac-sm { margin: 0; font-size: 14px; line-height: 20px; color: var(--_soft, var(--ink-soft)); }
.ac-num { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.ac-pixel { font-family: var(--font-pixel); font-size: 11px; line-height: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ac-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ac-icon { width: 20px; height: 20px; flex: none; display: block; }

/* tones: a fill plus the text that sits on it */
.ac-tone-panel[class] { --_fill: var(--panel); --_on: var(--ink); --_soft: var(--ink-soft); }
.ac-tone-cherry[class] { --_fill: var(--cherry); --_on: var(--on-color); --_soft: rgba(21, 19, 31, .8); }
.ac-tone-yellow[class] { --_fill: var(--yellow); --_on: var(--on-color); --_soft: rgba(21, 19, 31, .78); }
.ac-tone-cyan[class] { --_fill: var(--cyan);   --_on: var(--on-color); --_soft: rgba(21, 19, 31, .78); }
.ac-tone-lime[class] { --_fill: var(--lime);   --_on: var(--on-color); --_soft: rgba(21, 19, 31, .78); }
.ac-tone-pink[class] { --_fill: var(--pink);   --_on: var(--on-color); --_soft: rgba(21, 19, 31, .8); }
.ac-tone-grape[class] { --_fill: var(--grape);  --_on: var(--on-color); --_soft: rgba(21, 19, 31, .8); }
.ac-tone-ink[class] { --_fill: var(--on-color); --_on: var(--yellow); --_soft: rgba(255, 211, 25, .82); }

/* the Pop label: a black pill with yellow uppercase text */
.ac-label {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; box-sizing: border-box;
  border: 2px solid var(--line); border-radius: var(--radius-full);
  background: var(--on-color); color: var(--yellow);
  font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ac-label .ac-icon { width: 14px; height: 14px; }

/* focus: one ring everywhere */
.ac-btn:focus-visible, .ac-iconbtn:focus-visible, .ac-push:focus-visible, .ac-tab:focus-visible,
.ac-seg__opt:focus-visible, .ac-card--interactive:focus-visible, .ac-tag__x:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

/* ==========================================================================
   Keys: Button + IconButton. Rest on shadow-sm, lift 2px into shadow-md,
   sink 3px into shadow-press (5px of travel), spring back with an overshoot.
   ========================================================================== */
.ac-btn, .ac-iconbtn {
  --_fill: var(--panel); --_on: var(--ink);
  --_rest: var(--shadow-sm); --_lift: var(--shadow-md); --_down: 3px;
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 0 20px; margin: 0;
  border: 3px solid var(--line); border-radius: var(--radius-md);
  background: var(--_fill); color: var(--_on);
  font: 700 14px/18px var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: var(--_rest);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--ac-t-pop) var(--ac-boing), box-shadow var(--ac-t-pop) var(--ac-boing), background-color var(--ac-t-lift) linear, color var(--ac-t-lift) linear, border-color var(--ac-t-lift) linear;
}
/* hover-lift without jitter: an invisible skirt 5px past the right/bottom edge */
.ac-btn::after, .ac-iconbtn::after, .ac-card--interactive::after {
  content: ""; position: absolute; inset: -3px -8px -8px -3px; z-index: -1; border-radius: inherit;
}
@media (hover: hover) {
  .ac-btn:hover, .ac-iconbtn:hover { transform: translate(-2px, -2px); box-shadow: var(--_lift); transition-timing-function: var(--ac-snap); transition-duration: var(--ac-t-lift); }
}
.ac-btn:active, .ac-btn.is-down, .ac-iconbtn:active, .ac-iconbtn.is-down {
  transform: translate(var(--_down), var(--_down)); box-shadow: var(--shadow-press);
  transition: transform var(--ac-t-press) var(--ac-thunk), box-shadow var(--ac-t-press) var(--ac-thunk);
}
.ac-btn__label { display: block; }
.ac-btn .ac-icon { width: 18px; height: 18px; }

.ac-btn--primary { --_fill: var(--yellow); --_on: var(--on-color); }
.ac-btn--danger { --_fill: var(--cherry); --_on: var(--on-color); }
.ac-btn--secondary { --_fill: var(--panel); --_on: var(--ink); }
.ac-btn--ghost { --_fill: transparent; --_rest: 0 0 0 transparent; border-color: transparent; }
@media (hover: hover) {
  .ac-btn--ghost:hover { --_fill: var(--panel); border-color: var(--line); box-shadow: var(--shadow-sm); }
}
.ac-btn--ghost:active, .ac-btn--ghost.is-down { --_fill: var(--panel-sunk); border-color: var(--line); }

.ac-btn--sm { min-height: 36px; padding: 0 14px; font-size: 12px; line-height: 16px; --_rest: var(--shadow-xs); --_lift: var(--shadow-sm); --_down: 2px; }
.ac-btn--sm .ac-icon { width: 16px; height: 16px; }
.ac-btn--lg { min-height: 58px; padding: 0 28px; font-size: 16px; line-height: 20px; --_rest: var(--shadow-md); --_lift: var(--shadow-lg); --_down: 5px; }
.ac-btn--lg .ac-icon { width: 22px; height: 22px; }
.ac-btn--block { display: flex; width: 100%; }

.ac-btn:disabled, .ac-btn.is-disabled, .ac-iconbtn:disabled {
  --_fill: var(--panel-sunk); --_on: var(--ink-soft);
  border-color: var(--ink-soft); border-style: dashed; box-shadow: none; transform: none; cursor: not-allowed;
}
.ac-btn.is-loading { cursor: progress; }
.ac-btn.is-loading .ac-btn__label, .ac-btn.is-loading > .ac-icon { visibility: hidden; }
.ac-btn__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ac-btn__dots i { width: 7px; height: 7px; background: currentColor; animation: ac-blink-dot 900ms steps(1, end) infinite; }
.ac-btn__dots i:nth-child(2) { animation-delay: 150ms; }
.ac-btn__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes ac-blink-dot { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .2; } }

/* IconButton: same key, square or round */
.ac-iconbtn { width: 46px; min-height: 46px; height: 46px; padding: 0; }
.ac-iconbtn .ac-icon { width: 22px; height: 22px; transition: transform var(--ac-t-pop) var(--ac-boing); }
.ac-iconbtn--round { border-radius: var(--radius-full); }
.ac-iconbtn--sm { width: 36px; height: 36px; min-height: 36px; border-radius: var(--radius-sm); --_rest: var(--shadow-xs); --_lift: var(--shadow-sm); --_down: 2px; }
.ac-iconbtn--sm.ac-iconbtn--round { border-radius: var(--radius-full); }
.ac-iconbtn--sm .ac-icon { width: 18px; height: 18px; }
.ac-iconbtn--lg { width: 58px; height: 58px; min-height: 58px; --_rest: var(--shadow-md); --_lift: var(--shadow-lg); --_down: 5px; }
.ac-iconbtn--lg .ac-icon { width: 26px; height: 26px; }
.ac-iconbtn--primary { --_fill: var(--yellow); --_on: var(--on-color); }
.ac-iconbtn--danger { --_fill: var(--cherry); --_on: var(--on-color); }
.ac-iconbtn--ghost { --_fill: transparent; --_rest: 0 0 0 transparent; border-color: transparent; }
@media (hover: hover) { .ac-iconbtn--ghost:hover { --_fill: var(--panel); border-color: var(--line); } .ac-iconbtn:hover .ac-icon { transform: rotate(-8deg); } }
.ac-iconbtn[aria-pressed="true"] { --_fill: var(--_onfill, var(--pink)); --_on: var(--on-color); }
.ac-iconbtn[aria-pressed="true"] .ac-icon { transform: rotate(-8deg) scale(1.08); }
.ac-iconbtn[aria-pressed="true"] .ac-fillable { fill: currentColor; }
.ac-iconbtn--close:hover .ac-icon { transform: rotate(90deg); }

/* ==========================================================================
   INSERT COIN: the primary CTA. A yellow key with a coin slot; the coin
   drops in on press and the key powers up.
   ========================================================================== */
.ac-coin { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ac-coin .ac-btn { padding-left: 16px; }
.ac-coin__slot {
  position: relative; flex: none; width: 16px; height: 28px; box-sizing: border-box;
  border: 3px solid var(--on-color); border-radius: 5px; background: var(--on-color);
}
.ac-coin__slot::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 2px; background: var(--cherry); }
.ac-coin__coin {
  position: absolute; left: 50%; top: -30px; width: 22px; height: 22px; margin-left: -11px; box-sizing: border-box;
  border: 3px solid var(--on-color); border-radius: 50%; background: var(--yellow); opacity: 0; pointer-events: none;
}
.ac-coin__coin::after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 11px; border-radius: 2px; background: var(--on-color); opacity: .55; }
.ac-coin.is-fed .ac-coin__coin { animation: ac-coin-drop 380ms var(--ac-thunk) backwards; }
@keyframes ac-coin-drop {
  0% { opacity: 1; transform: translateY(-12px) rotate(-30deg); }
  55% { opacity: 1; transform: translateY(22px) rotate(0) scaleX(.55); }
  100% { opacity: 0; transform: translateY(34px) scaleX(.2); }
}
.ac-coin__credit { color: var(--yellow); animation: ac-blink 1.2s steps(1, end) infinite; }
[data-theme="light"] .ac-coin__credit { color: var(--on-color); }
@keyframes ac-blink { 0%, 69% { opacity: 1; } 70%, 100% { opacity: 0; } }
.ac-coin.is-fed .ac-coin__credit, .ac-coin.is-ready .ac-coin__credit { animation: none; }

/* ==========================================================================
   PushButton: a round cabinet button. A dark collar, a coloured cap on its
   skirt. Press sinks the cap 8px into the collar; release bounces it back.
   ========================================================================== */
.ac-pushwrap { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ac-pushwrap__label { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-align: center; }
.ac-push {
  --_fill: var(--cherry); --_on: var(--on-color); --_s: 64px; --_depth: 10px;
  --_deep: color-mix(in oklab, var(--_fill) 58%, #000);
  position: relative; flex: none; box-sizing: border-box;
  width: calc(var(--_s) + 22px); height: calc(var(--_s) + 22px);
  margin: 0 4px 4px 0; padding: 0; border: 0; background: none; color: var(--_on);
  cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%;
}
.ac-push--sm { --_s: 44px; --_depth: 7px; }
.ac-push--lg { --_s: 88px; --_depth: 12px; }
.ac-push__collar {
  position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  background: var(--on-color); border: 3px solid var(--line); box-shadow: var(--shadow-sm);
}
.ac-push__skirt, .ac-push__cap {
  position: absolute; left: 11px; width: var(--_s); height: var(--_s); box-sizing: border-box;
  border-radius: 50%; border: 3px solid var(--line);
}
[data-theme="light"] .ac-push__skirt, [data-theme="light"] .ac-push__cap { border-color: var(--on-color); }
.ac-push__skirt { top: calc(11px - var(--_depth) / 2 + var(--_depth)); background: var(--_deep); }
.ac-push__cap {
  top: calc(11px - var(--_depth) / 2); background: var(--_fill);
  display: flex; align-items: center; justify-content: center;
  transition: transform 340ms var(--ac-boing);
}
.ac-push__cap::before { /* flat highlight crescent: the analog bit */
  content: ""; position: absolute; left: 20%; top: 15%; width: 26%; height: 15%; border-radius: 99px;
  background: var(--ac-white); opacity: .5; transform: rotate(-32deg);
}
.ac-push__glyph { position: relative; display: flex; font: 400 13px/1 var(--font-display); }
.ac-push__glyph .ac-icon { width: calc(var(--_s) * .36); height: calc(var(--_s) * .36); }
@media (hover: hover) { .ac-push:hover .ac-push__cap { transform: translateY(-2px); transition: transform var(--ac-t-lift) var(--ac-snap); } }
.ac-push:active .ac-push__cap, .ac-push.is-down .ac-push__cap {
  transform: translateY(calc(var(--_depth) - 2px)) scale(.985);
  transition: transform var(--ac-t-press) var(--ac-thunk);
}
.ac-push[aria-pressed="true"] .ac-push__cap { transform: translateY(calc(var(--_depth) / 2)); }
.ac-push[aria-pressed="true"] .ac-push__collar { border-color: var(--_fill); }
.ac-push::after { /* hit ring: flashes out from the collar on every press */
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 4px solid var(--_fill);
  opacity: 0; pointer-events: none;
}
.ac-push.is-hit::after { animation: ac-ring 340ms var(--ac-snap); }
@keyframes ac-ring { 0% { opacity: .95; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.32); } }
.ac-push:disabled { cursor: not-allowed; }
.ac-push:disabled .ac-push__cap, .ac-push:disabled .ac-push__skirt { --_fill: var(--panel-sunk); --_deep: var(--panel-sunk); border-style: dashed; color: var(--ink-soft); }
.ac-cluster { display: inline-flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); box-sizing: border-box;
  border: 3px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-md); }
.ac-cluster--arc > :nth-child(4n+2) { margin-top: -12px; }
.ac-cluster--arc > :nth-child(4n+3) { margin-top: -18px; }
.ac-cluster--arc > :nth-child(4n+4) { margin-top: -12px; }
.ac-cluster--arc { padding-top: calc(var(--space-4) + 18px); }

/* ==========================================================================
   Power-up flash: rays burst out and a white flash fades (transform/opacity).
   ========================================================================== */
.ac-burst {
  position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px;
  pointer-events: none; z-index: 5; animation: ac-burst 460ms var(--ac-snap) backwards;
  opacity: 0;
}
.ac-burst svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ac-burst .r { stroke: var(--_burst, var(--yellow)); stroke-width: 7; stroke-linecap: round; }
.ac-burst .r2 { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
@keyframes ac-burst { 0% { opacity: 1; transform: scale(.35) rotate(-12deg); } 65% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(0); } }
.ac-flash { position: absolute; inset: -3px; border-radius: inherit; background: var(--ac-white); pointer-events: none; z-index: 4; opacity: 0; animation: ac-flash 300ms linear backwards; }
@keyframes ac-flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ==========================================================================
   Toggle: a slot track with a key-cap knob that snaps across.
   ========================================================================== */
.ac-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.ac-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ac-toggle__track {
  position: relative; flex: none; width: 66px; height: 36px; box-sizing: border-box;
  border: 3px solid var(--line); border-radius: var(--radius-full); background: var(--panel-sunk);
  box-shadow: var(--shadow-xs); transition: background-color var(--ac-t-lift) linear;
}
.ac-toggle__txt { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em; color: var(--ink-soft); }
.ac-toggle__txt--on { left: 9px; color: var(--on-color); opacity: 0; }
.ac-toggle__txt--off { right: 8px; }
.ac-toggle__knob {
  --_x: 0px;
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; box-sizing: border-box;
  border: 3px solid var(--line); border-radius: 50%; background: var(--panel);
  transform: translateX(var(--_x)); transition: transform var(--ac-t-pop) var(--ac-boing);
}
[data-theme="light"] .ac-toggle__knob { background: var(--panel); }
.ac-toggle__input:checked + .ac-toggle__track { background: var(--lime); }
.ac-toggle__input:checked + .ac-toggle__track .ac-toggle__knob { --_x: 30px; background: var(--panel); }
.ac-toggle__input:checked + .ac-toggle__track .ac-toggle__txt--on { opacity: 1; }
.ac-toggle__input:checked + .ac-toggle__track .ac-toggle__txt--off { opacity: 0; }
.ac-toggle:active .ac-toggle__knob { transform: translateX(var(--_x)) scale(.86); transition-duration: var(--ac-t-press); }
.ac-toggle__input:focus-visible + .ac-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; }
.ac-toggle__input:disabled + .ac-toggle__track { border-style: dashed; border-color: var(--ink-soft); box-shadow: none; }
.ac-toggle:has(.ac-toggle__input:disabled) { cursor: not-allowed; color: var(--ink-soft); }

/* ==========================================================================
   Checkbox + Radio: chunky boxes that tilt when chosen (Pop's selected tilt).
   ========================================================================== */
.ac-check, .ac-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ac-check__input, .ac-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ac-check__box, .ac-radio__box {
  position: relative; flex: none; width: 28px; height: 28px; box-sizing: border-box;
  border: 3px solid var(--line); background: var(--panel); color: var(--on-color);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ac-t-pop) var(--ac-boing), box-shadow var(--ac-t-pop) var(--ac-boing), background-color var(--ac-t-press) linear;
}
.ac-check__box { border-radius: var(--radius-sm); }
.ac-radio__box { border-radius: 50%; }
.ac-check__box .ac-icon { width: 18px; height: 18px; transform: scale(0) rotate(-20deg); transition: transform var(--ac-t-pop) var(--ac-boing); }
.ac-radio__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-color); transform: scale(0); transition: transform var(--ac-t-pop) var(--ac-boing); }
.ac-check__text, .ac-radio__text { display: flex; flex-direction: column; padding-top: 2px; font-weight: 600; }
.ac-check__hint { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-soft); }
@media (hover: hover) {
  .ac-check:hover .ac-check__box, .ac-radio:hover .ac-radio__box { transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); transition-timing-function: var(--ac-snap); transition-duration: var(--ac-t-lift); }
}
.ac-check__input:checked + .ac-check__box { background: var(--_tick, var(--yellow)); transform: translate(-1px, -1px) rotate(-6deg); box-shadow: var(--shadow-sm); }
.ac-check__input:checked + .ac-check__box .ac-icon { transform: none; }
.ac-radio__input:checked + .ac-radio__box { background: var(--cyan); transform: translate(-1px, -1px) rotate(-6deg); box-shadow: var(--shadow-sm); }
.ac-radio__input:checked + .ac-radio__box .ac-radio__dot { transform: none; }
.ac-check:active .ac-check__box, .ac-radio:active .ac-radio__box { transform: translate(2px, 2px); box-shadow: var(--shadow-press); transition: transform var(--ac-t-press) var(--ac-thunk), box-shadow var(--ac-t-press) var(--ac-thunk); }
.ac-check__input:focus-visible + .ac-check__box, .ac-radio__input:focus-visible + .ac-radio__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.ac-check__input:disabled + .ac-check__box, .ac-radio__input:disabled + .ac-radio__box { background: var(--panel-sunk); border-style: dashed; border-color: var(--ink-soft); box-shadow: none; transform: none; }
.ac-check:has(:disabled), .ac-radio:has(:disabled) { cursor: not-allowed; color: var(--ink-soft); }
.ac-radiogroup { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; }

/* ==========================================================================
   TextField: an outlined slot that lifts on focus and shakes on error.
   ========================================================================== */
.ac-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-field__label { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ac-field__wrap {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ac-t-lift) var(--ac-snap), box-shadow var(--ac-t-lift) var(--ac-snap);
}
.ac-field__wrap .ac-icon { color: var(--ink-soft); }
.ac-field__input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0; background: transparent; color: inherit; font: 500 16px/24px var(--font-body); outline: none; }
.ac-field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.ac-field__wrap:focus-within { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); outline: 3px solid var(--focus); outline-offset: 3px; }
.ac-field__hint { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.ac-field.is-error .ac-field__wrap { box-shadow: 4px 4px 0 var(--cherry); }
.ac-field.is-error .ac-field__wrap:focus-within { box-shadow: 6px 6px 0 var(--cherry); }
.ac-field.is-error .ac-field__hint { color: var(--ink); font-weight: 600; }
.ac-field__bang { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 2px solid var(--line); border-radius: 50%; background: var(--cherry); color: var(--on-color); font: 400 11px/1 var(--font-display); }
.ac-field.is-shaking .ac-field__wrap { animation: ac-shake 320ms var(--ac-snap); }
@keyframes ac-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-1deg); } 45% { transform: translateX(5px) rotate(.8deg); } 70% { transform: translateX(-3px); } 85% { transform: translateX(2px); } }
.ac-field.is-disabled .ac-field__wrap { background: var(--panel-sunk); border-style: dashed; border-color: var(--ink-soft); box-shadow: none; color: var(--ink-soft); }

/* ==========================================================================
   Tabs: the chosen tab is a tilted yellow cartridge.
   ========================================================================== */
.ac-tabs { display: inline-flex; gap: var(--space-1); padding: 4px 8px 8px 4px; flex-wrap: wrap; }
.ac-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; box-sizing: border-box;
  border: 3px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft);
  font: 700 14px/18px var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: transform var(--ac-t-pop) var(--ac-boing), color var(--ac-t-press) linear, background-color var(--ac-t-press) linear;
}
.ac-tab .ac-icon { width: 18px; height: 18px; }
@media (hover: hover) { .ac-tab:not([aria-selected="true"]):hover { color: var(--ink); background: var(--panel-sunk); } }
.ac-tab[aria-selected="true"] { background: var(--yellow); color: var(--on-color); border-color: var(--line); box-shadow: var(--shadow-sm); transform: rotate(-2deg); }
.ac-tab.is-popped { animation: ac-tab-pop var(--ac-t-pop) var(--ac-boing) backwards; }
@keyframes ac-tab-pop { from { transform: scale(.86) rotate(0); } }
.ac-tab:active { transform: translate(2px, 2px); }
.ac-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--on-color); color: var(--yellow); font: 400 11px/1 var(--font-display); }
.ac-tabpanel { padding: var(--space-4) 0 0; }
.ac-tabpanel.is-in { animation: ac-rise var(--ac-t-pop) var(--ac-snap) backwards; }

/* ==========================================================================
   SegmentedControl: a joystick gate. The puck snaps along the tray, leaning
   into the throw, then rights itself.
   ========================================================================== */
.ac-seg {
  --n: 3; --i: 0;
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 4px; box-sizing: border-box; min-width: calc(var(--n) * 96px);
  border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--panel-sunk); box-shadow: var(--shadow-xs);
}
.ac-seg__puck {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(var(--i) * 100%)); transition: transform 300ms var(--ac-boing); pointer-events: none;
}
.ac-seg__face {
  position: absolute; inset: 0; box-sizing: border-box; border: 3px solid var(--line); border-radius: 10px;
  background: var(--_puck, var(--cyan)); box-shadow: var(--shadow-xs);
}
[data-theme="light"] .ac-seg__face { border-color: var(--on-color); }
.ac-seg__puck.is-left .ac-seg__face { animation: ac-lean-l 340ms var(--ac-snap); }
.ac-seg__puck.is-right .ac-seg__face { animation: ac-lean-r 340ms var(--ac-snap); }
@keyframes ac-lean-r { 0% { transform: none; } 35% { transform: rotate(5deg) scaleX(1.06); } 70% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes ac-lean-l { 0% { transform: none; } 35% { transform: rotate(-5deg) scaleX(1.06); } 70% { transform: rotate(2deg); } 100% { transform: none; } }
.ac-seg__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft);
  font: 700 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: color 120ms linear 60ms;
}
.ac-seg__opt .ac-icon { width: 16px; height: 16px; }
@media (hover: hover) { .ac-seg__opt:not([aria-checked="true"]):hover { color: var(--ink); } }
.ac-seg__opt[aria-checked="true"] { color: var(--on-color); }
.ac-seg__opt:active { transform: translateY(1px); }

/* ==========================================================================
   Card: flat colour slab, ink outline, hard shadow. Interactive cards lift
   and tip; big cards use the plain snap (no overshoot) so they never jolt.
   ========================================================================== */
.ac-card {
  --_fill: var(--panel); --_on: var(--ink);
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border: 3px solid var(--line); border-radius: var(--radius-lg);
  background: var(--_fill); color: var(--_on); box-shadow: var(--shadow-md);
}
.ac-card__head { display: flex; align-items: center; gap: var(--space-3); }
.ac-card__title { margin: 0; font: 400 22px/26px var(--font-display); }
.ac-card__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); flex-wrap: wrap; }
.ac-card--interactive { cursor: pointer; text-decoration: none; transition: transform var(--ac-t-lift) var(--ac-snap), box-shadow var(--ac-t-lift) var(--ac-snap); }
@media (hover: hover) { .ac-card--interactive:hover { transform: translate(-3px, -3px) rotate(-.8deg); box-shadow: var(--shadow-lg); } }
.ac-card--interactive:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); transition-duration: var(--ac-t-press); }
.ac-card--selected { transform: rotate(-1.2deg); box-shadow: var(--shadow-lg); }
.ac-card--flat { box-shadow: none; }
.ac-enter { animation: ac-pop var(--ac-t-pop) var(--ac-boing) backwards; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes ac-pop { from { opacity: 0; transform: scale(.92) translateY(6px); } }
@keyframes ac-rise { from { opacity: 0; transform: translateY(8px); } }
.ac-card__deco { position: absolute; right: -14px; top: -14px; width: 46px; height: 46px; pointer-events: none; }

/* ==========================================================================
   Badge + Tag
   ========================================================================== */
.ac-badge {
  --_fill: var(--yellow); --_on: var(--on-color);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 24px; min-width: 24px; padding: 0 9px; box-sizing: border-box;
  border: 2px solid var(--line); border-radius: var(--radius-full); background: var(--_fill); color: var(--_on);
  font: 700 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] .ac-badge { border-color: var(--on-color); }
.ac-badge .ac-icon { width: 13px; height: 13px; }
.ac-badge--count { padding: 0 6px; font: 400 12px/1 var(--font-display); letter-spacing: 0; }
.ac-badge--plain { box-shadow: none; }
.ac-badge.is-bumped { animation: ac-bump var(--ac-t-pop) var(--ac-boing); }
@keyframes ac-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: none; } }
.ac-tag { padding-right: 4px; }
.ac-tag:not(:has(.ac-tag__x)) { padding-right: 11px; }
.ac-tag__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--yellow); color: var(--on-color); cursor: pointer; transition: transform var(--ac-t-pop) var(--ac-boing); }
.ac-tag__x .ac-icon { width: 11px; height: 11px; }
@media (hover: hover) { .ac-tag__x:hover { transform: rotate(90deg) scale(1.1); } }
.ac-tag.is-leaving { transform: scale(.4) rotate(-10deg); opacity: 0; transition: transform 200ms var(--ac-snap), opacity 200ms linear; }

/* ==========================================================================
   Avatar
   ========================================================================== */
.ac-avatar {
  --_s: 44px; --_fill: var(--pink); --_on: var(--on-color);
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); box-sizing: border-box;
  border: 3px solid var(--line); border-radius: 50%; background: var(--_fill); color: var(--_on);
  font: 400 calc(var(--_s) * .36)/1 var(--font-display); box-shadow: var(--shadow-xs);
  transition: transform var(--ac-t-pop) var(--ac-boing);
}
[data-theme="light"] .ac-avatar { border-color: var(--on-color); }
.ac-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ac-avatar__p {
  position: absolute; right: -8px; bottom: -6px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: var(--radius-full);
  background: var(--on-color); color: var(--yellow); font: 400 9px/1 var(--font-display);
}
.ac-avatar__dot { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--line); border-radius: 50%; background: var(--lime); }
@media (hover: hover) { .ac-avatar:hover { transform: rotate(-8deg) scale(1.06); } }
.ac-avatars { display: inline-flex; padding-left: 10px; }
.ac-avatars > .ac-avatar { margin-left: -10px; }
@media (hover: hover) { .ac-avatars > .ac-avatar:hover { transform: translateY(-5px) rotate(-6deg); z-index: 2; } }
.ac-avatar--more { --_fill: var(--on-color); --_on: var(--yellow); font-size: calc(var(--_s) * .3); }

/* ==========================================================================
   Tooltip
   ========================================================================== */
.ac-tiphost { position: relative; display: inline-flex; }
.ac-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20;
  padding: 7px 11px; box-sizing: border-box; max-width: 240px; width: max-content;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--on-color); color: var(--yellow);
  font: 700 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-align: center;
  box-shadow: var(--shadow-xs); pointer-events: none;
  opacity: 0; transform: translate(-50%, 6px) scale(.86); transform-origin: 50% 100%;
  transition: opacity 120ms linear, transform 120ms var(--ac-snap);
}
.ac-tip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; margin-left: -6px; background: var(--on-color); border: 2px solid var(--line); border-top: 0; border-left: 0; transform: rotate(45deg); }
.ac-tip--bottom { bottom: auto; top: calc(100% + 12px); transform-origin: 50% 0; transform: translate(-50%, -6px) scale(.86); }
.ac-tip--bottom::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.ac-tiphost:hover .ac-tip, .ac-tiphost:focus-within .ac-tip, .ac-tip.is-open {
  opacity: 1; transform: translate(-50%, 0) scale(1);
  transition: opacity 160ms linear 260ms, transform var(--ac-t-pop) var(--ac-boing) 260ms;
}
.ac-tip.is-open { transition-delay: 0ms; }

/* ==========================================================================
   Toast: "PLAYER 1 READY" slides in like a marquee and burns a fuse.
   ========================================================================== */
.ac-toasts { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ac-toasts--inline { position: relative; top: auto; right: auto; width: min(380px, 100%); }
.ac-toast {
  --_fill: var(--lime);
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; padding: 12px 10px 14px 12px; box-sizing: border-box; overflow: hidden;
  border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-md); pointer-events: auto;
  animation: ac-marquee-in var(--ac-t-slide) var(--ac-slide) backwards;
  transition: transform 240ms var(--ac-snap), opacity 240ms linear;
}
.ac-toast.is-leaving { transform: translateX(calc(100% + 32px)); opacity: 0; }
@keyframes ac-marquee-in { from { transform: translateX(calc(100% + 32px)); } }
.ac-toast__tile {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; box-sizing: border-box;
  border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--_fill); color: var(--on-color);
  font: 400 15px/1 var(--font-display);
}
[data-theme="light"] .ac-toast__tile { border-color: var(--on-color); }
.ac-toast__tile .ac-icon { width: 22px; height: 22px; }
.ac-toast__text { min-width: 0; overflow: hidden; }
.ac-toast__title { display: block; font: 400 16px/20px var(--font-display); letter-spacing: .02em; white-space: nowrap; animation: ac-marquee-text 420ms var(--ac-slide) 90ms backwards; }
.ac-toast__body { display: block; font-size: 14px; line-height: 20px; color: var(--ink-soft); animation: ac-rise 300ms var(--ac-snap) 160ms backwards; }
@keyframes ac-marquee-text { from { transform: translateX(60px); opacity: 0; } }
.ac-toast__fuse { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--_fill); transform-origin: 0 50%; animation: ac-fuse linear forwards; animation-duration: var(--_dur, 4s); }
@keyframes ac-fuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ac-toast:hover .ac-toast__fuse { animation-play-state: paused; }
.ac-toast--info { --_fill: var(--cyan); }
.ac-toast--warn { --_fill: var(--yellow); }
.ac-toast--error { --_fill: var(--cherry); }
.ac-toast--reward { --_fill: var(--pink); }

/* ==========================================================================
   Modal
   ========================================================================== */
.ac-scrim { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: var(--space-4); box-sizing: border-box; background: rgba(8, 7, 15, .66); animation: ac-fade 200ms linear backwards; transition: opacity 180ms linear; }
.ac-scrim.is-leaving { opacity: 0; }
@keyframes ac-fade { from { opacity: 0; } }
.ac-modal {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  margin: 0 9px 9px 0; padding: var(--space-8); border: 3px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: ac-modal-in 360ms var(--ac-boing) backwards;
  transition: transform 180ms var(--ac-snap), opacity 180ms linear;
}
.ac-scrim.is-leaving .ac-modal { transform: scale(.94) translateY(8px); opacity: 0; }
@keyframes ac-modal-in { from { opacity: 0; transform: translateY(18px) scale(.9) rotate(-2deg); } }
.ac-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ac-modal__head .ac-col { flex: 1; gap: var(--space-2); align-items: flex-start; }
.ac-modal__title { margin: 0; font: 400 28px/32px var(--font-display); }
.ac-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); }

/* ==========================================================================
   Progress: a segmented energy meter that springs to its value.
   ========================================================================== */
.ac-progress { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ac-progress__label { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.ac-progress__value { font: 400 14px/16px var(--font-display); font-variant-numeric: tabular-nums; }
.ac-progress__track {
  --_fill: var(--lime);
  position: relative; height: 26px; box-sizing: border-box; overflow: hidden;
  border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-sunk); box-shadow: var(--shadow-xs);
}
.ac-progress__fill { position: absolute; inset: 3px; border-radius: 3px; background: var(--_fill); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform var(--ac-t-roll) var(--ac-boing); }
.ac-progress__track::after { /* static segment notches: the energy-meter look */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, var(--panel-sunk) 15px 18px);
}
.ac-progress--sm .ac-progress__track { height: 14px; border-width: 2px; }
.ac-progress--sm .ac-progress__fill { inset: 2px; }
.ac-progress--sm .ac-progress__track::after { display: none; }
.ac-progress.is-full .ac-progress__value { color: var(--_full, inherit); }

/* ==========================================================================
   ScoreCounter: one tile per digit; each digit rolls on its own strip,
   right-hand digits first.
   ========================================================================== */
.ac-score { display: inline-flex; align-items: flex-end; gap: 4px; font: 400 44px/1 var(--font-display); }
.ac-score__digit {
  position: relative; display: block; width: .82em; height: 1.18em; box-sizing: border-box; overflow: hidden;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--on-color); color: var(--yellow);
  box-shadow: var(--shadow-xs);
}
.ac-score__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * (4px - 1.18em))); transition: transform var(--ac-t-roll) var(--ac-boing); transition-delay: calc(var(--k, 0) * 45ms); }
.ac-score__strip span { display: flex; align-items: center; justify-content: center; flex: none; height: calc(1.18em - 4px); }
.ac-score__sep { padding: 0 1px .1em; color: var(--_on, var(--ink)); }
.ac-score--plain .ac-score__digit { width: .72em; border-color: transparent; background: transparent; color: inherit; box-shadow: none; border-radius: 0; }
.ac-score--plain { gap: 0; }
.ac-score__float {
  position: absolute; right: 0; top: -6px; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px; box-sizing: border-box;
  border: 2px solid var(--line); border-radius: var(--radius-full); background: var(--lime); color: var(--on-color);
  font: 400 13px/1 var(--font-display); opacity: 0;
  animation: ac-float 400ms var(--ac-snap) backwards;
}
@keyframes ac-float { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 30% { opacity: 1; transform: translateY(-6px) scale(1.05); } 100% { opacity: 0; transform: translateY(-26px); } }
.ac-scorewrap { position: relative; display: inline-flex; }

/* ==========================================================================
   Widgets
   ========================================================================== */
/* stat / score card */
.ac-stat .ac-score { font-size: 40px; }
.ac-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ac-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.ac-bars i { display: block; width: 12px; height: 100%; box-sizing: border-box; border: 2px solid var(--line); border-radius: 3px 3px 0 0; background: var(--_bar, var(--cyan)); transform-origin: 50% 100%; transform: scaleY(var(--h)); transition: transform var(--ac-t-roll) var(--ac-boing); animation: ac-grow 360ms var(--ac-boing) backwards; animation-delay: calc(var(--d, 0) * 40ms); }
[data-theme="light"] .ac-bars i { border-color: var(--on-color); }
.ac-bars i:last-child { --_bar: var(--yellow); }
@keyframes ac-grow { from { transform: scaleY(0); } }

/* leaderboard */
.ac-board__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-board__row {
  display: grid; grid-template-columns: 38px 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: 7px 12px 7px 7px; box-sizing: border-box; border: 3px solid transparent; border-radius: var(--radius-md);
  animation: ac-row-in 320ms var(--ac-boing) backwards; animation-delay: calc(var(--d, 0) * 60ms);
  transition: transform var(--ac-t-lift) var(--ac-snap), background-color var(--ac-t-lift) linear;
}
@keyframes ac-row-in { from { opacity: 0; transform: translateX(-18px) scale(.94); } }
@media (hover: hover) { .ac-board__row:hover { background: var(--panel-sunk); } }
.ac-board__row.is-you { background: var(--yellow); color: var(--on-color); border-color: var(--line); box-shadow: var(--shadow-sm); transform: rotate(-1deg); --_soft: rgba(21, 19, 31, .78); }
[data-theme="light"] .ac-board__row.is-you { border-color: var(--on-color); }
.ac-board__rank {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box;
  border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-sunk); color: var(--ink);
  font: 400 15px/1 var(--font-display);
}
.ac-board__row:nth-child(1) .ac-board__rank { background: var(--yellow); color: var(--on-color); }
.ac-board__row:nth-child(2) .ac-board__rank { background: var(--cyan); color: var(--on-color); }
.ac-board__row:nth-child(3) .ac-board__rank { background: var(--pink); color: var(--on-color); }
.ac-board__row.is-you .ac-board__rank { background: var(--on-color); color: var(--yellow); }
.ac-board__who { min-width: 0; display: flex; flex-direction: column; }
.ac-board__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-board__meta { font-size: 13px; line-height: 18px; color: var(--_soft, var(--ink-soft)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-board__pts { font: 400 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ac-board .ac-avatar { --_s: 40px; font-size: 14px; }

/* level / XP card */
.ac-level__top { display: flex; align-items: center; gap: var(--space-4); }
.ac-level__badge {
  position: relative; flex: none; width: 76px; height: 76px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--line); border-radius: 50%; background: var(--grape); color: var(--on-color); box-shadow: var(--shadow-sm);
}
[data-theme="light"] .ac-level__badge { border-color: var(--on-color); }
.ac-level__badge small { font: 700 10px/1 var(--font-body); letter-spacing: .1em; }
.ac-level__badge b { font: 400 30px/1 var(--font-display); font-weight: 400; }
.ac-level__badge.is-up { animation: ac-levelup 420ms var(--ac-boing); }
@keyframes ac-levelup { 0% { transform: none; } 35% { transform: scale(1.22) rotate(-10deg); } 100% { transform: none; } }
.ac-level__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ac-level__perks { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==========================================================================
   Reduced motion: keep every state, drop the movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [class*="ac-"], [class*="ac-"]::before, [class*="ac-"]::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .ac-coin__credit, .ac-btn__dots i { animation: none !important; }
  .ac-burst, .ac-flash, .ac-score__float, .ac-push::after { display: none !important; }
  .ac-toast__fuse { animation: none !important; }
}