:root{--or:#ff6a00;--or2:#ff9a1f;--bk:#111;--cream:#f4e9d0;--fs:clamp(7px,1vw,12px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:'Press Start 2P','Courier New',monospace;color:var(--cream);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.hidden{display:none!important}

/* ---------- LAYOUT: horizontal = 75% jogo | 25% painel ---------- */
#app{display:flex;flex-direction:row;width:100vw;height:100vh;height:100dvh}
#game{position:relative;flex:0 0 75%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#0b0b0b;overflow:hidden}
#screen{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#hud{flex:1 1 25%;min-width:0;min-height:0;display:flex;flex-direction:column;gap:1.2vh;padding:1.5vh 1vw;font-size:var(--fs);
  background:var(--bk);border-left:.6vw solid var(--or);box-shadow:inset .3vw 0 0 #000,inset .6vw 0 0 #5a2600;overflow:hidden}

/* ---------- vertical = 75% jogo (cima) | 25% painel (baixo) ---------- */
@media (orientation:portrait){
  :root{--fs:clamp(6px,2.1vw,11px)}
  #app{flex-direction:column}
  #game{flex:0 0 75%}
  #hud{flex:1 1 25%;display:grid;grid-template-columns:1fr 1fr 1.1fr;grid-template-rows:1fr 1fr auto;gap:4px;padding:6px;
    grid-template-areas:"score score gauge" "hi lives gauge" "fuel fuel fuel";
    border-left:0;border-top:.8vh solid var(--or);box-shadow:inset 0 .4vh 0 #000,inset 0 .8vh 0 #5a2600}
  .brand{display:none}
  .score{grid-area:score}.hi{grid-area:hi}.gauge{grid-area:gauge}.fuel{grid-area:fuel}.lives{grid-area:lives}
}

/* ---------- PAINEL ---------- */
.brand{display:flex;align-items:center;gap:.8em;flex:none;color:var(--or);line-height:1.35;font-size:calc(var(--fs)*.9)}
.brand .num{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;background:var(--cream);color:#111;border:3px solid #111;outline:2px solid var(--or);font-size:1.2em}
.box{background:#000;border:3px solid var(--or);box-shadow:inset 0 0 0 2px #4a2000;padding:.6em .7em;min-height:0;display:flex;flex-direction:column;justify-content:center}
.box label{display:block;color:var(--or2);font-size:.8em;margin-bottom:.5em;white-space:nowrap}
.box output{display:block;color:var(--or2);text-shadow:0 0 6px rgba(255,150,0,.7);font-size:1.7em;letter-spacing:.05em;text-align:right}
.hi output{font-size:1.2em;color:var(--cream);text-shadow:none}
.gauge{flex:1 1 0;align-items:center}
.gauge canvas{flex:1 1 0;min-height:0;width:100%;image-rendering:pixelated;object-fit:contain}
.gauge output{font-size:1em;text-align:center;margin-top:.4em}
.fuel #fuelbar{height:1.8em;border:3px solid var(--cream);background:#200;position:relative;overflow:hidden}
#fuelfill{position:absolute;left:0;top:0;bottom:0;width:100%;background:#3ddc3d;transition:background .2s}
#fuelbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),#000 calc(10% - 2px) 10%)}
#fuelfill.mid{background:#ffd400}
#fuelfill.low{background:#ff2a1f;animation:blink .4s steps(2) infinite}
.ef{display:flex;justify-content:space-between;font-size:.8em;color:var(--cream);margin-top:.4em}
#lives{display:flex;gap:.5em;align-items:center;justify-content:center;min-height:3.2em}
#lives canvas{height:3.2em;width:auto;image-rendering:pixelated;transition:transform .5s,opacity .5s}
#lives canvas.lost{transform:scale(0) rotate(180deg);opacity:0}
.lives{flex:none}.fuel,.score,.hi{flex:none}
@keyframes blink{50%{opacity:.25}}

/* ---------- OVERLAYS ---------- */
.overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;
  background:rgba(0,0,0,.78);text-align:center;padding:4%;font-size:clamp(7px,1vw,12px);line-height:1.8}
#game .overlay{font-size:clamp(7px,1.05vw,13px)}
.overlay h1{font-size:clamp(16px,3.4vw,36px);color:var(--or);text-shadow:4px 4px 0 #000,0 0 18px rgba(255,106,0,.6);line-height:1.2}
.overlay h1.red{color:#ff2a1f;text-shadow:4px 4px 0 #000}
.overlay .sub{color:var(--cream)}
.overlay b{color:var(--or2)}
.help{list-style:none}.help li{margin:.6em 0;color:#cfc4a8}
.touch{display:none}
@media (pointer:coarse){.desk{display:none}.touch{display:block}}
@media (orientation:portrait){:root{--fs:clamp(6px,2.1vw,11px)}.overlay{font-size:clamp(8px,2.6vw,13px)}#game .overlay{font-size:clamp(8px,2.6vw,13px)}.overlay h1{font-size:clamp(20px,8vw,40px)}}

.btn{display:inline-block;font:inherit;font-size:1.25em;cursor:pointer;text-decoration:none;color:#111;background:var(--or);
  border:4px solid #000;outline:3px solid var(--cream);padding:.9em 1.2em;box-shadow:0 6px 0 #7a3000;touch-action:manipulation}
.btn:hover{background:var(--or2)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #7a3000}
.btn.wa{background:#25d366;box-shadow:0 6px 0 #0b7a35}

/* ---------- BANNER (cidade) ---------- */
#banner{position:absolute;left:50%;top:11%;transform:translate(-50%,-16px);opacity:0;z-index:5;pointer-events:none;
  background:rgba(0,0,0,.55);border:2px solid var(--or);padding:.9em 1.1em;text-align:center;width:max-content;max-width:92%;
  transition:opacity .5s,transform .5s;font-size:clamp(7px,1vw,12px);line-height:1.7}
#banner.show{opacity:1;transform:translate(-50%,0)}
#banner .l1{color:var(--cream)}
#banner .l2{color:var(--or2);font-size:1.5em;margin:.3em 0}
#banner .l3{color:#fff}
@media (orientation:portrait){#banner{font-size:clamp(7px,2.2vw,12px)}}

/* ---------- VITÓRIA ---------- */
#win{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5vh;text-align:center;padding:3vh 4vw;
  background:radial-gradient(circle at 50% 40%,#ffd23a,#ff8a00 55%,#8a2600);clip-path:circle(0% at 50% 50%);transition:clip-path 4s ease-in;color:#fff}
#win.show{clip-path:circle(150% at 50% 50%)}
#winMsg{transform:scale(.3);opacity:0;transition:transform 4s ease-in,opacity 3s;text-shadow:4px 4px 0 #000}
#win.show #winMsg{transform:scale(1);opacity:1}
#winMsg p{font-size:clamp(9px,1.6vw,18px)}
#winMsg h1{font-size:clamp(20px,5vw,56px);color:#fff;margin:.4em 0;line-height:1.2}
#winMsg h2{font-size:clamp(10px,2.2vw,26px);color:#ffe9a8;line-height:1.5}
#winKombi{height:min(26vh,200px);width:auto;image-rendering:pixelated;opacity:0;transform:rotate(-8deg)}
#win.party #winKombi{opacity:1;animation:hop .45s steps(2) infinite alternate}
@keyframes hop{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}
#winCredits{opacity:0;visibility:hidden;transition:opacity 1s;font-size:clamp(7px,1.1vw,13px);line-height:2;text-shadow:2px 2px 0 #000}
#win.credits #winCredits{opacity:1;visibility:visible}
#winCredits .mail{color:#ffe9a8;margin-bottom:1.2em;word-break:break-all}
#winCredits .row{display:flex;gap:2em;justify-content:center;flex-wrap:wrap}
#winCredits .btn{text-shadow:none;font-size:1.1em}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:101;pointer-events:none}
@media (orientation:portrait){#winCredits{font-size:clamp(7px,2.4vw,12px)}}

/* ---------- INSTRUÇÕES ---------- */
#intro h2{font-size:clamp(14px,2.6vw,28px);color:var(--or);text-shadow:3px 3px 0 #000}
#intro .goal{max-width:34em;color:var(--cream)}
#intro .ready{color:var(--or2);font-size:1.2em}

/* ---------- AJUSTE PAINEL MOBILE (vertical) ---------- */
@media (orientation:portrait){
  #hud .brand{display:none}
  #hud{grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;overflow:hidden}
  #hud .box{padding:.35em .5em;overflow:hidden;min-width:0}
  #hud .box label{font-size:.7em;margin-bottom:.25em}
  #hud .score output{font-size:1.5em}
  #hud .hi output{font-size:1em}
  #hud .gauge output{font-size:.8em;margin-top:.2em}
  #hud .fuel{flex-direction:column}
  #hud .fuel #fuelbar{height:1.2em;border-width:2px}
  #hud .ef{margin-top:.2em;font-size:.7em}
  #lives{min-height:0;gap:.3em;height:100%}
  #lives canvas{height:2.4em}
  .lives{justify-content:flex-start}
}

/* ---------- HORA DO RUSH ---------- */
#rush{position:absolute;left:50%;top:11%;transform:translate(-50%,-16px);opacity:0;z-index:5;pointer-events:none;background:rgba(40,0,0,.6);border:2px solid #ffd400;padding:.5em .9em;text-align:center;width:max-content;max-width:92%;transition:opacity .5s,transform .5s,top .5s;font-size:clamp(7px,1vw,12px);line-height:1.5}
#rush.show{opacity:1;transform:translate(-50%,0)}
#rush .r1{color:#ff3b1f;font-size:1.3em;animation:blink .5s steps(2) infinite}
#rush .r2{color:#ffd400}
#rush .r3{color:#fff;font-size:.85em}
@media (orientation:portrait){#rush{font-size:clamp(7px,2.2vw,12px)}}