.game-screen{position:fixed;inset:0;display:none;background:#061425}
.game-screen.active{display:block}
.hud{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px 14px;background:linear-gradient(180deg,#102b45,#071827);border-bottom:2px solid rgba(255,255,255,.11);box-shadow:0 8px 26px rgba(0,0,0,.28);position:relative;z-index:4}
.hud-cluster{display:flex;gap:8px;align-items:center}.hud-cluster.right{justify-content:flex-end}
.hud-pill{min-width:76px;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:16px;background:#f5fbff;color:#12334f;border:2px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.23);font-size:20px}
.hud-pill span{color:#eb4d63}.hud-pill.light span{color:#f4ac19}.hud-pill.crystal span{color:#2e9ddb}
.hud-world{text-align:center;min-width:260px}.hud-world small{display:block;color:#7bdff8;font-weight:900;letter-spacing:.18em;font-size:10px}.hud-world strong{display:block;color:#fff;font-size:19px;margin-top:3px}
.hud-button{width:44px;height:44px;border-radius:15px;background:#e8f3fb;color:#173a55;font-size:20px;font-weight:950;box-shadow:0 5px 0 rgba(0,0,0,.23)}
.game-stage{height:calc(100vh - 72px);position:relative;display:flex;align-items:center;justify-content:center;padding:12px;background:radial-gradient(circle at center,#174f73,#061425 72%)}
#game-canvas{width:min(calc(100vw - 24px),1066px);height:auto;max-height:calc(100vh - 96px);aspect-ratio:5/3;display:block;background:#90cc86;border:5px solid #f5fbff;border-radius:23px;box-shadow:0 25px 80px rgba(0,0,0,.48);touch-action:none}
.toast{position:absolute;top:28px;left:50%;transform:translate(-50%,-18px);opacity:0;pointer-events:none;padding:11px 17px;border-radius:999px;background:rgba(3,19,34,.91);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:900;box-shadow:0 12px 32px rgba(0,0,0,.32);transition:.2s ease;z-index:5;text-align:center;max-width:90%}
.toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-controls{position:fixed;z-index:8;left:18px;right:18px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.dpad{width:174px;height:174px;position:relative;pointer-events:auto}
.dpad-button{position:absolute;width:58px;height:58px;border-radius:18px;background:rgba(250,253,255,.94);color:#050a0d;border:3px solid #07111b;font-size:24px;font-weight:950;box-shadow:0 6px 0 rgba(0,0,0,.35);touch-action:none}
.dpad-button.up{left:58px;top:0}.dpad-button.left{left:0;top:58px}.dpad-button.right{right:0;top:58px}.dpad-button.down{left:58px;bottom:0}
.light-action{width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:auto;background:radial-gradient(circle at 35% 25%,#fffbe1,#ffd15d 42%,#f79b29 100%);border:4px solid #fff7c4;color:#4d2800;box-shadow:0 0 0 5px rgba(255,193,71,.2),0 9px 0 #9b5313,0 15px 35px rgba(0,0,0,.35);touch-action:none}
.light-action span{font-size:37px;line-height:.8}.light-action b{font-size:15px}.light-action:active,.dpad-button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
@media(min-width:981px) and (pointer:fine){.mobile-controls{opacity:.88}.dpad{transform:scale(.82);transform-origin:left bottom}.light-action{transform:scale(.82);transform-origin:right bottom}}
@media(max-width:720px){
  .hud{height:60px;padding:6px;gap:4px}.hud-world{min-width:0}.hud-world small{display:none}.hud-world strong{font-size:13px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-pill{height:38px;min-width:60px;padding:0 8px;font-size:16px;border-radius:13px}.hud-pill.crystal{display:none}.hud-button{width:38px;height:38px}
  .game-stage{height:calc(100vh - 60px);padding:0;align-items:flex-start;background:#061425}
  #game-canvas{width:100vw;height:auto;max-height:none;border-radius:0;border-left:0;border-right:0;border-top:0;aspect-ratio:5/3}
  .mobile-controls{bottom:10px;left:10px;right:10px}.dpad{width:150px;height:150px}.dpad-button{width:50px;height:50px;border-radius:15px}.dpad-button.up{left:50px}.dpad-button.left{top:50px}.dpad-button.right{top:50px}.dpad-button.down{left:50px}
  .light-action{width:90px;height:90px}.light-action span{font-size:31px}
}
@media(max-height:650px){.mobile-controls{transform:scale(.8);transform-origin:bottom left}.light-action{transform:scale(.8);transform-origin:bottom right}}

/* Etapa 6 — HUD do chefão */
.boss-hud{position:fixed;z-index:7;top:82px;left:50%;transform:translateX(-50%);width:min(560px,86vw);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:9px 13px;border-radius:18px;background:linear-gradient(180deg,rgba(43,23,61,.96),rgba(20,11,31,.96));border:2px solid rgba(226,183,255,.8);box-shadow:0 12px 35px rgba(0,0,0,.5),0 0 22px rgba(184,92,255,.28);pointer-events:none}
.boss-hud[hidden]{display:none}.boss-hud-title{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 7px}.boss-hud-title span{grid-row:1/3;font-size:27px}.boss-hud-title strong{font-size:11px;color:#f5ddff;letter-spacing:.08em;white-space:nowrap}.boss-hud-title small{font-size:10px;color:#d494ff;font-weight:900;text-transform:uppercase}.boss-hud>b{color:#fff;font-size:13px;min-width:36px;text-align:right}
.boss-hp-track{height:15px;border-radius:999px;background:#160d20;border:2px solid #715083;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
.boss-hp-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#ff3d6e,#c758ff,#7b61ff);box-shadow:0 0 15px rgba(255,61,110,.65);transition:width .45s ease}
@media(max-width:720px){.boss-hud{top:66px;width:94vw;padding:7px 9px;gap:7px}.boss-hud-title strong{font-size:9px}.boss-hud-title small{font-size:8px}.boss-hud-title span{font-size:22px}.boss-hp-track{height:12px}}

/* Etapa 7 — polimento responsivo */
.hud-button{transition:transform .12s ease,filter .12s ease}.hud-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(min-width:1100px) and (pointer:fine){.game-stage{padding:18px}.mobile-controls{left:24px;right:24px;bottom:20px}}
@media(max-width:430px){.hud-pill{min-width:52px}.hud-world strong{max-width:118px}.hud-cluster{gap:4px}.hud-button{width:36px;height:36px;font-size:17px}}