/* GRL / Neon Rally. Shared by menu, garage, race and results. */
:root {
  --bg0:#080316; --bg1:#17102d; --horizon:#39104e;
  --ink:#f3edff; --dim:#bcaed9; --faint:#9983bf;
  --magenta:#ff329c; --cyan:#39e5ff; --purple:#aa6afa;
  --gold:#ffd45c; --orange:#ff329c; --danger:#ff637a; --accent:#ffd45c;
  --panel:rgba(17,34,35,.94); --line:rgba(211,229,210,.16); --line2:rgba(211,229,210,.3);
  --display:'Inter',system-ui,sans-serif; --racing:'Racing Sans One','Inter',sans-serif;
}
html,body { background:var(--bg0); }
button,a,input,select { touch-action:manipulation; }
button,a[role=button] { -webkit-tap-highlight-color:rgba(237,188,98,.2); }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
button:disabled { cursor:not-allowed; }
.title-bg { background:linear-gradient(180deg,#23103b 0%,#39104e 50%,#080316 100%); }
.title-scanlines,body.title .title-scanlines { display:none; }
.title-bg::before,.title-bg::after { display:none; }
body.title,body.tracks,body.vehsel,body.career { background:#080316; }
body.tracks .title-bg,body.vehsel .title-bg,body.career .title-bg { background:radial-gradient(ellipse at 50% 0%,#2c1749,#080316 75%); box-shadow:none; }
body.tracks #app::before,body.vehsel #app::before,body.career #app::before { background:none; }
.logo,.logo span,.wordmark,.wordmark span { background:none; -webkit-text-fill-color:currentColor; }
.logo { color:var(--ink); }
.tm-bottom { background:linear-gradient(transparent,#080316cc); }
.panel,.gar-card,.you-card,.ev-detail,.rep-card { background:var(--panel); border-color:var(--line2); border-radius:12px; backdrop-filter:none; }
.hud-btn.dice { background:#251739; color:var(--ink); border-color:var(--line2); box-shadow:none; }
.cbar i,.pn-row .on { box-shadow:none!important; }
.cr-opts button,.career-wrap button { min-height:44px; }
.logo,.wordmark { font-family:var(--racing); font-weight:400; font-style:normal; letter-spacing:-.035em; text-shadow:none; filter:none; }
.logo span { color:var(--gold); }
.wordmark { color:var(--ink); line-height:.9; font-size:clamp(3.5rem,10vw,7rem); -webkit-text-stroke:0; }
.wordmark span { font:800 clamp(.9rem,3vw,1.35rem)/1.7 var(--body); letter-spacing:.22em; color:var(--ink); margin-top:.55rem; }
.tm-head::before { content:'ALPINE RALLY CLUB'; display:block; font:700 .65rem/1.5 var(--body); letter-spacing:.26em; color:var(--gold); margin-bottom:.8rem; }
.title-menu { padding-top:max(1.4rem,var(--safe-top)); }
.tm-head { filter:none; }
.tm-bottom { display:flex; flex-direction:column; width:min(580px,calc(100% - 2rem)); gap:.7rem; padding:0 0 max(.8rem,var(--safe-bottom)); }
.tm-duo { order:-1; grid-template-columns:1.7fr 1fr; gap:.65rem; }
.tm-item,.tm-tile { border:1px solid var(--line2); border-radius:12px; background:rgba(22,13,43,.94); box-shadow:0 5px 16px #07130e2b; backdrop-filter:none; }
.tm-item { padding:.8rem 1rem; min-height:64px; }
.tm-item.primary { border-color:var(--line2); background:rgba(22,13,43,.94); }
.tm-ic { width:32px; font-size:1.2rem; filter:grayscale(1); opacity:.75; }
.tm-tx b { font-size:1rem; color:var(--ink); font-family:var(--body); letter-spacing:0; }
.tm-tx em { font-size:.74rem; line-height:1.45; color:var(--dim); }
.tm-go { color:var(--gold); }
.tm-tile.attack { background:#ffd45c; color:#100920; border-color:#ffe99e; box-shadow:0 5px 0 #664437; }
.tm-tile.attack .tt-top,.tm-tile.attack .tt-num,.tm-tile.attack .tt-call,.tm-tile.attack .tt-done { color:#100920; text-shadow:none; }
.tm-tile.attack .tt-lb { background:#251739; color:#f3edff; letter-spacing:.14em; font-size:.55rem; }
.tm-tile.daily { background:#251739; border-color:#76558f; }
.tt-top { font-family:var(--body); font-weight:800; letter-spacing:.02em; font-size:.72rem; white-space:normal; line-height:1.35; }
.tm-duo > .tm-tile.attack { padding-top:1.4rem; box-shadow:0 3px 0 #664437; border-color:#ffe99e; }
.tm-tile:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.tm-tile::before { box-shadow:none!important; }
.tm-tile.daily .tt-num,.tm-tile.attack .tt-num { text-shadow:none; }
.st-card { background:#100920; }
.tt-num { font-family:var(--racing); text-shadow:none; }
.tt-call,.tt-done { font-size:.68rem; line-height:1.35; }
.tracks-wrap,.career-wrap,.cr-wrap { max-width:1180px; }
.tracks-head,.career-head { border-bottom:1px solid var(--line2); padding-bottom:1rem; margin-bottom:1rem; }
.tracks-head .logo,.career-head .logo { font-size:clamp(1.25rem,4.5vw,2.2rem); }
.hud-btn,.opt,.pk,.sw,.wx-sel { min-height:44px; border-radius:8px; background:#251739; color:var(--ink); border-color:var(--line2); box-shadow:none; }
.opt.on,.pk.on,.sw.on { background:#ffd45c; color:#100920; border-color:#ffd45c; box-shadow:none; }
.ov-btn { min-height:48px; border-radius:10px; font:800 .85rem/1.3 var(--body); letter-spacing:.04em; background:#ffd45c; color:#100920; border:1px solid #ffdca0; box-shadow:0 3px 0 #74523e; text-shadow:none; }
.ov-btn.big { padding:1rem 1.3rem; font-size:1rem; }
.ov-btn.mag { background:#e92b96; color:#160920; border-color:#ff75c2; }
.ov-btn.ghost { background:#251739; color:var(--ink); border:1px solid var(--line2); box-shadow:none; }
.ov-btn:hover,.tm-item:hover,.trk:hover,.veh:hover { filter:brightness(1.09); transform:none; }
.ov-btn:active { transform:translateY(2px); box-shadow:none; }
.tracks .steps { color:var(--dim); font-size:.78rem; }
.biome-card,.trk,.veh,.veh-kit,.cr-form,.ev-tile,.dr-card,.dr-result { border-color:var(--line2); border-radius:12px; box-shadow:none; background-color:#17102d; }
.biome-card:hover,.trk:hover,.veh.on { border-color:var(--gold); }
.veh.on { background:#302148; box-shadow:inset 3px 0 var(--gold); }
.veh-name,.kit-head,.ev-nm { font-family:var(--body); font-weight:800; letter-spacing:.015em; }
.veh-desc,.fs-note { color:var(--dim); font-size:.78rem; line-height:1.5; }
.qr-stage,.cr-stage { background:radial-gradient(ellipse at 50% 60%,#593476,#21132f 65%); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
#qr-go { position:sticky; bottom:calc(.7rem + var(--safe-bottom)); z-index:6; margin:.7rem 0; }
input[type=range] { accent-color:var(--gold); min-height:40px; }
input[type=text],input[type=number],select { font:inherit; font-size:16px; color:var(--ink); background:#120a22; border:1px solid var(--line2); border-radius:8px; padding:.65rem; }
.overlay,.start { background:rgba(9,4,24,.58); backdrop-filter:none; }
.ov-card,.start-card,.load-card { background:#100920; color:var(--ink); border:1px solid #8eaa9166; border-radius:16px; box-shadow:0 18px 60px #06151266; padding:1.5rem; }
.ov-card { max-height:calc(100dvh - 2rem - var(--safe-top) - var(--safe-bottom)); overflow:auto; overscroll-behavior:contain; }
.start-card { width:min(420px,calc(100% - 2rem)); }
.start-card .logo { font-size:3rem; }
.trackname b { font-family:var(--racing); font-size:1.75rem; font-weight:400; color:var(--ink); }
.trackname span { color:var(--dim); font-size:.8rem; line-height:1.5; }
.trackname em { color:var(--gold); font-size:.7rem; border:1px solid var(--line2); padding:.3rem .65rem; border-radius:20px; }
.loading { background:radial-gradient(ellipse at 50% 25%,#301c49,#080316 75%); }
.load-card { width:min(380px,calc(100% - 2.5rem)); box-shadow:none; }
.load-kick,.load-step { color:var(--dim); text-transform:none; letter-spacing:.03em; }
.load-track { color:var(--ink); }
.load-bar { height:5px; background:#302148; border:0; box-shadow:none; }
.load-bar i { background:var(--gold); box-shadow:none; }
.hud-tl,.hud-tr { background:rgba(22,13,43,.9); border:1px solid #e1ecd02b; padding:.55rem .7rem; border-radius:10px; }
.hud-tl { top:calc(.65rem + var(--safe-top)); left:calc(.65rem + var(--safe-left)); }
.hud-tr { top:calc(.65rem + var(--safe-top)); right:calc(.65rem + var(--safe-right)); }
.place-box { font-family:var(--racing); font-weight:400; font-size:clamp(2rem,7.5vw,2.8rem); text-shadow:none; -webkit-text-stroke:0; }
.place-lbl { color:var(--dim); font-size:.58rem; letter-spacing:.12em; margin-top:.2rem; text-shadow:none; }
.stat { font:400 1.65rem/1 var(--racing); text-shadow:none; }
.stat small { font-size:.55rem; color:var(--dim); margin-top:.2rem; }
.rally-pause { background:#21132feb!important; border-radius:9px!important; letter-spacing:.08em!important; min-height:44px!important; }
.hud-bar,.rally-boost-meter { width:22px!important; top:max(15%,6.2rem)!important; bottom:max(51%,14rem)!important; }
.prog,#bg-track { width:6px!important; box-shadow:none!important; border:1px solid #ecf0db55!important; }
.prog-fill { background:#ffd45c; box-shadow:none; }
.dmg-panel { width:136px!important; border-radius:10px!important; background:#160d2beb!important; padding:.55rem .65rem!important; }
.dmg-panel>div:first-child { font-size:.65rem!important; color:var(--dim)!important; letter-spacing:.08em!important; }
.tut-item { background:#271238c9; border:1px solid #e7dcb566; border-radius:12px; box-shadow:none; backdrop-filter:none; padding:.65rem .6rem; }
.tut-lbl { font:800 .72rem/1.35 var(--body); letter-spacing:.06em; }
.tut-how { font:500 .58rem/1.5 var(--body); color:#f3edff; }
.tut-chev { color:#ffd45c; text-shadow:none; font-size:1.5rem; }
.rally-touch { background:#251739ed!important; border:1px solid #d2e1c655!important; color:#f3edff!important; border-radius:12px!important; box-shadow:0 3px 0 #090316aa!important; font-family:var(--body)!important; letter-spacing:.08em!important; }
.rally-touch.boost { background:#ffd45c!important; color:#17102d!important; border-color:#ffe99e!important; }
.rally-touch:active { background:#4d2b65!important; }
.rally-touch.boost:active { background:#ffdf85!important; }
.dr-bottom { background:linear-gradient(transparent,#080316 40%); }
.dr-verdict,.ov-h { font-family:var(--racing); font-weight:400; letter-spacing:0; text-shadow:none; }
.dr-stage .dr-card { background:#17102d; }
.rally-pause-panel .pz-sec { color:var(--dim); }
.rally-pause-panel .pz-note { line-height:1.5; }
@media(max-width:460px) {
  .tm-head { padding-top:.25rem; }
  .tm-bottom { gap:.5rem; }
  .tm-item { min-height:58px; padding:.65rem .8rem; }
  .tm-tx em { font-size:.68rem; }
  .tm-tile { min-height:104px; padding:.8rem; }
  .tt-num { font-size:1.65rem; }
  .tracks-head { gap:.65rem; flex-wrap:wrap; }
  .tracks-head .logo { flex:1; min-width:130px; text-align:right; }
  .tracks-head .dice { margin-left:auto; }
  .ov-card { padding:1.2rem; }
}
@media(max-height:540px) and (orientation:landscape) {
  .title-menu { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:1.5rem; padding:1rem 2rem; }
  .tm-head { padding:0; }
  .tm-bottom { position:static; transform:none; width:100%; max-height:calc(100dvh - 2rem); overflow:auto; padding:.3rem; }
  .wordmark { font-size:3rem; }
  .tm-item { min-height:48px; padding:.45rem .65rem; }
  .tm-tile { min-height:86px; padding:.55rem; }
  .tm-tx em { display:none; }
  .start-card { padding:1rem; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; align-items:center; width:min(560px,90vw); }
  .start-card .logo { grid-row:span 2; }
  .start-card #go { grid-column:2; }
  .hud-bar,.rally-boost-meter { bottom:7rem!important; top:5.4rem!important; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
