/* Glitch de entrada (liga CRT): cursor -> linha -> tela abre do centro em fatias RGB nítidas.
   Também mascara o ajuste inicial do palco ao viewport. */
#bootGlitch{position:fixed;inset:0;z-index:10000;overflow:hidden;pointer-events:none;background:#020203;contain:strict;
  clip-path:inset(0 0 0 0)}
#bootGlitch:before,#bootGlitch:after{content:"";position:absolute;pointer-events:none}
/* antes de rodar: cursor de boot piscando no centro */
#bootGlitch:before{left:50%;top:50%;width:14px;height:22px;margin:-11px 0 0 -7px;background:#ff1a3c;
  box-shadow:-3px 0 0 #00e5ff,3px 0 0 #ff1a3c;animation:bootCursor .5s steps(1,end) infinite}
/* fatias RGB com bordas duras (sem degradê) */
#bootGlitch:after{inset:0;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(0deg,transparent 0 17%,#ff1a3c 17% 18.4%,transparent 18.4% 46%,#fff 46% 46.6%,transparent 46.6% 63%,#00e5ff 63% 64.8%,transparent 64.8% 81%,#ff1a3c 81% 81.6%,transparent 81.6%)}
#bootGlitch.run{animation:bootCrt .86s steps(1,end) forwards}
#bootGlitch.run:before{animation:bootLine .86s cubic-bezier(.7,0,.2,1) forwards}
#bootGlitch.run:after{animation:bootSlices .86s steps(1,end) forwards}
@keyframes bootCursor{50%{opacity:0}}
/* a linha nasce no centro e se espalha na horizontal; depois vira o "flash" do tubo */
@keyframes bootLine{
  0%{left:50%;width:14px;height:22px;margin:-11px 0 0 -7px;opacity:1;background:#ff1a3c}
  22%{left:0;width:100%;height:2px;margin:-1px 0 0 0;opacity:1;background:#fff;box-shadow:0 -2px 0 #00e5ff,0 2px 0 #ff1a3c}
  40%{left:0;width:100%;height:2px;margin:-1px 0 0 0;opacity:1;background:#fff;box-shadow:0 -3px 0 #00e5ff,0 3px 0 #ff1a3c}
  62%{left:0;width:100%;height:2px;margin:-1px 0 0 0;opacity:0}
  100%{left:0;width:100%;height:2px;opacity:0}
}
/* o véu recua para o centro em degraus (tubo abrindo), com tranco lateral */
@keyframes bootCrt{
  0%,30%{clip-path:inset(0 0 0 0);transform:none}
  36%{clip-path:inset(0 0 0 0);transform:translateX(-6px)}
  42%{clip-path:inset(12% 0 12% 0);transform:translateX(5px)}
  50%{clip-path:inset(24% 0 24% 0);transform:translateX(-3px)}
  58%{clip-path:inset(36% 0 36% 0);transform:translateX(2px)}
  66%{clip-path:inset(44% 0 44% 0);transform:none}
  74%{clip-path:inset(49% 0 49% 0)}
  86%{clip-path:inset(49.8% 0 49.8% 0)}
  100%{clip-path:inset(50% 0 50% 0);visibility:hidden}
}
@keyframes bootSlices{
  0%,34%{opacity:0;transform:none}
  38%{opacity:.9;transform:translate(-4%,-6%)}
  46%{opacity:.75;transform:translate(3%,8%)}
  54%{opacity:.85;transform:translate(-2%,-14%)}
  62%{opacity:.6;transform:translate(1.5%,4%)}
  72%{opacity:.35;transform:translate(-1%,0)}
  80%,100%{opacity:0;transform:none}
}
@media(prefers-reduced-motion:reduce){#bootGlitch:before{animation:none}#bootGlitch.run,#bootGlitch.run:before,#bootGlitch.run:after{animation-duration:.2s}}

/* ============================================================
   MURAILO · estética do vídeo de referência
   Palco 1600x900 que COBRE a tela inteira (sem tarjas).
   --sx / --sy = quanto do palco ficou fora da tela em cada lado
   (o app.js calcula); a interface encostada nas bordas usa esses valores.
   ============================================================ */
@font-face{font-family:"Ital";src:url("../assets/fonts/poppins-600-italic.woff2") format("woff2");font-weight:600;font-style:italic}
@font-face{font-family:"Ital";src:url("../assets/fonts/poppins-700-italic.woff2") format("woff2");font-weight:700;font-style:italic}
@font-face{font-family:"Game";src:url("../assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2")}   /* provisória: Game Font do cliente */
@font-face{font-family:"Mono";src:url("../assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500}
/* modo 8-bit (digite "8bit"): Game Font nos títulos e 8bit Font nos textos.
   Equivalentes livres até o cliente enviar os arquivos: Silkscreen e Pixelify Sans */
@font-face{font-family:"GameF";src:url("../assets/fonts/silkscreen-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"GameF";src:url("../assets/fonts/silkscreen-700-latin-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"GameF";src:url("../assets/fonts/silkscreen-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"GameF";src:url("../assets/fonts/silkscreen-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Px8";src:url("../assets/fonts/pixelify-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Px8";src:url("../assets/fonts/pixelify-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Px8";src:url("../assets/fonts/pixelify-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:"Px8";src:url("../assets/fonts/pixelify-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Txt8";src:url("../assets/fonts/vt323-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--theme-background:#000000;--theme-surface:#141419;--theme-grid:#e3101c;--theme-grid-glow:#e3101c;--theme-accent:#ff1020;--theme-accent-secondary:#ff2a3c;--theme-floor-top:#5a0006;--theme-floor-bottom:#cd060a;--txt-background:#050304;--txt-grid:#960028;--txt-text:#ff2a3c;--txt-muted:#ff6b7a;--txt-link:#ff4d5e;--txt-titlebar-start:#c40b3a;--txt-titlebar-end:#8a001f;--txt-border:#c8083a;--red:var(--theme-accent);--red2:var(--theme-accent-secondary);--wine:var(--theme-floor-top);--grid:var(--theme-grid);--sx:0px;--sy:0px;--vh:900px;
  --ab:-2px 0 0 color-mix(in srgb,var(--theme-accent-secondary) 78%,transparent),2px 0 0 color-mix(in srgb,var(--theme-accent) 78%,transparent)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--theme-background);color:#fff;font-family:"Ital",sans-serif}
button{font:inherit;color:inherit;background:none;border:0}
img{-webkit-user-drag:none;user-select:none}
body{user-select:none;-webkit-tap-highlight-color:transparent}
@media (pointer:fine){*{cursor:none!important}}
.game{font-family:"Game",monospace;font-style:normal;font-weight:400}
.ital{font-family:"Ital",sans-serif;font-style:italic;font-weight:600;text-shadow:var(--ab)}

#viewport{position:fixed;inset:0;overflow:hidden;background:#000}
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;margin:-450px 0 0 -800px;transform-origin:center}
#scenes{position:absolute;inset:0;transform-origin:50% 50%}
.scene{position:absolute;inset:0;display:none}
.scene.on{display:block}
.scene.incoming{z-index:3}
.plate{position:absolute;left:0;top:0;width:1360px;height:604px;transform-origin:0 0;will-change:transform}
#menuPlate{width:1800px;height:880px}
.plate>img,.plate>picture>img{position:absolute;inset:0;width:100%;height:100%;display:block}

/* grão de filme + scanlines + vinheta (por cima de tudo, sem bloquear cliques) */
#grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.09;mix-blend-mode:overlay}
#scan{position:absolute;inset:0;pointer-events:none;z-index:61;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
#cursor{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;display:none;will-change:transform}

/* transição Glitch VHS */
#vhs{position:absolute;inset:calc(var(--sy) * -1) calc(var(--sx) * -1);z-index:50;pointer-events:none;opacity:0}
#vhs.on{opacity:1}
#vhs i{position:absolute;left:0;right:0;mix-blend-mode:screen}
#vhs{inset:calc(var(--sy) * -1 - var(--by,0px) - 4px) calc(var(--sx) * -1 - 4px)}
#vhs canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;mix-blend-mode:screen}
/* rastro e estouro do cursor */
.ctrail{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;mix-blend-mode:screen;will-change:transform}
.cring{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid #fff;pointer-events:none;z-index:9997;box-shadow:0 0 8px rgba(255,42,69,.9),inset 0 0 6px rgba(95,246,255,.7);animation:cring .4s steps(6) forwards}
@keyframes cring{to{transform:scale(4.2);opacity:0;border-width:1px}}
.cpix{position:fixed;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;pointer-events:none;z-index:9997;animation:cpix .42s steps(7) forwards}
@keyframes cpix{to{transform:translate(var(--tx),var(--ty));opacity:0}}

/* botões de texto (SAIR) */
.sair{position:absolute;z-index:12;font-size:40px;font-weight:700;color:#fff;padding:6px 14px;letter-spacing:.5px;transition:color .12s,transform .12s}
.sair:hover{color:#ff9aa4;transform:scale(1.06)}
.sair.tr{right:calc(var(--sx) + 46px);top:calc(var(--ey) + 34px)}
.sair.bl{left:calc(var(--sx) + 56px);bottom:calc(var(--ey) + 40px);font-size:44px}

/* triângulos brancos com aberração (setas) */
.tri{position:relative;width:64px;height:60px;display:grid;place-items:center;transition:background .12s}
.tri i{width:0;height:0;border-style:solid;filter:drop-shadow(-2px 0 0 color-mix(in srgb,var(--theme-accent-secondary) 82%,transparent)) drop-shadow(2px 0 0 color-mix(in srgb,var(--theme-accent) 82%,transparent))}
.tri.up i{border-width:0 22px 36px 22px;border-color:transparent transparent #fff transparent}
.tri.down i{border-width:36px 22px 0 22px;border-color:#fff transparent transparent transparent}
.tri.left i{border-width:22px 36px 22px 0;border-color:transparent #fff transparent transparent}
.tri.right i{border-width:22px 0 22px 36px;border-color:transparent transparent transparent #fff}
.tri:hover,.tri.press{background:rgba(150,8,22,.78);box-shadow:0 0 18px rgba(255,16,32,.45)}

#sfxToggle{position:absolute;left:calc(var(--sx) + 30px);top:calc(var(--ey) + 26px);z-index:30;font-size:17px;color:#fff;opacity:.8;padding:6px 10px;transition:opacity .2s}
#sfxToggle:hover{opacity:1}
#sfxToggle.off{opacity:.4}

/* ============ Carregamento + abertura ============ */
#s-loading{background:#000}
#ldPlate.zoom{transition:transform 1.05s cubic-bezier(.75,0,.25,1);animation:zblur 1.05s both}   /* só anima no zoom do clique */
@keyframes zblur{0%{filter:none}45%{filter:blur(3px) brightness(1.15)}80%{filter:blur(1.5px)}100%{filter:none}}
.lenter{position:absolute;left:calc(var(--sx) + 52px);right:auto;top:auto;bottom:calc(var(--ey) + 48px);width:360px;text-align:left;font-size:25px;line-height:1.25;letter-spacing:1px;opacity:0;transition:opacity .4s;text-shadow:-2px 0 rgba(0,229,255,.75),2px 0 rgba(255,26,60,.9),3px 3px 0 #160006}
.lenter{opacity:.75}
.lenter.ready{opacity:1;animation:blink 1.1s steps(2) infinite,lenterJolt 2.6s steps(1,end) infinite}
@keyframes lenterJolt{0%,90%,100%{transform:none;clip-path:none}92%{transform:translateX(-5px);clip-path:inset(0 0 45% 0)}95%{transform:translateX(4px);clip-path:inset(40% 0 0 0)}}
.lenter.go{opacity:0!important;animation:none}
@keyframes blink{50%{opacity:.35}}

/* ============ Menu (tela do aparelho) ============ */
#s-menu{background:#1d1f24}
#menuPlate{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{scale:1.006}}
.hit{position:absolute;inset:0;background:none;opacity:0}
.hit{outline:0}
#wheel{position:absolute;inset:0;pointer-events:none}
.wb{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;pointer-events:auto;transition:background .1s,box-shadow .1s}
.wb.c{width:76px;height:76px;margin:-38px 0 0 -38px}
/* só as setas acendem: luz branca no desenho da seta, sem bola preenchida */
#wglyph{position:absolute;left:0;top:0;width:1800px;height:880px;pointer-events:none;overflow:visible}
#wglyph g{fill:#fff;opacity:0;transition:opacity .35s ease-out;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(255,255,255,.85)) drop-shadow(0 0 16px rgba(255,255,255,.45))}
#wglyph g.ring{fill:none;stroke:#fff;stroke-width:2.5}
#wglyph g.hov{opacity:.35;transition:opacity .12s}
#wglyph g.lit{opacity:1;transition:none}
/* visor LCD: máscara gerada dos próprios pixels pretos da tela na foto
   (assets/cenas/visor_mask.png?v=2) — encaixe exato, inclinação e cantos reais */
#visor{position:absolute;left:0;top:0;width:1800px;height:880px;z-index:8;pointer-events:none;display:none;overflow:hidden;-webkit-mask:url(../assets/cenas/visor_mask.png?v=2) 0 0/1800px 880px no-repeat;mask:url(../assets/cenas/visor_mask.png?v=2) 0 0/1800px 880px no-repeat}
#visor.on,#visor.hold{display:block}
#visor img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* erro do visor: o canvas (js/app.js, visorErr) desenha o sinal perdido dentro do LCD, recortado pela máscara */
#visor canvas{position:absolute;left:24px;top:0;width:548px;height:336px;z-index:1;will-change:filter}
/* scanlines finas por cima, como a grade de pixels do LCD */
#visor:after{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}


/* ============ Portfólio ============ */
#s-portfolio,#s-player{background:#000}
.pfbg{position:absolute;inset:calc(var(--sy) * -1 - var(--by,0px) - 2px) calc(var(--sx) * -1 - 2px);overflow:hidden;background:var(--theme-background)}
.pfbg .grid{position:absolute;left:calc(var(--sx) + 2px);top:calc(var(--sy) + var(--by,0px) + 2px);width:1600px;height:900px;overflow:visible;
  color:var(--grid);filter:drop-shadow(0 0 7px var(--theme-grid-glow)) drop-shadow(0 0 2px var(--theme-grid-glow))}
.pfbg .floor{position:absolute;left:0;right:0;bottom:0;height:calc(var(--sy) + 520px);
  background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--theme-floor-top) 32%,transparent) 38%,color-mix(in srgb,var(--theme-floor-bottom) 72%,transparent) 82%,color-mix(in srgb,var(--theme-floor-bottom) 85%,transparent) 100%);mix-blend-mode:screen;pointer-events:none}
.pfbg.dim{filter:brightness(.42) saturate(.9)}
#pfWin{position:absolute;left:calc(var(--sx) + 104px);top:0;width:900px;height:900px;overflow:hidden;z-index:4;
  -webkit-mask:linear-gradient(to bottom,transparent calc(var(--sy) + 0px),#000 calc(var(--sy) + 50px),#000 calc(900px - var(--sy) - 40px),transparent calc(900px - var(--sy)));
          mask:linear-gradient(to bottom,transparent calc(var(--sy) + 0px),#000 calc(var(--sy) + 50px),#000 calc(900px - var(--sy) - 40px),transparent calc(900px - var(--sy)))}
#pfList{position:absolute;left:0;top:0;width:100%;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.row{position:absolute;left:0;width:100%;max-width:100%;box-sizing:border-box;padding-right:24px;height:246px;display:flex;align-items:center;gap:44px;padding-left:10px;text-align:left;color:#fff}
.sd{position:relative;width:170px;height:223px;flex:none;
  filter:drop-shadow(-2px 0 0 rgba(0,240,255,.45)) drop-shadow(2px 0 0 rgba(255,0,50,.5)) drop-shadow(0 8px 10px rgba(0,0,0,.6));transition:transform .2s}
.sd:after{content:"";position:absolute;inset:0;background:url(../assets/chip_sd.webp) center/100% 100% no-repeat;pointer-events:none}
.sd img{position:absolute;left:10.4%;top:12.7%;width:80.9%;height:79.2%;object-fit:cover;display:block}
.sd .lab{position:absolute;left:10.4%;width:80.9%;bottom:8.1%;height:30px;display:grid;place-items:center;background:rgba(14,14,17,.88);border-top:2px solid #4a4a50;z-index:1;
  font:600 15px/1.3 Georgia,serif;letter-spacing:1px;color:#cfcfd4;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:0 6px}
.row .t{display:flex;flex:0 1 auto;flex-direction:column;min-width:0;position:relative}
.row .mus{font-size:68px;line-height:1.25;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:560px;padding:.04em .4em .16em 0;margin-bottom:-.1em}
.row .cant{font-size:38px;line-height:1.3;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:560px;padding:.04em .4em .16em 0}
.row .mel{position:absolute;left:100%;bottom:2px;margin-left:10px;font-size:34px;color:#ffe85a;
  text-shadow:0 0 8px rgba(255,214,60,.9),0 0 18px rgba(255,180,0,.5),-1px 0 0 rgba(0,240,255,.5),1px 0 0 rgba(255,0,50,.6)}
.row:hover .sd{transform:translateX(8px) scale(1.03)}
.row:hover .mus{color:#ffd0d5}
.row.sel .mus{color:#fff}
#pfArrows{position:absolute;left:calc(var(--sx) + 22px);top:490px;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:4}
#pfHand{position:absolute;left:calc(860px + var(--sx) * .4);top:190px;width:600px;height:734px;z-index:5;pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(255,16,32,.25))}
.hwrap{position:absolute;inset:0;animation:flt 5s ease-in-out infinite}
.hmao{position:absolute;inset:0;width:100%;height:100%}

@keyframes flt{50%{transform:translateY(-8px) rotate(.6deg)}}
/* chip deitado na palma, no tamanho de um SD de verdade perto da mão */
.hcard{position:absolute;left:42.5%;top:51.5%;width:16.5%;aspect-ratio:916/1202;transform:translate(-50%,-50%) rotate(-28deg);pointer-events:auto;transition:filter .15s;
  filter:drop-shadow(7px 9px 6px rgba(40,0,10,.55))}
.hcard:after{content:"";position:absolute;inset:0;background:url(../assets/chip_sd.webp) center/100% 100% no-repeat}
.hcard img{position:absolute;left:10.4%;top:12.7%;width:80.9%;height:79.2%;object-fit:cover;display:block;filter:saturate(1.35) contrast(1.15) brightness(1.05)}
.hcard:before{content:"";position:absolute;left:10.4%;top:12.7%;width:80.9%;height:79.2%;z-index:1;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 40%,rgba(0,0,0,.25))}
.hcard:hover{filter:drop-shadow(7px 9px 6px rgba(40,0,10,.55)) drop-shadow(0 0 12px rgba(255,30,60,.9)) brightness(1.15)}
@keyframes flt2{50%{translate:0 -8px}}
.hcard.swap{animation:swap .28s steps(3)}
@keyframes swap{0%{opacity:.2;filter:hue-rotate(90deg)}100%{opacity:1}}

/* ============ Player (deck de MP3) ============ */
#s-player{background:#000}
.flatgrid{position:absolute;inset:calc(var(--sy) * -1 - var(--by,0px) - 2px) calc(var(--sx) * -1 - 2px);background-color:var(--theme-background);
  background-image:radial-gradient(ellipse at 50% 46%,transparent 30%,rgba(0,0,0,.78) 100%),
    linear-gradient(to top,color-mix(in srgb,var(--theme-floor-bottom) 45%,transparent),transparent 45%),
    linear-gradient(90deg,color-mix(in srgb,var(--grid) 55%,#000) 3px,transparent 3px),
    linear-gradient(color-mix(in srgb,var(--grid) 55%,#000) 3px,transparent 3px);
  background-size:100% 100%,100% 100%,147px 111px,147px 111px;background-position:0 0,0 0,var(--sx) 0,0 calc(var(--sy) + var(--by,0px) + 40px)}
#deck{position:absolute;left:50%;top:50%;width:1000px;height:760px;margin:-380px 0 0 -500px;transform:scale(var(--dk,1));border-radius:46px;
  background:radial-gradient(120% 95% at 28% 0%,color-mix(in srgb,var(--theme-surface) 72%,#fff) 0,var(--theme-surface) 42%,color-mix(in srgb,var(--theme-surface) 38%,#000) 100%);
  box-shadow:0 50px 90px rgba(0,0,0,.92),0 0 56px color-mix(in srgb,var(--theme-accent-secondary) 20%,transparent),0 0 90px color-mix(in srgb,var(--theme-accent) 25%,transparent),inset 0 2px 0 rgba(255,255,255,.13),inset 0 -4px 0 rgba(0,0,0,.65),
    inset 0 0 0 2px #303038,inset 0 0 0 9px #111114,inset 0 0 0 10px #2c2c33}
#deck:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
#deck:after{content:"";position:absolute;left:40px;right:40px;top:6px;height:40%;border-radius:40px 40px 0 0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.06),transparent)}
.screw{position:absolute;width:16px;height:16px;border-radius:50%;z-index:2;background:radial-gradient(circle at 35% 30%,#9a9aa2,#3a3a40 55%,#151518);box-shadow:0 1px 1px rgba(255,255,255,.15),inset 0 0 0 1px #0c0c0e}
.screw:after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:#111;transform:rotate(38deg);box-shadow:0 1px 0 rgba(255,255,255,.12)}
#lcd{position:absolute;left:62px;top:62px;width:876px;height:478px;background:#000;border-radius:14px;overflow:hidden;z-index:1;
  box-shadow:0 0 0 3px #050506,0 0 0 6px color-mix(in srgb,var(--theme-accent-secondary) 58%,#2d2d34),0 0 0 7px #0a0a0c,0 0 34px color-mix(in srgb,var(--theme-accent) 28%,transparent),0 0 18px color-mix(in srgb,var(--theme-accent-secondary) 28%,transparent)}
#lcd:fullscreen{width:100vw;height:100vh;border-radius:0}
#ytMount,#ytMount iframe,#nosig{position:absolute;inset:0;width:100%;height:100%;border:0}
#ytMount{overflow:hidden}
/* iframe maior que a tela: título, logo e prateleira do YouTube ficam fora da área visível */
#ytMount iframe{pointer-events:none;inset:auto;left:0;top:-90px;height:calc(100% + 180px)}
#ytCover{position:absolute;inset:0;display:none;place-items:center;pointer-events:none;background:#000}
#ytCover.load{display:grid}
#ytCover.dim{display:grid;background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}
#ytCover b{font-size:18px;color:#fff;text-shadow:0 0 10px rgba(227,16,28,.9),2px 2px 0 #000;letter-spacing:1px}
#nosig{display:none;image-rendering:pixelated}
.fxv{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 4px)}
#lcd.nofx .fxv,#lcd.nofx .glass{display:none}
.glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(158deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.025) 34%,transparent 34.2%),radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 50px rgba(0,0,0,.75)}
.osd{position:absolute;left:24px;top:18px;display:flex;align-items:center;gap:10px;font:500 22px "Mono",monospace;color:#fff;letter-spacing:1px;text-shadow:0 0 8px rgba(227,16,28,.9),2px 2px 0 #000}
.osd .ic.play{border-width:8px 0 8px 13px;margin-left:0}
.osd .ic.pause{width:13px;height:16px;border-left-width:4px;border-right-width:4px}
.info{position:absolute;left:62px;top:552px;width:876px;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 36px;border-radius:10px;z-index:1;
  background:linear-gradient(#1c0507,#0e0304);box-shadow:inset 0 0 0 2px #2c090c,inset 0 0 24px rgba(227,16,28,.22),0 1px 0 rgba(255,255,255,.05)}
.song{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:680px;position:relative;top:4px}
.song b{font-size:19px;color:#ff3b3b;text-shadow:0 0 10px rgba(227,16,28,.9);white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1.35;padding:.05em .3em .2em 0}
.song span{font:500 20px "Mono",monospace;color:#ffd6d6;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1.3;padding:.05em .2em .2em 0}
.badge{flex:none;font-size:13px;color:#fff;background:var(--red);padding:8px 10px 7px;transform:rotate(-4deg);box-shadow:3px 3px 0 #000,0 0 14px rgba(227,16,28,.5)}
.prog{position:absolute;left:62px;top:642px;width:876px;display:flex;align-items:center;gap:16px;z-index:1}
.time{font:500 21px "Mono",monospace;color:#ff6b6b;text-shadow:0 0 8px rgba(227,16,28,.9);min-width:62px}
.time:last-child{text-align:right}
.segbar{flex:1;display:flex;gap:4px;height:24px;align-items:center}
.segbar i{flex:1;height:17px;background:#240608;box-shadow:inset 0 0 0 1px #3a0b0f;position:relative;transition:background .15s}
.segbar i.on{background:linear-gradient(#ff3b45,#c80a14);box-shadow:0 0 9px rgba(227,16,28,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.segbar i:before{content:"";position:absolute;inset:-9px -2px}
.segbar i:hover{background:#5a0c12}
.ctl{position:absolute;left:62px;top:688px;display:flex;gap:24px;align-items:center;z-index:1}
.cb{width:70px;height:46px;border-radius:11px;display:grid;place-items:center;position:relative;color:#ddd;
  background:linear-gradient(#2f2f36,#131317);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 2px #3a3a42,0 5px 0 #000,0 7px 12px rgba(0,0,0,.6);transition:filter .12s,transform .08s,box-shadow .12s}
.cb:hover{filter:brightness(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 2px #ff6b6b,0 5px 0 #000,0 0 18px rgba(227,16,28,.6)}
.cb:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 2px #3a3a42,0 1px 0 #000}
.cb.play{width:100px;background:linear-gradient(#ff4d55,#b5070f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 2px #ff8a8a,0 5px 0 #3a0004,0 0 26px rgba(227,16,28,.7)}
.cb.play:before{content:"";position:absolute;left:6px;right:6px;top:3px;height:42%;border-radius:8px 8px 4px 4px;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.04))}
.cb.muted{opacity:.5}.cb.muted:after{content:"";position:absolute;width:34px;height:3px;background:#ff3b3b;transform:rotate(-40deg);box-shadow:0 0 6px #ff3b3b}
.ic{display:block;position:relative}
.ic.play{width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.ic.pause{width:18px;height:22px;border-left:6px solid #fff;border-right:6px solid #fff}
.ic.prev,.ic.next{width:30px;height:20px}
.ic.prev:before,.ic.prev:after,.ic.next:before,.ic.next:after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.ic.next:before{left:0;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #ddd}
.ic.next:after{left:15px;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #ddd}
.ic.prev:before{right:0;border-width:10px 15px 10px 0;border-color:transparent #ddd transparent transparent}
.ic.prev:after{right:15px;border-width:10px 15px 10px 0;border-color:transparent #ddd transparent transparent}
.cb.fs i{position:absolute;width:11px;height:11px;border:0 solid #ddd}
.cb.fs i:nth-child(1){left:20px;top:10px;border-width:3px 0 0 3px}.cb.fs i:nth-child(2){right:20px;top:10px;border-width:3px 3px 0 0}
.cb.fs i:nth-child(3){left:20px;bottom:10px;border-width:0 0 3px 3px}.cb.fs i:nth-child(4){right:20px;bottom:10px;border-width:0 3px 3px 0}
.sairb{position:absolute;right:46px;top:684px;z-index:1;background:var(--red);padding:15px 20px 13px;font-size:16px;color:#fff;box-shadow:4px 4px 0 #000,0 0 18px rgba(227,16,28,.45);transition:filter .12s,transform .08s}
.sairb:hover{filter:brightness(1.2)}.sairb:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}

/* ============ Direção Visual ============ */
#s-direcao{background:#000}
.dvbg{position:absolute;inset:calc(var(--sy) * -1 - var(--by,0px) - 2px) calc(var(--sx) * -1 - 2px);overflow:hidden;background:#050509 url(../assets/cenas/direcao_tela_preta.jpg?v=1) center/cover no-repeat}
.dvbg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.24),transparent 38%,rgba(0,0,0,.24)),radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(0,0,0,.42));pointer-events:none}
.dvLeg{position:absolute;left:calc(var(--sx) + 30px);top:50%;width:430px;max-width:calc(100% - var(--sx) - 100px);height:auto;
  max-height:calc(100% - 190px);box-sizing:border-box;padding:8px 18px 8px 12px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:24px;z-index:5;color:#fff;
  line-height:1.22;letter-spacing:.2px;text-transform:none;overflow-x:hidden;overflow-y:auto;
  overflow-wrap:normal;word-break:normal;hyphens:none;text-shadow:0 2px 18px rgba(0,0,0,.72);
  transform:translateY(-50%);pointer-events:auto;user-select:text;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;overscroll-behavior:contain}
.dv-leg-meta{display:flex;align-items:center;gap:10px;width:100%;font:500 12px/1 "Mono",monospace;letter-spacing:2px;
  color:var(--dv-color,#ff3b55);text-transform:uppercase;text-shadow:-1px 0 rgba(0,229,255,.55),1px 0 rgba(255,26,60,.8)}
.dv-leg-meta:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--dv-color,rgba(255,26,60,.75)),transparent)}
.dv-leg-title{display:block;width:100%;font-family:"Ital",sans-serif;font-size:clamp(30px,2.15vw,38px);
  text-shadow:-1px 0 rgba(0,240,255,.35),1px 0 rgba(255,0,50,.7),0 2px 18px rgba(0,0,0,.72);
  line-height:1.12;font-style:normal;font-weight:700;text-transform:none;
  overflow-wrap:normal;word-break:normal;hyphens:none}
.dv-leg-copy{display:block;width:100%;font-family:"Ital",sans-serif;font-size:clamp(22px,1.65vw,28px);
  line-height:1.52;font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.84);white-space:pre-line;overflow-wrap:normal;word-break:normal;hyphens:none}
#dvTrack{position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none}
.dv-slide{position:absolute;left:840px;top:450px;width:600px;height:408px;padding:12px;display:block;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:linear-gradient(145deg,rgba(20,20,27,.82),rgba(3,3,7,.62));
  box-shadow:0 24px 64px rgba(0,0,0,.48),inset 0 0 32px rgba(255,255,255,.025);
  pointer-events:auto;cursor:pointer;transform-origin:center center;will-change:transform,opacity,filter;
  translate:var(--dv-drag,0px) 0;
  transition:transform .9s cubic-bezier(.16,1,.3,1),translate .55s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1),height .9s cubic-bezier(.16,1,.3,1),padding .9s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .7s ease,box-shadow .6s ease,border-color .6s ease;
  backface-visibility:hidden;touch-action:pan-y}
/* card na proporção 3:2 das artes: a imagem ocupa o miolo inteiro, sem barras e sem corte */
.dv-slide img{display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(-3px 0 0 rgba(0,240,255,.42)) drop-shadow(3px 0 0 rgba(255,0,50,.48));
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
/* só enquanto inclina com o mouse a arte encolhe um pouco, para a inclinação 3D não cortar as bordas */
.dv-slide.dv-pos-current:hover img{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.965) translateZ(0)}
.dv-slide.dv-pos-current:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 45%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.dv-slide.dv-pos-current:hover:before{opacity:1}
.dv-slide.dv-pos-current:hover{border-color:rgba(255,59,85,.55)}
.dv-slide.dv-pos-current{width:600px;height:408px;transform:translate(-50%,-50%) scale(1);
  opacity:1;filter:none;z-index:4;border-color:rgba(255,255,255,.2);
  background:linear-gradient(145deg,rgba(18,18,24,.9),rgba(2,2,5,.74));
  box-shadow:0 34px 80px rgba(0,0,0,.62),inset 0 0 36px rgba(255,255,255,.035)}
.dv-slide.dv-pos-next{width:330px;height:227px;padding:10px;
  transform:translate(calc(-50% + var(--dv-x)), -50%) perspective(1000px) rotateY(-9deg) scale(.86);
  opacity:var(--dv-opacity,.38);filter:blur(.45px) saturate(.72);z-index:3;
  border-color:rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(15,15,21,.82),rgba(0,0,0,.52));
  box-shadow:0 24px 52px rgba(0,0,0,.48),inset 0 0 25px rgba(255,255,255,.035)}
.dv-slide.dv-pos-far-right{width:290px;height:199px;padding:9px;
  transform:translate(calc(-50% + var(--dv-x)), -50%) perspective(1000px) rotateY(-12deg) scale(.66);
  opacity:var(--dv-opacity,.12);filter:blur(1.6px) saturate(.48);z-index:1;
  border-color:rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(12,12,18,.68),rgba(0,0,0,.42));
  box-shadow:0 18px 38px rgba(0,0,0,.34)}
.dv-slide.dv-pos-hidden-left{width:360px;height:248px;
  transform:translate(calc(-50% + var(--dv-x)), -50%) scale(.68);
  opacity:0;filter:blur(6px);pointer-events:none;z-index:0}
.dv-slide.dv-pos-next:after,.dv-slide.dv-pos-far-right:after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 38%,rgba(0,0,0,.28));pointer-events:none}
.dv-slide:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:5px}
/* card que dá a volta no trilho troca de lado sem atravessar a tela */
.dv-slide.dv-wrap{transition:none!important}
#dvTrack.dv-dragging .dv-slide{transition:none}
#dvTrack.dv-dragging .dv-slide img{transition:none}
/* entrada da cena: cards chegam em cascata */
#dvTrack.dv-enter .dv-slide{animation:dvIn .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 75ms)}
@keyframes dvIn{from{opacity:0;translate:140px 0;filter:blur(10px)}}
/* Navegação discreta acima da área de arte, sem cobrir os trabalhos. */
.dvNav{position:absolute;left:840px;top:calc(var(--ey) + 54px);transform:translate(-50%,-50%);
  display:flex;gap:14px;z-index:6}
.dvNav .tri{width:42px;height:40px;opacity:.66;transition:opacity .2s,transform .2s}
.dvNav .tri:hover{opacity:1;transform:scale(1.06)}
.dvNav .tri.left i,.dvNav .tri.right i{filter:drop-shadow(0 0 7px rgba(255,255,255,.22))}
.dvN{display:none}
@media(max-width:1100px){
  .dvLeg{gap:18px}
  .dv-slide{left:840px}
}
@media(max-width:700px){
  .dv-slide.dv-pos-next{opacity:calc(var(--dv-opacity,.38) * .8)}
  .dvLeg{gap:14px}
}
@media(prefers-reduced-motion:reduce){.dv-slide{transition-duration:.01ms}}
.dvLeg.dv-copy-in .dv-leg-meta{animation:dvFlicker .14s steps(2) 3}
.dvLeg.dv-copy-in .dv-leg-title{animation:dvGlitchIn .45s steps(4) both}
.dvLeg.dv-copy-in .dv-leg-copy{animation:dvGlitchIn .5s steps(5) .12s both}
@keyframes dvFlicker{50%{opacity:.35}}
@keyframes dvGlitchIn{0%{opacity:.1;clip-path:inset(45% 0 45% 0);transform:translateX(-8px)}45%{opacity:1;clip-path:inset(12% 0 30% 0);transform:translateX(5px)}100%{opacity:1;clip-path:inset(0);transform:none}}

/* direção visual: NOME / ESTILO / DESCRIÇÃO separados por linhas */
.dv-leg-line,.dv-detail-line{display:block;flex:none;width:100%;height:1px;background:linear-gradient(90deg,var(--dv-color,rgba(255,26,60,.85)),rgba(255,255,255,.18) 70%,transparent);box-shadow:0 0 8px rgba(255,26,60,.35)}
.dv-leg-style{display:block;width:100%;font-family:"Ital",sans-serif;font-size:clamp(20px,1.45vw,25px);line-height:1.2;font-weight:700;font-style:normal;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--dv-color,#ff3b55);text-shadow:-1px 0 rgba(0,229,255,.4),1px 0 rgba(255,26,60,.7);overflow-wrap:anywhere}
.dv-detail-style{display:block;width:100%;font-size:.62em;line-height:1.2;font-weight:700;font-style:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--dv-color,#ff3b55);overflow-wrap:anywhere}
.dv-leg-title,.dv-leg-copy,.dv-detail-title,.dv-detail-copy{overflow-wrap:anywhere}
.dvLeg.dv-copy-in .dv-leg-style{animation:dvGlitchIn .45s steps(4) .06s both}
@media(prefers-reduced-motion:reduce){.dvLeg.dv-copy-in *,#dvTrack.dv-enter .dv-slide{animation:none}.dv-slide img{transition:none}}

/* ============ DOOM ============ */
#s-doom{background:#000}
#s-doom .sair{z-index:20}
/* o jogo ocupa só a área visível da tela (antes ficava cortado embaixo) */
/* moldura do jogo no estilo do deck, sobre a grade vermelha do tema */
#doomBox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:4/3;padding:34px;border-radius:30px;
  width:min(calc(1600px - 2 * var(--sx) - 120px),calc((var(--vh) - 70px) * 4 / 3 + 68px));
  background:radial-gradient(120% 95% at 28% 0%,#393941 0,#1d1d22 42%,#0d0d10 100%);
  box-shadow:0 40px 80px rgba(0,0,0,.9),0 0 80px rgba(227,16,28,.35),inset 0 2px 0 rgba(255,255,255,.13),inset 0 0 0 2px #303038,inset 0 0 0 8px #111114,inset 0 0 0 9px #2c2c33}
#doomFrame{position:relative;width:100%;height:100%;background:#000;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 3px #050506,0 0 0 6px var(--red),0 0 0 7px #0a0a0c,0 0 30px rgba(227,16,28,.55)}
.dglass{position:absolute;inset:34px;border-radius:10px;pointer-events:none;background:linear-gradient(158deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.02) 30%,transparent 30.2%);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
#doomFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* no DOOM o cursor do site some e volta o cursor normal do sistema */
body.doom-on #cursor,body.doom-on .ctrail,body.doom-on .cring,body.doom-on .cpix{display:none!important}
body.doom-on *{cursor:auto!important}
body.doom-on button,body.doom-on .hot{cursor:pointer!important}
/* DOOM no celular: 2 analógicos + botões (estética do deck, vermelho); só em toque ou no retrato */
#doomPad{--s:min(124px,30vw,15vh);--k:min(60px,15vw,8vh);display:none;position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));z-index:50;
  flex-direction:column;gap:10px;padding:0 max(10px,3vw);pointer-events:none}
@media (pointer:coarse){body.doom-on #doomPad{display:flex}}
body.doom-on.pt #doomPad{display:flex}
@media (pointer:coarse){body.doom-on #doomFrame iframe{pointer-events:none}}
body.doom-on.pt #doomFrame iframe{pointer-events:none}
.dp-top{display:flex;justify-content:center;gap:10px;pointer-events:auto}
.dp-main{display:flex;justify-content:space-between;align-items:flex-end}
.dp-btns{display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:auto}
.dp-stick{position:relative;width:var(--s);height:var(--s);border-radius:50%;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 50% 40%,#1c1c22,#0b0b0e 70%);border:2px solid #7a0a16;box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 0 18px rgba(227,16,28,.35)}
.dp-stick:before{content:"";position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(255,59,74,.28)}
.dp-stick i{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a1118,#16070a 70%);
  border:2px solid #ff3b4a;box-shadow:0 4px 0 #050506,0 0 14px rgba(255,40,60,.5)}
.dp-stick.on i{background:radial-gradient(circle at 35% 30%,#ff3b4a,#8a0a16 70%);box-shadow:0 2px 0 #050506,0 0 24px rgba(255,40,60,.9)}
.dpk{min-width:var(--k);height:calc(var(--k) * .62);padding:0 14px;border-radius:14px;border:2px solid #7a0a16;
  background:radial-gradient(120% 90% at 30% 0,#2c2c33,#141418 60%,#0a0a0d);color:#ff3b4a;
  font:600 calc(var(--k) * .26)/1 "Px8",monospace;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 4px 0 #050506,0 0 14px rgba(227,16,28,.35);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.dpk.dp-fire{width:calc(var(--k) * 1.5);height:calc(var(--k) * 1.5);border-radius:50%;font-size:calc(var(--k) * .28)}
.dpk.dp-use{width:calc(var(--k) * 1.1);height:calc(var(--k) * .8);padding:0}
.dpk.on{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 1px 0 #050506,0 0 24px rgba(255,40,60,.7);background:#c40a16;color:#fff}
body.b8 .dpk{font-family:"GameF";font-weight:400}
/* celular deitado: sticks nos cantos, botões de menu em coluna no lado esquerdo */
@media (orientation:landscape) and (pointer:coarse){
  #doomPad{--s:min(110px,28vh);--k:min(52px,13vh);bottom:max(8px,env(safe-area-inset-bottom));padding:0 12px;opacity:.9}
  .dp-top{position:absolute;left:12px;bottom:calc(var(--s) + 22px);flex-direction:column;gap:6px}
  .dp-btns{position:absolute;right:calc(12px + (var(--s) - var(--k) * 1.5) / 2);bottom:calc(var(--s) + 22px)}   /* fica na lateral, acima do analógico: nada em cima do jogo */
}
#doomHint{position:absolute;left:0;right:0;top:calc(var(--ey) + 30px);text-align:center;font:34px "Txt8","Px8","Ital",monospace;color:#ff5b5b;text-shadow:2px 2px 0 #000;pointer-events:none;transition:opacity .6s}

/* ============ Bloco de notas (Notepad) ============ */
.note{display:none;position:absolute;left:var(--nl,calc(1600px - var(--sx) - 760px));top:calc(var(--ey) + 50px);width:min(720px,var(--nw,700px));height:min(520px,max(380px,calc(var(--vh) - 300px)));z-index:20;flex-direction:column;
  background:var(--txt-border);padding:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--txt-border) 40%,#fff) inset,0 18px 40px rgba(0,0,0,.65),0 0 34px rgba(255,16,50,.25),-2px 0 0 color-mix(in srgb,var(--theme-accent-secondary) 78%,transparent),2px 0 0 color-mix(in srgb,var(--theme-accent) 78%,transparent)}
.note.on{display:flex}
.note.gl{animation:noteIn .42s steps(1) both}
.note:not(.act) .ntitle{background:linear-gradient(color-mix(in srgb,var(--txt-titlebar-start) 55%,#000),color-mix(in srgb,var(--txt-titlebar-end) 65%,#000))}
.note:not(.act) .ntitle>span:first-child{color:#e8b8c4}
.note.min{display:none}
/* tela cheia: ocupa a parte visível do palco */
.note.max{left:var(--sx)!important;top:var(--ey)!important;width:calc(1600px - 2 * var(--sx))!important;height:calc(var(--vh) + 2 * var(--by,0px))!important;z-index:31!important}
.note.max .rz{display:none}
.note.sizing{user-select:none}
.note.sizing .nbody{pointer-events:none}
/* alças de redimensionar (bordas e cantos) */
.rz{position:absolute;z-index:3;font-style:normal}
.rz.n,.rz.s{left:14px;right:14px;height:8px;cursor:ns-resize}.rz.n{top:-4px}.rz.s{bottom:-4px}
.rz.e,.rz.w{top:14px;bottom:14px;width:8px;cursor:ew-resize}.rz.e{right:-4px}.rz.w{left:-4px}
.rz.ne,.rz.nw,.rz.se,.rz.sw{width:18px;height:18px}
.rz.ne{right:-5px;top:-5px;cursor:nesw-resize}.rz.sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.rz.nw{left:-5px;top:-5px;cursor:nwse-resize}.rz.se{right:-5px;bottom:-5px;cursor:nwse-resize}
/* pegador no canto, estilo Windows antigo */
.rz.se:after{content:"";position:absolute;right:8px;bottom:8px;width:14px;height:14px;
  background:linear-gradient(135deg,transparent 0 44%,#ff9ab0 44% 52%,transparent 52% 64%,#ff9ab0 64% 72%,transparent 72% 84%,#ff9ab0 84% 92%,transparent 92%)}
/* abas das janelas recolhidas */
#wtask{position:absolute;left:calc(var(--sx) + 24px);bottom:calc(var(--ey) + 22px);z-index:32;display:flex;gap:8px;flex-wrap:wrap;max-width:600px}
.wtab{height:34px;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;font:700 15px/1 Tahoma,Verdana,sans-serif;color:#fff;
  background:linear-gradient(#c40b3a,#8a001f);box-shadow:inset 0 0 0 1px #ff9ab0,0 6px 16px rgba(0,0,0,.6),-2px 0 0 rgba(0,240,255,.35),2px 0 0 rgba(255,0,50,.35);animation:tabIn .3s steps(3) both}
.wtab:before{content:"";width:12px;height:14px;background:#e8e4dc;box-shadow:inset -2px 0 #8d8a85;flex:none}
.wtab:hover{background:linear-gradient(#ff2a55,#b0002a)}
@keyframes tabIn{0%{transform:translateY(30px);opacity:0;filter:drop-shadow(5px 0 0 #00e5ff)}66%{transform:translateY(-4px);opacity:1}100%{transform:none;filter:none}}
@keyframes noteIn{
  0%{clip-path:inset(0 0 100% 0);transform:translateX(0);filter:none}
  12%{clip-path:inset(0 0 82% 0);transform:translateX(-14px);filter:drop-shadow(6px 0 0 rgba(0,229,255,.7)) drop-shadow(-6px 0 0 rgba(255,26,60,.7))}
  25%{clip-path:inset(18% 0 55% 0);transform:translateX(10px)}
  38%{clip-path:inset(0 0 40% 0);transform:translateX(-6px);filter:drop-shadow(4px 0 0 rgba(0,229,255,.6)) drop-shadow(-4px 0 0 rgba(255,26,60,.6))}
  52%{clip-path:inset(0 0 22% 0);transform:translateX(4px) skewX(-3deg)}
  66%{clip-path:inset(30% 0 0 0);transform:translateX(-3px)}
  80%{clip-path:inset(0 0 0 0);transform:translateX(2px);filter:drop-shadow(2px 0 0 rgba(0,229,255,.5)) drop-shadow(-2px 0 0 rgba(255,26,60,.5))}
  100%{clip-path:none;transform:none;filter:none}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.ntitle{height:40px;flex:none;background:linear-gradient(var(--txt-titlebar-start),var(--txt-titlebar-end));display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 10px;touch-action:none}
.ntitle>span:first-child{font:700 17px/1.3 Tahoma,Verdana,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:clip}
.nbtns{display:flex;gap:6px}
.nbtns button{width:30px;height:27px;display:grid;place-items:center;font:700 15px/1 Tahoma,Verdana,sans-serif;font-style:normal;color:#111;
  background:#e4e1dc;box-shadow:inset -2px -2px 0 #8d8a85,inset 2px 2px 0 #fff}
.nbtns button:hover{background:#fff}
.nbtns .ncls{background:#d10b3c;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.nbtns .ncls:hover{background:#ff2a55}
.nmenu{height:32px;flex:none;background:#e8e4dc;display:flex;gap:22px;align-items:center;padding:0 12px;font:15px Tahoma,Verdana,sans-serif;color:#1a1a1a;border-bottom:2px solid #fff}
.nbody{flex:1;padding:16px 20px;font:28px/1.12 "Txt8","Px8","Ital",monospace;color:var(--txt-text);overflow:auto;text-shadow:0 0 6px color-mix(in srgb,var(--txt-text) 45%,transparent);
  background-color:var(--txt-background);background-image:linear-gradient(color-mix(in srgb,var(--txt-grid) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--txt-grid) 45%,transparent) 1px,transparent 1px);background-size:28px 28px}
.nbody p{margin-bottom:6px;min-height:1em}
.nbody p.dim{color:var(--txt-muted)}
.nbody a{color:var(--txt-link);text-decoration:none;border-bottom:1px dashed var(--txt-link)}
.nbody a:hover{color:#fff;border-color:#fff}
/* linhas das redes: o link é a linha toda, com o ícone em pixel art na frente */
.nbody p.lk a{border:0;color:var(--txt-text);display:inline-flex;align-items:center;white-space:pre}
.nbody p.lk a b{font-weight:400;color:var(--txt-link);border-bottom:1px dashed var(--txt-link)}
.nbody p.lk a:hover,.nbody p.lk a:hover b{color:#fff;border-color:#fff}
.pxi{display:inline-block;width:.86em;height:.86em;margin-right:.45em;flex:none;filter:drop-shadow(0 0 4px rgba(255,30,50,.55))}
.pxi svg{display:block;width:100%;height:100%}
.nbody p.lk a:hover .pxi{animation:pxg .3s steps(2) infinite;filter:drop-shadow(-2px 0 0 var(--theme-accent-secondary)) drop-shadow(2px 0 0 var(--theme-accent))}
@keyframes pxg{0%{transform:translate(-1px,0)}50%{transform:translate(1px,-1px)}100%{transform:none}}
.nbody .caret:after{content:"_";color:var(--txt-text);animation:blink .8s steps(2) infinite}
.nbody::-webkit-scrollbar{width:10px}.nbody::-webkit-scrollbar-thumb{background:var(--txt-titlebar-end)}

/* ============ Lofi (canto inferior direito) ============ */
#lofi{position:absolute;right:calc(var(--sx) + 44px);bottom:calc(var(--ey) + 32px);z-index:15;display:flex;flex-direction:column;align-items:flex-end;transition:opacity .4s;transform:scale(.76);transform-origin:100% 100%}
#lofi.hide{opacity:0;pointer-events:none}
.llab{text-align:right;margin:0 6px 14px 0;max-width:270px}
.llab b{display:block;font-size:12px;color:var(--lc);text-shadow:0 0 8px color-mix(in srgb,var(--lc) 80%,transparent),2px 2px 0 #000;margin-bottom:6px}
.llab span{display:block;font:500 23px/1.35 "Mono",monospace;color:#fff;text-shadow:2px 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:clip;padding-bottom:.15em}
.llab span.art{font-size:19px;color:color-mix(in srgb,var(--lc) 45%,#fff)}
.lrow{display:flex;align-items:flex-end;gap:16px}
.lcol{display:flex;flex-direction:column;align-items:center;gap:12px}
.lvol,.lpb{width:62px;background:var(--ld);border:3px solid var(--lc);box-shadow:4px 4px 0 #000,0 0 18px color-mix(in srgb,var(--lc) 40%,transparent);transition:box-shadow .2s,background .2s}
.lvol{display:flex;flex-direction:column;align-items:center;overflow:hidden}
.lvol:hover,.lvol.open,.lpb:hover{background:color-mix(in srgb,var(--lc) 16%,#050505);box-shadow:4px 4px 0 #000,0 0 30px color-mix(in srgb,var(--lc) 75%,transparent)}
.lbars{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;height:0;overflow:hidden;transition:height .28s cubic-bezier(.2,.8,.2,1),padding .28s}
.lvol:hover .lbars,.lvol.open .lbars{height:126px;padding:12px 0 4px}
.lbars button{display:block;height:10px;flex:none;background:#2e0709;position:relative;transition:background .1s}
.lbars button:before{content:"";position:absolute;inset:-3px -8px}
.lbars button.on{background:var(--lc);box-shadow:0 0 8px color-mix(in srgb,var(--lc) 80%,transparent)}
.lbars button:hover{background:color-mix(in srgb,var(--lc) 70%,#fff)}
.lvb{width:56px;height:56px;display:grid;place-items:center}
.lvol.muted #lwaves{opacity:.12}
.lpb{height:62px;display:grid;place-items:center}
.lpb:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.lpb .ic.pause{width:18px;height:22px;border-left-width:6px;border-right-width:6px}
.lpb .ic.play{border-width:11px 0 11px 18px}
.lstack{position:relative;width:266px;height:196px;flex:none}
.lalbum{position:absolute;left:0;top:0;width:196px;height:196px;z-index:2;background:#000;border:3px solid var(--lc);padding:6px;
  box-shadow:5px 5px 0 #000,0 0 28px color-mix(in srgb,var(--lc) 50%,transparent)}
.lalbum img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.15) contrast(1.05)}
.lalbum:after{content:"";position:absolute;inset:6px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),linear-gradient(135deg,rgba(255,255,255,.12),transparent 45%)}
/* vinil realista: sulcos e selo giram, o brilho fica parado (como a luz de verdade) */
.vinyl{position:absolute;left:8px;top:8px;width:180px;height:180px;border-radius:50%;z-index:1;transform:translateX(78px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--lc) 85%,transparent),0 0 18px color-mix(in srgb,var(--lc) 45%,transparent),6px 8px 18px rgba(0,0,0,.8)}
#lofi.paused .vinyl{transform:translateX(24px)}
.vspin{position:absolute;inset:0;border-radius:50%;animation:spin 1.8s linear infinite;
  background:radial-gradient(circle,transparent 0 31%,rgba(255,255,255,.05) 31.5%,transparent 33%),
    repeating-radial-gradient(circle,#0a0a0a 0 1.2px,#171717 1.2px 2px,#0d0d0d 2px 3.1px),
    radial-gradient(circle,#111 0 60%,#0b0b0b 97%,#2a2a2a 99%,#050505 100%)}
.vspin:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 46%,color-mix(in srgb,var(--lc) 55%,transparent) 46.5%,transparent 48%,transparent 72%,color-mix(in srgb,var(--lc) 40%,transparent) 72.5%,transparent 74%)}
.vspin:after{content:"";position:absolute;left:50%;top:5px;width:3px;height:12px;margin-left:-1.5px;background:var(--lc);opacity:.9;box-shadow:0 0 6px var(--lc)}
#lofi.paused .vspin{animation-play-state:paused}
.vlabel{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;overflow:hidden;background:#b8b8b8;box-shadow:0 0 0 2px #1a1a1a}
.vlabel img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.9)}
.vlabel:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #c9c9c9}
.vsheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 25deg,transparent 0 6%,rgba(255,255,255,.2) 11%,transparent 17% 49%,rgba(255,255,255,.14) 61%,transparent 67%),
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.08),transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Lightbox (arte ampliada) ============ */
#lightbox{display:none;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:120;
  background:rgba(0,0,0,.96);align-items:center;justify-content:center;box-sizing:border-box}
#lightbox.on{display:flex;animation:pop .2s steps(3)}
#lbImg{max-width:min(1300px,calc(100% - 260px));max-height:calc(100% - 200px);object-fit:contain;
  filter:drop-shadow(-3px 0 0 rgba(0,240,255,.5)) drop-shadow(3px 0 0 rgba(255,0,50,.55)) drop-shadow(0 0 40px rgba(255,16,32,.3))}
#lbClose{position:absolute;right:32px;top:22px;z-index:5;font-size:44px;font-weight:700;padding:4px 16px}
#lbClose:hover{color:#ff9aa4}
.lbn{position:absolute;top:50%;z-index:4;margin-top:-30px}
#lbPrev{left:24px}#lbNext{right:24px}
#lbCap{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:32px;text-transform:uppercase}
#lightbox.dv-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,min(23vw,330px));
  align-items:center;justify-content:stretch;gap:clamp(20px,2vw,32px);
  width:100%;height:100%;padding:24px 40px 24px 64px;box-sizing:border-box}
#lightbox.dv-detail #lbPrev{left:10px}#lightbox.dv-detail #lbNext{right:8px}
/* a arte cresce visivelmente ao abrir (não só troca de card pra tela cheia) */
#lightbox.dv-detail #lbImg{grid-column:1;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;
  max-width:none;max-height:calc(100dvh - 48px);object-fit:contain;animation:lbGrow .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes lbGrow{from{transform:scale(.88);opacity:.7}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){#lightbox.dv-detail #lbImg{animation:none}}
#lightbox.dv-detail #lbCap{position:relative;grid-column:2;grid-row:1;left:auto;right:auto;bottom:auto;
  width:100%;max-height:calc(100dvh - 170px);overflow-y:auto;display:flex;flex-direction:column;
  align-items:flex-start;gap:24px;padding:18px 0 18px 34px;border-left:1px solid rgba(255,255,255,.22);
  box-sizing:border-box;text-align:left;white-space:normal;font-size:clamp(26px,2.2vw,36px);line-height:1.14}
.dv-detail-title{display:block;width:100%;font-size:1.08em;font-weight:700;font-style:normal;line-height:1.12;
  overflow-wrap:normal;word-break:normal;hyphens:none}
.dv-detail-copy{display:block;width:100%;font-family:"Ital",sans-serif;font-size:.72em;font-style:italic;
  line-height:1.55;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.82);
  white-space:pre-line;overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:760px){
  #lightbox.dv-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    gap:16px;padding:64px 24px 22px}
  #lightbox.dv-detail #lbImg{grid-column:1;grid-row:1;width:100%;height:100%;max-height:56dvh}
  #lightbox.dv-detail #lbCap{grid-column:1;grid-row:2;max-height:26dvh;width:100%;gap:12px;
    padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.22);
    font-size:clamp(20px,5vw,26px)}
  #lbClose{right:14px;top:8px;font-size:34px}
  .lbn{top:34%;transform:scale(.72)}
  #lbPrev{left:2px}#lbNext{right:2px}
}
@media (min-width:761px) and (max-height:640px){
  #lightbox.dv-detail{padding-top:52px;padding-bottom:34px}
  #lightbox.dv-detail #lbImg{max-height:calc(100dvh - 86px)}
  #lightbox.dv-detail #lbCap{max-height:calc(100dvh - 100px);font-size:24px}
}

@media (pointer:coarse){#cursor{display:none!important}}

/* ============ Modo 8-bit (digite "8bit") ============ */
.gf{font-family:"GameF","Ital",sans-serif;font-weight:700;font-style:normal}
.px8{font-family:"Px8","Ital",sans-serif;font-weight:400;font-style:normal}
#b8ban{position:absolute;inset:0;z-index:55;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none}
#b8ban.on{display:flex}
#b8ban:before{content:"";position:absolute;left:0;right:0;top:50%;height:360px;margin-top:-180px;background:linear-gradient(transparent,rgba(0,0,0,.72) 22%,rgba(0,0,0,.72) 78%,transparent);z-index:-1}
.b8t{font-family:"GameF","Ital",sans-serif;font-weight:700;font-size:170px;line-height:1;letter-spacing:4px;white-space:nowrap}
.b8t span{display:inline-block;position:relative;color:transparent;
  background:linear-gradient(#ffe066 0 30%,#f5a524 30% 62%,#e0702a 62% 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(5px 5px 0 #2a0608) drop-shadow(-2px -2px 0 #2a0608) drop-shadow(2px -2px 0 #2a0608) drop-shadow(-2px 2px 0 #2a0608);
  animation:b8in .5s steps(5) both}
.b8t span.sp{width:.5em}
@keyframes b8in{0%{transform:translateY(-60px) scale(1.6);opacity:0}40%{transform:translateY(8px) scale(.9);opacity:1}70%{transform:translateY(-4px)}100%{transform:none;opacity:1}}
.b8s{font-family:"Px8","Ital",sans-serif;font-size:38px;color:#fff;letter-spacing:3px;text-shadow:-2px 0 #ff2bd6,2px 0 #2bf0ff,0 0 14px rgba(0,0,0,.9);animation:b8sub 1s steps(2) infinite}
@keyframes b8sub{50%{opacity:.55}}
#b8ban.out{animation:b8out .35s steps(4) forwards}
@keyframes b8out{to{opacity:0;transform:scaleY(.05)}}
/* títulos na Game Font */
body.b8 .ital,body.b8 .game,body.b8 .sair,body.b8 .mus,body.b8 .mel,body.b8 #dvCap,body.b8 .llab b,body.b8 .ntt,body.b8 .lenter,body.b8 #lbCap,body.b8 #ytCover b{
  font-family:"GameF",monospace!important;font-style:normal!important;font-weight:700!important;letter-spacing:1px;
  text-shadow:3px 3px 0 #2a0608,-1px 0 rgba(0,240,255,.5),1px 0 rgba(255,0,50,.6)}
body.b8 .sair{font-size:34px}
body.b8 .mus{font-size:.86em}
body.b8 #dvCap{font-size:.8em}
body.b8 .sair,body.b8 .mel,body.b8 #dvCap{animation:b8bob 1.6s steps(2) infinite}
@keyframes b8bob{50%{translate:0 -2px}}
/* textos na 8bit Font, com o RGB separado da referência */
body.b8 .nbody,body.b8 .cant,body.b8 #plSinger,body.b8 .llab span,body.b8 .time,body.b8 .osd,body.b8 #doomHint,body.b8 .dvN,body.b8 #sfxToggle{
  font-family:"Px8",monospace!important;font-style:normal!important;font-weight:400!important;text-shadow:-1.5px 0 rgba(255,43,214,.85),1.5px 0 rgba(43,240,255,.85)}
/* no 8-bit a janela de texto ocupa bem mais da tela */
/* no 8-bit a janela cresce, mas continua à direita do MP3 e acima do lofi */
body.b8 .note{width:min(1000px,var(--nw,800px));height:max(400px,calc(var(--vh) - 290px))}
body.b8 .nbody{font-size:34px;line-height:1.25;padding:24px 34px;color:var(--txt-text)}
body.b8 .nbody p.dim{color:var(--txt-muted)}
body.b8 .ntitle{height:48px}
body.b8 .ntt{font-size:18px}

/* botões do menu: pílulas de vidro vermelho-escuro (estilo da foto original, redesenhadas em vetor: nítidas em qualquer tela) */
.b8pill{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:999px;white-space:nowrap;
  font:italic 600 16.5px/1 "Ital",sans-serif;letter-spacing:.2px;color:#f6efd4;
  background:linear-gradient(180deg,#9a0e26 0%,#6c0519 52%,#470312 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,100,115,.45),inset 0 -2px 0 rgba(30,0,6,.6),0 0 0 1px rgba(255,50,70,.32),0 0 14px rgba(255,20,50,.25);
  text-shadow:-1px 0 rgba(0,230,255,.5),1.5px 1.5px 0 rgba(140,40,210,.85),0 0 8px rgba(255,80,100,.35);
  transition:translate .14s steps(3),background .12s,box-shadow .12s,color .12s}
.b8pill:after{content:"";position:absolute;left:6%;right:6%;top:2px;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none}
.b8pill.warn:before{content:"";position:absolute;left:-30px;top:50%;width:22px;height:20px;margin-top:-10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M13 2.5 24 21.5H2Z' fill='none' stroke='%23f6efd4' stroke-width='2.2' stroke-linejoin='round'/%3E%3Crect x='11.9' y='8.5' width='2.2' height='6.5' fill='%23f6efd4'/%3E%3Crect x='11.9' y='16.8' width='2.2' height='2.2' fill='%23f6efd4'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(-1.5px 0 0 rgba(0,230,255,.7)) drop-shadow(1.5px 1.5px 0 rgba(140,40,210,.8))}
.hit:hover+.b8pill,.hit:focus-visible+.b8pill{translate:6px 0;color:#fff;
  background:linear-gradient(180deg,#e3203e 0%,#b10c27 50%,#7a0620 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,190,190,.8),inset 0 -2px 0 rgba(40,0,8,.5),0 0 0 1.5px rgba(255,255,255,.85),0 0 24px rgba(255,40,60,.9)}
body.b8 .b8pill{font:normal 700 14px/1 "GameF",sans-serif;letter-spacing:0}
/* tela do MP3 (menu): tudo dentro do visor é recortado pela máscara (nada vaza). id #mlcd — #lcd é a tela do player */
#mlcd{position:absolute;left:0;top:0;width:1800px;height:880px;z-index:2;pointer-events:none;-webkit-mask:url(../assets/cenas/visor_mask.png?v=2) 0 0/1800px 880px no-repeat;mask:url(../assets/cenas/visor_mask.png?v=2) 0 0/1800px 880px no-repeat}
#mlcd .hit,#mlcd #chibi,#mlcd #ticker:not(.tk-off){pointer-events:auto}
/* fundo do visor: arte (borboleta + espiral + estrelinhas) em vermelho claro, bem apagada; fica atrás do ruído e dos botões */
.lcd-art{position:absolute;left:0;top:0;width:600px;height:340px;pointer-events:none;background:url(../assets/cenas/visor_fundo.png?v=2) 0 0/600px 340px no-repeat}
#menuPlate.tv-first .lcd-art{animation:lcdArtIn 1.7s linear 1.05s both}
@keyframes lcdArtIn{0%,66%{opacity:0}100%{opacity:1}}
/* fundo do visor: textura de ruído fraca (grão de LCD/VHS), atrás dos botões; treme de leve em degraus */
.lcd-noise{position:absolute;left:0;top:0;width:1800px;height:880px;pointer-events:none;opacity:.075;mix-blend-mode:screen;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.6'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:lcdGrain .6s steps(1,end) infinite}
@keyframes lcdGrain{0%{background-position:0 0}25%{background-position:-47px 31px}50%{background-position:29px -53px}75%{background-position:-19px -27px}}
#menuPlate.tv-first .lcd-noise{animation:lcdGrain .6s steps(1,end) infinite,lcdNzIn 1.7s linear 1.05s both}
@keyframes lcdNzIn{0%,66%{opacity:0}100%{opacity:.075}}
@media (prefers-reduced-motion:reduce){.lcd-noise,#menuPlate.tv-first .lcd-noise,#menuPlate.tv-first .lcd-art{animation:none}}
.mnav{position:absolute;left:112px;top:80px;width:196px;display:flex;flex-direction:column;gap:10px;transform:rotate(-7.6deg);transform-origin:0 0}
.mi{position:relative;height:34px}
.mi .b8pill{inset:0}


/* ============ visor do MP3: último vídeo rolando ============ */
#ticker{--tk:var(--theme-accent,#ff3b4a);position:absolute;left:126px;top:268px;width:404px;height:30px;transform:rotate(-7.6deg);transform-origin:0 50%;overflow:hidden;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.55),color-mix(in srgb,var(--tk) 12%,rgba(0,0,0,.6)));border-top:1px solid color-mix(in srgb,var(--tk) 40%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tk) 40%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
body.rgb #ticker{--tk:var(--theme-accent)!important}   /* modo RGB: a faixa acompanha a cor do tema */
#ticker.tk-off{pointer-events:none;cursor:default}
#ticker .tkin{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:pre;will-change:transform;animation:tick 22s linear infinite}
#tkTx{display:flex;white-space:pre}
#tkTx,#tkM{font:600 17px/1 "Px8",monospace;letter-spacing:1.5px;color:var(--tk);text-shadow:-1px 0 rgba(0,229,255,.7),1px 0 color-mix(in srgb,var(--tk) 80%,transparent),0 0 8px color-mix(in srgb,var(--tk) 70%,transparent)}
#tkM{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;white-space:pre}
#ticker:hover #tkTx{color:#fff}
#ticker:hover .tkin{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.b8 #tkTx,body.b8 #tkM{font-family:"GameF";font-weight:400;font-size:15px}

/* ============ segredos ============ */
.nmenu .nhelp{font:inherit;color:inherit;padding:2px 6px;margin:0 -6px}
.nmenu .nhelp:hover{background:#c8083a;color:#fff}
#chibi{position:absolute;left:calc(392px + var(--cdx,0px));top:52px;width:140px;height:160px;z-index:2;transform:rotate(-7deg) scale(var(--cs,1));
  /* segurar o dedo nele é o easter egg: nada de menu do Chrome (Lens/copiar), seleção, arrastar imagem nem rolagem */
  touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#chibi *,#chSay{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
/* chibi da tela do MP3: balança, inclina a cabeça e treme as cores de vez em quando.
   --a (0 a 1) = irritação: vai avermelhando o rosto e tremendo mais; .mad = cara brava */
.chw{position:absolute;left:50%;top:50%;width:166px;aspect-ratio:640/548;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(-1.5px 0 0 rgba(0,229,255,.55)) drop-shadow(1.5px 0 0 rgba(255,26,60,.6)) drop-shadow(0 0 calc(var(--a,0) * 16px) rgba(255,20,40,calc(var(--a,0) * .9)));
  animation:chBob 3.8s ease-in-out infinite,chGl 6s steps(1) infinite}
.chs{position:absolute;inset:0;animation:chShake .11s steps(2) infinite}
.mchibi{position:absolute;inset:0;width:100%;height:100%;transition:opacity .12s}
.chb,.chr{opacity:0}
#chibi.mad .chn{opacity:0}#chibi.mad .chb{opacity:1}
#chibi.mad .chr{opacity:1;transform-origin:34% 34%;animation:chVein .7s ease-in-out infinite}
/* rubor: só sobre o desenho (máscara com o próprio chibi), multiplicado como tinta de verdade */
.blush{position:absolute;inset:0;opacity:var(--a,0);mix-blend-mode:multiply;
  background:radial-gradient(ellipse 26% 15% at 59% 67%,rgba(255,50,70,.95),rgba(255,60,80,.45) 55%,transparent 100%),
    radial-gradient(ellipse 52% 40% at 56% 60%,rgba(255,90,100,.55),transparent 100%);
  -webkit-mask:url(../assets/chibi_brava.webp?v=3) center/100% 100% no-repeat;mask:url(../assets/chibi_brava.webp?v=3) center/100% 100% no-repeat}
@keyframes chBob{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -4px;rotate:-2.5deg}65%{translate:0 -1px;rotate:2deg}}
@keyframes chShake{0%{translate:calc(var(--a,0) * 2.6px) calc(var(--a,0) * -1.4px)}50%{translate:calc(var(--a,0) * -2.6px) calc(var(--a,0) * 1.2px)}100%{translate:0 0}}
@keyframes chVein{50%{scale:1.18}}
@keyframes chGl{0%,93%,100%{opacity:1}
  94%{filter:drop-shadow(-4px 0 0 rgba(0,229,255,.8)) drop-shadow(4px 0 0 rgba(255,26,60,.8));opacity:.92}
  95%{filter:drop-shadow(3px 0 0 rgba(0,229,255,.7)) drop-shadow(-3px 0 0 rgba(255,26,60,.7))}
  96%{filter:drop-shadow(-1.5px 0 0 rgba(0,229,255,.55)) drop-shadow(1.5px 0 0 rgba(255,26,60,.6));opacity:1}}
#chibi:hover .chs{scale:1.06}
#segToast{position:absolute;left:50%;top:calc(var(--ey) + 34px);z-index:56;display:none;flex-direction:column;align-items:center;gap:6px;padding:14px 26px 12px;
  transform:translateX(-50%);background:rgba(8,0,3,.86);border:2px solid var(--red);box-shadow:0 0 0 1px #ff9ab0 inset,0 0 30px rgba(255,16,32,.5),-3px 0 0 rgba(0,240,255,.5),3px 0 0 rgba(255,0,50,.5);pointer-events:none}
#segToast.on{display:flex;animation:segIn 3.4s steps(1) both}
#segN{font:700 24px/1 "GameF";letter-spacing:2px;color:#fff;text-shadow:-2px 0 #00e5ff,2px 0 #ff1a3c}
#segNm{font:600 18px/1 "Px8";color:#ffd36b}
@keyframes segIn{0%{clip-path:inset(0 0 100% 0)}4%{clip-path:inset(0 0 40% 0);transform:translateX(calc(-50% - 10px))}8%{clip-path:none;transform:translateX(calc(-50% + 6px))}
  12%{transform:translateX(-50%)}88%{opacity:1;clip-path:none}92%{clip-path:inset(30% 0 20% 0);transform:translateX(calc(-50% + 8px))}100%{opacity:0;clip-path:inset(50% 0 50% 0)}}
/* fita: o clipe toca à mostra no lugar da capa do lofi */
#lYT{position:absolute;inset:6px;display:none;background:#000}
#lYT iframe{width:100%;height:100%;display:block;border:0}
#lofi.fita #lYT{display:block}
#lofi.fita .lalbum{border-color:#ffd36b;box-shadow:0 0 22px rgba(255,211,107,.45)}
#lofi.fita #lLab{color:#ffd36b}

/* ============ volume do player ============ */
.vgrp{display:flex;align-items:center;gap:10px}
.cb.vb{width:52px}
.cb.vb .vm{position:absolute;left:50%;top:50%;width:18px;height:4px;margin:-2px 0 0 -9px;background:#ddd}
.cb.vb .vp{position:absolute;left:50%;top:50%;width:4px;height:18px;margin:-9px 0 0 -2px;background:#ddd}
.cb.vb.off{opacity:.45}
.vmeter{height:30px;display:flex;align-items:flex-end;gap:3px;padding:0 2px}
.vmeter i{width:6px;background:#2e0709;box-shadow:inset 0 0 0 1px #4a1015}
.vmeter i:nth-child(1){height:30%}.vmeter i:nth-child(2){height:37%}.vmeter i:nth-child(3){height:44%}.vmeter i:nth-child(4){height:51%}.vmeter i:nth-child(5){height:58%}
.vmeter i:nth-child(6){height:65%}.vmeter i:nth-child(7){height:72%}.vmeter i:nth-child(8){height:79%}.vmeter i:nth-child(9){height:86%}.vmeter i:nth-child(10){height:100%}
.vmeter i.on{background:var(--red);box-shadow:0 0 6px rgba(227,16,28,.8)}
.vmeter i.on:nth-child(n+9){background:#ff5a5a}
.osd.vol{letter-spacing:1px}

/* ============ skill check na roda ============ */
#skill{position:absolute;left:0;top:0;width:1800px;height:880px;pointer-events:none;z-index:3;display:none}
#skill.on{display:block;animation:skIn .25s steps(3) both}
@keyframes skIn{0%{opacity:0;filter:drop-shadow(6px 0 0 #00e5ff)}100%{opacity:1;filter:none}}
.sktrack{fill:none;stroke:rgba(255,255,255,.28);stroke-width:5}
.skzone{fill:none;stroke:#fff;stroke-width:9;filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}
.skgreat{fill:none;stroke:#fff;stroke-width:15}
#skNeedle line{stroke:var(--red);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff1a3c)}
#skNeedle circle{fill:#fff}
#skRound{font:700 17px "GameF";fill:#fff;letter-spacing:2px;paint-order:stroke;stroke:#000;stroke-width:4px}
#skill.hit .skzone,#skill.hit .skgreat{stroke:#7dffb0}
#skill.miss .skzone,#skill.miss .skgreat{stroke:#ff1a3c}
#skill.miss{animation:skMiss .3s steps(2) 2}
@keyframes skMiss{50%{transform:translate(4px,-2px)}}

/* ============ barreira negra + perfil da Steam ============ */
#bwall{position:absolute;inset:calc(var(--sy) * -1 - var(--by,0px)) calc(var(--sx) * -1);z-index:58;display:none;align-items:center;justify-content:center}
#bwall.on{display:flex;animation:bwIn .5s steps(5) both}
@keyframes bwIn{0%{clip-path:inset(48% 0 48% 0)}40%{clip-path:inset(20% 0 30% 0)}100%{clip-path:none}}
#bwall.shake{animation:bwShake .12s steps(2) infinite}
@keyframes bwShake{0%{transform:translate(6px,-4px)}50%{transform:translate(-7px,3px)}100%{transform:translate(3px,5px)}}
#bwCv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#bwall:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
#bwAsk,#bwCard{z-index:1}
#bwAsk{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;transition:opacity .2s;margin-top:300px}
#bwAsk.gone{opacity:0;pointer-events:none}
.bwtt{font-size:76px;letter-spacing:6px;color:#000;-webkit-text-stroke:2px #ff1a3c;text-shadow:-5px 0 rgba(0,229,255,.7),5px 0 rgba(255,0,50,.8),0 0 40px rgba(255,20,40,.8);animation:bwFlick 2.2s steps(1) infinite}
@keyframes bwFlick{0%,100%{opacity:1}43%{opacity:.4;transform:skewX(-8deg)}45%{opacity:1;transform:none}71%{transform:translateX(-6px)}72%{transform:none}}
#bwSub{font-size:26px;color:#ff6b7a;min-height:30px;text-shadow:0 0 10px rgba(255,30,50,.7)}
.bwbt{display:flex;gap:28px;margin-top:6px}
.bwbt button{font:600 24px "Px8",monospace;color:#fff;padding:8px 12px;background:rgba(0,0,0,.6);border:2px solid #ff1a3c;box-shadow:0 0 18px rgba(255,20,40,.45)}
.bwbt button:hover{background:#ff1a3c;color:#000}
#bwNo{border-color:#555;color:#aaa;box-shadow:none}#bwNo:hover{background:#333;color:#fff}
p.bwerr{color:#fff!important;background:#c8083a;display:inline-block;padding:0 6px}
.nbody p.door{cursor:pointer}
/* cartão do perfil */
#bwCard{position:absolute;width:640px;display:none;background:rgba(6,0,2,.94);border:2px solid #ff1a3c;
  box-shadow:0 0 0 1px #ff9ab0 inset,0 0 60px rgba(255,20,40,.45),-4px 0 0 rgba(0,229,255,.55),4px 0 0 rgba(255,0,50,.6);padding:0 0 22px}
#bwCard.in{display:block;animation:noteIn .6s steps(1) both}
.bwhd{display:flex;align-items:center;gap:14px;height:40px;padding:0 6px 0 14px;background:linear-gradient(#c40b3a,#6a0018);font:700 15px/1 "GameF";letter-spacing:2px;color:#fff}
.bwsig{margin-left:auto;font:600 14px "Px8";color:#ffd36b;animation:blink .9s steps(2) infinite}
.bwx{width:30px;height:27px;background:#000;color:#fff;font:700 15px Tahoma,sans-serif;box-shadow:inset 0 0 0 2px #fff}.bwx:hover{background:#ff2a55}
.bwtop{display:flex;gap:22px;padding:22px 24px 14px}
.bwav{position:relative;width:148px;height:148px;flex:none;border:3px solid #ff1a3c;box-shadow:0 0 22px rgba(255,20,40,.6)}
.bwav img{width:100%;height:100%;display:block;object-fit:cover;filter:contrast(1.1) saturate(1.1)}
.bwav:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);animation:bwScan 3s linear infinite}
@keyframes bwScan{to{background-position:0 30px}}
.bwav .lv{position:absolute;right:-12px;bottom:-12px;font:700 15px "GameF";font-style:normal;color:#000;background:#ffd36b;padding:5px 7px;box-shadow:3px 3px 0 #000}
.bwid{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.bwnm{font-size:46px;color:#fff;text-shadow:-3px 0 #00e5ff,3px 0 #ff1a3c;line-height:1}
.bwreal{font:600 20px "Px8";color:#ff9ab0}
.bwfr{font:24px "Txt8","Px8","Ital",monospace;color:#ffd36b}
.bwst{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 24px 12px}
.bwst div{border:1px solid rgba(255,40,60,.5);background:rgba(255,20,40,.08);padding:9px 6px;text-align:center}
.bwst b{display:block;font-size:24px;color:#fff;line-height:1.1}
.bwst span{font:600 13px "Px8";color:#ff6b7a;letter-spacing:1px}
.bwgm{display:flex;flex-direction:column;gap:8px;padding:6px 24px 16px}
.bwgm .g{display:grid;grid-template-columns:1fr auto;gap:2px 14px;font:24px/1 "Txt8","Px8","Ital",monospace;color:#ff3b4a}
.bwgm .gn{color:#fff}.bwgm .gb{letter-spacing:1px;text-shadow:0 0 6px rgba(255,30,50,.7)}.bwgm .gi{grid-column:1/-1;font-size:19px;color:#ff9ab0}
.bwgo{display:block;margin:4px 24px 0;text-align:center;padding:12px;font:700 17px "GameF";letter-spacing:2px;color:#000;background:#ff1a3c;box-shadow:4px 4px 0 #000,0 0 22px rgba(255,20,40,.6)}
.bwgo:hover{background:#fff}

/* LOADING em texto nítido por cima da foto (a foto só tinha o texto pixelado) */
.ldtxt{position:absolute;left:467px;top:209px;font:700 17px/1 "GameF",monospace;letter-spacing:0;color:#ff3b4a;white-space:nowrap;
  -webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed;
  text-shadow:-1px 0 #00e5ff,1px 0 #ff1a3c;pointer-events:none}
.ldtxt:before,.ldtxt:after{content:attr(data-t);position:absolute;left:0;top:0;pointer-events:none;clip-path:inset(100% 0 0 0)}
.ldtxt:before{color:#00e5ff;text-shadow:none;animation:ldSliceA 3.2s steps(1,end) infinite}
.ldtxt:after{color:#fff;text-shadow:2px 0 #ff1a3c;animation:ldSliceB 3.2s steps(1,end) infinite}
.ldtxt b{display:inline-block;width:.55em;height:.95em;margin-left:3px;vertical-align:-1px;background:#ff3b4a;box-shadow:-1px 0 #00e5ff,1px 0 #ff1a3c;animation:bootCursor .9s steps(1,end) infinite}
@keyframes ldSliceA{0%,86%,100%{clip-path:inset(100% 0 0 0);transform:none}88%{clip-path:inset(10% 0 55% 0);transform:translateX(-4px)}91%{clip-path:inset(60% 0 8% 0);transform:translateX(3px)}94%{clip-path:inset(30% 0 40% 0);transform:translateX(-2px)}}
@keyframes ldSliceB{0%,87%,100%{clip-path:inset(100% 0 0 0);transform:none}89%{clip-path:inset(45% 0 30% 0);transform:translateX(5px)}92%{clip-path:inset(5% 0 75% 0);transform:translateX(-3px)}95%{clip-path:inset(70% 0 0 0);transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.ldtxt:before,.ldtxt:after,.ldtxt b{animation:none}}

/* ============ quando o chibi derruba o site ============ */
#dead{position:absolute;inset:calc(var(--sy) * -1 - var(--by,0px)) calc(var(--sx) * -1);z-index:10001;text-align:center;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#000;cursor:none}
#dead.on{display:flex;animation:deadIn .5s steps(4) both}
@keyframes deadIn{0%{clip-path:inset(49% 0 49% 0)}50%{clip-path:inset(20% 0 30% 0)}100%{clip-path:none}}
#deadTx{font-size:clamp(28px,5vw,64px);letter-spacing:4px;color:#ff1a3c;text-shadow:-3px 0 rgba(0,229,255,.7),3px 0 rgba(255,0,50,.8),0 0 24px rgba(255,20,40,.7);animation:bwFlick 1.6s steps(1) infinite}
#deadSub{font-size:clamp(16px,2vw,24px);color:#ff9ab0}
body:has(#dead.on) #cursor,body:has(#dead.on) .ctrail{display:none!important}
/* celular em pé: o palco é escalado (~0,35x), então o texto usa px reais via --inv */
body.pt #dead{gap:calc(14px * var(--inv));padding:0 calc(20px * var(--inv))}
body.pt #deadTx{font-size:calc(24px * var(--inv));letter-spacing:calc(2px * var(--inv));line-height:1.2}
body.pt #deadSub{font-size:calc(15px * var(--inv))}

/* ============ lofi: cor do tema vem da thumbnail ============ */
@property --lc{syntax:"<color>";inherits:true;initial-value:#e3101c}
@property --ld{syntax:"<color>";inherits:true;initial-value:#0b0506}
#lofi{transition:opacity .4s,--lc .9s,--ld .9s}
body.rgb #lofi{transition:opacity .4s}   /* modo RGB: a cor do disco acompanha o arco-íris sem atraso */
.lhd{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:6px}
.lhd b{margin:0!important;font-size:14px}
.llab .lnav{display:flex;align-items:center;gap:6px;font:inherit;overflow:visible}
.lnav button{width:34px;height:28px;font-size:13px;color:#fff;background:var(--ld);border:2px solid var(--lc);box-shadow:2px 2px 0 #000;display:grid;place-items:center}
.lnav button:hover{background:var(--lc);color:#000}
.lnav i{font:500 17px "Mono",monospace;font-style:normal;color:#fff;min-width:30px;text-align:center}
/* o player do YouTube fica escondido atrás da capa: o álbum mostra só a thumbnail */
#lofi #lYT{display:block;opacity:0!important;pointer-events:none;z-index:-1}
.lalbum img{position:relative;z-index:1}
.lalbum.swap{animation:lSwap .45s steps(4)}
@keyframes lSwap{0%{clip-path:inset(0 0 60% 0);filter:hue-rotate(80deg) saturate(2)}40%{clip-path:inset(40% 0 0 0);translate:4px 0}70%{clip-path:inset(0 0 20% 0);translate:-3px 0}100%{clip-path:none;filter:none;translate:0}}

/* ============ balão de fala do chibi (estilo mangá: branco, contorno preto, rabinho apontando para ela) ============ */
#chSay{position:absolute;left:514px;top:98px;z-index:4;display:none;max-width:230px;padding:10px 16px 11px;background:#fff;color:#111;
  border:3px solid #111;border-radius:18px;box-shadow:4px 4px 0 rgba(0,0,0,.55),-2px 0 0 rgba(0,229,255,.5),2px 0 0 rgba(255,26,60,.55);
  font:600 21px/1.1 "Px8",monospace;white-space:nowrap;transform:rotate(-7deg);transform-origin:0 100%;pointer-events:none}
#chSay:before,#chSay:after{content:"";position:absolute;left:-17px;bottom:9px;border-style:solid}
#chSay:before{border-width:9px 18px 9px 0;border-color:transparent #111 transparent transparent}
#chSay:after{left:-11px;bottom:12px;border-width:6px 12px 6px 0;border-color:transparent #fff transparent transparent}
#chSay.on{display:block;animation:sayIn .22s steps(3) both}
#chSay.out{animation:sayOut .25s steps(3) both}
#chSay.hot2{background:#ffe3e6;color:#c4001d;animation:sayIn .22s steps(3) both,sayShake .12s steps(2) .22s infinite}
@keyframes sayIn{0%{opacity:0;scale:.6;translate:-10px 6px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes sayOut{to{opacity:0;scale:.8}}
@keyframes sayShake{0%{translate:2px 0}50%{translate:-2px 1px}100%{translate:0 0}}
body.b8 #chSay{font-family:"GameF";font-size:17px}

/* Duotone: a cor secundária compõe grades, volume, bordas e estados ativos. */
#deck{border:1px solid color-mix(in srgb,var(--theme-accent-secondary) 30%,transparent)}
#pfWin{outline:1px solid color-mix(in srgb,var(--theme-accent-secondary) 18%,transparent);outline-offset:-1px}
#sfxToggle:hover,.tri:hover,.tri.press,.sair:hover,.wb:focus-visible{
  filter:drop-shadow(-2px 0 0 color-mix(in srgb,var(--theme-accent-secondary) 78%,transparent))
         drop-shadow(2px 0 0 color-mix(in srgb,var(--theme-accent) 78%,transparent));
}

/* ============ Celular em pé (body.pt) ============
   A tela é bem mais alta que o palco 1600x900: fotos e fundos cobrem tudo (cortando as laterais, se precisar),
   os botões de borda ficam nas bordas reais (--ey) e o portfólio vira carrossel lateral com a mão embaixo.
   Medidas em unidades do palco (a tela mostra ~1100 de largura). */
body.pt .sair{font-size:68px;padding:10px 22px}
body.pt .sair.tr{right:calc(var(--sx) + 30px);top:calc(var(--ey) + 70px)}
body.pt .sair.bl{left:auto;right:calc(var(--sx) + 30px);bottom:calc(var(--ey) + 70px);font-size:68px}
body.pt #sfxToggle{font-size:38px;top:calc(var(--ey) + 70px);left:calc(var(--sx) + 30px)}
body.pt .lenter{width:760px;font-size:46px;bottom:calc(var(--ey) + 160px)}
body.pt #lofi{right:auto;left:calc(var(--sx) + 30px);bottom:calc(var(--ey) + 50px);align-items:flex-start;transform:scale(calc(2 * var(--pk,1)));transform-origin:0 100%}
/* celular em pé: o palco mostra só ~1100 unidades de largura, então o player é ampliado (2x) para ficar legível e fácil de tocar */
body.pt .llab{max-width:344px;text-align:left;margin:0 0 14px 0}
body.pt .llab span{white-space:normal;display:block;line-height:1.25;overflow-wrap:anywhere}
body.pt .lhd{justify-content:flex-start}
body.pt .lnav button{width:40px;height:34px;font-size:15px}
/* portfólio: cartões em cima (rolam de lado, encaixando um por vez) */
body.pt #pfArrows{display:none}
body.pt #pfWin{left:var(--sx);top:calc(var(--ey) + var(--sh) * .14);width:calc((1600px - 2 * var(--sx)) / var(--pk,1));height:800px;transform:scale(var(--pk,1));transform-origin:0 0;overflow-x:auto;overflow-y:hidden;
  -webkit-mask:none;mask:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}
body.pt #pfWin::-webkit-scrollbar{display:none}
body.pt #pfList{position:relative;display:flex;align-items:flex-start;width:max-content;min-width:100%;height:100%;transform:none!important;transition:none;
  padding:0 calc(((1600px - 2 * var(--sx)) / var(--pk,1) - 560px) / 2)}
body.pt .row{position:relative;top:auto!important;left:auto;width:560px;max-width:none;height:100%;padding:0;flex:none;flex-direction:column;justify-content:flex-start;gap:34px;
  scroll-snap-align:center;scroll-snap-stop:always;opacity:.45;transform:scale(.8);transform-origin:50% 0;transition:opacity .25s,transform .25s}
body.pt .row.sel{opacity:1;transform:none}
body.pt .row:hover .sd{transform:none}
body.pt .sd{width:420px;height:551px}
body.pt .sd .lab{height:74px;font-size:36px;border-top-width:4px}
body.pt .row .t{align-items:center;text-align:center}
body.pt .row .mus,body.pt .row .cant{text-align:center;max-width:540px;padding-right:0}
body.pt .row .mel{position:static;margin:8px 0 0;font-size:44px}
/* ...e a mão embaixo, saindo pela borda de baixo da tela, segurando o cartão selecionado */
body.pt #pfHand{height:calc(var(--sh) * .515);width:auto;aspect-ratio:900/1101;left:50%;margin-left:calc(var(--sh) * -.2105);top:calc(var(--ey) + var(--sh) * .485 + 40px)}
/* direção visual: título em cima e um cartão grande por vez (arraste ou use as setas) */
body.pt .dvLeg{left:calc(var(--sx) + 70px)!important;width:calc(1600px - 2 * var(--sx) - 140px)!important;top:calc(var(--ey) + var(--sh) * .14);max-height:calc(var(--sh) * .46 - 348px)!important;overflow-y:auto!important;transform:none;gap:30px;padding:0 0 0 14px}
body.pt .dv-leg-meta{font-size:26px}
body.pt .dv-leg-title{font-size:80px}
body.pt .dv-leg-copy{font-size:48px}
body.pt .dv-leg-style{font-size:40px;letter-spacing:2px}
body.pt .dv-leg-line{height:3px}
body.pt .dvLeg{z-index:3;max-height:calc(var(--sh) * .46 - 400px)!important}   /* retrato: o card (z 4) sempre cobre o texto, nunca o contrário */
body.pt .dv-leg-copy{display:block;overflow:visible}   /* texto completo: o JS encolhe a fonte para caber no card */
body.pt .dv-slide{left:800px;top:calc(var(--ey) + var(--sh) * .6)}
body.pt .dv-slide.dv-pos-current{width:960px;height:648px;padding:14px}
body.pt .dv-slide.dv-pos-next,body.pt .dv-slide.dv-pos-far-right,body.pt .dv-slide.dv-pos-hidden-left{opacity:0!important;pointer-events:none!important}
body.pt .dvNav{left:800px;top:calc(var(--ey) + var(--sh) * .075);gap:46px;transform:translate(-50%,-50%) scale(2.4)}
body.pt .dvN{display:none}
/* janelas de texto (Introdução / Redes): quase da largura da tela, com letras e botões do tamanho de um dedo */
body.pt .note{top:calc(var(--ey) + var(--sh) * .126);width:var(--nw);height:calc(var(--sh) * .63)}
body.pt .ntitle{height:92px;padding:0 10px 0 22px}
body.pt .ntitle>span:first-child{font-size:40px}
body.pt .nbtns{gap:12px}
body.pt .nbtns button{width:78px;height:66px;font-size:34px}
body.pt .nmenu{height:68px;font-size:32px;gap:36px;padding:0 24px}
body.pt .nbody{font-size:52px;padding:34px 40px}
body.pt .rz{display:none}
body.pt .wtab{height:84px;font-size:34px;padding:0 26px 0 22px}
body.pt #wtask{max-width:none}
/* arte ampliada em retrato: o pop-up cobre a tela inteira (em unidades do palco) e empilha arte + texto */
body.pt #lightbox{inset:auto;left:var(--sx);top:var(--ey);width:calc(1600px - 2 * var(--sx));height:var(--sh)}
body.pt #lightbox.dv-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:50px;padding:200px 40px 80px}
body.pt #lightbox.dv-detail #lbImg{width:100%;height:auto;max-height:none;aspect-ratio:3/2}
body.pt #lightbox.dv-detail #lbCap{grid-column:1;grid-row:2;max-height:none;overflow:visible;gap:30px;padding:44px 0 0;border-left:0;border-top:3px solid rgba(255,255,255,.22);font-size:58px}
body.pt #lbClose{right:30px;top:60px;font-size:100px;padding:10px 30px}
body.pt .lbn{top:34%;margin-top:0;transform:scale(2.2)}
body.pt #lbPrev{left:60px}body.pt #lbNext{right:60px}
/* arte ampliada no desktop: setas ao lado da arte (não mais em cima do texto), arte ocupa a altura toda
   e o texto começa abaixo do X. Só vale fora do modo retrato (body.pt, celular em pé) e acima de 760px. */
@media(min-width:761px){
  body:not(.pt) #lightbox.dv-detail{grid-template-columns:56px minmax(0,1fr) 56px minmax(240px,min(28vw,420px));
    grid-template-rows:minmax(0,1fr);gap:0 clamp(12px,1.4vw,22px);padding:24px 36px;align-items:stretch}
  body:not(.pt) #lightbox.dv-detail #lbPrev{grid-column:1;grid-row:1;position:relative;left:auto;top:auto;margin:auto;transform:none;justify-self:center;align-self:center}
  body:not(.pt) #lightbox.dv-detail #lbImg{grid-column:2;grid-row:1;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;align-self:stretch;justify-self:center}
  body:not(.pt) #lightbox.dv-detail #lbNext{grid-column:3;grid-row:1;position:relative;right:auto;top:auto;margin:auto;transform:none;justify-self:center;align-self:center}
  body:not(.pt) #lightbox.dv-detail #lbCap{grid-column:4;grid-row:1;position:relative;left:auto;right:auto;bottom:auto;align-self:center;
    max-height:calc(100dvh - 110px);overflow-y:auto;gap:22px;padding:84px 0 18px 30px;border-left:1px solid rgba(255,255,255,.22);box-sizing:border-box}
}
/* celular em pé: a arte recua e as setas ficam nas laterais, fora da imagem */
body.pt #lightbox.dv-detail #lbImg{width:calc(100% - 110px);justify-self:center}
body.pt .lbn{transform:scale(1.3)}
body.pt #lbPrev{left:6px}body.pt #lbNext{right:6px}

/* balão do chibi no celular em pé: maior, quebra linha e a cauda fica do lado do chibi (classe .lft = cauda à direita) */
body.pt #chSay{font-size:40px;line-height:1.12;white-space:normal;max-width:520px;width:max-content;padding:14px 24px 16px;border-width:4px;border-radius:24px}
body.pt #chSay:before{border-width:12px 22px 12px 0;left:-21px;bottom:18px}
body.pt #chSay:after{border-width:8px 15px 8px 0;left:-14px;bottom:22px}
body.pt #chSay.lft:before{left:auto;right:-21px;border-width:12px 0 12px 22px;border-color:transparent transparent transparent #111}
body.pt #chSay.lft:after{left:auto;right:-14px;border-width:8px 0 8px 15px;border-color:transparent transparent transparent #fff}
body.pt #chSay.hot2.lft:before{border-color:transparent transparent transparent #111}
/* botão Search do bloco de notas: parece texto comum, sem indicação */
.nsrch,.nedit{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.nmenu .nsrch,.nmenu .nedit{padding:2px 6px;margin:0 -6px}
.nmenu .nsrch:hover,.nmenu .nedit:hover{background:#c8083a;color:#fff}
/* painel de códigos: campo em branco no centro-alto da tela (acima do teclado), sem legenda */
#codeP{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.42);flex-direction:column;align-items:center;justify-content:flex-start;padding-top:16vh}
#codeMsg{width:min(88vw,520px);margin-top:16px;min-height:1.4em;color:#ff2a3c;font:400 17px/1.4 "Px8",monospace;letter-spacing:1px;text-align:left;text-shadow:0 0 8px rgba(255,16,50,.6)}
#codeP.on{display:flex;animation:pop .2s steps(3)}
#codeIn{width:min(88vw,520px);padding:16px 18px;background:#050304;color:#ff2a3c;border:2px solid #c8083a;border-radius:6px;
  font:400 30px/1 "Px8",monospace;letter-spacing:2px;text-transform:none;outline:none;caret-color:#ff2a3c;
  box-shadow:0 0 0 1px rgba(255,26,60,.25),0 18px 40px rgba(0,0,0,.7),0 0 28px rgba(255,16,50,.3)}
#codeIn:focus{border-color:#ff2a3c}

/* celular: áreas de toque maiores nos controles pequenos do player (o visual não muda) */
@media (pointer:coarse){
  .lnav button,.lvb,.lpb,#lvol{position:relative}
  .lnav button:before{content:"";position:absolute;inset:-46px -24px}
  .lvb:before,.lpb:before{content:"";position:absolute;inset:-8px -60px}   /* só na horizontal: mudo e pausa são vizinhos na vertical */
  .lnav{gap:30px}
}
body.pt #sfxToggle{padding:46px 40px;margin:-40px -34px}

/* ============ TV VHS ligando (primeira entrada no menu) ============
   o #tvFx fica DENTRO do #mlcd (recortado no formato do visor) e é girado junto com a inclinação da tela */
#tvFx{display:none;position:absolute;left:-23px;top:-44px;width:640px;height:420px;z-index:9;pointer-events:none;transform:rotate(-7.6deg);transform-origin:50% 50%}
#tvFx i{position:absolute;inset:0;display:block;opacity:0}
#menuPlate.tv-first #tvFx{display:block}
.tv-beam{background:linear-gradient(#fff,#dff6ff);box-shadow:0 0 26px 8px rgba(150,235,255,.85);transform-origin:50% 50%;animation:tvBeam 1.7s cubic-bezier(.3,.7,.3,1) 1.05s both}
.tv-noise{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;mix-blend-mode:screen;animation:tvNoise 1.7s steps(1,end) 1.05s both}
.tv-bar{inset:auto 0 auto 0!important;top:0;height:90px;background:linear-gradient(transparent,rgba(255,255,255,.16) 35%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.16) 65%,transparent);mix-blend-mode:screen;animation:tvBar 1.7s linear 1.05s both}
#menuPlate.tv-first .b8pill,#menuPlate.tv-first #chibi,#menuPlate.tv-first #ticker{animation:tvPic 1.7s steps(2,end) 1.05s both}
@keyframes tvBeam{0%{opacity:0;transform:scale(.01,.008)}4%{opacity:1;transform:scale(.01,.008)}14%{transform:scale(.04,.008)}32%{opacity:1;transform:scale(1,.008)}42%{opacity:.6;transform:scale(1,.008)}48%{opacity:1;transform:scale(1,.012)}68%{opacity:1;transform:scale(1,1);background:#e9fbff}82%{opacity:.4;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
@keyframes tvNoise{0%,36%{opacity:0}40%{opacity:.7;background-position:0 0}50%{opacity:.5;background-position:-37px 21px}60%{opacity:.6;background-position:23px -43px}72%{opacity:.35;background-position:-11px 52px}86%{opacity:.18;background-position:41px -9px}100%{opacity:0}}
@keyframes tvBar{0%,46%{opacity:0;transform:translateY(-100px)}50%{opacity:1;transform:translateY(-60px)}90%{opacity:1;transform:translateY(400px)}100%{opacity:0;transform:translateY(430px)}}
@keyframes tvPic{0%,66%{opacity:0}
  70%{opacity:.8;translate:-16px 0;filter:brightness(4) saturate(.2) drop-shadow(-5px 0 0 rgba(255,0,60,.9)) drop-shadow(5px 0 0 rgba(0,230,255,.9))}
  76%{opacity:.25;translate:11px 0}
  82%{opacity:1;translate:-7px 0;filter:brightness(2.2) drop-shadow(-3px 0 0 rgba(255,0,60,.8)) drop-shadow(3px 0 0 rgba(0,230,255,.8))}
  88%{opacity:.55;translate:6px 0}
  93%{opacity:1;translate:-3px 0;filter:brightness(1.5) drop-shadow(-2px 0 0 rgba(255,0,60,.6)) drop-shadow(2px 0 0 rgba(0,230,255,.6))}
  97%{translate:1px 0;filter:brightness(1.15) drop-shadow(-1px 0 0 rgba(255,0,60,.4)) drop-shadow(1px 0 0 rgba(0,230,255,.4))}
  100%{opacity:1;translate:0 0;filter:none}}
@media (prefers-reduced-motion:reduce){#tvFx{display:none!important}#menuPlate.tv-first .b8pill,#menuPlate.tv-first #chibi,#menuPlate.tv-first #ticker{animation:none}}

/* ============ player de música no celular em pé (body.pt): disco recolhido + painel ============
   O #lofi é desescalado com --inv (1 / escala do palco): as medidas abaixo são px reais e não variam com a tela.
   Recolhido: só um vinil girando no canto inferior esquerdo (não cobre botões das cenas). Toque: abre o painel. */
#lmini,#lclose,#lvlab{display:none}
body.pt #lofi{left:calc(var(--sx) + (14px + env(safe-area-inset-left,0px)) * var(--inv,1));right:auto;
  bottom:calc(var(--ey) + (14px + env(safe-area-inset-bottom,0px)) * var(--inv,1));
  align-items:flex-start;transform:scale(var(--inv,1));transform-origin:0 100%}
body.pt #wtask{bottom:calc(var(--ey) + (128px + env(safe-area-inset-bottom,0px)) * var(--inv,1))}   /* abas de janelas recolhidas ficam acima do disco */
/* recolhido: o resto fica transparente, mas visível para o navegador (iframe do YouTube escondido com visibility/display não toca no celular) */
body.pt #lofi:not(.pm-open) .llab,body.pt #lofi:not(.pm-open) .lrow{position:absolute;left:0;bottom:0;opacity:0;pointer-events:none}
body.pt #lmini{display:block;position:relative;width:clamp(76px,20vw,104px);height:clamp(76px,20vw,104px);padding:0;border-radius:50%;border:2px solid var(--lc);background:var(--ld);
  box-shadow:0 0 0 2px #000,0 0 18px color-mix(in srgb,var(--lc) 55%,transparent),3px 4px 0 #000;transition:transform .12s,box-shadow .2s}
body.pt #lmini:before{content:"";position:absolute;inset:-8px}   /* área de toque maior que o disco */
body.pt #lmini:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--lc);opacity:0;pointer-events:none;animation:pmPulse 2.4s ease-out 1s 3}
body.pt #lmini:active{transform:scale(.94)}
body.pt #lmini .vlabel{width:34%;height:34%;margin:0;top:33%;left:33%}
body.pt #lmini .vlabel:after{width:4px;height:4px;margin:-2px 0 0 -2px;box-shadow:0 0 0 1px #c9c9c9}
body.pt #lofi.pm-open #lmini{display:none}
@keyframes pmPulse{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.55)}}
@keyframes pmIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}   /* translate (não transform): preserva a escala do widget */
/* aberto: painel compacto em grade (capa + título/artista + controles + volume) */
body.pt #lofi.pm-open{display:grid;box-sizing:border-box;width:min(340px,calc(100vw - 28px));padding:12px;
  grid-template-columns:98px repeat(3,minmax(0,1fr)) 34px;column-gap:8px;row-gap:8px;align-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ld) 96%,#000),#050505);border:3px solid var(--lc);
  box-shadow:4px 4px 0 #000,0 0 26px color-mix(in srgb,var(--lc) 45%,transparent);animation:pmIn .26s steps(5) both}
body.pt #lofi.pm-open:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
body.pt #lofi.pm-open .llab,body.pt #lofi.pm-open .lhd,body.pt #lofi.pm-open .lnav,body.pt #lofi.pm-open .lrow,body.pt #lofi.pm-open .lcol{display:contents}
body.pt #lofi.pm-open #lLab{display:none}
body.pt #lofi.pm-open .lstack{grid-column:1;grid-row:1/4;width:98px;height:72px;transform:scale(.367);transform-origin:0 0}   /* mesma capa + vinil do desktop, reduzidos */
body.pt #lofi.pm-open #lTitle{grid-column:2/6;grid-row:1;font:600 16px/1.35 "Mono",monospace;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:0 .2em .15em 0}
body.pt #lofi.pm-open #lArtist{grid-column:2/6;grid-row:2;font-size:13px}
body.pt #lofi.pm-open .lnav button,body.pt #lofi.pm-open .lpb{width:100%;height:46px;margin:0;border:2px solid var(--lc);background:var(--ld);box-shadow:2px 2px 0 #000}
body.pt #lofi.pm-open #lprev{grid-column:2;grid-row:3}
body.pt #lofi.pm-open #lpause{grid-column:3;grid-row:3}
body.pt #lofi.pm-open #lnext{grid-column:4;grid-row:3}
body.pt #lofi.pm-open #lnum{grid-column:5;grid-row:3;font:500 14px "Mono",monospace;min-width:0}
body.pt #lofi.pm-open .lnav button:before,body.pt #lofi.pm-open .lvb:before,body.pt #lofi.pm-open .lpb:before{inset:-3px}   /* sem áreas de toque gigantes que se sobreponham */
body.pt #lofi.pm-open .lvol{grid-column:1/6;grid-row:4;width:auto;display:flex;flex-direction:row;align-items:center;gap:10px;background:none;border:0;box-shadow:none;overflow:visible}
body.pt #lofi.pm-open .lvb{order:-1;flex:none;width:46px;height:46px;border:2px solid var(--lc);background:var(--ld);box-shadow:2px 2px 0 #000}
body.pt #lofi.pm-open .lbars{flex:1;flex-direction:row;align-items:stretch;height:46px!important;padding:6px!important;gap:3px;overflow:visible;box-sizing:border-box;touch-action:none;cursor:pointer;
  background:#050505;border:2px solid color-mix(in srgb,var(--lc) 45%,#000);box-shadow:inset 0 0 12px rgba(0,0,0,.8),2px 2px 0 #000}   /* trilho: arraste o dedo para ajustar */
body.pt #lofi.pm-open .lbars button{flex:1;width:auto!important;height:auto;pointer-events:none;border-radius:1px;transition:background .08s,box-shadow .08s,transform .08s}
body.pt #lofi.pm-open .lbars button.on{box-shadow:0 0 10px color-mix(in srgb,var(--lc) 70%,transparent),inset 0 -6px 0 rgba(0,0,0,.18)}
body.pt #lofi.pm-open .lbars button.on:last-of-type{transform:none}
body.pt #lofi.pm-open .lvlab{display:block;flex:none;width:46px;text-align:right;font:500 14px "Mono",monospace;font-style:normal;color:#fff;text-shadow:2px 2px 0 #000}
body.pt #lofi.pm-open #lclose{display:grid;place-items:center;position:absolute;top:-17px;right:-9px;width:34px;height:34px;padding:0;z-index:3;
  font:700 16px/1 "Mono",monospace;color:#fff;background:var(--ld);border:2px solid var(--lc);box-shadow:2px 2px 0 #000}
body.pt #lofi.pm-open #lclose:before{content:"";position:absolute;inset:-6px}
@media (prefers-reduced-motion:reduce){body.pt #lmini:after,body.pt #lofi.pm-open{animation:none}}

/* ============ DESEMPENHO por nível do aparelho (js/perf.js marca o <html>) ============
   alto: tudo completo · medio (.fx-lite): troca efeitos caros por equivalentes leves · baixo (.fx-lite.fx-min): só o essencial
   O visual (layout, cenas, player, lofi, 8-bit, segredos) é o mesmo em todos os níveis. */

/* celular/tablet: fotos das cenas em WebP menor (assets/cenas/m/), em qualquer nível */
@media (pointer:coarse){
  .dvbg{background-image:url(../assets/cenas/m/direcao_tela_preta.webp?v=1)}
}

/* médio e baixo:
   - mesclas (mix-blend) de tela cheia viram transparência simples
   - animações infinitas discretas ficam paradas
   - desfoques trocados por cor sólida */
.fx-lite #grain{mix-blend-mode:normal;opacity:.045}
.fx-lite #vhs canvas,.fx-lite #vhs i{mix-blend-mode:normal}
.fx-lite .pfbg .floor{mix-blend-mode:normal;opacity:.85}
.fx-lite .vsheen{mix-blend-mode:normal}
.fx-lite .lcd-noise{animation:none}
.fx-lite #chibi:not(.mad) .chs{animation:none}
.fx-lite #menuPlate{animation:none}
/* a mão flutua com o próprio elemento (que tem a sombra): a sombra vai junto na GPU em vez de ser recalculada a cada quadro */
.fx-lite .hwrap{animation:none}
.fx-lite #pfHand{animation:flt2 5s ease-in-out infinite}
/* cartões vizinhos da Direção Visual: só transparência (o desfoque custa caro durante o deslize) */
.fx-lite .dv-slide.dv-pos-next,.fx-lite .dv-slide.dv-pos-far-right,.fx-lite .dv-slide.dv-pos-hidden-left{filter:none}
.fx-lite .dv-slide{will-change:transform,opacity}
.fx-lite #dvTrack.dv-enter .dv-slide{animation-name:dvInL}
@keyframes dvInL{from{opacity:0;translate:140px 0}}
.fx-lite #ytCover.dim{backdrop-filter:none;background:rgba(0,0,0,.9)}

/* baixo: só o essencial
   - sem grão de filme
   - TV ligando sem chiado SVG e com a imagem piscando só em transparência (sem brilho/sombra RGB animados)
   - mascote sem o glitch de cor periódico */
.fx-min #grain{display:none}
.fx-min .tv-noise,.fx-min .tv-bar{display:none}
.fx-min #menuPlate.tv-first .b8pill,.fx-min #menuPlate.tv-first #chibi,.fx-min #menuPlate.tv-first #ticker{animation-name:tvPicL}
@keyframes tvPicL{0%,66%{opacity:0}70%{opacity:.8}76%{opacity:.25}82%{opacity:1}88%{opacity:.55}93%,100%{opacity:1}}
.fx-min #menuPlate.tv-first .lcd-noise{animation:lcdNzIn 1.7s linear 1.05s both}
.fx-min .chw{animation:chBob 3.8s ease-in-out infinite}

/* overlay do glitch: só existe na GPU enquanto há transição (parado ele reservava as 2 maiores camadas da página: 2108x2042) */
.fx-lite #vhs:not(.on){display:none}

/* nível baixo: vídeo do lofi escondido de verdade (ver lyHide em app.js; volta sozinho se a música pausar) */
#lofi.vid-off #lYT{display:none}

/* ============ Direção Visual leve (médio e baixo) ============
   - sem o drop-shadow RGB nas artes (filtro caro, reprocessado a cada quadro do deslize); no médio entra uma borda RGB fixa e barata
   - sombras menores
   - no celular em pé só o card atual aparece: os outros 4 não animam tamanho nem ficam na GPU
   - entrada em cascata e texto "decodificando" simplificados */
.fx-lite .dv-slide img{filter:none}
@media (pointer:coarse){.fx-lite .dv-slide img{transform:none}}   /* toque: sem inclinação 3D (ela só existe com mouse) */
.fx-lite .dv-slide{box-shadow:0 10px 22px rgba(0,0,0,.5)}
.fx-lite .dv-slide.dv-pos-current{box-shadow:0 12px 28px rgba(0,0,0,.55)}
.fx-lite:not(.fx-min) .dv-slide.dv-pos-current{box-shadow:-2px 0 0 rgba(0,240,255,.42),2px 0 0 rgba(255,0,50,.48),0 12px 28px rgba(0,0,0,.55)}
.fx-lite .dvLeg{text-shadow:0 1px 5px rgba(0,0,0,.85)}
.fx-lite .dv-leg-title{text-shadow:-1px 0 rgba(0,240,255,.35),1px 0 rgba(255,0,50,.7)}
.fx-lite #dvTrack.dv-enter .dv-slide{animation-delay:0s}
.fx-min #dvTrack.dv-enter .dv-slide{animation:none}
.fx-min .dvLeg.dv-copy-in *{animation:none}
/* celular em pé: o tamanho do card só muda quando ele está invisível (some primeiro e depois encolhe; aparece já no tamanho final) */
.fx-lite body.pt .dv-slide{will-change:auto;visibility:hidden;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease,visibility 0s linear .6s,width 0s linear .6s,height 0s linear .6s,padding 0s linear .6s}
.fx-lite body.pt .dv-slide.dv-pos-current{will-change:transform,opacity;visibility:visible;
  transition:transform .9s cubic-bezier(.16,1,.3,1),translate .55s cubic-bezier(.16,1,.3,1),opacity .6s ease,visibility 0s,width 0s,height 0s,padding 0s}
.fx-lite body.pt #dvTrack.dv-dragging .dv-slide{transition:none}

/* ============ borda fina do MP3 e dos fones: acompanha a cor do widget do lofi (--edge-c, definida em js/app.js) ============ */
:root{--edge-c:#e3101c}
.dedge{position:absolute;inset:0;pointer-events:none;background-color:var(--edge-c);opacity:.9;transition:background-color .9s;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:screen}
.dedge-menu{-webkit-mask-image:url(../assets/cenas/edge_menu.png?v=3);mask-image:url(../assets/cenas/edge_menu.png?v=3)}
.dedge-ld{-webkit-mask-image:url(../assets/cenas/edge_loading.png?v=3);mask-image:url(../assets/cenas/edge_loading.png?v=3)}
body.rgb .dedge{transition:none}

/* fundo escolhido pelo visitante (Edit): a imagem fica sob uma película escura + a grade, então o texto continua legível e o visual do painel se mantém */
.nbody.hasbg{background-image:linear-gradient(color-mix(in srgb,var(--txt-grid) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--txt-grid) 45%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--txt-background) 62%,transparent),color-mix(in srgb,var(--txt-background) 62%,transparent)),var(--nbg);
  background-size:28px 28px,28px 28px,100% 100%,cover;background-position:0 0,0 0,0 0,center;background-attachment:local,local,local,local}
.nmenu{position:relative}
.nedmenu{position:absolute;left:44px;top:100%;z-index:6;display:flex;flex-direction:column;min-width:170px;background:#e8e4dc;border:2px solid #fff;box-shadow:3px 3px 0 #000}
.nedmenu button{font:inherit;color:#1a1a1a;background:none;border:0;text-align:left;padding:6px 12px;cursor:pointer;white-space:nowrap}
.nedmenu button:hover{background:#c8083a;color:#fff}