* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #080c18;
  color: #e9f3ff;
  font-family: system-ui,sans-serif;
  min-height: 100vh;
  display: block;
}

main {
  width: min(960px,94vw);
  margin: 28px auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

h1 {
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
}

h1 span {
  color: #67f6cf;
}

p {
  color: #8c9ebc;
  font-size: 14px;
  margin: 6px 0;
}

.stats {
  display: flex;
  gap: 25px;
}

.stat {
  font-size: 11px;
  color: #8c9ebc;
  letter-spacing: 2px;
}

.stat b {
  display: block;
  color: #edf6ff;
  font-size: 25px;
  letter-spacing: 0;
}

.arena {
  position: relative;
  border: 1px solid #24334d;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 100px #0009;
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  background: #0b1223;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: block;
  background: #080c1880;
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.card {
  text-align: center;
  padding: 30px;
}

.card h2 {
  font-size: 44px;
  letter-spacing: -2px;
  margin: 0 0 12px;
}

.card p {
  line-height: 1.7;
  margin-bottom: 24px;
}

button {
  border: 0;
  border-radius: 9px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  color: #08241e;
  background: #67f6cf;
  cursor: pointer;
  box-shadow: 0 0 35px #67f6cf25;
}

button:hover {
  background: #a2ffe7;
}

footer {
  display: flex;
  justify-content: space-between;
  margin: 14px 3px;
  font-size: 12px;
  color: #7f91ad;
}

kbd {
  color: #bdd0ec;
}

.hidden {
  display: none;
}

@media(max-width:550px) {
  h1 {
    font-size: 24px;
  }

  .stats {
    gap: 12px;
  }

  .stat b {
    font-size: 20px;
  }

  .card h2 {
    font-size: 32px;
  }

  footer {
    gap: 15px;
  }

}

.leaderboard {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid #24334d;
  border-radius: 14px;
  background: #0b1223;
}

.leaderboard h2 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 2px;
  color: #67f6cf;
}

.leaderboard table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.leaderboard th, .leaderboard td {
  padding: 9px 4px;
  text-align: left;
  border-bottom: 1px solid #24334d;
}

.leaderboard th {
  font-size: 11px;
  color: #8c9ebc;
  letter-spacing: 2px;
}

.leaderboard th:last-child, .leaderboard td:last-child {
  text-align: right;
}

.leaderboard td:nth-child(2) {
  font-family: monospace;
  letter-spacing: 3px;
  color: #67f6cf;
}

#initials-form label {
  display: block;
  margin-bottom: 12px;
  color: #bdd0ec;
}

#initials {
  display: block;
  width: 160px;
  margin: 0 auto 18px;
  padding: 12px;
  border: 1px solid #67f6cf;
  border-radius: 8px;
  background: #080c18;
  color: #67f6cf;
  text-align: center;
  text-transform: uppercase;
  font: bold 32px monospace;
  letter-spacing: 8px;
}

main {
  padding: 24px 0;
}

@media (max-width: 550px) {
  .card {
    padding: 16px;
  }

  .card p {
    margin-bottom: 12px;
  }

  #initials {
    font-size: 24px;
    padding: 6px;
    margin-bottom: 10px;
  }
}

.initials-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.card .final-score {
  margin: 4px 0 12px;
  color: #67f6cf;
  line-height: 1.1;
}

.final-score strong {
  display: block;
  font-size: clamp(32px, 9vw, 76px);
  font-variant-numeric: tabular-nums;
}

.final-score span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 3px;
}

[hidden] { display: none !important; }

@media (max-width: 550px) {
  .arena.run-complete { min-height: 410px; }
  .run-complete .card h2 { margin-bottom: 6px; }
  .run-complete .card #message { margin-bottom: 12px; }
}

#skip-score {
  color: #67f6cf;
  background: #0b1223;
  border: 1px solid #67f6cf;
  box-shadow: none;
}

#skip-score:hover {
  background: #162a36;
}

@media (max-width: 550px) {
  .initials-actions button {
    padding: 10px 12px;
    min-height: 44px;
    font-size: 13px;
  }
}