:root {
  color-scheme:dark;
  --ink:#172326;
  --panel:#233236;
  --muted:#a9bcbd;
  --mint:#c3f396;
  --pink:#ffbdc6;
  --line:#ffffff1a;
  --dock-height:104px;
  font-family:Arial,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  color:#f3f6ed;
  background:#111a1d;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  overscroll-behavior:none;
  touch-action:manipulation;
}
#app,dialog {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
#app img,dialog img {
  -webkit-user-drag:none;
}
.battle-hud,.control-dock,.placement-dock {
  touch-action:none;
}
button,select,input {
  font:inherit;
}
button {
  cursor:pointer;
  color:inherit;
  border:1px solid var(--line);
  background:#344549;
  border-radius:9px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button:disabled {
  cursor:default;
  opacity:.4;
}
button:active:not(:disabled) {
  transform:translateY(2px);
  filter:brightness(1.1);
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--mint);
  outline-offset:3px;
}
button,button:active {
  transition:transform .08s,background .15s,opacity .15s;
}
button[hidden],[hidden],.hidden {
  display:none!important;
}
button svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
}
.primary-btn {
  background:var(--mint);
  color:#23341d;
  border:1px solid #dcffb9;
  box-shadow:0 4px 0 #739957;
  font-weight:800;
  font-size:18px;
  padding:15px 24px;
  min-height:52px;
}
.primary-btn:active:not(:disabled) {
  transform:translateY(3px);
  box-shadow:0 1px 0 #739957;
}
.text-btn {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:12px;
  font-size:14px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.wordmark {
  font-size:12px;
  letter-spacing:.2em;
  font-weight:700;
  color:var(--mint);
  margin:0 0 15px;
}
#app {
  min-height:100dvh;
}
.top-menu {
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  isolation:isolate;
  background:#253b40;
}
.menu-world {
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(#152c3e6b,#152c35b3),url('assets/stages/meadow.webp');
  background-size:cover;
  background-position:center 25%;
  filter:saturate(.65);
  opacity:.85;
}
.top-menu:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#121e2399,transparent 50%,#121e2355);
}
.menu-panel {
  width:min(850px,100%);
  display:grid;
  grid-template-columns:.95fr 1.1fr;
  gap:40px;
  align-items:center;
  background:#19282be8;
  border:1px solid #b7d2c02b;
  box-shadow:0 25px 100px #08161b66;
  border-radius:20px;
  padding:40px;
}
.menu-title {
  text-align:center;
}
.menu-title h1 {
  font-size:52px;
  line-height:1.16;
  margin:0;
  letter-spacing:.03em;
  text-shadow:0 4px 0 #0c181c;
}
.menu-title h1 span {
  display:block;
  font-size:24px;
  letter-spacing:.19em;
  color:var(--mint);
  margin-top:8px;
}
.menu-tank {
  display:block;
  width:100%;
  max-width:285px;
  margin:10px auto 0;
  filter:drop-shadow(0 8px 5px #07131880);
  image-rendering:pixelated;
}
.menu-note {
  font-size:13px;
  color:#b8cccc;
  margin:0;
}
.menu-setup {
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mode-switch {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  background:#101e21;
  border:1px solid var(--line);
  padding:5px;
  border-radius:11px;
}
.mode-switch button {
  border:0;
  background:transparent;
  min-height:44px;
  font-size:16px;
  color:#c0ceca;
}
.mode-switch .selected {
  background:#42564a;
  color:#e7ffc9;
}
.stage-preview {
  display:flex;
  align-items:center;
  text-align:left;
  gap:13px;
  padding:10px;
  background:#26373b;
  min-height:92px;
}
.stage-preview>img {
  width:88px;
  height:65px;
  border-radius:5px;
  object-fit:cover;
  object-position:center 18%;
  flex-shrink:0;
}
.stage-preview>span:nth-child(2) {
  display:grid;
  gap:5px;
}
.stage-preview small {
  font-size:12px;
  color:var(--muted);
}
.stage-preview strong {
  font-size:16px;
}
.stage-preview span span {
  font-size:12px;
  color:#b5c4c4;
}
.change-label {
  margin-left:auto;
  font-size:13px;
  color:var(--mint);
  padding-right:3px;
}
.menu-options {
  display:flex;
  gap:14px;
  min-height:62px;
}
.menu-options label {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  color:#c6d2ce;
}
.menu-options select {
  padding:10px;
  border-radius:7px;
  border:1px solid #526666;
  color:#f3f6ed;
  background:#304347;
  font-size:14px;
  min-height:40px;
}
.menu-options p {
  font-size:14px;
  color:var(--muted);
  align-self:center;
  margin:0;
}
.start-btn {
  width:100%;
}
.menu-utilities {
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}
.menu-utilities button {
  border:0;
  background:none;
  min-height:36px;
  padding:6px 12px;
  color:#c6d4cf;
  font-size:13px;
}
.battle-screen {
  height:100dvh;
  display:grid;
  grid-template-rows:64px minmax(0,1fr) var(--dock-height);
  overflow:hidden;
  position:relative;
  background:#1c2a2d;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.battle-hud {
  display:grid;
  grid-template-columns:minmax(130px,1fr) minmax(130px,.9fr) minmax(130px,1fr) 48px;
  gap:24px;
  align-items:center;
  background:#1c2a2d;
  padding:8px 24px;
  border-bottom:1px solid #ffffff0d;
  z-index:2;
}
.player {
  width:100%;
  max-width:310px;
}
.player-two {
  justify-self:end;
}
.player-heading {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  margin-bottom:7px;
}
.player-heading strong {
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.player-heading output {
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  color:var(--mint);
}
.player-two output {
  color:var(--pink);
}
.shield-mark {
  color:#b5e4ff;
  font-size:18px;
}
.hp-track {
  height:7px;
  background:#0e1b1e;
  border-radius:3px;
  overflow:hidden;
}
.hp-track i {
  display:block;
  height:100%;
  width:100%;
  background:var(--mint);
  transition:width .3s;
}
.player-two .hp-track i {
  background:var(--pink);
}
.battle-info {
  text-align:center;
  display:grid;
  gap:5px;
  font-variant-numeric:tabular-nums;
}
.battle-info>span {
  font-size:14px;
  color:#e0e9e6;
}
.round-meta {
  display:flex;
  gap:14px;
  justify-content:center;
  font-size:12px;
  color:#9db1b3;
}
.pause-btn {
  width:44px;
  height:44px;
  background:#314248;
  border-color:#45595e;
  display:grid;
  place-items:center;
}
.battlefield {
  position:relative;
  min-height:0;
  overflow:hidden;
  background:#344f60;
  touch-action:none;
}
.battlefield canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:crosshair;
}
.turn-chip {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 17px;
  border-radius:22px;
  background:#15242edb;
  color:#e0ffd0;
  border:1px solid #c8efd12b;
  font-size:14px;
  pointer-events:none;
  white-space:nowrap;
}
.turn-chip.enemy {
  color:#ffc4ce;
}
.shot-message {
  position:absolute;
  top:53px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 15px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  background:#172b31e6;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
  white-space:nowrap;
  max-width:90%;
}
.first-hint {
  position:absolute;
  bottom:13px;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  background:#1c2d36c9;
  color:#dde8e5;
  font-size:12px;
  line-height:1.3;
  border-radius:20px;
  padding:7px 14px;
  pointer-events:none;
  white-space:nowrap;
}
.control-dock {
  display:grid;
  grid-template-columns:112px minmax(270px,430px) 118px 126px;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:10px 24px;
  background:linear-gradient(#293b3f,#1d2c30);
  border-top:1px solid #5d767944;
  z-index:3;
  user-select:none;
}
.dock-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#c5d4cf;
  font-size:13px;
  margin-bottom:7px;
}
.dock-label output {
  color:var(--mint);
  font-variant-numeric:tabular-nums;
}
.move-buttons {
  display:flex;
  gap:8px;
}
.move-buttons button {
  height:44px;
  flex:1;
  font-size:18px;
  touch-action:none;
}
.fuel-track {
  height:3px;
  background:#15262b;
  border-radius:3px;
  overflow:hidden;
  margin-top:7px;
}
.fuel-track i {
  display:block;
  width:100%;
  height:100%;
  background:#a4ce87;
}
.aim-controls {
  display:grid;
  gap:4px;
}
.aim-row {
  display:grid;
  grid-template-columns:30px 43px 34px minmax(80px,1fr) 34px;
  gap:8px;
  align-items:center;
}
.aim-row label {
  font-size:14px;
  color:#c8d6d0;
}
.aim-row output {
  font-size:17px;
  color:#f2f9df;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.aim-row button {
  height:34px;
  min-width:34px;
  line-height:1;
  font-size:21px;
  touch-action:none;
}
.aim-row input {
  width:100%;
  min-width:0;
  height:34px;
  margin:0;
  appearance:none;
  background:transparent;
  cursor:ew-resize;
  touch-action:none;
}
.aim-row input::-webkit-slider-runnable-track {
  height:5px;
  border-radius:6px;
  background:var(--range-bg,#597074);
}
.aim-row input::-webkit-slider-thumb {
  appearance:none;
  width:22px;
  height:22px;
  border:3px solid #23373b;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 2px #94b981;
  margin-top:-8.5px;
}
.aim-row input::-moz-range-track {
  height:5px;
  border-radius:6px;
  background:var(--range-bg,#597074);
}
.aim-row input::-moz-range-thumb {
  width:16px;
  height:16px;
  border:3px solid #23373b;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 2px #94b981;
}
.aim-row input:disabled {
  opacity:.4;
}
.loadout {
  display:grid;
  gap:5px;
}
.loadout button {
  height:36px;
  font-size:14px;
  padding:5px 8px;
  white-space:nowrap;
}
.loadout #open-weapons {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#415255;
}
.loadout small {
  font-size:12px;
  color:var(--mint);
}
.loadout button[aria-expanded=true] {
  border-color:var(--mint);
  background:#465b4c;
}
.fire-btn {
  height:76px;
  background:var(--mint);
  color:#253a20;
  border:1px solid #ddffb8;
  font-size:25px;
  font-weight:800;
  box-shadow:0 4px 0 #729c54;
  white-space:nowrap;
}
.fire-btn:active:not(:disabled) {
  box-shadow:0 1px 0 #729c54;
  transform:translateY(3px);
}
.fire-btn:disabled {
  opacity:.65;
  background:#465a50;
  color:#b8c8bd;
  border-color:#586e63;
  box-shadow:none;
  font-size:16px;
}
.control-popover {
  position:absolute;
  bottom:calc(var(--dock-height) + env(safe-area-inset-bottom) + 12px);
  z-index:6;
  right:max(24px,env(safe-area-inset-right));
  padding:15px;
  border-radius:12px;
  border:1px solid #76928a66;
  background:#1d3035f5;
  box-shadow:0 10px 40px #08181e66;
  max-width:calc(100% - 32px);
}
.popover-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:10px;
}
.popover-heading strong {
  font-size:14px;
}
.popover-heading button,.dialog-heading button {
  width:36px;
  height:36px;
  border:0;
  background:#ffffff0a;
  font-size:24px;
  line-height:1;
}
.weapon-list {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
}
.weapon-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:84px;
  min-height:76px;
  padding:8px;
}
.weapon-btn .weapon-icon {
  color:var(--weapon-color);
  font-size:18px;
}
.weapon-btn>span:nth-child(2) {
  font-size:14px;
  white-space:nowrap;
}
.weapon-btn small {
  font-size:12px;
  color:#b5c7c8;
}
.weapon-btn.selected {
  border-color:var(--mint);
  background:#425649;
}
.weapon-panel p {
  font-size:13px;
  color:#c0d0cc;
  line-height:1.6;
  margin:10px 0 0;
  max-width:475px;
}
.tool-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.tool-list button {
  padding:12px;
  display:grid;
  gap:8px;
  min-height:70px;
}
.tool-list strong {
  font-size:14px;
  white-space:nowrap;
}
.tool-list small {
  font-size:12px;
  color:#bad0cd;
}
.tools-panel>.text-btn {
  padding:12px 0 0;
}
.result,.rotate-overlay {
  position:absolute;
  inset:0;
  z-index:10;
  background:#122229e8;
  display:grid;
  place-items:center;
  padding:20px;
  text-align:center;
  backdrop-filter:blur(8px);
}
.result-card {
  max-width:470px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#24373b;
  display:grid;
  justify-items:center;
  gap:15px;
}
.result-card h2 {
  margin:0;
  font-size:30px;
}
.result-card p {
  margin:0;
  white-space:pre-line;
  font-size:15px;
  line-height:1.7;
  color:#b9ceca;
}
.result-card .wordmark {
  color:var(--mint);
  font-size:12px;
  letter-spacing:.15em;
}
.rotate-overlay svg {
  width:80px;
  height:80px;
  fill:none;
  stroke:var(--mint);
  stroke-width:3;
}
.rotate-overlay h2 {
  font-size:22px;
}
.rotate-overlay p {
  color:var(--muted);
  font-size:14px;
}
.rotate-overlay {
  z-index:20;
}
.rotate-overlay .text-btn {
  margin-top:20px;
}
dialog {
  background:#213339;
  color:#f0f7ed;
  border:1px solid #718b8466;
  border-radius:15px;
  padding:26px;
  max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  box-shadow:0 25px 80px #03131866;
}
dialog::backdrop {
  background:#07151aca;
  backdrop-filter:blur(5px);
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.dialog-heading h2 {
  margin:0;
  font-size:23px;
}
.pause-dialog {
  width:350px;
  text-align:center;
}
.pause-dialog h2 {
  font-size:26px;
  margin:0 0 8px;
}
.pause-dialog>p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 22px;
}
.pause-dialog>.primary-btn {
  width:100%;
}
.pause-secondary {
  display:flex;
  gap:10px;
  margin-top:18px;
}
.pause-secondary button {
  flex:1;
  min-height:42px;
  font-size:14px;
}
.pause-dialog .menu-utilities {
  margin-top:13px;
}
.battle-log {
  text-align:left;
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:12px;
  font-size:13px;
  color:#b3c4c3;
}
.battle-log summary {
  cursor:pointer;
}
.battle-log ol {
  padding-left:22px;
  max-height:160px;
  overflow:auto;
  line-height:1.8;
}
.stage-dialog {
  width:800px;
}
.stage-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.stage-card {
  padding:0;
  overflow:hidden;
  text-align:left;
  background:#2c4146;
}
.stage-card img,.classic-preview,.world-preview {
  width:100%;
  height:105px;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
.classic-preview {
  background:linear-gradient(160deg,var(--stage-top),var(--stage-bottom));
  display:grid;
  place-items:center;
  font-size:12px;
  letter-spacing:.12em;
  color:#ffffff90;
}
.stage-content {
  display:grid;
  gap:6px;
  padding:11px 12px;
}
.stage-content strong {
  font-size:15px;
}
.stage-content small {
  font-size:12px;
  color:#bdcdca;
}
.stage-card.selected {
  border:2px solid var(--mint);
}
.help-dialog {
  width:520px;
}
.help-steps p {
  color:#c5d4d0;
  line-height:1.7;
  font-size:15px;
  margin:0 0 15px;
}
.help-steps strong {
  display:block;
  color:var(--mint);
  font-size:16px;
  margin-bottom:4px;
}
.help-dialog details {
  border-top:1px solid var(--line);
  padding-top:13px;
  font-size:14px;
  line-height:1.7;
  color:#b9ceca;
}
.help-dialog summary {
  cursor:pointer;
}
.help-dialog>.primary-btn {
  margin-top:20px;
  width:100%;
}
@media(min-width:1200px) {
  .battle-hud {
    gap:45px;
    padding-left:45px;
    padding-right:45px;
  }
  .control-dock {
    gap:34px;
  }
}
@media(max-height:540px) and (min-width:600px) {
  :root {
    --dock-height:88px;
  }
  .top-menu {
    padding:14px;
  }
  .menu-panel {
    width:760px;
    padding:20px 26px;
    gap:30px;
    border-radius:14px;
  }
  .menu-title h1 {
    font-size:40px;
  }
  .menu-title h1 span {
    font-size:19px;
    margin-top:5px;
  }
  .wordmark {
    margin-bottom:9px;
  }
  .menu-tank {
    max-width:190px;
    margin-top:0;
  }
  .menu-setup {
    gap:11px;
  }
  .stage-preview {
    min-height:76px;
    padding:8px;
  }
  .stage-preview>img {
    height:56px;
    width:76px;
  }
  .menu-options {
    min-height:50px;
    gap:10px;
  }
  .menu-options label {
    gap:5px;
  }
  .menu-options select {
    padding:7px;
    min-height:34px;
  }
  .start-btn {
    min-height:46px;
    padding:11px 20px;
    font-size:17px;
  }
  .menu-utilities button {
    padding:4px 8px;
    min-height:30px;
  }
  .battle-screen {
    grid-template-rows:54px minmax(0,1fr) var(--dock-height);
  }
  .battle-hud {
    gap:16px;
    padding:5px 18px;
    grid-template-columns:minmax(120px,1fr) minmax(125px,.8fr) minmax(120px,1fr) 44px;
  }
  .player-heading {
    margin-bottom:5px;
    font-size:14px;
  }
  .player-heading strong {
    font-size:14px;
  }
  .hp-track {
    height:6px;
  }
  .round-meta {
    font-size:12px;
  }
  .control-dock {
    grid-template-columns:100px minmax(260px,390px) 104px 112px;
    gap:16px;
    padding:7px 18px;
  }
  .dock-label {
    margin-bottom:5px;
  }
  .move-buttons button {
    height:42px;
  }
  .fuel-track {
    margin-top:4px;
  }
  .aim-row {
    gap:6px;
    grid-template-columns:28px 41px 32px minmax(80px,1fr) 32px;
  }
  .aim-row button {
    min-width:32px;
    height:32px;
  }
  .aim-row input {
    height:32px;
  }
  .aim-controls {
    gap:2px;
  }
  .loadout button {
    height:32px;
  }
  .fire-btn {
    height:66px;
    font-size:23px;
  }
  .turn-chip {
    top:9px;
    font-size:13px;
    padding:6px 15px;
  }
  .shot-message {
    top:43px;
    font-size:14px;
  }
  .control-popover {
    padding:12px;
    bottom:calc(var(--dock-height) + env(safe-area-inset-bottom) + 8px);
  }
  .popover-heading {
    margin-bottom:7px;
  }
  .weapon-btn {
    min-height:64px;
    gap:4px;
  }
  .weapon-panel p {
    margin-top:7px;
  }
  .pause-dialog {
    padding:18px 24px;
  }
  .pause-dialog>p {
    margin-bottom:14px;
  }
  .pause-dialog .primary-btn {
    min-height:46px;
    padding:10px;
  }
  .pause-secondary {
    margin-top:13px;
  }
  .pause-dialog .menu-utilities {
    margin-top:8px;
  }
  .battle-log {
    margin-top:10px;
    padding-top:9px;
  }
  .first-hint {
    bottom:9px;
  }
}
@media(max-width:720px) and (orientation:landscape) {
  .control-dock {
    grid-template-columns:88px minmax(240px,1fr) 92px 96px;
    gap:10px;
    padding:7px 12px;
  }
  .battle-hud {
    gap:12px;
    padding:5px 12px;
    grid-template-columns:minmax(100px,1fr) minmax(115px,.8fr) minmax(100px,1fr) 44px;
  }
  .aim-row {
    gap:4px;
    grid-template-columns:28px 38px 30px minmax(65px,1fr) 30px;
  }
  .aim-row button {
    min-width:30px;
  }
  .aim-row output {
    font-size:16px;
  }
  .loadout button {
    font-size:13px;
  }
  .menu-panel {
    gap:20px;
    padding:18px;
  }
  .menu-title h1 {
    font-size:34px;
  }
  .menu-tank {
    max-width:165px;
  }
  .stage-preview>img {
    width:65px;
  }
  .menu-setup {
    gap:9px;
  }
  .stage-preview strong {
    font-size:14px;
  }
  .stage-preview span span {
    font-size:12px;
  }
  .change-label {
    font-size:12px;
  }
  .menu-note {
    font-size:12px;
  }
}
@media(max-width:600px) and (orientation:portrait) {
  .top-menu {
    padding:18px;
  }
  .menu-panel {
    grid-template-columns:1fr;
    gap:23px;
    padding:25px;
    width:400px;
  }
  .menu-title .wordmark {
    margin-bottom:8px;
  }
  .menu-title h1 {
    font-size:40px;
  }
  .menu-title h1 span {
    font-size:18px;
  }
  .menu-tank {
    max-width:170px;
    margin-top:0;
  }
  .menu-note {
    font-size:12px;
  }
  .menu-setup {
    gap:14px;
  }
  .stage-preview>img {
    width:74px;
  }
  .stage-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .stage-card img,.classic-preview,.world-preview {
    height:88px;
  }
  .stage-dialog {
    padding:18px;
  }
  .stage-content {
    padding:10px;
  }
  .stage-content strong {
    font-size:14px;
  }
  .battle-screen {
    grid-template-rows:54px minmax(0,1fr) var(--dock-height);
  }
  .control-dock {
    visibility:hidden;
  }
  .battle-hud {
    visibility:hidden;
  }
}
@media(max-height:350px) and (orientation:landscape) {
  :root {
    --dock-height:80px;
  }
  .battle-screen {
    grid-template-rows:48px minmax(0,1fr) var(--dock-height);
  }
  .battle-hud {
    padding-top:3px;
    padding-bottom:3px;
  }
  .control-dock {
    padding-top:4px;
    padding-bottom:4px;
  }
  .turn-chip {
    top:5px;
  }
  .menu-tank {
    max-width:140px;
  }
  .menu-panel {
    padding:13px 22px;
  }
  .menu-setup {
    gap:8px;
  }
  .menu-title h1 {
    font-size:34px;
  }
  .menu-utilities button {
    min-height:26px;
  }
  .stage-preview {
    min-height:68px;
  }
  .start-btn {
    min-height:42px;
  }
  .pause-dialog>p {
    margin-bottom:9px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
@media(max-width:620px) and (orientation:landscape) {
  .control-dock {
    grid-template-columns:78px minmax(208px,1fr) 84px 86px;
    gap:8px;
    padding:4px 8px;
  }
  .battle-hud {
    gap:10px;
    padding:4px 10px;
    grid-template-columns:minmax(85px,1fr) minmax(100px,.8fr) minmax(85px,1fr) 44px;
  }
  .aim-row {
    grid-template-columns:28px 36px 28px minmax(55px,1fr) 28px;
    gap:4px;
  }
  .aim-row button {
    min-width:28px;
    height:30px;
  }
  .aim-row output {
    font-size:15px;
  }
  .aim-row label {
    font-size:13px;
  }
  .dock-label {
    font-size:12px;
    margin-bottom:4px;
  }
  .move-buttons {
    gap:5px;
  }
  .move-buttons button {
    height:40px;
  }
  .fuel-track {
    margin-top:4px;
  }
  .fire-btn {
    height:65px;
    font-size:21px;
  }
  .loadout button {
    height:30px;
    padding:4px;
    font-size:12px;
  }
  .weapon-btn {
    min-width:70px;
  }
  .weapon-btn>span:nth-child(2) {
    font-size:13px;
  }
  .control-popover {
    right:12px;
  }
  .menu-title {
    display:none;
  }
  .menu-panel {
    grid-template-columns:1fr;
    width:370px;
    padding:16px 22px;
  }
  .menu-setup {
    gap:10px;
  }
  .stage-preview {
    min-height:65px;
  }
  .menu-options {
    min-height:48px;
  }
  .start-btn {
    min-height:43px;
    padding:10px;
  }
  .menu-utilities button {
    min-height:26px;
  }
}
@media(max-height:540px) and (orientation:landscape) {
  .stage-preview span span {
    display:none;
  }
  .top-menu {
    padding:10px;
  }
}
@media(max-width:620px) and (orientation:landscape) {
  .menu-panel {
    padding:12px 20px;
  }
  .menu-setup {
    gap:8px;
  }
  .mode-switch button {
    min-height:40px;
  }
  .stage-preview {
    min-height:60px;
    padding:7px;
  }
  .stage-preview>img {
    height:42px;
    width:65px;
  }
  .stage-preview>span:nth-child(2) {
    gap:4px;
  }
  .menu-options {
    min-height:50px;
  }
  .menu-options label {
    gap:4px;
    font-size:12px;
  }
  .menu-options select {
    min-height:32px;
    padding:6px;
    font-size:14px;
  }
  .start-btn {
    min-height:44px;
    padding:10px;
    font-size:17px;
    line-height:1.2;
  }
}

/* Extra choices stay in setup dialogs, outside the battle controls. */
.rules-preview { display:flex; align-items:center; gap:12px; min-height:42px; padding:9px 12px; text-align:left; background:#26373b; font-size:13px; }
.rules-preview small { color:#bed4c3; font-size:12px; flex:1; text-align:right; }
.rules-preview>span:last-child { color:var(--mint); font-size:18px; line-height:1; }
.rules-dialog { width:680px; }
.rule-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rule-presets button { min-height:40px; font-size:14px; }
.rule-presets .selected,.random-stage[aria-pressed=true] { border-color:var(--mint); background:#425649; color:#eeffdb; }
.rule-note { color:#b8cbc5; font-size:12px; line-height:1.6; margin:12px 0; }
.rule-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:18px 0; }
.rule-fields label { display:grid; gap:7px; font-size:13px; color:#cfddd4; }
.rule-fields select { width:100%; min-height:42px; padding:8px; color:#f3f6ed; background:#304347; border:1px solid #61736c; border-radius:7px; font-size:14px; }
.rules-dialog>.primary-btn { width:100%; margin-top:6px; }
.random-stage { width:100%; padding:12px; margin-bottom:15px; font-size:14px; }
@media (orientation:landscape) and (max-height:540px) {
  .rules-dialog { padding:18px 22px; }
  .rules-dialog .dialog-heading { margin-bottom:10px; }
  .rules-dialog .dialog-heading h2 { font-size:20px; }
  .rule-presets button { min-height:36px; }
  .rule-fields { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; margin:12px 0; }
  .rule-fields label { font-size:12px; gap:5px; }
  .rule-fields select { min-height:36px; font-size:13px; }
  .rules-dialog>.primary-btn { min-height:44px; padding:10px; font-size:16px; }
  .rules-dialog .rule-note { margin:8px 0; }
  .top-menu { padding:10px; }
  .menu-panel { padding:10px 22px; }
  .menu-setup { gap:6px; }
  .mode-switch { padding:3px; }
  .start-btn { min-height:44px; padding:9px 20px; }
  .rules-preview { min-height:36px; padding:6px 10px; }
}
@media (orientation:landscape) and (max-height:350px) {
  .menu-panel { padding:10px 16px; }
  .menu-setup { gap:6px; }
  .mode-switch { padding:3px; }
  .mode-switch button { min-height:34px; font-size:14px; }
  .stage-preview { min-height:58px; padding:6px; }
  .stage-preview>img { height:44px; width:58px; }
  .menu-options { min-height:44px; }
  .menu-options select { min-height:30px; padding:5px; font-size:13px; }
  .menu-options label { font-size:11px; gap:4px; }
  .start-btn { min-height:38px; padding:8px; }
  .menu-utilities button { min-height:26px; padding:4px; font-size:12px; }
  .rules-preview { min-height:32px; font-size:12px; }
  .rules-preview small { font-size:11px; }
}

/* Selection replaces the ordinary dock; it never covers the terrain. */
.placement-dock { display:flex; align-items:center; justify-content:center; gap:28px; padding:12px 24px; background:linear-gradient(#293b3f,#1d2c30); border-top:1px solid #5d767944; z-index:3; }
.placement-dock strong { color:var(--mint); font-size:18px; }
.placement-dock p { color:#d1ddd6; font-size:13px; margin:6px 0 0; }
.placement-actions { display:flex; align-items:center; gap:10px; }
.placement-actions button { min-height:44px; white-space:nowrap; }
.aim-row output { transition:color .12s,background .12s; border-radius:4px; }
.aim-controls.adjusting output { color:#d6ffbd; background:#153327; box-shadow:0 0 0 3px #153327; }
.weapon-list { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:950px) and (orientation:landscape) {
 .placement-dock { padding:8px 14px; gap:16px; }
 .placement-dock strong { font-size:15px; }
 .placement-dock p { font-size:11px; max-width:240px; }
 .placement-actions { gap:7px; }
 .placement-actions button { padding:10px 12px; font-size:13px; }
}

.placement-dock.enemy strong { color:var(--pink); }

.aim-row.precision output { color:#8bfff0; background:#16404a; box-shadow:0 0 0 3px #16404a; }
.aim-row.precision input::-webkit-slider-thumb { box-shadow:0 0 0 3px #8bfff0; }
.aim-row.precision input::-moz-range-thumb { box-shadow:0 0 0 3px #8bfff0; }

.range-touch { min-width:0; line-height:0; cursor:ew-resize; touch-action:none; }
.range-touch input { pointer-events:none; }

.edition-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border-radius:10px; border:1px solid #596f72; background:#101e21; }
.edition-switch button { min-height:36px; border:0; background:transparent; color:#c0ceca; font-size:14px; }
.edition-switch .selected { background:#42564a; color:#e7ffc9; }
#edition-note { max-width:275px; margin:0 auto; line-height:1.6; }
.special-help { padding:12px; border:1px solid #bb91d454; border-radius:10px; background:#291f36; font-size:14px; line-height:1.7; }
.special-help h3 { margin:0; color:#f0ceff; font-size:15px; }
.special-help p { margin:10px 0 0; }
.rules-preview small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (orientation:landscape) and (max-height:600px) {
 .top-menu { padding:6px; }
 .menu-setup { gap:6px; }
 .edition-switch { padding:3px; }
 .edition-switch button { min-height:30px; font-size:13px; }
 .menu-note { font-size:12px; }
 .mode-switch button { min-height:36px; }
 .stage-preview { min-height:60px; padding:7px; }
 .stage-preview>img { height:44px; width:68px; }
 .menu-options { min-height:48px; }
 .menu-options label { font-size:12px; gap:4px; }
 .menu-options select { min-height:30px; padding:5px 7px; font-size:14px; }
 .menu-utilities button { min-height:26px; }
}
@media (orientation:landscape) and (max-height:350px) {
 .menu-panel { padding:8px 16px; }
 .menu-setup { gap:4px; }
 .edition-switch button { min-height:26px; font-size:12px; }
 .mode-switch button { min-height:30px; font-size:13px; }
 .stage-preview { min-height:52px; padding:5px; }
 .stage-preview>img { height:40px; width:56px; }
 .menu-options { min-height:44px; }
 .menu-options label { font-size:11px; }
 .menu-options select { font-size:13px; }
 .rules-preview { min-height:30px; padding:4px 8px; }
 .start-btn { min-height:36px; padding:7px; }
 .menu-utilities button { min-height:24px; font-size:12px; padding:3px; }
}

.fire-area { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; align-self:stretch; }
.fire-area .fire-btn { flex:1; width:100%; }
.reload-readout { color:#d7e1d6; font-size:10px; text-align:center; white-space:nowrap; }
.realtime-edition .fire-area { min-width:0; }
.realtime-edition .fire-btn { background:linear-gradient(to right,#badc8e var(--reload-progress,100%),#667c61 var(--reload-progress,100%)); color:#19251d; }
.realtime-edition .fire-btn:disabled { opacity:.85; }
.realtime-edition .edition-switch .selected { background:#59643c; color:#f0ffd1; }
.live-stock { color:#c9d9bd; font-size:11px; white-space:nowrap; }
.live-selectable { cursor:pointer; border-radius:4px; }
.live-selected { outline:1px solid #c1dda4; outline-offset:4px; }
.local-live-note { margin:0; font-size:11px; line-height:1.4; color:#c5d5cc; }
@media (max-height:450px) { .realtime-edition .fire-area { min-width:0; } .reload-readout { font-size:9px; } .realtime-edition .player-heading { gap:4px; } .realtime-edition .player-heading strong { font-size:12px; } }
@media (max-width:680px) { .realtime-edition .fire-area { min-width:0; } .realtime-edition .edition-switch button { font-size:11px; } .realtime-edition .player-heading strong { font-size:10px; } .live-stock {font-size:10px;} .reload-readout {font-size:8px;} }
.realtime-edition .fire-btn { touch-action:none; }
@media (orientation:landscape) and (max-height:350px) { .local-live-note {font-size:10px;line-height:1.2;} .realtime-edition .menu-utilities button {min-height:22px;} }

.realtime-edition #realtime-help {background:#22322d;border-color:#badc8e52;}
.realtime-edition #realtime-help h3 {color:#e2eab0;}

/* Thumb controls remain independent; feedback stays inside the dock. */
.range-touch { align-self:stretch; min-height:32px; display:flex; align-items:center; }
.move-buttons button.is-held,.aim-row button.is-held { background:#55725b; border-color:#c4ef9a; color:#f2ffe5; box-shadow:inset 0 0 0 1px #c4ef9a; }
.fire-btn { touch-action:none; }
.fire-btn.queued { border-color:#e5ffd0; box-shadow:inset 0 0 0 2px #e5ffd0; }
.first-hint { top:54px; bottom:auto; max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis; padding:4px 10px; border-radius:6px; font-size:11px; }
.shot-message { overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.realtime-edition .first-hint {top:12px;}
.realtime-edition .shot-message {top:12px;}
.realtime-edition.local-play .first-hint,.realtime-edition.local-play .shot-message {top:48px;}
.realtime-edition {--dock-height:128px;}
.jump-button {width:100%;min-height:34px;margin-top:5px;padding:3px 6px;font-size:12px;font-weight:700;touch-action:none;color:#def3c4;border-color:#9ebd8066;}
.fire-area .jump-right {flex:0 0 40px;min-height:40px;margin:0;font-size:14px;}
.realtime-edition .fire-area {gap:3px;}
.realtime-edition .fire-area .fire-btn {min-height:40px;}
@media (max-height:540px) {.fire-area .jump-right {flex-basis:34px;min-height:34px;font-size:13px;}}
.realtime-edition .movement .move-buttons button {height:36px;}
.realtime-edition .movement .dock-label {margin-bottom:4px;}
.realtime-edition .movement .fuel-track {margin-top:4px;}
@media (max-height:450px) {.jump-button {min-height:32px;margin-top:4px;font-size:11px;} .realtime-edition .movement .move-buttons button {height:32px;}}
@media (max-height:540px) {.realtime-edition {--dock-height:108px;}}
.fuel-track.recovering i {background:#9adbd2;box-shadow:0 0 6px #9adbd255;}
.live-selectable {min-height:28px;}
.edition-switch {grid-template-columns:repeat(3,minmax(0,1fr));}
.edition-switch button {white-space:nowrap;font-size:12px;padding:4px;}
.workshop-edition {--dock-height:148px;}
.workshop-edition .loadout {gap:5px;}
.workshop-edition .loadout>button {height:34px;}
.build-actions {display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.build-actions button {min-height:34px;padding:3px;font-size:12px;touch-action:none;color:#e8e3ba;border-color:#d9c59966;}
.build-actions button.is-held {background:#6a7053;border-color:#e8ddaa;}
.build-list {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
.build-list button {min-height:46px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;}
.build-list strong {font-size:12px;white-space:nowrap;}
.build-list small {font-size:10px;color:#d5dccc;}
.build-list .selected {border-color:#e6d396;background:#596047;}
#build-detail,#build-summary {margin:7px 0;font-size:11px;line-height:1.4;color:#d4dfd2;}
.workshop-edition .tools-panel {width:min(540px,calc(100% - 24px));max-height:calc(100dvh - var(--dock-height) - 88px - env(safe-area-inset-bottom));overflow:auto;}
.workshop-edition .tools-panel .popover-heading {position:sticky;top:0;z-index:1;background:#1d3035;}
.workshop-edition .tool-list {margin-top:8px;}
.workshop-edition #workshop-help {background:#2b3225;border-color:#d5cb9454;}
@media (max-height:540px) {.workshop-edition {--dock-height:120px;}.workshop-edition .loadout>button {height:28px;font-size:12px;}.build-actions button {min-height:32px;font-size:11px;}.workshop-edition .loadout {gap:4px;}.build-list button {min-height:40px;}.build-list strong {font-size:11px;}}
@media (max-width:680px) {.edition-switch button {font-size:10px;}}
@media (max-width:680px) { .reload-readout {font-size:9px;} }

/* Construction and devices share the compact workshop, with one row per category. */
.workshop-edition .tools-panel .popover-heading {gap:10px;}
.build-tabs {display:flex;gap:4px;margin-left:auto;}
.build-tabs button {width:auto;min-width:58px;height:36px;padding:4px 12px;font-size:13px;border:1px solid #76928a66;border-radius:7px;}
.build-tabs .selected {background:#596047;border-color:#e6d396;color:#fff3cc;}
@media (max-height:540px){.workshop-edition .tools-panel {padding:10px;}.workshop-edition .tools-panel .popover-heading {margin-bottom:5px;}.build-tabs button {height:32px;}}

.build-list[data-category="mobility"] {grid-template-columns:repeat(3,minmax(0,1fr));}
.build-list[data-category="tactics"] {grid-template-columns:repeat(4,minmax(0,1fr));}

/* The world fills the screen; only individual thumb controls have a surface. */
:root {--dock-height:108px;}
.realtime-edition,.workshop-edition {--dock-height:108px;}
.battle-screen {display:block;padding:0;}
.battle-screen .battlefield {position:absolute;inset:0;margin:0;}
.battle-screen .battle-hud {position:absolute;top:0;left:0;right:0;height:54px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(6px,env(safe-area-inset-top));background:#162930ba;border-bottom:0;z-index:4;}
.battle-screen .control-dock {position:absolute;inset:0;display:block;padding:0;background:none;border:0;pointer-events:none;z-index:3;}
.control-dock>.movement,.control-dock>.loadout,.control-dock>.action-zone,.control-dock>.aim-controls {pointer-events:auto;}
.battle-screen .movement {position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:112px;}
.battle-screen .movement .move-buttons button {width:52px;height:52px;border-radius:50%;flex:none;}
.battle-screen .dock-label {font-size:13px;margin-bottom:5px;text-shadow:0 1px 3px #07161b,0 0 5px #07161b;}
.battle-screen .fuel-track {background:#10232b55;}
.battle-screen .loadout {position:absolute;left:auto;right:calc(max(12px,env(safe-area-inset-right)) + 112px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 108px);width:124px;max-width:none;gap:6px;}
.battle-screen .loadout>button {height:36px;font-size:13px;}
.battle-screen .action-zone {position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:228px;height:96px;display:grid;grid-template-columns:1fr 1.2fr;gap:8px;}
.action-zone .build-actions {display:flex;flex-direction:column;gap:6px;min-height:0;}
.action-zone .build-actions[hidden] {display:none;}
.action-zone .build-actions button {flex:1;min-height:40px;font-size:14px;}
.action-zone .build-actions[hidden]+.fire-area {grid-column:1/-1;}
.action-zone:has(.build-actions[hidden]) {width:112px;}
.action-zone .fire-area {gap:3px;min-height:0;}
.action-zone .fire-area .fire-btn {min-height:38px;height:auto;font-size:20px;}
.action-zone .fire-area .jump-right {flex-basis:38px;min-height:38px;font-size:14px;}
.battle-screen .reload-readout {font-size:10px;text-shadow:0 1px 3px #07161b;}
.battle-screen .control-dock button {background:#19344080;border-color:#d3e6df55;box-shadow:0 2px 8px #06191e22;text-shadow:0 1px 3px #081b22;}
.battle-screen .control-dock .fire-btn {background:#9ecc7ca6;border-color:#dfffafaa;color:#0d2416;text-shadow:0 1px 2px #f1ffbf66;}
.battle-screen .control-dock button:active,.battle-screen .control-dock button.is-held {background:#47726caf;border-color:#dfffafcc;}
.battle-screen .dial-aim {position:absolute;right:max(12px,env(safe-area-inset-right));top:max(64px,calc(env(safe-area-inset-top) + 56px));width:72px;display:grid;grid-template-columns:1fr;gap:8px;padding:0;background:none;border:0;}
.dial-aim .aim-row {display:grid;grid-template-columns:1fr;grid-template-rows:20px 60px;gap:2px;}
.dial-aim label {display:flex;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:13px;color:#f0f7e4;text-shadow:0 1px 4px #07161b;}
.dial-aim .range-touch {position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:60px;justify-self:center;cursor:ns-resize;touch-action:none;border-radius:10px;background:#162e3980;border:1px solid #c6dec37a;box-shadow:0 2px 8px #06191e22;overflow:hidden;}
.dial-face {position:absolute;inset:3px 7px;border-radius:7px;pointer-events:none;overflow:hidden;box-shadow:inset 2px 0 3px #07161bbb,inset -2px 0 3px #07161bbb;}
.dial-face::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#091c29dd,transparent 30%,transparent 70%,#091c29dd);border-left:1px solid #d1ece12b;border-right:1px solid #d1ece12b;}
.dial-rotor {position:absolute;inset:-24px 0;background:repeating-linear-gradient(to bottom,#c6e9dc99 0px,#c6e9dc99 1px,#17323980 2px,#17323980 6px,#8dbbb766 7px,#8dbbb766 8px);background-position:0 var(--wheel-phase,0px);box-shadow:inset 2px 0 3px #0b1e28cc,inset -2px 0 3px #0b1e28cc;}
.dial-aim .aim-row output {position:relative;z-index:1;grid-area:auto;text-align:center;font-size:17px;font-weight:700;color:#f3ffe7;text-shadow:0 1px 4px #07161b;pointer-events:none;}
.dial-aim .dial-input {position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;writing-mode:vertical-lr;direction:rtl;}
.dial-aim .range-touch:focus-within {outline:2px solid #d2ffac;outline-offset:3px;}
.dial-aim .aim-row.precision .range-touch {border-color:#f8e5a8;background:#425b348c;}
.dial-aim.adjusting .range-touch {border-color:#dbffa5;}
.dial-aim .aim-row:has(input:disabled) {opacity:.45;}
.dial-aim.adjusting output {background:none;box-shadow:none;color:#e5ffb0;}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none;}
.battle-screen .control-dock .occluding-tank {background:#19344018;border-color:#d3e6df28;box-shadow:none;}
.battle-screen .control-dock button.occluding-tank {color:#e8f9dab3;text-shadow:0 1px 3px #081b22;}
.dial-aim .aim-row.occluding-tank .range-touch {background:#19344010;border-color:#d3e6df28;}
.dial-aim .aim-row.occluding-tank .dial-face {opacity:.25;}
.dial-aim .aim-row.occluding-tank output {opacity:.6;}
.battle-screen .first-hint,.battle-screen .shot-message {top:66px;max-width:calc(100% - 200px);font-size:12px;}
.battle-screen .turn-chip {top:60px;left:12px;transform:none;font-size:12px;padding:5px 9px;max-width:112px;}
.battle-screen .first-hint {max-width:calc(100% - 270px);}
.battle-screen.realtime-edition .turn-chip {top:60px;}
.battle-screen .placement-dock {position:absolute;left:12px;right:12px;bottom:12px;border-radius:12px;background:#172e36d9;pointer-events:auto;}
.weapon-panel {max-height:calc(100dvh - var(--dock-height) - 76px);overflow:auto;}
.weapon-list {grid-template-columns:repeat(4,minmax(0,1fr));}
.build-list[data-category="mobility"] {grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-height:350px){
 .battle-screen .battle-hud {height:48px;}
 .battle-screen .dial-aim {top:56px;gap:5px;}
 .dial-aim .aim-row {grid-template-rows:14px 54px;gap:1px;}
 .dial-aim .range-touch {height:54px;width:46px;}
 .dial-aim label {font-size:12px;}
 .battle-screen .first-hint,.battle-screen .shot-message {top:56px;}
}
@media(max-width:680px){
 .battle-screen .loadout {left:auto;right:calc(max(12px,env(safe-area-inset-right)) + 104px);width:112px;}
 .battle-screen .action-zone {width:204px;gap:6px;}
 .action-zone .build-actions button {font-size:13px;}
 .battle-screen .control-dock .fire-btn {font-size:18px;}
}
@media(prefers-reduced-motion:reduce){.dial-rotor {transition:none;}}

.controls-dialog {width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;}
.controls-dialog h2 {margin:0 0 10px;}
.controls-dialog>p {font-size:13px;line-height:1.6;}
.controls-dialog fieldset {border:0;padding:0;margin:16px 0;}
.controls-dialog legend {font-size:14px;margin-bottom:8px;}
.sensitivity-levels {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
.sensitivity-levels button {min-width:0;min-height:48px;padding:5px 2px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;}
.sensitivity-levels small {font-size:10px;}
.sensitivity-levels button.selected {border-color:var(--mint);background:#476044;color:#edffe1;}
.jump-button.buffered {border-color:var(--mint);box-shadow:inset 0 0 0 1px #b6f69b66;}
.menu-utilities {flex-wrap:wrap;}
@media(max-height:400px){.controls-dialog {padding:12px 16px;}.controls-dialog fieldset {margin:10px 0;}.controls-dialog>p {margin:7px 0;}}

/* Two direct shots and two compact thumb reels, floating over the battlefield. */
.battle-screen .loadout[hidden] {display:none!important;}
.quick-loadout {position:absolute;right:calc(max(12px,env(safe-area-inset-right)) + 96px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 108px);width:228px;display:grid;gap:8px;pointer-events:auto;}
.carousel-row {min-width:0;}
.carousel-row[hidden] {display:none;}
.carousel-heading {display:flex;justify-content:space-between;align-items:center;padding:0 7px 4px;text-shadow:0 1px 3px #081b22;font-size:13px;}
.carousel-heading small {font-size:10px;color:#d4ded0;}
.action-carousel {position:relative;display:flex;width:100%;min-width:0;gap:6px;padding:0 calc(50% - 46px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:none;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);perspective:420px;}
.action-carousel::-webkit-scrollbar {display:none;}
.battle-screen .carousel-card {flex:0 0 92px;min-width:92px;min-height:48px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:.65;transform:rotateY(calc(var(--carousel-offset,0)*-20deg)) scale(.9);border-radius:10px;transition:opacity .12s,transform .12s;}
.carousel-card strong {font-size:13px;white-space:nowrap;}
.carousel-card small {font-size:10px;white-space:nowrap;}
.battle-screen .carousel-card.selected {opacity:1;transform:scale(1);border-color:#d0edb7b0;background:#345246a6;}
.battle-screen .carousel-card.empty {color:#cad0c7;}
.battle-screen .carousel-card.empty.selected {border-color:#a2afa077;background:#263a4277;}
.action-carousel.dragging .carousel-card {transition:none;}
.action-carousel.unavailable {opacity:.5;}
.battle-screen .action-zone.quick-actions {width:228px;height:96px;display:flex;flex-direction:column;gap:6px;}
.primary-shots {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;flex:1;min-height:0;}
.battle-screen .primary-shots .weapon-trigger {border-radius:12px;min-height:52px;height:auto;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.weapon-trigger strong {font-size:14px;white-space:nowrap;}
.weapon-trigger small {font-size:11px;white-space:nowrap;}
.battle-screen .primary-shots #fire-sniper {background:#9d95569c;border-color:#e8d58b99;}
.battle-screen .primary-shots #fire-sniper.selected {border-color:#fff0ab;box-shadow:inset 0 0 0 2px #fff0ab80;}
.quick-utilities {display:flex;gap:6px;height:36px;flex:none;}
.quick-utilities button {flex:1;min-width:0;font-size:13px;padding:4px 2px;}
.quick-utilities .jump-button {margin:0;}
.quick-utilities button[hidden] {display:none;}
.workshop-edition #build-tabs,.workshop-edition #build-list,.workshop-edition #build-detail {display:none!important;}
.workshop-edition .tools-panel .build-actions {margin-bottom:8px;}
.workshop-edition .tools-panel #build-front {min-height:36px;font-size:13px;}
.battle-screen .carousel-card.occluding-tank,.battle-screen .primary-shots .occluding-tank {background:#19344018!important;border-color:#d3e6df28!important;}
@media(max-width:680px){.quick-loadout {width:210px;}.battle-screen .action-zone.quick-actions {width:216px;}.weapon-trigger small {font-size:10px;}}
@media(max-height:350px){.quick-loadout {gap:5px;}.carousel-heading {padding-bottom:3px;}.carousel-card {min-height:44px!important;}.carousel-heading small {font-size:9px;}}
@media(prefers-reduced-motion:reduce){.carousel-card {transition:none!important;}}
.online-open{width:100%;min-height:40px;margin-top:6px;border-color:#a6d9cc88;color:#d4f9e8;}
.online-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;}
.online-dialog label{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.online-dialog input{min-width:0;width:100%;padding:11px;border:1px solid #769388;border-radius:8px;background:#142a2b;color:#eef7ec;font:inherit;user-select:text;-webkit-user-select:text;touch-action:manipulation;}
.online-dialog .primary-btn{width:100%;min-height:44px;}
.online-join-row{display:flex;gap:8px;margin-top:14px;}.online-join-row button{flex:none;}
.online-code-label{display:flex;align-items:center;gap:14px;}.online-code-label strong{font-size:24px;letter-spacing:3px;color:var(--mint);}
#online-players{padding:0;list-style:none;}#online-players li{padding:10px;margin:6px 0;background:#42635744;border-radius:8px;}
.online-buttons{display:flex;gap:8px;}.online-buttons button{flex:1;}.online-buttons .primary-btn{width:auto;}
#online-message{font-size:13px;line-height:1.6;min-height:1.6em;color:#f5ddba;}
.online-status{position:fixed;top:calc(env(safe-area-inset-top) + 50px);left:50%;transform:translateX(-50%);z-index:12;min-height:26px;padding:4px 9px;font-size:11px;border-color:#c7ded633;background:#14282c80;backdrop-filter:blur(4px);}
.online-status[hidden]{display:none;}