/* Trekkit - podgląd 3D trasy. Kolory jak AppColors / embed.html. */
@font-face{font-family:'Satoshi';font-weight:400;font-display:swap;src:url('../assets/assets/fonts/Satoshi-Regular.otf') format('opentype')}
@font-face{font-family:'Satoshi';font-weight:500;font-display:swap;src:url('../assets/assets/fonts/Satoshi-Medium.otf') format('opentype')}
@font-face{font-family:'Satoshi';font-weight:700;font-display:swap;src:url('../assets/assets/fonts/Satoshi-Bold.otf') format('opentype')}

:root{
  --cream:#F6F2EB;--primary:#1A3C34;--accent:#C77B3A;--border:#E3E0D8;
  --text:#1E2D28;--muted:#8A8A85;--muted-dark:#4A4A45;--danger:#C62828;
  --card:rgba(255,255,255,.94);--shadow:0 2px 12px rgba(20,30,25,.18);
  --gap:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--cream);overflow:hidden}
body{font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:fixed;inset:0;overflow:hidden}
.map{position:absolute;inset:0}

/* ── Ładowanie / błąd ── */
.loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--cream);padding:24px;text-align:center}
.loading-msg{font-size:14px;color:var(--muted-dark);max-width:420px;line-height:1.45}
.loading a{color:var(--primary);font-weight:700;text-decoration:none;padding:8px 12px}
.spin{width:36px;height:36px;border:4px solid rgba(26,60,52,.18);border-top-color:var(--primary);border-radius:50%;animation:spin .9s linear infinite}
.loading.error .spin{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Karty nakładki ── */
.card{background:var(--card);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.top{position:absolute;z-index:5;top:max(var(--gap),env(safe-area-inset-top));left:max(var(--gap),env(safe-area-inset-left));right:max(var(--gap),env(safe-area-inset-right));display:flex;align-items:flex-start;gap:8px;pointer-events:none}
.top>*{pointer-events:auto}
.title-card{flex:0 1 auto;min-width:0;max-width:560px;padding:10px 14px}
.title-row{display:flex;align-items:center;gap:8px;min-width:0}
.name{margin:0;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.closed{flex:0 0 auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;white-space:nowrap}
.sub{margin-top:3px;font-size:12.5px;color:var(--muted-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}

.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--primary);padding:0}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
.icon-btn:hover{background:#fff}
.icon-btn:focus-visible,.play-btn:focus-visible,.speed-btn:focus-visible,.progress:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-btn.flat{box-shadow:none;background:transparent;width:40px;height:40px}
.icon-btn.flat:hover{background:rgba(26,60,52,.08)}
#btn-fullscreen .ic-exit{display:none}
.is-fs #btn-fullscreen .ic-exit{display:block}
.is-fs #btn-fullscreen .ic-enter{display:none}

/* ── Panel przelotu ── */
.panel{position:absolute;z-index:5;left:max(var(--gap),env(safe-area-inset-left));right:max(var(--gap),env(safe-area-inset-right));bottom:max(var(--gap),env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}
.panel-card{pointer-events:auto;width:100%;max-width:760px;padding:10px 12px 8px}
.controls{display:grid;grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"play prog speed cam over";align-items:center;gap:10px}
.play-btn{grid-area:play;width:48px;height:48px;border:0;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.play-btn svg{width:24px;height:24px;fill:currentColor}
.play-btn .ic-pause{display:none}
.is-playing .play-btn .ic-pause{display:block}
.is-playing .play-btn .ic-play{display:none}
.play-btn:hover{background:#244E44}

.progress{grid-area:prog;width:100%;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.progress::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--accent) var(--p),#DAD5CB var(--p))}
.progress::-moz-range-track{height:6px;background:#DAD5CB}
.progress::-moz-range-progress{height:6px;background:var(--accent)}
.progress::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.progress::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)}

.speed{grid-area:speed;display:flex;border:1px solid var(--border);background:#fff}
.speed-btn{min-width:38px;height:34px;border:0;border-left:1px solid var(--border);background:transparent;font-size:13px;font-weight:700;color:var(--muted-dark);cursor:pointer;padding:0 6px}
.speed-btn:first-child{border-left:0}
.speed-btn.on{background:var(--primary);color:#fff}
#btn-overview{grid-area:over}
/* Kąt kamery (normalnie / wysoko) - przełącznik, wciśnięty = wysoko. */
.cam-btn{grid-area:cam;position:relative}
.cam-btn[aria-pressed="true"]{background:var(--primary);color:#fff}
.cam-btn[aria-pressed="true"]:hover{background:var(--primary)}
.cam-badge{position:absolute;right:4px;top:3px;font-size:11px;font-weight:800;line-height:1;display:none}
.cam-btn[aria-pressed="true"] .cam-badge{display:block}
.cam-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.stats{display:flex;gap:18px;margin:6px 2px 4px;align-items:baseline;flex-wrap:wrap}
.stat{display:flex;align-items:baseline;gap:6px;min-width:0}
.stat .l{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:15px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap}

.profile-wrap{position:relative;height:72px}
.profile{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:none}

.attr{position:absolute;z-index:4;right:max(8px,env(safe-area-inset-right));top:calc(max(var(--gap),env(safe-area-inset-top)) + 54px);background:rgba(255,255,255,.82);padding:2px 6px;font-size:10px;line-height:1.3;color:var(--muted-dark);text-decoration:none}

.toast{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(30,45,40,.92);color:#fff;font-size:14px;font-weight:600;padding:10px 16px;max-width:calc(100% - 32px);text-align:center}

/* Nakładka przy wyborze pinezki (etykiety punktów przebiegu) */
.maplibregl-canvas{outline:none}

/* ── Telefon ── */
@media (max-width:600px){
  :root{--gap:8px}
  .title-card{padding:8px 12px}
  .name{font-size:15px}
  .sub{font-size:12px}
  .icon-btn{width:40px;height:40px}
  .panel-card{padding:8px 10px 6px}
  .controls{grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"prog prog prog prog prog" "play . speed cam over";row-gap:2px;column-gap:8px}
  .play-btn{width:44px;height:44px}
  .speed-btn{min-width:34px;height:32px}
  .stats{margin:2px 2px 2px;gap:12px}
  .stat .v{font-size:14px}
  .profile-wrap{height:56px}
  .attr{top:auto;bottom:calc(max(var(--gap),env(safe-area-inset-bottom)) + 4px);right:auto;left:50%;transform:translateX(-50%);display:none}
}
@media (max-width:400px){
  .hide-xs{display:none}
  .stat .l{letter-spacing:.4px}
}
/* Niski ekran (telefon poziomo): profil chowamy, żeby mapa miała miejsce. */
@media (max-height:460px){
  .profile-wrap{display:none}
  .stats{margin-bottom:0}
}
@media (min-width:1200px){
  .title-card{padding:12px 16px}
  .name{font-size:18px}
  .profile-wrap{height:84px}
}
/* Kropka przelotu (Marker w 3d.js): jak dawne kółka mapy - 7 px, biała
   obwódka 3 px, poświata 14 px w kolorze akcentu z kryciem 25%. */
.t3d-dot{width:28px;height:28px;border-radius:50%;background:rgba(199,123,58,.25);pointer-events:none}
.t3d-dot::after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#C77B3A;border:3px solid #fff}

/* ── Nagrywanie filmu (&nagraj=1, 3d-record.js) ──
   Mapa ma rozmiar filmu (W/2 x H/2) i siedzi pod ekranem nagrywania;
   nakładki są rysowane na filmie, nie w DOM. */
.is-rec .app{right:auto;bottom:auto}
.is-rec .maplibregl-marker{display:none}
.rec-ui{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:32px;padding:24px;background:#16241F;color:#fff}
.rec-stage{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.rec-preview{display:block;height:calc(100vh - 48px);width:auto;max-width:55vw;object-fit:contain;box-shadow:0 8px 32px rgba(0,0,0,.45);background:#F6F2EB}
.rec-side{flex:0 1 360px;min-width:220px}
.rec-title{font-size:22px;font-weight:700;letter-spacing:-.3px}
.rec-format{margin-top:4px;font-size:13px;color:rgba(255,255,255,.65)}
.rec-bar{margin-top:20px;height:6px;background:rgba(255,255,255,.15)}
.rec-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.rec-status{margin-top:12px;font-size:14px;line-height:1.45}
.rec-status.err{color:#FFB4A9}
.rec-dl{display:inline-block;margin-top:16px;padding:10px 18px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none}
.rec-dl[hidden]{display:none}
.rec-note{margin-top:18px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.6)}
@media (max-width:700px){
  .rec-ui{flex-direction:column;gap:16px}
  .rec-preview{height:auto;max-height:60vh;max-width:90vw}
}