:root {
  color-scheme: dark;
  --bg: #09090c;
  --panel: rgba(16, 16, 20, .92);
  --line: rgba(225, 185, 107, .32);
  --gold: #e1b96b;
  --bright: #ffe8ad;
  --yellow: #ffe316;
  --text: #f4f0e8;
  --muted: #a8a39a;
  --danger: #ff574d;
  --cyan: #70e7ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #050507;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
}

button { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(117, 63, 31, .18), transparent 38%),
    linear-gradient(120deg, transparent 0 46%, rgba(225, 185, 107, .035) 46% 47%, transparent 47% 100%);
}

.game-shell {
  height: 100svh;
  min-height: 520px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 34px;
  max-width: 1040px;
  margin: 0 auto;
  border-inline: 1px solid rgba(255,255,255,.06);
  background: #08080b;
}

.topbar, .game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(14px, 3vw, 28px);
  background: rgba(12,12,15,.96);
  border-color: rgba(255,255,255,.08);
  border-style: solid;
  border-width: 0 0 1px;
}

.brand { display: flex; align-items: baseline; gap: 9px; letter-spacing: .08em; }
.brand-mark { font-weight: 950; font-style: italic; font-size: clamp(1.25rem, 3vw, 1.75rem); transform: skew(-10deg); }
.brand-slash { color: var(--gold); font-size: 1.5rem; }
.brand-sub { color: var(--gold); font: 800 .75rem/1 ui-monospace, monospace; letter-spacing: .2em; }
.icon-button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--gold); background: rgba(255,255,255,.035); font-weight: 900; cursor: pointer;
}
.icon-button[aria-pressed="true"] { color: #777; }

.game-frame { position: relative; min-height: 0; overflow: hidden; background: #03040a; }
canvas { width: 100%; height: 100%; display: block; }

.hud {
  position: absolute; z-index: 4; inset: 12px 14px auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  pointer-events: none;
}
.hud > div {
  min-width: 0; padding: 8px 10px; border: 1px solid rgba(225,185,107,.2);
  background: rgba(5,6,10,.68); backdrop-filter: blur(8px);
}
.hud-label { display: block; color: var(--gold); font: 700 .62rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.hud strong { display: block; margin-top: 4px; font: 800 clamp(.72rem, 2vw, .9rem)/1 ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.screen-overlay {
  position: absolute; z-index: 10; inset: 0; display: grid; place-items: center;
  padding: 24px; opacity: 0; pointer-events: none; visibility: hidden;
  background: radial-gradient(circle at center, rgba(35,22,14,.35), rgba(3,4,9,.84));
  transition: opacity .22s ease, visibility .22s ease;
}
.screen-overlay.visible { opacity: 1; pointer-events: auto; visibility: visible; }
.panel {
  width: min(92%, 600px); padding: clamp(26px, 6vw, 54px); text-align: center;
  border: 1px solid rgba(225,185,107,.42); border-radius: 2px;
  background: linear-gradient(145deg, rgba(27,25,25,.96), rgba(9,10,14,.96));
  box-shadow: 0 32px 90px rgba(0,0,0,.66), inset 0 1px rgba(255,255,255,.06);
}
.eyebrow { margin: 0 0 12px; color: var(--gold); font: 800 .72rem/1.2 ui-monospace, monospace; letter-spacing: .28em; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { color: var(--bright); font-size: clamp(2.35rem, 8vw, 5.25rem); line-height: .78; letter-spacing: -.055em; }
h1 span { display: inline-block; color: #fff; font-family: Inter, sans-serif; font-style: italic; font-weight: 950; transform: skew(-9deg); letter-spacing: -.08em; }
h2 { color: var(--bright); font-size: clamp(2rem, 7vw, 4.2rem); line-height: .94; }
.lead { max-width: 470px; margin: 24px auto 0; color: #d0ccc5; font-size: 1rem; line-height: 1.55; }
.mission-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin: 24px 0; color: var(--gold); font: 700 .67rem/1.3 ui-monospace, monospace; letter-spacing: .13em; }
.primary-button {
  min-height: 52px; padding: 0 24px; border: 1px solid #f1cc7e; border-radius: 999px;
  background: linear-gradient(#f1ce87, #ac7532); color: #100d08;
  font: 900 .8rem/1 ui-monospace, monospace; letter-spacing: .15em; cursor: pointer;
  box-shadow: 0 8px 32px rgba(225,185,107,.2); transition: filter .15s ease, transform .15s ease;
}
.primary-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.primary-button:active { transform: translateY(1px); }
.controls-copy { margin: 18px auto 0; color: #87837d; font-size: .72rem; line-height: 1.5; }
.message-panel p:not(.eyebrow) { color: #bbb6ae; line-height: 1.55; }

.pause-badge, .toast {
  position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); pointer-events: none;
  font: 900 .72rem/1 ui-monospace, monospace; letter-spacing: .18em;
}
.pause-badge { top: 80px; display: none; padding: 10px 16px; color: var(--bright); background: rgba(0,0,0,.8); border: 1px solid var(--line); }
.pause-badge.visible { display: block; }
.toast { top: 24%; padding: 10px 16px; color: #0a0905; background: var(--bright); opacity: 0; transition: opacity .18s ease; }
.toast.visible { opacity: 1; }

.mobile-controls { display: none; position: absolute; z-index: 7; inset: auto 0 12px; justify-content: space-between; align-items: end; padding: 0 18px; pointer-events: none; }
.joystick, .fire-button, .bomb-button, #rocketButton { pointer-events: auto; user-select: none; -webkit-user-select: none; }
.joystick {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  border: 1px solid rgba(225,185,107,.48); background: radial-gradient(circle, rgba(225,185,107,.08), rgba(0,0,0,.68));
  box-shadow: inset 0 0 26px rgba(0,0,0,.7), 0 10px 32px rgba(0,0,0,.32);
}
.joystick-knob { position: absolute; width: 56px; height: 56px; left: 37px; top: 37px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #f6d58e, #8c5e2d 55%, #33200d); border: 2px solid #f5d48c; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.joy-arrow { position: absolute; color: rgba(255,232,173,.72); font-size: .68rem; }
.joy-up { top: 7px; left: 61px; }.joy-right { right: 8px; top: 59px; }.joy-down { bottom: 6px; left: 61px; }.joy-left { left: 8px; top: 59px; }
.action-buttons { display: flex; align-items: flex-end; gap: 12px; }
.fire-button, .bomb-button { border-radius: 50%; font-weight: 950; color: #0b0905; background: radial-gradient(circle at 35% 30%, #ffefb9, #d39846 56%, #704019); border: 2px solid #ffe3a3; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.fire-button { width: 92px; height: 92px; font-size: .84rem; }
.bomb-button { width: 58px; height: 58px; margin-bottom: 74px; font-size: 1rem; }

.game-footer { border-width: 1px 0 0; color: #89857e; font: 700 .65rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.game-footer b { color: var(--gold); }

@media (pointer: coarse), (max-width: 820px) {
  .game-shell { grid-template-rows: 58px minmax(0, 1fr) 30px; }
  .mobile-controls { display: flex; }
  .hud { inset: 8px 8px auto; gap: 4px; }
  .hud > div { padding: 7px 6px; }
  .hud-label { font-size: .52rem; }
  .hud strong { font-size: .68rem; }
  .brand-sub { font-size: .62rem; letter-spacing: .12em; }
  .panel { width: min(96%, 540px); padding: 26px 20px; }
  .controls-copy { display: none; }
  .game-footer { padding-inline: 10px; font-size: .55rem; }
  .lead { font-size: .9rem; }
}

@media (max-width: 420px) {
  .joystick { width: 116px; height: 116px; }
  .joystick-knob { width: 50px; height: 50px; left: 32px; top: 32px; }
  .joy-up, .joy-down { left: 54px; }.joy-right, .joy-left { top: 51px; }
  .fire-button { width: 82px; height: 82px; }
  .bomb-button { width: 52px; height: 52px; margin-bottom: 66px; }
  .mission-strip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

.countdown-overlay{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:radial-gradient(circle at 50% 48%,rgba(255,44,18,.13),rgba(0,0,0,.28) 34%,rgba(0,0,0,.72) 100%);pointer-events:none;overflow:hidden}
.countdown-overlay.is-active{display:grid}
.countdown-stage{position:absolute;top:23%;left:50%;transform:translateX(-50%);color:#fff;font-size:clamp(13px,2.1vw,23px);font-weight:900;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 0 14px rgba(255,255,255,.35),0 0 26px rgba(255,54,24,.45);white-space:nowrap}
.countdown-value{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(110px,27vw,270px);line-height:.8;font-weight:900;color:#fff;transform:scale(.2);opacity:0;-webkit-text-stroke:clamp(2px,.45vw,6px) #ff3018;text-shadow:0 0 12px #fff,0 0 28px #ff321c,0 0 62px #ff1400,0 12px 0 rgba(0,0,0,.45)}
.countdown-value.pop{animation:swordCountPop .82s cubic-bezier(.16,.9,.24,1) both}.countdown-value.go{font-size:clamp(90px,22vw,220px);color:#ffe316;-webkit-text-stroke-color:#ff3b16}
@keyframes swordCountPop{0%{transform:scale(.18) rotate(-5deg);opacity:0}22%{transform:scale(1.16) rotate(1deg);opacity:1}62%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}

.event-banner{position:absolute;left:50%;top:37%;z-index:26;transform:translate(-50%,-50%) scale(.55);opacity:0;pointer-events:none;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(34px,7vw,82px);font-weight:900;letter-spacing:.05em;white-space:nowrap;color:#fff;text-align:center;-webkit-text-stroke:2px #161616;text-shadow:0 0 10px #fff,0 0 24px #ff3b18,0 6px 0 rgba(0,0,0,.5)}
.event-banner.show{animation:eventPop 1.15s cubic-bezier(.16,.9,.24,1) both}
.event-banner.life{color:#66ff9c;text-shadow:0 0 10px #fff,0 0 26px #18ff68,0 6px 0 rgba(0,0,0,.5)}
.event-banner.weapon{color:#ffe316;text-shadow:0 0 10px #fff,0 0 26px #ff6a00,0 6px 0 rgba(0,0,0,.5)}
.event-banner.rocket{color:#ff9a52}.event-banner.megabomb{color:#ff5c48}
@keyframes eventPop{0%{transform:translate(-50%,-50%) scale(.45);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}65%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-60%) scale(1.18);opacity:0}}

.weapon-special{font-size:22px!important}

/* 1.4 exact supplied menu image — no visible duplicate UI */
#startScreen.exact-menu{
  padding:0!important; inset:0!important; overflow:hidden!important;
  background:#000 url("menu-background.webp") center center/cover no-repeat!important;
}
.menu-hotspot{position:absolute!important;z-index:8!important;left:50%!important;transform:translateX(-50%)!important;
  width:22%!important;min-width:190px!important;max-width:340px!important;height:5.3%!important;
  border:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;cursor:pointer!important}
.start-hotspot{top:42.5%!important;height:6.2%!important}
.settings-hotspot{top:50.2%!important}
.leaderboard-hotspot{top:56.4%!important}
.about-hotspot{top:62.5%!important}
.floating-sound{position:fixed;z-index:390;right:18px;bottom:18px;width:38px;height:38px;border-radius:50%;
 border:1px solid #79dfffaa;background:#06111dcc;color:#e8fbff;font-size:18px;cursor:pointer}
.web-close{display:none;position:fixed;z-index:400;right:15px;top:15px;width:43px;height:43px;border-radius:50%;
 border:1px solid #79dfffcc;background:#06111dcc;color:#fff;font-size:29px;cursor:pointer}
body.embed-mode .web-close{display:block}
body:has(#startScreen.visible) .hud,body:has(#startScreen.visible) .mobile-controls,body:has(#startScreen.visible) .pause-badge{visibility:hidden!important}
@media(max-width:700px){
 .menu-hotspot{width:42%!important;min-width:150px!important}
}

/* 1.4.1 — absolutely clean main menu */
body.menu-active .hud,
body.menu-active .topbar,
body.menu-active .mobile-controls,
body.menu-active .controls,
body.menu-active .controls-hint,
body.menu-active .help,
body.menu-active footer:not(.cinematic-footer),
body.menu-active .pause-badge,
body.menu-active #pauseBadge,
body.menu-active #eventBanner,
body.menu-active #countdownOverlay,
body.menu-active #toast{
  display:none!important;
}
body.menu-active #gameCanvas{visibility:hidden!important}
body.menu-active #startScreen{display:block!important}

/* === 1.4.2 DEFINITIVE FULLSCREEN MENU FIX === */
html,body{width:100%;height:100%}

#startScreen.exact-menu{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  overflow:hidden!important;

  background-image:url("menu-background.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  background-color:#000!important;

  z-index:10000!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#startScreen.exact-menu:not(.visible){
  display:none!important;
}

/* Nothing from the game may sit above the menu. */
body.menu-active #gameCanvas,
body.menu-active canvas,
body.menu-active .hud,
body.menu-active .topbar,
body.menu-active .mobile-controls,
body.menu-active .controls,
body.menu-active .controls-hint,
body.menu-active .help,
body.menu-active .pause-badge,
body.menu-active #pauseBadge,
body.menu-active #eventBanner,
body.menu-active #countdownOverlay,
body.menu-active #toast{
  display:none!important;
}

/* Clickable transparent regions on the labels baked into the supplied menu image. */
#startScreen.exact-menu .menu-hotspot{
  position:absolute!important;
  z-index:10001!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  opacity:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}
#startScreen.exact-menu .start-hotspot{top:42.5%!important;width:23%!important;height:6.4%!important}
#startScreen.exact-menu .settings-hotspot{top:50.2%!important;width:23%!important;height:5.4%!important}
#startScreen.exact-menu .leaderboard-hotspot{top:56.4%!important;width:23%!important;height:5.4%!important}
#startScreen.exact-menu .about-hotspot{top:62.5%!important;width:23%!important;height:5.4%!important}

body.menu-active .floating-sound{
  z-index:10002!important;
}
body.embed-mode.menu-active .web-close{
  z-index:10003!important;
}

@media(max-width:700px){
 #startScreen.exact-menu{background-size:contain!important;background-color:#000!important}
 #startScreen.exact-menu .menu-hotspot{width:42%!important}
}

/* === 1.4.3 VISIBLE MENU BUTTONS === */
#startScreen.exact-menu .exact-visible-menu{
  position:absolute!important;
  z-index:10001!important;
  left:50%!important;
  top:42.2%!important;
  transform:translateX(-50%)!important;
  width:300px!important;
  max-width:38vw!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}
#startScreen.exact-menu .exact-visible-menu button{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid rgba(76,205,255,.72)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,rgba(12,40,63,.94),rgba(3,15,27,.97))!important;
  color:#e9fbff!important;
  font:800 11px/1 Arial,sans-serif!important;
  letter-spacing:.08em!important;
  text-align:center!important;
  text-shadow:0 0 7px rgba(54,210,255,.72)!important;
  box-shadow:inset 0 0 14px rgba(37,187,255,.10),0 0 9px rgba(0,162,255,.10)!important;
  opacity:1!important;
  visibility:visible!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transform:none!important;
  left:auto!important;top:auto!important;
}
#startScreen.exact-menu .exact-visible-menu button span{
  display:inline-block!important;width:24px!important;text-align:left!important
}
#startScreen.exact-menu .exact-visible-menu .exact-start{
  height:48px!important;
  min-height:48px!important;
  border-color:#ffe092!important;
  background:linear-gradient(180deg,#ffd45b,#f28a1c)!important;
  color:#07121c!important;
  font-size:13px!important;
  text-shadow:none!important;
  box-shadow:0 0 20px rgba(255,139,22,.40),inset 0 1px rgba(255,255,255,.78)!important;
}
#startScreen.exact-menu .exact-visible-menu button:hover{filter:brightness(1.14)!important}
@media(max-width:700px){
 #startScreen.exact-menu .exact-visible-menu{width:min(300px,58vw)!important;max-width:none!important;top:41%!important}
 #startScreen.exact-menu .exact-visible-menu button{height:36px!important;min-height:36px!important;font-size:9px!important}
 #startScreen.exact-menu .exact-visible-menu .exact-start{height:43px!important;min-height:43px!important;font-size:11px!important}
}

/* === 1.4.4 GAME VISIBILITY RESTORE === */
body:not(.menu-active) #gameCanvas{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative;
  z-index:1;
}
body:not(.menu-active) .hud,
body:not(.menu-active) .mobile-controls{
  visibility:visible!important;
}
body:not(.menu-active) #startScreen.exact-menu{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.menu-dialog{position:fixed;inset:0;z-index:11000;display:none;place-items:center;padding:24px;background:rgba(0,4,10,.68);backdrop-filter:blur(5px)}
.menu-dialog.visible{display:grid!important}
.menu-dialog-card{position:relative;width:min(520px,88vw);padding:34px 30px 28px;border:1px solid rgba(90,218,255,.72);border-radius:8px;background:linear-gradient(145deg,rgba(8,27,44,.98),rgba(2,10,19,.99));box-shadow:0 24px 80px #000b,0 0 28px rgba(22,184,255,.18);color:#e9fbff;text-align:center}
.menu-dialog-close{position:absolute;right:12px;top:10px;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border-radius:50%;border:1px solid #71ddff88;background:#071521;color:#fff;font:400 23px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.menu-dialog-eyebrow{color:#6fe4ff;font:800 9px/1 Arial,sans-serif;letter-spacing:.22em;margin-bottom:12px}
.menu-dialog-card h2{font:900 25px/1.1 Arial,sans-serif;color:#fff;letter-spacing:.05em;margin:0 0 20px;text-shadow:0 0 12px #26cfff88}
.menu-dialog-body{font:500 14px/1.6 Arial,sans-serif;color:#ccecf6}
.menu-dialog-body .setting-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0;border-top:1px solid #63dfff22}
.menu-dialog-body button{border:1px solid #62dfff88;border-radius:5px;background:#0a2638;color:#eaffff;padding:9px 14px;font-weight:800;cursor:pointer}
.menu-dialog-body .record{font-size:28px;font-weight:900;color:#ffd35c;text-shadow:0 0 12px #ff9c2b66}
body.menu-active .menu-dialog.visible{display:grid!important}

/* === 1.4.6 ACTUAL GAME AREA FIX ===
   The topbar was removed from HTML, therefore the shell has exactly two children:
   game-frame + footer. Do not reserve the obsolete 64px topbar row. */
.game-shell{
  grid-template-rows:minmax(0,1fr) 34px!important;
}
.game-frame{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  position:relative!important;
  overflow:hidden!important;
}
body:not(.menu-active) .game-frame{
  /* Keep the HUD rows and canvas in one real grid. The old block override
     made the canvas extend below the visible frame and clipped the ship. */
  display:grid!important;
}
body:not(.menu-active) #gameCanvas{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
@media(max-width:700px){
  .game-shell{
    grid-template-rows:minmax(0,1fr) 30px!important;
  }
}

/* === 1.6 ENERGY + ARSENAL === */
#eventBanner{top:2.5%!important;bottom:auto!important}
#toast{top:8.5%!important;bottom:auto!important}
.combat-hud{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:68;width:min(800px,94%);display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none}
.energy-box,.arsenal-box{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(91,218,255,.38);border-radius:5px;background:rgba(1,10,19,.78);color:#dffaff;font:800 10px/1 Arial,sans-serif}
.energy-box{min-width:270px}.energy-track{flex:1;height:10px;min-width:145px;border:1px solid #9beeff88;background:#020609;overflow:hidden}
#energyFill{width:100%;height:100%;background:linear-gradient(90deg,#ff3c31,#ffd448 40%,#61efaa 72%,#53e9ff);transition:width .16s linear}
#energyValue{width:25px;text-align:right;color:#fff}.arsenal-box{gap:10px}.arsenal-box b{color:#fff}
body.menu-active .combat-hud{display:none!important}
@media(max-width:700px){#eventBanner{top:1.5%!important}#toast{top:7%!important}.combat-hud{top:4px;width:97%;gap:4px;flex-wrap:wrap}.energy-box{min-width:210px;flex:1}.arsenal-box{gap:6px;font-size:9px}}

/* Short, local boss explosion instead of a fullscreen freeze-looking effect */
.stage-finale{position:absolute!important;inset:0!important;z-index:74!important;background:transparent!important;pointer-events:none!important}
.stage-finale.active{display:block!important;animation:none!important}
.stage-finale .finale-copy{display:none!important}
.stage-finale .finale-flash,.stage-finale .finale-ring,.stage-finale .finale-debris i{left:var(--fx-x,50%)!important;top:var(--fx-y,35%)!important}
.stage-finale .finale-flash{width:8px!important;height:8px!important;animation:bossCore .55s ease-out both!important}
.stage-finale .finale-ring{width:30px!important;height:30px!important;border-width:3px!important}
.stage-finale .r1{animation:bossRing .68s ease-out both!important}.stage-finale .r2{animation:bossRing .76s .08s ease-out both!important}
.stage-finale .finale-debris i{width:4px!important;height:10px!important;animation:bossDebris .72s ease-out both!important}
@keyframes bossCore{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}45%{transform:translate(-50%,-50%) scale(4.5);opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
@keyframes bossRing{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(7);opacity:0}}
@keyframes bossDebris{0%{transform:translate(-50%,-50%) rotate(var(--r)) translateY(0);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--r)) translateY(var(--d));opacity:0}}

/* === 1.7.2 MAIN MENU BUTTONS ===
   All four buttons have exactly the same resting appearance.
   Yellow/orange is hover/focus only. */
#startScreen .exact-visible-menu .menu-action,
#startScreen .exact-visible-menu #startButton,
#startScreen .exact-visible-menu #settingsMenuButton,
#startScreen .exact-visible-menu #leaderboardMenuButton,
#startScreen .exact-visible-menu #aboutMenuButton{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 20px!important;
  border:1px solid rgba(74,205,255,.82)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(13,58,87,.94),rgba(5,29,48,.96))!important;
  color:#f2fbff!important;
  box-shadow:inset 0 0 18px rgba(31,173,255,.10),0 0 10px rgba(0,173,255,.13)!important;
  text-shadow:0 0 7px rgba(75,212,255,.48)!important;
  font:900 14px/1 Arial,sans-serif!important;
  letter-spacing:.07em!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease!important;
}

/* Yellow only while the pointer is actually over the button. */
#startScreen .exact-visible-menu .menu-action:hover,
#startScreen .exact-visible-menu #startButton:hover,
#startScreen .exact-visible-menu #settingsMenuButton:hover,
#startScreen .exact-visible-menu #leaderboardMenuButton:hover,
#startScreen .exact-visible-menu #aboutMenuButton:hover,
#startScreen .exact-visible-menu .menu-action:focus-visible{
  border-color:#ffd35a!important;
  background:linear-gradient(180deg,#ffc93d,#e89213)!important;
  color:#07131d!important;
  box-shadow:0 0 10px rgba(255,193,40,.65),0 0 25px rgba(255,148,13,.30),inset 0 1px 0 rgba(255,255,255,.55)!important;
  text-shadow:none!important;
  transform:translateY(-1px)!important;
}

/* Keyboard focus must not leave a yellow button after a mouse click. */
#startScreen .exact-visible-menu .menu-action:focus:not(:focus-visible),
#startScreen .exact-visible-menu #startButton:focus:not(:focus-visible),
#startScreen .exact-visible-menu #settingsMenuButton:focus:not(:focus-visible),
#startScreen .exact-visible-menu #leaderboardMenuButton:focus:not(:focus-visible),
#startScreen .exact-visible-menu #aboutMenuButton:focus:not(:focus-visible){
  border-color:rgba(74,205,255,.82)!important;
  background:linear-gradient(180deg,rgba(13,58,87,.94),rgba(5,29,48,.96))!important;
  color:#f2fbff!important;
  box-shadow:inset 0 0 18px rgba(31,173,255,.10),0 0 10px rgba(0,173,255,.13)!important;
  text-shadow:0 0 7px rgba(75,212,255,.48)!important;
  transform:none!important;
}

/* === 1.7.4 ARSENAL: clean vertical icon / label / value alignment === */
.arsenal-box{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(54px,1fr))!important;
  gap:4px!important;
  align-items:stretch!important;
  padding:5px 7px!important;
}
.arsenal-item{
  display:grid!important;
  grid-template-rows:20px 11px 14px!important;
  place-items:center!important;
  min-width:54px!important;
  padding:2px 4px!important;
  line-height:1!important;
  text-align:center!important;
}
.arsenal-item i{
  display:block!important;
  height:20px!important;
  font-style:normal!important;
  font-size:16px!important;
  line-height:20px!important;
}
.arsenal-item em{
  display:block!important;
  height:11px!important;
  font:800 8px/11px Arial,sans-serif!important;
  font-style:normal!important;
  letter-spacing:.06em!important;
  color:#83dff7!important;
  white-space:nowrap!important;
}
.arsenal-item b{
  display:block!important;
  height:14px!important;
  font:900 11px/14px Arial,sans-serif!important;
  color:#fff!important;
  white-space:nowrap!important;
}
@media(max-width:700px){
  .arsenal-box{grid-template-columns:repeat(5,minmax(48px,1fr))!important;width:100%!important}
  .arsenal-item{min-width:48px!important;padding:1px!important}
  .arsenal-item em{font-size:7px!important}
}

/* === 1.7.5 HUD FIX: rows stacked vertically === */
.combat-hud{
  align-items:flex-start!important;
}
.arsenal-box{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:2px!important;
  width:160px!important;
  min-width:160px!important;
  padding:5px 8px!important;
}
.arsenal-row{
  display:grid!important;
  grid-template-columns:24px 1fr 30px!important;
  align-items:center!important;
  width:100%!important;
  min-height:20px!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
}
.arsenal-icon{
  display:block!important;
  width:24px!important;
  font-size:15px!important;
  line-height:20px!important;
  text-align:center!important;
}
.arsenal-label{
  display:block!important;
  font:800 9px/20px Arial,sans-serif!important;
  letter-spacing:.06em!important;
  color:#83dff7!important;
  white-space:nowrap!important;
  text-align:left!important;
}
.arsenal-row b{
  display:block!important;
  font:900 11px/20px Arial,sans-serif!important;
  color:#fff!important;
  text-align:right!important;
  white-space:nowrap!important;
}
@media(max-width:700px){
  .arsenal-box{width:145px!important;min-width:145px!important}
  .arsenal-row{grid-template-columns:22px 1fr 27px!important}
}

/* === 1.7.6 MOBILE CONTROL BUTTON ALIGNMENT === */
.mobile-controls button,
.mobile-controls .control-button,
.mobile-controls [role="button"]{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  line-height:1!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

.mobile-controls button *,
.mobile-controls .control-button *,
.mobile-controls [role="button"] *{
  vertical-align:middle!important;
  line-height:1!important;
}

/* Emoji glyphs have different font metrics; normalize their visual box. */
.mobile-controls button .icon,
.mobile-controls button i,
.mobile-controls button svg,
.mobile-controls button img{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  vertical-align:middle!important;
}

/* Keep all action buttons equal height so FIRE / BOMB / ROCKET / TOTAL line up. */
.mobile-controls button{
  min-height:42px!important;
  height:42px!important;
}

/* === 1.7.7 ACTUAL ACTION BUTTON CONTENT REBUILT === */
#fireButton,#bombButton,#rocketButton,#megaBombButton{
  display:grid!important;
  grid-template-columns:24px auto!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  justify-content:center!important;
  column-gap:6px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 10px!important;
  line-height:1!important;
}
#fireButton .ctrl-icon,#bombButton .ctrl-icon,#rocketButton .ctrl-icon,#megaBombButton .ctrl-icon{
  display:flex!important;
  width:24px!important;
  height:24px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  font-style:normal!important;
  font-size:15px!important;
  line-height:24px!important;
  transform:none!important;
}
#fireButton .ctrl-label,#bombButton .ctrl-label,#rocketButton .ctrl-label,#megaBombButton .ctrl-label{
  display:flex!important;
  height:24px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:0!important;
  font:800 10px/24px Arial,sans-serif!important;
  letter-spacing:.03em!important;
  line-height:24px!important;
  transform:none!important;
  position:static!important;
}

/* === 1.7.8 REAL FIX: identical action-button geometry === */
.action-buttons{
  display:grid!important;
  grid-template-columns:repeat(2,92px)!important;
  gap:8px!important;
  align-items:center!important;
  justify-items:stretch!important;
}

#fireButton,#bombButton,#rocketButton,#megaBombButton{
  box-sizing:border-box!important;
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
  padding:0 8px!important;
  border-radius:8px!important;

  display:grid!important;
  grid-template-columns:22px 1fr!important;
  grid-template-rows:42px!important;
  column-gap:4px!important;
  align-items:center!important;
  justify-items:start!important;
  overflow:hidden!important;
}

#fireButton .ctrl-icon,#bombButton .ctrl-icon,
#rocketButton .ctrl-icon,#megaBombButton .ctrl-icon{
  display:block!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  font-size:15px!important;
  line-height:22px!important;
  align-self:center!important;
}

#fireButton .ctrl-label,#bombButton .ctrl-label,
#rocketButton .ctrl-label,#megaBombButton .ctrl-label{
  display:block!important;
  width:auto!important;
  height:22px!important;
  margin:0!important;
  padding:0!important;
  font:900 9px/22px Arial,sans-serif!important;
  letter-spacing:0!important;
  line-height:22px!important;
  text-align:left!important;
  white-space:nowrap!important;
  align-self:center!important;
}

/* Kill the old special circular sizing/vertical offsets. */
#bombButton{margin-bottom:0!important}
#fireButton{font-size:inherit!important}

@media(max-width:700px){
  .action-buttons{grid-template-columns:repeat(2,86px)!important;gap:6px!important}
  #fireButton,#bombButton,#rocketButton,#megaBombButton{
    width:86px!important;min-width:86px!important;max-width:86px!important;
    height:40px!important;min-height:40px!important;max-height:40px!important;
    grid-template-rows:40px!important;
  }
}

/* === 1.7.9 HUD LAYOUT FIX ===
   Reserve real rows above the canvas: nothing from combat HUD overlays gameplay. */
.game-frame{
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  grid-template-columns:1fr!important;
  align-items:stretch!important;
  min-height:0!important;
  overflow:hidden!important;
}
.game-frame > .hud{
  position:relative!important;
  inset:auto!important;
  grid-row:1!important;
  z-index:20!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.game-frame > .combat-hud{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  grid-row:2!important;
  z-index:20!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:4px 10px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  background:rgba(1,9,17,.96)!important;
  border-top:1px solid rgba(62,188,235,.18)!important;
  border-bottom:1px solid rgba(62,188,235,.28)!important;
  pointer-events:none!important;
}
.game-frame > #gameCanvas{
  position:relative!important;
  inset:auto!important;
  grid-row:3!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:block!important;
  z-index:1!important;
}

/* Arsenal: compact single status line under ÉLET. */
.game-frame > .combat-hud .energy-box{
  min-width:250px!important;
  margin:0!important;
}
.game-frame > .combat-hud .arsenal-box{
  display:flex!important;
  flex-direction:row!important;
  width:auto!important;
  min-width:0!important;
  gap:8px!important;
  padding:4px 7px!important;
}
.game-frame > .combat-hud .arsenal-row{
  display:grid!important;
  grid-template-columns:19px auto 20px!important;
  align-items:center!important;
  gap:2px!important;
  width:auto!important;
  min-width:0!important;
  min-height:20px!important;
}
.game-frame > .combat-hud .arsenal-icon{width:19px!important;font-size:13px!important}
.game-frame > .combat-hud .arsenal-label{font-size:8px!important;line-height:20px!important}
.game-frame > .combat-hud .arsenal-row b{font-size:10px!important;line-height:20px!important}

/* The outer shell remains game-frame + footer: do not recreate the old topbar row. */
.game-shell{grid-template-rows:minmax(0,1fr) 34px!important}

@media(max-width:700px){
  .game-frame > .combat-hud{
    flex-wrap:wrap!important;
    gap:3px!important;
    padding:3px 5px!important;
  }
  .game-frame > .combat-hud .energy-box{min-width:220px!important}
  .game-frame > .combat-hud .arsenal-box{
    width:100%!important;
    justify-content:center!important;
    gap:4px!important;
  }
  .game-frame > .combat-hud .arsenal-label{font-size:7px!important}
}

/* === 1.7.10 EVENT TEXT VISIBILITY ===
   POWER UP / EXTRA LIFE / BOMB / ROCKET etc. must sit inside the visible playfield,
   below the two HUD rows. */
.event-banner{
  top:11%!important;
  transform:translate(-50%,0)!important;
}
.event-toast{
  top:17%!important;
  transform:translate(-50%,0)!important;
}

/* On shorter/mobile layouts the reserved HUD is proportionally taller. */
@media(max-width:700px), (max-height:800px){
  .event-banner{top:15%!important}
  .event-toast{top:22%!important}
}

/* === 1.7.11 BOSS DETONATION: short, violent, local — no freeze-looking fullscreen overlay === */
.boss-detonation{
 position:absolute; inset:0; z-index:55; pointer-events:none; overflow:hidden;
}
.boss-detonation>*{position:absolute;left:var(--fx-x);top:var(--fx-y);transform:translate(-50%,-50%)}
.bd-flash{
 width:38px;height:38px;border-radius:50%;
 background:#fff; box-shadow:0 0 22px 12px #fff,0 0 55px 28px #ffe06a,0 0 95px 45px #ff5a18;
 animation:bdFlash .32s ease-out forwards;
}
.bd-core{
 width:30px;height:30px;border-radius:50%;
 background:radial-gradient(circle,#fff 0 15%,#fff27a 25%,#ff7a18 52%,#e51600 72%,transparent 74%);
 box-shadow:0 0 25px #fff,0 0 65px #ff7a18;
 animation:bdCore .85s cubic-bezier(.1,.7,.2,1) forwards;
}
.bd-ring{
 width:28px;height:28px;border:4px solid rgba(255,239,124,.95);border-radius:50%;
 box-shadow:0 0 12px #ff8a20,inset 0 0 10px #fff;
 opacity:0; animation:bdRing .72s ease-out forwards;
}
.bd-ring.r2{animation-delay:.10s}.bd-ring.r3{animation-delay:.20s}
.bd-sparks{
 width:10px;height:10px;border-radius:50%;
 box-shadow:
  0 -70px 0 2px #fff,48px -52px 0 2px #ffd34e,78px -12px 0 3px #ff6b1a,
  65px 45px 0 2px #fff,25px 78px 0 3px #ff8b1f,-35px 72px 0 2px #ffd34e,
  -72px 35px 0 3px #ff5a18,-80px -22px 0 2px #fff,-45px -62px 0 3px #ff9b25,
  105px 22px 0 2px #ffd34e,-102px 5px 0 2px #ff6b1a,5px 105px 0 3px #fff;
 animation:bdSparks .85s ease-out forwards;
}
@keyframes bdFlash{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) scale(5.5);opacity:0}}
@keyframes bdCore{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}55%{transform:translate(-50%,-50%) scale(5);opacity:1}100%{transform:translate(-50%,-50%) scale(7);opacity:0}}
@keyframes bdRing{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0;border-width:1px}}
@keyframes bdSparks{0%{transform:translate(-50%,-50%) scale(.15) rotate(0);opacity:0}18%{opacity:1}100%{transform:translate(-50%,-50%) scale(2.2) rotate(35deg);opacity:0}}

/* === 1.7.12 BOSS DESTRUCTION SEQUENCE === */
.stage-finale.active{display:block!important}
.stage-finale:not(.final-blast) .finale-flash,
.stage-finale:not(.final-blast) .finale-ring{opacity:0!important;animation:none!important}

.boss-seq-burst{
 position:absolute;width:1px;height:1px;z-index:3;pointer-events:none;
 transform:translate(-50%,-50%) scale(var(--s,1));
}
.boss-seq-burst i{position:absolute;left:0;top:0;display:block;pointer-events:none}
.bs-core{
 width:24px;height:24px;margin:-12px;border-radius:50%;
 background:radial-gradient(circle,#fff 0 18%,#ffe769 28%,#ff7b18 58%,rgba(255,35,0,.2) 76%,transparent 78%);
 box-shadow:0 0 14px 7px #fff,0 0 35px 18px #ff9a21;
 animation:seqCore .52s ease-out forwards;
}
.bs-ring{
 width:30px;height:30px;margin:-17px;border:3px solid #ffe36b;border-radius:50%;
 box-shadow:0 0 12px #ff7418;animation:seqRing .55s ease-out forwards;
}
.bs-spark{
 width:5px;height:18px;margin:-9px -2px;border-radius:50%;
 background:#fff3a1;box-shadow:0 0 7px #ff6a12;transform-origin:2px 9px;
 animation:seqSpark .55s ease-out forwards;
}
.bs-spark.s1{--a:20deg}.bs-spark.s2{--a:112deg}.bs-spark.s3{--a:205deg}.bs-spark.s4{--a:298deg}
@keyframes seqCore{0%{transform:scale(.2);opacity:1}45%{transform:scale(3.3);opacity:1}100%{transform:scale(5.5);opacity:0}}
@keyframes seqRing{0%{transform:scale(.25);opacity:1}100%{transform:scale(5.4);opacity:0}}
@keyframes seqSpark{0%{transform:rotate(var(--a)) translateY(0) scaleY(.4);opacity:1}100%{transform:rotate(var(--a)) translateY(-68px) scaleY(1.5);opacity:0}}

.stage-finale.final-blast .finale-flash{
 opacity:1!important;width:18px!important;height:18px!important;
 animation:finalCore 1.05s ease-out both!important;
}
.stage-finale.final-blast .finale-ring.r1{opacity:1!important;animation:finalRing 1.0s ease-out both!important}
.stage-finale.final-blast .finale-ring.r2{opacity:1!important;animation:finalRing 1.18s .12s ease-out both!important}
.stage-finale.final-blast .finale-debris i{
 width:5px!important;height:15px!important;opacity:1!important;
 animation:finalDebris 1.35s ease-out both!important;
}
@keyframes finalCore{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}35%{transform:translate(-50%,-50%) scale(7);opacity:1}100%{transform:translate(-50%,-50%) scale(15);opacity:0}}
@keyframes finalRing{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(13);opacity:0}}
@keyframes finalDebris{0%{transform:translate(-50%,-50%) rotate(var(--r)) translateY(0);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--r)) translateY(var(--d));opacity:0}}

/* === 1.7.13 INFO DIALOGS === */
.menu-dialog-card{width:min(720px,92vw)!important;max-height:86vh!important;padding:22px 24px!important}
.menu-dialog-body{max-height:70vh!important;overflow-y:auto!important;padding:2px 6px 2px 2px!important;text-align:left!important}
.settings-head,.about-clean h3{margin:12px 0 7px!important;color:#ffe34f!important;font-size:11px!important;letter-spacing:.12em!important}
.control-table{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 14px!important}
.control-table>div,.sector-list>div,.pickup-list>div{display:grid!important;grid-template-columns:145px 1fr!important;gap:10px!important;align-items:baseline!important;padding:6px 8px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
.control-table b,.sector-list b,.pickup-list b{color:#fff!important;font-size:10px!important}
.control-table span,.sector-list span,.pickup-list span{color:#afd0df!important;font-size:10px!important;line-height:1.4!important}
.about-clean section{margin:0 0 12px!important;padding:11px 13px!important;border:1px solid rgba(65,188,232,.22)!important;border-radius:9px!important;background:rgba(3,15,27,.72)!important}
.about-clean .story-card,.about-clean .goal-card{border-color:rgba(255,226,68,.32)!important}
.about-clean p{margin:0 0 8px!important;font-size:10.5px!important;line-height:1.58!important;color:#c4dbe5!important}
.about-clean p:last-child{margin-bottom:0!important}
.story-last{color:#fff!important}
.settings-clean .setting-row{margin-bottom:10px!important}
@media(max-width:620px){
 .menu-dialog-card{padding:16px 13px!important}
 .control-table{grid-template-columns:1fr!important}
 .control-table>div,.sector-list>div,.pickup-list>div{grid-template-columns:120px 1fr!important}
 .menu-dialog-body{max-height:68vh!important}
}

/* === 1.7.18 CLEAN UI REBUILD === */

/* MAIN MENU - exact supplied artwork, no generated assets */
body.menu-active #startScreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:0!important;
  box-sizing:border-box!important;
  background-color:#02060b!important;
  background-image:url("menu-background.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
}

/* Do not let old card sizing distort or offset the menu */
body.menu-active #startScreen .start-card{
  box-sizing:border-box!important;
}

/* Four buttons = one clean vertical column */
body.menu-active #startScreen nav{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:400px!important;
  max-width:78vw!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Button itself has a fixed icon column and one common label column */
body.menu-active #startScreen nav > button{
  position:relative!important;
  display:grid!important;
  grid-template-columns:32px 1fr!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:12px!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 18px!important;
  box-sizing:border-box!important;
  text-align:left!important;
  text-indent:0!important;
  transform:none!important;
  white-space:nowrap!important;
}

/* All four icons occupy exactly the same cell */
body.menu-active #startScreen nav > button > span{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  line-height:1!important;
}

/* ABOUT / SETTINGS: force a normal readable UI font.
   The arcade/display font is deliberately NOT used for body copy. */
.menu-dialog-body,
.menu-dialog-body p,
.menu-dialog-body span,
.menu-dialog-body small,
.menu-dialog-body b,
.menu-dialog-body button,
.about-clean,
.about-clean p,
.about-clean span,
.about-clean b,
.settings-clean,
.settings-clean span,
.settings-clean small,
.settings-clean b{
  font-family:Arial,Helvetica,sans-serif!important;
  font-style:normal!important;
  font-stretch:normal!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-variant:normal!important;
}

.menu-dialog-card{
  width:min(780px,94vw)!important;
  max-height:90vh!important;
  overflow:hidden!important;
}
.menu-dialog-body{
  max-height:72vh!important;
  overflow-y:auto!important;
  font-size:16px!important;
  line-height:1.55!important;
  color:#eef8fc!important;
}
.menu-dialog-body p,
.about-clean p{
  font-size:16px!important;
  line-height:1.55!important;
  color:#eef8fc!important;
}
.about-clean h3,
.settings-head{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.04em!important;
  color:#ffe34f!important;
}
.control-table b,.sector-list b,.pickup-list b{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.45!important;
  color:#fff!important;
}
.control-table span,.sector-list span,.pickup-list span,.menu-info-note{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.5!important;
  color:#d9edf6!important;
}
.control-table>div,.sector-list>div,.pickup-list>div{
  grid-template-columns:180px minmax(0,1fr)!important;
}

@media(max-width:650px){
  body.menu-active #startScreen nav{
    width:340px!important;
    max-width:84vw!important;
    gap:7px!important;
  }
  body.menu-active #startScreen nav > button{
    height:44px!important;
    min-height:44px!important;
    grid-template-columns:30px 1fr!important;
    column-gap:10px!important;
    padding:0 14px!important;
  }
  body.menu-active #startScreen nav > button > span{
    width:30px!important;
    min-width:30px!important;
  }
  .menu-dialog-body,.menu-dialog-body p,.about-clean p{font-size:15px!important}
  .control-table>div,.sector-list>div,.pickup-list>div{
    grid-template-columns:125px minmax(0,1fr)!important;
  }
}

/* === 1.7.19 MAIN MENU LABEL ALIGNMENT === */
body.menu-active #startScreen nav > button{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  column-gap:14px!important;
  justify-items:start!important;
  text-align:left!important;
  padding-left:24px!important;
  padding-right:18px!important;
}

body.menu-active #startScreen nav > button > span{
  width:30px!important;
  min-width:30px!important;
  justify-self:start!important;
  text-align:center!important;
}

/* Button text begins after the same 24 + 30 + 14 px inset on every row. */

/* === 1.7.20 REAL LABEL ELEMENT FIX ===
   The label is now an actual second grid element, not a bare text node. */
body.menu-active #startScreen nav > button{
  display:grid!important;
  grid-template-columns:30px 1fr!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:14px!important;
  padding:0 24px!important;
  text-align:left!important;
}
body.menu-active #startScreen nav > button > span:first-child{
  grid-column:1!important;
  width:30px!important;
  min-width:30px!important;
  margin:0!important;
  justify-self:start!important;
  text-align:center!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  grid-column:2!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  justify-self:stretch!important;
  text-align:left!important;
  white-space:nowrap!important;
  position:static!important;
  transform:none!important;
}

/* === 1.7.21 CENTER THE ICON+LABEL GROUP INSIDE EACH BUTTON === */
body.menu-active #startScreen nav > button{
  grid-template-columns:30px max-content!important;
  justify-content:center!important;
  justify-items:start!important;
  column-gap:14px!important;
  padding-left:18px!important;
  padding-right:18px!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  width:auto!important;
  justify-self:start!important;
  text-align:left!important;
}

/* === 1.7.22 FIXED CENTERED MENU COLUMN === */
body.menu-active #startScreen nav > button{
  display:grid!important;
  grid-template-columns:30px 190px!important;
  column-gap:14px!important;
  justify-content:center!important;
  align-items:center!important;
  justify-items:start!important;
  padding:0!important;
}
body.menu-active #startScreen nav > button > span:first-child{
  width:30px!important;
  min-width:30px!important;
  justify-self:center!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  width:190px!important;
  min-width:190px!important;
  justify-self:start!important;
  text-align:left!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:650px){
  body.menu-active #startScreen nav > button{
    grid-template-columns:28px 176px!important;
    column-gap:12px!important;
  }
  body.menu-active #startScreen nav > button > span:first-child{
    width:28px!important;
    min-width:28px!important;
  }
  body.menu-active #startScreen nav > button > .menu-label{
    width:176px!important;
    min-width:176px!important;
  }
}

/* === 1.7.23 TRUE VERTICAL BUTTON SPLIT === */
body.menu-active #startScreen nav > button{
  position:relative!important;
  display:block!important;
  padding:0!important;
  text-align:left!important;
}

/* icon = fixed left zone */
body.menu-active #startScreen nav > button > span:first-child{
  position:absolute!important;
  left:72px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
}

/* label = fixed right zone, SAME left edge for all four buttons */
body.menu-active #startScreen nav > button > .menu-label{
  position:absolute!important;
  left:118px!important;
  right:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  white-space:nowrap!important;
}

@media(max-width:650px){
  body.menu-active #startScreen nav > button > span:first-child{
    left:54px!important;
    width:28px!important;
    height:28px!important;
  }
  body.menu-active #startScreen nav > button > .menu-label{
    left:96px!important;
    right:14px!important;
  }
}

/* === 1.7.24 MENU FINE ALIGNMENT === */
body.menu-active #startScreen nav > button > span:first-child{
  left:86px!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  left:128px!important;
}
@media(max-width:650px){
  body.menu-active #startScreen nav > button > span:first-child{
    left:64px!important;
  }
  body.menu-active #startScreen nav > button > .menu-label{
    left:104px!important;
  }
}

/* === 1.7.25 ICON + TEXT EXACT VERTICAL LINE === */
body.menu-active #startScreen nav > button > span:first-child,
body.menu-active #startScreen nav > button > .menu-label{
  top:50%!important;
  height:22px!important;
  line-height:22px!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
}
body.menu-active #startScreen nav > button > span:first-child{
  display:block!important;
  text-align:center!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  display:block!important;
  text-align:left!important;
}

/* === 1.7.26 COMPACT CENTERED MENU CONTENT === */
body.menu-active #startScreen nav > button > span:first-child{
  left:54px!important;
}
body.menu-active #startScreen nav > button > .menu-label{
  left:96px!important;
}
@media(max-width:650px){
  body.menu-active #startScreen nav > button > span:first-child{
    left:42px!important;
  }
  body.menu-active #startScreen nav > button > .menu-label{
    left:82px!important;
  }
}

/* === 1.8.0 CINEMATIC LEVEL TRANSITION === */
.level-complete-screen{position:absolute;inset:0;z-index:95;display:none;overflow:hidden;background:#02060b;opacity:0;transition:opacity .35s ease}
.level-complete-screen.visible{display:block;opacity:1}
.level-complete-screen .lc-art{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.03);animation:lcZoom 3s ease-out forwards}
.level-complete-screen .lc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,5,12,.08),rgba(0,8,20,.22) 45%,rgba(0,4,10,.68))}
.level-complete-screen .lc-logo{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:min(270px,34%);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.level-complete-screen .lc-logo{display:none!important}
.level-complete-screen .lc-copy{display:none!important}
.lc-level{font:700 clamp(22px,3.2vw,44px)/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;color:#dff8ff}
.lc-complete{margin-top:8px;font:900 clamp(42px,7vw,88px)/.95 Arial,Helvetica,sans-serif;letter-spacing:.08em;color:#fff}
.lc-sector{margin-top:12px;font:700 clamp(14px,1.7vw,23px)/1 Arial,Helvetica,sans-serif;letter-spacing:.22em;color:#78e8ff}
.level-complete-screen.final .lc-level{color:#ffe38a}
.level-complete-screen.final .lc-complete{color:#fff1b5}
@keyframes lcZoom{from{transform:scale(1.07)}to{transform:scale(1.0)}}

/* ship exit: no canvas brightness/filter effect */
canvas.stage-clearing{filter:none!important;animation:none!important;}

/* === 1.8.3 COMPLETION ART - FULL FRAME, NO ZOOM === */
.level-complete-screen .lc-art{
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  animation:none!important;
  background-color:#02060b!important;
}

/* SWORD.HU integration */
.menu-sword-home{position:absolute;z-index:12;top:clamp(28px,5.5vh,64px);left:50%;transform:translateX(-50%);display:block;width:min(250px,48vw);padding:10px 18px;opacity:.96;transition:opacity .18s,transform .18s}
.menu-sword-home img{display:block;width:100%;height:auto}
.menu-sword-home:hover{opacity:1;transform:translateX(-50%) scale(1.025)}
.web-close{display:none!important}
body:not(.menu-active) .web-close{display:grid!important;place-items:center;position:fixed;z-index:500;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(3,8,13,.72);color:#fff;font:300 30px/1 Arial,sans-serif;backdrop-filter:blur(8px);cursor:pointer}
body:not(.menu-active) .web-close:hover{background:rgba(24,74,98,.86);border-color:rgba(116,225,255,.78)}
.reward-screen{position:absolute;inset:0;z-index:600;display:none;place-items:center;padding:24px;background:radial-gradient(circle at 50% 25%,rgba(13,99,142,.35),rgba(1,5,10,.97) 65%);backdrop-filter:blur(8px)}
.reward-screen.visible{display:grid}.reward-panel{width:min(680px,94vw);padding:38px 28px;text-align:center;border:1px solid rgba(91,220,255,.48);background:linear-gradient(180deg,rgba(7,25,38,.96),rgba(2,8,14,.99));box-shadow:0 0 70px rgba(41,194,255,.2)}
.reward-logo-link{display:inline-block}.reward-logo{width:min(260px,58vw);margin-bottom:22px}.reward-kicker{font:700 13px Arial;letter-spacing:.3em;color:#72e7ff}.reward-panel h2{margin:12px 0;font:900 clamp(38px,7vw,70px) Arial;letter-spacing:.08em;color:#fff}.reward-panel p{font:700 13px/1.5 Arial;letter-spacing:.1em;color:#d7f1f8}.reward-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}.reward-actions button,.reward-actions a{min-height:44px;padding:0 18px;border:1px solid rgba(96,222,255,.55);background:rgba(9,45,64,.75);color:#fff;font:700 12px/44px Arial;text-decoration:none;cursor:pointer}

.menu-sword-home{left:max(18px,env(safe-area-inset-left))!important;top:max(18px,env(safe-area-inset-top))!important;transform:none!important;width:clamp(112px,15vw,180px)!important;padding:0!important}.menu-sword-home:hover{transform:scale(1.025)!important}

/* 1.12 - integration fixes */
#startScreen .menu-sword-home{
  position:fixed!important;
  z-index:10050!important;
  left:max(18px,env(safe-area-inset-left))!important;
  top:max(18px,env(safe-area-inset-top))!important;
  width:clamp(112px,15vw,180px)!important;
  height:auto!important;
  display:block!important;
  visibility:visible!important;
  opacity:.96!important;
  transform:none!important;
  pointer-events:auto!important;
}
#startScreen .menu-sword-home img{display:block!important;width:100%!important;height:auto!important}
/* 2.0 - cinematic reward, media player and TOP 10 */
.reward-screen{position:fixed!important;inset:0!important;padding:clamp(12px,2vw,28px)!important;background:#02070b url("final_spaceport.png") center/cover no-repeat!important;backdrop-filter:none!important}
.reward-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,9,.18),rgba(1,6,10,.38) 42%,rgba(1,6,10,.7)),linear-gradient(0deg,rgba(0,4,8,.76),transparent 55%)}
.reward-panel{position:relative;z-index:1;display:grid!important;grid-template-columns:minmax(340px,1.15fr) minmax(260px,.85fr);gap:18px;width:min(980px,96vw)!important;max-height:94vh;overflow:auto;padding:clamp(18px,3vw,34px)!important;text-align:left!important;border:1px solid rgba(111,225,255,.42)!important;border-radius:18px;background:linear-gradient(135deg,rgba(3,13,21,.9),rgba(5,17,26,.76))!important;box-shadow:0 28px 100px rgba(0,0,0,.72),0 0 65px rgba(40,190,255,.13)!important;backdrop-filter:blur(16px)!important}
.reward-main{text-align:center}.reward-logo{width:min(210px,48vw)!important;margin-bottom:12px!important}.reward-kicker{font-size:11px!important}.reward-panel h2{margin:8px 0!important;font-size:clamp(34px,5vw,62px)!important}.reward-panel p{margin:6px 0 16px}
.reward-result{display:flex;justify-content:center;gap:10px;margin:0 auto 16px}.reward-result span{min-width:130px;padding:9px 12px;border:1px solid rgba(103,220,255,.24);background:rgba(4,20,30,.64);font:700 10px/1.2 Arial;letter-spacing:.14em;color:#8ddff5}.reward-result b{display:block;margin-top:4px;font:800 19px/1 ui-monospace,monospace;letter-spacing:.04em;color:#fff}
.reward-player{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid rgba(104,222,255,.42);border-radius:12px;background:linear-gradient(135deg,rgba(8,34,49,.92),rgba(3,15,24,.96));box-shadow:inset 0 1px rgba(255,255,255,.05)}
.reward-player>button{flex:0 0 48px;width:48px;height:48px;border:1px solid #74ddf4;border-radius:50%;background:#0b3042;color:#fff;font:700 18px Arial;cursor:pointer}.reward-track{flex:1;min-width:0;text-align:left}.reward-track>b,.reward-track>small{display:block}.reward-track>b{font:800 13px Arial;letter-spacing:.16em;color:#fff}.reward-track>small{margin-top:2px;font:700 9px Arial;letter-spacing:.22em;color:#79dff6}.reward-track input{width:100%;margin:9px 0 2px;accent-color:#77def4}.reward-clock{display:flex;justify-content:space-between;font:700 9px ui-monospace;color:#9cb8c2}
.reward-score-form{margin-top:12px;padding:12px;border:1px solid rgba(255,215,124,.42);border-radius:10px;background:rgba(42,29,8,.5);text-align:left}.reward-score-form label{display:block;margin-bottom:8px;font:800 10px Arial;letter-spacing:.14em;color:#ffe39b}.reward-score-form>div{display:flex;gap:8px}.reward-score-form input{min-width:0;flex:1;height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.28);background:#06121a;color:#fff;font:800 14px Arial;text-transform:uppercase}.reward-score-form button{height:38px;padding:0 14px;border:1px solid #ffe39b;background:#614514;color:#fff;font:800 10px Arial;cursor:pointer}.reward-score-form small{display:block;margin-top:7px;color:#d9eef4}
.reward-actions{margin-top:14px!important}.reward-actions button,.reward-actions a{border-radius:8px!important}
.reward-leaderboard{padding:16px;border:1px solid rgba(104,222,255,.25);border-radius:12px;background:rgba(2,12,19,.76)}.reward-leaderboard h3{margin:0 0 12px;font:900 19px Arial;letter-spacing:.2em;color:#fff}.space-top10{width:100%;border-collapse:collapse;table-layout:fixed}.space-top10 th,.space-top10 td{padding:7px 5px;border-bottom:1px solid rgba(118,219,244,.13);font:700 11px ui-monospace;color:#dcecf1}.space-top10 th{font-size:9px;letter-spacing:.08em;color:#78dff6}.space-top10 th:nth-child(1),.space-top10 td:nth-child(1){width:10%;text-align:left}.space-top10 th:nth-child(2),.space-top10 td:nth-child(2){width:40%;text-align:left}.space-top10 th:nth-child(3),.space-top10 td:nth-child(3){width:27%;text-align:right;font-variant-numeric:tabular-nums}.space-top10 th:nth-child(4),.space-top10 td:nth-child(4){width:23%;text-align:right;font-variant-numeric:tabular-nums}.space-top10 td:first-child{color:#ffe39b}
@media(max-width:760px){.reward-panel{grid-template-columns:1fr;max-height:96vh}.reward-leaderboard{order:2}.reward-result span{min-width:0;flex:1}.reward-screen{background-position:38% center!important}}
.reward-status{display:block;min-height:1.1em;margin-top:8px;color:#9cecff;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* 2.1 - floating reward UI: preserve the cinematic background */
.reward-screen{place-items:center!important;padding:clamp(18px,4vw,64px)!important}
.reward-screen::before{background:linear-gradient(90deg,rgba(0,5,9,.68) 0%,rgba(0,5,9,.2) 48%,rgba(0,5,9,.48) 100%),linear-gradient(0deg,rgba(0,5,9,.66),transparent 48%,rgba(0,5,9,.3))!important}
.reward-panel{display:grid!important;grid-template-columns:minmax(420px,1fr) minmax(260px,320px)!important;align-items:center!important;gap:clamp(28px,6vw,90px)!important;width:min(1120px,94vw)!important;max-height:94vh!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.reward-main{max-width:570px;padding:0!important;background:transparent!important;text-shadow:0 3px 18px rgba(0,0,0,.95)}
.reward-panel h2,.reward-kicker,.reward-panel>p{filter:drop-shadow(0 4px 16px rgba(0,0,0,.95))}
.reward-result span,.reward-player,.reward-score-form,.reward-leaderboard{backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.32)}
.reward-result span{background:rgba(3,17,26,.58)!important}
.reward-player{background:linear-gradient(135deg,rgba(7,30,44,.72),rgba(2,13,21,.68))!important}
.reward-leaderboard{align-self:center;background:rgba(2,12,19,.58)!important;border-color:rgba(104,222,255,.34)!important}
@media(max-width:760px){.reward-screen{place-items:start center!important;overflow:auto!important}.reward-panel{grid-template-columns:1fr!important;gap:18px!important;overflow:visible!important}.reward-main{max-width:none}.reward-leaderboard{width:100%}}
/* 2.2 - cinematic composition: ship clear, controls on the open right side */
.reward-screen{padding:clamp(18px,3vw,46px)!important}
.reward-panel{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,420px)!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:16px 32px!important;width:100%!important;height:100%!important;max-width:1360px!important;max-height:none!important;overflow:visible!important;align-items:center!important}
.reward-heading{grid-column:1/-1;grid-row:1;justify-self:center;text-align:center;text-shadow:0 4px 22px rgba(0,0,0,.95)}
.reward-heading .reward-logo{width:min(230px,48vw)!important;margin:0 auto 8px!important}
.reward-heading .reward-kicker{margin:0 0 10px!important}
.reward-heading p{margin:0!important;color:#eaf7fb;font-size:clamp(10px,1vw,13px);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.reward-main{grid-column:2;grid-row:2;justify-self:end;align-self:center;width:100%;max-width:420px!important;padding:0!important;text-shadow:none!important}
.reward-result{margin-bottom:10px!important}.reward-player{padding:11px!important}.reward-score-form{margin-top:10px!important;padding:10px!important}.reward-status{margin-top:7px!important}
.reward-leaderboard{width:100%;margin-top:10px;padding:13px!important;box-shadow:0 16px 44px rgba(0,0,0,.3)!important}.reward-leaderboard h3{margin-bottom:8px!important;font-size:16px!important}
.reward-actions{grid-column:1/-1;grid-row:3;justify-self:center;align-self:end;margin:0!important;text-align:center;text-shadow:none!important}
@media(max-width:760px){.reward-screen{padding:14px!important}.reward-panel{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;height:auto!important;min-height:calc(100vh - 28px);gap:14px!important}.reward-heading{grid-column:1;grid-row:1}.reward-main{grid-column:1;grid-row:2;justify-self:center;max-width:520px!important}.reward-actions{grid-column:1;grid-row:3;padding-bottom:8px}}

/* 2.3 - playable portrait-phone layout */
@media (max-width:700px) and (orientation:portrait){
  .hud{gap:2px!important}
  .hud>div{padding:5px 5px!important;min-height:42px!important}
  .hud-label{font-size:7px!important;letter-spacing:.12em!important}
  .hud strong{margin-top:3px!important;font-size:12px!important;line-height:1!important}

  .game-frame>.combat-hud{gap:2px!important;padding:3px 5px 4px!important}
  .game-frame>.combat-hud .energy-box{min-width:0!important;width:100%!important;padding:5px 8px!important}
  .game-frame>.combat-hud .energy-track{min-width:0!important}
  .game-frame>.combat-hud .arsenal-box{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;gap:2px!important;padding:2px 1px!important}
  .game-frame>.combat-hud .arsenal-row{grid-template-columns:17px minmax(0,1fr) 16px!important;gap:1px!important;min-height:18px!important}
  .game-frame>.combat-hud .arsenal-icon{width:17px!important;font-size:12px!important}
  .game-frame>.combat-hud .arsenal-label{overflow:hidden!important;font-size:6px!important;line-height:18px!important;white-space:nowrap!important}
  .game-frame>.combat-hud .arsenal-row b{font-size:8px!important;line-height:18px!important;text-align:right!important}

  .mobile-controls{inset:auto 0 8px!important;padding:0 8px!important;align-items:end!important}
  .joystick{width:104px!important;height:104px!important}
  .joystick-knob{width:46px!important;height:46px!important;left:28px!important;top:28px!important}
  .joy-up,.joy-down{left:48px!important}.joy-right,.joy-left{top:45px!important}
  .action-buttons{grid-template-columns:repeat(2,78px)!important;gap:5px!important}
  #fireButton,#bombButton,#rocketButton,#megaBombButton{width:78px!important;min-width:78px!important;max-width:78px!important;height:36px!important;min-height:36px!important;max-height:36px!important;grid-template-columns:19px 1fr!important;grid-template-rows:36px!important;padding:0 5px!important}
  #fireButton .ctrl-icon,#bombButton .ctrl-icon,#rocketButton .ctrl-icon,#megaBombButton .ctrl-icon{width:19px!important;height:19px!important;font-size:13px!important;line-height:19px!important}
  #fireButton .ctrl-label,#bombButton .ctrl-label,#rocketButton .ctrl-label,#megaBombButton .ctrl-label{height:19px!important;font-size:8px!important;line-height:19px!important}

  body:not(.menu-active) .web-close{top:max(6px,env(safe-area-inset-top))!important;right:max(6px,env(safe-area-inset-right))!important;width:34px!important;height:34px!important;font-size:24px!important}
  body:not(.menu-active) .hud>div:last-child{padding-right:39px!important}
  body:not(.menu-active) .floating-sound{right:8px!important;bottom:38px!important;width:32px!important;height:32px!important;font-size:15px!important;opacity:.82!important}
}

/* 3.0 - cinematic, sector-specific GAME OVER */
.game-over-screen{position:absolute;inset:0;z-index:70;display:none;overflow:hidden;background:#02050a;color:#fff;text-align:center;isolation:isolate}
.game-over-screen.visible{display:block;animation:game-over-reveal .75s ease-out both}
.game-over-art{position:absolute;inset:0;background-position:center;background-size:cover;transform:scale(1.035);animation:game-over-drift 16s ease-out both}
.game-over-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,4,9,.42),rgba(0,3,8,.02) 38%,rgba(0,3,8,.08) 60%,rgba(0,3,8,.82) 100%),radial-gradient(circle at 50% 22%,rgba(0,0,0,.08),rgba(0,0,0,.58) 88%)}
.game-over-copy{position:absolute;z-index:2;top:10%;left:50%;width:min(92%,780px);transform:translateX(-50%);display:grid;gap:10px;place-items:center}
.game-over-copy small{font:900 clamp(9px,1.4vw,14px)/1 ui-monospace,monospace;letter-spacing:.24em;color:#9feeff;text-shadow:0 2px 8px #000}
.game-over-copy h2{margin:0;font:950 clamp(54px,10vw,112px)/.88 Arial Black,Impact,system-ui,sans-serif;letter-spacing:.035em;color:#f5f8fa;-webkit-text-stroke:1px rgba(123,225,255,.72);text-shadow:0 4px 0 #07141e,0 0 12px #fff,0 0 36px rgba(54,205,255,.78)}
.game-over-copy p{margin:0;padding:7px 14px;border:1px solid rgba(126,226,255,.35);border-radius:999px;background:rgba(2,11,19,.64);font:900 clamp(11px,1.8vw,17px)/1 ui-monospace,monospace;letter-spacing:.14em;color:#ffe29a}
.game-over-actions{position:absolute;z-index:3;left:50%;bottom:7%;transform:translateX(-50%);display:grid;gap:11px;width:min(320px,72%)}
.game-over-actions span{font:850 clamp(9px,1.4vw,13px)/1 ui-monospace,monospace;letter-spacing:.18em;color:#a9eaff;text-shadow:0 2px 8px #000}
.game-over-actions button{width:100%;min-height:54px;border:1px solid #ffe19a;border-radius:10px;background:linear-gradient(135deg,#ffe9a7,#c58328);color:#071019;font:950 clamp(15px,2vw,20px)/1 Arial,sans-serif;letter-spacing:.12em;box-shadow:0 0 28px rgba(255,190,66,.35),inset 0 1px rgba(255,255,255,.8);cursor:pointer}
.game-over-actions button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.death-blast{position:absolute;z-index:66;left:50%;top:72%;width:16px;height:16px;display:none;pointer-events:none;transform:translate(-50%,-50%)}
.death-blast.active{display:block}
.death-blast:before,.death-blast:after,.death-blast i{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.death-blast:before{width:22px;height:22px;background:#fff;box-shadow:0 0 22px 14px #fff6bd,0 0 55px 34px #ff9418;animation:death-core 1.5s ease-out both}
.death-blast:after{width:32px;height:32px;border:7px solid #ffd56c;animation:death-ring 1.5s ease-out both}
.death-blast i{width:9px;height:90px;background:linear-gradient(transparent,#fff2a6,transparent);transform-origin:50% 50%;animation:death-ray 1.25s ease-out both}
.death-blast i:nth-child(2){transform:translate(-50%,-50%) rotate(60deg)}.death-blast i:nth-child(3){transform:translate(-50%,-50%) rotate(120deg)}
body.game-over-active .mobile-controls,body.game-over-active .game-footer{visibility:hidden!important}
@keyframes game-over-reveal{from{opacity:0;filter:brightness(2)}to{opacity:1;filter:brightness(1)}}
@keyframes game-over-drift{from{transform:scale(1.07)}to{transform:scale(1.015)}}
@keyframes death-core{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}
@keyframes death-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}
@keyframes death-ray{0%{opacity:0;height:20px}15%{opacity:1}100%{opacity:0;height:600px}}
@media(max-width:700px) and (orientation:portrait){.game-over-copy{top:12%}.game-over-copy h2{font-size:48px}.game-over-actions{bottom:5%;width:min(280px,70%)}.death-blast{top:66%}}

/* 2.8 - classic arcade attract mode */
.attract-overlay{position:absolute;inset:0;z-index:28;display:none;pointer-events:none;overflow:hidden;text-align:center;color:#fff;font-family:Arial Black,Impact,system-ui,sans-serif;text-shadow:0 3px 0 #061019,0 0 16px rgba(112,231,255,.9)}
.attract-overlay.visible{display:block}
.attract-demo-label{position:absolute;top:18%;left:50%;transform:translateX(-50%);padding:7px 17px;border:1px solid rgba(112,231,255,.72);border-radius:999px;background:rgba(2,10,17,.64);font-size:clamp(11px,2vw,18px);letter-spacing:.28em;white-space:nowrap}
.attract-prompt{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);display:grid;gap:5px;width:max-content;max-width:90%;padding:9px 18px;border:1px solid rgba(255,225,145,.36);border-radius:999px;background:rgba(2,7,12,.62);box-shadow:0 8px 30px rgba(0,0,0,.28);animation:attract-pulse 3.8s ease-in-out infinite}
.attract-prompt strong{font-size:clamp(14px,2.6vw,23px);letter-spacing:.12em;color:#ffe391}
.attract-prompt span{font:800 clamp(7px,1.15vw,10px)/1.2 ui-monospace,monospace;letter-spacing:.13em;color:#9deeff}
.attract-game-over{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(circle at center,rgba(126,16,9,.27),rgba(0,0,0,.66));font-size:clamp(38px,9vw,92px);letter-spacing:.09em;color:#ffdf86;text-shadow:0 4px 0 #450b08,0 0 28px #ff482e}
.attract-overlay.game-over .attract-game-over{display:grid;animation:attract-game-over-in .65s ease-out both}
.attract-overlay.game-over .attract-demo-label{display:none}
.attract-overlay.title-mode .attract-demo-label,.attract-overlay.title-mode .attract-game-over{display:none}
.attract-overlay.title-mode .attract-prompt{left:auto;right:2.5%;bottom:3%;transform:none}
.attract-dialog-prompt{display:grid;gap:4px;width:max-content;max-width:100%;margin:18px auto 0;padding:8px 16px;border:1px solid rgba(255,225,145,.36);border-radius:999px;background:rgba(2,7,12,.62);text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.28);animation:attract-pulse 3.8s ease-in-out infinite}
.attract-dialog-prompt strong{font:900 14px/1.1 Arial Black,Impact,system-ui,sans-serif;letter-spacing:.12em;color:#ffe391}
.attract-dialog-prompt span{font:800 8px/1.2 ui-monospace,monospace;letter-spacing:.1em;color:#9deeff}
@keyframes attract-pulse{0%,100%{opacity:.58;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.12)}}
@keyframes attract-game-over-in{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}
@media (max-width:700px) and (orientation:portrait){.attract-demo-label{top:19%}.attract-prompt{bottom:12%;padding:8px 13px}.attract-overlay.title-mode .attract-prompt{right:2%;bottom:2.5%;padding:7px 11px}.attract-prompt strong{font-size:16px}.attract-prompt span{font-size:6.5px;letter-spacing:.08em}.attract-dialog-prompt{padding:7px 11px}.attract-dialog-prompt strong{font-size:12px}.attract-dialog-prompt span{font-size:6.5px;letter-spacing:.06em}}

/* 2.9 - subtle cinematic movement on attract titles only */
body.attract-title-active #startScreen.exact-menu{background-image:none!important;background-color:#02060b!important}
body.attract-title-active #startScreen.exact-menu::before{content:"";position:absolute;inset:-1.6%;z-index:0;pointer-events:none;background:#02060b url("menu-background.webp") center center/cover no-repeat;transform:scale(.969);transform-origin:46% 58%;animation:attract-title-zoom 30s cubic-bezier(.22,.61,.36,1) forwards;will-change:transform}
body.attract-title-active #startScreen .menu-sword-home,body.attract-title-active #startScreen .exact-visible-menu{z-index:2!important}
@keyframes attract-title-zoom{from{transform:scale(.969)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){body.attract-title-active #startScreen.exact-menu::before{animation:none;transform:scale(1)}}

/* 2.5 - touch controls are a real shell row, never clipped by the canvas */
@media (pointer:coarse), (max-width:820px){
  body:not(.menu-active) .game-shell{grid-template-rows:minmax(0,1fr) 112px 34px!important}
  body:not(.menu-active) .game-frame{grid-row:1!important;grid-template-rows:auto auto minmax(0,1fr)!important}
  body:not(.menu-active) .mobile-controls{position:relative!important;inset:auto!important;grid-row:2!important;display:flex!important;visibility:visible!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:112px!important;padding:4px 10px!important;background:linear-gradient(180deg,rgba(4,13,21,.97),rgba(2,7,12,1))!important;border-top:1px solid rgba(112,231,255,.28)!important;overflow:visible!important}
  body:not(.menu-active) .game-footer{grid-row:3!important}
}

/* After a successful save the TOP 10 row is the single source of the result. */
.reward-screen.score-saved .reward-result,.reward-screen.score-saved .reward-status{display:none!important}
.space-top10 tr.is-current td{background:rgba(255,221,122,.11)!important;color:#fff!important;border-bottom-color:rgba(255,225,145,.5)!important}
.space-top10 tr.is-current td:first-child{color:#ffe77a!important}

/* 2.4 - definitive portrait layout: controls outside the battlefield */
@media (max-width:700px) and (orientation:portrait){
  body.menu-active #startScreen.exact-menu{
    background-color:#020914!important;
    background-image:linear-gradient(180deg,rgba(2,9,20,.02),#020914 42%,#020914 100%),url("menu-background.webp")!important;
    background-repeat:no-repeat!important;
    background-position:center center,center 8vh!important;
    background-size:100% 100%,100% auto!important;
  }
  body.menu-active #startScreen nav{top:43%!important}

  body:not(.menu-active) .game-frame{
    grid-template-rows:auto auto minmax(0,1fr) 112px!important;
  }
  body:not(.menu-active) .game-frame>#gameCanvas{grid-row:3!important}
  body:not(.menu-active) .mobile-controls{
    position:relative!important;
    inset:auto!important;
    grid-row:4!important;
    display:flex!important;
    align-items:center!important;
    min-height:112px!important;
    padding:4px 10px!important;
    background:linear-gradient(180deg,rgba(4,13,21,.94),rgba(2,7,12,.99))!important;
    border-top:1px solid rgba(112,231,255,.28)!important;
  }
  body:not(.menu-active) .joystick{width:96px!important;height:96px!important}
  body:not(.menu-active) .joystick-knob{width:42px!important;height:42px!important;left:26px!important;top:26px!important}
  body:not(.menu-active) .joy-up,body:not(.menu-active) .joy-down{left:44px!important}
  body:not(.menu-active) .joy-right,body:not(.menu-active) .joy-left{top:41px!important}
  body:not(.menu-active) .action-buttons{grid-template-columns:repeat(2,76px)!important;gap:5px!important}
  body:not(.menu-active) #fireButton,body:not(.menu-active) #bombButton,body:not(.menu-active) #rocketButton,body:not(.menu-active) #megaBombButton{width:76px!important;min-width:76px!important;max-width:76px!important}

  body:not(.menu-active) .web-close{width:30px!important;height:30px!important;font-size:21px!important}
  body:not(.menu-active) .hud>div:last-child{padding-right:34px!important}
  body:not(.menu-active) .floating-sound{display:none!important}
}

/* 2.6 - final mobile shell contract: battlefield, controls, footer */
@media (pointer:coarse), (max-width:820px){
  body:not(.menu-active) .game-shell{grid-template-rows:minmax(0,1fr) 112px 34px!important}
  body:not(.menu-active) .game-frame{grid-row:1!important;grid-template-rows:auto auto minmax(0,1fr)!important;min-height:0!important}
  body:not(.menu-active) .game-frame>#gameCanvas{grid-row:3!important;min-height:0!important}
  body:not(.menu-active) .mobile-controls{position:relative!important;inset:auto!important;grid-row:2!important;display:flex!important;visibility:visible!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:112px!important;padding:4px 10px!important;background:linear-gradient(180deg,rgba(4,13,21,.97),rgba(2,7,12,1))!important;border-top:1px solid rgba(112,231,255,.28)!important;overflow:visible!important}
  body:not(.menu-active) .game-footer{grid-row:3!important}
}

/* 2.7 - orderly portrait menu labels: fixed icon lane, shared text lane */
.action-buttons #fireButton{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:none!important;justify-items:center!important;grid-template-columns:22px auto!important}
@media (max-width:700px) and (orientation:portrait){.game-frame>.combat-hud .arsenal-box{grid-template-columns:repeat(4,minmax(0,1fr))!important}body:not(.menu-active) .action-buttons #fireButton{width:100%!important;min-width:0!important;max-width:none!important}}
@media (max-width:700px) and (orientation:portrait){
  body.menu-active #startScreen nav > button{position:relative!important;display:block!important;padding:0!important;text-align:center!important}
  body.menu-active #startScreen nav > button > span:first-child{position:absolute!important;left:12px!important;top:50%!important;display:grid!important;place-items:center!important;width:30px!important;min-width:30px!important;height:30px!important;margin:0!important;padding:0!important;transform:translateY(-50%)!important;line-height:30px!important;text-align:center!important}
  body.menu-active #startScreen nav > button > .menu-label{position:absolute!important;left:46px!important;right:12px!important;top:50%!important;display:block!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;transform:translateY(-50%)!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}
}