/* Tank Duel — dusk over a dug-up field.

   Gravity Golf is glass, Castle Defense is carved wood, Pentakeover is an
   engraved campaign plate. This one is painted steel: olive and rust, stencil
   capitals, and ledger numerals for the two figures that decide every shot.
   The readouts are deliberately the loudest thing outside the canvas, because
   angle and power are the whole game. */

:root {
  --ground: #14160f;
  --plate: #1e2217;
  --edge: #343a28;
  --ink: #e4e3d4;
  --muted: #8d9079;
  --amber: #f0a52c;
  --p1: #e0683c;
  --p2: #4f9fd4;

  --num: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: radial-gradient(ellipse at 50% -20%, #262b1c, var(--ground) 70%);
  color: var(--ink);
  font: 14px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 16px;
  overflow: hidden;
  /* A click on the field is a game move, not a text drag. Without this the
     browser paints a blue selection over the readouts as you play. */
  -webkit-user-select: none;
  user-select: none;
}

/* Back to the landing page. Same corner and size as the other three games. */
.back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  padding: 7px 11px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--plate);
  color: var(--muted);
  text-decoration: none;
}

.back:hover, .back:focus-visible {
  color: var(--amber);
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

#app {
  width: min(900px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- top bar: the two health tracks ---------- */

#bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.side { display: flex; flex-direction: column; gap: 6px; }
.side.right { align-items: flex-end; }

.who {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

#side1 .who { color: var(--p1); }
#side2 .who { color: var(--p2); }

/* The track is a fixed rail; the <i> inside is the remaining health. */
.hp {
  width: 100%;
  max-width: 260px;
  height: 9px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: #0e100a;
  overflow: hidden;
}

.hp i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width .25s ease;
}

#hp1 { background: linear-gradient(90deg, #8c3a1c, var(--p1)); }
#hp2 { background: linear-gradient(90deg, #2c6690, var(--p2)); }

#centre { text-align: center; }

h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}

#wind { margin-top: 3px; font-size: 12px; color: var(--muted); }
#wind b { font-family: var(--num); color: var(--ink); }

.lbl {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the field ---------- */

#field { position: relative; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: #0b0d07;
  touch-action: none;
}

/* ---------- settings ---------- */

/* The way in sits beside the wind reading, because that is all it changes. */
#openSettings {
  margin: 0 0 0 10px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--muted);
  background: var(--plate);
  border: 1px solid var(--edge);
  vertical-align: 1px;
}

#openSettings:hover, #openSettings:focus-visible {
  color: var(--amber);
  background: var(--plate);
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

#settings {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  padding: clamp(20px, 6vw, 56px);
  background: #0b0d07f2;
  border-radius: 3px;
}

#settings[hidden] { display: none; }

#settings h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* Label, control, read-out — the number column is fixed so the sliders line
   up with each other however many digits the value has. */
.row {
  display: grid;
  grid-template-columns: 9em 1fr 2.5em;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.row > span { font-size: 13px; color: var(--ink); }

.row b {
  font-family: var(--num);
  font-size: 16px;
  color: var(--amber);
  text-align: right;
}

.row input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
  background: transparent;
}

.row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--amber);
  justify-self: start;
}

/* A disabled row should read as switched off, not broken. */
.row.off > span, .row.off b { opacity: .4; }
.row.off input { opacity: .4; cursor: not-allowed; }

#settings .note {
  max-width: 460px;
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

#settings .note b { color: var(--ink); font-weight: 600; }

#settings button#closeSettings { align-self: center; }

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0b0d07d9;
  border-radius: 3px;
}

#overlay[hidden] { display: none; }

#overlayTitle {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#overlaySub { color: var(--muted); }

button {
  margin-top: 6px;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--amber);
  border: 0;
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
}

button:hover, button:focus-visible {
  background: var(--p1);
  color: var(--ink);
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- bottom dash: whose turn, the two numbers, the keys ---------- */

#dash {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

#turn { font-size: 13px; color: var(--muted); }
#turn b { color: var(--ink); }

.readouts { display: flex; gap: 20px; }

.read { display: flex; align-items: baseline; gap: 7px; }

.read b {
  font-family: var(--num);
  font-size: 22px;
  font-weight: 700;
  color: var(--amber);
  min-width: 2.6ch;
  text-align: right;
}

#keys { text-align: right; font-size: 11px; color: var(--muted); }

kbd {
  font: 600 10px/1 var(--num);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 3px 5px;
  margin-right: 2px;
  color: var(--ink);
  background: var(--plate);
}

/* Stack the three dash columns once they stop fitting side by side. */
@media (max-width: 760px) {
  #dash, #bar { grid-template-columns: 1fr; justify-items: center; }
  .side.right { align-items: center; }
  #keys, #turn { text-align: center; }
}

/* ---------- touch pad ---------- */

/* Touch screens get the keys as buttons. The pad sits beside the field on a
   phone held sideways and below it when held upright; desktop never sees it. */
#pad { display: none; }

@media (pointer: coarse) {
  body { touch-action: manipulation; }
  #keys { display: none; }

  #pad {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
    -webkit-user-select: none;
    user-select: none;
  }
  .padrow {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 6px;
  }
  #pad button {
    min-height: 48px;
    font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
    background: var(--plate);
    border: 1px solid var(--edge);
    border-radius: 3px;
    touch-action: none;
  }
  #pad button.down { background: #2d3322; border-color: var(--amber); color: var(--amber); }
  #padFire {
    padding: 0 22px;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--amber) !important;
    border-color: #a86f12 !important;
    color: #1b1406 !important;
  }
  #padNew { padding: 0 12px; font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
}

/* Upright phone: the turn and readouts sit right above the buttons that
   change them, then the aim rows, then Fire and New match. */
@media (pointer: coarse) and (max-width: 560px) {
  #play { display: contents; }
  #dash { order: 1; }
  #pad { order: 2; grid-template-columns: 1fr 1fr; margin-top: 0; }
  #padFire { min-height: 56px; }
}

/* A phone on its side: the field as large as the screen allows, and a
   column beside it holding the turn, the two readouts and the pad, with the
   back link at its top. The wrapper around field and pad steps aside
   (display: contents) so both join the page grid directly. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  body { padding: 6px; align-items: flex-start; }
  .back { top: 6px; left: auto; right: 6px; width: 140px; text-align: center; padding: 6px 4px; }
  #app {
    width: auto;
    display: grid;
    grid-template-columns: auto 140px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "bar back" "field dash" "field pad";
    gap: 4px 8px;
  }
  #play { display: contents; }
  #bar { grid-area: bar; gap: 8px; grid-template-columns: 1fr auto 1fr; justify-items: stretch; }
  .side.right { align-items: flex-end; }
  /* The title stays, small, on the same line as the wind reading. */
  #centre { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  h1 { font-size: 11px; letter-spacing: .2em; }
  #wind { margin-top: 0; }
  #field { grid-area: field; width: min(calc((100vh - 60px) * 900 / 500), calc(100vw - 160px)); }

  #dash { grid-area: dash; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 4px 0; }
  #turn { font-size: 12px; text-align: center; }
  .readouts { flex-direction: column; gap: 0; align-items: center; }
  .read b { font-size: 18px; }

  #pad { grid-area: pad; margin-top: 0; grid-template-columns: 1fr; gap: 6px; align-content: start; }
  .padrow { grid-template-columns: 40px 1fr 1fr; gap: 4px; }
  .padrow .lbl { font-size: 9px; letter-spacing: .08em; }
  #pad button { min-height: 40px; }
  #padFire { min-height: 50px; }
  #padNew { min-height: 30px !important; }
}

/* ---------- testing tools ---------- */

#openAdmin {
  margin: 0 0 0 6px;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--plate);
  border: 1px solid var(--edge);
  vertical-align: 1px;
  cursor: pointer;
}
#openAdmin[hidden] { display: none; }

#admin {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(300px, 70vw);
  overflow-y: auto;
  padding: 8px 10px 16px;
  background: #11130cf2;
  border-left: 1px solid var(--edge);
  color: var(--ink);
  font-size: 12px;
}
#admin[hidden] { display: none; }
#admin header { display: flex; justify-content: space-between; align-items: center; color: var(--amber); letter-spacing: .2em; text-transform: uppercase; }
#admin header span { display: flex; gap: 4px; letter-spacing: 0; text-transform: none; }
#admin section { margin-top: 10px; }
#admin h3 { margin: 0 0 4px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#admin .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
#admin .who { width: 22px; font-weight: 700; }
#admin .who.p1 { color: var(--p1); }
#admin .who.p2 { color: var(--p2); }
#admin button, #admin input {
  font: inherit;
  font-size: 12px;
  padding: 4px 7px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--plate);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
#admin button { cursor: pointer; }
#admin button:hover { border-color: var(--amber); }
#admin button.on { border-color: var(--amber); background: #2d3322; color: var(--amber); }
#admin input { width: 64px; }
#admin pre { margin: 0; font-family: var(--num); font-size: 10.5px; line-height: 1.45; white-space: pre-wrap; color: var(--muted); }

@media (pointer: fine) {
  body:has(#admin:not([hidden])) { padding-right: 300px; }
}