:root{
  --ink:#12062a; --ink2:#1b0a3d; --violet:#7b2cff; --lime:#d6ff2e; --sand:#f3e2c0; --paper:#fff6e5;
  --orange:#ff5b1f; --cyan:#37e6ff; --pink:#ff3fa4; --yellow:#ffd93d;
  --px:'Press Start 2P',monospace; --disp:'Bowlby One','Arial Black',sans-serif; --mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--mono);overflow-x:hidden;cursor:auto}
body.has-cursor, body.has-cursor *{cursor:none!important}
body.booting{overflow:hidden}
img,canvas{image-rendering:pixelated}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--lime);color:var(--ink)}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- CRT + cursor ---------- */
.crt{position:fixed;inset:0;pointer-events:none;z-index:900;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45))}
#cursor{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;display:none;will-change:transform}
body.has-cursor #cursor{display:block}
#cursor svg{display:block;transition:transform .15s}
#cursor.big svg{transform:scale(1.5) rotate(-12deg)}
#cursor-label{position:absolute;left:26px;top:18px;background:var(--lime);color:var(--ink);font:10px var(--px);padding:5px 6px;opacity:0;transform:scale(.6);transition:.15s;white-space:nowrap}
#cursor.big #cursor-label{opacity:1;transform:none}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:2000;background:#0a0418;display:grid;place-items:center;transition:clip-path .9s steps(12);clip-path:inset(0 0 0 0)}
#boot.out{clip-path:inset(0 0 100% 0)}
.boot-inner{width:min(560px,90vw);text-align:left}
.boot-logo{font:clamp(34px,9vw,64px)/.9 var(--disp);color:var(--lime);text-shadow:4px 4px 0 var(--violet);margin-bottom:24px;animation:glitch 2.5s infinite}
#boot-log{font:10px/1.9 var(--px);color:#9cff8a;min-height:130px;white-space:pre-wrap}
.boot-bar{height:16px;border:3px solid var(--lime);margin:14px 0 22px;padding:2px}
.boot-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--lime) 0 8px,transparent 8px 11px)}
#boot-start{font:14px var(--px);color:var(--ink);background:var(--lime);padding:14px 18px;box-shadow:5px 5px 0 var(--violet);opacity:.3}
#boot-start:not([disabled]){opacity:1;cursor:pointer}
#boot small{display:block;margin-top:16px;font:10px var(--px);color:#8c7fb0}
@keyframes glitch{0%,92%,100%{transform:none;filter:none}94%{transform:translate(-4px,2px);filter:hue-rotate(90deg)}96%{transform:translate(4px,-2px)}}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;
  font:10px var(--px);background:linear-gradient(var(--ink),transparent);mix-blend-mode:normal}
.hud-logo b{color:var(--lime)}
.hud nav{display:flex;gap:18px;flex-wrap:wrap}
.hud nav a{padding:6px 0;border-bottom:2px solid transparent}
.hud nav a:hover{border-color:var(--lime);color:var(--lime)}
.hud-right{display:flex;gap:12px;align-items:center}
.score b{color:var(--yellow)}
#snd{font-size:16px;cursor:pointer}
@media(max-width:860px){.hud nav{display:none}.score{display:none}}

/* ---------- generic ---------- */
section{position:relative}
.reveal{opacity:0;transform:translateY(40px) rotate(1deg);transition:.7s cubic-bezier(.2,.9,.3,1.2)}
.reveal.in{opacity:1;transform:none}
.sec-head{padding:0 6vw;margin-bottom:40px;max-width:1100px}
.tag{display:inline-block;font:10px var(--px);background:var(--lime);color:var(--ink);padding:6px 9px;margin-bottom:18px;transform:rotate(-2deg)}
.sec-head h2{font:clamp(44px,9vw,120px)/.88 var(--disp);color:var(--lime);text-shadow:5px 5px 0 var(--violet)}
.sec-head h2 span{color:var(--paper);text-shadow:5px 5px 0 var(--orange)}
.sec-head p{margin-top:20px;max-width:560px;font-size:15px;line-height:1.6}
.sec-head.dark .tag{background:var(--ink);color:var(--lime)}
.sec-head.dark h2{color:var(--ink);text-shadow:5px 5px 0 var(--lime)}
.sec-head.dark h2 span{color:var(--violet);text-shadow:5px 5px 0 var(--ink)}
.sec-head.dark p{color:var(--ink)}
.btn{display:inline-block;font:11px var(--px);background:var(--lime);color:var(--ink);padding:15px 18px;box-shadow:5px 5px 0 var(--violet);transition:.1s;cursor:pointer;border:0}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--orange)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0}
.btn.alt{background:var(--paper)}
.btn.mini{padding:9px 11px;font-size:10px}
.btn.big{font-size:clamp(11px,2.4vw,16px);padding:20px 24px}
.zig{height:20px;position:absolute;left:0;right:0;top:-19px;z-index:3;
  --c:var(--sand);background:linear-gradient(135deg,var(--c) 25%,transparent 25%) -10px 0,linear-gradient(225deg,var(--c) 25%,transparent 25%) -10px 0;background-size:20px 20px}
.zig.lime{--c:var(--lime)}.zig.ink{--c:var(--ink)}

/* ---------- hero ---------- */
#hero{min-height:100vh;padding:110px 6vw 90px;display:grid;grid-template-columns:1fr minmax(220px,320px);gap:30px;align-items:center;overflow:hidden;
  background:radial-gradient(circle at 80% 20%,#3b1397 0,transparent 45%),radial-gradient(circle at 10% 90%,#6a1b9a55 0,transparent 40%),var(--ink)}
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:4px;height:4px;background:var(--paper);animation:tw 2s steps(2) infinite}
@keyframes tw{50%{opacity:.15}}
.hero-copy{position:relative;z-index:3}
.kicker{font:10px var(--px);color:var(--cyan);margin-bottom:18px}
#title{font:clamp(60px,11.5vw,200px)/.8 var(--disp);color:var(--lime);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:26px}
#title .line{display:block;white-space:nowrap}
#title .line:nth-child(2){color:var(--paper);margin-left:.4em}
#title .ch{display:inline-block;text-shadow:.05em .05em 0 var(--violet);will-change:transform;transition:transform .35s cubic-bezier(.2,.9,.3,1.6)}
#title .line:nth-child(2) .ch{text-shadow:.05em .05em 0 var(--orange)}
.role{font:clamp(10px,1.5vw,14px)/1.8 var(--px);color:var(--yellow);margin-bottom:16px}
.caret{animation:blink .8s steps(2) infinite}
.lede{max-width:560px;line-height:1.7;font-size:16px;margin-bottom:28px}
.lede em{background:var(--violet);padding:0 5px;font-style:normal}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.stickers{position:absolute;inset:0;z-index:2;pointer-events:none}
.sticker{position:absolute;will-change:transform}
.sticker img{display:block;animation:float 4s ease-in-out infinite;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.4))}
@keyframes float{50%{transform:translateY(-14px) rotate(6deg)}}
.polaroid{position:relative;z-index:3;background:var(--paper);padding:14px 14px 12px;transform:rotate(4deg);box-shadow:10px 10px 0 var(--violet);justify-self:center;transition:.3s}
.polaroid:hover{transform:rotate(-2deg) scale(1.04)}
.polaroid .photo{aspect-ratio:3/4;background:linear-gradient(160deg,var(--violet),var(--pink));display:grid;place-items:center;overflow:hidden}
.polaroid img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.polaroid canvas{width:80%;image-rendering:pixelated}
.polaroid figcaption{color:var(--ink);font:10px var(--px);text-align:center;padding-top:12px}
.tape-bit{position:absolute;top:-14px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(214,255,46,.8);transform:rotate(-4deg)}
.scroll-hint{position:absolute;bottom:22px;left:6vw;font:10px var(--px);color:var(--cyan)}
.scroll-hint i{display:inline-block;width:10px;height:10px;border-right:3px solid;border-bottom:3px solid;transform:rotate(45deg);animation:bounce 1s infinite}
@keyframes bounce{50%{transform:translateY(6px) rotate(45deg)}}
@media(max-width:800px){#hero{grid-template-columns:1fr;padding-top:100px}.polaroid{width:220px;margin:10px 0 40px}}

/* ---------- fitas ---------- */
.tape-wrap{position:relative;height:190px;background:var(--ink);overflow:hidden;z-index:4}
.tape{position:absolute;left:-5%;width:110%;overflow:hidden;font:clamp(14px,2.2vw,24px) var(--px);padding:16px 0;white-space:nowrap}
.tape.t1{background:var(--lime);color:var(--ink);transform:rotate(-3deg);top:20px;box-shadow:0 6px 0 var(--ink)}
.tape.t2{background:var(--orange);color:var(--paper);transform:rotate(2.5deg);top:92px}
.marq{display:inline-flex;gap:34px;animation:marq 28s linear infinite}
.marq.rev{animation-direction:reverse;animation-duration:36s}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- castelo ---------- */
#castelo{padding:90px 0 120px;background:var(--ink2)}
.castle-wrap{max-width:900px;margin:0 auto 30px;padding:0 4vw;position:relative}
#castle{width:100%;display:block;border:6px solid var(--lime);box-shadow:10px 10px 0 var(--violet);background:#1b0a3d}
.win{fill:#ffd93d;stroke:#12062a;stroke-width:1;cursor:pointer;transition:.1s;animation:glow 3s steps(2) infinite}
.win:nth-child(2n){animation-delay:.7s}.win:nth-child(3n){animation-delay:1.3s}
@keyframes glow{50%{fill:#ffb84a}}
.win:hover,.win.hot{fill:var(--cyan);animation:none;filter:drop-shadow(0 0 3px var(--cyan))}
.castle-tip{margin-top:14px;font:10px var(--px);color:var(--lime);min-height:24px;text-align:center}
.rooms{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto;padding:0 4vw}
.rooms li a{display:block;font:10px var(--px);border:3px solid var(--paper);padding:11px 12px;background:var(--ink)}
.rooms li a:hover{background:var(--paper);color:var(--ink);transform:rotate(-2deg)}

/* ---------- trabalhos ---------- */
#works{background:var(--sand);color:var(--ink);padding:110px 0 120px;
  background-image:radial-gradient(rgba(18,6,42,.12) 1px,transparent 1.5px);background-size:14px 14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 6vw;margin-bottom:34px}
.fchip{font:10px var(--px);padding:11px 12px;border:3px solid var(--ink);background:var(--paper);cursor:pointer;transition:.1s}
.fchip:hover{transform:rotate(-2deg)}
.fchip.on{background:var(--ink);color:var(--lime)}
.tvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 26px;padding:0 6vw}
.tv{position:relative;cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1.6);animation:pop .5s backwards}
@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-6deg)}}
.tv:nth-child(3n+1){transform:rotate(-1.5deg)}.tv:nth-child(3n+2){transform:rotate(1deg)}
.tv:hover{transform:rotate(0) scale(1.06);z-index:5}
.tv .body{background:#2b2b3a;border:5px solid var(--ink);border-radius:14px;padding:12px 12px 8px;box-shadow:8px 8px 0 var(--ink)}
.tv .scr{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--violet),var(--pink));border-radius:10px;overflow:hidden;border:3px solid #0a0418}
.tv .scr img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.tv .scr::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.tv .play{position:absolute;inset:0;display:grid;place-items:center;font:28px var(--px);color:var(--lime);text-shadow:3px 3px 0 var(--ink);opacity:0;transition:.15s;z-index:2}
.tv:hover .play{opacity:1}
.tv .fold{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--px);color:var(--paper);text-align:center;padding:10px;z-index:1}
.tv .knobs{display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.tv .knobs i{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:20px 0 0 var(--orange)}
.tv .knobs em{font:10px var(--px);color:#aaa;font-style:normal}
.tv .ant{position:absolute;top:-30px;left:50%;width:2px;height:34px;background:var(--ink);transform:rotate(-20deg);transform-origin:bottom}
.tv .ant::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;background:var(--orange);border-radius:50%}
.tv h4{margin-top:14px;font:11px/1.5 var(--px)}
.tv p{margin-top:6px;font-size:12px;opacity:.75}
.tv .feat{position:absolute;top:-12px;right:-8px;background:var(--orange);color:var(--paper);font:10px var(--px);padding:6px 7px;transform:rotate(6deg);z-index:6}
.note{padding:40px 6vw 0;font-size:13px;opacity:.7}

/* ---------- fase (carreira) ---------- */
#level{height:520vh;background:#1a0b3d}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(#1b0a3d 0,#5a1f9e 45%,#ff7a3d 85%,#ffb84a 100%)}
.layer{position:absolute;left:0;right:0;bottom:0;background-repeat:repeat-x}
.layer.sky{inset:0;background-image:radial-gradient(var(--paper) 1.2px,transparent 1.6px);background-size:70px 70px;opacity:.5}
.layer.far{height:55%;background-image:radial-gradient(ellipse 160px 120px at 50% 100%,#3b1a78 98%,transparent 100%);background-size:320px 100%}
.layer.near{height:38%;background-image:radial-gradient(ellipse 110px 90px at 50% 100%,#2a1260 98%,transparent 100%);background-size:200px 100%}
.lv-hud{position:absolute;top:60px;left:0;right:0;display:flex;justify-content:space-between;padding:0 6vw;font:10px var(--px);color:var(--paper);z-index:6;text-shadow:3px 3px 0 var(--ink)}
.lv-hint{position:absolute;bottom:80px;right:6vw;font:10px var(--px);color:var(--lime);z-index:6;animation:blink 1.2s steps(2) infinite}
.ground{position:absolute;left:0;right:0;bottom:0;height:70px;z-index:4;border-top:8px solid var(--lime);
  background:repeating-linear-gradient(90deg,#a53a1f 0 38px,#7a2813 38px 40px),#a53a1f}
.track{position:absolute;left:0;bottom:70px;height:100%;width:430vw;z-index:3;will-change:transform}
.stop{position:absolute;bottom:0;width:0;height:100%}
.stop:nth-child(1){left:30vw}.stop:nth-child(2){left:85vw}.stop:nth-child(3){left:140vw}.stop:nth-child(4){left:195vw}.stop:nth-child(5){left:250vw}.stop:nth-child(6){left:305vw}
.qblock{position:absolute;bottom:130px;left:-34px;width:68px;height:68px;background:var(--yellow);border:5px solid var(--ink);display:grid;place-items:center;font:28px var(--px);color:var(--ink);box-shadow:inset -6px -6px 0 #d49b00,5px 5px 0 rgba(0,0,0,.35);animation:bob 1.4s steps(4) infinite}
.stop.on .qblock{background:#8a6a2a;color:#8a6a2a;animation:none;transform:translateY(-6px)}
.boss-b{background:var(--pink);box-shadow:inset -6px -6px 0 #b0206f,5px 5px 0 rgba(0,0,0,.35)}
@keyframes bob{50%{transform:translateY(-6px)}}
.card{position:absolute;bottom:230px;left:-170px;width:340px;background:var(--paper);color:var(--ink);border:5px solid var(--ink);padding:16px;box-shadow:8px 8px 0 var(--violet);opacity:0;transform:translateY(40px) scale(.8) rotate(-3deg);transition:.35s cubic-bezier(.2,.9,.3,1.5);pointer-events:none}
.stop.on .card{opacity:1;transform:rotate(-1deg)}
.stop:nth-child(even).on .card{transform:rotate(1.5deg)}
.card b{font:10px var(--px);background:var(--ink);color:var(--lime);padding:5px 6px;display:inline-block}
.card h3{font:14px/1.4 var(--px);margin:10px 0 8px}
.card p{font-size:12.5px;line-height:1.55}
.card em{background:var(--lime);font-style:normal;padding:0 3px}
.flag{position:absolute;bottom:0;left:-80px;width:6px;height:260px;background:var(--paper)}
.flag::after{content:"";position:absolute;top:0;left:6px;border:20px solid transparent;border-left:44px solid var(--lime)}
.hero-run{position:absolute;left:22vw;bottom:calc(70px + 8px);z-index:5;width:84px}
.hero-run canvas{width:100%;display:block;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.4))}
@media(max-width:700px){.card{width:260px;left:-130px}.hero-run{left:12vw;width:60px}}

/* ---------- placar ---------- */
#stats{background:var(--violet);padding:100px 0 110px}
#stats .sec-head h2{color:var(--lime)}
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:0 6vw;margin-bottom:60px}
.stat{background:var(--ink);padding:26px 18px;border:4px solid var(--lime);box-shadow:8px 8px 0 var(--orange)}
.stat b{display:block;font:clamp(36px,6vw,70px)/1 var(--disp);color:var(--lime)}
.stat span{font:10px/1.7 var(--px);display:block;margin-top:10px}
.boss-chart{margin:0 6vw;background:var(--ink);border:4px solid var(--paper);padding:26px}
.boss-chart h3{font:10px/1.7 var(--px);color:var(--yellow);margin-bottom:24px}
.bars{display:flex;align-items:flex-end;gap:5vw;height:240px}
.bar{flex:1;max-width:160px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bar div{width:100%;background:repeating-linear-gradient(0deg,var(--pink) 0 12px,#b0206f 12px 14px);height:0;transition:height 1.4s steps(14);position:relative}
.bar div::before{content:attr(data-v);position:absolute;top:-24px;left:0;right:0;text-align:center;font:10px var(--px);color:var(--lime)}
.bar span{font:10px var(--px);text-align:center;line-height:1.6}

/* ---------- lab ---------- */
#lab{background:var(--lime);color:var(--ink);padding:110px 0 120px}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;padding:0 6vw}
.exp{background:var(--paper);border:5px solid var(--ink);padding:18px;box-shadow:10px 10px 0 var(--ink);transition:.2s}
.exp:hover{transform:rotate(-.7deg)}
.exp.wide{grid-column:1/-1}
.exp header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.exp header span{font:10px var(--px);background:var(--violet);color:var(--paper);padding:6px}
.exp h3{font:12px var(--px)}
.exp label{display:block;font-size:12px;margin:12px 0 6px}
.exp input[type=range]{width:100%;accent-color:var(--violet)}
.verdict{margin-top:10px;font:10px/1.7 var(--px);color:var(--violet)}
.screen{height:170px;display:grid;place-items:center;font:80px var(--disp);color:var(--paper);border:4px solid var(--ink);transition:none;text-shadow:5px 5px 0 var(--ink)}
.grade{position:relative;height:170px;border:4px solid var(--ink);overflow:hidden;background:linear-gradient(#ff9a4d,#ffd93d 55%,#7bd4ff)}
.grade .sun{position:absolute;left:62%;top:30px;width:46px;height:46px;background:#fff6e5;border-radius:50%}
.grade .hill{position:absolute;bottom:-20px;border-radius:50%}
.grade .h1{left:-10%;width:70%;height:90px;background:#2a8a4a}.grade .h2{right:-15%;width:80%;height:70px;background:#1f6a3a}
.grade .pixel-guy{position:absolute;left:30%;bottom:40px;width:18px;height:30px;background:var(--pink);box-shadow:0 -10px 0 -2px #f1b27a}
.grade .split{position:absolute;inset:0;background:linear-gradient(#ff9a4d,#ffd93d 55%,#7bd4ff);clip-path:inset(0 50% 0 0);overflow:hidden}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chips button{font:10px var(--px);border:3px solid var(--ink);padding:8px;background:var(--paper);cursor:pointer}
.chips button.on{background:var(--ink);color:var(--lime)}
.seq{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.seq button{aspect-ratio:1;border:3px solid var(--ink);background:var(--paper);cursor:pointer}
.seq button.on{background:var(--pink)}.seq button.r1.on{background:var(--cyan)}.seq button.r2.on{background:var(--yellow)}
.seq button.now{outline:4px solid var(--violet);outline-offset:1px}
.seq-ctl{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.seq-ctl input{flex:1;min-width:80px}
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.flip{perspective:700px;height:150px;cursor:pointer}
.flip>div{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.on>div{transform:rotateY(180deg)}
.flip p{position:absolute;inset:0;backface-visibility:hidden;padding:16px;display:grid;place-items:center;text-align:center;border:4px solid var(--ink)}
.flip .q{background:var(--violet);color:var(--paper);font:10px/1.7 var(--px)}
.flip .a{background:var(--yellow);transform:rotateY(180deg);font-size:13px;line-height:1.5}

/* ---------- conceitos ---------- */
#conceitos{background:var(--ink);padding:110px 0 130px;background-image:linear-gradient(rgba(123,44,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(123,44,255,.15) 1px,transparent 1px);background-size:40px 40px}
.collage{columns:3 280px;column-gap:26px;padding:0 6vw}
.piece{break-inside:avoid;margin-bottom:30px;position:relative;transition:.25s cubic-bezier(.2,.9,.3,1.6);animation:none}
.piece:nth-child(odd){transform:rotate(-2deg)}.piece:nth-child(even){transform:rotate(2.2deg)}
.piece:hover{transform:rotate(0) scale(1.07);z-index:4}
.piece .art{background:var(--paper);padding:12px 12px 36px;box-shadow:8px 8px 0 var(--violet)}
.piece .art>div,.piece .art img{display:block;width:100%;min-height:200px;image-rendering:auto}
.piece .cap{position:absolute;bottom:10px;left:14px;right:14px;color:var(--ink);font:10px var(--px)}
.piece .tapes{position:absolute;top:-12px;left:30%;width:80px;height:24px;background:rgba(214,255,46,.85);transform:rotate(-5deg)}
.ph{display:grid;place-items:center;text-align:center;font:10px/1.8 var(--px);color:var(--paper);padding:20px}

/* ---------- contato ---------- */
#contato{background:var(--ink2);padding:130px 6vw 70px;text-align:center;overflow:hidden}
.continue .tag{background:var(--pink);color:var(--paper)}
.continue h2{font:clamp(60px,15vw,200px)/.9 var(--disp);color:var(--lime);text-shadow:6px 6px 0 var(--violet);animation:glitch 3s infinite}
.count{font:clamp(70px,14vw,170px) var(--px);color:var(--paper);margin:10px 0 30px;text-shadow:6px 6px 0 var(--orange)}
.links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:34px;font:10px var(--px)}
.links a{border-bottom:3px solid var(--lime);padding-bottom:4px}.links a:hover{color:var(--lime)}
.fine{margin-top:60px;font-size:12px;opacity:.7}
#egg{opacity:.25;font-size:10px}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:1500;background:rgba(10,4,24,.9);display:none;place-items:center;padding:3vw}
#modal.open{display:grid}
.m-frame{width:min(1100px,100%);animation:pop .3s}
#m-close{font:10px var(--px);background:var(--pink);padding:10px;margin-bottom:10px;cursor:pointer}
.m-screen{aspect-ratio:16/9;background:#000;border:6px solid var(--lime);box-shadow:10px 10px 0 var(--violet)}
.m-screen iframe{width:100%;height:100%;border:0}
.m-bar{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font:10px var(--px);flex-wrap:wrap}
.m-bar a{color:var(--lime)}

/* ---------- cheat ---------- */
body.cheat{animation:cheat 3s linear infinite}
@keyframes cheat{to{filter:hue-rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* vertical (food) */
.tv.v .scr{aspect-ratio:9/16}
.tvs:has(.tv.v){grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.m-frame.vert{width:min(420px,92vw)}
.m-frame.vert .m-screen{aspect-ratio:9/16;max-height:80vh}

.star-b{position:absolute;top:-14px;right:-10px;z-index:6;background:var(--orange);color:var(--paper);font:10px var(--px);padding:7px 8px;transform:rotate(6deg)}

/* ---------- estante de cartuchos ---------- */
#cartuchos{background:var(--ink);padding:110px 0 120px;background-image:radial-gradient(rgba(123,44,255,.25) 1px,transparent 1.5px);background-size:18px 18px}
.shelf-t{font:11px var(--px);color:var(--lime);padding:0 6vw;margin:40px 0 24px}
.shelf{display:flex;gap:34px;flex-wrap:wrap;padding:26px 6vw 0;position:relative}
.shelf::after{content:"";position:absolute;left:3vw;right:3vw;bottom:-18px;height:18px;background:repeating-linear-gradient(90deg,#6b3b1e 0 60px,#5a3017 60px 62px);border-top:6px solid #8a5a2e;box-shadow:0 10px 0 rgba(0,0,0,.4)}
.shelf{padding-bottom:30px;margin-bottom:34px}
.cart{display:block;width:200px;color:var(--paper);transform:rotate(var(--r));transition:.25s cubic-bezier(.2,.9,.3,1.6);position:relative;z-index:2}
.cart:hover{transform:translateY(-18px) rotate(0) scale(1.05);z-index:5}
.cart-top{display:flex;justify-content:space-between;padding:0 18px;height:10px}
.cart-top i{width:28px;height:10px;background:#2a2a38;border:3px solid #12062a;border-bottom:0}
.cart-body{background:#4a4a5c;border:4px solid #12062a;border-radius:10px 10px 4px 4px;padding:10px 10px 8px;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.cart-art{position:relative;aspect-ratio:4/5;background:var(--c);border:4px solid #12062a;overflow:hidden}
.cart-art img{width:100%;height:100%;object-fit:cover;image-rendering:auto;display:block}
.cart-art span{position:absolute;left:0;right:0;bottom:0;background:var(--c);color:var(--pt,#12062a);font:11px/1.4 var(--px);padding:9px 8px;text-align:center;border-top:4px solid #12062a}
.cart-label{padding-top:8px}
.cart-label b{display:block;font:10px/1.5 var(--px)}
.cart-label em{display:block;font:10px var(--px);font-style:normal;color:var(--yellow);margin-top:5px}
.cart-pins{height:10px;margin:0 14px;background:repeating-linear-gradient(90deg,#d4a017 0 6px,transparent 6px 10px)}
.rest{padding:0 6vw}
.rest p{max-width:620px;line-height:1.6;margin-bottom:18px}
.rest b{color:var(--lime)}
#client-wall{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip-c{font:10px var(--px);border:3px solid var(--paper);padding:9px 10px;background:var(--ink2);cursor:pointer}
.chip-c:hover{background:var(--lime);color:var(--ink);transform:rotate(-2deg)}
.rest-links{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- página de projeto ---------- */
#proj{position:fixed;inset:0;z-index:1400;background:#12062a;overflow-y:auto;display:none;--c:#7b2cff;--pt:#fff6e5}
#proj.open{display:block;animation:projIn .7s steps(14)}
@keyframes projIn{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
#proj-close{position:fixed;top:14px;right:18px;z-index:1450;font:10px var(--px);background:var(--pink);color:var(--paper);padding:11px 12px;cursor:pointer;box-shadow:4px 4px 0 #12062a}
.title-screen{position:relative;min-height:100vh;display:grid;align-content:center;justify-items:start;padding:120px 7vw 90px;background:var(--c);overflow:hidden}
.ts-bg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 22px,transparent 22px 44px)}
.title-screen>*{position:relative}
.ts-tag{font:11px var(--px);background:#12062a;color:var(--lime);padding:9px 11px;margin-bottom:26px;transform:rotate(-2deg)}
.title-screen h2{font:clamp(48px,10vw,150px)/.9 var(--disp);color:var(--pt);text-shadow:6px 6px 0 #12062a;max-width:1100px}
.ts-sub{font:clamp(11px,1.6vw,16px)/1.8 var(--px);color:#12062a;margin-top:28px;background:var(--paper);padding:10px 12px;transform:rotate(1deg)}
.press{position:absolute!important;bottom:30px;left:7vw;font:10px var(--px);color:#12062a}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;padding:60px 7vw 10px;background:#12062a}
.pstats div{border:4px solid var(--lime);padding:22px 16px;background:#1b0a3d;box-shadow:6px 6px 0 var(--c)}
.pstats b{display:block;font:clamp(28px,4vw,48px)/1 var(--disp);color:var(--lime)}
.pstats span{font:10px/1.7 var(--px);display:block;margin-top:10px;color:var(--paper)}
.phases{padding:70px 7vw 20px;display:grid;gap:34px;background:#12062a;color:var(--paper)}
.phase{max-width:760px;border-left:8px solid var(--c);padding-left:26px}
.phase:nth-child(even){margin-left:auto;border-left:0;border-right:8px solid var(--c);padding:0 26px 0 0;text-align:right}
.lvl{font:10px var(--px);color:var(--yellow)}
.phase h3{font:clamp(20px,3vw,34px)/1.2 var(--disp);color:var(--lime);margin:10px 0 12px}
.phase p{font-size:clamp(15px,1.6vw,18px);line-height:1.75}
.pmedia{padding:60px 7vw 40px;background:#12062a;display:grid;gap:60px}
.m-cap{font:10px/1.6 var(--px);color:var(--lime);margin-bottom:16px}
.pdf{aspect-ratio:16/10;border:6px solid var(--lime);box-shadow:10px 10px 0 var(--c);background:#000}
.pdf iframe{width:100%;height:100%;border:0}
.pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.pg{background:var(--paper);padding:10px;transform:rotate(var(--tilt));box-shadow:6px 6px 0 var(--c);cursor:pointer;transition:.2s}
.pg:hover{transform:scale(1.07) rotate(0);z-index:3}
.pg img{display:block;width:100%;image-rendering:auto;min-height:120px;background:linear-gradient(135deg,var(--c),#12062a)}
.pvid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.pv{position:relative;text-align:left;cursor:pointer;border:5px solid var(--paper);box-shadow:8px 8px 0 var(--c);aspect-ratio:16/9;overflow:hidden;background:#000}
.pv img{width:100%;height:100%;object-fit:cover;image-rendering:auto;display:block}
.pv span{position:absolute;inset:0;display:grid;place-items:center;font:34px var(--px);color:var(--lime);text-shadow:4px 4px 0 #12062a}
.pv b{position:absolute;left:0;right:0;bottom:0;font:10px/1.5 var(--px);background:rgba(18,6,42,.85);padding:10px}
.phone{width:min(330px,88vw);margin:0 auto;border:10px solid #2a2a38;border-radius:38px;background:#000;box-shadow:12px 12px 0 var(--c);position:relative;overflow:hidden}
.notch{position:absolute;top:0;left:50%;width:90px;height:20px;margin-left:-45px;background:#2a2a38;border-radius:0 0 14px 14px;z-index:3}
.feed{height:min(620px,76vh);overflow-y:auto;scroll-snap-type:y mandatory}
.reel{position:relative;display:block;width:100%;height:100%;scroll-snap-align:start;cursor:pointer;background:linear-gradient(160deg,var(--c),#12062a)}
.reel img{width:100%;height:100%;object-fit:cover;image-rendering:auto;display:block}
.reel span{position:absolute;inset:0;display:grid;place-items:center;font:36px var(--px);color:var(--lime);text-shadow:4px 4px 0 #12062a}
.reel b{position:absolute;left:12px;bottom:18px;font:10px var(--px);color:#fff;text-shadow:2px 2px 0 #12062a}
.pnav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:40px 7vw 80px;background:#12062a}
.pnav a{font:10px var(--px);background:var(--paper);color:#12062a;padding:14px 16px;box-shadow:5px 5px 0 var(--c)}
.pnav a:hover{background:var(--lime)}

.m-screen video,.m-screen img{width:100%;height:100%;object-fit:contain;display:none;background:#000}
.m-frame.pic{width:min(900px,100%)}
.m-frame.pic .m-screen{aspect-ratio:auto;max-height:82vh;display:grid;place-items:center;background:#0a0418}
.m-frame.pic .m-screen img{width:auto;max-width:100%;max-height:82vh;height:auto}

.pgal.wide{grid-template-columns:1fr}
.pgal.wide .pg{transform:none}

/* ===== v3: cursor neon ===== */
body.has-cursor, body.has-cursor *{cursor:none!important}
#cursor{position:fixed;left:0;top:0;z-index:100000;pointer-events:none;display:none;will-change:transform}
body.has-cursor #cursor,body.has-cursor #cursor-ring{display:block}
#cursor svg{display:block;filter:drop-shadow(0 0 3px #b8ff1a) drop-shadow(0 0 10px #b8ff1a);transition:transform .12s}
body.cur-big #cursor svg{transform:scale(1.35) rotate(-10deg)}
#cursor.out,#cursor.out~#cursor-ring{opacity:0}
#cursor-ring{position:fixed;left:0;top:0;margin:-17px 0 0 -17px;width:34px;height:34px;border:2px solid #b8ff1a;border-radius:50%;box-shadow:0 0 12px #b8ff1a,inset 0 0 8px rgba(184,255,26,.35);z-index:99999;pointer-events:none;display:none;transition:width .2s,height .2s,margin .2s,background .2s}
body.cur-big #cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(184,255,26,.12)}
#cursor-label{left:30px;top:20px;background:#b8ff1a;box-shadow:3px 3px 0 #0a0418}

/* ===== v3: castelo imersivo ===== */
#castelo{padding:90px 0 80px;background:#07021a}
#castelo .sec-head{margin-bottom:26px}
.scene{position:relative;width:100%;aspect-ratio:16/9;max-height:94vh;overflow:hidden;background:#07021a;border-top:4px solid #b8ff1a;border-bottom:4px solid #b8ff1a}
.scene canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
#hot{position:absolute;inset:0}
.scene canvas,.scene #hot{transition:transform .3s}
.hs{position:absolute;display:block;background:transparent;border:0;border-radius:8px 8px 0 0;z-index:2}
.hs::after{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.8);white-space:nowrap;background:#b8ff1a;color:#0a0418;font:10px var(--px);padding:7px 9px;opacity:0;pointer-events:none;transition:.15s;box-shadow:3px 3px 0 #0a0418}
.hs:hover::after,.hs:focus-visible::after{opacity:1;transform:translateX(-50%) scale(1)}
.hs:hover,.hs:focus-visible{box-shadow:0 0 22px 5px rgba(55,230,255,.65);outline:0}
.hs.door{border-radius:50% 50% 0 0/30% 30% 0 0}
.hs.door:hover{box-shadow:0 0 26px 8px rgba(184,255,26,.7)}
.scene-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(5,1,16,.8))}
.castle-tip{position:absolute;left:0;right:0;bottom:16px;margin:0;min-height:0;text-align:center;font:10px var(--px);color:#b8ff1a;text-shadow:2px 2px 0 #0a0418;z-index:3;pointer-events:none}
.scene.zoom canvas,.scene.zoom #hot{transform:scale(5);transform-origin:var(--ox) var(--oy);transition:transform .6s cubic-bezier(.7,0,.9,.3)}
.scene.zoom::after{content:"";position:absolute;inset:0;background:#ffd93d;opacity:0;animation:flash .6s forwards;pointer-events:none;z-index:4}
@keyframes flash{65%{opacity:0}100%{opacity:.95}}
.rooms{margin-top:34px}

/* ===== v3: visualizador em tela cheia ===== */
#modal{position:fixed;inset:0;z-index:2000;background:#000;display:none;padding:0;place-items:normal}
#modal.open{display:block}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center}
.lb-stage iframe{width:100%;height:100%;border:0}
.lb-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.lb-stage img{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain}
.lb-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:18px;padding:14px 18px;background:linear-gradient(rgba(0,0,0,.8),transparent);font:10px var(--px);pointer-events:none}
.lb-top>*{pointer-events:auto}
#m-title{flex:1;line-height:1.6}
#m-count{color:#b8ff1a}
#m-open{color:#b8ff1a}
#m-close{background:#ff3fa4;color:#fff;padding:11px 12px;cursor:pointer;margin:0;font:10px var(--px)}
.lb-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);font:22px var(--px);color:#b8ff1a;background:rgba(0,0,0,.5);padding:26px 14px;cursor:pointer;text-shadow:0 0 10px #b8ff1a}
.lb-arrow:hover{background:rgba(184,255,26,.2)}
#m-prev{left:0}#m-next{right:0}
.lb-arrow[hidden]{display:none}

/* ===== v3: projetos sem moldura ===== */
.pmedia{padding:60px 3vw 40px}
.pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pg{background:none;padding:0;box-shadow:none;transform:none;border:0;cursor:pointer;overflow:hidden;position:relative}
.pg:hover{transform:none;z-index:1}
.pg img{display:block;width:100%;height:auto;min-height:0;background:#1b0a3d;transition:transform .35s}
.pg:hover img{transform:scale(1.04)}
.pg::after{content:"⤢";position:absolute;right:10px;top:10px;font:16px var(--px);color:#b8ff1a;text-shadow:2px 2px 0 #0a0418;opacity:0;transition:.2s}
.pg:hover::after{opacity:1}
.pgal.wide{grid-template-columns:1fr}
.pgal.wide .pg{transform:none}
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.reels .reel{display:block;position:relative;width:100%;height:auto;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(160deg,var(--c),#12062a);cursor:pointer}
.reels .reel img{width:100%;height:100%;object-fit:cover}
.pv{box-shadow:none;border:0}

/* ===== v4: cartuchos estilo SNES ===== */
.cart.snes{width:236px;transform:rotate(var(--r));filter:drop-shadow(7px 8px 0 rgba(0,0,0,.5))}
.cart.snes:hover{transform:translateY(-22px) rotate(0) scale(1.05)}
.snes-body{position:relative;width:100%;aspect-ratio:1.2;background:linear-gradient(#bdbdc6,#a2a2ad 55%,#8f8f9a);clip-path:polygon(0 0,100% 0,100% 86%,94.5% 86%,94.5% 100%,5.5% 100%,5.5% 86%,0 86%);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 3px 0 0 rgba(255,255,255,.2),inset -3px 0 0 rgba(0,0,0,.18)}
.snes-body .grip{position:absolute;top:0;width:15%;height:7%;background:repeating-linear-gradient(90deg,#6e6e79 0 2px,#b3b3bc 2px 5px);border-bottom:2px solid #7d7d88}
.snes-body .grip.l{left:3.5%}.snes-body .grip.r{right:3.5%}
.snes-label{position:absolute;left:7%;right:7%;top:11%;bottom:20%;background:#55555f;padding:4px;border-radius:5px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 2px #45454e}
.s-art{flex:1;position:relative;background:var(--c);overflow:hidden;border:2px solid #12062a;border-radius:2px}
.s-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto}
.s-art span{position:absolute;left:0;right:0;bottom:0;background:var(--c);color:var(--pt,#12062a);font:10px/1.3 var(--px);padding:6px 6px;text-align:center;border-top:3px solid #12062a}
.s-strip{background:#12062a;padding:5px 7px 6px;border-top:3px solid var(--c);margin-top:3px}
.s-strip b{display:block;font:10px/1.45 var(--px);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-strip em{display:block;font:10px var(--px);font-style:normal;color:var(--yellow);margin-top:3px}
.snes-pins{position:absolute;left:12%;right:12%;bottom:0;height:8%;background:repeating-linear-gradient(90deg,#d4a017 0 3px,#5b3f00 3px 5px)}
.shelf{gap:40px}

/* ===== v5: cursor e setas em pixel art ===== */
#cursor img{display:block;filter:drop-shadow(0 0 3px #b8ff1a) drop-shadow(0 0 9px #b8ff1a);transition:transform .12s;image-rendering:pixelated}
body.cur-big #cursor img{transform:scale(1.25)}
.lb-arrow img{display:block;filter:drop-shadow(0 0 6px #b8ff1a);image-rendering:pixelated}
.lb-arrow{padding:24px 16px;font-size:0}

/* ===== v5: dispositivos (portátil vertical e TV de tubo) ===== */
.lb-btn{background:#2a1650;color:var(--paper);padding:11px 12px;cursor:pointer;font:10px var(--px);border:2px solid #b8ff1a}
.lb-btn.close{background:#ff3fa4;border-color:#ff3fa4;color:#fff}
.lb-btn:hover{background:#b8ff1a;color:#0a0418}
#modal[data-mode=pic] #m-frame{display:none}
.dev{display:none;position:relative}
.dev-screen{position:relative;background:#000;overflow:hidden}
.dev-screen iframe,.dev-screen video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.dev-screen .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.dev-screen .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.13),transparent 52%)}
#modal[data-mode=pic] .dev{display:none!important}
#modal[data-mode=gb] .lb-stage img,#modal[data-mode=tv] .lb-stage img{display:none!important}
.knobs,.dpad,.ab,.pills,.grille{display:none}

/* portátil roxo (vertical) */
#modal[data-mode=gb] .dev{--H:min(92vh,1100px);display:grid;grid-template-rows:auto auto 1fr;height:var(--H);aspect-ratio:1/2.12;font-size:calc(var(--H)/100);padding:3.4% 8% 0;
  background:linear-gradient(160deg,#9170ea,#6137c9 55%,#4a2a98);border-radius:2.4em 2.4em 9em 2.4em;
  box-shadow:0 0 0 .5em #1b0a3d,1.4em 1.6em 0 #000,inset 0 .45em 0 rgba(255,255,255,.32),inset 0 -1em 0 rgba(0,0,0,.25)}
#modal[data-mode=gb] .dev-head{display:flex;align-items:center;gap:1.2em;font:1em/1 var(--px);font-size:.9em;color:#e4d6ff;letter-spacing:.05em;padding:.4em .2em 1em}
.dev-head .led{display:inline-block;width:1.4em;height:1.4em;border-radius:50%;background:#ff3050;box-shadow:0 0 1em #ff3050}
#modal[data-mode=gb] .dev-screen{width:100%;aspect-ratio:9/16;border:.9em solid #1b0a3d;border-radius:1em 1em 1em 5em;box-shadow:inset 0 0 2em rgba(0,0,0,.7)}
#modal[data-mode=gb] .dev-foot{position:relative}
#modal[data-mode=gb] .dpad{display:block;position:absolute;left:1.5em;top:3.2em;width:12em;height:12em}
.dpad .h,.dpad .v{position:absolute;background:#241247;border-radius:.7em;box-shadow:0 .5em 0 #120826}
.dpad .h{left:0;top:4.2em;width:12em;height:3.6em}.dpad .v{left:4.2em;top:0;width:3.6em;height:12em}
.dpad button{position:absolute;width:4em;height:4em;top:4em;background:transparent;border:0;cursor:pointer;z-index:2}
.dpad #d-left{left:0}.dpad #d-right{right:0}
.dpad button::after{content:"";position:absolute;top:50%;left:50%;width:1.4em;height:1.4em;margin:-.7em;background:#b8ff1a;clip-path:polygon(100% 0,0 50%,100% 100%)}
.dpad #d-right::after{clip-path:polygon(0 0,100% 50%,0 100%)}
.dpad button:hover::after{background:#fff}
#modal[data-mode=gb] .ab{display:block;position:absolute;right:1.6em;top:2.2em;width:15em;height:12em;transform:rotate(-24deg)}
.ab button{position:absolute;width:6.2em;height:6.2em;border-radius:50%;background:#c2185b;border:0;color:#ffd0e6;font:1.5em var(--px);font-size:1.6em;cursor:pointer;box-shadow:0 .6em 0 #6a0b32,inset 0 .35em 0 rgba(255,255,255,.35)}
.ab #b-btn{left:0;top:4em}.ab #a-btn{right:0;top:1em}
.ab button:active{transform:translateY(.4em);box-shadow:0 .1em 0 #6a0b32}
#modal[data-mode=gb] .pills{display:flex;gap:2em;position:absolute;left:50%;bottom:6em;transform:translateX(-50%) rotate(-24deg)}
.pills i{display:block;width:5em;height:1.4em;border-radius:1em;background:#241247}
#modal[data-mode=gb] .grille{display:flex;gap:1em;position:absolute;right:3em;bottom:1.4em;transform:rotate(-24deg)}
.grille i{display:block;width:.8em;height:7em;border-radius:1em;background:#2a1457}
#modal[data-mode=gb] .knobs{display:none}

/* TV de tubo (horizontal) */
#modal[data-mode=tv] .dev{display:block;padding:1.3vh 1.2vw 0;background:linear-gradient(#52525f,#33333f 70%,#2a2a35);border-radius:3.2vh;
  box-shadow:0 0 0 4px #14141c,10px 14px 0 #000,inset 0 3px 0 rgba(255,255,255,.22),inset 0 -6px 0 rgba(0,0,0,.3)}
#modal[data-mode=tv] .dev-head{display:none}
#modal[data-mode=tv] .dev-screen{width:min(95vw,calc((88vh - 6.4vh)*1.7778));aspect-ratio:16/9;border-radius:3.2vh/2.6vh;box-shadow:inset 0 0 5vh rgba(0,0,0,.85),0 0 0 .5vh #14141c}
#modal[data-mode=tv] .dev-foot{height:6.4vh;display:flex;align-items:center}
#modal[data-mode=tv] .knobs{display:flex;align-items:center;gap:1.4vw;width:100%;padding:0 1.6vw}
.knobs i{display:block;width:3.6vh;height:3.6vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8d8e4,#6e6e7c);box-shadow:0 .4vh 0 #14141c}
.knobs i:nth-child(2){background:radial-gradient(circle at 35% 30%,#b8ff1a,#5c8a00)}
.tv-grille{margin-left:auto;width:12vw;height:2.8vh;background:repeating-linear-gradient(90deg,#14141c 0 3px,transparent 3px 8px);opacity:.8}

/* sem moldura */
#modal.frameless .dev{display:block!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;height:auto!important;aspect-ratio:auto!important}
#modal.frameless .dev-head,#modal.frameless .dev-foot,#modal.frameless .dev-screen .scan,#modal.frameless .dev-screen .glare{display:none!important}
#modal.frameless[data-mode=gb] .dev-screen{height:100vh;width:auto;aspect-ratio:9/16;border:0;border-radius:0;box-shadow:none}
#modal.frameless[data-mode=tv] .dev-screen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
#modal.frameless[data-mode=pic] .lb-stage img{max-width:100vw;max-height:100vh}
#modal[data-mode=gb] .dev{grid-template-columns:minmax(0,1fr)}
#modal[data-mode=gb] .dev-foot{min-height:0}

/* ===== v6: portátil com mais tela e botões menores ===== */
#modal[data-mode=gb] .dev{--H:min(94vh,1100px);aspect-ratio:1/1.98;padding:2% 5% 0;border-radius:2em 2em 5em 2em;box-shadow:0 0 0 .4em #1b0a3d,1.2em 1.4em 0 #000,inset 0 .4em 0 rgba(255,255,255,.3),inset 0 -.8em 0 rgba(0,0,0,.25)}
#modal[data-mode=gb] .dev-head{font-size:.7em;gap:.9em;padding:.2em .2em .7em}
#modal[data-mode=gb] .dev-head .led{width:1em;height:1em}
#modal[data-mode=gb] .dev-screen{border-width:.6em;border-radius:.7em .7em .7em 3em}
#modal[data-mode=gb] .dpad{left:1.2em;top:1.3em;width:8.4em;height:8.4em}
.dpad .h{top:2.9em;width:8.4em;height:2.6em}.dpad .v{left:2.9em;width:2.6em;height:8.4em}
.dpad button{width:3em;height:3em;top:2.7em}
.dpad button::after{width:1em;height:1em;margin:-.5em}
#modal[data-mode=gb] .ab{right:1.2em;top:.9em;width:11em;height:9em;transform:rotate(-22deg)}
.ab button{width:4.4em;height:4.4em;font-size:1.2em;box-shadow:0 .4em 0 #6a0b32,inset 0 .25em 0 rgba(255,255,255,.35)}
.ab #b-btn{top:3em}.ab #a-btn{top:.6em}
#modal[data-mode=gb] .pills{bottom:2.2em;gap:1.4em}
.pills i{width:3.4em;height:1em}
#modal[data-mode=gb] .grille{right:2em;bottom:.8em;gap:.7em}
.grille i{width:.6em;height:4.6em}
#modal[data-mode=gb] .lb-stage{padding-top:5.5vh}
#modal[data-mode=gb] .dev{--H:min(89vh,1100px)}

/* ===== v7: tela máxima, botões coladinhos embaixo ===== */
#modal[data-mode=gb] .dev{aspect-ratio:1/1.9;padding:1.3% 4% 0;border-radius:1.8em 1.8em 4em 1.8em}
#modal[data-mode=gb] .dev-head span{display:none}
#modal[data-mode=gb] .dev-head{padding:.1em .2em .45em;justify-content:flex-end}
#modal[data-mode=gb] .dev-head .led{width:.8em;height:.8em}
#modal[data-mode=gb] .dev-screen{border-width:.5em;border-radius:.6em .6em .6em 2.4em}
#modal[data-mode=gb] .dpad{left:.9em;top:.3em;width:6.4em;height:6.4em}
.dpad .h{top:2.2em;width:6.4em;height:2em}.dpad .v{left:2.2em;width:2em;height:6.4em}
.dpad button{width:2.2em;height:2.2em;top:2.1em}
.dpad button::after{width:.8em;height:.8em;margin:-.4em}
#modal[data-mode=gb] .ab{right:.9em;top:.1em;width:8.6em;height:7em;transform:rotate(-22deg)}
.ab button{width:3.4em;height:3.4em;font-size:1em;box-shadow:0 .3em 0 #6a0b32,inset 0 .2em 0 rgba(255,255,255,.35)}
.ab #b-btn{top:2.6em}.ab #a-btn{top:.6em}
#modal[data-mode=gb] .pills{bottom:.9em;gap:1em}
.pills i{width:2.6em;height:.8em}
#modal[data-mode=gb] .grille{display:none}

/* ===== v8: botões no tamanho anterior, todos na mesma linha, bem embaixo ===== */
#modal[data-mode=gb] .dev{aspect-ratio:1/1.97;padding:1.3% 4% 0}
#modal[data-mode=gb] .dpad{left:1.2em;top:1.1em;width:8.4em;height:8.4em}
.dpad .h{top:2.9em;width:8.4em;height:2.6em}.dpad .v{left:2.9em;width:2.6em;height:8.4em}
.dpad button{width:3em;height:3em;top:2.7em}
.dpad button::after{width:1em;height:1em;margin:-.5em}
#modal[data-mode=gb] .ab{right:1.2em;top:1.3em;width:11em;height:8em;transform:rotate(-9deg)}
.ab button{width:4.4em;height:4.4em;font-size:1.2em;box-shadow:0 .4em 0 #6a0b32,inset 0 .25em 0 rgba(255,255,255,.35)}
.ab #b-btn{left:0;top:1.9em}.ab #a-btn{right:0;top:.5em}
#modal[data-mode=gb] .pills{bottom:.5em;gap:2em;transform:translateX(-50%) rotate(-9deg)}
.pills i{width:4em;height:1.1em}

/* ===== v9: botões no tamanho da primeira versão, descidos ===== */
#modal[data-mode=gb] .dpad{left:1.8em;top:5.2em;width:12em;height:12em}
.dpad .h{top:4.2em;width:12em;height:3.6em}.dpad .v{left:4.2em;width:3.6em;height:12em}
.dpad button{width:4em;height:4em;top:4em}
.dpad button::after{width:1.4em;height:1.4em;margin:-.7em}
#modal[data-mode=gb] .ab{right:1.8em;top:5.4em;width:15em;height:11em;transform:rotate(-10deg)}
.ab button{width:6.2em;height:6.2em;font-size:1.6em}
.ab #b-btn{left:0;top:3.6em}.ab #a-btn{right:0;top:1em}
#modal[data-mode=gb] .pills{bottom:.9em;gap:2.4em}
.pills i{width:5em;height:1.4em}
#modal[data-mode=gb] .ab{top:6.4em;right:1.6em;width:14.6em;height:7em;transform:rotate(-8deg)}
.ab #b-btn{left:0;top:1.6em}.ab #a-btn{left:8.2em;right:auto;top:0}
#modal[data-mode=gb] .dpad{top:6em}

/* ===== v10: sem start/select; A e B 30% menores e dentro do corpo ===== */
#modal[data-mode=gb] .pills{display:none!important}
#modal[data-mode=gb] .ab{top:6.6em;right:2.4em;width:10.6em;height:6.4em;transform:rotate(-8deg)}
.ab button{width:4.3em;height:4.3em;font-size:1.15em}
.ab #b-btn{left:0;top:1.5em}.ab #a-btn{left:6em;right:auto;top:0}
#modal[data-mode=gb] .ab{top:6.4em;right:1.8em;width:15em;height:8em}
.ab button{width:6em;height:6em;font-size:1.15em}
.ab #b-btn{left:0;top:1.8em}.ab #a-btn{left:7.8em;top:0}

/* ===== v11: zoom em tamanho real ===== */
.lb-stage{overflow:hidden}
#m-img{cursor:zoom-in}
.lb-stage.zoomed{display:block;overflow:auto;scrollbar-width:thin;scrollbar-color:#b8ff1a #12062a}
.lb-stage.zoomed #m-img{max-width:none!important;max-height:none!important;width:auto;height:auto;margin:0 auto;cursor:grab;image-rendering:auto}
.lb-stage.zoomed #m-img:active{cursor:grabbing}
#m-zoomnote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;background:#b8ff1a;color:#0a0418;font:10px var(--px);padding:9px 12px;box-shadow:3px 3px 0 #0a0418;pointer-events:none}
#m-zoomnote[hidden]{display:none}
#modal[data-mode=gb] #m-zoom,#modal[data-mode=tv] #m-zoom{display:none!important}

/* ===== v12: qualidade HD no mesmo tamanho (sem zoom real) ===== */
#m-img{cursor:default}
.lb-stage.zoomed{display:grid;overflow:hidden}
.hd-chip{font:10px var(--px);color:#0a0418;background:#b8ff1a;padding:8px 10px;box-shadow:3px 3px 0 #0a0418;min-width:56px;text-align:center}
.hd-chip:empty{display:none}
#modal[data-mode=gb] #m-zoom,#modal[data-mode=tv] #m-zoom{display:none!important}
/* imagens muito compridas (ex.: manual do INCE): ajusta à largura e rola */
.lb-stage.tall{display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#b8ff1a #12062a}
.lb-stage.tall #m-img{max-width:min(100vw,1100px)!important;max-height:none!important;width:100%;height:auto;margin:60px auto 40px}

/* ===== v13: títulos com contraste (cor do título ≠ cor da sombra) ===== */
.title-screen h2{color:var(--pt);text-shadow:4px 4px 0 var(--ts,#12062a),8px 8px 0 var(--ts,#12062a);-webkit-text-stroke:0;letter-spacing:-.01em}
.ts-tag{background:#12062a;color:#d6ff2e}
.ts-sub{background:var(--paper);color:#12062a;box-shadow:5px 5px 0 var(--ts,#12062a)}
.press{color:var(--pt)!important;text-shadow:2px 2px 0 var(--ts,#12062a)}

/* ===== v14: fundo com marca d'água de games e anos 90 ===== */
.ts-bg{background:
  radial-gradient(circle at 1px 1px,rgba(0,0,0,.18) 1.5px,transparent 1.8px) 0 0/14px 14px,
  repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 22px,transparent 22px 44px)}
.ts-bg.wm-dark{background-image:
  radial-gradient(circle at 1px 1px,rgba(18,6,42,.2) 1.5px,transparent 1.8px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='rgba(18,6,42,.17)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 30 q8 -14 16 0 t16 0 t16 0'/><path d='M108 18 l16 28 h-32z'/><circle cx='136' cy='104' r='10'/><path d='M40 112 v20 M30 122 h20'/><path d='M70 82 l10 10 m0 -10 l-10 10'/><circle cx='20' cy='84' r='3' fill='rgba(18,6,42,.17)'/><circle cx='90' cy='146' r='3' fill='rgba(18,6,42,.17)'/><path d='M120 150 q8 -14 16 0 t16 0'/></svg>");
  background-size:14px 14px,170px 170px}
.ts-bg.wm-light{background-image:
  radial-gradient(circle at 1px 1px,rgba(255,246,229,.16) 1.5px,transparent 1.8px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='rgba(255,246,229,.15)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 30 q8 -14 16 0 t16 0 t16 0'/><path d='M108 18 l16 28 h-32z'/><circle cx='136' cy='104' r='10'/><path d='M40 112 v20 M30 122 h20'/><path d='M70 82 l10 10 m0 -10 l-10 10'/><circle cx='20' cy='84' r='3' fill='rgba(255,246,229,.15)'/><circle cx='90' cy='146' r='3' fill='rgba(255,246,229,.15)'/><path d='M120 150 q8 -14 16 0 t16 0'/></svg>");
  background-size:14px 14px,170px 170px}
.ts-bg .wm{position:absolute;opacity:.2;pointer-events:none;image-rendering:pixelated;filter:saturate(.8);animation:wmf 11s ease-in-out infinite}
@keyframes wmf{50%{transform:translateY(-16px)}}
.title-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.28))}
/* fases e mídia: grade de pontos + cruzes pixel, como papel de caderno de jogo */
.pstats,.phases,.pmedia,.pnav{background-color:#12062a;background-image:radial-gradient(rgba(214,255,46,.08) 1.6px,transparent 1.9px),linear-gradient(rgba(123,44,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(123,44,255,.07) 1px,transparent 1px);background-size:26px 26px,52px 52px,52px 52px}
.title-screen>.ts-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.title-screen>*:not(.ts-bg){z-index:1}

/* ===== v15: galeria Behance (todas as artes) ===== */
#conceitos .filters{padding:0 6vw;margin-bottom:24px}
#conceitos .fchip{background:#12062a;color:#fff6e5;border-color:#b8ff1a}
#conceitos .fchip.on{background:#b8ff1a;color:#12062a}
.bgal{columns:4 230px;column-gap:10px;padding:0 3vw}
.bp{display:block;width:100%;margin:0 0 10px;padding:0;border:0;background:#1b0a3d;cursor:pointer;overflow:hidden;break-inside:avoid;position:relative}
.bp img{display:block;width:100%;height:auto;min-height:80px;transition:transform .35s}
.bp:hover img{transform:scale(1.05)}
.bp::after{content:"⤢";position:absolute;right:8px;top:8px;font:14px var(--px);color:#b8ff1a;text-shadow:2px 2px 0 #0a0418;opacity:0;transition:.2s}
.bp:hover::after{opacity:1}
.bmore{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:34px 6vw 0}
.bp::before{content:attr(data-cl);position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(transparent,rgba(10,4,24,.92));color:#b8ff1a;font:10px var(--px);padding:22px 8px 8px;opacity:0;transition:.2s;text-align:left}
.bp:hover::before{opacity:1}

.bp .cnt{position:absolute;left:8px;top:8px;z-index:3;background:#b8ff1a;color:#0a0418;font:10px var(--px);padding:6px 7px;box-shadow:2px 2px 0 #0a0418}

/* vídeo de slide (4:5) sem moldura, tela inteira */
#modal.plain .dev{display:block!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;height:auto!important;aspect-ratio:auto!important}
#modal.plain .dev-head,#modal.plain .dev-foot,#modal.plain .dev-screen .scan,#modal.plain .dev-screen .glare{display:none!important}
#modal.plain .dev-screen{height:100vh;width:auto;aspect-ratio:4/5;max-width:100vw;border:0;border-radius:0;box-shadow:none}
#modal.plain #m-frame{display:none}


/* ===== v16: showreel no herói + correções ===== */
html,body{max-width:100%}
html{overflow-x:clip}
body{overflow-x:clip}
#hero{grid-template-columns:1fr minmax(320px,540px)}
.hero-tv{position:relative;z-index:3;justify-self:center;width:100%;max-width:540px}
.hero-tv::before,.hero-tv::after{content:"";position:absolute;top:-34px;width:3px;height:48px;background:#14141c;transform-origin:bottom;z-index:-1}
.hero-tv::before{left:38%;transform:rotate(-26deg)}.hero-tv::after{left:58%;transform:rotate(22deg)}
.hero-tv .tv-body{background:linear-gradient(#52525f,#33333f 70%,#2a2a35);border-radius:22px;padding:10px 10px 0;box-shadow:0 0 0 4px #14141c,10px 12px 0 var(--violet),inset 0 3px 0 rgba(255,255,255,.22);transform:rotate(2deg);transition:.3s}
.hero-tv:hover .tv-body{transform:rotate(-1deg) scale(1.02)}
.tv-screen{position:relative;aspect-ratio:16/9;border-radius:16px/13px;overflow:hidden;background:#000;box-shadow:inset 0 0 28px rgba(0,0,0,.85)}
.tv-screen video{width:100%;height:100%;object-fit:cover;display:block}
.tv-screen .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);pointer-events:none}
.tv-foot{display:flex;align-items:center;gap:8px;padding:8px 6px 10px}
.tv-foot i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8d8e4,#6e6e7c)}
.tv-foot i:nth-child(2){background:radial-gradient(circle at 35% 30%,#b8ff1a,#5c8a00)}
.tv-foot span{margin-left:auto;font:10px var(--px);color:#9a9aab}
.hero-tv .cinema{display:block;margin:26px auto 0;text-align:center}
@media(max-width:800px){#hero{grid-template-columns:1fr}.hero-tv{margin:30px 0 50px;max-width:100%}}

/* modo cinema: filme em tela cheia, sem moldura */
#modal.cinema .dev{display:block!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
#modal.cinema .dev-head,#modal.cinema .dev-foot,#modal.cinema .dev-screen .scan,#modal.cinema .dev-screen .glare{display:none!important}
#modal.cinema[data-mode=tv] .dev-screen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
#modal.cinema #m-frame{display:none}

/* placar: números não estouram a caixa */
.stat{min-width:0;overflow:hidden}
.stat b{font-size:clamp(28px,4.2vw,54px);white-space:nowrap}

/* castelo rolável no celular */
.scene-scroll{width:100%;height:100%}
.scene-in{position:relative;width:100%;height:100%}
@media(max-width:700px){
  .scene{aspect-ratio:auto;height:96vw;max-height:none}
  .scene-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .scene-scroll::-webkit-scrollbar{display:none}
  .scene-in{width:200vw}
  .castle-tip{font-size:10px;padding:0 10px}
  /* visualizador no celular: barra de cima compacta */
  .lb-top{flex-wrap:wrap;gap:8px;padding:10px}
  #m-title{flex:1 1 100%;font-size:10px}
  .lb-btn{padding:8px 8px;font-size:10px}
  #m-close{padding:8px 9px}
  #modal[data-mode=gb] .lb-stage{padding-top:11vh}
}

/* texto só para leitores de tela e buscadores */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== acessibilidade ===== */
.skip{position:fixed;left:8px;top:-60px;z-index:100001;background:#b8ff1a;color:#0a0418;font:12px var(--px,monospace);padding:12px 14px;transition:top .15s}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #b8ff1a;outline-offset:3px}
body.no-cursor,body.no-cursor *{cursor:auto!important}
body.no-cursor #cursor{display:none!important}
#curtog{font-size:16px;cursor:pointer}
@media (hover:none){#curtog{display:none}}

/* ===== OSD de VHS no showreel ===== */
.osd{position:absolute;inset:0;pointer-events:none;font:11px var(--px);color:#fff;text-shadow:2px 2px 0 #000,0 0 6px rgba(120,255,160,.6);letter-spacing:.06em}
.osd b{position:absolute;left:5%;top:7%;color:#7dff9b}
.osd span{position:absolute;right:5%;top:7%}
.osd em{position:absolute;left:5%;bottom:8%;font-style:normal}
.osd u{position:absolute;right:5%;bottom:8%;text-decoration:none}
.osd b.blink{animation:osdb .9s steps(2) infinite}
@keyframes osdb{50%{opacity:0}}
.tv-screen .trk{position:absolute;left:0;right:0;height:14%;bottom:-20%;background:linear-gradient(transparent,rgba(255,255,255,.28),transparent);mix-blend-mode:overlay;pointer-events:none;opacity:0}
.tv-screen.paused video{animation:jit .12s steps(2) infinite;filter:contrast(1.3) saturate(1.4)}
.tv-screen.paused .trk{opacity:1;animation:trk 1.6s linear infinite}
@keyframes jit{0%{transform:translateX(-2px)}50%{transform:translateX(3px) translateY(1px)}}
@keyframes trk{to{bottom:110%}}
#tv-screen{cursor:pointer}

/* ===== SUPER TRUNFO ===== */
#trunfo{padding:90px 0}
.trunfo-hand{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:36px 4%;perspective:900px}
.tcard{width:210px;min-height:310px;border-radius:14px;background:var(--c,#7a2cff);color:var(--k,#fff);border:4px solid #0a0418;box-shadow:6px 6px 0 #0a0418;padding:10px;font:10px var(--px);text-align:left;cursor:pointer;transition:transform .25s;display:flex;flex-direction:column;gap:8px;position:relative}
.tcard:hover,.tcard:focus-visible{transform:translateY(-8px) rotate(-2deg)}
.tcard.sel{outline:4px solid #b8ff1a;transform:translateY(-12px)}
.tcard.win{animation:tw .6s steps(4) 2}
.tcard.lose{filter:grayscale(1);opacity:.6}
@keyframes tw{50%{transform:scale(1.08) rotate(3deg)}}
.tcard .tn{display:flex;justify-content:space-between}
.tcard .tp{height:120px;border:3px solid #0a0418;background:#0a0418 center/cover;display:grid;place-items:center;font-size:38px}
.tcard h3{font:12px var(--px);line-height:1.4;margin:0}
.tcard ul{list-style:none;padding:0;margin:0;display:grid;gap:5px;line-height:1.5}
.tcard li{display:flex;justify-content:space-between;gap:8px;background:rgba(0,0,0,.28);padding:4px 6px}
.tcard li.key{background:#b8ff1a;color:#0a0418}
.trunfo-duel{text-align:center}#trunfo-msg{font:12px var(--px);margin-top:16px;min-height:2.4em}

#trunfo .lede{margin:0 4%;max-width:640px}
#trunfo .sec-head{margin-left:4%}
.tcard{font-size:10px}.tcard li span{text-align:left}

/* ===== ELEVADOR ===== */
#elev{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:900;font:10px var(--px)}
#elev-toggle{background:#0a0418;color:#b8ff1a;border:3px solid #b8ff1a;padding:10px 10px;cursor:pointer;font:10px var(--px);box-shadow:4px 4px 0 #7a2cff;display:flex;gap:6px;align-items:center}
#elev-panel{list-style:none;margin:8px 0 0;padding:6px;background:#0a0418;border:3px solid #b8ff1a;display:grid;gap:4px;box-shadow:4px 4px 0 #7a2cff}
#elev-panel[hidden]{display:none}
#elev-panel button{width:100%;text-align:left;background:transparent;color:#f3e9ff;border:0;padding:8px;font:10px var(--px);cursor:pointer;display:flex;gap:8px}
#elev-panel button b{color:#b8ff1a;min-width:2.2em}
#elev-panel button:hover,#elev-panel button.on{background:#b8ff1a;color:#0a0418}#elev-panel button:hover b,#elev-panel button.on b{color:#0a0418}
#elev.ding #elev-toggle{animation:ding .5s steps(3)}
@keyframes ding{50%{background:#b8ff1a;color:#0a0418}}
@media(max-width:700px){#elev{top:auto;bottom:14px;transform:none}}
body.booting #elev,#proj.open~#elev{display:none}

/* ===== WALKMAN ===== */
#walkman{position:fixed;left:14px;bottom:14px;z-index:900;font:10px var(--px)}
#wk-toggle{background:#0a0418;color:#ff3fa4;border:3px solid #ff3fa4;padding:10px;cursor:pointer;font:10px var(--px);box-shadow:4px 4px 0 #7a2cff}
#wk-body{margin-top:8px;width:230px;background:linear-gradient(#cfd0da,#9a9bab);border:3px solid #0a0418;border-radius:10px;padding:10px;box-shadow:5px 5px 0 #7a2cff;color:#0a0418}
#wk-body[hidden]{display:none}
.wk-deck{display:flex;align-items:center;justify-content:space-between;background:#2a2a35;border-radius:6px;padding:8px}
.wk-reel{width:38px;height:38px;border-radius:50%;background:conic-gradient(#f3e9ff 0 12%,#2a2a35 0 25%,#f3e9ff 0 37%,#2a2a35 0 50%,#f3e9ff 0 62%,#2a2a35 0 75%,#f3e9ff 0 87%,#2a2a35 0)}
#walkman.on .wk-reel{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wk-label{flex:1;text-align:center;background:#fff6e5;margin:0 8px;padding:6px 2px;display:grid;gap:4px;line-height:1.4}
#wk-vis{display:block;width:100%;height:28px;background:#0a0418;margin:8px 0;image-rendering:pixelated}
.wk-btns{display:flex;gap:6px}.wk-btns button{flex:1;background:#0a0418;color:#b8ff1a;border:0;padding:10px 0;cursor:pointer;font-size:14px}
.wk-note{margin:8px 0 0;font-size:10px;line-height:1.5;opacity:.8}
@media(max-width:700px){#walkman{bottom:64px}}
body.booting #walkman{display:none}

/* ===== TV GUIA ===== */
#guia{padding:90px 0}#guia .lede{margin:0 4%;max-width:640px}#guia .sec-head{margin-left:4%}
.guia{margin:32px 4%;border:4px solid #0a0418;box-shadow:8px 8px 0 #7a2cff;background:#0a0a8c;color:#fff;font:11px var(--px)}
.guia .gh{display:grid;grid-template-columns:90px 1fr 1fr;background:#000070;border-bottom:3px solid #fff;padding:8px 10px;gap:8px;color:#ffe600}
.guia .gr{display:grid;grid-template-columns:90px 1fr;border-bottom:2px solid rgba(255,255,255,.35)}
.guia .ch{padding:12px 10px;background:#000070;color:#ffe600;border-right:2px solid #fff}
.guia button.pg{all:unset;box-sizing:border-box;cursor:pointer;padding:12px 12px;display:grid;gap:5px;line-height:1.5;background:var(--c,#1a1ab8);color:var(--k,#fff)}
.guia button.pg:hover,.guia button.pg:focus-visible{background:#ffe600;color:#0a0a8c;outline:3px solid #fff;outline-offset:-3px}
.guia button.pg small{font-size:10px;opacity:.85}
.guia .gh span:nth-child(n+2){padding-left:12px}
@media(max-width:700px){.guia .gh{grid-template-columns:60px 1fr}.guia .gh span:nth-child(3){display:none}.guia .gr{grid-template-columns:60px 1fr}}

/* ===== EXTRAS ===== */
.blow{position:fixed;inset:0;z-index:100000;background:rgba(10,4,24,.92);display:grid;place-items:center;text-align:center;font:14px var(--px);color:#b8ff1a;cursor:pointer}
.blow-cart{font-size:80px;animation:blw .35s steps(2) infinite}.blow b{display:block;margin:14px 0 8px}.blow span{font-size:10px;opacity:.7}
@keyframes blw{50%{transform:translateX(10px) scale(1.1)}}
.attract{position:fixed;inset:0;z-index:100000;background:#000;display:none;color:#fff;font-family:var(--px);overflow:hidden}
.attract.open{display:block}
.att-logo{position:absolute;left:0;top:0;font:36px/1.1 var(--px,monospace);color:#b8ff1a;text-shadow:4px 4px 0 #7a2cff}
.att-coin{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-size:20px;animation:osdb 1s steps(2) infinite}
.att-sub{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-size:10px;opacity:.7}
.initials{margin:30px auto 10px;text-align:center}.initials p{font:12px var(--px);margin-bottom:10px;color:#ffe600}
.initials div{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.initials input{width:54px;height:64px;text-align:center;font:30px var(--px);background:#0a0418;color:#b8ff1a;border:4px solid #b8ff1a;text-transform:uppercase}
.pause{position:fixed;inset:0;z-index:100000;background:rgba(10,4,24,.88);display:none;place-items:center}
.pause.open{display:grid}
.ps-box{background:#0a0418;border:4px solid #b8ff1a;box-shadow:8px 8px 0 #7a2cff;padding:22px;width:min(92vw,380px);display:grid;gap:10px;font:11px var(--px);color:#fff}
.ps-box h2{margin:0 0 6px;color:#b8ff1a;font-size:16px}
.ps-box button{background:transparent;color:#fff;border:2px solid #7a2cff;padding:12px;text-align:left;font:11px var(--px);cursor:pointer}
.ps-box button:hover:not(:disabled),.ps-box button:focus-visible{background:#b8ff1a;color:#0a0418}.ps-box button:disabled{opacity:.5}
.ps-box details{line-height:1.7}.ps-box summary{cursor:pointer}
body.no-crt .scan,body.no-crt .tv-screen .scan{display:none!important}
#elev .pcbtn{display:block;margin-top:8px;width:100%;background:#c0c0c0;color:#000;border:3px outset #fff;font:10px var(--px);padding:8px;cursor:pointer}
.pcmode{position:fixed;inset:0;z-index:100000;background:#008080;display:none;font:13px/1.4 Tahoma,Verdana,sans-serif;color:#000}
.pcmode.open{display:block}
.w95-icons{display:flex;flex-wrap:wrap;gap:6px;padding:16px;align-content:flex-start;max-height:calc(100% - 40px)}
.w95-icons .ic{all:unset;box-sizing:border-box;width:92px;text-align:center;color:#fff;cursor:pointer;padding:6px;display:block}
.w95-icons .ic i{display:block;font-size:34px;font-style:normal}.w95-icons .ic span{display:block;font-size:12px;text-shadow:1px 1px #000}
.w95-icons .ic:focus-visible,.w95-icons .ic:hover{background:rgba(0,0,128,.6);outline:1px dotted #fff}
.w95-win{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);width:min(92vw,460px);background:#c0c0c0;border:3px outset #fff}
.w95-bar{background:#000080;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:3px 6px;font-weight:700}
.w95-bar button{background:#c0c0c0;border:2px outset #fff;cursor:pointer;font-weight:700}
.w95-body{padding:14px}.w95-go{background:#c0c0c0;border:3px outset #fff;padding:6px 12px;cursor:pointer;font:inherit}
.w95-task{position:absolute;left:0;right:0;bottom:0;height:36px;background:#c0c0c0;border-top:3px outset #fff;display:flex;gap:10px;align-items:center;padding:0 6px}
.w95-task button{background:#c0c0c0;border:3px outset #fff;font:inherit;font-weight:700;cursor:pointer;padding:3px 10px}.w95-task span{margin-left:auto;margin-right:10px}
.rat{position:fixed;right:14px;bottom:14px;z-index:900;font-size:32px;background:#0a0418;border:3px solid #ffd93d;border-radius:50%;width:54px;height:54px;cursor:pointer;box-shadow:4px 4px 0 #7a2cff}
.rat-bub{position:fixed;right:14px;bottom:80px;z-index:900;width:min(86vw,300px);background:#fff6e5;color:#0a0418;border:4px solid #0a0418;border-radius:14px;padding:14px;box-shadow:6px 6px 0 #7a2cff;font:11px/1.6 var(--px);display:grid;gap:6px}
.rat-bub[hidden]{display:none}.rat-bub h3{margin:0;font-size:12px;color:#7a2cff}
.rat-bub button{text-align:left;background:#0a0418;color:#ffd93d;border:0;padding:8px;font:10px var(--px);cursor:pointer}
.rat-bub p{margin:4px 0 0;min-height:4em}
body.booting .rat{display:none}
@media(max-width:700px){.rat{bottom:64px}#elev .pcbtn{font-size:10px}}

/* ===== idiomas ===== */
#lang{display:inline-flex;gap:2px;margin-right:8px;vertical-align:middle}
#lang button{background:transparent;color:#f3e9ff;border:2px solid #7a2cff;font:10px var(--px);padding:6px 7px;cursor:pointer}
#lang button[aria-pressed="true"]{background:#b8ff1a;color:#0a0418;border-color:#b8ff1a}

#elev{top:96px;transform:none}
@media(max-width:700px){#elev{top:auto;bottom:14px}}

.hero-run{width:96px}.hero-run canvas{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4))}
@media(max-width:700px){.hero-run{width:70px}}

.tcard{overflow:hidden;box-sizing:border-box}
.tcard ul{min-width:0}
.tcard li{min-width:0;background:var(--lb,rgba(0,0,0,.28))}
.tcard li b{text-align:right;overflow-wrap:anywhere;min-width:0}
.tcard li.key{background:#b8ff1a;color:#0a0418}

.tcard li{flex-wrap:wrap}
.tcard li span{flex:0 0 auto}
.tcard li b{flex:1 1 auto}

/* ===== MODO AVENTURA ===== */
#modes{padding:80px 0 30px}#modes .sec-head{margin-left:4%}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:30px 4%}
.mode{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:12px;padding:22px;border:4px solid #0a0418;box-shadow:8px 8px 0 #7a2cff;background:#fff6e5;color:#0a0418;font:12px/1.6 var(--px)}
.mode b{font-size:16px;line-height:1.4}.mode span{font:14px/1.5 var(--mono,monospace)}.mode i{font-style:normal;font-size:10px;color:#7a2cff}
#mode-play{background:#b8ff1a}
.mode:hover,.mode:focus-visible{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #ff3fa4}
html.g-lock,html.g-lock body{overflow:hidden!important}
#game{position:fixed;inset:0;z-index:100002;background:#12062a;display:none;touch-action:none}
#game.open{display:block}
#g-cv{width:100%;height:100%;display:block;image-rendering:pixelated}
.g-exit{position:absolute;right:14px;top:14px;background:#0a0418;color:#b8ff1a;border:3px solid #b8ff1a;font:10px var(--px);padding:10px;cursor:pointer;z-index:3}
.g-panel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,4,24,.6);z-index:2;padding:16px}
.g-panel[hidden]{display:none}
.g-card{background:#fff6e5;color:#0a0418;border:4px solid #0a0418;box-shadow:8px 8px 0 #7a2cff;padding:22px;width:min(94vw,520px);display:grid;gap:12px;max-height:92vh;overflow:auto;font:14px/1.5 var(--mono,monospace)}
.g-card h3{font:18px/1.3 var(--px);margin:0}.g-card p{margin:0}
.g-tag{font:10px var(--px);background:#0a0418;color:#b8ff1a;padding:6px 8px;justify-self:start}
.g-gain{background:#b8ff1a;padding:10px;border:3px solid #0a0418}.g-gain b{display:block;font:10px var(--px);margin-bottom:6px}
.g-item{font:11px/1.6 var(--px);color:#7a2cff}
.g-btns{display:flex;gap:10px;flex-wrap:wrap}
.g-touch{position:absolute;left:0;right:0;bottom:14px;display:none;justify-content:space-between;padding:0 16px;z-index:1;pointer-events:none}
.g-touch button{pointer-events:auto;width:72px;height:72px;border-radius:50%;background:rgba(10,4,24,.7);color:#b8ff1a;border:3px solid #b8ff1a;font-size:26px}
.g-touch .g-jump{width:86px;height:86px;background:rgba(184,255,26,.85);color:#0a0418;margin-left:auto}
.g-touch button[data-k=r]{margin-left:12px}
@media (hover:none){.g-touch{display:flex}}

.hero-run{width:120px}@media(max-width:700px){.hero-run{width:84px}}

.g-dash{display:none}.has-dash .g-dash{display:block}.g-touch .g-dash{width:64px;height:64px;margin-left:auto;margin-right:10px}

.g-itemrow{display:flex;gap:12px;align-items:center}.g-ico{flex:0 0 64px;width:64px;height:64px;background:url(assets/sprites/icons.webp) 0 0/384px 64px no-repeat;image-rendering:pixelated}

.g-atk{display:none}.has-atk .g-atk{display:block}.g-touch .g-atk{width:64px;height:64px;margin-left:auto;margin-right:10px;background:rgba(255,63,164,.85);color:#fff}

.g-crew{display:none}.has-crew .g-crew{display:block}.g-touch .g-crew{width:64px;height:64px;margin-left:auto;margin-right:10px;background:rgba(55,230,255,.85);color:#0a0418;font-size:22px}

.g-mute{position:absolute;right:14px;top:62px;z-index:3;background:#0a0418;color:#fff;border:3px solid #b8ff1a;font-size:16px;padding:6px 9px;cursor:pointer}

/* jogo: cursor sempre visível; som e sair juntos no topo */
html.g-lock #cursor{display:none!important}
html.g-lock #game, html.g-lock #game *{cursor:default!important}
html.g-lock #game #g-cv{cursor:crosshair!important}
html.g-lock #game button, html.g-lock #game .g-card, html.g-lock #game .g-panel button{cursor:pointer!important}
#game .g-top{position:absolute;right:14px;top:14px;display:flex;gap:10px;z-index:4;align-items:stretch}
#game .g-exit,#game .g-mute{position:static;margin:0}
#game .g-mute{font-size:18px;padding:8px 12px}

/* ===== filtro de TV de tubo (anos 90), leve: tudo em camadas CSS ===== */
#game .g-crt{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 52%,rgba(8,2,20,.5) 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);animation:crtflick .13s steps(2) infinite}
#game .g-crt::before{content:"";position:absolute;inset:-60px;background:var(--noise);background-size:96px 96px;opacity:.07;mix-blend-mode:overlay;animation:crtgrain .5s steps(5) infinite}
#game .g-crt::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(transparent,rgba(255,255,255,.045),transparent);animation:crtband 7s linear infinite}
@keyframes crtflick{50%{opacity:.965}}
@keyframes crtgrain{0%{transform:translate(0,0)}20%{transform:translate(-17px,9px)}40%{transform:translate(12px,-14px)}60%{transform:translate(-8px,-19px)}80%{transform:translate(15px,16px)}100%{transform:translate(0,0)}}
@keyframes crtband{to{top:105%}}
body.no-crt #game .g-crt{display:none}
@media (prefers-reduced-motion:reduce){#game .g-crt,#game .g-crt::before,#game .g-crt::after{animation:none}}
#game .g-panel{z-index:2}


/* ===== modo rolagem: o palco é desenhado pelo motor do jogo ===== */
#level{height:480vh}
#stage > :not(.sc-wrap){display:none!important}
.sc-wrap{position:absolute;inset:0;z-index:3;overflow:hidden;background:#6a4cc8}
#sc-cv{width:100%;height:100%;display:block}
.sc-card{position:absolute;left:50%;top:15%;transform:translateX(-50%);width:min(92vw,520px);opacity:0;pointer-events:none;z-index:4}
.sc-card .g-card{max-height:76vh}
.sc-hint{position:absolute;left:0;right:0;bottom:7%;text-align:center;font:12px var(--px);color:#fff6e5;text-shadow:2px 2px 0 #12062a;animation:osdb 1s steps(2) infinite;z-index:4;transition:opacity .3s}
.sc-wrap .g-crt{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 52%,rgba(8,2,20,.5) 100%);box-shadow:inset 0 0 60px rgba(0,0,0,.45);animation:crtflick .13s steps(2) infinite}
.sc-wrap .g-crt::before{content:"";position:absolute;inset:-60px;background:var(--noise);background-size:96px 96px;opacity:.07;mix-blend-mode:overlay;animation:crtgrain .5s steps(5) infinite}
.sc-wrap .g-crt::after{content:"";position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(transparent,rgba(255,255,255,.045),transparent);animation:crtband 7s linear infinite}
body.no-crt .sc-wrap .g-crt{display:none}
@media (prefers-reduced-motion:reduce){.sc-wrap .g-crt,.sc-wrap .g-crt::before,.sc-wrap .g-crt::after{animation:none}}

.tcard .tview{margin-top:auto;text-align:center;background:#0a0418;color:#b8ff1a;padding:6px;font:9px var(--px)}
.trunfo-hand.duel .tview{display:none}
.trunfo-duel .btn.on{background:#b8ff1a;color:#0a0418}
.trunfo-duel{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}.trunfo-duel p{flex-basis:100%}

.g-card .btn.alt,#sc-card .btn.alt{background:#7b2cff;color:#fff6e5}

/* ===== cartazes de cinema ===== */
#cartazes{padding:80px 0}#cartazes .sec-head,#cartazes .lede{margin-left:4%}#cartazes .lede{max-width:560px}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:24px;margin:30px 4%}
.poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;color:#fff6e5;text-decoration:none;border:4px solid #fff6e5;box-shadow:8px 8px 0 var(--c);background:#12062a var(--img) center/cover;transition:transform .25s,box-shadow .25s}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(10,4,24,.92) 78%)}
.poster:hover,.poster:focus-visible{transform:translateY(-8px) rotate(-1deg);box-shadow:12px 12px 0 var(--c)}
.p-top{position:absolute;left:10px;top:10px;background:var(--c);color:#12062a;font:9px var(--px);padding:5px 7px;z-index:1}
.p-body{position:absolute;left:0;right:0;bottom:0;padding:14px;display:grid;gap:6px;z-index:1}
.p-body small{font:9px var(--px);color:var(--c)}
.p-body h3{margin:0;font:clamp(16px,1.8vw,20px)/1.1 'Bowlby One',sans-serif;text-shadow:3px 3px 0 #12062a}
.p-body em{font:12px/1.4 var(--mono,monospace);font-style:normal;opacity:.92}
.p-stat{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:11px/1.4 var(--mono,monospace)}
.p-stat b{font:clamp(22px,3vw,30px)/1 'Bowlby One',sans-serif;color:var(--c);text-shadow:3px 3px 0 #12062a}
.p-cta{font:9px var(--px);background:#fff6e5;color:#12062a;padding:7px 8px;justify-self:start}

/* ===== mídia dos projetos: bloco centralizado, colunas pela quantidade ===== */
.pmedia{padding:70px 4vw 50px;gap:70px;justify-items:center}
.pmedia .mblock{width:100%;max-width:1240px}
.pmedia .m-cap{display:flex;align-items:center;gap:16px;justify-content:center;text-align:center;margin:0 0 26px;color:var(--lime)}
.pmedia .m-cap::before,.pmedia .m-cap::after{content:"";flex:1;max-width:160px;height:3px;background:repeating-linear-gradient(90deg,var(--lime) 0 8px,transparent 8px 14px);opacity:.55}
.pmedia .pgal,.pmedia .pvid,.pmedia .reels{--gap:16px;--k:var(--cols);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--gap)}
.pmedia .pgal .pg,.pmedia .pvid .pv,.pmedia .reels .reel{flex:0 0 calc((100% - (var(--k) - 1) * var(--gap)) / var(--k));max-width:calc((100% - (var(--k) - 1) * var(--gap)) / var(--k))}
.pmedia .pgal .pg{border:3px solid rgba(255,246,229,.9);box-shadow:6px 6px 0 var(--c);background:#1b0a3d}
.pmedia .pgal .pg img{width:100%;height:auto}
.pmedia .pgal.wide{--k:1}.pmedia .pgal.wide .pg{flex-basis:100%;max-width:min(100%,980px)}
.pmedia .pvid .pv{border:4px solid var(--paper);box-shadow:6px 6px 0 var(--c)}
.pmedia .pvid[data-n="1"] .pv{max-width:min(100%,860px)}
.pmedia .reels .reel{box-shadow:6px 6px 0 var(--c);border:3px solid rgba(255,246,229,.9)}
.pmedia .reels[data-n="1"] .reel{max-width:min(100%,320px)}
.pmedia .reels[data-n="2"] .reel{max-width:min(calc(50% - 8px),300px)}
@media(max-width:1000px){.pmedia .pgal,.pmedia .pvid,.pmedia .reels{--k:min(var(--cols),3)}.pmedia .pgal.wide{--k:1}.pmedia .pvid{--k:min(var(--cols),2)}}
@media(max-width:640px){.pmedia{padding:50px 16px 40px}.pmedia .pgal,.pmedia .reels{--k:min(var(--cols),2)}.pmedia .pgal.wide{--k:1}.pmedia .pvid{--k:1}.pmedia .reels[data-n="1"] .reel,.pmedia .reels[data-n="2"] .reel{max-width:calc((100% - var(--gap)) / 2)}.pmedia .reels[data-n="1"] .reel{max-width:70%}.pmedia .m-cap::before,.pmedia .m-cap::after{max-width:36px}}

.pmedia .pgal:not(.wide) .pg{aspect-ratio:var(--ar,1.78);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pmedia .pgal:not(.wide) .pg img{width:100%;height:100%;object-fit:contain}