/* Doorstep Dash — Nova iOS visual theme. Visual only (colors, type, shapes, motion).
   No layout/safe-area/settings logic: Ace owns those. Link AFTER existing styles:
   <link rel="stylesheet" href="assets/ios/theme/nova-theme.css"> */
:root{
  --nv-sky:#2bb8f5; --nv-sky2:#0a8fe0; --nv-sun:#ffd23f; --nv-orange:#ff7a1a; --nv-orange-d:#d9520a;
  --nv-mint:#2ee59d; --nv-red:#ff4f5e; --nv-ink:#13304a; --nv-cream:#fff8ec;
  --nv-radius:14px; --nv-pop:cubic-bezier(.25,1.15,.5,1);
  --nv-font:-apple-system,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --panel:rgba(19,48,74,.82); --accent:var(--nv-orange); --good:var(--nv-mint); --warn:var(--nv-sun); --bad:var(--nv-red);
}
html,body{font-family:var(--nv-font)}
/* HUD chips: solid dark plates with a thin outline (9+ grounded tone) */
.chip{border-radius:12px;border:2px solid rgba(255,255,255,.35);background:var(--panel);
  box-shadow:0 2px 6px rgba(0,0,0,.35);font-weight:800;letter-spacing:.2px}
#timer{color:#fff;background:var(--nv-ink)}
#money .coins,#coins{color:var(--nv-sun)}
#gps{background:var(--nv-orange);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
#gps.wrong{background:#c8363f}
/* Drive buttons: flat navy plates with orange/amber/red accents, short press */
.ctl{border-width:3px!important;box-shadow:0 3px 8px rgba(0,0,0,.4)!important;text-shadow:none!important;letter-spacing:.5px;
  transition:transform .14s var(--nv-pop)!important;font-weight:900}
.ctl:active,.ctl.held{transform:scale(.96)!important;box-shadow:0 1px 3px rgba(0,0,0,.4)!important;filter:brightness(1.15)}
#brake{background:rgba(19,48,74,.92)!important;border-color:#e2464f!important;color:#fff!important}
#boostBtn{background:var(--nv-orange)!important;border-color:rgba(255,255,255,.85)!important;color:#fff!important}
#honkBtn{background:rgba(19,48,74,.92)!important;border-color:#ffb547!important;color:#ffb547!important}
/* Overlay cards / menus */
#overlay{background:radial-gradient(120% 80% at 50% 0%,#24496d,#13304a 70%,#0b1c2c)}
.card{border-radius:18px!important;background:var(--nv-cream)!important;color:var(--nv-ink)!important;
  border:2px solid #fff;box-shadow:0 6px 0 rgba(0,40,80,.25),0 24px 50px rgba(0,30,60,.35)!important}
.card h1,.card h2{font-weight:850;letter-spacing:-.3px;color:var(--nv-ink)}
.card button,.nv-btn{min-height:56px;border-radius:14px!important;border:0;font:800 18px/1.1 var(--nv-font);
  color:#fff;background:var(--nv-orange)!important;
  box-shadow:0 3px 0 var(--nv-orange-d),0 6px 12px rgba(0,0,0,.18);text-shadow:none;
  transition:transform .14s var(--nv-pop),box-shadow .14s}
.card button:active,.nv-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--nv-orange-d)}
.card button.alt,.nv-btn.alt{background:var(--nv-ink)!important;box-shadow:0 3px 0 #0b1c2c;text-shadow:none}
#card.menu-card{--menu-cream:var(--nv-cream);--menu-navy:var(--nv-ink);--menu-orange:var(--nv-orange)}
#card.menu-card .menu-primary{border-radius:14px;box-shadow:0 6px 0 var(--nv-orange-d);min-height:60px;font-size:20px}
#card.menu-card .menu-secondary{border-radius:14px}
/* Controls & comfort hand-position options: index.html paints them navy (#2d3346) but the card text is ink,
   which left dark text on navy. Light plate + ink text, orange ring on the chosen option. */
.card .opts label{background:#fff!important;color:var(--nv-ink)!important;border:2px solid #e6dccb;box-shadow:0 3px 0 #e6dccb}
.card .opts label .small{color:#3d5368;opacity:1}
.card .opts label:has(input:checked){border-color:var(--nv-orange);box-shadow:0 3px 0 var(--nv-orange-d)}
.card .opts input{accent-color:var(--nv-orange)}
@keyframes nv-pop-in{0%{transform:translateY(10px) scale(.97);opacity:0}100%{transform:scale(1);opacity:1}}
#overlay.show .card{animation:nv-pop-in .32s var(--nv-pop)}
/* Settings panel styling (markup/logic by Ace). Expected: .nv-settings > .nv-row > label + .nv-toggle(input[type=checkbox]) */
.nv-settings{display:grid;gap:12px;text-align:left}
.nv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 16px;
  background:#fff;border-radius:18px;box-shadow:0 4px 0 #e6dccb;font:800 18px var(--nv-font);color:var(--nv-ink)}
.nv-toggle{appearance:none;-webkit-appearance:none;position:relative;width:64px;height:38px;border-radius:999px;
  background:#c9d3dd;transition:background .2s;cursor:pointer;flex:none}
.nv-toggle::after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .22s var(--nv-pop)}
.nv-toggle:checked{background:var(--nv-mint)} .nv-toggle:checked::after{transform:translateX(26px)}
.nv-toggle:focus-visible{outline:4px solid var(--nv-sky2);outline-offset:3px}
/* In-game loading splash (markup: assets/ios/theme/loading-splash.html) */
#nv-splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:#13304a url(../splash/splash-1290x2796.jpg) center/cover no-repeat;transition:opacity .4s}
#nv-splash.hide{opacity:0;pointer-events:none}
#nv-splash .nv-logo{position:absolute;top:18%;left:0;right:0;text-align:center;font:950 clamp(40px,12vw,64px)/.95 var(--nv-font);color:#fff;
  -webkit-text-stroke:2px var(--nv-ink);paint-order:stroke;text-shadow:0 4px 12px rgba(0,0,0,.45)}
#nv-splash .nv-bar{width:min(70vw,300px);height:22px;margin-bottom:16vh;border-radius:999px;background:rgba(255,255,255,.7);border:3px solid #fff;overflow:hidden}
#nv-splash .nv-bar i{display:block;height:100%;width:var(--p,30%);background:linear-gradient(90deg,var(--nv-sun),var(--nv-orange));border-radius:999px;transition:width .3s}

@media (prefers-reduced-motion:reduce){#nv-splash .nv-logo,#overlay.show .card{animation:none}}
#brake.held{background:#e2464f!important} #honkBtn.held{background:#ffb547!important;color:var(--nv-ink)!important} #boostBtn.held{background:var(--nv-orange-d)!important}
#gps .txt{white-space:nowrap}