*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#081424;color:#eaf8ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffe388;outline-offset:2px}.hidden{display:none!important}.app{position:relative;height:100dvh;width:100%;overflow:hidden}.start,.game{width:100%;height:100%;display:flex;flex-direction:column}.start{align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px 14px;isolation:isolate}.cover-img,.cover{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}.cover{z-index:-1;background:linear-gradient(140deg,#061020dd,#081528c6,#0c2033df)}.badge{background:#20a872c2;color:white;border-radius:22px;padding:8px 14px;font-size:12px;font-weight:800;letter-spacing:.06em}h1{font-weight:950;font-size:clamp(30px,7vw,65px);line-height:.98;margin:10px 0 0;letter-spacing:.01em;text-shadow:0 4px 5px #000}h1 span{color:#ffe291;font-size:.6em}.lead{max-width:760px;font-size:clamp(13px,2.35vw,18px);line-height:1.45;background:#0a1a2ec8;border:1px solid #4c708655;border-radius:16px;padding:14px 18px;box-shadow:0 10px 30px #0004}.quick{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.quick b{background:#152b4abf;border:1px solid #46708d;border-radius:999px;padding:8px 12px;font-size:12px}.hint{max-width:750px;color:#b5cddd;font-size:11px;line-height:1.4}.mainbtn,.ghost{border:1px solid #bafde8;border-radius:12px;background:linear-gradient(#40d3a0,#139a70);font-size:16px;color:#032b25;padding:13px 22px;font-weight:900;min-height:46px}.mainbtn:disabled{filter:grayscale(1);opacity:.5;cursor:wait}.ghost{color:#e6f6ff;background:#1b395b;border-color:#58819c}.game{background:#08152c}.scene{position:relative;width:100%;flex:1;min-height:1px;overflow:hidden;background:#163052}.scene canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.hud{position:absolute;inset:0;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:5px;padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));pointer-events:none}.hudbox{background:#06182fc7;border:1px solid #7096b361;border-radius:8px;padding:6px 11px;min-width:65px;text-align:center;box-shadow:0 2px 7px #0005}.hudbox small{display:block;color:#a9c6d8;font-size:clamp(8px,1.4vw,11px);font-weight:800;white-space:nowrap}.hudbox strong{display:block;font-size:clamp(13px,2.4vw,22px);line-height:1.2;white-space:nowrap}.hearts{color:#ff6477;letter-spacing:3px}.region{position:absolute;top:56px;left:50%;transform:translateX(-50%);background:#081a35df;border-radius:12px;padding:4px 13px;color:#ffe49e;font-size:12px;font-weight:800;white-space:nowrap}.story{position:absolute;top:87px;left:50%;transform:translateX(-50%);max-width:min(76vw,610px);padding:6px 12px;border-radius:10px;background:#071a31e3;border:1px solid #c4f2ba55;text-align:center;font-size:12px;opacity:0;transition:opacity .25s}.story.show{opacity:1}.story b{display:block;color:#ffe79b}.combo-label{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);color:#ffe28f;text-shadow:2px 2px 2px #000;font-size:clamp(18px,3vw,27px);font-weight:950;white-space:nowrap}.combo-label:empty{display:none}.pausebtn{position:absolute;top:87px;right:12px;pointer-events:auto;background:#06172cc9;color:white;border:1px solid #8ac6cf99;border-radius:9px;width:44px;height:40px;font-size:19px}.touchbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px max(10px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left));background:#071326;min-height:85px}.group{display:flex;align-items:center;gap:9px}.touch{border-radius:16px;background:linear-gradient(#1d6d8a,#174560);border:2px solid #7ac5d8;color:white;min-height:68px;min-width:88px;font-size:23px;font-weight:900;box-shadow:inset 0 1px #b6faff66,0 3px #04101c;touch-action:none;user-select:none}.touch span{display:block;font-size:10px;line-height:1.1;margin-top:4px;letter-spacing:.04em}.jump{min-width:110px;background:linear-gradient(#42a883,#196d4a)}.attack{min-width:115px;background:linear-gradient(#a76537,#72391a);border-color:#ffc28f}.special{min-width:103px}.touch.pressed{transform:translateY(3px);box-shadow:none}.screen-cover{position:absolute;inset:0;z-index:30;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:#04101ddd;padding:8px;overflow:auto}.modal{text-align:center;width:min(660px,98vw);background:#102641f9;border:2px solid #6da2ae;border-radius:18px;padding:20px 24px;box-shadow:0 12px 40px #000a}.modal h2{font-size:clamp(20px,3vw,32px);margin:4px 0 12px;color:#ffe69c}.modal p{line-height:1.45;font-size:14px}.results{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.stat{min-width:100px;background:#05162d9c;border-radius:10px;padding:9px}.stat b{display:block;font-size:24px;color:#a6ffe5}.stat span{display:block;font-size:12px;color:#bad0da}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:15px}.caption,.summary{font-size:11px;color:#afc6d1!important}.summary{margin-top:8px}@media(orientation:landscape) and (max-height:620px){.touchbar{position:absolute;pointer-events:none;bottom:0;left:0;right:0;z-index:4;background:none;border:0;padding-bottom:max(5px,env(safe-area-inset-bottom))}.group{pointer-events:auto}.touch{min-height:59px;min-width:68px;font-size:18px;border-radius:11px}.touch span{font-size:8px}.jump{min-width:85px}.attack{min-width:83px}.special{min-width:76px}.story{top:75px}.region{top:49px}.pausebtn{top:92px;right:8px}.modal{padding:10px}.modal p{font-size:12px;margin:6px}.actions{margin-top:8px}}@media(orientation:portrait){.scene{height:56.25vw;max-height:56.25vw;flex:none;margin:auto 0}.hudbox{padding:3px 4px}.hudbox strong{font-size:11px}.hudbox small{font-size:7px}.region{top:36px;font-size:9px}.story{top:55px;font-size:9px}.pausebtn{top:48px;right:3px;height:30px;width:30px}.screen-cover{position:fixed}.touchbar{margin-top:auto}.game{justify-content:center}.start{gap:5px}.lead{font-size:13px}}

/* Alpha 0.8.1: visible preload feedback on mobile and desktop. */
.loading-area{display:flex;flex-direction:column;align-items:center;gap:5px;width:min(370px,86vw);font-size:12px;color:#b9d9ef}
.loading-area progress{width:100%;height:10px;accent-color:#31d39d;border:0;border-radius:7px;overflow:hidden}
.loading-warning{max-width:460px;padding:7px 10px;margin:2px auto;background:#442c16e8;border:1px solid #ffc176;border-radius:9px;color:#ffe7ba;font-size:11px}
.loading-warning[hidden]{display:none}

/* Alpha 0.8.2 — SUPER PONTOS e relatório dos 13 bônus coletados. */
.bonus-score{border-color:#ffe37b99;background:#4f3b13d9}
.bonus-score strong{color:#ffe57f}
.screen-cover{align-items:safe center;overscroll-behavior:contain}
.screen-cover .modal{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
.bonus-panel{text-align:left;margin:11px auto 3px;background:#081b34bd;border:1px solid #729caf77;border-radius:12px;padding:11px}
.bonus-panel h3{margin:0 0 9px;color:#ffe199;text-align:center;font-size:14px}
.bonus-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.bonus-entry{display:flex;align-items:center;gap:7px;border-radius:8px;background:#132d4a;padding:5px 7px;min-width:0}
.bonus-entry .emblem{width:30px;height:30px;flex:none;object-fit:contain;image-rendering:pixelated}
.bonus-entry .emblem-placeholder{border-radius:6px;background:#204567;color:#e5dc8d;display:grid;place-items:center;font-size:16px}
.bonus-entry .bonus-name{font-size:11px;flex:1;min-width:0;overflow-wrap:anywhere}
.bonus-entry .bonus-count{flex:none;min-width:24px;text-align:right;color:#aef9d7;font-weight:900}
.bonus-entry.missing{opacity:.72}
@media (max-width:530px){.bonus-results{grid-template-columns:1fr}.bonus-panel{padding:6px}.bonus-entry{padding:3px 5px}}
@media (orientation:landscape) and (max-height:620px){.screen-cover{align-items:flex-start}.screen-cover .modal{margin:auto;max-height:calc(100dvh - 10px)}.bonus-results{grid-template-columns:repeat(3,minmax(0,1fr))}.bonus-entry .bonus-name{font-size:10px}}
.screen-cover .modal .actions{position:sticky;bottom:0;z-index:1;padding:8px 0 4px;background:#102641;box-shadow:0 -6px 12px #102641b0}

/* Alpha 0.8.3 · Barra de vida só durante os encontros com chefes. */
.boss-hud{position:absolute;top:122px;left:50%;transform:translateX(-50%);width:min(430px,65vw);max-width:100%;
 background:#09111de8;border:1px solid #e3a459;border-radius:10px;padding:7px 12px;z-index:4;box-shadow:0 5px 15px #0008}
.boss-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#ffdfaa}
.boss-head b{max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boss-head span{font-weight:800;white-space:nowrap}
.boss-hud progress{display:block;margin-top:6px;width:100%;height:12px;border:0;accent-color:#ee7151;background:#1c2839;border-radius:6px;overflow:hidden}
@media(orientation:portrait){.boss-hud{top:72px;width:65vw;padding:3px 6px}.boss-head{font-size:8px}.boss-hud progress{margin-top:2px;height:6px}}
@media(orientation:landscape) and (max-height:620px){.boss-hud{top:117px;padding:4px 7px}}
.boss-hud progress::-webkit-progress-value{background:linear-gradient(90deg,#ee5b40,#ffd36a);border-radius:6px}
.boss-hud progress::-webkit-progress-bar{background:#253346;border-radius:6px}
.boss-hud progress::-moz-progress-bar{background:linear-gradient(90deg,#ee5b40,#ffd36a);border-radius:6px}


/* Alpha 0.8.4 · desktop controls and safer canvas framing */
@media (min-width: 860px){
  .touchbar{min-height:78px}
  .hint{font-size:12px}
  .scene{background:#10233e}
}

/* Alpha 0.8.7 · barra de especial e botão global */
.special-hud{position:absolute;top:8px;right:10px;left:auto;transform:none;width:min(290px,32vw);max-width:100%;
 background:#101329ee;border:1px solid #5cc6db;border-radius:10px;padding:7px 10px;z-index:5;box-shadow:0 5px 15px #0008}
.special-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#9feaff}
.special-head b{max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.special-head span{font-weight:900;white-space:nowrap;color:#ffe58b}
.special-hud small{display:block;margin-top:5px;color:#c2d7df;font-size:10px;line-height:1.2}
.special-hud progress{display:block;margin-top:6px;width:100%;height:12px;border:0;accent-color:#53dbff;background:#1c2839;border-radius:6px;overflow:hidden}
.special-hud progress::-webkit-progress-value{background:linear-gradient(90deg,#30d9ff,#ffe76d);border-radius:6px}
.special-hud progress::-webkit-progress-bar{background:#253346;border-radius:6px}
.special-hud progress::-moz-progress-bar{background:linear-gradient(90deg,#30d9ff,#ffe76d);border-radius:6px}
.touch.special{background:linear-gradient(#7058dd,#39217b);border-color:#d4bfff;position:relative}
.touch.special.ready{box-shadow:inset 0 1px #fff6,0 0 0 2px #ffeb7f55,0 0 18px #6fe7ff99,0 3px #04101c}
.touch.special:disabled{opacity:.5;filter:grayscale(.3);cursor:not-allowed}
@media(orientation:portrait){.special-hud{top:6px;right:6px;width:48vw;padding:3px 6px}.special-head{font-size:8px}.special-hud small{font-size:7px}.special-hud progress{margin-top:2px;height:6px}}
@media(orientation:landscape) and (max-height:620px){.special-hud{top:6px;right:6px;padding:4px 7px;width:min(300px,34vw)}}

/* Alpha 0.9.1 — animated playable-looking home scene and lane controls */
.start.start-animated { padding:0;position:relative;display:block;overflow:hidden;background:#102a41;}
#introCanvas { display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;position:absolute;inset:0;}
.intro-overlay { pointer-events:none;position:absolute;inset:0;z-index:3;display:flex;align-items:center;flex-direction:column;justify-content:space-between;padding:2.5vh 10px max(6px,1.2vh);background:linear-gradient(to bottom,#07112666,transparent 50%,#07152c88);}
.intro-logo {display:block;width:min(73vw,850px);height:auto;max-height:43%;object-fit:contain;filter:drop-shadow(0 8px 5px #010916bb);animation:introfloat 3.4s ease-in-out infinite;image-rendering:auto;}
.intro-press {width:min(75vw,780px);height:auto;max-height:19%;object-fit:contain;filter:drop-shadow(0 7px 3px #050917aa);animation:introfloat 3s ease-in-out infinite,introblink 1.15s steps(2,end) infinite;order:2;}
.intro-loading{order:3;width:min(280px,60vw);font-size:10px;opacity:.88;max-height:24px;overflow:hidden;}
.intro-loading progress{height:5px;}
.intro-start{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;pointer-events:auto;border:0;z-index:3;}
.intro-start:disabled{cursor:wait;}
.intro-controls {order:4;margin:0;text-shadow:1px 1px #000,0 0 5px #000;background:#07122390;border-radius:8px;padding:2px 6px;font-size:clamp(8px,1.3vw,12px);}
@keyframes introfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes introblink{0%,50%{opacity:1}51%,100%{opacity:.30}}
.lane-stack{display:flex;flex-direction:column;gap:4px;}
.touch.lane{min-width:65px;min-height:32px;font-size:13px;line-height:1;border-color:#a3dfff;border-radius:9px;background:linear-gradient(#2f6a8a,#213e68);}
.touch.lane span{font-size:8px;margin-top:0}
@media(orientation:landscape) and (max-height:620px){.touch.lane{min-width:48px;min-height:29px;font-size:12px}.touch.lane span{font-size:7px}.intro-logo{max-height:43%;}.intro-press{max-height:18%;}}
@media(orientation:portrait){.intro-logo{width:min(96vw,560px);max-height:28%;}.intro-press{width:min(94vw,600px);max-height:13%}.intro-controls{max-width:96vw;text-align:center;font-size:9px}.lane-stack{gap:5px}}
/* The special only appears with the final boss and sits below the score strip in the upper-right corner. */
.special-hud{top:52px;right:8px;left:auto;transform:none;max-width:290px}
@media(orientation:landscape) and (max-height:620px){.special-hud{top:50px;right:8px;}}
@media(orientation:portrait){.special-hud{top:41px;right:5px;max-width:45vw}}


/* Alpha 0.9.3 — left-side vertical special meter, jump on the far right */

.special-hud{position:absolute;z-index:8;top:82px;left:max(7px,env(safe-area-inset-left));right:auto;
 transform:none;width:76px;max-width:76px;height:209px;padding:7px 8px 9px;
 display:flex;align-items:center;flex-direction:column;gap:5px;
 border:1px solid #67d9f5;border-radius:12px;background:#071a32ed;box-shadow:0 4px 12px #0009}
.special-head{display:block;font-size:10px;letter-spacing:.02em;text-align:center}
.special-head b{display:block;white-space:nowrap}
.special-native-progress{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.special-bar-vertical{height:142px;width:24px;border:2px solid #7adfff;background:#13213b;
 border-radius:8px;box-shadow:inset 0 0 0 2px #070f21;overflow:hidden;position:relative;flex:none}
.special-bar-fill{position:absolute;left:0;right:0;bottom:0;height:0%;
 background:linear-gradient(0deg,#28baf8,#51ecff 65%,#ffe67b);
 box-shadow:0 0 7px #52dcff;transition:height .17s linear}
.special-count{display:block;font-size:11px;color:#ffeb96;font-weight:900}
.special-hud .special-accessible-hint{position:absolute;width:1px;height:1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;border:0}
.action-group{margin-left:auto}
.touch.jump{order:5;min-width:105px}
.touch.attack.recharging{opacity:.64;border-color:#f9e5a8;filter:grayscale(.35)}
@media(orientation:landscape) and (max-height:620px){
 .special-hud{top:69px;left:6px;right:auto;width:60px;max-width:60px;height:161px;padding:5px 4px;gap:3px}
 .special-head{font-size:8px}.special-bar-vertical{height:105px;width:19px}
 .special-count{font-size:9px}
 .action-group{gap:6px}.touch.jump{min-width:82px}
}
@media(orientation:portrait){
 .special-hud{top:56px;left:4px;right:auto;width:52px;max-width:52px;height:130px;padding:4px 3px;gap:2px}
 .special-head{font-size:7px}.special-bar-vertical{height:87px;width:16px}
 .special-count{font-size:8px}
 .touchbar{gap:4px;padding-left:4px;padding-right:4px}
 .group{gap:4px}.touch.lane{min-width:42px}.touch.attack{min-width:79px}
 .touch.special{min-width:68px}.touch.jump{min-width:70px}
 .touch span{font-size:8px}
}
/* Keep the full meter title legible despite generic .special-head b truncation. */
.special-hud .special-head{width:auto;max-width:none}
.special-hud .special-head b{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:9px;letter-spacing:0}
@media(orientation:portrait){.special-hud .special-head b{font-size:7px}}

/* Maromba's Comunist: single Jones Hadouken replaces the legacy special. */
/* Cinematic reduces HUD clutter without hiding boss HP, updated by each hit. */
#game.jones-cinematic .hud-top, #game.jones-cinematic .region, #game.jones-cinematic .special-hud, #game.jones-cinematic .combo-label, #game.jones-cinematic .story{opacity:0;pointer-events:none}

/* One special button, branded with the definitive special name. */
.touch.special{background:linear-gradient(#247faf,#123e72);border-color:#85ecff;min-width:115px}
.touch.special span{font-size:9px;letter-spacing:-.03em}
@media(orientation:landscape) and (max-height:620px){.touch.special{min-width:92px}.touch.special span{font-size:8px}}

/* Combate por fôlego: pequenas rajadas sem travar o quarto golpe. */
.touch.attack .attack-meter{display:block;position:relative;overflow:hidden;width:74%;height:6px;margin:5px auto 0;border:1px solid #f5d5a5;border-radius:6px;background:#2d1b20;pointer-events:none;}
.touch.attack .attack-meter-fill{display:block;position:absolute;inset:0 auto 0 0;width:100%;height:100%;background:linear-gradient(90deg,#74dbb4,#fce386);transition:width .09s linear;}
.touch.attack.recharging{opacity:.85;filter:grayscale(.14);}

/* Diva Guerreira V2 — hide regular HUD during full-screen cinematic,
   matching the existing Jones transition. Gameplay continues afterward. */
#game.erika-cinematic .hud-top,
#game.erika-cinematic .region,
#game.erika-cinematic .special-hud,
#game.erika-cinematic .combo-label,
#game.erika-cinematic .story,
#game.erika-cinematic .pausebtn{opacity:0;pointer-events:none}
/* Keep a single contextual special button, with room for either title. */
.touch.special span{max-width:142px;overflow-wrap:anywhere}


/* 2026-10-22 · Boss HP aligned RIGHT, vertical; special stays LEFT. */
#bossBanner.boss-hud-vertical{position:absolute;z-index:9;top:82px;right:max(8px,env(safe-area-inset-right));left:auto;
 transform:none;width:78px;max-width:78px;height:230px;padding:8px 6px;
 border:1px solid #ff9f55;border-radius:12px;background:#1c1726ef;
 box-shadow:0 5px 16px #000a;display:flex;align-items:center;flex-direction:column;gap:7px}
#bossBanner.boss-hud-vertical.hidden{display:none!important}
#bossBanner .boss-head{display:block;width:100%;text-align:center;line-height:1.1}
#bossBanner .boss-head b{font-weight:900;font-size:9px;color:#ffdea1;letter-spacing:-.03em;white-space:nowrap}
#bossBanner .boss-native-progress{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
#bossBanner .boss-health-track{height:157px;width:24px;border:2px solid #ff9f55;position:relative;overflow:hidden;
 background:#391d29;border-radius:7px;box-shadow:inset 0 0 0 2px #150e19;flex:none}
#bossBanner .boss-health-fill{position:absolute;bottom:0;left:0;right:0;height:100%;
 background:linear-gradient(to top,#cf3b46 0%,#ff9b4a 60%,#ffe479 100%);
 box-shadow:0 0 10px #ff774b;transition:height .11s linear}
#bossBanner .boss-count{font-size:10px;font-weight:900;white-space:nowrap;color:#ffe1b1}
.special-hud .special-kill-progress{font-size:9px;font-weight:700;color:#91e8fb;white-space:nowrap}
@media(orientation:landscape) and (max-height:620px){
 #bossBanner.boss-hud-vertical{top:69px;right:6px;width:62px;max-width:62px;height:165px;padding:5px 3px;gap:3px}
 #bossBanner .boss-health-track{height:109px;width:18px}
 #bossBanner .boss-head b{font-size:7px}
 #bossBanner .boss-count{font-size:8px}
 .special-hud .special-kill-progress{font-size:8px}
}
@media(orientation:portrait){
 #bossBanner.boss-hud-vertical{top:56px;right:4px;width:52px;max-width:52px;height:133px;padding:3px 2px;gap:2px}
 #bossBanner .boss-health-track{height:84px;width:16px}
 #bossBanner .boss-head b{font-size:6px}
 #bossBanner .boss-count{font-size:7px}
 .special-hud .special-kill-progress{font-size:7px}
}

/* Cinematic overlay must not be obstructed by regular HUDs over the left portrait. */
#game.ana-cinematic .hud-top, #game.ana-cinematic .region,
#game.ana-cinematic .special-hud, #game.ana-cinematic .combo-label,
#game.ana-cinematic .story, #game.ana-cinematic .pausebtn,
#game.janones-cinematic .hud-top, #game.janones-cinematic .region,
#game.janones-cinematic .special-hud, #game.janones-cinematic .combo-label,
#game.janones-cinematic .story, #game.janones-cinematic .pausebtn{
 opacity:0;pointer-events:none;
}

/* Prólogo sobre o mundo congelado: não exibir HUD nem controles sob o card. */
.game.opening-mode .hud{opacity:0;pointer-events:none}
.game.opening-mode .touchbar{visibility:hidden}