:root { --ink:#171717; --paper:#f3efdf; --acid:#d8ff45; --orange:#ff6534; --blue:#3157ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }

.hero { min-height:100vh; background:var(--acid); overflow:hidden; border-bottom:2px solid var(--ink); }
.nav { height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:2px solid var(--ink); }
.brand { font-size:1.25rem; font-weight:900; letter-spacing:-.04em; }
.nav-note { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.nav-link { justify-self:end; display:flex; gap:6px; align-items:center; font-weight:700; font-size:.9rem; }

.hero-grid { min-height:calc(100vh - 128px); display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:7vw; padding-block:48px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--ink); border-radius:999px; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:26px 0 20px; font-size:clamp(4.4rem,10vw,9.6rem); line-height:.76; letter-spacing:-.095em; text-transform:uppercase; }
h1 span { display:inline-block; color:var(--blue); transform:translateX(5vw); }
.lede { max-width:600px; font-size:clamp(1.2rem,2vw,1.85rem); line-height:1.18; font-weight:700; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { padding:15px 20px; border:2px solid var(--ink); font-weight:800; transition:transform .18s,box-shadow .18s; }
.button:hover { transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--ink); }
.button-dark { background:var(--ink); color:white; }
.button-ghost { background:transparent; }

.hero-art { position:relative; aspect-ratio:4/5; max-height:650px; background:var(--orange); border:2px solid var(--ink); border-radius:48% 48% 8px 8px; box-shadow:16px 16px 0 var(--ink); overflow:visible; transform:rotate(2deg); }
.portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:calc(48% - 2px) calc(48% - 2px) 6px 6px; filter:saturate(.88) contrast(1.04); }
.hero-art::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62)); pointer-events:none; }
.sticker { position:absolute; z-index:3; top:3%; right:-7%; width:120px; aspect-ratio:1; display:grid; place-content:center; text-align:center; background:var(--blue); color:white; border:2px solid var(--ink); border-radius:50%; font-size:.68rem; line-height:1.05; text-transform:uppercase; font-weight:900; letter-spacing:.08em; transform:rotate(12deg); }
.location { position:absolute; z-index:3; left:22px; bottom:48px; display:flex; align-items:center; gap:6px; color:white; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.serial { position:absolute; z-index:3; bottom:20px; left:24px; color:white; font:700 .8rem monospace; }
.ticker { height:44px; display:flex; align-items:center; border-top:2px solid var(--ink); background:var(--ink); color:var(--acid); overflow:hidden; white-space:nowrap; font-size:.85rem; font-weight:900; letter-spacing:.12em; }
.ticker div { min-width:max-content; animation:crawl 15s linear infinite; }
@keyframes crawl { to { transform:translateX(-50%); } }

.dossier { padding-block:120px 140px; }
.section-heading { display:grid; grid-template-columns:1fr 2.2fr; gap:30px; align-items:start; }
.section-heading p { margin:9px 0; font:700 .78rem monospace; text-transform:uppercase; }
h2 { margin:0; font-size:clamp(2.6rem,6vw,6rem); line-height:.92; letter-spacing:-.065em; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:76px; border:2px solid var(--ink); }
.metric { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; padding:28px; background:white; }
.metric + .metric { border-left:2px solid var(--ink); }
.metric:nth-child(2) { background:var(--orange); }
.metric:nth-child(3) { background:var(--blue); color:white; }
.metric strong { font-size:clamp(3.5rem,7vw,7rem); letter-spacing:-.08em; }
.metric span { max-width:190px; font-weight:800; text-transform:uppercase; font-size:.82rem; letter-spacing:.06em; }
.disclaimer { text-align:right; margin:14px 0 0; font:.72rem monospace; }

.evidence { background:var(--ink); color:white; padding-block:120px; }
.light-heading p { color:var(--acid); }
.evidence-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-template-rows:repeat(2,minmax(220px,auto)); gap:14px; margin-top:76px; }
.evidence-card { position:relative; min-width:0; padding:28px; border:2px solid white; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.card-number { font:700 .78rem monospace; opacity:.75; }
.quote-card { grid-row:span 2; background:var(--acid); color:var(--ink); }
.quote-card blockquote { max-width:100%; margin:40px 0 20px; overflow-wrap:anywhere; font-size:clamp(2.35rem,4.2vw,4.7rem); line-height:.9; letter-spacing:-.06em; font-weight:900; }
.quote-card p,.evidence-card p { max-width:390px; margin:0; font-weight:700; line-height:1.35; }
.music-card { grid-column:span 2; background:var(--blue); flex-direction:row; align-items:flex-start; gap:24px; }
.music-card div { flex:1; }
.evidence-card h3 { margin:28px 0 8px; font-size:clamp(1.7rem,3vw,3rem); line-height:.95; letter-spacing:-.04em; }
.ufa-card { background:var(--orange); color:var(--ink); }
.status-card { background:white; color:var(--ink); }
.status-card p { font:700 .72rem monospace; text-transform:uppercase; }
.status-card strong { max-width:100%; overflow-wrap:normal; word-break:normal; font-size:clamp(1.65rem,2.4vw,2.55rem); line-height:.94; letter-spacing:-.055em; }
.status-dot { width:18px; height:18px; border-radius:50%; background:#18b75b; box-shadow:0 0 0 8px rgba(24,183,91,.18); align-self:flex-end; }
.big-icon,.cake-icon { font-size:3rem; line-height:1; }

.verdict { position:relative; padding-block:130px 150px; }
.mini-label { font:700 .78rem monospace; text-transform:uppercase; }
.verdict h2 { max-width:900px; margin:22px 0 62px; }
.stamp { position:absolute; right:4%; top:90px; width:150px; aspect-ratio:1; border:3px solid var(--blue); color:var(--blue); border-radius:50%; display:grid; place-content:center; text-align:center; font-weight:900; font-size:.75rem; letter-spacing:.08em; transform:rotate(11deg); }
.vote-panel { display:grid; grid-template-columns:.8fr 1.2fr auto; align-items:center; gap:32px; border-block:2px solid var(--ink); padding-block:26px; }
.vote-panel div { display:flex; align-items:center; gap:18px; }
.vote-panel div strong { font-size:4.5rem; line-height:1; letter-spacing:-.08em; }
.vote-panel div span { max-width:100px; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.vote-panel > p { font-size:1.1rem; font-weight:800; }
.approve-button { min-height:56px; height:auto; padding:14px 20px; border:2px solid var(--ink); border-radius:0; background:var(--blue); color:white; font:900 .82rem Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.04em; box-shadow:5px 5px 0 var(--ink); cursor:pointer; }
.approve-button:hover { background:var(--orange); color:var(--ink); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.approve-button:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.approve-button:disabled { cursor:wait; opacity:.68; transform:none; box-shadow:3px 3px 0 var(--ink); }

.birthday { position:relative; min-height:780px; display:grid; place-items:center; overflow:hidden; background:var(--orange); border-block:2px solid var(--ink); }
.birthday-orbit { position:absolute; width:780px; height:780px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:flex-start; justify-content:center; padding-top:18px; font-size:.9rem; font-weight:900; word-spacing:14px; letter-spacing:.08em; animation:spin 18s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.birthday-copy { position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.birthday-copy > p { max-width:660px; margin:25px auto 36px; font-size:clamp(1.2rem,2.3vw,2rem); line-height:1.22; font-weight:700; }
.birthday-copy h2 { font-size:clamp(5rem,13vw,12rem); line-height:.72; text-transform:uppercase; color:var(--acid); -webkit-text-stroke:2px var(--ink); text-shadow:9px 9px 0 var(--blue); }
.birthday-copy a { margin-top:54px; display:inline-flex; align-items:center; gap:8px; padding-bottom:5px; border-bottom:2px solid var(--ink); font-weight:900; text-transform:uppercase; }

.legend-mode { padding-block:110px; background:var(--blue); color:white; border-block:2px solid var(--ink); overflow:hidden; }
.game-intro { margin-top:55px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:30px; }
.game-kicker { color:var(--acid); font:900 .74rem monospace; letter-spacing:.14em; }
.game-intro h3 { margin:8px 0 6px; font-size:clamp(2.5rem,6vw,5.5rem); line-height:.9; text-transform:uppercase; }
.game-intro p { max-width:650px; margin:0; color:#c8d5ff; font-weight:600; }
.soundtrack-card { min-width:370px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; padding:15px; color:var(--ink); background:var(--acid); border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); }
.soundtrack-icon { font-size:1.8rem; }
.soundtrack-card small,.soundtrack-card strong { display:block; }
.soundtrack-card small { font:800 .65rem monospace; text-transform:uppercase; }
.soundtrack-card strong { margin-top:3px; font-size:.86rem; }
.soundtrack-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.soundtrack-card button { min-height:42px; padding:8px 12px; border:2px solid var(--ink); background:white; font:900 .7rem monospace; text-transform:uppercase; cursor:pointer; }
.soundtrack-card button:hover,.soundtrack-card button.is-playing { background:var(--orange); }
.game-console { margin-top:34px; border:2px solid var(--ink); background:var(--ink); box-shadow:12px 12px 0 var(--acid); }
.game-hud { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 20px; color:white; font:800 clamp(.68rem,1.5vw,.9rem) monospace; text-transform:uppercase; }
.game-hud strong { color:var(--acid); font-size:1.15em; }
.game-stage { position:relative; overflow:hidden; background:#0d1230; border-block:2px solid white; }
.game-stage canvas { display:block; width:100%; height:auto; aspect-ratio:15/8; touch-action:none; }
.game-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:rgba(5,7,21,.68); backdrop-filter:blur(3px); }
.game-overlay[hidden] { display:none; }
.game-overlay > span { color:var(--acid); font:900 .72rem monospace; letter-spacing:.18em; }
.game-overlay > strong { max-width:620px; font-size:clamp(1.5rem,4vw,3.8rem); line-height:.95; text-transform:uppercase; }
.game-character-preview { width:auto; height:clamp(105px,18vw,180px); object-fit:contain; filter:drop-shadow(7px 9px 0 rgba(5,7,21,.5)); }
.game-start { flex:0 0 auto; padding:18px 24px; border:2px solid var(--ink); background:var(--orange); color:var(--ink); font:900 .82rem monospace; text-transform:uppercase; cursor:pointer; box-shadow:6px 6px 0 white; }
.game-controls { min-height:70px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:12px; padding:10px 14px; }
.game-controls button { height:50px; border:2px solid white; background:var(--blue); color:white; font-size:1.8rem; font-weight:900; touch-action:none; cursor:pointer; }
.game-controls button:active { background:var(--orange); color:var(--ink); }
.game-controls p { margin:0; text-align:center; color:#c8d5ff; font:800 .76rem monospace; text-transform:uppercase; }
.game-controls b:first-child { color:var(--acid); }
.game-controls b:last-child { color:#bec3d5; }

footer { background:var(--ink); color:white; }
.footer-inner { min-height:110px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.footer-inner span:first-child { color:var(--acid); font-size:1rem; font-weight:900; }
.footer-inner a { justify-self:end; }

@media (max-width:760px) {
  .shell { width:min(100% - 24px,680px); }
  .nav { grid-template-columns:1fr auto; height:68px; }
  .nav-note { display:none; }
  .nav-link { font-size:.78rem; }
  .hero-grid { grid-template-columns:1fr; padding-block:42px 64px; }
  h1 { font-size:clamp(4rem,22vw,7rem); }
  h1 span { transform:none; }
  .hero-art { width:88%; margin-inline:auto; max-height:none; }
  .section-heading { grid-template-columns:1fr; }
  .dossier { padding-block:82px; }
  .metric-grid { grid-template-columns:1fr; margin-top:48px; }
  .metric + .metric { border-left:0; border-top:2px solid var(--ink); }
  .evidence { padding-block:82px; }
  .evidence-grid { grid-template-columns:1fr; grid-template-rows:auto; margin-top:48px; }
  .quote-card,.music-card { grid-column:auto; grid-row:auto; }
  .music-card { min-height:250px; }
  .evidence-card { min-height:250px; }
  .stamp { position:relative; top:auto; right:auto; margin:0 0 45px auto; width:120px; }
  .verdict { padding-block:84px; }
  .vote-panel { grid-template-columns:1fr; }
  .approve-button { width:100%; }
  .birthday { min-height:700px; }
  .birthday-orbit { width:650px; height:650px; }
  .birthday-copy h2 { font-size:clamp(4.4rem,25vw,8rem); }
  .legend-mode { padding-block:76px; }
  .game-intro { grid-template-columns:1fr; align-items:stretch; }
  .soundtrack-card { min-width:0; }
  .game-console { box-shadow:7px 7px 0 var(--acid); }
  .game-hud { padding-inline:12px; gap:8px; }
  .game-controls { grid-template-columns:repeat(3,1fr); gap:8px; }
  .footer-inner { grid-template-columns:1fr auto; padding-block:30px; }
  .footer-inner span:nth-child(2) { grid-column:1/-1; grid-row:2; }
}

@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.ticker div,.birthday-orbit{animation:none}.button{transition:none} }