*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#120f14}
body{color:#fff4db;font:16px system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
main,#stage{position:fixed;inset:0;overflow:hidden}
canvas{display:block;width:100%;height:100%;object-fit:contain}
button{border:0;border-radius:9px;background:#eabb71;color:#21190f;font:700 1rem system-ui;padding:10px 16px;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid white;outline-offset:3px}

#corner{position:absolute;z-index:6;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;gap:6px}
#corner button{width:42px;height:42px;padding:0;font-size:1.2rem;background:#202419d9;color:#fff4db;border:1px solid #ffffff33}

#hud{position:absolute;z-index:4;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:calc(max(8px,env(safe-area-inset-right)) + 100px);display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:800;text-shadow:0 2px 2px #000;pointer-events:none}
#hud span{padding:6px 10px;background:#202419d9;border-radius:8px}
#hud button{margin-left:auto;height:42px;padding:0 14px;pointer-events:auto}
#boss-hud{background:#773e43!important;color:#fff0de}

#overlay{position:absolute;z-index:5;inset:0;display:grid;align-items:center;background:linear-gradient(90deg,#171d16f5,#171d16b8 62%,#171d1640);overflow:auto}
article{padding:clamp(10px,3.5vw,48px);padding-left:max(clamp(10px,3.5vw,48px),env(safe-area-inset-left));max-width:min(66%,820px);font-size:clamp(.8rem,2.6vh,1.1rem)}
h1{margin:.1em 0;font-size:clamp(24px,11vh,84px);line-height:.92;letter-spacing:-.05em;color:#d0f294;text-shadow:0 3px 12px #0009}
#tag{margin:0 0 .4em;font-weight:800;letter-spacing:.13em;color:#e9a963;font-size:.8em}
#copy{line-height:1.35;margin:.7em 0;text-shadow:0 1px 4px #000c}
#hint{margin:.6em 0;padding:.5em .8em;border-left:4px solid #e9a963;background:#0006;line-height:1.3}
#stars{margin:.3em 0;font-size:1.25em;line-height:1.5}
#stars i{font-style:normal;color:#ffcb67;margin-right:.3em}
#stars i.off{color:#ffffff38}
#stars small{display:block;font-size:.72em;color:#e6dcc0}
#buttons{display:flex;flex-wrap:wrap;gap:10px}
#buttons button+button{background:#fff4db24;color:#fff4db}
#track-label{display:inline-block;margin-top:.8em;color:#f5ca91;font-size:.85em;cursor:pointer;text-decoration:underline}

/* entrada e mapa: a imagem do jogo de fundo */
#overlay.cover{background:linear-gradient(90deg,#10160f99 2%,#10160f55 43%,#10160f00 75%),url(assets/capa-roberto.webp) center/cover #1b1a14}
#overlay.wide{background:linear-gradient(0deg,#10160fe8 4%,#10160f80 55%,#10160f24),url(assets/mapa-roberto.webp) center/cover #1b1a14}
#overlay.wide article{max-width:100%;width:100%}
#overlay.brief{background:linear-gradient(90deg,#10160fed 5%,#10160fb8 45%,#10160f12 83%),var(--chapter-art) center/cover #1b1a14}
#map{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1.1vw,12px);margin:.8em 0}
#map button{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:clamp(66px,21vh,150px);padding:clamp(6px,1vw,12px);text-align:left;color:#fff;background:var(--c);border:2px solid #ffffff55;font-size:clamp(.66rem,1.5vw,.95rem);line-height:1.1;text-shadow:0 1px 2px #0009}
#map button b{position:absolute;top:clamp(3px,.7vw,8px);left:clamp(6px,1vw,12px);font-size:1.7em;opacity:.85}
#map button small{color:#ffcb67;letter-spacing:.04em;font-size:.95em}
#map button{
 background-color:var(--c);
 background-image:linear-gradient(0deg,#10160ff5 0%,#10160fa8 31%,#10160f10 72%),var(--card-art,none);
 background-position:center,79% center;
 background-size:cover;
}
#map button:not(:disabled):hover{transform:translateY(-3px)}
#map button:disabled{filter:saturate(.65) brightness(.8);cursor:not-allowed}

#overlay.ending{align-items:end;background:linear-gradient(0deg,#101910f5 1%,#152114ce 29%,transparent 65%),url(assets/final.webp) center 40%/cover}
#overlay.ending article{max-width:100%;padding:clamp(9px,3vw,30px)}
#overlay.ending h1{font-size:clamp(20px,7vh,46px)}
#overlay.ending #copy{max-width:740px}

/* controles do celular: o analógico nasce onde o dedo encosta */
#touch{display:none;position:absolute;z-index:3;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
#stick{position:absolute;left:calc(max(16px,env(safe-area-inset-left)) + 74px);top:calc(100% - 92px);width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:#ffffff16;border:3px solid #ffffff55;opacity:.55;pointer-events:none}
#stick.on{opacity:1;background:#ffffff24}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#eabb71d9;border:2px solid #fff8}
#jump-btn{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:24px;width:clamp(96px,17vw,136px);height:clamp(96px,17vw,136px);border-radius:50%;display:grid;place-items:center;font:800 1.05rem system-ui;color:#fff;background:#b9de8359;border:3px solid #ffffff66;pointer-events:none}
#jump-btn.on{background:#b9de83cc;transform:scale(.94)}

#rotate{display:none;position:fixed;z-index:20;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;background:#14170fF7}
#rotate b{font-size:1.5rem;color:#d0f294}
#rotate span{max-width:300px;line-height:1.4;color:#e6dcc0}
#rotate .phone{font-size:4.5rem;animation:virar 1.8s ease-in-out infinite}
@keyframes virar{0%,25%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
[hidden]{display:none!important}

/* a classe touch vem do game.js, que testa o aparelho de mais de um jeito */
html:has(body.touch),body.touch{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
body.touch.playing #touch{display:block}
body.touch #overlay{touch-action:pan-y}
body.touch #hud{font-size:.78rem}
body.touch #hud span{padding:3px 8px}
body.touch #hud button{height:38px;font-size:.85rem;padding:0 10px}
body.touch #corner button{width:38px;height:38px}
body.touch #track-label{display:none}
body.touch #overlay.brief #copy,body.touch #overlay.wide #copy{display:none}
body.touch #buttons button{padding:8px 14px;font-size:.9rem}
@media(orientation:portrait){
 body.touch #rotate{display:flex}
}
@media(max-height:430px){
 article{padding-top:6px;padding-bottom:6px}
 #map{margin:.4em 0}
 #copy,#hint{margin:.35em 0}
}