:root {
  --ww-cyan: #00cccc;
  --ww-bright: #00ffff;
  --ww-bone: #e7dcc2;
  --ww-ink: #030608;
  --ww-violet: #7a4ba8;
}

[hidden] { display: none !important; }
.game-shell { max-width: 1120px; }
.subtitle { margin: .25rem 0 1rem; text-align: center; color: #aefefe; letter-spacing: .07em; }

.race-cabinet {
  width: min(100%, 1000px);
  margin: 1rem auto 0;
  padding: 10px;
  border: 2px solid #008b8b;
  background: linear-gradient(#091316, #020405);
  box-shadow: 0 0 28px rgba(0, 204, 204, .25), inset 0 0 24px #000;
}

.race-hud {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(70px, .68fr));
  gap: 7px;
  margin-bottom: 8px;
}

.race-hud > div,
.race-hud label {
  display: flex;
  min-height: 52px;
  padding: 5px 8px;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #096b70;
  background: #03090b;
  color: #84bfc0;
  text-align: center;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .08em;
}

.race-hud strong { color: var(--ww-bright); font-size: 1.1rem; text-shadow: 0 0 8px #00cccc; }
.race-hud small { font-size: .52rem; }
.race-hud input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #00cccc;
  background: transparent;
  color: #fff;
  text-align: center;
  font: inherit;
  text-transform: none;
}

.race-screen {
  position: relative;
  overflow: hidden;
  border: 3px solid #131b20;
  background: #020408;
  aspect-ratio: 16 / 9;
  touch-action: none;
}

#raceCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.race-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(1, 4, 7, .74);
  text-align: center;
}

.race-overlay strong {
  max-width: 96%;
  color: var(--ww-bright);
  font-size: clamp(1.7rem, 5.5vw, 4rem);
  letter-spacing: .14em;
  line-height: 1.05;
  text-shadow: 4px 4px #003b3b, 0 0 18px #00cccc;
}

.race-overlay span { color: var(--ww-bone); }
.race-overlay button {
  border: 1px solid #00cccc;
  background: #061315;
  color: #dbffff;
  padding: .7rem 1rem;
  font: 700 .83rem Cinzel, serif;
  cursor: url('/images/cursors/hover.cur') 11 0, url('/images/cursors/hover.png') 11 0, pointer;
}

.race-overlay button:hover { background: #0b292c; box-shadow: 0 0 12px rgba(0,255,255,.32); }

.flash-message {
  position: absolute;
  top: 21%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  color: #fff;
  font: 700 clamp(1.2rem, 4vw, 2.6rem) monospace;
  text-align: center;
  text-shadow: 3px 3px #000, 0 0 12px #00ffff;
  pointer-events: none;
}

.race-status { min-height: 1.4em; margin: .5rem 0 0; color: #a4c9ca; text-align: center; }

.credits {
  width: min(100%, 1000px);
  margin: 1rem auto 0;
  color: #9fc2c3;
  font-size: .86rem;
}

.credits summary { color: #aefefe; }
.credits a { color: #00cccc; }
.game-divider { margin: 2rem 0 1.25rem; border: 0; border-top: 1px solid rgba(0,204,204,.4); }
.leaderboard h2 { color: #aefefe; text-align: center; }

#lbTable { width: 100%; border-collapse: collapse; border: 1px solid #008b8b; background: rgba(1,8,10,.8); }
#lbTable th, #lbTable td { padding: .6rem; border: 1px solid #008b8b; text-align: left; }
#lbTable th { background: rgba(0,204,204,.14); color: #aefefe; }
#lbTable td:first-child { width: 3rem; text-align: center; }
#lbTable td:nth-child(n+3) { text-align: right; }
.empty-cell { color: #78999a; font-style: italic; text-align: center !important; }

@media (max-width: 900px) and (orientation: landscape) {
  .race-cabinet { padding: 5px; }
  .race-hud { grid-template-columns: minmax(120px, 1.35fr) repeat(5, minmax(54px, .65fr)); gap: 4px; }
  .race-hud > div, .race-hud label { min-height: 40px; padding: 2px 4px; font-size: .56rem; }
  .race-hud strong { font-size: .85rem; }
}