/* ==========================================================================
   ennface.com — site styles
   The studio shell (header, about, mission, team, legal pages, footer) is the
   pastel Ennface teal. Each game wears its own theme: build.py writes its colours
   and font into css/games.css as --g-* tokens on .g-<slug>, and the game rules at
   the bottom of this file only read those tokens. Two skins: .theme-hud, .theme-soft.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* brand teal — #01aeb7 is the logo colour; darker steps only where text needs contrast */
  --brand-50:  #eefafa;
  --brand-100: #d6f3f4;
  --brand-200: #a9e5e8;
  --brand-500: #01aeb7;
  --brand-600: #0b9aa2;
  --brand-700: #0e747a;  /* passes 4.5:1 on white, mint, sky and sand */
  --brand-800: #0f6469;

  /* pastel tints, all pulled from the logo's family plus one warm neutral */
  --mint:   #e8f8f7;
  --mint-2: #cdeff0;
  --sky:    #dceff6;
  --sky-2:  #c5e5f2;
  --sand:   #f7f1e6;
  --sand-2: #efe3cf;

  /* neutrals are deep teal, not black */
  --ink:     #0f3a3f;
  --text:    #2f5a5f;
  --muted:   #4f7378;
  --line:    #cfe6e7;
  --bg:      #ffffff;
  --bg-alt:  var(--mint);
  --deep:    #0e3b40;          /* footer */
  --on-deep: #e9f4f5;
  --on-deep-muted: #a9c9cc;

  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 2.2rem + 3.6vw, 5rem);
  --fs-display: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-title: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 6vw, 5.5rem);
  --header-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-800); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
/* text for screen readers and search engines only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 0.75rem;
}
.icon { display: inline-block; vertical-align: -0.15em; flex: none; }

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.brand img { width: 150px; height: 50px; }

.site-nav__list { display: flex; gap: 0.25rem; align-items: center; }
.site-nav__item { position: relative; }
.site-nav__item > a {
  display: inline-block; padding: 0.55rem 0.85rem; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.site-nav__item > a:hover, .site-nav__item.is-current > a { color: var(--brand-800); background: var(--brand-50); }
.site-nav__item.has-children > a::after {
  content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.45em; vertical-align: 0.15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.submenu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem;
  box-shadow: 0 18px 40px -20px rgba(16, 38, 42, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-nav__item:hover > .submenu, .site-nav__item:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; }
.submenu a:hover { background: var(--brand-50); color: var(--brand-800); }

.nav-toggle {
  display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle__label { font-weight: 600; font-size: 0.9rem; }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    display: none; padding: 0.75rem var(--gutter) 1.25rem;
    box-shadow: 0 24px 40px -24px rgba(16, 38, 42, 0.4);
  }
  body.nav-open .site-nav { display: block; }
  body.nav-open .nav-toggle__open { display: none; }
  body.nav-open .nav-toggle__close { display: inline-flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item > a { display: block; padding: 0.8rem 0.5rem; border-radius: 8px; font-size: 1.05rem; }
  .site-nav__item.has-children > a::after { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    padding: 0 0 0.5rem 1rem; min-width: 0;
  }
  .submenu a { color: var(--muted); }
}


/* --------------------------------------------------------------------------
   Site buttons (404, devlogs) — game pages use .g-btn below
   -------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.2rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; line-height: 1.2;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--brand-700); color: #fff; }
.btn--solid:hover { background: var(--brand-800); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-800); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); }
.section__head { margin-bottom: 2rem; }
.section__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section__head--center { text-align: center; }
.section__title { font-size: var(--fs-title); font-weight: 800; }
.section__display { font-size: var(--fs-display); font-weight: 800; color: var(--brand-700); letter-spacing: 0.06em; }
.section__link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.section__tagline { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.75rem; color: var(--brand-700); font-weight: 600; font-size: 1.05rem; }
.section__tagline::before, .section__tagline::after { content: ""; height: 1px; width: min(180px, 22vw); background: var(--brand-200); }

/* about band */
.section--about { background: var(--bg-alt); border-block: 1px solid var(--line); }
.about { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2rem; align-items: center; }
.about__text { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; color: var(--ink); max-width: 62ch; text-wrap: pretty; }
@media (max-width: 699px) { .about { grid-template-columns: 1fr; gap: 1rem; } .about__mark { width: 64px; height: 64px; } }

/* mission pillars — same three-column shape as the old site */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.pillar { text-align: center; padding-inline: 0.5rem; }
.pillar__icon { color: var(--brand-500); display: flex; justify-content: center; margin-bottom: 1.25rem; }
.pillar__title { font-size: var(--fs-h3); font-weight: 700; color: var(--brand-700); margin-bottom: 0.75rem; }
.pillar__text { color: var(--muted); max-width: 34ch; margin-inline: auto; text-wrap: pretty; }
@media (max-width: 799px) { .pillars { grid-template-columns: 1fr; gap: 2.5rem; } }

/* team */
.section--team { background: var(--sand); }
.team { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.member { text-align: center; max-width: 300px; }
.member__photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--sand-2); }
.member__photo--initials { display: grid; place-content: center; background: var(--mint-2); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; }
.member__name { font-size: var(--fs-h3); font-weight: 700; }
.member__roles { color: var(--muted); font-size: 0.95rem; margin-top: 0.35rem; }
.member__base { display: flex; justify-content: center; align-items: center; gap: 0.3rem; margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.member__links { display: flex; justify-content: center; gap: 1rem; margin-top: 0.75rem; }
.member__links a { font-weight: 600; font-size: 0.9rem; }


/* --------------------------------------------------------------------------
   Card grid (cards themselves are .gcard, below)
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--1 { grid-template-columns: minmax(0, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .card-grid, .card-grid--2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Page head + prose pages (privacy, terms, contact, devlog)
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.page-head--narrow .wrap { max-width: var(--wrap-narrow); }
.page-head__title { font-size: var(--fs-display); font-weight: 800; }
.page-head__lead { margin-top: 1rem; font-size: 1.15rem; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.page-head__meta { margin-top: 0.75rem; color: var(--muted); font-size: 0.9rem; }
.page-head .btn-row { margin-top: 1.5rem; }
.section--page { padding-block: clamp(2.5rem, 5vw, 4rem); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.prose h4, .prose h3.sub { font-size: 1.05rem; margin-top: 1.5rem; color: var(--brand-700); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4rem; }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--brand-500); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.prose figure { margin: 1.75rem 0; }
.prose figure.clip { position: relative; width: fit-content; } /* the clip's pause button sits on its corner */
.prose figure :is(img, video), .prose > img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose figcaption { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; }
.prose--legal { font-size: 1rem; }
.prose--legal h2 { font-size: 1.25rem; }
.prose--legal .legal-list { list-style: none; padding-left: 0; }
.prose--legal .legal-list li { padding-left: 2.25rem; position: relative; }
.prose--legal .legal-list li > span:first-child { position: absolute; left: 0; color: var(--muted); }
.prose--legal .caps { text-transform: none; }
.prose--article { font-size: 1.05rem; }
.prose--article h2 { font-size: 1.75rem; margin-top: 2.75rem; }
.prose--article .cta-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; background: var(--brand-50); color: var(--brand-800); text-decoration: none; font-weight: 700; }
.prose--article .gif-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.prose--article .gif-pair figure { margin: 0; }

.note { margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-sm); color: var(--brand-800); display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; }
.note .icon { margin-top: 0.2em; }

.post-list { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.post { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.post__meta { color: var(--muted); font-size: 0.875rem; }
.post__title { font-size: 1.4rem; font-weight: 800; margin: 0.35rem 0 0.5rem; }
.post__title a { color: inherit; text-decoration: none; }
.post__title a:hover { color: var(--brand-800); }
.post__excerpt { color: var(--muted); margin-bottom: 0.75rem; }
.post__back { margin-top: 2.5rem; }
.post__back a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.post__back .icon { transform: rotate(180deg); }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 0.5rem; }
.contact-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-card__label { display: flex; align-items: center; gap: 0.5rem; color: var(--brand-700); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.contact-card__value { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.contact-card__value a { text-decoration: none; }
.contact-card__value a:hover { text-decoration: underline; }
.contact-card__hint { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.link-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.link-list a { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink); }
.link-list a:hover { border-color: var(--brand-500); color: var(--brand-800); }

/* delete-account steps */
.steps { counter-reset: step; display: grid; gap: 1rem; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1.25rem 1rem 3.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.steps li::before { content: counter(step); position: absolute; left: 1.1rem; top: 0.9rem; width: 1.9rem; height: 1.9rem; display: grid; place-content: center; border-radius: 50%; background: var(--brand-700); color: #fff; font-weight: 800; font-family: var(--font-display); }
.warning { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--sand); border: 1px solid var(--sand-2); color: #5a4a1e; }
.phone-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.phone-shots img { border-radius: 14px; border: 1px solid var(--line); }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--deep); color: var(--on-deep-muted); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 3.5rem 2.5rem; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { margin-top: 1rem; max-width: 34ch; font-size: 0.95rem; }
.footer-col__title { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; }
.footer-col li + li { margin-top: 0.45rem; }
.footer-col a { color: var(--on-deep); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-address { font-size: 0.9rem; line-height: 1.5; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem 2rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; }
.footer-bottom__note { font-family: var(--font-display); font-weight: 700; color: #7fdde2; }

/* ==========================================================================
   GAMES — themed by the --g-* tokens in css/games.css (generated per game)
   .on-bg    = the game's hero colour (bg/text/muted/accent)
   .on-paper = the game's light band (paper/ink/inkMuted/link)
   ========================================================================== */
.on-bg { background-color: var(--g-bg); color: var(--g-text); }
.on-paper { background-color: var(--g-paper); color: var(--g-ink); }
:where(.on-bg) :is(h1, h2, h3) { color: var(--g-text); }
:where(.on-paper) :is(h1, h2, h3) { color: var(--g-ink); }
:where(.on-bg) a { color: var(--g-accent); }
:where(.on-paper) a { color: var(--g-link); }
.gscope :is(h1, h2, h3) { font-family: var(--g-font); font-weight: var(--g-font-weight); }

/* status tag ------------------------------------------------------------- */
.g-pill {
  display: inline-flex; align-items: center; background: var(--g-highlight); color: var(--g-highlight-text);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  padding: 0.38rem 0.85rem; border-radius: 999px; white-space: nowrap;
}

/* buttons ---------------------------------------------------------------- */
.g-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.3rem;
  border: 2px solid transparent; border-radius: 999px; font-weight: 800; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.g-btn > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.g-btn:hover { transform: translateY(-1px); }
.g-btn--cta { background: var(--g-cta); color: var(--g-cta-text); }
.g-btn--cta:hover { color: var(--g-cta-text); filter: brightness(1.07) saturate(1.05); }
.g-btn--ghost { background: transparent; }
.on-bg .g-btn--ghost { color: var(--g-text); border-color: var(--g-accent); }
.on-paper .g-btn--ghost, .gfacts .g-btn--ghost { color: var(--g-ink); border-color: var(--g-ink); }
.g-badge img { height: 48px; width: auto; }

/* skins -------------------------------------------------------------------- */
/* HUD: the in-game HUD's black slanted panels, uppercase Inter Black */
.theme-hud :is(h1, h2, h3) { text-transform: uppercase; letter-spacing: -0.005em; }
.theme-hud .g-pill { border-radius: 0; padding: 0.42rem 1.15rem; font-family: var(--g-font); font-weight: 900;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.theme-hud .g-btn { border-radius: 0; transform: skewX(-12deg); font-family: var(--g-font); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.03em; }
.theme-hud .g-btn > span { transform: skewX(12deg); }
.theme-hud .g-btn:hover { transform: skewX(-12deg) translateY(-1px); }
/* Soft: rounded and friendly */
.theme-soft :is(h1, h2, h3) { letter-spacing: -0.01em; }

/* hero: banner (full-width key art) ---------------------------------------- */
.ghero { position: relative; }
.ghero__art { position: relative; overflow: hidden; }
.ghero__art picture { display: block; }
.ghero__img { width: 100%; height: clamp(320px, 33vw, 660px); object-fit: cover; object-position: var(--g-hero-focus, 50% 40%); }
.ghero__brand { position: absolute; inset: 0; display: flex; align-items: flex-start; padding-top: clamp(0.9rem, 2.6vw, 2.25rem); pointer-events: none; }
.ghero__logo { display: block; width: clamp(170px, 27vw, 420px); height: auto; }
.ghero__brand .ghero__logo { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); }
.ghero__band { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.ghero__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.ghero__title { font-size: clamp(2.4rem, 1.9rem + 3vw, 4.5rem); line-height: 1.02; margin-bottom: 1.1rem; }
.ghero__eyebrow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.ghero__genre { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--g-muted); }
.ghero__tagline { font-family: var(--g-font); font-weight: var(--g-font-weight); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.1; text-wrap: balance; max-width: 22ch; }
.ghero__summary { margin-top: 1rem; color: var(--g-muted); font-size: 1.08rem; max-width: 60ch; text-wrap: pretty; }
.ghero__actions { display: grid; gap: 1.1rem; align-content: start; padding-top: 0.4rem; }
.ghero__news { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--g-muted); font-size: 0.95rem; max-width: 46ch; }
.ghero__news .icon { color: var(--g-accent); margin-top: 0.2em; }
.ghero__more { font-weight: 800; text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; }
/* the tagline as a trailer card: black slanted panel, cyan = saving */
.theme-hud .ghero__tagline { display: inline-block; text-transform: uppercase; background: var(--g-highlight); color: var(--g-highlight-text);
  padding: 0.35em 0.85em 0.4em; clip-path: polygon(0.45em 0, 100% 0, calc(100% - 0.45em) 100%, 0 100%); max-width: none; }

/* hero: split (copy + picture) ----------------------------------------------- */
.ghero__split { padding-block: clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.theme-soft .ghero__split {
  background:
    radial-gradient(55% 80% at 88% 18%, color-mix(in srgb, var(--g-highlight) 34%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--g-cta) 16%, transparent), transparent 70%),
    var(--g-bg);
}
.ghero__splitgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ghero__splitcopy { display: grid; gap: 1.5rem; }
.ghero__side { display: flex; justify-content: center; }
.ghero__sideimg { width: min(100%, 580px); height: auto; }
.ghero__sideart { width: 100%; height: auto; border-radius: 20px; }
.ghero__icon { width: min(100%, 260px); height: auto; border-radius: 22%; }
.ghero__mark { font-family: var(--g-font); font-weight: var(--g-font-weight); font-size: clamp(4rem, 10vw, 7rem); color: var(--g-text); opacity: 0.25; }

/* bands ---------------------------------------------------------------------- */
.gband { padding-block: clamp(3rem, 6.5vw, 5.75rem); }
.theme-hud .gband.on-bg {
  background-image:
    linear-gradient(color-mix(in srgb, var(--g-accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--g-accent) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.theme-soft .gband.on-bg { background-image: linear-gradient(180deg, var(--g-bg), color-mix(in srgb, var(--g-bg) 55%, #ffffff)); }
.gtitle { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.8rem); line-height: 1.05; margin-bottom: 1.1rem; text-wrap: balance; }
.theme-hud .gtitle::before { content: ""; display: block; width: 56px; height: 8px; margin-bottom: 1rem; transform: skewX(-24deg); background: var(--g-accent); }
.theme-hud .on-paper .gtitle::before { background: var(--g-link); }

/* intro + facts ------------------------------------------------------------- */
.gintro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gprose p { font-size: 1.12rem; line-height: 1.68; max-width: 62ch; text-wrap: pretty; }
.gprose p:first-child { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.5; }
.gprose p + p { margin-top: 1rem; }
.gfacts { background: #fff; color: var(--g-ink); border: 1px solid var(--g-paper-line); border-radius: 18px; padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.gfacts__title { font-size: 1.05rem; margin-bottom: 1rem; }
.gfacts__list { display: grid; gap: 0.55rem; margin: 0 0 1.35rem; font-size: 0.95rem; }
.gfacts__list > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; }
.gfacts__list dt { color: var(--g-ink-muted); font-weight: 700; }
.gfacts__list dd { margin: 0; overflow-wrap: anywhere; }
.gfacts a:not(.g-btn):not(.g-badge) { color: var(--g-link); }
.gfacts .g-btns { flex-direction: column; align-items: stretch; }
.gfacts__legal { margin-top: 1.1rem; font-size: 0.85rem; color: var(--g-ink-muted); line-height: 1.5; }
.theme-hud .gfacts { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.theme-hud .gfacts__title span { display: inline-block; background: var(--g-highlight); color: var(--g-highlight-text); font-size: 0.8rem; letter-spacing: 0.08em;
  padding: 0.35rem 0.95rem; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* sections ------------------------------------------------------------------ */
.gsection__grid { display: grid; gap: clamp(1.75rem, 4.5vw, 4.5rem); align-items: center; }
.gsection--media .gsection__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.gsection--flip .gsection__text { order: 2; }
.gsection__p { font-size: 1.1rem; line-height: 1.68; max-width: 62ch; text-wrap: pretty; }
.gsection__p + .gsection__p { margin-top: 0.9rem; }
.gfeats { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gsection--media .gfeats { grid-template-columns: 1fr; }
.gfeat { padding: 1.1rem 1.25rem; border-radius: 16px; }
.on-bg .gfeat { background: var(--g-surface); }
.on-paper .gfeat { background: #fff; border: 1px solid var(--g-paper-line); }
.gfeat__name { font-size: 1.12rem; line-height: 1.2; margin-bottom: 0.35rem; }
.gfeat__text { font-size: 0.98rem; }
.on-bg .gfeat__text { color: var(--g-muted); }
.on-paper .gfeat__text { color: var(--g-ink-muted); }
.theme-hud .gfeat { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.theme-hud .gfeat__name { font-size: 1rem; letter-spacing: 0.01em; }
.gfeats--pics { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gfeats--pics .gfeat { text-align: center; padding-top: 1.5rem; }
.gfeat__pic { width: 148px; height: 148px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--g-bg) 72%); }
.gfeat__pic img { width: 88%; height: auto; }

/* media: clips and stills ------------------------------------------------------- */
.gmedia { margin: 0; position: relative; }
.gmedia :is(video, img) { width: 100%; height: auto; display: block; background: var(--g-surface); }
.gmedia figcaption { margin-top: 0.6rem; font-size: 0.9rem; opacity: 0.85; }
.theme-soft .gmedia :is(video, img) { border-radius: 20px; box-shadow: 0 26px 50px -32px rgba(0, 0, 0, 0.5); }
.theme-hud .gmedia :is(video, img) { border: 2px solid var(--g-line); }
.theme-hud .on-paper .gmedia :is(video, img) { border-color: var(--g-paper-line); }
.theme-hud .gmedia::before, .theme-hud .gmedia::after { content: ""; position: absolute; width: 28px; height: 28px; border: 3px solid var(--g-accent); pointer-events: none; }
.theme-hud .on-paper .gmedia::before, .theme-hud .on-paper .gmedia::after { border-color: var(--g-link); }
.theme-hud .gmedia::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.theme-hud .gmedia::after { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.gclip__toggle { position: absolute; top: 12px; right: 12px; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer; transition: background .2s ease; }
.gclip__toggle:hover { background: rgba(0, 0, 0, 0.82); }
.gclip__toggle:focus-visible { outline: 3px solid var(--g-accent, var(--brand-500)); outline-offset: 2px; }
.gclip__toggle[hidden] { display: none; }
.theme-hud .gclip__toggle { border-radius: 2px; }

/* trailer: nothing loads from YouTube until someone presses play ----------------- */
.gtrailer { margin-top: 2rem; }
.gtrailer__btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; overflow: hidden; border-radius: 18px; background: var(--g-bg); }
.gtrailer__poster { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gtrailer__btn:hover .gtrailer__poster { transform: scale(1.02); }
.gtrailer__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-cta); color: var(--g-cta-text); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.gtrailer__play .icon { margin-left: 4px; }
.gtrailer__note { position: absolute; right: 12px; bottom: 12px; font-size: 0.8rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.62); padding: 0.25rem 0.65rem; border-radius: 999px; }
.gtrailer iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; }

/* screenshots ---------------------------------------------------------------- */
.gshots__grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gshots__grid a { display: block; height: 100%; }
.gshots__grid img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gshots--landscape .gshots__grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gshots--landscape .gshots__grid--5 li { grid-column: span 2; }
.gshots--landscape .gshots__grid--5 li:first-child { grid-column: span 4; grid-row: span 2; }
.gshots--landscape .gshots__grid--5 li:first-child img { aspect-ratio: auto; }
.gshots--landscape .gshots__grid--5 li:nth-child(n+4) { grid-column: span 3; }
.theme-hud .gshots img { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.theme-soft .gshots img { border-radius: 16px; }
.gshots--portrait .gshots__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gshots--portrait .gshots__grid img { aspect-ratio: 9 / 16; border-radius: 22px; box-shadow: 0 22px 40px -28px rgba(0, 0, 0, 0.55); }

/* cards: each wears its own game's theme --------------------------------------- */
.gcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--g-paper);
  box-shadow: 0 0 0 1px var(--g-paper-line); transition: transform .15s ease, box-shadow .15s ease; }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--g-paper-line), 0 26px 44px -30px rgba(0, 0, 0, 0.45); }
.gcard__media { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; }
.gcard__art { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gcard:hover .gcard__art { transform: scale(1.03); }
.gcard__icon { width: 96px; height: 96px; border-radius: 22%; }
.gcard__mark { font-family: var(--g-font); font-weight: var(--g-font-weight); font-size: 2.5rem; color: var(--g-text); }
.gcard__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.gcard__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gcard__genre { color: var(--g-ink-muted); font-size: 0.85rem; font-weight: 700; }
.gcard__title { font-size: 1.55rem; line-height: 1.1; }
.gcard__title a { color: var(--g-ink); text-decoration: none; }
.gcard__title a:hover { color: var(--g-link); }
.gcard__text { color: var(--g-ink-muted); text-wrap: pretty; }
.gcard__more { margin-top: auto; padding-top: 0.5rem; font-weight: 800; text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; color: var(--g-link); }
.theme-hud.gcard { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.gcard--lg .gcard__title { font-size: 1.8rem; }

/* games: small screens ------------------------------------------------------------ */
@media (max-width: 899px) {
  .ghero__inner, .ghero__splitgrid, .gintro__grid, .gsection--media .gsection__grid { grid-template-columns: 1fr; }
  .ghero__side { order: -1; }
  .ghero__sideimg { width: min(100%, 440px); }
  .gsection--flip .gsection__text { order: 0; }
  .gfacts { position: static; }
  .gshots--portrait .gshots__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .gshots--portrait .gshots__grid li { scroll-snap-align: start; }
}
@media (max-width: 699px) {
  .ghero__img { height: auto; }
  .gshots--landscape .gshots__grid, .gshots--landscape .gshots__grid--5 { grid-template-columns: 1fr; }
  .gshots--landscape .gshots__grid--5 li, .gshots--landscape .gshots__grid--5 li:first-child, .gshots--landscape .gshots__grid--5 li:nth-child(n+4) { grid-column: auto; grid-row: auto; }
  .gshots--landscape .gshots__grid--5 li:first-child img { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Motion + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .g-btns, .gtrailer { display: none !important; }
  .on-bg, .on-paper, .site-footer { background: #fff !important; color: #000 !important; }
  a { color: inherit; }
}