@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{color-scheme:dark;--ink:#ffe6af;--dark:#201b2e;--edge:#66433c;--gold:#e9b663;font-family:'Press Start 2P',monospace}*{box-sizing:border-box}body{margin:0;background:#15121e;color:var(--ink);min-height:100svh;display:grid;place-items:center;padding:22px 18px;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#00000014 3px,#00000014 4px)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid #ffde88;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#app{width:min(1200px,calc((100svh - 112px)*1.5));max-width:100%}.cabinet{position:relative;aspect-ratio:3/2;background:var(--dark);border:4px solid #332a3b;outline:2px solid #0a0910;box-shadow:0 0 0 6px #615044,0 0 0 8px #18131c,0 18px 55px #0009;overflow:hidden}canvas#game{width:100%;height:100%;display:block;image-rendering:pixelated}.corner-tools{position:absolute;right:2.6%;top:3%;display:flex;gap:9px;z-index:8}.corner-tools button{background:#241d2edb;border:2px solid #856748;font-size:8px;padding:9px 10px;box-shadow:2px 2px #0e1020}.corner-tools #fullscreen,.corner-tools #pause{font-family:monospace;font-size:17px;padding:2px 9px}.hud{position:absolute;left:2.6%;right:25%;top:3%;display:flex;justify-content:space-between;gap:20px;pointer-events:none;text-shadow:2px 2px #19141c;background:#211b29bf;padding:9px 11px;border:2px solid #5a4845}.hud>div{display:flex;flex-direction:column;gap:8px}.small-label{font-size:7px;line-height:1.6;color:#ecd9b3}.hearts{font-size:19px;letter-spacing:3px;color:#eb8c71;white-space:nowrap}#time{font-size:17px}.hit-row{display:flex;align-items:center;gap:8px}#hit-count{font-size:10px;color:#ffd38a}#segments{display:flex;gap:3px}#segments i{display:block;background:#574758;width:8px;height:13px;border-top:2px solid #795b66}#segments i.lit{background:#f4be69;border-color:#ffebbc}.menu{position:absolute;left:20%;right:20%;top:57%;display:flex;flex-direction:column;align-items:center;gap:17px;text-align:center}.menu-item{background:none;border:0;padding:4px;font-size:clamp(12px,1.8vw,23px);line-height:1.5;white-space:nowrap;position:relative;color:#fff0c8;text-shadow:2px 0 #492b29,-2px 0 #492b29,0 2px #492b29,0 -2px #492b29,3px 4px #221629}.menu-item:hover,.menu-item.selected,.menu-item:focus-visible{color:#ffe08d}.cursor{position:absolute;left:-30px;visibility:hidden}.menu-item:hover .cursor,.menu-item.selected .cursor,.menu-item:focus-visible .cursor{visibility:visible}.press-enter{font-size:clamp(7px,.75vw,10px);color:#fff0c8;text-shadow:2px 2px #492b29;margin:8px 0;animation:blink 1.4s steps(2,end) infinite}.title-footer{position:absolute;bottom:5%;left:0;right:0;text-align:center;font-size:clamp(6px,.7vw,9px);color:#dac69e;text-shadow:2px 2px #281c27}.title-footer span{color:#bf8461;margin:0 12px}.underbar{display:flex;justify-content:center;align-items:center;gap:22px;padding:22px 0 0;font-size:7px;color:#b09c98;line-height:1.8}.underbar b{color:#e1c698;margin-left:5px;font-weight:400}.underbar button{font-size:7px;background:none;border:0;color:#d9ba8a}.dialogue{position:absolute;left:4%;right:4%;bottom:8%;display:flex;align-items:center;gap:16px;min-height:91px;background:#211b2ef5;border:3px solid #e1bf84;box-shadow:0 0 0 3px #3c2a31,5px 6px #100f1c;padding:14px 18px;z-index:6}.portrait{flex-shrink:0;width:62px;height:62px;background:#4c3744;border:2px solid #9c785d;overflow:hidden}.portrait canvas{width:100%;height:100%;image-rendering:pixelated}.dialogue-copy{flex:1}#speaker{font-size:10px;color:#eebd73;line-height:1.6}#line{font-size:10px;line-height:1.9;margin:10px 0 0;color:#f6e7c2}.dialogue button{font-size:8px;line-height:1.6;color:#f7d58d;background:none;border:0;margin-left:auto;white-space:nowrap;padding:10px 0}.danger{position:absolute;top:20%;left:50%;transform:translateX(-50%);padding:14px 18px;background:#9b363c;border:3px solid #f3b87c;color:#fff0c8;font-size:10px;line-height:1.7;white-space:nowrap;box-shadow:4px 4px #361b2b;z-index:5;animation:warning .5s steps(2,end) infinite}.hint{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);color:#ffe3a2;background:#241d2be8;border:2px solid #967455;padding:10px 13px;font-size:8px;line-height:1.8;max-width:87%;text-align:center;white-space:nowrap}.energy-hud{position:absolute;left:4%;right:4%;bottom:3%;display:flex;align-items:center;gap:12px;font-size:7px;color:#eddaad;text-shadow:2px 2px #261b25}.energy-hud>div{width:110px;height:11px;border:2px solid #b59365;background:#332b37}.energy-hud i{display:block;background:#aaca9c;height:100%}#dash-status{margin-left:auto;color:#c0d49c}.result{position:absolute;inset:0;background:#171322aa;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:15px;padding:10%;z-index:7}.result h2{font-size:clamp(22px,4vw,46px);line-height:1.5;color:#f8d78f;text-shadow:4px 4px #513134;margin:0}.result p{font-size:clamp(8px,1.2vw,13px);line-height:2.1;margin:0;max-width:480px}.pixel-button{background:#b78250;border:3px solid #f4d497;box-shadow:4px 4px #372334,inset -3px -3px #855441;padding:16px 20px;font-size:11px;text-shadow:2px 2px #704339}.pixel-button:hover{background:#c9945c;transform:translateY(-1px)}.result .secondary{background:transparent;border:0;font-size:9px;color:#d0b68e;margin-top:10px}.touch-controls{display:none;align-items:center;justify-content:space-between;gap:14px;padding:24px 0 0}.touch-controls button{user-select:none;touch-action:none;background:#392c3e;border:3px solid #886f5c;box-shadow:3px 3px #0b0912;min-width:48px;min-height:48px;font-size:9px}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:5px;margin-right:auto}.dpad [data-key=up]{grid-column:2}.dpad [data-key=left]{grid-column:1}.dpad [data-key=down]{grid-column:2}.dpad [data-key=right]{grid-column:3}#touch-kick{background:#a56c46;border-color:#eac386;padding:0 13px}#touch-dodge{padding:0 10px}.load-error{font:12px monospace;color:#ffc48e;text-align:center}.load-error button{font:inherit;background:none;border:1px solid #a98c63;padding:8px}dialog{max-width:520px;max-height:90svh;overflow:auto;background:#251e30;color:#ead9b2;border:3px solid #d7b483;box-shadow:0 0 0 5px #4e3543,8px 10px #0d0b15;padding:35px}dialog::backdrop{background:#0b0812d9}dialog h2{font-size:18px;color:#ffdb97;line-height:1.8;margin:5px 0 25px}dialog p{font-size:10px;line-height:2.1}dialog b{color:#ffe0a2;font-weight:400}.close{position:absolute;right:12px;top:8px;font-family:monospace;font-size:30px;color:#e7c48b;background:none;border:0}@keyframes blink{50%{opacity:.35}}@keyframes warning{50%{border-color:#db7662}}
@media(pointer:coarse),(max-width:700px){body{padding:16px 12px}#app{width:100%}.touch-controls{display:flex}.underbar{display:none}.cabinet{border-width:2px}.corner-tools{gap:5px}.corner-tools button{font-size:6px;padding:7px}.corner-tools #fullscreen,.corner-tools #pause{font-size:14px;padding:0 7px}.hud{padding:6px;gap:8px;right:27%;border-width:1px}.small-label{font-size:5px}.hud>div{gap:4px}.hearts{font-size:11px;letter-spacing:1px}#time{font-size:10px}#segments{gap:2px}#segments i{width:4px;height:9px}#hit-count{font-size:6px}.hit-row{gap:4px}.menu{gap:10px}.menu-item{font-size:14px}.cursor{left:-22px}.press-enter{margin:1px 0;font-size:6px}.title-footer{font-size:5px}.title-footer span{margin:0 7px}.portrait{width:40px;height:40px}.dialogue{gap:9px;padding:9px;bottom:9%;min-height:64px;border-width:2px;flex-wrap:wrap}#speaker{font-size:7px}#line{font-size:7px;margin-top:6px;line-height:1.8}.dialogue button{font-size:6px;padding:3px 0}.danger{font-size:7px;padding:7px 9px;border-width:2px}.hint{font-size:6px;padding:6px;white-space:normal}.energy-hud{font-size:5px;gap:7px}.energy-hud>div{width:63px;height:8px}.result{gap:9px}.result h2{font-size:20px}.result p{font-size:7px}.pixel-button{padding:11px 13px;font-size:9px}.result .secondary{font-size:7px;margin:5px}.touch-controls button{font-size:8px}dialog{padding:25px;max-width:calc(100% - 30px)}dialog h2{font-size:15px}}
@media(max-width:420px){.menu-item{font-size:11px}.menu{gap:8px;top:57%}.press-enter{font-size:5px;margin-top:3px}.title-footer{bottom:4%;font-size:4.5px}.corner-tools button{font-size:5px}.hit-hud .small-label{font-size:4px}.hud{right:30%;gap:6px}.hearts{font-size:10px}#segments i{width:3px}#time{font-size:8px}#hit-count{font-size:5px}.small-label{font-size:4.5px}.dpad{grid-template-columns:repeat(3,43px);gap:4px}.touch-controls{gap:9px}.touch-controls button{min-width:43px;min-height:46px;font-size:7px}#touch-dodge{padding:0 7px}#touch-kick{padding:0 10px}.danger{font-size:6px;max-width:94%;white-space:normal;text-align:center}.portrait{display:none}.dialogue-copy{flex-basis:100%}.dialogue{gap:4px}.dialogue button{margin-left:auto;font-size:5px}}
@media(max-height:540px) and (orientation:landscape){body{padding:10px}#app{width:min(950px,calc((100svh - 35px)*1.5))}.touch-controls{position:fixed;bottom:15px;left:15px;right:15px;pointer-events:none;opacity:.7;z-index:10}.touch-controls button{pointer-events:auto}.underbar{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


.stage-notice{position:absolute;top:32%;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;gap:12px;width:max-content;max-width:88%;padding:17px 20px;background:#242037ef;border:3px solid #edca80;box-shadow:4px 4px #17111f;text-align:center;pointer-events:none;line-height:1.8}.stage-notice b{font-size:14px;color:#ffdf92}.stage-notice span{font-size:8px;color:#ebcbb0}#stage-count{color:#ffd38a;font:inherit}@media(max-width:700px){.stage-notice{padding:10px;gap:6px;border-width:2px}.stage-notice b{font-size:9px}.stage-notice span{font-size:6px}}

.dialogue.shouting{border-color:#f0a57b;box-shadow:0 0 0 3px #743c43,5px 6px #100f1c}.dialogue.shouting #line{color:#ffd39d;font-size:12px;line-height:1.9}.dialogue.shouting #speaker{color:#ffad86}@media(max-width:700px){.dialogue.shouting #line{font-size:8px}}

/* ===== Mobile / toque: paisagem primeiro ===== */
.rotate{display:none}
.touch-controls{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.touch-controls .dpad button{pointer-events:none}
.dpad{touch-action:none}
.touch-controls .dpad button.on,.touch-controls #touch-kick.on{background:#7b5a4f;border-color:#f4d497}
#app:fullscreen{display:grid;place-items:center;background:#15121e}
#app:fullscreen .cabinet{width:min(100vw,150dvh)}

@media(pointer:coarse){
:root{--g:clamp(140px,13vw,190px);--b:clamp(44px,calc(var(--g) / 3.05),64px)}
.cabinet{container-type:inline-size}
.corner-tools{gap:.9cqw}
.corner-tools button{font-size:max(6px,1.2cqw);padding:.9cqw 1.1cqw}
.corner-tools #fullscreen,.corner-tools #pause{font-size:max(13px,2.6cqw);padding:0 1.1cqw}
.hud{padding:1.1cqw;gap:1.6cqw;border-width:1px}
.small-label{font-size:max(6px,1.25cqw)}
.hearts{font-size:max(11px,2.9cqw);letter-spacing:.4cqw}
#time{font-size:max(10px,2.4cqw)}
#hit-count{font-size:max(7px,1.4cqw)}
#segments i{width:max(4px,.9cqw);height:max(9px,1.8cqw)}
.menu-item{font-size:max(11px,2.6cqw)}
.press-enter{font-size:max(6px,1.1cqw)}
.title-footer{font-size:max(5px,.95cqw)}
.portrait{width:7cqw;height:7cqw;display:block}
.dialogue{gap:1.4cqw;padding:1.4cqw;min-height:0;border-width:2px;flex-wrap:nowrap}
.dialogue-copy{flex:1;flex-basis:auto}
#speaker{font-size:max(7px,1.5cqw)}
#line{font-size:max(8px,1.65cqw);margin-top:.9cqw}
.dialogue.shouting #line{font-size:max(9px,1.9cqw)}
.dialogue button{font-size:max(7px,1.3cqw);padding:1.2cqw 1.6cqw;border:2px solid #f7d58d}
.danger{font-size:max(8px,1.7cqw);padding:1.2cqw 1.8cqw;white-space:nowrap;max-width:none}
.hint{font-size:max(7px,1.4cqw);padding:1cqw 1.4cqw}
.energy-hud{font-size:max(6px,1.2cqw);gap:1.4cqw}
.energy-hud>div{width:14cqw;height:max(8px,1.6cqw)}
.stage-notice{padding:1.6cqw 2.2cqw;gap:1cqw}
.stage-notice b{font-size:max(10px,2.4cqw)}
.stage-notice span{font-size:max(7px,1.4cqw)}
.result{gap:1.8cqw}
.result h2{font-size:max(18px,4.2cqw)}
.result p{font-size:max(8px,1.5cqw);max-width:70cqw}
.pixel-button{padding:1.6cqw 2.4cqw;font-size:max(9px,1.7cqw)}
.result .secondary{font-size:max(7px,1.3cqw);padding:1cqw}
.touch-controls button{font-size:max(8px,calc(var(--b) / 6))}
dialog{max-width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 24px);padding:20px 24px}
dialog h2{font-size:13px;margin:0 0 12px}
dialog p{font-size:8px;line-height:1.9;margin:0 0 10px}
}

/* Paisagem: campo de jogo no centro, controles nas laterais */
@media(pointer:coarse) and (orientation:landscape){
body{padding:0;height:100dvh;min-height:100dvh;overflow:hidden}
#app{width:min(calc(100vw - 2 * var(--g)),calc(100dvh * 1.5));max-width:none}
#app:fullscreen .cabinet{width:min(calc(100vw - 2 * var(--g)),calc(100dvh * 1.5))}
.cabinet{border-width:2px;box-shadow:none;outline:none}
.underbar{display:none}
.touch-controls{position:fixed;inset:0;display:block;padding:0;opacity:1;pointer-events:none;z-index:10}
.dpad{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,var(--b));grid-template-rows:repeat(3,var(--b));gap:3px;margin:0;padding:3px;background:#20182a99;border:2px solid #4b3a45;pointer-events:auto}
.dpad [data-key=up]{grid-row:1;grid-column:2}
.dpad [data-key=left]{grid-row:2;grid-column:1}
.dpad [data-key=down]{grid-row:3;grid-column:2}
.dpad [data-key=right]{grid-row:2;grid-column:3}
.touch-controls button{min-width:0;min-height:0;width:var(--b);height:var(--b);opacity:.9}
#touch-kick,#touch-dodge{position:absolute;right:max(10px,env(safe-area-inset-right));width:calc(var(--b) * 1.55);pointer-events:auto;padding:0}
#touch-kick{bottom:max(10px,env(safe-area-inset-bottom));height:calc(var(--b) * 1.55);font-size:max(8px,calc(var(--b) / 5))}
#touch-dodge{bottom:calc(max(10px,env(safe-area-inset-bottom)) + var(--b) * 1.55 + 10px);height:calc(var(--b) * 1.1);font-size:max(6px,calc(var(--b) / 6.5))}
}

/* Retrato em tablet: jogo em cima, controles grandes embaixo */
@media(pointer:coarse) and (orientation:portrait){
body{padding:12px}
#app{width:100%}
.touch-controls{padding-top:22px}
.dpad{grid-template-columns:repeat(3,var(--b));grid-template-rows:repeat(3,var(--b));gap:3px;padding:3px;background:#20182a99;border:2px solid #4b3a45}
.dpad [data-key=up]{grid-row:1;grid-column:2}
.dpad [data-key=left]{grid-row:2;grid-column:1}
.dpad [data-key=down]{grid-row:3;grid-column:2}
.dpad [data-key=right]{grid-row:2;grid-column:3}
.touch-controls button{min-width:0;min-height:0;width:var(--b);height:var(--b)}
#touch-kick,#touch-dodge{width:calc(var(--b) * 1.6);height:calc(var(--b) * 1.6);padding:0}
#touch-dodge{height:calc(var(--b) * 1.2)}
}
/* Celular em pé: pede para girar (dá para jogar assim mesmo) */
@media(pointer:coarse) and (orientation:portrait) and (max-width:600px){
:root{--b:52px}
html:not(.force-portrait) .rotate{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:#15121e;text-align:center}
.rotate svg{width:96px;height:96px;animation:turn 2.4s ease-in-out infinite}
.rotate b{font-size:14px;line-height:1.8;color:#ffdf92;font-weight:400}
.rotate span{font-size:8px;line-height:2;color:#ebcbb0}
.rotate button{background:none;border:0;font-size:8px;color:#d0b68e;padding:12px;text-decoration:underline}
}
@keyframes turn{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

body:not([data-mode=playing]) .touch-controls{visibility:hidden}
@media(pointer:coarse){.press-enter{font-size:max(7px,1.5cqw)}}
@media(pointer:coarse) and (orientation:portrait) and (min-width:601px){
:root{--b:clamp(58px,9vw,88px)}
.touch-controls{width:100%;justify-content:space-between;align-items:flex-end;padding:26px 2% 0}
.dpad{margin:0}
#touch-kick,#touch-dodge{font-size:max(9px,calc(var(--b) / 6))}
}
@media(pointer:coarse) and (orientation:portrait) and (min-width:601px){#touch-dodge{margin-left:auto}#touch-kick{margin-left:14px}}

/* ===== Ranking ===== */
.pixel-button.alt{background:#5a4058;border-color:#a98c9c;box-shadow:4px 4px #241528,inset -3px -3px #3f2a3f}
.menu{top:47%;gap:9px}
.ranking{position:absolute;inset:0;z-index:9;background:#171322f2;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 8%;overflow:auto;text-align:center}
.ranking h2{font-size:26px;color:#f8d78f;text-shadow:3px 3px #513134;margin:0}
.rank-form label{display:block;font-size:9px;color:#ecd9b3;margin-bottom:8px}
.rank-form div{display:flex;gap:8px;justify-content:center}
.rank-form input{font:16px 'Press Start 2P',monospace;text-transform:uppercase;width:min(58vw,260px);padding:10px;color:#fff0c8;background:#2a2136;border:3px solid #c9a06a;outline:none}
.rank-form input:focus{border-color:#ffe08d}
.rank-form .pixel-button{padding:10px 14px;font-size:10px}
.rank-msg{min-height:1.2em;margin:0;font-size:9px;line-height:1.8;color:#ffd38a}
.rank-list{list-style:none;margin:0;padding:0;width:min(100%,600px);display:flex;flex-direction:column;gap:4px}
.rank-list li{display:grid;grid-template-columns:3ch 1fr auto;gap:12px;align-items:center;text-align:left;background:#2a2136;border:2px solid #5a4845;padding:7px 12px;font-size:10px;line-height:1.5}
.rank-list li.me{background:#4a3550;border-color:#ffd369}
.rank-list .pos{color:#ffd369}.rank-list .res{color:#c0d49c;white-space:nowrap}
.rank-list li.rank-empty{display:block;text-align:center;color:#ebcbb0}
#rank-close{font-size:9px;color:#d0b68e;background:none;border:0;padding:8px}
@media(pointer:coarse){
.ranking{gap:1.2cqw;padding:2.2cqw 6cqw}
.ranking h2{font-size:max(14px,3.2cqw)}
.rank-form label{font-size:max(7px,1.3cqw);margin-bottom:.6cqw}
.rank-form input{font-size:16px;padding:.9cqw 1.2cqw;width:34cqw}
.rank-form .pixel-button{padding:1cqw 1.8cqw;font-size:max(8px,1.5cqw)}
.rank-msg{font-size:max(7px,1.4cqw)}
.rank-list{gap:.5cqw}
.rank-list li{font-size:max(7px,1.5cqw);padding:.7cqw 1.6cqw;gap:1.4cqw}
#rank-close{font-size:max(7px,1.4cqw);padding:.8cqw}
}
.result .rank-off{font-size:max(6px,1.1cqw);color:#b09c98;margin:0}