/* Sanxe Games — portada. Estética arcade/CRT, coherente con King Kongestion. */
@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/VT323-latin.woff2) format("woff2");font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0b1021; --deep:#050814; --navy:#101629; --navy2:#17213c; --line:#27345b;
  --ink:#f7f0d5; --muted:#aab4d5;
  --red:#ff4d61; --red-d:#b52746; --girder:#d9465b;
  --cyan:#31d7c7; --cyan-d:#0e6f68;
  --yellow:#ffd34e; --yellow-d:#d9992a; --blue:#1b3a8a; --green:#3cff7a;
  --px:"Press Start 2P",ui-monospace,"Courier New",monospace;
  --term:"VT323","Courier New",monospace;
  --hud:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hud) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.4rem/1.35 var(--term);overflow-x:hidden;min-height:100vh}
a{color:inherit}
img,canvas{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:8px;top:-60px;z-index:200;background:var(--yellow);color:var(--navy);padding:10px 14px;font:400 .7rem var(--px);text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
::selection{background:var(--red);color:#fff}

/* ---------- CRT ---------- */
.crt{position:fixed;inset:0;z-index:120;pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.2) 3px 4px)}
.crt::after{content:"";position:absolute;inset:0;background:rgba(120,255,240,.015);animation:crtflicker 5s steps(1) infinite}
@keyframes crtflicker{0%,100%{opacity:1}47%{opacity:.4}48%{opacity:1}73%{opacity:.6}74%{opacity:1}}

/* ---------- Arranque ---------- */
#boot{position:fixed;inset:0;z-index:300;background:#000;color:var(--cyan);display:grid;align-content:center;justify-items:start;
  padding:0 max(24px,calc(50vw - 300px));font:400 clamp(.55rem,1.6vw,.8rem)/2.1 var(--px);cursor:pointer}
#boot.off{animation:bootoff .55s steps(8) forwards;pointer-events:none}
#boot .hint{margin-top:2em;color:#5b6b9b;animation:blink 1s steps(2) infinite}
@keyframes bootoff{0%{opacity:1;clip-path:inset(0)}60%{opacity:1;clip-path:inset(48% 0 48% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0)}}
html:not(.js) #boot{display:none}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0 0 auto 0;height:var(--hud);z-index:100;display:flex;align-items:center;gap:clamp(10px,2.4vw,28px);
  padding:0 clamp(10px,2.4vw,28px);background:rgba(5,8,20,.88);backdrop-filter:blur(6px);border-bottom:4px solid var(--line);
  font:400 clamp(.5rem,1.35vw,.66rem)/1 var(--px);white-space:nowrap}
.hud b{color:var(--yellow);font-weight:400;margin-left:.6em}
.hud .hi b{color:var(--red)}
.hud .grow{flex:1}
.hud nav{display:flex;gap:clamp(8px,2vw,22px)}
.hud nav a{text-decoration:none;color:var(--muted);padding:6px 2px}
.hud nav a:hover,.hud nav a:focus-visible{color:var(--cyan)}
.hud button{font:inherit;color:var(--ink);background:none;border:3px solid var(--line);padding:6px 8px;cursor:pointer}
.hud button:hover{border-color:var(--cyan);color:var(--cyan)}
@media(max-width:820px){.hud nav,.hud .hi{display:none}}
@media(max-width:420px){.hud .snd-l{display:none}}

/* ---------- Vigas (separador, como en el juego) ---------- */
.girder{height:18px;background:var(--girder);position:relative;box-shadow:0 4px 0 var(--deep)}
.girder::after{content:"";position:absolute;inset:6px 0 auto;height:5px;background:repeating-linear-gradient(90deg,var(--yellow) 0 17px,transparent 17px 28px)}

/* ---------- Estructura ---------- */
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.section{padding:clamp(64px,9vw,112px) 0 clamp(56px,8vw,96px);position:relative}
.kicker{margin:0 0 14px;font:400 clamp(.55rem,1.5vw,.72rem)/1.6 var(--px);color:var(--cyan);letter-spacing:.08em}
.kicker::before{content:"> ";color:var(--red)}
h2.title{margin:0 0 14px;font:400 clamp(1.15rem,3.8vw,2.1rem)/1.3 var(--px);color:var(--yellow);text-shadow:3px 3px 0 var(--red-d),6px 6px 0 var(--deep)}
.lead{max-width:60ch;margin:0 0 clamp(28px,4vw,48px);color:var(--muted);font-size:clamp(1.3rem,2.4vw,1.6rem)}

.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s steps(6),transform .45s steps(6)}
html:not(.js) .reveal{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:max(660px,100svh);display:grid;place-items:center;padding:calc(var(--hud) + 28px) 18px 168px;isolation:isolate;overflow:hidden;background:var(--bg)}
.hero canvas{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + var(--my,0px)));z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;max-width:none;transition:transform .25s ease-out;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 52% at 50% 46%,rgba(5,8,20,.82),rgba(5,8,20,.3) 70%,transparent 100%),linear-gradient(transparent 70%,rgba(5,8,20,.65))}
.hero-copy{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:clamp(14px,2.4vw,24px);max-width:900px}
.badge{font:400 clamp(.5rem,1.5vw,.72rem)/1.7 var(--px);color:var(--ink);background:var(--red);padding:.7em 1.1em;border:3px solid var(--deep);box-shadow:4px 4px 0 var(--deep);transform:rotate(-2deg);animation:badge 3s steps(2) infinite}
@keyframes badge{50%{transform:rotate(-2deg) translateY(-3px)}}
.logo{margin:0;display:grid;gap:.1em;justify-items:center;font:400 clamp(2.4rem,min(11.5vw,12.5vh),7.4rem)/1 var(--px);text-transform:uppercase;letter-spacing:-.03em}
.logo span{position:relative;display:block}
.l1{color:var(--yellow);text-shadow:.035em .035em 0 var(--yellow-d),.07em .07em 0 var(--red-d),.105em .105em 0 var(--red-d),.14em .14em 0 var(--deep),.175em .175em 0 var(--deep)}
.l2{color:var(--cyan);text-shadow:.035em .035em 0 #1aa89c,.07em .07em 0 var(--cyan-d),.105em .105em 0 var(--cyan-d),.14em .14em 0 var(--deep),.175em .175em 0 var(--deep)}
.logo span::before,.logo span::after{content:attr(data-t);position:absolute;inset:0;opacity:0;text-shadow:none;pointer-events:none}
.logo span::before{color:var(--red);animation:glitchA 7s infinite steps(1)}
.logo span::after{color:#5ea8ff;animation:glitchB 7s infinite steps(1)}
@keyframes glitchA{0%,90%,100%{opacity:0}91%{opacity:.9;transform:translate(-.05em,.02em);clip-path:inset(10% 0 55% 0)}93%{opacity:.9;transform:translate(.06em,-.02em);clip-path:inset(60% 0 8% 0)}95%{opacity:0}}
@keyframes glitchB{0%,90%,100%{opacity:0}92%{opacity:.9;transform:translate(.05em,0);clip-path:inset(40% 0 30% 0)}94%{opacity:.9;transform:translate(-.06em,.02em);clip-path:inset(5% 0 70% 0)}96%{opacity:0}}
.logo .l1{animation:drop .7s steps(7) both}
.logo .l2{animation:drop .7s .18s steps(7) both}
@keyframes drop{0%{transform:translateY(-120%);opacity:0}70%{transform:translateY(8%);opacity:1}100%{transform:none}}
.tagline{margin:0;max-width:30ch;font:400 clamp(1.5rem,3.6vw,2.3rem)/1.15 var(--term);color:var(--ink);text-shadow:2px 2px 0 var(--deep);min-height:2.4em}
.tagline em{font-style:normal;color:var(--yellow)}
.caret{display:inline-block;width:.5em;height:.9em;margin-left:2px;background:var(--cyan);vertical-align:-.1em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.cta{display:grid;justify-items:center;gap:14px;margin-top:6px}
.press{font:400 clamp(.5rem,1.4vw,.66rem)/1 var(--px);color:var(--cyan);animation:blink 1.1s steps(2) infinite}
.btn{display:inline-block;font:400 clamp(.72rem,2.2vw,1rem)/1 var(--px);color:var(--navy);background:var(--yellow);text-decoration:none;text-transform:uppercase;border:0;cursor:pointer;
  padding:1.15em 1.7em;box-shadow:0 0 0 4px var(--deep),0 9px 0 4px var(--yellow-d),0 9px 0 8px var(--deep);transform:translateY(0);transition:transform .08s steps(2),box-shadow .08s steps(2)}
.btn:hover{background:#ffe27d}
.btn:active,.btn.pressed{transform:translateY(7px);box-shadow:0 0 0 4px var(--deep),0 2px 0 4px var(--yellow-d),0 2px 0 8px var(--deep)}
.btn.red{background:var(--red);color:#fff;box-shadow:0 0 0 4px var(--deep),0 9px 0 4px var(--red-d),0 9px 0 8px var(--deep)}
.btn.red:hover{background:#ff7384}
.btn.red:active{box-shadow:0 0 0 4px var(--deep),0 2px 0 4px var(--red-d),0 2px 0 8px var(--deep)}
.cta small{font:400 clamp(1.1rem,2.2vw,1.35rem)/1 var(--term);color:var(--muted)}
.coin{position:fixed;z-index:150;width:26px;height:26px;border-radius:50%;background:var(--yellow);border:4px solid var(--yellow-d);box-shadow:inset -4px -4px 0 var(--yellow-d),0 0 0 3px var(--deep);pointer-events:none;animation:coinfall .7s cubic-bezier(.3,.1,.7,1) forwards}
.coin::after{content:"";position:absolute;inset:5px 9px;background:var(--yellow-d)}
@keyframes coinfall{0%{transform:translateY(-120px) scaleX(1);opacity:0}15%{opacity:1}35%{transform:translateY(-50px) scaleX(.2)}60%{transform:translateY(-10px) scaleX(1)}85%{opacity:1}100%{transform:translateY(24px) scaleX(.2);opacity:0}}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:34px;transform:translateX(-50%);font:400 .55rem/1 var(--px);color:var(--ink);text-decoration:none;text-align:center;background:var(--deep);border:3px solid var(--line);padding:.9em 1.1em .7em;animation:bob 1.2s steps(2) infinite}
.scroll-cue span{display:block;margin-top:8px;color:var(--yellow);font-size:.9rem}
@keyframes bob{50%{transform:translate(-50%,6px)}}
.hero .girder{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* ---------- Teletipo ---------- */
.ticker{display:flex;align-items:stretch;background:var(--red);border-block:4px solid var(--deep);overflow:hidden;position:relative;z-index:4}
.ticker-tag{flex:none;display:grid;place-items:center;padding:0 clamp(10px,2vw,22px);background:var(--deep);color:var(--yellow);font:400 clamp(.55rem,1.5vw,.78rem)/1 var(--px);letter-spacing:.06em;position:relative;z-index:2}
.ticker-tag i{display:inline-block;width:.8em;height:.8em;background:var(--red);margin-right:.7em;animation:blink .9s steps(2) infinite}
.ticker-view{overflow:hidden;flex:1;padding:10px 0}
.ticker-run{display:flex;width:max-content;animation:run 85s linear infinite}
.ticker:hover .ticker-run{animation-play-state:paused}
.ticker-run ul{display:flex;margin:0;padding:0;list-style:none}
.ticker-run li{font:400 clamp(1.25rem,2.2vw,1.55rem)/1 var(--term);color:#fff;white-space:nowrap;text-transform:uppercase;padding-right:3.2em;text-shadow:2px 2px 0 var(--red-d)}
.ticker-run li::before{content:"■";color:var(--yellow);margin-right:.9em}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- Juegos ---------- */
.cab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;margin-bottom:clamp(44px,6vw,72px)}
.cab-body{position:relative;background:linear-gradient(#1b2340,#101629);border:4px solid var(--deep);box-shadow:0 0 0 4px var(--line),10px 10px 0 4px var(--deep);padding:0 0 18px;border-radius:6px 6px 0 0}
.cab-marquee{position:relative;margin:0;text-align:center;font:400 clamp(.8rem,2.2vw,1.25rem)/1 var(--px);color:var(--yellow);background:linear-gradient(var(--red),var(--red-d));padding:1.15em .6em;border-bottom:4px solid var(--deep);text-shadow:3px 3px 0 var(--deep);letter-spacing:.04em}
.cab-marquee::before,.cab-marquee::after{content:"";position:absolute;left:0;right:0;height:8px;background:radial-gradient(circle,var(--yellow) 2.5px,transparent 3px) 0 0/16px 8px;animation:bulbs .8s steps(1) infinite}
.cab-marquee::before{top:3px}.cab-marquee::after{bottom:3px;animation-delay:.4s}
@keyframes bulbs{50%{background-position:8px 0;opacity:.55}}
.screen{position:relative;display:block;margin:clamp(14px,2.4vw,22px) clamp(14px,2.4vw,22px) 0;border:10px solid #070b18;border-radius:16px;background:var(--deep);box-shadow:inset 0 0 0 3px #121a33,0 0 0 3px var(--line),0 0 70px rgba(49,215,199,.22);overflow:hidden;text-decoration:none;color:inherit}
.screen canvas{width:100%;height:auto;aspect-ratio:8/5;image-rendering:pixelated;image-rendering:crisp-edges;background:#050814}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 30%),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45));}
.screen .insert{position:absolute;z-index:2;left:0;right:0;bottom:12px;text-align:center;font:400 clamp(.5rem,1.3vw,.66rem)/1 var(--px);color:var(--yellow);text-shadow:2px 2px 0 var(--deep);animation:blink 1s steps(2) infinite}
.screen:hover{box-shadow:inset 0 0 0 3px #121a33,0 0 0 3px var(--yellow),0 0 90px rgba(255,211,78,.28)}
.cab-controls{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,44px);margin-top:20px}
.stick{width:16px;height:30px;background:#0a0f1f;border-radius:4px;position:relative;margin:14px 0 0}
.stick::before{content:"";position:absolute;left:50%;top:-22px;width:34px;height:34px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#ff9aa6,var(--red) 40%,var(--red-d));box-shadow:0 0 0 3px var(--deep);animation:wobble 2.4s steps(4) infinite}
@keyframes wobble{25%{transform:translateX(-80%)}75%{transform:translateX(-20%)}}
.stick::after{content:"";position:absolute;left:50%;bottom:-8px;width:56px;height:14px;transform:translateX(-50%);background:#0a0f1f;border-radius:50%}
.pbtn{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 3px var(--deep),0 5px 0 3px var(--deep)}
.pbtn.a{background:radial-gradient(circle at 35% 30%,#fff3b0,var(--yellow) 45%,var(--yellow-d))}
.pbtn.b{background:radial-gradient(circle at 35% 30%,#9ff6ec,var(--cyan) 45%,var(--cyan-d))}
.cab-info h3{margin:0 0 14px;font:400 clamp(1rem,2.8vw,1.55rem)/1.35 var(--px);color:var(--yellow);text-shadow:3px 3px 0 var(--red-d)}
.cab-info p:not(.kicker){margin:0 0 18px;font-size:clamp(1.35rem,2.4vw,1.65rem);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.chips li{font:400 clamp(.5rem,1.3vw,.62rem)/1 var(--px);padding:.8em .9em;border:3px solid var(--line);color:var(--cyan);background:var(--navy)}
.chips li.hot{border-color:var(--red);color:var(--red)}
.cab-info .quote{margin:0 0 26px;padding:12px 16px;border-left:6px solid var(--red);background:rgba(255,77,97,.08);color:var(--muted);font-size:1.35rem}
.cab-info .quote b{display:block;color:var(--ink);font-weight:400;margin-bottom:4px}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,28px)}
.locked{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--navy);border:4px solid var(--line);box-shadow:8px 8px 0 var(--deep);transition:transform .12s steps(2)}
.locked:hover{transform:translate(-3px,-3px);border-color:var(--red);box-shadow:11px 11px 0 var(--deep)}
.locked .shot{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,#2a3866,#0b1021 70%);border-bottom:4px solid var(--line);overflow:hidden}
.locked .shot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px);animation:scan 2.2s linear infinite}
@keyframes scan{to{background-position:0 16px}}
.locked canvas{height:78%;width:auto;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 0 12px rgba(49,215,199,.45));animation:glow 3s steps(3) infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 20px rgba(255,77,97,.7))}}
.locked .stamp{position:absolute;right:-6px;top:16px;transform:rotate(8deg);background:var(--red);color:#fff;font:400 .5rem/1 var(--px);padding:.7em 1em;border:3px solid var(--deep);z-index:2}
.locked .body{padding:16px 16px 20px;display:grid;gap:10px;flex:1;align-content:start}
.locked .cand{font:400 .55rem/1 var(--px);color:var(--cyan)}
.locked h3{margin:0;font:400 clamp(.8rem,1.9vw,1rem)/1.35 var(--px);color:var(--ink)}
.locked p{margin:0;color:var(--muted);font-size:1.3rem}
.load{height:18px;border:3px solid var(--line);background:var(--deep);position:relative;margin-top:4px}
.load i{position:absolute;inset:2px auto 2px 2px;width:87%;background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,transparent 8px 10px)}
.load-l{display:flex;justify-content:space-between;font:400 .5rem/1 var(--px);color:var(--muted)}
.load-l b{color:var(--yellow);font-weight:400}
.locked .deny{position:absolute;inset:auto 0 0;background:var(--red);color:#fff;font:400 .5rem/1.6 var(--px);text-align:center;padding:.9em .6em;transform:translateY(100%);transition:transform .12s steps(3)}
.locked:hover .deny,.locked:focus-within .deny{transform:none}

/* ---------- Sondeo ---------- */
.poll{background:linear-gradient(var(--navy),#0c1226);border:4px solid var(--line);box-shadow:10px 10px 0 var(--deep);padding:clamp(18px,3.4vw,38px)}
.poll-q{margin:0 0 6px;font:400 clamp(.8rem,2.2vw,1.1rem)/1.5 var(--px);color:var(--ink)}
.poll-sub{margin:0 0 26px;color:var(--muted)}
.rows{display:grid;gap:clamp(14px,2vw,20px)}
.row{display:grid;grid-template-columns:minmax(120px,230px) 1fr auto;gap:clamp(10px,2vw,22px);align-items:center}
.row .lb{font:400 clamp(1.25rem,2.2vw,1.55rem)/1.05 var(--term);text-transform:uppercase}
.track{height:30px;border:3px solid var(--deep);background:repeating-linear-gradient(90deg,#17213c 0 10px,#0e1530 10px 12px);position:relative}
.fill{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 12px);transition:width 1.1s steps(18)}
.row .v{font:400 clamp(.7rem,1.8vw,.95rem)/1 var(--px);color:var(--c);min-width:4.5ch;text-align:right}
.vwrap{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.vote{font:400 .5rem/1 var(--px);color:var(--ink);background:var(--navy2);border:3px solid var(--line);padding:.9em .9em;cursor:pointer;white-space:nowrap}
.vote:hover{border-color:var(--yellow);color:var(--yellow)}
.vote:active{transform:translateY(2px)}
.poll-foot{margin:26px 0 0;padding-top:16px;border-top:3px dashed var(--line);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:1.25rem;color:var(--muted)}
.poll-foot b{color:var(--yellow);font-weight:400}
.poll-foot .tot b.over{color:var(--red)}
@media(max-width:720px){.row{grid-template-columns:1fr auto}.row .lb{grid-column:1/-1}.row .track{grid-column:1}}

/* ---------- Salón ---------- */
.hall{border:4px solid var(--line);box-shadow:10px 10px 0 var(--deep);background:var(--deep);padding:clamp(14px,3vw,30px)}
.hall table{width:100%;border-collapse:collapse;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.hall th{font:400 clamp(.45rem,1.2vw,.6rem)/1.4 var(--px);color:var(--cyan);text-align:left;padding:0 10px 14px;white-space:nowrap}
.hall td{padding:11px 10px;border-top:3px dashed #1b2648;vertical-align:top}
.hall td:first-child{font:400 clamp(.55rem,1.4vw,.75rem)/1.6 var(--px);color:var(--yellow);white-space:nowrap}
.hall td:nth-child(2){font:400 clamp(.6rem,1.5vw,.8rem)/1.6 var(--px);color:var(--ink)}
.hall td:nth-child(3){font:400 clamp(.6rem,1.5vw,.8rem)/1.6 var(--px);color:var(--red);text-align:right;white-space:nowrap}
.hall td:nth-child(4){color:var(--muted)}
.hall tr.me td{color:var(--cyan)}
.hall tr.me td:nth-child(3){animation:blink 1s steps(2) infinite}
.hall tr:nth-child(2) td:first-child{color:#e0e6f5}.hall tr:nth-child(3) td:first-child{color:#e6a05a}
@media(max-width:720px){.hall td:nth-child(4){display:none}.hall th:nth-child(4){display:none}}

/* ---------- Manifiesto ---------- */
.manifesto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,28px)}
.man{border:4px solid var(--line);background:var(--navy);box-shadow:8px 8px 0 var(--deep);padding:22px 20px 26px}
.man canvas{width:56px;height:56px;image-rendering:pixelated;margin-bottom:16px}
.man h3{margin:0 0 12px;font:400 clamp(.7rem,1.7vw,.85rem)/1.5 var(--px);color:var(--yellow)}
.man p{margin:0;color:var(--muted);font-size:1.4rem}
.banner{margin-top:clamp(32px,5vw,56px);display:grid;gap:10px;padding:clamp(18px,3vw,30px);background:repeating-linear-gradient(135deg,var(--yellow) 0 18px,var(--deep) 18px 36px);border:4px solid var(--deep);box-shadow:8px 8px 0 var(--deep)}
.banner div{background:var(--deep);padding:clamp(14px,2.4vw,24px);text-align:center;border:3px solid var(--yellow)}
.banner strong{display:block;font:400 clamp(.7rem,2vw,1rem)/1.6 var(--px);color:var(--yellow);margin-bottom:8px}
.banner span{color:var(--ink);font-size:1.4rem}

/* ---------- Pie ---------- */
footer{background:var(--deep);padding:clamp(34px,5vw,56px) 0 40px;text-align:center;color:var(--muted)}
footer .logo-s{font:400 clamp(.9rem,2.6vw,1.3rem)/1 var(--px);color:var(--yellow);text-shadow:3px 3px 0 var(--red-d);margin:0 0 18px}
footer p{margin:6px auto;max-width:62ch;font-size:1.3rem}
footer .hint{color:#5b6b9b;font-size:1.15rem}
footer .hint kbd{font:400 .5rem/1 var(--px);color:var(--cyan)}

/* ---------- Toast + Konami ---------- */
#toast{position:fixed;left:50%;bottom:26px;z-index:160;transform:translate(-50%,40px);opacity:0;max-width:calc(100% - 28px);text-align:center;background:var(--yellow);color:var(--navy);font:400 clamp(.5rem,1.5vw,.7rem)/1.7 var(--px);padding:1em 1.3em;border:4px solid var(--deep);box-shadow:5px 5px 0 var(--deep);pointer-events:none;transition:transform .2s steps(4),opacity .2s steps(4)}
#toast.show{transform:translate(-50%,0);opacity:1}
#rain{position:fixed;inset:0;z-index:140;pointer-events:none;width:100%;height:100%;image-rendering:pixelated}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .cab{grid-template-columns:1fr}
  .grid3,.manifesto{grid-template-columns:1fr}
  .locked{display:grid;grid-template-columns:minmax(120px,40%) 1fr}
  .locked .shot{aspect-ratio:auto;border-bottom:0;border-right:4px solid var(--line);min-height:210px}
}
@media(max-width:520px){
  .locked{grid-template-columns:1fr}
  .locked .shot{border-right:0;border-bottom:4px solid var(--line);aspect-ratio:4/3;min-height:0}
  .hero{padding-bottom:130px}
  .scroll-cue{bottom:36px}
}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ticker-run{animation:none !important;flex-wrap:wrap;width:auto}
  .ticker-run ul[aria-hidden]{display:none}
  .ticker-view{overflow:visible}
  .ticker-run ul{flex-wrap:wrap}
  .reveal{opacity:1;transform:none}
  .logo span::before,.logo span::after{display:none}
}

/* Tildes sobre mayúsculas: Press Start 2P las dibuja con altura de minúscula, así que se pintan aparte */
.ac{position:relative;display:inline-block}
.ac::after{content:"";position:absolute;left:calc(50% - .02em);top:-.17em;width:.2em;height:.13em;background:currentColor;transform:skewX(-50deg)}
.ac.n::after{left:calc(50% - .17em);width:.14em;height:.12em;transform:none;box-shadow:.2em -.09em 0 currentColor}
.ac.u::after{left:calc(50% - .21em);width:.14em;height:.14em;transform:none;box-shadow:.28em 0 0 currentColor}
footer .hint kbd{font:400 1.1rem/1 var(--term);color:var(--cyan)}