:root{
  --bg:#071017;
  --road:#111214;
  --line:#d9d9d9;
  --accent:#ff5f6d;
  --accent2:#ffd66b;
  --muted:rgba(230,230,240,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:linear-gradient(180deg,var(--bg),#05050a);color:var(--muted);display:flex;align-items:center;justify-content:center}
.game-root{width:100%;max-width:960px;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.topbar h1{margin:0;font-family:Orbitron, monospace;color:var(--accent2);letter-spacing:0.02em}
.score{font-weight:600}

.play-area{position:relative;background:linear-gradient(180deg,#121418,#0f1216);border-radius:16px;overflow:hidden;padding:24px;display:grid;place-items:center}
.play-area{min-height:520px}
.road-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));}
@keyframes moveRoad{from{background-position:0 0}to{background-position:0 44px}}

/* add subtle roadside strips */
.play-area::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:10%;background:linear-gradient(180deg,#101216,#0b0b10);opacity:0.9}
.play-area::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:10%;background:linear-gradient(180deg,#101216,#0b0b10);opacity:0.9}
/* Do not block pointer events from child controls */
.play-area::before, .play-area::after{pointer-events:none}

canvas{width:min(720px,90vw);height:auto;border-radius:10px;display:block;background:linear-gradient(180deg,#1b2024,#121417);box-shadow:0 20px 70px rgba(2,6,23,0.75)}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:all .28s cubic-bezier(.2,.9,.2,1)}
.overlay.visible{opacity:1;pointer-events:auto}
.panel{width:320px;background:rgba(255,255,255,0.03);backdrop-filter:blur(6px);border-radius:12px;padding:22px;text-align:center;border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.panel h2{margin:0 0 8px;font-family:Orbitron,monospace;color:var(--accent);}
.muted{color:var(--muted);margin:8px 0}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;background:transparent;color:var(--muted);font-weight:700;transition:all .22s}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#070712;box-shadow:0 10px 30px rgba(128,40,50,0.12)}
.btn:hover{transform:translateY(-4px)}

.touch-controls{position:absolute;left:14px;right:14px;bottom:18px;display:flex;justify-content:space-between;pointer-events:auto;z-index:60}

/* Exit to Home button */
.exit-btn{position:absolute;left:14px;top:14px;z-index:80;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,0.04);font-weight:700;backdrop-filter:blur(6px)}
.exit-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,0.04)}
.ctl{width:68px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--muted);font-size:20px}

.footer{margin-top:12px;text-align:center;color:rgba(230,230,240,0.4)}

/* responsive */
@media (max-width:520px){
  .panel{width:88vw}
  .ctl{width:44%;height:50px}
  .play-area{min-height:420px;padding:16px}
}