:root{
  --bg:#0f1115; --panel:#161a20; --panel2:#1d222b; --line:#2a313c;
  --ink:#e8ecf1; --muted:#9aa4b2; --dim:#6f7987; --accent:#7bdcff;
  --paper:#f7f6f2;          /* tomt papper när ingen karta är laddad */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
#app{display:flex;flex-direction:column;height:100%}
.mono{font-family:var(--mono)}
.muted{color:var(--muted);font-size:12px}
.dim{color:var(--dim)}

/* ---------- header ---------- */
header{padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
header h1{font-size:14px;font-weight:600;margin:0 8px 0 0;letter-spacing:.2px}
header h1 span{color:var(--muted);font-weight:400}
.drop{display:flex;gap:8px;flex-wrap:wrap}
.filebtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  color:var(--ink);font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.filebtn:hover{border-color:#3a4453}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.filebtn.ok{border-color:#2f7d43;background:#15251a}
.filebtn.primary{border-color:#3a5570;background:#182430}
.filebtn .ic{font-size:13px;line-height:1}

/* ---------- stage ---------- */
#stage{position:relative;flex:1;min-height:0;background:
  repeating-conic-gradient(#171a1f 0% 25%, #14171c 0% 50%) 50% / 22px 22px}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}
#map:active{cursor:grabbing}
#hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7;pointer-events:none}
#hint b{color:var(--ink)}
#hint[hidden]{display:none}

#status{position:absolute;left:12px;top:12px;max-width:min(92%,560px);
  background:rgba(20,24,30,.94);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.5;display:none}
#status.show{display:block}
#status .warn{color:#ffcf6b}
#status input{width:100%;margin-top:7px;background:#0e1116;color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:7px 8px;font:12px/1.4 var(--mono)}
#status button{margin-top:7px;padding:6px 10px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font-size:12px;cursor:pointer}

/* ---------- HUD ---------- */
#hud{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;
  align-items:stretch;pointer-events:none;font-variant-numeric:tabular-nums;
  max-height:calc(100% - 24px);overflow-y:auto;padding-right:2px}
#hud[hidden]{display:none}
.card{background:rgba(20,24,30,.92);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;min-width:168px}
.card.ref{border-color:#3f4d5e}
.card .who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.card .who .name{color:var(--ink);font-weight:600;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.card .who .tag{margin-left:auto;font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:0 4px}
.card .big{font:600 17px/1.15 var(--mono);margin-top:2px}
.card .sub{font:11px/1.35 var(--mono);color:var(--muted)}
.card .gap{font:11px/1.35 var(--mono);color:var(--ink)}

/* färgprick: samma nyanser som på kartan, med ljus ring så den syns mot mörk panel */
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}

/* ---------- footer ---------- */
footer{background:var(--panel);border-top:1px solid var(--line);padding:10px 12px 12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row+.row{margin-top:9px}
.play{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font-size:16px;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.play:hover{border-color:#3a4453}
.play:disabled{opacity:.4;cursor:not-allowed}
#clock{font:600 15px/1 var(--mono);min-width:96px}
#scrub{flex:1;min-width:180px;accent-color:var(--accent);height:26px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{padding:6px 10px;background:var(--panel2);color:var(--muted);border:0;
  font-size:12px;font-family:inherit;cursor:pointer}
.seg button.on{background:var(--accent);color:#06222c;font-weight:600}
label.ctl{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.ctl input[type=number]{width:60px;background:#0e1116;color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:5px 6px;font:12px var(--mono)}
.ctl input[type=range]{width:110px;accent-color:var(--accent)}

/* ---------- spårlista ---------- */
.tracklist{margin-top:10px;border-top:1px solid var(--line);padding-top:9px;
  display:flex;flex-direction:column;gap:6px;max-height:168px;overflow-y:auto}
.tracklist[hidden]{display:none}
.trow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.trow.off{opacity:.45}
.namein{background:transparent;border:0;border-bottom:1px dashed var(--line);color:var(--ink);
  font:600 12.5px system-ui;width:130px;padding:2px 0}
.namein:focus{outline:none;border-bottom-color:var(--accent)}
.trow .stat{color:var(--muted);font:11px var(--mono);min-width:112px}
.trow .spacer{flex:1}
.mini{border:1px solid var(--line);background:var(--panel2);color:var(--muted);
  border-radius:6px;padding:4px 7px;font-size:11px;font-family:inherit;cursor:pointer;white-space:nowrap}
.mini:hover{border-color:#3a4453;color:var(--ink)}
.mini.on{background:var(--accent);color:#06222c;border-color:var(--accent);font-weight:600}
.mini.x:hover{border-color:#8a3a3a;color:#ff9c9c}
.note{color:#ffcf6b;font-size:11.5px;padding:2px 0}

@media (max-width:640px){
  header h1 span{display:none}
  .filebtn .txt{display:none}
  .filebtn#lbl-gpx .txt{display:inline}
  #hud .card{min-width:140px}
  .ctl input[type=range]{width:84px}
  .namein{width:96px}
  .trow .stat{display:none}
}