:root{
  --gold:#e2b84e;--bg:#020608;--cyan:#35d8ff;--red:#ff5143;--green:#68e46a;
  --panel:rgba(3,10,13,.92);--line:rgba(226,184,78,.34)
}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:#fff}
html,body{overflow:hidden}button{font:inherit;color:inherit}.screen{display:none;position:fixed;inset:0}.screen.active{display:block}

/* HOME */
#home{overflow:auto}
.homeBg{position:fixed;inset:0;background:url("/modulos/jogos/danca-festival/assets/img/ui/keyart.webp") center/cover no-repeat;filter:blur(1px) brightness(.42);transform:scale(1.01)}
.homeShade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.68) 48%,rgba(0,0,0,.86))}
.brand{position:sticky;top:0;z-index:30;height:68px;padding:9px clamp(14px,2vw,28px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#020608f2;backdrop-filter:blur(14px)}
.brand b{font-size:clamp(20px,1.8vw,27px);color:var(--gold);letter-spacing:.05em}.brand span{display:block;font-size:9px;letter-spacing:.25em}
.brand button,.hud button,#homeBtn{border:1px solid #ffffff25;background:#081014df;padding:9px 13px;border-radius:11px;cursor:pointer}
.homeContent{position:relative;z-index:2;width:min(1520px,100%);min-height:calc(100dvh - 68px);margin:auto;padding:clamp(16px,2.3vh,30px) clamp(18px,3vw,46px);display:grid;grid-template-columns:minmax(290px,.65fr) minmax(720px,1.35fr);gap:clamp(20px,3vw,44px);align-items:center}
.intro>span,.selector>h3,.lyricsPanel small{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:900}
.intro h1{font-size:clamp(52px,5.6vw,90px);line-height:.82;margin:12px 0 18px}.intro h1 em{font-style:normal;color:var(--gold)}.intro p{max-width:520px;font-size:clamp(14px,1vw,17px);line-height:1.5;color:#d7d7d7}
.selector{background:#020608e8;border:1px solid var(--line);border-radius:22px;padding:14px;backdrop-filter:blur(12px);min-width:0}
.characters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:10px}
.char{padding:6px;min-width:0;border-radius:13px;border:1px solid #ffffff18;background:linear-gradient(180deg,#0b1215,#05090b);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:.18s}
.char:hover{transform:translateY(-2px);border-color:#ffffff38}.char.selected{border-color:var(--gold);box-shadow:0 0 24px #d8b85b42}
.char img{width:100%;height:clamp(125px,17dvh,180px);display:block;object-fit:contain;object-position:center;background:#020608;border-radius:8px}
.char b{display:flex;align-items:center;justify-content:center;min-height:31px;font-size:clamp(9px,.72vw,11px);line-height:1.1;padding:5px 2px 1px;text-align:center}
.songBox{margin-top:12px;border:1px solid var(--line);border-radius:15px;padding:12px 14px;background:linear-gradient(135deg,#10161a,#070b0e)}
.songBox small{color:var(--gold);font-weight:900}.songBox h2{font-size:clamp(16px,1.35vw,20px);margin:4px 0}.songBox h2 b{color:var(--gold)}.songBox p{font-size:11px;color:#aaa;margin:4px 0 7px}
.gold{border:0;background:linear-gradient(135deg,#f1d26f,#b38021);color:#0d0904;padding:12px 18px;border-radius:999px;font-weight:1000;cursor:pointer}

/* HUD */
.hud{height:64px;display:grid;grid-template-columns:96px minmax(0,1fr) 118px;align-items:center;padding:7px 14px;background:#020608f4;border-bottom:1px solid #ffffff14;position:relative;z-index:10}
.track{text-align:center;min-width:0}.track b,.track span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track b{display:block;font-size:14px}.track span{display:block;font-size:11px;color:var(--gold)}
.score{text-align:right}.score b{font-size:25px;color:var(--gold)}.score small{display:block;font-size:8px}

/* DESKTOP GAME: 19% / 31% / 50% */
.stage{position:absolute;top:64px;bottom:56px;left:0;right:0;padding:10px;overflow:hidden}
.arenaBg{position:absolute;inset:0;background:url("/modulos/jogos/danca-festival/assets/img/ui/keyart.webp") center 43%/cover no-repeat;filter:brightness(.14) saturate(1.15) blur(2px)}
.gameColumns{position:relative;z-index:2;width:100%;height:100%;display:grid;grid-template-columns:minmax(220px,19fr) minmax(350px,31fr) minmax(560px,50fr);gap:10px}
.lyricsPanel,.performerPanel,.lanes{min-width:0;min-height:0;border:1px solid var(--line);background:var(--panel);border-radius:20px;overflow:hidden;backdrop-filter:blur(8px)}

.lyricsPanel{padding:17px;display:flex;flex-direction:column}
.panelTitle{border-bottom:1px solid #ffffff12;padding-bottom:10px}.panelTitle span{display:block;font-size:8px;color:#68777a;margin-top:3px;letter-spacing:.12em}
.lyricsPanel #lyricsNow{font-size:clamp(17px,1.35vw,24px);line-height:1.33;margin:15px 0;color:#fff;min-height:86px;display:flex;align-items:center}
.statsMini{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto}
.statsMini span{font-size:9px;color:#aaa;border:1px solid #ffffff10;border-radius:10px;padding:8px;background:#03080a}.statsMini b{display:block;font-size:clamp(17px,1.35vw,24px);color:var(--gold);margin-top:3px}
.howMini{margin-top:10px;border-top:1px solid #ffffff12;padding-top:10px;color:#9aa5a5;font-size:10px;line-height:1.4}.howMini b{color:#fff;font-size:9px;letter-spacing:.12em}.howMini p{margin:5px 0}.howMini div{color:var(--gold);font-weight:800}

.performerPanel{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 43%,rgba(28,119,135,.22),rgba(2,7,9,.94) 69%)}
.spot{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(42,210,241,.15),transparent 62%)}
.dancerWrap{position:relative;width:96%;height:94%;z-index:2;display:flex;align-items:center;justify-content:center}
.dancerWrap img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 28px 24px #000c)}
#judge{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);font-size:clamp(28px,2.8vw,52px);font-weight:1000;text-shadow:0 4px 25px #000;opacity:0;white-space:nowrap;z-index:4}.judgePop{animation:jp .45s}
.performerLabel{position:absolute;left:12px;bottom:10px;z-index:4;background:#020608df;border:1px solid #ffffff18;border-radius:10px;padding:7px 10px}.performerLabel small{display:block;font-size:7px;color:#778387}.performerLabel b{font-size:12px;color:var(--gold)}

.lanes{position:relative;background:linear-gradient(180deg,rgba(3,9,12,.98),rgba(3,8,10,.94));box-shadow:inset 0 0 70px rgba(53,216,255,.04)}
.laneHeader{position:absolute;left:16px;top:11px;z-index:4}.laneHeader small{display:block;color:#718085;font-size:7px;letter-spacing:.15em}.laneHeader b{font-size:10px;color:var(--gold);letter-spacing:.08em}
.targetLine{position:absolute;left:3%;right:3%;top:18%;height:5px;background:var(--gold);box-shadow:0 0 24px var(--gold)}
.targets{position:absolute;top:6.5%;left:1.5%;right:1.5%;display:grid;grid-template-columns:repeat(4,1fr);z-index:3}
.targets i{font-style:normal;font-size:clamp(50px,4.5vw,78px);text-align:center;color:var(--gold);filter:drop-shadow(0 0 16px var(--gold))}
#notes{position:absolute;inset:0}.note{position:absolute;width:25%;left:0;text-align:center;font-size:clamp(50px,4.5vw,78px);font-weight:1000;will-change:transform;filter:drop-shadow(0 0 11px currentColor)}
.note.l0{color:var(--cyan)}.note.l1{color:var(--red)}.note.l2{color:var(--green)}.note.l3{color:#ffbd28}

/* BOTTOM */
.bottom{position:absolute;bottom:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:center;gap:22px;background:#020608f3;border-top:1px solid #ffffff14;z-index:8}
.energy{width:min(600px,55vw);height:10px;background:#ffffff12;border-radius:99px;overflow:hidden}.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width .2s}
.controlsText{font-size:10px;color:#888}.mobile{display:none}.mobile button{flex:1;background:#071117f8;border:1px solid #ffffff20;font-size:34px}
.mobile button:nth-child(1){color:var(--cyan)}.mobile button:nth-child(2){color:var(--red)}.mobile button:nth-child(3){color:var(--green)}.mobile button:nth-child(4){color:#ffbd28}
#countdown{position:absolute;inset:0;display:none;place-items:center;background:#020608e2;z-index:30;font-size:min(18vw,180px);color:var(--gold);font-weight:1000}

/* RESULT */
#result{background:radial-gradient(circle at 50% 30%,#164550,#020608 70%)}#result.active{display:grid;place-items:center}.resultCard{width:min(520px,92vw);padding:36px;text-align:center;border:1px solid #d8b85b66;background:#061015ee;border-radius:26px}.resultCard>span{color:var(--gold);letter-spacing:.2em;font-size:10px}.resultCard h2{font-size:110px;line-height:1;margin:18px;color:var(--gold)}.resultCard h1{font-size:42px}.resultCard button{width:100%;margin-top:9px}#homeBtn{width:100%}
@keyframes jp{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1)}}

/* NOTEBOOKS 1366×768 etc. */
@media (min-width:1001px) and (max-height:820px){
  .homeContent{padding-top:12px;padding-bottom:12px;grid-template-columns:minmax(260px,.55fr) minmax(720px,1.45fr)}
  .intro h1{font-size:50px;margin:8px 0 12px}.intro p{font-size:13px}.char img{height:118px}.char b{min-height:27px;font-size:9px}.songBox{padding:9px 12px}.songBox p{display:none}
  .hud{height:58px}.stage{top:58px;bottom:50px;padding:7px}.bottom{height:50px}
  .gameColumns{grid-template-columns:minmax(205px,18fr) minmax(320px,30fr) minmax(540px,52fr);gap:7px}
  .lyricsPanel{padding:12px}.lyricsPanel #lyricsNow{font-size:16px;min-height:60px;margin:10px 0}.howMini{font-size:9px}
  .targets i,.note{font-size:clamp(46px,4vw,66px)}
  .dancerWrap{height:96%}
}

/* TABLET */
@media(max-width:1000px){
  #home{overflow:auto}.homeContent{display:block;padding:18px}.intro{margin-bottom:17px}.intro h1{font-size:54px}.intro p{max-width:none}
  .characters{grid-template-columns:repeat(5,1fr)}.char img{height:150px}
  .hud{height:66px;grid-template-columns:76px 1fr 80px;padding:6px 8px}.score b{font-size:20px}.track b{font-size:12px}.track span{font-size:10px}
  .stage{top:66px;bottom:132px;padding:6px}.gameColumns{grid-template-columns:34% 66%;gap:6px}.lyricsPanel{display:none}.performerPanel{grid-column:1}.lanes{grid-column:2}
  .targets i,.note{font-size:clamp(40px,7vw,60px)}
  .bottom{bottom:66px;height:66px;padding:0 9px}.controlsText{display:none}.mobile{display:flex;position:absolute;left:0;right:0;bottom:0;height:66px;z-index:12}
}

/* MOBILE */
@media(max-width:640px){
  .brand{height:62px;padding:8px 12px}.brand b{font-size:18px}.brand span{font-size:7px}
  .homeContent{min-height:calc(100dvh - 62px);padding:13px}.intro h1{font-size:44px}.intro p{font-size:14px}
  .selector{padding:10px}.characters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.char img{height:220px}.char b{font-size:11px}
  .songBox{position:sticky;bottom:6px;z-index:8;box-shadow:0 -12px 24px rgba(0,0,0,.65)}
  .stage{bottom:126px;padding:4px}.gameColumns{grid-template-columns:38% 62%;gap:4px}.performerPanel,.lanes{border-radius:12px}
  .dancerWrap{width:100%;height:88%}.performerLabel{left:4px;right:4px;bottom:4px;padding:4px 6px}.performerLabel b{font-size:9px}
  .laneHeader{left:6px;top:4px}.targets{top:7%}.targetLine{top:18%}.targets i,.note{font-size:clamp(30px,11vw,48px)}
  .bottom{height:60px;bottom:66px}.energy{width:84vw}.mobile{height:66px}.mobile button{font-size:28px}
}