/* ==========================================================
   Motocrossová trať – interaktívna 3D mapa
   Moderné „racing“ UI: glassmorphism, jemný blur, čistá typografia
   ========================================================== */
:root{
  --bg:#0a0d10;
  --glass:rgba(16,20,25,.58);
  --glass-strong:rgba(12,15,19,.78);
  --glass-b:rgba(255,255,255,.12);
  --glass-b2:rgba(255,255,255,.06);
  --accent:#ff6a1a;
  --accent-2:#ffb347;
  --accent-soft:rgba(255,106,26,.16);
  --green:#19c477;
  --red:#e2452b;
  --blue:#35b6e8;
  --txt:#eef2f5;
  --txt-dim:#9fabb5;
  --shadow:0 10px 34px rgba(0,0,0,.42);
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg)}
body{
  font-family:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
}
#app{position:fixed;inset:0}
canvas#scene{display:block;width:100%;height:100%;touch-action:none}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-b);
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:var(--shadow);
}

/* ---------- Loader ---------- */
#loader{
  position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#1a2128 0%,#090c0f 72%);
  transition:opacity .55s ease;
}
#loader.hidden{opacity:0;pointer-events:none}
.loader-box{width:min(430px,82vw);text-align:center}
.loader-mark{
  width:46px;height:46px;margin:0 auto 18px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 40px rgba(255,106,26,.45);
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1) rotate(0deg);opacity:.95}50%{transform:scale(1.12) rotate(8deg);opacity:1}}
.loader-title{
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  font-size:34px;letter-spacing:.34em;font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.loader-sub{margin:10px 0 18px;font-size:12.5px;color:var(--txt-dim);letter-spacing:.07em;min-height:16px}
.loader-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.loader-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}

/* ---------- Topbar ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,0));
}
.brand{display:flex;align-items:center;gap:10px;font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;font-size:18px;font-weight:600;letter-spacing:.22em}
.brand-mark{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 16px rgba(255,106,26,.75)}
.brand-text b{font-weight:800}
.stats{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;font-size:11px;color:var(--txt-dim);letter-spacing:.05em}
.stats span{
  background:var(--glass);border:1px solid var(--glass-b2);border-radius:999px;
  padding:5px 11px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;
}
.stats span b{color:var(--txt);font-weight:600}
body.riding #topbar{opacity:0;transition:opacity .3s}

/* ---------- Controls ---------- */
#controls{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,0));
}
.ctrl-group{
  display:flex;gap:4px;padding:4px;border-radius:calc(var(--r) - 2px);
  background:var(--glass);border:1px solid var(--glass-b2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.ctrl-group.primary{background:transparent;border:0;box-shadow:none;padding:0}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font:600 11.5px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.13em;
  color:var(--txt-dim);background:transparent;border:1px solid transparent;
  padding:10px 13px;border-radius:10px;cursor:pointer;
  transition:background .18s,color .18s,transform .14s,box-shadow .18s,border-color .18s;
  white-space:nowrap;
}
.btn .ico{width:15px;height:15px;fill:currentColor;flex:0 0 auto;opacity:.9}
.btn:hover{color:var(--txt);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.active{
  color:#fff;background:linear-gradient(135deg,var(--accent),#e2521a);
  box-shadow:0 6px 20px rgba(255,106,26,.35);
}
.btn.play{
  color:#fff;background:linear-gradient(135deg,var(--green),#0d9159);
  box-shadow:0 8px 24px rgba(25,196,119,.36);padding:12px 22px;font-size:13px;letter-spacing:.18em;
  border-radius:12px;
}
.btn.play:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(25,196,119,.45)}
.btn.play.active{background:linear-gradient(135deg,var(--accent),#e2521a);box-shadow:0 8px 24px rgba(255,106,26,.4)}
.btn.mini{padding:7px 11px;font-size:10.5px;letter-spacing:.11em;border:1px solid var(--glass-b2)}
.btn.mini.danger{border-color:rgba(226,69,43,.5);color:#ffb0a2}
.btn.mini.danger:hover{background:rgba(226,69,43,.22);color:#fff}

/* ---------- Nastavenia ---------- */
#settings{
  position:absolute;right:16px;bottom:96px;z-index:25;width:268px;display:none;
  background:var(--glass-strong);border:1px solid var(--glass-b);border-radius:var(--r);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow);padding:14px;
}
#settings.on{display:block;animation:slideUp .22s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#settings h3{margin:0 0 12px;font:600 12px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.2em;color:var(--txt-dim);text-transform:uppercase}
.set-row{margin-bottom:12px}
.set-label{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:6px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg .btn.mini{flex:1 1 auto;justify-content:center;background:rgba(255,255,255,.04)}
.set-foot{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;color:var(--txt-dim);letter-spacing:.06em;border-top:1px solid var(--glass-b2);padding-top:9px}
#fps{color:var(--accent-2);font-weight:600}

/* ---------- Legenda ---------- */
#legend{
  position:absolute;left:16px;bottom:100px;z-index:20;width:252px;
  background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r);
  padding:12px 14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);transition:.25s;
}
#legend h3{
  margin:0 0 9px;display:flex;align-items:center;justify-content:space-between;
  font:600 11.5px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.2em;color:var(--txt-dim);text-transform:uppercase;
}
.legend-toggle{
  width:20px;height:20px;border-radius:6px;border:1px solid var(--glass-b2);background:rgba(255,255,255,.05);
  cursor:pointer;position:relative;padding:0;
}
.legend-toggle::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:2px;border-radius:2px;background:var(--txt-dim)}
.legend-toggle.active::after{background:var(--accent)}
#legend ul{list-style:none;margin:0;padding:0;font-size:11.5px;line-height:1.8;transition:.25s}
#legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
#legend li{display:flex;align-items:center;gap:9px}
.hint{margin:10px 0 0;font-size:10.5px;color:var(--txt-dim);line-height:1.5}
#legend.collapsed ul,#legend.collapsed .hint{display:none}
#legend.collapsed{width:auto}
body.riding #legend,body.riding #settings{display:none}

/* ---------- Referenčný prekryv ---------- */
#refOverlay{position:absolute;z-index:10;display:none;pointer-events:none;opacity:.55;mix-blend-mode:screen}
#refOverlay.on{display:block}
#refHint{
  position:absolute;z-index:26;right:16px;bottom:96px;display:none;
  background:var(--glass-strong);border:1px solid var(--glass-b);border-radius:12px;
  padding:10px 13px;font-size:10.5px;letter-spacing:.08em;color:var(--txt-dim);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);
}
#refHint.on{display:flex;align-items:center;gap:10px}
#refAlpha{width:120px;accent-color:var(--accent)}

/* ==========================================================
   HUD jazdeckého režimu
   ========================================================== */
#hud{position:absolute;inset:0;z-index:22;display:none;pointer-events:none}
#hud.on{display:block}

/* --- časomiera --- */
.hud-top{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:stretch;gap:0;padding:4px 6px;
  animation:fadeDown .35s ease;
}
@keyframes fadeDown{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.hud-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 18px;min-width:96px;border-right:1px solid var(--glass-b2);
}
.hud-cell.wide{min-width:130px}
.hud-cell span{font:600 9px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim)}
.hud-cell b{font:700 26px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;color:#fff}
.hud-cell.wide b{font-size:32px;color:var(--accent-2)}
.hud-prog{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9px 16px;min-width:140px}
.hud-prog-head{display:flex;justify-content:space-between;gap:10px;white-space:nowrap;font:600 9px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}
.hud-prog-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.10);overflow:hidden}
#hProgFill{height:100%;width:0%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .12s linear}

/* --- tachometer --- */
.hud-speed{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px}
.speedo{position:relative;width:148px;height:148px;padding:0;display:grid;place-items:center}
.speedo svg{position:absolute;inset:0;width:100%;height:100%}
.arc-bg{fill:none;stroke:rgba(255,255,255,.10);stroke-width:8;stroke-linecap:round}
.arc-fg{fill:none;stroke:url(#g1);stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(255,106,26,.55));transition:stroke-dashoffset .09s linear}
.speedo-val{display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:6px}
.speedo-val b{font:700 44px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;color:#fff}
.speedo-val i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--txt-dim);margin-top:3px}
.pedals{display:flex;gap:7px;align-items:flex-end}
.pedal{display:flex;flex-direction:column;align-items:center;gap:5px}
.pedal span{font:600 8.5px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.14em;color:var(--txt-dim)}
.pedal-bar{
  width:13px;height:104px;border-radius:7px;background:var(--glass);
  border:1px solid var(--glass-b);display:flex;align-items:flex-end;overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.pedal-bar .fill{width:100%;height:0%;border-radius:6px;transition:height .07s linear}
.fill.thr{background:linear-gradient(0deg,#0d9159,var(--green))}
.fill.brk{background:linear-gradient(0deg,#a52c1c,#ff6b52)}

/* --- minimapa --- */
.hud-map{position:absolute;left:16px;bottom:calc(20px + env(safe-area-inset-bottom));padding:8px;width:156px}
.hud-map canvas{display:block;width:140px;height:196px}
.map-cap{display:block;text-align:center;margin-top:4px;font:600 8.5px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.24em;color:var(--txt-dim)}

.hud-side{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.hud-side .btn.mini{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);justify-content:center}

#hudHint{
  position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.06em;color:var(--txt-dim);
  background:var(--glass);border:1px solid var(--glass-b2);border-radius:10px;padding:8px 14px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);white-space:nowrap;
}

#countdown{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.85);
  font:700 132px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;
  color:#fff;text-shadow:0 8px 42px rgba(0,0,0,.7);letter-spacing:.04em;opacity:0;
  transition:opacity .16s ease,transform .16s ease;
}
#countdown.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

#hudFlash{
  position:absolute;top:22%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
#hudFlash.on{opacity:1;animation:flashIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes flashIn{from{transform:translateX(-50%) scale(.82);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#hudFlash .ft{font:700 22px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.22em;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.7)}
#hudFlash .fs{font:700 40px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;color:var(--accent-2);text-shadow:0 4px 22px rgba(0,0,0,.7)}
#hudFlash.best .ft{color:#7dfcc0}
#hudFlash.best .fs{color:#b6ffdd}

#hudAir{
  position:absolute;top:34%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity .2s ease;
}
#hudAir.on{opacity:1;animation:flashIn .3s ease}
#hudAir .at{font:600 10px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.3em;color:var(--blue)}
#hudAir .av{font:700 30px/1 "Barlow Condensed",system-ui,sans-serif;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.65)}

#hudTrick{
  position:absolute;top:45%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;
  transition:opacity .22s ease;pointer-events:none;
}
#hudTrick.on{opacity:1;animation:trickIn .42s cubic-bezier(.2,.9,.3,1.3)}
@keyframes trickIn{from{transform:translateX(-50%) scale(.7) rotate(-4deg);opacity:0}
  to{transform:translateX(-50%) scale(1) rotate(0);opacity:1}}
#hudTrick .tn{
  font:700 30px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.14em;
  color:var(--accent);text-shadow:0 4px 22px rgba(0,0,0,.75);
}
#hudTrick .tp{font:700 18px/1 "Barlow Condensed",system-ui,sans-serif;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.7)}
#hudTrick.clean .tn{color:#7dfcc0}

/* ---------- dotykové ovládanie ---------- */
#touch{position:absolute;inset:0;z-index:23;display:none;pointer-events:none}
#touch.on{display:block}
.tgroup{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));display:flex;gap:12px;pointer-events:auto}
.tgroup.left{left:18px}
.tgroup.right{right:18px}
.tbtn{
  width:76px;height:76px;border-radius:50%;
  background:var(--glass-strong);border:1px solid var(--glass-b);color:var(--txt);
  font:700 13px/1 "Barlow Condensed","Barlow",system-ui,sans-serif;letter-spacing:.08em;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);touch-action:none;user-select:none;
  box-shadow:var(--shadow);transition:transform .1s;
}
.tbtn.gas{background:linear-gradient(135deg,var(--green),#0d9159);border-color:transparent;color:#fff}
.tbtn.brake{background:linear-gradient(135deg,#e2452b,#a52c1c);border-color:transparent;color:#fff}
.tbtn:active{transform:scale(.92)}

/* ==========================================================
   Responzívita
   ========================================================== */
@media (max-width:1100px){
  #controls .btn span{display:none}
  #controls .btn{padding:10px}
  #controls .btn.play span{display:inline}
  #controls .btn.play{padding:12px 18px}
}
@media (max-width:860px){
  /* v jazdeckom režime patrí celá obrazovka hre – ovládací panel skryjeme */
  body.riding #controls{display:none}
  #legend{display:none}
  .stats{max-width:56vw}
  .stats span{padding:3px 8px;font-size:9.5px}
  .brand-text{font-size:13px;letter-spacing:.14em}
  #refHint{right:10px;bottom:auto;top:62px}
  #settings{right:10px;left:10px;width:auto;bottom:92px}
  /* HUD na malých displejoch: hore časomiera + tachometer, pod nimi mapa a tlačidlá */
  .hud-top{top:8px;left:8px;transform:none;padding:2px 3px}
  .hud-cell{padding:6px 9px;min-width:54px}
  .hud-cell span{font-size:8px;letter-spacing:.12em}
  .hud-cell b{font-size:17px}
  .hud-cell.wide{min-width:78px}
  .hud-cell.wide b{font-size:21px}
  .hud-prog{display:none}
  .hud-speed{top:8px;right:8px;bottom:auto;flex-direction:row-reverse;align-items:flex-start}
  .speedo{width:88px;height:88px}
  .speedo-val{margin-top:4px}
  .speedo-val b{font-size:26px}
  .speedo-val i{font-size:8px}
  .arc-bg,.arc-fg{stroke-width:9}
  .pedals{display:none}
  .hud-map{left:8px;top:74px;bottom:auto;width:86px;padding:5px}
  .hud-map canvas{width:76px;height:106px}
  .map-cap{font-size:7.5px;margin-top:2px}
  .hud-side{top:104px;right:8px;gap:5px}
  .hud-side .btn.mini{padding:6px 8px;font-size:9px}
  #hudHint{display:none}
  #countdown{font-size:86px}
  #hudFlash{top:30%}
  #hudFlash .ft{font-size:16px}
  #hudFlash .fs{font-size:30px}
  #hudAir{top:42%}
  #hudTrick{top:52%}
  #hudTrick .tn{font-size:22px}
  #hudTrick .tp{font-size:14px}
}
@media (max-width:860px) and (orientation:landscape){
  .hud-map{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));left:110px;width:72px}
  .hud-map canvas{width:62px;height:86px}
  .hud-side{top:8px;right:106px;flex-direction:row}
  .hud-top{left:50%;transform:translateX(-50%)}
}
@media (max-width:480px){
  #controls{gap:6px;padding:10px 8px calc(10px + env(safe-area-inset-bottom))}
  .ctrl-group{padding:3px}
  .btn{padding:9px}
  .tbtn{width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}