*{box-sizing:border-box}
:root{
  --silver:#d9dadd;--silver2:#bfc1c6;--silver3:#f5f5f6;--ink:#25262a;
  --pink:#e0e3e9;--pink2:#f2f3f6;--line:rgba(38,39,43,.22);
  --glass:rgba(255,255,255,.62);--shadow:rgba(19,19,24,.3);
}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--ink);background:
radial-gradient(circle at 20% 10%,#fff 0 5%,transparent 26%),
radial-gradient(circle at 85% 85%,#e9eaed 0 3%,transparent 25%),
linear-gradient(135deg,#e9e9eb,#c9cbd0 48%,#f3f3f4)}
body{min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:
linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.38) 47%,transparent 49%),
radial-gradient(circle at 50% 20%,rgba(255,255,255,.65),transparent 40%);pointer-events:none}
.grain{position:fixed;inset:0;opacity:.11;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
.stars:before,.stars:after{content:"✦  ˚  ✧  ·  ✦  ˚  ⟡  ·  ✧";position:fixed;inset:7% 4%;font-size:18px;letter-spacing:70px;line-height:130px;color:rgba(255,255,255,.7);pointer-events:none;transform:rotate(-5deg)}
.stage{min-height:100vh;display:grid;place-items:center;padding:42px 18px 25px}
.psp{position:relative;width:min(920px,96vw);min-height:640px;border-radius:34px 34px 48px 48px;padding:26px 46px 28px;background:linear-gradient(145deg,#f5f5f6 0%,#c8c9cd 26%,#e5e6e8 55%,#b5b7bc 100%);border:1px solid rgba(255,255,255,.8);box-shadow:0 34px 80px var(--shadow),inset 0 1px 0 #fff,inset 0 -12px 30px rgba(60,61,67,.1);overflow:hidden}
.psp:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),inset 0 0 70px rgba(255,255,255,.2);pointer-events:none}
.shine{position:absolute;top:-50%;left:-20%;width:55%;height:150%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(12deg);pointer-events:none}
.psp-top{display:flex;justify-content:space-between;align-items:center;padding:0 9px 12px;color:#67686d;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em}
.brand{font-weight:700;font-size:17px;letter-spacing:-.04em}
.model{opacity:.72}
.screen-bezel{padding:16px 18px 19px;border-radius:22px;background:linear-gradient(145deg,#292a2f,#0d0e11);box-shadow:inset 0 3px 4px rgba(255,255,255,.09),0 5px 12px rgba(0,0,0,.3)}
.screen{position:relative;aspect-ratio:16/10;min-height:510px;border-radius:9px;overflow:hidden;background:#17151a;box-shadow:inset 0 0 30px #000}
.screen:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 50%,rgba(0,0,0,.035) 50%);background-size:100% 4px;z-index:5;pointer-events:none}
.screen-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(234,237,243,.17),transparent 55%),linear-gradient(130deg,rgba(255,255,255,.05),transparent 50%);pointer-events:none}
.boot,.home{position:absolute;inset:0}
.boot{display:grid;place-content:center;text-align:center;color:#f0f1f4;background:radial-gradient(circle at 50% 45%,rgba(221,221,221,.16),transparent 42%),#17151a}
.boot-mark{font-size:46px;text-shadow:0 0 20px rgba(255,255,255,.55);animation:float 2.5s ease-in-out infinite}
.boot-title{font-family:"Space Mono",monospace;font-size:clamp(24px,4vw,43px);letter-spacing:-.05em;margin-top:8px}
.boot-sub{font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.65;margin:9px 0 28px}
.start{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:12px 25px;font:700 11px "Space Mono",monospace;letter-spacing:.18em;cursor:pointer;transition:.2s}
.start:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.boot-hint{font-size:9px;opacity:.35;margin-top:12px}
.home{padding:25px 29px 18px;color:#2d2d33;background:linear-gradient(145deg,rgba(242,243,245,.95),rgba(221,217,224,.92))}
.profile-head{display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}
.mini-avatar{width:62px;height:62px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#fff,#b8b9be);box-shadow:0 4px 14px rgba(0,0,0,.17)}
.mini-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(.85) contrast(1.08)}
.eyebrow,.tiny{font:700 8px "Space Mono",monospace;letter-spacing:.19em;opacity:.55}
h1{font-size:24px;margin:2px 0 1px;letter-spacing:-.06em}
.profile-head p{font-size:10px;margin:0;opacity:.55}
.menu{display:flex;gap:8px;margin:13px 0 15px;flex-wrap:wrap}
.menu-item{font:700 9px "Space Mono",monospace;color:#4d4c52;background:rgba(255,255,255,.46);border:1px solid rgba(60,60,70,.13);border-radius:999px;padding:8px 12px;cursor:pointer;transition:.2s}
.menu-item:hover,.menu-item.active{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.09);transform:translateY(-1px)}
.panel{display:none;min-height:265px}.active-panel{display:block;animation:fade .25s ease}
.hero-card{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:center}
.image-wrap{position:relative;height:265px;border-radius:15px;overflow:hidden;background:#111;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.75) contrast(1.08) brightness(.82)}
.image-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 35%,rgba(16,19,24,.22));pointer-events:none}
.image-label{position:absolute;z-index:2;bottom:10px;left:10px;padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;font:8px "Space Mono",monospace;letter-spacing:.12em}
.hero-copy h2{font-size:34px;line-height:.95;margin:8px 0 9px;letter-spacing:-.07em}
.hero-copy p{font-size:12px;line-height:1.6;max-width:270px;opacity:.68}
.status{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.42);font:9px "Space Mono",monospace}
.status span{width:6px;height:6px;border-radius:50%;background:#959595;box-shadow:0 0 7px #959595}
.panel-title{font:700 10px "Space Mono",monospace;letter-spacing:.16em;margin-bottom:11px;opacity:.65}
.link-card{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;text-decoration:none;color:inherit;padding:14px 15px;margin:8px 0;border:1px solid var(--line);background:rgba(255,255,255,.46);border-radius:13px;transition:.2s}
.link-card:hover{background:#fff;transform:translateX(4px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.link-card span{font-size:18px}.link-card strong{font-size:12px}.link-card small{font:9px "Space Mono",monospace;opacity:.55}
.about-box{border:1px solid var(--line);border-radius:13px;padding:15px;background:rgba(255,255,255,.35);font:10px "Space Mono",monospace;line-height:2}
.code-line span{display:inline-block;width:25px;opacity:.35}.code-line b{font-weight:700}
.music-card{display:flex;align-items:center;gap:15px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.42)}
.album{width:95px;height:95px;border-radius:11px;overflow:hidden;position:relative;flex:none}
.album img{width:100%;height:100%;object-fit:cover;filter:grayscale(.8)}
.play-ring{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;color:#fff;text-shadow:0 2px 8px #000;background:rgba(0,0,0,.14)}
.music-card h2{font-size:24px;margin:4px 0}.music-card p{font-size:10px;opacity:.55}.spotify{font:700 8px "Space Mono",monospace;color:#4e4d52;text-decoration:none}
.spotify:hover{text-decoration:underline}
.spotify-player{margin-top:10px;border-radius:12px}
.music-note{font-size:8px;opacity:.5;margin:7px 2px}
.screen-footer{display:flex;justify-content:space-between;gap:10px;margin-top:13px;padding-top:9px;border-top:1px solid var(--line);font:8px "Space Mono",monospace;opacity:.5}
.controls{height:92px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 42px}
.dpad{position:relative;width:72px;height:72px;color:#5d5e63;text-shadow:0 1px 0 #fff;font-size:12px}
.dpad span,.dpad button{position:absolute;width:27px;height:27px;display:grid;place-items:center;background:linear-gradient(145deg,#dfe0e2,#aaaeb4);border:1px solid #a3a5a9;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.dpad .up{left:23px;top:0;border-radius:6px 6px 2px 2px}.dpad .down{left:23px;bottom:0;border-radius:2px 2px 6px 6px}.dpad .left{left:0;top:23px;border-radius:6px 2px 2px 6px}.dpad .right{right:0;top:23px;border-radius:2px 6px 6px 2px}.dpad .center{left:23px;top:23px;border:0;box-shadow:none;background:#b7b9be}
.home-button{position:absolute;left:50%;transform:translateX(-50%);bottom:19px;font:700 8px "Space Mono",monospace;color:#777;letter-spacing:.1em}
.speaker{display:flex;gap:4px;position:absolute;right:164px;bottom:14px}.speaker i{width:3px;height:12px;border-radius:5px;background:#92949a}
.face-buttons{width:78px;height:78px;position:relative;font:700 14px Arial;color:#65666b}
.face-buttons span,.face-buttons button{position:absolute;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#e5e6e8,#b5b7bc);box-shadow:0 2px 4px rgba(0,0,0,.2);border:1px solid #aaa}
.face-buttons button:nth-child(1){left:26px;top:0}.face-buttons button:nth-child(2){right:0;top:26px}.face-buttons button:nth-child(3){left:26px;bottom:0}.face-buttons button:nth-child(4){left:0;top:26px}
.psp-bottom{display:flex;justify-content:center;gap:30px;color:#73747a;font:7px "Space Mono",monospace;letter-spacing:.12em}
.caption{width:min(920px,96vw);display:flex;justify-content:space-between;margin-top:14px;padding:0 7px;color:#6f7075;font:8px "Space Mono",monospace;opacity:.7}
.hidden{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-5px)}}
@media(max-width:700px){
  .stage{padding:16px 7px}.psp{padding:18px 14px 20px;border-radius:25px;min-height:auto}.screen-bezel{padding:8px}.screen{min-height:560px;aspect-ratio:auto}.home{padding:18px 15px}.hero-card{grid-template-columns:1fr}.image-wrap{height:185px}.hero-copy h2{font-size:28px}.controls{padding:0 12px}.speaker{right:90px}.caption{font-size:6px;gap:8px}.psp-top{padding:0 4px 9px}.model{display:none}.screen-footer{font-size:6px}.music-card{align-items:flex-start}.album{width:78px;height:78px}}

/* ===== 3D ===== */
:root{--d:60px;--focus:50% 12%}
.scene{perspective:2000px;width:min(1120px,96vw);touch-action:none;cursor:grab;user-select:none}
.scene.dragging{cursor:grabbing}
.rig{position:relative;transform-style:preserve-3d;will-change:transform}
.rig .psp{width:100%;transform:translateZ(calc(var(--d)/2));backface-visibility:hidden}
.face.back{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(calc(var(--d)/-2)) rotateY(180deg);backface-visibility:hidden;background:linear-gradient(145deg,#2c2d31,#0b0b0d);display:grid;place-items:center;font:700 14px "Space Mono",monospace;letter-spacing:.3em;color:rgba(255,255,255,.35)}
.face.back:before{content:"";position:absolute;width:62%;height:68%;border-radius:26px;background:linear-gradient(145deg,#8f9197,#4a4b50);box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.face.back span{position:relative}
.edge{position:absolute;background:linear-gradient(90deg,#17181b,#55565c 50%,#17181b)}
.e-top,.e-bottom{left:90px;right:90px;height:var(--d)}
.e-top{top:0;transform-origin:top;transform:translateZ(calc(var(--d)/2)) rotateX(-90deg)}
.e-bottom{bottom:0;transform-origin:bottom;transform:translateZ(calc(var(--d)/2)) rotateX(90deg)}
.e-left,.e-right{top:70px;bottom:90px;width:var(--d);background:linear-gradient(180deg,#17181b,#55565c 50%,#17181b)}
.e-left{left:0;transform-origin:left;transform:translateZ(calc(var(--d)/2)) rotateY(90deg)}
.e-right{right:0;transform-origin:right;transform:translateZ(calc(var(--d)/2)) rotateY(-90deg)}
.floor{height:30px;margin:30px auto 0;width:70%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,20,26,.4),transparent 70%);filter:blur(7px)}
.drag-hint{position:fixed;left:0;right:0;bottom:10px;text-align:center;font:9px "Space Mono",monospace;letter-spacing:.14em;color:#6f7075;opacity:.7;pointer-events:none;transition:opacity .6s}
.drag-hint.gone{opacity:0}

/* ===== carcaça do PSP (preto brilhante) ===== */
.psp{--r:80px 80px 110px 110px/70px 70px 120px 120px;border-radius:var(--r);overflow:hidden;border:1px solid #3b3c42;color:#aeb1b8;
  background:linear-gradient(180deg,#34353a 0%,#17181b 14%,#0b0b0d 55%,#141518 100%);
  box-shadow:0 40px 90px rgba(10,10,16,.55),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -14px 30px rgba(255,255,255,.04);
  display:grid;grid-template-columns:170px minmax(0,1fr) 170px;grid-template-areas:"top top top" "left screen right" ". bottom .";align-items:center;min-height:0;padding:20px 34px 22px}
.psp:after{border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),inset 0 0 60px rgba(255,255,255,.04)}
.shine{top:-60%;left:-10%;width:45%;height:150%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(14deg)}
.cap{position:absolute;top:0;width:150px;height:26px;background:linear-gradient(180deg,#d9dade,#8a8c92);z-index:2}
.cap.l{left:0;border-radius:0 0 40px 0}.cap.r{right:0;border-radius:0 0 0 40px}
.psp-top{grid-area:top;display:flex;justify-content:space-between;align-items:center;padding:18px 90px 6px;color:#d7d9de}
.brand{font:700 18px Arial,sans-serif;letter-spacing:.14em;color:#e4e6ea}
.led{width:6px;height:6px;border-radius:50%;background:#2a2b2f;box-shadow:0 0 0 1px #3a3b40}
.screen-bezel{grid-area:screen;padding:14px 16px;border-radius:14px;background:linear-gradient(145deg,#16171b,#050506);box-shadow:inset 0 0 0 1px #2e2f35,inset 0 2px 5px rgba(255,255,255,.07),0 2px 10px #000}
.screen{aspect-ratio:16/9;min-height:0;border-radius:6px}
.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 38%);pointer-events:none;z-index:6}
.home{padding:12px 20px 8px;overflow:auto;scrollbar-width:none}.home::-webkit-scrollbar{display:none}
.profile-head{padding-bottom:9px}.mini-avatar{width:52px;height:52px}.menu{margin:9px 0 10px}
.panel{min-height:0}.hero-card{grid-template-columns:34% 1fr;gap:16px}
.image-wrap{height:168px}.image-wrap img,.mini-avatar img,.album img{object-position:var(--focus)}
.hero-copy h2{font-size:30px;margin:4px 0 6px}.hero-copy p{margin:0}
.screen-footer{margin-top:8px;padding-top:6px}
.side{display:flex;flex-direction:column;align-items:center;gap:18px}.side.left{grid-area:left}.side.right{grid-area:right}
.controls{display:contents}

/* D-pad */
.dpad{width:124px;height:124px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#3b3c41,#0d0d10 72%);box-shadow:inset 0 2px 3px rgba(255,255,255,.12),0 4px 10px #000;text-shadow:none;font-size:13px}
.dpad button,.dpad .center{position:absolute;width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#2c2d32,#0f1012);border:1px solid #3e3f45;color:#c9ccd2;box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1)}
.dpad .up{left:42px;top:6px}.dpad .down{left:42px;bottom:6px;top:auto}.dpad .left{left:6px;top:42px}.dpad .right{right:6px;left:auto;top:42px}
.dpad .center{left:42px;top:42px;border:0;box-shadow:none;background:#141518;display:block}
.nub{width:58px;height:58px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 1px,transparent 1px 4px),radial-gradient(circle at 35% 30%,#6d6e74,#2a2b2f 60%,#121316);box-shadow:0 0 0 5px #0b0b0d,0 0 0 6px #2c2d32,0 5px 10px #000}

/* botões de ação */
.face-buttons{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#0e0f11 55%,#1b1c20);box-shadow:inset 0 0 0 1px #2c2d32,inset 0 0 18px #000;color:#d5d8de;font:400 21px Arial,sans-serif}
.face-buttons button{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#34353a,#0e0e11);border:1px solid #46474d;box-shadow:0 3px 6px #000,inset 0 1px 0 rgba(255,255,255,.12);color:#d5d8de}
.face-buttons button:nth-child(1){left:49px;top:7px;right:auto;bottom:auto}
.face-buttons button:nth-child(2){left:auto;right:7px;top:49px}
.face-buttons button:nth-child(3){left:49px;top:auto;bottom:7px}
.face-buttons button:nth-child(4){left:7px;top:49px}
.pw{display:flex;gap:14px;align-items:center;font:700 9px "Space Mono",monospace;letter-spacing:.1em;color:#8d9097}
.pw button{color:#8d9097}

/* linha de baixo (HOME, VOL, PSP, SELECT, START) */
.psp-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:center;gap:12px;padding-top:12px;flex-wrap:wrap}
.psp-bottom button{font:700 9px "Space Mono",monospace;letter-spacing:.1em;color:#aeb1b8;background:linear-gradient(#27282c,#101113);border:1px solid #3a3b41;border-radius:999px;padding:7px 13px;box-shadow:0 2px 4px #000,inset 0 1px 0 rgba(255,255,255,.08)}
.vol{display:flex;align-items:center;gap:6px;color:#8d9097;font:700 9px "Space Mono",monospace}.vol em{font-style:normal}
.vol button{padding:5px 10px}
.psp-bottom .round{padding:7px 10px;font-size:12px}
.wordmark{font:700 32px Arial,sans-serif;letter-spacing:.1em;color:transparent;-webkit-text-stroke:1px #8d9097;margin:0 6px}

/* botões reais + brilho */
.dpad button,.face-buttons button,.psp-bottom button,.pw button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,filter .25s,transform .1s}
.pw button{background:none;border:0;padding:4px 6px;font:700 9px "Space Mono",monospace;letter-spacing:.1em;border-radius:6px}
.dpad button:active,.face-buttons button:active,.psp-bottom button:active{transform:translateY(1px) scale(.96)}
.lit{filter:brightness(1.25)}
.dpad .lit{box-shadow:0 0 0 2px #dedede,0 0 22px 8px rgba(179,179,179,.9)!important;color:#fff}
.face-buttons button[data-k=tri].lit{box-shadow:0 0 0 2px #dcdcdc,0 0 24px 9px rgba(165,165,165,.9)!important;color:#cfcfcf}
.face-buttons button[data-k=cir].lit{box-shadow:0 0 0 2px #d5d5d5,0 0 24px 9px rgba(129,129,129,.9)!important;color:#b0b0b0}
.face-buttons button[data-k=x].lit{box-shadow:0 0 0 2px #d4d4d4,0 0 24px 9px rgba(121,121,121,.9)!important;color:#b7b7b7}
.face-buttons button[data-k=sq].lit{box-shadow:0 0 0 2px #e1e1e1,0 0 24px 9px rgba(156,156,156,.9)!important;color:#bfbfbf}
.psp-bottom .lit,.pw .lit{color:#fff;background:rgba(161,161,161,.9);box-shadow:0 0 18px 6px rgba(179,179,179,.8)}
.player{display:flex;align-items:center;gap:12px;margin-top:12px}
.play-btn{font:700 9px "Space Mono",monospace;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer}
#vol{flex:1;max-width:180px;accent-color:#797979}

/* telas menores: controles embaixo */
@media(max-width:899px){
  .psp{--r:50px 50px 70px 70px;grid-template-columns:1fr 1fr;grid-template-areas:"top top" "screen screen" "left right" "bottom bottom";row-gap:16px;padding:14px 14px 20px}
  .psp-top{padding:16px 40px 2px}.cap{width:90px}
  .screen{aspect-ratio:auto;min-height:540px}.hero-card{grid-template-columns:1fr}.image-wrap{height:190px}
  .e-top,.e-bottom{left:60px;right:60px}.e-left,.e-right{top:50px;bottom:60px}
  .wordmark{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== v4: fundo, volume do PSP, botões espaçados ===== */
:root{--d:76px}
html,body{background:#16161a}
body:before{opacity:.35}
.stars{display:none}
.bg{position:fixed;inset:0;z-index:-2;background:url(assets/bg.gif) center/cover no-repeat;filter:brightness(.45) saturate(.9)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.caption,.drag-hint{color:#d3d4dc}
.scene{width:min(1160px,96vw)}
.psp{--r:72px 72px 104px 104px/64px 64px 104px 104px;grid-template-columns:190px minmax(0,1fr) 190px}
.edge{display:none}
.slice{position:absolute;pointer-events:none}
.face.back{border-radius:var(--r)}
/* D-pad e botões com mais espaço */
.dpad{width:152px;height:152px}
.dpad button,.dpad .center{width:42px;height:42px}
.dpad .up{left:55px;top:5px}.dpad .down{left:55px;bottom:5px;top:auto}.dpad .left{left:5px;top:55px}.dpad .right{right:5px;left:auto;top:55px}
.dpad .center{left:55px;top:55px}
.face-buttons{width:164px;height:164px}
.face-buttons button{width:44px;height:44px}
.face-buttons button:nth-child(1){left:60px;top:6px}
.face-buttons button:nth-child(2){right:6px;top:60px}
.face-buttons button:nth-child(3){left:60px;bottom:6px}
.face-buttons button:nth-child(4){left:6px;top:60px}
.lit{z-index:6}
.dpad .lit{box-shadow:0 0 0 2px #dedede,0 0 14px 4px rgba(179,179,179,.9)!important}
.face-buttons button.lit{filter:brightness(1.3)}
.face-buttons button[data-k=tri].lit{box-shadow:0 0 0 2px #dcdcdc,0 0 16px 5px rgba(165,165,165,.9)!important}
.face-buttons button[data-k=cir].lit{box-shadow:0 0 0 2px #d5d5d5,0 0 16px 5px rgba(129,129,129,.9)!important}
.face-buttons button[data-k=x].lit{box-shadow:0 0 0 2px #d4d4d4,0 0 16px 5px rgba(121,121,121,.9)!important}
.face-buttons button[data-k=sq].lit{box-shadow:0 0 0 2px #e1e1e1,0 0 16px 5px rgba(156,156,156,.9)!important}
/* item selecionado na tela */
.link-card:focus,.link-card:focus-visible,.play-btn:focus-visible,.menu-item:focus-visible{outline:2px solid #797979;outline-offset:2px;background:#fff;transform:translateX(4px)}
.menu-item:focus-visible{transform:none}

/* ===== v5: PSP-1000 modelado, fundo cinza com a garota anjo ===== */
:root{--d:112px;--poly:polygon(20.00% 0.00%,19.25% 0.30%,18.21% 0.70%,16.97% 1.18%,15.64% 1.71%,14.30% 2.29%,13.06% 2.89%,12.00% 3.50%,11.11% 4.11%,10.31% 4.75%,9.56% 5.41%,8.87% 6.10%,8.22% 6.85%,7.60% 7.64%,7.00% 8.50%,6.42% 9.40%,5.88% 10.33%,5.38% 11.30%,4.90% 12.34%,4.45% 13.46%,4.02% 14.67%,3.60% 16.00%,3.19% 17.46%,2.81% 19.04%,2.44% 20.72%,2.09% 22.48%,1.77% 24.29%,1.47% 26.14%,1.20% 28.00%,0.96% 29.88%,0.73% 31.80%,0.54% 33.76%,0.37% 35.76%,0.22% 37.80%,0.10% 39.88%,0.00% 42.00%,0.00% 44.22%,0.00% 46.54%,0.00% 48.93%,0.00% 51.32%,0.00% 53.66%,0.00% 55.91%,0.00% 58.00%,0.08% 59.94%,0.17% 61.78%,0.29% 63.53%,0.42% 65.21%,0.58% 66.83%,0.77% 68.43%,1.00% 70.00%,1.25% 71.54%,1.53% 73.03%,1.84% 74.48%,2.18% 75.89%,2.55% 77.27%,2.96% 78.64%,3.40% 80.00%,3.88% 81.37%,4.38% 82.74%,4.91% 84.10%,5.49% 85.42%,6.10% 86.69%,6.77% 87.89%,7.50% 89.00%,8.26% 90.01%,9.05% 90.95%,9.88% 91.82%,10.77% 92.63%,11.74% 93.39%,12.81% 94.11%,14.00% 94.80%,15.30% 95.46%,16.70% 96.07%,18.19% 96.65%,19.77% 97.18%,21.43% 97.66%,23.18% 98.11%,25.00% 98.50%,26.98% 98.84%,29.14% 99.13%,31.41% 99.38%,33.71% 99.58%,35.96% 99.74%,38.08% 99.88%,40.00% 100.00%,41.78% 100.08%,43.51% 100.11%,45.16% 100.10%,46.68% 100.08%,48.02% 100.04%,49.14% 100.01%,50.00% 100.00%,50.86% 100.01%,51.98% 100.04%,53.32% 100.08%,54.84% 100.10%,56.49% 100.11%,58.22% 100.08%,60.00% 100.00%,61.92% 99.88%,64.04% 99.74%,66.29% 99.58%,68.59% 99.38%,70.86% 99.13%,73.02% 98.84%,75.00% 98.50%,76.82% 98.11%,78.57% 97.66%,80.23% 97.18%,81.81% 96.65%,83.30% 96.07%,84.70% 95.46%,86.00% 94.80%,87.19% 94.11%,88.26% 93.39%,89.23% 92.63%,90.12% 91.82%,90.95% 90.95%,91.74% 90.01%,92.50% 89.00%,93.23% 87.89%,93.90% 86.69%,94.51% 85.42%,95.09% 84.10%,95.62% 82.74%,96.12% 81.37%,96.60% 80.00%,97.04% 78.64%,97.45% 77.27%,97.82% 75.89%,98.16% 74.48%,98.47% 73.03%,98.75% 71.54%,99.00% 70.00%,99.23% 68.43%,99.42% 66.83%,99.58% 65.21%,99.71% 63.53%,99.83% 61.78%,99.92% 59.94%,100.00% 58.00%,100.06% 55.91%,100.11% 53.66%,100.13% 51.32%,100.14% 48.93%,100.12% 46.54%,100.07% 44.22%,100.00% 42.00%,99.90% 39.88%,99.78% 37.80%,99.63% 35.76%,99.46% 33.76%,99.27% 31.80%,99.04% 29.88%,98.80% 28.00%,98.53% 26.14%,98.23% 24.29%,97.91% 22.48%,97.56% 20.72%,97.19% 19.04%,96.81% 17.46%,96.40% 16.00%,95.98% 14.67%,95.55% 13.46%,95.10% 12.34%,94.62% 11.30%,94.12% 10.33%,93.58% 9.40%,93.00% 8.50%,92.40% 7.64%,91.78% 6.85%,91.13% 6.10%,90.44% 5.41%,89.69% 4.75%,88.89% 4.11%,88.00% 3.50%,86.94% 2.89%,85.70% 2.29%,84.36% 1.71%,83.03% 1.18%,81.79% 0.70%,80.75% 0.30%,80.00% 0.00%)}
.psp,.slice,.face.back{clip-path:var(--poly)}
.rig .psp{transform:translateZ(calc(var(--d)/2)) scale(.986)}
.psp-top{padding:26px 150px 4px}
.cap{width:78px;height:13px;top:2.2%;border-radius:8px;background:linear-gradient(180deg,#e6e7ea,#8b8d93)}
.cap.l{left:10.5%;transform:rotate(-30deg)}.cap.r{right:10.5%;left:auto;transform:rotate(30deg)}
.bg{background:url(assets/bg.jpg?v=4) 50% 15%/cover no-repeat;filter:grayscale(1) brightness(.42) contrast(1.05);transform-origin:50% 30%;animation:drift 45s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,1%)}}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(0,0,0,.6))}
/* parte de trás (baseada na foto do PSP-1000) */
.face.back{display:block;transform:translateZ(calc(var(--d)/-2)) rotateY(180deg) scale(.986);background:#18181b radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/3px 3px;font:inherit;color:#9b9ea6;letter-spacing:0}
.face.back:before{content:none}
.face.back>*{position:absolute}
.b-sony{left:19%;top:1.6%;font:700 15px Arial,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.22)}
.b-batt{left:0;top:6%;bottom:7%;width:28%;background:linear-gradient(90deg,#1c1c1f,#222226);border-right:2px solid #050506;box-shadow:inset 0 -14px 20px rgba(255,255,255,.04)}
.push{position:absolute;left:5%;top:30%;width:10%;height:22%;border-radius:10px;background:#101012;box-shadow:inset 0 0 0 1px #34343a;writing-mode:vertical-rl;transform:rotate(180deg);font:700 9px Arial;letter-spacing:.2em;color:#777;display:grid;place-items:center;font-style:normal}
.b-umd{left:28%;width:44%;top:0;bottom:7%;background:linear-gradient(180deg,#1f1f22,#131315);border-inline:2px solid #050506}
.umd{position:absolute;right:6%;top:3%;font:500 18px Arial;letter-spacing:.06em;color:#b9bcc2}
.ring{position:absolute;left:50%;top:45%;height:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 25deg,#f1f2f4,#8f9197,#dcdde0,#7a7c82,#e8e9eb,#9a9ca2,#f1f2f4);box-shadow:0 2px 8px #000}
.ring:before{content:"";position:absolute;inset:14%;border-radius:50%;background:#121214;box-shadow:inset 0 2px 6px #000}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:300 clamp(18px,4.4vw,56px) Arial;letter-spacing:.12em;color:transparent;-webkit-text-stroke:1px #c9cbd0}
.b-mg{right:0;top:6%;bottom:7%;width:28%;background:linear-gradient(270deg,#1c1c1f,#222226);border-left:2px solid #050506}
.b-mg span{position:absolute;right:3%;top:36%;font:700 10px Arial;letter-spacing:.14em;color:#6b6d73}
.notch{position:absolute;right:2%;bottom:6%;width:22%;height:30%;background:#101012;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
.b-strip{left:5%;right:5%;bottom:0;height:7%;background:linear-gradient(180deg,#e9eaec,#9a9ca2);border-radius:0 0 30px 30px}
.label{position:absolute;left:33%;width:34%;top:22%;height:50%;background:repeating-linear-gradient(90deg,#222 0 1px,transparent 1px 3px),#efefef;border-radius:3px;opacity:.9}
@media(max-width:899px){:root{--poly:inset(0 round 50px)}.psp-top{padding:16px 40px 2px}.cap{display:none}}

/* ===== v6: gatilhos (L/R) em 3D e iluminação com fonte de luz ===== */
:root{--lx:30%;--ly:14%;--lf:1;--la:315deg;--sx:-3px;--sy:5px}
.cap{display:none}
/* luz: queda de intensidade a partir da lâmpada, não um brilho fixo */
.shine{inset:0;top:0;left:0;width:auto;height:auto;transform:none;z-index:3;
  background:radial-gradient(ellipse 70% 120% at var(--lx) var(--ly),rgba(249,249,249,calc(.2*var(--lf))),transparent 65%),
             radial-gradient(ellipse 130% 150% at var(--lx) var(--ly),transparent 35%,rgba(0,0,0,.55) 100%)}
/* laterais: cada ponto do contorno recebe luz conforme a direção em que aponta */
.slice:after{content:"";position:absolute;inset:0;background:conic-gradient(from var(--la),rgba(246,246,246,.6),transparent 70deg,rgba(0,0,0,.6) 190deg,transparent 290deg,rgba(246,246,246,.6))}
/* sombras dos relevos seguem a luz */
.side,.psp-bottom,.screen-bezel{filter:drop-shadow(var(--sx) var(--sy) 5px rgba(0,0,0,.6))}
.floor{transform:translateX(var(--fx,0px))}
/* gatilhos */
.trig{position:absolute;top:-2%;width:18%;height:36px;transform-style:preserve-3d;pointer-events:none}
.trig.l{left:5.5%;transform:rotate(-20deg)}.trig.r{right:5.5%;transform:rotate(20deg)}
.trig i{position:absolute;inset:0;border-radius:24px 24px 8px 8px;font-style:normal}
.trig i.front{display:grid;place-items:center;font:700 12px "Space Mono",monospace;color:#a2a5ac;border-top:2px solid #e2e3e7}
.lamp{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 45% 55% at 18% 8%,rgba(246,246,246,.16),transparent 70%)}

/* ===== v7: desempenho ao girar ===== */
.side,.psp-bottom,.screen-bezel{filter:none}
.shine{inset:-50%;width:auto;height:auto;transform:none;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(249,249,249,.2),transparent 32%),radial-gradient(circle,transparent 26%,rgba(0,0,0,.5) 62%)}
.slice:after{background:conic-gradient(from 315deg,rgba(246,246,246,.6),transparent 70deg,rgba(0,0,0,.6) 190deg,transparent 290deg,rgba(246,246,246,.6))}
.bg{background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),url(assets/bg.jpg?v=4) 50% 15%/cover no-repeat;filter:none;will-change:transform}
body.moving .bg{animation-play-state:paused}
.rig{will-change:transform}

/* ===== v8: Vita 3D ===== */
html,body{height:100%;overflow:hidden}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.dragging{cursor:grabbing}
#vscreen{position:fixed;left:0;top:0;width:960px;height:544px;transform-origin:0 0;overflow:hidden;background:#17151a;opacity:0;pointer-events:none;will-change:transform,opacity;font-size:16px}
#vscreen.on{pointer-events:auto}
#vscreen:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 50%,rgba(0,0,0,.035) 50%);background-size:100% 4px;z-index:5;pointer-events:none}
#vscreen .home{padding:22px 34px 12px;overflow:auto;scrollbar-width:none}
#vscreen .home::-webkit-scrollbar{display:none}
#vscreen .profile-head{padding-bottom:12px}#vscreen .menu{margin:12px 0 14px}
#vscreen .hero-card{grid-template-columns:36% 1fr;gap:24px}
#vscreen .image-wrap{height:236px}
#vscreen .hero-copy h2{font-size:38px}#vscreen .hero-copy p{font-size:14px;max-width:320px}
#vscreen .screen-footer{font-size:9px;margin-top:10px}
#vscreen .album{width:104px;height:104px}#vscreen .music-card{align-items:center}
.drag-hint{color:#d3d4dc}

#vstatus{position:fixed;left:12px;top:12px;max-width:min(560px,90vw);font:11px/1.5 "Space Mono",monospace;color:#dadada;background:rgba(0,0,0,.6);padding:9px 12px;border-radius:8px;z-index:20}
body.flat #gl{display:none}
body.flat #vscreen{left:50%;top:50%;transform-origin:center;transform:translate(-50%,-50%) scale(var(--fs,1))!important;opacity:1!important;pointer-events:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}

/* ===== v9: tela maior, fundo, guia de botões ===== */
body{background:transparent}
.bg{background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),url(assets/bg.jpg?v=4) 68% 25%/cover no-repeat}
#vscreen{width:720px;height:405px}
#vscreen .home{padding:14px 22px 8px}
#vscreen .profile-head{padding-bottom:8px}#vscreen .mini-avatar{width:46px;height:46px}
#vscreen .menu{margin:8px 0 10px}
#vscreen .hero-card{grid-template-columns:38% 1fr;gap:16px}
#vscreen .image-wrap{height:168px}
#vscreen .hero-copy h2{font-size:28px;margin:2px 0 4px}#vscreen .hero-copy p{font-size:12px;max-width:260px}
#vscreen .screen-footer{font-size:8px;margin-top:6px}
#vscreen .album{width:84px;height:84px}
#vstatus{top:auto;bottom:34px}
.guide{position:fixed;left:18px;top:18px;z-index:10;width:214px;padding:15px 16px 13px;border-radius:22px;color:#eef0f6;font:10px/1.4 "Space Mono",monospace;letter-spacing:.06em;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 34px rgba(206,206,206,.2),inset 0 0 26px rgba(255,255,255,.08);pointer-events:none;transition:opacity .4s,transform .4s}
.guide:after{content:"✧";position:absolute;right:14px;top:9px;font-size:13px;color:#fff;text-shadow:0 0 10px #fff}
.guide.off{opacity:0;transform:translateY(-8px)}
.guide h3{margin:0 0 10px;font-size:9px;font-weight:400;letter-spacing:.32em;text-align:center;color:#fff;text-shadow:0 0 12px rgba(215,215,215,.95)}
.guide ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.guide li{display:flex;align-items:center;gap:10px;opacity:.8;transition:opacity .25s,transform .25s,text-shadow .25s}
.guide .g{min-width:38px;text-align:center;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.08);font:600 10px "Space Mono",monospace;transition:box-shadow .25s,background .25s}
.guide .bt{color:#d5d5d5}.guide .bc{color:#c1c1c1}.guide .bx{color:#c8c8c8}.guide .bs{color:#d5d5d5}
.guide li.hot{opacity:1;transform:translateX(4px);text-shadow:0 0 9px #fff}
.guide li.hot .g{background:rgba(255,255,255,.3);box-shadow:0 0 16px rgba(224,224,224,.95)}
@media(max-width:700px){.guide{width:160px;padding:10px 11px;font-size:8px;left:8px;top:8px}.guide .g{min-width:30px;font-size:8px}}

/* ===== v10: versão para celular ===== */
.pad{display:none}
body.mobile #gl,body.mobile .drag-hint{display:none}
body.mobile #vscreen{left:12px;top:max(12px,env(safe-area-inset-top));width:calc(100vw - 24px);height:calc(100vh - 236px);height:calc(100dvh - 236px);transform:none;opacity:1;pointer-events:auto;border-radius:24px;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 40px rgba(206,206,206,.25),0 20px 60px rgba(0,0,0,.6)}
body.mobile #vscreen .home{padding:14px 14px 10px;zoom:1.12}
body.mobile #vscreen .boot{zoom:1.1}
body.mobile #vscreen .hero-card{grid-template-columns:1fr;gap:12px}
body.mobile #vscreen .image-wrap{height:190px}
body.mobile #vscreen .hero-copy p{max-width:none}
body.mobile .guide{left:50%;top:18%;transform:translateX(-50%);width:min(270px,82vw);z-index:14}
body.mobile .guide.off{transform:translateX(-50%) translateY(-8px)}
body.mobile .pad{position:fixed;left:0;right:0;bottom:0;z-index:12;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"l . r" "dp mid fb";align-items:center;gap:4px 8px;padding:6px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(8,8,12,.6) 45%)}
.pad button{font:600 15px "Space Mono",monospace;color:#f2f4fa;border:1px solid rgba(255,255,255,.36);background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 16px rgba(206,206,206,.2);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s,background .2s,transform .1s;cursor:pointer;padding:0}
.pad button:active,.pad button.hot{background:rgba(255,255,255,.34);box-shadow:0 0 22px 5px rgba(224,224,224,.85);transform:scale(.94)}
.pad .pill{height:32px;padding:0 18px;border-radius:999px;font-size:10px;letter-spacing:.14em}
.pad .pl{grid-area:l;justify-self:start;min-width:76px}.pad .pr{grid-area:r;justify-self:end;min-width:76px}
.pad .dp{grid-area:dp;justify-self:start}.pad .fb{grid-area:fb;justify-self:end}
.pad .mid{grid-area:mid;display:grid;gap:7px}
.pad .cl{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);grid-template-areas:". u ." "l . r" ". d ."}
.pad .cl button{width:44px;height:44px;border-radius:50%}
.pad .u{grid-area:u}.pad .l{grid-area:l}.pad .r{grid-area:r}.pad .d{grid-area:d}
.pad .bt{color:#d5d5d5}.pad .bc{color:#c1c1c1}.pad .bx{color:#c8c8c8}.pad .bs{color:#d5d5d5}
.pad .bt.hot{box-shadow:0 0 22px 5px rgba(165,165,165,.9)}.pad .bc.hot{box-shadow:0 0 22px 5px rgba(129,129,129,.9)}
.pad .bx.hot{box-shadow:0 0 22px 5px rgba(121,121,121,.9)}.pad .bs.hot{box-shadow:0 0 22px 5px rgba(156,156,156,.9)}

/* ===== v11: Arctic Monkeys, wallpaper animado, holofote e bloom ===== */
/* wallpaper em vídeo (o bg.jpg fica como poster/reserva) */
.bg{overflow:hidden}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 25%;filter:grayscale(1) contrast(1.1) brightness(.6)}
/* holofote em cima do Vita: feixe, brilho na fonte e poça de luz */
.spot{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.spot:before{content:"";position:absolute;left:50%;top:-14vh;width:34vmax;height:34vh;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(248,248,248,.9),rgba(243,243,243,.25) 40%,transparent 70%);filter:blur(14px)}
.beam{position:absolute;left:50%;top:0;width:86vw;height:108vh;transform:translateX(-50%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(246,246,246,.5),rgba(246,246,246,.17) 50%,rgba(246,246,246,.05));filter:blur(20px);animation:breathe 7s ease-in-out infinite alternate}
.pool{position:absolute;left:50%;top:60%;width:76vw;height:38vh;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(243,243,243,.24),transparent 66%);filter:blur(10px);animation:breathe 7s ease-in-out infinite alternate-reverse}
@keyframes breathe{from{opacity:.72}to{opacity:1}}
body.mobile .beam,body.mobile .pool{filter:blur(10px)}
/* bloom nos nomes */
h1,.hero-copy h2,.music-card h2{text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(194,194,194,.6),0 0 30px rgba(188,188,188,.4)}
.boot-title{color:#fff;text-shadow:0 0 6px #fff,0 0 16px rgba(255,255,255,.85),0 0 38px rgba(200,200,200,.75),0 0 80px rgba(181,181,181,.5);animation:bloom 4.5s ease-in-out infinite alternate}
@keyframes bloom{from{text-shadow:0 0 5px #fff,0 0 12px rgba(255,255,255,.7),0 0 28px rgba(200,200,200,.6),0 0 60px rgba(181,181,181,.35)}}
.boot-sub,.start{text-shadow:0 0 10px rgba(255,255,255,.7)}
.menu-item.active{text-shadow:0 0 8px rgba(194,194,194,.8);box-shadow:0 0 14px rgba(194,194,194,.45),0 3px 10px rgba(0,0,0,.09)}
.image-wrap,.mini-avatar{box-shadow:0 0 26px rgba(200,200,200,.4),0 10px 25px rgba(0,0,0,.18)}
.guide li.hot,.guide h3{text-shadow:0 0 6px #fff,0 0 16px rgba(215,215,215,.95)}

/* ===== v12: loading, efeitos nos nomes e volume com estrela ===== */
/* --- tela de carregamento --- */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(ellipse 60% 55% at 50% 44%,rgba(79,79,79,.5),transparent 70%),rgba(8,9,12,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .9s ease,visibility 0s .9s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-card{width:min(430px,80vw);text-align:center;color:#eff3f8}
.ld-angel{display:block;width:92px;height:92px;margin:0 auto 4px;animation:float 3s ease-in-out infinite;
  filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px rgba(203,203,203,.95)) drop-shadow(0 0 46px rgba(181,181,181,.65))}
.ld-title{font:700 clamp(22px,5vw,34px) "Space Mono",monospace;letter-spacing:-.05em;margin-bottom:34px;
  text-shadow:0 0 6px #fff,0 0 16px rgba(255,255,255,.8),0 0 38px rgba(200,200,200,.75),0 0 80px rgba(181,181,181,.5)}
.ld-bar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 20px rgba(200,200,200,.28)}
.ld-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#fff,#dddddd 50%,#cecece);
  box-shadow:0 0 8px #fff,0 0 20px rgba(194,194,194,.9),0 0 46px rgba(194,194,194,.75)}
.ld-star{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-24px 0 0 -23px;pointer-events:none;
  animation:bob 2s ease-in-out infinite;
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px rgba(188,188,188,.95)) drop-shadow(0 0 26px rgba(194,194,194,.8))}
@keyframes bob{50%{transform:translateY(-4px) scale(1.06)}}
.ld-row{display:flex;justify-content:space-between;margin-top:26px;font:10px "Space Mono",monospace;letter-spacing:.2em;text-shadow:0 0 10px rgba(255,255,255,.7)}
.ld-row span{opacity:.75}.ld-row b{font-weight:700}

/* --- efeitos nos nomes: bloom que respira + brilho que passa + glitch rápido + estrelinhas --- */
.fx{position:relative;animation:nameglow 3.6s ease-in-out infinite alternate}
.fx.fit{width:fit-content}
@keyframes nameglow{to{text-shadow:0 0 5px rgba(255,255,255,.95),0 0 16px rgba(188,188,188,.85),0 0 36px rgba(168,168,168,.65)}}
.fx:before,.fx:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.fx:after{color:transparent;text-shadow:none;
  background:linear-gradient(105deg,transparent 38%,rgba(181,181,181,.95) 46%,rgba(162,162,162,.95) 52%,transparent 62%) -160% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,38%{background-position:-160% 0}72%,100%{background-position:160% 0}}
.fx:before{color:#fff;opacity:0;text-shadow:-2px 0 #8e8e8e,2px 0 #c3c3c3;animation:glitch 7s steps(1,end) infinite}
@keyframes glitch{
  0%,90%,100%{opacity:0;transform:none}
  91%{opacity:.95;transform:translate(-3px,0);clip-path:inset(8% 0 58% 0)}
  93%{opacity:.95;transform:translate(3px,1px);clip-path:inset(58% 0 10% 0)}
  95%{opacity:.9;transform:translate(-2px,-1px);clip-path:inset(30% 0 36% 0)}
  97%{opacity:0;transform:none;clip-path:none}}
#trackTitle.fx:before{display:none}
.tw{position:absolute;font-style:normal;font-weight:400;font-size:.52em;line-height:1;letter-spacing:0;pointer-events:none;color:#e2e2e2;
  text-shadow:0 0 5px #fff,0 0 12px rgba(188,188,188,.95),0 0 24px rgba(188,188,188,.8);animation:twinkle 2.8s ease-in-out infinite}
.tw.a{right:-.7em;top:-.35em}
.tw.b{left:-.8em;bottom:-.1em;animation-delay:1.3s;font-size:.4em}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(40deg)}}
/* letras do título entram uma a uma quando o loading termina */
.boot-title span{display:inline-block}
.boot-title.go span{animation:letterIn 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i) * 70ms + .25s)}
@keyframes letterIn{from{opacity:0;filter:blur(10px);transform:translateY(10px) scale(1.35)}}
/* menu e links também brilham */
.menu-item:hover{text-shadow:0 0 8px rgba(194,194,194,.9)}
.link-card:hover strong{text-shadow:0 0 8px rgba(194,194,194,.9),0 0 18px rgba(188,188,188,.6)}
/* enquanto o Vita gira, pausa os efeitos pra não pesar */
body.moving .fx,body.moving .fx:before,body.moving .fx:after,body.moving .tw,body.moving .ld-star{animation-play-state:paused}

/* --- volume: pílula escura, barra com bloom e estrela angel girl como bolinha --- */
.player{gap:12px;padding:9px 18px 9px 10px;border-radius:999px;
  background:linear-gradient(135deg,rgba(26,26,26,.94),rgba(44,44,44,.9));border:1px solid rgba(223,223,223,.38);
  box-shadow:0 0 22px rgba(200,200,200,.4),0 0 44px rgba(188,188,188,.16),inset 0 0 18px rgba(255,255,255,.07)}
.player .play-btn{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.45);text-shadow:0 0 8px rgba(255,255,255,.85);box-shadow:0 0 12px rgba(200,200,200,.4)}
.player .play-btn:hover{background:rgba(255,255,255,.18)}
.vi{color:#ededed;font-size:15px;text-shadow:0 0 6px #fff,0 0 14px rgba(188,188,188,.9)}
.vp{min-width:2.2em;text-align:right;color:#fff;font:700 10px "Space Mono",monospace;letter-spacing:.06em;text-shadow:0 0 6px #fff,0 0 14px rgba(188,188,188,.9)}
.vp output{font:inherit}
.player .music-note{margin:0 0 0 auto;font-size:9px;opacity:.75;color:#ededed;text-shadow:0 0 8px rgba(200,200,200,.9)}
#vol{--v:60%;-webkit-appearance:none;appearance:none;flex:1;max-width:none;min-width:0;height:36px;margin:0;background:transparent;cursor:pointer;outline:none;accent-color:auto}
#vol::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg,#fff 0,#d8d8d8 calc(var(--v) * .5),#cecece var(--v),rgba(255,255,255,.16) var(--v));
  box-shadow:0 0 8px rgba(255,255,255,.55),0 0 18px rgba(188,188,188,.7),0 0 36px rgba(188,188,188,.5)}
#vol::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.16)}
#vol::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(90deg,#fff,#d8d8d8,#cecece);box-shadow:0 0 8px rgba(255,255,255,.55),0 0 18px rgba(188,188,188,.7)}
#vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:40px;height:40px;margin-top:-17px;border:0;border-radius:0;
  background:url(assets/angel-star.svg) center/contain no-repeat;transition:transform .2s;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 11px rgba(188,188,188,.95)) drop-shadow(0 0 22px rgba(188,188,188,.8))}
#vol::-moz-range-thumb{width:40px;height:40px;border:0;border-radius:0;background:url(assets/angel-star.svg) center/contain no-repeat;transition:transform .2s;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 11px rgba(188,188,188,.95)) drop-shadow(0 0 22px rgba(188,188,188,.8))}
#vol:hover::-webkit-slider-thumb,#vol:focus-visible::-webkit-slider-thumb{transform:scale(1.14) rotate(-8deg)}
#vol:active::-webkit-slider-thumb{transform:scale(1.28) rotate(10deg)}
#vol:hover::-moz-range-thumb,#vol:focus-visible::-moz-range-thumb{transform:scale(1.14) rotate(-8deg)}
#vol:active::-moz-range-thumb{transform:scale(1.28) rotate(10deg)}
#vol:focus-visible{outline:none}
#vol:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 22px rgba(188,188,188,.9),0 0 40px rgba(188,188,188,.7)}
/* a música agora é maior: título menor pra caber na tela do Vita */
#vscreen .music-card h2{font-size:17px;line-height:1.15}


/* ===== v14: angel glass — branco, vidro, azul gelo ===== */
:root{--ice:#cccccc;--ice2:#a6a6a6;--ink2:#3b3b3b;--gl:rgba(255,255,255,.34);--gl2:rgba(255,255,255,.7)}
html,body,#vscreen{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C13 8 16 11 23 12C16 13 13 16 12 23C11 16 8 13 1 12C8 11 11 8 12 1Z' fill='white' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 13 13,auto}
a,button,input,.menu-item{cursor:pointer}
/* --- céu: o preto vira névoa perolada, a garota fica prateada --- */
.bg:after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:linear-gradient(180deg,#9f9f9f,#cfcfcf 55%,#f2f2f2)}
.bg video{filter:grayscale(1) contrast(1.05) brightness(.95)}
body:after{background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(241,241,241,.55))}
.lamp{background:radial-gradient(ellipse 52% 62% at 50% 42%,rgba(255,255,255,.6),transparent 72%)}
.spot{mix-blend-mode:soft-light;opacity:.7}
.mist{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:-1;pointer-events:none;background:linear-gradient(transparent,rgba(255,255,255,.75));animation:breathe 8s ease-in-out infinite alternate}
#trail{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
.rip{position:fixed;z-index:51;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;border:1.5px solid rgba(255,255,255,.95);background:rgba(255,255,255,.18);
  box-shadow:0 0 14px rgba(255,255,255,.9),inset 0 0 8px rgba(255,255,255,.7);animation:rip .8s ease-out forwards}
@keyframes rip{to{transform:scale(11);opacity:0}}
/* --- asas de penas atrás do Vita + halo --- */
.wings{position:fixed;inset:0;z-index:-1;pointer-events:none}
.wing{position:absolute;top:50%;width:min(52vw,780px);aspect-ratio:620/520;background:url(assets/wings.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 30px rgba(209,209,209,.95)) drop-shadow(0 0 70px rgba(255,255,255,.8));animation:flapL 6s ease-in-out infinite alternate}
.wl{left:50%;margin:calc(min(52vw,780px)*-.419) 0 0 calc(min(52vw,780px)*-.93);transform-origin:95% 48%}
.wr{left:50%;margin:calc(min(52vw,780px)*-.419) 0 0 calc(min(52vw,780px)*-.07);transform-origin:5% 48%;animation-name:flapR;transform:scaleX(-1)}
@keyframes flapL{from{transform:rotate(-4deg) scale(.98)}to{transform:rotate(5deg) scale(1.03)}}
@keyframes flapR{from{transform:scaleX(-1) rotate(-4deg) scale(.98)}to{transform:scaleX(-1) rotate(5deg) scale(1.03)}}
.halo{top:4vh;border:6px solid #fafafa;box-shadow:0 0 10px #fff,0 0 28px #fff,0 0 70px rgba(209,209,209,.95),inset 0 0 14px #fff,inset 0 0 34px rgba(215,215,215,.9)}
/* --- tela do Vita: pérola + vidro fosco --- */
.home{background:radial-gradient(circle at 12% 0,rgba(255,255,255,.95) 0,transparent 46%),radial-gradient(circle at 90% 100%,rgba(255,255,255,.8),transparent 50%),linear-gradient(160deg,#b1b1b1 0%,#d6d6d6 42%,#f5f5f5 100%)!important;color:var(--ink2)}
.home:before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.75),transparent 22%),radial-gradient(circle at 75% 65%,rgba(255,255,255,.6),transparent 20%),radial-gradient(circle at 55% 15%,rgba(255,255,255,.5),transparent 16%);filter:blur(10px);animation:orbs 14s ease-in-out infinite alternate}
@keyframes orbs{to{transform:translate(4%,3%) scale(1.08)}}
.boot{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 42%),linear-gradient(160deg,#a4a4a4,#d0d0d0 55%,#f2f2f2)}
.boot-mark{display:block;width:84px;height:84px;margin:0 auto;filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #fff) drop-shadow(0 0 44px rgba(176,176,176,.9));animation:float 2.5s ease-in-out infinite}
.boot-sub{color:var(--ink2);text-shadow:0 0 10px #fff;opacity:.8}
.start{color:var(--ink2);background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.3));border:1px solid #fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 0 8px #fff;box-shadow:0 0 22px rgba(255,255,255,.9),inset 0 0 12px rgba(255,255,255,.8)}
.start:hover{background:#fff}
.boot-hint{color:var(--ink2);opacity:.55}
.screen-glow{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.25),transparent 55%)}
.profile-head{border-bottom-color:rgba(255,255,255,.85)}
.eyebrow,.tiny,.panel-title,.screen-footer,.profile-head p,.hero-copy p,.music-card p,.code-line span{color:var(--ink2)}
/* cartões de vidro */
.link-card,.about-box,.music-card,.status,.hero-card .image-wrap,.menu-item{background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(112,112,112,.22),0 0 0 1px rgba(181,181,181,.25),inset 0 1px 0 #fff,inset 0 0 18px rgba(255,255,255,.45)}
.menu-item{color:var(--ink2)}
.menu-item.active,.menu-item:hover{background:linear-gradient(145deg,#fff,rgba(255,255,255,.55));color:var(--ink2);text-shadow:0 0 8px #fff;box-shadow:0 0 18px rgba(255,255,255,.95),0 0 34px rgba(176,176,176,.6),inset 0 0 12px #fff}
.link-card:hover{background:rgba(255,255,255,.85)}
.link-card:hover strong{text-shadow:0 0 8px #fff,0 0 16px rgba(176,176,176,.9)}
.link-card:focus,.link-card:focus-visible,.play-btn:focus-visible,.menu-item:focus-visible{outline:2px solid #fff;outline-offset:2px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.95),0 0 30px rgba(176,176,176,.7)}
.image-wrap,.mini-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 28px rgba(255,255,255,.95),0 0 50px rgba(176,176,176,.6),0 10px 25px rgba(82,82,82,.25)}
.image-wrap img,.mini-avatar img,.album img{filter:grayscale(.55) contrast(1.05) brightness(1.02)}
.image-wrap:after{background:linear-gradient(145deg,rgba(255,255,255,.4),transparent 45%,rgba(181,181,181,.3));mix-blend-mode:soft-light}
.image-label{background:rgba(255,255,255,.55);color:var(--ink2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #fff}
.status span{background:#fff;box-shadow:0 0 9px #fff,0 0 16px #a6a6a6}
#vscreen:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);transform:translateX(-120%);animation:vsheen 9s ease-in-out infinite}
@keyframes vsheen{55%,100%{transform:translateX(120%)}}
/* --- BLOOM branco-gelo nos nomes --- */
.home h1,.hero-copy h2,.music-card h2,#vscreen .hero-copy h2,.boot-title{font-family:"Cormorant Garamond",serif;letter-spacing:0;color:#fff;-webkit-text-stroke:.8px rgba(137,137,137,.9);
  text-shadow:0 0 2px #fff,0 0 9px #fff,0 0 20px rgba(255,255,255,.95),0 0 38px rgba(176,176,176,.95),0 0 70px rgba(255,255,255,.9);filter:drop-shadow(0 0 8px rgba(255,255,255,.95))}
.home h1{font-size:30px}
@keyframes nameglow{to{text-shadow:0 0 3px #fff,0 0 14px #fff,0 0 30px #fff,0 0 54px rgba(169,169,169,1),0 0 96px rgba(255,255,255,1)}}
@keyframes bloom{from{text-shadow:0 0 5px #fff,0 0 14px #fff,0 0 30px rgba(255,255,255,.9),0 0 60px rgba(176,176,176,.8)}}
.fx:after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 47%,rgba(209,209,209,1) 53%,transparent 62%) -160% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.fx:before{text-shadow:-2px 0 #ffffff,2px 0 #a6a6a6}
.tw{color:#fff;text-shadow:0 0 5px #fff,0 0 12px #fff,0 0 24px #a6a6a6}
#vscreen .music-card h2{font-size:17px}
/* equalizador da aba MUSIC */
.eq{display:flex;gap:3px;align-items:flex-end;height:38px;margin-top:12px}
.eq i{flex:1;height:18%;border-radius:3px;background:linear-gradient(#fff,#bdbdbd);box-shadow:0 0 6px rgba(255,255,255,.95);animation:eq 1s ease-in-out infinite alternate;animation-delay:var(--d);animation-play-state:paused}
body.playing .eq i{animation-play-state:running}
@keyframes eq{to{height:100%}}
.music-note{color:var(--ink2)}
/* --- VOLUME FORA DO VITA: pílula de vidro --- */
.vol-hud{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:15;width:min(440px,92vw);display:flex;align-items:center;gap:12px;padding:9px 20px 9px 10px;border-radius:999px;color:var(--ink2);
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 10px 30px rgba(102,102,102,.3),0 0 30px rgba(255,255,255,.8),inset 0 1px 0 #fff,inset 0 0 20px rgba(255,255,255,.5)}
#musicBtn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #fff;background:radial-gradient(circle at 35% 28%,#fff,#e2e2e2 70%,#cccccc);color:var(--ink2);font:700 14px "Space Mono",monospace;box-shadow:0 0 14px #fff,0 3px 10px rgba(102,102,102,.35);padding:0}
body.playing #musicBtn{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 26px 6px #fff,0 3px 10px rgba(102,102,102,.35)}}
.vh{flex:1;min-width:0}
.vh-top{display:flex;justify-content:space-between;gap:8px;font:700 10px "Space Mono",monospace;text-shadow:0 0 8px #fff}
#hudTrack{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#musicState{flex:none;opacity:.7;font-weight:400}
.vh-row{display:flex;align-items:center;gap:8px}
.vh-row .vi{color:var(--ink2);text-shadow:0 0 8px #fff}
#volPct{min-width:2.2em;text-align:right;font:700 10px "Space Mono",monospace;color:var(--ink2);text-shadow:0 0 8px #fff}
#vol::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fff 0,#dcdcdc calc(var(--v)*.5),#a6a6a6 var(--v),rgba(92,92,92,.2) var(--v));box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.95),0 0 20px rgba(176,176,176,.7)}
#vol::-moz-range-track{background:rgba(92,92,92,.2)}
#vol::-moz-range-progress{background:linear-gradient(90deg,#fff,#dcdcdc,#a6a6a6);box-shadow:0 0 10px #fff,0 0 20px rgba(176,176,176,.7)}
#vol::-webkit-slider-thumb,#vol::-moz-range-thumb{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px rgba(169,169,169,.95))}
/* --- guia e dicas em vidro --- */
.guide{color:var(--ink2);border-color:rgba(255,255,255,.95);background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.2));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(102,102,102,.28),0 0 30px rgba(255,255,255,.7),inset 0 0 24px rgba(255,255,255,.5)}
.guide:after{color:#a6a6a6;text-shadow:0 0 10px #fff}
.guide h3,.guide li.hot{color:var(--ink2);text-shadow:0 0 8px #fff,0 0 16px #fff}
.guide .g{border-color:rgba(137,137,137,.5);background:rgba(255,255,255,.55);color:var(--ink2)}
.guide li.hot .g{background:#fff;box-shadow:0 0 16px #fff,0 0 22px rgba(169,169,169,.9)}
.guide .bt{color:#717171}.guide .bc{color:#727272}.guide .bx{color:#656565}.guide .bs{color:#7e7e7e}
.drag-hint{bottom:auto;top:12px;color:var(--ink2);text-shadow:0 0 10px #fff,0 0 20px #fff;opacity:.85}
/* --- borboletas de vidro --- */
.fly{position:fixed;left:0;top:0;z-index:9;width:38px;pointer-events:none;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(176,176,176,.9))}
.fly svg{display:block;width:100%;animation:flap .28s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleX(.45)}}
.f1{animation:fly1 34s linear infinite}.f2{width:28px;animation:fly2 46s linear infinite -20s}
@keyframes fly1{0%{transform:translate(-8vw,75vh) rotate(25deg)}25%{transform:translate(28vw,35vh) rotate(-15deg)}50%{transform:translate(55vw,60vh) rotate(20deg)}75%{transform:translate(80vw,25vh) rotate(-20deg)}100%{transform:translate(108vw,45vh) rotate(15deg)}}
@keyframes fly2{0%{transform:translate(108vw,20vh) rotate(-25deg)}30%{transform:translate(70vw,70vh) rotate(15deg)}60%{transform:translate(35vw,30vh) rotate(-20deg)}100%{transform:translate(-8vw,65vh) rotate(20deg)}}
/* --- faixa de vidro rolando --- */
.ticker{position:fixed;left:0;right:0;bottom:0;height:26px;overflow:hidden;z-index:14;pointer-events:none;white-space:nowrap;font:700 10px/26px "Space Mono",monospace;letter-spacing:.2em;color:var(--ink2);text-shadow:0 0 8px #fff;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(230,230,230,.45),rgba(255,255,255,.55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.95)}
.ticker span{display:inline-block;animation:tick 40s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
body.moving .fly,body.moving .halo,body.moving .wing,body.moving .mist,body.moving .ticker span,body.moving #vscreen:after,body.moving .home:before{animation-play-state:paused}
/* --- carregamento em vidro --- */
#loader{background:radial-gradient(ellipse 60% 55% at 50% 44%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(160deg,#bababa,#e6e6e6 60%,#f6f8ff);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ld-card{color:var(--ink2)}
.ld-title{color:#fff;-webkit-text-stroke:.8px rgba(137,137,137,.9);text-shadow:0 0 6px #fff,0 0 18px #fff,0 0 40px rgba(176,176,176,.95),0 0 80px #fff}
.ld-angel{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 46px rgba(169,169,169,.9))}
.ld-bar{background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px #fff,0 0 22px rgba(255,255,255,.9)}
.ld-fill{background:linear-gradient(90deg,#fff,#dcdcdc 55%,#a6a6a6);box-shadow:0 0 10px #fff,0 0 24px rgba(176,176,176,.9)}
.ld-star{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #fff) drop-shadow(0 0 26px rgba(169,169,169,.9))}
.ld-row{text-shadow:0 0 10px #fff}
#vstatus{color:#363636;background:rgba(255,255,255,.7)}
/* --- celular --- */
body.mobile .halo,body.mobile .ticker,body.mobile .vh-top,body.mobile .wing{display:none}
body.mobile .vol-hud{bottom:calc(192px + env(safe-area-inset-bottom));width:calc(100vw - 24px);padding:6px 16px 6px 8px;z-index:13}
body.mobile #vscreen{height:calc(100vh - 268px);height:calc(100dvh - 268px - env(safe-area-inset-bottom));box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 40px rgba(255,255,255,.9),0 20px 60px rgba(82,82,82,.4)}
body.mobile .pad{background:linear-gradient(180deg,transparent,rgba(141,141,141,.55) 45%)}
@media(prefers-reduced-motion:reduce){.rip{display:none}}
/* halo (o bloco base do v13 foi removido) */
.halo{position:fixed;left:50%;width:min(34vw,520px);height:min(6vw,90px);transform:translateX(-50%);border-radius:50%;z-index:-1;pointer-events:none;animation:hbob 5s ease-in-out infinite alternate}
@keyframes hbob{to{transform:translateX(-50%) translateY(10px)}}
.wl{margin:calc(min(52vw,780px)*-.503) 0 0 calc(min(52vw,780px)*-.935);transform-origin:94% 62%}
.wr{margin:calc(min(52vw,780px)*-.503) 0 0 calc(min(52vw,780px)*-.065);transform-origin:6% 62%}
.wing{top:44%}
.wl{margin:calc(min(52vw,780px)*-.243) 0 0 calc(min(52vw,780px)*-.935);transform-origin:94% 29%}
.wr{margin:calc(min(52vw,780px)*-.243) 0 0 calc(min(52vw,780px)*-.065);transform-origin:6% 29%}
.wing{filter:drop-shadow(0 6px 10px rgba(102,102,102,.38)) drop-shadow(0 0 12px #fff) drop-shadow(0 0 34px rgba(209,209,209,.95)) drop-shadow(0 0 70px rgba(255,255,255,.8))}
.pad button{color:var(--ink2);border-color:rgba(255,255,255,.95);background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.3));box-shadow:0 0 16px rgba(255,255,255,.8),0 4px 12px rgba(92,92,92,.3)}
.pad .bt{color:#717171}.pad .bc{color:#727272}.pad .bx{color:#656565}.pad .bs{color:#7e7e7e}
.pad button:active,.pad button.hot{background:#fff;box-shadow:0 0 24px 6px #fff,0 0 30px rgba(169,169,169,.9)}

/* ===== v3: angel y2k PRETO & BRANCO + performance ===== */
:root{--ice:#d8d8d8;--ice2:#9a9a9a;--ink2:#111;--gl:rgba(255,255,255,.28);--gl2:rgba(255,255,255,.6)}
body{background:#000;font-family:Inter,Arial,sans-serif}
/* fundo: foto P&B contrastada, sem névoa azul */
.bg video,.bg{filter:grayscale(1) contrast(1.15) brightness(.8)}
.bg:after{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(30,30,30,.15) 50%,rgba(255,255,255,.55));mix-blend-mode:normal}
.spot,.mist{mix-blend-mode:normal}
.grain{opacity:.14}
/* peso: tira filtros caros e animação pesada */
.wing,.halo,.fly,.ld-angel,.ld-star,.boot-mark{filter:none!important}
.wing{opacity:.9;animation:none!important;will-change:auto}
.halo{box-shadow:0 0 18px rgba(255,255,255,.9),inset 0 0 12px #fff!important;animation:none!important}
.fly{animation-duration:30s}
.ticker{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff;color:#000;border-block:2px solid #000;font-family:"Space Mono",monospace;letter-spacing:.2em}
.guide,.pad button,.image-label,.start,#loader{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.rip{box-shadow:none!important;border:2px solid #fff;background:transparent;animation-duration:.6s}
.fx,.fx:before,.fx:after{animation-duration:6s!important}
.fx{text-shadow:0 0 6px rgba(255,255,255,.9)!important;filter:none!important}
/* y2k chrome: cartões de vidro fosco com borda prateada dupla */
.link-card,.about-box,.music-card,.status,.hero-card .image-wrap,.menu-item,.vol-hud,.guide{
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(205,205,205,.55) 48%,rgba(255,255,255,.8));
  border:1.5px solid #fff;color:#000;border-radius:14px;
  box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 #fff!important}
.menu-item.active,.menu-item:hover{background:#000!important;color:#fff!important;text-shadow:none;box-shadow:0 0 0 1px #fff,0 0 0 3px #000!important}
.panel-title,.eyebrow,.tiny{font-family:"Space Mono",monospace;letter-spacing:.22em;text-transform:uppercase}
#musicBtn{background:radial-gradient(circle at 35% 28%,#fff,#bdbdbd 70%,#6e6e6e);color:#000;box-shadow:0 0 0 2px #000,0 0 0 4px #fff}
body.playing #musicBtn{animation:none}
#vol::-webkit-slider-runnable-track{box-shadow:none!important;background:linear-gradient(90deg,#fff var(--v),#444 var(--v))}
#vol::-webkit-slider-thumb,#vol::-moz-range-thumb{filter:none!important}
.image-wrap img,.mini-avatar img,.album img{filter:grayscale(1) contrast(1.15)}
.eq i{background:#000;box-shadow:none}
.boot-sub,.boot-hint{font-family:"Space Mono",monospace;letter-spacing:.3em;text-transform:uppercase}
.start{background:#000;color:#fff;border:2px solid #fff;box-shadow:0 0 0 2px #000,0 0 18px rgba(255,255,255,.8)}
#loader{background:radial-gradient(ellipse 60% 55% at 50% 44%,#fff,transparent 70%),linear-gradient(160deg,#777,#ddd 60%,#fff)}
.ld-title{color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 0 12px #fff}
.ld-fill{background:linear-gradient(90deg,#000,#fff);box-shadow:none}
/* transições baratas: só transform/opacity */
.menu-item,.link-card,.pad button{transition:transform .12s,opacity .12s,background-color .12s,color .12s}
body.moving .grain,body.moving .fly,body.moving .ticker span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ===== v4: fonte aesthetic, vídeo novo, sem borboletas ===== */
.fly{display:none!important}
.bg{background:#000 url(assets/bg.jpg?v=4) center/cover no-repeat;animation:none;transform:none}
.bg video{object-position:50% 50%;filter:grayscale(1) contrast(1.1) brightness(.85)}
.bg:after{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 45%,rgba(0,0,0,.45))}
h1,h2,.fx,.boot-title,.ld-title{font-family:"Cormorant Garamond",serif!important;font-style:italic;font-weight:700;letter-spacing:.02em}
.panel-title,.eyebrow,.tiny,.boot-sub,.boot-hint,.start,.menu-item,.screen-footer,.code-line,.ticker,.guide,.pad button,.pill,.vh-top,#musicState,.image-label,.status,.link-card small{font-family:"DM Mono",monospace!important}
.menu-item{letter-spacing:.14em;font-size:.78em}
body,p,.link-card strong{font-family:Inter,Arial,sans-serif}

/* ===== v5: wallpaper visível (sem filtro duplo, mais claro) ===== */
.bg{filter:none!important;background:#111 url(assets/bg.jpg?v=4) center/cover no-repeat}
.bg video{filter:grayscale(1) brightness(1.7) contrast(1.15)!important;object-position:50% 50%}
.bg:after{background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 40%,rgba(0,0,0,.25))!important}
body:after{background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.4))!important}
.mist{height:22vh;background:linear-gradient(transparent,rgba(255,255,255,.35))}
.spot{opacity:.35}
/* wallpaper fica atrás de tudo: o preto vai no html, não no body */
html{background:#000!important}
body{background:transparent!important}

/* ===== v6: pinterest / moodboard, texto mais normal, vida na tela do Vita ===== */
h1,h2,.fx,.boot-title,.ld-title{font-style:normal!important;font-weight:600!important;letter-spacing:0!important}
.panel-title,.eyebrow,.tiny,.boot-sub,.boot-hint,.start,.menu-item,.screen-footer,.code-line,.guide,.pad button,.pill,.vh-top,#musicState,.image-label,.status,.link-card small{font-family:Inter,Arial,sans-serif!important}
.panel-title,.eyebrow,.tiny,.boot-sub,.boot-hint{letter-spacing:.2em;font-weight:500}
.menu-item{font-weight:600;letter-spacing:.08em;font-size:.8em}
.ticker{font-family:Inter,sans-serif;letter-spacing:.16em;font-weight:500}
.link-card,.about-box,.music-card,.status,.menu-item,.hero-card .image-wrap,.guide,.vol-hud{
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(236,236,236,.5));border:1px solid rgba(255,255,255,.95);border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 #fff!important}
.menu-item{border-radius:999px}
.menu-item.active,.menu-item:hover{background:#111!important;color:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.35)!important}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags span{font:500 11px Inter,sans-serif;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #fff;color:#222;box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* tela do Vita: barra de status, relógio, bolhas, reflexo de vidro e grade de LCD */
.home{padding-top:30px}
.sbar{position:absolute;top:0;left:0;right:0;height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font:600 12px Inter,sans-serif;color:#111;z-index:6;pointer-events:none;background:linear-gradient(rgba(255,255,255,.7),transparent)}
.sb-r{display:flex;align-items:center;gap:7px}.wifi{font-size:9px;letter-spacing:-1px}
.bat{width:24px;height:11px;border:1.5px solid #111;border-radius:3px;position:relative;padding:1px;box-sizing:border-box}
.bat b{display:block;height:100%;background:#111;width:100%;border-radius:1px}.bat:after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:4px;background:#111;border-radius:0 1px 1px 0}
.lock{position:absolute;top:32px;left:0;right:0;text-align:center;color:#111;pointer-events:none}
#lkTime{font:300 40px/1 Inter,sans-serif;letter-spacing:.02em}#lkDate{font:500 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;opacity:.7}
.bubbles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;left:var(--x);bottom:-70px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,rgba(255,255,255,.25) 40%,rgba(255,255,255,.08) 70%);border:1px solid rgba(255,255,255,.9);animation:bub var(--t) linear infinite;animation-delay:var(--d)}
@keyframes bub{to{transform:translateY(-640px) translateX(24px);opacity:.1}}
.gloss{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.38) 0,rgba(255,255,255,.1) 28%,transparent 29%),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px)}
/* moodboard atrás do Vita + chaveiro pendurado */
.moodboard{position:fixed;inset:0;z-index:-1;pointer-events:none}
.pol{position:absolute;margin:0;width:150px;padding:9px 9px 28px;background:#fafafa;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.pol .ph{height:150px;background:url(assets/bg.jpg?v=4) center/cover;filter:grayscale(1) contrast(1.15)}
.pol figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:italic 600 15px "Cormorant Garamond",serif;color:#222}
.tape{position:absolute;top:-11px;left:50%;width:62px;height:20px;margin-left:-31px;background:rgba(255,255,255,.7);transform:rotate(-4deg);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.p1{left:3vw;top:15vh;transform:rotate(-8deg)}.p2{right:3vw;bottom:16vh;transform:rotate(7deg)}.p3{right:6vw;top:11vh;transform:rotate(4deg);width:120px}.p3 .ph{height:120px}
.stk{position:absolute;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111;background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.s1{left:5vw;bottom:22vh;transform:rotate(-6deg)}.s2{left:10vw;top:46vh;transform:rotate(5deg)}
.charm{position:fixed;top:0;right:15vw;z-index:12;pointer-events:none;transform-origin:50% 0;animation:swing 4.5s ease-in-out infinite alternate}
.chain{display:block;width:3px;height:92px;margin:0 auto;background:repeating-linear-gradient(#fff 0 5px,#777 5px 8px)}
.charm img{width:54px;display:block;margin:-3px 0 0 -25px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
body.moving .bubbles i,body.moving .charm{animation-play-state:paused}
@media(max-width:900px){.moodboard,.charm{display:none}}
/* ajustes: polaroid fora do guia, bolhas visíveis, respiro no topo da tela */
.p1{top:44vh;left:2.5vw}.s2{top:36vh;left:15vw}.s1{bottom:12vh}
.boot-mark{margin:38px auto 0!important}
#home,#boot{position:relative;z-index:1}
.bubbles{z-index:0}
.home{padding-top:40px!important}
#home,#boot{position:absolute;inset:0;box-sizing:border-box}

/* ===== v6: socials (4 cards), troféus, brilho nos cards, digitação no about ===== */

/* botão do Discord com o mesmo visual dos links */
button.link-card{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;font:inherit;text-align:left;color:#000;cursor:pointer}
.link-card{position:relative;overflow:hidden}
#social .link-card{padding:10px 15px;margin:8px 0}
.chip{font-style:normal;font-size:7px;letter-spacing:.18em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:1px 6px 0;margin-left:6px;opacity:.75;transition:background-color .15s,color .15s}
.link-card.copied .chip{background:#000;color:#fff;opacity:1}
.link-card.copied{animation:copiedPop .45s cubic-bezier(.2,.9,.25,1.2)}
@keyframes copiedPop{40%{transform:scale(1.015)}}

/* brilho de cromo que passa pelo cartão (hover/foco) */
.link-card:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:30%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg)}
.link-card:hover:after,.link-card:focus-visible:after{animation:cardSheen .8s ease-out}
@keyframes cardSheen{0%{opacity:1;transform:translateX(0) skewX(-20deg)}100%{opacity:1;transform:translateX(520%) skewX(-20deg)}}

/* os cartões entram em sequência quando a aba abre (só "from": o hover continua funcionando depois) */
.active-panel .link-card{animation:cardIn .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes cardIn{from{opacity:0;transform:translateX(-14px)}}

/* ABOUT: linhas digitadas, uma por vez */
.typing .code-line{width:0;overflow:hidden;white-space:nowrap;
  animation:typeLine var(--dur) steps(var(--n)) var(--dl) forwards}
@keyframes typeLine{to{width:calc(25px + (var(--n) + 1) * 1ch)}}
.typing .code-line:after{content:"";display:inline-block;width:.6ch;height:1.05em;margin-left:1px;background:currentColor;vertical-align:text-bottom;
  animation:caret .7s steps(1) infinite,caretOff 0s linear calc(var(--dl) + var(--dur)) forwards}
.typing .code-line:last-child:after{animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@keyframes caretOff{to{opacity:0;visibility:hidden}}

/* TROPHIES */
.panel-title b{font-weight:700;opacity:.7;margin-left:6px}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:0 3px}
.tr{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:8px 11px;border-radius:12px;color:#000;position:relative;overflow:hidden}
.tr .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px}
.tr strong{display:block;font:600 11px/1.2 Inter,Arial,sans-serif}
.tr small{display:block;font:9px/1.3 "DM Mono",monospace;opacity:.6;margin-top:1px}
.tr.locked{background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.4);opacity:.75}
.tr.locked .ic{background:rgba(0,0,0,.1);color:#000;opacity:.5}
.tr.got{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(205,205,205,.55) 48%,rgba(255,255,255,.82));border:1.5px solid #fff;
  box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 5px 12px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.tr.got .ic{background:radial-gradient(circle at 35% 28%,#fff,#bdbdbd 70%,#6e6e6e);box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff}
.tr.plat.got{box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 0 22px 4px rgba(255,255,255,.9),inset 0 1px 0 #fff}
.tr.plat.got .ic{animation:platGlow 2.4s ease-in-out infinite alternate}
@keyframes platGlow{from{box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff,0 0 4px 1px rgba(255,255,255,.4)}to{box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff,0 0 14px 4px rgba(255,255,255,.95)}}
.tr.got:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:30%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);animation:cardSheen 1.1s .35s ease-out}
.tr-reset{display:block;margin:12px 3px 0 auto;font:8px "DM Mono",monospace;letter-spacing:.16em;color:#000;background:none;border:0;padding:3px 2px;opacity:.4;text-decoration:underline;text-underline-offset:3px}
.tr-reset:hover,.tr-reset:focus-visible{opacity:.9}
.tr-reset:focus-visible{outline:2px solid #000;outline-offset:2px}

/* aviso de troféu (fica fora do Vita: não gira junto) */
.toasts{position:fixed;top:22px;right:22px;z-index:60;display:grid;gap:12px;justify-items:end;pointer-events:none}
.toast{position:relative;overflow:hidden;display:grid;grid-template-columns:38px auto;gap:12px;align-items:center;min-width:230px;max-width:min(340px,92vw);
  padding:10px 22px 10px 10px;border-radius:999px;color:#000;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(210,210,210,.64) 50%,rgba(255,255,255,.88));
  border:1.5px solid #fff;box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 12px 28px rgba(0,0,0,.5),0 0 30px rgba(255,255,255,.3);
  animation:toastIn .6s cubic-bezier(.2,.9,.25,1.1) both}
.toast.out{animation:toastOut .42s ease-in forwards}
.toast:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);animation:toastSheen 1.1s .5s ease-out both}
.toast .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:radial-gradient(circle at 35% 28%,#fff,#bdbdbd 70%,#6e6e6e);box-shadow:0 0 0 2px #000,0 0 0 4px #fff}
.toast small{display:block;font:500 7.5px "DM Mono",monospace;letter-spacing:.22em;opacity:.6}
.toast b{display:block;font:italic 700 19px/1.15 "Cormorant Garamond",serif;letter-spacing:.01em}
.toast em{display:block;font:400 9px "DM Mono",monospace;font-style:normal;opacity:.6}
.toast.plat{box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 12px 28px rgba(0,0,0,.5),0 0 40px 6px rgba(255,255,255,.75)}
.toast.plat .ic{animation:platGlow 1.4s ease-in-out infinite alternate}
@keyframes toastIn{from{opacity:0;transform:translateY(-150%) scale(.96)}60%{opacity:1;transform:translateY(5%) scale(1.01)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-130%) scale(.97)}}
@keyframes toastSheen{from{opacity:1;transform:translateX(0) skewX(-20deg)}to{opacity:1;transform:translateX(900%) skewX(-20deg)}}
@media(max-width:760px){.toasts{left:50%;right:auto;transform:translateX(-50%);top:12px;justify-items:center;width:max-content;max-width:94vw}}
.link-card span svg{display:block}
@media(max-width:760px){.tr-grid{gap:10px;padding:0}.tr{padding:7px 8px;grid-template-columns:26px 1fr;gap:8px}.tr .ic{width:24px;height:24px;font-size:12px}.tr small{font-size:8px}}


/* ===== v7: sem asas, Discord ao vivo, troféu secreto ===== */
.wings,.wing{display:none!important}
.status em{font-style:normal}
.status[data-st=online] span{background:#fff;box-shadow:0 0 0 1px #000,0 0 9px 2px #fff}
.status[data-st=idle] span{background:linear-gradient(90deg,#000 50%,#fff 50%);box-shadow:0 0 0 1px #000,0 0 6px #fff}
.status[data-st=dnd] span{background:#000;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #000}
.status[data-st=offline] span{background:#8a8a8a;box-shadow:0 0 0 1px #000;opacity:.7}
.act{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;margin-top:12px;padding:8px 12px 8px 9px;max-width:280px;color:#111;
  border-radius:14px;border:1px solid #fff;background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(225,225,225,.5));box-shadow:0 6px 16px rgba(0,0,0,.22),inset 0 1px 0 #fff;position:relative;overflow:hidden}
.act[hidden]{display:none}
.act i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:radial-gradient(circle at 35% 28%,#fff,#bdbdbd 70%,#6e6e6e);box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff;animation:actPulse 2.6s ease-in-out infinite alternate}
.act small{display:block;font:500 7.5px "DM Mono",monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.act b{display:block;font:600 11px/1.25 Inter,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.act:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:28%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);animation:cardSheen 1.2s .3s ease-out}
@keyframes actPulse{from{box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff,0 0 3px 1px rgba(255,255,255,.3)}to{box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff,0 0 12px 3px rgba(255,255,255,.9)}}
.tr.plat{grid-column:1/-1}
@media(prefers-reduced-motion:reduce){.act i,.act:after{animation:none}}
.tags[hidden]{display:none!important}

.pol .ph{background-size:340% auto!important}

/* ===== v7.2: clipes, lightbox, dica do código ===== */
.secret-li{opacity:.34;transition:opacity .2s}.secret-li:hover{opacity:1}
.clip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 2px}
.clip{appearance:none;-webkit-appearance:none;display:block;text-align:left;text-decoration:none;color:#000;font:inherit;cursor:pointer;padding:7px 7px 9px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(228,228,228,.5));border:1px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.2),inset 0 1px 0 #fff;transition:transform .2s,box-shadow .2s}
.clip:hover,.clip:focus-visible{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.3),inset 0 1px 0 #fff}
.clip:focus-visible{outline:2px solid #000;outline-offset:2px}
.clip-th{position:relative;aspect-ratio:16/9;border-radius:9px;background:#111 center/cover;overflow:hidden;filter:grayscale(1) contrast(1.1)}
.clip-th i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:16px;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.8);background:rgba(0,0,0,.18);transition:background .2s}
.clip:hover .clip-th i{background:rgba(0,0,0,0)}
.clip b{display:block;font:600 10.5px/1.25 Inter,Arial,sans-serif;margin:7px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip small{display:block;font:8px "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin:2px 2px 0}
.clip:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:30%;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg)}
.clip:hover:after,.clip:focus-visible:after{animation:cardSheen .8s ease-out}
.active-panel .clip{animation:cardIn .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
.lightbox{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:34px 18px 14px;animation:fade .25s ease}
.lightbox[hidden]{display:none}
.lightbox video{max-width:100%;max-height:calc(100% - 30px);border-radius:10px;box-shadow:0 0 0 1px #fff,0 10px 40px rgba(0,0,0,.6);background:#000}
.lb-cap{font:500 9px "DM Mono",monospace;letter-spacing:.16em;color:#fff;opacity:.7;text-transform:uppercase}
.lb-x{position:absolute;top:34px;right:16px;z-index:2;width:30px;height:30px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.55);color:#fff;font:400 18px/1 Inter,sans-serif;cursor:pointer}
.lb-x:hover,.lb-x:focus-visible{background:#fff;color:#000}
@media(max-width:760px){.clip-grid{grid-template-columns:1fr 1fr}}
/* trophies compactos (7 cartões cabem na tela do Vita) */
.tr-grid{gap:7px 12px!important}.tr{padding:5px 10px!important}.tr>div{text-align:left}
.tr-reset{margin-top:6px!important}
.clip-grid{grid-template-columns:repeat(4,1fr)!important;gap:10px!important}
.clip{padding:6px 6px 8px!important}.clip b{font-size:10px!important}
@media(max-width:760px){.clip-grid{grid-template-columns:1fr 1fr!important}}


/* =====================================================================
   v8 — polimento: volume com estrela alinhada, bloquear/desbloquear com
   animação, player de clipes próprio, código secreto, cartões mais ricos
   ===================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes panelIn{from{opacity:0;transform:translateY(9px) scale(.985);filter:blur(4px)}}
@keyframes itemPop{from{opacity:0;transform:translateY(8px) scale(.8)}}
#gl.btn{cursor:pointer}

/* ---------- barra de volume (fora do Vita) ---------- */
:root{--tw:40px}
.vol-hud{width:min(490px,92vw);gap:14px;padding:10px 22px 10px 12px;overflow:visible;border-radius:999px;
  background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(216,218,223,.66) 55%,rgba(255,255,255,.88))!important;
  box-shadow:0 0 0 1px #000,0 0 0 3px rgba(255,255,255,.92),0 16px 36px rgba(0,0,0,.5),0 0 44px rgba(255,255,255,.22),inset 0 1px 0 #fff,inset 0 -8px 14px rgba(120,124,132,.2)!important}
.vh-top{align-items:center;gap:8px}
#hudTrack{flex:1;min-width:0}
.vh-eq{display:inline-flex;gap:2px;align-items:flex-end;height:11px;flex:none}
.vh-eq s{display:block;width:2px;height:28%;border-radius:2px;background:#111;text-decoration:none;animation:vheq .8s ease-in-out infinite alternate;animation-play-state:paused}
.vh-eq s:nth-child(2){animation-delay:-.25s}.vh-eq s:nth-child(3){animation-delay:-.5s}.vh-eq s:nth-child(4){animation-delay:-.15s}
body.playing .vh-eq s{animation-play-state:running}
@keyframes vheq{to{height:100%}}
#musicBtn{position:relative;transition:transform .15s}
#musicBtn:hover{transform:scale(1.07)}#musicBtn:active{transform:scale(.94)}
body.playing #musicBtn:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 10px rgba(255,255,255,.8);animation:ringout 2s ease-out infinite;pointer-events:none}
@keyframes ringout{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.vh-row{gap:8px}
#volIcon{flex:none;width:28px;height:28px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:transparent;color:#111;text-shadow:none;transition:background-color .15s,transform .12s}
#volIcon:hover{background:rgba(0,0,0,.09)}#volIcon:active{transform:scale(.88)}
#volIcon:focus-visible{outline:2px solid #000;outline-offset:1px}
#volIcon .wx{display:none}
#volIcon[data-lv="0"] .w1,#volIcon[data-lv="0"] .w2{display:none}#volIcon[data-lv="0"] .wx{display:inline}
#volIcon[data-lv="1"] .w2{display:none}
.vol-wrap{--p:.6;position:relative;flex:1;min-width:0;height:36px}
#vol{--p:inherit;display:block;width:100%;max-width:none}
/* o centro da estrela anda de (largura/2) até (100% - largura/2); a barra preenchida precisa acabar exatamente ali */
#vol::-webkit-slider-runnable-track{height:8px!important;border-radius:99px;
  background:linear-gradient(90deg,#08080a 0,#25262b calc(var(--tw)/2 + (100% - var(--tw)) * var(--p) - 3px),#4b4d54 calc(var(--tw)/2 + (100% - var(--tw)) * var(--p)),rgba(255,255,255,.82) calc(var(--tw)/2 + (100% - var(--tw)) * var(--p)))!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 1px 3px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.95)!important}
#vol::-moz-range-track{height:8px;border-radius:99px;background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 1px 3px rgba(0,0,0,.45)}
#vol::-moz-range-progress{height:8px;border-radius:99px;background:linear-gradient(90deg,#08080a,#4b4d54);box-shadow:none}
#vol::-webkit-slider-thumb{width:var(--tw)!important;height:var(--tw)!important;margin-top:-16px!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))!important}
#vol::-moz-range-thumb{width:var(--tw)!important;height:var(--tw)!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))!important}
.vol-tip{position:absolute;bottom:calc(100% - 3px);left:calc(var(--tw)/2 + (100% - var(--tw)) * var(--p));transform:translate(-50%,6px) scale(.8);padding:3px 8px 2px;border-radius:999px;pointer-events:none;
  font:600 10px "DM Mono",monospace;font-style:normal;letter-spacing:.04em;color:#fff;background:#0b0b0d;box-shadow:0 0 0 1px #fff,0 5px 12px rgba(0,0,0,.45);opacity:0;transition:opacity .15s,transform .18s cubic-bezier(.2,1.2,.3,1)}
.vol-wrap:hover .vol-tip,.vol-wrap:focus-within .vol-tip{opacity:1;transform:translate(-50%,-2px) scale(1)}
#volPct{min-width:2.5em;padding:3px 7px 2px;border-radius:999px;text-align:center;color:#fff;background:#0b0b0d;text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(0,0,0,.5)}

/* ---------- tela de bloqueio (e o que acontece ao apertar PS / PRESS START) ---------- */
.boot-star{position:relative;width:84px;height:84px;margin:34px auto 0}
.boot-star .boot-mark{margin:0!important;position:relative;z-index:1}
.orbit{position:absolute;border-radius:50%;pointer-events:none;animation:orb 16s linear infinite}
.orbit.o1{inset:-17px;border:1px solid rgba(40,42,48,.35)}
.orbit.o2{inset:-32px;border:1px dashed rgba(40,42,48,.3);animation-duration:27s;animation-direction:reverse}
.orbit:after{content:"✦";position:absolute;top:-6px;left:50%;margin-left:-5px;font:11px/1 Inter,sans-serif;color:#fff;text-shadow:0 0 6px #fff,0 0 12px #fff,0 0 2px #000}
@keyframes orb{to{transform:rotate(360deg)}}
body.moving .orbit,body.moving .start,body.moving .start:before{animation-play-state:paused}
.start{position:relative;overflow:hidden;animation:startPulse 2.6s ease-in-out infinite;transition:transform .15s}
.start:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:startSheen 3.4s ease-in-out infinite}
.start:active{transform:scale(.95)}
@keyframes startSheen{55%,100%{transform:translateX(120%)}}
@keyframes startPulse{50%{box-shadow:0 0 0 2px #000,0 0 26px 6px rgba(255,255,255,.95)}}

.vs-flash{position:absolute;inset:0;z-index:24;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff,rgba(255,255,255,.55) 55%,transparent 85%)}
.ps-pulse{position:absolute;inset:0;z-index:25;pointer-events:none;display:grid;place-items:center}
.ps-pulse i{position:absolute;width:110px;height:110px;border-radius:50%;opacity:0;border:2px solid rgba(14,14,18,.85);box-shadow:0 0 0 2px #fff,0 0 24px rgba(255,255,255,.9),inset 0 0 22px rgba(255,255,255,.7)}
.ps-pulse.on i{animation:psRing .95s cubic-bezier(.2,.7,.2,1) forwards}
.ps-pulse.on i:nth-child(2){animation-delay:.13s}
.ps-pulse.on i:nth-child(3){animation-delay:.26s;border-style:dashed}
@keyframes psRing{from{transform:scale(.15);opacity:1}to{transform:scale(6.5);opacity:0}}
@keyframes vsFlash{0%{opacity:0}16%{opacity:.9}100%{opacity:0}}

/* PS: a home encolhe e some; a tela de bloqueio entra por baixo */
#home.leaving{pointer-events:none;animation:homeOut .66s cubic-bezier(.55,0,.75,.2) forwards}
@keyframes homeOut{
  0%{opacity:1;transform:none;border-radius:0;box-shadow:0 0 0 rgba(0,0,0,0)}
  40%{opacity:1;transform:scale(.88);border-radius:22px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
  100%{opacity:0;transform:scale(.56);border-radius:34px;filter:blur(10px);box-shadow:0 22px 50px rgba(0,0,0,.4)}}
.t-lock .vs-flash{animation:vsFlash .75s ease-out .08s}
#boot.entering{animation:bootIn .8s ease both}
@keyframes bootIn{from{opacity:0;transform:scale(1.1);filter:blur(6px)}}
#boot.entering .lock{animation:lockDrop 1s cubic-bezier(.2,.8,.2,1) .3s backwards}
@keyframes lockDrop{from{opacity:0;transform:translateY(-28px);filter:blur(6px)}}
#boot.entering .boot-star{animation:starPop .95s cubic-bezier(.2,1.25,.3,1) .4s backwards}
@keyframes starPop{from{opacity:0;transform:scale(.25) rotate(-110deg)}}
#boot.entering .boot-sub,#boot.entering .boot-hint{animation:fadeUp .6s ease .8s backwards}
#boot.entering .start{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) .95s backwards,startPulse 2.6s ease-in-out 1.6s infinite}

/* PRESS START: a tela de bloqueio sobe e some; a home abre de dentro pra fora */
#boot.leaving{pointer-events:none;animation:bootOut .72s cubic-bezier(.5,0,.7,.3) forwards}
@keyframes bootOut{to{opacity:0;transform:translateY(-16%) scale(1.07);filter:blur(10px)}}
.t-unlock .vs-flash{animation:vsFlash .9s ease-out .12s}
#home.entering{animation:homeIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes homeIn{from{opacity:0;transform:scale(.9);filter:blur(10px)}55%{opacity:1}}
#home.entering .profile-head{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) .2s backwards}
#home.entering .menu-item{animation:itemPop .55s cubic-bezier(.2,1.3,.3,1) calc(.32s + var(--k,0) * 55ms) backwards}
.menu-item:nth-child(2){--k:1}.menu-item:nth-child(3){--k:2}.menu-item:nth-child(4){--k:3}.menu-item:nth-child(5){--k:4}.menu-item:nth-child(6){--k:5}
#home.entering .active-panel{animation:fadeUp .65s cubic-bezier(.2,.8,.2,1) .45s backwards}
#home.entering .screen-footer{animation:fadeUp .6s ease .6s backwards}

/* ---------- home mais viva ---------- */
.active-panel{animation:panelIn .5s cubic-bezier(.2,.8,.2,1)}
.panel-title{display:flex;align-items:center;gap:10px;opacity:.8}
.panel-title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent)}
.panel-title b{order:2;margin:0;padding:2px 7px 1px;border-radius:99px;background:#111;color:#fff;font-size:8px;opacity:1}
.panel-title:after{order:1}
.profile-head{border-bottom:0!important;position:relative}
.profile-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 12%,rgba(0,0,0,.35) 88%,transparent);border-bottom:1px solid rgba(255,255,255,.95)}
.menu-item{transition:transform .15s,background-color .15s,color .15s,box-shadow .15s!important}
.menu-item:hover{transform:translateY(-2px)}.menu-item:active{transform:translateY(0) scale(.96)}
.image-wrap:before{content:"";position:absolute;left:0;right:0;top:0;height:38%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.3),transparent);transform:translateY(-110%);animation:scanY 5s linear infinite}
@keyframes scanY{to{transform:translateY(300%)}}
body.moving .image-wrap:before,body.moving .vh-eq s,body.moving #musicBtn:after{animation-play-state:paused}
.link-card strong,.link-card small{transition:transform .2s}
.link-card:hover small{transform:translateX(-3px)}

/* ---------- aba CLIPS ---------- */
.clip{border-radius:16px;padding:7px 7px 9px!important}
.clip-th{border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.9);transition:filter .25s}
.clip:hover .clip-th,.clip:focus-visible .clip-th{filter:grayscale(.15) contrast(1.12)}
.clip-th .clip-pl{inset:50% auto auto 50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;padding-left:2px;font-size:11px;color:#111;text-shadow:none;
  background:radial-gradient(circle at 35% 28%,#fff,#c3c5ca 70%,#80838a);box-shadow:0 0 0 1.5px #000,0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.45);transition:transform .22s cubic-bezier(.2,1.3,.3,1)}
.clip:hover .clip-th .clip-pl,.clip:focus-visible .clip-th .clip-pl{transform:scale(1.18);background:radial-gradient(circle at 35% 28%,#fff,#c3c5ca 70%,#80838a)}
.clip-th:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 65%,rgba(0,0,0,.5))}
.clip-th .clip-n,.clip-th .clip-d{position:absolute;z-index:1;font:500 8px "DM Mono",monospace;font-style:normal;color:#fff;letter-spacing:.12em}
.clip-th .clip-n{left:6px;top:5px;text-shadow:0 1px 3px #000}
.clip-th .clip-d{right:5px;bottom:5px;padding:2px 6px 1px;border-radius:99px;background:rgba(0,0,0,.7);box-shadow:0 0 0 1px rgba(255,255,255,.55)}

/* ---------- player de clipes (sem os controles do Chrome) ---------- */
.lightbox{padding:30px 20px 12px;justify-content:center;align-items:center;flex-direction:row;gap:0;
  background:radial-gradient(ellipse at 50% 38%,rgba(46,46,52,.86),rgba(0,0,0,.95) 78%);animation:none}
.lightbox.in{animation:fade .3s ease both}
.lb-frame{position:relative;width:min(100%,484px);display:flex;flex-direction:column;padding:7px 7px 5px;border-radius:17px;color:#111;
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(204,206,212,.72) 48%,rgba(255,255,255,.92));
  box-shadow:0 0 0 1px #000,0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.55),0 20px 54px rgba(0,0,0,.75),0 0 50px rgba(255,255,255,.26)}
.lightbox.in .lb-frame{animation:lbPop .55s cubic-bezier(.2,.9,.25,1.1) both}
.lightbox.out .lb-frame{animation:lbOut .24s ease-in forwards}
@keyframes lbPop{from{opacity:0;transform:translateY(16px) scale(.88);filter:blur(7px)}}
@keyframes lbOut{to{opacity:0;transform:scale(.94);filter:blur(4px)}}
.lb-frame:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-120%);animation:vsheen 6s ease-in-out 1s infinite}
.lb-spark{position:absolute;z-index:3;font-style:normal;color:#fff;pointer-events:none;text-shadow:0 0 6px #fff,0 0 14px #fff,0 0 2px #000;animation:twinkle 2.8s ease-in-out infinite}
.lb-spark.a{left:-11px;top:-12px;font-size:20px}.lb-spark.b{right:-12px;top:34%;font-size:15px;animation-delay:1s}.lb-spark.c{left:22%;bottom:-13px;font-size:15px;animation-delay:1.7s}
.lb-top{display:flex;align-items:center;gap:9px;height:25px;padding:0 3px 0 6px}
.lb-dots{display:flex;gap:4px;flex:none}
.lb-dots i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9a9ca2);box-shadow:0 0 0 1px #000}
.lb-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:italic 700 16px/1 "Cormorant Garamond",serif;letter-spacing:.01em;color:#111}
.lb-idx{flex:none;font:500 9px "DM Mono",monospace;letter-spacing:.16em;opacity:.6}
.lb-x{position:static;flex:none;width:20px;height:20px;display:grid;place-items:center;padding:0;border-radius:50%;border:0;color:#fff;background:#111;box-shadow:0 0 0 1px #fff,0 0 0 2px #000;font:400 15px/1 Inter,sans-serif;transition:transform .15s,background-color .15s,color .15s}
.lb-x:hover,.lb-x:focus-visible{background:#fff;color:#000;transform:rotate(90deg) scale(1.1)}
.lb-stage{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.18)}
.lb-stage video{display:block;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none;object-fit:contain;background:#000;filter:grayscale(.15) contrast(1.05)}
.lb-stage video::-webkit-media-controls,.lb-stage video::-webkit-media-controls-enclosure,.lb-stage video::-webkit-media-controls-panel,.lb-stage video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.lb-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5))}
.lb-corner{position:absolute;z-index:2;width:14px;height:14px;pointer-events:none;border:2px solid #fff;opacity:.9;filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}
.lb-corner.tl{left:9px;top:9px;border-right:0;border-bottom:0}.lb-corner.tr{right:9px;top:9px;border-left:0;border-bottom:0}
.lb-corner.bl{left:9px;bottom:9px;border-right:0;border-top:0}.lb-corner.br{right:9px;bottom:9px;border-left:0;border-top:0}
.lb-rec{position:absolute;z-index:2;right:30px;top:10px;display:flex;align-items:center;gap:5px;pointer-events:none;font:500 8px "DM Mono",monospace;letter-spacing:.22em;color:#fff;text-shadow:0 1px 3px #000}
.lb-rec i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:blinkRec 1.2s steps(1) infinite}
.lb-stage.paused .lb-rec{opacity:.55}.lb-stage.paused .lb-rec i{animation:none}
@keyframes blinkRec{50%{opacity:.15}}
.lb-load{position:absolute;z-index:3;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 2px #000);transition:opacity .2s}
.lb-stage.loading .lb-load{opacity:1;animation:lbSpin 1.3s linear infinite}
@keyframes lbSpin{to{transform:rotate(360deg)}}
.lb-big{position:absolute;z-index:2;inset:0;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.lb-big span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;padding-left:4px;font-size:19px;color:#111;
  background:radial-gradient(circle at 35% 28%,#fff,#c9cbd0 70%,#888a90);box-shadow:0 0 0 2px #000,0 0 0 4px #fff,0 8px 24px rgba(0,0,0,.65),0 0 32px rgba(255,255,255,.5);
  opacity:0;transform:scale(.6);transition:opacity .2s,transform .28s cubic-bezier(.2,1.3,.3,1)}
.lb-stage.paused:not(.loading) .lb-big span{opacity:1;transform:none}
.lb-stage.paused:not(.loading) .lb-big:hover span{transform:scale(1.08)}
.lb-big:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.lb-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 4px}
.lb-btn{flex:none;width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;font-size:9px;line-height:1;color:#111;cursor:pointer;
  background:radial-gradient(circle at 35% 28%,#fff,#d5d7db 70%,#9b9da3);box-shadow:0 0 0 1px #000,0 2px 4px rgba(0,0,0,.35);transition:transform .12s}
#lbPrev{transform:none}#lbPrev,#lbNext{font-size:8px}
#lbPrev{padding-right:1px}#lbNext{padding-left:1px}
.lb-btn:hover{transform:scale(1.12)}.lb-btn:active{transform:scale(.9)}
.lb-btn:focus-visible,.lb-seek:focus-visible{outline:2px solid #000;outline-offset:2px}
.lb-btn[hidden]{display:none}
.lb-play{width:30px;height:30px;font-size:11px;color:#fff;background:#111;box-shadow:0 0 0 1px #fff,0 0 0 2px #000,0 3px 8px rgba(0,0,0,.4)}
.lb-time{flex:none;min-width:2.5em;text-align:center;font:500 9.5px "DM Mono",monospace;letter-spacing:.05em}
.lb-seek{position:relative;flex:1;min-width:0;height:26px;margin:0 13px;cursor:pointer;touch-action:none;user-select:none}
.lb-seek>*{pointer-events:none}
.lb-rail,.lb-fill{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:99px}
.lb-rail{right:0;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 1px 3px rgba(0,0,0,.4)}
.lb-fill{width:0;background:linear-gradient(90deg,#08080a,#4b4d54)}
/* o centro da estrela está sempre exatamente na ponta da barra preenchida (mesma posição em %) */
.lb-star{position:absolute;top:50%;left:0;width:34px;height:34px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:scale .15s}
.lb-seek:hover .lb-star,.lb-seek:focus-visible .lb-star{scale:1.18}
.lb-cap{height:13px;margin-top:-1px;text-align:center;font:500 7.5px/13px "DM Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:#111;opacity:.5}
.lb-cap:empty{display:none}
@media(max-width:760px){.lb-frame{width:100%}.lb-title{font-size:14px}}

/* ---------- código secreto ---------- */
.kfx{position:fixed;left:50%;top:50%;z-index:70;pointer-events:none}
.kfx i{position:absolute;left:0;top:0;font-style:normal;font-size:calc(18px * var(--s));color:#fff;text-shadow:0 0 6px #fff,0 0 16px #fff,0 0 2px #000;animation:kBurst 1.5s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes kBurst{from{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:1}70%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--r));opacity:0}}
.kfx b{position:absolute;left:0;top:0;white-space:nowrap;font:italic 700 clamp(30px,6vw,66px) "Cormorant Garamond",serif;color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 0 10px #fff,0 0 30px #fff;animation:kTitle 2.2s ease forwards}
@keyframes kTitle{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);filter:blur(10px)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05);filter:none}80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-80%)}}

/* PRESS START: no hover o fundo ficava branco com letra branca (texto sumia) — agora inverte direito */
.start:hover,.start:focus-visible{background:#fff!important;color:#000!important;text-shadow:none;transform:translateY(-2px);outline:none}
.start:hover:before{opacity:0}
.vol-wrap.max #vol::-webkit-slider-runnable-track{background:linear-gradient(90deg,#08080a,#4b4d54)!important}