/*
 * Pocket Parlor / Sublevel visual adaptation
 * Source language: ThreeUI Sublevel Studio, canonical revision 91db5c1bb779.
 */
:root,
:root[data-theme="light"],
:root[data-theme="night"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --surface: #080808;
  --surface-soft: #111;
  --ink: #e6e6e6;
  --ink-soft: #c4c4c4;
  --line: rgba(230, 230, 230, .085);
  --line-strong: rgba(230, 230, 230, .2);
  --primary: #e6e6e6;
  --primary-ink: #000;
  --coral: #ff4d00;
  --mint: #e6e6e6;
  --gold: #ff4d00;
  --violet: #757575;
  --shadow: 0 24px 48px rgba(0, 0, 0, .52);
  --shadow-small: 0 14px 30px rgba(0, 0, 0, .42);
  --shell: 88rem;
  --sans: "Bricolage", "Geist Fallback", system-ui, sans-serif;
  --serif: "Bricolage", "Geist Fallback", system-ui, sans-serif;
  --pixel: ui-monospace, "Cascadia Code", "Geist Mono Fallback", monospace;
  --radius-lg: 0;
  --radius-card: 12px;
  --radius-panel: 10px;
}

@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Arial");
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

::selection { background: var(--coral); color: #000; }

html { background: #000; }

body {
  min-width: 320px;
  background:
    linear-gradient(rgba(230, 230, 230, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 230, 230, .034) 1px, transparent 1px),
    #000;
  background-size: 48px 48px;
  color: var(--ink);
  cursor: default;
}

body::before {
  z-index: 0;
  background:
    radial-gradient(70rem 34rem at 50% -8%, rgba(255, 255, 255, .065), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px);
}

body > * { position: relative; z-index: 1; }

/* Arcade sky: the empty margins become a quiet cabinet-attract mode rather
   than dead space. It stays behind the interface and never captures input. */
.fx-sky {
  display: block;
  z-index: 0;
  opacity: 1;
}

.fx-sky::before,
.fx-sky::after {
  position: absolute;
  inset: -96px;
  content: "";
  pointer-events: none;
}

.fx-sky::before {
  background:
    radial-gradient(ellipse 36% 32% at 8% 24%, rgba(255, 77, 0, .19), transparent 72%),
    radial-gradient(ellipse 30% 28% at 92% 74%, rgba(255, 77, 0, .15), transparent 74%),
    linear-gradient(90deg, rgba(255, 77, 0, .16) 1px, transparent 1px),
    linear-gradient(rgba(255, 77, 0, .13) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 96px 96px, 96px 96px;
  mask-image: radial-gradient(ellipse 82% 72% at 50% 44%, #000 24%, transparent 78%);
  opacity: .62;
  transform: translate3d(0, 0, 0);
  animation: arcade-grid-drift 32s linear infinite;
}

.fx-sky::after {
  inset: -35% 0;
  background: linear-gradient(180deg, transparent 41%, rgba(255, 77, 0, .04) 46%, rgba(255, 77, 0, .42) 49.5%, rgba(255, 202, 170, .18) 50.25%, rgba(255, 77, 0, .06) 54%, transparent 59%);
  opacity: .82;
  transform: translate3d(0, -28%, 0);
  animation: arcade-scan-sweep 18s linear infinite;
}

.fx-stars-far { opacity: .13; }
.fx-stars-near { opacity: .22; }

.fx-sprite {
  opacity: .16;
  filter: drop-shadow(0 0 14px rgba(255, 77, 0, .42));
  mix-blend-mode: screen;
}

.fx-invader {
  top: 18%;
  left: 4%;
  width: 88px;
  background-color: var(--coral);
  animation: arcade-patrol-a 20s linear infinite alternate;
}

.fx-ghost {
  top: 61%;
  right: 4%;
  width: 72px;
  background-color: #e6e6e6;
  animation: arcade-patrol-b 24s linear -8s infinite alternate;
}

.fx-coin {
  bottom: 12%;
  left: 10%;
  width: 52px;
  background-color: var(--coral);
  animation: arcade-patrol-c 17s linear -4s infinite alternate;
}

@keyframes arcade-grid-drift {
  to { transform: translate3d(96px, 48px, 0); }
}

@keyframes arcade-scan-sweep {
  0% { opacity: 0; transform: translate3d(0, -32%, 0); }
  12% { opacity: .48; }
  88% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(0, 32%, 0); }
}

@keyframes arcade-patrol-a {
  to { transform: translate3d(26px, -30px, 0); }
}

@keyframes arcade-patrol-b {
  to { transform: translate3d(-32px, 22px, 0); }
}

@keyframes arcade-patrol-c {
  to { transform: translate3d(20px, -24px, 0); }
}

/* Wide-screen cabinet side rails. Decorative only: the playable shelf stays
   centered and the rails disappear before they could crowd its content. */
.arcade-rails { display: none; }

@media (min-width: 1720px) {
  .arcade-rails {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .arcade-rail {
    position: absolute;
    top: 50%;
    display: grid;
    width: 132px;
    gap: 14px;
    padding: 20px 16px 22px;
    border: 1px solid rgba(255, 77, 0, .48);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 77, 0, .24), rgba(16, 7, 3, .78) 28%, rgba(8, 8, 8, .68));
    box-shadow: 0 0 42px rgba(255, 77, 0, .17), inset 0 1px rgba(255, 219, 194, .16);
    color: #b8b8b8;
    transform: translateY(-50%);
  }

  .arcade-rail-left { left: max(32px, calc((100vw - var(--shell)) / 4)); }
  .arcade-rail-right { right: max(32px, calc((100vw - var(--shell)) / 4)); text-align: right; }

  .arcade-rail::before {
    position: absolute;
    z-index: 0;
    inset: 10px;
    border-block: 1px solid rgba(255, 77, 0, .3);
    content: "";
    opacity: 1;
  }

  .arcade-rail::after {
    position: absolute;
    z-index: 0;
    top: -112px;
    bottom: -112px;
    left: 50%;
    width: 1px;
    background: linear-gradient(transparent, rgba(255, 77, 0, .64) 18%, rgba(255, 77, 0, .2) 80%, transparent);
    content: "";
  }

  .arcade-rail > * { position: relative; z-index: 1; }
  .arcade-rail-index { color: var(--coral); font: 700 20px/1 var(--pixel); letter-spacing: .1em; }
  .arcade-rail-label { color: var(--ink); font: 700 11px/1.25 var(--pixel); letter-spacing: .14em; }
  .arcade-rail-readout { color: var(--coral); font: 700 13px/1.2 var(--pixel); letter-spacing: .1em; }
  .arcade-rail-meta { color: #9a9a9a; font: 600 9px/1.3 var(--pixel); letter-spacing: .12em; }
  .arcade-rail-led { width: 9px; height: 9px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 16px rgba(255, 77, 0, 1); }
  .arcade-rail-right .arcade-rail-led { justify-self: end; }

  .arcade-rail-screen {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(255, 77, 0, .32);
    background: rgba(255, 77, 0, .09);
    color: var(--coral);
  }

  .arcade-rail-screen small { color: #d2a58e; font: 600 8px/1 var(--pixel); letter-spacing: .13em; }
  .arcade-rail-screen strong { font: 700 28px/.9 var(--pixel); letter-spacing: -.08em; }
  .arcade-rail-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .arcade-rail-meter i { height: 8px; border: 1px solid rgba(255, 77, 0, .46); background: rgba(255, 77, 0, .14); }
  .arcade-rail-meter i:nth-child(-n+2) { background: var(--coral); box-shadow: 0 0 9px rgba(255, 77, 0, .7); }
  .arcade-rail-right .arcade-rail-meter i:nth-child(-n+3) { background: var(--coral); }
}

a,
button,
summary,
select,
input,
textarea { cursor: pointer; }

/* Desktop pointer language: a quiet survey reticle becomes an orange lock-on
   target only when an element can be activated. Touch devices keep native input. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("/assets/cursors/arcade-crosshair.svg") 16 16, default;
  }

  a[href],
  button:not(:disabled),
  summary,
  select:not(:disabled),
  input:not(:disabled):not([type="text"]):not([type="email"]):not([type="password"]):not([type="search"]):not([type="url"]):not([type="tel"]),
  [role="button"],
  [data-nav-toggle] {
    cursor: url("/assets/cursors/arcade-pointer.svg") 16 16, pointer;
  }

  input[type="text"]:not(:disabled),
  input[type="email"]:not(:disabled),
  input[type="password"]:not(:disabled),
  input[type="search"]:not(:disabled),
  input[type="url"]:not(:disabled),
  input[type="tel"]:not(:disabled),
  textarea:not(:disabled) {
    cursor: text;
  }

  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 1px solid var(--coral);
  outline-offset: 4px;
}

.shell { width: min(calc(100% - 32px), var(--shell)); }

/* Floating utility dock */
.site-header {
  top: 12px;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

/* The header owns the visual boundary; turn it into a live page-position cue. */
.site-header::after {
  display: none;
}

.site-scroll-progress {
  position: absolute;
  z-index: 2;
  top: 52px;
  right: 0;
  left: 0;
  height: 27px;
  overflow: visible;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

.site-scroll-progress::before {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 77, 0, 0.14);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.76);
  content: "";
}

.site-scroll-progress-fill {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    hsl(var(--scroll-hue, 18) 100% 49%) 0%,
    hsl(var(--scroll-hue, 18) 100% 58%) 72%,
    hsl(var(--scroll-hue, 18) 100% 73%) 100%
  );
  box-shadow: 0 0 12px hsl(var(--scroll-hue, 18) 100% 50% / 0.84);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

.site-scroll-progress-head {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 22px;
  height: 18px;
  color: hsl(var(--scroll-hue, 18) 100% 56%);
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}

.site-scroll-progress-head::before,
.site-scroll-progress-head::after {
  position: absolute;
  content: "";
}

.site-scroll-progress-head::before {
  inset: 0;
  background: currentColor;
  clip-path: polygon(0 39%, 31% 39%, 31% 18%, 55% 18%, 55% 0, 74% 0, 74% 20%, 100% 50%, 74% 80%, 74% 100%, 55% 100%, 55% 82%, 31% 82%, 31% 61%, 0 61%);
  box-shadow: 0 0 13px 4px hsl(var(--scroll-hue, 18) 100% 58% / 0.94);
}

.site-scroll-progress-head::after {
  inset: -8px;
  border: 1px solid hsl(var(--scroll-hue, 18) 100% 70% / 0.92);
  clip-path: polygon(0 39%, 31% 39%, 31% 18%, 55% 18%, 55% 0, 74% 0, 74% 20%, 100% 50%, 74% 80%, 74% 100%, 55% 100%, 55% 82%, 31% 82%, 31% 61%, 0 61%);
  animation: scroll-progress-head-ring 1.1s linear infinite;
}

.site-scroll-progress-control {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}

.site-scroll-progress:focus-within {
  outline: 2px solid hsl(var(--scroll-hue, 18) 100% 62% / 0.6);
  outline-offset: 2px;
}

@keyframes scroll-progress-head-ring {
  0% { transform: scale(0.86); opacity: 0.95; }
  100% { transform: scale(1.65); opacity: 0; }
}

html {
  scrollbar-width: none;
}

/* The page normally keeps its gentle anchor-link scroll. During a timeline
   scrub, position must follow the pointer exactly instead of easing behind it. */
html.sublevel-scroll-scrubbing {
  scroll-behavior: auto;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.header-inner {
  --mx: 50%;
  --my: 50%;
  --lit: 0;
  position: relative;
  min-height: 52px;
  padding: 0 8px 0 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0;
  background: rgba(17, 17, 18, .72);
  box-shadow: 0 20px 38px rgba(0, 0, 0, .5);
  backdrop-filter: blur(20px) saturate(120%);
  pointer-events: auto;
  transform: perspective(1300px) rotateX(2.4deg);
  transform-origin: 50% 100%;
}

.header-inner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(260px 130px at var(--mx) var(--my), rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 45%, transparent 72%);
  content: "";
  opacity: var(--lit);
  pointer-events: none;
  transition: opacity .35s ease;
}

.header-inner::after {
  position: absolute;
  z-index: -1;
  top: 100%;
  right: 0;
  left: 0;
  height: 9px;
  background: linear-gradient(180deg, #232322, #101010);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 9px 100%);
  content: "";
}

.brand,
.site-nav,
.header-actions { position: relative; z-index: 1; }

.brand { gap: 9px; }
.brand-mark { width: 30px; height: 30px; flex-basis: 30px; filter: none; overflow: visible; }
.brand-shell { fill: #e6e6e6; stroke: #151515; stroke-width: 4; stroke-linejoin: round; }
.brand-ridge { fill: var(--coral); stroke: #151515; stroke-width: 4; stroke-linejoin: round; }
.brand-screen { fill: #121212; stroke: #151515; stroke-width: 3; }
.brand-dpad { fill: #e6e6e6; }
.brand-button { fill: var(--coral); transform-box: fill-box; transform-origin: center; }
.brand-slot { stroke: #151515; stroke-width: 4; stroke-linecap: round; }
.brand-scan {
  fill: #ffd3bd;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: brand-screen-scan 3.6s linear infinite;
}
.brand-button-a { animation: brand-button-pulse 3.6s linear infinite; }
.brand-button-b { animation: brand-button-pulse 3.6s linear -1.8s infinite; }

@keyframes brand-screen-scan {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: 1; }
  82% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(0, 17px, 0); }
}

@keyframes brand-button-pulse {
  0%, 44%, 100% { opacity: .42; transform: scale(.9); }
  52%, 66% { opacity: 1; transform: scale(1); }
}

.brand-copy { font-size: 17px; font-weight: 700; letter-spacing: -.055em; text-transform: lowercase; }
.brand-copy::after { color: var(--coral); content: "."; }
.brand-copy small { display: none; }

.site-nav { gap: 3px; }
.site-nav a {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: rgba(232, 232, 230, .58);
  font: 600 12px/16px var(--sans);
}
.site-nav a svg { display: none; }
.site-nav a:hover { background: rgba(255, 255, 255, .07); color: #f2f2f0; }
.site-nav a[aria-current="page"] {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .09);
  color: #f6f6f4;
}

.header-actions { gap: 6px; }
.system-status {
  display: none;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 2px;
  background: rgba(0, 0, 0, .42);
  color: rgba(226, 226, 224, .8);
  font: 600 10px/1 var(--pixel);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.system-status i,
.status-led { width: 6px; height: 6px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 8px rgba(255, 77, 0, .9); animation: system-pulse 2s ease-in-out infinite; }
.system-status b { color: #757575; font-weight: 600; }
.icon-button { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 2px; background: rgba(255, 255, 255, .05); }
.icon-button:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; }

@keyframes system-pulse { 50% { opacity: .42; } }

main { overflow: clip; }

/* Modular hero */
.hero {
  min-height: 0;
  padding: clamp(88px, 8vw, 116px) 0 clamp(52px, 5vw, 72px);
}
.hero::before,
.hero::after { display: none; }
.hero-grid { gap: 16px; }
.hero-copy { align-self: end; }
.hero .eyebrow,
.page-hero .eyebrow,
.section-heading .eyebrow,
.shelf-summary .eyebrow {
  color: #757575;
  font: 600 11px/16px var(--pixel);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .eyebrow::after {
  display: inline-block;
  width: clamp(38px, 8vw, 130px);
  height: 1px;
  margin-left: 12px;
  background: rgba(230, 230, 230, .18);
  content: "";
  vertical-align: middle;
}
.hero .eyebrow i { width: 6px; height: 6px; background: var(--coral); border-radius: 0; box-shadow: 0 0 9px rgba(255, 77, 0, .8); }
.hero h1,
.page-hero h1,
.game-intro h1 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
  text-transform: none;
}
.hero h1 { max-width: 9ch; font-size: clamp(62px, 11vw, 144px); }
.hero h1 em { color: var(--ink); font-style: normal; }
.hero-copy > p { max-width: 48rem; color: var(--ink-soft); font-size: clamp(18px, 2vw, 22px); font-weight: 500; line-height: 1.35; }

.button {
  min-height: 44px;
  border: 1px solid rgba(230, 230, 230, .18);
  border-radius: 2px;
  font: 700 12px/1 var(--pixel);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.button-primary { border-color: #c63c00; background: linear-gradient(180deg, #ff5c15, #e84500); color: #000; box-shadow: 0 5px 0 #612000 !important; }
.button-primary:hover { transform: translateY(3px); box-shadow: 0 2px 0 #612000 !important; }
.button-secondary { background: rgba(255, 255, 255, .04); color: var(--ink); }
.text-link { color: var(--ink); font: 650 13px/1.2 var(--sans); }
.text-link::after { content: none; background: none; }
.text-link svg { width: 17px; height: 17px; color: var(--coral); }

@media (hover: hover) and (pointer: fine) {
  .text-link svg { transition: transform 160ms ease; }
  .text-link:hover svg { transform: translate3d(3px, 0, 0); }
}

.hero-facts {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(8, 8, 8, .7);
}
.hero-facts div { padding: 15px 16px; border-color: var(--line); }
.hero-facts dt { color: var(--ink); font: 500 24px/1 var(--sans); }
.hero-facts dd { color: #757575; font: 600 9px/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; }

.hero-feature {
  align-self: end;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: #050505;
  box-shadow: none;
}
.hero-feature::after { position: absolute; inset: 0; border: 1px solid transparent; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 68%); content: ""; opacity: var(--lit, 0); pointer-events: none; }
.hero-feature img { filter: grayscale(.9) contrast(1.08); }
.hero-feature:hover img { filter: grayscale(.15) contrast(1.05); }
.hero-feature-copy { border-radius: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(12px); }
.hero-feature-copy small { color: var(--coral); font-family: var(--pixel); }
.hero-feature-copy > i { border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px; background: #171717; color: var(--ink); }

/* Sections and diagnostic cells */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.hero + .section { padding-top: clamp(56px, 6vw, 88px); }
.section-tinted { background: rgba(5, 5, 5, .72); border-block: 1px solid var(--line); }
.section-tinted::before { background: linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(230, 230, 230, .035) 50%, transparent calc(50% + 1px)); animation: none; }
.section-heading { align-items: end; margin-bottom: 38px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); }
.section-heading h2,
.curation-grid h2 { color: var(--ink); font: 400 clamp(42px, 7vw, 82px)/.96 var(--sans); letter-spacing: -.05em; text-transform: none; }

.game-grid { gap: 12px; }
.game-card,
.collection-card,
.feature-card,
.step-card,
.note-card,
.shelf-summary,
.game-quick-facts,
.operation-brief,
.source-card,
.contact-form {
  --mx: 50%;
  --my: 50%;
  --lit: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: rgba(8, 8, 8, .86);
  box-shadow: none;
}
.game-card::after,
.collection-card::after,
.feature-card::after,
.step-card::after,
.note-card::after,
.shelf-summary::after,
.game-quick-facts::after,
.operation-brief::after,
.source-card::after,
.contact-form::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 44%, transparent 72%);
  content: "";
  opacity: var(--lit);
  pointer-events: none;
  transition: opacity .35s ease;
}
.game-card > *,
.collection-card > *,
.feature-card > *,
.step-card > *,
.note-card > *,
.shelf-summary > *,
.game-quick-facts > *,
.operation-brief > *,
.source-card > *,
.contact-form > * { position: relative; z-index: 1; }

.game-card { transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.game-card,
.collection-card { border-radius: var(--radius-card); }
.game-card::before { z-index: 3; width: 7px; height: 7px; border-top: 1px solid rgba(255, 255, 255, .45); border-left: 1px solid rgba(255, 255, 255, .45); background: transparent; content: ""; }
.game-card:hover,
.game-card:focus-within { border-color: rgba(230, 230, 230, .42); background: #0d0d0d; transform: translateY(-3px); }
.game-card-cover { border-radius: 0; background: #030303; }
.game-card-cover::after { background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .72)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px); opacity: 1; }
.game-card-cover img { filter: grayscale(.86) contrast(1.09) brightness(.84); transition: filter .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.game-card:hover .game-card-cover img,
.game-card:focus-within .game-card-cover img { filter: grayscale(.1) contrast(1.04) brightness(.96); transform: scale(1.025); }
.cover-kicker { top: 12px; left: 12px; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px; background: rgba(0, 0, 0, .72); color: var(--ink); font: 600 9px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(9px); }
.cover-action { right: 12px; bottom: 12px; padding: 8px 10px; border: 1px solid #bd3a00; border-radius: 2px; background: var(--coral); color: #000; font: 700 10px/1 var(--pixel); text-transform: uppercase; transition: transform .18s ease, filter .18s ease; }
.game-card:hover .cover-action,
.game-card:focus-within .cover-action { transform: translateX(2px); filter: brightness(1.12); }
.game-card-body { padding: 18px; background: transparent; }
.game-card-featured .game-card-body { padding: 18px; }
.card-meta,
.device-line { color: #757575; font: 600 9px/1.35 var(--pixel); letter-spacing: .08em; text-transform: uppercase; }
.game-card h3 { margin: 12px 0; color: var(--ink); font: 500 28px/1 var(--sans); letter-spacing: -.035em; text-transform: none; }
.game-card h3 a:hover { color: var(--ink); }
.game-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.gameplay-summary span { color: var(--coral); font: 600 9px/1.4 var(--pixel); letter-spacing: .1em; text-transform: uppercase; }
.device-line { padding-top: 13px; border-top: 1px solid var(--line); color: #8d8d8d; }

.game-card > .favorite-toggle {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
}
.favorite-toggle { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: rgba(0, 0, 0, .68); box-shadow: none; backdrop-filter: blur(9px); }
.favorite-toggle:hover { border-color: var(--coral); color: var(--coral); box-shadow: none; transform: translateY(-1px); }
.favorite-toggle.is-favorite { border-color: var(--coral); background: var(--coral); color: #000; box-shadow: 0 0 16px rgba(255, 77, 0, .28); }
.favorite-toggle-large { min-width: 104px; height: 44px; background: rgba(255, 255, 255, .04); color: var(--ink); }

.feature-grid,
.step-list,
.note-grid { gap: 12px; }
.feature-card,
.step-card,
.note-card { padding: 26px; }
.feature-icon { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; background: rgba(255, 255, 255, .04); color: var(--coral); }
.feature-card h3,
.step-card h3,
.note-card h3 { color: var(--ink); font-family: var(--sans); font-weight: 500; letter-spacing: -.025em; }
.feature-card p,
.step-card p,
.note-card p { color: var(--ink-soft); }
.step-num,
.note-date { color: var(--coral); font-family: var(--pixel); }
.step-num::after { height: 1px; background: var(--coral); border-radius: 0; }
.note-date { padding: 0; border: 0; border-radius: 0; background: transparent; }

.collection-grid { gap: 12px; }
.collection-card { min-height: 260px; padding: 28px; background: #080808; }
.collection-card h3 { color: var(--ink); font: 400 clamp(38px, 5vw, 58px)/.95 var(--sans); letter-spacing: -.045em; }
.collection-card p { color: var(--ink-soft); }
.collection-puzzle,
.collection-arcade,
.collection-action { background: #080808; }
.circle-link { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px; background: #151515; color: var(--ink); box-shadow: none; }
.collection-card:hover .circle-link { border-color: var(--coral); background: var(--coral); color: #000; transform: translateX(3px); }

/* Interior routes */
.page-hero { padding: clamp(150px, 17vw, 220px) 0 82px; border-bottom: 1px solid var(--line); background: transparent; }
.page-hero::before { display: none; }
.page-hero .narrow-left { max-width: 72rem; }
.page-hero h1 { max-width: 12ch; margin: 16px 0 24px; font-size: clamp(58px, 10vw, 126px); }
.page-hero p { max-width: 48rem; color: var(--ink-soft); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; }
.breadcrumbs { color: #757575; font-family: var(--pixel); font-size: 10px; text-transform: uppercase; }
.breadcrumbs span::after { color: var(--coral); }
.shelf-summary { padding: 20px; }
.shelf-summary strong { color: var(--coral); font-family: var(--pixel); font-size: 11px; text-transform: uppercase; }
.category-tabs { gap: 6px; }
.category-tab { border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(255, 255, 255, .03); color: var(--ink-soft); }
.category-tab[aria-pressed="true"] { border-color: var(--coral); background: var(--coral); color: #000; }
.category-tab-count { border-radius: 2px; background: rgba(255, 255, 255, .1); }

.game-intro { padding-top: clamp(140px, 16vw, 200px); }
.game-title-grid { border-bottom-color: var(--line-strong); }
.game-intro h1 { font-size: clamp(58px, 10vw, 124px); }
.game-quick-facts { padding: 22px; }
.game-quick-facts dt,
.source-card dt { color: #757575; font-family: var(--pixel); text-transform: uppercase; }
.play-shell { border: 1px solid var(--line-strong); border-radius: 0; background: #050505; box-shadow: none; }
.play-toolbar { border-bottom: 1px solid var(--line-strong); background: #0b0b0b; }
.toolbar-button { border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; background: rgba(255, 255, 255, .04); }
.toolbar-button:hover { border-color: var(--coral); color: var(--coral); }
.play-overlay { border: 1px solid var(--line-strong); border-radius: 0; background: rgba(5, 5, 5, .94); }
.play-overlay-icon { border-radius: 2px; background: var(--coral); color: #000; }
.section-number { color: var(--coral); font-family: var(--pixel); }
.game-guide > section { border-color: var(--line); }
.prose h2 { color: var(--ink); font-family: var(--sans); font-weight: 500; letter-spacing: -.035em; }
.prose p,
.prose li { color: var(--ink-soft); }

.empty-state { border: 1px dashed rgba(230, 230, 230, .24); border-radius: 0; background: #080808; }
.empty-state h2 { font-family: var(--sans); font-weight: 400; letter-spacing: -.04em; }

/* Terminal close */
.site-footer {
  position: relative;
  overflow: hidden;
  width: calc(100% - 28px);
  min-height: 68svh;
  margin: 90px 14px 14px;
  padding: 0 0 28px;
  border: 1px solid rgba(230, 230, 230, .14);
  border-radius: 18px;
  background: rgba(8, 8, 8, .88);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(24px) saturate(120%);
}
.site-footer::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px), radial-gradient(44rem 20rem at 50% 100%, rgba(255, 77, 0, .08), transparent 70%);
  content: "";
  pointer-events: none;
}
.footer-command { display: flex; align-items: center; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line-strong); color: #757575; font: 600 10px/1.2 var(--pixel); text-transform: uppercase; }
.footer-command strong { color: var(--coral); font-weight: 600; }
.footer-main { align-items: start; padding: clamp(54px, 8vw, 100px) 0; }
.footer-intro p { max-width: 36rem; color: var(--ink-soft); font-size: clamp(18px, 2vw, 23px); line-height: 1.35; }
.footer-links { gap: 0; border-top: 1px solid var(--line-strong); }
.footer-links a { position: relative; padding: 13px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.footer-links a::before { margin-right: 10px; color: var(--coral); content: ">"; font-family: var(--pixel); }
.footer-links a:hover { padding-left: 7px; color: #fff; }
.footer-wordmark { padding: 12px 0 22px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font: 500 clamp(38px, 10.3vw, 136px)/.82 var(--sans); letter-spacing: -.075em; white-space: nowrap; }
.footer-wordmark span { color: var(--coral); }
.footer-bottom { color: #757575; font: 600 10px/1.5 var(--pixel); text-transform: uppercase; }

@media (min-width: 720px) {
  .site-header { padding-inline: 12px; }
  .header-inner { width: min(940px, calc(100% - 24px)); }
  .system-status { display: flex; }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-copy { grid-column: 1 / 9; grid-row: 1; }
  .hero-feature { grid-column: 8 / 13; grid-row: 1; margin-top: 0; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 1080px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-grid > .game-card-featured { grid-column: auto; }
  .game-grid > .game-card-featured .game-card-cover img { aspect-ratio: 8 / 5; }
}

@media (max-width: 719px) {
  body { padding-top: 76px !important; }
  .header-inner {
    width: calc(100% - 24px);
    min-height: 50px;
    justify-content: space-between;
    transform: none;
  }
  .brand-copy { font-size: 15px; }
  .brand { min-width: 0; }
  .header-actions { flex: 0 0 auto; margin-left: auto; }
  .nav-toggle { width: 38px; height: 38px; }
  .site-nav {
    position: absolute;
    z-index: 6;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: rgba(9, 9, 9, .96);
    box-shadow: 0 20px 38px rgba(0, 0, 0, .62);
    backdrop-filter: blur(20px);
  }
  .site-nav[data-open="true"] { display: grid; }
  .site-nav a {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
    border: 0;
    border-bottom: 1px solid rgba(230, 230, 230, .14);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a::before { margin-right: 9px; color: var(--coral); content: ">"; font-family: var(--pixel); }
  .hero { min-height: auto; }
  .hero-feature { margin-top: 30px; }
  .section-heading { align-items: flex-start; }
  .footer-main { gap: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-scan,
  .brand-button,
  .site-scroll-progress-head::after { animation: none; }
  .fx-sky::before,
  .fx-sky::after { animation: none; }
  .system-status i,
  .status-led { animation: none; }
  .header-inner::before,
  .game-card::after,
  .collection-card::after,
  .feature-card::after,
  .step-card::after,
  .note-card::after,
  .shelf-summary::after,
  .game-quick-facts::after,
  .operation-brief::after,
  .source-card::after,
  .contact-form::after { display: none; }
  .game-card:hover,
  .game-card:focus-within,
  .button-primary:hover { transform: none; }
}

/* Particle Scroll: the reference page's orange-grain viewport assembly language. */
#ps-output {
  position: fixed;
  inset: 0;
  z-index: 850;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.sublevel-reveal-ready .ps-reveal {
  opacity: 0;
  filter: blur(11px) saturate(1.3);
  transform: translate3d(0, 24px, 0) scale(0.985);
  transform-origin: 50% 0;
  will-change: opacity, filter, transform;
}

html.sublevel-reveal-ready .ps-reveal.ps-in {
  animation: sublevel-particle-assemble 560ms cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

html.sublevel-reveal-ready .ps-reveal.ps-in.ps-settled {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
}

@keyframes sublevel-particle-assemble {
  0% {
    opacity: 0;
    filter: blur(11px) saturate(1.3);
    transform: translate3d(0, 24px, 0) scale(0.985);
  }

  36% {
    opacity: 0.38;
    filter: blur(7px) saturate(1.22) drop-shadow(0 0 10px rgb(255 88 0 / 35%));
  }

  72% {
    opacity: 0.92;
    filter: blur(1.6px) saturate(1.08) drop-shadow(0 0 4px rgb(255 196 42 / 18%));
    transform: translate3d(0, 2px, 0) scale(0.998);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ps-output { display: none; }

  html.sublevel-reveal-ready .ps-reveal,
  html.sublevel-reveal-ready .ps-reveal.ps-in,
  html.sublevel-reveal-ready .ps-reveal.ps-in.ps-settled {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

/* Route switch: a terminal panel seals the old screen, then unlocks the new one. */
.page-switch {
  position: fixed;
  z-index: 9999;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
}

.page-switch__field {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 100%);
  background:
    linear-gradient(rgba(230, 230, 230, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 230, 230, .055) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    #050505;
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.page-switch__field::before,
.page-switch__field::after {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
}

.page-switch__field::before {
  top: 0;
  height: 1px;
  background: rgba(230, 230, 230, .42);
  box-shadow: 0 calc(100vh - 1px) 0 rgba(230, 230, 230, .18);
}

.page-switch__field::after {
  top: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 4%, var(--coral) 4% 28%, rgba(230, 230, 230, .18) 28% 100%);
  opacity: .9;
}

.page-switch__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  opacity: 0;
  background: var(--coral);
  box-shadow: 0 0 22px rgba(255, 77, 0, .72), 14px 0 0 rgba(255, 77, 0, .13);
  transform: translateX(-16px);
}

.page-switch__readout {
  position: absolute;
  bottom: clamp(22px, 5vw, 66px);
  left: clamp(20px, 5vw, 78px);
  display: grid;
  grid-template-columns: 8px auto;
  gap: 5px 11px;
  align-items: center;
  min-width: min(27rem, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid rgba(230, 230, 230, .2);
  border-left: 2px solid var(--coral);
  background: rgba(0, 0, 0, .82);
  color: #a8a8a8;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1.3;
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
}

.page-switch__readout strong,
.page-switch__readout i {
  grid-column: 2;
  font-style: normal;
}

.page-switch__readout strong { color: #e6e6e6; font-size: 12px; font-weight: 500; }
.page-switch__readout i { color: var(--coral); font-size: 9px; }
.page-switch__led {
  grid-row: span 3;
  width: 7px;
  height: 7px;
  background: var(--coral);
  box-shadow: 0 0 11px rgba(255, 77, 0, .85);
}

html[data-page-entering="true"] .page-switch,
html[data-page-leaving="true"] .page-switch {
  visibility: visible;
}

html[data-page-entering="true"] .page-switch__field {
  animation: route-release 620ms cubic-bezier(.77, 0, .25, 1) both;
}

html[data-page-entering="true"] .page-switch__scan {
  animation: route-scan-out 560ms cubic-bezier(.77, 0, .25, 1) both;
}

html[data-page-entering="true"] .page-switch__readout {
  animation: route-readout-out 480ms ease both;
}

html[data-page-leaving="true"] .page-switch__field {
  animation: route-lock 460ms cubic-bezier(.72, 0, .2, 1) both;
}

html[data-page-leaving="true"] .page-switch__scan {
  animation: route-scan-in 420ms cubic-bezier(.72, 0, .2, 1) both;
}

html[data-page-leaving="true"] .page-switch__readout {
  animation: route-readout-in 300ms 110ms ease both;
}

html[data-page-leaving="true"] body > *:not(.page-switch) { pointer-events: none; }

@keyframes route-lock {
  from { clip-path: inset(0 0 0 100%); }
  72% { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0); }
}

@keyframes route-release {
  0%, 24% { clip-path: inset(0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes route-scan-in {
  0% { opacity: 0; transform: translateX(-16px); }
  12% { opacity: 1; }
  88%, 100% { opacity: 1; transform: translateX(calc(100vw - 2px)); }
}

@keyframes route-scan-out {
  0%, 24% { opacity: 1; transform: translateX(calc(100vw - 2px)); }
  100% { opacity: 0; transform: translateX(calc(100vw + 16px)); }
}

@keyframes route-readout-in {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes route-readout-out {
  0%, 42% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(18px, 0, 0); }
}

@media (max-width: 520px) {
  .page-switch__readout {
    font-size: 9px;
  }
  .page-switch__readout strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-switch { display: none; }
}