* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #101418; overflow: hidden; }
#frame { position: relative; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center; }
#game { background: #2a6e34; max-width: 100%; max-height: 100%;
  aspect-ratio: 16/9; image-rendering: auto; }
#overlay { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  font-family: "Courier New", monospace; color: #fff; }
#overlay > * { pointer-events: auto; }
.panel { background: #23262e; border: 4px solid #7d838f;
  border-bottom-color: #3a3d45; border-right-color: #3a3d45;
  padding: 28px 40px; text-align: center; box-shadow: 0 12px 40px #000a; }
.panel h1 { font-size: 44px; letter-spacing: 6px; color: #ffd23e;
  text-shadow: 3px 3px 0 #7a1f1f; margin-bottom: 6px; }
.panel h2 { font-size: 20px; letter-spacing: 3px; color: #9adcff; margin: 12px 0; }
.panel .sub { color: #aab; font-size: 13px; margin-bottom: 18px; }
.menu button, .menu input { display: block; width: 300px; margin: 8px auto;
  padding: 12px; font: bold 16px "Courier New", monospace; letter-spacing: 2px; }
.menu button { background: #313745; color: #ffd23e; border: 3px solid #7d838f;
  border-bottom-color: #202430; border-right-color: #202430; cursor: pointer; }
.menu button:hover { background: #3d4557; }
.menu input { background: #14161c; color: #9adcff; border: 3px solid #7d838f;
  text-align: center; text-transform: uppercase; }
.menu input.wide { text-transform: none; }
table.results { margin: 10px auto; border-collapse: collapse; font-size: 15px; }
table.results td, table.results th { padding: 4px 14px; border-bottom: 1px solid #444; }
.gold { color: #ffd23e; }
#banner { position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: #7a1f1f; color: #fff; padding: 10px 24px; font-weight: bold;
  letter-spacing: 2px; border: 3px solid #d88; }
.menu.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu.grid button { width: 240px; margin: 0; }
.menu button:disabled { opacity: 0.45; cursor: default; }
#touch { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 5;
  font-family: "Courier New", monospace; user-select: none; -webkit-user-select: none; touch-action: none; }
body.touch.in-race #touch { display: block; }
.tbtn { position: absolute; pointer-events: auto; display: flex; align-items: center;
  justify-content: center; background: rgba(35,38,46,0.5); border: 2px solid rgba(125,131,143,0.6);
  border-radius: 50%; color: #ffd23e; font-weight: bold; touch-action: none; }
.tbtn.on { background: rgba(255,210,62,0.35); }
.t-left  { left: 18px;  bottom: 26px;  width: 84px; height: 84px; font-size: 30px; }
.t-right { left: 116px; bottom: 26px;  width: 84px; height: 84px; font-size: 30px; }
.t-gas   { right: 18px; bottom: 100px; width: 92px; height: 92px; font-size: 16px; }
.t-brake { right: 124px; bottom: 26px; width: 76px; height: 76px; font-size: 12px; }
.t-fire  { left: 18px;  bottom: 136px; width: 48px; height: 48px; font-size: 17px; }
.t-rear  { left: 74px;  bottom: 136px; width: 48px; height: 48px; font-size: 16px; }
.t-mine  { left: 130px; bottom: 136px; width: 48px; height: 48px; font-size: 16px; }
.t-turbo { left: 186px; bottom: 136px; width: 48px; height: 48px; font-size: 16px; }
.tcnt { position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font: bold 13px "Courier New", monospace; color: #9adcff; text-shadow: 1px 1px 0 #000; }
#rotate-hint { position: fixed; inset: 0; display: none; background: #101418; color: #ffd23e;
  z-index: 9; text-align: center; align-items: center; justify-content: center;
  font: bold 28px "Courier New", monospace; letter-spacing: 3px; }
@media (orientation: portrait) { body.touch #rotate-hint { display: flex; } }