:root {
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ts: 1;
  --fs-xs: calc(10.5px * var(--ts));
  --fs-s: calc(12px * var(--ts));
  --fs-m: calc(13.5px * var(--ts));
  --fs-l: calc(15.5px * var(--ts));
  --fs-xl: calc(18px * var(--ts));
  --fs-xxl: calc(24px * var(--ts));
  --fs-hero: calc(34px * var(--ts));
  --fs-num: calc(13px * var(--ts));

  --ink: #2a2c5a;
  --ink-2: #5d6194;
  --ink-3: #8c90b8;
  --ink-inv: #ffffff;
  --card: rgba(255, 255, 255, 0.9);
  --card-solid: #ffffff;
  --card-2: #f2f5ff;
  --card-3: #e7ecff;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --line: rgba(42, 44, 90, 0.1);
  --veil: rgba(30, 34, 80, 0.42);
  --accent: #ff5a6e;
  --accent-2: #ff8a5c;
  --accent-ink: #ffffff;
  --accent-dark: #d93a55;
  --ok: #26b36a;
  --ok-2: #4fd38c;
  --ok-dark: #17864c;
  --blue: #3f7cff;
  --blue-2: #6aa6ff;
  --blue-dark: #2b5bd1;
  --violet: #8d55ff;
  --violet-2: #b48bff;
  --violet-dark: #6a37d6;
  --gold: #ffc23d;
  --gold-2: #ffdf7a;
  --gold-dark: #d49413;
  --gold-ink: #6b4300;
  --warn: #ff9a3c;
  --danger: #ff4f5e;
  --star-on: #ffc93c;
  --off: #c8cce6;
  --dot: #ff3d5f;
  --track: rgba(42, 44, 90, 0.12);
  --vip-a: #2b2052;
  --vip-b: #5a3fb8;
  --new-a: #ff4f8b;
  --new-b: #ff8a3c;
  --drop-a: #e0603a;
  --drop-b: #6b3a8c;
  --drop-tile: rgba(255, 255, 255, 0.16);
  --drop-tile-on: rgba(255, 255, 255, 0.26);
  --drop-ink-2: rgba(255, 255, 255, 0.84);
  --drop-glow: rgba(255, 214, 140, 0.55);

  --i-coin: #ffc23d;
  --i-coin-edge: #c98a0e;
  --i-gem: #b07cff;
  --i-gem-edge: #6f3fd6;
  --i-gem-on-btn: #f3ebff;
  --i-shine: rgba(255, 255, 255, 0.75);
  --i-star: #ffc93c;
  --i-star-edge: #e09b16;
  --i-star-off: #dfe2f3;
  --i-star-off-edge: #c3c8e2;
  --i-balloon: #ff5a6e;
  --i-string: #8c90b8;
  --i-cut: #ffffff;
  --i-fuse: #a8683a;
  --i-spark: #ffc23d;
  --i-cross: #ff4f5e;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 26px;
  --r-pill: 999px;
  --ctl-h: 36px;
  --ctl-h-s: 28px;
  --ctl-h-l: 46px;
  --icon: 18px;
  --icon-s: 14px;
  --icon-l: 24px;
  --tab-h: 60px;
  --hud-h: 50px;
  --tools-h: 34px;
  --sheet-max: 460px;
  --shadow-1: 0 2px 8px rgba(40, 50, 120, 0.12);
  --shadow-2: 0 10px 30px rgba(40, 50, 120, 0.22);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, 0.14);
  --t-fast: 0.16s;
  --t-mid: 0.28s;
  --gutter: 12px;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --hit-pad: 6px;
  --short-a: 0.5;

  --sky-a: #6ec3ff;
  --sky-b: #a8dcff;
  --sky-c: #ffe3f0;
  --sun: rgba(255, 244, 196, 0.9);
  --cloud: rgba(255, 255, 255, 0.82);
  --deco-a: rgba(255, 255, 255, 0.85);
  --deco-b: rgba(255, 122, 160, 0.35);
  --bg-deco: clouds;
  --bg-img: none;
  --hud-ink: #2a2c5a;
  --hud-ink-2: #5d6194;

  --c-r: #ff4f5e;
  --c-o: #ff9a3c;
  --c-y: #ffd23f;
  --c-l: #a5e35a;
  --c-g: #2fbf71;
  --c-c: #55d4ff;
  --c-b: #3f7cff;
  --c-p: #9b5cff;
  --c-k: #ff7ac6;
  --c-w: #fdfbff;
  --c-n: #a8683a;
  --c-d: #3b3e74;

  --board: rgba(255, 255, 255, 0.72);
  --board-edge: rgba(255, 255, 255, 0.95);
  --field: rgba(120, 150, 220, 0.12);
  --field-dot: rgba(60, 80, 160, 0.14);
  --belt: #3a3f7a;
  --tread: rgba(255, 255, 255, 0.2);
  --rail: rgba(255, 255, 255, 0.55);
  --gate: #ffc23d;
  --gate-ink: #3a3f7a;
  --slot: rgba(255, 255, 255, 0.5);
  --slot-edge: rgba(255, 255, 255, 0.95);
  --lock: rgba(42, 44, 90, 0.35);
  --rim: rgba(30, 20, 70, 0.32);
  --shine: rgba(255, 255, 255, 0.7);
  --shade: rgba(30, 20, 70, 0.14);
  --cart-edge: #2f3266;
  --cart-trim: rgba(255, 255, 255, 0.45);
  --wheel: #2f3266;
  --deco: rgba(255, 255, 255, 0.7);
  --cart-shape: box;
  --cart-deco: none;
  --cart-radius: 0.28;
  --cart-pattern: none;
  --cart-pattern-ink: rgba(255, 255, 255, 0.3);
  --cart-pattern-scale: 1;
  --cart-img: none;
  --dart: #ffffff;
  --dart-trail: rgba(255, 255, 255, 0.75);
  --dart-shape: arrow;
  --balloon-style: glossy;
  --balloon-gloss: 0.17;
  --ring: rgba(255, 255, 255, 0.9);
  --pip: rgba(42, 44, 90, 0.18);
  --pip-on: #ffc23d;
  --spark: #ffb21e;
  --flash: #ffffff;
  --text-stroke: rgba(36, 30, 84, 0.88);
  --canvas-ink: #ffffff;
  --sym: rgba(25, 20, 60, 0.72);
  --glow: rgba(255, 255, 255, 0.85);
  --shadow: rgba(40, 60, 140, 0.25);
  --select: #ffc23d;
  --muted: rgba(42, 44, 90, 0.55);
  --gap: 7px;
  --slot-max: 50px;
  --cart-max: 58px;
  --cell-max: 34px;
  --board-radius: 22px;
  --pip-size: 6px;
  --particle: 4px;
  --fs-float: 22px;
  --fs-banner: 30px;
  --fs-sub: 16px;
  --fs-small: 12px;
  --large-scale: 1.18;
}

html.large {
  --ctl-h: 46px;
  --ctl-h-s: 36px;
  --icon: 22px;
  --icon-s: 17px;
  --tab-h: 70px;
  --hud-h: 58px;
  --tools-h: 42px;
  --hit-pad: 10px;
}

#probe.cart-tub { --cart-shape: tub; --cart-radius: 0.42; }
#probe.cart-candy { --cart-deco: stripes; --deco: rgba(255, 255, 255, 0.45); --cart-trim: rgba(255, 255, 255, 0.7); }
#probe.cart-wood { --cart-deco: planks; --deco: rgba(80, 40, 10, 0.28); --cart-edge: #5a3418; --wheel: #5a3418; --cart-trim: #c88a52; }
#probe.cart-rocket { --cart-deco: fins; --deco: #e8edff; --cart-trim: #e8edff; --cart-radius: 0.4; }
#probe.cart-starry { --cart-deco: star; --deco: #ffe27a; --cart-trim: rgba(255, 226, 122, 0.8); }
#probe.cart-gold { --cart-deco: crown; --deco: #ffc23d; --cart-trim: #ffc23d; --cart-edge: #8a5a00; --wheel: #8a5a00; }
#probe.cart-sunny { --cart-deco: dots; --deco: rgba(255, 240, 160, 0.9); --cart-trim: #ffe27a; }
#probe.cart-royal { --cart-deco: crown; --deco: #ffd55c; --cart-trim: #b48bff; --cart-edge: #3b1f7a; --wheel: #3b1f7a; }
#probe.cart-comet { --cart-deco: star; --deco: #ffffff; --cart-trim: #9fd8ff; --cart-radius: 0.45; }
#probe.cart-pumpkin { --cart-deco: stem; --deco: #2fbf71; --cart-trim: #ff9a3c; --cart-radius: 0.45; --cart-edge: #4a2a10; --wheel: #4a2a10; }
#probe.cart-sleigh { --cart-deco: stripes; --deco: rgba(255, 255, 255, 0.55); --cart-trim: #ffffff; --wheel: #b9c8e8; }
#probe.cart-hearts { --cart-deco: heart; --deco: #ff7ac6; --cart-trim: #ffd0e8; }
#probe.cart-surf { --cart-deco: sail; --deco: #ffffff; --cart-trim: #55d4ff; --cart-radius: 0.4; }

#probe.belt-candy { --belt: #ff7aa8; --tread: rgba(255, 255, 255, 0.55); --rail: #ffffff; --gate: #ffffff; --gate-ink: #ff5a6e; }
#probe.belt-mint { --belt: #2fae8e; --tread: rgba(255, 255, 255, 0.35); --rail: #c9ffe9; }
#probe.belt-wood { --belt: #8a5530; --tread: rgba(255, 220, 170, 0.35); --rail: #d9a46f; --gate-ink: #5a3418; }
#probe.belt-neon { --belt: #1b1240; --tread: #55d4ff; --rail: #ff7ac6; --gate: #55d4ff; --gate-ink: #1b1240; }
#probe.belt-rainbow { --belt: #6a4bd6; --tread: rgba(255, 230, 120, 0.6); --rail: #ffd23f; }
#probe.belt-gold { --belt: #b07b12; --tread: rgba(255, 245, 200, 0.6); --rail: #ffe27a; --gate: #fff3c4; --gate-ink: #8a5a00; }
#probe.belt-cosmic { --belt: #24184f; --tread: rgba(180, 160, 255, 0.55); --rail: #b48bff; --gate: #b48bff; --gate-ink: #24184f; }
#probe.belt-frost { --belt: #6aa6d6; --tread: rgba(255, 255, 255, 0.6); --rail: #ffffff; --gate: #ffffff; --gate-ink: #3b6fa8; }

#probe.dart-feather { --dart: #fff4d6; --dart-trail: rgba(255, 230, 170, 0.7); }
#probe.dart-star { --dart: #ffd23f; --dart-trail: rgba(255, 210, 63, 0.65); --dart-shape: star; }
#probe.dart-heart { --dart: #ff7ac6; --dart-trail: rgba(255, 122, 198, 0.6); --dart-shape: heart; }
#probe.dart-rainbow { --dart: #ffffff; --dart-trail: rgba(155, 92, 255, 0.6); }
#probe.dart-gold { --dart: #ffc23d; --dart-trail: rgba(255, 194, 61, 0.7); }

#probe.balloon-matte { --balloon-style: matte; --shade: rgba(30, 20, 70, 0.08); }
#probe.balloon-pearl { --balloon-style: pearl; --shine: rgba(255, 255, 255, 0.85); }
#probe.balloon-neon { --balloon-style: neon; --glow: rgba(255, 255, 255, 0.55); }
#probe.balloon-jelly { --balloon-style: jelly; --balloon-gloss: 0.22; }
#probe.balloon-candy { --balloon-style: candy; }

.bg-sunrise { --sky-a: #ff9fb8; --sky-b: #ffd1a8; --sky-c: #fff2c9; --sun: rgba(255, 236, 170, 0.95); }
.bg-sunset { --hud-ink: #ffffff; --hud-ink-2: rgba(255, 255, 255, 0.82); --sky-a: #5b4bd6; --sky-b: #ff7aa8; --sky-c: #ffb36b; --sun: rgba(255, 210, 120, 0.9); --cloud: rgba(255, 220, 230, 0.6); }
.bg-night { --hud-ink: #ffffff; --hud-ink-2: rgba(255, 255, 255, 0.82); --sky-a: #141a4a; --sky-b: #2b2f7a; --sky-c: #5a4fb0; --sun: rgba(255, 250, 220, 0.85); --cloud: rgba(255, 255, 255, 0.12); --bg-deco: stars; }
.bg-aurora { --hud-ink: #ffffff; --hud-ink-2: rgba(255, 255, 255, 0.82); --sky-a: #0f2a4a; --sky-b: #1f6b7a; --sky-c: #6fe0b8; --sun: rgba(200, 255, 230, 0.5); --cloud: rgba(180, 255, 220, 0.18); --bg-deco: stars; }
.bg-meadow { --sky-a: #7fd0ff; --sky-b: #c6f0ff; --sky-c: #c9f2a8; --deco-b: rgba(47, 191, 113, 0.35); --bg-deco: leaves; }
.bg-ocean { --sky-a: #3aa0e0; --sky-b: #7fd6f0; --sky-c: #c8f4f0; --bg-deco: bubbles; }
.bg-candyland { --sky-a: #ff9fd0; --sky-b: #ffd0ec; --sky-c: #fff0b8; --cloud: rgba(255, 255, 255, 0.9); --bg-deco: hearts; }
.bg-space { --hud-ink: #ffffff; --hud-ink-2: rgba(255, 255, 255, 0.82); --sky-a: #0b0b2a; --sky-b: #2a1660; --sky-c: #6a2fa0; --sun: rgba(255, 180, 240, 0.6); --cloud: rgba(255, 255, 255, 0.08); --bg-deco: stars; }
.bg-spooky { --hud-ink: #ffffff; --hud-ink-2: rgba(255, 255, 255, 0.82); --sky-a: #2a1747; --sky-b: #5b2f7a; --sky-c: #ff8a3c; --sun: rgba(255, 230, 160, 0.9); --cloud: rgba(200, 180, 255, 0.2); --bg-deco: bats; }
.bg-snowy { --sky-a: #8fb8e8; --sky-b: #cfe3f8; --sky-c: #f4f8ff; --bg-deco: snow; }
.bg-rosy { --sky-a: #ff8fb0; --sky-b: #ffc4d6; --sky-c: #fff0f4; --bg-deco: hearts; }
.bg-beach { --sky-a: #4cc4ff; --sky-b: #a8ecff; --sky-c: #ffe7a8; --bg-deco: clouds; }

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs-m);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 55%, var(--sky-c));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

#probe {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

#bgc,
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#game {
  z-index: 2;
}

#frame {
  position: fixed;
  top: calc(var(--safe-t) + var(--hud-h) + var(--tools-h) + var(--sp-1));
  bottom: calc(var(--safe-b) + var(--sp-3));
  left: var(--gutter);
  right: var(--gutter);
  pointer-events: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.ic {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  display: block;
}

.ic.s {
  width: var(--icon-s);
  height: var(--icon-s);
}

.ic.l {
  width: var(--icon-l);
  height: var(--icon-l);
}

.num {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 55%, var(--sky-c));
  transition: opacity var(--t-mid);
}

#boot.gone {
  opacity: 0;
  pointer-events: none;
}

.boot-logo {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  background: url('icon.svg') center / cover;
  box-shadow: var(--shadow-2);
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-6px);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px 0 5px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-1);
  font-weight: 900;
  font-size: var(--fs-num);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pill .plus {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--ink-inv);
}

.pill .plus .ic {
  width: 12px;
  height: 12px;
}

.bump {
  animation: bump 0.24s ease-out;
}

@keyframes bump {
  from {
    transform: scale(1.22);
  }
}

#hud {
  position: fixed;
  z-index: 5;
  top: var(--safe-t);
  left: 0;
  right: 0;
  height: var(--hud-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}

#hud > * {
  pointer-events: auto;
}

.round {
  display: grid;
  place-items: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

.hud-l {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: start;
}

.hud-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.hud-title {
  font-weight: 900;
  font-size: var(--fs-s);
  color: var(--hud-ink-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hud-score {
  font-weight: 900;
  font-size: var(--fs-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--hud-ink);
}

.hud-stars {
  display: flex;
  gap: 1px;
}

.hud-stars .ic {
  width: 14px;
  height: 14px;
  transition: opacity var(--t-mid), transform var(--t-mid);
}

.hud-stars .lost {
  opacity: 0.35;
  transform: scale(0.82);
  filter: grayscale(1);
}

.hud-r {
  justify-self: end;
}

#tools {
  position: fixed;
  z-index: 5;
  top: calc(var(--safe-t) + var(--hud-h));
  left: 0;
  right: 0;
  height: var(--tools-h);
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  pointer-events: none;
}

.tool {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: calc(var(--tools-h) - 6px);
  padding: 0 10px 0 7px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow-1);
  font-weight: 800;
  font-size: var(--fs-s);
  color: var(--ink);
  white-space: nowrap;
}

.tool .ic {
  color: var(--violet);
}

.tool .count {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--ink-inv);
  font-size: var(--fs-xs);
  font-weight: 900;
}

.tool .count.buy {
  background: var(--ok);
}

.tool.on {
  background: var(--violet);
  color: var(--ink-inv);
}

.tool.on .ic {
  color: var(--ink-inv);
}

.tool:disabled {
  opacity: 0.45;
}

#hint {
  position: fixed;
  z-index: 8;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: var(--shadow-2);
  font-weight: 800;
  font-size: var(--fs-s);
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: hint 1.2s ease-in-out infinite;
}

#hint::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--card-solid);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes hint {
  50% {
    margin-top: -5px;
  }
}

#home {
  position: fixed;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + var(--sp-2)) var(--gutter) calc(var(--safe-b) + var(--tab-h) + var(--sp-3));
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.me {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.lvl {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-2), var(--blue));
  color: var(--ink-inv);
  font-weight: 900;
  font-size: var(--fs-s);
  box-shadow: var(--shadow-1), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.xp {
  flex: 1;
  max-width: 96px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}

.xp i,
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-2), var(--blue));
}

.purse {
  display: flex;
  gap: 6px;
}

.logo {
  margin: var(--sp-4) auto 0;
  text-align: center;
}

.logo h1 {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-inv);
  text-shadow: 0 3px 0 var(--accent-dark), 0 6px 18px rgba(80, 40, 120, 0.35);
}

.logo h1 b {
  color: var(--gold-2);
}

.logo p {
  margin: 6px 0 0;
  font-weight: 800;
  font-size: var(--fs-s);
  color: var(--hud-ink-2);
}

.rails {
  position: absolute;
  top: calc(var(--safe-t) + 56px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rails.l {
  left: var(--gutter);
}

.rails.r {
  right: var(--gutter);
}

.rail {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--ctl-h) + 6px);
  height: calc(var(--ctl-h) + 6px);
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

.rail .ic {
  width: 22px;
  height: 22px;
}

.rail small {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inv);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  line-height: 14px;
}

.dot {
  position: absolute;
  top: -6px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--dot);
  color: var(--ink-inv);
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--card-solid);
}

.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-3) 0;
}

.next {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(62vw, 250px);
  max-height: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bob 3.2s ease-in-out infinite;
}

.next canvas {
  width: 100%;
  aspect-ratio: 1;
  max-height: 34vh;
}

.next-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-m);
  font-weight: 900;
  color: var(--ink);
}

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 8px 10px;
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow-1);
  text-align: left;
  min-width: 0;
}

.mode .badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--ink-inv);
  flex: none;
}

.mode .badge.endless {
  background: linear-gradient(135deg, var(--violet-2), var(--violet));
}

.mode .badge.daily {
  background: linear-gradient(135deg, var(--gold-2), var(--warn));
}

.mode .badge.event {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

.mode .badge.levels {
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
}

.mode b {
  display: block;
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.15;
}

.mode span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.25;
}

.mode .txt {
  min-width: 0;
}

.mode.wide {
  grid-column: span 2;
}

.play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: calc(var(--ctl-h-l) + 8px);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-weight: 900;
  font-size: var(--fs-xl);
  box-shadow: 0 5px 0 var(--accent-dark), var(--shadow-2);
  letter-spacing: 0.01em;
}

.play small {
  font-size: var(--fs-s);
  font-weight: 800;
  opacity: 0.9;
}

.play:active,
.btn:active,
.mode:active,
.rail:active,
.tab:active {
  transform: translateY(2px);
}

#tabs {
  position: fixed;
  z-index: 6;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--safe-b) + var(--sp-2));
  height: var(--tab-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0 4px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink-2);
  min-width: 0;
}

.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab .ic {
  width: 22px;
  height: 22px;
}

.tab.mid .ic {
  width: 26px;
  height: 26px;
}

.tab.mid .bubble {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-top: -22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 4px 0 var(--gold-dark), var(--shadow-1);
}

.tab .dot {
  top: -4px;
  right: calc(50% - 20px);
}

#layer {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

.veil {
  position: absolute;
  inset: 0;
  background: var(--veil);
  pointer-events: auto;
  animation: fade var(--t-mid) ease-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: var(--sheet-max);
  max-height: calc(100% - var(--safe-t) - 28px);
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--card-2);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: up var(--t-mid) cubic-bezier(0.2, 0.9, 0.3, 1.1);
  padding-bottom: var(--safe-b);
}

.sheet.full {
  height: calc(100% - var(--safe-t) - 20px);
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 2 * var(--gutter) - 12px);
  max-width: 360px;
  max-height: calc(100% - var(--safe-t) - var(--safe-b) - 32px);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  border-radius: var(--r-xl);
  background: var(--card-2);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: pop var(--t-mid) cubic-bezier(0.2, 0.9, 0.3, 1.25);
  overflow: hidden;
}

@keyframes up {
  from {
    transform: translate(-50%, 40%);
    opacity: 0;
  }
}

@keyframes pop {
  from {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
  }
}

.head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
}

.head h2 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: 1.15;
  min-width: 0;
}

.head .x {
  display: grid;
  place-items: center;
  width: var(--ctl-h-s);
  height: var(--ctl-h-s);
  border-radius: 50%;
  background: var(--card-3);
  color: var(--ink-2);
}

.head .x .ic {
  width: 14px;
  height: 14px;
}

.body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sp-3) var(--sp-4);
  -webkit-overflow-scrolling: touch;
}

.foot {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex;
  gap: var(--sp-2);
}

.foot > * {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ctl-h);
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-weight: 900;
  font-size: var(--fs-m);
  line-height: 1.1;
  background: var(--card-solid);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line), var(--shadow-1);
  white-space: nowrap;
}

.btn.l {
  min-height: var(--ctl-h-l);
  font-size: var(--fs-l);
}

.btn.s {
  min-height: var(--ctl-h-s);
  padding: 0 10px;
  font-size: var(--fs-s);
}

.btn.main {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 3px 0 var(--accent-dark);
}

.btn.go {
  background: linear-gradient(180deg, var(--ok-2), var(--ok));
  color: var(--ink-inv);
  box-shadow: 0 3px 0 var(--ok-dark);
}

.btn.blue {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: var(--ink-inv);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.btn.gem {
  background: linear-gradient(180deg, var(--violet-2), var(--violet));
  color: var(--ink-inv);
  box-shadow: 0 3px 0 var(--violet-dark);
  --i-gem: var(--i-gem-on-btn);
  --i-gem-edge: var(--violet-dark);
}

.btn.gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 3px 0 var(--gold-dark);
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}

.btn:disabled,
.btn.off {
  opacity: 0.5;
  pointer-events: none;
}

.btn.short {
  opacity: var(--short-a);
}

.btn.wide {
  width: 100%;
}

.seg {
  display: flex;
  gap: 4px;
  margin: 0 var(--sp-3) var(--sp-2);
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--card-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.seg::-webkit-scrollbar {
  display: none;
}

.seg button {
  position: relative;
  flex: 1 0 auto;
  min-height: var(--ctl-h-s);
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: var(--fs-s);
  color: var(--ink-2);
  white-space: nowrap;
}

.seg button.on {
  background: var(--card-solid);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.seg .dot {
  top: -2px;
  right: 0;
}

.card {
  position: relative;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.row .grow {
  flex: 1;
  min-width: 0;
}

.row b {
  display: block;
  font-weight: 900;
  font-size: var(--fs-m);
  line-height: 1.2;
}

.row small,
.muted {
  display: block;
  color: var(--ink-2);
  font-weight: 700;
  font-size: var(--fs-s);
  line-height: 1.3;
}

.sec {
  margin: var(--sp-3) 2px var(--sp-2);
  font-size: var(--fs-s);
  font-weight: 900;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tile-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--card-3);
  color: var(--ink);
  flex: none;
}

.bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}

.bar.gold i {
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
}

.bar.ok i {
  background: linear-gradient(90deg, var(--ok-2), var(--ok));
}

.reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 900;
  font-size: var(--fs-s);
  white-space: nowrap;
}

.reward .ic {
  width: 15px;
  height: 15px;
}

.rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}

.grid.levels {
  grid-template-columns: repeat(5, 1fr);
}

.lv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: 0 3px 0 var(--line);
  font-weight: 900;
  font-size: var(--fs-l);
}

.lv.now {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--ink-inv);
  box-shadow: 0 3px 0 var(--accent-dark);
}

.lv.mile {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 3px 0 var(--gold-dark);
}

.lv.lock {
  background: var(--card-3);
  color: var(--ink-3);
  box-shadow: none;
}

.lv .st {
  display: flex;
}

.lv .st .ic {
  width: 11px;
  height: 11px;
}

.lv .ic.lk {
  width: 14px;
  height: 14px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3);
  border-radius: var(--r-l);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  text-align: left;
}

.offer.hero {
  background: linear-gradient(135deg, #fff2c9, #ffd1e0);
}

.offer.vip {
  background: linear-gradient(135deg, var(--vip-a), var(--vip-b));
  color: var(--ink-inv);
}

.offer.vip small,
.offer.vip .muted {
  color: rgba(255, 255, 255, 0.82);
}

.offer h3 {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 900;
  line-height: 1.15;
}

.offer ul {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.35;
}

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-inv);
  font-size: var(--fs-xs);
  font-weight: 900;
  white-space: nowrap;
}

.tag.gold {
  background: var(--gold);
  color: var(--gold-ink);
}

.tag.ok {
  background: var(--ok);
}

.pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  border-radius: var(--r-l);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  text-align: center;
  position: relative;
}

.pack .big {
  font-size: var(--fs-xl);
  font-weight: 900;
}

.pack .tag {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.pack .gems3 {
  display: flex;
  align-items: flex-end;
  height: 36px;
}

.pack .gems3 .ic {
  width: 30px;
  height: 30px;
}

.price {
  min-width: 82px;
}

.looks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.look {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) 4px;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  text-align: center;
  min-width: 0;
}

.look.on {
  box-shadow: 0 0 0 2.5px var(--ok), var(--shadow-1);
}

.look canvas {
  width: 64px;
  height: 52px;
}

.look b {
  font-size: var(--fs-s);
  font-weight: 900;
  line-height: 1.15;
  max-width: 100%;
}

.look small {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.look small .ic {
  width: 13px;
  height: 13px;
}

.tag.new {
  background: linear-gradient(90deg, var(--new-a), var(--new-b));
  color: var(--ink-inv);
  box-shadow: var(--shadow-1);
}

.look > .tag.new {
  position: absolute;
  top: -6px;
  left: 6px;
  z-index: 1;
}

.dot.fresh {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  background: linear-gradient(135deg, var(--new-a), var(--new-b));
}

.tab .dot.fresh {
  top: -2px;
  right: calc(50% - 26px);
}

.seg .dot.fresh {
  top: 2px;
  right: 2px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.offer.drop {
  gap: var(--sp-2);
  background: radial-gradient(120% 90% at 85% 0%, var(--drop-glow), transparent 55%), linear-gradient(135deg, var(--drop-a), var(--drop-b));
  color: var(--ink-inv);
}

.offer.drop .tag.new {
  margin-bottom: 4px;
}

.drop-looks {
  display: flex;
  gap: var(--sp-2);
}

.drop-look {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) 4px;
  border-radius: var(--r-m);
  background: var(--drop-tile);
  color: inherit;
  font-size: var(--fs-s);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.drop-look:active {
  background: var(--drop-tile-on);
}

.drop-look canvas {
  width: 76px;
  height: 60px;
}

.drop-card {
  overflow: hidden;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-l);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
}

.drop-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: radial-gradient(120% 120% at 90% 0%, var(--drop-glow), transparent 60%), linear-gradient(135deg, var(--drop-a), var(--drop-b));
  color: var(--ink-inv);
}

.drop-head .grow {
  flex: 1;
  min-width: 0;
}

.drop-head b {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-l);
  font-weight: 900;
  line-height: 1.15;
}

.drop-head small {
  display: block;
  color: var(--drop-ink-2);
  font-size: var(--fs-s);
  font-weight: 800;
}

.drop-head .ic.l {
  flex: none;
  color: var(--gold-2);
}

.chal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}

.chal + .chal {
  border-top: 1px solid var(--line);
}

.chal .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chal b {
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.2;
}

.chal small {
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 700;
}

.prize {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 45%;
}

.prize canvas {
  width: 56px;
  height: 44px;
}

.prize .rewards {
  justify-content: flex-end;
}

.drop-card .note {
  margin: 0 var(--sp-3) var(--sp-3);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

.album {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-2);
  border-radius: var(--r-l);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  text-align: left;
  min-width: 0;
}

.album canvas,
.pic canvas {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-m);
  background: var(--card-2);
}

.album b {
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.15;
}

.pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: center;
  min-width: 0;
}

.pic span {
  max-width: 100%;
  line-height: 1.2;
}

.tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tier {
  display: grid;
  grid-template-columns: 38px 1fr 1fr;
  gap: 6px;
  align-items: stretch;
}

.tier .n {
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--card-3);
  font-weight: 900;
  font-size: var(--fs-s);
  color: var(--ink-2);
}

.tier.reached .n {
  background: var(--blue);
  color: var(--ink-inv);
}

.slotr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: var(--r-s);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.slotr.prem {
  background: linear-gradient(135deg, #fff6d8, #ffe7f2);
}

.slotr.done {
  opacity: 0.55;
}

.slotr .claim {
  min-height: 26px;
  padding: 0 9px;
  font-size: var(--fs-xs);
}

.slotr .ic.lk {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
}

.cal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.cal .d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) 4px;
  border-radius: var(--r-m);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 900;
  text-align: center;
  min-width: 0;
}

.cal .d.big {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff2c9, #ffd1e0);
}

.cal .d.today {
  box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-1);
}

.cal .d.got {
  opacity: 0.5;
}

.board-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--r-s);
  background: var(--card-solid);
  font-weight: 800;
  font-size: var(--fs-m);
}

.lb-entry {
  border-radius: var(--r-s);
  background: var(--card-solid);
}

.lb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px 10px 8px;
}

.lb-actions .btn {
  min-height: 36px;
}

.safety-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lb.me {
  background: #fff2c9;
}

.lb .r {
  font-weight: 900;
  color: var(--ink-2);
  text-align: center;
}

.lb .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--off);
  flex: none;
  transition: background var(--t-fast);
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast);
}

.switch.on {
  background: var(--ok);
}

.switch.on::after {
  transform: translateX(18px);
}

.set {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 46px;
  padding: 6px var(--sp-3);
  border-radius: var(--r-m);
  background: var(--card-solid);
  text-align: left;
}

.set + .set {
  margin-top: 4px;
}

.set .grow {
  flex: 1;
  min-width: 0;
}

.set b {
  display: block;
  font-weight: 800;
  font-size: var(--fs-m);
  line-height: 1.2;
}

.set small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.3;
}

.set .val {
  font-weight: 900;
  font-size: var(--fs-s);
  color: var(--ink-2);
  white-space: nowrap;
}

.choices {
  display: flex;
  gap: 4px;
}

.choices button {
  min-width: 34px;
  min-height: var(--ctl-h-s);
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--card-3);
  font-weight: 900;
  font-size: var(--fs-s);
}

.choices button.on {
  background: var(--blue);
  color: var(--ink-inv);
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  text-align: center;
}

.result h2 {
  margin: 0;
  font-size: var(--fs-xxl);
  font-weight: 900;
  line-height: 1.1;
}

.result .big-stars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.result .big-stars .ic {
  width: 44px;
  height: 44px;
  animation: star-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards;
}

.result .big-stars .ic:nth-child(2) {
  width: 56px;
  height: 56px;
  animation-delay: 0.18s;
}

.result .big-stars .ic:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes star-in {
  from {
    transform: scale(0) rotate(-40deg);
  }
}

.result .score {
  font-size: var(--fs-xxl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.result .stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fs-s);
  font-weight: 800;
  color: var(--ink-2);
}

.result .gain {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
}

.preview {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: var(--r-l);
  background: var(--card-solid);
  box-shadow: var(--shadow-1);
}

.preview canvas {
  width: 104px;
  height: 104px;
}

.input {
  width: 100%;
  min-height: var(--ctl-h-l);
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card-solid);
  font: inherit;
  font-weight: 900;
  font-size: var(--fs-l);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink);
  user-select: text;
  -webkit-user-select: text;
}

.code {
  padding: var(--sp-3);
  border-radius: var(--r-m);
  background: var(--card-solid);
  font-weight: 900;
  font-size: var(--fs-xl);
  letter-spacing: 0.1em;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}

.note {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--card-3);
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.35;
}

.center {
  text-align: center;
}

.stack.center {
  align-items: center;
}

.stack.center > .btn.wide,
.stack.center > .card {
  align-self: stretch;
}

.stars-row {
  display: inline-flex;
  vertical-align: middle;
  gap: 1px;
}

.stars-row .ic {
  width: 12px;
  height: 12px;
}

.result .big-stars .stars-row {
  display: contents;
}

#toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  top: calc(var(--safe-t) + 60px);
  max-width: calc(100% - 32px);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-inv);
  font-weight: 800;
  font-size: var(--fs-s);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
  animation: toast 2.4s ease forwards;
  pointer-events: none;
  text-align: center;
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  10%,
  85% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
  }
}

.legal-page {
  overflow: auto;
  height: auto;
  background: var(--card-2);
}

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  font-size: 15px;
  line-height: 1.6;
  user-select: text;
  -webkit-user-select: text;
}

.legal h1 {
  font-size: 26px;
  line-height: 1.2;
}

.legal h2 {
  margin-top: 26px;
  font-size: 18px;
}

.legal a {
  color: var(--blue-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
  }
}

html.reduce *,
html.reduce *::before,
html.reduce *::after {
  animation-duration: 0.01s !important;
  transition-duration: 0.01s !important;
}

@media (min-height: 760px) {
  :root {
    --cell-max: 36px;
  }
}

@media (min-height: 820px) and (min-width: 380px) {
  :root {
    --slot-max: 54px;
    --cart-max: 64px;
  }
}

@media (max-width: 360px) {
  :root {
    --gutter: 9px;
    --slot-max: 44px;
    --cart-max: 52px;
  }
}