/* games.css: game.wegastudio.dev. Game portal group only (not shared with studio.css / hanoiz.css). */
:root {
  /* brand: navy #0b1530, navy #13214a, red #e0262e, white #f4f4f2, grey #9aa3b8 */
  --bg: oklch(0.12 0.035 265);
  --bg-deep: oklch(0.08 0.025 265);
  --surface: oklch(0.2 0.06 266);
  --surface-2: oklch(0.25 0.07 266);
  --fg: oklch(0.965 0.003 107);
  --muted: oklch(0.72 0.03 265);
  --border: oklch(0.34 0.05 266);
  --accent: oklch(0.6 0.215 25);
  --accent-hi: oklch(0.68 0.2 25);
  --accent-glow: oklch(0.6 0.215 25 / 0.45);
  --live: oklch(0.8 0.17 145);
  --font-display: "Unbounded", "Chakra Petch", system-ui, sans-serif;
  --font-body: "Chakra Petch", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --pad: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-deep); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background:
    radial-gradient(120vw 70vh at 80% -10%, oklch(0.2 0.07 266) 0%, transparent 60%),
    var(--bg);
  color: var(--fg); font: 400 17px/1.55 var(--font-body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; box-shadow: 0 0 0 5px var(--accent-glow); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- full-page overlays ---------- */
.fx-scan, .fx-noise, .fx-glow { position: fixed; inset: 0; pointer-events: none; }
.fx-scan {
  z-index: 90; mix-blend-mode: multiply; opacity: .55;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, oklch(0 0 0 / .5) 2px 3px);
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22vh; top: -22vh;
  background: linear-gradient(to bottom, transparent, oklch(1 0 0 / .045), transparent);
  animation: sweep 7s linear infinite;
}
.fx-noise {
  z-index: 91; inset: -50%; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
.fx-glow {
  z-index: 1; opacity: 0; transition: opacity .6s;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 30%), oklch(0.6 0.215 25 / .12), transparent 70%);
}
.fx-glow.on { opacity: 1; }
@keyframes sweep { to { transform: translateY(150vh); } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}

/* ---------- boot / intro ---------- */
.boot { display: none; }
.js .boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 14px;
  background: var(--bg-deep); pointer-events: none;
  animation: bootOut .5s .9s var(--ease) forwards;
}
.boot__txt { font: 500 13px/1 var(--font-mono); letter-spacing: .4em; color: var(--muted); }
.boot__txt b { color: var(--accent); font-weight: 500; }
.boot__bar { height: 2px; width: 220px; background: var(--border); position: relative; overflow: hidden; }
.boot__bar::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform-origin: left; animation: load .8s var(--ease) forwards; transform: scaleX(0); }
@keyframes load { to { transform: scaleX(1); } }
@keyframes bootOut { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- header ---------- */
.top {
  position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px var(--pad); border-bottom: 1px solid var(--border);
}
.top__logo { display: block; width: 132px; flex: none; }
.top__nav { display: flex; gap: clamp(4px, 2vw, 12px); }
.top__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: 500 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--fg); border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.top__nav a::before { content: "/"; margin-right: 8px; color: var(--muted); }
.top__nav a:hover { background: var(--surface); border-color: var(--border); }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px; padding: clamp(28px, 5vw, 64px) var(--pad) clamp(36px, 5vw, 72px);
}
.hero__hud {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 clamp(8px, 2vw, 24px);
  font: 400 12px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero__title {
  grid-column: 1 / span 11; margin: clamp(16px, 4vw, 64px) 0 0; position: relative;
  font: 900 clamp(66px, 17vw, 320px)/.82 var(--font-display); letter-spacing: -.045em;
  transform: skewX(-9deg) skewY(-3deg); transform-origin: left bottom;
}
.hero__letters { display: block; white-space: nowrap; }
.slam { display: inline-block; }
.hero__letters .slam:nth-child(3) { color: var(--accent); }
.hero__side {
  grid-column: 8 / -1; margin-top: clamp(24px, 3vw, 44px); position: relative; z-index: 3;
  background: var(--bg-deep); border: 1px solid var(--border); padding: clamp(18px, 2vw, 28px);
}
.hero__story { margin: 0 0 18px; font: 500 clamp(17px, 1.5vw, 21px)/1.45 var(--font-body); text-wrap: pretty; }
.hero__count { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.hero__count li { font: 400 13px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero__count b { color: var(--fg); font-weight: 500; margin-right: 10px; }

/* ---------- intro slam ---------- */
.js .slam { opacity: 0; transform: translateY(-0.6em) scale(1.9); filter: blur(10px); }
.js.ready .slam { animation: slam .55s calc(1.05s + var(--i) * .09s) cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-0.6em) scale(1.9); filter: blur(10px); }
  60% { opacity: 1; transform: translateY(0.04em) scale(.96); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.js.ready .hero { animation: shake .35s 1.5s steps(2) 1; }
@keyframes shake { 0%, 100% { transform: none; } 33% { transform: translate(6px, -4px); } 66% { transform: translate(-5px, 3px); } }
.js .hero__side, .js .hero__hud, .js .top { opacity: 0; transform: translateY(14px); }
.js.ready .hero__side, .js.ready .hero__hud, .js.ready .top { animation: rise .6s 1.6s var(--ease) forwards; }
.js.ready .top { animation-delay: 1.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- glitch ---------- */
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  font: inherit; letter-spacing: inherit; white-space: nowrap; opacity: 0;
}
.glitch::before { color: var(--accent); animation: glA 4.2s 2.2s infinite steps(1); }
.glitch::after { color: oklch(0.78 0.12 220); mix-blend-mode: screen; animation: glB 4.2s 2.2s infinite steps(1); }
@keyframes glA {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  87% { opacity: .9; transform: translate(-6px, 2px); clip-path: inset(12% 0 58% 0); }
  89% { opacity: .9; transform: translate(8px, -1px); clip-path: inset(62% 0 8% 0); }
  91% { opacity: .9; transform: translate(-3px, 0); clip-path: inset(34% 0 40% 0); }
  93% { opacity: 0; }
}
@keyframes glB {
  0%, 87%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  88% { opacity: .8; transform: translate(7px, 1px); clip-path: inset(48% 0 22% 0); }
  90% { opacity: .8; transform: translate(-9px, -2px); clip-path: inset(4% 0 72% 0); }
  92% { opacity: 0; }
}

/* ---------- marquee ---------- */
.marquee {
  position: relative; z-index: 3; overflow: hidden; margin: 0 -2vw;
  background: var(--accent); color: var(--fg); transform: rotate(-2.2deg);
  border-block: 2px solid var(--bg-deep); box-shadow: 0 18px 40px oklch(0 0 0 / .45);
}
.marquee__track { display: flex; width: max-content; animation: run 26s linear infinite; }
.marquee__track span {
  padding: 16px 0 14px 28px; white-space: nowrap;
  font: 900 clamp(20px, 3vw, 40px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase;
}
.marquee__track span:nth-child(even) { color: var(--bg-deep); }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- section labels ---------- */
.sec-label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.sec-label span { color: var(--fg); border: 1px solid var(--border); padding: 6px 8px; }
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(60px) skewY(2deg); clip-path: inset(0 0 35% 0); transition: opacity .8s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; clip-path: inset(-220px -220px -220px -220px); }
main { overflow-x: clip; }

/* ---------- feature: Hanoi Z ---------- */
.feature { position: relative; z-index: 2; padding: clamp(64px, 9vw, 130px) var(--pad) clamp(40px, 6vw, 90px); }
.feature .reveal { perspective: 1400px; margin-left: clamp(0px, 4vw, 80px); }
.hz {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .3s, box-shadow .4s;
  box-shadow: -14px 14px 0 var(--bg-deep);
}
.hz:hover {
  transition: transform .12s linear, border-color .3s, box-shadow .4s;
  border-color: var(--accent);
  box-shadow: -14px 14px 0 var(--bg-deep), 0 0 0 1px var(--accent), 0 0 48px var(--accent-glow), 0 0 140px oklch(0.6 0.215 25 / .18);
}
.hz__media { position: relative; overflow: hidden; background: var(--bg-deep); }
.hz__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) contrast(1.05); }
.hz:hover .hz__media img { transform: scale(1.04); filter: saturate(1.1) contrast(1.1); }
.hz__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light;
  background: radial-gradient(500px circle at var(--mx) var(--my), oklch(1 0 0 / .55), transparent 60%);
}
.hz:hover .hz__glare { opacity: 1; }
.hz__tags {
  position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
  transform: translateZ(40px);
}
.hz__tags li {
  padding: 7px 10px 6px; background: var(--bg-deep); color: var(--fg); border: 1px solid var(--border);
  font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 18px oklch(0 0 0 / .5);
}
.hz__status {
  position: absolute; left: 16px; bottom: 16px; margin: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-deep); border: 1px solid var(--border); box-shadow: 0 6px 18px oklch(0 0 0 / .5);
  font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; transform: translateZ(40px);
}
.hz__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hz__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr); gap: 18px clamp(20px, 3vw, 44px);
  padding: clamp(22px, 2.6vw, 40px); border-top: 1px solid var(--border); transform: translateZ(24px);
}
.hz__text { display: grid; gap: 16px; align-content: start; }
.hz__side { display: grid; gap: 14px; align-content: start; }
.hz__title { margin: 0; font: 900 clamp(34px, 3.6vw, 60px)/.92 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.hz__title span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--fg); font-style: italic; }
.hz__pitch { margin: 0; color: var(--fg); font-size: 17px; text-wrap: pretty; }
.hz__meta { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.hz__meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.hz__meta dt { font: 400 11px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hz__meta dd { margin: 0; font-size: 15px; font-weight: 500; }
.hz__cta { display: grid; gap: 10px; }
.hz__cta .btn { justify-content: space-between; }
.hz__ai { margin: 0; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-deep); font: 400 13px/1.5 var(--font-mono); color: var(--fg); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 52px; padding: 12px 22px;
  font: 700 15px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .3s;
}
.btn small { font: 400 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--muted); padding: 4px 6px; border: 1px solid var(--border); }
.btn--primary { background: oklch(0.52 0.2 25); color: var(--fg); clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 14px) 100%, 0 100%); }
.btn--primary:hover { background: var(--fg); color: var(--bg-deep); transform: translateX(4px); }
.btn--primary span { transition: transform .2s; }
.btn--primary:hover span { transform: translateX(4px); }
.btn--ghost { color: var(--fg); border-color: var(--border); background: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--fg); box-shadow: 0 0 24px oklch(0.965 0.003 107 / .12); }

/* ---------- strip: 4 shots running sideways ---------- */
.strip { position: relative; z-index: 2; padding: clamp(30px, 5vw, 70px) 0; }
.strip .sec-label { padding: 0 var(--pad); }
.strip__rail { overflow: hidden; transform: rotate(1.4deg); padding: 18px 0; }
.strip__track { display: flex; align-items: flex-start; width: max-content; animation: run 48s linear infinite; }
.strip__track .shot { margin-right: 18px; }
.strip__rail:hover .strip__track { animation-play-state: paused; }
.shot {
  position: relative; margin: 0; flex: none; width: clamp(240px, 30vw, 420px);
  background: var(--bg-deep); border: 1px solid var(--border); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s;
}
.shot:nth-child(odd) { transform: translateY(14px); }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.35) contrast(1.05); transition: filter .4s; }
.shot--sq { width: clamp(150px, 17vw, 236px); }
.shot--sq img { aspect-ratio: 1 / 1; }
.shot figcaption {
  padding: 10px 12px; border-top: 1px solid var(--border);
  font: 400 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.shot:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 36px var(--accent-glow); }
.shot:hover img { filter: none; }
.shot:hover figcaption { color: var(--fg); }

/* ---------- next game: classified ---------- */
.next { position: relative; z-index: 2; padding: clamp(50px, 7vw, 110px) var(--pad) clamp(70px, 9vw, 140px); }
.vault {
  position: relative; overflow: hidden; max-width: 880px; margin-left: auto;
  padding: clamp(28px, 5vw, 64px); background: repeating-linear-gradient(-45deg, var(--bg) 0 14px, oklch(0.14 0.04 265) 14px 28px);
  outline: 2px dashed var(--accent); outline-offset: -2px; animation: dash 1.6s steps(1) infinite;
}
@keyframes dash { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: oklch(0.6 0.215 25 / .25); } }
.vault__code { margin: 0 0 22px; font: 500 12px/1 var(--font-mono); letter-spacing: .22em; color: var(--muted); }
.vault__kicker { margin: 0 0 6px; font: 600 clamp(18px, 2vw, 24px)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.vault__title {
  position: relative; display: inline-block; margin: 0 0 20px;
  font: 900 clamp(40px, 8.4vw, 112px)/.9 var(--font-display); letter-spacing: -.04em; text-transform: uppercase;
}
.vault__note { margin: 0; max-width: 34ch; color: var(--muted); font: 400 14px/1.5 var(--font-mono); }
.vault__redact { position: absolute; right: clamp(20px, 5vw, 60px); top: clamp(26px, 4vw, 52px); width: 22%; height: 12px; background: var(--fg); opacity: .9; }
.vault__redact--b { top: auto; bottom: clamp(26px, 4vw, 52px); width: 34%; background: var(--accent); }

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 16px;
  padding: 44px var(--pad) 36px; border-top: 1px solid var(--border); background: var(--bg-deep);
}
.foot__brand { grid-column: 1 / span 4; }
.foot__brand img { width: 108px; }
.foot__brand p { margin: 12px 0 0; font: 400 13px/1.4 var(--font-mono); color: var(--muted); }
.foot__links { grid-column: 5 / span 4; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.foot__links a, .foot__social a, .foot__mail {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font: 500 14px/1 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; transition: color .2s;
}
.foot__links a:hover, .foot__social a:hover, .foot__mail:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 4px; }
.foot__contact { grid-column: 9 / -1; }
.foot__mail { font: 500 15px/1 var(--font-mono); text-transform: none; letter-spacing: 0; }
.foot__social { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; }
.foot__copy { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--border); font: 400 12px/1 var(--font-mono); color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hz__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hz__title { grid-column: 1 / -1; }
  .hero__side { grid-column: 4 / -1; margin-top: 28px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__links { grid-column: 1 / span 6; }
  .foot__contact { grid-column: 7 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding-block: 14px; }
  .top__logo { width: 96px; }
  .top__nav { gap: 0; }
  .top__nav a { padding: 0 8px; font-size: 11px; letter-spacing: .08em; }
  .top__nav a::before { display: none; }
  .hero__hud span:last-child { display: none; }
  .hero__title { grid-column: 1 / -1; font-size: 17vw; }
  .hero__side { grid-column: 1 / -1; margin-top: 28px; }
  .feature .reveal { margin-left: 0; }
  .hz { box-shadow: -8px 8px 0 var(--bg-deep); }
  .hz__body { grid-template-columns: minmax(0, 1fr); }
  .hz__tags { top: 10px; left: 10px; }
  .hz__status { left: 10px; bottom: 10px; }
  .hz__meta div { grid-template-columns: 84px 1fr; }
  .btn { flex: 1 1 100%; justify-content: center; }
  .vault__redact { display: none; }
  .foot__links, .foot__contact { grid-column: 1 / -1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .boot { display: none; }
  .js .slam, .js .hero__side, .js .hero__hud, .js .top, .js .reveal { opacity: 1; transform: none; filter: none; clip-path: none; animation: none; }
  .glitch::before, .glitch::after, .fx-scan::after { display: none; }
  .fx-noise { animation: none; }
  .marquee__track, .strip__track { animation: none; }
  .marquee, .strip__rail { overflow-x: auto; }
  .hz, .hz:hover { transform: none; }
  .vault { animation: none; }
}