@font-face {
  font-family: 'HomeVideo';
  src: url('fonts/homevideo.woff2') format('woff2');
  font-display: swap;
}

:root {
  --ink: #e9f4f5;
  --ink-soft: #a9c2c5;
  --ink-dim: #6f8a8e;
  --crt: #9ef2ff;              /* MenuCrt _Tint (0.62, 0.95, 1) */
  --crt-soft: rgba(158, 242, 255, 0.14);
  --crt-line: rgba(158, 242, 255, 0.32);
  --split: rgba(255, 38, 64, 0.6);
  --yellow: #fff200;           /* the "I" in the logo */
  --panel: rgba(5, 8, 9, 0.94);
  --strip: rgba(0, 0, 0, 0.6);
  --strip-h: 68px;
  --gutter: clamp(16px, 4vw, 56px);
  --mono: 'HomeVideo', ui-monospace, 'Consolas', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
a { color: var(--crt); }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ BACKGROUND MICROSCOPE ============ */
#scope, .scope-fallback {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
#scope { opacity: 0; transition: opacity 1.2s ease; }
.scope-ready #scope { opacity: 1; }
.scope-fallback { background: #000 url('img/fallback.webp') center / cover no-repeat; opacity: 0; transition: opacity 1s; }
.no-webgl .scope-fallback { opacity: 1; }
.no-webgl #scope { display: none; }
/* faint scanlines over the whole screen, like the menu's CRT layer at rest */
.screen-lines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ============ HERO (menu layout) ============ */
.hero {
  position: fixed; z-index: 2;
  left: 50%; top: calc((100% - var(--strip-h)) / 2);
  transform: translate(-50%, -50%);
  width: min(40vw, 640px, calc((100vh - var(--strip-h) - 260px) * 1.4));
  text-align: center;
  transition: opacity .35s ease, filter .35s ease;
}
.hero-logo { width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero-tag {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-family: var(--mono); text-transform: uppercase;
  font-size: clamp(15px, 1.25vw, 21px); letter-spacing: .06em; line-height: 1.45;
  color: var(--ink); text-shadow: 0 2px 10px rgba(0,0,0,.9);
  display: inline-block; background: rgba(0,0,0,.6); padding: 10px 14px;
}
.hero-tag .date { display: block; margin-top: 8px; color: var(--crt); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(16px, 3vh, 28px); }
body.window-open .hero { opacity: .18; filter: blur(2px); }

.corner {
  position: fixed; z-index: 3; top: 18px; right: var(--gutter);
  display: flex; align-items: center; gap: 18px;
}
.corner .studio img { height: 22px; width: auto; opacity: .9; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.press-label {
  position: fixed; z-index: 3; top: 22px; left: var(--gutter);
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--ink-soft);
  text-shadow: 0 1px 6px rgba(0,0,0,.9); display: none;
}

/* ============ BUTTONS (CRT highlight like CrtHighlight.cs) ============ */
.crt-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: 17px; line-height: 1; color: var(--ink); text-decoration: none;
  padding: 13px 20px; border: 1px solid var(--crt-line); background: rgba(0,0,0,.55);
  cursor: pointer; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
}
.crt-btn::after, .nav a::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(158,242,255,.22) 45%, transparent 60%) 0 0 / 100% 300% no-repeat,
    rgba(158,242,255,.09);
  box-shadow: inset 0 0 18px rgba(158,242,255,.25);
  transition: opacity .12s linear;
  animation: band 2.4s linear infinite;
}
@keyframes band { from { background-position: 0 0, 0 120%; } to { background-position: 0 0, 0 -120%; } }
.crt-btn:hover::after, .crt-btn:focus-visible::after,
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="true"]::after { opacity: 1; }
.crt-btn:hover .lbl, .crt-btn:focus-visible .lbl,
.nav a:hover .lbl, .nav a:focus-visible .lbl, .nav a[aria-current="true"] .lbl { text-shadow: 3px 0 0 var(--split); }
.glitch .lbl { animation: glitch .16s steps(4) 1; }
@keyframes glitch {
  0% { transform: translateX(-6px); } 25% { transform: translateX(5px); }
  50% { transform: translateX(-3px); } 75% { transform: translateX(2px); } 100% { transform: none; }
}
.lbl { display: inline-block; position: relative; }
:focus { outline: none; }
:focus-visible { outline: 1px dashed var(--crt); outline-offset: 3px; }

.crt-btn.yellow { border-color: rgba(255,242,0,.55); color: var(--yellow); }
.crt-btn.yellow::after { background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    rgba(255,242,0,.10); box-shadow: inset 0 0 18px rgba(255,242,0,.25); }
.crt-btn.small { font-size: 14px; padding: 10px 14px; }
.crt-btn svg { width: 1em; height: 1em; flex: none; }

/* ============ BOTTOM STRIP (Dugmeler) ============ */
.strip {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  background: var(--strip);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nav {
  height: var(--strip-h);
  display: flex; align-items: stretch; padding: 0 calc(var(--gutter) - 14px);
  list-style: none;
}
.nav li { display: flex; }
.nav li.kit { margin-left: auto; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 clamp(12px, 1.4vw, 24px);
  font-family: var(--mono); font-size: clamp(16px, 1.35vw, 22px); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.nav a.wish { color: var(--yellow); }
.nav a.wish::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), rgba(255,242,0,.10); box-shadow: inset 0 0 18px rgba(255,242,0,.22); }
.nav a .ext { width: .8em; height: .8em; opacity: .75; }
.sound-btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,0,0,.5); color: var(--ink-soft); border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
}
.sound-btn:hover { color: var(--ink); border-color: var(--crt-line); }
.sound-btn .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.sound-btn .bars i { width: 3px; background: currentColor; height: 4px; }
.sound-btn[aria-pressed="true"] { color: var(--crt); }
.sound-btn[aria-pressed="true"] .bars i { animation: eq .9s ease-in-out infinite alternate; }
.sound-btn[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.3s; }
.sound-btn[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }

/* ============ CRT WINDOW (CrtWindow) ============ */
.window {
  position: fixed; z-index: 10;
  left: 50%; top: calc((100% - var(--strip-h)) / 2);
  width: min(980px, calc(100% - 2 * var(--gutter)));
  max-height: min(760px, calc(100% - var(--strip-h) - 56px));
  transform: translate(-50%, -50%);
  display: none; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--crt-line);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.8);
}
.window.open { display: flex; animation: tube-on .42s cubic-bezier(.2,.8,.2,1) both; }
.window.closing { display: flex; animation: tube-off .26s ease-in both; }
@keyframes tube-on {
  0%   { clip-path: inset(49.6% 50% 49.6% 50%); filter: brightness(3); }
  40%  { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.2); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes tube-off {
  0%   { clip-path: inset(0 0 0 0); filter: none; }
  60%  { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2); }
  100% { clip-path: inset(49.6% 50% 49.6% 50%); filter: brightness(3); }
}
.window::before {   /* CRT layer over the whole window */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
.window::after {    /* slow rolling band */
  content: ''; position: absolute; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(158,242,255,.035), transparent);
  animation: roll 7s linear infinite;
}
@keyframes roll { from { top: -30%; } to { top: 100%; } }

.titlebar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 20px;
  background: var(--crt-soft); border-bottom: 1px solid var(--crt-line);
  position: relative; z-index: 4;
}
.titlebar h2 {
  font-family: var(--mono); font-weight: normal; text-transform: uppercase;
  font-size: 20px; letter-spacing: .12em; color: var(--crt);
}
.titlebar h2::before { content: '> '; opacity: .6; }
.close {
  font-family: var(--mono); font-size: 15px; letter-spacing: .1em; color: var(--ink);
  background: transparent; border: 1px solid var(--crt-line); padding: 8px 12px; cursor: pointer;
  position: relative; overflow: hidden;
}
.close:hover { background: rgba(158,242,255,.12); text-shadow: 3px 0 0 var(--split); }

.win-body {
  position: relative; z-index: 2; flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: clamp(18px, 3vw, 36px);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--crt-line) transparent;
}
.win-body::-webkit-scrollbar { width: 8px; }
.win-body::-webkit-scrollbar-thumb { background: var(--crt-line); }

/* window typography */
.win-body h3 {
  font-family: var(--mono); font-weight: normal; text-transform: uppercase;
  font-size: 15px; letter-spacing: .14em; color: var(--crt); margin: 34px 0 12px;
}
.win-body h3:first-child { margin-top: 0; }
.win-body h4 { font-size: 17px; color: var(--ink); margin: 20px 0 6px; font-weight: 650; }
.win-body p { color: var(--ink-soft); margin-bottom: 12px; max-width: 72ch; }
.win-body p strong { color: var(--ink); font-weight: 600; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink) !important; line-height: 1.5; }
.rule { border: 0; border-top: 1px solid rgba(158,242,255,.16); margin: 30px 0; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid rgba(158,242,255,.18); background: rgba(158,242,255,.03);
}
.facts div { padding: 14px 16px; border-right: 1px solid rgba(158,242,255,.1); border-bottom: 1px solid rgba(158,242,255,.1); }
.facts .wide { grid-column: span 2; }
@media (max-width: 520px) { .facts .wide { grid-column: auto; } }
.facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 4px; }
.facts dd { color: var(--ink); font-size: 15px; line-height: 1.45; }

.features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.features li { border-left: 2px solid var(--crt); padding: 4px 0 4px 14px; color: var(--ink-soft); font-size: 15px; }
.features li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.req { list-style: none; color: var(--ink-soft); font-size: 15px; }
.req li { padding: 6px 0; border-bottom: 1px dashed rgba(158,242,255,.12); display: flex; gap: 12px; }
.req li span:first-child { font-family: var(--mono); color: var(--ink-dim); letter-spacing: .1em; min-width: 110px; font-size: 13px; padding-top: 3px; }

.studio-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.studio-row img { height: 34px; width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* trailer */
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--crt-line); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* screenshots */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.shot {
  position: relative; display: block; border: 1px solid rgba(158,242,255,.2); background: #000;
  cursor: zoom-in; overflow: hidden; padding: 0; color: inherit; font: inherit; text-align: left;
}
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease, filter .3s; }
.shot:hover img { transform: scale(1.04); filter: brightness(1.08); }
.shot span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); color: var(--ink);
}
.brand { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.brand a {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink-soft);
  border: 1px solid rgba(158,242,255,.2); background: rgba(158,242,255,.03);
}
.brand .pic { height: 150px; display: flex; align-items: center; justify-content: center; padding: 16px; background:
  repeating-conic-gradient(rgba(255,255,255,.05) 0 25%, transparent 0 50%) 0 0 / 18px 18px; }
.brand .pic img { max-height: 100%; width: auto; object-fit: contain; }
.brand .pic.cover { padding: 0; }
.brand .pic.cover img { width: 100%; height: 100%; object-fit: cover; }
.brand .cap { padding: 10px 12px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.brand .cap em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--crt); letter-spacing: .1em; }
.brand a:hover { border-color: var(--crt-line); color: var(--ink); }

/* steam */
.steam-card { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 26px; align-items: start; }
.steam-card img { width: 100%; border: 1px solid var(--crt-line); }
.steam-meta { list-style: none; margin: 12px 0 4px; font-size: 15px; color: var(--ink-soft); }
.steam-meta li { padding: 3px 0; }
.steam-meta b { color: var(--ink); font-weight: 600; }

/* contact */
.mail {
  display: inline-block; font-family: var(--mono); font-size: clamp(22px, 4vw, 40px); letter-spacing: .04em;
  color: var(--crt); text-decoration: none; word-break: break-all; text-shadow: 0 0 18px rgba(158,242,255,.35);
}
.mail:hover { text-shadow: 3px 0 0 var(--split), 0 0 18px rgba(158,242,255,.35); }
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.links a {
  display: block; padding: 14px 16px; border: 1px solid rgba(158,242,255,.2); text-decoration: none;
  color: var(--ink); background: rgba(158,242,255,.03);
}
.links a small { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; }
.links a:hover { border-color: var(--crt-line); background: rgba(158,242,255,.08); }
.copied { font-family: var(--mono); font-size: 13px; color: var(--crt); letter-spacing: .1em; margin-left: 10px; opacity: 0; transition: opacity .2s; }
.copied.show { opacity: 1; }

.win-foot { margin-top: 36px; font-size: 13px; color: var(--ink-dim); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.94);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  padding: 56px 12px calc(56px + env(safe-area-inset-bottom));
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--crt-line); touch-action: pan-y; }
.lb-cap { position: absolute; top: 16px; left: 16px; right: 80px; font-family: var(--mono); letter-spacing: .1em; font-size: 14px; color: var(--ink); text-transform: uppercase; }
.lb-close { position: absolute; top: 10px; right: 10px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; padding: 14px 16px; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-bottom { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; }
.lb-count { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); letter-spacing: .1em; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .nav a { font-size: 16px; padding: 0 12px; }
}
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root { --strip-h: auto; }
  .hero {
    transform: translateX(-50%);
    top: calc(64px + env(safe-area-inset-top)); width: min(88vw, 520px);
  }
  .hero-cta { justify-content: center; }
  .press-label { display: block; }
  .corner { top: 14px; gap: 10px; }
  .corner .studio { display: none; }
  .nav {
    display: grid; grid-template-columns: repeat(3, 1fr); height: auto; padding: 0;
  }
  .nav li.kit { margin-left: 0; }
  .nav li > a { flex: 1; }
  .nav a {
    justify-content: center; padding: 15px 4px; font-size: 15px; letter-spacing: .05em;
    border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav li.wishli { display: none; }
  .nav li:nth-child(3n) a { border-right: 0; }
  .window {
    left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); width: auto; transform: none;
    bottom: calc(var(--nav-real, 160px) + 8px); height: auto;
  }
  .steam-card { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .nav a { font-size: 13px; }
  .titlebar h2 { font-size: 16px; }
  .hero-tag { font-size: 14px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .shot span { font-size: 10px; padding: 14px 6px 5px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero { width: min(30vw, 360px); }
  .hero-tag { font-size: 13px; }
  .hero-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .window.open, .window.closing { animation: none; }
  .window::after, .crt-btn::after, .nav a::after { animation: none; }
  .glitch .lbl { animation: none; }
}