:root{
  --bg:#0b1220; --lane:#13213d; --laneMid:#0f1b33; --text:#e9f2ff;
  --good:#5ce65c; --bad:#ff4d4d; --start:#1e7aff; --startHover:#3f94ff;
  --card:#111b33; --cardEdge:#1e2e55; --gold:#ffd64d; --teal:#00f2ea;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}

#hud{position:fixed; inset:10px 10px auto 10px; display:flex; justify-content:space-between; gap:16px; opacity:.0; pointer-events:none; z-index:1}
.hud-right{display:flex; gap:14px; font-weight:800}

main{display:grid; place-items:center; padding:8px}
#game{display:block; border-radius:16px; box-shadow:0 14px 60px #000a; background:#081326}

/* -------- Leaderboard (fixed bottom; two rows 1–5 | 6–10) -------- */
#leaderboard{
  position:fixed; left:0; right:0; bottom:10px;
  display:grid; place-items:center; pointer-events:none; z-index:5;
}
.lb-card{
  width:min(96.5vw, 1200px);
  background:rgba(9,16,34,.82);
  border:1px solid #1e2e55; border-radius:14px;
  box-shadow:0 18px 60px #000c;
  pointer-events:auto; padding:10px 14px;
  backdrop-filter:saturate(140%) blur(8px);
}
.lb-head{margin-bottom:6px; text-align:center}
.lb-head h2{margin:0; font-size:1rem; letter-spacing:.4px; color:var(--gold)}
.lb-rows{display:flex; gap:20px; align-items:flex-start; justify-content:space-between}
.lb-list{margin:0; padding:0 0 2px 1.2rem; flex:1; max-height:20vh; overflow:auto}
.lb-list li{
  display:flex; justify-content:space-between; gap:10px;
  padding:6px 10px; border-radius:8px; list-style-position:inside;
  background:#0b1629; border:1px solid rgba(0,242,234,.12); margin:4px 0;
  font-weight:800; letter-spacing:.3px;
}
.lb-list li span:first-child{color:#fff}
.lb-list li span:last-child{color:var(--teal)}

/* Overlay */
#overlay{position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,#0008,#000c); z-index:20}
.card{background:var(--card); border:1px solid var(--cardEdge); border-radius:16px; box-shadow:0 24px 80px #000c; width:min(92vw,640px); padding:30px 34px 36px; text-align:center}
.game-logo{margin:0 0 12px; letter-spacing:.3px}
.rules{margin:0 0 18px; opacity:.9}
kbd{background:#0a1428; border:1px solid #1a2b50; border-bottom-color:#0f1f40; border-radius:6px; padding:2px 6px; margin:0 2px; color:#b9d6ff}

/* Buttons */
.btn-primary,.btn{pointer-events:auto; cursor:pointer; border:none; border-radius:14px; font-weight:900}
.btn-primary{background:var(--start); color:#fff; padding:16px 48px; font-size:1.6rem; box-shadow:0 10px 28px #0039a8aa; transition:transform .05s ease, filter .15s ease, background .15s ease}
.btn-primary:hover{background:var(--startHover); filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}

/* High score entry (3 inputs) */
.hs-entry{margin:12px auto 16px; text-align:left}
.hs-label{display:block; font-weight:800; margin:8px 0 10px}
.hs-input-row{display:flex; gap:10px; align-items:center; justify-content:center}
.ini{width:64px; height:56px; text-align:center; font-size:1.8rem; font-weight:900; letter-spacing:.02rem; background:#0a1428; color:#fff; border:2px solid #1a2b50; border-radius:10px; text-transform:uppercase}
#btnSaveHS.btn{background:var(--gold); color:#111; padding:12px 18px; font-size:1rem; box-shadow:0 8px 20px #0006}
.hs-hint{display:block; opacity:.7; margin-top:6px}

/* -------- Mobile Controls (robust show on touch + landscape) -------- */
.touch-ctrls{position:fixed; left:0; right:0; bottom:110px; pointer-events:none; z-index:9}
.ctrl{
  position:fixed; bottom:110px; width:78px; height:78px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#0e1f3c,#0a152a);
  border:1px solid #1e2e55; box-shadow:0 10px 28px #000c, inset 0 0 0 2px rgba(0,242,234,.15);
  pointer-events:auto; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .06s ease, filter .12s ease; color:#e9f2ff; font-size:1.8rem; font-weight:900;
}
.ctrl span{transform:translateY(-1px)}
.ctrl:active, .ctrl.pressed{ transform:scale(0.96); filter:brightness(1.1); }
.ctrl-left{ left:16px; }
.ctrl-right{ right:16px; }

/* Default rule for touch+landscape */
@media (pointer:coarse) and (orientation:landscape){
  .ctrl{ display:flex; }
}

/* JS also adds .touch.landscape on <body> as a fallback for browsers that don't report pointer:coarse */
body.touch.landscape .ctrl{ display:flex; }