/* ═══════════════════════════════════════════════════════════
   MegaVision Software — public site styles ("late-night arcade catalogue")
   main.css is still used by the admin panel (mvadmin99X) — public pages
   load this file instead.

   Type:   Bungee (display) · Silkscreen (pixel labels) · IBM Plex Sans (body)
   Motifs: .zx  (ZX Spectrum rainbow stripe)
           .tape (tape-loading border, footer only)
           .crt  (scanlines — on game footage only, never on text)
   ═══════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  /* Ground & surfaces */
  --bg:     #0E0F12;
  --bg2:    #16171B;
  --bg3:    #1D1F25;
  --panel:  #14151A;
  --deep:   #0A0B0D;

  /* Text */
  --ink:    #F3EFE7;
  --ink2:   #C9C5CE;
  --muted:  #ABA8B3;
  --dim:    #7F7C88;

  /* Lines */
  --line:   #2A2C34;
  --line2:  #3A3D47;
  --line-soft: #23252C;

  /* Brand */
  --accent:  #3DD68C;   /* MegaVision green */
  --accent2: #25A9E0;
  --warn:    #F8C630;
  --danger:  #EF3E42;
  --on-accent: #0E0F12;

  /* ZX Spectrum stripe */
  --zx-red:    #EF3E42;
  --zx-yellow: #F8C630;
  --zx-green:  #43B65B;
  --zx-cyan:   #25A9E0;
  --tape-blue: #2B4BD8;

  /* Paper (store panels) */
  --paper:   #F3EFE7;
  --paper2:  #E6E0D3;
  --paper-line: #D3CDBF;
  --paper-ink:  #14151A;
  --paper-muted:#45424C;

  --shadow: rgba(0,0,0,.5);
  --tile:   rgba(61,214,140,.08);
  --radius: 14px;
  --radius-sm: 8px;

  --font-title: "Bungee", "Arial Black", Impact, sans-serif;
  --font-head:  var(--font-title);
  --font-pixel: "Silkscreen", ui-monospace, Menlo, monospace;
  --font-body:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Theme-able surfaces (overridden per theme below) */
  --header-bg: rgba(14,15,18,.92);
  --strip:     #121317;
  --bezel-line:#2E3039;
  --line-hover:#4A4D58;
  --grid-line: rgba(243,239,231,.035);
  --grid-major: rgba(243,239,231,.06);
  --sprite-rgb: 61, 214, 140;        /* background sprite animation (main.js) */
  --sprite-alpha: .34;
  --tt-bg:     #050507;
  --btn-shadow:#0A0B0D;
  --field-bg:  var(--bg);
  --paper-field: #FFFFFF;
  --paper-dim: #6A6670;
  --sticker-shadow: #B8901C;
  --text-yellow: var(--zx-yellow);   /* yellow used as TEXT (fills keep --zx-yellow) */
  --on-bright: #0E0F12;              /* text on yellow / cyan / paper fills, every theme */
  --img-filter: none;                /* applied to game footage & art */

  --zx-gradient: linear-gradient(115deg, var(--zx-red) 0 25%, var(--zx-yellow) 25% 50%, var(--zx-green) 50% 75%, var(--zx-cyan) 75%);
}

/* ===== Base ===== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main{ position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; }

/* Background pixel-sprite animation (canvas drawn by main.js on the 20px grid) */
#pixelSprites{
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; transition: opacity .3s ease;
}
img{ max-width: 100%; }
a{ color: inherit; }
a:hover{ color: var(--accent); }
:focus-visible{ outline: 2px solid var(--warn); outline-offset: 3px; }
::selection{ background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4{ line-height: 1.15; }
button, input, select, textarea{ font: inherit; }

.container{ width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 28px; }
@media (max-width: 560px){ .container{ padding-inline: 16px; } }

.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Legacy decorative overlays from the old design — no longer drawn */
.noise, .scanlines{ display: none !important; }

/* ===== Signature motifs ===== */
.zx{ background: var(--zx-gradient); }
.zx-bar{ height: 5px; background: var(--zx-gradient); }
.zx-tab{ background: var(--stripe, var(--zx-gradient)); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.zx-plate{ background: var(--stripe, var(--zx-gradient)); clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.tape{
  height: 24px;
  background: repeating-linear-gradient(to bottom,
    var(--tape-blue) 0 4px, var(--zx-yellow) 4px 7px, var(--tape-blue) 7px 13px,
    var(--zx-yellow) 13px 15px, var(--tape-blue) 15px 18px, var(--zx-yellow) 18px 24px);
}
.px{ image-rendering: pixelated; }

/* CRT screen: wraps a screenshot, adds scanlines + vignette */
.crt{ position: relative; overflow: hidden; background: #000; }
.crt > img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.crt::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.6);
}
.crt > .chip, .crt > .zx-tab{ z-index: 2; }

/* Platform stripes — the small stripe on game cards, monitor badges and hero tabs follows
   the game's platform (admin: Platform). Era colours only, no logos.
   The site-wide rainbow bar and the footer tape stay: they're the MegaVision brand. */
.platform-spectrum{ --stripe: var(--zx-gradient); }
.platform-pc{ --stripe: linear-gradient(115deg, #0000FC 0.0% 8.33%, #7C00FC 8.33% 16.67%, #FC00FC 16.67% 25.0%, #FC007C 25.0% 33.33%, #FC0000 33.33% 41.67%, #FC7C00 41.67% 50.0%, #FCFC00 50.0% 58.33%, #7CFC00 58.33% 66.67%, #00FC00 66.67% 75.0%, #00FC7C 75.0% 83.33%, #00FCFC 83.33% 91.67%, #007CFC 91.67% 100.0%); }   /* VGA default palette, hue band (entries 32–54, every other one) */
.platform-c64{ --stripe: linear-gradient(115deg, #40318D 0 25%, #7869C4 25% 50%, #67B6BD 50% 75%, #FFFFFF 75%); }
.platform-amiga{ --stripe: linear-gradient(115deg, #E8262A 0 25%, #FFFFFF 25% 50%, #E8262A 50% 75%, #FFFFFF 75%); }
.platform-megadrive{ --stripe: linear-gradient(115deg, #2A2A2E 0 33.4%, #E3262C 33.4% 66.7%, #C8C8C8 66.7%); }
.platform-console{ --stripe: linear-gradient(115deg, #0B2E8A 0 33.4%, #2F6BFF 33.4% 66.7%, #A8C6FF 66.7%); }
.platform-none .zx-tab, .platform-none .zx-plate{ display: none; }
.platform-none{ --stripe: var(--line2); }
[data-theme="light"] .platform-c64{ --stripe: linear-gradient(115deg, #40318D 0 25%, #7869C4 25% 50%, #4E9AA2 50% 75%, #A9A9A9 75%); }
[data-theme="light"] .platform-amiga{ --stripe: linear-gradient(115deg, #E8262A 0 25%, #C9C9C9 25% 50%, #E8262A 50% 75%, #C9C9C9 75%); }
[data-theme="amber"] [class*="platform-"]:not(.platform-none){ --stripe: var(--zx-gradient); }   /* monochrome monitor */

/* Monitor bezel around a .crt */
.monitor{
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--bezel-line);
  border-radius: 22px;
  padding: 16px 16px 12px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
}
.monitor .crt{ border-radius: 12px; aspect-ratio: 16 / 9; }
.monitor-plate{ display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 2px; }
.monitor-brand{ font-family: var(--font-pixel); font-size: 12px; color: var(--dim); letter-spacing: .28em; }
.monitor-lights{ display: flex; align-items: center; gap: 14px; }
.monitor-lights .zx-plate{ width: 72px; height: 12px; }
.monitor-led{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Character art that breaks out of a frame */
.breakout{ position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 18px 18px rgba(0,0,0,.6)); }

/* Starburst box sticker — the star shape is ::before, so the drop-shadows aren't clipped */
.sticker{
  position: absolute; z-index: 3;
  width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--on-bright);
  font-family: var(--font-title); font-size: 15px; line-height: 1.05;
  transform: rotate(12deg);
  filter: drop-shadow(0 6px 0 var(--sticker-shadow)) drop-shadow(0 16px 18px rgba(0,0,0,.35));
}
.sticker::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--zx-yellow);
  clip-path: polygon(50.0% 0.0%, 57.1% 9.6%, 67.1% 3.0%, 70.5% 14.5%, 82.1% 11.7%, 81.4% 23.6%, 93.3% 25.0%, 88.5% 36.0%, 99.2% 41.3%, 91.0% 50.0%, 99.2% 58.7%, 88.5% 64.0%, 93.3% 75.0%, 81.4% 76.4%, 82.1% 88.3%, 70.5% 85.5%, 67.1% 97.0%, 57.1% 90.4%, 50.0% 100.0%, 42.9% 90.4%, 32.9% 97.0%, 29.5% 85.5%, 17.9% 88.3%, 18.6% 76.4%, 6.7% 75.0%, 11.5% 64.0%, 0.8% 58.7%, 9.0% 50.0%, 0.8% 41.3%, 11.5% 36.0%, 6.7% 25.0%, 18.6% 23.6%, 17.9% 11.7%, 29.5% 14.5%, 32.9% 3.0%, 42.9% 9.6%);
}

/* ===== Type helpers ===== */
.eyebrow{
  font-family: var(--font-pixel); font-size: 13px; letter-spacing: .1em;
  color: var(--accent); margin: 0 0 12px; text-transform: uppercase;
}
.eyebrow.is-yellow{ color: var(--text-yellow); }
.eyebrow.is-muted{ color: var(--muted); }
.display{
  font-family: var(--font-title); font-weight: 400; margin: 0;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.02; letter-spacing: -.005em;
}
.display-xl{ font-size: clamp(40px, 5.2vw, 72px); line-height: .98; }
.display-l { font-size: clamp(30px, 3.5vw, 46px); }
.hl{ color: var(--accent); }
.hl-yellow{ color: var(--text-yellow); }
.lede{ font-size: 19px; line-height: 1.6; color: var(--ink2); margin: 0; max-width: 560px; }
.muted{ color: var(--muted); }
.pixel{ font-family: var(--font-pixel); }

/* ===== Buttons ===== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font-family: var(--font-title); font-size: 15px; font-weight: 400; letter-spacing: .01em;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 var(--btn-shadow);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover{ color: var(--on-accent); transform: translateY(-2px); filter: brightness(1.08); }
.btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn:disabled, .btn[disabled]{ opacity: .5; cursor: default; transform: none; filter: none; }
.btn svg{ flex: none; }

.btn.secondary, .btn-ghost{
  background: transparent; color: var(--ink); border-color: var(--line2); box-shadow: none;
}
.btn.secondary:hover, .btn-ghost:hover{ color: var(--ink); border-color: var(--ink); filter: none; }
.btn-yellow{ background: var(--zx-yellow); color: var(--on-bright); }
.btn-yellow:hover{ color: var(--on-bright); }
.btn-dark{ background: var(--paper-ink); color: var(--paper); box-shadow: none; }
.btn-dark:hover{ color: var(--paper); }
.btn.smaller{ min-height: 44px; padding: 0 16px; font-size: 13px; box-shadow: 0 3px 0 var(--btn-shadow); }
.btn.secondary.smaller{ box-shadow: none; }
.btn-block{ display: flex; width: 100%; }

.text-link{ font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.arrow-link{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }

/* ===== Chips & tags ===== */
.chip{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: .04em; line-height: 1;
  padding: 6px 9px; border-radius: 4px;
  background: var(--accent); color: var(--on-accent);
}
.chip-yellow{ background: var(--zx-yellow); color: var(--on-bright); }
.chip-cyan{ background: var(--zx-cyan); color: var(--on-bright); }
.chip-red{ background: var(--zx-red); }
.chip-paper{ background: var(--paper); color: var(--paper-ink); }
.chip-outline{ background: transparent; color: var(--ink2); border: 1px solid var(--line2); }
.chip-dashed{ background: transparent; color: var(--muted); border: 1px dashed var(--line2); }
.chip-live{ background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.chip-live::before{ content: ""; width: 8px; height: 8px; background: currentColor; }
.chip-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.tagrow{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag, .tag_small{
  display: inline-flex; align-items: center;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: .03em; line-height: 1;
  color: var(--ink2); padding: 6px 9px; border-radius: 4px; border: 1px solid var(--line2);
}

/* ===== Cards (generic) ===== */
.card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3{ margin: 0 0 10px; font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.card p{ margin: 0; color: var(--muted); }
.card p + p{ margin-top: 10px; }
.card > .btn{ align-self: flex-start; }
.card[style*="align-items:center"] > .btn{ align-self: center; }

.grid2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px){
  .grid2, .grid3{ grid-template-columns: 1fr; }
}

/* ===== Sections ===== */
.section{ padding: 104px 0 0; }
.section-head{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 32px; margin-bottom: 36px;
}
.section-head p{ margin: 0; max-width: 400px; color: var(--muted); }

/* Old-style section titles (kept for pages that still use them) */
.section-title{ margin-bottom: 28px; }
.section-title h2{ font-family: var(--font-title); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); margin: 0 0 6px; line-height: 1; }
.section-title p{ margin: 0; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav-bar{ border-bottom: 1px solid var(--line-soft); }
.nav{ height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover{ color: var(--ink); }
.brand-logo{ width: 46px; height: 46px; border-radius: 50%; background: #F3EFE7; display: block; }
.brand-text{ display: flex; flex-direction: column; line-height: 1; }
.brand-name{ font-family: var(--font-title); font-size: 19px; letter-spacing: .02em; margin: 0; font-weight: 400; }
.brand-sub{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); letter-spacing: .32em; margin-top: 4px; }

.nav-links{ display: flex; align-items: center; gap: 4px; }
.nav-btn{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  font-family: var(--font-pixel); font-size: 14px; letter-spacing: .02em;
  color: var(--muted); text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.nav-btn:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.nav-btn.nav-selected{ color: var(--ink); border-bottom-color: var(--accent); }
.caret{ width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
[aria-expanded="true"] > .caret{ transform: rotate(180deg); }

.nav-item{ position: relative; }
.dropdown{
  position: absolute; top: calc(100% + 10px); left: -12px; width: 360px;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.dropdown.open{ opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown .item{
  display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.dropdown .item:hover{ background: var(--bg3); color: var(--ink); }
.dropdown .thumb{ width: 72px; height: 45px; border-radius: 6px; object-fit: cover; flex: none; background: #000; }
.dropdown .label{ margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.dropdown .desc{ font-family: var(--font-pixel); font-size: 11px; color: var(--muted); margin-top: 3px; }

.nav-cta{ display: flex; align-items: center; gap: 10px; }
.nav-login{ font-family: var(--font-pixel); font-size: 13px; color: var(--muted); text-decoration: none; padding: 10px 6px; white-space: nowrap; }
.nav-login:hover{ color: var(--ink); }
.icon-btn{
  position: relative; width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-decoration: none;
}
.icon-btn:hover{ color: var(--ink); border-color: var(--line2); background: var(--bg2); }
.nav-cart-count{
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-pixel); font-size: 12px; line-height: 20px; text-align: center;
}
.burger{ display: none; }
.burger .icon-close{ display: none; }
.burger[aria-expanded="true"] .icon-open{ display: none; }
.burger[aria-expanded="true"] .icon-close{ display: block; }

/* Mobile panel */
.mobile-panel{
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  max-height: calc(100vh - 81px); overflow-y: auto;
}
.mobile-panel.open{ display: block; }
.mobile-panel .stack{ display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 24px; }
.mobile-panel .m-link{
  display: flex; justify-content: space-between; align-items: center;
  min-height: 56px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-title); font-size: 22px; text-decoration: none; color: var(--ink);
}
.mobile-panel .m-link.nav-selected{ color: var(--accent); }
.mobile-panel .m-dot{ width: 10px; height: 10px; flex: none; }
.mobile-panel .m-sub{ display: flex; flex-direction: column; padding: 6px 0 10px 14px; border-bottom: 1px solid var(--line-soft); }
.mobile-panel .m-sub a{ padding: 10px 0; color: var(--ink2); text-decoration: none; font-size: 16px; }
.mobile-panel .m-small{ margin-top: 16px; font-family: var(--font-pixel); font-size: 13px; color: var(--muted); text-decoration: none; }

@media (max-width: 960px){
  .nav-links, .nav-login{ display: none; }
  .burger{ display: inline-flex; }
}
/* Desktop: the mobile panel never shows, even if it was left open at a narrow width */
@media (min-width: 961px){
  .mobile-panel.open{ display: none; }
}
@media (max-width: 560px){
  .nav{ height: 64px; }
  .brand-logo{ width: 38px; height: 38px; }
  .brand-sub{ display: none; }
  .brand-name{ font-size: 17px; }
}

/* User bar (shop pages) */
.user-bar{ background: var(--panel); border-bottom: 1px solid var(--line-soft); }
.user-bar-inner{ display: flex; justify-content: flex-end; align-items: center; min-height: 40px; }
.user-bar-right{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.user-bar-link, .user-bar-id{
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: .03em;
  color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0;
}
.user-bar-link:hover{ color: var(--ink); }
.user-bar-id b{ color: var(--accent); font-weight: 400; }
.user-bar-dot{ width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex: none; }
.user-bar-ico{ display: none; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer{ background: var(--deep); margin-top: auto; }
main > :nth-last-child(2):not(.site-footer){ margin-bottom: 104px; }
.footer-main{ display: flex; flex-wrap: wrap; gap: 48px; padding-top: 56px; padding-bottom: 40px; }
.footer-about{ flex: 2 1 300px; display: flex; flex-direction: column; gap: 16px; }
.footer-about p{ margin: 0; max-width: 400px; color: var(--muted); font-size: 15px; }
.footer-brand{ display: flex; align-items: center; gap: 12px; font-family: var(--font-title); font-size: 20px; }
.footer-brand img{ width: 52px; height: 52px; border-radius: 50%; background: #F3EFE7; }
.footer-col{ flex: 1 1 150px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col h2{ font-family: var(--font-pixel); font-size: 13px; font-weight: 400; color: var(--dim); margin: 0 0 4px; }
.footer-col a{ text-decoration: none; color: var(--ink); }
.footer-col a:hover{ color: var(--accent); }
.footer-legal{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--dim);
}
.footer-legal a{ color: var(--muted); }
.footer-legal nav{ display: flex; gap: 18px; }

/* ═══════════════════════════════════════════════════════════
   HOME
   ═══════════════════════════════════════════════════════════ */
.home-hero{
  position: relative; overflow: hidden;
}
.home-hero-inner{ display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding-top: 80px; padding-bottom: 92px; }
.home-hero-copy{ flex: 1 1 420px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.home-hero-copy .chip-row{ font-family: var(--font-pixel); font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.home-hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.home-hero-note{ margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.home-hero-note a{ color: var(--ink); text-underline-offset: 3px; }
.home-hero-art{ flex: 1.25 1 480px; position: relative; padding-left: 40px; min-width: 0; }
.home-hero-art .breakout{ left: -18px; bottom: -58px; height: 230px; }
.home-hero-art .sticker{ top: -40px; right: -18px; }
@media (max-width: 560px){
  .home-hero-inner{ padding-top: 40px; padding-bottom: 72px; gap: 48px; }
  .home-hero-art{ padding-left: 0; }
  .home-hero-art .breakout{ height: 130px; left: -6px; bottom: -42px; }
  .home-hero-art .sticker{ width: 92px; height: 92px; font-size: 11px; top: -32px; right: -6px; }
  .monitor{ padding: 10px 10px 8px; border-radius: 16px; }
  .monitor .crt{ border-radius: 8px; }
  .home-hero-actions .btn{ flex: 1 1 100%; }
}

/* Hero carousel — slides share one grid cell, so the hero keeps the tallest slide's height */
.hero-slides{ display: grid; }
.hero-slide{ grid-area: 1 / 1; visibility: hidden; }
.hero-slide.is-active, .hero-slide.is-leaving{ visibility: visible; }
/* channel change: the picture opens from a bright line, like a CRT powering on */
.hero-slide.is-active .monitor .crt > img{ animation: crtOn .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-slide.is-active .breakout{ animation: popIn .5s .25s cubic-bezier(.2,1.4,.4,1) both; }
.hero-slide.is-active .sticker{ animation: stickerIn .45s .35s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes crtOn{
  0%   { transform: scale(.6, .006); filter: brightness(5) saturate(0); }
  35%  { transform: scale(1, .006);  filter: brightness(4) saturate(0); }
  70%  { transform: scale(1, 1);     filter: brightness(1.6); }
  100% { transform: none;            filter: none; }
}
@keyframes popIn{ from{ opacity: 0; transform: translateY(24px) scale(.9); } to{ opacity: 1; transform: none; } }
@keyframes stickerIn{ from{ opacity: 0; transform: rotate(-30deg) scale(.4); } to{ opacity: 1; transform: rotate(12deg); } }
/* Switch-off (old slide): CRT collapses to a line, then a dot; text wipes out bottom-up */
.hero-slide.is-leaving .monitor .crt > img{ animation: crtOff .45s cubic-bezier(.6,0,.8,.4) forwards; }
.hero-slide.is-leaving .breakout{ animation: popOut .25s ease-in forwards; }
.hero-slide.is-leaving .sticker{ animation: stickerOut .22s ease-in forwards; }
.hero-slide.is-leaving .home-hero-copy > .home-hero-note{ animation: drawOut .22s steps(5) forwards; }
.hero-slide.is-leaving .home-hero-copy > .home-hero-actions{ animation: drawOut .22s steps(5) .06s forwards; }
.hero-slide.is-leaving .home-hero-copy > .lede{ animation: drawOut .26s steps(7) .12s forwards; }
.hero-slide.is-leaving .home-hero-copy > .display{ animation: drawOut .28s steps(8) .18s forwards; }
.hero-slide.is-leaving .home-hero-copy > .chip-row{ animation: drawOut .2s steps(5) .3s forwards; }
@keyframes crtOff{
  0%   { transform: none; filter: none; }
  45%  { transform: scale(1, .006); filter: brightness(4) saturate(0); }
  80%  { transform: scale(.02, .006); filter: brightness(5) saturate(0); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
@keyframes popOut{ to{ opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes stickerOut{ to{ opacity: 0; transform: rotate(40deg) scale(.3); } }
@keyframes drawOut{ from{ clip-path: inset(0 0 0 0); } to{ clip-path: inset(0 100% 0 0); } }

/* Text transition (only on slide changes — main.js adds .is-entering):
   headline types out behind a block cursor; the rest draws in like a Teletext page */
.hero-type .tc{ position: relative; }
.hero-type.is-typing .tc{ visibility: hidden; }
.hero-type.is-typing .tc.on{ visibility: visible; }
.hero-type .tc.cur::after{
  content: ""; position: absolute; left: 100%; top: .08em;
  width: .5em; height: .82em; margin-left: .06em;
  background: currentColor; visibility: visible;
  animation: cursorBlink .5s steps(1) infinite;
}
@keyframes cursorBlink{ 50%{ opacity: 0; } }
.hero-slide.is-entering .home-hero-copy > .chip-row{ animation: drawIn .3s steps(6) backwards; }
.hero-slide.is-entering .home-hero-copy > .lede{ animation: drawIn .45s steps(10) .45s backwards; }
.hero-slide.is-entering .home-hero-copy > .home-hero-actions{ animation: drawIn .3s steps(5) .75s backwards; }
.hero-slide.is-entering .home-hero-copy > .home-hero-note{ animation: drawIn .3s steps(8) .9s backwards; }
@keyframes drawIn{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
/* small pixel-art characters (admin: character size = small) */
.breakout-small{ left: -10px !important; bottom: -40px !important; height: 210px !important; }

.hero-controls{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 40px; position: relative; z-index: 4; }
.hero-tabs{ display: flex; flex-wrap: wrap; gap: 10px; }
.hero-tab{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 18px 4px 14px;
  font-family: var(--font-pixel); font-size: 13px; letter-spacing: .04em;
  color: var(--muted); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.hero-tab:hover{ color: var(--ink); border-color: var(--line2); }
.hero-tab.is-active{ color: var(--ink); border-color: var(--line2); }
.hero-tab-num{ color: var(--dim); }
.hero-tab.is-active .hero-tab-num{ color: var(--accent); }
.hero-tab-bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); }
.hero-tab-bar::after{ content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--stripe, var(--zx-gradient)); }
.hero-tab.is-active .hero-tab-bar::after{ transform: scaleX(1); }
/* autoplay: the progress bar IS the timer — main.js advances on its animationend */
.home-hero.is-playing .hero-tab.is-active .hero-tab-bar::after{ animation: heroProgress var(--hero-delay, 8s) linear both; }
.home-hero.is-paused .hero-tab.is-active .hero-tab-bar::after{ animation-play-state: paused; }
@keyframes heroProgress{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.hero-buttons{ display: flex; gap: 8px; }
.hero-buttons .i-play{ display: none; }
.hero-buttons [aria-pressed="true"] .i-play{ display: block; }
.hero-buttons [aria-pressed="true"] .i-pause{ display: none; }
@media (max-width: 560px){
  .hero-tab-label{ display: none; }
  .hero-tab{ padding: 0 16px 4px; }
  .breakout-small{ height: 120px !important; bottom: -30px !important; left: -4px !important; }
}

/* Platform strip */
.platform-strip{ border-block: 1px solid var(--line-soft); background: var(--strip); }
.platform-strip ul{
  list-style: none; margin: 0 auto; padding-block: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px;
  font-family: var(--font-pixel); font-size: 14px; color: var(--muted); letter-spacing: .06em;
}
.platform-strip li{ display: inline-flex; align-items: center; gap: 22px; }
.platform-strip li + li::before{ content: ""; width: 6px; height: 6px; background: var(--dot, var(--zx-red)); }
.platform-strip li:nth-child(4n+2){ --dot: var(--zx-red); }
.platform-strip li:nth-child(4n+3){ --dot: var(--zx-yellow); }
.platform-strip li:nth-child(4n+4){ --dot: var(--zx-green); }
.platform-strip li:nth-child(4n+5){ --dot: var(--zx-cyan); }

/* Game catalogue cards */
.game-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.game-card{
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.game-card:hover{ color: var(--ink); transform: translateY(-4px); border-color: var(--line-hover); }
.game-card .crt{ aspect-ratio: 16 / 10; }
.game-card .crt .chip{ position: absolute; top: 12px; left: 12px; }
.game-card .crt .zx-tab{ position: absolute; right: 0; bottom: 14px; width: 84px; height: 14px; }
.game-card-body{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.game-card-platforms{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.game-card h3{ margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.game-card p{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.game-card-cta{
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px;
}
.game-card:hover .game-card-cta{ color: var(--accent); }

/* Feature band (Mystic Land story) */
.feature-band{
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 24px;
  padding: 64px 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
}
.feature-copy{ flex: 1 1 400px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.feature-copy .lede{ font-size: 18px; line-height: 1.65; }
.feature-art{ flex: 1.15 1 440px; position: relative; padding-bottom: 30px; min-width: 0; }
.feature-art .crt{ border-radius: 14px; aspect-ratio: 16 / 9; border: 1px solid var(--bezel-line); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.feature-art .breakout{ right: -28px; bottom: -40px; width: 210px; }
.bullets{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bullets li{ display: flex; gap: 12px; align-items: baseline; }
.bullets li::before{ content: ""; flex: none; width: 10px; height: 10px; background: var(--b, var(--zx-red)); transform: translateY(1px); }
.bullets li:nth-child(4n+2){ --b: var(--zx-yellow); }
.bullets li:nth-child(4n+3){ --b: var(--zx-green); }
.bullets li:nth-child(4n+4){ --b: var(--zx-cyan); }
.timeline{ display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 10px; }
.timeline > div{ flex: 1 1 120px; padding-top: 14px; }
.timeline b{ display: block; font-family: var(--font-title); font-weight: 400; font-size: 22px; }
.timeline span{ font-size: 14px; color: var(--muted); }
.action-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 700px){
  .feature-band{ padding: 32px 20px 40px; gap: 36px; border-radius: 18px; }
  .feature-art .breakout{ width: 116px; right: -10px; bottom: -26px; }
}

/* Teletext news board */
.news-layout{ display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; }
.teletext{ flex: 2 1 560px; background: var(--tt-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.teletext{ --ink: #F3EFE7; --ink2: #C9C5CE; --muted: #ABA8B3; --line: #2A2C34; color: var(--ink); }
.teletext a{ color: var(--ink); }
.teletext a:hover{ color: #3DD68C; }
[data-theme="amber"] .teletext{ --ink: #FFB33C; --ink2: #F2A433; --muted: #C98B2F; --line: #3A2509; }
[data-theme="amber"] .teletext a:hover{ color: #FFD066; }
.teletext-bar{
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px;
  font-family: var(--font-pixel); font-size: 14px; letter-spacing: .04em;
}
.tt-yellow{ color: #FFE24A; }
.tt-cyan{ color: #3EE8F2; }
.teletext-title{ background: var(--tape-blue); color: #fff; padding: 10px 22px; font-family: var(--font-title); font-size: 20px; letter-spacing: .02em; margin: 0; font-weight: 400; }
.tt-item{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 24px 22px; border-bottom: 1px dashed var(--line); }
.tt-item:last-of-type{ border-bottom: 0; }
.tt-date{ font-family: var(--font-pixel); font-size: 13px; color: #FFE24A; padding-top: 3px; }
.tt-item h3{ margin: 0 0 6px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.tt-item h3 a{ text-decoration: none; }
.tt-item p{ margin: 0; color: var(--muted); font-size: 15px; }
.tt-fastext{ display: flex; font-family: var(--font-pixel); font-size: 13px; }
.tt-fastext a{ flex: 1; padding: 10px 22px; text-decoration: none; }
.tt-fastext a:hover{ filter: brightness(1.1); }
.tt-fastext .f-red{ background: #D7262D; color: #fff; }
.tt-fastext .f-green{ background: #2FAA4A; color: #06120A; }
.tt-fastext .f-yellow{ background: var(--zx-yellow); color: var(--on-bright); }
.tt-fastext .f-cyan{ background: var(--zx-cyan); color: #04121A; }
@media (max-width: 560px){
  .tt-item{ grid-template-columns: 1fr; gap: 4px; padding: 18px 16px; }
  .tt-fastext a{ padding: 10px 10px; font-size: 11px; }
  .teletext-bar{ padding: 10px 16px; font-size: 12px; }
  .teletext-bar .tt-hide-sm{ display: none; }
}

.follow-card{ flex: 1 1 300px; gap: 14px; }
.follow-card .display{ font-size: 26px; line-height: 1.1; }
.follow-list{ list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.follow-list a{
  display: flex; align-items: center; gap: 14px; min-height: 52px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600;
}
.follow-list a:hover{ color: var(--accent); }
.follow-dot{ width: 10px; height: 10px; flex: none; }
.follow-list small{ margin-left: auto; font-weight: 400; color: var(--muted); font-size: 13px; }

/* Store teaser (paper panel) */
.paper-panel{
  background: var(--paper); color: var(--paper-ink);
  border-radius: 24px; overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch;
}
.paper-panel a:not(.btn){ color: var(--paper-ink); }
.paper-shelf{
  flex: 1 1 420px; position: relative; min-height: 420px; background: var(--paper2);
  display: flex; align-items: center; justify-content: center; padding: 48px;
}
.paper-shelf .zx{ position: absolute; left: 0; right: 0; bottom: 64px; height: 26px; opacity: .9; }
.paper-shelf img{ position: relative; width: 80%; max-width: 420px; transform: rotate(-4deg); border-radius: 4px; box-shadow: 0 30px 50px rgba(20,21,26,.35), 0 2px 0 rgba(0,0,0,.2); }
.paper-copy{ flex: 1 1 420px; padding: 56px 52px; display: flex; flex-direction: column; gap: 18px; }
.paper-copy .eyebrow{ color: var(--paper-dim); }
.paper-copy p{ margin: 0; color: var(--paper-muted); font-size: 17px; line-height: 1.6; }
.price-list{ display: flex; flex-direction: column; border-top: 1px solid var(--paper-line); margin-top: 6px; }
.price-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--paper-line); }
.price-row-name{ flex: 1 1 200px; min-width: 0; }
.price-row-name b{ display: block; font-weight: 600; }
.price-row-name span{ font-size: 14px; color: var(--paper-dim); }
.price-row-price{ font-family: var(--font-title); font-size: 18px; }
@media (max-width: 560px){
  .paper-panel{ border-radius: 18px; }
  .paper-shelf{ min-height: 0; padding: 32px 24px 40px; }
  .paper-shelf .zx{ bottom: 40px; height: 18px; }
  .paper-copy{ padding: 28px 20px 32px; }
}

/* Services */
.service-num{ font-family: var(--font-title); font-size: 44px; line-height: 1; margin-bottom: 4px; }
.service-card .tagrow{ margin-top: auto; padding-top: 16px; }

/* Contact */
.contact-grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.form-stack{ display: flex; flex-direction: column; gap: 16px; }
.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field-label{ font-size: 14px; font-weight: 600; color: var(--ink); }
.input, .field input, .field textarea{
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--field-bg); color: var(--ink);
  border: 1px solid var(--line2); border-radius: var(--radius-sm); outline: none;
}
.field textarea{ min-height: 140px; resize: vertical; }
.input:focus, .field input:focus, .field textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.email-captcha-row{ display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: end; }
.captcha-row label{ font-family: var(--font-pixel); font-weight: 400; color: var(--text-yellow); }
.captcha-row input{ text-align: center; }
@media (max-width: 480px){ .email-captcha-row{ grid-template-columns: 1fr; } }
.form-toast{ font-size: 15px; font-weight: 600; }
.contact-glow{ animation: contactGlow 1.4s ease-out; }
@keyframes contactGlow{
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); border-color: var(--line); }
  25%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); border-color: var(--line); }
}
.info-list{ margin: 0 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.info-list dt{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); padding-top: 3px; }
.info-list dd{ margin: 0; }
.globe-wrap{ display: flex; justify-content: center; padding: 10px 0 0; width: 100%; }
#globe{ display: block; max-width: 100%; }
.globe-caption{ text-align: center; font-family: var(--font-pixel); font-size: 12px; color: var(--muted); margin-top: -6px; }

/* ═══════════════════════════════════════════════════════════
   GAME PAGES
   ═══════════════════════════════════════════════════════════ */
.breadcrumb{ font-family: var(--font-pixel); font-size: 13px; color: var(--dim); padding-top: 28px; }
.breadcrumb a{ color: var(--muted); text-decoration: none; }
.breadcrumb a:hover{ color: var(--ink); }
.game-hero{ display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-top: 40px; padding-bottom: 72px; }
.game-hero-copy{ flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.game-hero-art{ flex: 1.45 1 520px; display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.game-hero-art .breakout{ right: -24px; bottom: -36px; height: 200px; }
.buy-box{ background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.buy-box .btn{ justify-content: space-between; min-height: 56px; font-size: 17px; }
.buy-box-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.buy-box-row .btn{ flex: 1 1 200px; font-size: 14px; min-height: 48px; justify-content: center; }
.buy-alt{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px 0; border-top: 1px solid var(--line); font-size: 15px; text-decoration: none;
}
.buy-alt b{ font-weight: 600; }
.buy-alt span span{ color: var(--muted); }
.mode-toggle-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mode-toggle{ display: inline-flex; padding: 4px; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.mode-toggle button{
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 7px; cursor: pointer;
  font-family: var(--font-pixel); font-size: 13px; background: transparent; color: var(--muted);
}
.mode-toggle button[aria-pressed="true"]{ background: var(--accent); color: var(--on-accent); }
.mode-note{ margin: 0; font-size: 14px; color: var(--muted); }

.facts{ border-block: 1px solid var(--line-soft); background: var(--strip); }
.facts .container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: 16px; }
.fact{ padding: 26px 0; }
.fact b{ display: block; font-family: var(--font-title); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--c, var(--zx-red)); }
.fact span{ color: var(--muted); font-size: 15px; }
.fact:nth-child(4n+2){ --c: var(--text-yellow); }
.fact:nth-child(4n+3){ --c: var(--zx-green); }
.fact:nth-child(4n+4){ --c: var(--zx-cyan); }

.story{ display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.story-quote{ flex: 1.2 1 420px; min-width: 0; }
.story-quote blockquote{ margin: 0; font-family: var(--font-title); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; }
.story-text{ flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.7; color: var(--ink2); min-width: 0; }
.story-text p{ margin: 0; }

.prose-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.gallery-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery-grid .gallery-thumb:first-child{ grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gallery-thumb{
  position: relative; display: block; padding: 0; margin: 0; cursor: zoom-in;
  background: #000; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  color: inherit; transition: transform .15s ease, border-color .15s ease;
}
.gallery-thumb:hover{ transform: translateY(-3px); border-color: var(--line2); }
.gallery-thumb img{ display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.roadmap{ background: var(--panel); border: 1px solid var(--line-soft); border-radius: 24px; padding: 52px 48px; }
.roadmap ol{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px 0; }
.roadmap li{ padding: 0 18px 0 0; border-top: 6px solid var(--line2); }
.roadmap li.is-out{ border-top-color: var(--accent); }
.roadmap li.is-next{ border-top-color: var(--zx-yellow); }
.roadmap li.is-finale{ border-image: var(--zx-gradient) 1; }
.roadmap .when{ display: block; font-family: var(--font-pixel); font-size: 12px; color: var(--muted); margin-top: 14px; }
.roadmap li.is-out .when{ color: var(--accent); }
.roadmap li.is-next .when{ color: var(--text-yellow); }
.roadmap .what{ display: block; font-weight: 600; font-size: 17px; margin-top: 4px; }
@media (max-width: 560px){ .roadmap{ padding: 32px 20px; border-radius: 18px; } }

/* Gallery modal */
.gallery-modal{
  border: none; padding: 0; background: transparent; color: var(--ink);
  max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden;
}
.gallery-modal::backdrop{ background: rgba(5,5,7,.9); backdrop-filter: blur(6px); }
.gallery-modal-backdrop{ position: fixed; inset: 0; }
.gallery-modal-content{
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 40px 60px; pointer-events: none;
}
.gallery-modal-content > *{ pointer-events: auto; }
.gallery-modal-img-wrap{
  max-width: 85vw; max-height: 85vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #000; border: 1px solid var(--line2); border-radius: 12px;
}
.gallery-modal-img-wrap img{ display: block; max-width: 100%; max-height: 85vh; object-fit: contain; }
.gallery-modal-arrow{
  width: 52px; height: 52px; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink); background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 50%;
}
.gallery-modal-arrow:hover{ background: var(--bg3); border-color: var(--ink); }
.gallery-modal-counter{
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 13px; color: var(--muted); letter-spacing: .1em;
}
@media (max-width: 760px){
  .gallery-modal-content{ padding: 16px 8px; gap: 8px; }
  .gallery-modal-arrow{ width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADERS (news, store, checkout, account, legal …)
   The old ".hero / .hero-card / .title" markup renders as a
   clean page header.
   ═══════════════════════════════════════════════════════════ */
.page-head{ padding-top: 64px; padding-bottom: 8px; }
/* News, Store and Studio share one page-header style (eyebrow · display-l headline · lede) */
.page-head .display, .store-head-copy .display, .about-hero-copy .display{ margin-bottom: 14px; }

.hero{ padding: 64px 0 8px; }
.hero-grid{ display: block; }
.hero-card{ position: relative; }
.hero-card .title{
  font-family: var(--font-title); font-weight: 400; margin: 0 0 14px;
  font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -.005em;
}
.hero-card .title .glow{ color: var(--accent); }
.hero-card .lead{ margin: 0; font-size: 18px; color: var(--ink2); max-width: 640px; }
.compact-hero{ padding-bottom: 0; }
.compact-hero + section{ padding-top: 36px; }

/* ═══════════════════════════════════════════════════════════
   NEWS PAGE
   ═══════════════════════════════════════════════════════════ */
.news-layout-page{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.news-list{ display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.news-aside{ display: flex; flex-direction: column; gap: 22px; }   /* not sticky: it jittered in Safari */
/* News pager (Teletext page numbers) */
.news-pager{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.news-pager .is-disabled{ opacity: .35; pointer-events: none; }
.news-pager-pages{ display: flex; gap: 6px; flex-wrap: wrap; }
.news-pager-num{
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 10px;
  font-family: var(--font-pixel); font-size: 13px; text-decoration: none;
  color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.news-pager-num:hover{ color: var(--ink); border-color: var(--ink); }
.news-pager-num.is-current{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.news-aside .follow-card{ flex: none; }
.release-list{ list-style: none; margin: 0; padding: 0; }
.release-list a, .release-list .release-item{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.release-list li:first-child > *{ border-top: 0; padding-top: 8px; }
.release-list b{ font-weight: 600; font-size: 15px; line-height: 1.3; margin-top: 4px; }
.release-list small{ font-family: var(--font-pixel); font-size: 11px; color: var(--muted); }
.release-list a:hover b{ color: var(--accent); }
@media (max-width: 1000px){
  .news-layout-page{ grid-template-columns: 1fr; }
  .news-aside{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.news-card{ padding: 0; overflow: hidden; }
.news-card-inner{ display: flex; flex-wrap: wrap; }
/* Left column: the image sits at the top in a small CRT monitor at its own aspect ratio;
   the rest of the column is a quiet panel with the background grid, however long the post. */
.news-media{
  flex: 0 0 280px; padding: 22px 20px;
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px;
  border-right: 1px solid var(--line);
}
.monitor-sm{ padding: 8px 8px 6px; border-radius: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.monitor-sm .crt{ aspect-ratio: auto; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.monitor-sm .crt > img{ width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.monitor-sm .crt > img.px{ width: auto; min-width: 70%; max-width: 100%; min-height: 140px; }
.monitor-sm .monitor-plate{ padding: 6px 4px 0; }
.monitor-sm .monitor-brand{ font-size: 9px; letter-spacing: .22em; }
.monitor-sm .monitor-led{ width: 6px; height: 6px; }
[data-theme="light"] .monitor-sm{ box-shadow: 0 12px 24px rgba(22,23,27,.15); }
.news-content{ flex: 1 1 360px; padding: 26px 28px; min-width: 0; }
.news-header{ margin-bottom: 10px; }
.news-date{ font-family: var(--font-pixel); font-size: 13px; color: var(--text-yellow); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.news-pin{ color: var(--accent); }
.news-title{ margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 1.3; }
.news-body{ color: var(--ink2); font-size: 16px; line-height: 1.65; }
.news-body p{ margin: 0; color: inherit; }
.news-body p + p, .news-body p + ul, .news-body ul + p{ margin-top: 12px; }
.news-body a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.news-body a:hover{ color: var(--accent); }
.news-body ul, .news-body ol{ margin: 8px 0 0 22px; padding: 0; }
.news-body h2, .news-body h3{ font-size: 18px; margin: 16px 0 6px; color: var(--ink); }
.news-body img{ max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.news-body strong, .news-body b{ color: var(--ink); }
@media (max-width: 700px){
  .news-media{ flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); display: flex; justify-content: center; }
  .news-media .monitor-sm{ width: 100%; max-width: 360px; }
  .news-content{ padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════ */
.about-hero{ display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-top: 64px; }
.about-hero-copy{ flex: 1.2 1 420px; min-width: 0; }
.about-hero-art{ flex: 1 1 360px; min-width: 0; }
.about-hero-art img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; border-radius: 20px; border: 1px solid var(--line); }
/* Light (paper) theme: the illustration has transparent areas — show white behind them */
[data-theme="light"] .about-hero-art img{ background: #fff; }
.vtimeline > div{ padding: 20px 0; border-bottom: 1px solid var(--line); }
.vtimeline > div:first-child{ padding-top: 0; }
.vtimeline > div:last-child{ border-bottom: 0; }
.vtimeline b{ display: block; font-family: var(--font-title); font-weight: 400; font-size: 24px; }
.vtimeline span{ color: var(--muted); font-size: 15px; }
.long-read{ max-width: 720px; font-size: 18px; line-height: 1.75; color: var(--ink2); }
.long-read p{ margin: 0 0 20px; }
.long-read b, .long-read strong{ color: var(--ink); }

/* Legal pages */
.legal-text{ max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--ink2); }
.legal-text h3{ font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--ink); margin: 32px 0 8px; }
.legal-text p{ margin: 0 0 12px; }
.legal-text ul{ margin: 0 0 12px; padding-left: 22px; }
.legal-text li{ margin-bottom: 4px; }
.legal-text a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-text strong{ color: var(--ink); }
.legal-table{ width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.legal-table th, .legal-table td{ border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th{ font-family: var(--font-pixel); font-size: 12px; font-weight: 400; color: var(--muted); background: var(--bg2); }

/* ═══════════════════════════════════════════════════════════
   STORE
   ═══════════════════════════════════════════════════════════ */
.store-head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 64px; }
.store-head-copy{ flex: 1 1 420px; }
#shop-products{ padding-top: 36px; }

.shop-cat-bar{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.shop-cat-btn{
  min-height: 44px; padding: 0 18px; border-radius: 22px; cursor: pointer;
  font-family: var(--font-pixel); font-size: 13px;
  color: var(--ink2); background: transparent; border: 1px solid var(--line2);
}
.shop-cat-btn:hover{ border-color: var(--ink); color: var(--ink); }
.shop-cat-btn.active{ background: var(--paper); border-color: var(--paper); color: var(--on-accent); }

.shop-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

/* Card flip */
.shop-card-wrap{ height: 100%; }
/* perspective lives in the flipped transform (not on the wrapper) so resting cards render crisp */
.shop-card-inner{ position: relative; height: 100%; transition: transform .6s ease-in-out; transform-style: preserve-3d; transform: none; }
.shop-card-inner.flipped{ transform: perspective(1400px) rotateY(180deg); }
.shop-front, .shop-back{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Each face is switched off at the halfway point of the flip — the moment the card is edge-on,
   so the swap (price sticker included) is invisible. Needs the symmetric ease-in-out above:
   with it, half the time = exactly 90°. backface-visibility alone isn't enough: Safari lets
   tilted children (the price sticker) show through mirrored. */
.shop-front, .shop-back{ transition: visibility 0s linear .3s; }
.shop-card-inner.flipped .shop-front,
.shop-card-inner:not(.flipped) .shop-back{ visibility: hidden; }
.shop-front .shop-price, .shop-front .shop-preorder-band, .shop-front .shop-box-overlay{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.shop-front{ height: 100%; }
.shop-back{ position: absolute; inset: 0; transform: rotateY(180deg); }

.shop-card{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.shop-img-wrap{ position: relative; aspect-ratio: 16 / 9; background: var(--paper2); overflow: hidden; }
.shop-img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-img-composite .shop-img{ filter: saturate(.9); }
.shop-box-overlay{
  position: absolute; right: 14px; bottom: 12px; width: 42%; max-width: 180px; height: auto;
  border-radius: 4px; transform: rotate(-4deg);
  box-shadow: 0 18px 30px rgba(0,0,0,.45);
}
.shop-preorder-band{
  position: absolute; top: 22px; left: -38px; width: 170px; z-index: 2;
  text-align: center; padding: 6px 0; transform: rotate(-35deg);
  background: var(--zx-red); color: #fff; font-family: var(--font-pixel); font-size: 12px; letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); pointer-events: none;
}
.shop-card .shop-price{
  position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0;
  padding: 8px 12px; border-radius: 6px; transform: rotate(-3deg);
  font-family: var(--font-title); font-size: 18px; line-height: 1;
  background: var(--zx-yellow); color: var(--on-bright);
  box-shadow: 0 4px 0 var(--sticker-shadow);
}
.shop-info{ display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; gap: 6px; }
.shop-badge-row{ display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.shop-badge{
  display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 4px;
  font-family: var(--font-pixel); font-size: 12px; line-height: 1;
  background: var(--accent); color: var(--on-accent);
}
.shop-badge.physical{ background: var(--zx-cyan); color: var(--on-bright); }
.shop-badge-stock{ background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.shop-badge-out{ color: var(--zx-red); border-color: var(--zx-red); }
.shop-card .shop-title{ margin: 0; font-family: var(--font-body); font-size: 21px; font-weight: 600; line-height: 1.25; }
.shop-card .shop-subtitle{ margin: 0; font-family: var(--font-pixel); font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.shop-card .shop-desc{ margin: 6px 0 16px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.shop-btn-row{ display: flex; gap: 10px; margin-top: auto; }
.shop-btn-row .shop-btn{ flex: 1 1 0; }
.shop-btn-row .shop-flip-btn{ background: transparent; color: var(--ink); border-color: var(--line2); box-shadow: none; }
.shop-btn-row .shop-flip-btn:hover{ color: var(--ink); border-color: var(--ink); filter: none; }

.shop-back{ background: var(--panel); }
.shop-back-info{ position: relative; }
.shop-card .shop-price-back{ top: 16px; right: 16px; }
.shop-back .shop-title{ padding-right: 120px; }
.shop-back-info{ height: 100%; min-height: 0; }
.shop-back-details{ flex: 1; min-height: 0; overflow-y: auto; font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 10px 0 14px; padding-right: 6px; }
.shop-back-details p{ margin: 0 0 8px; }
.shop-back-details ul{ margin: 0 0 12px 20px; padding: 0; }
.shop-back-details li{ margin-bottom: 3px; }
.shop-back-details strong{ color: var(--ink); }
.shop-gallery{ display: flex; gap: 8px; flex-shrink: 0; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 12px; }
.shop-gallery-thumb{ flex: 0 0 auto; width: 80px; height: 50px; border-radius: 6px; }
.shop-gallery-thumb img{ aspect-ratio: auto; height: 100%; }

.redeem-box{ margin-top: 28px; background: var(--paper); color: var(--paper-ink); border: 0; }
.redeem-box-inner{ display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.redeem-box h3{ margin: 0 0 6px; font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--paper-ink); }
.redeem-box p{ margin: 0; color: var(--paper-muted); max-width: 560px; }
.redeem-mini-form{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.redeem-mini-form input{
  min-height: 48px; min-width: 220px; padding: 0 14px;
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: .06em;
  color: var(--paper-ink); background: var(--paper-field); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); outline: none;
}
.redeem-mini-form input:focus{ border-color: var(--paper-ink); }
.redeem-mini-form .btn{ background: var(--paper-ink); color: var(--paper); box-shadow: none; }

/* Header cart indicator (shown when the cart has items) */
.cart-icon{ display: inline-flex; }

/* Floating cart */
.float-cart{ position: fixed; top: 112px; right: 20px; z-index: 60; display: none; }
.float-cart-toggle{
  position: relative; width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent); background: var(--accent); border: 0;
  box-shadow: 0 4px 0 var(--btn-shadow), 0 16px 30px rgba(0,0,0,.5);
  transition: transform .12s ease;
}
.float-cart-toggle:hover{ transform: translateY(-2px); }
.float-cart-icon{ display: inline-flex; }
.float-cart-badge{
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--zx-yellow); color: var(--on-bright);
  font-family: var(--font-pixel); font-size: 12px; line-height: 22px; text-align: center;
}
.float-cart-panel{
  position: absolute; top: 68px; right: 0; width: 340px; max-height: 460px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--paper-ink); border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.float-cart-panel.open{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.float-cart-header{ display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--paper-ink); color: var(--paper); }
.float-cart-title{ margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 17px; }
.float-cart-close{ width: 36px; height: 36px; background: none; border: 0; color: var(--paper); font-size: 24px; cursor: pointer; line-height: 1; }
.float-cart-items{ flex: 1; overflow-y: auto; padding: 4px 18px; }
.float-cart-item{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.float-cart-item:last-child{ border-bottom: 0; }
.float-cart-item-info{ flex: 1; min-width: 0; }
.float-cart-item-name{ font-weight: 600; font-size: 14px; line-height: 1.3; }
.float-cart-item-price{ font-size: 13px; color: var(--paper-dim); margin-top: 2px; }
.float-cart-item-qty{ display: flex; align-items: center; gap: 6px; }
.float-cart-item-qty button, .checkout-item-qty button{
  width: 30px; height: 30px; padding: 0; border-radius: 6px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  border: 1px solid var(--paper-line); background: var(--paper-field); color: var(--paper-ink);
}
.float-cart-item-qty button:hover{ background: var(--paper-ink); color: var(--paper); }
.float-cart-item-qty span{ min-width: 18px; text-align: center; font-family: var(--font-pixel); font-size: 13px; }
.float-cart-item-remove{ width: 30px; height: 30px; background: none; border: 0; color: var(--paper-dim); cursor: pointer; font-size: 20px; line-height: 1; }
.float-cart-item-remove:hover{ color: var(--zx-red); }
.float-cart-empty{ text-align: center; padding: 22px; color: var(--paper-muted); }
.float-cart-footer{ padding: 14px 18px 18px; border-top: 1px solid var(--paper-line); display: flex; flex-direction: column; gap: 12px; }
.float-cart-total-row{ display: flex; justify-content: space-between; align-items: baseline; }
.float-cart-total-label{ font-weight: 600; }
.float-cart-total-value{ font-family: var(--font-title); font-size: 22px; }
.float-cart-actions{ display: flex; gap: 8px; }
.float-cart-actions .btn{ box-shadow: none; }
.float-cart-actions .float-cart-clear{ background: transparent; color: var(--paper-ink); border-color: var(--paper-line); }
.float-cart-actions .float-cart-clear:hover{ color: var(--paper-ink); border-color: var(--paper-ink); }
.float-cart-actions .float-cart-checkout{ flex: 1; background: var(--paper-ink); color: var(--paper); }
@media (max-width: 560px){
  .float-cart{ top: auto; bottom: 16px; right: 16px; }
  .float-cart-panel{ top: auto; bottom: 68px; width: calc(100vw - 32px); }
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════════ */
body.page-checkout .float-cart{ display: none !important; }
#checkout-content{ padding-top: 36px; }
.checkout-grid{ grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; }
.checkout-panel{ overflow: visible; }
.checkout-panel-title{ font-family: var(--font-title); font-weight: 400; font-size: 20px; margin: 0 0 18px; color: var(--ink); }
#checkoutForm{ display: flex; flex-direction: column; gap: 4px; }

.chk-form-group{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.chk-form-row-half{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chk-form-group label{ font-size: 14px; font-weight: 600; color: var(--ink); }
.chk-form-group > input, .chk-form-group > select, .chk-form-group > textarea, .chk-discount-row input{
  width: 100%; min-height: 48px; padding: 10px 14px;
  font-size: 16px; color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--line2); border-radius: var(--radius-sm); outline: none;
}
.chk-form-group > input:focus, .chk-discount-row input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.chk-form-group > input[readonly]{ opacity: .65; cursor: default; }
.chk-form-group input[type="checkbox"]{ width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }

.custom-select{ position: relative; }
.custom-select-trigger{
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 48px; padding: 10px 14px; font-size: 16px; text-align: left; cursor: pointer;
  color: var(--ink); background: var(--field-bg); border: 1px solid var(--line2); border-radius: var(--radius-sm); outline: none;
}
.custom-select-trigger:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.custom-select-label{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-label.placeholder{ color: var(--muted); }
.custom-select-arrow{ font-size: 12px; color: var(--muted); margin-left: 8px; transition: transform .2s ease; }
.custom-select.open .custom-select-arrow{ transform: rotate(180deg); }
.custom-select-dropdown{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 24px 50px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.custom-select.open .custom-select-dropdown{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.custom-select.open-up .custom-select-dropdown{ top: auto; bottom: calc(100% + 6px); }
.custom-select.open-up .custom-select-dropdown .custom-select-search{ order: 2; }
.custom-select.open-up .custom-select-dropdown .custom-select-options{ order: 1; }
.custom-select-search{
  width: calc(100% - 16px); margin: 8px; min-height: 40px; padding: 8px 10px; font-size: 15px;
  color: var(--ink); background: var(--field-bg); border: 1px solid var(--line2); border-radius: 6px; outline: none;
}
.custom-select-search:focus{ border-color: var(--accent); }
.custom-select-options{ max-height: 240px; overflow-y: auto; padding: 0 6px 6px; }
.custom-select-option{ padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.custom-select-option:hover{ background: var(--bg3); }
.custom-select-option.selected{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.custom-select-option.focused{ background: var(--bg3); outline: 1px solid var(--accent); outline-offset: -1px; }
.custom-select-option.hidden{ display: none; }

.chk-form-error{ font-size: 13px; font-weight: 600; color: var(--text-yellow); min-height: 0; line-height: 1.3; }
.chk-form-group.has-error > input,
.chk-form-group.has-error .custom-select-trigger{ border-color: var(--zx-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zx-yellow) 15%, transparent); }
.chk-divider{ border: 0; border-top: 1px solid var(--line); margin: 8px 0 14px; }
.card .chk-address-note{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.6; }

.checkout-pay-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.checkout-pay-row .checkout-pay-btn{ flex: 1 1 180px; min-height: 54px; font-size: 15px; }
.checkout-pay-row .checkout-pay-btn[data-method="paypal"]{ background: transparent; color: var(--ink); border-color: var(--line2); box-shadow: none; }
.checkout-pay-row .checkout-pay-btn[data-method="paypal"]:hover{ border-color: var(--ink); filter: none; }

.checkout-items{ overflow-y: auto; max-height: 420px; }
.checkout-item{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checkout-item:last-child{ border-bottom: 0; }
.checkout-item-info{ flex: 1; min-width: 0; }
.checkout-item-name{ font-weight: 600; font-size: 15px; line-height: 1.35; }
.checkout-item-type{ font-family: var(--font-pixel); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.checkout-item-price{ font-size: 14px; color: var(--muted); margin-top: 2px; }
.checkout-item-qty{ display: flex; align-items: center; gap: 6px; }
.checkout-item-qty button{ background: var(--bg3); color: var(--ink); border-color: var(--line2); }
.checkout-item-qty button:hover{ background: var(--accent); color: var(--on-accent); }
.checkout-item-qty span{ min-width: 18px; text-align: center; font-family: var(--font-pixel); font-size: 13px; }
.checkout-item-remove{ width: 30px; height: 30px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 20px; }
.checkout-item-remove:hover{ color: var(--zx-red); }
.checkout-summary-footer{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.checkout-summary-line{ display: flex; justify-content: space-between; align-items: center; padding: 3px 0; color: var(--muted); font-size: 15px; }
.checkout-summary-line.chk-discount-line span{ color: var(--accent); }
.checkout-total-row{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.checkout-total-label{ font-weight: 600; }
.checkout-total-value{ font-family: var(--font-title); font-size: 26px; }
.checkout-empty{ text-align: center; padding: 30px 10px; }
.checkout-empty p{ color: var(--muted); margin: 0 0 16px; }
.checkout-success{ text-align: center; padding: 20px 10px; }
.checkout-success h4{ font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--accent); margin: 0 0 12px; }
.checkout-success p{ margin: 0 0 8px; color: var(--ink2); }
.checkout-success .btn{ margin-top: 12px; }

.chk-discount-row{ display: flex; gap: 8px; align-items: stretch; }
.chk-discount-row input{ flex: 1; text-transform: uppercase; letter-spacing: .06em; }
.chk-discount-apply{ flex-shrink: 0; }
.chk-discount-ok{ font-size: 13px; font-weight: 600; color: var(--accent); display: block; margin-top: 2px; }

.chk-account-bar{ display: flex; margin-bottom: 18px; padding: 4px; gap: 4px; background: var(--field-bg); border: 1px solid var(--line); border-radius: 10px; }
.chk-account-tab{
  flex: 1; min-height: 40px; padding: 0 6px; border: 0; border-radius: 7px; cursor: pointer;
  font-family: var(--font-pixel); font-size: 12px; color: var(--muted); background: transparent;
  transition: background .15s, color .15s;
}
.chk-account-tab:hover:not(.active){ color: var(--ink); background: var(--bg3); }
.chk-account-tab.active{ background: var(--accent); color: var(--on-accent); }
.chk-auth-section{ margin-bottom: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.chk-auth-actions{ display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.chk-auth-ok{ font-weight: 600; color: var(--accent); }
.chk-logged-in{
  justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  font-family: var(--font-pixel); font-size: 12px; color: var(--accent);
}
@media (max-width: 900px){
  .checkout-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .chk-form-row-half{ grid-template-columns: 1fr; gap: 0; }
  .chk-account-tab{ font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT / REDEEM (re-uses some "admin-" class names)
   ═══════════════════════════════════════════════════════════ */
.account-section{ padding: 36px 0 0; }
.account-info-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.account-detail-row{ display: flex; gap: 12px; margin-bottom: 8px; font-size: 16px; }
.account-detail-label{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); min-width: 90px; padding-top: 3px; }
.account-actions{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.account-download-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.account-download-meta{ font-size: 13px; color: var(--muted); white-space: nowrap; }
.account-empty-note{ color: var(--muted); margin: 4px 0 0; }
@media (max-width: 760px){ .account-info-grid{ grid-template-columns: 1fr; } }

.my-products-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.my-product{ display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--field-bg); border: 1px solid var(--line); border-radius: 10px; }
.my-product-img{ width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #000; }
.my-product-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.my-product-name{ margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.my-product-sub{ margin: 0; font-family: var(--font-pixel); font-size: 11px; color: var(--muted); }
.my-product-meta{ font-size: 13px; color: var(--muted); }

.admin-login-section{ display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.admin-login-wrap{ display: flex; justify-content: center; width: 100%; padding-top: 48px; }
.admin-login-card{ max-width: 440px; width: 100%; padding: 36px 32px; text-align: center; }
.admin-login-title{ font-family: var(--font-title); font-weight: 400; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.admin-login-sub{ color: var(--muted); margin: 0 0 22px; }
.admin-login-error{ font-size: 14px; font-weight: 600; color: var(--text-yellow); background: color-mix(in srgb, var(--zx-yellow) 8%, transparent); border: 1px solid color-mix(in srgb, var(--zx-yellow) 30%, transparent); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.admin-login-card .chk-form-group{ text-align: left; }
.admin-login-btn{ width: 100%; margin-top: 10px; }
.admin-login-divider{ display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; }
.admin-login-divider::before, .admin-login-divider::after{ content: ""; flex: 1; height: 1px; background: var(--line); }
.admin-login-divider span{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); }

.admin-stats-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.admin-stat-card{ text-align: center; padding: 24px 16px; }
.admin-stat-number{ font-family: var(--font-title); font-size: 34px; color: var(--accent); margin-bottom: 6px; }
.admin-stat-label{ font-family: var(--font-pixel); font-size: 12px; color: var(--muted); }
@media (max-width: 700px){ .admin-stats-grid{ grid-template-columns: 1fr; } }
.admin-table-card{ padding: 24px; margin-bottom: 22px; }
.admin-card-title{ font-family: var(--font-title); font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 0 16px; }
.admin-table-wrap{ overflow-x: auto; }
.admin-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th{ font-family: var(--font-pixel); font-size: 12px; font-weight: 400; color: var(--muted); text-align: left; padding: 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.admin-table td{ padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.admin-table td small{ font-size: 13px; color: var(--muted); }
.admin-table tbody tr:hover{ background: var(--tile); }
.admin-empty{ text-align: center; color: var(--muted); padding: 30px 10px !important; }
.admin-status, .admin-badge{ display: inline-block; font-family: var(--font-pixel); font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.admin-status-pending{ background: color-mix(in srgb, var(--zx-yellow) 15%, transparent); color: var(--text-yellow); }
.admin-status-paid{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.admin-status-shipped{ background: color-mix(in srgb, var(--zx-cyan) 15%, transparent); color: var(--zx-cyan); }
.admin-status-completed{ background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.admin-status-cancelled{ background: color-mix(in srgb, var(--zx-red) 15%, transparent); color: var(--zx-red); }
.admin-badge-digital{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.admin-badge-physical{ background: color-mix(in srgb, var(--zx-cyan) 15%, transparent); color: var(--zx-cyan); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
  .shop-card-inner.flipped .shop-front{ visibility: hidden; }
}

/* ===== Small-screen guards ===== */
main{ overflow-x: clip; }
@media (max-width: 560px){
  .game-hero{ gap: 40px; padding-top: 28px; }
  .game-hero-art .breakout{ right: -4px; bottom: -28px; height: 120px !important; width: auto !important; }
  .legal-table{ display: block; overflow-x: auto; }
  .legal-text{ overflow-wrap: anywhere; }
}

/* ═══════════════════════════════════════════════════════════
   THEME SWITCHER
   ═══════════════════════════════════════════════════════════ */
.theme-switch{
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.theme-btn{
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent;
}
.theme-btn:hover{ color: var(--ink); background: var(--bg3); }
.theme-btn.active{ color: var(--on-accent); background: var(--accent); }
.theme-switch-mobile{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 18px 0 4px; }
.theme-switch-mobile .theme-switch{ flex: 1 1 280px; }
.theme-switch-mobile .anim-toggle{ flex: 1 1 100%; justify-content: center; border: 1px solid var(--line); }
.theme-switch-mobile .eyebrow{ margin: 0; }
.theme-switch-mobile .theme-btn{ flex: 1 1 0; width: auto; height: 44px; padding: 0 8px; gap: 8px; font-family: var(--font-pixel); font-size: 12px; }
@media (max-width: 960px){ .nav-cta > .theme-switch{ display: none; } }
.theme-switch .divider{ width: 1px; margin: 6px 2px; background: var(--line); }

/* ═══════════════════════════════════════════════════════════
   THEME: PAPER (light) — a beige-box catalogue
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"]{
  color-scheme: light;
  --bg:    #F4F1EA;
  --bg2:   #FFFFFF;
  --bg3:   #ECE7DC;
  --panel: #FBF9F4;
  --deep:  #E9E4D8;

  --ink:   #16171B;
  --ink2:  #38363F;
  --muted: #5B5864;
  --dim:   #6E6B76;

  --line:  #DDD7CB;
  --line2: #C5BEAF;
  --line-soft:  #E4DFD4;
  --line-hover: #A9A294;
  --bezel-line: #CFC8B8;

  --accent:    #0B7D48;
  --on-accent: #FFFFFF;
  --zx-red:    #E2323A;
  --zx-yellow: #F5BC1C;
  --zx-green:  #2FA34E;
  --zx-cyan:   #1B97D1;
  --text-yellow: #8F5B00;

  /* the "paper" accent panels flip to ink in the light theme */
  --paper:       #1B1C21;
  --paper2:      #25262C;
  --paper-line:  #3A3D47;
  --paper-ink:   #F3EFE7;
  --paper-muted: #C9C5CE;
  --paper-dim:   #ABA8B3;
  --paper-field: #0E0F12;

  --header-bg: rgba(244,241,234,.92);
  --strip:     #ECE7DC;
  --grid-line: rgba(22,23,27,.05);
  --grid-major: rgba(22,23,27,.085);
  --sprite-rgb: 11, 125, 72;
  --sprite-alpha: .26;
  --btn-shadow: rgba(22,23,27,.35);
  --field-bg:  #FBF9F4;
  --shadow:    rgba(22,23,27,.15);
  --tile:      rgba(11,125,72,.07);
}
[data-theme="light"] .monitor{ box-shadow: 0 30px 60px rgba(22,23,27,.2); }
[data-theme="light"] .feature-art .crt{ box-shadow: 0 24px 50px rgba(22,23,27,.22); }
[data-theme="light"] .breakout{ filter: drop-shadow(0 14px 14px rgba(22,23,27,.3)); }
[data-theme="light"] .brand-logo,
[data-theme="light"] .footer-brand img{ box-shadow: 0 0 0 1px var(--line2); }
[data-theme="light"] .dropdown,
[data-theme="light"] .custom-select-dropdown{ box-shadow: 0 24px 50px rgba(22,23,27,.18); }
[data-theme="light"] .paper-shelf img{ box-shadow: 0 30px 50px rgba(0,0,0,.55); }

/* ═══════════════════════════════════════════════════════════
   THEME: PHOSPHOR (amber CRT monitor)
   ═══════════════════════════════════════════════════════════ */
[data-theme="amber"]{
  --bg:    #120B03;
  --bg2:   #1A1005;
  --bg3:   #241608;
  --panel: #160E04;
  --deep:  #0B0602;

  --ink:   #FFB33C;
  --ink2:  #F2A433;
  --muted: #C98B2F;
  --dim:   #A0702A;

  --line:  #3A2509;
  --line2: #5C3B10;
  --line-soft:  #2A1B07;
  --line-hover: #7A5016;
  --bezel-line: #4A300C;

  --accent:    #FFB000;
  --accent2:   #FFC94D;
  --on-accent: #120B03;
  --zx-red:    #FF7A00;
  --zx-yellow: #FFB000;
  --zx-green:  #FFD066;
  --zx-cyan:   #E08A00;
  --tape-blue: #5A3400;
  --text-yellow: #FFD066;
  --on-bright: #120B03;

  /* paper panels become reverse-video amber blocks */
  --paper:       #FFB000;
  --paper2:      #E89E00;
  --paper-line:  #B87800;
  --paper-ink:   #160C02;
  --paper-muted: #3D2405;
  --paper-dim:   #4A2D06;
  --paper-field: #FFC94D;

  --header-bg: rgba(18,11,3,.92);
  --strip:     #170E04;
  --grid-line: rgba(255,176,0,.045);
  --grid-major: rgba(255,176,0,.08);
  --sprite-rgb: 255, 176, 0;
  --sprite-alpha: .3;
  --tt-bg:     #0B0602;
  --btn-shadow:#000;
  --field-bg:  #0E0802;
  --sticker-shadow: #A86400;
  --tile:      rgba(255,176,0,.08);

  --font-body: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --img-filter: sepia(1) saturate(2.4) hue-rotate(-14deg) brightness(.9) contrast(1.08);
}
/* phosphor glow + a whole-screen scanline/vignette overlay */
[data-theme="amber"] body{ text-shadow: 0 0 6px rgba(255,160,0,.32); }
[data-theme="amber"] body::after{
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 160px rgba(0,0,0,.75);
}
[data-theme="amber"] .paper-panel,
[data-theme="amber"] .redeem-box,
[data-theme="amber"] .float-cart-panel,
[data-theme="amber"] .btn,
[data-theme="amber"] .chip,
[data-theme="amber"] .sticker,
[data-theme="amber"] .shop-price,
[data-theme="amber"] .theme-btn.active{ text-shadow: none; }
/* game footage, character art and logos render in monochrome amber */
[data-theme="amber"] .crt > img,
[data-theme="amber"] .breakout,
[data-theme="amber"] .about-hero-art img,
[data-theme="amber"] .dropdown .thumb,
[data-theme="amber"] .brand-logo,
[data-theme="amber"] .footer-brand img,
[data-theme="amber"] .paper-shelf img{ filter: var(--img-filter); }
[data-theme="amber"] .breakout{ filter: var(--img-filter) drop-shadow(0 16px 16px rgba(0,0,0,.7)); }
[data-theme="amber"] .gallery-thumb img{ filter: var(--img-filter); transition: filter .2s ease; }
[data-theme="amber"] .gallery-thumb:hover img{ filter: none; }
[data-theme="amber"] .monitor-led{ box-shadow: 0 0 12px var(--accent); }
/* teletext goes monochrome too */
[data-theme="amber"] .teletext-bar,
[data-theme="amber"] .tt-yellow,
[data-theme="amber"] .tt-cyan,
[data-theme="amber"] .tt-date{ color: var(--ink); }
[data-theme="amber"] .teletext-title{ background: var(--accent); color: var(--on-accent); text-shadow: none; }
[data-theme="amber"] .tt-fastext a{ background: var(--bg3) !important; color: var(--ink) !important; border-right: 1px solid var(--line); }
[data-theme="amber"] .tt-fastext a:hover{ background: var(--accent) !important; color: var(--on-accent) !important; text-shadow: none; }
[data-theme="amber"] .float-cart-header{ background: var(--paper-ink); color: var(--paper); }
[data-theme="amber"] .shop-preorder-band{ color: var(--on-bright); }

@media (prefers-reduced-motion: reduce){
  [data-theme="amber"] body{ text-shadow: none; }
}

/* Game pages: small pixel-art character (admin: character size = small) */
.game-hero-art .breakout.is-small{ height: 160px; }
.story-text a, .prose-cols .card a{ color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.story-text a:hover, .prose-cols .card a:hover{ color: var(--accent); }
@media (max-width: 560px){
  .news-pager-pages{ order: -1; width: 100%; justify-content: center; }
  .news-pager > .btn{ flex: 1 1 0; }
}

/* Native dropdowns look like the text fields (Safari ignores height/padding unless its own
   appearance is switched off). The chevron is drawn with gradients so it follows the theme. */
.chk-form-group > select, .admin-status-select, .page-admin select{
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 48px; padding: 10px 42px 10px 14px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); cursor: pointer;
  background-color: var(--field-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 52%, calc(100% - 15px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid var(--line2); border-radius: var(--radius-sm); outline: none;
}
.chk-form-group > select:focus, .admin-status-select:focus, .page-admin select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.chk-form-group > select::-ms-expand{ display: none; }

/* ═══ Game ports: version tabs on game pages ═══ */
.port-switch{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.port-switch-label{ font-family: var(--font-pixel); font-size: 12px; color: var(--dim); letter-spacing: .08em; margin-right: 4px; }
.port-tab{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 14px 4px;
  font-family: var(--font-pixel); font-size: 13px; letter-spacing: .03em; text-decoration: none;
  color: var(--muted); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px;
}
.port-tab:hover{ color: var(--ink); border-color: var(--line2); }
.port-tab.is-current{ color: var(--ink); border-color: var(--ink); }
.port-tab .chip{ font-size: 11px; padding: 4px 7px; }
.port-tab-stripe{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; clip-path: none; opacity: .35; }
.port-tab.is-current .port-tab-stripe, .port-tab:hover .port-tab-stripe{ opacity: 1; }
.game-hero{ padding-top: 28px; }

/* Header dropdown: game title + its ports as small links */
.dropdown a.label{ display: block; color: var(--ink); text-decoration: none; }
.dropdown a.label:hover, .dropdown .item:hover a.label{ color: var(--accent); }
/* Whole row is clickable: stretch the title link over the item; port links sit above it */
.dropdown .item{ position: relative; cursor: pointer; }
.dropdown a.label::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dropdown .item-ports{ display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dropdown .item-ports a{ position: relative; z-index: 1; color: var(--muted); text-decoration: none; }
.dropdown .item-ports a:hover{ color: var(--accent); text-decoration: underline; }
.mobile-panel .m-sub a.m-port{ padding: 6px 0 6px 14px; font-size: 14px; color: var(--muted); }