/* ==========================================================
   SOAR Games Studio
   The studio frame is black and white. Colour comes only from
   the games. Each game sets its own palette and display font
   in a .theme-* block (search for "GAME THEMES").
   ========================================================== */
:root {
  --black: #000;
  --white: #fff;
  --mute: #6b6b6b;          /* secondary text on white */
  --mute-inv: #b4b4b4;      /* secondary text on black */
  --line: #dcdcdc;
  --line-inv: #2e2e2e;
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 68px;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); color: var(--black); padding: 10px 16px; }
.skip-link:focus { left: 8px; }

/* ---------- Studio type ---------- */
.display {
  font-family: var(--font); font-stretch: 125%; font-weight: 650;
  letter-spacing: -0.028em; line-height: 1.02; text-wrap: balance;
}
.display-xl { font-size: clamp(2.3rem, 6.4vw, 5.75rem); }
.display-l  { font-size: clamp(2rem, 4.6vw, 3.75rem); }
.display-m  { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 38rem; }
.muted { color: var(--mute); }
.small { font-size: .875rem; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 2px;
  font: 600 .9375rem/1 var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, filter .2s;
}
.btn-solid { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-solid:hover { background: var(--white); color: var(--black); }
.btn-light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-light:hover { background: transparent; color: var(--white); }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn-line:hover { background: rgba(128, 128, 128, .2); }
.btn-game { background: var(--g-accent); color: var(--g-accent-fg); border-color: var(--g-accent); }
.btn-game:hover { filter: brightness(1.12); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); color: var(--white); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; filter: invert(1); }
.nav { display: none; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; }
.nav > a, .nav-item > a { padding: 8px 0; border-bottom: 2px solid transparent; }
.nav > a:hover, .nav-item > a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.nav .nav-cta { border: 1px solid var(--white); padding: 11px 18px; font-weight: 600; transition: background-color .2s, color .2s; }
.nav .nav-cta:hover { background: var(--white); color: var(--black); }
.nav-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--white); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 24px; height: 2px; background: currentColor; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

.nav-item { position: relative; }
.submenu { display: none; }
.submenu a { display: flex; align-items: center; gap: 16px; padding: 10px; }
.submenu img { width: 64px; height: 64px; object-fit: cover; flex: none; }
.submenu strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.submenu small { display: block; font-size: .8125rem; font-weight: 400; opacity: .7; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-item > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-3px) rotate(45deg); }
  .submenu {
    position: absolute; top: calc(100% + 15px); left: -20px; width: 340px; padding: 10px;
    background: var(--white); color: var(--black); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  }
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  .nav-item:hover > .submenu, .nav-item:focus-within > .submenu { display: block; }
  .submenu a:hover { background: #f1f1f1; }
  .submenu .all a { justify-content: space-between; padding: 14px 10px 8px; margin-top: 6px; border-top: 1px solid var(--line); font-weight: 600; font-size: .875rem; }
}
@media (max-width: 899px) {
  .site-header.open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - var(--header-h)); overflow: auto;
    background: var(--black); padding: 8px var(--gutter) 28px; border-top: 1px solid var(--line-inv);
  }
  .site-header.open .nav > a, .site-header.open .nav-item > a { display: block; padding: 16px 0; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--line-inv); }
  .site-header.open .submenu { display: block; padding: 6px 0; border-bottom: 1px solid var(--line-inv); }
  .site-header.open .submenu .all { display: none; }
  .site-header.open .submenu img { width: 48px; height: 48px; }
  .site-header.open .nav .nav-cta { margin-top: 24px; text-align: center; padding: 16px; border-bottom: 1px solid var(--white); font-size: 1rem; }
}

/* ==========================================================
   GAME THEMES
   Add a new game by copying one block and changing the values.
   ========================================================== */
.theme-sns {
  --g-hero-bg: #f5f6f8;                 /* paper */
  --g-hero-fg: #11141b;                 /* ink */
  --g-hero-mute: #4d5567;
  --g-hero-line: rgba(17, 20, 27, .18);
  --g-fade: #f5f6f8;
  --g-page: #f5f6f8;
  --g-fg: #11141b;
  --g-mute: #4d5567;
  --g-line: rgba(17, 20, 27, .16);
  --g-accent: #9a1c1c;                  /* the blood on the snow */
  --g-accent-fg: #fff;
  --g-ink-accent: #9a1c1c;
  --g-band-bg: #11141b;
  --g-band-mute: #aab1c2;
  --g-band-line: rgba(255, 255, 255, .16);
  --g-closing-bg: #1e1c1d url("../img/sns-bg-hero.webp") center / cover no-repeat;   /* same ink-wash mountains as the top of the page */
  --g-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --g-display-weight: 600;
  --g-display-track: -0.012em;
  --g-display-stretch: 100%;
  --g-scale: 1.24;                      /* this serif runs small, so scale it up */
  --g-tagline-style: italic;
  --g-tagline-weight: 500;
}
.theme-ff {
  --g-hero-bg: #1a1638 url("../img/ff-backdrop.webp") center / cover no-repeat;   /* dusk sky from the cover */
  --g-hero-fg: #fff;
  --g-hero-mute: rgba(255, 255, 255, .8);
  --g-hero-line: rgba(255, 255, 255, .3);
  --g-fade: #171332;
  --g-page: #fff;
  --g-fg: #1a1638;
  --g-mute: #5a5470;
  --g-line: rgba(26, 22, 56, .16);
  --g-accent: #ffc35a;                  /* low sun */
  --g-accent-fg: #1a1638;
  --g-ink-accent: #d9502a;
  --g-band-bg: #1a1638;
  --g-band-mute: #b9b4d3;
  --g-band-line: rgba(255, 255, 255, .18);
  --g-closing-bg: #1a1638 url("../img/ff-backdrop.webp") center / cover no-repeat;
  --g-display: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --g-display-weight: 800;
  --g-display-track: -0.025em;
  --g-display-stretch: 100%;
  --g-scale: 1;
  --g-tagline-style: normal;
  --g-tagline-weight: 600;
}
.g-display {
  font-family: var(--g-display); font-weight: var(--g-display-weight); font-stretch: var(--g-display-stretch);
  letter-spacing: var(--g-display-track); line-height: 1; text-wrap: balance;
}
.g-tagline {
  font-family: var(--g-display); font-style: var(--g-tagline-style); font-weight: var(--g-tagline-weight);
  letter-spacing: var(--g-display-track); line-height: 1.15; text-wrap: balance;
}

/* ---------- Home: featured games carousel ---------- */
/* One slide per game, each in its own theme and matching the top of that
   game's own page (same backdrop, same box picture). Without JavaScript the
   slides simply stack. */
.highlights { position: relative; background: var(--black); color: var(--white); }
.theme-sns { --art-grow: 1; }
.theme-ff { --art-grow: 1; }
.slide { background: var(--g-hero-bg); color: var(--g-hero-fg); position: relative; overflow: hidden; }
.slide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background: linear-gradient(to top, var(--g-fade) 10%, transparent);
}
.slide-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: clamp(28px, 5vw, 56px) clamp(36px, 5vw, 64px); }
.slide-art { order: -1; display: flex; justify-content: center; pointer-events: none; }
.slide-art img { width: calc(min(78%, 380px) * var(--art-grow)); max-width: none; height: auto; aspect-ratio: 1 / 1; }
.theme-ff .slide-art img { box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 30px 70px rgba(8, 4, 30, .6); }
/* box pictures are cut-outs of slightly different shapes: draw them at the same height */
.slide-art.is-box img { width: auto; height: clamp(220px, 62vw, 340px); max-width: 86%; object-fit: contain; aspect-ratio: auto; box-shadow: none; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); }
/* Sword & Snow slide: the ink-wash mountains from its page */
.slide.theme-sns, .highlights.theme-sns { --g-hero-fg: #fff; --g-hero-mute: rgba(255, 255, 255, .8); --g-hero-line: rgba(255, 255, 255, .28); --g-fade: #1e1c1d; }
.slide.theme-sns { background: #1e1c1d url("../img/sns-bg-hero.webp") center top / 240% auto no-repeat; }
.slide-text { position: relative; z-index: 2; max-width: 34rem; }
.world-status { font-size: .875rem; font-weight: 600; margin-bottom: 14px; color: var(--g-hero-mute); }
.world-title { font-size: calc(clamp(2.5rem, 4.8vw, 4.5rem) * var(--g-scale)); }
.world-hook { font-size: calc(clamp(1.15rem, 1.8vw, 1.5rem) * var(--g-scale)); margin-top: 14px; }
.world-meta { margin-top: 10px; color: var(--g-hero-mute); font-size: .9375rem; }
.world-links { margin-top: 26px; }

@media (min-width: 900px) {
  .slide-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 72px); align-items: center; height: clamp(560px, calc(100svh - var(--header-h) - 76px), 740px); padding-block: 36px; }
  .slide-art { order: 0; container-type: size; height: 100%; align-items: center; }
  .slide-art img { width: calc(min(92cqw, 88cqh) * var(--art-grow)); height: calc(min(92cqw, 88cqh) * var(--art-grow)); flex: none; }
  .slide-art.is-box img { width: auto; height: min(84cqh, 100cqw); max-width: 96cqw; }
  .slide.theme-sns { background-size: cover; background-position: center; }
}

/* carousel behaviour, switched on by JavaScript */
.is-carousel .slides { display: grid; }
.is-carousel .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }
.is-carousel .slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease); }
.is-carousel .slide:not(.is-active) .btn, .is-carousel .slide:not(.is-active) .link { pointer-events: none; }

.hl-arrow {
  position: absolute; z-index: 5; bottom: 92px; width: 48px; height: 48px; display: none; place-items: center;
  padding: 0; border: 1px solid currentColor; background: transparent; color: var(--g-hero-fg); cursor: pointer; transition: background-color .2s;
}
.hl-arrow:hover { background: rgba(128, 128, 128, .25); }
.hl-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hl-next { right: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.hl-prev { right: calc(max(var(--gutter), calc((100vw - var(--max)) / 2)) + 60px); }
@media (min-width: 900px) { .is-carousel .hl-arrow { display: grid; } }

.hl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--black); border-top: 1px solid var(--line-inv); }
.hl-tab {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px var(--gutter); text-align: left;
  background: none; border: 0; border-bottom: 3px solid transparent; color: rgba(255,255,255,.62); font: inherit; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.hl-tab + .hl-tab { border-left: 1px solid var(--line-inv); }
.hl-tab:hover { color: #fff; }
.hl-tab[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }
.hl-tab img { width: 44px; height: 44px; object-fit: cover; flex: none; }
.hl-tab strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.hl-tab small { display: block; font-size: .8125rem; opacity: .75; }
@media (max-width: 599px) { .hl-tab small { display: none; } .hl-tab img { width: 36px; height: 36px; } .hl-tab { gap: 10px; } }
@media (min-width: 1280px) {
  .hl-tab:first-child { padding-left: calc((100vw - var(--max)) / 2); }
  .hl-tab:last-child { padding-right: calc((100vw - var(--max)) / 2); }
}

/* ---------- Home: statement ---------- */
.statement { padding-block: clamp(72px, 11vw, 168px); }
.statement-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: end; }
.statement-aside p { margin-bottom: 20px; }
@media (min-width: 1000px) {
  .statement-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; }
}

/* ---------- News ---------- */
.sec { padding-block: clamp(64px, 9vw, 128px); }
.sec-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.news-rows { border-top: 1px solid var(--black); }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.news-row time { font-size: .875rem; color: var(--mute); padding-top: .5em; }
.news-row h3 { margin-bottom: 8px; }
.news-row h3 a { text-decoration: none; }
.news-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.news-row p { max-width: 44rem; color: var(--mute); }
.news-row p + p { margin-top: .8em; }
.news-row .tag { font-size: .875rem; color: var(--mute); }
@media (min-width: 800px) {
  .news-row { grid-template-columns: 11rem minmax(0, 1fr) 11rem; }
  .news-row .tag { text-align: right; padding-top: .5em; }
}

/* ---------- Follow band ---------- */
.follow { background: var(--black); color: var(--white); padding-block: clamp(64px, 9vw, 128px); border-bottom: 1px solid var(--line-inv); }
.follow-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; }
.follow p { color: var(--mute-inv); max-width: 30rem; margin-top: 18px; }
@media (min-width: 1000px) { .follow-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.signup { display: flex; flex-wrap: wrap; gap: 12px; }
.signup input[type="email"] {
  flex: 1 1 240px; min-height: 50px; padding: 0 16px; font: inherit; color: inherit;
  background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px;
}
.signup input::placeholder { color: rgba(255, 255, 255, .6); }
.fine { font-size: .8125rem; opacity: .7; margin-top: 12px; }
.honeypot { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding: clamp(48px, 6vw, 88px) 0 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.footer-logo { width: 104px; filter: invert(1); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.site-footer h4 { font-size: .875rem; font-weight: 400; color: var(--mute-inv); margin-bottom: 14px; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.footer-bottom { margin-top: clamp(40px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--line-inv); font-size: .8125rem; color: var(--mute-inv); }
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Inner page heads ---------- */
.page-head { padding-block: clamp(56px, 8vw, 120px) clamp(28px, 4vw, 56px); }
.page-head .lead { margin-top: 22px; color: var(--mute); }

/* ==========================================================
   GAME PAGES  (one layout, themed by .theme-*)
   ========================================================== */
.game-page { background: var(--g-page); color: var(--g-fg); }

/* 1. Hero */
.game-hero { position: relative; overflow: hidden; background: var(--g-hero-bg); color: var(--g-hero-fg); }
.game-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding-block: clamp(36px, 6vw, 80px); }
.game-art { order: -1; }
.theme-sns .game-art img { width: min(100%, 580px); margin-inline: auto; box-shadow: 0 2px 3px rgba(17,20,27,.18), 0 40px 90px rgba(17,20,27,.28); }
.theme-ff .game-art img { width: min(100%, 580px); margin-inline: auto; box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 40px 90px rgba(8, 4, 30, .65); }
.game-status { font-size: .9375rem; font-weight: 600; color: var(--g-hero-mute); margin-bottom: 18px; }
.game-title { font-size: calc(clamp(2.9rem, 6.2vw, 5.5rem) * var(--g-scale)); line-height: .94; }
.game-hero .g-tagline { font-size: calc(clamp(1.3rem, 2.1vw, 1.75rem) * var(--g-scale)); margin-top: 22px; }
.game-hero .lead { margin-top: 18px; color: var(--g-hero-mute); max-width: 34rem; }
.keyfacts { display: flex; margin: 32px 0; border-block: 1px solid var(--g-hero-line); max-width: 34rem; }
.keyfacts div { flex: 1 1 0; padding: 14px 0 14px 20px; border-left: 1px solid var(--g-hero-line); }
.keyfacts div:first-child { padding-left: 0; border-left: 0; }
.keyfacts dt { font-size: .8125rem; color: var(--g-hero-mute); }
.keyfacts dd { font-family: var(--g-display); font-weight: var(--g-display-weight); font-size: calc(1.6rem * var(--g-scale)); line-height: 1.15; letter-spacing: var(--g-display-track); }
@media (min-width: 960px) {
  .game-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; min-height: min(calc(100svh - var(--header-h)), 880px); }
  .game-art { order: 0; }
}
/* Sword & Snow page only: the box on ink-wash mountains (assets/img/sns-bg-hero.webp) */
.game-page.theme-sns .game-hero {
  --g-hero-fg: #fff; --g-hero-mute: rgba(255, 255, 255, .8); --g-hero-line: rgba(255, 255, 255, .28);
  background: #1e1c1d url("../img/sns-bg-hero.webp") center top / 240% auto no-repeat;
}
@media (min-width: 960px) {
  .game-page.theme-sns .game-hero { background-size: cover; background-position: center; }
}
/* a game's own page shows the box (a cut-out picture), so the shadow follows its outline */
.game-art.is-box img { width: min(78%, 520px); box-shadow: none; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .6)); }
@media (min-width: 960px) { .game-art.is-box img { width: min(88%, 560px); } }
/* compact version of the hero, used to list games */
.game-hero.is-listing .game-hero-inner { min-height: 0; padding-block: clamp(48px, 7vw, 104px); }
.game-hero.is-listing .game-title { font-size: calc(clamp(2.4rem, 4.6vw, 4rem) * var(--g-scale)); }
.game-hero.is-listing .game-title a { text-decoration: none; }
@media (min-width: 960px) { .game-hero.is-listing.is-flipped .game-art { order: -1; } }

/* shared section rhythm inside game pages */
.g-sec { padding-block: clamp(64px, 9vw, 128px); }
.g-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: clamp(32px, 5vw, 64px); }
.g-head .lead { color: var(--g-mute); }
.g-h2 { font-size: calc(clamp(2.1rem, 4.4vw, 3.6rem) * var(--g-scale)); }
@media (min-width: 960px) { .g-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; } }

/* 2. How it plays */
.plays { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--g-fg); }
.play { padding: 26px 0; border-bottom: 1px solid var(--g-line); }
.play h3 { font-size: calc(1.7rem * var(--g-scale)); line-height: 1.08; margin-bottom: 12px; }
.play p { color: var(--g-mute); }
@media (min-width: 860px) {
  .plays-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plays-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .play { padding: 30px 32px 8px; border-bottom: 0; border-left: 1px solid var(--g-line); }
  .play:first-child { padding-left: 0; border-left: 0; }
  .play:last-child { padding-right: 0; }
}

/* Sword & Snow page only: misty peaks behind "how it plays" (assets/img/sns-bg-section.webp) */
.game-page.theme-sns #how-it-plays {
  --g-mute: #333b4b;
  background: linear-gradient(rgba(245, 246, 248, .38), rgba(245, 246, 248, .38)), #e6e9eb url("../img/sns-bg-section.webp") center 42% / cover no-repeat;
}

/* 3. Spotlight band */
.band { background: var(--g-band-bg); color: var(--white); }
.band-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.band-art img { width: 100%; }
.band .lead { color: var(--g-band-mute); margin-top: 22px; }
.points { margin-top: 30px; border-top: 1px solid var(--g-band-line); }
.points li { padding: 15px 0; border-bottom: 1px solid var(--g-band-line); }
.currencies { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 28px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.cur-joy { color: #ffb648; }
.cur-love { color: #ff7d8c; }
.cur-impact { color: #63d695; }
@media (min-width: 960px) { .band-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; } }

/* Spotlight band with artwork behind it. The painting runs edge to edge along the top and
   melts into the band colour; the text starts over its lower part. */
.band-scene {
  --scene-h: max(28.6vw, 210px);        /* the painting is 3.5 times wider than tall */
  padding-top: calc(var(--scene-h) * .8);
  background-color: var(--g-band-bg); background-repeat: no-repeat; background-position: center top;
  background-size: 100% calc(var(--scene-h) + 2px), auto var(--scene-h);
}
.theme-sns .band-scene {
  background-image: linear-gradient(rgba(17, 20, 27, 0) 30%, rgba(17, 20, 27, .55) 66%, #11141b 96%), url("../img/sns-art-banner.webp");
}
.band-scene .band-inner { align-items: start; }
.band-scene .points { margin-top: 0; }
@media (min-width: 960px) {
  .band-scene { padding-top: calc(var(--scene-h) * .86); }
  .band-scene .band-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .band-scene .points { margin-top: 10px; }
}

/* 4. Details */
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.details h3 { font-size: calc(1.9rem * var(--g-scale)); margin-bottom: 20px; }
.facts { border-top: 1px solid var(--g-fg); }
.facts div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--g-line); }
.facts dt { color: var(--g-mute); }
.facts dd { font-weight: 600; text-align: right; }
.contents { columns: 2; column-gap: 32px; border-top: 1px solid var(--g-fg); }
.contents li { padding: 12px 0; border-bottom: 1px solid var(--g-line); break-inside: avoid; }
.contents-title { font-size: .9375rem; font-weight: 600; color: var(--g-mute); margin: 34px 0 12px; }
.contents-title:first-of-type { margin-top: 0; }
.note-soon { padding-top: 16px; border-top: 1px solid var(--g-fg); color: var(--g-mute); }
.meters { margin-top: 36px; display: grid; gap: 14px; }
.meter { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 16px; font-size: .9375rem; }
.meter .bar { height: 3px; background: var(--g-line); }
.meter .bar i { display: block; height: 100%; background: var(--g-ink-accent); }
.meter .p30 { width: 30%; } .meter .p40 { width: 40%; } .meter .p60 { width: 60%; } .meter .p80 { width: 80%; } .meter .p100 { width: 100%; }
.meter b { text-align: right; font-weight: 600; }
@media (min-width: 900px) {
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 8vw, 120px); align-items: start; }
  /* the details stay in view while a long component list scrolls past */
  .details > :first-child { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* 5. Gallery */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery button:hover img { transform: scale(1.04); }
.gallery-objects button { aspect-ratio: 1 / 1; }
.gallery-objects img { object-fit: contain; }
@media (min-width: 800px) {
  .gallery-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gallery-mosaic button { grid-column: span 2; }
  .gallery-mosaic button:first-child { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; height: 100%; }
  .gallery-objects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 5b. Photo carousel. Without JavaScript it is a row of photos you scroll sideways. */
.shots-top { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 3vw, 40px); }
.shots-count { font-family: var(--g-display); font-weight: var(--g-display-weight); font-size: calc(1.35rem * var(--g-scale)); line-height: 1; color: var(--g-mute); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.shots-stage { position: relative; }
.shots-track { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.shots-track:focus-visible { outline: 2px solid var(--g-fg); outline-offset: 4px; }
.shot { flex: 0 0 88%; scroll-snap-align: center; aspect-ratio: 16 / 9; background: #11141b; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.is-ready .shots-track { scrollbar-width: none; }
.is-ready .shots-track::-webkit-scrollbar { display: none; }
.is-ready .shot { flex-basis: 100%; }
.shots-arrow {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .75); background: rgba(17, 20, 27, .6); color: #fff; cursor: pointer;
}
.shots-arrow:hover { background: rgba(17, 20, 27, .9); }
.shots-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.shots-prev { left: 12px; }
.shots-next { right: 12px; }
.shots-thumbs { position: relative; display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.shots-thumbs::-webkit-scrollbar { display: none; }
.shots-thumb { flex: 0 0 84px; padding: 0; border: 0; background: #11141b; aspect-ratio: 16 / 9; cursor: pointer; position: relative; }
.shots-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: opacity .25s var(--ease); }
.shots-thumb:hover img, .shots-thumb[aria-current="true"] img { opacity: 1; }
.shots-thumb[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--g-ink-accent); }
@media (min-width: 900px) {
  .shots-arrow { width: 52px; height: 52px; margin-top: -26px; }
  .shots-prev { left: 20px; }
  .shots-next { right: 20px; }
  .shots-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
dialog.lightbox img { max-width: 94vw; max-height: 88vh; margin: auto; }
dialog.lightbox .close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* 6. Closing */
.closing { background: var(--g-closing-bg); color: var(--white); }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.closing .lead { margin: 20px 0 28px; color: rgba(255, 255, 255, .8); }
.closing-emblem img { width: min(78%, 400px); margin-inline: auto; filter: invert(1); }
@media (min-width: 900px) { .closing-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }

/* ---------- About / Contact ---------- */
.prose { max-width: 44rem; }
.prose p + p { margin-top: 1em; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }
.game-rows { border-top: 1px solid var(--black); }
.game-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.game-row img { width: 96px; height: 96px; object-fit: cover; }
.game-row p { color: var(--mute); margin-top: 6px; }
.game-row:hover .display-m { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.link-list { border-top: 1px solid var(--black); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; text-decoration: none; font-weight: 600; }
.link-list a:hover { text-decoration: underline; text-underline-offset: .3em; }
.link-list span { font-weight: 400; color: var(--mute); }
.form { display: grid; gap: 18px; max-width: 34rem; }
.form label { display: grid; gap: 6px; font-size: .9375rem; font-weight: 600; }
.form input, .form textarea, .form select { font: inherit; padding: 13px 14px; border: 1px solid var(--black); border-radius: 2px; background: var(--white); color: var(--black); }
.form textarea { min-height: 160px; resize: vertical; }

/* ---------- One entrance, on the hero only ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes art-in { from { opacity: 0; transform: scale(1.05); } }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  .world-art img, .game-art img { animation: art-in 1.3s var(--ease) backwards; }
  .world-text > *, .game-copy > * { animation: rise .8s var(--ease) backwards; }
  .world-text > :nth-child(1), .game-copy > :nth-child(1) { animation-delay: .15s; }
  .world-text > :nth-child(2), .game-copy > :nth-child(2) { animation-delay: .22s; }
  .world-text > :nth-child(3), .game-copy > :nth-child(3) { animation-delay: .29s; }
  .world-text > :nth-child(4), .game-copy > :nth-child(4) { animation-delay: .36s; }
  .world-text > :nth-child(5), .game-copy > :nth-child(5) { animation-delay: .43s; }
  .game-copy > :nth-child(6) { animation-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* line the hero text up with the header logo */
@media (min-width: 900px) {
  .world { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}

/* form replies */
.form-status { margin-top: 12px; font-size: .9375rem; font-weight: 600; min-height: 1.4em; }
.form-status:empty { display: none; }
.form-status.is-error { color: #b3261e; }
.form-status.on-dark { color: #fff; }
.form-status.on-dark.is-error { color: #ffb4ab; }