@font-face {
  font-family: "Handlee";
  src: url("../fonts/Handlee-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Grape Nuts";
  src: url("../fonts/GrapeNuts-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --board: #12312a;
  --board-deep: #071a15;
  --board-light: #215244;
  --panel: rgba(10, 35, 29, .96);
  --chalk: #fff8df;
  --chalk-soft: #c7d8ce;
  --chalk-faint: rgba(242, 240, 218, .19);
  --mint: #65e6c2;
  --lilac: #c6a8ff;
  --yellow: #ffd166;
  --green: #84e388;
  --coral: #ff8177;
  --outer: #020b08;
  --field-gradient: radial-gradient(circle at 18% 8%, #225647 0, #12312a 32%, #061712 68%, #020b08 100%);
  --panel-gradient: linear-gradient(145deg, rgba(17,57,47,.98), rgba(5,24,19,.99));
  --theme-glow: transparent;
  --touch: 50px;
  /* Read by src/stage.js: the board is centred in the space this band leaves. */
  --hud-height: 136px;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-accent: "Grape Nuts", "Segoe Print", cursive;
  --motion-fast: 140ms;
  --motion-standard: 260ms;
  --motion-slow: 520ms;
  --motion-celebration: 920ms;
  --ease-out-back: cubic-bezier(.18,.82,.3,1);
  --ease-out-smooth: cubic-bezier(.16,.82,.24,1);
  color-scheme: dark;
  font-family: var(--font-ui);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--outer); color: var(--chalk); }
body { display: grid; place-items: center; }
button, input { font: inherit; }

#app, .game-shell {
  position: relative;
  width: min(100vw, 720px);
  height: 100dvh;
  max-height: 1280px;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--field-gradient);
  box-shadow: 0 24px 90px rgba(0,0,0,.58), inset 0 0 70px color-mix(in srgb, var(--theme-glow) 9%, transparent);
}

/* Keep the portrait stage at its authored 9:16 ratio on wide screens. Mobile
   viewports still use their full available size and existing safe-area rules. */
@media (min-width: 768px) {
  #app, .game-shell {
    width: min(720px, calc(100dvh * 9 / 16));
    height: min(100dvh, 1280px);
    aspect-ratio: 9 / 16;
  }
}

.game-shell::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: screen;
}

/* Full-screen filters are costly in Android WebViews. The canvas still keeps
   the theme motif; low-tier devices get a compositor-friendly DOM layer. */
:root[data-performance-tier="low"] .game-shell { box-shadow: none; }
:root[data-performance-tier="low"] .game-shell::before { filter: none !important; opacity: .18; }
:root[data-performance-tier="low"] .menu-aurora,
:root[data-performance-tier="low"] .menu-spark,
:root[data-performance-tier="low"] .menu-energy-stream,
:root[data-performance-tier="low"] .menu-title-spark,
:root[data-performance-tier="low"] .chalk-rule::after,
:root[data-performance-tier="low"] .menu-actions .primary::after,
:root[data-performance-tier="low"] .performance-emblem i,
:root[data-performance-tier="low"] .performance-emblem b,
:root[data-performance-tier="low"] .daily-entry .ui-icon,
:root[data-performance-tier="low"] .level-tile.current,
:root[data-performance-tier="low"] .theme-card.preview-live .theme-swatch b,
:root[data-performance-tier="low"] .daily-loader-molecule i,
:root[data-performance-tier="low"] .daily-loader-molecule b,
:root[data-performance-tier="low"] .daily-panel.is-loading .daily-ranking::after,
:root[data-performance-tier="low"] .fortune-wheel.idle,
:root[data-performance-tier="low"] .fortune-ambient i,
:root[data-performance-tier="low"] .fortune-wrap.is-idle::before { animation: none !important; }
:root[data-performance-tier="low"] .menu-aurora,
:root[data-performance-tier="low"] .menu-spark,
:root[data-performance-tier="low"] .menu-energy-stream { display: none; }
:root[data-performance-tier="low"] .menu-orbit-a { animation-duration: 26s; opacity: .48; }
:root[data-performance-tier="low"] .coach-mark > b,
:root[data-performance-tier="low"] .coach-mark > b::after { animation: none !important; }
:root[data-performance-tier="low"] .coach-hand > b { filter: none; }
:root[data-performance-tier="low"] .coach-veil { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: rgba(2,10,8,.48); box-shadow: none; transform: none !important; will-change: auto; }
:root[data-performance-tier="low"] .level-tile.current::before,
:root[data-performance-tier="low"] .fortune-wrap.is-idle::after { animation: none !important; }
:root[data-performance-tier="low"] #theme-transition { background: radial-gradient(circle, color-mix(in srgb, var(--transition-accent) 28%, transparent), transparent 62%); }
:root[data-performance-tier="low"] .theme-card.theme-unlocked,
:root[data-performance-tier="low"] .theme-card.theme-activated { animation-duration: 360ms !important; filter: none !important; }
.canvas-wrap { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; }
#game-canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; outline: none; }

/* Each notebook uses a distinct material motif in addition to its palette. */
:root[data-theme="notebook"] .game-shell::before { background: none; opacity: 0; }
:root[data-theme="cobalt"] .game-shell::before { background: linear-gradient(30deg, transparent 24%, rgba(117,230,255,.22) 25% 26%, transparent 27% 74%, rgba(117,230,255,.18) 75% 76%, transparent 77%); background-size: 54px 94px; }
:root[data-theme="ember"] .game-shell::before { background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 28px, rgba(255,126,76,.18) 31px 33px, transparent 36px 52px); }
:root[data-theme="aurora"] .game-shell::before { background: linear-gradient(112deg, transparent 12%, rgba(145,245,220,.18) 28%, transparent 42%), linear-gradient(72deg, transparent 40%, rgba(214,168,255,.2) 58%, transparent 72%); filter: blur(14px); opacity: .45; }
:root[data-theme="mintglass"] .game-shell::before { background: radial-gradient(circle at 17% 22%, transparent 0 18px, rgba(120,242,208,.25) 19px 21px, transparent 22px), radial-gradient(circle at 78% 63%, transparent 0 34px, rgba(184,231,255,.2) 35px 38px, transparent 39px); background-size: 180px 210px, 260px 290px; }
:root[data-theme="rosequartz"] .game-shell::before { background: linear-gradient(135deg, transparent 0 36%, rgba(255,159,199,.2) 37% 38%, transparent 39% 65%, rgba(216,179,255,.16) 66% 67%, transparent 68%), linear-gradient(45deg, transparent 46%, rgba(255,225,153,.13) 47% 49%, transparent 50%); background-size: 130px 130px; }
:root[data-theme="deepsea"] .game-shell::before { background: radial-gradient(circle, rgba(77,228,223,.35) 0 2px, transparent 3px), radial-gradient(circle, transparent 0 13px, rgba(112,140,255,.2) 14px 15px, transparent 16px); background-position: 14px 18px, 65px 72px; background-size: 86px 96px, 140px 155px; }
:root[data-theme="desert"] .game-shell::before { background: radial-gradient(ellipse at 0 100%, transparent 0 47%, rgba(255,209,102,.22) 48% 49%, transparent 50%), radial-gradient(ellipse at 100% 100%, transparent 0 55%, rgba(88,216,196,.16) 56% 57%, transparent 58%); background-size: 220px 130px; }
:root[data-theme="frost"] .game-shell::before { background: linear-gradient(30deg, transparent 47%, rgba(189,239,255,.25) 48% 50%, transparent 51%), linear-gradient(150deg, transparent 47%, rgba(141,232,255,.2) 48% 50%, transparent 51%); background-size: 74px 128px; }
:root[data-theme="neon"] .game-shell::before { background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,255,224,.12) 8px 9px), linear-gradient(90deg, transparent 49%, rgba(255,79,216,.28) 50%, transparent 51%); opacity: .35; }
:root[data-theme="magma"] .game-shell::before { background: repeating-conic-gradient(from 17deg at 48% 120%, transparent 0 7deg, rgba(255,75,34,.25) 8deg 9deg, transparent 10deg 18deg); filter: drop-shadow(0 0 6px rgba(255,75,34,.7)); opacity: .42; }
:root[data-theme="botanical"] .game-shell::before { background: radial-gradient(ellipse at 20% 10%, rgba(118,230,175,.22) 0 12%, transparent 13%), radial-gradient(ellipse at 80% 70%, rgba(164,239,117,.18) 0 10%, transparent 11%); background-size: 90px 150px, 120px 180px; transform: rotate(-12deg) scale(1.15); }
:root[data-theme="ultraviolet"] .game-shell::before { background: repeating-linear-gradient(112deg, transparent 0 28px, rgba(214,107,255,.2) 29px 31px, rgba(124,140,255,.14) 32px 35px, transparent 36px 62px); opacity: .38; }
:root[data-theme="circuit"] .game-shell::before { background: linear-gradient(rgba(49,255,192,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(49,255,192,.2) 1px, transparent 1px), radial-gradient(circle, rgba(242,255,86,.55) 0 2px, transparent 3px); background-size: 34px 34px, 34px 34px, 68px 68px; opacity: .34; }
:root[data-theme="prism"] .game-shell::before { background: conic-gradient(from 215deg at 50% 24%, transparent, rgba(102,245,255,.25), transparent 28%, rgba(222,124,255,.24), transparent 56%, rgba(255,232,117,.2), transparent); opacity: .55; }
:root[data-theme="starlight"] .game-shell::before { background: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, rgba(126,223,255,.8) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255,232,147,.7) 0 1px, transparent 1.5px); background-position: 13px 17px, 61px 42px, 27px 79px; background-size: 73px 89px, 111px 127px, 149px 163px; opacity: .48; }
:root[data-theme="singularity"] .game-shell::before { background: repeating-radial-gradient(circle at 50% 47%, transparent 0 54px, rgba(199,125,255,.22) 56px 58px, transparent 60px 82px); filter: blur(1px) drop-shadow(0 0 8px rgba(155,93,229,.6)); opacity: .55; }
:root[data-theme="royal_alchemy"] .game-shell::before { background: linear-gradient(45deg, transparent 45%, rgba(255,211,92,.24) 46% 48%, transparent 49%), linear-gradient(-45deg, transparent 45%, rgba(255,211,92,.18) 46% 48%, transparent 49%); background-size: 72px 72px; opacity: .42; }
:root[data-theme="solar_eclipse"] .game-shell::before { background: radial-gradient(circle at 50% 34%, transparent 0 74px, rgba(255,242,117,.3) 78px 80px, rgba(255,123,84,.16) 90px, transparent 122px); filter: drop-shadow(0 0 18px rgba(255,183,3,.55)); opacity: .68; }
:root[data-theme="quantum_bloom"] .game-shell::before { background: radial-gradient(ellipse at 50% 0%, rgba(98,255,215,.28) 0 14%, transparent 15%), radial-gradient(ellipse at 0 50%, rgba(255,121,198,.22) 0 14%, transparent 15%); background-size: 94px 94px; transform: rotate(45deg) scale(1.25); opacity: .55; }

:root[data-theme="prism"] .panel,
:root[data-theme="singularity"] .panel,
:root[data-theme="royal_alchemy"] .panel,
:root[data-theme="solar_eclipse"] .panel,
:root[data-theme="quantum_bloom"] .panel {
  border-color: color-mix(in srgb, var(--theme-glow) 72%, var(--chalk));
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 46px color-mix(in srgb, var(--theme-glow) 10%, transparent), 0 0 25px color-mix(in srgb, var(--theme-glow) 12%, transparent);
}

.screen, .modal-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) 22px calc(max(22px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px));
}
.screen { z-index: 10; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--theme-glow) 7%, transparent), transparent 42%), rgba(4, 15, 12, .24); }
.screen:not([hidden]) { animation: ui-layer-in var(--motion-standard) ease-out both; }
.screen:not([hidden]) > .panel,
.screen:not([hidden]) > .menu-board { animation: ui-surface-in 380ms var(--ease-out-smooth) both; }
#screen-main-menu {
  overflow: hidden;
  background: radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 40%), linear-gradient(180deg, rgba(8,30,24,.88), rgba(3,17,13,.94));
}
.screen[hidden], .modal-layer[hidden], #game-hud[hidden], [hidden] { display: none !important; }

.menu-board {
  position: relative;
  isolation: isolate;
  width: min(100%, 460px);
  padding: 80px 20px 20px;
  text-align: center;
}
.menu-board > :not(.menu-ambient) { position: relative; z-index: 2; }
.menu-ambient { position: absolute; z-index: 0; inset: -42px -92px -58px; overflow: visible; pointer-events: none; }
.menu-aurora { position: absolute; width: 230px; aspect-ratio: 1; border-radius: 50%; opacity: .16; will-change: transform, opacity; }
.menu-aurora-mint { left: -14px; top: 58px; background: radial-gradient(circle, var(--mint), transparent 69%); animation: menu-aurora-left 8s ease-in-out -2s infinite alternate; }
.menu-aurora-lilac { right: -18px; top: 170px; width: 250px; background: radial-gradient(circle, var(--lilac), transparent 70%); animation: menu-aurora-right 9.5s ease-in-out -5s infinite alternate; }
.menu-aurora-gold { left: calc(50% - 112px); bottom: 35px; width: 224px; background: radial-gradient(circle, var(--yellow), transparent 71%); animation: menu-aurora-gold 10.5s ease-in-out -3s infinite alternate; }
.menu-orbit { position: absolute; left: 50%; border: 1px solid color-mix(in srgb, var(--orbit-color) 32%, transparent); border-radius: 50%; will-change: transform; }
.menu-orbit::after { content: ""; position: absolute; inset: 8px; border: 1px dashed color-mix(in srgb, var(--orbit-color) 15%, transparent); border-radius: inherit; }
.menu-orbit > i { position: absolute; z-index: 1; width: 11px; height: 11px; border: 2px solid color-mix(in srgb, var(--chalk) 68%, transparent); border-radius: 50%; background: var(--orbit-color); box-shadow: 0 0 15px color-mix(in srgb, var(--orbit-color) 62%, transparent); }
.menu-orbit > i:first-child { left: 12%; top: 8%; }
.menu-orbit > i:last-child { right: 9%; bottom: 12%; width: 8px; height: 8px; }
.menu-orbit-a { --orbit-color: var(--mint); top: -88px; width: 390px; height: 390px; margin-left: -195px; animation: menu-orbit-spin 15s linear infinite; }
.menu-energy-stream { --stream-color: var(--lilac); --stream-angle: -13deg; --stream-end-angle: -9deg; position: absolute; width: 310px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stream-color) 68%, transparent), transparent); opacity: .5; transform: rotate(var(--stream-angle)); will-change: transform, opacity; animation: menu-stream-drift 7.5s ease-in-out infinite alternate; }
.menu-energy-stream::before { content: ""; position: absolute; inset: -7px 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stream-color) 14%, transparent), transparent); }
.menu-energy-stream > i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--stream-color); box-shadow: 0 0 15px color-mix(in srgb, var(--stream-color) 72%, transparent); will-change: transform, opacity; animation: menu-stream-pulse 4.8s ease-in-out infinite; }
.menu-energy-stream-a { left: -32px; top: 348px; }
.menu-energy-stream-b { --stream-color: var(--yellow); --stream-angle: 11deg; --stream-end-angle: 7deg; right: -42px; top: 532px; animation-delay: -3.8s; animation-duration: 9s; }
.menu-energy-stream-b > i { animation-delay: -2.4s; animation-duration: 5.6s; }
.menu-spark { --spark-color: var(--yellow); --spark-speed: 4.8s; --spark-delay: -1s; position: absolute; color: var(--spark-color); font-size: 15px; line-height: 1; text-shadow: 0 0 10px currentColor; opacity: .7; will-change: transform, opacity; animation: menu-spark-float var(--spark-speed) ease-in-out var(--spark-delay) infinite; }
.menu-spark-a { left: 16%; top: 145px; --spark-color: var(--mint); --spark-speed: 4.2s; }
.menu-spark-b { right: 12%; top: 238px; --spark-color: var(--yellow); --spark-speed: 5.3s; --spark-delay: -3s; }
.menu-spark-c { left: 9%; top: 405px; --spark-color: var(--lilac); --spark-speed: 5.8s; --spark-delay: -4s; }
.menu-spark-d { right: 7%; top: 495px; --spark-color: var(--coral); --spark-speed: 4.7s; --spark-delay: -2s; font-size: 28px; }
.menu-spark-e { left: 18%; bottom: 54px; --spark-color: var(--yellow); --spark-speed: 6.1s; --spark-delay: -5s; font-size: 25px; }
.menu-title-spark { position: absolute; top: 196px; color: var(--yellow); font-size: 13px; line-height: 1; text-shadow: 0 0 11px currentColor; animation: menu-brand-spark 3s ease-in-out infinite; }
.menu-title-spark-a { left: 13%; }
.menu-title-spark-b { right: 13%; color: var(--mint); animation-delay: -1.5s; }
.menu-molecule-canvas { display: block; width: 100%; aspect-ratio: 500 / 230; opacity: 0; overflow: hidden; mask-image: radial-gradient(ellipse at center, #000 58%, transparent 100%); transition: opacity 180ms ease; }
.menu-molecule-canvas.loaded { opacity: 1; }
#screen-main-menu:not([hidden]) .menu-actions button {
  animation: menu-action-in var(--motion-slow) var(--ease-out-back) both;
}
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(1) { animation-delay: 110ms; }
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(2) { animation-delay: 155ms; }
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(3) { animation-delay: 200ms; }
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(4) { animation-delay: 245ms; }
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(5) { animation-delay: 290ms; }
#screen-main-menu:not([hidden]) .menu-actions button:nth-child(n+6) { animation-delay: 335ms; }
.menu-actions .primary { overflow: hidden; }
.menu-actions .primary::after {
  content: "";
  position: absolute;
  inset: -80% -30%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
  transform: translateX(-72%) rotate(4deg);
  animation: menu-primary-shimmer 5.4s ease-in-out 1.2s infinite;
}
.daily-entry .ui-icon { animation: daily-icon-breathe 2.6s ease-in-out infinite; }

.eyebrow {
  margin: 0 0 9px;
  color: var(--yellow);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .035em;
  text-align: center;
}
.brand {
  position: relative;
  margin: 0 0 -6px;
  transform: translateY(-28px);
  color: var(--chalk);
  font-family: var(--font-accent);
  font-size: clamp(78px, 20vw, 116px);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.015em;
  text-align: center;
  text-shadow: 1px 0 rgba(242,240,218,.25), -1px 1px rgba(242,240,218,.14);
}
.chalk-rule {
  position: relative;
  overflow: hidden;
  width: min(100%, 330px);
  height: 8px;
  margin: 0 auto 22px;
  border-top: 2px solid rgba(242,240,218,.58);
  border-bottom: 1px solid rgba(242,240,218,.2);
}
.chalk-rule::after { content: ""; position: absolute; left: 0; top: -3px; width: 34%; height: 7px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mint) 78%, var(--chalk)), transparent); opacity: .72; will-change: transform, opacity; animation: menu-rule-glint 4.8s ease-in-out -1.4s infinite; }
.panel {
  --surface-accent: var(--mint);
  position: relative;
  width: min(100%, 448px);
  padding: 30px;
  border: 2px solid color-mix(in srgb, var(--surface-accent) 30%, var(--chalk));
  border-radius: 18px;
  background: radial-gradient(circle at 8% 0, color-mix(in srgb, var(--surface-accent) 12%, transparent), transparent 38%), var(--panel-gradient);
  box-shadow: 0 24px 64px rgba(0,0,0,.44), inset 0 0 36px color-mix(in srgb, var(--surface-accent) 4%, transparent);
}
#screen-chapter-select .panel { --surface-accent: var(--mint); }
#screen-level-select .panel { --surface-accent: var(--green); }
#screen-settings .panel { --surface-accent: var(--lilac); }
#screen-shop .panel { --surface-accent: var(--yellow); }
.chalk-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid rgba(242,240,218,.2);
  border-radius: 13px;
  pointer-events: none;
}
.panel h1, .panel h2 {
  margin: 0 0 20px;
  font-family: var(--font-accent);
  font-size: 48px;
  font-weight: 400;
  line-height: .95;
  text-align: center;
}
.panel > p:not(.eyebrow):not(.campaign-progress) { color: var(--chalk-soft); font-size: 17px; line-height: 1.42; text-align: center; }

.button-stack { display: grid; gap: 11px; width: min(100%, 360px); }
.menu-actions { margin: 0 auto; }
.menu-actions button { --button-accent: var(--chalk-soft); border-color: color-mix(in srgb, var(--button-accent) 66%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--button-accent) 13%, rgba(7,26,21,.9)), rgba(5,20,16,.78) 58%); }
.menu-actions button:nth-child(1) { --button-accent: var(--mint); }
.menu-actions button:nth-child(2) { --button-accent: var(--yellow); }
.menu-actions button:nth-child(3) { --button-accent: var(--green); }
.menu-actions button:nth-child(4) { --button-accent: var(--lilac); }
.menu-actions button:nth-child(5) { --button-accent: color-mix(in srgb, var(--mint) 62%, var(--lilac)); }
.menu-actions button .ui-icon { color: var(--button-accent); }
.menu-actions button.primary { border-color: color-mix(in srgb, var(--mint) 70%, var(--chalk)); background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--mint) 28%, var(--chalk))); color: var(--board-deep); }
.menu-actions button.primary .ui-icon { color: var(--board-deep); }
.menu-actions .menu-continue {
  min-height: 72px;
  margin-bottom: 3px;
  padding: 15px 24px;
  border-width: 3px;
  border-radius: 18px;
  justify-content: center;
  gap: 15px;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: .015em;
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 30px color-mix(in srgb, var(--mint) 22%, transparent), inset 0 1px rgba(255,255,255,.7);
}
.menu-actions .menu-continue::before { inset: 5px; border-radius: 12px; opacity: .2; }
.menu-actions .menu-continue .ui-icon { width: 31px; height: 31px; }
.menu-corner-action,
.menu-debug-action {
  position: fixed;
  z-index: 30;
  width: 48px;
  min-height: 48px;
  padding: 11px;
  border-radius: 50%;
  justify-content: center;
  background: rgba(5,20,16,.76);
}
.menu-corner-action::before,
.menu-debug-action::before { inset: 4px; border-radius: 50%; }
.menu-settings-action {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  border-color: color-mix(in srgb, var(--lilac) 72%, var(--chalk));
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 18px color-mix(in srgb, var(--lilac) 12%, transparent);
}
.menu-settings-action .ui-icon { width: 25px; height: 25px; }
.menu-debug-action {
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px));
  translate: -50% 0;
  width: 44px;
  min-height: 44px;
  padding: 7px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--coral) 58%, transparent);
  color: var(--coral);
  font: 25px/1 var(--font-accent);
  opacity: .72;
}
.menu-debug-action:hover:not(:disabled) { opacity: 1; }
.wallet-strip {
  width: min(100%, 330px);
  margin: -7px auto 13px;
  display: flex;
  justify-content: center;
  gap: 20px;
  color: var(--chalk-soft);
  font-size: 14px;
  font-weight: 500;
}
.wallet-strip b { color: var(--yellow); font-weight: 700; }
button, .button {
  position: relative;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--touch);
  border: 2px solid rgba(242,240,218,.62);
  border-radius: 12px;
  padding: 11px 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--mint) 4%, rgba(13,23,19,.78)), rgba(6,20,16,.76));
  color: var(--chalk);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: normal;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms, transform 90ms, border-color 120ms, opacity 120ms;
}
button > span, .button > span { min-width: 0; overflow-wrap: anywhere; }
button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 8px;
  opacity: .12;
  pointer-events: none;
}
button.primary { border-color: var(--chalk); background: var(--chalk); color: var(--board-deep); }
button.secondary { border-color: rgba(185,194,183,.4); color: var(--chalk-soft); background: rgba(13,23,19,.46); }
button.danger { border-color: var(--coral); color: #ffd9d0; background: rgba(100,48,41,.18); }
button:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); background: rgba(235,211,140,.08); }
button.primary:hover:not(:disabled) { border-color: var(--yellow); background: var(--yellow); color: var(--board-deep); }
button:active { transform: scale(.985); }
button:focus-visible, input:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }
button:disabled { opacity: .28; cursor: not-allowed; transform: none; }
.ui-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
}
.primary .ui-icon { filter: brightness(.2) saturate(.45); }

.back-link {
  min-height: 38px;
  margin: -10px 0 20px;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--chalk-soft);
  font-size: 16px;
}
.back-link::before { display: none; }

.settings-panel { width: min(100%, 440px); padding: 22px; overflow: hidden; }
.settings-header { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; margin-bottom: 18px; }
.settings-header h1 { grid-column: 2; margin: 0 !important; font-family: var(--font-accent); font-size: 44px; font-weight: 400; line-height: .82; letter-spacing: 0; }
.settings-back-button { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; padding: 9px; justify-content: center; border-color: color-mix(in srgb, var(--lilac) 65%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--lilac) 10%, rgba(5,20,16,.88)); }
.settings-back-button::before { inset: 4px; border-radius: 50%; }
.settings-back-button .ui-icon { width: 23px; height: 23px; }
.settings-list { display: grid; gap: 10px; }
.settings-row {
  --setting-accent: var(--chalk-soft);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 9px 13px;
  border: 2px solid color-mix(in srgb, var(--setting-accent) 58%, transparent);
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--setting-accent) 13%, rgba(7,26,21,.94)), rgba(5,20,16,.88) 64%);
  box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px color-mix(in srgb, var(--chalk) 5%, transparent);
  transition: border-color var(--motion-fast), background-color var(--motion-fast), transform 90ms;
}
.settings-row::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--setting-accent); border-radius: 9px; opacity: .08; pointer-events: none; }
.screen:not([hidden]) .settings-row { animation: collection-card-in var(--motion-slow) var(--ease-out-back) both; }
.screen:not([hidden]) .settings-row:nth-of-type(1) { animation-delay: 70ms; }
.screen:not([hidden]) .settings-row:nth-of-type(2) { animation-delay: 120ms; }
.screen:not([hidden]) .settings-row:nth-of-type(3) { animation-delay: 170ms; }
.screen:not([hidden]) .settings-links { animation: collection-card-in var(--motion-slow) var(--ease-out-back) 220ms both; }
.settings-glyph { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--setting-accent) 52%, transparent); border-radius: 50%; color: var(--setting-accent); background: color-mix(in srgb, var(--setting-accent) 10%, rgba(0,0,0,.18)); transition: color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.settings-icon { width: 26px; height: 26px; object-fit: contain; pointer-events: none; }
.settings-row[data-setting="music"] { --setting-accent: var(--lilac); }
.settings-row[data-setting="sfx"] { --setting-accent: var(--mint); }
.settings-row[data-setting="volume"] { --setting-accent: var(--yellow); }
.settings-row[data-setting="performance"] { --setting-accent: var(--coral); }
.settings-row.is-on { border-color: color-mix(in srgb, var(--setting-accent) 84%, var(--chalk)); background: linear-gradient(100deg, color-mix(in srgb, var(--setting-accent) 20%, rgba(7,26,21,.96)), rgba(5,20,16,.9) 68%); }
.settings-row.is-on .settings-glyph { border-color: var(--setting-accent, var(--mint)); color: var(--setting-accent, var(--mint)); box-shadow: 0 0 18px color-mix(in srgb, var(--setting-accent, var(--mint)) 18%, transparent); transform: scale(1.05); }
.settings-row label, .settings-label { min-width: 0; color: var(--chalk); font-size: 18px; font-weight: 650; line-height: 1.15; }
.settings-value-button { width: 132px; min-width: 0; min-height: 42px; padding: 7px 10px 7px 12px; justify-content: space-between; gap: 9px; border: 1px solid color-mix(in srgb, var(--setting-accent) 66%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--setting-accent) 12%, var(--board-deep)); color: var(--chalk); font: 650 14px/1.2 var(--font-ui); text-align: left; }
.settings-value-button::before { display: none; }
.settings-value-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-value-button b { color: var(--setting-accent); font-size: 24px; font-weight: 400; line-height: .8; }
.settings-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.settings-links button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; justify-content: center; border-color: color-mix(in srgb, var(--lilac) 42%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--lilac) 9%, rgba(7,26,21,.9)), rgba(5,20,16,.78) 65%); font-size: 14px; }
.settings-links button:nth-child(2), .settings-links button:nth-child(3) { border-color: color-mix(in srgb, var(--mint) 42%, transparent); }
.settings-links button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.toggle { appearance: none; justify-self: end; width: 54px; height: 29px; border: 2px solid rgba(242,240,218,.56); border-radius: 999px; background: rgba(2,12,9,.44); position: relative; margin: 0; }
.toggle::before { content: ""; position: absolute; width: 17px; height: 17px; left: 4px; top: 50%; border: 2px solid var(--chalk-soft); border-radius: 50%; transform: translateY(-50%); transition: transform 130ms, background 130ms; }
.toggle:checked { border-color: var(--mint); }
.toggle:checked::before { transform: translate(25px, -50%); border-color: var(--mint); background: var(--mint); }
input[type="range"] { appearance: none; justify-self: end; width: 132px; height: 30px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--mint) 0 var(--volume-pct, 72%), rgba(242,240,218,.3) var(--volume-pct, 72%) 100%); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 2px solid var(--chalk); border-radius: 50%; background: var(--board); }

#game-hud {
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  height: var(--hud-height);
  padding: max(10px, env(safe-area-inset-top)) 15px 8px;
  pointer-events: none;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-glow) 18%, transparent);
  background: radial-gradient(circle at 14% 0, color-mix(in srgb, var(--theme-glow) 10%, transparent), transparent 46%), linear-gradient(180deg, rgba(3,16,12,.74), rgba(3,16,12,.52) 72%, transparent);
}
#game-hud button { pointer-events: auto; }
.hud-topbar { height: 58px; display: grid; grid-template-columns: minmax(104px, max-content) 66px 66px minmax(0, 1fr) 42px; align-items: center; gap: 7px; }
.hud-wallet { min-width: 104px; min-height: 46px; padding: 6px 11px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: visible; border: 1px solid color-mix(in srgb, var(--yellow) 60%, transparent); border-radius: 999px; background: radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 54%), rgba(4,18,14,.8); box-shadow: 0 6px 16px rgba(0,0,0,.2), inset 0 1px color-mix(in srgb, var(--chalk) 5%, transparent); color: var(--yellow); }
.hud-wallet-icon { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.hud-wallet strong { min-width: 0; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-stat { --hud-stat-accent: var(--mint); position: relative; min-width: 0; min-height: 50px; padding: 6px 10px; overflow: hidden; display: grid; place-content: center; justify-items: center; border: 1px solid color-mix(in srgb, var(--hud-stat-accent) 64%, transparent); border-radius: 12px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hud-stat-accent) 15%, transparent), transparent 50%), linear-gradient(120deg, color-mix(in srgb, var(--hud-stat-accent) 10%, rgba(4,18,14,.88)), rgba(3,13,10,.74)); box-shadow: 0 6px 16px rgba(0,0,0,.2), inset 0 1px color-mix(in srgb, var(--chalk) 5%, transparent); text-align: center; }
.hud-stat::before { content: ""; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--hud-stat-accent) 22%, transparent); border-radius: 8px; pointer-events: none; }
.hud-stat span { position: relative; display: block; width: 100%; overflow: hidden; color: var(--chalk-soft); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hud-stat strong { position: relative; display: block; width: 100%; margin-top: 3px; color: var(--hud-stat-accent); font-size: 22px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }
.hud-stat strong.motion-pop { animation: hud-value-pop 320ms var(--ease-out-back); }
.hud-level { --hud-stat-accent: var(--mint); }
.hud-moves { --hud-stat-accent: var(--yellow); }
.icon-button { width: 40px; height: 40px; min-height: 40px; padding: 8px; justify-content: center; border-radius: 50%; }
.icon-button span { display: none; }
.icon-button::before { border-radius: 50%; }
.hud-actions { min-height: 50px; margin-top: 9px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; pointer-events: auto; }
.hud-actions button { width: 100%; min-width: 0; min-height: 41px; padding: 5px 6px 5px 8px; justify-content: space-between; gap: 5px; font-size: clamp(12px, 3.8vw, 15px); line-height: 1.1; }
.hud-tool-main { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; overflow: hidden; white-space: nowrap; }
.hud-tool-main > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-tool-count { flex: 0 0 28px; align-self: stretch; display: grid; place-items: center; margin-block: -1px; border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent); color: currentColor; font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-actions .ui-icon { width: 19px; height: 19px; }
.hud-actions button[data-act="bond-boost"] { padding-left: 7px; }
.hud-actions button.active-tool { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.hud-actions button.cancel-tool { border-color: var(--coral); color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.hud-actions button.purchase-ready { border-color: color-mix(in srgb, var(--chalk-soft) 30%, transparent); background: linear-gradient(105deg, rgba(75,82,79,.78), rgba(35,43,40,.9)); color: color-mix(in srgb, var(--chalk-soft) 72%, #777); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.hud-actions button.purchase-ready .hud-tool-count { color: color-mix(in srgb, var(--chalk-soft) 60%, #777); }
.hud-actions button.purchase-ready .ui-icon { filter: grayscale(1); opacity: .64; }
.hud-tool-price {
  position: absolute;
  z-index: 3;
  top: -8px;
  right: 3px;
  min-width: 36px;
  min-height: 22px;
  padding: 2px 5px 2px 7px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--yellow) 70%, var(--chalk));
  border-radius: 999px;
  background: linear-gradient(105deg, #594714, #211d10);
  color: var(--yellow);
  box-shadow: 0 3px 8px rgba(0,0,0,.38);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
.purchase-ready .hud-tool-price { display: flex; }
.hud-tool-price strong { color: inherit; font-size: inherit; line-height: 1; }
.hud-price-coin { width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; filter: none !important; }

.campaign-panel { max-height: 100%; display: flex; flex-direction: column; }
.campaign-chapters-panel { width: min(100%, 460px); padding: 22px; overflow: hidden; }
.campaign-header { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; margin-bottom: 17px; }
.campaign-header h1 { grid-column: 2; margin: 0; font-size: 48px; line-height: .82; }
.campaign-back-button { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; padding: 9px; justify-content: center; border-color: color-mix(in srgb, var(--mint) 68%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--mint) 10%, rgba(5,20,16,.88)); }
.campaign-back-button::before { inset: 4px; border-radius: 50%; }
.campaign-back-button .ui-icon { width: 23px; height: 23px; }
.campaign-progress { margin: -9px 0 18px; color: var(--chalk-soft); font-size: 15px; text-align: center; }
.campaign-overview { --campaign-ratio: 0; position: relative; flex: 0 0 auto; margin: 0 2px 16px; padding: 12px 14px 13px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--yellow) 58%, transparent); border-radius: 14px; background: radial-gradient(circle at 88% 0, color-mix(in srgb, var(--yellow) 17%, transparent), transparent 42%), linear-gradient(105deg, color-mix(in srgb, var(--mint) 13%, rgba(7,26,21,.94)), rgba(5,20,16,.86)); box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px color-mix(in srgb, var(--chalk) 6%, transparent); }
.campaign-overview::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--yellow) 34%, transparent); border-radius: 9px; pointer-events: none; }
.campaign-progress-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.campaign-progress-head > span { color: var(--chalk-soft); font-size: 13px; font-weight: 650; line-height: 1.2; }
.campaign-progress-head strong { flex: 0 0 auto; color: var(--yellow); font: 400 27px/.8 var(--font-accent); }
.campaign-overall-bar { position: relative; display: block; height: 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent); border-radius: 999px; background: rgba(1,10,7,.62); }
.campaign-overall-bar b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--yellow)); box-shadow: 0 0 12px color-mix(in srgb, var(--mint) 36%, transparent); transform: scaleX(var(--campaign-ratio)); transform-origin: left center; transition: transform 260ms var(--ease-out-smooth); }
.chapter-list, .level-list { min-height: 0; display: grid; grid-template-columns: 1fr; gap: 9px; overflow: auto; padding: 4px 4px 16px; margin-bottom: 2px; }
.chapter-tile { --chapter-accent: var(--mint); min-width: 0; min-height: 82px; padding: 10px 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto 5px; gap: 6px 11px; text-align: left; border-color: color-mix(in srgb, var(--chapter-accent) 58%, transparent); background: linear-gradient(105deg, color-mix(in srgb, var(--chapter-accent) 13%, rgba(7,26,21,.92)), rgba(5,20,16,.8) 62%); box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px color-mix(in srgb, var(--chalk) 4%, transparent); }
.chapter-tile:nth-child(3n+2) { --chapter-accent: var(--lilac); }
.chapter-tile:nth-child(3n) { --chapter-accent: var(--yellow); }
.screen:not([hidden]) .chapter-tile:nth-child(-n+8),
.screen:not([hidden]) .level-tile:nth-child(-n+9) { animation: collection-card-in 380ms var(--ease-out-back) var(--reveal-delay, 0ms) both; }
.chapter-number { grid-row: 1 / 3; align-self: center; color: var(--chalk-soft); font: 31px/.8 var(--font-accent); text-align: center; }
.chapter-copy { min-width: 0; display: grid; gap: 3px; }
.chapter-copy strong { overflow: hidden; color: var(--chalk); font-size: 19px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.chapter-copy small, .chapter-progress-copy { color: var(--chalk-soft); font-size: 11px; line-height: 1.1; }
.chapter-progress-copy { align-self: center; color: var(--yellow); white-space: nowrap; }
.chapter-progress-bar { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(242,240,218,.12); }
.chapter-progress-bar b { display: block; height: 100%; border-radius: inherit; background: var(--mint); transform-origin: left center; }
.screen:not([hidden]) .chapter-tile:nth-child(-n+8) .chapter-progress-bar b { animation: progress-draw 480ms var(--ease-out-smooth) calc(var(--reveal-delay, 0ms) + 120ms) both; }
.chapter-tile.completed { border-color: var(--yellow); color: var(--yellow); background: rgba(235,211,140,.1); box-shadow: 0 0 22px rgba(235,211,140,.08); }
.chapter-tile.completed .chapter-number, .chapter-tile.completed .chapter-copy strong, .chapter-tile.completed .chapter-progress-copy { color: var(--yellow); }
.chapter-tile.completed .chapter-progress-bar b { background: var(--yellow); }
.level-tile { min-width: 0; min-height: 64px; padding: 9px 12px; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 11px; align-items: center; text-align: left; border-radius: 12px; border-color: color-mix(in srgb, var(--green) 24%, var(--chalk-faint)); background: linear-gradient(100deg, color-mix(in srgb, var(--green) 6%, transparent), rgba(4,17,13,.64) 66%); }
.level-tile strong { font-family: var(--font-accent); font-size: 27px; font-weight: 400; line-height: .8; text-align: center; }
.level-tile .level-molecule { min-width: 0; color: var(--chalk); font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
.level-tile small { color: var(--chalk-soft); font-size: 10px; line-height: 1; text-align: right; white-space: nowrap; }
.level-tile.completed { border-color: var(--green); color: var(--green); background: linear-gradient(105deg, color-mix(in srgb, var(--green) 13%, transparent), color-mix(in srgb, var(--mint) 4%, transparent)); }
.level-tile.completed::after { content: "✓"; position: absolute; right: 9px; top: 6px; color: var(--green); font: 15px/1 var(--font-accent); opacity: .72; }
.level-tile.skipped { border-color: var(--coral); color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, transparent); }
.level-tile.skipped .level-molecule, .level-tile.skipped small { color: var(--coral); }
.level-tile.current:not(.locked) { border-color: var(--yellow); color: var(--yellow); background: linear-gradient(105deg, color-mix(in srgb, var(--yellow) 14%, transparent), color-mix(in srgb, var(--mint) 5%, transparent)); }
.level-tile.current:not(.locked)::before { border-color: var(--yellow); box-shadow: 0 0 16px color-mix(in srgb, var(--yellow) 22%, transparent); animation: current-level-aura 2.8s ease-in-out infinite; }
.level-tile.locked { opacity: .48; }
.chapter-tile.locked { --chapter-accent: #7d837f; opacity: 1; border-color: rgba(166,171,168,.28); background: linear-gradient(105deg, rgba(112,119,115,.13), rgba(10,15,13,.82) 64%); color: #858b87; box-shadow: inset 0 1px rgba(255,255,255,.025); filter: saturate(0); }
.chapter-tile.locked .chapter-progress-copy::before { content: "🔒"; margin-right: 4px; font-size: 10px; opacity: .65; }
.chapter-tile.locked .chapter-number, .chapter-tile.locked .chapter-copy strong, .chapter-tile.locked .chapter-copy small, .chapter-tile.locked .chapter-progress-copy { color: #858b87; }
.chapter-tile.locked .chapter-progress-bar { background: rgba(180,184,181,.09); }
.level-tile.locked::after { content: "🔒"; position: absolute; right: 10px; top: 8px; font-size: 10px; opacity: .72; }

.chapter-list { display: block; overflow-y: auto; padding: 0 4px 20px; }
.campaign-chapter-section { --chapter-accent: var(--mint); padding: 16px 0 20px; border-top: 1px dashed color-mix(in srgb, var(--chapter-accent) 42%, transparent); }
.campaign-chapter-section:first-child { padding-top: 4px; border-top: 0; }
.campaign-chapter-section:nth-child(3n+2) { --chapter-accent: var(--lilac); }
.campaign-chapter-section:nth-child(3n) { --chapter-accent: var(--yellow); }
.campaign-chapter-divider { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: baseline; gap: 9px; margin: 0 2px 10px; }
.campaign-chapter-divider > span { color: var(--chapter-accent); font: 400 27px/.8 var(--font-accent); }
.campaign-chapter-divider > strong { overflow: hidden; color: var(--chalk); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chapter-divider > small { color: var(--chapter-accent); font-size: 11px; font-weight: 750; }
.campaign-chapter-section.locked { --chapter-accent: #777d79; border-top-color: rgba(151,157,153,.22); }
.campaign-chapter-section.locked .campaign-chapter-divider > span,
.campaign-chapter-section.locked .campaign-chapter-divider > strong,
.campaign-chapter-section.locked .campaign-chapter-divider > small { color: #777d79; }
.campaign-level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.campaign-level-tile { --level-accent: var(--chapter-accent); aspect-ratio: 1; width: 100%; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--level-accent) 52%, transparent); border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--level-accent) 13%, rgba(7,26,21,.94)), rgba(4,15,12,.9)); color: var(--chalk); box-shadow: 0 5px 12px rgba(0,0,0,.18); }
.campaign-level-tile::before { inset: 3px; border-radius: 7px; opacity: .09; }
.campaign-level-tile strong { position: absolute; left: 50%; top: 50%; width: 100%; color: inherit; font: 400 22px/.8 var(--font-accent); letter-spacing: .01em; text-align: center; transform: translate(-50%, -50%); }
.campaign-level-tile small { position: absolute; top: 4px; right: 5px; color: var(--level-accent); font: 700 11px/1 var(--font-ui); }
.campaign-level-tile.completed { --level-accent: var(--green); border-color: color-mix(in srgb, var(--green) 78%, var(--chalk)); color: var(--green); background: linear-gradient(135deg, color-mix(in srgb, var(--green) 17%, rgba(7,26,21,.95)), rgba(4,15,12,.9)); }
.campaign-level-tile.skipped { --level-accent: var(--coral); color: var(--coral); background: linear-gradient(135deg, color-mix(in srgb, var(--coral) 14%, rgba(7,20,17,.94)), rgba(4,15,12,.9)); }
.campaign-level-tile.current { --level-accent: var(--yellow); border-width: 2px; color: var(--yellow); box-shadow: 0 0 16px color-mix(in srgb, var(--yellow) 19%, transparent), 0 5px 12px rgba(0,0,0,.2); }
.campaign-level-tile.locked { --level-accent: #6f7571; opacity: 1; border-color: rgba(143,149,145,.22); background: linear-gradient(135deg, rgba(104,111,107,.1), rgba(8,13,11,.88)); color: #6f7571; box-shadow: inset 0 1px rgba(255,255,255,.02); filter: saturate(0); }
.campaign-level-tile.locked small { top: 5px; right: 5px; font-size: 9px; opacity: .55; filter: grayscale(1); }
.campaign-level-tile:hover:not(:disabled) { border-color: var(--level-accent); color: var(--level-accent); background: color-mix(in srgb, var(--level-accent) 12%, rgba(5,18,14,.92)); }

.debug-entry { border-style: dashed; border-color: color-mix(in srgb, var(--coral) 58%, transparent); color: var(--coral); }
.debug-panel { width: min(100%, 520px); height: 100%; max-height: 100%; border-color: color-mix(in srgb, var(--coral) 60%, var(--chalk)); }
.debug-warning { margin: -10px auto 18px; color: var(--coral) !important; font-size: 13px !important; }
.debug-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 3px 3px 12px; }
.debug-grid button { min-width: 0; min-height: 78px; display: grid; align-content: center; justify-items: start; gap: 4px; text-align: left; }
.debug-grid strong { color: var(--chalk); font-size: 14px; }
.debug-grid small { color: var(--chalk-soft); font-size: 10px; line-height: 1.25; }
.debug-jump { display: grid; gap: 7px; padding-top: 13px; border-top: 1px dashed color-mix(in srgb, var(--coral) 45%, transparent); }
.debug-jump label { color: var(--chalk-soft); font-size: 12px; }
.debug-jump > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.debug-jump input { width: 100%; min-height: 46px; padding: 8px 12px; border: 2px solid rgba(242,240,218,.45); border-radius: 10px; background: rgba(0,0,0,.2); color: var(--chalk); }

.modal-layer { z-index: 20; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--theme-glow) 10%, transparent), transparent 42%), rgba(2,10,8,.91); justify-content: center; overflow-y: auto; overscroll-behavior: contain; }
.modal-layer:not([hidden]) { animation: modal-veil-in var(--motion-standard) ease-out both; }
.modal-layer:not([hidden]) > .panel { animation: modal-surface-in var(--motion-standard) var(--ease-out-back) both; }
.modal-layer > .panel { width: min(100%, 460px); max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom))); overflow-y: auto; }
#restart-modal:not([hidden]) .refined-modal-header,
#coach-offer-modal:not([hidden]) .refined-modal-header,
#shop-migration-modal:not([hidden]) .refined-modal-header { animation: modal-detail-in 380ms var(--ease-out-back) 100ms both; }
#restart-modal:not([hidden]) .refined-modal-copy,
#coach-offer-modal:not([hidden]) .refined-modal-copy,
#shop-migration-modal:not([hidden]) .refined-modal-copy { animation: modal-detail-in 360ms var(--ease-out-smooth) 150ms both; }
#pause-modal:not([hidden]) .button-stack button,
#restart-modal:not([hidden]) .refined-modal-actions button,
#coach-offer-modal:not([hidden]) .refined-modal-actions button,
#shop-migration-modal:not([hidden]) .refined-modal-actions button,
#skip-modal:not([hidden]) .modal-actions button { animation: modal-action-in 400ms var(--ease-out-back) both; }
#pause-modal:not([hidden]) .button-stack button:nth-child(1),
#restart-modal:not([hidden]) .refined-modal-actions button:nth-child(1),
#coach-offer-modal:not([hidden]) .refined-modal-actions button:nth-child(1),
#shop-migration-modal:not([hidden]) .refined-modal-actions button:nth-child(1),
#skip-modal:not([hidden]) .modal-actions button:nth-child(1) { animation-delay: 180ms; }
#pause-modal:not([hidden]) .button-stack button:nth-child(2),
#restart-modal:not([hidden]) .refined-modal-actions button:nth-child(2),
#coach-offer-modal:not([hidden]) .refined-modal-actions button:nth-child(2),
#shop-migration-modal:not([hidden]) .refined-modal-actions button:nth-child(2),
#skip-modal:not([hidden]) .modal-actions button:nth-child(2) { animation-delay: 225ms; }
#pause-modal:not([hidden]) .button-stack button:nth-child(3) { animation-delay: 270ms; }
#pause-modal:not([hidden]) .button-stack button:nth-child(4) { animation-delay: 315ms; }
#pause-modal:not([hidden]) .button-stack button:nth-child(5) { animation-delay: 360ms; }
.pause-panel { --surface-accent: var(--lilac); width: min(100%, 410px) !important; padding: 24px; overflow: hidden !important; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--lilac) 18%, transparent), transparent 38%), radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--mint) 11%, transparent), transparent 34%), var(--panel-gradient); }
.pause-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; }
.pause-header h2 { margin: 0; font-family: var(--font-accent); font-size: 46px; font-weight: 400; line-height: .82; letter-spacing: 0; }
.pause-emblem { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--lilac) 72%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--lilac) 12%, rgba(4,18,14,.82)); box-shadow: 0 0 20px color-mix(in srgb, var(--lilac) 14%, transparent); }
.pause-emblem-icon { width: 27px; height: 27px; object-fit: contain; }
.pause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pause-actions button { --pause-accent: var(--chalk-soft); width: 100%; min-width: 0; min-height: 54px; padding: 9px 11px; justify-content: flex-start; gap: 9px; border-color: color-mix(in srgb, var(--pause-accent) 52%, transparent); background: linear-gradient(105deg, color-mix(in srgb, var(--pause-accent) 12%, rgba(7,26,21,.92)), rgba(5,20,16,.82)); color: var(--chalk); font-size: 14px; text-align: left; }
.pause-actions button:nth-child(2) { --pause-accent: var(--coral); }
.pause-actions button:nth-child(3) { --pause-accent: var(--yellow); }
.pause-actions button:nth-child(4) { --pause-accent: var(--lilac); }
.pause-actions button:nth-child(5) { --pause-accent: var(--chalk-soft); }
.pause-actions button .ui-icon { width: 22px; height: 22px; color: var(--pause-accent); }
.pause-actions .pause-continue { --pause-accent: var(--mint); grid-column: 1 / -1; min-height: 64px; justify-content: center; border-width: 2px; background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--mint) 30%, var(--chalk))); color: var(--board-deep); font-size: 18px; font-weight: 800; text-align: center; }
.pause-actions .pause-continue .ui-icon { width: 26px; height: 26px; color: var(--board-deep); }
.refined-modal-panel { --refined-accent: var(--mint); width: min(100%, 420px) !important; padding: 24px !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--refined-accent) 58%, var(--chalk)); background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--refined-accent) 17%, transparent), transparent 40%), radial-gradient(circle at 94% 28%, color-mix(in srgb, var(--refined-secondary, var(--mint)) 9%, transparent), transparent 36%), var(--panel-gradient); }
.refined-modal-header { min-height: 58px; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 16px; text-align: left; }
.refined-modal-header h2 { min-width: 0; margin: 0; font-family: var(--font-accent); font-size: clamp(34px, 10vw, 43px); font-weight: 400; line-height: .86; letter-spacing: 0; overflow-wrap: anywhere; text-align: left; }
.refined-modal-emblem { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--refined-accent) 72%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--refined-accent) 11%, rgba(4,18,14,.88)); box-shadow: 0 0 22px color-mix(in srgb, var(--refined-accent) 14%, transparent); }
.refined-modal-icon { width: 34px; height: 34px; object-fit: contain; }
.refined-modal-copy { min-height: 76px; margin: 0 0 16px !important; padding: 13px 14px; display: grid; align-content: center; border: 1px solid color-mix(in srgb, var(--refined-accent) 25%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--refined-accent) 7%, rgba(255,255,255,.02)); color: var(--chalk-soft) !important; font-size: 14px !important; line-height: 1.45 !important; text-align: left !important; }
.refined-modal-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.refined-modal-actions button { width: 100%; min-width: 0; min-height: 56px; padding: 9px 10px; justify-content: center; gap: 8px; font-size: 14px; text-align: center; }
.refined-modal-actions .ui-icon { flex: 0 0 auto; width: 22px; height: 22px; }
.refined-modal-actions .primary { border-color: color-mix(in srgb, var(--refined-accent) 70%, var(--chalk)); background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--refined-accent) 29%, var(--chalk))); color: var(--board-deep); font-weight: 800; }
.refined-modal-actions .secondary { border-color: color-mix(in srgb, var(--chalk-soft) 38%, transparent); background: color-mix(in srgb, var(--chalk-soft) 6%, rgba(5,20,16,.82)); color: var(--chalk-soft); }
.restart-panel { --refined-accent: var(--coral); --refined-secondary: var(--yellow); }
.restart-panel .restart-confirm { background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--coral) 31%, var(--chalk))); }
.coach-offer-panel { --refined-accent: var(--mint); --refined-secondary: var(--lilac); }
.coach-offer-steps { height: 34px; margin: -6px 8px 12px; display: grid; grid-template-columns: 20px 1fr 20px 1fr 20px; align-items: center; gap: 6px; }
.coach-offer-steps i { width: 20px; height: 20px; border: 2px solid var(--mint); border-radius: 50%; background: color-mix(in srgb, var(--mint) 13%, var(--board-deep)); box-shadow: 0 0 13px color-mix(in srgb, var(--mint) 18%, transparent); }
.coach-offer-steps i:nth-of-type(2) { border-color: var(--yellow); }
.coach-offer-steps b { height: 2px; background: linear-gradient(90deg, var(--mint), color-mix(in srgb, var(--lilac) 70%, var(--mint))); box-shadow: 0 0 8px color-mix(in srgb, var(--mint) 22%, transparent); }
.shop-migration-panel { --refined-accent: var(--yellow); --refined-secondary: var(--mint); }
.skip-panel { --surface-accent: var(--coral); width: min(100%, 410px) !important; padding: 24px; overflow: hidden !important; border-color: color-mix(in srgb, var(--coral) 52%, var(--chalk)); background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--coral) 17%, transparent), transparent 38%), radial-gradient(circle at 94% 24%, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 34%), var(--panel-gradient); }
.skip-header { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 13px; margin-bottom: 16px; text-align: left; }
.skip-header h2 { min-width: 0; margin: 0; font-family: var(--font-accent); font-size: 43px; font-weight: 400; line-height: .84; letter-spacing: 0; overflow-wrap: anywhere; }
.skip-emblem { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--coral) 70%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--coral) 11%, rgba(4,18,14,.82)); box-shadow: 0 0 20px color-mix(in srgb, var(--coral) 14%, transparent); }
.skip-emblem-icon { width: 32px; height: 32px; object-fit: contain; }
.skip-copy { margin: 0 0 16px !important; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--coral) 24%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--coral) 7%, rgba(255,255,255,.02)); color: var(--chalk-soft) !important; font-size: 14px !important; line-height: 1.45 !important; text-align: left !important; }
.skip-actions { display: grid; gap: 9px; }
.skip-actions button { width: 100%; min-height: 52px; margin: 0; justify-content: center; gap: 9px; font-size: 15px; }
.skip-actions .ui-icon { width: 22px; height: 22px; }
.skip-actions .skip-confirm { min-height: 60px; border-color: color-mix(in srgb, var(--coral) 70%, var(--chalk)); background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--coral) 30%, var(--chalk))); color: var(--board-deep); font-size: 17px; font-weight: 800; }
.skip-actions .skip-confirm .ui-icon { width: 26px; height: 26px; }
.skip-actions .secondary { border-color: color-mix(in srgb, var(--chalk-soft) 42%, transparent); background: color-mix(in srgb, var(--chalk-soft) 6%, rgba(5,20,16,.82)); color: var(--chalk-soft); }
.modal-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-actions button { width: 100%; min-width: 0; justify-content: center; text-align: center; }
.performance-panel { --surface-accent: var(--coral); overflow-x: hidden !important; background: radial-gradient(circle at 20% 0, color-mix(in srgb, var(--lilac) 17%, transparent), transparent 38%), radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--coral) 15%, transparent), transparent 34%), var(--panel-gradient); }
.performance-panel::after { content: ""; position: absolute; z-index: -1; right: -118px; bottom: 8px; width: 220px; height: 220px; border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent); border-radius: 50%; box-shadow: 0 0 70px color-mix(in srgb, var(--mint) 8%, transparent); pointer-events: none; }
.performance-panel h2 { margin: 0 36px 18px; font-family: var(--font-accent); font-size: 44px; font-weight: 400; line-height: .82; letter-spacing: 0; }
.performance-copy { margin: 0 auto 18px !important; color: var(--chalk-soft); font-size: 15px !important; }
.performance-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border: 1px solid color-mix(in srgb, var(--chalk) 28%, transparent); border-radius: 50%; background: rgba(0,0,0,.2); color: var(--chalk-soft); font-size: 25px; font-weight: 350; line-height: 1; }
.performance-close::before { border-radius: 50%; }
.performance-emblem { width: 52px; height: 52px; margin: -5px auto 8px; display: grid; place-items: center; }
.performance-emblem-icon { width: 46px; height: 46px; object-fit: contain; }
.performance-options { display: grid; gap: 10px; }
.performance-option { --performance-option-accent: var(--chalk-soft); width: 100%; min-height: 62px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 26px; align-items: center; gap: 12px; padding: 9px 12px; border-color: color-mix(in srgb, var(--performance-option-accent) 42%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--performance-option-accent) 11%, rgba(7,26,21,.92)), rgba(5,20,16,.82) 68%); text-align: left; transition: transform 110ms, border-color 160ms, color 160ms, opacity 160ms; }
.performance-option[data-performance-mode="high"] { --performance-option-accent: var(--lilac); }
.performance-option[data-performance-mode="balanced"] { --performance-option-accent: var(--mint); }
.performance-option[data-performance-mode="low"] { --performance-option-accent: var(--yellow); }
.performance-option::before { border-color: var(--performance-option-accent); opacity: .08; }
.performance-option > span:nth-child(2) { display: grid; gap: 4px; }
.performance-option strong { color: var(--chalk); font-size: 17px; line-height: 1.1; }
.performance-option small { color: var(--chalk-soft); font-size: 12px; font-weight: 450; line-height: 1.25; }
.performance-option-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--performance-option-accent) 58%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--performance-option-accent) 11%, transparent); color: var(--performance-option-accent); font: 23px/1 var(--font-accent); }
.performance-option-icon { width: 27px; height: 27px; object-fit: contain; pointer-events: none; }
.performance-option-check { opacity: 0; color: var(--performance-option-accent); font-size: 20px; transform: scale(.72); transition: transform 160ms var(--ease-out-back), opacity 120ms; }
.performance-option.selected { border-color: color-mix(in srgb, var(--performance-option-accent) 82%, var(--chalk)); color: var(--chalk); background: color-mix(in srgb, var(--performance-option-accent) 13%, rgba(4,18,14,.9)); }
.performance-option.selected .performance-option-check { opacity: 1; transform: scale(1); }
.performance-option.selected .performance-option-mark { border-color: var(--performance-option-accent); }
.success-panel [data-act="next"] { grid-column: 1 / -1; }
/* --- interactive coach ---------------------------------------------------- */
/* The layer never swallows a touch: the whole point is that the player taps the
   board underneath it. Only the caption's own buttons take pointer events. */
#coach-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-r: 90px;
  --drag-x: 0px;
  --drag-y: 0px;
}
.coach-veil {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--spot-r) * 2);
  height: calc(var(--spot-r) * 2);
  border: 28px solid rgba(7,13,10,.3);
  border-radius: 50%;
  box-shadow: 0 0 0 120vmax rgba(2,10,8,.58);
  will-change: transform;
}
/* .coach-mark carries the position, its child carries the animation. */
.coach-mark { position: absolute; left: 0; top: 0; }
.coach-mark > b {
  position: absolute;
  inset: 0;
  border: 2px dashed var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--yellow) 34%, transparent);
  animation: coach-ring-breathe 1.7s ease-in-out infinite;
}
.coach-mark > b::after { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--yellow) 44%, transparent); border-radius: 50%; animation: coach-ring-orbit 7s linear infinite; }
/* Chalk guide along the pair a step is about, drawn from a zero-height element so
   the rotation pivot is exactly the first node's centre. */
.coach-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  border-top: 3px dashed color-mix(in srgb, var(--yellow) 62%, transparent);
  transform-origin: 0 0;
}
.coach-hand { position: absolute; left: 0; top: 0; }
.coach-hand > b {
  position: absolute;
  left: -13px;
  top: -7px;
  width: 44px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.coach-hand svg { width: 100%; height: 100%; fill: none; stroke: var(--chalk); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The fingertip contact point, so it is obvious which pixel is being touched. */
.coach-hand > b::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .85;
}
#coach-layer[data-gesture="tap"] .coach-hand > b { animation: coach-tap 1.5s ease-in-out infinite; }
#coach-layer[data-gesture="drag"] .coach-hand > b { animation: coach-drag 2.1s ease-in-out infinite; }
.coach-pinch { position: absolute; left: 0; top: 0; }
/* Fingertips, not nodes: same yellow contact dot the hand marker uses, and far
   smaller than an atom so the two can never be confused. */
.coach-pinch b {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(9,16,13,.85);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px color-mix(in srgb, var(--yellow) 55%, transparent);
}
#coach-layer[data-gesture="pinch-out"] .coach-pinch b:first-child { animation: coach-pinch-out-a 1.9s ease-in-out infinite; }
#coach-layer[data-gesture="pinch-out"] .coach-pinch b:last-child { animation: coach-pinch-out-b 1.9s ease-in-out infinite; }
#coach-layer[data-gesture="pinch-in"] .coach-pinch b:first-child { animation: coach-pinch-in-a 1.9s ease-in-out infinite; }
#coach-layer[data-gesture="pinch-in"] .coach-pinch b:last-child { animation: coach-pinch-in-b 1.9s ease-in-out infinite; }
/* Centred with auto margins, never a transform: the entrance animation owns
   `transform`, and a transform-positioned bubble would jump when it runs. */
.coach-bubble {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 74px;
  width: min(calc(100% - 28px), 430px);
  margin: 0 auto;
  padding: 14px 18px 16px;
  border: 2px solid var(--chalk);
  border-radius: 16px;
  background: var(--panel-gradient);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  text-align: center;
  transform: translate3d(0, 0, 0);
}
.coach-bubble.step-enter { animation: coach-bubble-in 260ms var(--ease-out-back); }
#coach-layer[data-step-kind="bond"] .coach-bubble { border-color: var(--mint); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 24px color-mix(in srgb, var(--mint) 5%, transparent); }
#coach-layer[data-step-kind="zoom"] .coach-bubble { border-color: var(--lilac); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 24px color-mix(in srgb, var(--lilac) 5%, transparent); }
.coach-bubble.at-top { bottom: auto; top: calc(var(--hud-height) + 12px); }
.coach-count { margin: 0 0 4px; color: var(--chalk-soft); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.coach-title { margin: 0 0 6px; color: var(--chalk); font: 30px/1 var(--font-accent); }
.coach-body { margin: 0; color: var(--chalk-soft); font-size: 16px; line-height: 1.42; }
.coach-progress { margin: 11px 0 0; display: flex; gap: 8px; justify-content: center; }
.coach-progress b { width: 11px; height: 11px; border: 2px solid var(--chalk-faint); border-radius: 50%; }
.coach-progress b.filled { border-color: var(--yellow); background: var(--yellow); box-shadow: 0 0 9px color-mix(in srgb, var(--yellow) 55%, transparent); animation: coach-progress-fill 300ms var(--ease-out-back); }
.coach-action, .coach-skip { pointer-events: auto; }
.coach-action { margin: 12px auto 0; min-height: 46px; padding: 0 22px; border: 2px solid var(--mint); border-radius: 12px; background: color-mix(in srgb, var(--mint) 14%, rgba(13,23,19,.8)); color: var(--mint); font-size: 16px; font-weight: 600; }
.coach-action:not([hidden]) { animation: coach-action-in 360ms var(--ease-out-back); }
.coach-skip {
  position: absolute;
  right: 12px;
  bottom: 22px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--chalk-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#coach-layer.cleared .coach-mark > b { border-color: var(--green); border-style: solid; animation: coach-ring-done 320ms ease-out forwards; }
#coach-layer.cleared .coach-hand, #coach-layer.cleared .coach-pinch, #coach-layer.cleared .coach-track { opacity: 0; }
#coach-layer.nudge .coach-mark > b { border-color: var(--coral); animation: coach-ring-nudge 480ms ease-in-out; }
#coach-layer.nudge .coach-bubble { animation: coach-ring-nudge 480ms ease-in-out; }
@keyframes coach-ring-breathe { 0%, 100% { opacity: .95; scale: 1; } 50% { opacity: .6; scale: 1.07; } }
@keyframes coach-ring-orbit { to { transform: rotate(360deg); } }
@keyframes coach-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes coach-progress-fill { from { transform: scale(.35); } to { transform: none; } }
@keyframes coach-action-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes coach-ring-done { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.3; } }
@keyframes coach-ring-nudge { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 55% { translate: 7px 0; } 80% { translate: -3px 0; } }
@keyframes coach-tap { 0%, 100% { scale: 1; opacity: 1; } 45% { scale: .82; opacity: .78; } }
@keyframes coach-drag {
  0% { translate: 0 0; scale: 1; opacity: 0; }
  10% { translate: 0 0; scale: 1; opacity: 1; }
  65% { translate: var(--drag-x) var(--drag-y); scale: .94; opacity: 1; }
  85%, 100% { translate: var(--drag-x) var(--drag-y); scale: .94; opacity: 0; }
}
@keyframes coach-pinch-out-a { 0%, 100% { translate: -16px -16px; } 55% { translate: -54px -54px; } }
@keyframes coach-pinch-out-b { 0%, 100% { translate: 16px 16px; } 55% { translate: 54px 54px; } }
@keyframes coach-pinch-in-a { 0%, 100% { translate: -54px -54px; } 55% { translate: -16px -16px; } }
@keyframes coach-pinch-in-b { 0%, 100% { translate: 54px 54px; } 55% { translate: 16px 16px; } }
@media (prefers-reduced-motion: reduce) {
  .coach-mark > b, .coach-mark > b::after,
  .coach-hand > b, .coach-pinch b, .coach-bubble,
  .coach-action, .coach-progress b { animation: none !important; }
}
.success-panel { border-color: var(--green); text-align: center; }
.daily-entry { border-color: color-mix(in srgb, var(--yellow) 72%, var(--chalk)); color: var(--yellow); background: color-mix(in srgb, var(--yellow) 7%, rgba(13,23,19,.72)); }
.daily-panel {
  width: min(100%, 500px) !important;
  border-color: color-mix(in srgb, var(--yellow) 70%, var(--lilac));
  background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 36%), radial-gradient(circle at 100% 35%, color-mix(in srgb, var(--lilac) 13%, transparent), transparent 42%), linear-gradient(150deg, color-mix(in srgb, var(--board-light) 45%, var(--board-deep)), var(--board-deep));
  box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 0 42px color-mix(in srgb, var(--yellow) 5%, transparent);
}
.daily-header { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 13px; margin: 0 0 15px; text-align: left; }
.daily-emblem { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--yellow) 70%, var(--chalk)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 22%, transparent), color-mix(in srgb, var(--lilac) 13%, transparent)); box-shadow: 0 0 24px color-mix(in srgb, var(--yellow) 18%, transparent); rotate: -3deg; }
.daily-emblem-icon { width: 35px; height: 35px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.34)); }
.daily-header h2 { margin: 0; color: var(--yellow); font-size: clamp(36px, 10vw, 48px); line-height: .82; }
.daily-header p { margin: 5px 0 0; color: var(--lilac); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
#daily-modal:not([hidden]) .daily-meta > span { animation: daily-item-in 420ms var(--ease-out-back) both; }
#daily-modal:not([hidden]) .daily-meta > span:nth-child(1) { animation-delay: 90ms; }
#daily-modal:not([hidden]) .daily-meta > span:nth-child(2) { animation-delay: 140ms; }
#daily-modal:not([hidden]) .daily-status { animation: daily-item-in 420ms var(--ease-out-smooth) 185ms both; }
#daily-modal:not([hidden]) .daily-ranking { animation: daily-item-in 460ms var(--ease-out-back) 220ms both; }
#daily-modal:not([hidden]) .daily-note,
#daily-modal:not([hidden]) .modal-actions { animation: daily-item-in 420ms var(--ease-out-smooth) 280ms both; }
.daily-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.daily-meta span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--chalk-faint));
  border-radius: 10px;
  color: var(--chalk);
  background: color-mix(in srgb, var(--mint) 7%, rgba(0,0,0,.16));
  font-size: 12px;
  text-align: center;
}
.daily-meta span:nth-child(2) { border-color: color-mix(in srgb, var(--lilac) 38%, var(--chalk-faint)); background: color-mix(in srgb, var(--lilac) 7%, rgba(0,0,0,.16)); }
.daily-meta strong { display: block; margin-top: 3px; color: var(--mint); font-size: 16px; }
.daily-meta span:nth-child(2) strong { color: var(--lilac); }
.daily-status { min-height: 24px; margin: 8px 0 12px; color: var(--chalk) !important; font-size: 14px !important; }
.daily-ranking { position: relative; overflow: hidden; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--yellow) 34%, var(--chalk-faint)); border-radius: 14px; background: linear-gradient(145deg, rgba(0,0,0,.2), color-mix(in srgb, var(--lilac) 4%, rgba(0,0,0,.12))); }
.daily-panel.is-loading .daily-ranking::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--yellow) 9%, transparent) 48%, transparent 66%); transform: translateX(-100%); animation: daily-ranking-scan 1.7s ease-in-out infinite; }
.daily-ranking-head,
.daily-leaders li,
.daily-me {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 48px 76px;
  align-items: center;
  gap: 8px;
}
.daily-ranking-head { padding: 8px 12px; border-bottom: 1px solid var(--chalk-faint); color: var(--chalk-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.daily-ranking-head span:first-child { grid-column: 1 / 3; }
.daily-ranking-head span:not(:first-child) { text-align: right; }
.daily-leaders { min-height: 184px; margin: 0; padding: 0; list-style: none; }
.daily-leaders li { min-height: 36px; padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 9%, transparent); animation: leaderboard-row-in 360ms var(--ease-out-smooth) var(--row-delay, 0ms) both; }
.daily-leaders li:nth-child(1) { background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.daily-leaders li:nth-child(2) { background: color-mix(in srgb, var(--lilac) 6%, transparent); }
.daily-leaders li:nth-child(3) { background: color-mix(in srgb, var(--coral) 5%, transparent); }
.daily-leaders li.is-me { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 7%, transparent); }
.daily-leaders li span, .daily-me span { color: var(--chalk-soft); font-size: 12px; }
.daily-leaders li strong, .daily-me strong { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.daily-leaders li em, .daily-me em { color: var(--chalk); font-size: 14px; font-style: normal; font-weight: 750; text-align: right; }
.daily-leaders li b, .daily-me b { color: var(--mint); font-size: 12px; font-weight: 750; text-align: right; }
.daily-leaders .daily-empty { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 184px; color: var(--chalk-soft); font-size: 14px; }
.daily-me { min-height: 45px; padding: 9px 12px; border-top: 2px solid var(--yellow); color: var(--yellow); background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.daily-panel.is-completed .daily-status { color: var(--green) !important; }
.daily-panel.is-completed .daily-me { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); }
.daily-panel.is-incomplete .daily-status { color: var(--coral) !important; }
.daily-me em { color: var(--yellow); }
.daily-me b { color: var(--yellow); }
.daily-note { min-height: 38px; margin: 4px 0 13px !important; color: var(--chalk-soft) !important; font-size: 13px !important; }
.daily-identity { margin: 0; padding: 0; }
.daily-identity-panel { width: min(100%, 460px) !important; }
.daily-nickname-error { min-height: 18px; margin: -3px 0 0 !important; color: var(--yellow) !important; font-size: 12px !important; text-align: left !important; }
.daily-loading-panel { width: min(100%, 430px) !important; text-align: center; overflow: hidden !important; }
.daily-loading-panel h2 { margin-inline: 18px; }
.daily-loader-molecule {
  position: relative;
  width: 104px;
  height: 62px;
  margin: 2px auto 14px;
}
.daily-loader-molecule i {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  background: var(--board-deep);
  box-shadow: 0 0 18px color-mix(in srgb, var(--yellow) 18%, transparent);
  animation: daily-atom-pulse 1.35s ease-in-out infinite;
}
.daily-loader-molecule i:nth-child(1) { left: 0; top: 23px; }
.daily-loader-molecule i:nth-child(2) { left: 35px; top: 0; animation-delay: 120ms; }
.daily-loader-molecule i:nth-child(3) { right: 0; top: 23px; animation-delay: 240ms; }
.daily-loader-molecule b {
  position: absolute;
  z-index: 1;
  top: 29px;
  width: 45px;
  height: 4px;
  border-radius: 99px;
  background: var(--chalk);
  transform-origin: center;
  animation: daily-bond-glow 1.35s ease-in-out infinite;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--yellow) 72%, transparent));
}
.daily-loader-molecule b:nth-of-type(1) { left: 20px; transform: rotate(-32deg); }
.daily-loader-molecule b:nth-of-type(2) { right: 20px; transform: rotate(32deg); animation-delay: 180ms; }
.daily-progress-copy {
  margin: 21px 2px 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  color: var(--chalk-soft);
  font-size: 12px;
  text-align: left;
}
.daily-progress-copy span strong { color: var(--chalk); }
.daily-progress-copy > strong { color: var(--yellow); font-size: 18px; }
.daily-progress-track {
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chalk) 30%, transparent);
  border-radius: 999px;
  background: rgba(5, 12, 9, .42);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.34);
}
.daily-progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--yellow));
  box-shadow: 0 0 14px color-mix(in srgb, var(--yellow) 36%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease-out;
  will-change: transform;
}
.daily-loading-note {
  margin: 14px auto 0 !important;
  color: var(--chalk-soft) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.hint-purchase-panel { width: min(100%, 390px) !important; padding: 24px 22px 20px !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--yellow) 72%, var(--mint)); background: radial-gradient(circle at 50% 3%, color-mix(in srgb, var(--yellow) 22%, transparent), transparent 34%), radial-gradient(circle at 100% 70%, color-mix(in srgb, var(--mint) 13%, transparent), transparent 42%), linear-gradient(155deg, #173d31, #071c16 58%, #04120e); text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 34px color-mix(in srgb, var(--yellow) 10%, transparent); }
.hint-purchase-art { position: relative; width: 126px; height: 126px; margin: -3px auto 7px; display: grid; place-items: center; }
.hint-purchase-art i { position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--yellow) 52%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 68%); box-shadow: 0 0 30px color-mix(in srgb, var(--yellow) 16%, transparent), inset 0 0 22px color-mix(in srgb, var(--mint) 8%, transparent); }
.hint-purchase-icon { position: relative; z-index: 2; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.38)); }
.hint-purchase-art b { position: absolute; z-index: 3; color: var(--yellow); font-size: 18px; text-shadow: 0 0 9px currentColor; }
.hint-purchase-art b:nth-of-type(1) { left: 4px; top: 31px; rotate: -13deg; }
.hint-purchase-art b:nth-of-type(2) { right: 3px; bottom: 25px; color: var(--mint); rotate: 11deg; }
.hint-purchase-panel h2 { margin: 0 0 15px; color: var(--chalk); font-size: clamp(38px, 11vw, 48px); line-height: .84; }
.hint-purchase-price { width: max-content; min-width: 136px; min-height: 56px; margin: 0 auto 18px; padding: 7px 13px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--yellow) 64%, var(--chalk)); border-radius: 999px; background: linear-gradient(110deg, color-mix(in srgb, var(--yellow) 13%, rgba(4,18,14,.88)), rgba(4,18,14,.9)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.26); }
.hint-purchase-price strong { color: var(--yellow); font-size: 26px; font-weight: 900; line-height: 1; }
.hint-purchase-price span { color: var(--chalk-soft); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.hint-purchase-coin { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0,0,0,.3)); }
.hint-purchase-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 9px; }
.hint-purchase-actions button { width: 100%; min-width: 0; min-height: 56px; margin: 0; justify-content: center; gap: 8px; }
.hint-purchase-buy { border-color: color-mix(in srgb, var(--yellow) 82%, white) !important; background: linear-gradient(105deg, var(--yellow), color-mix(in srgb, var(--mint) 28%, var(--yellow))) !important; color: var(--board-deep) !important; font-weight: 850; }
.hint-purchase-buy .ui-icon { width: 25px; height: 25px; filter: none !important; }
@keyframes daily-atom-pulse {
  0%, 100% { transform: scale(.9); background: var(--board-deep); }
  50% { transform: scale(1.08); background: color-mix(in srgb, var(--yellow) 16%, var(--board-deep)); }
}
@keyframes daily-bond-glow {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}
.fortune-panel { width: min(100%, 500px) !important; text-align: center; overflow: hidden !important; }
.fortune-wrap { --label-radius: 132px; position: relative; width: min(78vw, 360px); aspect-ratio: 1; margin: 14px auto 12px; isolation: isolate; }
.fortune-wrap::before { content: ""; position: absolute; z-index: 0; inset: -9px; border: 1px dashed color-mix(in srgb, var(--yellow) 34%, transparent); border-radius: 50%; opacity: .42; pointer-events: none; }
.fortune-wrap.is-idle::before { animation: fortune-orbit 18s linear infinite; }
.fortune-pointer { position: absolute; z-index: 5; top: -11px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 34px solid #f7d66c; filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.fortune-pointer::after { content: ""; position: absolute; width: 10px; height: 10px; top: -32px; left: -5px; border-radius: 50%; background: #fff1aa; }
.fortune-wheel { position: absolute; inset: 0; overflow: hidden; border: 8px solid color-mix(in srgb, var(--chalk) 72%, var(--theme-glow)); outline: 3px solid var(--board-deep); outline-offset: -13px; border-radius: 50%; box-shadow: 0 0 34px color-mix(in srgb, var(--theme-glow) 48%, transparent), inset 0 0 28px rgba(0,0,0,.38); transition: transform 4.2s cubic-bezier(.12,.62,.08,1); }
.fortune-wheel.idle { animation: none; }
.fortune-wrap.is-idle:not(.win-jackpot)::after { content: ""; position: absolute; z-index: -1; inset: -14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--theme-glow) 20%, transparent), transparent 68%); opacity: .45; pointer-events: none; animation: fortune-aura 2.8s ease-in-out infinite; }
.fortune-wheel.spinning { animation: none; }
.fortune-labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.fortune-label { position: absolute; left: 50%; top: 50%; width: 78px; min-height: 52px; margin: -26px 0 0 -39px; display: grid; place-items: center; align-content: center; gap: 1px; color: rgba(255,255,255,.68); opacity: .68; text-shadow: 0 1px 3px rgba(0,0,0,.88); filter: saturate(.58); transform: rotate(var(--display-angle)) translateY(calc(-1 * var(--label-radius))) rotate(var(--upright)); transition: color 180ms, opacity 180ms; will-change: transform; }
.fortune-wheel.spinning + .fortune-labels .fortune-label { transition: transform 4.2s cubic-bezier(.12,.62,.08,1), color 180ms, opacity 180ms; }
.fortune-label .fortune-icon { display: block; font: 700 22px/.9 "Handlee", sans-serif; letter-spacing: -.04em; }
.fortune-label .fortune-reward-icon { display: block; width: 22px; height: 22px; margin: -1px auto 0; object-fit: contain; }
.fortune-label small { display: block; max-width: 76px; font: 800 10px/1.05 system-ui, sans-serif; letter-spacing: .045em; white-space: nowrap; }
.fortune-label em { display: block; padding: 2px 4px; border: 1px solid currentColor; border-radius: 999px; font: 800 6px/1 var(--font-ui); letter-spacing: .08em; opacity: .7; }
/* Honest slice sizes leave rare prizes only a few degrees, so their labels
   shed the tier badge and tighten up instead of spilling over neighbours. */
.fortune-label.narrow { width: 58px; margin-left: -29px; gap: 0; }
.fortune-label.narrow em { display: none; }
.fortune-label.narrow .fortune-icon { font-size: 17px; }
.fortune-label.narrow .fortune-reward-icon { width: 18px; height: 18px; }
.fortune-label.narrow small { max-width: 58px; font-size: 8px; letter-spacing: .02em; }
.fortune-label.uncommon { color: rgba(255,255,255,.84); opacity: .84; filter: saturate(.82); }
.fortune-label.rare { color: #fff4c7; opacity: .96; filter: saturate(1.04) drop-shadow(0 0 3px rgba(235,211,140,.45)); }
.fortune-label.rare em { background: rgba(235,211,140,.16); }
.fortune-label.jackpot { color: #241704; opacity: 1; text-shadow: 0 1px 0 rgba(255,255,255,.58), 0 0 8px rgba(255,224,111,.72); filter: drop-shadow(0 0 5px rgba(255,218,91,.7)); }
.fortune-label.jackpot .fortune-icon { font-size: 29px; }
.fortune-label.jackpot small { font-size: 10px; letter-spacing: .04em; }
.fortune-label.jackpot em { border-color: #382400; background: rgba(255,248,203,.45); }
.fortune-label.winner { color: #fff; opacity: 1; filter: drop-shadow(0 0 7px #fff5bd) saturate(1); }
.fortune-hub { position: absolute; z-index: 4; inset: 50% auto auto 50%; width: 94px; height: 94px; translate: -50% -50%; display: grid; place-items: center; align-content: center; gap: 1px; border: 5px solid color-mix(in srgb, var(--chalk) 78%, var(--theme-glow)); border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--board-light), var(--board-deep) 68%); color: var(--yellow); box-shadow: 0 4px 18px rgba(0,0,0,.52), inset 0 0 16px color-mix(in srgb, var(--theme-glow) 20%, transparent); pointer-events: none; }
.fortune-hub span { font-size: 32px; line-height: .9; }
.fortune-hub small { color: var(--chalk-soft); font: 700 8px/1 system-ui, sans-serif; letter-spacing: .08em; }
/* Odds disclosure: the drawn slices are sized for legibility, so the real roll
   probabilities have to be readable before the player commits to a spin. The
   wheel itself is the hero, so the sheet hides behind an "i" affordance. */
.panel-info-button { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; justify-content: center; gap: 0; border: 1px solid rgba(242,240,218,.34); border-radius: 50%; background: rgba(0,0,0,.18); color: var(--chalk-soft); font: 700 17px/1 var(--font-ui); }
.panel-info-button::before { border-radius: 50%; }
.panel-info-button:hover, .panel-info-button:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.fortune-panel { padding-top: 42px !important; }
.fortune-odds-panel h2 { margin-bottom: 12px; font-size: 38px; }
.fortune-odds { margin: 9px auto 2px; max-height: min(46dvh, 340px); overflow-y: auto; width: min(100%, 320px); text-align: left; }
.fortune-odds-lede { margin: 0 0 7px; color: var(--chalk-soft); font-size: 12px; line-height: 1.4; }
.fortune-odds ul { margin: 0; padding: 0; list-style: none; }
.fortune-odds li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(242,240,218,.1); font-size: 13px; color: var(--chalk-soft); }
.fortune-odds li:last-child { border-bottom: 0; }
.fortune-odds li b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.fortune-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: -2px auto 7px; }
.fortune-legend span { padding: 3px 6px; border: 1px solid rgba(242,240,218,.22); border-radius: 999px; color: var(--chalk-soft); font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.fortune-legend .uncommon { border-color: color-mix(in srgb, var(--mint) 50%, transparent); color: var(--mint); }
.fortune-legend .rare { border-color: color-mix(in srgb, var(--yellow) 65%, transparent); color: var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, transparent); }
.fortune-legend .jackpot { border-color: #efc43e; color: #2c1c03; background: linear-gradient(135deg, #fff0a2, #dca825); box-shadow: 0 0 8px rgba(239,196,62,.28); }
.fortune-fx { position: absolute; z-index: 7; inset: 50%; width: 0; height: 0; overflow: visible; pointer-events: none; }
.fortune-particle { position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); border-radius: 50%; background: var(--particle-color); box-shadow: 0 0 8px var(--particle-color); opacity: 0; animation: fortune-particle-burst 1.35s cubic-bezier(.16,.7,.2,1) var(--delay) both; will-change: translate, rotate, scale, opacity; }
.fortune-particle.shape-1 { border-radius: 1px; transform: rotate(45deg); }
.fortune-particle.shape-2 { width: calc(var(--size) * .42); border-radius: 999px; }
.fortune-wrap.celebrating .fortune-pointer { animation: fortune-pointer-win .58s ease-out 2; }
.fortune-wrap.celebrating .fortune-hub { animation: fortune-hub-win .8s ease-out 2; }
.fortune-wrap.win-rare .fortune-wheel,
.fortune-wrap.win-jackpot .fortune-wheel { box-shadow: 0 0 52px color-mix(in srgb, var(--yellow) 72%, transparent), inset 0 0 30px rgba(255,239,160,.22); }
.fortune-wrap.win-jackpot::after { content: "JACKPOT"; position: absolute; z-index: 8; left: 50%; top: 50%; translate: -50% -50%; padding: 8px 14px; border: 2px solid #4b3107; border-radius: 999px; background: linear-gradient(135deg,#fff2ad,#dba521); color: #281802; font-size: 12px; font-weight: 900; letter-spacing: .12em; box-shadow: 0 0 28px #ffd963; animation: fortune-jackpot-pop 1.5s ease-out both; }
.fortune-result { min-height: 28px; color: var(--yellow) !important; font-size: 20px !important; }
.fortune-note { margin: 5px 0 12px; font-size: 13px !important; }
/* Rebuilt fortune flow: smooth sector gradients, line dividers and a compact
   molecule-like core replace the old wedge gaps and label-heavy wheel. */
.fortune-panel { width: min(100%, 480px) !important; padding: 24px !important; border-color: color-mix(in srgb, #cfa843 68%, var(--chalk)); background: radial-gradient(circle at 50% 11%, rgba(207,168,67,.1), transparent 34%), radial-gradient(circle at 50% 46%, rgba(26,107,78,.16), transparent 48%), linear-gradient(165deg, rgba(18,53,41,.97), rgba(3,20,14,.99)); box-shadow: inset 0 0 0 1px rgba(240,207,118,.13), inset 0 0 42px rgba(15,92,66,.1), 0 22px 70px rgba(0,0,0,.46); }
.fortune-header { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; margin-bottom: 4px; }
.fortune-header h2 { grid-column: 2; margin: 0; font-family: var(--font-accent); font-size: clamp(39px, 11vw, 49px); font-weight: 400; line-height: .86; }
.fortune-info-button { grid-column: 3; width: 38px; min-width: 38px; max-width: 38px; height: 38px; min-height: 38px; padding: 0; display: grid; place-items: center; justify-self: end; border: 1px solid color-mix(in srgb, var(--lilac) 58%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--lilac) 10%, rgba(5,20,16,.9)); color: var(--yellow); box-shadow: 0 5px 14px rgba(0,0,0,.24); }
.fortune-info-button::before { border-radius: 50%; }
.fortune-info-button::after { content: "i"; position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; padding-bottom: 1px; color: var(--yellow); font: 800 19px/1 var(--font-ui); }
.fortune-info-orbit { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--mint) 65%, transparent); border-radius: 50%; }
.fortune-info-orbit::before { content: ""; position: absolute; inset: 5px -3px; border: 1px solid color-mix(in srgb, var(--yellow) 62%, transparent); border-radius: 50%; transform: rotate(-32deg); }
.fortune-info-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 7px currentColor; }
.fortune-info-orbit i:first-child { top: 1px; right: 2px; }.fortune-info-orbit i:nth-child(2) { bottom: 2px; left: 0; background: var(--mint); }
.fortune-info-orbit b { position: relative; color: var(--chalk); font: 800 15px/1 var(--font-ui); }
.fortune-wrap { --label-radius: 126px; width: min(100%, 352px); max-width: 352px; margin: 10px auto 9px; aspect-ratio: 1; }
.fortune-wrap::before { inset: -8px; border: 2px solid #cfa843; opacity: 1; background: radial-gradient(circle, transparent 87%, rgba(30,105,77,.13) 87.5% 90%, transparent 90.5%); box-shadow: inset 0 0 0 3px #08231a, inset 0 0 0 5px rgba(230,194,99,.42), 0 0 0 1px rgba(255,235,171,.34), 0 0 30px rgba(17,91,66,.3); }
.fortune-wrap.is-idle::before { animation: none; }
.fortune-wrap.is-idle:not(.win-jackpot)::after { z-index: -2; inset: -22px; background: radial-gradient(circle, color-mix(in srgb, var(--theme-glow) 24%, transparent), transparent 69%); opacity: .5; }
.fortune-ambient { position: absolute; z-index: -1; inset: -22px; border-radius: 50%; pointer-events: none; }
.fortune-ambient i { position: absolute; width: 5px; height: 5px; border-radius: 50%; color: #4fc39a; background: currentColor; box-shadow: 0 0 8px currentColor; opacity: .38; animation: fortune-dust 3.4s ease-in-out infinite; }
.fortune-ambient i:nth-child(3n+2) { width: 3px; height: 3px; color: #d9b04b; animation-delay: -1.1s; }.fortune-ambient i:nth-child(3n) { width: 6px; height: 6px; color: #8a6bab; animation-delay: -2.2s; }
.fortune-ambient i:nth-child(1) { left: 7%; top: 22%; }.fortune-ambient i:nth-child(2) { left: 18%; top: 4%; }.fortune-ambient i:nth-child(3) { left: 42%; top: 0; }.fortune-ambient i:nth-child(4) { right: 24%; top: 5%; }.fortune-ambient i:nth-child(5) { right: 5%; top: 25%; }.fortune-ambient i:nth-child(6) { right: 0; top: 53%; }.fortune-ambient i:nth-child(7) { right: 9%; bottom: 18%; }.fortune-ambient i:nth-child(8) { right: 29%; bottom: 2%; }.fortune-ambient i:nth-child(9) { left: 45%; bottom: -2%; }.fortune-ambient i:nth-child(10) { left: 22%; bottom: 4%; }.fortune-ambient i:nth-child(11) { left: 4%; bottom: 24%; }.fortune-ambient i:nth-child(12) { left: -1%; top: 49%; }.fortune-ambient i:nth-child(13) { left: 27%; top: 13%; }.fortune-ambient i:nth-child(14) { right: 26%; bottom: 12%; }
.fortune-pointer { z-index: 7; top: -5px; width: 31px; height: 31px; transform: none; translate: -50% 0; display: grid; place-items: center; border: 3px solid #e4c264; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #65d4ab 0 13%, #17664d 38%, #08271d 74%); box-shadow: inset 0 0 0 2px rgba(255,238,169,.24), 0 6px 12px rgba(0,0,0,.5), 0 0 15px rgba(50,177,132,.28); filter: none; }
.fortune-pointer::after { content: ""; position: absolute; top: 24px; left: 50%; width: 7px; height: 15px; translate: -50% 0; border: 1px solid #f1d47d; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, #9c6d24, #e4bd54 48%, #8b5d1e); box-shadow: 0 3px 5px rgba(0,0,0,.46); }
.fortune-pointer span { width: 8px; height: 8px; border: 1px solid rgba(255,245,204,.72); border-radius: 50%; background: #d7ad45; box-shadow: 0 0 7px rgba(239,204,103,.58); }
.fortune-wheel { inset: 7px; border: 8px solid #bd9137; outline: 2px solid #f0cf74; outline-offset: -6px; box-shadow: 0 0 0 2px #082219, 0 0 0 4px rgba(191,145,54,.7), 0 0 30px rgba(16,88,63,.34), inset 0 0 0 2px rgba(255,231,153,.22), inset 0 0 38px rgba(0,0,0,.5); transform-origin: 50% 50%; }
.fortune-wheel-sheen { position: absolute; z-index: 2; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 0 47%, rgba(228,192,92,.16) 47.5% 48%, transparent 48.5% 73%, rgba(255,248,216,.055) 73.5%, transparent 75%, rgba(2,17,12,.16) 88%, rgba(2,14,10,.43) 100%), linear-gradient(145deg, rgba(255,255,255,.1), transparent 31% 68%, rgba(0,0,0,.1)); pointer-events: none; }
.fortune-dividers { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.fortune-dividers i { position: absolute; left: 50%; top: 7px; width: 2px; height: calc(50% - 7px); transform: translateX(-50%) rotate(var(--divider-angle)); transform-origin: 50% 100%; border-radius: 99px; background: linear-gradient(180deg, #f0cf78, #a5782d 68%, rgba(72,45,13,.84)); box-shadow: -1px 0 rgba(255,242,189,.25), 1px 0 rgba(2,15,10,.55); }
.fortune-labels { z-index: 4; }
.fortune-label { width: 72px; min-height: 47px; margin: -24px 0 0 -36px; gap: 3px; color: #fff2c9; opacity: 1; filter: none; text-shadow: 0 2px 5px rgba(0,0,0,.92); }
.fortune-label .fortune-icon { color: #f3d47c; font: 800 21px/.9 var(--font-ui); }.fortune-label .fortune-reward-icon { width: 24px; height: 24px; margin: 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.52)) sepia(.12) saturate(.92); }
.fortune-label small { max-width: 70px; padding: 3px 6px; overflow: hidden; border: 1px solid rgba(223,184,78,.38); border-radius: 99px; background: rgba(3,27,19,.76); color: #fff1c7; box-shadow: inset 0 1px rgba(255,244,198,.08), 0 2px 5px rgba(0,0,0,.3); font: 800 9px/1.05 var(--font-ui); letter-spacing: .025em; text-overflow: ellipsis; }
.fortune-label.narrow { width: 54px; margin-left: -27px; gap: 1px; }.fortune-label.narrow .fortune-reward-icon { width: 18px; height: 18px; }.fortune-label.narrow small { max-width: 54px; padding-inline: 3px; font-size: 7px; }
.fortune-label.rare { color: #fff4c9; filter: drop-shadow(0 0 4px rgba(235,197,91,.38)); }.fortune-label.jackpot { color: #fff2bd; text-shadow: 0 1px 3px rgba(51,31,3,.9), 0 0 8px rgba(255,224,111,.5); }.fortune-label.jackpot small { border-color: rgba(255,232,149,.7); background: rgba(80,52,10,.78); color: #fff0b4; }.fortune-label.winner { filter: drop-shadow(0 0 9px #ffe59a) saturate(1.08); }
.fortune-hub { z-index: 6; width: 104px; height: 104px; overflow: visible; border: 0; background: none; box-shadow: none; }
.fortune-hub img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 7px 10px rgba(0,0,0,.58)) drop-shadow(0 0 10px color-mix(in srgb, var(--yellow) 24%, transparent)); user-select: none; }
.fortune-panel.is-premium .fortune-wrap::before { border-color: color-mix(in srgb, var(--yellow) 72%, transparent); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--yellow) 9%, transparent), 0 0 34px color-mix(in srgb, var(--yellow) 34%, transparent); }
.fortune-result:empty { display: none; }
.fortune-odds-panel { width: min(100%, 420px) !important; padding: 18px !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--lilac) 58%, var(--mint)); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--lilac) 14%, transparent), transparent 34%), var(--panel-gradient); }
#fortune-modal:has(+ #fortune-odds-modal:not([hidden])) { visibility: hidden; }
.fortune-odds-illustration { position: relative; width: 50px; height: 50px; margin: 0 auto 4px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--mint) 62%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--mint) 8%, var(--board-deep)); box-shadow: 0 0 16px color-mix(in srgb, var(--lilac) 14%, transparent); }
.fortune-odds-illustration span { position: relative; z-index: 2; color: var(--chalk); font: 400 27px/1 var(--font-accent); }
.fortune-odds-illustration::before { content: ""; position: absolute; inset: 7px -3px; border: 1px solid color-mix(in srgb, var(--yellow) 48%, transparent); border-radius: 50%; transform: rotate(-29deg); }
.fortune-odds-illustration i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }.fortune-odds-illustration i:first-of-type { right: 1px; top: 13px; }.fortune-odds-illustration i:nth-of-type(2) { left: 1px; bottom: 11px; background: var(--mint); }.fortune-odds-illustration b { position: absolute; inset: 13px; border: 1px dashed color-mix(in srgb, var(--lilac) 52%, transparent); border-radius: 50%; }
.fortune-odds-panel h2 { margin: 0 18px 5px; font-family: var(--font-accent); font-size: 36px; font-weight: 400; line-height: .9; }
.fortune-odds { margin: 4px auto 0; max-height: none; overflow: visible; width: 100%; }
.fortune-odds-lede { margin: 0 3px 6px; font-size: 10px; line-height: 1.3; text-align: center; }
.fortune-odds ul { display: grid; gap: 4px; }
.fortune-odds li { --odds-color: var(--mint); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 40px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--odds-color) 30%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--odds-color) 7%, rgba(255,255,255,.02)); }
.fortune-odds li.odds-uncommon { --odds-color: var(--lilac); }.fortune-odds li.odds-rare { --odds-color: var(--yellow); }.fortune-odds li.odds-jackpot { --odds-color: #f4c94f; }
.fortune-odds-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--odds-color) 50%, transparent); border-radius: 50%; color: var(--odds-color); background: color-mix(in srgb, var(--odds-color) 8%, transparent); font-size: 12px; font-weight: 800; }.fortune-odds-icon .fortune-reward-icon { width: 18px; height: 18px; object-fit: contain; }
.fortune-odds-copy { min-width: 0; display: grid; gap: 3px; }.fortune-odds-copy strong { overflow: hidden; color: var(--chalk); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fortune-odds-copy i { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }.fortune-odds-copy i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--odds-color); transform: scaleX(var(--odds)); transform-origin: left center; }
.fortune-odds li > em { color: var(--odds-color); font: 800 12px/1 var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; }
.fortune-odds-panel .modal-actions { margin-top: 9px; }
.fortune-actions .fortune-collect {
  grid-column: 1 / -1;
  min-height: 62px;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--yellow) 70%, var(--chalk));
  background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--yellow) 42%, var(--chalk)));
  color: var(--board-deep);
  box-shadow: 0 9px 26px color-mix(in srgb, var(--yellow) 18%, transparent), inset 0 0 0 1px rgba(255,255,255,.34);
  font-size: 17px;
  font-weight: 850;
  text-align: center;
}
.theme-card.premium { border-color: color-mix(in srgb, var(--yellow) 72%, transparent); box-shadow: inset 0 0 28px color-mix(in srgb, var(--yellow) 9%, transparent), 0 0 18px rgba(235,211,140,.08); }
.success-panel { --success-accent: var(--green); width: min(100%, 430px) !important; padding: 24px !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--success-accent) 62%, var(--chalk)); background: radial-gradient(circle at 14% 0, color-mix(in srgb, var(--success-accent) 17%, transparent), transparent 38%), radial-gradient(circle at 94% 24%, color-mix(in srgb, var(--mint) 9%, transparent), transparent 34%), var(--panel-gradient); }
.success-panel.skipped { --success-accent: var(--coral); }
.success-header { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 0 0 8px; }
.success-header h2 { min-width: 0; margin: 0; color: var(--chalk); font-family: var(--font-accent); font-size: clamp(36px, 10vw, 48px); font-weight: 400; line-height: .84; letter-spacing: 0; overflow-wrap: anywhere; }
.success-mark { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--success-accent) 78%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--success-accent) 10%, rgba(4,18,14,.82)); color: var(--success-accent); box-shadow: 0 0 20px color-mix(in srgb, var(--success-accent) 15%, transparent); font: 42px/.8 var(--font-accent); }
.success-level { margin: 0 0 16px; color: var(--chalk-soft); font-size: 13px !important; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.success-results { width: 100%; margin: 0 0 18px; display: grid; gap: 10px; }
.success-score-card { position: relative; overflow: hidden; border: 2px solid color-mix(in srgb, var(--coral) 72%, var(--chalk)); border-radius: 17px; background: radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--coral) 19%, transparent), transparent 42%), linear-gradient(125deg, color-mix(in srgb, var(--coral) 11%, rgba(4,18,14,.92)), rgba(4,14,11,.82)); box-shadow: inset 0 0 28px color-mix(in srgb, var(--coral) 6%, transparent), 0 10px 24px rgba(0,0,0,.22); }
.success-score-primary { min-height: 116px; padding: 16px 18px 13px; display: grid; place-items: center; align-content: center; gap: 7px; }
.success-result-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--chalk-soft); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.success-score-primary > strong { min-width: 0; color: var(--coral); font: 58px/.78 var(--font-accent); overflow-wrap: anywhere; text-shadow: 0 0 20px color-mix(in srgb, var(--coral) 17%, transparent); }
.success-moves-row { min-height: 49px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid color-mix(in srgb, var(--mint) 34%, transparent); background: color-mix(in srgb, var(--mint) 7%, rgba(0,0,0,.12)); }
.success-moves-row .success-result-label { color: color-mix(in srgb, var(--mint) 76%, var(--chalk)); }
.success-result-icon { width: 22px; height: 22px; object-fit: contain; }
.success-result-icon.score-icon { width: 27px; height: 27px; }
.success-moves-row > strong { color: var(--mint); font-size: 24px; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.success-coins-reward { min-height: 58px; padding: 9px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid color-mix(in srgb, var(--yellow) 66%, var(--chalk)); border-radius: 15px; background: radial-gradient(circle at 20% 0, color-mix(in srgb, var(--yellow) 15%, transparent), transparent 48%), color-mix(in srgb, var(--yellow) 8%, rgba(4,18,14,.88)); box-shadow: inset 0 0 20px color-mix(in srgb, var(--yellow) 5%, transparent); }
.success-coin-icon { width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.success-coins-reward strong { color: var(--yellow); font-size: 31px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.success-note { margin: -8px 0 16px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--success-accent) 24%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--success-accent) 6%, rgba(255,255,255,.02)); color: var(--chalk-soft) !important; font-size: 12px !important; }
.success-note:empty { display: none; }
#success-modal:not([hidden]) .success-mark { animation: success-mark-in 520ms var(--ease-out-back) 100ms both; }
#success-modal:not([hidden]) .success-header h2,
#success-modal:not([hidden]) .success-level { animation: success-copy-in 420ms var(--ease-out-smooth) 180ms both; }
#success-modal:not([hidden]) .success-score-card { animation: success-stat-in 460ms var(--ease-out-back) 260ms both; }
#success-modal:not([hidden]) .success-coins-reward { animation: success-stat-in 460ms var(--ease-out-back) 350ms both; }
#success-modal:not([hidden]) .success-note,
#success-modal:not([hidden]) .modal-actions { animation: success-copy-in 420ms var(--ease-out-smooth) 500ms both; }
.success-actions button { min-height: 52px; gap: 8px; }
.success-actions .success-next { min-height: 61px; border-color: color-mix(in srgb, var(--success-accent) 70%, var(--chalk)); background: linear-gradient(105deg, var(--chalk), color-mix(in srgb, var(--success-accent) 31%, var(--chalk))); color: var(--board-deep); font-size: 17px; font-weight: 800; }
.success-actions .success-next .ui-icon { width: 25px; height: 25px; color: var(--board-deep); }

#screen-shop { justify-content: flex-start; }
.shop-panel {
  width: min(100%, 520px);
  height: 100%;
  max-height: 100%;
  padding: 22px;
  overflow: hidden;
}
.shop-panel > :not(.shop-list) { flex: 0 0 auto; }
.shop-header { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; margin-bottom: 14px; }
.shop-header h1 { grid-column: 2; margin: 0; font-size: 46px; line-height: .82; }
.shop-back-button { grid-column: 1; grid-row: 1; width: 44px; min-height: 44px; padding: 9px; justify-content: center; border-color: color-mix(in srgb, var(--yellow) 68%, var(--chalk)); border-radius: 50%; background: color-mix(in srgb, var(--yellow) 10%, rgba(5,20,16,.88)); }
.shop-back-button::before { inset: 4px; border-radius: 50%; }
.shop-back-button .ui-icon { width: 23px; height: 23px; }
.shop-wallet {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 6px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--yellow) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--yellow) 8%, rgba(4,15,12,.72));
  color: var(--chalk-soft);
  font-size: 14px;
}
.shop-wallet strong { color: var(--yellow); font-weight: 400; }
.shop-wallet span { display: inline-flex; align-items: center; gap: 4px; }
.shop-coin-icon { width: 20px; height: 20px; object-fit: contain; }
.shop-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; }
.shop-tabs[hidden] { display: none; }
.shop-tabs button { --shop-category-accent: var(--mint); width: 100%; min-width: 0; height: 48px; min-height: 48px; overflow: hidden; padding: 8px 11px; gap: 8px; border-color: color-mix(in srgb, var(--shop-category-accent) 46%, transparent); background: linear-gradient(105deg, color-mix(in srgb, var(--shop-category-accent) 10%, rgba(7,26,21,.92)), rgba(5,20,16,.82)); color: var(--chalk-soft); font-size: 13px; line-height: 1; text-align: left; white-space: nowrap; }
.shop-tabs button:nth-child(2) { --shop-category-accent: var(--lilac); }
.shop-tabs button:nth-child(3) { --shop-category-accent: var(--yellow); }
.shop-tabs button:nth-child(4) { --shop-category-accent: var(--coral); }
.shop-tab-mark { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--shop-category-accent) 58%, transparent); border-radius: 50%; color: var(--shop-category-accent); font: 700 13px/1 var(--font-ui); }
.shop-tabs button.selected { border-width: 2px; border-color: color-mix(in srgb, var(--shop-category-accent) 82%, var(--chalk)); color: var(--chalk); background: linear-gradient(105deg, color-mix(in srgb, var(--shop-category-accent) 21%, rgba(7,26,21,.96)), rgba(5,20,16,.88)); box-shadow: 0 0 18px color-mix(in srgb, var(--shop-category-accent) 14%, transparent), inset 0 1px color-mix(in srgb, var(--chalk) 5%, transparent); }
.shop-tabs button.selected .shop-tab-mark { border-color: var(--shop-category-accent); background: var(--shop-category-accent); color: var(--board-deep); }
.shop-current-mix { width: 100%; aspect-ratio: 500 / 230; margin: 0 0 12px; padding: 0; display: grid; place-items: center; min-height: 0; overflow: hidden; border: 1px solid var(--chalk-faint); border-radius: 12px; color: var(--chalk-soft); background: color-mix(in srgb, var(--lilac) 6%, transparent); }
.shop-current-mix[hidden] { display: none; }
.shop-current-mix .shop-mix-preview { display: block; width: 100%; height: 100%; transform: translateY(-6px); }
.shop-list { width: 100%; height: 0; min-height: 0; flex: 1 1 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 2px 4px 18px; }
.shop-list.cosmetic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: max-content; align-content: start; align-items: start; column-gap: 6px; row-gap: 8px; padding: 0 0 14px; }
.cosmetic-rarity-group { grid-column: 1 / -1; align-self: stretch; height: 24px; min-height: 24px; margin: 5px 0 0; display: flex; align-items: center; gap: 8px; color: var(--chalk-soft); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.cosmetic-rarity-group:first-child { margin-top: 0; }
.cosmetic-rarity-group::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, currentColor 30%, transparent); }
.cosmetic-rarity-group span { display: inline-flex; align-items: center; }
.cosmetic-rarity-group.pass { color: var(--yellow); letter-spacing: .12em; }
.cosmetic-grid .cosmetic-card { position: relative; align-self: start; display: block; width: 100%; height: auto; min-width: 0; min-height: 0; aspect-ratio: 48 / 58; overflow: hidden; padding: 0; gap: 0; grid-template-columns: none; grid-template-rows: none; border: 1px solid color-mix(in srgb, var(--chalk) 24%, transparent); border-radius: 10px; background: transparent; box-shadow: none; content-visibility: visible; contain: none; contain-intrinsic-size: none; }
.cosmetic-grid .cosmetic-card.tier-signature,
.cosmetic-grid .cosmetic-card.tier-prestige,
.cosmetic-grid .cosmetic-card.tier-exclusive { border-width: 1px; background: transparent; box-shadow: none; }
.cosmetic-grid .cosmetic-card.selected { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 13%, transparent); box-shadow: inset 0 0 0 2px var(--mint), 0 0 13px color-mix(in srgb, var(--mint) 18%, transparent); }
.cosmetic-grid .cosmetic-card.locked .cosmetic-swatch { filter: brightness(.58) saturate(.72); }
.cosmetic-grid .cosmetic-card[data-cosmetic-choice] { cursor: pointer; }
.cosmetic-grid .shop-price-icon { width: 16px; height: 16px; }
.cosmetic-grid .cosmetic-swatch { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 9px; background-color: transparent; box-shadow: none; }
.cosmetic-grid .cosmetic-price-overlay { position: absolute; z-index: 4; left: 50%; right: auto; bottom: 6px; grid-column: auto; width: max-content; max-width: calc(100% - 8px); min-width: 36px; height: 26px; min-height: 26px; padding: 0 7px; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--yellow) 72%, var(--chalk)); border-radius: 999px; background: var(--chalk); box-shadow: 0 3px 8px rgba(0,0,0,.2); color: var(--board-deep); font-size: clamp(10px, 2.5vw, 12px); font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.shop-section-title {
  margin: 10px 0 3px !important;
  color: var(--chalk-soft);
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: .025em;
  text-align: left !important;
}
.shop-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--chalk-faint);
  border-radius: 12px;
  background: rgba(0,0,0,.1);
}
.shop-card.selected { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent); box-shadow: inset 0 0 22px color-mix(in srgb, var(--mint) 6%, transparent); }
.theme-card { position: relative; flex: 0 0 auto; min-height: 92px; overflow: hidden; content-visibility: auto; contain-intrinsic-block-size: 112px; transition: border-color 160ms ease, transform 160ms ease; }
.theme-card.tier-signature { border-color: color-mix(in srgb, var(--mint) 28%, var(--chalk-faint)); background: linear-gradient(115deg, rgba(255,255,255,.035), rgba(0,0,0,.16)); }
.theme-card.tier-prestige { border-width: 2px; border-color: color-mix(in srgb, var(--lilac) 45%, transparent); background: linear-gradient(115deg, color-mix(in srgb, var(--lilac) 8%, transparent), rgba(0,0,0,.22)); box-shadow: inset 0 0 25px rgba(216,185,223,.04); }
.theme-card.tier-exclusive { border-width: 2px; background: linear-gradient(115deg, color-mix(in srgb, var(--yellow) 12%, transparent), rgba(0,0,0,.24)); }
.shop-card button { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.shop-price-icon { width: 18px; height: 18px; object-fit: contain; pointer-events: none; }
.shop-copy { min-width: 0; display: grid; gap: 3px; }
.shop-copy strong { color: var(--chalk); font-size: 17px; font-weight: 650; }
.shop-copy small { color: var(--chalk-soft); font-size: 12px; line-height: 1.2; }
.shop-copy i { color: var(--mint); font-size: 11px; font-style: normal; }
.cosmetic-swatch { position: relative; width: 48px; height: 58px; overflow: hidden; border: 1px solid hsla(var(--cosmetic-hue),70%,75%,.65); border-radius: 11px; background: linear-gradient(145deg, hsl(var(--cosmetic-hue),45%,24%), hsl(calc(var(--cosmetic-hue) + 36),55%,16%)); box-shadow: inset 0 0 12px hsla(var(--cosmetic-hue),80%,70%,.12), 0 6px 13px rgba(0,0,0,.22); }
.cosmetic-swatch-atoms b { position: absolute; width: 30px; height: 30px; left: 8px; top: 13px; border: 2px solid hsl(var(--cosmetic-hue),75%,76%); border-radius: 50%; background: radial-gradient(circle at 36% 30%, hsla(var(--cosmetic-hue),90%,88%,.35), transparent 32%), hsl(var(--cosmetic-hue),42%,25%); }
.cosmetic-swatch-atoms i { position: absolute; width: 5px; height: 5px; left: 12px; top: 17px; border-radius: 50%; background: hsl(calc(var(--cosmetic-hue) + 70),90%,75%); box-shadow: 19px 5px 0 hsl(calc(var(--cosmetic-hue) + 70),90%,75%), 8px 21px 0 hsl(calc(var(--cosmetic-hue) + 70),90%,75%); }
.cosmetic-swatch-bonds::before, .cosmetic-swatch-bonds::after { content: ""; position: absolute; width: 35px; height: 3px; left: 7px; border-radius: 999px; background: hsl(var(--cosmetic-hue),85%,76%); box-shadow: 0 0 7px hsla(var(--cosmetic-hue),90%,70%,.55); transform: rotate(-28deg); }
.cosmetic-swatch-bonds::before { top: 22px; }
.cosmetic-swatch-bonds::after { top: 31px; opacity: .72; }
.cosmetic-swatch-backgrounds { background: radial-gradient(circle at 25% 18%, hsla(calc(var(--cosmetic-hue) + 55),90%,75%,.42), transparent 26%), linear-gradient(165deg, hsl(var(--cosmetic-hue),58%,30%), hsl(calc(var(--cosmetic-hue) + 55),55%,8%)); }
.cosmetic-swatch-backgrounds::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, transparent 0 9px, rgba(255,255,255,.07) 10px); }
.cosmetic-swatch-bundles b { position: absolute; width: 25px; height: 25px; left: 5px; top: 7px; border: 2px solid hsl(var(--cosmetic-hue),80%,78%); border-radius: 50%; background: hsl(var(--cosmetic-hue),45%,22%); }
.cosmetic-swatch-bundles i { position: absolute; width: 31px; height: 3px; right: 2px; bottom: 13px; border-radius: 999px; background: hsl(calc(var(--cosmetic-hue) + 65),85%,73%); transform: rotate(-32deg); box-shadow: 0 -9px 0 hsla(calc(var(--cosmetic-hue) + 65),85%,73%,.6); }
.cosmetic-swatch u { display: none; }
.cosmetic-preview-canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 140ms ease; }
.cosmetic-preview-canvas.loaded { opacity: 1; }
.cosmetic-swatch.has-real-assets > .cosmetic-preview-fallback { display: none; }
.cosmetic-swatch-bonds.has-real-assets::before, .cosmetic-swatch-bonds.has-real-assets::after, .cosmetic-swatch-backgrounds.has-real-assets::after { display: none; }
.cosmetic-card.tier-prestige .cosmetic-swatch u, .cosmetic-card.tier-exclusive .cosmetic-swatch u { display: block; position: absolute; inset: -35%; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.24) 49%, transparent 63%); transform: translateX(-125%) rotate(8deg); text-decoration: none; }
.cosmetic-card.preview-live.tier-prestige .cosmetic-swatch u, .cosmetic-card.preview-live.tier-exclusive .cosmetic-swatch u { will-change: transform; animation: cosmetic-sheen 4.8s ease-in-out infinite; }
@keyframes cosmetic-sheen { 0%, 30% { transform: translateX(-125%) rotate(8deg); } 70%, 100% { transform: translateX(125%) rotate(8deg); } }
.shop-migration-refund { margin: 0 0 16px; padding: 13px 14px; border: 2px solid color-mix(in srgb, var(--yellow) 62%, transparent); border-radius: 14px; color: var(--yellow); background: linear-gradient(105deg, color-mix(in srgb, var(--yellow) 11%, rgba(5,20,16,.9)), rgba(5,20,16,.78)); font-weight: 750; line-height: 1.45; text-align: center; }
.theme-tier { width: max-content; padding: 2px 5px; border: 1px solid currentColor; border-radius: 999px; color: var(--chalk-soft); font-size: 8px; font-style: normal; font-weight: 850; line-height: 1; letter-spacing: .11em; }
.tier-signature .theme-tier { color: var(--mint); }
.tier-prestige .theme-tier { color: var(--lilac); background: color-mix(in srgb, var(--lilac) 8%, transparent); }
.tier-exclusive .theme-tier { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 18%, transparent); }
.theme-swatch {
  position: relative;
  width: 46px;
  height: 56px;
  overflow: hidden;
  border: 2px solid var(--swatch-highlight);
  border-radius: 8px 13px 8px 13px;
  background: radial-gradient(circle at 34% 25%, var(--swatch-accent) 0 9%, transparent 10%), linear-gradient(145deg, var(--swatch-board), var(--swatch-deep));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.055), 0 5px 12px rgba(0,0,0,.24);
  contain: paint;
}
.theme-swatch b { position: absolute; inset: -18%; display: block; opacity: .75; }
.theme-card.preview-live .theme-swatch b { will-change: transform, opacity; }
[data-preview-effect="chalk"] .theme-swatch b { background: repeating-linear-gradient(0deg, transparent 0 10px, var(--swatch-highlight) 11px 12px); opacity: .22; }
[data-preview-effect="spark"] .theme-swatch b { background: linear-gradient(120deg, transparent 42%, var(--swatch-accent) 43% 47%, transparent 48%); }
[data-preview-effect="embers"] .theme-swatch b, [data-preview-effect="magma"] .theme-swatch b { background: radial-gradient(circle at 25% 75%, var(--swatch-highlight) 0 3px, transparent 4px), radial-gradient(circle at 70% 35%, var(--swatch-accent) 0 2px, transparent 3px); }
[data-preview-effect="aurora"] .theme-swatch b { background: linear-gradient(110deg, transparent, var(--swatch-accent), transparent 45%), linear-gradient(70deg, transparent 35%, var(--swatch-secondary), transparent 75%); filter: blur(4px); }
[data-preview-effect="bubbles"] .theme-swatch b { background: radial-gradient(circle at 65% 30%, transparent 0 7px, var(--swatch-accent) 8px 9px, transparent 10px), radial-gradient(circle at 35% 78%, transparent 0 4px, var(--swatch-secondary) 5px 6px, transparent 7px); }
[data-preview-effect="petals"] .theme-swatch b, [data-preview-effect="bloom"] .theme-swatch b { background: radial-gradient(ellipse at 35% 35%, var(--swatch-accent) 0 13%, transparent 14%), radial-gradient(ellipse at 68% 68%, var(--swatch-secondary) 0 12%, transparent 13%); transform: rotate(35deg); }
[data-preview-effect="dust"] .theme-swatch b { background: radial-gradient(circle, var(--swatch-highlight) 0 1px, transparent 2px); background-size: 9px 11px; }
[data-preview-effect="frost"] .theme-swatch b { background: linear-gradient(30deg, transparent 47%, var(--swatch-accent) 48% 51%, transparent 52%), linear-gradient(150deg, transparent 47%, var(--swatch-secondary) 48% 51%, transparent 52%); background-size: 22px 38px; }
[data-preview-effect="neon"] .theme-swatch b { background: repeating-linear-gradient(0deg, transparent 0 5px, var(--swatch-accent) 6px), linear-gradient(90deg, transparent 47%, var(--swatch-secondary) 48% 52%, transparent 53%); box-shadow: inset 0 0 12px var(--swatch-accent); }
[data-preview-effect="prism"] .theme-swatch b { background: conic-gradient(from 25deg, var(--swatch-accent), transparent, var(--swatch-secondary), transparent, var(--swatch-highlight), var(--swatch-accent)); }
[data-preview-effect="circuit"] .theme-swatch b { background: linear-gradient(var(--swatch-accent) 1px, transparent 1px), linear-gradient(90deg, var(--swatch-accent) 1px, transparent 1px); background-size: 10px 10px; }
[data-preview-effect="cosmic"] .theme-swatch b { background: radial-gradient(circle, white 0 1px, transparent 1.5px); background-size: 11px 13px; }
[data-preview-effect="void"] .theme-swatch b { background: repeating-radial-gradient(circle, #000 0 8px, var(--swatch-secondary) 9px 10px, transparent 12px 16px); }
[data-preview-effect="royal"] .theme-swatch b { background: linear-gradient(45deg, transparent 46%, var(--swatch-highlight) 47% 50%, transparent 51%), linear-gradient(-45deg, transparent 46%, var(--swatch-highlight) 47% 50%, transparent 51%); background-size: 18px 18px; }
[data-preview-effect="eclipse"] .theme-swatch b { background: radial-gradient(circle at 50% 38%, #050505 0 10px, var(--swatch-highlight) 11px 13px, transparent 18px); filter: drop-shadow(0 0 4px var(--swatch-highlight)); }
.theme-card.preview-live[data-preview-effect="chalk"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="dust"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="frost"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="circuit"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="cosmic"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="royal"] .theme-swatch b { animation: swatch-drift 5.6s linear infinite; }
.theme-card.preview-live[data-preview-effect="spark"] .theme-swatch b { animation: swatch-spark 2.4s ease-in-out infinite; }
.theme-card.preview-live[data-preview-effect="embers"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="magma"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="bubbles"] .theme-swatch b { animation: swatch-rise 3.1s ease-in-out infinite; }
.theme-card.preview-live[data-preview-effect="aurora"] .theme-swatch b { animation: swatch-aurora 4.8s ease-in-out infinite alternate; }
.theme-card.preview-live[data-preview-effect="petals"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="bloom"] .theme-swatch b { animation: swatch-bloom 4.2s ease-in-out infinite; }
.theme-card.preview-live[data-preview-effect="neon"] .theme-swatch b { animation: swatch-neon 2.8s steps(1, end) infinite; }
.theme-card.preview-live[data-preview-effect="prism"] .theme-swatch b,
.theme-card.preview-live[data-preview-effect="void"] .theme-swatch b { animation: swatch-orbit 8s linear infinite; }
.theme-card.preview-live[data-preview-effect="eclipse"] .theme-swatch b { animation: swatch-eclipse 3.6s ease-in-out infinite; }
.theme-card.theme-activated { animation: theme-card-activate 640ms var(--ease-out-back) both !important; }
.theme-card.theme-unlocked { animation: theme-card-unlock 880ms var(--ease-out-back) both !important; }
.theme-card.theme-unlocked::before { content: "✦"; position: absolute; z-index: 3; left: 17px; top: 25px; color: var(--swatch-highlight); font-size: 30px; line-height: 1; text-shadow: 0 0 12px currentColor; pointer-events: none; animation: unlock-mark 760ms ease-out both; }
.tier-prestige .theme-swatch, .tier-exclusive .theme-swatch { width: 48px; height: 60px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.07), 0 0 15px color-mix(in srgb, var(--swatch-accent) 30%, transparent); }
.tier-exclusive .theme-swatch::after { content: "✦"; position: absolute; right: 3px; top: 1px; color: var(--swatch-highlight); font-size: 9px; text-shadow: 0 0 5px currentColor; }
.toast.success { border-color: var(--green); color: var(--green); }

#toast-region { position: absolute; z-index: 30; left: 16px; right: 16px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px)); display: grid; justify-items: center; pointer-events: none; }
#toast-region.has-persistent { top: calc(var(--hud-height) + max(10px, env(safe-area-inset-top))); bottom: auto; }
.toast { max-width: 390px; padding: 12px 18px; border: 2px solid var(--chalk); border-radius: 12px; background: rgba(17,27,23,.98); box-shadow: 0 12px 36px rgba(0,0,0,.42); color: var(--chalk); font-size: 16px; font-weight: 600; text-align: center; }
.toast.warning, .toast.invalid { border-color: var(--coral); color: #ffd9d0; }
.toast.hint { border-color: var(--yellow); color: var(--yellow); }
.toast.connectivity-warning { width: min(100%, 390px); border-color: var(--coral); background: linear-gradient(110deg, color-mix(in srgb, var(--coral) 14%, rgba(17,27,23,.98)), rgba(17,27,23,.98)); box-shadow: 0 10px 30px rgba(0,0,0,.46), 0 0 20px color-mix(in srgb, var(--coral) 18%, transparent); }

#theme-transition {
  position: absolute;
  z-index: 26;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--transition-highlight) 34%, transparent) 0 8%, color-mix(in srgb, var(--transition-accent) 30%, transparent) 25%, color-mix(in srgb, var(--transition-secondary) 18%, transparent) 48%, transparent 68%);
  will-change: transform, opacity;
}
#theme-transition.theme-activated { animation: theme-wash 680ms var(--ease-out-smooth) both; }
#theme-transition.theme-unlocked { animation: theme-wash-unlock 920ms var(--ease-out-smooth) both; }
.shop-wallet strong.motion-pop { animation: wallet-pop 520ms var(--ease-out-back); }

@keyframes chalk-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ui-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-surface-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modal-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-surface-in { from { opacity: 0; transform: translateY(12px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes modal-detail-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes modal-action-in { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes menu-orbit-spin { to { transform: rotate(360deg); } }
@keyframes menu-stream-drift { to { opacity: .78; transform: translate3d(24px, -10px, 0) rotate(var(--stream-end-angle)); } }
@keyframes menu-stream-pulse { 0%, 12% { opacity: 0; transform: translateX(0) scale(.45); } 28% { opacity: 1; } 78% { opacity: .9; } 100% { opacity: 0; transform: translateX(300px) scale(.82); } }
@keyframes menu-aurora-left { to { opacity: .29; transform: translate3d(42px, 20px, 0) scale(1.12); } }
@keyframes menu-aurora-right { to { opacity: .3; transform: translate3d(-38px, -18px, 0) scale(.94); } }
@keyframes menu-aurora-gold { to { opacity: .25; transform: translate3d(18px, -25px, 0) scale(1.14); } }
@keyframes menu-aurora-mobile-left { from { opacity: .28; transform: translate3d(-8px, 0, 0) scale(.95); } to { opacity: .48; transform: translate3d(36px, 18px, 0) scale(1.14); } }
@keyframes menu-aurora-mobile-right { from { opacity: .3; transform: translate3d(8px, 8px, 0) scale(.98); } to { opacity: .5; transform: translate3d(-34px, -15px, 0) scale(1.1); } }
@keyframes menu-aurora-mobile-gold { from { opacity: .24; transform: translate3d(-10px, 8px, 0) scale(.94); } to { opacity: .43; transform: translate3d(20px, -24px, 0) scale(1.16); } }
@keyframes menu-spark-float { 0%, 100% { opacity: .3; transform: translate3d(0, 8px, 0) scale(.7) rotate(0); } 50% { opacity: 1; transform: translate3d(6px, -9px, 0) scale(1.12) rotate(16deg); } }
@keyframes menu-brand-spark { 0%, 100% { opacity: .32; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(20deg); } }
@keyframes menu-rule-glint { 0%, 18% { opacity: 0; transform: translateX(-115%); } 38% { opacity: .82; } 68%, 100% { opacity: 0; transform: translateX(390%); } }
@keyframes menu-bond-flow { to { stroke-dashoffset: -100; } }
@keyframes menu-action-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes menu-primary-shimmer {
  0%, 68% { transform: translateX(-72%) rotate(4deg); }
  82%, 100% { transform: translateX(72%) rotate(4deg); }
}
@keyframes daily-icon-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes daily-item-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes leaderboard-row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes daily-ranking-scan { 0%, 12% { transform: translateX(-100%); } 78%, 100% { transform: translateX(100%); } }
@keyframes hud-value-pop { 0% { transform: scale(.76); opacity: .45; } 65% { transform: scale(1.16); color: var(--yellow); } 100% { transform: none; opacity: 1; } }
@keyframes success-mark-in { from { opacity: 0; transform: scale(.3) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes success-copy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes success-stat-in { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes collection-card-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes progress-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes current-level-aura { 0%, 100% { opacity: .16; transform: scale(.985); } 50% { opacity: .5; transform: scale(1.008); } }
@keyframes swatch-drift { from { transform: translate3d(-7%, -5%, 0); } to { transform: translate3d(7%, 5%, 0); } }
@keyframes swatch-spark { 0%, 100% { transform: translateX(-38%); opacity: .35; } 50% { transform: translateX(38%); opacity: 1; } }
@keyframes swatch-rise { 0%, 100% { transform: translateY(9px) scale(.94); opacity: .45; } 50% { transform: translateY(-8px) scale(1.05); opacity: .9; } }
@keyframes swatch-aurora { from { transform: translateX(-12%) skewX(-5deg) scale(1.05); opacity: .45; } to { transform: translateX(12%) skewX(5deg) scale(1.18); opacity: .9; } }
@keyframes swatch-bloom { 0%, 100% { transform: rotate(28deg) scale(.92); } 50% { transform: rotate(44deg) scale(1.12); } }
@keyframes swatch-neon { 0%, 92%, 100% { opacity: .9; } 94% { opacity: .35; } 97% { opacity: .7; } }
@keyframes swatch-orbit { to { transform: rotate(360deg) scale(1.12); } }
@keyframes swatch-eclipse { 0%, 100% { transform: scale(.94); opacity: .68; } 50% { transform: scale(1.13); opacity: 1; } }
@keyframes theme-card-activate { 0% { transform: scale(.97); opacity: .82; } 45% { transform: scale(1.018); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes theme-card-unlock { 0% { transform: scale(.95); opacity: .68; } 42% { transform: scale(1.025); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes unlock-mark { 0% { opacity: 0; transform: scale(.2) rotate(-35deg); } 45% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 0; transform: scale(1.55) rotate(18deg); } }
@keyframes wallet-pop { 0% { transform: scale(.72); opacity: .45; } 55% { transform: scale(1.18); color: var(--green); } 100% { transform: none; opacity: 1; } }
@keyframes theme-wash { 0% { opacity: 0; transform: scale(.06); } 38% { opacity: .95; } 100% { opacity: 0; transform: scale(1); } }
@keyframes theme-wash-unlock { 0% { opacity: 0; transform: scale(.04) rotate(-3deg); } 34% { opacity: 1; } 64% { opacity: .62; } 100% { opacity: 0; transform: scale(1) rotate(0); } }
@keyframes fortune-aura { 0%, 100% { opacity: .28; transform: scale(.96); } 50% { opacity: .7; transform: scale(1.035); } }
@keyframes fortune-orbit { to { transform: rotate(360deg); } }
@keyframes fortune-dust { 0%, 100% { opacity: .18; transform: translateY(3px) scale(.72); } 50% { opacity: .72; transform: translateY(-4px) scale(1.08); } }
@keyframes fortune-particle-burst {
  0% { opacity: 0; translate: -50% -50%; scale: .2; }
  12% { opacity: 1; }
  72% { opacity: .95; }
  100% { opacity: 0; translate: var(--dx) var(--dy); rotate: 280deg; scale: .55; }
}
@keyframes fortune-pointer-win { 45% { transform: translateY(-8px) scale(1.12); } }
@keyframes fortune-hub-win { 40% { scale: 1.13; } }
@keyframes fortune-jackpot-pop { 0% { opacity: 0; scale: .35; } 25%,75% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.08; } }
@keyframes performance-pulse { 0%, 100% { transform: scaleY(.72); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 430px) {
  .screen, .modal-layer { padding-left: 16px; padding-right: 16px; }
  .menu-board { padding-left: 8px; padding-right: 8px; }
  .menu-ambient { inset: -28px -38px -36px; }
  .menu-aurora { width: 280px; }
  .menu-aurora-mint { left: -42px; top: 68px; animation-name: menu-aurora-mobile-left; }
  .menu-aurora-lilac { right: -48px; top: 205px; width: 286px; animation-name: menu-aurora-mobile-right; }
  .menu-aurora-gold { left: calc(50% - 135px); bottom: 18px; width: 270px; animation-name: menu-aurora-mobile-gold; }
  .menu-orbit { border-color: color-mix(in srgb, var(--orbit-color) 58%, transparent); }
  .menu-orbit::after { border-color: color-mix(in srgb, var(--orbit-color) 29%, transparent); }
  .menu-orbit > i { width: 15px; height: 15px; border-color: var(--chalk); box-shadow: 0 0 20px color-mix(in srgb, var(--orbit-color) 82%, transparent); }
  .menu-orbit > i:last-child { width: 11px; height: 11px; }
  .menu-orbit-a { top: -62px; width: 360px; height: 360px; margin-left: -180px; }
  .menu-energy-stream { width: 360px; height: 3px; opacity: .7; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stream-color) 92%, var(--chalk)), transparent); }
  .menu-energy-stream::before { inset-block: -10px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stream-color) 24%, transparent), transparent); }
  .menu-energy-stream > i { top: -6px; width: 15px; height: 15px; box-shadow: 0 0 22px var(--stream-color); }
  .menu-energy-stream-a { left: -12px; top: 340px; }
  .menu-energy-stream-b { right: -12px; top: 530px; }
  .menu-spark-a, .menu-spark-b, .menu-spark-c { font-size: 20px; text-shadow: 0 0 15px currentColor; }
  .menu-spark-d { right: 3%; font-size: 34px; }
  .menu-spark-e { left: 9%; font-size: 31px; }
  .menu-title-spark { top: 185px; font-size: 18px; text-shadow: 0 0 15px currentColor; }
  .menu-title-spark-a { left: 8%; }
  .menu-title-spark-b { right: 8%; }
  .panel { padding: 24px 20px; }
  .settings-panel { padding: 18px 16px; }
  .settings-header { margin-bottom: 14px; }
  .settings-row { grid-template-columns: 38px minmax(0, 1fr) 108px; gap: 10px; min-height: 62px; padding: 8px 10px; }
  .settings-glyph { width: 36px; height: 36px; }
  .settings-icon { width: 23px; height: 23px; }
  .settings-row label, .settings-label { font-size: 16px; }
  .settings-value-button, input[type="range"] { width: 108px; }
  .panel h1, .panel h2 { font-size: 43px; }
  .brand { font-size: clamp(76px, 24vw, 100px); }
  .hud-topbar { grid-template-columns: minmax(88px, max-content) 60px 60px minmax(0, 1fr) 38px; }
  .hud-wallet { min-width: 88px; }
  .hud-actions button { min-width: 0; padding-inline: 8px; }
  .fortune-wrap { --label-radius: 118px; width: min(100%, 326px); }
  .fortune-label { width: 72px; margin-left: -36px; }
  .fortune-label small { max-width: 70px; font-size: 9px; }
  .shop-card { grid-template-columns: 52px minmax(0, 1fr); }
  .theme-card { min-height: 132px; }
  .shop-card > button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .shop-list.cosmetic-grid .cosmetic-card { min-height: 0; grid-template-columns: none; }
  .shop-list.cosmetic-grid .cosmetic-card > .cosmetic-price-overlay { grid-column: auto; width: max-content; justify-content: center; }
}

@media (max-width: 365px) {
  .menu-board { padding-top: 70px; }
  .brand { font-size: 78px; }
  .eyebrow { font-size: 13px; }
  .hud-actions button { min-width: 0; padding-inline: 6px; font-size: 13px; }
  .hint-purchase-actions { grid-template-columns: 1fr; }
  .hint-purchase-art { width: 112px; height: 112px; }
  .hint-purchase-icon { width: 86px; height: 86px; }
  .level-tile { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .level-tile small { grid-column: 2; text-align: left; }
  .settings-row { grid-template-columns: 34px minmax(0, 1fr) 120px; gap: 8px; }
  .settings-glyph { width: 32px; height: 32px; }
  .settings-row label, .settings-label { font-size: 15px; }
  .settings-value-button { width: 120px; font-size: 13px; }
  input[type="range"] { width: 108px; }
  .modal-actions { grid-template-columns: 1fr; }
  .refined-modal-panel { padding: 20px 16px !important; }
  .refined-modal-header { grid-template-columns: 50px minmax(0, 1fr); gap: 11px; }
  .refined-modal-emblem { width: 50px; height: 50px; }
  .refined-modal-icon { width: 29px; height: 29px; }
  .refined-modal-header h2 { font-size: 35px; }
  .refined-modal-actions { grid-template-columns: 1fr; }
  .refined-modal-actions button { min-height: 52px; }
  .success-panel [data-act="next"] { grid-column: auto; }
  .fortune-wrap { --label-radius: 102px; width: min(100%, 286px); }
  .fortune-label { width: 64px; margin-left: -32px; }
  .fortune-label small { max-width: 62px; font-size: 8px; }
  .fortune-hub { width: 88px; height: 88px; }
  .debug-grid { grid-template-columns: 1fr; }
}

@media (max-height: 780px) {
  #screen-main-menu { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--native-banner-offset, 0px)); }
  .menu-board { padding-top: 65px; }
  .brand { font-size: 70px; }
  .chalk-rule { margin-bottom: 12px; }
  .menu-actions { gap: 7px; }
  .menu-actions button { min-height: 42px; font-size: 16px; }
  :root { --hud-height: 106px; }
  #game-hud { padding: max(5px, env(safe-area-inset-top)) 9px 4px; }
  .hud-topbar { height: 38px; grid-template-columns: minmax(82px, max-content) 54px 54px minmax(0, 1fr) 30px; gap: 4px; }
  .hud-wallet { min-width: 82px; min-height: 34px; padding: 4px 7px; gap: 4px; }
  .hud-wallet-icon { width: 14px; height: 14px; }
  .hud-wallet strong { font-size: 12px; }
  .hud-stat { min-height: 36px; padding: 4px 7px; border-radius: 9px; }
  .hud-stat::before { inset: 2px; border-radius: 6px; }
  .hud-stat span { font-size: 8px; }
  .hud-stat strong { margin-top: 2px; font-size: 15px; }
  .icon-button { width: 29px; height: 29px; min-height: 29px; padding: 6px; }
  .hud-actions { min-height: 38px; margin-top: 4px; gap: 5px; }
  .hud-actions button { min-width: 0; min-height: 32px; padding: 5px 6px; font-size: clamp(10px, 3.2vw, 12px); }
  .hud-actions .ui-icon { width: 15px; height: 15px; }
  .hud-tool-main { gap: 4px; }
  .hud-tool-count { flex-basis: 22px; font-size: 12px; }
  .modal-layer > .panel { max-height: calc(100dvh - 20px); }
  .fortune-panel { padding-top: 18px; padding-bottom: 18px; }
  .fortune-panel h2 { margin-bottom: 8px; font-size: 38px; }
  .fortune-wrap { --label-radius: 98px; width: min(100%, 54vh, 274px); margin-block: 6px 10px; }
  .fortune-label { width: 64px; margin-left: -32px; }
  .fortune-label small { max-width: 62px; font-size: 8px; }
  .fortune-hub { width: 86px; height: 86px; }
  .fortune-note { font-size: 11px !important; }
}

@media (max-height: 620px) {
  .menu-board { padding-top: 48px; padding-bottom: 4px; }
  .brand { font-size: 58px; }
  .chalk-rule { height: 4px; margin-bottom: 7px; }
  .wallet-strip { margin: -2px auto 6px; font-size: 12px; }
  .menu-actions { gap: 4px; }
  .menu-actions button { min-height: 36px; padding-block: 6px; font-size: 14px; }
  .menu-actions .ui-icon { width: 18px; height: 18px; }
  .menu-actions .menu-continue { min-height: 56px; padding-block: 10px; font-size: 20px; }
  .menu-actions .menu-continue .ui-icon { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 100ms !important; transition-duration: 100ms !important; scroll-behavior: auto !important; }
  .fortune-wheel.idle { animation: none !important; }
  .menu-orbit, .menu-energy-stream, .menu-aurora, .menu-spark,
  .menu-title-spark, .chalk-rule::after,
  .performance-emblem i, .performance-emblem b,
  .menu-actions .primary::after, .daily-entry .ui-icon,
  .subscription-cta-emblem, .subscription-cta::after, .subscription-cta-spark,
  .level-tile.current, .theme-card.preview-live .theme-swatch b,
  .daily-loader-molecule i, .daily-loader-molecule b,
  .daily-panel.is-loading .daily-ranking::after,
  .fortune-ambient i,
  .fortune-wrap.is-idle::before,
  .fortune-wrap.is-idle::after,
  .level-tile.current::before,
  #theme-transition { animation: none !important; }
  .coach-veil { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: rgba(2,10,8,.42); box-shadow: none; transform: none !important; will-change: auto; }
}