/* ==========================================================================
   Titan Blood — header concept III "RUSH"
   bright · chunky · kinetic · playable
   ========================================================================== */
:root {
  --ink: #1c1006;
  --ink2: #3a2410;
  --cream: #fff4dc;
  --cream2: #f7e4b8;
  --gold: #ffd25e;
  --gold2: #f2a516;
  --gold3: #c97a0a;
  --teal: #2fc2bd;
  --teal2: #43d1c8;
  --teal-deep: #137f86;
  --red: #e0454b;
  --red-deep: #a8222c;
  --navh: 70px;
  --copyw: clamp(320px, min(37vw, 57vh), 640px);
  --hl: clamp(38px, min(4.5vw, 6.8vh), 84px);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* depth without outlines: a tinted lip under each surface + a soft cast shadow */
  --ext: #7a3a08;
  --lip-cream: rgba(176, 116, 32, .32);
  --soft: 0 12px 30px rgba(70, 42, 8, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: #fff4dc;
  color: var(--ink);
  font: 600 17px/1.45 'Fira Sans Condensed', system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; border-radius: 10px; }

/* ---------- shared chunky gold button (game UI btn_gold) ---------- */
.btn-gold {
  --h: 54px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  height: var(--h);
  padding: 0 calc(var(--h) * .16) 2px;
  border-style: solid; border-color: transparent; border-width: 0 calc(var(--h) * .56);
  border-image: url(../assets/ui/btn_gold.webp) 0 104 fill / 0 calc(var(--h) * .56) / 0 stretch;
  font: 400 calc(var(--h) * .37)/1 'Lilita One', 'Sansita', sans-serif;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: .14em #8a4300; paint-order: stroke fill;
  text-shadow: 0 .09em 0 #8a4300;
  filter: drop-shadow(0 4px 0 rgba(44, 54, 64, .5)) drop-shadow(0 12px 16px rgba(8, 50, 55, .25));
  transition: transform .18s var(--ease-spring), filter .18s;
  isolation: isolate; overflow: hidden;
}
.btn-gold::after { /* shine sweep (transform only) */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .8) 50%, transparent 85%);
  mix-blend-mode: overlay; transform: translateX(-130%); animation: btnShine 3.6s 2.5s ease-in-out infinite;
}
.btn-gold:hover { transform: translateY(-3px) scale(1.04); }
.btn-gold:active { transform: translateY(2px) scale(.97); filter: drop-shadow(0 1px 0 rgba(44, 54, 64, .5)); }
.btn-gold svg { width: .9em; height: .9em; fill: #fff; stroke: #8a4300; stroke-width: 2.5px; paint-order: stroke; overflow: visible; flex: none; }
@keyframes btnShine { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(330%); } }

/* ==========================================================================
   NAV — floating game-UI pill
   ========================================================================== */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% 0;
  width: min(1320px, calc(100% - 28px)); height: var(--navh);
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 18px;
  background: linear-gradient(180deg, #fffaf0 0%, #fbeccb 55%, #efd7a4 100%);
  border-radius: 999px;
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 0 rgba(156, 102, 24, .18), 0 5px 0 rgba(10, 92, 98, .28), 0 18px 34px rgba(8, 60, 66, .28);
}
.nav-logo { flex: none; display: block; margin-right: 6px; transition: transform .2s var(--ease-spring); }
.nav-logo img { height: 46px; width: auto; filter: drop-shadow(0 2px 0 rgba(28, 16, 6, .35)); }
.nav-logo:hover { transform: rotate(-3deg) scale(1.06); }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; display: block; padding: 9px 13px 8px;
  font: 400 19px/1 'Lilita One', sans-serif; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); border-radius: 14px; transition: background .15s, transform .2s var(--ease-spring), color .15s;
}
.nav-links a:hover, .nav-links a.on { background: var(--teal); color: #fff; transform: translateY(-2px) rotate(-2deg); box-shadow: 0 3px 0 var(--teal-deep); }
.nav-links .dot { position: absolute; top: 4px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid #fff; animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse { 50% { scale: 1.35; } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.coins {
  position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px 0 46px; min-width: 112px;
  background: linear-gradient(#4a2f17, #22140a); border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(28, 16, 6, .4);
}
.coins-icon { position: absolute; left: -8px; top: 50%; width: 50px; height: 50px; margin-top: -25px; filter: drop-shadow(0 3px 0 rgba(28, 16, 6, .55)); }
.coins.bump .coins-icon { animation: coinBump .35s var(--ease-spring); }
.coins.bump .coins-num { animation: numBump .35s var(--ease-spring); }
@keyframes coinBump { 40% { transform: scale(1.3) rotate(-12deg); } }
@keyframes numBump { 40% { transform: scale(1.25); color: #fff; } }
.coins-num { display: inline-block; font: 900 21px/1 'Sansita', sans-serif; color: var(--gold); text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; }
.coins-plus { position: absolute; right: 4px; top: -14px; font: 400 20px/1 'Bangers', sans-serif; letter-spacing: .04em; color: var(--gold); text-shadow: 0 2px 0 #8a4a06, 0 3px 8px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; }
.coins-plus.show { animation: plusUp .8s ease-out forwards; }
@keyframes plusUp { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-16px) scale(1); } }

.snd {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0;
  background: linear-gradient(#fffaf0, #ecd6a6); border: 0; border-radius: 50%;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--lip-cream), 0 6px 14px rgba(8, 60, 66, .18); transition: transform .2s var(--ease-spring), background .2s;
}
.snd:hover { transform: translateY(-2px) rotate(-6deg); }
.snd:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip-cream); }
.snd svg { width: 26px; height: 26px; fill: none; stroke: var(--ink2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.snd .spk { fill: var(--ink2); }
.snd .wave { display: none; }
.snd .mute { stroke: var(--red); stroke-width: 3; }
.snd[aria-pressed="true"] { background: linear-gradient(#7ff0e6, var(--teal)); }
.snd[aria-pressed="true"] .wave { display: block; animation: sndWave 1s ease-in-out infinite; }
.snd[aria-pressed="true"] .w2 { animation-delay: .15s; }
.snd[aria-pressed="true"] .mute { display: none; }
@keyframes sndWave { 50% { opacity: .35; } }

.btn-nav { --h: 52px; animation: wobble 3.4s 3s ease-in-out infinite; }
.btn-nav:hover { animation-play-state: paused; }
@keyframes wobble {
  0%, 76%, 100% { rotate: 0deg; scale: 1; }
  80% { rotate: -5deg; scale: 1.08; }
  85% { rotate: 4deg; scale: 1.06; }
  90% { rotate: -2.5deg; scale: 1.03; }
  95% { rotate: 1deg; scale: 1; }
}
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: var(--teal); box-shadow: 0 3px 0 var(--teal-deep), 0 6px 14px rgba(8, 60, 66, .2); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger i { display: block; width: 22px; height: 4px; border-radius: 3px; background: #fff; transition: transform .25s var(--ease-spring), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: max(100svh, 760px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.2vw), 0 100%);
  overflow: hidden;
}

/* ---------- background ---------- */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-sky { position: absolute; inset: 0; background: radial-gradient(120% 95% at 70% 40%, #f2fffb 0%, #a8f3e8 16%, #5fdccf 34%, #2fc2bd 55%, #1a9ea2 78%, #12787f 100%); }
.bg-rays {
  position: absolute; left: 70%; top: 44%; width: 1700px; height: 1700px; margin: -850px 0 0 -850px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .26) 0deg 5.5deg, rgba(255, 255, 255, 0) 5.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 22%, transparent 48%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 22%, transparent 48%);
  animation: spin 150s linear infinite; will-change: transform;
}
.bg-sun { position: absolute; left: 70%; top: 44%; width: 1100px; height: 800px; margin: -400px 0 0 -550px; background: radial-gradient(closest-side, rgba(255, 252, 226, .9), rgba(255, 238, 170, .35) 45%, transparent 100%); }
.bg-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(10, 74, 80, .32) 30%, transparent 33%);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(162deg, #000 0%, rgba(0, 0, 0, .25) 20%, transparent 34%, transparent 64%, rgba(0, 0, 0, .5) 82%, #000 100%);
  mask-image: linear-gradient(162deg, #000 0%, rgba(0, 0, 0, .25) 20%, transparent 34%, transparent 64%, rgba(0, 0, 0, .5) 82%, #000 100%);
}
@keyframes spin { to { transform: rotate(360deg); } }
.cloud { position: absolute; left: 0; width: 240px; height: auto; filter: drop-shadow(0 7px 0 rgba(16, 110, 116, .22)); animation: drift 120s linear infinite; will-change: transform; }
.cloud.c1 { top: 15%; width: 300px; animation-duration: 140s; animation-delay: -30s; }
.cloud.c2 { top: 5%; width: 190px; animation-duration: 110s; animation-delay: -85s; opacity: .85; }
.cloud.c3 { top: 58%; width: 250px; animation-duration: 160s; animation-delay: -120s; opacity: .7; }
.cloud.c4 { top: 34%; width: 150px; animation-duration: 95s; animation-delay: -10s; opacity: .6; }
@keyframes drift { from { transform: translateX(-340px); } to { transform: translateX(calc(100vw + 40px)); } }

.fcoin, .fdrop { position: absolute; width: 52px; height: auto; filter: drop-shadow(0 5px 0 rgba(16, 90, 96, .3)); animation: bob 5s ease-in-out infinite, flip 3.4s linear infinite; }
.fdrop { animation: bob 6s ease-in-out infinite, tilt 5s ease-in-out infinite; }
.f1 { left: 2.5%; top: 26%; width: 46px; animation-delay: -1s, -.4s; }
.f2 { left: 47%; top: 11%; width: 34px; animation-delay: -2s, -1.9s; opacity: .85; filter: blur(1.2px); }
.f3 { right: 2%; top: 74%; width: 62px; animation-delay: -3s, -1s; }
.f4 { left: 41%; bottom: 15%; width: 40px; animation-delay: -.5s, -2.6s; }
.f5 { right: 27%; top: 8%; width: 28px; animation-delay: -4s, -.8s; filter: blur(2px); opacity: .75; }
.d1 { left: 53%; top: 82%; width: 54px; animation-delay: -2s, -1s; }
.d2 { right: 6%; top: 15%; width: 36px; animation-delay: -1s, -3s; filter: blur(1px); }
@keyframes bob { 50% { translate: 0 -22px; } }
@keyframes flip { 0% { scale: 1 1; } 25% { scale: .08 1; } 50% { scale: -1 1; } 75% { scale: -.08 1; } 100% { scale: 1 1; } }
@keyframes tilt { 50% { rotate: 14deg; } }

/* ---------- layout ---------- */
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1560px; margin: 0 auto;
  min-height: max(100svh, 760px);
  padding: calc(var(--navh) + 34px) clamp(20px, 3.4vw, 64px) calc(4.2vw + 60px);
  display: grid;
  grid-template-columns: var(--copyw) minmax(0, 1fr);
  grid-template-areas: "logo stage" "tag stage" "head stage" "sub stage" "ctas stage" "stats stage";
  column-gap: clamp(28px, 4vw, 90px);
  align-content: center;
}
.logo { grid-area: logo; }
.tag { grid-area: tag; }
.headline { grid-area: head; }
.sub { grid-area: sub; }
.ctas { grid-area: ctas; }
.stats { grid-area: stats; }
.stage { grid-area: stage; }

/* ---------- logo (cut into physical layers) ---------- */
.logo { position: relative; width: 100%; aspect-ratio: 2400 / 659; margin: 0 0 4px -1%; }
.logo-float { position: absolute; inset: 0; }
.lp { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
.fist-l { left: 0%; top: 0%; width: 31.167%; height: 91.502%; z-index: 1; transform-origin: 85% 55%; }
.fist-r { left: 74.667%; top: 0%; width: 25.333%; height: 90.895%; z-index: 1; transform-origin: 15% 55%; }
.ribbon { left: 14.375%; top: 54.628%; width: 71.5%; height: 45.372%; z-index: 2; transform-origin: 50% 50%; }
.bl { z-index: 3; transform-origin: 50% 80%; }
.b-b { left: 31.917%; top: 62.974%; width: 6.792%; height: 25.341%; }
.b-l { left: 39.25%; top: 61.305%; width: 5.5%; height: 26.252%; }
.b-o1 { left: 45.458%; top: 60.698%; width: 6.958%; height: 26.707%; }
.b-o2 { left: 53.208%; top: 60.698%; width: 7.042%; height: 27.618%; }
.b-d { left: 60.625%; top: 61.76%; width: 6.667%; height: 26.1%; }
.titan { left: 19.583%; top: 4.249%; width: 58.792%; height: 59.939%; z-index: 4; transform-origin: 50% 100%; }
.titan-shine {
  left: 19.583%; top: 4.249%; width: 58.792%; height: 59.939%; z-index: 5; pointer-events: none;
  -webkit-mask: url(../assets/rush/logo_titan.webp) 0 0 / 100% 100%; mask: url(../assets/rush/logo_titan.webp) 0 0 / 100% 100%;
  mix-blend-mode: overlay; opacity: 0; overflow: hidden;
}
.titan-shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .95) 45%, rgba(255, 250, 210, .6) 58%, transparent 90%);
  transform: translateX(-110%);
}
.logo.idle .titan-shine { opacity: 1; }
.logo.idle .titan-shine::before { animation: shine 4.6s .4s ease-in-out infinite; }
.logo.idle .logo-float { animation: float 4.2s ease-in-out infinite; }
@keyframes shine { 0%, 50% { transform: translateX(-110%); } 85%, 100% { transform: translateX(310%); } }
@keyframes float { 50% { translate: 0 -7px; rotate: -.6deg; } }
.logo-burst {
  position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  background: url(../assets/ui/fx_rays.webp) center / contain no-repeat; opacity: 0; scale: .2;
}
.logo-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.logo-fx .puff { position: absolute; width: 22%; aspect-ratio: 359 / 236; background: url(../assets/ui/fx_dust.webp) center / contain no-repeat; translate: -50% -50%; }
.logo-fx .flash { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 2; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 246, 200, .8) 35%, transparent 70%); mix-blend-mode: screen; }
.logo-fx .spark { position: absolute; width: 7%; aspect-ratio: 302 / 340; background: url(../assets/ui/fx_sparkle.webp) center / contain no-repeat; translate: -50% -50%; }

/* ---------- tag, headline, copy ---------- */
.tag {
  justify-self: start; margin: 6px 0 14px; padding: 8px 16px 6px;
  font: 400 clamp(18px, 1.6vw, 24px)/1 'Bangers', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 10px;
  text-shadow: 0 2px 0 var(--red-deep);
  box-shadow: 0 4px 0 var(--red-deep), 0 10px 20px rgba(120, 20, 30, .22); rotate: -2.5deg;
}
.tag span { color: var(--gold); }
.headline {
  position: relative; z-index: 3;
  margin: 0 0 18px; font: 400 var(--hl)/.94 'Lilita One', sans-serif; letter-spacing: .01em; text-transform: uppercase;
  rotate: -2deg; transform-origin: 0 50%;
}
.hl-line { display: block; white-space: nowrap; }
.w { position: relative; display: inline-block; }
.w::before {
  content: attr(data-t); position: absolute; left: 0; top: 0;
  color: var(--ext); -webkit-text-stroke: .11em var(--ext);
  text-shadow: 0 .07em 0 var(--ext), 0 .12em 0 var(--ext), 0 .22em .12em rgba(8, 60, 66, .3);
}
.w .f { position: relative; display: inline-block; color: var(--cream); }
.w.gold .f {
  background: linear-gradient(180deg, #fffbd6 0%, #ffe27a 30%, #ffc53a 58%, #f08a12 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.w.gold .f::after { /* glint */
  content: ""; position: absolute; left: 6%; top: 10%; width: 14%; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, transparent); opacity: .8;
}
.sub {
  position: relative; margin: 0 0 20px; padding: 12px 18px 13px; max-width: 34em;
  font: 600 clamp(15px, min(1.2vw, 2vh), 19px)/1.38 'Fira Sans Condensed', sans-serif; color: var(--ink2);
  background: var(--cream); border-radius: 16px;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--lip-cream), 0 14px 26px rgba(8, 60, 66, .2);
  rotate: -.6deg;
}
.sub::before { /* sticker tail */
  content: ""; position: absolute; left: 34px; top: -13px; width: 20px; height: 20px; background: var(--cream);
  transform: rotate(45deg); border-radius: 4px 0 0 0;
}
.sub b { color: #9a5b00; background: linear-gradient(transparent 60%, rgba(255, 210, 94, .7) 60%); }
.sub b.red { color: var(--red-deep); background: linear-gradient(transparent 60%, rgba(224, 69, 75, .25) 60%); }

/* ---------- CTAs ---------- */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; margin-bottom: 18px; }
.btn-big { --h: clamp(54px, min(4.3vw, 6.6vh), 70px); }
.stores { display: flex; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 9px; height: clamp(48px, min(3.7vw, 5.8vh), 58px); padding: 0 15px 0 11px;
  background: linear-gradient(#2c1a0b, var(--ink)); color: #fff; text-decoration: none;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, .2), 0 4px 0 rgba(28, 16, 6, .3), 0 10px 20px rgba(8, 60, 66, .2);
  transition: transform .18s var(--ease-spring), box-shadow .18s;
}
.store:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 94, .7), 0 7px 0 rgba(28, 16, 6, .3), 0 14px 24px rgba(8, 60, 66, .22); }
.store:active { transform: translateY(2px); }
.store svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.store span { display: flex; flex-direction: column; font: 400 19px/1 'Lilita One', sans-serif; letter-spacing: .01em; }
.store small { font: 600 11px/1.2 'Fira Sans Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

/* ---------- stat chips ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 4px 14px 4px 4px;
  background: var(--cream); border-radius: 999px; box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--lip-cream), 0 8px 18px rgba(8, 60, 66, .16);
  rotate: var(--r, -1.5deg);
}
.chip:nth-child(2) { --r: 1.5deg; }
.chip:nth-child(3) { --r: -1deg; }
.chip:nth-child(4) { --r: 2deg; }
.ci { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; background: var(--teal); box-shadow: 0 0 0 2px #fff; }
.ci img { position: absolute; left: 50%; top: 50%; width: 120%; max-width: none; translate: -50% -42%; }
.ci-hero img { width: 150%; translate: -50% -22%; }
.ci-boss img { width: 112%; translate: -50% -50%; }
.ci-enemy { background: var(--red); }
.ci-enemy::after { content: ""; position: absolute; left: -4px; top: 0; width: 40px; height: 35px; background: url(../assets/sprites/tl_wolfman.walk_side.webp) 0 0 / calc(40px * 19) 35px no-repeat; }
.ct { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.chip b { font: 900 22px/1 'Sansita', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.1ch; }
.chip em { font: 400 12px/1 'Lilita One', sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--teal-deep); }

/* ==========================================================================
   STAGE — playable diorama card + heroes bursting out
   ========================================================================== */
.stage { position: relative; align-self: center; justify-self: stretch; margin: 40px 0 20px; }
.card-wrap { position: relative; z-index: 2; width: 86%; aspect-ratio: 16 / 10; perspective: 1500px; }
.card {
  position: absolute; inset: 0; padding: 10px;
  background: linear-gradient(160deg, #fff1a6 0%, #ffd25e 22%, #f2a516 55%, #c97a0a 100%);
  border-radius: 30px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(120, 60, 0, .4), 0 10px 0 #9a5a08, 0 34px 60px rgba(6, 52, 58, .45);
  transform: rotateY(-8deg) rotateX(5deg); transform-style: preserve-3d;
}
.card::before, .card::after { /* corner rivets */
  content: ""; position: absolute; top: -2px; width: 18px; height: 18px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 35%, #fff6c8, #f2a516 55%, #8a4b00); box-shadow: 0 2px 0 #8a4b00;
}
.card::before { left: -2px; }
.card::after { right: -2px; }
#battle {
  display: block; width: 100%; height: 100%;
  border-radius: 20px; background: #6b8a4a; box-shadow: inset 0 0 0 2px rgba(120, 60, 0, .35);
  cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hud { position: absolute; inset: 14px; pointer-events: none; z-index: 3; }
.hud-top { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: center; }
.hud-wave, .hud-smite {
  position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px;
  background: rgba(28, 16, 6, .72); border-radius: 999px; color: #fff;
  font: 400 15px/1 'Lilita One', sans-serif; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: inset 0 0 0 2px rgba(255, 210, 94, .35), 0 3px 0 rgba(28, 16, 6, .5);
}
.hud-wave img { width: 34px; height: 34px; margin: -4px 0 -4px -6px; }
.hud-wave b { color: var(--gold); font-weight: 400; }
.hud-wave.jolt { animation: hudPop .5s var(--ease-spring); }
@keyframes hudPop { 40% { transform: scale(1.25) rotate(-4deg); } }
.hud-smite { padding-left: 12px; }
.hs-label { color: var(--gold); }
.hs-bar { width: 74px; height: 12px; border-radius: 8px; background: #3a2410; overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(#fff4a8, var(--gold) 50%, var(--gold2)); border-radius: 6px; transition: width .35s var(--ease-spring); }
.hud-smite b { font-weight: 400; min-width: 3.1em; text-align: right; font-variant-numeric: tabular-nums; }
.hud-smite.jolt { animation: hudPop .45s var(--ease-spring); }
.hud-spell {
  position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 4px;
  background: rgba(28, 16, 6, .72); border-radius: 999px;
  font: 400 12px/1 'Lilita One', sans-serif; text-transform: uppercase; color: var(--gold); letter-spacing: .04em;
  box-shadow: inset 0 0 0 2px rgba(255, 210, 94, .35);
}
.hud-spell img { width: 38px; height: auto; filter: drop-shadow(0 0 6px rgba(255, 210, 94, .8)); animation: spellPulse 1.4s ease-in-out infinite; }
@keyframes spellPulse { 50% { scale: 1.14; } }
.live-sticker {
  position: absolute; z-index: 5; left: 50%; top: -20px; translate: -50% 0; rotate: -2deg;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 5px;
  font: 400 19px/1 'Bangers', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--red); border-radius: 10px; box-shadow: 0 4px 0 var(--red-deep), 0 10px 20px rgba(120, 20, 30, .25);
  text-shadow: 0 2px 0 var(--red-deep); white-space: nowrap;
}
.live-sticker i { width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: dotPulse 1s ease-in-out infinite; }

/* tap hint */
.hint { position: absolute; z-index: 4; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; transition: opacity .3s; }
.hint.gone { opacity: 0; }
.hint-ring { position: absolute; left: -46px; top: -24px; width: 92px; height: 48px; border-radius: 50%; border: 4px solid var(--gold); box-shadow: 0 0 0 3px rgba(28, 16, 6, .6), 0 0 18px #ffd25e; animation: ringPulse 1.1s ease-out infinite; }
@keyframes ringPulse { 0% { scale: .4; opacity: 1; } 100% { scale: 1.25; opacity: 0; } }
.hint-hand { position: absolute; left: -10px; top: -6px; width: 62px; height: 62px; fill: #fff; stroke: #5a3412; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 4px 0 rgba(28, 16, 6, .4)); animation: tapHand 1.1s ease-in-out infinite; transform-origin: 30% 10%; }
@keyframes tapHand { 0%, 100% { transform: translate(14px, 22px) rotate(-14deg); } 45% { transform: translate(0, 0) rotate(-14deg) scale(.92); } 55% { transform: translate(0, 0) rotate(-14deg) scale(.92); } }
.hint-text {
  position: absolute; left: 34px; top: -78px; white-space: nowrap; rotate: -6deg;
  font: 400 34px/1 'Bangers', sans-serif; letter-spacing: .05em; color: var(--gold);
  -webkit-text-stroke: 5px #7a3a08; paint-order: stroke fill; text-shadow: 0 3px 0 #7a3a08, 0 6px 14px rgba(0, 0, 0, .35);
  animation: hintBounce .9s ease-in-out infinite;
}
@keyframes hintBounce { 50% { transform: translateY(-8px) scale(1.06); } }

/* combo text */
.combo {
  position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; white-space: nowrap; opacity: 0;
  font: 400 52px/1 'Bangers', sans-serif; letter-spacing: .04em; translate: -50% -100%;
}
.combo span { display: inline-block; background: linear-gradient(#fffbd6, #ffd25e 45%, #f08a12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.combo .stroke { position: absolute; left: 0; top: 0; -webkit-text-stroke: 7px #6b3206; color: #6b3206; text-shadow: 0 4px 0 #6b3206, 0 8px 16px rgba(0, 0, 0, .35); }
.combo .sub2 { display: block; font-size: .5em; text-align: center; -webkit-text-fill-color: #fff; background: none; }

/* victory */
.victory { position: absolute; inset: 14px; z-index: 6; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(20, 120, 126, .55), rgba(10, 30, 32, .82)); }
.victory[hidden] { display: none; }
.v-rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255, 210, 94, .38) 0deg 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%); mask-image: radial-gradient(circle, #000 0%, transparent 55%); animation: spin 24s linear infinite; }
.v-box { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 16px; }
.v-ribbon { position: relative; width: min(470px, 92%); aspect-ratio: 713 / 149; background: url(../assets/ui/ribbon_red.webp) center / 100% 100% no-repeat; display: grid; place-items: center; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
.v-ribbon span { font: 900 clamp(30px, 3.3vw, 50px)/1 'Sansita', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--gold); -webkit-text-stroke: 5px #6b1018; paint-order: stroke fill; text-shadow: 0 4px 0 #6b1018; margin-top: -.12em; }
.v-stars { display: flex; gap: 6px; margin-top: -6px; }
.v-stars i { width: 46px; height: 46px; background: var(--gold); clip-path: polygon(50% 0, 63% 35%, 100% 37%, 71% 59%, 81% 96%, 50% 75%, 19% 96%, 29% 59%, 0 37%, 37% 35%); filter: drop-shadow(0 3px 0 #000); }
.v-stars i:nth-child(2) { width: 58px; height: 58px; margin-top: -10px; }
.v-line { margin: 2px 0 4px; font: 400 clamp(18px, 1.7vw, 24px)/1.1 'Lilita One', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(10, 40, 42, .8), 0 4px 12px rgba(0, 0, 0, .45); }
.btn-v { --h: 56px; }
.v-close { margin-top: 4px; background: none; border: 0; padding: 6px 10px; font: 400 15px/1 'Lilita One', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

.loader { position: absolute; inset: 14px; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 10px; border-radius: 20px; background: radial-gradient(circle, #2b8f86, #124c50); color: #fff; font: 400 18px/1 'Lilita One', sans-serif; letter-spacing: .03em; text-transform: uppercase; transition: opacity .4s; }
.loader img { width: 64px; animation: flip 1s linear infinite; }
.loader.done { opacity: 0; pointer-events: none; }

/* heroes popping out of the frame */
.pop { position: absolute; z-index: 3; pointer-events: none; will-change: transform; }
.pop img { width: 100%; height: auto; max-width: none; filter: drop-shadow(0 12px 0 rgba(28, 16, 6, .22)); transform-origin: 50% 100%; }
.pop-brakka { width: 31%; right: -4%; top: -19%; }
.pop-brakka img { transform: scaleX(-1); animation: breathe 3.4s ease-in-out infinite; }
.pop-doran { width: 24%; left: -7%; bottom: -36%; z-index: 4; }
.pop-doran img { animation: breathe 3.8s -1.2s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1.012 1.022; } }

/* ==========================================================================
   MARQUEE + NEXT SECTION (placeholder)
   ========================================================================== */
.marquee {
  position: relative; z-index: 5; width: 112vw; margin: calc(-2.1vw - 33px) 0 0 -6vw;
  transform: rotate(-2.4deg); background: linear-gradient(#ea5157, var(--red) 55%, #c9343b);
  box-shadow: 0 6px 0 var(--red-deep), 0 16px 30px rgba(120, 20, 30, .25); overflow: hidden;
}
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-track span { padding: 13px 0 10px; font: 400 30px/1 'Bangers', sans-serif; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 3px 0 var(--red-deep); }
@keyframes mq { to { transform: translateX(-50%); } }
.next {
  position: relative; padding: 110px 24px 140px; text-align: center;
  background: radial-gradient(rgba(201, 122, 10, .16) 28%, transparent 31%) 0 0 / 14px 14px, linear-gradient(#fff4dc, #f7e4b8);
}
.next h2 { margin: 0 0 6px; font: 400 clamp(36px, 4vw, 60px)/1 'Lilita One', sans-serif; text-transform: uppercase; color: var(--teal-deep); }
.next p { margin: 0 0 28px; color: #8a6a3c; }
.chibis { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chibis img { width: clamp(90px, 11vw, 150px); height: auto; filter: drop-shadow(0 6px 0 rgba(28, 16, 6, .2)); transition: transform .25s var(--ease-spring); }
.chibis img:hover { transform: translateY(-10px) rotate(-4deg) scale(1.06); }

/* flying obols (appended to body) */
.fly-coin { position: fixed; left: 0; top: 0; z-index: 60; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(28, 16, 6, .45)); will-change: transform; }

/* ==========================================================================
   pre-entrance state (JS adds .pre on <html> before first paint)
   ========================================================================== */
.pre .lp, .pre .tag, .pre .w, .pre .sub, .pre .ctas > *, .pre .chip, .pre .pop, .pre .card-wrap, .pre .live-sticker { opacity: 0; }
.pre .nav { translate: -50% -140%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 1700px) {
  :root { --copyw: clamp(320px, min(33vw, 58vh), 640px); }
  .hero-inner { max-width: 1720px; }
}
@media (max-width: 1180px) {
  .nav-links a { padding: 9px 9px 8px; font-size: 17px; }
  .nav-logo img { height: 40px; }
}
@media (max-width: 1060px) {
  :root { --navh: 62px; }
  .nav { padding-left: 14px; }
  .burger { display: flex; }
  .nav-links {
    position: absolute; top: calc(100% + 12px); right: 0; flex-direction: column; gap: 4px; padding: 12px; min-width: 220px;
    background: var(--cream); border-radius: 22px; box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--lip-cream), 0 18px 34px rgba(8, 60, 66, .3);
    transform-origin: 85% 0; transition: transform .28s var(--ease-spring), opacity .2s, visibility 0s .28s;
    transform: scale(.7) translateY(-10px); opacity: 0; visibility: hidden;
  }
  .nav.open .nav-links { transform: none; opacity: 1; visibility: visible; transition: transform .32s var(--ease-spring), opacity .15s, visibility 0s; }
  .nav-links a { font-size: 22px; padding: 12px 14px; }
  :root { --copyw: clamp(300px, min(38vw, 57vh), 520px); }
  .pop-brakka { width: 30%; right: -3%; top: -16%; }
  .pop-doran { width: 23%; left: -6%; bottom: -30%; }
}
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "tag" "head" "stage" "sub" "ctas" "stats";
    justify-items: center; text-align: center;
    padding-top: calc(var(--navh) + 34px);
    max-width: 760px;
  }
  .logo { width: min(100%, 620px); margin-left: 0; }
  .tag, .headline { justify-self: center; }
  .headline { transform-origin: 50% 50%; --hl: clamp(36px, 7.6vw, 68px); }
  .sub { text-align: left; }
  .sub::before { display: none; }
  .ctas, .stats { justify-content: center; }
  .stage { width: 100%; margin: 70px 0 34px; }
  .card-wrap { width: 100%; aspect-ratio: 16 / 11; }
  .pop { z-index: 1; }
  .pop-brakka { width: 36%; right: -3%; top: -27%; }
  .pop-doran { width: 30%; left: -4%; top: -23%; bottom: auto; z-index: 1; }
}
@media (max-width: 560px) {
  :root { --navh: 58px; }
  .nav { top: 10px; width: calc(100% - 20px); gap: 6px; padding: 0 6px 0 10px; }
  .nav-logo img { height: 34px; }
  .nav-right { gap: 6px; }
  .btn-nav { display: none; }
  .coins { height: 38px; min-width: 84px; padding: 0 12px 0 38px; }
  .coins-icon { width: 42px; height: 42px; margin-top: -21px; left: -6px; }
  .coins-num { font-size: 18px; }
  .snd { width: 40px; height: 40px; }
  .burger { width: 42px; height: 42px; border-radius: 12px; }
  .hero-inner { padding: calc(var(--navh) + 30px) 14px calc(4.2vw + 70px); }
  .tag { margin: 8px 0 12px; }
  .headline { --hl: clamp(32px, 10.6vw, 48px); margin-bottom: 8px; }
  .stage { margin: 78px 0 28px; }
  .card { padding: 7px; border-radius: 24px; }
  #battle { border-radius: 16px; }
  .hud, .victory, .loader { inset: 10px; }
  .card-wrap { aspect-ratio: 1 / 1.02; }
  .live-sticker { font-size: 16px; top: -18px; }
  .hud-top { left: 8px; top: 8px; gap: 6px; }
  .hud-wave, .hud-smite { height: 30px; font-size: 13px; }
  .hs-bar { width: 44px; }
  .hud-wave img { width: 28px; height: 28px; }
  .hud-spell { display: none; }
  .hint-text { font-size: 28px; }
  .combo { font-size: 40px; }
  .pop-brakka { width: 34%; right: -3%; top: -24%; }
  .pop-doran { width: 28%; left: -4%; top: -21%; }
  .f3, .f4, .d1, .cloud.c3 { display: none; }
  .sub { font-size: 16px; }
  .ctas { flex-direction: column; }
  .btn-big { --h: 62px; }
  .stores { width: 100%; justify-content: center; }
  .store { padding: 0 12px 0 10px; }
  .store span { font-size: 17px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 360px; }
  .chip { justify-content: flex-start; }
  .mq-track span { font-size: 22px; padding: 10px 0 8px; }
  .v-stars i { width: 34px; height: 34px; }
  .v-stars i:nth-child(2) { width: 44px; height: 44px; }
  .btn-v { --h: 50px; }
}

/* ==========================================================================
   reduced motion: no shake, no idle loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .bg-rays, .cloud, .fcoin, .fdrop, .mq-track, .v-rays, .loader img { animation: none !important; }
  .hint-ring { animation: none !important; opacity: 1; scale: 1; }
}

/* boss banner + mobile menu play button */
.boss-banner {
  position: absolute; z-index: 5; left: 50%; top: 46%; pointer-events: none; white-space: nowrap;
  padding: 10px 26px 8px; background: var(--red); border-radius: 12px; box-shadow: 0 5px 0 var(--red-deep), 0 14px 28px rgba(0, 0, 0, .35);
}
.boss-banner span { display: block; font: 400 clamp(26px, 3vw, 40px)/1 'Bangers', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 0 3px 0 #6b1018; transform: skewX(12deg); }
.nl-play { display: none; }
@media (max-width: 1060px) {
  .nl-play { display: block; margin-top: 6px; }
  .nav-links .nl-play a { --h: 56px; display: flex; width: 100%; height: var(--h); padding: 0 0 2px; border-radius: 0; font-size: 21px; color: #fff; }
  .nav-links .nl-play a:hover { background: none; box-shadow: none; color: #fff; transform: translateY(-2px); }
}
@media (max-width: 1060px) {
  .nav-links .dot { position: relative; display: inline-block; top: -12px; right: auto; margin-left: 3px; }
}
@media (max-width: 1060px) and (min-width: 901px) {
  .stats { display: grid; grid-template-columns: repeat(2, max-content); }
}