/* ==========================================================================
   RICOCHET — "Nebula Arena" theme  ·  standalone game micro-site
   Deep-navy arena + purple→magenta→pink nebula, glowing periwinkle borders,
   gold/orange candy CTAs, and the signature dotted ricochet bounce-line.
   Baloo 2 (rounded display) + Plus Jakarta Sans. Distinct from every other
   GKS game site. Respects prefers-reduced-motion + the <16384px GPU limit.
   ========================================================================== */

.ricochet *,
.ricochet *::before,
.ricochet *::after { box-sizing: border-box; }

.ricochet {
  --bg: #07081a;
  --bg-2: #0e1030;
  --panel: rgba(17, 18, 44, .72);
  --panel-line: rgba(150, 156, 235, .14);
  --ink: #f3f4ff;
  --muted: #c3c6ee;

  --violet: #7b4dff;
  --magenta: #c64dd6;
  --pink: #ff5fa2;
  --cyan: #5fd0ff;
  --gold: #ffd23f;
  --orange: #ff8a1f;
  --rim: #aab2ff;            /* periwinkle arena glow */
  --danger: #ff5566;

  --warm: linear-gradient(96deg, #ffe27a, #ffb03f 38%, #ff7a3f 70%, #ff5fa2);
  --neon: linear-gradient(96deg, #5fd0ff, #7b4dff 50%, #ff5fa2);

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --shell: min(1180px, calc(100% - 2.4rem));
  --r: 20px;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 92px;
}
html.ricochet { scroll-behavior: smooth; }
.ricochet body { margin: 0; overflow-x: hidden; background: transparent; }

.shell { width: var(--shell); margin-inline: auto; }

.ricochet h1, .ricochet h2, .ricochet h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}
.ricochet p { margin: 0; }
.ricochet a { color: inherit; text-decoration: none; }
.ricochet kbd {
  font-family: var(--font-body);
  font-size: .82em; font-weight: 700;
  background: rgba(170,178,255,.16);
  border: 1px solid rgba(170,178,255,.35);
  border-bottom-width: 2px;
  border-radius: 7px; padding: .08em .42em;
  color: #dfe2ff;
}
/* Accent words — solid gold for bulletproof legibility (no gradient clip). */
.pop-text { color: var(--gold); -webkit-text-fill-color: var(--gold); }

/* ── Nebula backdrop (fixed, viewport-sized) — calm, mostly dark ──────── */
.nebula { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -12%, #14163e 0%, #0c0d24 46%, #07081a 80%),
    #06060f;
}
.neb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; }
.neb-pink {
  width: 60vw; height: 52vw; right: -20vw; bottom: -26vw;
  background: radial-gradient(circle, #d56bb4 0%, #8a3fb0 38%, rgba(122,77,255,0) 70%);
  animation: drift 32s ease-in-out infinite;
}
.neb-blue {
  width: 50vw; height: 50vw; left: -20vw; top: -18vw;
  background: radial-gradient(circle, #4a59cc 0%, #4733b0 40%, rgba(40,30,120,0) 70%);
  opacity: .18;
  animation: drift 38s ease-in-out infinite reverse;
}
.planet {
  position: absolute; right: 13vw; top: 13vh;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #8194d8, #3a4aa8 62%, #232a66);
  box-shadow: inset -14px -10px 26px rgba(0,0,0,.5), 0 0 50px rgba(120,140,255,.16);
  opacity: .42;
}
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 78% 14%, #ffd9f0 50%, transparent),
    radial-gradient(1.4px 1.4px at 33% 67%, #cfe0ff 50%, transparent),
    radial-gradient(1.2px 1.2px at 62% 48%, #fff 50%, transparent),
    radial-gradient(1.6px 1.6px at 88% 72%, #ffe9a8 50%, transparent),
    radial-gradient(1.2px 1.2px at 47% 8%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 22% 88%, #d9c4ff 50%, transparent);
  opacity: .42; animation: twinkle 5.5s ease-in-out infinite;
}
@keyframes drift { 50% { transform: translate(4%, -4%) scale(1.06); } }
@keyframes twinkle { 50% { opacity: .45; } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  padding: .72rem 1.3rem; border-radius: 999px; cursor: pointer;
  border: 0; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s;
}
.btn svg { width: 18px; height: 18px; }
.btn-play {
  color: #3a1c00; background: var(--warm);
  box-shadow: 0 8px 26px rgba(255,138,31,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255,95,162,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost {
  color: var(--ink); background: rgba(170,178,255,.08);
  border: 1px solid rgba(170,178,255,.28);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(170,178,255,.16); }

/* ── Header ───────────────────────────────────────────────────────────── */
.rc-header { position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px); transition: background .25s, border-color .25s; }
.rc-header.is-scrolled {
  background: rgba(12,16,48,.78);
  border-bottom: 1px solid var(--panel-line);
}
.rc-header-inner { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; }
.rc-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display);
  font-weight: 800; letter-spacing: .04em; }
.rc-brand img { border-radius: 9px; }
.rc-brand .wm { font-size: 1.12rem;
  background: var(--neon); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.rc-nav { display: flex; gap: 1.5rem; margin-left: 1.4rem; margin-right: auto; }
.rc-nav a { font-weight: 600; font-size: .94rem; color: var(--muted); transition: color .15s; }
.rc-nav a:hover { color: var(--ink); }
.header-cta { display: flex; align-items: center; gap: .6rem; }
.header-cta .btn-ghost:first-child { padding: .56rem 1rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: .3rem; }

/* ── Layout primitives ────────────────────────────────────────────────── */
.section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); padding: .3rem .7rem; border-radius: 999px;
  background: rgba(95,208,255,.1); border: 1px solid rgba(95,208,255,.22); margin-bottom: 1rem;
}
.section-head { max-width: 660px; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin-bottom: .8rem; }
.section-head p { color: var(--muted); font-size: 1.06rem; line-height: 1.6; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(3rem,6vw,5rem); }
.hero-inner { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.hero-copy .eyebrow { color: var(--gold); background: rgba(255,210,63,.1); border-color: rgba(255,210,63,.28); }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.5rem); font-weight: 800; }
.tagline { color: var(--muted); font-size: 1.12rem; line-height: 1.62; margin: 1.1rem 0 0; max-width: 38ch; }
.loop-line { margin-top: 1rem; font-family: var(--font-display); letter-spacing: .04em; color: #cfd3ff; }
.loop-line b { color: var(--pink); }
.loop-line b:nth-child(2) { color: var(--cyan); }
.loop-line b:nth-child(3) { color: var(--gold); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.pill { font-size: .82rem; font-weight: 600; color: var(--muted);
  padding: .34rem .8rem; border-radius: 999px;
  background: rgba(170,178,255,.07); border: 1px solid var(--panel-line); }
.pill b { color: var(--ink); font-family: var(--font-display); }

/* ── The signature arena ──────────────────────────────────────────────── */
.hero-arena { position: relative; }
.arena {
  position: relative; aspect-ratio: 400/280; width: 100%;
  border-radius: 22px;
  background:
    radial-gradient(120% 120% at 80% 110%, rgba(255,95,162,.14), transparent 60%),
    radial-gradient(100% 100% at 0% 0%, rgba(91,107,255,.16), transparent 55%),
    #0a0c28;
  box-shadow: 0 30px 70px rgba(8,8,30,.6);
  overflow: hidden;
}
.arena-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena-border {
  fill: none; stroke: var(--rim); stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(170,178,255,.8));
  opacity: .9;
}
.arena-trace {
  fill: none; stroke: rgba(180,190,255,.28);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2 9;
}
.arena-trace-run {
  stroke: url(#rcPath); stroke-width: 2.6;
  stroke-dasharray: 16 320; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(255,160,90,.9));
  animation: trace 4.4s linear infinite;
}
@keyframes trace { to { stroke-dashoffset: -672; } }
.arena-knot { r: 4; fill: #fff; filter: drop-shadow(0 0 5px var(--rim)); opacity: .9; }

.target { position: absolute; transform: translate(-50%, -50%); width: clamp(40px, 9vw, 58px); }
.target img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); animation: bob 3.2s ease-in-out infinite; }
.target.t2 img { animation-delay: -1s; }
.target.t3 img { animation-delay: -2s; }
.tnum {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: #1a1340;
  background: #eef0ff; box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.tnum.gold { background: var(--gold); color: #4a2a00; }

.cannon-track {
  position: absolute; left: 8%; right: 8%; bottom: 9%; height: 0;
  border-top: 2px dotted rgba(170,178,255,.45);
}
.cannon {
  position: absolute; left: 16%; bottom: calc(9% - 14px);
  width: 34px; height: 34px;
  animation: slide 6s ease-in-out infinite;
}
.cannon-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe98a, #ffb43f 60%, #e07d1f);
  box-shadow: 0 0 18px rgba(255,180,63,.6), inset 0 0 0 3px rgba(255,255,255,.25);
}
.cannon-barrel {
  position: absolute; left: 52%; top: 6%;
  width: 13px; height: 26px; border-radius: 6px;
  background: linear-gradient(#3a3f78, #232850);
  border: 1.5px solid rgba(255,255,255,.3);
  transform: rotate(38deg); transform-origin: bottom center;
}
@keyframes slide { 0%,100% { left: 13%; } 50% { left: 30%; } }

.arena-mascot {
  position: absolute; right: 5%; top: 5%; width: clamp(54px, 13vw, 88px); height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-7px); } }

.arena-cap { margin-top: 1rem; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .55rem; }
.arena-cap b { color: var(--ink); }
.dot-line { width: 32px; height: 0; border-top: 2px dotted var(--gold); flex: none; }

/* ── Live arena: the shot fires, the room clears, the combo pops ───────── */
.arena-grid { fill: none; stroke: rgba(170,178,255,.07); stroke-width: 1; }
.arena-orb { fill: #ffe6a0; offset-rotate: 0deg;
  offset-path: path("M78 236 L196 40 L356 150 L232 248 L36 150");
  filter: drop-shadow(0 0 5px #ffd23f) drop-shadow(0 0 9px #ff8a1f);
  animation: orbRun 4.6s cubic-bezier(.45,0,.55,1) infinite; }
.arena-orb-trail { fill: #ff8a1f; r: 9; opacity: .45; filter: blur(3px) drop-shadow(0 0 8px #ff5fa2);
  animation-delay: -.09s; }
@keyframes orbRun {
  0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; }
  76% { offset-distance: 100%; opacity: 1; } 82% { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* muzzle flash + recoil on the cannon as it fires */
.cannon-flash { position: absolute; left: 58%; top: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd23f 38%, transparent 70%); opacity: 0; transform: scale(.3);
  animation: muzzle 4.6s ease-out infinite; }
@keyframes muzzle { 0% { opacity: 0; transform: scale(.3); } 3% { opacity: 1; transform: scale(1.2); }
  11% { opacity: 0; transform: scale(.5); } 100% { opacity: 0; } }
/* targets get popped in sequence 1 → 2 → 3 */
.target { animation: targetPop 4.6s ease-in-out infinite; }
.target.t2 { animation-delay: .14s; }
.target.t3 { animation-delay: .28s; }
@keyframes targetPop {
  0%,70% { transform: translate(-50%,-50%) scale(1); filter: none; }
  74% { transform: translate(-50%,-50%) scale(1.2); filter: brightness(1.6); }
  80% { transform: translate(-50%,-50%) scale(.55); opacity: .15; }
  90% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); }
}
/* combo flash on the clear */
.arena-combo { position: absolute; left: 50%; top: 23%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 4;
  font-family: var(--font-display); pointer-events: none; opacity: 0;
  animation: comboFlash 4.6s ease-in-out infinite; }
.arena-combo b { font-size: 2.1rem; font-weight: 800; line-height: 1;
  background: var(--warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.arena-combo span { font-size: .64rem; font-weight: 700; letter-spacing: .3em; color: var(--gold); }
@keyframes comboFlash {
  0%,72% { opacity: 0; transform: translateX(-50%) scale(.7); }
  79% { opacity: 1; transform: translateX(-50%) scale(1.16); }
  90% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
/* in-arena HUD */
.arena-hud { position: absolute; top: 5%; left: 6%; display: flex; align-items: center; gap: .8rem; z-index: 3;
  font-family: var(--font-display); }
.hud-stars { display: inline-flex; gap: 3px; }
.hud-stars i { width: 13px; height: 13px; background: var(--gold);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter: drop-shadow(0 0 4px rgba(255,210,63,.6)); }
.hud-coins { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: #ffe6a0; }
.coin-dot { width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe98a, #ffb43f 70%); box-shadow: 0 0 6px rgba(255,180,63,.5); }

/* ── Feature cards ────────────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feature-card {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 1.5rem 1.4rem; backdrop-filter: blur(6px);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-5px); border-color: rgba(170,178,255,.4);
  box-shadow: 0 16px 40px rgba(10,8,40,.5); }
.feature-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.35rem; margin-bottom: 1rem; color: #fff;
  background: linear-gradient(135deg, rgba(123,77,255,.35), rgba(255,95,162,.3));
  border: 1px solid rgba(170,178,255,.3);
}
.feature-card h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.feature-card p { color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: s; }
.step { position: relative; background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 1.5rem 1.3rem 1.4rem; }
.step .num {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #2a1640;
  background: var(--warm); margin-bottom: .9rem;
  box-shadow: 0 6px 16px rgba(255,138,31,.3);
}
.step h3 { font-size: 1rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ── Pop (interactive face-swap) ──────────────────────────────────────── */
.pop-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.pop-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(123,77,255,.18), transparent 62%);
  border-radius: 28px; }
.pop-bloom { position: absolute; width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,95,162,.4), transparent 65%); filter: blur(26px); }
.pop-orb {
  position: absolute; left: 6%; top: 26%; width: 46px; height: 18px; z-index: 1;
  background: radial-gradient(circle at 80% 50%, #ff6cf0 0%, #c64dd6 40%, transparent 72%);
  border-radius: 999px; filter: drop-shadow(0 0 8px #ff6cf0);
  animation: orbdart 3.6s ease-in-out infinite;
}
@keyframes orbdart { 0%,100% { transform: translateX(0) scaleX(1); opacity: 0; } 30% { opacity: 1; } 60% { transform: translateX(180%) scaleX(.7); opacity: 0; } }
.pop-mug { position: relative; z-index: 2; width: 78%; max-width: 360px; height: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); transition: transform .12s; }
.pop-mug.is-swapping { transform: scale(.92); }
.pop-mug.pop { animation: facepop .42s cubic-bezier(.3,1.4,.5,1); }
@keyframes facepop { 0% { transform: scale(.6) rotate(-8deg); } 60% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }

.state-list { display: flex; flex-direction: column; gap: .7rem; }
.state {
  display: flex; gap: .85rem; align-items: flex-start; text-align: left;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 15px; padding: 1rem 1.1rem; cursor: pointer; color: var(--ink);
  transition: border-color .18s, background .18s, transform .18s;
}
.state:hover { transform: translateX(3px); }
.state.is-active { border-color: rgba(255,95,162,.5); background: rgba(255,95,162,.08); }
.state-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: .25rem; flex: none; }
.s-happy { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.s-scared { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.s-ko { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.state-body b { font-family: var(--font-display); display: block; margin-bottom: .15rem; }
.state-body span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.pop-hint { margin-top: 1rem; color: var(--muted); font-size: .86rem; font-weight: 600; }

/* ── Board (elements/hazards) ─────────────────────────────────────────── */
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.board-card { display: flex; gap: 1rem; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 1.3rem 1.3rem; transition: transform .2s, border-color .2s; }
.board-card:hover { transform: translateY(-4px); border-color: rgba(170,178,255,.4); }
.board-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #2a2766, #3a2a78);
  border: 1px solid rgba(170,178,255,.28); }
.board-card h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.board-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ── Cast (enemies) ───────────────────────────────────────────────────── */
.cast-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.cast-card { background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 1.2rem 1rem 1.3rem; text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.cast-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ec) 55%, transparent);
  box-shadow: 0 18px 40px rgba(10,8,40,.5); }
.cast-art { position: relative; height: 92px; display: grid; place-items: center; margin-bottom: .7rem; }
.cast-glow { position: absolute; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, var(--ec), transparent 68%); opacity: .4; filter: blur(10px); }
.cast-art img { position: relative; max-height: 84px; width: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: transform .25s; animation: castFloat 4.5s ease-in-out infinite; }
.cast-card:nth-child(2) .cast-art img { animation-delay: -.9s; }
.cast-card:nth-child(3) .cast-art img { animation-delay: -1.8s; }
.cast-card:nth-child(4) .cast-art img { animation-delay: -2.7s; }
.cast-card:nth-child(5) .cast-art img { animation-delay: -3.6s; }
.cast-card:hover .cast-art img { transform: translateY(-3px) scale(1.05); }
@keyframes castFloat { 50% { transform: translateY(-6px); } }
.cast-top { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.cast-name { font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; color: var(--ec); }
.cast-role { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cast-card p { color: var(--muted); font-size: .85rem; line-height: 1.48; }

/* ── Worlds ───────────────────────────────────────────────────────────── */
.world-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.world-card { position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 16px; padding: 1.1rem 1rem 1.15rem; transition: transform .2s, border-color .2s; }
.world-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--w1) 60%, transparent); }
.world-num { font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  color: #2a1c00; background: linear-gradient(135deg, var(--gold), var(--orange));
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-bottom: .7rem; }
.world-chip { position: absolute; right: -16px; top: -16px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold), transparent 70%); opacity: .12; filter: blur(9px); }
.world-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.world-sub { color: var(--muted); font-size: .82rem; margin-top: .15rem; }

/* ── Achievements ─────────────────────────────────────────────────────── */
.achv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.achv-card { position: relative; display: flex; gap: .9rem; align-items: center;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 16px; padding: 1.1rem 1.2rem; transition: transform .2s, border-color .2s; }
.achv-card:hover { transform: translateY(-4px); border-color: rgba(255,210,63,.45); }
.achv-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.25rem; color: #2a1640; background: var(--warm);
  box-shadow: 0 6px 16px rgba(255,138,31,.3); }
.achv-card h3 { font-size: .98rem; margin-bottom: .15rem; }
.achv-card p { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.achv-coin { position: absolute; right: 1rem; top: 1rem; font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; color: var(--gold); }

/* ── Screenshots ──────────────────────────────────────────────────────── */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border-radius: 18px;
  border: 1px solid var(--panel-line); box-shadow: 0 22px 50px rgba(8,8,30,.55); }
.shot figcaption { margin-top: .8rem; text-align: center; color: var(--muted); font-size: .92rem; }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.cta-final { padding: clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem); }
.cta-card { position: relative; text-align: center; max-width: 720px; margin: 0 auto;
  padding: clamp(2.4rem,5vw,3.6rem) 1.6rem; border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(123,77,255,.2), transparent 60%), var(--panel);
  border: 1px solid var(--panel-line); overflow: hidden; }
.cta-card .pop-bloom { top: -10%; left: 50%; transform: translateX(-50%); width: 60%; height: 60%; }
.cta-mascot { position: relative; width: clamp(110px,22vw,160px); height: auto; margin-bottom: 1rem;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); animation: bob 4s ease-in-out infinite; }
.cta-card h2 { position: relative; font-size: clamp(1.7rem,4vw,2.6rem); margin-bottom: .8rem; }
.cta-card p { position: relative; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0 auto 1.5rem; }
.cta-card .hero-cta { justify-content: center; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.rc-footer { border-top: 1px solid var(--panel-line); padding: 2.4rem 0; margin-top: 2rem;
  background: rgba(10,12,40,.5); }
.rc-footer-top { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; }
.rc-footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.rc-footer-links a { color: var(--muted); font-size: .92rem; font-weight: 600; transition: color .15s; }
.rc-footer-links a:hover { color: var(--ink); }
.rc-footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between;
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--panel-line);
  color: var(--muted); font-size: .85rem; }

/* ── Reveal animation ─────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cast-grid { grid-template-columns: repeat(3, 1fr); }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .achv-grid { grid-template-columns: repeat(2, 1fr); }
  .world-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .rc-nav, .header-cta .btn-ghost:first-child { display: none; }
  .nav-toggle { display: inline-flex; }
  .rc-nav.is-open { display: flex; position: absolute; inset: 100% 0 auto; flex-direction: column;
    gap: .2rem; padding: 1rem 1.2rem; margin: 0;
    background: rgba(12,16,48,.97); border-bottom: 1px solid var(--panel-line); backdrop-filter: blur(12px); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-arena { order: -1; max-width: 480px; }
  .pop-feature { grid-template-columns: 1fr; }
  .pop-stage { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .feature-grid, .steps, .cast-grid, .board-grid, .achv-grid { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ricochet *, .ricochet *::before, .ricochet *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}