* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #03070d; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #dceaf4;
  -webkit-font-smoothing: antialiased;
}
canvas { display: block; }

/* ------------------------------------------------------------- panels -- */
#overlay, #results {
  position: fixed; inset: 0; z-index: 10; padding: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 34%, #0b2434 0%, #05121b 58%, #02060b 100%);
}
#overlay.hidden, #results.hidden { display: none; }

.stack { display: flex; flex-direction: column; gap: 8px; }

h1 {
  font-size: clamp(40px, 9vw, 78px); font-weight: 800; letter-spacing: 12px;
  background: linear-gradient(100deg, #8ff0ff 0%, #6fb4ff 42%, #c69bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.04;
}
.tagline { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #6a8ba3; }
p.sub { max-width: 54ch; line-height: 1.68; color: #8ea9bd; font-size: 15px; }

.card {
  width: min(600px, 94vw); border: 1px solid #17384c; border-radius: 18px;
  background: rgba(5, 17, 26, 0.72); padding: 20px 22px; backdrop-filter: blur(6px);
}
.card h2 {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: #587e96; margin-bottom: 14px;
}
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; text-align: left; }
.legend div { font-size: 13px; line-height: 1.55; color: #8ea9bd; }
.legend b { display: block; color: #dceaf4; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 2px; }
.legend em { color: #bdf0ff; font-style: normal; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }

.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

button {
  font: inherit; font-weight: 600; letter-spacing: 1px; padding: 13px 28px;
  border-radius: 999px; cursor: pointer; color: #dceaf4;
  border: 1px solid #245570; background: linear-gradient(180deg, #10293a, #081722);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { transform: translateY(-2px); border-color: #8ff0ff; box-shadow: 0 8px 26px rgba(143, 240, 255, .2); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.primary { border-color: #8ff0ff; background: linear-gradient(180deg, #14566f, #0a2c3f); }

#status { font-size: 13px; color: #5c7a8e; min-height: 1.4em; }
.foot { font-size: 12px; color: #44607a; letter-spacing: 1px; }
.kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  border: 1px solid #245570; border-radius: 5px; padding: 1px 6px; color: #a9cde0;
}

/* ------------------------------------------------------------ results -- */
#res-table { width: 100%; font-size: 14px; }
#res-table td { padding: 6px 0; color: #8ea9bd; }
#res-table td:last-child { text-align: right; color: #dceaf4; font-weight: 700; font-variant-numeric: tabular-nums; }
#res-table tr.total td { border-top: 1px solid #17384c; padding-top: 12px; color: #bdf0ff; font-size: 16px; }

.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; text-align: left; }
.journal span { font-size: 13px; color: #dceaf4; }
.journal span.missed { color: #3f5d72; }
.journal span i { color: #587e96; font-style: normal; float: right; }

/* ---------------------------------------------------------- in-game HUD */
#hud {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  display: none; padding: 20px; font-variant-numeric: tabular-nums;
}
#hud.on { display: block; }
.hud-tl { position: absolute; top: 20px; left: 22px; }
.hud-tr { position: absolute; top: 20px; right: 22px; text-align: right; }
.lbl { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #4f7086; }
.big { font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #cfeeff; line-height: 1.1; }
.big .unit { font-size: 15px; color: #5e88a3; margin-left: 3px; }
.zone { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6a8ba3; }

.meters { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 9px; }
.meter { display: flex; align-items: center; gap: 10px; }
.meter span { font-size: 9px; letter-spacing: 2.5px; color: #4f7086; width: 56px; }
.meter i { display: block; width: 180px; height: 4px; border-radius: 3px; background: #102837; overflow: hidden; }
.meter b { display: block; height: 100%; width: 100%; transition: width .1s linear; }

#toast {
  position: absolute; left: 0; right: 0; bottom: 96px; text-align: center;
  font-size: 17px; letter-spacing: 2px; color: #8ff0ff; opacity: 0;
  transition: opacity .4s ease; text-shadow: 0 0 18px rgba(143, 240, 255, .6);
}
#toast.show { opacity: 1; }