:root{
  --bg:#0b0b0b;
  --panel:#101010;
  --card:#0f0f0f;
  --line:#242424;
  --text:#ffffff;
  --muted:#a9a9a9;
  --brand:#9dd6ff;
  --ok:#45d16b;
  --ko:#ff6b6b;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;

  /* iOS safe areas (notch + home indicator) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* When installed as a PWA on iOS, keep UI out of the notch / home indicator */
body.is-standalone .topbar{padding-top: calc(12px + var(--sat));}
body.is-standalone .bottombar{padding-bottom: calc(10px + var(--sab));}
body.is-standalone .toast{bottom: calc(84px + var(--sab));}

[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.app{min-height:100%;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 12px;
  background:rgba(11,11,11,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  padding:6px 8px;
  border-radius:16px;
  transition:transform .08s ease, background .12s ease, filter .12s ease;
}
.brand:hover{background:rgba(255,255,255,.04)}
.brand:active{transform:scale(.98)}
.brand:focus-visible{outline:3px solid rgba(255,255,255,.18);outline-offset:2px}
.brand::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.14), transparent 60%);
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
}
.brand.brand-tapped::after{opacity:1}

.brand-logo{display:block;border-radius:12px}
.topbar-actions{display:flex;gap:8px;align-items:center}
.btn-push-icon{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

.badge-test{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,184,76,.45);
  background:rgba(255,184,76,.12);
  color:#ffce8a;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
}

.main{flex:1;display:block;padding:12px 12px 90px;position:relative}
#view{position:relative;z-index:3}
.leaflet-container{z-index:1}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.card.locked{opacity:.55}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.space{justify-content:space-between}

.gc-circuit-card{
  overflow:hidden;
  margin-bottom: 10px;}
.gc-circuit-card--clickable{cursor:pointer}
.gc-circuit-card--clickable:hover{border-color:#353535}
.gc-circuit-card__head{display:flex;gap:12px;align-items:flex-start}
.gc-circuit-card__head--with-media{align-items:stretch}
.gc-circuit-card__main{min-width:0;flex:1}
.gc-circuit-card__media-strip{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex:0 0 auto;
}
.gc-circuit-card__title-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.gc-circuit-card__description{
  margin-top:4px;
  display:-webkit-box;
  /*-webkit-line-clamp:3;*/
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gc-circuit-card__media{
  /*flex:0 0 300px;*/
  width:300px;
  max-width:300px;
  /*aspect-ratio:4 / 3;*/
  border-radius:12px;
  overflow:hidden;
  /*border:1px solid var(--line);*/
  background:#0a0a0a;
  align-content: center;
}
.gc-circuit-card__media img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
}
.gc-circuit-card__media--inline{margin-top:8px}

.muted{color:var(--muted)}
.small{font-size:12px}
.h1{font-size:22px;font-weight:950;margin:0}
.h2{font-size:16px;font-weight:900;margin:0}

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#141414;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{border-color:#3a3a3a}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent}
.btn.primary{border-color:#2f4f7f;background:#0f1a2d}
.btn.ok{border-color:rgba(69,209,107,.5);background:rgba(69,209,107,.12)}
.btn.ko{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.12)}
.btn.wide{width:100%}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#121212;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.pill.ok{border-color:rgba(69,209,107,.6);color:var(--ok)}
.pill.ko{border-color:rgba(255,107,107,.6);color:var(--ko)}
button.pill[data-action="circuit-unlock"]{cursor:pointer}

.list{display:flex;flex-direction:column;gap:10px}
.item{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px;
  background:#0d0d0d;
}
.item:hover{border-color:#353535}
.item-title{font-weight:900;margin:0 0 4px}
.item-desc{margin:0;color:var(--muted);font-size:13px}

.map{
  height: 52vh;
  min-height: 320px;
  border-radius: var(--r);
  overflow:hidden;
  border:1px solid var(--line);
}

/* Map view: use as much height as possible on phones */
.route-map .main{padding-bottom: 20px;}
.route-map .map{
  height: calc(100svh - 170px);
  min-height: 360px;
}


.gc-circuit-card__main .gc-circuit-card__media--imghead{
  width:min(100%, 200px);
  max-width:200px;
  flex-basis:auto;
}

.gc-circuit-bottom{
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Very small phones: keep cards/buttons readable and prevent overflow */
@media (max-width: 420px){
  .topbar{padding:10px 10px;}
  .topbar-actions{gap:6px;}
  .brand{padding:4px 6px;border-radius:14px;}
  .brand-logo{max-width: 180px;}
  .btn, .tab{padding:8px 10px;border-radius:12px;font-size:13px;}
  .badge-test{padding:5px 8px;font-size:11px;}
  .main{padding:10px 10px 90px;}
  .mcq-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;}
  .mcq-img{height:98px;}
  .mcq-img img{max-height:98px;}
  .q-html img{max-height:60svh;}
  .gc-circuit-card__media{
    width:min(100%, 300px);
    max-width:300px;
    flex-basis:auto;
    /*aspect-ratio:16 / 9;*/
  }
  .gc-circuit-card__media-strip{
    width:100%;
    display:flex;
    flex-wrap:wrap;
   
  }  

  .gc-circuit-card__media-strip .gc-circuit-card__media{
    width:min(100%, 300px);
    max-width:300px;
    flex-basis:auto;
    aspect-ratio:4 / 3;
  }
  .gc-circuit-card__main .gc-circuit-card__media--imghead{
    width:min(100%, 150px);
    max-width:150px;
    flex-basis:auto;
  }
  .gc-circuit-card__main .gc-circuit-card__media--inline{
    width:min(100%, 300px);
    max-width:300px;
    flex-basis:auto;
    /*aspect-ratio:4 / 3;*/
  }  
}

@media (max-height: 680px){
  .map{min-height: 260px;}
  .route-map .map{min-height: 320px;}
}

/* Leaflet: map quick actions (recenter / follow) */
.leaflet-container .pwa-map-tools{
  border:none;
  box-shadow: var(--shadow);
}
.leaflet-container .pwa-map-tools .pwa-map-tools-btn{
  width:36px;
  height:36px;
  line-height:36px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:#141414 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  border-bottom:none !important;
  text-decoration:none;
}
.leaflet-container .pwa-map-tools .pwa-map-tools-btn:last-child{
  border-bottom:1px solid var(--line) !important;
}
.leaflet-container .pwa-map-tools .pwa-map-tools-btn.active{
  background:#0f1a2d !important;
  border-color:#2f4f7f !important;
}
.leaflet-container .pwa-map-tools .pwa-map-tools-btn.disabled{
  opacity:.45;
  pointer-events:none;
}

.leaflet-container .pwa-map-tools .pwa-map-tools-btn img{
  width:18px;
  height:18px;
  object-fit:contain;
  pointer-events:none;
}

/* Player request: hide Leaflet zoom +/- control */
.leaflet-container .leaflet-control-zoom{
  display:none !important;
}

/* Safety: hide guide tool button if an older cached JS still creates it */
.leaflet-container .pwa-map-tools .pwa-map-tools-btn-guide{
  display:none !important;
}

/* Point icons (custom pin) */
.gc-pin-icon{
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}

/* Info-point thumbnails directly on map */
.pwa-info-thumb-marker{
  background: transparent;
  border: 0;
}
.pwa-info-thumb{
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.pwa-info-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pwa-info-thumb--fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(18,79,168,.55);
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
}
.pwa-info-thumb--fallback span{
  font-size: 16px;
  font-weight: 900;
  color: #124fa8;
  text-shadow: none;
}
.pwa-map-popup-media{
  width: min(188px, 100%);
  max-width: 100%;
  height: 130px;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
}
.pwa-map-popup-media img{
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
}
.bottombar{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;gap:8px;justify-content:space-around;
  padding:10px;
  background:rgba(11,11,11,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  z-index:60;
}
.tab{
  flex:1;
  border:1px solid var(--line);
  background:#141414;
  color:var(--text);
  padding:10px 12px;
  border-radius: 16px;
  font-weight:900;
  cursor:pointer;
}
.tab[aria-current="page"]{border-color:#2f4f7f;background:#0f1a2d}

.pwa-footer-meta{
  position:static;
  text-align:center;
  font-size:11px;
  color:var(--muted);
  opacity:.85;
  pointer-events:auto;
  padding:12px 10px;
}

.pwa-footer-meta .pwa-install-link{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto 6px auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #2a2a2a;
  background:#0f0f0f;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pwa-footer-meta .pwa-install-link:hover{filter:brightness(1.08)}
.pwa-footer-meta .pwa-footer-text{line-height:1.25}

/* When bottom nav is visible, keep enough space in the page flow */
.bottombar:not([hidden]) ~ .pwa-footer-meta{
  padding-bottom: calc(12px + 82px);
}

.toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);
  background:#141414;border:1px solid var(--line);
  padding:10px 12px;border-radius: 999px;
  box-shadow: var(--shadow);
  z-index:80;
  max-width:min(520px, calc(100vw - 24px));
  text-align:center;
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:90;padding:18px}
.modal-card{width:min(720px, 100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.modal-head{position:sticky;top:0;z-index:2;background:rgba(16,16,16,.98);backdrop-filter: blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.modal-title{font-weight:950}
.modal-body{padding:14px}
.modal-foot{position:sticky;bottom:0;z-index:2;background:rgba(16,16,16,.98);backdrop-filter: blur(10px);border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;justify-content:flex-end}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:12px;color:var(--muted)}
.field input,.field textarea{
  border:1px solid var(--line);
  background:#0d0d0d;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
}
.field textarea{min-height:110px;resize:vertical}

.q-html img{
  max-width:100%;
  height:auto;
  max-height:70svh;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:14px;
  border:1px solid var(--line);
}
.q-html a{color:var(--brand)}

.gc-rich-html{line-height:1.45}
.gc-rich-html p{margin:.45em 0}
.gc-rich-html ul,.gc-rich-html ol{margin:.45em 0 .45em 1.2em;padding:0}
.gc-rich-html img{
  max-width:100%;
  height:auto;
  max-height:70svh;
  object-fit:contain;
  display:block;
  margin:8px auto;
  border-radius:14px;
  border:1px solid var(--line);
}
.gc-rich-html a{color:var(--brand);text-decoration:underline;word-break:break-word}
.gc-rich-html blockquote{
  margin:.5em 0;
  padding:.55em .75em;
  border-left:3px solid var(--line);
  border-radius:8px;
  background:#0f0f0f;
}
.gc-circuit-media-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.gc-circuit-media-item{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.gc-circuit-media-item img{
  width:min(100%, 500px);
  max-width:500px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a0a0a;
  object-fit:cover;
}

.mcq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mcq-card{position:relative;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#151515,#0b0b0b);border-radius:18px;overflow:hidden;cursor:pointer;padding:0;text-align:left;color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(0);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease}
.mcq-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.10), transparent 55%);pointer-events:none}
.mcq-card:hover{border-color:rgba(255,255,255,.22);filter:brightness(1.04)}
.mcq-card:active{transform:translateY(2px);box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.mcq-card:focus-visible{outline:3px solid rgba(255,255,255,.22);outline-offset:2px}
.mcq-img{height:120px;background:linear-gradient(180deg,#0f0f0f,#070707);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08)}
.mcq-img img{max-width:100%;max-height:120px;object-fit:contain;display:block}
.mcq-label{padding:12px 12px 14px;font-weight:950;font-size:13px;letter-spacing:.2px;color:#f7f7f7;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.mcq-label-only{padding:18px 14px;font-size:14px}
.mcq-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:15px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  opacity:.55;transform:scale(.95);
  transition:opacity .12s ease, transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease}
.mcq-card.is-selected{border-color:rgba(86,170,255,.75);
  box-shadow:0 14px 26px rgba(0,0,0,.5), 0 0 0 3px rgba(86,170,255,.18), inset 0 1px 0 rgba(255,255,255,.12)}
.mcq-card.is-selected .mcq-check{opacity:1;transform:scale(1);background:rgba(86,170,255,.22);color:#fff;border-color:rgba(86,170,255,.6)}

.qr-video{width:100%;border-radius:18px;border:1px solid var(--line);background:#000}


@media (min-width: 900px){
  .main{max-width: 980px;margin:0 auto}
  .gc-circuit-bottom{
    flex-direction:row;
  }
}

@media (max-width: 680px){
  .gc-circuit-card__head--with-media{
    display: grid;
        flex-direction: column;
        justify-items: center;
  } 
}


/* Progress bar */
.progress{height:10px;background:#111;border-radius:999px;overflow:hidden;margin-top:8px}
.progress .bar{height:100%;background:var(--ok,#16a34a);width:0%}


/* --- Track overlays (circuit_tracks / GeoJSON) --- */
.leaflet-overlay-pane path.pwa-track-full{
  stroke: rgba(255,255,255,.35);
  stroke-width: 5;
  fill: none;
}
.pwa-track-dir-marker{
  background: transparent;
  border: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.pwa-track-dir-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(26,26,26,.96), rgba(8,8,8,.94));
  border: 2px solid rgba(255,210,90,.98);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.60),
    0 0 12px rgba(255,210,90,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.92);
  -webkit-text-stroke: .45px rgba(0,0,0,.85);
  opacity: 1;
  transform-origin: 50% 50%;
}
body.pwa-guide-on .pwa-track-dir-arrow{
  background: linear-gradient(180deg, rgba(18,50,64,.96), rgba(10,28,36,.94));
  border-color: rgba(120,220,255,.98);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.60),
    0 0 12px rgba(120,220,255,.40);
}
.leaflet-overlay-pane path.pwa-track-focus{
  stroke: rgba(120,210,255,.95);
  stroke-width: 8;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(120,210,255,.25));
}
body.pwa-guide-on .leaflet-overlay-pane path.pwa-track-full{
  stroke: rgba(255,255,255,.18);
}



.leaflet-overlay-pane path.pwa-track-remaining{
  stroke: rgba(255,230,160,.95);
  stroke-width: 9;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(255,230,160,.20));
}

.leaflet-overlay-pane path.pwa-track-dot{
  stroke: rgba(0,0,0,.55);
  stroke-width: 2;
  fill: rgba(255,255,255,.95);
}
.leaflet-overlay-pane path.pwa-track-dot-target{
  fill: rgba(255,230,160,.95);
}

.pwa-map-hud{
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  min-width: 190px;
}
.pwa-map-hud-line{
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}


.pwa-map-hud-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pwa-hud-toggles{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pwa-hud-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 6px;
  width: auto;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}
.pwa-hud-toggle:active{
  transform: scale(0.97);
}

/* Make the guide toggle look consistent with the existing map tools */
.leaflet-container .pwa-map-tools .pwa-map-tools-btn.active{
  box-shadow: inset 0 0 0 1px rgba(120,210,255,.25);
}



.pwa-map-hud-compass{
  display: flex;
  align-items: center;
  gap: 6px;
}
.pwa-compass-arrow{
  display: inline-flex;
  width: 14px;
  justify-content: center;
  will-change: transform;
}
.pwa-map-hud-offtrack{
  color: rgba(255,210,210,.95);
}

.pwa-map-hud-wrongway{
  color: rgba(255,170,170,.98);
  font-weight: 650;
}

/* Mini radar (top-right) */
.pwa-map-radar{
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  min-height: 34px;
  margin-top: 56px; /* keep space under zoom controls */
}
.pwa-map-radar.leaflet-control{
  display:none !important;
}
.pwa-radar-arrow{
  display: inline-flex;
  width: 16px;
  justify-content: center;
  will-change: transform;
}
.pwa-radar-text{
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.pwa-map-radar.pwa-radar-wrongway{
  border-color: rgba(255,120,120,.55);
}



/* --- Install banner --- */
.pwa-install-banner{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 74px; /* above bottom bar */
  z-index: 9999;
}
.pwa-install-banner-inner{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,20,0.92);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.30);
}
.pwa-install-banner-title{
  font-weight: 900;
  margin-bottom: 4px;
}
.pwa-install-banner-text{
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 10px;
}
.pwa-install-banner-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pwa-install-banner .btn{
  padding: 8px 10px;
  border-radius: 10px;
}



/* --- Player marker (upright hiker + directional arrow) --- */
.player-marker{
  position:relative;
  display:block;
  --pm-arrow-deg: 0deg;
  --pm-orbit-r: 18px;
}
.player-marker .pm-sprite{
  position:absolute;
  inset:0;
  z-index:2;
  transform-origin:50% 50%;
  transition:transform .10s linear;
}
.player-marker.pm-mirror .pm-sprite{ transform:scaleX(-1); }
.player-marker img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}
.player-marker .pm-ring{
  display:none !important;
}
.player-marker .pm-arrow{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:34px;
  height:24px;
  background:linear-gradient(180deg,#1b1b1b,#000);
  border:2px solid rgba(255,255,255,.78);
  border-radius:7px 3px 3px 7px;
  clip-path:polygon(100% 50%, 42% 0%, 42% 24%, 0% 24%, 0% 76%, 42% 76%, 42% 100%);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--pm-arrow-deg) - 90deg))
    translateX(var(--pm-orbit-r));
  transform-origin:50% 50%;
  pointer-events:none;
  opacity:.98;
  box-shadow:0 2px 7px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Player map: hide mini radar arrow/text (requested) */
.pwa-radar-arrow, .pwa-radar-text{ display:none !important; }

/* Footer already in the page flow */

/* Temporary: disable scoreboard UI */
#scoreboard-card{ display:none !important; }
#btn-finish-score{ display:none !important; }

/* --- Fancy single-line answer input (auto-save) --- */
.ans-input{width:17ch;max-width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#151515,#0a0a0a);color:#fff;font-weight:950;letter-spacing:.3px;
  box-shadow:0 10px 22px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease}
.ans-input:focus{outline:none;border-color:rgba(86,170,255,.70);box-shadow:0 14px 26px rgba(0,0,0,.46), 0 0 0 3px rgba(86,170,255,.18), inset 0 1px 0 rgba(255,255,255,.12)}
.ans-input:active{transform:translateY(1px)}
.ans-input.saved-ping{border-color:rgba(120,255,170,.55);box-shadow:0 14px 26px rgba(0,0,0,.46), 0 0 0 3px rgba(120,255,170,.14), inset 0 1px 0 rgba(255,255,255,.12)}
.ans-hint{margin-top:6px;font-size:12px}

/* --- Mobile tweaks --- */
@media (max-width: 420px){
  .topbar{padding:10px 10px}
  .brand{padding:4px 6px;border-radius:14px}
  .brand-logo{border-radius:10px}
  .btn{padding:8px 10px;border-radius:12px}
  .main{padding:10px 10px 90px}
  .map{height:56svh;min-height:260px}
  .mcq-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .mcq-img{height:96px}
  .mcq-img img{max-height:96px}
  .q-html img{max-height:62svh;object-fit:contain;display:block;margin:0 auto}
}

/* Map view: let the map breathe on phones */
body.route-map .map{
  height: calc(100svh - 210px);
  min-height: 320px;
}


/* Permissions gate UI */
.perm-status{display:flex;flex-direction:column;gap:8px}
.perm-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#0d0d0d}
.perm-row .label{font-weight:950}
.perm-row .desc{color:var(--muted);font-size:12px;margin-top:2px}
.perm-row .state{font-weight:950;font-size:12px}
.perm-row.ok .state{color:var(--ok)}
.perm-row.ko .state{color:var(--ko)}
.perm-help details{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:#0d0d0d}
.perm-help details + details{margin-top:8px}
.perm-help summary{cursor:pointer;font-weight:950}
.perm-note{margin-top:10px;font-size:12px;color:var(--muted)}


/* Circuit subtabs (Carte / Profil) */
.subtabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  margin-bottom:10px;
}
.subtab{
  flex:1;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
}
.subtab.active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

.elev-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  margin-bottom:10px;
}
.elev-canvas-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
}
.elev-canvas{
  display:block;
  min-height:180px;
}