/* The studio home: one page, four worlds. The 09 (navy) dives through its own zero into Taso (peach), the peach runs
   into Tintaqua's paper, a drop of ink spreads into DarkHand (night), and the page comes back to the 09. Each world
   wears its game's own colours and has one toy. home.js drives the scroll scenes and the toys; with reduced motion (or
   without JS) the scenes are plain sections and nothing moves by itself. Loaded after style.css. */
:root {
  --cream: #F7F3EB;
  --taso-bg: #FFEFE2; --taso-ink: #3D2533; --taso-soft: #6A4D59; --taso-gold: #FF8A3D; --taso-hair: #EFCDB6;
  --paper: #F3EDE1; --tint-ink: #2B2A33; --tint-soft: #5E5A66; --tint-blue: #3F55B5;
  --night: #07080F; --gold: #C9A55A; --gold-hi: #F1D08A; --dh-text: #ECE9F5; --dh-soft: #A9ADC8;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --e2: cubic-bezier(0.33, 1, 0.68, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* The bar follows the world under it (html[data-world], set by home.js). */
  --bar-bg: rgba(25, 29, 62, .72); --bar-fg: var(--cream); --bar-dim: #B9B7C9; --bar-pill: #252A4D; --bar-on: #191D3E;
}
html[data-world="taso"] { --bar-bg: rgba(255, 239, 226, .82); --bar-fg: var(--taso-ink); --bar-dim: #8E6F7A; --bar-pill: #FBE3D3; --bar-on: var(--taso-bg); }
html[data-world="tint"] { --bar-bg: rgba(243, 237, 225, .84); --bar-fg: var(--tint-ink); --bar-dim: #7A7584; --bar-pill: #E6DFD1; --bar-on: var(--paper); }
html[data-world="dark"] { --bar-bg: rgba(7, 8, 15, .72); --bar-fg: var(--dh-text); --bar-dim: #6E7394; --bar-pill: #161A2E; --bar-on: var(--night); }
html.motion { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { -webkit-user-drag: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The bar ── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20; padding: 12px 0;
  background: var(--bar-bg); color: var(--bar-fg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color .5s var(--e2), color .5s var(--e2);
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bar a { color: var(--bar-fg); text-decoration: none; }
.bar .brand .mark { width: 36px; height: 36px; border-radius: 10px; }
.bar .brand .name { font-size: 17px; }
.bar .lang { background: var(--bar-pill); transition: background-color .5s var(--e2); }
.bar .lang button { color: var(--bar-dim); }
.bar .lang button.on { background: var(--bar-fg); color: var(--bar-on); }
.worlds { display: flex; gap: 4px; }
.worlds a { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; font: 700 14px/1 "Figtree", sans-serif; opacity: .72; transition: opacity .3s var(--e2); }
.worlds a:hover, .worlds a:focus-visible { opacity: 1; }
.worlds i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .4s var(--e2), transform .4s var(--e); }
html[data-world="studio"] .worlds a[data-to="studio"],
html[data-world="taso"] .worlds a[data-to="taso"],
html[data-world="tint"] .worlds a[data-to="tint"],
html[data-world="dark"] .worlds a[data-to="dark"] { opacity: 1; }
html[data-world="studio"] .worlds a[data-to="studio"] i,
html[data-world="taso"] .worlds a[data-to="taso"] i,
html[data-world="tint"] .worlds a[data-to="tint"] i,
html[data-world="dark"] .worlds a[data-to="dark"] i { background: currentColor; transform: scale(1.25); }
@media (max-width: 760px) {
  .bar .brand .name { display: none; }
  .worlds a { padding: 10px 7px; }
  .worlds a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .worlds i { width: 10px; height: 10px; }
}

/* ── 1. The studio and the dive through the zero ── */
.portal { position: relative; background: var(--navy); }
.portal .stage {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.5vh, 34px);
  padding: 80px 16px 40px; text-align: center;
}
html.motion .portal { height: 260vh; }
html.motion .portal .stage { position: sticky; top: 0; }
.logo-box { display: inline-block; line-height: 0; will-change: transform; position: relative; z-index: 2; }
.logo09 { width: min(400px, 66vw, 50vh); height: auto; }
.through { position: absolute; inset: 0; z-index: 1; display: none; background: var(--taso-bg); }
/* The taso back's sunburst, fading out at the end of the dive so the stage meets the Taso world's plain ground. */
.through::before {
  content: ""; position: absolute; inset: 0; opacity: var(--b, 1);
  background: repeating-conic-gradient(from 0deg at var(--cx, 50%) var(--cy, 50%), #FFE6D2 0 6deg, var(--taso-bg) 6deg 12deg);
}
html.motion .through { display: block; clip-path: circle(0); }
.through .spin {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: var(--tw, 60px); height: auto;
  translate: -50% -50%; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(61, 37, 51, .5);
  animation: toss 2.6s var(--e2) infinite;
}
@keyframes toss {
  0% { transform: rotateY(0deg) rotateZ(-8deg); }
  50% { transform: rotateY(180deg) rotateZ(8deg); }
  100% { transform: rotateY(360deg) rotateZ(-8deg); }
}
.intro { position: relative; z-index: 3; opacity: clamp(0, calc(1 - var(--p, 0) * 4.5), 1); translate: 0 calc(var(--p, 0) * -80px); }
.intro h1 { font: 800 clamp(32px, 5.4vw, 58px)/1.05 "Bricolage Grotesque", sans-serif; margin: 0 0 12px; letter-spacing: -.01em; }
.intro .lead { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: clamp(17px, 2vw, 20px); text-wrap: balance; }
.hint { margin: 22px 0 0; font: 700 14px/1 "Figtree", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); display: flex; gap: 10px; justify-content: center; align-items: center; }
.hint b { display: inline-block; animation: nudge 1.8s var(--e2) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
html:not(.motion) .hint { display: none; }

/* ── A world ── */
.world { position: relative; padding: clamp(96px, 14vh, 150px) 0 clamp(80px, 12vh, 130px); }
.world-in {
  width: min(1120px, 100% - 32px); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 76px); align-items: center;
}
@media (max-width: 860px) { .world-in { grid-template-columns: minmax(0, 1fr); } }
.copy { max-width: 520px; }
.copy p { margin: 0 0 12px; }
.eyebrow { font: 700 13px/1.2 "Figtree", sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .75; margin: 0 0 18px !important; }
.copy h2 { margin: 0 0 18px; }
.sub { font: 700 18px/1.3 "Figtree", sans-serif; opacity: .8; margin-top: -8px !important; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 24px; }
.chip { font-size: 14px; font-weight: 600; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 12px; opacity: .7; }
.world a { color: inherit; font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.toy { min-width: 0; }
.toy-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px auto 0; max-width: 520px; font-size: 15px; }
.toy-note .say { flex: 1 1 240px; opacity: .8; }
.toy-note button { font: 700 14px/1 "Figtree", sans-serif; border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* Scroll reveals (home.js adds .in once): rise 24px out of a 6px blur. */
html.motion .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); }
html.motion .reveal.in {
  opacity: 1; transform: none; filter: none;
  transition: transform .9s var(--e), opacity .6s var(--e2), filter .6s var(--e2); transition-delay: var(--d, 0s);
}

/* ── 2. Taso: the neighborhood ── */
.taso { background: var(--taso-bg); color: var(--taso-ink); }
.taso::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 60% 50% at 78% 45%, #EEDCF6 0, transparent 70%), radial-gradient(ellipse 50% 40% at 10% 90%, #FFE2C8 0, transparent 70%);
}
.taso .copy p { color: var(--taso-soft); }
.taso .copy .eyebrow { color: var(--taso-gold); opacity: 1; }
.taso a { text-decoration-color: var(--taso-gold); }
.taso a:hover { color: #D9661F; }
.taso-logo { width: min(420px, 100%); height: auto; display: block; margin-left: -8px; }
.arena {
  position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 32px; overflow: hidden;
  background: radial-gradient(circle at 50% 44%, #FBE3D3 0, #F4D2BA 75%), var(--noise);
  box-shadow: inset 0 0 0 2px var(--taso-hair), 0 24px 50px -26px rgba(61, 37, 51, .45);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.chalk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chalk circle { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: .9; stroke-dasharray: 2.4 1.5; stroke-linecap: round; }
.taso-piece {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 17%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; perspective: 600px; box-shadow: 0 5px 8px -3px rgba(61, 37, 51, .4); pointer-events: none;
}
.arena.live .taso-piece, .arena.live .striker { left: 0; top: 0; translate: none; }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.35, .5, 1); }
.flip img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip .face { transform: rotateY(180deg); }
.taso-piece.up .flip { transform: rotateY(180deg); }
.taso-piece.hop { animation: hop .55s var(--e); }
@keyframes hop { 0% { scale: 1; } 35% { scale: 1.32; } 100% { scale: 1; } }
.striker {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 15%; aspect-ratio: 1; translate: -50% -50%;
  padding: 0; border: 0; background: none; border-radius: 50%; cursor: grab; touch-action: none; z-index: 2;
}
.striker::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; }
.striker img { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(61, 37, 51, .4)); }
.striker:focus-visible { outline: 3px solid var(--taso-gold); outline-offset: 4px; }
.arena.ready .striker img { animation: beckon 1.6s var(--e2) infinite; }
.striker.carried img { transform: scale(1.12); filter: drop-shadow(0 14px 10px rgba(61, 37, 51, .3)); opacity: .9; }
.arena.resetting .taso-piece { transition: transform .65s var(--e); }
@keyframes beckon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.aim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.aim line { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; filter: drop-shadow(0 1px 1px rgba(61, 37, 51, .4)); }
.arena.aiming .aim { opacity: 1; }
.taso .count b { font-size: 18px; }
.taso .again { display: none; }
.taso .toy.some .again { display: inline-block; }
.taso .toy.all .count { color: #D9661F; font-weight: 700; }

/* ── 3. Tintaqua: paper ── */
.tint { background: var(--paper) var(--noise); color: var(--tint-ink); }
.wet-edge { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(30px, 5vw, 60px); pointer-events: none; }
.wet-edge path { fill: var(--taso-bg); }
.tint .copy p { color: var(--tint-soft); }
.tint .eyebrow { color: var(--tint-blue); opacity: 1; }
.tint a { text-decoration-color: #D9406E; }
.tint a:hover { color: var(--tint-blue); }
.tint h2 { display: flex; align-items: center; gap: 16px; font: 800 clamp(40px, 5.6vw, 64px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
.app-icon { width: clamp(56px, 7vw, 76px); height: auto; border-radius: 18px; box-shadow: 0 10px 22px -12px rgba(43, 42, 51, .5); }
.paper { position: relative; width: min(100%, 560px); aspect-ratio: 4 / 3; margin: 0 auto; }
.paper::before {
  content: ""; position: absolute; inset: 3% -2% -3% 2%; background: #E7DFCF; border-radius: 4px; transform: rotate(2.4deg);
  box-shadow: 0 18px 40px -24px rgba(43, 42, 51, .45);
}
.paper canvas {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 3px; cursor: crosshair; touch-action: pan-y;
  background: #FCF9F2 var(--noise); box-shadow: 0 1px 2px rgba(43, 42, 51, .12), 0 26px 50px -30px rgba(43, 42, 51, .5);
  transition: opacity .5s var(--e2);
}
@media (max-width: 560px) { .paper { aspect-ratio: 1; } }
.palette { display: flex; gap: 10px; }
.palette button { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); transition: transform .3s var(--e); }
.palette button.on { transform: scale(1.18); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }
.palette button:focus-visible { outline: 3px solid var(--tint-ink); outline-offset: 3px; }
/* The store pages on a line: a twisted rope, a plastic pin in a palette colour on each page (--pc), each page hanging
   a little crooked (--tilt). home.js moves the line and swings the pages; without motion the rail scrolls sideways. */
.line { position: relative; z-index: 1; margin-top: clamp(64px, 10vh, 110px); }
.line-head { width: min(1120px, 100% - 32px); margin: 0 auto; }
.rail { padding: 4px 0 44px; }
html.motion .rail { overflow: hidden; }
html:not(.motion) .rail { overflow-x: auto; scrollbar-width: thin; }
.sheets {
  --w: clamp(150px, 19vw, 250px); --g: clamp(22px, 3vw, 44px);
  position: relative; display: flex; gap: var(--g); width: max-content; margin: 0; padding: 0 16px; list-style: none;
}
.sheets::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(115deg, #BCA07C 0 3px, #8F7556 3px 5px); box-shadow: 0 2px 2px rgba(43, 42, 51, .12);
}
html.motion .sheets { will-change: transform; }
html.motion .sheets::before { left: -100vw; right: -100vw; }
.sheet { position: relative; flex: none; width: var(--w); margin-top: 14px; rotate: var(--tilt, 0deg); transform-origin: 50% -3px; }
.sheet img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(43, 42, 51, .14), 0 18px 34px -20px rgba(43, 42, 51, .55); }
.pin {
  /* Short enough to clear the page's headline, even on a phone. */
  position: absolute; left: 50%; top: -10px; width: 11px; height: 18px; margin-left: -5.5px; z-index: 1; border-radius: 3px 3px 4px 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent 45%, rgba(0, 0, 0, .18)), var(--pc);
  box-shadow: 0 2px 3px rgba(43, 42, 51, .3);
}
.pin::after { content: ""; position: absolute; left: -2px; right: -2px; top: 5px; height: 4px; border-radius: 2px; background: #A3A8B3; }

/* ── 4. The ink ── */
.ink { position: relative; background: linear-gradient(var(--paper), var(--night)); height: 22vh; }
.ink .stage { display: none; }
html.motion .ink { height: 210vh; background: var(--paper) var(--noise); }
html.motion .ink .stage { display: grid; place-items: center; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.blot { position: absolute; inset: 0; width: 100%; height: 100%; }
.whisper {
  position: relative; margin: 0; padding: 0 16px; text-align: center; color: var(--gold);
  font: 700 clamp(24px, 4.4vw, 52px)/1.2 "Cinzel", serif; letter-spacing: .1em;
  opacity: var(--w, 0); translate: 0 calc((1 - var(--w, 0)) * 16px); text-shadow: 0 0 30px rgba(201, 165, 90, .35);
}

/* ── 5. DarkHand: the shadows ── */
.dark { background: var(--night); color: var(--dh-text); overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 70% 50%, rgba(69, 198, 255, .08), transparent 70%), radial-gradient(ellipse 40% 40% at 20% 30%, rgba(255, 79, 123, .07), transparent 70%); pointer-events: none; }
.dark .copy p { color: var(--dh-soft); }
.dark .eyebrow { color: var(--gold); opacity: 1; }
.dark a { text-decoration-color: var(--gold); }
.dark a:hover { color: var(--gold-hi); }
.dh-title {
  font: 700 clamp(40px, 6vw, 74px)/1 "Cinzel", serif; letter-spacing: .1em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #8E7238); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark .sub { color: var(--gold-hi); }
.embers { position: absolute; inset: 0; pointer-events: none; }
.embers i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-hi);
  box-shadow: 0 0 8px 2px rgba(241, 208, 138, .55); opacity: 0; animation: ember 9s linear infinite;
}
.embers i:nth-child(1) { left: 8%; animation-delay: 0s; } .embers i:nth-child(2) { left: 22%; animation-delay: 3.4s; animation-duration: 11s; }
.embers i:nth-child(3) { left: 37%; animation-delay: 6.1s; } .embers i:nth-child(4) { left: 51%; animation-delay: 1.7s; animation-duration: 12s; }
.embers i:nth-child(5) { left: 64%; animation-delay: 4.8s; } .embers i:nth-child(6) { left: 77%; animation-delay: 7.3s; animation-duration: 10s; }
.embers i:nth-child(7) { left: 88%; animation-delay: 2.6s; } .embers i:nth-child(8) { left: 95%; animation-delay: 5.5s; animation-duration: 13s; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(-30px, -105vh); opacity: 0; } }
.duel { display: grid; justify-items: center; gap: 14px; }
.shadow-card { width: clamp(104px, 20vw, 140px); aspect-ratio: 320 / 425; perspective: 900px; }
.shadow-card .flip { transition-duration: .75s; }
.shadow-card.open .flip { transform: rotateY(180deg); }
.shadow-card .back, .shadow-card .face {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; object-fit: cover;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.shadow-card .back {
  display: grid; place-items: center; border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #1C2140, var(--night) 72%);
  animation: lure 3.2s var(--e2) infinite;
}
.shadow-card .back b { font: 700 46px/1 "Cinzel", serif; color: var(--gold); }
@keyframes lure { 0%, 100% { box-shadow: 0 0 18px -8px rgba(201, 165, 90, .4); } 50% { box-shadow: 0 0 34px -4px rgba(201, 165, 90, .55); } }
.verdict { min-height: 3.2em; margin: 0; text-align: center; color: var(--res, var(--gold)); }
.verdict b { display: block; font: 700 clamp(20px, 2.4vw, 26px)/1.2 "Cinzel", serif; letter-spacing: .08em; }
.verdict small { font-size: 14px; color: var(--dh-soft); }
.hand { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 20px); perspective: 1000px; padding-top: 8px; }
.dcard {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  position: relative; width: clamp(92px, 19vw, 138px); aspect-ratio: 320 / 425; padding: 0; border: 0; background: none; color: inherit;
  border-radius: 12px; cursor: pointer; transform-style: preserve-3d;
  transform: translateY(calc(var(--drop) - var(--lift))) rotate(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--e), opacity .4s var(--e2), filter .4s var(--e2), box-shadow .4s var(--e2);
  box-shadow: 0 16px 30px -18px #000, 0 0 0 1px rgba(201, 165, 90, .35);
}
.dcard:nth-child(1) { --tilt: -7deg; --drop: 12px; } .dcard:nth-child(2) { --tilt: 0deg; --drop: 0px; } .dcard:nth-child(3) { --tilt: 7deg; --drop: 12px; }
.dcard img { width: 100%; height: 100%; display: block; border-radius: 12px; object-fit: cover; }
.dcard > span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 8px; border-radius: 0 0 12px 12px; text-align: center;
  font: 700 13px/1 "Cinzel", serif; letter-spacing: .12em; color: var(--el); background: linear-gradient(transparent, rgba(7, 8, 15, .92));
}
.dcard:hover, .dcard:focus-visible { --lift: 14px; box-shadow: 0 22px 40px -18px #000, 0 0 0 1.5px var(--el), 0 0 28px -6px var(--el); outline: none; }
.hand.played .dcard { pointer-events: none; }
.hand.played .dcard:not(.picked) { opacity: .3; filter: grayscale(.7); }
.dcard.picked { --lift: 30px; box-shadow: 0 26px 46px -18px #000, 0 0 0 2px var(--el), 0 0 40px -4px var(--el); }
.dark .score b { font: 700 20px/1 "Cinzel", serif; color: var(--gold-hi); }

/* ── 6. Back to the studio ── */
.outro { background: linear-gradient(var(--night), var(--navy) 45%); text-align: center; padding: clamp(110px, 16vh, 170px) 16px clamp(80px, 12vh, 120px); }
.outro .small { width: min(170px, 40vw); height: auto; display: block; margin: 0 auto 30px; }
.outro h2 { font: 800 clamp(30px, 4.6vw, 52px)/1.1 "Bricolage Grotesque", sans-serif; margin: 0 0 18px; text-wrap: balance; }
.outro p { color: var(--muted); margin: 0 0 6px; }
.mail { display: inline-block; margin-top: 8px; font: 800 clamp(22px, 3.4vw, 34px)/1.3 "Bricolage Grotesque", sans-serif; color: var(--cream); text-decoration-color: var(--coral); text-underline-offset: 6px; }
.mail:hover { color: var(--coral); }
footer { background: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .through .spin, .hint b, .embers i, .shadow-card .back, .arena.ready .striker img { animation: none; }
  .embers { display: none; }
}