/* DARK HIGHWAY — DAJAI PLAY · obsidian / blood / gold neon */
:root{
  --obsidian:#0a0908;
  --blood:#FF2D55;
  --gold:#ffd400;
  --violet:#8b30ff;
  --ink:#e8e4de;
  --dim:#8f87a0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--obsidian)}
body{
  font-family:"Avenir Next Condensed","Arial Narrow","Arial Black",Impact,sans-serif;
  color:var(--ink);
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--obsidian)}
#ui{position:fixed;inset:0;pointer-events:none}
.hidden{display:none !important}

/* ---------- screens ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;text-align:center;pointer-events:auto;
  background:radial-gradient(ellipse at 50% 120%, rgba(255,45,85,.10), transparent 60%),
             rgba(10,9,8,.62);
  backdrop-filter:blur(2px);
}
.scr-head{
  font-size:clamp(26px,5vw,44px);letter-spacing:.22em;font-weight:800;
  color:var(--ink);text-shadow:0 0 18px rgba(255,45,85,.7);
}
.scr-head.red{color:var(--blood);text-shadow:0 0 24px rgba(255,45,85,.9)}
.scr-head.gold{color:var(--gold);text-shadow:0 0 24px rgba(255,212,0,.85)}

.logo{line-height:.95}
.logo-dark{
  font-size:clamp(54px,13vw,120px);font-weight:900;letter-spacing:.14em;color:var(--blood);
  text-shadow:0 0 12px rgba(255,45,85,.95),0 0 48px rgba(255,45,85,.55),0 6px 0 #3a0d18;
}
.logo-highway{
  font-size:clamp(30px,7.4vw,66px);font-weight:900;letter-spacing:.42em;color:var(--obsidian);
  -webkit-text-stroke:2px var(--gold);
  text-shadow:0 0 22px rgba(255,212,0,.6);
  margin-left:.42em; /* balance tracking */
}
.logo-sub{margin-top:12px;font-size:clamp(10px,2vw,14px);letter-spacing:.34em;color:var(--dim)}

.best-line{font-size:14px;letter-spacing:.18em;color:var(--gold);text-shadow:0 0 10px rgba(255,212,0,.5);min-height:18px}

.menu{display:flex;flex-direction:column;gap:12px;align-items:center}
.btn{
  pointer-events:auto;cursor:pointer;min-width:240px;padding:13px 26px;
  font:inherit;font-size:17px;font-weight:800;letter-spacing:.24em;color:var(--ink);
  background:rgba(20,18,24,.9);border:1px solid #3a3644;border-radius:4px;
  transition:transform .08s ease,border-color .12s,box-shadow .12s;
}
.btn:hover,.btn:focus{border-color:var(--blood);box-shadow:0 0 16px rgba(255,45,85,.45);outline:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{border-color:var(--blood);color:#fff;background:linear-gradient(180deg,#4a1020,#26080f);box-shadow:0 0 18px rgba(255,45,85,.35)}
.btn-primary:hover{box-shadow:0 0 26px rgba(255,45,85,.7)}

.settings{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center;
  font-size:12px;letter-spacing:.18em;color:var(--dim);
}
.settings label{display:flex;align-items:center;gap:8px}
.settings input[type=range]{width:110px;accent-color:var(--blood)}
.settings input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px}

.blink{font-size:15px;letter-spacing:.3em;color:var(--gold);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{50%{opacity:.15}}
.footer{position:absolute;bottom:12px;font-size:10px;letter-spacing:.28em;color:#514c5c}
.hint{font-size:12px;letter-spacing:.24em;color:var(--dim)}

/* ---------- car select ---------- */
#cars{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:900px}
.car-card{
  pointer-events:auto;cursor:pointer;width:230px;padding:16px 14px;position:relative;
  background:rgba(16,14,20,.92);border:1px solid #322e3c;border-radius:6px;text-align:left;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.car-card.sel{border-color:var(--gold);box-shadow:0 0 22px rgba(255,212,0,.4);transform:translateY(-4px)}
.car-card.locked{opacity:.55;filter:saturate(.4)}
.car-name{font-size:19px;font-weight:900;letter-spacing:.12em}
.car-tag{font-size:11px;letter-spacing:.3em;color:var(--gold);margin:2px 0 10px}
.car-blurb{font-size:11px;color:var(--dim);letter-spacing:.06em;margin-top:10px;min-height:28px}
.car-stat{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;color:var(--dim);margin-top:5px}
.car-stat .bar{flex:1;height:6px;background:#241f2d;border-radius:3px;overflow:hidden}
.car-stat .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blood),var(--gold))}
.car-lock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.2em;color:var(--blood);background:rgba(10,9,8,.55);border-radius:6px;
  text-shadow:0 0 10px rgba(255,45,85,.8);font-weight:800;
}

/* ---------- howto ---------- */
.howto-grid{display:grid;grid-template-columns:1fr;gap:9px;max-width:640px;text-align:left;font-size:14px;letter-spacing:.06em;color:var(--ink)}
.howto-grid b{color:var(--gold);letter-spacing:.18em;margin-right:6px}

/* ---------- end screens ---------- */
.grade{
  font-size:clamp(64px,14vw,130px);font-weight:900;line-height:1;color:var(--gold);
  text-shadow:0 0 30px rgba(255,212,0,.8),0 0 90px rgba(255,45,85,.5);
}
.stats{font-size:15px;letter-spacing:.14em;line-height:1.9;color:var(--ink)}
.stats .k{color:var(--dim)}
.stats .v{color:var(--gold)}
.unlock{
  font-size:16px;letter-spacing:.22em;color:#fff;padding:10px 22px;border:1px solid var(--gold);
  border-radius:4px;background:rgba(60,45,0,.4);text-shadow:0 0 12px rgba(255,212,0,.9);
  animation:blink 1.4s steps(2,start) infinite;
}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}
.hud-label{font-size:11px;letter-spacing:.3em;color:var(--dim)}
#hud-top{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px}
#hud-left{text-align:left}
#hud-stage{font-size:clamp(15px,2.6vw,22px);font-weight:900;letter-spacing:.2em;color:var(--blood);text-shadow:0 0 12px rgba(255,45,85,.8)}
#hud-timewrap{text-align:center}
#hud-time{font-size:clamp(30px,6vw,48px);font-weight:900;color:var(--gold);text-shadow:0 0 16px rgba(255,212,0,.7);line-height:1}
#hud-time.low{color:var(--blood);text-shadow:0 0 18px rgba(255,45,85,1);animation:blink .5s steps(2,start) infinite}
#hud-right{text-align:right}
#hud-score{font-size:clamp(18px,3.4vw,28px);font-weight:900;color:var(--ink);text-shadow:0 0 10px rgba(255,212,0,.4)}
#hud-bottom{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px}
#hud-speedwrap{font-size:clamp(26px,5vw,42px);font-weight:900;color:var(--ink);text-shadow:0 0 14px rgba(255,45,85,.55)}
#hud-turbowrap{text-align:right;width:min(30vw,180px)}
#hud-turbo{height:10px;border:1px solid #3a3644;border-radius:5px;overflow:hidden;background:rgba(10,9,8,.6);margin-top:4px}
#hud-turbo-fill{height:100%;width:50%;background:linear-gradient(90deg,var(--blood),var(--gold));box-shadow:0 0 10px rgba(255,212,0,.8);transition:width .08s linear}
#hud-combo{
  position:absolute;right:16px;top:34%;font-size:clamp(16px,3vw,26px);font-weight:900;letter-spacing:.14em;
  color:var(--gold);text-shadow:0 0 16px rgba(255,212,0,.9);text-align:right;
}

/* ---------- countdown / splash ---------- */
#count{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:clamp(90px,22vw,200px);font-weight:900;color:var(--gold);
  text-shadow:0 0 40px rgba(255,212,0,.9),0 0 120px rgba(255,45,85,.6);
}
#splash{
  position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;
  animation:splashin .45s cubic-bezier(.2,1.6,.4,1);
}
#splash-title{
  font-size:clamp(34px,8vw,72px);font-weight:900;letter-spacing:.22em;color:var(--gold);
  text-shadow:0 0 26px rgba(255,212,0,.9),0 4px 0 #4a3b00;
}
#splash-sub{font-size:clamp(13px,2.6vw,20px);letter-spacing:.3em;color:var(--ink);margin-top:8px;text-shadow:0 0 12px rgba(255,45,85,.7)}
@keyframes splashin{from{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- touch ---------- */
#touch{position:absolute;inset:0;pointer-events:none}
.t-btn{
  position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  min-width:64px;min-height:64px;border-radius:12px;border:1px solid #3a3644;
  background:rgba(16,14,20,.5);color:var(--ink);font-size:15px;font-weight:800;letter-spacing:.14em;
}
.t-btn.on{border-color:var(--gold);background:rgba(80,60,0,.45)}
.t-steer{bottom:calc(18px + env(safe-area-inset-bottom));width:76px;height:84px;font-size:30px}
#t-left{left:calc(14px + env(safe-area-inset-left))}
#t-right{left:calc(104px + env(safe-area-inset-left))}
.t-act{right:calc(14px + env(safe-area-inset-right));width:96px;height:64px}
#t-brake{bottom:calc(18px + env(safe-area-inset-bottom));border-color:#5a2030}
#t-turbo{bottom:calc(96px + env(safe-area-inset-bottom));border-color:#5a4a10;color:var(--gold)}

@media (max-width:700px){
  .btn{min-width:200px;font-size:15px}
  .car-card{width:170px;padding:12px 10px}
  .howto-grid{font-size:12px}
  #hud-bottom{bottom:110px} /* keep clear of touch controls */
}
@media (orientation:portrait) and (pointer:coarse){
  .footer::before{content:"TIP: ROTATE TO LANDSCAPE · "}
}