:root{
  --black:#0a0a0a;
  --dark:#222;
  --mid:#555;
  --light-gray:#aaa;
  --lighter:#ddd;
  --white:#f5f5f5;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 0%, #3a3a3a 0%, #111 70%);
  font-family:'Courier New', Courier, monospace;
  color:var(--white);
  filter:grayscale(1);
}

.page{
  display:none;
  width:100%;
  align-items:center;
  justify-content:center;
}
.page.active{display:flex;}

.frame{
  background:var(--dark);
  border:3px solid var(--white);
  border-radius:8px;
  padding:32px 40px;
  max-width:520px;
  width:90vw;
  text-align:center;
  box-shadow:0 0 0 6px var(--black), 0 0 30px rgba(255,255,255,0.15);
}

h1{
  font-size:2.1rem;
  letter-spacing:3px;
  margin:0 0 8px;
  text-shadow:2px 2px 0 var(--black);
  line-height:1.25;
}
h2{margin-top:0;letter-spacing:2px;}

.subtitle{color:var(--light-gray);line-height:1.5;margin-bottom:24px;}

.menu-buttons{display:flex;flex-direction:column;gap:12px;margin:20px 0;}

button{
  font-family:inherit;
  font-size:1rem;
  letter-spacing:1px;
  padding:12px 20px;
  background:var(--white);
  color:var(--black);
  border:2px solid var(--white);
  border-radius:4px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, color .15s ease;
}
button:hover{background:var(--black);color:var(--white);}
button:active{transform:scale(0.96);}

.btn-back{margin-top:20px;}

.hub-link{
  display:inline-block;
  margin-top:18px;
  color:var(--light-gray);
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:1px;
  border-bottom:1px dotted var(--light-gray);
}
.hub-link:hover{color:var(--white);}

.mini-car{
  width:64px;height:26px;
  margin:26px auto 0;
  position:relative;
  animation:drive 1.4s ease-in-out infinite;
}
.mini-car-body{
  position:absolute;
  left:0; bottom:8px;
  width:64px; height:16px;
  background:var(--white);
  border-radius:6px 10px 2px 2px;
}
.mini-wheel{
  position:absolute;
  bottom:0;
  width:14px;height:14px;
  background:var(--black);
  border:2px solid var(--white);
  border-radius:50%;
  animation:spin 0.5s linear infinite;
}
.mini-wheel-l{left:8px;}
.mini-wheel-r{right:8px;}
@keyframes drive{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-4px) rotate(-2deg);}
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.howto-list{
  text-align:left;
  line-height:1.9;
  color:var(--lighter);
  padding-left:20px;
}

.scores-list{
  text-align:left;
  color:var(--lighter);
  max-height:240px;
  overflow-y:auto;
  padding-left:24px;
}
.scores-list li{margin-bottom:4px;}

/* ===== Game page ===== */
.game-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:6px 16px;
  width:800px;
  max-width:96vw;
  font-size:1rem;
  letter-spacing:1px;
  color:var(--white);
}

.fuel-wrap{display:flex;align-items:center;gap:8px;}
.fuel-bar{
  display:inline-block;
  width:110px;height:14px;
  border:2px solid var(--white);
  border-radius:3px;
  overflow:hidden;
  vertical-align:middle;
}
.fuel-fill{
  display:block;
  height:100%;
  width:100%;
  background:var(--white);
  transition:width .15s linear, background .2s linear;
}

canvas{
  background:linear-gradient(to bottom, #2b2b2b 0%, #444 60%, #555 100%);
  border:3px solid var(--white);
  border-radius:6px;
  max-width:96vw;
  width:800px;
  height:auto;
  box-shadow:0 0 0 6px var(--black);
}

.game-hint{color:var(--mid);font-size:0.85rem;}

.touch-controls{
  display:none;
  width:800px;
  max-width:96vw;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  user-select:none;
}
.tc-pedal{
  width:96px;height:64px;
  font-size:0.85rem;
  font-weight:bold;
  letter-spacing:1px;
  border-radius:10px;
  touch-action:manipulation;
}
.tc-gas{background:var(--white);}
.tc-boost{
  background:var(--black);
  color:var(--white);
  border-style:dashed;
}

@media (pointer: coarse){
  .touch-controls{display:flex;}
  .game-hint{display:none;}
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.overlay.hidden{display:none;}

.hidden{display:none !important;}

.final-score{font-size:1.4rem;letter-spacing:1px;}
.new-best{color:var(--white);font-weight:bold;text-decoration:underline;}