:root {
  --bg: #060608;
  --panel: #0b0b10;
  --panel-2: #101017;
  --line: rgba(255,255,255,.11);
  --line-hi: rgba(255,255,255,.22);
  --text: #f1f2f6;
  --chrome: #dfe2ec;
  --muted: #8d8e9a;
  --dim: #55565f;
  --red: #ff2438;
  --red-hot: #ff5566;
  --red-deep: #b30f20;
  --ice: #8fe9ff;
  --ok: #54f0a0;
  --title: "Anton", Impact, sans-serif;
  --ui: "Chakra Petch", "Inter", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  /* names used by css/mocks.css */
  --display: "Chakra Petch", sans-serif;
  --mono: "Chakra Petch", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bg); }
body { margin: 0; color: var(--text); font: 400 16px/1.6 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--red); color: #000; }
main { position: relative; z-index: 1; }
kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--line-hi); border-bottom-width: 3px; border-radius: 4px; background: rgba(255,255,255,.06); font: 600 11px var(--ui); color: var(--chrome); }

.container { width: min(1220px, calc(100% - 64px)); margin-inline: auto; }
.section { position: relative; padding: 120px 0; }

/* ───────── Global effects ───────── */
.fx-frame { position: fixed; inset: 10px; z-index: 900; pointer-events: none; }
.fx-frame i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255,255,255,.45); }
.fx-frame i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.fx-frame i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.fx-frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.fx-frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; border-color: var(--red); }

.cursor { position: fixed; left: 0; top: 0; z-index: 1100; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
.cursor i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--red); border-radius: 50%; box-shadow: 0 0 10px var(--red); }
.cursor b { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50%; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease; }
.cursor b::before, .cursor b::after { content: ""; position: absolute; background: rgba(255,255,255,.7); }
.cursor b::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; transform: translateX(-50%); -webkit-mask: linear-gradient(#000 0 5px, transparent 5px calc(100% - 5px), #000 0); mask: linear-gradient(#000 0 5px, transparent 5px calc(100% - 5px), #000 0); }
.cursor b::after { top: 50%; left: -6px; right: -6px; height: 1.5px; transform: translateY(-50%); -webkit-mask: linear-gradient(90deg, #000 0 5px, transparent 5px calc(100% - 5px), #000 0); mask: linear-gradient(90deg, #000 0 5px, transparent 5px calc(100% - 5px), #000 0); }
.cursor.hover b { transform: scale(1.7) rotate(45deg); border-color: var(--red); background: rgba(255,36,56,.12); }
.cursor.down b { transform: scale(.7); }

/* ───────── Boot screen ───────── */
.boot { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #030304; transition: opacity .5s ease, visibility .5s ease; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(440px, 86vw); display: grid; gap: 16px; }
.boot-inner img { width: 96px; filter: drop-shadow(0 0 22px rgba(255,36,56,.5)); }
.boot-log { margin: 0; min-height: 84px; font: 500 12.5px/1.7 var(--ui); letter-spacing: .06em; color: #aeb1bf; white-space: pre-wrap; }
.boot-log b { color: var(--ok); font-weight: 600; }
.boot-bar { height: 8px; border: 1px solid var(--line-hi); padding: 1px; }
.boot-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 11px); box-shadow: 0 0 14px rgba(255,36,56,.6); }
.boot-meta { display: flex; justify-content: space-between; font: 600 11px var(--ui); letter-spacing: .22em; color: var(--muted); }
.boot-meta b { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.boot-skip { font: 600 10px var(--ui); letter-spacing: .4em; color: var(--dim); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───────── Top bar (HUD) ───────── */
.topbar { position: fixed; z-index: 800; top: 22px; left: 32px; right: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(var(--bg) 25%, transparent); }

.player { display: flex; align-items: center; gap: 12px; width: max-content; }
.player-meta { display: grid; gap: 4px; }
.player-meta b { font: 700 15px/1 var(--ui); letter-spacing: .28em; }
.hp { display: block; width: 150px; height: 8px; background: rgba(255,255,255,.1); transform: skewX(-20deg); overflow: hidden; }
.hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transform: scaleX(0); transform-origin: left; will-change: transform; }
.player-meta small { font: 600 9.5px var(--ui); letter-spacing: .22em; color: var(--muted); }

.tabs { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(8,8,12,.92); border: 1px solid var(--line); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.tabs kbd { margin: 0 6px; }
.tabs a { position: relative; padding: 9px 16px; font: 600 12.5px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: color .2s ease, background .2s ease; }
.tabs a:hover { color: #fff; }
.tabs a.active { color: #fff; background: linear-gradient(180deg, transparent, rgba(255,36,56,.25)); }
.tabs a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); }

.cta-btn { justify-self: end; display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 26px; background: var(--red); color: #080809; font: 700 12.5px var(--ui); letter-spacing: .18em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background .2s ease, transform .2s ease; }
.cta-btn i { font-style: normal; transition: transform .25s ease; }
.cta-btn:hover { background: #fff; transform: translateY(-2px); }
.cta-btn:hover i { transform: translate(3px, -3px); }

.burger { display: none; justify-self: end; width: 46px; height: 46px; border: 1px solid var(--line-hi); background: rgba(8,8,12,.8); position: relative; padding: 0; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; transition: transform .25s ease, top .25s ease; }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 26px; }
.burger[aria-expanded="true"] i:first-child { top: 22px; transform: rotate(45deg); background: var(--red); }
.burger[aria-expanded="true"] i:last-child { top: 22px; transform: rotate(-45deg); background: var(--red); }

.drawer { position: fixed; z-index: 790; inset: 0; display: grid; align-content: center; gap: 4px; padding: 90px 32px 40px; background: rgba(5,5,7,.96); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.drawer.open { opacity: 1; visibility: visible; }
.drawer a { font: 400 clamp(44px, 12vw, 72px)/1.1 var(--title); text-transform: uppercase; color: var(--chrome); border-bottom: 1px solid var(--line); padding: 8px 0; }
.drawer a:hover { color: var(--red); }
.drawer .drawer-cta { margin-top: 24px; border: 0; background: var(--red); color: #000; text-align: center; font: 700 16px var(--ui); letter-spacing: .2em; padding: 18px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }

/* ───────── Side HUD ───────── */

.hint { position: fixed; z-index: 700; bottom: 24px; display: none; align-items: center; gap: 8px; font: 500 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
.hint-l { left: 34px; } .hint-r { right: 34px; }
.hint kbd { min-width: 22px; height: 22px; font-size: 10px; }
.hint .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.hint #clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.toasts { position: fixed; z-index: 950; right: 32px; bottom: 60px; display: grid; gap: 10px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; min-width: 270px; padding: 12px 18px 12px 12px; background: rgba(10,10,14,.94); border: 1px solid var(--line-hi); border-left: 3px solid var(--red); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); animation: toast-in .5s cubic-bezier(.2,.9,.25,1) both; }
.toast.out { animation: toast-out .4s ease forwards; }
.toast .ico { width: 38px; height: 38px; display: grid; place-items: center; background: var(--red); color: #000; font: 700 18px var(--ui); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.toast small { display: block; font: 600 9.5px var(--ui); letter-spacing: .28em; color: var(--red); }
.toast b { font: 600 14px var(--ui); letter-spacing: .06em; }
@keyframes toast-in { from { transform: translateX(120%); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(120%); opacity: 0; } }

/* ───────── Hero effects (all inside the hero, so nothing runs once you scroll past) ───────── */
.hero-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; contain: strict; }
.floor { position: absolute; left: 0; bottom: 0; width: 100%; height: 44%; }
.floor-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; overflow: hidden; }
.floor-sweep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent); box-shadow: 0 0 14px var(--red); opacity: 0; animation: sweep 4.2s cubic-bezier(.55,0,1,.55) infinite; will-change: transform, opacity; }
@keyframes sweep { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(44vh); opacity: .15; } }
.embers-layer i { position: absolute; bottom: -24px; left: var(--l); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255,90,104,.95), rgba(255,36,56,0) 70%); opacity: 0; animation: rise var(--t) linear var(--d) infinite; will-change: transform, opacity; }
@keyframes rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: var(--a); } 100% { transform: translate3d(var(--x), -105vh, 0); opacity: 0; } }
.hero-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }
/* ───────── Title screen ───────── */
.hero-wrap { position: relative; overflow: hidden; }
.title-screen { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px; width: min(1280px, calc(100% - 64px)); margin-inline: auto; padding: 130px 0 90px; }

.presents { display: flex; align-items: center; gap: 14px; font: 600 12px var(--ui); letter-spacing: .32em; text-transform: uppercase; color: var(--chrome); }
.presents i { width: 44px; height: 2px; background: var(--ok); box-shadow: 0 0 10px var(--ok); }

.title { position: relative; margin-top: 18px; font: 400 clamp(120px, 16vw, 270px)/.84 var(--title); letter-spacing: .005em; text-transform: uppercase; background: linear-gradient(180deg, #fff 18%, #c5c9d8 48%, #6a6f84 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.title::before, .title::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; -webkit-text-fill-color: currentColor; background: none; display: none; pointer-events: none; }
.title::before { color: var(--red); }
.title::after { color: var(--ice); }
.title:hover::before, .title.glitch::before { display: block; opacity: .85; animation: gl1 .45s steps(2) infinite; }
.title:hover::after, .title.glitch::after { display: block; opacity: .6; animation: gl2 .45s steps(2) infinite; }
@keyframes gl1 { 0% { transform: translate(-6px, 2px); clip-path: inset(10% 0 62% 0); } 50% { transform: translate(5px, -2px); clip-path: inset(58% 0 12% 0); } 100% { transform: translate(-3px, 0); clip-path: inset(30% 0 40% 0); } }
@keyframes gl2 { 0% { transform: translate(6px, -2px); clip-path: inset(62% 0 8% 0); } 50% { transform: translate(-5px, 2px); clip-path: inset(8% 0 66% 0); } 100% { transform: translate(3px, 0); clip-path: inset(40% 0 30% 0); } }

.subtitle { margin-top: 26px; font: 600 clamp(14px, 1.45vw, 19px)/1.5 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--chrome); max-width: 34em; }
.subtitle em { font-style: normal; color: var(--red); text-shadow: 0 0 16px rgba(255,36,56,.6); }
.blurb { margin-top: 18px; max-width: 46ch; color: var(--muted); }

.menu { margin-top: 38px; width: min(440px, 100%); display: grid; gap: 4px; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 15px 20px 15px 14px; border-left: 3px solid transparent; font: 700 clamp(17px, 1.6vw, 23px) var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #8a8b97; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.menu a i { width: 14px; font-style: normal; font-size: 12px; color: var(--red); opacity: 0; transform: translateX(-10px); transition: opacity .2s ease, transform .2s ease; }
.menu a small { margin-left: auto; font: 500 11px var(--ui); letter-spacing: .1em; color: var(--dim); }
.menu li.sel a { color: #fff; background: linear-gradient(90deg, rgba(255,36,56,.3), transparent 90%); border-left-color: var(--red); transform: translateX(8px); }
.menu li.sel a i { opacity: 1; transform: none; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }

.title-art { position: relative; justify-self: center; width: min(580px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); }
.r1 { inset: 0; animation: spin 60s linear infinite; }
.r2 { inset: 11%; border-style: solid; border-color: rgba(255,36,56,.35); border-top-color: transparent; animation: spin 14s linear infinite reverse; }
.r3 { inset: 22%; border-color: rgba(255,255,255,.1); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.art-core { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,36,56,.55), rgba(255,36,56,.16) 45%, transparent 70%); animation: pulse 3.4s ease-in-out infinite; will-change: transform; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .75; } }
.art-logo { position: relative; z-index: 2; width: 122%; max-width: none; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -12px; } }

.callout { position: absolute; z-index: 3; right: -6%; display: flex; align-items: center; gap: 14px; font: 600 12px var(--ui); letter-spacing: .34em; color: var(--muted); }
.callout::before { content: ""; width: 56px; height: 1px; background: var(--red); box-shadow: 0 0 8px var(--red); }
.co-a { top: 50%; } .co-b { top: 57%; color: #fff; }

.press { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 600 11px var(--ui); letter-spacing: .5em; text-transform: uppercase; color: var(--muted); }
.press span { animation: blink 1.4s steps(2) infinite; padding-left: .5em; }
.press i { width: 1px; height: 36px; background: linear-gradient(var(--red), transparent); }

/* Pause infinite animations while their section is offscreen */
.hero-wrap.off *, .hero-wrap.off *::before, .hero-wrap.off *::after, .ticker-wrap.off .ticker-track, .continue.off .c-title em { animation-play-state: paused !important; }

/* ───────── Ticker ───────── */
.ticker-wrap { position: relative; z-index: 2; height: 210px; margin: 20px 0 10px; overflow: hidden; }
.ticker { position: absolute; left: -5%; width: 110%; overflow: hidden; padding: 12px 0; }
.t-red { top: 38px; background: var(--red); color: #08080a; transform: rotate(-2.2deg); box-shadow: 0 0 60px rgba(255,36,56,.35); }
.t-dark { top: 86px; background: #0a0a0f; border-block: 1px solid var(--line-hi); transform: rotate(2.2deg); color: var(--chrome); }
.ticker-track { display: flex; width: max-content; gap: 38px; align-items: center; animation: tk 32s linear infinite; will-change: transform; }
.ticker-track.rev { animation-direction: reverse; animation-duration: 40s; }
.ticker span { font: 400 clamp(30px, 3.4vw, 46px)/1 var(--title); letter-spacing: .04em; white-space: nowrap; }
.t-dark span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.ticker i { font-style: normal; font-size: 22px; }
.t-dark i { color: var(--red); }
@keyframes tk { to { transform: translateX(calc(-50% - 19px)); } }

/* ───────── Section heads ───────── */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 52px; }
.tag { display: inline-block; font: 600 13px var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--red); }
h2 { margin-top: 10px; font: 400 clamp(52px, 7vw, 108px)/.92 var(--title); letter-spacing: .005em; text-transform: uppercase; background: linear-gradient(180deg, #fff 25%, #9ea3b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h2 em { font-style: normal; background: none; -webkit-text-fill-color: var(--red); text-shadow: 0 0 40px rgba(255,36,56,.45); }
.note { max-width: 300px; color: var(--muted); }


/* ───────── Level select ───────── */
.select { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.stage { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-hi); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); font: 600 12px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.stage-top b { color: var(--red); }
.st-title { color: #fff; }
.stage-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #070709; }
.stage-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04); filter: blur(8px) saturate(1.6); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease, visibility 0s linear .55s; pointer-events: none; }
.stage-item.on { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition-delay: 0s; }
.project-visual { container-type: inline-size; position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(circle at 85% 15%, rgba(255,36,56,.22), transparent 42%), radial-gradient(circle at 10% 100%, rgba(255,36,56,.09), transparent 45%), linear-gradient(135deg, #17171c, #09090b); }
.stage-item .project-visual { height: 100%; }
.sc { position: absolute; width: 22px; height: 22px; border: 0 solid var(--red); pointer-events: none; z-index: 3; }
.sc-tl { left: 12px; top: 12px; border-left-width: 2px; border-top-width: 2px; } .sc-tr { right: 12px; top: 12px; border-right-width: 2px; border-top-width: 2px; }
.sc-bl { left: 12px; bottom: 12px; border-left-width: 2px; border-bottom-width: 2px; } .sc-br { right: 12px; bottom: 12px; border-right-width: 2px; border-bottom-width: 2px; }
.stage-info { padding: 22px 26px 26px; }
.stage-info p { color: #c9cad4; font-size: 17px; max-width: 54ch; transition: opacity .25s ease, transform .25s ease; }
.stage.swap .stage-info p, .stage.swap .st-title { opacity: 0; transform: translateY(6px); }

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
.slot img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.7); transition: opacity .25s ease, filter .25s ease; }
.slot b { position: absolute; left: 0; bottom: 0; padding: 3px 9px; background: rgba(8,8,12,.88); font: 600 12px var(--ui); letter-spacing: .12em; color: var(--chrome); transition: background .2s ease, color .2s ease; }
.slot:hover { transform: translateY(-3px); border-color: var(--line-hi); }
.slot:hover img { opacity: .9; filter: none; }
.slot.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 22px rgba(255,36,56,.35); }
.slot.on img { opacity: 1; filter: none; }
.slot.on b { background: var(--red); color: #080809; }
.slot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ───────── Skill tree ───────── */
.tree { position: relative; padding: 10px 0; }
.tree-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.tree-line i { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0%); background: linear-gradient(var(--red-deep), var(--red)); box-shadow: 0 0 16px var(--red), 0 0 40px rgba(255,36,56,.6); }
.node { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; margin-bottom: 64px; }
.node:last-child { margin-bottom: 0; }
.hex { grid-column: 2; grid-row: 1; justify-self: center; width: 82px; height: 92px; display: grid; place-items: center; background: #1a1a22; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .5s ease, transform .5s cubic-bezier(.3,1.6,.4,1); position: relative; }
.hex::before { content: ""; position: absolute; inset: 3px; background: var(--bg); clip-path: inherit; transition: background .5s ease; }
.hex b { position: relative; font: 400 34px/1 var(--title); letter-spacing: .04em; color: var(--dim); transition: color .4s ease; }
.node.lit .hex { background: var(--red); transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255,36,56,.8)); }
.node.lit .hex::before { background: #1d0a0e; }
.node.lit .hex b { color: #fff; }
.node-card { position: relative; padding: 30px 34px 32px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); opacity: .3; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s ease; }
.node:nth-of-type(odd) .node-card { grid-column: 1; grid-row: 1; margin-right: 24px; }
.node:nth-of-type(even) .node-card { grid-column: 3; grid-row: 1; margin-left: 24px; }
.node.lit .node-card { opacity: 1; transform: none; border-color: rgba(255,36,56,.5); }
.unlock { display: block; font: 700 10px var(--ui); letter-spacing: .3em; color: var(--red); }
.node-card h3 { margin-top: 10px; font: 400 clamp(38px, 4vw, 56px)/1 var(--title); text-transform: uppercase; letter-spacing: .01em; }
.node-card p { margin-top: 12px; color: var(--muted); max-width: 40ch; }
.perks { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.perks span { padding: 5px 12px; border: 1px solid var(--line-hi); font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome); }

/* ───────── Dialogue ───────── */
.dialogue { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: end; max-width: 980px; margin-inline: auto; }
.dlg-portrait { display: grid; place-items: center; }
.hexp { width: 150px; height: 168px; display: grid; place-items: center; background: linear-gradient(160deg, var(--red), var(--red-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font: 400 84px/1 var(--title); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.3); filter: drop-shadow(0 0 24px rgba(255,36,56,.5)); animation: float 5s ease-in-out infinite; }
.dlg-box { position: relative; min-height: 220px; padding: 42px 46px 54px; background: linear-gradient(180deg, #101018, #09090d); border: 2px solid var(--line-hi); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.dlg-name { position: absolute; left: 0; top: 0; padding: 7px 22px 7px 18px; background: var(--red); color: #080809; font: 700 12px var(--ui); letter-spacing: .24em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.dlg-text { font: 500 clamp(17px, 1.7vw, 25px)/1.5 var(--ui); letter-spacing: .01em; color: #fff; min-height: 3em; }
.caret { display: inline-block; width: .5em; height: 1em; margin-left: 4px; background: var(--red); vertical-align: -.12em; animation: blink 1s steps(2) infinite; }
.dlg-next { position: absolute; right: 22px; bottom: 14px; border: 0; background: none; color: var(--red); font-size: 20px; cursor: pointer; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.dlg-dots { grid-column: 2; display: flex; gap: 8px; }
.dlg-dots button { width: 52px; height: 34px; border: 1px solid var(--line-hi); background: transparent; font: 600 12px var(--ui); letter-spacing: .1em; color: var(--muted); cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: all .2s ease; }
.dlg-dots button:hover { color: #fff; border-color: #fff; }
.dlg-dots button.on { background: var(--red); border-color: var(--red); color: #080809; }

/* ───────── Codex ───────── */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side p { margin: 22px 0 30px; max-width: 32ch; color: var(--muted); }
.btn-clip { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; background: #fff; color: #08080a; font: 700 13px var(--ui); letter-spacing: .18em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background .2s ease, color .2s ease, transform .2s ease; }
.btn-clip:hover { background: var(--red); transform: translateY(-3px); }
.codex { display: grid; gap: 10px; }
.codex details { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-left: 3px solid var(--line-hi); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: border-color .25s ease, background .25s ease; }
.codex details:hover { border-left-color: var(--red-hot); }
.codex details[open] { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255,36,56,.14), var(--panel) 70%); }
.codex summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px 1fr 32px; gap: 10px; align-items: center; padding: 24px 24px; }
.codex summary::-webkit-details-marker { display: none; }
.codex summary b { font: 700 11px var(--ui); letter-spacing: .24em; color: var(--red); }
.codex summary span { font: 600 clamp(17px, 1.7vw, 21px)/1.3 var(--ui); letter-spacing: .03em; }
.codex summary i { position: relative; width: 28px; height: 28px; border: 1px solid var(--line-hi); transition: background .25s ease, transform .3s ease; }
.codex summary i::before, .codex summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 2px; background: #fff; transition: transform .3s ease; }
.codex summary i::after { transform: rotate(90deg); }
.codex details[open] summary i { background: var(--red); border-color: var(--red); }
.codex details[open] summary i::before, .codex details[open] summary i::after { background: #000; }
.codex details[open] summary i::after { transform: rotate(0); }
.codex details p { padding: 0 24px 26px 130px; max-width: 70ch; color: var(--muted); animation: fade-up .4s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ───────── Continue? ───────── */
.continue { position: relative; z-index: 1; background: radial-gradient(ellipse at 50% 120%, #ff6a78, transparent 60%), var(--red); color: #08080a; overflow: hidden; margin-top: 60px; }
.hazard { height: 38px; background: repeating-linear-gradient(-45deg, #08080a 0 20px, transparent 20px 40px); }
.continue-inner { position: relative; padding: 70px 24px 80px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.c-tag { font: 700 14px var(--ui); letter-spacing: .6em; padding-left: .6em; }
.c-title { margin: 0; font: 400 clamp(110px, 19vw, 320px)/.82 var(--title); letter-spacing: .005em; background: none; -webkit-text-fill-color: #08080a; text-transform: uppercase; }
.c-title em { font-style: normal; -webkit-text-fill-color: #fff; text-shadow: none; animation: blink 1.2s steps(2) infinite; }
.c-count { position: relative; width: 120px; height: 120px; margin: 14px 0 6px; }
.c-count svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 7; }
.c-count circle { stroke: rgba(0,0,0,.25); }
.c-count .arc { stroke: #08080a; stroke-linecap: butt; stroke-dasharray: 276.5; stroke-dashoffset: 0; }
.c-count b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 58px/1 var(--title); }
.continue p { max-width: 40ch; font: 600 18px/1.5 var(--ui); letter-spacing: .02em; }
.c-btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 18px; padding: 24px 48px; background: #08080a; color: #fff; font: 700 clamp(15px, 1.6vw, 20px) var(--ui); letter-spacing: .24em; text-transform: uppercase; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: background .2s ease, color .2s ease, transform .2s ease; }
.c-btn i { font-style: normal; transition: transform .25s ease; }
.c-btn:hover { background: #fff; color: #08080a; transform: scale(1.05) rotate(-1deg); }
.c-btn:hover i { transform: translate(4px, -4px); }

.footer { position: relative; z-index: 1; background: #040405; padding: 40px 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 12px; } .foot-brand img { width: 54px; } .foot-brand b { font: 700 16px var(--ui); letter-spacing: .3em; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; } .foot-links a { font: 500 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; } .foot-links a:hover { color: var(--red); }
.foot-copy { font: 500 11px var(--ui); letter-spacing: .16em; color: var(--dim); }

/* ───────── Reveal ───────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

.fx-label { color: var(--ok); font-weight: 700; }
.fx-low .fx-label { color: #ffb04a; }

/* ───────── LOW graphics mode (manual toggle, or auto-enabled when the page runs slowly) ───────── */
.fx-low .hero-scan, .fx-low .embers-layer, .fx-low .floor-sweep, .fx-low .topbar::before { display: none; }
.fx-low .ring, .fx-low .art-core, .fx-low .art-logo, .fx-low .hexp, .fx-low .c-title em { animation: none; }
.fx-low .title::before, .fx-low .title::after { display: none; }
.fx-low h2 em, .fx-low .subtitle em { text-shadow: none; }
.fx-low .stage-item { filter: none !important; }
.fx-low .hex.lit, .fx-low .hexp, .fx-low .toast { filter: none; }
.fx-low .t-red { box-shadow: none; }
.fx-low .continue { background: var(--red); }
.fx-low .tree-line i { box-shadow: none; }
.fx-low .cta-btn, .fx-low .c-btn, .fx-low .btn-clip, .fx-low .toast, .fx-low .dlg-dots button { clip-path: none; }
.fx-low .reveal { transition-duration: .25s; transform: translateY(12px); }
.fx-low .reveal.visible { transform: none; }
.enlarge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-hi); background: transparent; font: 600 11px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--chrome); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.enlarge:hover { background: var(--red); border-color: var(--red); color: #080809; }
.stage-screen { cursor: zoom-in; }
.stage-screen::after { content: "Click to enlarge"; position: absolute; right: 18px; bottom: 16px; z-index: 4; padding: 6px 12px; background: rgba(8,8,12,.88); border: 1px solid var(--line-hi); font: 600 10px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--chrome); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.stage-screen:hover::after { opacity: 1; transform: none; }

/* ───────── Enlarge lightbox ───────── */
.lightbox { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(3,3,5,.94); }
.lightbox-panel { position: relative; z-index: 1; width: max-content; max-width: 100%; padding: 14px; background: var(--panel); border: 1px solid var(--line-hi); border-top: 3px solid var(--red); transform: scale(.96); transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.lightbox.open .lightbox-panel { transform: none; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 4px 14px; }
.lightbox-title { margin: 0; font: 400 clamp(26px, 3vw, 40px)/1 var(--title); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.lightbox-ctrl { display: flex; gap: 6px; }
.lightbox-ctrl button { width: 42px; height: 42px; border: 1px solid var(--line-hi); background: transparent; font-size: 14px; color: var(--chrome); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.lightbox-ctrl button:hover { background: var(--red); border-color: var(--red); color: #080809; }
.lightbox-stage { position: relative; overflow: hidden; background: #070709; border: 1px solid var(--line); }
.lightbox-stage .project-visual { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: top left; }
body.lightbox-open { overflow: hidden; }
/* ───────── Responsive ───────── */
@media (min-width: 1100px) { .hint { display: flex; } }

@media (max-width: 1180px) {
  .title-screen { grid-template-columns: 1fr; padding-top: 140px; }
  .title-art { width: min(480px, 90%); margin-top: 20px; }
  .callout { display: none; }
  .select { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(4, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; } .faq-side { position: static; }
}
@media (max-width: 980px) {
  .tabs { display: none; }
  .topbar { grid-template-columns: 1fr auto auto; }
  .burger { display: block; }
  .cta-btn { display: none; }
  .tree-line { left: 40px; }
  .node { grid-template-columns: 82px 1fr; gap: 16px; margin-bottom: 40px; }
  .hex { grid-column: 1; justify-self: start; }
  .node:nth-of-type(odd) .node-card, .node:nth-of-type(even) .node-card { grid-column: 2; margin: 0; }
}
@media (max-width: 720px) {
  .container, .title-screen { width: calc(100% - 36px); }
  .topbar { left: 18px; right: 18px; top: 16px; }
  .hp { width: 100px; }
  .title { font-size: 30.5vw; }
  .section { padding: 84px 0; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dialogue { grid-template-columns: 1fr; justify-items: center; }
  .hexp { width: 100px; height: 112px; font-size: 56px; }
  .dlg-box { padding: 46px 22px 50px; width: 100%; }
  .dlg-dots { grid-column: 1; }
  .codex summary { grid-template-columns: 1fr 32px; } .codex summary b { grid-column: 1 / -1; }
  .codex details p { padding: 0 24px 24px; }
  .fx-frame { inset: 6px; }
  .toasts { right: 14px; bottom: 20px; }
  .continue-inner { padding-inline: 18px; }
}

@media (hover: none) { .cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .node-card { opacity: 1; transform: none; }
}