/* Base look for the arcade-style games (Tank Wars and the adventures). Same colours as the other games. */
:root {
  --bg: #05070d;
  --panel: #0b1220;
  --line: #1c2a44;
  --text: #cfe3ff;
  --dim: #7d90b0;
  --accent: #5ee0b0;
  --warn: #ffb454;
  --bad: #ff6b6b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
body { display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
  padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right));
}
.brand { font-weight: bold; letter-spacing: 3px; color: var(--accent); }
.brand span { margin-left: 8px; letter-spacing: 0; font-weight: normal; color: var(--dim); font-size: 12px; }
.stat { color: var(--dim); }
.stat b { color: var(--text); }
.spacer { flex: 1; }
button, select, input {
  font: inherit; color: var(--text); background: #101b30; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px;
}
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: #123a2e; border-color: var(--accent); color: var(--accent); }
.good { color: var(--accent); } .bad { color: var(--bad); } .dim { color: var(--dim); } .warn { color: var(--warn); }
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 6px;
  max-width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2 { margin-top: 0; color: var(--accent); }
dialog li { margin: 4px 0; }
dialog .fine { color: var(--dim); font-size: 12px; }
dialog label { display: block; margin: 8px 0; }
dialog label select, dialog label input { display: block; width: 100%; margin-top: 4px; }
dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
dialog label.check { display: flex; gap: 10px; align-items: flex-start; }
dialog label.check input { display: inline-block; width: auto; margin: 4px 0 0; flex: none; }
dialog label.check .fine { display: block; }
dialog input[type=range] { padding: 0; accent-color: var(--accent); }
dialog input[type=checkbox] { accent-color: var(--accent); }
kbd { border: 1px solid var(--line); padding: 0 4px; border-radius: 3px; }
@media (pointer: coarse) { button, select, input { min-height: 40px; } }
@media (max-width: 760px) {
  html, body { height: 100vh; height: 100dvh; font-size: 15px; }
  #topbar { gap: 4px 12px; padding-top: calc(6px + env(safe-area-inset-top)); }
  .brand { font-size: 13px; letter-spacing: 2px; flex-basis: 100%; }
  .brand span { display: none; }
  .spacer { flex-basis: 100%; height: 0; }
  #topbar button { flex: 1 1 auto; min-height: 40px; padding: 4px 8px; }
  select, input, textarea { font-size: 16px; } /* iOS zooms the page for smaller fields */
  dialog { padding: 14px; }
  dialog .row button { flex: 1; min-height: 44px; }
}