/* Layout: one narrow centred column -- title, the drop box (which becomes the
   ship view), slider, download, two lines of info. */
:root {
  --paper: #eceff2;
  --panel: #f8f9fa;
  --sunk: #e1e6eb;
  --ink: #17202a;
  --muted: #5b6671;
  --rule: #c8d0d8;
  --accent: #b9650f;
  --accent-ink: #ffffff;
  --accent-soft: #f3e3cf;
  --gun: #b5364a;
  --engine: #2b67a8;
  --shield: #22857a;
  --armour: #6a737d;
  --hull: #b3bcc5;
  --bad: #b5364a;
  --focus: #2b67a8;
  --display: "Chakra Petch", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e141a; --panel: #151d25; --sunk: #1c2631; --ink: #dce3ea; --muted: #8b98a6;
    --rule: #2a3643; --accent: #e5953c; --accent-ink: #1a1006; --accent-soft: #3a2810;
    --gun: #e46a7c; --engine: #5d9de3; --shield: #45b3a6; --armour: #7c8794; --hull: #3a4654;
    --bad: #e46a7c; --focus: #5d9de3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e141a; --panel: #151d25; --sunk: #1c2631; --ink: #dce3ea; --muted: #8b98a6;
  --rule: #2a3643; --accent: #e5953c; --accent-ink: #1a1006; --accent-soft: #3a2810;
  --gun: #e46a7c; --engine: #5d9de3; --shield: #45b3a6; --armour: #7c8794; --hull: #3a4654;
  --bad: #e46a7c; --focus: #5d9de3;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--body); }
[hidden] { display: none !important; }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding-block: 40px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 16px;
}
h1 { margin: 0; font: 700 34px/1.1 var(--display); text-wrap: balance; }

.drop {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 6px;
  aspect-ratio: 1; padding: 20px; text-align: center; cursor: pointer;
  background: var(--panel); border: 2px dashed var(--rule); border-radius: 6px;
  transition: border-color 0.15s, background-color 0.15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { font: 600 20px/1.2 var(--display); }
.drop-sub { color: var(--muted); font-size: 13.5px; }

.ship { display: grid; gap: 12px; }
.view { position: relative; }
.view.over canvas { outline: 2px dashed var(--accent); outline-offset: -2px; }
#plan { display: block; width: 100%; aspect-ratio: 1; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; }
.name { position: absolute; top: 10px; left: 12px; right: 110px; font: 600 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change { position: absolute; top: 8px; right: 10px; font-size: 13px; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.change:hover { color: var(--ink); text-decoration: underline; }

#aspect { width: 100%; margin: 0; accent-color: var(--accent); }
.btn {
  font: 600 15px/1 var(--body); padding: 12px 16px; border-radius: 4px; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.6; cursor: progress; }
:is(.btn, #aspect, .change):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.info { margin: 0; display: grid; gap: 6px; }
.info > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.info dt { color: var(--muted); }
.info dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }
.info .slow { color: var(--bad); }

.status { margin: 0; font-size: 13.5px; color: var(--muted); min-height: 1.2em; }
.status.err { color: var(--bad); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }