:root{
  --bg:#0b1220;
  --road:#171e2d;
  --road-edge:#0c1424;
  --lane:#2a3550;
  --accent:#00d084;     /* yeşil */
  --accent-2:#ffd54a;   /* altın */
  --danger:#ff4d4d;     /* düşman */
  --text:#e5ecff;
  --muted:#99a3c2;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;}
#app{position:relative;overflow:hidden;touch-action:none}
canvas#game{display:block;position:absolute;inset:0;margin:auto;width:100%;height:100%;}

.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;}
.panel.hidden{display:none}

.card{
  background:linear-gradient(180deg,#101a30,#0e1629);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:24px 22px;
  width:min(520px,92vw);
  box-shadow:var(--shadow);
  text-align:center;
}
.card h1{margin:0 0 6px;font-size:34px;letter-spacing:.3px}
.card h2{margin:0 0 6px;font-size:26px}
.muted{color:var(--muted)}
.best{margin-top:10px}
.features{list-style:none;padding:0;margin:12px 0 0}
.features li{padding:6px 0;color:var(--muted);}
.actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}

.btn{
  background:#1b2438;
  border:1px solid rgba(255,255,255,.08);
  color:#fff; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600;
  transition:.2s transform ease,.2s background ease,.2s border ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#04b679)}
.btn.ghost{background:#121a2d;border-color:#22304f}
.btn.small{padding:6px 10px;border-radius:10px;font-size:14px}

#hud{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 12px;gap:8px}
#hud.hidden{display:none}
.hud-left,.hud-right{display:flex;gap:8px;align-items:center}
.pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(12,20,36,.7);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  padding:6px 10px;
  font-size:14px;
}
.pill strong{font-size:16px;letter-spacing:.2px}
.lives{display:flex;gap:6px;align-items:center}
.heart{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,#ff6b6b,var(--danger));box-shadow:0 2px 0 rgba(0,0,0,.25) inset}
.heart.empty{opacity:.25;filter:grayscale(.7)}

#pauseBtn,#muteBtn{width:40px;height:40px;border-radius:10px;font-size:16px;display:flex;align-items:center;justify-content:center}

@media (max-width: 480px){
  .pill{font-size:13px}
  .pill strong{font-size:14px}
  #pauseBtn,#muteBtn{width:36px;height:36px}
}