:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #070713;
  --panel: rgba(18, 18, 40, 0.9);
  --text: #f8f7ff;
  --muted: #9b9ab4;
  --purple: #9b5cff;
  --cyan: #39e7ff;
  --pink: #ff3f9d;
  --gold: #ffd22e;
}

* { box-sizing: border-box; }

body {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 12%, rgba(125, 49, 255, .38), transparent 31%),
    radial-gradient(circle at 83% 20%, rgba(255, 39, 142, .22), transparent 28%),
    radial-gradient(circle at 74% 83%, rgba(0, 190, 255, .24), transparent 34%),
    radial-gradient(circle at 30% 75%, rgba(82, 42, 170, .2), transparent 30%),
    var(--bg);
  background-attachment: fixed;
}

body.game-active::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(155, 92, 255, .11), transparent 58%);
  animation: background-pulse .7s ease-out;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, transparent);
}

.ambient-particles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-particles span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: .2;
  box-shadow: 0 0 10px #fff, 0 0 22px var(--cyan);
  animation: particle-float 8s ease-in-out infinite;
}
.ambient-particles span:nth-child(1) { left: 8%; top: 76%; animation-delay: -1s; }
.ambient-particles span:nth-child(2) { left: 16%; top: 28%; animation-delay: -5s; animation-duration: 10s; }
.ambient-particles span:nth-child(3) { left: 27%; top: 88%; animation-delay: -3s; }
.ambient-particles span:nth-child(4) { left: 37%; top: 18%; animation-delay: -7s; animation-duration: 12s; }
.ambient-particles span:nth-child(5) { left: 48%; top: 68%; animation-delay: -2s; }
.ambient-particles span:nth-child(6) { left: 58%; top: 10%; animation-delay: -4s; }
.ambient-particles span:nth-child(7) { left: 67%; top: 78%; animation-delay: -6s; animation-duration: 11s; }
.ambient-particles span:nth-child(8) { left: 76%; top: 33%; animation-delay: -1.5s; }
.ambient-particles span:nth-child(9) { left: 86%; top: 89%; animation-delay: -4.5s; }
.ambient-particles span:nth-child(10) { left: 92%; top: 17%; animation-delay: -8s; animation-duration: 13s; }
.ambient-particles span:nth-child(11) { left: 4%; top: 46%; animation-delay: -6.5s; }
.ambient-particles span:nth-child(12) { left: 53%; top: 42%; animation-delay: -3.5s; }

button { font: inherit; }

.game-shell {
  width: 100%;
  max-width: 680px;
  min-width: 0;
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 48px) 20px;
  display: grid;
  align-items: center;
}

.screen {
  width: 100%;
  min-width: 0;
  text-align: center;
  animation: screen-enter .42s cubic-bezier(.2, .8, .2, 1) both;
}
.hidden { display: none !important; }

.game-screen.entering .game-header,
.game-screen.entering .status,
.game-screen.entering .reward-stage,
.game-screen.entering .color-grid,
.game-screen.entering .turn-hint {
  animation: game-item-enter .55s cubic-bezier(.2, .8, .2, 1) both;
}

.game-screen.entering .status { animation-delay: .07s; }
.game-screen.entering .color-grid { animation-delay: .13s; }
.game-screen.entering .turn-hint { animation-delay: .2s; }
.game-over-screen.shake { animation: screen-enter .3s ease-out both, soft-shake .42s ease-in-out .08s; }

.logo-mark {
  width: 74px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  position: relative;
  filter: drop-shadow(0 0 12px rgba(155, 92, 255, .85)) drop-shadow(0 0 30px rgba(57,231,255,.35));
  animation: logo-hover 3s ease-in-out infinite;
}

.logo-mark span { aspect-ratio: 1; border-radius: 9px; }
.logo-mark span:nth-child(1) { background: linear-gradient(145deg, #6bc6ff, #0878ff); box-shadow: 0 0 20px #168fff; }
.logo-mark span:nth-child(2) { background: linear-gradient(145deg, #ff81bd, #ff216e); box-shadow: 0 0 20px #ff367c; }
.logo-mark span:nth-child(3) { background: linear-gradient(145deg, #64ffc0, #00b96d); box-shadow: 0 0 20px #1de28e; }
.logo-mark span:nth-child(4) { background: linear-gradient(145deg, #fff278, #ffad00); box-shadow: 0 0 20px #ffd12d; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; line-height: 1; }
h1 {
  font-size: clamp(4rem, 16vw, 7.5rem);
  letter-spacing: -.07em;
  background: linear-gradient(115deg, #fff 10%, #69e7ff 35%, #c981ff 62%, #ff65b4 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(155,92,255,.45));
}

.intro {
  max-width: 410px;
  margin: 22px auto 30px;
  color: var(--muted);
  line-height: 1.6;
}

.reward-dashboard {
  width: 100%;
  max-width: 510px;
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.reward-card {
  min-width: 0;
  min-height: 76px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(42,40,85,.94), rgba(19,18,46,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.25);
  text-align: left;
  transition: transform .2s ease, filter .2s ease;
}
.reward-card > div { min-width: 0; }
.reward-card small, .reward-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-card::after { content: ""; position: absolute; width: 80px; height: 80px; right: -28px; top: -32px; border-radius: 50%; background: var(--card-glow); filter: blur(22px); opacity: .3; }
.reward-card:hover { transform: translateY(-3px); filter: brightness(1.12); }
.reward-card small { display: block; color: #aaa8c6; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.reward-card strong { display: block; margin-top: 2px; color: white; font-size: 1.18rem; }
.reward-icon { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 14px; color: white; background: var(--card-gradient); box-shadow: 0 0 18px var(--card-glow), inset 0 1px rgba(255,255,255,.45); font-size: 1.25rem; font-weight: 900; }
.record-card { --card-gradient: linear-gradient(145deg, #b974ff, #6c35ff); --card-glow: #9b5cff; }
.coin-card { --card-gradient: linear-gradient(145deg, #fff176, #ff9d00); --card-glow: #ffc52e; }
.chest-card { --card-gradient: linear-gradient(145deg, #ff76bc, #ff286e); --card-glow: #ff3f9d; }
.streak-card { --card-gradient: linear-gradient(145deg, #ff9d45, #ff3c24); --card-glow: #ff6138; }
.coin-icon { color: #9c5400; border: 3px solid #fff29a; border-radius: 50%; }

.best-card {
  width: 190px;
  margin: 0 auto 30px;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}

.best-card span, .results span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.best-card strong { display: block; margin-top: 2px; font-size: 2rem; }

.primary-button {
  min-width: min(100%, 300px);
  padding: 18px 32px;
  border: 0;
  border-radius: 16px;
  color: white;
  border: 2px solid rgba(255,255,255,.35);
  background: linear-gradient(120deg, #6d39ff 0%, #c337ff 45%, #ff368c 100%);
  box-shadow: 0 12px 38px rgba(177, 55, 255, .5), 0 0 24px rgba(255,54,140,.27), inset 0 2px rgba(255,255,255,.35), inset 0 -5px rgba(87,18,151,.28);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.primary-button > span { position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(45,0,82,.45); }
.play-button { animation: play-pulse 2s ease-in-out infinite; font-size: 1.24rem; letter-spacing: .035em; }
.play-caption { margin: 12px 0 0; color: #8d8ba8; font-size: .76rem; }

.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.26), transparent 70%);
  transform: translateX(-120%);
  transition: transform .45s ease;
}

.primary-button:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 18px 50px rgba(144, 67, 255, .58), inset 0 1px rgba(255,255,255,.34); }
.primary-button:hover::after { transform: translateX(120%); }
.primary-button:active { transform: translateY(2px) scale(.965); box-shadow: 0 7px 20px rgba(144, 67, 255, .35), inset 0 3px 8px rgba(0,0,0,.2); }
.primary-button:focus-visible, .color-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }

.game-screen { align-self: center; position: relative; }
.game-screen::before { content: ""; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; left: 5%; top: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(102,54,255,.25), rgba(13,13,35,0) 66%); filter: blur(20px); }
.game-header { width: min(100%, 560px); margin: 0 auto 8px; position: relative; }
.hud-topline { min-height: 25px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: #f4efff; font-size: 1.25rem; font-weight: 950; letter-spacing: -.04em; text-shadow: 0 0 14px rgba(155,92,255,.5); }
.hud-record { display: flex; align-items: baseline; gap: 5px; position: relative; color: #b6b3c8; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hud-record strong { color: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: 0; text-shadow: 0 0 11px rgba(239,88,255,.75); }
.hud-record-icon { color: #ffda55; font-size: .72rem; filter: drop-shadow(0 0 6px #ffb52e); }
.hud-score { margin-top: -1px; text-align: center; }
.hud-score > span { display: block; color: #817e99; font-size: .53rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.hud-score strong { display: block; margin-top: -2px; color: #fff; font-size: clamp(2.6rem, 8vw, 3.75rem); font-variant-numeric: tabular-nums; font-weight: 950; letter-spacing: .08em; line-height: .96; text-indent: .08em; text-shadow: 0 0 8px rgba(255,255,255,.38), 0 0 22px rgba(57,231,255,.46), 0 0 42px rgba(155,92,255,.32); }
.hud-meta { min-height: 21px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 7px; position: relative; color: #aaa7bd; font-size: .7rem; font-weight: 750; letter-spacing: .04em; }
.hud-level strong { color: #aeb5ff; font-size: .85rem; text-shadow: 0 0 9px rgba(120,129,255,.65); }
.hud-divider { opacity: 0; color: #4d4a62; transition: opacity .18s ease; }
.hud-combo { min-width: 70px; opacity: 0; color: #f58cff; transition: opacity .18s ease, transform .18s ease; }
.hud-meta.has-combo .hud-divider { opacity: 1; }
.hud-combo.is-visible { opacity: 1; transform: scale(1.06); text-shadow: 0 0 10px rgba(239,88,255,.65); }
.level-cue { position: absolute; left: 50%; top: 16px; width: max-content; opacity: 0; color: #8cecff; font-size: .55rem; font-style: normal; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; transform: translate(-50%, 4px); pointer-events: none; }
.level-cue.is-visible { animation: hud-level-cue 1.35s ease-out both; }
.record-badge {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 20px;
  width: max-content;
  opacity: 0;
  color: #ffdfff;
  font-size: .55rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 0 8px #ef58ff;
  transform: translateY(-3px) scale(.8);
  pointer-events: none;
}
.record-badge.is-visible { animation: hud-record-badge 1.65s ease-out both; }
.hud-level.is-level-up { animation: hud-level-pulse .6s cubic-bezier(.2,.8,.25,1); }
.hud-score.is-score-up strong { animation: hud-score-flash .62s cubic-bezier(.2,.8,.25,1); }
.hud-record.is-new-record { animation: hud-record-pulse .75s cubic-bezier(.2,.8,.25,1); }

.status {
  width: max-content;
  margin: 0 auto 9px;
  padding: 0;
  border: 0;
  color: var(--cyan);
  background: transparent;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-shadow: 0 0 9px currentColor;
  text-transform: uppercase;
  box-shadow: none;
  transition: color .2s ease, opacity .2s ease;
}
.status.turn { color: #c88aff; }

.status.success { color: #6dffb6; }
.status.failure { color: #ff7b9e; }

.chest-progress {
  width: min(100%, 500px);
  margin: 0 auto 9px;
  padding: 8px 12px;
  position: relative;
  border: 1px solid rgba(255,211,70,.2);
  border-radius: 14px;
  background: rgba(26,22,51,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 25px rgba(0,0,0,.2);
}
.chest-progress-head { display: flex; justify-content: space-between; margin-bottom: 7px; color: #d3d1e3; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.chest-progress-head b { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.chest-progress-head strong { color: #ffe66b; }
.chest-track { height: 9px; overflow: hidden; border-radius: 999px; background: #111127; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.chest-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9d19, #ffe346, #ff63a5); box-shadow: 0 0 13px #ffbf2e; transition: width .65s cubic-bezier(.2,.85,.25,1); }
.chest-progress.ready { animation: chest-ready .65s ease-in-out 2; border-color: rgba(255,220,73,.7); box-shadow: 0 0 30px rgba(255,191,46,.35); }
.chest-xp {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 48%;
  width: max-content;
  opacity: 0;
  color: #fff09a;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8a4a00, 0 0 8px #ffca38, 0 0 18px rgba(255,157,25,.8);
  transform: translate(-50%, 0) scale(.75);
  pointer-events: none;
}
.chest-xp.is-visible { animation: chest-xp-float 1.15s cubic-bezier(.2,.78,.25,1) both; }

.reward-stage {
  --reward-accent: var(--cyan);
  width: min(100%, 500px);
  height: 70px;
  margin: 0 auto 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.reward-stage::before,
.reward-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.reward-stage::before {
  inset: 7px 2%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reward-accent) 14%, transparent) 22%, color-mix(in srgb, var(--reward-accent) 22%, transparent) 50%, color-mix(in srgb, var(--reward-accent) 14%, transparent) 78%, transparent);
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  filter: blur(1px);
}
.reward-stage::after {
  width: 78%;
  height: 1px;
  left: 11%;
  top: 50%;
  background: linear-gradient(90deg, transparent, var(--reward-accent), transparent);
  box-shadow: 0 0 18px var(--reward-accent);
}
.reward-stage.reward-combo { --reward-accent: var(--pink); }
.reward-stage.reward-chest { --reward-accent: var(--gold); }

.reward-main {
  display: block;
  opacity: 0;
  color: white;
  font-size: clamp(1.35rem, 5vw, 2.15rem);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .055em;
  text-shadow: 0 2px 0 rgba(35,15,77,.7), 0 0 11px var(--reward-accent), 0 0 28px color-mix(in srgb, var(--reward-accent) 75%, transparent);
  transform: scale(.72);
}
.reward-chest .reward-main {
  color: #fff7bd;
  font-size: clamp(1.55rem, 5.7vw, 2.45rem);
  letter-spacing: .035em;
}
.reward-sub {
  min-height: 20px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  color: #d5d3e4;
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateY(7px);
}
.reward-sub span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 10px 2px 0;
  display: inline-block;
  border-radius: 50%;
  background: #77748e;
}
.reward-sub-coins { color: #ffe16a; }
.reward-sub-chest { color: #ffc454; text-shadow: 0 0 9px rgba(255,196,84,.45); }

.reward-stage.is-active::before { animation: reward-beam 1.5s ease-out both; }
.reward-stage.is-active::after { animation: reward-line 1.5s ease-out both; }
.reward-stage.is-active .reward-main { animation: reward-main-life 1.5s cubic-bezier(.2,.78,.25,1) both; }
.reward-stage.is-active .reward-sub { animation: reward-sub-life 1.5s ease-out both; }
.reward-stage.is-active.reward-chest { animation: reward-stage-burst 1.5s ease-out both; }

.color-grid {
  width: min(100%, 500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 3vw, 20px);
  isolation: isolate;
  position: relative;
  z-index: 0;
}

.color-button {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--glow) 70%, white 30%);
  border-radius: clamp(22px, 6vw, 38px);
  cursor: pointer;
  opacity: .88;
  transform: translateY(0);
  transition: transform .11s ease, filter .12s ease, opacity .12s ease, box-shadow .12s ease;
  box-shadow: inset 0 4px 5px rgba(255,255,255,.35), inset 0 -22px 38px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.38), 0 0 18px color-mix(in srgb, var(--glow) 42%, transparent);
}

.color-grid:not(.locked) .color-button:hover {
  opacity: .92;
  transform: translateY(-4px) scale(1.015);
  filter: brightness(1.12) saturate(1.08);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.28), inset 0 -14px 30px rgba(0,0,0,.18), 0 13px 28px rgba(0,0,0,.36), 0 0 17px color-mix(in srgb, var(--glow) 45%, transparent);
}

.color-grid:not(.locked) .color-button:active {
  transform: translateY(3px) scale(.965);
  filter: brightness(1.28);
  box-shadow: inset 0 6px 13px rgba(0,0,0,.24), 0 3px 9px rgba(0,0,0,.28), 0 0 23px var(--glow);
}

.color-button::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.52), transparent 38%, rgba(255,255,255,.04) 70%);
  opacity: .7;
}

.color-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.blue { background: radial-gradient(circle at 35% 28%, #72d3ff, #087fff 55%, #0445be); --glow: #1ba7ff; }
.red { background: radial-gradient(circle at 35% 28%, #ff8abe, #ff286b 55%, #b90b46); --glow: #ff3478; }
.green { background: radial-gradient(circle at 35% 28%, #78ffd0, #0fd98a 55%, #008c55); --glow: #16ee98; }
.yellow { background: radial-gradient(circle at 35% 28%, #fff693, #ffd225 55%, #d48b00); --glow: #ffdb2f; }

.color-button.active {
  z-index: 1;
  opacity: 1;
  transform: translateY(-3px) scale(1.09);
  filter: brightness(1.65) saturate(1.35);
  box-shadow: inset 0 5px 9px rgba(255,255,255,.68), inset 0 -10px 24px rgba(255,255,255,.15), 0 0 22px var(--glow), 0 0 55px var(--glow), 0 0 90px color-mix(in srgb, var(--glow) 70%, transparent);
  animation: arcade-light .3s ease-out;
}

.color-grid.error-shake { animation: board-shake .42s ease-in-out; }

.color-grid.locked .color-button { cursor: not-allowed; }
.turn-hint { margin: 22px 0 0; color: var(--muted); font-size: .9rem; }

.game-over-screen { position: fixed; z-index: 8; inset: 0; min-height: 100dvh; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom)); background: rgba(7,7,19,.78); backdrop-filter: blur(13px); }
.game-over-screen h2 { max-width: 480px; margin: 0 auto; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.08; background: linear-gradient(120deg, #fff, #ff8ec1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-over-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 75, 118, .35);
  border-radius: 50%;
  color: #ff4b76;
  background: rgba(255,75,118,.1);
  box-shadow: 0 0 30px rgba(255,75,118,.15);
  font-size: 2.6rem;
  font-weight: 300;
}

.results { display: flex; justify-content: center; gap: 18px; margin: 32px auto 14px; }
.results div { min-width: 145px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); }
.results strong { display: block; margin-top: 5px; font-size: 1.8rem; }
.record-message { min-height: 24px; margin: 0 0 18px; color: #ffd65c; font-weight: 800; }
.record-message.is-record { animation: record-pop .65s cubic-bezier(.2, .85, .25, 1.3) both; text-shadow: 0 0 20px rgba(255,214,92,.65); }

.end-actions {
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
}
.end-actions .primary-button {
  min-width: min(100%, 340px);
  box-shadow: 0 15px 46px rgba(177,55,255,.62), 0 0 32px rgba(255,54,140,.38), inset 0 2px rgba(255,255,255,.35), inset 0 -5px rgba(87,18,151,.28);
}

.ranking-panel {
  width: min(100%, 500px);
  margin: 0 auto 24px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(27,27,57,.88), rgba(13,13,31,.92));
  box-shadow: 0 16px 45px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
  text-align: left;
}

.leaderboard-scroll {
  max-height: 282px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(183,119,255,.65) rgba(255,255,255,.05);
  scrollbar-width: thin;
}

.ranking-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ranking-kicker { margin: 0 0 3px; color: var(--cyan); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ranking-header h3 { margin: 0; font-size: 1.45rem; }
.player-position {
  min-width: 100px;
  padding: 9px 13px;
  border: 1px solid rgba(183,119,255,.3);
  border-radius: 13px;
  background: rgba(155,92,255,.1);
  text-align: center;
}
.player-position span { display: block; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.player-position strong { display: block; margin-top: 1px; color: #d8b9ff; font-size: 1.2rem; }
.ranking-message {
  width: min(100%, 500px);
  min-height: 20px;
  margin: 0 auto 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,210,46,.28);
  border-radius: 11px;
  color: #ffe36e;
  background: linear-gradient(90deg, rgba(255,151,25,.12), rgba(255,62,148,.09));
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
}
.ranking-message:empty { display: none; }

.screen-flash { position: fixed; z-index: 7; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,72,101,.18), rgba(255,20,55,.38)); }
.screen-flash.active { animation: error-flash .48s ease-out; }

.ranking-list { margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.ranking-row {
  counter-increment: ranking;
  min-height: 36px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  color: #c9c8d8;
  font-size: .86rem;
}
.ranking-row:nth-child(even) { background: rgba(255,255,255,.035); }
.ranking-row::before { content: counter(ranking); color: #74738c; font-size: .74rem; font-weight: 800; text-align: center; }
.ranking-row:nth-child(1)::before { color: #ffd65c; }
.ranking-row:nth-child(2)::before { color: #cfd7e6; }
.ranking-row:nth-child(3)::before { color: #df9d6c; }
.ranking-row .ranking-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row .ranking-score { color: white; font-variant-numeric: tabular-nums; font-weight: 900; }
.ranking-row.current-player {
  color: white;
  background: linear-gradient(90deg, rgba(155,92,255,.27), rgba(57,231,255,.09));
  box-shadow: inset 3px 0 #b777ff, 0 0 18px rgba(155,92,255,.12);
}
.ranking-row.current-player::before { color: #d8b9ff; }

.confetti {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background: var(--confetti-color);
  left: var(--confetti-left);
  opacity: 0;
  animation: confetti-fall var(--confetti-duration) cubic-bezier(.18, .65, .32, 1) var(--confetti-delay) forwards;
}

@keyframes screen-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes game-item-enter {
  from { opacity: 0; transform: translateY(22px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes soft-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-.3deg); }
  40% { transform: translateX(6px) rotate(.3deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes record-pop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes confetti-fall {
  0% { opacity: 1; transform: translate3d(0, -5vh, 0) rotate(0); }
  100% { opacity: 0; transform: translate3d(var(--confetti-drift), 105vh, 0) rotate(var(--confetti-spin)); }
}

@keyframes background-pulse {
  from { opacity: 0; }
  45% { opacity: 1; }
  to { opacity: 0; }
}

@keyframes particle-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.75); opacity: .12; }
  50% { transform: translate3d(14px, -45px, 0) scale(1.45); opacity: .55; }
}

@keyframes logo-hover {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes play-pulse {
  0%, 100% { box-shadow: 0 12px 38px rgba(177,55,255,.5), 0 0 22px rgba(255,54,140,.25), inset 0 2px rgba(255,255,255,.35), inset 0 -5px rgba(87,18,151,.28); }
  50% { box-shadow: 0 15px 48px rgba(177,55,255,.7), 0 0 38px rgba(255,54,140,.45), inset 0 2px rgba(255,255,255,.42), inset 0 -5px rgba(87,18,151,.28); }
}

@keyframes arcade-light {
  0% { transform: scale(.96); }
  65% { transform: translateY(-4px) scale(1.12); }
  100% { transform: translateY(-3px) scale(1.09); }
}

@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px) rotate(-.4deg); }
  40% { transform: translateX(8px) rotate(.4deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@keyframes error-flash {
  0%, 100% { opacity: 0; }
  28% { opacity: 1; }
}

@keyframes reward-main-life {
  0% { opacity: 0; transform: scale(.65) translateY(8px); filter: blur(3px); }
  16% { opacity: 1; transform: scale(1.13) translateY(0); filter: blur(0); }
  25% { transform: scale(.96); }
  34%, 76% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96) translateY(-5px); }
}
@keyframes reward-sub-life {
  0%, 13% { opacity: 0; transform: translateY(7px); }
  28%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes reward-beam {
  0% { opacity: 0; transform: scaleX(.25); }
  18% { opacity: 1; transform: scaleX(1); }
  78% { opacity: .75; }
  100% { opacity: 0; transform: scaleX(.92); }
}
@keyframes reward-line {
  0% { opacity: 0; transform: scaleX(.15); }
  20%, 68% { opacity: .75; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.5); }
}
@keyframes reward-stage-burst {
  0%, 100% { filter: brightness(1); }
  18% { filter: brightness(1.65); }
  32% { filter: brightness(1.1); }
}

@keyframes chest-ready {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.035) rotate(-.5deg); filter: brightness(1.35); }
  70% { transform: scale(1.02) rotate(.5deg); }
}

@keyframes chest-xp-float {
  0% { opacity: 0; transform: translate(-50%, 5px) scale(.72); }
  18% { opacity: 1; transform: translate(-50%, -4px) scale(1.14); }
  38%, 68% { opacity: 1; transform: translate(-50%, -12px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -27px) scale(.92); }
}

@keyframes hud-level-pulse {
  0%, 100% { transform: scale(1); }
  38% { color: #dce0ff; transform: scale(1.12); filter: brightness(1.55) drop-shadow(0 0 7px rgba(120,129,255,.8)); }
}
@keyframes hud-score-flash {
  0% { transform: scale(.82); opacity: .35; }
  42% { transform: scale(1.13); color: #fff7c4; text-shadow: 0 0 14px #ffcf4f, 0 0 32px rgba(255,181,46,.7); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes hud-record-pulse {
  0%, 100% { transform: scale(1); }
  32% { color: white; transform: scale(1.12); filter: brightness(1.7) drop-shadow(0 0 9px rgba(239,88,255,.95)); }
}
@keyframes hud-record-badge {
  0% { opacity: 0; transform: translateY(-3px) scale(.75); }
  18%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(.95); }
}
@keyframes hud-level-cue {
  0% { opacity: 0; transform: translate(-50%, 5px) scale(.85); }
  18%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); text-shadow: 0 0 10px rgba(57,231,255,.75); }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.96); }
}

@media (max-width: 520px) {
  .game-shell { padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); }
  .game-header { margin-bottom: 6px; }
  .brand { font-size: 1.05rem; }
  .hud-score strong { font-size: 2.65rem; }
  .hud-record { font-size: .56rem; }
  .color-grid { max-width: min(86vw, 390px); }
  .results { gap: 10px; }
  .results div { min-width: 0; flex: 1; }
  .primary-button { width: min(100%, 330px); min-height: 58px; }
  .ranking-panel { padding: 16px 12px; border-radius: 18px; }
  .reward-dashboard { gap: 8px; }
  .reward-card { min-height: 68px; padding: 9px 10px; gap: 9px; border-radius: 15px; }
  .reward-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
  .reward-card strong { font-size: 1rem; }
  .game-over-screen { padding-inline: 12px; }
  .reward-stage { height: 61px; margin-bottom: 5px; }
  .reward-sub { margin-top: 5px; gap: 8px; font-size: .62rem; }
  .reward-sub span + span::before { margin-right: 7px; }
  .results { margin-top: 22px; }
  .record-message { margin-bottom: 12px; }
  .end-actions { margin-bottom: 16px; }
  .ranking-panel { margin-bottom: 0; }
  .leaderboard-scroll { max-height: 224px; }
}

@media (max-width: 390px), (max-height: 690px) {
  .game-shell { padding-block: 12px; }
  .game-header { margin-bottom: 4px; }
  .brand { font-size: .92rem; }
  .hud-topline { min-height: 20px; }
  .hud-score strong { font-size: 2.35rem; }
  .hud-meta { min-height: 18px; margin-top: 0; }
  .status { margin-bottom: 6px; }
  .color-grid { width: min(74vh, 88vw, 360px); gap: 10px; }
  .turn-hint { margin-top: 12px; }
  .logo-mark { width: 58px; margin-bottom: 14px; }
  .intro { margin-block: 15px 20px; }
  .best-card { margin-bottom: 20px; padding-block: 11px; }
  .game-over-icon { width: 56px; height: 56px; margin-bottom: 14px; }
  .results { margin-top: 22px; }
  .ranking-row { min-height: 32px; padding-block: 5px; }
  .reward-dashboard { margin-bottom: 16px; }
  .play-caption { display: none; }
  .chest-progress { margin-bottom: 6px; padding-block: 6px; }
  .reward-stage { height: 56px; margin-bottom: 4px; }
  .game-over-screen { padding-top: max(14px, env(safe-area-inset-top)); }
  .game-over-screen h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .results { margin-top: 16px; }
  .results div { padding: 12px; }
  .results strong { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
  .ambient-particles { display: none; }
}