:root{
  --bg:#0e0119; --bg2:#1a0430; --ink:#fff; --mute:#d2c2ea; --dim:#a896c6;
  --pink:#ff3d9a; --hot:#ff2d95; --bub:#ffb3e0; --lilac:#b48cff; --cyan:#5ce1ff;
  --g:#3dffa8; --y:#ffd23f; --r:#ff4d6d; --s:#6d5a8a;
  --glass:rgba(255,255,255,.07); --line:rgba(255,255,255,.12);
  --holo:linear-gradient(115deg,#ff5fb4,#ffb3e0 25%,#b48cff 45%,#5ce1ff 65%,#ffd6f0 82%,#ff5fb4);
  --ease:cubic-bezier(.2,.9,.25,1.15); --soft:cubic-bezier(.2,.8,.2,1);
  --kr:"Black Han Sans",sans-serif; --disp:"Dela Gothic One",sans-serif; --ui:"Outfit",system-ui,sans-serif;
  --safeB:env(safe-area-inset-bottom,0px); --safeT:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);overscroll-behavior:none}
body{overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg .fill,svg .dot{fill:currentColor}

/* ---------- fundo ---------- */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(120% 80% at 50% -10%,#3a0a55 0%,var(--bg2) 40%,var(--bg) 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.b1{width:60vmax;height:60vmax;background:#ff2d95;left:-25vmax;top:-20vmax;opacity:.28;animation:drift1 18s ease-in-out infinite alternate}
.b2{width:55vmax;height:55vmax;background:#6b3dff;right:-25vmax;top:20vh;opacity:.32;animation:drift2 22s ease-in-out infinite alternate}
.b3{width:45vmax;height:45vmax;background:#00c2ff;left:10vw;bottom:-30vmax;opacity:.18;animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12vw,10vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14vw,-8vh) scale(.9)}}
.grain{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
.floaters{position:absolute;inset:0}
.floaters span{position:absolute;bottom:-40px;font-size:var(--s,16px);opacity:0;color:#fff;animation:float var(--d,14s) linear var(--w,0s) infinite;text-shadow:0 0 12px var(--c,#ff5fb4)}
@keyframes float{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:var(--o,.5)}90%{opacity:var(--o,.5)}100%{transform:translate(var(--x,20px),-110vh) rotate(var(--r,180deg));opacity:0}}

/* ---------- casca ---------- */
.app{position:relative;z-index:1;height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(var(--safeT) + 6px) 14px calc(var(--safeB) + 10px)}
.top{display:flex;align-items:center;gap:6px;height:54px;flex:none}
.top .right{display:flex;gap:2px;margin-left:auto}
.ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--mute);transition:transform .25s var(--ease),background .2s,color .2s}
.ic svg{width:22px;height:22px}
.ic:active{transform:scale(.86);background:var(--glass);color:#fff}
@media (hover:hover){.ic:hover{background:var(--glass);color:#fff}}
#btnSound .off{display:none} .muted #btnSound .on{display:none} .muted #btnSound .off{display:block}
.brand{display:flex;align-items:center;gap:9px;margin-left:2px;transition:transform .3s var(--ease)}
.brand:active{transform:scale(.94) rotate(-2deg)}
.brand img{width:40px;height:40px;filter:drop-shadow(0 4px 14px rgba(255,45,149,.55));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px) rotate(-3deg)}}
.wm{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.wordmark{font-family:var(--disp);font-size:22px;letter-spacing:.5px;background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite;filter:drop-shadow(0 2px 10px rgba(255,61,154,.35))}
.wordmark i{font-style:normal;color:#fff;-webkit-text-fill-color:#fff}
.kr{font-family:var(--kr);font-size:11px;letter-spacing:2px;color:var(--bub);margin-top:3px;opacity:.9}
@keyframes sheen{to{background-position:-200% 0}}

.ticker{flex:none;overflow:hidden;height:22px;margin:0 -14px;border-block:1px solid rgba(255,179,224,.18);background:linear-gradient(90deg,rgba(255,45,149,.12),rgba(107,61,255,.12));
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:inline-flex;white-space:nowrap;height:100%;align-items:center;animation:marquee 28s linear infinite;font-size:11px;font-weight:800;letter-spacing:2.5px;color:var(--bub)}
.track span{padding:0 14px}.track .k{font-family:var(--kr);font-weight:400;letter-spacing:1px;color:#fff}
@keyframes marquee{to{transform:translateX(-50%)}}

.meta{display:flex;align-items:center;gap:6px;flex:none;padding:10px 2px 8px}
.meta .spacer{flex:1}
.pill{font-size:12px;font-weight:800;letter-spacing:1px;padding:5px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--line);color:var(--mute)}
.pill.num{color:#fff}
.pill.arch{background:rgba(92,225,255,.12);border-color:rgba(92,225,255,.35);color:var(--cyan)}
.pill.streak{color:#ffd9a0;border-color:rgba(255,160,60,.35);background:rgba(255,140,40,.12)}
.pill.streak.bump{animation:bump .6s var(--ease)}
@keyframes bump{40%{transform:scale(1.35) rotate(-6deg)}}

/* ---------- palco ---------- */
.stage{flex:1;min-height:0;display:flex;flex-direction:column}
.cardwrap{flex:0 1 min(calc(min(100vw - 28px, 532px) * var(--ah,9) / var(--aw,16)), 50dvh);min-height:96px;container-type:size;display:flex;justify-content:center;align-items:flex-start}
.card{position:relative;width:min(100cqw,100cqh * var(--aw,16) / var(--ah,9));aspect-ratio:var(--aw,16) / var(--ah,9);border-radius:20px;padding:3px;
  background:var(--holo);background-size:300% 300%;animation:holo 8s ease-in-out infinite;
  box-shadow:0 18px 50px -12px rgba(255,45,149,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .5s var(--ease),box-shadow .4s}
@keyframes holo{50%{background-position:100% 100%}}
.card.won{box-shadow:0 0 0 2px rgba(61,255,168,.5),0 20px 70px -10px rgba(61,255,168,.55)}
.card.lost{filter:saturate(.85)}
.card.shake{animation:holo 8s ease-in-out infinite,shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px) rotate(-1deg)}40%,60%{transform:translateX(9px) rotate(1deg)}}
.holo{position:absolute;inset:3px;border-radius:17px;pointer-events:none;mix-blend-mode:screen;opacity:.0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,rgba(180,140,255,.25) 50%,transparent 62%);background-size:250% 100%;transition:opacity .4s}
.card.won .holo,.card:active .holo{opacity:1;animation:glare 2.4s ease-in-out infinite}
@keyframes glare{from{background-position:150% 0}to{background-position:-100% 0}}
.frame{position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;background:#000;touch-action:pan-y}
.frame img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.frame .blur{object-fit:cover;filter:blur(18px) brightness(.55) saturate(1.3);transform:scale(1.2)}
.frame .fg{object-fit:contain;transition:opacity .35s var(--soft),transform .6s var(--soft),filter .6s var(--soft)}
.frame .fg.enter{opacity:0;transform:scale(1.08);filter:blur(10px) brightness(1.6)}
.frame .fg.loading{opacity:.0}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.flash.red{background:radial-gradient(circle,transparent 30%,rgba(255,40,80,.85))}
.badge{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:5px 9px 5px 8px;border-radius:99px;background:rgba(10,0,20,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;letter-spacing:1.5px;font-weight:800;border:1px solid rgba(255,255,255,.15)}
.badge .rec{width:7px;height:7px;border-radius:50%;background:#ff3355;box-shadow:0 0 8px #ff3355;animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.badge.pop{animation:pop .45s var(--ease)}
@keyframes pop{40%{transform:scale(1.25)}}
.zoom{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(10,0,20,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);opacity:.85;transition:transform .2s var(--ease)}
.zoom svg{width:18px;height:18px}.zoom:active{transform:scale(.85)}
.nav{position:absolute;top:50%;width:30px;height:46px;margin-top:-23px;display:grid;place-items:center;font-size:30px;font-weight:300;color:#fff;opacity:0;pointer-events:none;text-shadow:0 2px 10px #000;transition:opacity .25s}
.nav.prev{left:2px}.nav.next{right:2px}
.nav.show{opacity:.75}
.yt{position:absolute;inset:0;display:none;background:#000}
.yt iframe{width:100%;height:100%;border:0}
.frame.playing .yt{display:block}
.frame.playing .badge,.frame.playing .zoom,.frame.playing .nav{display:none}

.stamp{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}
.stamp b{font-family:var(--kr);font-weight:400;font-size:clamp(46px,15vw,74px);line-height:1;color:#fff;-webkit-text-stroke:2px rgba(0,0,0,.25);
  text-shadow:0 0 18px var(--sc,#ff2d95),0 0 40px var(--sc,#ff2d95),0 6px 0 rgba(0,0,0,.35)}
.stamp small{margin-top:4px;font-family:var(--disp);font-size:13px;letter-spacing:3px;padding:4px 10px;border-radius:8px;background:var(--sc,#ff2d95);color:#14001f}
.stamp.go{animation:stamp 2.1s var(--soft) forwards}
@keyframes stamp{0%{transform:translate(-50%,-50%) scale(3) rotate(-25deg);opacity:0}
  14%{transform:translate(-50%,-50%) scale(.92) rotate(-8deg);opacity:1}
  20%{transform:translate(-50%,-50%) scale(1.05) rotate(-9deg)}
  26%,78%{transform:translate(-50%,-50%) scale(1) rotate(-8deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.8) rotate(-8deg);opacity:0}}

/* ---------- quadrinhos ---------- */
.pipsWrap{flex:none;padding:12px 0 4px}
.pips{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.pip{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);border:1.5px solid var(--line);
  display:grid;place-items:center;font-family:var(--disp);font-size:14px;color:var(--dim);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.pip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.pip.open img{opacity:.9}
.pip .lock{width:13px;height:13px;opacity:.55}
.pip.open .lock{display:none}
.pip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent;transition:background .3s}
.pip.cur{border-color:#fff;box-shadow:0 0 0 2px rgba(255,61,154,.6),0 0 18px rgba(255,61,154,.6);transform:translateY(-3px)}
.pip.viewing{border-color:var(--bub)}
.pip.wrong::after{background:var(--r)}.pip.artist::after{background:var(--y)}.pip.skip::after{background:var(--s)}.pip.win::after{background:var(--g)}
.pip.wrong{border-color:rgba(255,77,109,.6)}.pip.artist{border-color:rgba(255,210,63,.65)}.pip.win{border-color:var(--g);box-shadow:0 0 16px rgba(61,255,168,.5)}
.pip.unlock{animation:unlock .6s var(--ease)}
@keyframes unlock{0%{transform:scale(.6) rotate(-8deg)}60%{transform:scale(1.15) rotate(3deg) translateY(-3px)}}
.pip:active{transform:scale(.92)}
.diffscale{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.diffscale i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--r),var(--y),var(--g));opacity:.55}

/* ---------- palpites ---------- */
.guesses{list-style:none;margin:8px 0 0;padding:0 0 6px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;
  mask:linear-gradient(#000 85%,transparent);-webkit-mask:linear-gradient(#000 85%,transparent)}
.guesses li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font-size:14px;font-weight:600;
}
.guesses li.new{animation:slideIn .45s var(--ease) both}
.guesses li.slot{background:transparent;border:1.5px dashed rgba(255,255,255,.1);color:var(--dim);font-weight:600;justify-content:space-between}
.guesses li.slot .ico{background:rgba(255,255,255,.06);color:var(--dim)}
.guesses li.slot.up{border-color:rgba(255,61,154,.35);color:var(--mute)}
.guesses li.slot.up .ico{background:rgba(255,61,154,.2);color:var(--bub);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15)}}
.guesses li .ico{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#14001f}
.guesses li.wrong .ico{background:var(--r)}.guesses li.artist .ico{background:var(--y)}.guesses li.skip .ico{background:var(--s);color:#fff}.guesses li.win .ico{background:var(--g)}
.guesses li .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guesses li .t em{font-style:normal;color:var(--mute);font-weight:500}
.guesses li .n{font-size:11px;color:var(--dim);font-weight:800;letter-spacing:1px}
.guesses li.artist{border-color:rgba(255,210,63,.35)}
.guesses li.skip .t{color:var(--mute);font-weight:500}
@keyframes slideIn{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* ---------- doca de busca ---------- */
.dock{flex:none;position:relative;padding-top:8px}
.field{position:relative;display:flex;align-items:center;height:54px;border-radius:18px;background:rgba(20,4,36,.82);border:1.5px solid rgba(255,179,224,.25);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .25s,box-shadow .25s,transform .3s var(--ease)}
.field:focus-within{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,61,154,.18),0 10px 30px -8px rgba(255,45,149,.5)}
.field.picked{border-color:var(--lilac);box-shadow:0 0 0 4px rgba(180,140,255,.2)}
.field.nudge{animation:nudge .4s}
@keyframes nudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.field .search{width:20px;height:20px;margin:0 2px 0 16px;color:var(--mute);flex:none}
.field input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:#fff;font:600 16px var(--ui);padding:0 10px}
.field input::placeholder{color:var(--dim);font-weight:500}
.clear{width:44px;height:100%;font-size:24px;color:var(--mute);flex:none}
.actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:10px}
.btn{position:relative;height:52px;border-radius:17px;font-weight:800;font-size:16px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:8px;
  overflow:hidden;transition:transform .25s var(--ease),opacity .2s,filter .2s,box-shadow .3s;user-select:none}
.btn svg{width:20px;height:20px}
.btn:active:not(:disabled){transform:scale(.95)}
.btn.ghost{background:var(--glass);border:1.5px solid var(--line);color:#fff}
.btn.ghost small{font-weight:600;font-size:11px;color:var(--mute);margin-left:2px}
.btn.primary{color:#1a0228;background:linear-gradient(180deg,#ffd0ec,#ff7ac6 48%,#ff2d95 52%,#ff5fb4);box-shadow:0 10px 28px -8px rgba(255,45,149,.75),inset 0 1px 0 rgba(255,255,255,.7)}
.btn.primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%)}
.btn.primary.ready::before{animation:shine 2.2s ease-in-out infinite}
@keyframes shine{0%,40%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.btn.primary:disabled{filter:grayscale(.6) brightness(.65);box-shadow:none;cursor:default}
.btn.wide{width:100%;margin-top:16px}

.sugg{position:absolute;left:0;right:0;bottom:calc(100% - 2px);max-height:min(46vh,340px);overflow:auto;border-radius:18px;padding:6px;
  background:rgba(24,6,42,.96);border:1.5px solid rgba(255,179,224,.22);box-shadow:0 -18px 50px -10px rgba(0,0,0,.7);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom;pointer-events:none;transition:opacity .18s,transform .25s var(--ease);z-index:10}
.sugg.open{opacity:1;transform:none;pointer-events:auto}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;animation:optIn .3s var(--ease) both;animation-delay:calc(var(--i) * 22ms)}
@keyframes optIn{from{opacity:0;transform:translateY(6px)}}
.opt .av{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:var(--disp);font-size:13px;color:#1a0228;background:var(--c,#ff7ac6)}
.opt .tx{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.opt .tx b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .tx span{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt mark{background:none;color:var(--bub);text-decoration:underline;text-decoration-color:rgba(255,179,224,.5);text-underline-offset:2px}
.opt.act,.opt:active{background:rgba(255,61,154,.16)}
@media (hover:hover){.opt:hover{background:rgba(255,61,154,.12)}}
.sugg .empty{padding:16px;text-align:center;color:var(--mute);font-size:14px}

/* teclado aberto: dá espaço ao frame e à lista */
@media (max-width:999px){
  .typing .ticker,.typing .guesses,.typing .diffscale{display:none}
  .typing .meta{padding:6px 2px 4px}
  .typing .pipsWrap{padding:8px 0 0}
}
.keys{display:none}

/* ---------- resultado ---------- */
.result{flex:none;padding-top:10px;animation:rise .6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.rhead{text-align:center;padding:4px 0 12px}
.rlabel{font-size:11px;font-weight:800;letter-spacing:3px;color:var(--mute)}
.rsong{margin:6px 0 2px;font-family:var(--disp);font-weight:400;font-size:clamp(24px,7.5vw,34px);line-height:1.08;background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite;
  word-break:break-word}
.rartist{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px}.rartist span{color:var(--dim);font-weight:600}
.rbtns{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.rfoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 4px}
.next{display:flex;flex-direction:column;line-height:1.15}
.next span{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.next b{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.link{font-weight:800;font-size:14px;color:var(--bub);padding:10px 4px}
.link:active{opacity:.6}
.won-ui .result .rlabel{color:var(--g)}

/* ---------- modais (folha de baixo) ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,0,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s both}
.sheet.closing{animation:fadeOut .24s ease-in both}
@keyframes fadeOut{to{opacity:0}}
@keyframes fade{from{opacity:0}}
.panel{position:relative;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:26px 22px calc(var(--safeB) + 24px);border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,#2a0a45,#16032a 40%);border:1px solid rgba(255,179,224,.18);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:up .45s var(--ease) both}
.sheet.closing .panel{animation:panelDown .24s cubic-bezier(.4,0,1,1) both}
@keyframes panelDown{to{transform:translateY(100%)}}
@keyframes up{from{transform:translateY(100%)}}
.panel::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.2)}
.panel h3{margin:0 0 6px;font-family:var(--disp);font-weight:400;font-size:24px}
.panel h4{margin:22px 0 10px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.panel .x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:12px;font-size:24px;color:var(--mute);background:var(--glass)}
.lead{color:var(--mute);font-size:15px;line-height:1.45;margin:4px 0 14px}.lead.small{font-size:14px}.lead b{color:#fff}
.how{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.how li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--mute)}
.how li b{color:#fff}
.how .n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-family:var(--disp);font-size:14px;color:#1a0228;background:var(--holo)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:16px 0 4px;font-size:13px;color:var(--mute)}
.legend span{display:flex;align-items:center;gap:8px}
.sq{flex:none;width:16px;height:16px;border-radius:5px}.sq.g{background:var(--g)}.sq.y{background:var(--y)}.sq.r{background:var(--r)}.sq.s{background:var(--s)}
.tip{font-size:12.5px;color:var(--dim);margin:12px 0 0;line-height:1.4}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.kpis div{display:flex;flex-direction:column;align-items:center;padding:12px 4px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.kpis b{font-family:var(--disp);font-weight:400;font-size:26px}
.kpis span{font-size:11px;color:var(--mute);font-weight:600;margin-top:2px;text-align:center}
.dist{display:flex;flex-direction:column;gap:6px}
.drow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.drow .l{width:16px;text-align:center;color:var(--mute)}
.drow .bar{height:24px;min-width:28px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:flex-end;padding:0 8px;
  width:0;transition:width .8s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.drow.hl .bar{background:var(--holo);color:#1a0228}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.aday{position:relative;aspect-ratio:1;border-radius:16px;background:var(--glass);border:1.5px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:17px;transition:transform .2s var(--ease)}
.aday small{font-family:var(--ui);font-size:10px;font-weight:700;color:var(--dim);margin-top:2px}
.aday:active{transform:scale(.92)}
.aday.win{border-color:rgba(61,255,168,.55);background:rgba(61,255,168,.1)}
.aday.lost{border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.08)}
.aday.prog{border-color:rgba(255,210,63,.55)}
.aday.today{box-shadow:0 0 0 2px var(--pink)}
.aday.cur::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}

.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);display:grid;place-items:center;animation:fade .2s both}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;animation:zoomIn .35s var(--ease)}
@keyframes zoomIn{from{transform:scale(.85);opacity:0}}
.lightbox .x{position:absolute;top:calc(var(--safeT) + 12px);right:12px;width:44px;height:44px;border-radius:14px;font-size:28px;background:rgba(255,255,255,.12)}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.toast{position:fixed;left:50%;top:calc(var(--safeT) + 70px);z-index:70;transform:translate(-50%,-20px);opacity:0;pointer-events:none;
  padding:10px 16px;border-radius:14px;background:#fff;color:#1a0228;font-weight:800;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .2s,transform .35s var(--ease);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.y{background:var(--y)}.toast.r{background:var(--r);color:#fff}.toast.g{background:var(--g)}

@media (min-height:820px){.guesses li{padding:11px 14px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:380px){
  .app{padding-left:10px;padding-right:10px}
  .ticker{margin:0 -10px}
  .ic{width:34px;height:36px}.ic svg{width:20px;height:20px}
  .brand{gap:7px}.brand img{width:34px;height:34px}
  .wordmark{font-size:19px}.kr{font-size:10px;letter-spacing:1.5px}
  .pips{gap:5px}
}

/* ================================================================ desktop
   Mesmo HTML; .stage vira "display:contents" e os filhos entram no grid da .app:
   frame grande à esquerda, painel de vidro à direita com palpites, busca e resultado. */
@media (min-width:1000px) and (min-height:560px){
  .app{max-width:min(1800px,100%);padding:10px clamp(20px,3vw,40px) 26px}
  body[data-view=game] #vGame{display:grid;column-gap:clamp(24px,3vw,44px);
    grid-template-columns:minmax(0,1fr) clamp(360px,28vw,430px);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"tick tick" "card meta" "card guesses" "pips dock"}
  .stage{display:contents}
  .top{height:72px}
  .brand img{width:50px;height:50px}
  .wordmark{font-size:28px}.kr{font-size:12px;letter-spacing:3px}
  .ic{width:46px;height:46px}.ic svg{width:23px;height:23px}
  .top .right{gap:6px}
  .ticker{grid-area:tick;justify-self:center;width:100vw;margin:0 0 22px;height:26px}
  #vGame{position:relative}
  .track{font-size:12px}
  /* painel lateral: pseudo-elemento da grade atrás de meta/palpites/doca */
  #vGame::before{content:"";grid-column:2;grid-row:2/5;z-index:-1;border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(255,179,224,.16);
    box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .meta{grid-area:meta;padding:22px 22px 6px}
  .meta .pill{font-size:13px;padding:6px 12px}
  .guesses{grid-area:guesses;margin:0;padding:10px 22px;gap:8px;mask:none;-webkit-mask:none}
  .guesses li{padding:12px 14px;font-size:15px}
  .dock,.result{grid-area:dock;padding:8px 22px 22px}
  .result{padding-top:4px}
  .rsong{font-size:32px}
  .sugg{left:22px;right:22px;max-height:min(52vh,420px)}
  .cardwrap{grid-area:card;align-items:flex-end;min-height:0}
  .card{border-radius:26px;padding:4px;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--soft),box-shadow .4s}
  .card.tilting{transition:transform .08s linear,box-shadow .4s}
  .frame{border-radius:22px}.holo{inset:4px;border-radius:22px}
  .badge{left:16px;top:16px;font-size:12px;padding:6px 11px 6px 10px}
  .zoom{right:14px;top:14px;width:40px;height:40px}
  .nav{width:52px;height:80px;margin-top:-40px;font-size:46px;pointer-events:auto;cursor:pointer;border-radius:16px;transition:opacity .25s,background .2s}
  .nav.show{opacity:.55}.nav.show:hover{opacity:1;background:rgba(0,0,0,.35)}
  .nav:not(.show){pointer-events:none}
  .pipsWrap{grid-area:pips;padding:16px 0 0;align-self:end}
  .pips{gap:12px}
  .pip{border-radius:14px;cursor:pointer}
  .pip.open:hover{transform:translateY(-4px) scale(1.04);border-color:var(--bub)}
  .pip.cur:hover{transform:translateY(-5px) scale(1.04)}
  .diffscale{margin-top:10px}
  .keys{display:flex;justify-content:center;gap:18px;margin-top:12px;font-size:12px;color:var(--dim);font-weight:600}
  .keys kbd{font:800 11px var(--ui);color:var(--mute);padding:3px 7px;margin-right:6px;border-radius:7px;border:1px solid var(--line);border-bottom-width:2px;background:rgba(255,255,255,.05)}
  /* modais centralizados em vez de folha de baixo */
  .sheet{align-items:center}
  .panel{max-width:500px;border-radius:28px;border-bottom:1px solid rgba(255,179,224,.18);padding:30px 28px 28px;animation:pop2 .4s var(--ease) both}
  .sheet.closing .panel{animation:popOut .2s cubic-bezier(.4,0,1,1) both}
  @keyframes popOut{to{transform:translateY(12px) scale(.95);opacity:0}}
  .panel::before{display:none}
  .agrid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .toast{top:96px}
  @keyframes pop2{from{transform:translateY(16px) scale(.94);opacity:0}}
}
@media (min-width:1000px) and (min-height:560px) and (hover:hover){
  .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,179,224,.35)}
  .btn.primary:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 14px 34px -8px rgba(255,45,149,.9),inset 0 1px 0 rgba(255,255,255,.7)}
  .aday:hover{transform:translateY(-3px);border-color:var(--bub)}
  .card:hover .holo{opacity:.85;animation:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),rgba(180,140,255,.12) 25%,transparent 55%)}
}

/* imagem do artista */
.av.img,.rav{overflow:hidden;background:#fff;padding:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 4px 12px -4px rgba(0,0,0,.5)}
.av.img img,.rav img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;animation:avIn .3s ease forwards}
.av.img.p,.rav.p{background:#2a0a45}.av.img.ld,.rav.ld{background:#1a0228}
@keyframes avIn{to{opacity:1}}
.rav{flex:none;width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;font:12px var(--disp);color:#1a0228;background:var(--c,#ff7ac6)}
.rav.img{background:#fff}
.opt.act .av.img,.opt:hover .av.img{box-shadow:0 0 0 2px var(--pink),0 4px 14px -4px rgba(255,45,149,.6)}

/* ================================================================ plataforma: telas */
section.view{flex:1;min-height:0;display:none;flex-direction:column}
body[data-view=home] #vHome,body[data-view=game] #vGame,body[data-view=album] #vAlbum{display:flex}
#vHome,#vAlbum{overflow-y:auto;overflow-x:hidden;margin:0 -14px;padding:0 14px calc(var(--safeB) + 18px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
#vHome::-webkit-scrollbar,#vAlbum::-webkit-scrollbar{display:none}
.app{padding-bottom:0}
body[data-view=game] .app{padding-bottom:calc(var(--safeB) + 10px)}
.only-sub,.only-game{display:none}
body[data-view=game] .only-sub,body[data-view=album] .only-sub,body[data-view=game] .only-game{display:grid}
body[data-view=album] .not-album{display:none}
body:not([data-view=home]) .brand img{width:34px;height:34px}
body[data-view=game] .wordmark,body[data-view=album] .wordmark{font-size:19px}
.ic{position:relative}
.nbadge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--hot);color:#fff;font:800 10.5px/17px var(--ui);text-align:center;
  box-shadow:0 0 0 2px var(--bg2),0 0 12px var(--hot);animation:bump 1.6s var(--ease) infinite}
svg .tiny{stroke-width:1.6}

/* ---------------------------------------------------------------- início */
.h-hero{padding:14px 2px 12px}
.h-date{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.h-hero h1{margin:4px 0 0;font-family:var(--disp);font-weight:400;font-size:clamp(24px,7vw,32px);line-height:1.1}
.h-hero h1 .k{font-family:var(--kr);font-size:.7em;color:var(--bub);margin-left:4px;letter-spacing:1px}
.h-packs{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px 12px 10px;margin-bottom:14px;border-radius:22px;
  background:linear-gradient(110deg,rgba(255,45,149,.28),rgba(107,61,255,.28));border:1.5px solid rgba(255,179,224,.45);position:relative;overflow:hidden;
  box-shadow:0 14px 40px -14px rgba(255,45,149,.8);animation:rise .6s var(--ease) both}
.h-packs::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-100%);animation:shine 2.6s ease-in-out infinite}
.h-packs .hp-pk{flex:none;width:58px}
.hp-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.hp-t small{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--bub)}
.hp-t b{font-family:var(--disp);font-weight:400;font-size:18px}
.hp-t span{font-size:12.5px;color:var(--mute)}
.btn.sm{height:40px;padding:0 16px;border-radius:13px;font-size:14px;flex:none}
.h-packs:active{transform:scale(.98)}
.h-games{display:grid;gap:14px}
.hg{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;color:inherit;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1.5px solid rgba(255,179,224,.2);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8);animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 90ms);transition:transform .3s var(--ease),border-color .3s}
.hg:active{transform:scale(.97)}
@media (hover:hover){.hg:hover{transform:translateY(-4px);border-color:rgba(255,179,224,.5)}}
.hg-art{position:relative;height:150px;overflow:hidden;background:#000}
.hg-art img{width:100%;height:100%;object-fit:cover;opacity:.85;transform:scale(1.04);transition:transform 6s ease}
.hg:hover .hg-art img{transform:scale(1.15)}
.hg.idol .hg-art img{object-position:50% 30%}
.hg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,1,25,0) 30%,rgba(20,3,36,.95));}
.hg.framed .hg-art::before,.hg.idol .hg-art::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:overlay;opacity:.5}
.hg.framed .hg-art::before{background:linear-gradient(120deg,#ff2d95,transparent 60%)}
.hg.idol .hg-art::before{background:linear-gradient(120deg,#5ce1ff,transparent 60%)}
.hg-ico{position:absolute;left:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--holo);color:#1a0228;box-shadow:0 8px 20px -6px rgba(0,0,0,.6)}
.hg-ico svg{width:24px;height:24px;stroke-width:2.2}
.hg-body{position:relative;margin-top:-46px;z-index:2;padding:0 16px 16px}
.hg-top{display:flex;gap:6px;margin-bottom:6px}
.hs{font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:99px;background:rgba(10,0,20,.6);backdrop-filter:blur(6px);border:1px solid var(--line)}
.hs.new{background:var(--hot);border-color:transparent;color:#fff;animation:bump 2s var(--ease) infinite}
.hs.win{color:var(--g);border-color:rgba(61,255,168,.4)}.hs.lost{color:var(--r);border-color:rgba(255,77,109,.4)}.hs.prog{color:var(--y);border-color:rgba(255,210,63,.4)}
.hs.fire{color:#ffd9a0}
.hg-name{display:block;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.05;background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
.hg-kr{font-family:var(--kr);font-size:12px;letter-spacing:2px;color:var(--bub)}
.hg-body p{margin:6px 0 12px;font-size:14px;color:var(--mute)}
.hg-foot{display:flex;align-items:center;justify-content:space-between}
.hg-sq{display:flex;gap:4px}
.hg-sq i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.1)}
.hg-sq i.win{background:var(--g)}.hg-sq i.wrong{background:var(--r)}.hg-sq i.artist{background:var(--y)}.hg-sq i.skip{background:var(--s)}
.hg-go{font-weight:800;font-size:15px;padding:9px 16px;border-radius:13px;background:linear-gradient(180deg,#ffd0ec,#ff7ac6 48%,#ff2d95 52%,#ff5fb4);color:#1a0228;box-shadow:0 8px 22px -8px rgba(255,45,149,.8)}
.hg.done .hg-go{background:var(--glass);color:#fff;border:1.5px solid var(--line);box-shadow:none}
.h-album{display:flex;align-items:center;gap:16px;width:100%;text-align:left;margin-top:14px;padding:16px;border-radius:24px;overflow:hidden;
  background:linear-gradient(120deg,rgba(255,210,63,.13),rgba(180,140,255,.12));border:1.5px solid rgba(255,210,63,.3);animation:rise .6s var(--ease) both;animation-delay:.2s}
.h-album:active{transform:scale(.98)}
.ha-fan{position:relative;flex:none;width:96px;height:96px}
.ha-fan>div{position:absolute;left:24px;top:2px;width:52px;transform-origin:50% 120%;transform:rotate(calc((var(--i) - 1) * 16deg)) translateY(calc(abs(var(--i) - 1) * 4px));
  animation:fanIn .7s var(--ease) both;animation-delay:calc(.3s + var(--i) * 80ms)}
.ha-fan>div:nth-child(2){z-index:2}
@keyframes fanIn{from{transform:rotate(0) translateY(20px);opacity:0}}
.ha-t{flex:1;display:flex;flex-direction:column;line-height:1.25}
.ha-t small{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--y)}
.ha-t>b{font-family:var(--disp);font-weight:400;font-size:18px}
.ha-t span{font-size:13px;color:var(--mute)}.ha-t span b{color:#fff;font-size:15px}
.bar{height:7px;border-radius:7px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#ff2d95,#ffd23f,#3dffa8);transition:width .8s var(--ease)}
.h-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 4px}

/* ---------------------------------------------------------------- recompensa no resultado */
#reward:empty{display:none}
.reward{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 12px 10px 10px;border-radius:18px;
  background:linear-gradient(110deg,rgba(255,210,63,.16),rgba(255,45,149,.16));border:1.5px solid rgba(255,210,63,.4)}
.reward.pop{animation:rwPop .8s var(--ease) both .2s}
@keyframes rwPop{0%{transform:scale(.6) translateY(20px);opacity:0}60%{transform:scale(1.05)}}
.reward .pk.mini{width:44px;flex:none}
.reward.pop .pk.mini{animation:pkWiggle 1.2s ease-in-out .9s 2}
@keyframes pkWiggle{20%{transform:rotate(-10deg) scale(1.08)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.rw-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.rw-t small{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--y)}
.rw-t b{font-family:var(--disp);font-weight:400;font-size:17px}
.rw-t span{font-size:12px;color:var(--mute)}
.reward.cons{background:rgba(180,140,255,.12);border-color:rgba(180,140,255,.35)}
.rw-ico{width:44px;height:44px;display:grid;place-items:center;font-size:24px;color:var(--y);border-radius:14px;background:rgba(255,210,63,.12)}
.rcredit{margin-top:6px;font-size:11.5px;color:var(--dim)}.rcredit a{color:var(--mute)}
.rbtns{grid-template-columns:1.3fr 1fr}
.rbtns #btnWatch[hidden]+#btnNext{grid-column:2}

/* ---------------------------------------------------------------- álbum */
.al-head{position:sticky;top:0;z-index:5;margin:0 -14px;padding:10px 14px 10px;background:linear-gradient(180deg,rgba(18,2,31,.97) 75%,rgba(18,2,31,0));backdrop-filter:blur(8px)}
.al-prog>div:first-child{display:flex;align-items:baseline;gap:4px}
.al-prog b{font-family:var(--disp);font-weight:400;font-size:30px}
.al-prog span{color:var(--mute);font-weight:700}.al-prog i{font-style:normal}
.al-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.al-btn{height:42px;border-radius:14px;font-weight:700;font-size:14px;background:var(--glass);border:1.5px solid var(--line)}
.al-btn b{font-family:var(--disp);font-weight:400}
.al-btn.hot{background:linear-gradient(110deg,rgba(255,45,149,.35),rgba(107,61,255,.35));border-color:rgba(255,179,224,.5);animation:bump 2s var(--ease) infinite}
.al-btn.star{color:var(--y);border-color:rgba(255,210,63,.35)}
.al-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.al-filters::-webkit-scrollbar{display:none}
.chip{flex:none;height:32px;padding:0 12px;border-radius:99px;font-weight:800;font-size:13px;background:var(--glass);border:1.5px solid var(--line);color:var(--mute)}
.chip small{font-weight:600;opacity:.7}
.chip.on{background:#fff;color:#1a0228;border-color:#fff}
.chip.r4{color:#ffd23f}.chip.r3{color:#c9b0ff}.chip.r2{color:#ff9ad3}.chip.r1{color:#9fd8ff}
.chip.on.r4,.chip.on.r3,.chip.on.r2,.chip.on.r1{color:#1a0228}
.al-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:6px}
@media (min-width:560px){.al-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.al-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  #vAlbum,#vHome{max-width:1100px;width:100%;margin:0 auto;padding:0 6px 30px}
  .al-head{margin:0;padding:10px 0}.al-filters{margin:0;padding:0}
  .h-games{grid-template-columns:1fr 1fr}.hg-art{height:220px}}
.al-empty{grid-column:1/-1;text-align:center;color:var(--mute);padding:40px 10px}

.tiers-legend{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px}
.tiers-legend span{font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;color:#1a0228}
.tiers-legend .t4{background:linear-gradient(120deg,#ffd86b,#fff3c4,#c99300)}.tiers-legend .t3{background:linear-gradient(120deg,#ff3d9a,#ffd23f,#3dffa8,#5ce1ff)}
.tiers-legend .t2{background:linear-gradient(120deg,#ff5fb4,#b48cff,#5ce1ff)}.tiers-legend .t1{background:linear-gradient(120deg,#dfe6f5,#9aa4b8)}.tiers-legend .t0{background:linear-gradient(120deg,#8b7bff,#5ce1ff)}
.credits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.credits b{color:#fff}.credits a{color:var(--bub)}
.how .n{font-family:var(--ui)}
/* início: nada encolhe, a tela rola */
#vHome>*,#vAlbum>*{flex:none}
/* cabeçalho do jogo: menos ícones, nome numa linha só */
.wordmark{white-space:nowrap}
body[data-view=game] #btnHelp{display:none}
body[data-view=game] .wordmark{font-size:18px}
body[data-view=game] .brand .kr{display:none}
.pill.help{cursor:pointer;color:#fff;padding:5px 9px}
body[data-game=idol] .cardwrap{flex-basis:min(calc(min(100vw - 28px, 532px) * 5 / 4), 44dvh)}
@media (min-width:1000px){body[data-game=idol] .cardwrap{flex-basis:auto}}
/* desktop: a regra .view acima não pode desfazer a grade do jogo */
@media (min-width:1000px) and (min-height:560px){ body[data-view=game] #vGame{display:grid} }
/* configurações */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;cursor:pointer}
.seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.seg button{padding:7px 11px;border-radius:9px;font-weight:800;font-size:13px;color:var(--mute)}
.seg button.on{background:#fff;color:#1a0228}
.sw{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:99px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.sw:checked{background:var(--hot)}.sw:checked::after{transform:translateX(20px)}
.link.danger{display:block;margin:14px auto 0;color:var(--r);font-size:13px}
.keys i,.legend i:not(.sq){font-style:normal}


/* ================================================================ revisão de UX (2026-10-09)
   tokens: texto secundário ≥ 4.5:1, rótulo mínimo 11px, alvo de toque ≥ 44px, foco visível,
   tudo que abre anima ao fechar, páginas com transição direcional. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--bub);outline-offset:3px}
.btn:focus-visible,.ic:focus-visible,.chip:focus-visible,.pip:focus-visible,.opt:focus-visible,.aday:focus-visible,.hg:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(255,61,154,.35)}
.panel:focus{outline:none}
.diffscale,.hp-t small,.ha-t small,.rw-t small,.next span,.rlabel,.kpis span,.legend,.keys{font-size:11px}
.kr{font-size:11px}
@media (min-width:381px){.ic{width:44px;height:44px}}
.pill.help{position:relative;min-width:32px;height:32px;display:grid;place-items:center;font-size:14px}
.pill.help::after{content:"";position:absolute;inset:-6px}
.link.center{display:block;margin:10px auto 0;font-weight:700;color:var(--mute);padding:10px 16px}

/* ---- transição entre páginas (View Transitions API; reserva em JS) */
.top{view-transition-name:topbar}
.bg{view-transition-name:bg}
::view-transition-old(bg),::view-transition-new(bg){animation:none}
::view-transition-old(bg){display:none}
::view-transition-group(topbar){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.9,.25,1)}
::view-transition-old(root){animation:vtFade .18s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtUp .36s cubic-bezier(.2,.9,.25,1) both}
html[data-nav=fwd]::view-transition-old(root){animation:vtOutL .22s cubic-bezier(.4,0,1,1) both}
html[data-nav=fwd]::view-transition-new(root){animation:vtInR .38s cubic-bezier(.2,.9,.25,1) both}
html[data-nav=back]::view-transition-old(root){animation:vtOutR .22s cubic-bezier(.4,0,1,1) both}
html[data-nav=back]::view-transition-new(root){animation:vtInL .38s cubic-bezier(.2,.9,.25,1) both}
@keyframes vtFade{to{opacity:0}}
@keyframes vtUp{from{opacity:0;transform:translateY(14px)}}
@keyframes vtOutL{to{opacity:0;transform:translateX(-36px)}}
@keyframes vtInR{from{opacity:0;transform:translateX(48px)}}
@keyframes vtOutR{to{opacity:0;transform:translateX(36px)}}
@keyframes vtInL{from{opacity:0;transform:translateX(-48px)}}

/* ---- lightbox fecha animado */
.lightbox.closing{animation:fadeOut .22s ease-in both}
.lightbox.closing img{animation:lbOut .22s ease-in both}
@keyframes lbOut{to{transform:scale(.88);opacity:0}}

/* ---- esqueletos de carregamento */
.hg.skel{height:290px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 70%);background-size:250% 100%;animation:skel 1.4s linear infinite;border-color:rgba(255,255,255,.08)}
@keyframes skel{from{background-position:120% 0}to{background-position:-120% 0}}
.frame{background:linear-gradient(100deg,#0b0114 30%,#1d0832 50%,#0b0114 70%);background-size:250% 100%;animation:skel 1.4s linear infinite}

/* ---- álbum: botão de pacotes pulsa por brilho (não gira) */
.al-btn.hot{animation:hotGlow 1.8s ease-in-out infinite}
@keyframes hotGlow{50%{box-shadow:0 0 0 3px rgba(255,61,154,.25),0 0 22px rgba(255,61,154,.55)}}
.hs.new{animation:newPulse 2s ease-in-out infinite}
@keyframes newPulse{50%{box-shadow:0 0 14px rgba(255,45,149,.7)}}

/* ---- celular: resultado sem a lista de palpites (as cores ficam nos quadrinhos) */
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rbtns #btnShare{grid-column:1/-1}
.rbtns:has(#btnWatch[hidden]) #btnShare{grid-column:auto}
@media (max-width:999px){
  body.result-ui .guesses{display:none}
  body.result-ui .stage{flex:none}
  body.result-ui .result{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}
  .rhead{padding:2px 0 10px}
  .rsong{font-size:clamp(22px,7vw,30px)}
}

/* ---- desktop: frame não encolhe quando o resultado aparece; álbum com cabeçalho em linha */
@media (min-width:1000px) and (min-height:560px){
  body[data-view=game] #vGame{grid-template-areas:"tick tick" "card meta" "card guesses" "card dock"}
  .cardwrap{grid-area:card;padding-bottom:168px;align-items:flex-start}
  .pipsWrap{grid-column:1;grid-row:4;align-self:end}
  .pip{aspect-ratio:auto;height:78px}
  .al-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 28px}
  .al-acts{display:flex;gap:10px;margin:0}
  .al-btn{padding:0 20px;height:46px}
  .al-filters{grid-column:1/-1}
  .al-prog .bar{max-width:520px}
}
@media (max-width:999px){ body.result-ui[data-game=idol] .cardwrap{flex-basis:min(36dvh, calc((100vw - 28px) * 5 / 4))} }

/* ================================================================ revisão 2 (parecer do avaliador) */
/* cabeçalho nunca estoura: ícones não encolhem, o nome corta com reticências */
.top .ic{flex:none}
.brand{min-width:0;flex:0 1 auto;overflow:hidden}
.wm{min-width:0}
.wordmark{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:420px){ body[data-view=game] .brand img,body[data-view=album] .brand img{display:none} }

/* títulos das folhas não passam por baixo do × */
.panel h3{padding-right:48px;text-wrap:balance}
.panel .x{width:44px;height:44px;top:12px;right:12px}
.op-x{width:44px;height:44px}

/* alvos de toque ≥ 44px (área invisível ao redor quando o desenho é menor) */
.pip::before{content:"";position:absolute;inset:-6px -2px}
.zoom::after,.chip::after,.seg button::after{content:"";position:absolute;inset:-6px}
.chip,.seg button{position:relative}
.chip{height:36px}
.seg button{min-height:38px}

/* contraste: selos rosa com texto branco usam rosa mais escuro (≥ 5:1) */
.hs.new,.nbadge{background:#d10f69}
.pc-new{background:#d10f69}

/* desabilitado é claramente desabilitado */
.btn:disabled,.btn[disabled]{opacity:.42;filter:saturate(.5);box-shadow:none;cursor:not-allowed}
.btn:disabled::before{display:none}
.btn.primary:disabled{filter:saturate(.5)}

/* badge do álbum pula uma vez (não fica pulsando) */
.nbadge{animation:none}
.nbadge.pop{animation:bump .6s var(--ease)}

/* letreiro pausa ao passar o mouse/tocar */
.ticker:hover .track,.ticker:active .track{animation-play-state:paused}

/* modo "Menos efeitos" (e prefers-reduced-motion): para tudo que se mexe sozinho */
body.calm .track,body.calm .brand img,body.calm .badge .rec,body.calm .card,body.calm .wordmark,body.calm .hg-name,body.calm .rsong,
body.calm .h-packs::after,body.calm .pk.float,body.calm .hs.new,body.calm .al-btn.hot,body.calm .guesses li.slot.up .ico,
body.calm .pc.r1::after,body.calm .pc.r2,body.calm .pc.r3,body.calm .pc.r4,body.calm .pc-glit,body.calm .blob,body.calm .btn.primary.ready::before{animation:none!important}
body.calm .floaters{display:none}

/* cards da home: corpo opaco que continua o degradê da imagem (sem emenda) */
.hg{background:linear-gradient(180deg,#2a0b46,#1d0736)}
.hg-art::after{background:linear-gradient(180deg,rgba(42,11,70,0) 25%,rgba(42,11,70,.85) 75%,#2a0b46)}
.hg.mystery .hg-art img{filter:blur(6px) saturate(.6) brightness(.7);transform:scale(1.15)}
.hg.mystery .hg-art::before{content:"?";position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:400 96px/1 var(--disp);color:rgba(255,255,255,.88);
  text-shadow:0 0 30px rgba(92,225,255,.8),0 6px 0 rgba(0,0,0,.25);mix-blend-mode:normal;opacity:1;background:radial-gradient(circle at 50% 45%,rgba(92,225,255,.25),transparent 60%);padding-bottom:30px}

/* resultado: quando há pacote, ele é o destaque */
.reward.cta{border-color:rgba(255,210,63,.75);box-shadow:0 10px 30px -10px rgba(255,210,63,.55)}
.reward.cta .btn{height:44px;padding:0 20px;font-size:15px}

/* álbum vazio com próximo passo */
.al-empty{display:flex;flex-direction:column;align-items:center;gap:14px}
.al-empty p{margin:0}

/* introdução: legenda dos pacotes com título; compacta em telas baixas */
.tiers-t{margin:14px 0 0;font-size:12px;font-weight:700;color:var(--mute)}
.tiers-legend{margin-top:8px}
@media (max-height:780px){
  .panel{padding-top:20px}
  .how{gap:7px}.how li{padding:9px 11px;font-size:13.5px}
  .lead{margin-bottom:10px;font-size:14px}
}

/* desktop: cabeçalho alinhado ao conteúdo; textos maiores; frame encostado nos quadrinhos; cabeçalho do álbum sem faixa */
@media (min-width:1000px) and (min-height:560px){
  body[data-view=home] .app,body[data-view=album] .app{max-width:1180px}
  #vAlbum,#vHome{max-width:none;padding-left:0;padding-right:0}
  .h-hero h1{font-size:38px}
  .hp-t b{font-size:22px}.hp-t span{font-size:14px}
  .hg-body p{font-size:15px}
  .ha-t>b{font-size:21px}.ha-t span{font-size:14px}
  .cardwrap{padding-bottom:156px;align-items:flex-end}
  .al-head{background:linear-gradient(180deg,rgba(18,2,31,.96) 65%,rgba(18,2,31,0));backdrop-filter:none;-webkit-backdrop-filter:none;padding-bottom:20px}
}
/* arquivo e estatísticas ficam junto do número do desafio (cabeçalho do jogo respira) */
.pill.icon{position:relative;display:grid;place-items:center;width:36px;height:32px;padding:0;color:var(--mute);transition:transform .2s var(--ease),color .2s,background .2s}
.pill.icon svg{width:17px;height:17px}
.pill.icon::after{content:"";position:absolute;inset:-6px -3px}
.pill.icon:active{transform:scale(.9)}
@media (hover:hover){.pill.icon:hover{color:#fff;background:rgba(255,255,255,.12)}}
@media (max-width:420px){ body[data-view=game] .brand img{display:block;width:32px;height:32px} }
@media (max-width:380px){ .ic{width:40px;height:44px} }
.ic::after{content:"";position:absolute;inset:-2px}
/* coluna esquerda do jogo: no celular não existe para o layout; no desktop frame + quadrinhos juntos, alinhados ao topo do painel */
.leftcol{display:contents}
@media (min-width:1000px) and (min-height:560px){
  .leftcol{display:flex;flex-direction:column;grid-area:card;min-height:0;gap:0}
  .leftcol .cardwrap{grid-area:auto;flex:0 1 auto;width:100%;aspect-ratio:var(--aw) / var(--ah);max-height:calc(100% - 150px);padding-bottom:0;align-items:flex-start}
  .leftcol .pipsWrap{grid-area:auto;align-self:stretch;padding-top:16px}
}
/* vendo o MV: sem reflexo nem inclinação por cima do vídeo */
.card:has(.frame.playing) .holo{display:none!important}
.card:has(.frame.playing){transform:none!important}
/* fundo: manchas de luz como degradê radial (mesmo visual) em vez de filter:blur(60px) — o blur era refeito a cada quadro */
.blob{filter:none!important;will-change:transform}
.b1{background:radial-gradient(circle,rgba(255,45,149,.95) 0%,rgba(255,45,149,.45) 35%,rgba(255,45,149,0) 70%)!important}
.b2{background:radial-gradient(circle,rgba(107,61,255,.95) 0%,rgba(107,61,255,.45) 35%,rgba(107,61,255,0) 70%)!important}
.b3{background:radial-gradient(circle,rgba(0,194,255,.9) 0%,rgba(0,194,255,.4) 35%,rgba(0,194,255,0) 70%)!important}
.floaters span{will-change:transform,opacity}
/* telas estreitas: a margem do app é 10px — as telas roláveis compensam 10px (não 14), senão a página fica 4px mais larga */
@media (max-width:380px){
  #vHome,#vAlbum{margin:0 -10px;padding-left:10px;padding-right:10px}
  .al-head{margin:0 -10px;padding-left:10px;padding-right:10px}
  .al-filters{margin:0 -10px;padding:0 10px}
}
html,body{overflow-x:hidden}

/* ================================================================ jogos de pistas e Idoldle */
.clues{display:none}
body[data-kind=clues] .frame>img,body[data-kind=dle] .frame>img,body[data-kind=clues] .badge,body[data-kind=dle] .badge,
body[data-kind=clues] .zoom,body[data-kind=dle] .zoom,body[data-kind=clues] .nav,body[data-kind=dle] .nav,
body[data-kind=clues] .pipsWrap,body[data-kind=dle] .pipsWrap{display:none!important}
body[data-kind=clues] .clues,body[data-kind=dle] .clues{display:flex;flex-direction:column;position:absolute;inset:0;overflow-y:auto;padding:14px 14px 16px;
  background:radial-gradient(120% 90% at 50% 0%,#3a0f5e,#1a0430 60%,#12021f);scrollbar-width:none}
body[data-kind=clues] .frame,body[data-kind=dle] .frame{animation:none;background:#14021f}
.clues::-webkit-scrollbar{display:none}
.cl-type{align-self:center;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid var(--line);margin-bottom:10px}
.cl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cl-list li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.cl-list li .n{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font:800 12px var(--ui);background:var(--holo);color:#1a0228}
.cl-list li.off{background:transparent;border-style:dashed;color:var(--dim)}
.cl-list li.off .n{background:rgba(255,255,255,.08);color:var(--dim)}
.cl-list li .lock{font-size:12.5px;font-weight:600}
.cl-list.emoji li.on .emo{font-size:clamp(26px,8vw,36px);letter-spacing:6px;line-height:1.1}
.cl-list li.on .tx{font-size:14.5px;font-weight:600;line-height:1.35}
.cl-list li.fresh{animation:clIn .55s var(--ease) both;border-color:rgba(255,179,224,.6);box-shadow:0 0 0 2px rgba(255,61,154,.25)}
@keyframes clIn{0%{opacity:0;transform:translateY(10px) scale(.94)}60%{transform:scale(1.03)}}
.cl-reveal{display:flex;align-items:center;gap:12px;padding:8px;margin-bottom:10px;border-radius:16px;background:rgba(61,255,168,.1);border:1px solid rgba(61,255,168,.4);animation:clIn .6s var(--ease) both}
.cl-reveal img{width:58px;height:78px;object-fit:cover;border-radius:10px;flex:none}
.cl-reveal b{display:block;font:400 20px var(--disp)}.cl-reveal span{color:var(--mute);font-weight:700}
body[data-kind=dle] .cl-reveal{flex-direction:column;justify-content:center;flex:1;margin:0;background:none;border:0}
body[data-kind=dle] .cl-reveal img{width:auto;height:min(60%,170px);aspect-ratio:2/3}
.dle-mys{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.dle-mys .q{font:400 64px/1 var(--disp);background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.dle-mys p{margin:0;max-width:300px;color:var(--mute);font-size:14px}
.dle-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);font-weight:700}
.dle-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
/* tabela do Idoldle */
.t-g{background:#1fae72}.t-y{background:#d9a614}.t-x{background:rgba(255,255,255,.12)}
.guesses .dle-head{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:0 2px;background:none;border:0;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);text-align:center;min-height:0}
.guesses .dle-row{flex-direction:column;align-items:stretch;gap:6px;padding:8px}
.dle-name{display:flex;align-items:center;gap:8px;font-size:14px}
.dle-name em{font-style:normal;color:var(--mute);font-weight:500}
.dle-row.win .dle-name .ico{background:var(--g);color:#14001f}
.dle-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.dle-cells span{min-height:40px;border-radius:9px;display:grid;place-items:center;text-align:center;padding:3px;font-size:11.5px;font-weight:800;color:#fff;line-height:1.1;word-break:break-word;
  animation:tileFlip .5s var(--ease) both;animation-delay:var(--d)}
.dle-cells .t-x{color:var(--mute)}
@keyframes tileFlip{from{transform:rotateX(90deg);opacity:0}}
.guesses li.dle-row .ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:900;background:rgba(255,255,255,.12)}
.opt .ty{margin-left:auto;font-style:normal;font-size:15px;opacity:.8}
/* arte da home dos jogos sem imagem */
.art-emo{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;letter-spacing:10px;background:radial-gradient(circle at 50% 40%,#5b1d8a,#1d0736 70%);padding-bottom:30px}
.art-dle{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:20px 22px 56px;background:radial-gradient(circle at 50% 40%,#173a5e,#1d0736 70%)}
.art-dle i{border-radius:7px;opacity:.85}
.art-facts{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#5e1d4a,#1d0736 70%);padding-bottom:30px}
.art-facts span{font:400 92px/1 var(--disp);color:rgba(255,255,255,.9);text-shadow:0 0 30px rgba(255,61,154,.8)}
.art-facts i{position:absolute;right:28%;top:22%;font-style:normal;font-size:40px;transform:rotate(-15deg)}
.hg-art img.ph{object-position:50% 25%}
.wordmark.long{font-size:15px!important;letter-spacing:0}
@media (min-width:1000px){ .wordmark.long{font-size:22px!important} }
.dle-cells span:first-child{font-size:9.5px;letter-spacing:-.2px;word-break:normal;overflow-wrap:anywhere;hyphens:none}
.dle-cells span:last-child{font-size:10px}
.al-search{display:flex;align-items:center;gap:8px;height:44px;margin:0 0 10px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid var(--line)}
.al-search:focus-within{border-color:var(--pink)}
.al-search svg{width:18px;height:18px;color:var(--mute);flex:none}
.al-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:600 16px var(--ui)}
.al-search input::placeholder{color:var(--dim)}
.al-acts{grid-template-columns:1fr 1fr}
.al-acts .tlb{grid-column:1/-1;color:var(--cyan);border-color:rgba(92,225,255,.35)}
@media (min-width:1000px) and (min-height:560px){ .al-search{grid-column:1/-1;margin:0} .al-acts .tlb{grid-column:auto} }
.clues img{position:static!important;inset:auto!important;width:58px!important;height:78px!important;object-fit:cover}
body[data-kind=dle] .cl-reveal img{width:auto!important;height:min(160px,40%)!important;aspect-ratio:2/3}
.dle-big{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dle-big .dle-head{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);text-align:center}
.dle-big .dle-row{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.dle-big .dle-row.new{animation:slideIn .45s var(--ease) both}
.dle-big .dle-cells span{min-height:52px;font-size:14px}
.dle-big .dle-cells span:first-child{font-size:12px}
.dle-big .dle-name{font-size:16px}
body[data-kind=dle] .cl-reveal{flex:none;flex-direction:row;justify-content:flex-start;margin-bottom:10px;background:rgba(61,255,168,.1);border:1px solid rgba(61,255,168,.4)}
body[data-kind=dle] .cl-reveal img{height:78px!important}
@media (min-width:1000px) and (min-height:560px){ body[data-kind=dle] .guesses li.dle-row,body[data-kind=dle] .guesses .dle-head{display:none} }

/* ================================================================ jogos novos no celular (2026-10-10) */
body[data-game=dle] .actions,body:has(#btnSkip[hidden]) .actions{grid-template-columns:1fr}
@media (max-width:999px){
  /* pistas: painel na largura toda, ocupando a altura livre; pistas trancadas finas; sem vagas repetidas embaixo */
  body[data-kind=clues] .stage .cardwrap{flex:1 1 0;min-height:220px;container-type:normal;display:block}
  body[data-kind=clues] .card{width:100%;height:100%;aspect-ratio:auto}
  body[data-kind=clues] .clues{padding:12px}
  body[data-kind=clues] .cl-list{gap:6px}
  body[data-kind=clues] .cl-list li.on{min-height:48px}
  body[data-kind=clues] .cl-list li.off{min-height:30px;padding:4px 12px}
  body[data-kind=clues] .cl-list li.off .n{width:18px;height:18px;font-size:10.5px}
  body[data-kind=clues] .cl-list.emoji li.on .emo{font-size:clamp(28px,9vw,38px)}
  body[data-kind=clues] .cl-list li.on .tx{font-size:15px}
  body[data-kind=clues] .guesses,body[data-kind=dle] .guesses{flex:0 1 auto;max-height:34dvh}
  body[data-kind=clues] .guesses li.slot:not(.up),body[data-kind=dle] .guesses li.slot:not(.up){display:none}
  body[data-kind=clues] .guesses li{padding:7px 12px;font-size:13.5px}
  body[data-kind=clues].typing .stage .cardwrap{min-height:160px}
  /* IDOLDLE: o mistério vira uma faixa curta; a tabela ganha a tela */
  body[data-kind=dle] .stage .cardwrap{flex:none;container-type:normal;display:block;min-height:0}
  body[data-kind=dle] .card{width:100%;aspect-ratio:auto;height:auto}
  body[data-kind=dle] .frame{height:auto}
  body[data-kind=dle] .clues{position:relative;inset:auto;padding:10px 14px}
  body[data-kind=dle] .dle-mys{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:4px 12px}
  body[data-kind=dle] .dle-mys .q{font-size:34px}
  body[data-kind=dle] .dle-mys p{flex:1;min-width:180px;font-size:13px;max-width:none}
  body[data-kind=dle] .dle-legend{width:100%}
  body[data-kind=dle] .guesses{flex:1 1 auto;max-height:none}
  body[data-kind=dle] .cl-reveal{margin:0}
  .guesses .dle-head{font-size:10px}
  .dle-cells{gap:5px}
  .dle-cells span{min-height:44px;font-size:12px}
  .dle-cells span:first-child{font-size:9.5px;letter-spacing:-.3px;word-break:normal;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:38px;padding:3px 2px}
}
@media (max-width:999px){
  /* pistas preenchem o painel por igual */
  body[data-kind=clues] .clues{display:flex;flex-direction:column}
  body[data-kind=clues] .cl-list{flex:1;min-height:0}
  body[data-kind=clues] .cl-list li{flex:1 1 0;max-height:76px}
  body[data-kind=clues] .cl-list li.off{max-height:40px}
  /* resultado: o painel continua grande (com a resposta no topo) e o resultado fica embaixo */
  body.result-ui[data-kind=clues] .stage{flex:1 1 auto;min-height:0}
  body.result-ui[data-kind=clues] .stage .cardwrap{min-height:180px}
  body.result-ui[data-kind=clues] .result{flex:none}
  body.result-ui[data-kind=clues] .cl-list li{max-height:52px}
  /* IDOLDLE: no resultado a tabela continua visível */
  body.result-ui[data-kind=dle] .stage{flex:1 1 auto;min-height:0}
  body.result-ui[data-kind=dle] .guesses{display:flex;flex:1 1 auto;max-height:none}
  body.result-ui[data-kind=dle] .result{flex:none}
  body.result-ui[data-kind=dle] .cl-reveal img{height:62px!important}
}
/* durante a transição de página, nada de animações de entrada próprias empilhadas (a página inteira já desliza) */
body.nav-in .hg,body.nav-in .h-packs,body.nav-in .h-album,body.nav-in .ha-fan>div,body.nav-in .result,body.nav-in #alGrid>.pc{animation:none!important}
body.nav-in .frame .fg.enter{opacity:1;transform:none;filter:none}
.nav-ghost{overflow:hidden!important;flex-direction:column}
.nav-ghost *{animation:none!important}
#vHome.settled .hg,#vHome.settled .h-packs,#vHome.settled .h-album,#vHome.settled .ha-fan>div{animation:none!important}

/* ================================================================ animações otimizadas (2026-10-10)
   Regra: o que roda sem parar só anima transform/opacity (a placa de vídeo faz sozinha, sem redesenhar).
   O que mexia em background-position / box-shadow / filter / visibility virou camada que gira/desliza ou muda opacidade. */
/* títulos com gradiente: brilho corre uma vez ao aparecer, não em loop */
.wordmark,.hg-name,.rsong{animation:sheen 2.4s cubic-bezier(.4,0,.2,1) 1 both}
/* borda holográfica do card do jogo: gradiente cônico GIRANDO numa camada atrás (transform) */
.card{background:#2a0b46;animation:none;isolation:isolate;overflow:hidden}
.card.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
.card::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,#ff5fb4,#ffb3e0,#b48cff,#5ce1ff,#ffd6f0,#ff5fb4);
  transform:translate(-50%,-50%) rotate(0deg);animation:ringSpin 9s linear infinite;will-change:transform}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.card.won::before{background:conic-gradient(from 0deg,#3dffa8,#b6ffe0,#5ce1ff,#3dffa8)}
.card .stamp{z-index:6}
/* "carregando" só enquanto a imagem não chegou */
.frame.ready{animation:none;background:#000}
.hg.skel{animation:skelT 1.4s linear infinite;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.hg.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:translateX(-100%);animation:skelSlide 1.4s linear infinite}
@keyframes skelSlide{to{transform:translateX(100%)}}
@keyframes skelT{}
/* pulso dos selos e do botão de pacotes: halo numa camada que muda só opacidade */
.hs.new,.al-btn.hot{animation:none;position:relative}
.hs.new::after,.al-btn.hot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;animation:haloPulse 2s ease-in-out infinite;will-change:opacity}
.hs.new::after{box-shadow:0 0 14px rgba(255,45,149,.75)}
.al-btn.hot::after{box-shadow:0 0 0 3px rgba(255,61,154,.25),0 0 22px rgba(255,61,154,.55)}
@keyframes haloPulse{50%{opacity:1}}
/* ponto REC: pisca por opacidade */
.badge .rec{animation:recBlink 1.2s steps(1,end) infinite}
@keyframes recBlink{50%{opacity:.15}}
/* manchas do fundo: camada própria, sem repintar */
.blob{will-change:transform;backface-visibility:hidden}
.floaters span{will-change:transform,opacity}
/* banner de pacotes: brilho desliza com transform (já era), garantir camada */
.h-packs::after{will-change:transform}
body.calm .card::before{animation:none}
/* troca de frame: só opacidade + escala (blur/brightness animado em imagem grande engasga no celular) */
.frame .fg{transition:opacity .32s var(--soft),transform .5s var(--soft)}
.frame .fg.enter{opacity:0;transform:scale(1.06);filter:none}
/* janelas: fundo escurece sem backdrop-filter animando junto */
.sheet{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,0,12,.72)}
.mcard{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,0,12,.86)}
.panel,.mc-box{will-change:transform}

/* ================================================================ conta */
.set-acc{margin:6px 0 4px;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.acc-in p{margin:0 0 10px;font-size:14px;color:var(--mute)}
.btn.google{width:100%;background:#fff;color:#1f1f1f;font-weight:700;gap:10px;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.btn.google.sm{width:auto;padding:0 14px}
.g-ico{width:20px;height:20px;flex:none}
.acc-me{display:flex;align-items:center;gap:12px}
.acc-me img,.acc-av{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:var(--holo);display:grid;place-items:center;color:#1a0228;font-weight:900}
.acc-me>div{flex:1;min-width:0;display:flex;flex-direction:column}
.acc-me b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-st{font-size:12px;color:var(--mute)}.acc-st.ok{color:var(--g)}.acc-st.error{color:var(--y)}
.al-account[hidden]{display:none}
.al-account{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:8px 8px 8px 14px;border-radius:14px;
  background:linear-gradient(110deg,rgba(92,225,255,.14),rgba(180,140,255,.14));border:1px solid rgba(92,225,255,.35);font-size:13.5px;font-weight:700}
.acc-dot{position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 0 2px var(--bg2)}
.acc-dot.syncing{background:var(--cyan)}.acc-dot.error{background:var(--y)}

/* ---- jogada esperando o servidor */
#btnGuess.wait{pointer-events:none;opacity:.75;position:relative;color:transparent}
#btnGuess.wait::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- pedir login (anônimo tentou abrir/guardar/trocar) */
.login-panel{text-align:center}
.login-panel .lead{margin:6px 0 18px}
.login-panel .btn.google{margin-bottom:6px}
.login-panel .link{display:block;margin:6px auto 0}
.ml-art{display:flex;justify-content:center;gap:10px;margin:4px 0 6px;font-size:22px}
.ml-art span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--holo);color:#1a0228;font-weight:900;box-shadow:0 8px 22px -10px rgba(255,95,180,.8)}
.ml-art span:nth-child(2){transform:translateY(-6px) rotate(6deg)}.ml-art span:nth-child(1){transform:rotate(-8deg)}.ml-art span:nth-child(3){transform:rotate(8deg)}
/* resumo do pacote para quem ainda não entrou */
.sum-keep{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--mute);text-align:center;flex-basis:100%}
.op-acts .sum-keep{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.op-acts{flex-wrap:wrap;justify-content:center;width:max-content;max-width:min(92vw,520px)}
.sum-b .btn.google{flex:1 1 100%;width:100%}
.sum-b .btn.google + .btn{flex:1 1 100%}
.op-acts .btn.google{min-width:260px}
.sum-b .btn.google,.sum-b .btn.google + .btn{max-width:none}