:root {
  color-scheme: dark;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --panel: #151a33;
  --panel2: #20284d;
  --ink: #f8fbff;
  --muted: #b7c3e3;
  --accent: #78f2ff;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#243160,#090c1d 60%); color:var(--ink); display:flex; justify-content:center; }
button { font:inherit; color:inherit; border:0; cursor:pointer; touch-action:manipulation; }
.shell { width:min(100%,1080px); padding:18px; }
.titlebar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
h1 { margin:0; letter-spacing:.08em; font-size:clamp(24px,5vw,42px); }
.titlebar p { margin:3px 0 0; color:var(--muted); }
.play-layout { display:grid; grid-template-columns:minmax(0,480px) minmax(260px,340px); justify-content:center; align-items:start; gap:14px; }
.game-column { min-width:0; }
.game-wrap { position:relative; width:100%; border:4px solid #5466a0; border-radius:18px; overflow:hidden; box-shadow:0 18px 60px #0009; background:#050817; }
canvas { display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }
.overlay { position:absolute; inset:0; display:grid; place-content:center; padding:22px; background:#070b19cc; backdrop-filter:blur(4px); }
.overlay.hidden { display:none; }
.card { text-align:center; }
.card h2 { font-size:32px; margin:0 0 8px; }
.card p { color:#d9e1ff; max-width:430px; }
.card > button, .hangar-head button, .titlebar button { background:#5a70ff; border-radius:12px; padding:12px 18px; box-shadow:inset 0 -3px #3243b5; }
.secondary { background:#2b345e !important; box-shadow:inset 0 -3px #171d39 !important; }
.tiny { margin-top:14px; color:#9da9d3; font-size:12px; line-height:1.5; }
.wide { place-content:stretch; overflow:auto; }
.hangar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; }
.hangar-head h2 { margin:0; }
.hangar-head p { margin:4px 0 0; }
.ship-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:10px; margin-top:16px; }
.ship-tile { position:relative; min-height:76px; border-radius:12px; background:#141a39; border:2px solid #39446f; display:grid; place-content:center; gap:5px; }
.ship-tile img { width:48px; height:48px; image-rendering:pixelated; }
.ship-tile.locked img { filter:grayscale(1) brightness(.3); }
.ship-tile.selected { border-color:#7dff9d; box-shadow:0 0 0 2px #7dff9d44; }
.ship-tile small { font-size:10px; color:#b9c5e7; }
.side-hud { display:grid; gap:10px; position:sticky; top:12px; }
.status-panel, .ammo-loaded, .ammo-picker { background:var(--panel); border:2px solid #303a68; border-radius:14px; padding:11px; }
.label { display:block; font-size:10px; letter-spacing:.14em; color:#9eabd2; text-align:center; margin-bottom:8px; }
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.status-grid > div { min-height:58px; display:grid; place-content:center; text-align:center; border-radius:10px; background:#080b19; border:1px solid #39446f; }
.status-grid small { color:#9eabd2; font-size:9px; letter-spacing:.1em; }
.status-grid strong { margin-top:3px; font-size:19px; }
.loaded-round { min-height:82px; display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:10px 14px; border-radius:11px; background:#080b19; border:2px solid #51609a; }
.loaded-round img { width:56px; height:56px; image-rendering:pixelated; flex:0 0 auto; }
.loaded-round div { display:grid; gap:4px; }
.loaded-round strong { font-size:19px; }
.loaded-round span { font-size:10px; color:#aeb9dc; line-height:1.25; }
.shape-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.shape-choice { min-height:54px; padding:4px; border-radius:9px; background:#222b50; border:2px solid transparent; display:grid; place-items:center; }
.shape-choice img { width:34px; height:34px; image-rendering:pixelated; }
.shape-choice.selected { border-color:#fff; box-shadow:0 0 0 2px #ffffff33; background:#3a4677; }
.color-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.color-choice { min-height:42px; border-radius:9px; border:3px solid transparent; position:relative; }
.color-choice.selected { border-color:#fff; box-shadow:0 0 0 2px #ffffff33; }
.color-choice::after { content:attr(aria-label); position:absolute; inset:auto 2px 2px; font-size:8px; font-weight:800; text-shadow:0 1px 2px #000; }
.touch-controls { width:100%; margin:10px auto 0; display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px; }
.touch-controls button { min-height:58px; border-radius:14px; background:#27315b; box-shadow:inset 0 -4px #111731; font-size:22px; }
.touch-controls .fire { background:#e34f67; box-shadow:inset 0 -4px #8e2336; font-size:18px; font-weight:900; }
@media (min-width:700px) { .touch-controls { opacity:.8; } }
@media (max-width:820px) {
  .play-layout { grid-template-columns:minmax(0,480px); }
  .side-hud { position:static; grid-template-columns:1fr; }
  .shape-buttons { grid-template-columns:repeat(7,1fr); }
  .color-buttons { grid-template-columns:repeat(6,1fr); }
}
@media (max-width:520px) {
  .shell { padding:10px; }
  .titlebar p { font-size:12px; }
  .shape-buttons { grid-template-columns:repeat(4,1fr); }
  .color-buttons { grid-template-columns:repeat(3,1fr); }
}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.score-entry{display:grid;gap:7px;max-width:250px;margin:14px auto}.score-entry label{font-size:10px;letter-spacing:.14em;color:#9eabd2}.score-entry input{width:100%;padding:11px 12px;border-radius:10px;border:2px solid #51609a;background:#080b19;color:#fff;text-align:center;font:800 20px ui-rounded,system-ui,sans-serif;text-transform:uppercase}.score-entry button{background:#5a70ff;border-radius:10px;padding:10px}.score-entry small{min-height:16px;color:#b7c3e3}.leaderboard-card{place-content:start;text-align:left}.score-head,.score-row{display:grid;grid-template-columns:44px 1fr 110px;align-items:center;gap:8px}.score-head{padding:10px 12px 6px;color:#9eabd2;font-size:10px;letter-spacing:.12em}.score-head span:last-child,.score-row span:last-child{text-align:right}.leaderboard-rows{display:grid;gap:5px}.score-row{padding:9px 12px;border-radius:9px;background:#10162f;border:1px solid #303a68}.score-row:nth-child(-n+3){background:#1b2346}.score-row .rank{color:#8ea0d8}.leaderboard-status{text-align:center!important;color:#b7c3e3!important;margin:18px auto!important}
.store-card{place-content:start;text-align:left}.store-balance{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;padding:11px 13px;border-radius:10px;background:#080b19;border:1px solid #39446f;color:#9eabd2;font-size:11px;letter-spacing:.1em}.store-balance strong{font-size:21px;color:#ffe45c;letter-spacing:0}.store-section-title{margin:16px 0 8px;font-size:12px;letter-spacing:.13em;color:#b7c3e3}.store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.store-item{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:11px;border-radius:12px;background:#10162f;border:2px solid #303a68;text-align:left}.store-item.affordable:hover{border-color:#7086df}.store-icon{width:48px;height:48px;border-radius:10px;background:#080b19;display:grid;place-items:center;font-size:27px}.store-copy{display:grid;gap:3px}.store-copy strong{font-size:14px}.store-copy small{color:#aeb9dc;font-size:10px;line-height:1.3}.store-buy{grid-column:1/-1;margin-top:2px;padding:8px 10px;border-radius:9px;background:#5a70ff;box-shadow:inset 0 -3px #3243b5;font-size:11px;font-weight:800}.store-buy:disabled{opacity:.45;cursor:not-allowed;background:#2b345e;box-shadow:none}.store-level{color:#7dff9d!important}.store-status{min-height:18px;text-align:center!important;color:#ffe45c!important;margin:12px 0 0!important}.store-item.maxed{border-color:#3b6f56}.store-item.maxed .store-icon{outline:2px solid #7dff9d44}@media(max-width:520px){.store-grid{grid-template-columns:1fr}}

/* Four-direction touch controls */
.touch-controls{display:flex;align-items:center;justify-content:center;gap:22px}
.dpad{display:grid;grid-template-columns:52px 52px 52px;grid-template-rows:52px 52px 52px;gap:4px}
.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}
.dpad button{width:52px;height:52px}

/* v12: viewport-fitted game shell */
html, body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { min-height:100dvh; height:100dvh; }
.shell {
  width:min(100%, 1080px);
  height:100dvh;
  padding:clamp(6px,1.3vh,14px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.titlebar { margin-bottom:clamp(5px,1vh,10px); min-height:0; }
.titlebar h1 { font-size:clamp(22px,4vh,38px); line-height:1; }
.titlebar p { font-size:clamp(10px,1.55vh,14px); }
.top-actions button { padding:clamp(7px,1.15vh,11px) clamp(9px,1.2vw,15px); font-size:clamp(10px,1.45vh,14px); }
.play-layout {
  min-height:0;
  height:100%;
  grid-template-columns:minmax(0,480px) minmax(220px,320px);
  align-items:stretch;
  gap:clamp(6px,1.2vh,12px);
}
.game-column { min-height:0; height:100%; display:flex; justify-content:center; align-items:center; }
.game-wrap {
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:3 / 4;
  flex:0 1 auto;
}
canvas { width:100%; height:100%; object-fit:contain; }
.side-hud {
  min-height:0;
  height:100%;
  position:static;
  align-content:start;
  gap:clamp(4px,.8vh,8px);
  overflow:hidden;
}
.status-panel, .ammo-loaded, .ammo-picker { padding:clamp(6px,1vh,10px); border-radius:clamp(9px,1.5vh,13px); }
.label { font-size:clamp(8px,1.15vh,10px); margin-bottom:clamp(4px,.7vh,7px); }
.status-grid { gap:clamp(4px,.7vh,6px); }
.status-grid > div { min-height:clamp(38px,6.7vh,54px); }
.status-grid small { font-size:clamp(7px,1vh,9px); }
.status-grid strong { font-size:clamp(14px,2.3vh,18px); }
.loaded-round { min-height:clamp(54px,9.4vh,76px); padding:clamp(5px,.8vh,9px) clamp(8px,1.1vh,12px); gap:clamp(7px,1vh,12px); }
.loaded-round img { width:clamp(38px,6.7vh,52px); height:clamp(38px,6.7vh,52px); }
.loaded-round strong { font-size:clamp(13px,2.15vh,18px); }
.loaded-round span { font-size:clamp(8px,1.15vh,10px); }
.shape-buttons { gap:clamp(3px,.55vh,5px); }
.shape-choice { min-height:clamp(38px,6.4vh,50px); }
.shape-choice img { width:clamp(25px,4.5vh,32px); height:clamp(25px,4.5vh,32px); }
.color-buttons { gap:clamp(3px,.55vh,5px); }
.color-choice { min-height:clamp(28px,5vh,38px); }

/* Keyboard/desktop play should never spend viewport height on touch controls. */
@media (min-width:821px) and (pointer:fine) {
  .touch-controls { display:none; }
}

/* Short desktop screens: compress header and HUD a little more. */
@media (min-width:821px) and (max-height:700px) {
  .titlebar p { display:none; }
  .status-grid > div { min-height:36px; }
  .loaded-round { min-height:48px; }
  .loaded-round img { width:36px; height:36px; }
  .shape-choice { min-height:34px; }
  .shape-choice img { width:23px; height:23px; }
  .color-choice { min-height:25px; }
}

/* Touch-sized layouts remain scroll-free by putting the controls over the game. */
@media (max-width:820px) {
  .shell { padding:6px; }
  .titlebar { gap:6px; }
  .titlebar p { display:none; }
  .top-actions { gap:4px; }
  .top-actions button { padding:7px 8px; font-size:9px; }
  .play-layout { grid-template-columns:minmax(0,1fr) minmax(150px,34vw); gap:6px; }
  .game-column { position:relative; }
  .side-hud { grid-template-columns:1fr; }
  .shape-buttons { grid-template-columns:repeat(4,1fr); }
  .color-buttons { grid-template-columns:repeat(3,1fr); }
  .touch-controls {
    position:absolute;
    inset:auto 8px 8px 8px;
    z-index:8;
    margin:0;
    pointer-events:none;
    justify-content:space-between;
    opacity:.82;
  }
  .touch-controls button { pointer-events:auto; }
  .dpad { grid-template-columns:40px 40px 40px; grid-template-rows:40px 40px 40px; }
  .dpad button { width:40px; height:40px; min-height:40px; font-size:16px; }
  .touch-controls .fire { width:64px; min-height:64px; border-radius:50%; }
}

@media (max-width:620px) {
  .play-layout { grid-template-columns:minmax(0,1fr) 132px; }
  .side-hud { font-size:9px; }
  .status-grid { grid-template-columns:1fr 1fr; }
  .status-grid > div { min-height:31px; }
  .loaded-round { padding:4px; gap:4px; }
  .loaded-round img { width:28px; height:28px; }
  .loaded-round strong { font-size:10px; }
  .loaded-round span { display:none; }
  .shape-choice { min-height:27px; }
  .shape-choice img { width:20px; height:20px; }
  .color-choice { min-height:23px; }
}

.splash { z-index:30; background:radial-gradient(circle at center,#1e2952 0,#070b19 66%); backdrop-filter:none; }
.splash-logo { display:grid; place-items:center; text-align:center; animation:splashPop 2s ease both; }
.splash-logo span { font-size:clamp(18px,5vh,38px); font-weight:900; letter-spacing:.12em; color:#fff; text-shadow:0 3px 0 #394889; }
.splash-logo strong { margin-top:.12em; font-size:clamp(42px,11vh,88px); line-height:.9; letter-spacing:.08em; color:#ffe45c; text-shadow:0 5px 0 #b34b61,0 9px 18px #0009; }
@keyframes splashPop { 0%{transform:scale(.72);opacity:0} 20%{transform:scale(1.06);opacity:1} 35%,82%{transform:scale(1);opacity:1} 100%{transform:scale(1.03);opacity:0} }

.howto-card { place-content:start; text-align:left; }
.howto-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.howto-step { display:grid; grid-template-columns:42px 1fr; gap:9px; align-items:start; padding:10px; border-radius:11px; background:#10162f; border:1px solid #303a68; }
.howto-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#080b19; font-size:24px; }
.howto-step strong { font-size:13px; }
.howto-step p { margin:3px 0 0; font-size:11px; line-height:1.35; color:#cbd5f5; }
.howto-tip { text-align:center; margin:12px auto 0 !important; padding:8px 10px; border-radius:9px; background:#182144; color:#ffe45c !important; }
@media(max-width:520px){ .howto-grid{grid-template-columns:1fr;gap:5px}.howto-step{padding:6px;grid-template-columns:32px 1fr}.howto-icon{width:32px;height:32px;font-size:18px}.howto-step p{font-size:9px}.howto-tip{font-size:9px} }


/* v20: compact in-game radio */
.radio-panel{padding:clamp(6px,1vh,10px);border-radius:clamp(9px,1.5vh,13px);background:linear-gradient(180deg,#111a38,#090e22);border:1px solid #344274;box-shadow:inset 0 0 0 1px #060914}
.radio-display{display:grid;grid-template-columns:8px minmax(0,1fr) 34px 42px;gap:6px;align-items:center;min-height:44px;padding:6px 7px;border-radius:9px;background:#050914;border:1px solid #27345f}
.radio-light{width:7px;height:7px;border-radius:50%;background:#66ff9a;box-shadow:0 0 8px #66ff9a;animation:radioPulse 1.4s ease-in-out infinite}
.radio-copy{min-width:0;display:grid;gap:1px}.radio-copy small{font-size:7px;letter-spacing:.14em;color:#7887b4}.radio-copy strong{font-size:11px;color:#d9f2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-btn{height:31px;min-width:0;padding:0 6px;border-radius:7px;background:#27345f;box-shadow:inset 0 -2px #11182f;font-size:11px;font-weight:900;color:#fff}
.radio-btn:hover{background:#36477d}
@keyframes radioPulse{50%{opacity:.45;box-shadow:0 0 3px #66ff9a}}
@media(max-width:620px){.radio-panel{padding:4px}.radio-display{grid-template-columns:6px minmax(0,1fr) 27px 31px;gap:3px;min-height:34px;padding:4px}.radio-copy small{display:none}.radio-copy strong{font-size:8px}.radio-btn{height:25px;font-size:9px;padding:0 3px}}


/* v22 main menu + audio polish */
.main-menu { background:linear-gradient(#040817b8,#06091ae8); }
.menu-logo { display:flex; flex-direction:column; align-items:center; margin-bottom:18px; text-shadow:0 3px 0 #18224d,0 0 24px #78f2ff66; }
.menu-logo span { font-size:30px; letter-spacing:.3em; margin-right:-.3em; color:#eafcff; line-height:.9; }
.menu-logo strong { font-size:64px; line-height:1; letter-spacing:.08em; color:#78f2ff; }
.menu-logo small { margin-top:8px; color:#cdd8ff; font-size:13px; }
.menu-buttons { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:min(350px,88vw); margin:auto; }
.menu-buttons button { border-radius:12px; padding:11px 14px; }
.menu-buttons .menu-play { grid-column:1/-1; font-size:22px; padding:14px; background:#5a70ff; box-shadow:inset 0 -4px #3243b5,0 0 18px #5a70ff55; }
.menu-audio { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.menu-audio button { padding:8px 11px; border-radius:10px; font-size:12px; }
.audio-toggle.off { opacity:.55; }
.radio-display { grid-template-columns:auto minmax(0,1fr) auto auto auto !important; }
.radio-btn:last-child { min-width:42px; font-size:10px; font-weight:900; }
@media (max-height:720px) and (min-width:721px){
  .menu-logo { margin-bottom:9px; }
  .menu-logo strong { font-size:46px; }
  .menu-logo span { font-size:22px; }
  .menu-buttons { gap:6px; }
  .menu-buttons button { padding:8px 10px; }
  .menu-buttons .menu-play { padding:10px; }
}

.level-card{
  pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:rgba(2,5,18,.58); color:#fff;
  text-shadow:0 2px 0 #000,0 0 12px rgba(255,255,255,.35);
}
.level-card small{font-size:clamp(11px,2vh,16px);letter-spacing:.28em;font-weight:900;opacity:.9}
.level-card strong{font-size:clamp(34px,8vh,72px);line-height:1;margin:.12em 0;letter-spacing:.05em}
.level-card span{font-size:clamp(11px,2vh,16px);font-weight:800;opacity:.92}
.level-card.boss strong{transform:scale(1.04)}

/* v24 results */
.results-card{max-width:min(92%,520px);gap:10px}
.high-score-badge{font-weight:1000;letter-spacing:.12em;font-size:clamp(14px,2.8vh,22px);padding:7px 12px;border:2px solid #ffe45c;border-radius:10px;background:rgba(70,45,0,.88);color:#fff3a0;text-shadow:0 2px #000,0 0 10px rgba(255,228,92,.55);animation:scorePulse .7s ease-in-out infinite alternate}
@keyframes scorePulse{from{transform:scale(1)}to{transform:scale(1.035)}}
.results-score{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:12px;background:rgba(7,12,35,.82);border:1px solid rgba(158,239,255,.28)}
.results-score small,.results-grid small{font-weight:900;letter-spacing:.08em;opacity:.75}
.results-score strong{font-size:clamp(30px,6vh,52px);line-height:1.05;color:#ffe45c;text-shadow:0 2px #000}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
.results-grid>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;padding:7px;border-radius:10px;background:rgba(8,14,39,.78);border:1px solid rgba(255,255,255,.12);text-align:center}
.results-grid strong{font-size:clamp(19px,3.5vh,28px);margin-top:3px}
.results-note{margin:0;font-size:12px;opacity:.75}

.profile-card{overflow:auto}
.profile-hero{display:flex;align-items:center;gap:18px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(5,8,23,.72)}
.profile-ship-wrap{width:92px;height:92px;display:grid;place-items:center;background:rgba(0,0,0,.28);border-radius:12px;flex:0 0 auto}
.profile-ship-wrap img{width:72px;height:72px;image-rendering:pixelated}
.profile-summary{display:flex;flex-direction:column;gap:3px;min-width:0}
.profile-summary small{opacity:.7;font-weight:800;letter-spacing:.12em}
.profile-summary strong{font-size:clamp(24px,4vh,38px);line-height:1}
.profile-summary span{font-weight:800;opacity:.9}
.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.profile-stats div,.profile-upgrades>div,.profile-items>div{background:rgba(5,8,23,.68);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:9px}
.profile-stats small,.profile-upgrades small,.profile-items small{display:block;opacity:.65;font-weight:800;font-size:10px;letter-spacing:.06em}
.profile-stats strong{font-size:18px}
.profile-upgrades,.profile-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-upgrades strong,.profile-items strong{display:block;margin-top:2px}
.profile-save-note{font-size:11px;opacity:.72;text-align:center;margin:12px 0 2px}
@media(max-width:600px){.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-upgrades,.profile-items{grid-template-columns:1fr}.profile-hero{gap:10px}.profile-ship-wrap{width:72px;height:72px}.profile-ship-wrap img{width:56px;height:56px}}


/* v28: touch usability, selection lock, and fullscreen */
html, body, .shell, .play-layout, .game-column, .game-wrap, .side-hud,
button, canvas, img, .label, .status-grid, .loaded-round, .ammo-picker,
.touch-controls, .dpad, .radio-panel, .main-menu, .overlay {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea {
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
button {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
canvas, .touch-controls {
  touch-action:none;
}
.fullscreen-exit {
  display:none;
  position:absolute;
  top:8px;
  right:8px;
  z-index:50;
  padding:8px 10px;
  border-radius:9px;
  font-size:11px;
  opacity:.88;
}

/* Larger controls on touch/smaller layouts. */
@media (max-width:820px), (pointer:coarse) {
  .touch-controls {
    inset:auto 10px 10px 10px;
    gap:18px;
    opacity:.9;
  }
  .dpad {
    grid-template-columns:58px 58px 58px;
    grid-template-rows:58px 58px 58px;
    gap:5px;
  }
  .dpad button {
    width:58px;
    height:58px;
    min-height:58px;
    border-radius:15px;
    font-size:22px;
    font-weight:900;
  }
  .touch-controls .fire {
    width:88px;
    height:88px;
    min-height:88px;
    border-radius:50%;
    font-size:20px;
    font-weight:950;
  }
}
@media (max-width:480px) and (pointer:coarse) {
  .touch-controls { inset:auto 7px 8px 7px; }
  .dpad {
    grid-template-columns:62px 62px 62px;
    grid-template-rows:62px 62px 62px;
    gap:4px;
  }
  .dpad button {
    width:62px;
    height:62px;
    min-height:62px;
    font-size:23px;
  }
  .touch-controls .fire {
    width:94px;
    height:94px;
    min-height:94px;
    font-size:21px;
  }
}

/* Fullscreen keeps the game + HUD available, while dropping the page header. */
html.shipshape-fullscreen, html.shipshape-fullscreen body {
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  background:#03050d;
}
html.shipshape-fullscreen .shell {
  width:100vw;
  max-width:none;
  height:100dvh;
  padding:6px;
  grid-template-rows:minmax(0,1fr);
}
html.shipshape-fullscreen .titlebar {
  display:none;
}
html.shipshape-fullscreen .play-layout {
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  align-items:stretch;
}
html.shipshape-fullscreen .game-column {
  width:100%;
  height:100%;
  min-height:0;
}
html.shipshape-fullscreen .fullscreen-exit {
  display:block;
}
html.shipshape-fullscreen .game-wrap {
  max-height:100%;
}

/* On phones in fullscreen, maximize the canvas while retaining the slim ammo HUD. */
@media (max-width:820px) {
  html.shipshape-fullscreen .play-layout {
    grid-template-columns:minmax(0,1fr) minmax(124px,31vw);
    gap:5px;
  }
  html.shipshape-fullscreen .side-hud {
    height:100%;
    overflow:hidden;
  }
  html.shipshape-fullscreen .game-column {
    position:relative;
  }
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) {
  html.shipshape-fullscreen .play-layout {
    grid-template-columns:minmax(0,1fr) minmax(150px,25vw);
  }
  html.shipshape-fullscreen .dpad {
    grid-template-columns:54px 54px 54px;
    grid-template-rows:54px 54px 54px;
  }
  html.shipshape-fullscreen .dpad button {
    width:54px;height:54px;min-height:54px;
  }
  html.shipshape-fullscreen .touch-controls .fire {
    width:82px;height:82px;min-height:82px;
  }
}

.credits-card{z-index:24}
.credits-panel{width:min(88%,360px);margin:auto;padding:22px;border-radius:16px;background:rgba(8,11,25,.94);border:2px solid #51609a;box-shadow:0 16px 50px #0008;text-align:center}
.credits-panel h2{margin:0 0 16px;font-size:30px}
.credits-list{display:grid;gap:10px;margin:0 0 18px}
.credits-list div{display:grid;gap:2px;padding:12px;border-radius:10px;background:#11162e;border:1px solid #303a68}
.credits-list strong{font-size:18px}
.credits-list span{font-size:12px;color:#b7c3e3}
.credits-panel button{padding:11px 18px;border-radius:10px}

.pause-overlay{
  z-index:45;
  background:#000;
  backdrop-filter:none;
  place-content:center;
  text-align:center;
}
.pause-panel{
  width:min(86%,360px);
  margin:auto;
  padding:24px 20px;
  border:2px solid #51609a;
  border-radius:16px;
  background:#05070d;
  box-shadow:0 18px 60px #000;
}
.pause-panel h2{
  margin:0 0 10px;
  font-size:clamp(38px,8vh,72px);
  letter-spacing:.08em;
}
.pause-panel p{
  margin:0 auto 18px;
  max-width:290px;
  color:#d9e1ff;
  line-height:1.45;
}
.pause-panel button{
  padding:12px 22px;
  border-radius:11px;
}

.action-buttons{display:flex;gap:10px;align-items:center;justify-content:center}
.touch-controls .bomb{background:#6d4fdc;box-shadow:inset 0 -4px #39257e;font-size:16px;font-weight:900}
@media (max-width:820px), (pointer:coarse){
  .action-buttons{gap:8px}
  .touch-controls .bomb{
    width:88px;height:88px;min-height:88px;border-radius:50%;font-size:16px;
    background:conic-gradient(#ff5964,#ffae40,#ffe45c,#62e36b,#59e3ff,#7a8cff,#c56cff,#ff5964);
    color:#fff;text-shadow:0 2px 3px #000,0 0 4px #000;
    box-shadow:inset 0 -5px rgba(0,0,0,.45);
  }
}
@media (max-width:480px) and (pointer:coarse){
  .touch-controls .bomb{width:94px;height:94px;min-height:94px}
}


/* v38: phone control/overlay cleanup */
.touch-controls.controls-hidden{display:none!important}

@media (max-width:600px) and (orientation:portrait){
  .touch-controls{
    inset:auto 8px 8px 8px;
    gap:10px;
    align-items:end;
    pointer-events:none;
  }
  .touch-controls button{pointer-events:auto}
  .dpad{
    grid-template-columns:48px 48px 48px!important;
    grid-template-rows:48px 48px 48px!important;
    gap:3px!important;
  }
  .dpad button{
    width:48px!important;height:48px!important;min-height:48px!important;
    border-radius:12px!important;font-size:19px!important;
  }
  .action-buttons{gap:6px!important}
  .touch-controls .fire,.touch-controls .bomb{
    width:68px!important;height:68px!important;min-height:68px!important;
    border-radius:50%!important;font-size:15px!important;
  }

  /* Keep overlays within the actual phone viewport and scroll inside them. */
  .game-wrap>.overlay.card,
  .game-wrap>.overlay.howto-card,
  .game-wrap>.overlay.profile-card,
  .game-wrap>.overlay.credits-card{
    inset:6px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100% - 12px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .howto-card,.profile-card{padding:12px!important}
  .howto-card h2,.profile-card h2{font-size:22px!important}
  .howto-card p,.howto-card li,.profile-card p{font-size:12px!important;line-height:1.35!important}
}

/* When any modal/menu is open, touch controls are hidden by JS.
   This class also prevents stale taps during transitions. */
.controls-hidden{visibility:hidden!important;pointer-events:none!important}


/* v39: fullscreen utility bar + roomier Space Radio */
.fullscreen-controls{
  display:none;
  position:absolute;
  top:8px;
  right:8px;
  z-index:50;
  gap:7px;
  align-items:center;
}
.fullscreen-controls .fullscreen-exit,
.fullscreen-controls .fullscreen-pause{
  display:block;
  position:static;
  min-height:42px;
  padding:8px 12px;
  border-radius:11px;
  font-size:12px;
  opacity:.92;
}
.fullscreen-controls .fullscreen-pause{
  min-width:76px;
  font-weight:850;
}
.fullscreen-controls .fullscreen-pause span{margin-left:4px}
html.shipshape-fullscreen .fullscreen-controls{display:flex}
html.shipshape-fullscreen .fullscreen-exit{display:block}

.radio-panel{padding:12px}
.radio-display{
  min-height:70px;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:8px;
  padding:10px;
}
.radio-copy{min-width:0}
.radio-copy small{
  font-size:9px;
  letter-spacing:.08em;
  opacity:.75;
  white-space:nowrap;
}
.radio-copy strong{
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}
.radio-btn{
  min-width:38px;
  min-height:38px;
  padding:7px 8px;
}

@media (max-width:600px) and (orientation:portrait){
  html.shipshape-fullscreen .fullscreen-controls{
    top:7px;
    right:7px;
    left:auto;
  }
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-pause,
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-exit{
    min-height:44px;
    padding:8px 10px;
    font-size:11px;
  }
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-pause{min-width:70px}
  .radio-panel{padding:10px!important}
  .radio-display{
    min-height:82px!important;
    grid-template-columns:12px minmax(0,1fr) 42px 46px 46px!important;
    gap:6px!important;
    padding:10px 8px!important;
  }
  .radio-copy small{
    font-size:8px!important;
    white-space:normal!important;
    line-height:1.15;
  }
  .radio-copy strong{
    font-size:12px!important;
    line-height:1.22!important;
    max-height:2.45em;
    overflow:hidden;
  }
  .radio-btn{
    min-width:42px!important;
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:4px!important;
    font-size:11px!important;
  }
}

@media (max-width:430px) and (orientation:portrait){
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-pause span{display:none}
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-pause{min-width:44px;width:44px}
  html.shipshape-fullscreen .fullscreen-controls .fullscreen-exit{padding-inline:9px}
}


/* v40: responsive Space Radio layout
   Keep track information on its own row and controls below it on narrower HUDs. */
.radio-display{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) repeat(3,42px);
  grid-template-areas:
    "light copy copy copy copy"
    ". play next sfx .";
  align-items:center;
  gap:8px;
}
.radio-light{grid-area:light}
.radio-copy{grid-area:copy}
#radioPlay{grid-area:play}
#radioNext{grid-area:next}
#radioSfx{grid-area:sfx}

@media (min-width:1100px){
  .radio-display{
    grid-template-columns:14px minmax(0,1fr) repeat(3,40px);
    grid-template-areas:"light copy play next sfx";
    min-height:72px;
  }
}

@media (max-width:1099px){
  .radio-panel{padding:11px!important}
  .radio-display{
    min-height:106px!important;
    padding:10px!important;
    grid-template-columns:14px minmax(0,1fr) 44px 44px 44px!important;
    grid-template-areas:
      "light copy copy copy copy"
      ". play next sfx ."!important;
    row-gap:10px!important;
    column-gap:7px!important;
  }
  .radio-copy{
    min-width:0;
    padding-right:2px;
  }
  .radio-copy small{
    display:block;
    white-space:normal!important;
    line-height:1.15!important;
    font-size:8px!important;
  }
  .radio-copy strong{
    display:block;
    margin-top:4px;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .radio-btn{
    width:44px!important;
    min-width:44px!important;
    height:42px!important;
    min-height:42px!important;
    padding:4px!important;
  }
}

/* Slightly more breathing room on tablets where the side HUD is narrow but tall. */
@media (min-width:601px) and (max-width:1099px){
  .radio-panel .label{margin-bottom:6px}
  .radio-display{min-height:110px!important}
  .radio-copy strong{font-size:13px!important}
}

/* On very narrow portrait phones, retain the two-row radio but shave a little height. */
@media (max-width:600px) and (orientation:portrait){
  .radio-display{
    min-height:96px!important;
    grid-template-columns:12px minmax(0,1fr) 40px 44px 44px!important;
    row-gap:7px!important;
  }
  .radio-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }
}


/* v45: portrait-first mobile/tablet layout, manual reload, stable radio */
.touch-controls .reload{
  background:#2d4f78;
  box-shadow:inset 0 -4px rgba(0,0,0,.4);
  font-weight:900;
  font-size:12px;
}
.portrait-notice{display:none}

/* Phone + tablet portrait: deliberately use a simple two-row radio with flex controls. */
@media (max-width:1100px) and (orientation:portrait){
  .radio-panel{padding:10px!important}
  .radio-display{
    display:grid!important;
    grid-template-columns:14px minmax(0,1fr) 44px 44px 44px!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "light copy copy copy copy"
      ". play next sfx ."!important;
    min-height:104px!important;
    gap:8px!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .radio-light{grid-area:light!important}
  .radio-copy{grid-area:copy!important;min-width:0!important;overflow:hidden!important}
  #radioPlay{grid-area:play!important}
  #radioNext{grid-area:next!important}
  #radioSfx{grid-area:sfx!important}
  .radio-copy small{white-space:normal!important;font-size:8px!important;line-height:1.1!important}
  .radio-copy strong{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important;line-height:1.25!important}
  .radio-btn{position:static!important;width:44px!important;min-width:44px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:4px!important}
}

@media (max-width:600px) and (orientation:portrait){
  .action-buttons{display:flex!important;gap:5px!important;align-items:flex-end!important}
  .touch-controls .fire,.touch-controls .bomb{
    width:62px!important;height:62px!important;min-height:62px!important;font-size:14px!important;
  }
  .touch-controls .reload{
    width:58px!important;height:52px!important;min-height:52px!important;border-radius:13px!important;font-size:10px!important;padding:4px!important;
  }
}

@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .touch-controls .reload{
    width:72px;height:58px;min-height:58px;border-radius:14px;font-size:11px;
  }
}

/* We intentionally support phone/tablet play in portrait. Instead of allowing
   the compact portrait HUD to scramble during rotation, landscape shows a clear prompt. */
@media (max-width:1100px) and (orientation:landscape) and (pointer:coarse){
  .portrait-notice{
    display:grid;position:fixed;inset:0;z-index:10000;place-items:center;
    background:#02040c;color:#fff;text-align:center;padding:24px;
  }
  .portrait-notice>div{max-width:360px;padding:24px;border:2px solid #51609a;border-radius:16px;background:#080b19}
  .portrait-notice strong{display:block;font-size:26px;letter-spacing:.08em;margin-bottom:10px}
  .portrait-notice span{display:block;color:#d9e1ff;font-size:14px;line-height:1.4}
}


/* v46: structural Space Radio fix.
   The information and buttons are physically separate rows so they cannot overlap. */
.radio-panel{
  min-width:0!important;
  overflow:hidden!important;
}
.radio-display{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:8px!important;
  gap:8px!important;
  overflow:hidden!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-template-areas:none!important;
}
.radio-info{
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
}
.radio-light{
  grid-area:auto!important;
  flex:none!important;
}
.radio-copy{
  grid-area:auto!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  padding:0!important;
}
.radio-copy small{
  display:block!important;
  width:100%!important;
  margin:0 0 3px!important;
  font-size:7px!important;
  line-height:1.15!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.radio-copy strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.radio-controls{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  gap:5px!important;
}
.radio-controls .radio-btn,
#radioPlay,#radioNext,#radioSfx{
  grid-area:auto!important;
  position:static!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 2px!important;
  font-size:9px!important;
  line-height:1!important;
  overflow:hidden!important;
}

/* Give the station a little more presence when there is room. */
@media (min-width:700px){
  .radio-display{padding:9px!important;gap:9px!important}
  .radio-copy small{font-size:8px!important}
  .radio-copy strong{font-size:12px!important}
  .radio-controls .radio-btn,
  #radioPlay,#radioNext,#radioSfx{
    height:38px!important;
    min-height:38px!important;
    font-size:10px!important;
  }
}

/* Portrait phones/tablets use exactly the same safe structure. */
@media (max-width:1100px) and (orientation:portrait){
  .radio-display{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:7px!important;
    gap:7px!important;
  }
  .radio-info{
    grid-template-columns:8px minmax(0,1fr)!important;
    gap:5px!important;
  }
  .radio-copy small{font-size:6.5px!important}
  .radio-copy strong{font-size:10px!important}
  .radio-controls{gap:4px!important}
  .radio-controls .radio-btn,
  #radioPlay,#radioNext,#radioSfx{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    font-size:8px!important;
  }
}


/* v47: portrait-first touch layout and reliable rotation guard */

/* On touch-size portrait screens, anchor the 3:4 playfield to the TOP of its column.
   The unused vertical room stays below the playfield instead of being split above/below it. */
@media (max-width:1100px) and (orientation:portrait){
  .play-layout{
    align-items:start!important;
  }
  .game-column{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:center!important;
    align-self:start!important;
    min-height:0!important;
    height:100%!important;
  }
  .game-wrap{
    align-self:center!important;
    margin-top:0!important;
    margin-bottom:auto!important;
  }
  html.shipshape-fullscreen .game-column{
    justify-content:flex-start!important;
    align-items:center!important;
  }
  html.shipshape-fullscreen .game-wrap{
    margin-top:0!important;
    margin-bottom:auto!important;
  }
}

/* Some Android tablets report a fine/hover-capable pointer even though they are touch devices.
   Do NOT depend on pointer:coarse for the landscape guard.  Any phone/tablet-sized viewport
   in landscape gets the portrait prompt. */
@media (max-width:1100px) and (orientation:landscape){
  .portrait-notice{
    display:grid!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:2147483647!important;
    place-items:center!important;
    background:#02040c!important;
    color:#fff!important;
    text-align:center!important;
    padding:24px!important;
    box-sizing:border-box!important;
  }
  .portrait-notice>div{
    width:min(88vw,420px)!important;
    max-width:420px!important;
    padding:26px 22px!important;
    border:2px solid #51609a!important;
    border-radius:16px!important;
    background:#080b19!important;
    box-shadow:0 18px 60px #000b!important;
  }
  .portrait-notice strong{
    display:block!important;
    font-size:clamp(24px,5vw,34px)!important;
    letter-spacing:.08em!important;
    margin-bottom:10px!important;
  }
  .portrait-notice span{
    display:block!important;
    color:#d9e1ff!important;
    font-size:clamp(14px,2.5vw,18px)!important;
    line-height:1.45!important;
  }
}

/* Desktop landscape remains supported.  A wide desktop window should never inherit
   the touch-device rotation screen. */
@media (min-width:1101px){
  .portrait-notice{display:none!important}
}


/* v48: action-button order and consistent shape */
.action-buttons{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:6px!important;
}
.touch-controls .fire,
.touch-controls .bomb,
.touch-controls .reload{
  width:72px!important;
  height:58px!important;
  min-height:58px!important;
  border-radius:14px!important;
  padding:4px 7px!important;
  font-weight:900!important;
  line-height:1!important;
}
.touch-controls .fire{
  background:#d94b63!important;
  box-shadow:inset 0 -4px rgba(96,18,36,.65)!important;
  color:#fff!important;
}
.touch-controls .bomb{
  background:conic-gradient(#ff5964,#ffae40,#ffe45c,#62e36b,#59e3ff,#7a8cff,#c56cff,#ff5964)!important;
  box-shadow:inset 0 -4px rgba(0,0,0,.42)!important;
  color:#fff!important;
  text-shadow:0 2px 3px #000,0 0 4px #000!important;
}
.touch-controls .reload{
  background:#2d4f78!important;
  box-shadow:inset 0 -4px rgba(0,0,0,.4)!important;
  color:#fff!important;
}
@media (max-width:600px) and (orientation:portrait){
  .touch-controls .fire,
  .touch-controls .bomb,
  .touch-controls .reload{
    width:58px!important;
    height:52px!important;
    min-height:52px!important;
    border-radius:13px!important;
    font-size:10px!important;
    padding:4px!important;
  }
}
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .touch-controls .fire,
  .touch-controls .bomb,
  .touch-controls .reload{
    width:72px!important;
    height:58px!important;
    min-height:58px!important;
    border-radius:14px!important;
    font-size:11px!important;
  }
}


/* v49: keep touch controls inside the playfield and top-align portrait content */
.game-wrap > .touch-controls{
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
  top:auto!important;
  width:auto!important;
  max-width:calc(100% - 20px)!important;
  box-sizing:border-box!important;
  z-index:12!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:8px!important;
  margin:0!important;
  pointer-events:none!important;
}
.game-wrap > .touch-controls button{pointer-events:auto!important}
.game-wrap > .touch-controls .action-buttons{
  flex:0 0 auto!important;
  max-width:56%!important;
}
@media (max-width:1100px) and (orientation:portrait){
  .play-layout{align-items:start!important}
  .game-column{
    justify-content:flex-start!important;
    align-items:center!important;
    align-self:start!important;
  }
  .game-wrap{
    margin-top:0!important;
    margin-bottom:auto!important;
    align-self:flex-start!important;
  }
  .main-menu{
    place-content:start center!important;
    align-content:start!important;
    padding-top:clamp(20px,3vh,40px)!important;
  }
  .game-wrap > .touch-controls{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    max-width:calc(100% - 16px)!important;
  }
}
@media (max-width:600px) and (orientation:portrait){
  .game-wrap > .touch-controls{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    max-width:calc(100% - 12px)!important;
    gap:4px!important;
  }
  .game-wrap > .touch-controls .action-buttons{
    gap:3px!important;
    max-width:58%!important;
  }
  .game-wrap > .touch-controls .fire,
  .game-wrap > .touch-controls .bomb,
  .game-wrap > .touch-controls .reload{
    width:50px!important;
    min-width:50px!important;
    height:46px!important;
    min-height:46px!important;
    font-size:9px!important;
  }
}


/* v50: BOMB / RELOAD / FIRE match the directional-button footprint */
.game-wrap > .touch-controls .fire,
.game-wrap > .touch-controls .bomb,
.game-wrap > .touch-controls .reload{
  width:48px!important;
  min-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  border-radius:12px!important;
  padding:0 3px!important;
  font-size:8px!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

/* Keep the same exact footprint on portrait phones and tablets. */
@media (max-width:1100px) and (orientation:portrait){
  .game-wrap > .touch-controls .fire,
  .game-wrap > .touch-controls .bomb,
  .game-wrap > .touch-controls .reload{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:12px!important;
  }
}


/* v51: mockup-style bottom control rail
   D-pad lower row and BOMB / RELOAD / FIRE share one baseline. */
.game-wrap > .touch-controls{
  left:12px!important;
  right:12px!important;
  bottom:12px!important;
  max-width:calc(100% - 24px)!important;
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:18px!important;
}

/* Keep the up arrow above the other three direction buttons,
   while the lower direction row aligns with the action buttons. */
.game-wrap > .touch-controls .dpad{
  flex:0 0 auto!important;
  align-self:flex-end!important;
  margin:0!important;
}

/* Action rail begins at the same vertical baseline as left/down/right. */
.game-wrap > .touch-controls .action-buttons{
  flex:0 0 auto!important;
  align-self:flex-end!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:16px!important;
  max-width:none!important;
  margin:0!important;
  padding-left:18px!important;
  border-left:2px solid rgba(126,151,220,.38)!important;
}

/* Match the approved mockup: all action buttons retain the same 48x48
   footprint as the directional buttons. */
.game-wrap > .touch-controls .fire,
.game-wrap > .touch-controls .bomb,
.game-wrap > .touch-controls .reload{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  border-radius:12px!important;
  padding:0 3px!important;
  margin:0!important;
  font-size:8px!important;
}

/* Tablet portrait: roomy spacing to reduce accidental presses. */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .game-wrap > .touch-controls{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    max-width:calc(100% - 28px)!important;
    gap:22px!important;
  }
  .game-wrap > .touch-controls .action-buttons{
    gap:18px!important;
    padding-left:20px!important;
  }
}

/* Phone portrait: keep the same button size as the D-pad,
   but use a still-safe 9px gap so the full rail fits inside the playfield. */
@media (max-width:600px) and (orientation:portrait){
  .game-wrap > .touch-controls{
    left:6px!important;
    right:6px!important;
    bottom:8px!important;
    max-width:calc(100% - 12px)!important;
    gap:8px!important;
  }
  .game-wrap > .touch-controls .action-buttons{
    gap:9px!important;
    padding-left:8px!important;
    border-left-width:1px!important;
  }
  .game-wrap > .touch-controls .fire,
  .game-wrap > .touch-controls .bomb,
  .game-wrap > .touch-controls .reload{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    border-radius:12px!important;
    font-size:7px!important;
  }
}


/* v52: true two-row D-pad + unified bottom baseline + top-anchored playfield */

/* The D-pad only uses TWO rows. Older CSS reserved an unused third row,
   which made the action buttons sit one button-height too low. */
.game-wrap > .touch-controls .dpad{
  display:grid!important;
  grid-template-columns:48px 48px 48px!important;
  grid-template-rows:48px 48px!important;
  gap:3px!important;
  width:150px!important;
  height:99px!important;
  min-height:99px!important;
  align-self:flex-end!important;
}
.game-wrap > .touch-controls .dpad .up{
  grid-column:2!important;
  grid-row:1!important;
}
.game-wrap > .touch-controls .dpad .left{
  grid-column:1!important;
  grid-row:2!important;
}
.game-wrap > .touch-controls .dpad .down{
  grid-column:2!important;
  grid-row:2!important;
}
.game-wrap > .touch-controls .dpad .right{
  grid-column:3!important;
  grid-row:2!important;
}
.game-wrap > .touch-controls .dpad button{
  width:48px!important;
  min-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  border-radius:12px!important;
}

/* Action buttons now line up exactly with LEFT / DOWN / RIGHT. */
.game-wrap > .touch-controls .action-buttons{
  align-self:flex-end!important;
  margin:0!important;
  padding:0!important;
  border-left:0!important;
  gap:16px!important;
  height:48px!important;
  min-height:48px!important;
}

/* Anchor the actual playfield to the top edge of its display column. */
@media (max-width:1100px) and (orientation:portrait){
  .play-layout{
    align-items:start!important;
  }
  .game-column{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    align-self:start!important;
  }
  .game-wrap{
    align-self:flex-start!important;
    margin-top:0!important;
    margin-bottom:auto!important;
  }
  .game-wrap canvas{
    object-position:top center!important;
  }
  html.shipshape-fullscreen .game-column{
    justify-content:flex-start!important;
    align-items:flex-start!important;
  }
  html.shipshape-fullscreen .game-wrap{
    align-self:flex-start!important;
    margin-top:0!important;
  }
}

/* Tablet portrait: preserve comfortable action spacing. */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .game-wrap > .touch-controls .action-buttons{
    gap:18px!important;
  }
}

/* Phone portrait: reduce spacing only enough to keep the full control rail inside. */
@media (max-width:600px) and (orientation:portrait){
  .game-wrap > .touch-controls .action-buttons{
    gap:10px!important;
  }
}

/* v53: locked ships stay full-color so players can preview purchases. */
.ship-tile.locked img{filter:none!important;opacity:1!important}
.ship-tile.locked{border-style:dashed}
.ship-tile.cant-afford{opacity:.72}
.ship-tile.locked small{color:#ffe08a;font-weight:800}
.ship-tile.purchase-denied{animation:shipPurchaseDenied .22s linear 2}
@keyframes shipPurchaseDenied{50%{transform:translateX(3px)}}


/* v59: slightly larger directional controls while preserving the bottom baseline.
   LEFT / DOWN / RIGHT grow to 54×54. BOMB / RELOAD / FIRE stay 48×48.
   The action row is anchored to the bottom edge of the larger D-pad. */
.game-wrap > .touch-controls .dpad{
  grid-template-columns:54px 54px 54px!important;
  grid-template-rows:54px 54px!important;
  gap:3px!important;
  width:168px!important;
  height:111px!important;
  min-height:111px!important;
}
.game-wrap > .touch-controls .dpad button{
  width:54px!important;
  min-width:54px!important;
  height:54px!important;
  min-height:54px!important;
  border-radius:13px!important;
  font-size:20px!important;
}

/* Keep action buttons unchanged. */
.game-wrap > .touch-controls .fire,
.game-wrap > .touch-controls .bomb,
.game-wrap > .touch-controls .reload{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  border-radius:12px!important;
}

/* Bottom of action row lines up with bottom of LEFT / DOWN / RIGHT. */
.game-wrap > .touch-controls{
  align-items:flex-end!important;
}
.game-wrap > .touch-controls .action-buttons{
  align-self:flex-end!important;
  height:48px!important;
  min-height:48px!important;
  margin-bottom:0!important;
}

@media (max-width:600px) and (orientation:portrait){
  .game-wrap > .touch-controls .dpad{
    grid-template-columns:52px 52px 52px!important;
    grid-template-rows:52px 52px!important;
    width:162px!important;
    height:107px!important;
  }
  .game-wrap > .touch-controls .dpad button{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    border-radius:13px!important;
    font-size:19px!important;
  }
  .game-wrap > .touch-controls .fire,
  .game-wrap > .touch-controls .bomb,
  .game-wrap > .touch-controls .reload{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
}


/* v60: 60px directional controls.
   Action buttons remain 48px and retain the shared bottom baseline. */
.game-wrap > .touch-controls .dpad{
  grid-template-columns:60px 60px 60px!important;
  grid-template-rows:60px 60px!important;
  gap:3px!important;
  width:186px!important;
  height:123px!important;
  min-height:123px!important;
}
.game-wrap > .touch-controls .dpad button{
  width:60px!important;
  min-width:60px!important;
  height:60px!important;
  min-height:60px!important;
  border-radius:14px!important;
  font-size:22px!important;
}
.game-wrap > .touch-controls .fire,
.game-wrap > .touch-controls .bomb,
.game-wrap > .touch-controls .reload{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
}
.game-wrap > .touch-controls,
.game-wrap > .touch-controls .action-buttons{
  align-items:flex-end!important;
}
.game-wrap > .touch-controls .action-buttons{
  align-self:flex-end!important;
  margin-bottom:0!important;
}

/* Keep the requested 60px D-pad on portrait phones too. */
@media (max-width:600px) and (orientation:portrait){
  .game-wrap > .touch-controls .dpad{
    grid-template-columns:60px 60px 60px!important;
    grid-template-rows:60px 60px!important;
    width:186px!important;
    height:123px!important;
    min-height:123px!important;
  }
  .game-wrap > .touch-controls .dpad button{
    width:60px!important;
    min-width:60px!important;
    height:60px!important;
    min-height:60px!important;
    border-radius:14px!important;
    font-size:22px!important;
  }
}


/* v61: Temporal Stopwatch sits directly above RELOAD. */
.game-wrap > .touch-controls .reload-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:48px!important;
  min-width:48px!important;
  align-self:flex-end!important;
}
.game-wrap > .touch-controls .reload-stack > .reload{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  border-radius:12px!important;
  margin:0!important;
}
.game-wrap > .touch-controls .temporal{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#2d4f78!important;
  box-shadow:inset 0 -4px rgba(0,0,0,.4)!important;
  color:#fff!important;
  padding:1px!important;
  font-size:21px!important;
  line-height:1!important;
}
.game-wrap > .touch-controls .temporal.hidden{display:none!important}
.game-wrap > .touch-controls .temporal small{
  display:block;
  margin-top:1px;
  font-size:8px;
  line-height:1;
  font-weight:900;
  color:#dffaff;
}
.game-wrap > .touch-controls .temporal.temporal-active{
  background:#257f9d!important;
  box-shadow:inset 0 -4px rgba(0,0,0,.35),0 0 10px rgba(100,235,255,.65)!important;
}
.game-wrap > .touch-controls .temporal.temporal-cooling{
  opacity:.72;
}
.game-wrap > .touch-controls .temporal:disabled{
  cursor:default;
}

/* Preserve the bottom baseline: RELOAD itself remains in line with BOMB/FIRE
   and the lower directional row while the stopwatch grows upward. */
.game-wrap > .touch-controls .action-buttons{
  align-items:flex-end!important;
}


/* v62: Pilot Account + cloud-save UI */
.account-card{z-index:26}
.account-section{display:grid;gap:10px;margin-top:8px}
.account-callout,.account-cloud-hero{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:12px;border-radius:12px;background:#11162e;border:1px solid #425183;
}
.account-callout{display:grid}
.account-callout span,.account-cloud-info,.account-warning{font-size:11px;line-height:1.4;color:#d6def8}
.account-field{display:grid;gap:5px;font-size:9px;font-weight:900;letter-spacing:.08em;color:#aebce8}
.account-field input{
  width:100%;box-sizing:border-box;padding:10px 11px;border-radius:9px;
  border:1px solid #4f6096;background:#080c1d;color:#fff;font:inherit;font-size:13px;
  user-select:text!important;-webkit-user-select:text!important;
}
.account-code-area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.account-cloud-hero strong,.account-cloud-hero span{display:block}
.account-cloud-hero strong{font-size:18px}
.account-cloud-hero span{font-size:10px;color:#aebce8;margin-top:2px}
.cloud-badge{
  flex:none;padding:7px 9px;border-radius:999px;background:#183c36;border:1px solid #48b79e;
  color:#bfffee;font-size:9px;font-weight:900;letter-spacing:.05em;
}
.cloud-badge.warn{background:#4b3716;border-color:#d8a641;color:#ffe2a0}
.cloud-badge.off{background:#321b2a;border-color:#a54f7e;color:#ffc3e1}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.account-warning{display:block;padding:9px;border-radius:9px;background:#0b1025;border:1px solid #29345d}
@media(max-width:600px) and (orientation:portrait){
  .account-card{inset:6px!important;overflow:auto!important}
  .account-code-area,.account-actions{grid-template-columns:1fr}
  .account-cloud-hero{align-items:flex-start}
}