/* ════════════════════════════════════════════════════════════════
   PAGES · GAME
   ────────────────────────────────────────────────────────────────
   The reusable game-page template: the themed section index, the
   scroll-progress hairline, the hero stage, the sticky buy bar, the
   trailer theatre, the gallery bento, the FAQ, the title-menu CTA and
   the newsletter band. Everything reads --t-* tokens, so another
   game's theme file re-skins it. Game-only modules live in
   css/pages/<slug>.css.

   Unlayered on purpose: it overrides core.css and ambience.css, and
   their !important state rules (hidden, pausing, reduced motion)
   still win.

   JS hooks (js/pages/eldara.js and eldara/*.js)
     html.has-buybar            the buy bar is up (body padding < 768)
     .buybar.is-shown           slide-in state
     .theatre.is-playing        a trailer is running (hides the glyph)
     .theatre.is-ambi           ambilight canvas has colour
     html.vt-in                 arrived through a view-transition morph
   ════════════════════════════════════════════════════════════════ */


/* ── themed section index: Cinzel numeral, glyph rule, label ──── */
[data-theme] .sec-head__index{ display:flex; align-items:center; gap:12px; }
.sec-head__num{
  font:500 1.0625rem/1 var(--t-font-display);
  letter-spacing:.08em;
  color:var(--t-accent-hi);
  text-shadow:0 0 14px rgba(201,168,76,.35);
}
.sec-head__glyph{
  display:inline-flex; align-items:center; gap:7px;
  font-size:7px; line-height:1;
  color:var(--t-glyph);
  text-shadow:0 0 7px rgba(232,181,96,.5);
}
.sec-head__glyph::before,.sec-head__glyph::after{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--t-glyph));
}
.sec-head__glyph::after{ scale:-1 1; }
[data-theme] .sec-head__title{ text-shadow:0 2px 24px rgb(0 0 0 / .5); }
[data-theme] .sec-head{ border-top-color:transparent; border-image:linear-gradient(90deg,var(--t-line-2),var(--t-line) 40%,transparent) 1; }


/* ── scroll progress: a gold hairline under the header ─────────── */
.scroll-progress{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:var(--z-header);
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--t-accent-lo),var(--t-accent-hi) 70%,#fff3c8);
  box-shadow:0 0 8px rgba(240,204,110,.45);
  transform-origin:0 50%;
  transform:scaleX(var(--progress,0));
  transition:translate var(--d-3) var(--ease-out),opacity var(--d-3) ease;
}
@supports (animation-timeline:scroll()){
  .scroll-progress{ animation:scroll-progress linear both; animation-timeline:scroll(root block); }
}
@keyframes scroll-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.site-header.is-hidden + .scroll-progress{ translate:0 calc(-1 * var(--header-h)); }
.site-header.is-open + .scroll-progress{ opacity:0; }


/* ════════════════════════════════════════════════════════════════
   HERO · the game's key art as a living stage
   ════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  height:max(100svh,680px);
  overflow:clip;
  background:var(--t-plate);
}
.hero__stage{ position:absolute; inset:0; container-type:size; }
.hero__cam{ position:absolute; inset:0; }

/* Camera: settles from 1.12 to 1.06, then drifts for ever (on .plate,
   so the corona, rays and glints in .plate__field travel with it). */
@media (prefers-reduced-motion:no-preference){
  .hero .plate{ animation:hero-settle 1.4s var(--ease-cine) both, hero-drift 30s var(--ease-io) 1.4s infinite alternate; }
}
@keyframes hero-settle{ from{ transform:scale(1.12); } to{ transform:scale(1.06) translate(-1%,-.5%); } }
@keyframes hero-drift{ from{ transform:scale(1.06) translate(-1%,-.5%); } to{ transform:scale(1.1) translate(1%,.5%); } }

/* The figure stands under the eclipse with its halo inside the corona.
   The eclipse is plate pixel (833,125); this repeats the plate's cover
   maths in container units so the two stay concentric at any size. */
.hero__figure{
  --py:.3;
  --fig-h:min(96cqh,1100px);
  --fh:max(100cqh,100cqw * .5628);
  --ecl:calc((100cqh - var(--fh)) * var(--py) + var(--fh) * .1328);
  --ecl-y:calc(50cqh + (var(--ecl) - 50cqh) * 1.06);
  position:absolute;
  top:calc(var(--ecl-y) - var(--fig-h) * .114);
  left:calc(50% - var(--fig-h) * .3267);
  width:calc(var(--fig-h) * .6667);
  height:var(--fig-h);
  pointer-events:none;
}
@media (width <= 600px){
  .hero__figure{ --py:.18; --fig-h:165cqw; opacity:.9; }
}
@media (prefers-reduced-motion:reduce){ .hero__figure{ --ecl-y:var(--ecl); } }   /* no camera: the plate rests at scale 1 */
/* Ultrawide: the plate is width-limited, so lift the crop to keep the whole eclipse under the header. */
@media (min-aspect-ratio:2/1){
  .hero .plate{ --plate-y:.06 !important; }
  .hero__figure{ --py:.06; }
}
.hero__depth{ width:100%; height:100%; }
.hero__azhurak{
  width:100%; height:100%;
  object-fit:contain;
  transform-origin:50% 96%;
  filter:drop-shadow(0 0 40px rgb(0 0 0 / .55));
}
@media (prefers-reduced-motion:no-preference){
  .hero__azhurak{ animation:fig-breathe 7s ease-in-out infinite; }
}
@keyframes fig-breathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-4px) scale(1.006); } }

.hero__scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgb(7 8 15 / .82) 0%,rgb(7 8 15 / .5) 9%,transparent 18%),
    radial-gradient(55% 32% at 50% 58%,rgb(7 8 15 / .5),transparent 70%),
    linear-gradient(0deg,var(--t-bg) 0%,rgb(7 8 15 / .6) 28%,transparent 55%),
    radial-gradient(120% 100% at 50% 40%,transparent 52%,rgb(0 0 0 / .6) 100%);
}
@media (width <= 600px){ .hero .ember:nth-child(n+15){ display:none; } }

/* ── content: kicker, wordmark (with its floor reflection), tagline,
   actions, review chip ─────────────────────────────────────────── */
.hero__content{
  position:absolute; inset:auto 0 0; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--gutter) clamp(84px,12vh,128px);
  text-align:center;
}
.hero__content::before{                 /* a pool of night behind the type */
  content:""; position:absolute; z-index:-1;
  left:50%; bottom:0; width:min(1100px,130%); height:115%;
  translate:-50% 0;
  background:radial-gradient(closest-side,rgb(7 8 15 / .62),rgb(7 8 15 / .34) 58%,transparent);
  pointer-events:none;
}
.hero__kicker{ color:var(--t-accent-hi); text-shadow:0 1px 10px rgb(0 0 0 / .8); }
@media (width < 480px){ .hero__kicker{ font-size:.6875rem; letter-spacing:.14em; } }

.wordmark--hero{
  margin-top:clamp(6px,1.2vh,14px);
  line-height:1;
  filter:drop-shadow(0 6px 22px rgb(0 0 0 / .6));
}
.wordmark--hero > span{ position:relative; }   /* letters rise by `top`: a transformed child would leave the gradient clip */
.wordmark--hero::before{                       /* the floor reflection */
  content:attr(data-wordmark);
  content:attr(data-wordmark) / "";
  position:absolute; left:0; right:0; top:.71em;
  padding-left:.066em;
  background:var(--t-wordmark);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transform:scaleY(-1);
  -webkit-mask:linear-gradient(transparent 30%,#000); mask:linear-gradient(transparent 30%,#000);
  opacity:.12;
  pointer-events:none;
}
@media (width < 768px){ .wordmark--hero::before{ content:none; } }

.hero__sub{ margin-top:.55em; text-shadow:0 1px 10px rgb(0 0 0 / .9); }
.hero__tagline{
  margin-top:clamp(14px,2vh,22px);
  font-size:var(--fs-lead); line-height:1.45;
  color:var(--t-ink);
  text-shadow:0 1px 12px rgb(0 0 0 / .9);
}
.hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px 26px;
  margin-top:clamp(18px,2.8vh,30px);
}
/* The Steam button sits in the game's hexagonal frame (rb-button-frame.svg,
   9-sliced so the points stay sharp). The frame rides with the magnetic lean. */
.hero__buy{ position:relative; display:inline-flex; }
.hero__buy::before{
  content:""; position:absolute; inset:-6px -17px;
  border:solid transparent; border-width:0 28px;
  border-image:url(/assets/eldara/campaign/ornaments/button-frame.svg) 0 28 fill / 0 28px stretch;
  filter:drop-shadow(0 0 8px rgba(240,204,110,.28));
  pointer-events:none;
}
.hero__buy .btn{ box-shadow:inset 0 1px 1px rgba(255,240,197,.5),0 8px 30px rgb(0 0 0 / .35),0 0 28px rgba(240,204,110,.18); }
.hero__watch{
  background:rgb(7 8 15 / .38);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__watch .icon{ font-size:.85em; color:var(--t-accent-hi); }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 18px;
  margin-top:clamp(16px,2.4vh,26px);
  font-size:var(--fs-sm);
  color:var(--t-ink-2);
}
.hero__rev{
  display:inline-flex; align-items:center; gap:.4em;
  padding:6px 14px;
  border:1px solid var(--t-line-2); border-radius:var(--r-pill);
  background:rgb(7 8 15 / .5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--t-ink);
}
.hero__star{ color:var(--t-accent-hi); }
.hero__plat{ text-shadow:0 1px 8px rgb(0 0 0 / .9); letter-spacing:.02em; }
.hero .scroll-cue{ z-index:3; text-shadow:0 1px 6px #000; }

@media (width < 640px){
  .hero__actions{ flex-direction:column; align-self:stretch; gap:14px; }
  .hero__actions > *{ width:100%; }
  .hero__buy .btn{ width:100%; }
  .hero__buy::before{ inset:-6px -10px; }
  .hero__meta{ flex-direction:column; gap:8px; }
  .hero__rev{ flex-wrap:wrap; justify-content:center; }
}

/* ── arrival: plate first (LCP), then corona, figure, letters, the
   sweep, the rest, and the embers already in flight ────────────── */
@media (prefers-reduced-motion:no-preference){
  .hero .corona{ animation:corona-flare 1.6s var(--ease-out) .3s backwards, corona 7s var(--ease-io) 1.9s infinite alternate; }
  .hero .rays{ animation:fade-in 2.4s var(--ease-soft) .3s backwards, rays-sway 32s var(--ease-io) infinite alternate; }
  .hero__depth{ animation:hero-rise 1.6s var(--ease-out) .4s backwards; }
  .hero .embers,.hero [data-glints]{ animation:fade-in 1.6s ease 1.8s backwards; }
  .hero__kicker{ animation:hero-up .9s var(--ease-out) .35s backwards; }
  html:not(.vt-in) .wordmark--hero > span{ animation:wm-letter .8s var(--ease-out) calc(.5s + var(--i,0) * 50ms) backwards; }
  html:not(.vt-in) .wordmark--hero::before{ animation:fade-in 1.2s ease 1.2s backwards; }
  .wordmark--hero::after{ animation:wm-sweep 2s ease-in-out 1.3s, logo-sweep 19s ease-in-out 7s infinite; }
  :is(.hero__sub,.hero__tagline,.hero__actions,.hero__meta){ animation:hero-up .9s var(--ease-out) calc(1.5s + var(--i,0) * 80ms) backwards; }
  .hero .scroll-cue{ animation:fade-in 1s ease 2.3s backwards; }
}
@keyframes corona-flare{ 0%{ opacity:.15; transform:scale(.94); } 26%{ opacity:.9; transform:scale(1.07); } 100%{ opacity:.35; transform:scale(.98); } }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(24px); } }
@keyframes hero-up{ from{ opacity:0; transform:translateY(14px); } }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes wm-letter{ from{ top:1.08em; } }
@keyframes wm-sweep{
  0%  { opacity:0; clip-path:polygon(-35% 0,-20% 0,-38% 100%,-53% 100%); }
  16% { opacity:.5; }
  86% { opacity:.38; clip-path:polygon(135% 0,150% 0,132% 100%,117% 100%); }
  100%{ opacity:0; clip-path:polygon(135% 0,150% 0,132% 100%,117% 100%); }
}


/* ════════════════════════════════════════════════════════════════
   STICKY BUY BAR
   ════════════════════════════════════════════════════════════════ */
.buybar{
  position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:var(--z-sticky);
  display:flex; align-items:center; gap:clamp(12px,1.6vw,22px);
  width:min(880px,calc(100% - 2 * var(--gutter)));
  height:64px;
  padding:0 10px 0 24px;
  border:1px solid var(--t-line-2); border-radius:14px;
  background:color-mix(in srgb,var(--t-surface) 82%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 22px 60px -18px rgb(0 0 0 / .85),inset 0 1px 0 rgba(240,204,110,.1);
  translate:-50% 130%;
  opacity:0;
  transition:translate .4s var(--ease-out),opacity .28s var(--ease-soft);
}
.buybar.is-shown{ translate:-50% 0; opacity:1; }
.buybar__wm{
  font:600 19px/1 var(--s-font-brand);
  letter-spacing:.16em; padding-left:.16em;
  background:var(--t-wordmark);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--t-accent);
}
.buybar__rev{ padding-left:clamp(12px,1.6vw,22px); border-left:1px solid var(--t-line); font-size:var(--fs-sm); color:var(--t-ink-2); white-space:nowrap; }
.buybar__price{ margin-left:auto; font-weight:700; color:var(--t-ink); white-space:nowrap; }
.buybar .btn{ flex:none; }
html.has-buybar{ scroll-padding-bottom:80px; }
@media (width < 768px){
  .buybar{
    left:0; right:0; bottom:0;
    width:auto; height:calc(64px + env(safe-area-inset-bottom));
    padding:0 var(--gutter) env(safe-area-inset-bottom);
    border-width:1px 0 0; border-radius:0;
    translate:0 105%;
  }
  .buybar.is-shown{ translate:0 0; }
  .buybar__wm,.buybar__rev{ display:none; }
  .buybar__price{ margin-left:0; }
  .buybar .btn{ margin-left:auto; }
  html.has-buybar body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .buybar{ transition:none; } }


/* ════════════════════════════════════════════════════════════════
   TRAILER THEATRE · in-page player and playlist
   ════════════════════════════════════════════════════════════════ */
.theatre{ display:grid; gap:clamp(28px,3vw,40px) var(--grid-gap); }
@media (width >= 1024px){
  .theatre{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
  .theatre__stage{ grid-column:1 / span 8; }
  .theatre__side{ grid-column:9 / -1; }
}
.theatre__stage{ position:relative; isolation:isolate; padding:10px; }
.theatre__ambi{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  scale:1.4;
  filter:blur(60px);
  opacity:0;
  transition:opacity 1.2s var(--ease-soft);
  pointer-events:none;
}
.theatre.is-ambi .theatre__ambi{ opacity:.55; }
.theatre__frame{ border-radius:6px; }
.theatre__screen{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:4px;
  background:#000;
  box-shadow:0 0 0 1px var(--t-line-2),var(--e3);
}
.theatre__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.theatre__video{ position:relative; display:block; width:100%; height:100%; object-fit:cover; }   /* transparent until it has frames: the lazy poster shows through */
.theatre.is-live .theatre__video{ background:#000; }
.theatre__play{
  position:absolute; left:50%; top:50%;
  display:grid; place-items:center;
  width:clamp(72px,8vw,104px); aspect-ratio:1;
  translate:-50% -50%;
  border:1px solid rgba(240,204,110,.7); border-radius:50%;
  background:radial-gradient(circle,rgb(7 8 15 / .35),rgb(7 8 15 / .6));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--t-accent-hi);
  font-size:clamp(24px,2.6vw,34px);
  box-shadow:0 0 40px rgba(201,168,76,.25),inset 0 0 18px rgba(240,204,110,.15);
  transition:opacity var(--d-3) var(--ease-soft),scale var(--d-4) var(--ease-out),background-color var(--d-3);
}
.theatre__play .icon{ translate:8% 0; }
.theatre__ring{ position:absolute; inset:-1px; border:1px solid var(--t-accent-hi); border-radius:50%; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){
  .theatre__ring{ animation:play-pulse 2.6s var(--ease-out) infinite; }
}
@keyframes play-pulse{ 0%{ opacity:.75; transform:scale(1); } 100%{ opacity:0; transform:scale(1.65); } }
@media (hover:hover){ .theatre__play:hover{ scale:1.06; } }
.theatre.is-playing .theatre__play{ opacity:0; scale:.9; pointer-events:none; }

.theatre__label{
  margin-bottom:14px;
  font:var(--t-label-weight) var(--fs-label)/1.3 var(--t-font-label);
  letter-spacing:var(--t-label-track); text-transform:uppercase;
  color:var(--t-label);
}
.theatre__list{ display:grid; gap:12px; }
.theatre__item{
  display:grid; grid-template-columns:minmax(0,132px) minmax(0,1fr); align-items:center; gap:16px;
  width:100%; min-height:96px; padding:10px;
  border:1px solid var(--t-line); border-radius:var(--t-radius);
  background:linear-gradient(145deg,rgb(20 21 34 / .72),rgb(12 14 24 / .72) 70%);
  text-align:left;
  transition:border-color var(--d-4) var(--ease-soft),box-shadow var(--d-4) var(--ease-soft),background-color var(--d-4);
}
@media (hover:hover){ .theatre__item:hover{ border-color:var(--t-line-2); transition-duration:var(--d-3); } }
.theatre__item[aria-current="true"]{ border-color:var(--t-line-3); box-shadow:0 0 0 1px rgba(201,168,76,.32),0 0 22px rgba(201,168,76,.16); }
.theatre__thumb{ position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border-radius:4px; background:#000; }
.theatre__thumb img{ width:100%; height:100%; object-fit:cover; transition:scale var(--d-5) var(--ease-out); }
@media (hover:hover){ .theatre__item:hover .theatre__thumb img{ scale:1.05; } }
.theatre__len{
  position:absolute; right:5px; bottom:5px;
  padding:3px 5px; border-radius:3px;
  background:rgb(0 0 0 / .7);
  font:500 10px/1 var(--s-font-mono); letter-spacing:.06em;
  color:var(--t-ink);
}
.theatre__meta{ display:grid; gap:4px; min-width:0; }
.theatre__title{ font:500 1.0625rem/1.25 var(--t-font-display); letter-spacing:.03em; color:var(--t-ink); }
.theatre__desc{ font-size:var(--fs-sm); line-height:1.4; color:var(--t-ink-2); }
.theatre__state{
  display:none; align-items:flex-end; gap:2px;
  margin-top:2px;
  font:700 var(--fs-micro)/1 var(--t-font-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-accent-hi);
}
.theatre__state i{ width:2px; height:9px; background:currentColor; transform-origin:50% 100%; }
.theatre__state i:last-of-type{ margin-right:6px; }
.theatre.is-playing .theatre__item[aria-current="true"] .theatre__state{ display:inline-flex; }
@media (prefers-reduced-motion:no-preference){
  .theatre__state i{ animation:eq .9s ease-in-out infinite alternate; }
  .theatre__state i:nth-of-type(2){ animation-delay:-.3s; }
  .theatre__state i:nth-of-type(3){ animation-delay:-.6s; }
}
@keyframes eq{ from{ transform:scaleY(.3); } to{ transform:scaleY(1); } }
@media (width < 1024px){
  .theatre__list{
    display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 8px;
    scrollbar-width:none;
  }
  .theatre__list > li{ flex:0 0 min(84%,380px); scroll-snap-align:start; }
}


/* ════════════════════════════════════════════════════════════════
   GALLERY · bento of real screenshots
   ════════════════════════════════════════════════════════════════ */
.bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--grid-gap); }
.bento__item:first-child{ grid-column:1 / -1; }
.bento a{
  position:relative; isolation:isolate;
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--t-line);
  border-radius:var(--t-radius);
  background:var(--t-surface);
  box-shadow:var(--e2);
  transition:border-color var(--d-4) var(--ease-soft),box-shadow var(--d-4) var(--ease-soft);
}
.bento img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:scale var(--d-5) var(--ease-out),filter var(--d-5) var(--ease-out);
}
.bento a::after{                         /* gold hairline frame + bottom scrim */
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(0deg,rgb(7 8 15 / .82),transparent 42%);
  box-shadow:inset 0 0 0 1px rgba(240,204,110,0);
  opacity:.75;
  transition:opacity var(--d-4) var(--ease-soft),box-shadow var(--d-4) var(--ease-soft);
}
.bento__cap{
  position:absolute; left:16px; bottom:14px; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  font:var(--t-label-weight) var(--fs-label)/1.3 var(--t-font-label);
  letter-spacing:var(--t-label-track); text-transform:uppercase;
  color:var(--t-ink);
  transition:translate var(--d-4) var(--ease-out),color var(--d-4);
}
.bento__cap::before{ content:""; width:6px; height:6px; rotate:45deg; background:var(--t-marker); box-shadow:0 0 10px rgba(217,174,66,.4); }
/* Cursor light on the tile (pointer.js writes --mx / --my; [data-tilt] leans it ≤4°). */
@media (hover:hover) and (pointer:fine){
  .bento a::before{
    content:""; position:absolute; inset:0; z-index:2;
    border-radius:inherit;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,226,160,.16),transparent 60%);
    mix-blend-mode:screen;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--d-4) var(--ease-soft);
  }
  .bento a:hover::before{ opacity:1; transition-duration:var(--d-3); }
}
/* Desktop bento: [combat 8 | menu 4] / [home | houses | rebirth] / [azhurak 6 | bosses 6].
   The menu tile takes the row's height and keeps the in-game menu in frame. */
@media (width >= 1024px){
  .bento{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .bento__item{ grid-column:span 4; }
  .bento__item:first-child,.bento__item--combat{ grid-column:span 8; }
  .bento__item--menu{ grid-column:span 4; }
  .bento__item--half{ grid-column:span 6; }
  .bento .bento__item--menu a{ aspect-ratio:auto; height:100%; }
  .bento .bento__item--menu img{ object-position:16% 50%; }
}
@media (hover:hover) and (pointer:fine){
  .bento__cap{ translate:0 6px; }
  .bento a:hover,.bento a:focus-visible{ border-color:var(--t-line-3); box-shadow:var(--e2),0 0 30px rgba(201,168,76,.14); }
  .bento a:hover img,.bento a:focus-visible img{ scale:1.04; }
  .bento a:hover::after,.bento a:focus-visible::after{ opacity:1; box-shadow:inset 0 0 0 1px rgba(240,204,110,.45); }
  .bento a:hover .bento__cap,.bento a:focus-visible .bento__cap{ translate:0 0; color:var(--t-accent-hi); }
}


/* ════════════════════════════════════════════════════════════════
   FAQ · exclusive accordion
   ════════════════════════════════════════════════════════════════ */
.faq__list{ max-width:920px; border-top:1px solid var(--t-line); }
.qa{ border-bottom:1px solid var(--t-line); }
.qa__q{
  display:flex; align-items:center; gap:20px;
  min-height:68px; padding:16px 4px;
  list-style:none;
  cursor:pointer;
  font:500 var(--fs-h3)/1.3 var(--t-font-display);
  letter-spacing:.02em;
  color:var(--t-ink);
  transition:color var(--d-4) var(--ease-soft);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q::after{
  content:""; flex:none;
  width:10px; height:10px; margin-left:auto; margin-right:6px;
  border:1px solid var(--t-accent);
  rotate:45deg;
  transition:rotate var(--d-5) var(--ease-out),background-color var(--d-4) var(--ease-soft),box-shadow var(--d-4);
}
.qa[open] > .qa__q{ color:var(--t-accent-hi); }
.qa[open] > .qa__q::after{ rotate:225deg; background:var(--t-marker); box-shadow:0 0 12px rgba(217,174,66,.45); }
@media (hover:hover){ .qa__q:hover{ color:var(--t-accent-hi); transition-duration:var(--d-3); } }
.qa__a{ max-width:68ch; padding:0 4px 26px; color:var(--t-ink-2); }
.qa__a a{ color:var(--t-ink); }
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    .faq{ interpolate-size:allow-keywords; }
    .qa::details-content{
      block-size:0; overflow-y:clip;
      transition:block-size var(--d-4) var(--ease-out),content-visibility var(--d-4) allow-discrete;
    }
    .qa[open]::details-content{ block-size:auto; }
  }
}


/* ════════════════════════════════════════════════════════════════
   TITLE MENU · the in-game title screen as the closing call to buy
   (title-menu.css, ported: plate, haze, moonlight, glints, embers)
   ════════════════════════════════════════════════════════════════ */
.section.titlemenu{
  position:relative;
  display:flex; align-items:stretch;
  min-height:max(100svh,660px);
  padding:0;
  background:radial-gradient(ellipse at 62% 41%,#0a1423 0%,#080c16 42%,#05070c 85%);
}
.titlemenu .plate{ background:var(--t-plate); }
.titlemenu::after{                       /* melt into the page above and below */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,var(--t-bg),transparent 12%,transparent 86%,var(--t-bg));
}
.titlemenu__main{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%;
  padding:clamp(64px,12.5vh,156px) var(--gutter) clamp(72px,11vh,130px) clamp(24px,13.2vw,300px);
}
.titlemenu__brand{
  display:inline-flex; flex-direction:column; align-items:center;
  width:max-content; max-width:100%;
  margin-bottom:clamp(18px,3vh,34px);
}
.titlemenu__brand .wordmark__sub{ margin-top:13px; font-size:clamp(10px,1.05vw,17px); }
.titlemenu__rule{ margin-top:24px; }
.titlemenu__rule::after{ background:#080c15; box-shadow:0 0 0 4px #080c15; }
.titlemenu__price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  margin:0 0 clamp(14px,2.4vh,26px) clamp(44px,calc(2.2vw + 38px),81px);
  font-size:var(--fs-sm);
  color:#b7a885;
}
.titlemenu__cost{ font:600 clamp(1.125rem,1rem + .4vw,1.375rem)/1 var(--t-font-body); color:var(--t-ink); letter-spacing:.02em; }
.titlemenu__rev{ white-space:nowrap; }

.title-menu{
  display:flex; flex-direction:column; align-items:stretch;
  gap:clamp(3px,.8vh,10px);
  width:min(440px,100%);
  margin-left:clamp(6px,2.2vw,43px);
}
.title-menu__entry{
  position:relative; display:block;
  padding:10px 12px 10px 38px;
  color:#c1b38f;
  transition:color .2s ease,opacity .2s ease;
}
.title-menu__entry::before{
  content:""; position:absolute; top:24px; left:3px;
  width:8px; height:8px;
  background:var(--t-marker);
  box-shadow:0 0 12px #d9ae4240;
  opacity:0;
  transform:translateX(-5px) rotate(45deg) scale(.72);
  transition:opacity .2s ease,transform .2s var(--ease-menu);
}
.title-menu__content{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:flex-start;
  max-width:100%;
  transition:transform .2s var(--ease-menu);
}
.title-menu__content::after{
  content:""; position:absolute; left:0; bottom:-7px;
  width:100%; min-width:170px; height:1px;
  background:linear-gradient(90deg,#b99545a6,#b9954514 80%,transparent);
  opacity:0;
  transform:scaleX(.4); transform-origin:left;
  transition:transform .22s var(--ease-menu),opacity .22s ease;
}
.title-menu__label{
  font:400 clamp(22px,1.66vw,29px)/1.35 var(--t-font-display);
  letter-spacing:.085em;
  text-transform:uppercase;
  text-shadow:0 1px 8px #0009;
  transition:text-shadow .2s ease;
}
.title-menu__meta{ margin-top:3px; font-size:clamp(12px,.92vw,15px); line-height:1.5; letter-spacing:.025em; color:#b7a885; }
/* Selected: hovered or focused, else the first entry, as in the game. */
.title-menu__entry:is(:hover,:focus-visible),
.title-menu:not(:has(.title-menu__entry:is(:hover,:focus-visible))) > li:first-child > .title-menu__entry{ color:#f1d78f; }
.title-menu__entry:is(:hover,:focus-visible)::before,
.title-menu:not(:has(.title-menu__entry:is(:hover,:focus-visible))) > li:first-child > .title-menu__entry::before{ opacity:1; transform:translateX(0) rotate(45deg) scale(1); }
.title-menu__entry:is(:hover,:focus-visible) .title-menu__content,
.title-menu:not(:has(.title-menu__entry:is(:hover,:focus-visible))) > li:first-child .title-menu__content{ transform:translateX(5px); }
.title-menu__entry:is(:hover,:focus-visible) .title-menu__content::after,
.title-menu:not(:has(.title-menu__entry:is(:hover,:focus-visible))) > li:first-child .title-menu__content::after{ opacity:1; transform:scaleX(1); }
.title-menu__entry:is(:hover,:focus-visible) .title-menu__label,
.title-menu:not(:has(.title-menu__entry:is(:hover,:focus-visible))) > li:first-child .title-menu__label{ text-shadow:0 0 15px #c9a84c30,0 1px 7px #000a; }
/* Keyboard focus is the game's own: the marker, the gold label and a 2px underline. */
.title-menu__entry:focus-visible{ outline:2px solid transparent; outline-offset:4px; }
.title-menu__entry:focus-visible .title-menu__content::after{ height:2px; background:linear-gradient(90deg,#e6c575,#c9a84c00); }
.titlemenu__fine{
  max-width:64ch;
  margin:clamp(22px,3.4vh,40px) 0 0 clamp(44px,calc(2.2vw + 38px),81px);
  font-size:var(--fs-label); line-height:1.6; letter-spacing:.04em;
  color:#c3b795;
}
@media (width <= 800px){
  .title-menu__entry{ padding-top:8px; padding-bottom:8px; }
  .title-menu__label{ font-size:24px; }
  .title-menu__entry::before{ top:21px; }
}
@media (width <= 600px){
  .titlemenu__main{ padding-top:clamp(56px,10vh,96px); }
  .title-menu__label{ font-size:21px; }
  .title-menu__entry::before{ top:16px; }
  .titlemenu__price,.titlemenu__fine{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .title-menu *,.title-menu *::before,.title-menu *::after{ transition-duration:0s !important; }
}


/* ════════════════════════════════════════════════════════════════
   NEWSLETTER BAND
   ════════════════════════════════════════════════════════════════ */
.nlband{ position:relative; isolation:isolate; overflow:clip; }
.nlband__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.nlband__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  opacity:.3;
  -webkit-mask:radial-gradient(ellipse 70% 75% at 50% 50%,#000 30%,transparent 78%);
  mask:radial-gradient(ellipse 70% 75% at 50% 50%,#000 30%,transparent 78%);
}
.nlband__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.nlband__glyph{ --rule-arm:120px; margin-bottom:22px; }
.nlband__title{ font-size:var(--fs-h2); }
.nlband__sub{ margin-top:12px; font-size:var(--fs-lead); color:var(--t-ink-2); }
.nlband .newsletter{ width:min(540px,100%); margin-top:clamp(24px,3vw,36px); text-align:left; }
.nlband .newsletter__status,.nlband .newsletter__fine{ justify-content:center; text-align:center; }