/* ═══════════════════════════════════════════════════════════════
   BLUE PLAQUES & PARKRUNS — Shared Stylesheet
   Theme A: Classic Navy (default)
   Theme B: Twilight (dark, copper accents)
═══════════════════════════════════════════════════════════════ */

/* ── THEME A: Classic Navy (default) ── */
:root {
  --bg:            #eef2f7;
  --hdr-bg:        #1b3a6b;
  --hdr-accent:    #1e8fd4;
  --hdr-text:      #ffffff;
  --hdr-input-bg:  rgba(255,255,255,.12);
  --hdr-input-bd:  rgba(255,255,255,.25);
  --hdr-input-fc:  rgba(255,255,255,.6);
  --hdr-btn-bg:    rgba(255,255,255,.12);
  --hdr-btn-hov:   rgba(255,255,255,.22);
  --toggle-bg:     rgba(255,255,255,.12);
  --btn-active-bg: #ffffff;
  --btn-active-fg: #1b3a6b;
  --pill-bg:       rgba(255,255,255,.15);
  --panel-bg:      #ffffff;
  --panel-shadow:  0 6px 32px rgba(0,0,0,.16);
  --panel-bd:      #e8eef5;
  --panel-faint:   #f0f4f8;
  --panel-hover:   #f4f9ff;
  --panel-hl:      #ebf4ff;
  --text-primary:  #1a2a3a;
  --text-secondary:#7a8fa8;
  --text-accent:   #1e8fd4;
  --text-label:    #3a5a80;
  --text-head:     #1b3a6b;
  --toast-bg:      rgba(27,58,107,.92);
  --hint-bg:       rgba(255,255,255,.96);
  --hint-bd:       #dce3ee;
  --grad-blue:     linear-gradient(135deg,#1b3a6b,#1a6ea8);
  --grad-green:    linear-gradient(135deg,#1a6b2a,#27ae60);
  --grad-orange:   linear-gradient(135deg,#c2410c,#f97316);
  --grad-red:      linear-gradient(135deg,#9f1239,#e11d48);
  --red:           #e11d48;
  --red-dark:      #9f1239;
  --red-darkest:   #7f1d1d;
  --theme-icon:    "🌙";
  --theme-label:   "Twilight";
}

/* ── THEME B: Twilight (dark + copper) ── */
[data-theme="twilight"] {
  --bg:            #0f1623;
  --hdr-bg:        #0a0f1a;
  --hdr-accent:    #c17d3c;
  --hdr-text:      #e8d5b7;
  --hdr-input-bg:  rgba(193,125,60,.1);
  --hdr-input-bd:  rgba(193,125,60,.3);
  --hdr-input-fc:  rgba(232,213,183,.7);
  --hdr-btn-bg:    rgba(193,125,60,.12);
  --hdr-btn-hov:   rgba(193,125,60,.22);
  --toggle-bg:     rgba(193,125,60,.1);
  --btn-active-bg: #c17d3c;
  --btn-active-fg: #0f1623;
  --pill-bg:       rgba(193,125,60,.2);
  --panel-bg:      #1a2235;
  --panel-shadow:  0 6px 32px rgba(0,0,0,.5);
  --panel-bd:      #2a3550;
  --panel-faint:   #141d2e;
  --panel-hover:   #1f2d44;
  --panel-hl:      #1a2d44;
  --text-primary:  #e8d5b7;
  --text-secondary:#8a9ab5;
  --text-accent:   #c17d3c;
  --text-label:    #a0b0c8;
  --text-head:     #e8d5b7;
  --toast-bg:      rgba(10,15,26,.95);
  --hint-bg:       rgba(26,34,53,.96);
  --hint-bd:       #2a3550;
  --grad-blue:     linear-gradient(135deg,#1a2a50,#2a4a80);
  --grad-green:    linear-gradient(135deg,#0f3020,#1a6b2a);
  --grad-orange:   linear-gradient(135deg,#6b2a0c,#c17d3c);
  --grad-red:      linear-gradient(135deg,#5f0f25,#9f1239);
  --red:           #e11d48;
  --red-dark:      #9f1239;
  --red-darkest:   #7f1d1d;
  --theme-icon:    "☀";
  --theme-label:   "Classic";
}






/* ── BASE ── */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  height:100vh;display:flex;flex-direction:column;
  overflow:hidden;background:var(--bg);
  transition:background .3s, color .3s;
  padding-top:48px;
}

/* ── THEME TOGGLE BUTTON ── */
#btn-theme{
  padding:0;width:32px;height:32px;border:none;
  background:var(--hdr-btn-bg);border-radius:50%;
  color:var(--hdr-text);font-size:15px;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
  align-self:center;margin-left:8px;margin-right:10px;
}
#btn-theme:hover{background:var(--hdr-btn-hov)}

/* ── COMPACT HEADER ── */
header{
  background:var(--hdr-bg);color:var(--hdr-text);
  padding:0;height:48px;
  display:flex;align-items:stretch;gap:0;
  flex-shrink:0;z-index:1100;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:background .3s;
  overflow:hidden;
  position:fixed;top:0;left:0;right:0;
}
.sw{position:relative;flex-shrink:0;width:180px;margin:auto 0 auto 12px}
.sw input{
  width:100%;padding:6px 9px 6px 28px;
  border:1px solid var(--hdr-input-bd);border-radius:20px;
  font-size:13px;outline:none;
  background:var(--hdr-input-bg);color:var(--hdr-text);
  transition:background .3s,border-color .3s;
}
.sw input::placeholder{color:rgba(255,255,255,.5)}
.sw input:focus{border-color:var(--hdr-input-fc);background:rgba(255,255,255,.18)}
.sw .si{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);font-size:13px;pointer-events:none;
}
.mode-toggle{
  display:flex;background:var(--toggle-bg);
  border-radius:7px;padding:2px;gap:2px;flex-shrink:0;
  align-self:center;margin-left:10px;
}
.mode-btn{
  padding:4px 8px;border:none;border-radius:5px;
  font-size:11px;font-weight:700;cursor:pointer;
  color:rgba(255,255,255,.4);background:transparent;
  display:flex;align-items:center;gap:4px;
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25);
  min-height:32px;transition:all .15s;
}
.mode-btn.active{
  background:var(--btn-active-bg);color:var(--btn-active-fg);
  text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-b{background:#1e8fd4}.dot-g{background:#27ae60}
.btn-reset-hdr{
  padding:0;width:32px;height:32px;border:none;
  background:var(--hdr-btn-bg);border-radius:50%;
  color:var(--hdr-text);font-size:14px;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  align-self:center;margin-left:8px;
}
.btn-reset-hdr:hover{background:var(--hdr-btn-hov)}

/* ── MAP ── */
.map-wrap{flex:1;position:relative;overflow:hidden}
#map{width:100%;height:100%}

/* ── WALK PANEL ── */
#walk-panel{
  position:absolute;top:12px;right:12px;width:310px;
  background:var(--panel-bg);border-radius:12px;
  box-shadow:var(--panel-shadow);z-index:900;
  display:none;flex-direction:column;max-height:calc(100% - 24px);overflow:hidden;
  transition:background .3s;
}
#walk-panel.open{display:flex}
.wp-head{
  color:#fff;padding:13px 40px 11px 13px;
  border-radius:12px 12px 0 0;flex-shrink:0;position:relative;
}
.wp-head.th-blue{background:var(--grad-blue)}
.wp-head.th-green{background:var(--grad-green)}
.wp-head.th-orange{background:var(--grad-orange)}
.wp-r1{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.wp-icon{font-size:20px}
.wp-head h2{font-size:13px;font-weight:700;line-height:1.3;flex:1}
.wp-x{
  position:absolute;top:9px;right:9px;background:rgba(255,255,255,.18);
  border:none;color:#fff;width:24px;height:24px;border-radius:50%;
  cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;
}
.wp-x:hover{background:rgba(255,255,255,.3)}
.wp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:7px}
.wp-stat{background:rgba(255,255,255,.14);border-radius:5px;padding:6px 4px;text-align:center}
.wp-stat-n{font-size:16px;font-weight:800;display:block;line-height:1}
.wp-stat-l{font-size:9px;opacity:.7;letter-spacing:.05em;text-transform:uppercase;margin-top:2px;display:block}
#route-status{font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px;opacity:.85}
#rsdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);flex-shrink:0}
#btn-stops-toggle{
  display:none;width:100%;padding:8px 12px;
  background:var(--panel-faint);border:none;
  border-top:1px solid var(--panel-bd);border-bottom:1px solid var(--panel-bd);
  font-size:12px;font-weight:600;color:var(--text-label);cursor:pointer;text-align:center;
}
.stop-list{overflow-y:auto;flex:1}
.stop-item{
  display:flex;align-items:flex-start;gap:9px;padding:9px 12px;
  border-bottom:1px solid var(--panel-faint);cursor:pointer;transition:background .1s;
}
.stop-item:last-child{border-bottom:none}
.stop-item:hover{background:var(--panel-hover)}
.stop-item.hl{background:var(--panel-hl)}
.snum{
  width:24px;height:24px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.sbody{flex:1;min-width:0}
.stitle{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:1px}
.ssub{font-size:11px;color:var(--text-secondary);line-height:1.4}
.sdist{font-size:10px;font-weight:600;margin-top:2px;color:var(--text-accent)}
.stag{font-size:10px;color:#e67e22;font-weight:600}
.wp-foot{
  padding:9px 12px;border-top:1px solid var(--panel-bd);
  display:flex;gap:7px;flex-shrink:0;
}
.wp-foot .btn{flex:1;font-size:11px}
.btn{
  padding:6px 12px;border:none;border-radius:6px;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;
}
.btn-grey{
  background:var(--panel-faint);color:var(--text-label);
  border:1px solid var(--panel-bd);
}
.btn-grey:hover{background:var(--panel-hover)}

/* ── SPINNER ── */
#wp-spin{
  position:absolute;inset:0;background:rgba(255,255,255,.92);
  z-index:50;border-radius:12px;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
}
[data-theme="twilight"] #wp-spin{background:rgba(15,22,35,.92)}
#wp-spin.on{display:flex}
#wp-spin p{font-size:12px;color:var(--text-secondary);font-weight:600}
.spin{border-radius:50%;animation:spin .8s linear infinite}
.spin-sm{width:26px;height:26px;border:3px solid var(--panel-bd);border-top-color:var(--text-accent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SHARE MODAL ── */
#share-modal{
  display:none;position:absolute;inset:0;
  background:rgba(0,0,0,.5);z-index:1200;align-items:flex-end;justify-content:center;
}
#share-modal.on{display:flex}
.share-sheet{
  background:var(--panel-bg);border-radius:20px 20px 0 0;
  padding:20px 20px max(20px,env(safe-area-inset-bottom)) 20px;
  width:100%;max-width:480px;
}
.share-sheet-handle{width:40px;height:4px;background:var(--panel-bd);border-radius:2px;margin:0 auto 16px}
.share-sheet h3{font-size:15px;font-weight:700;color:var(--text-head);margin-bottom:4px}
.share-sheet p{font-size:12px;color:var(--text-secondary);margin-bottom:14px}
.share-big-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.share-big-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;
}
.share-row{display:flex;gap:7px}
.share-row input{
  flex:1;padding:8px 10px;border:1px solid var(--panel-bd);border-radius:7px;
  font-size:12px;font-family:monospace;color:var(--text-head);
  background:var(--panel-faint);outline:none;
}
#share-stops{
  font-size:11px;color:var(--text-secondary);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--panel-faint);
}
.share-close{
  display:block;width:100%;margin-top:12px;padding:12px;
  background:var(--panel-faint);border:none;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--text-label);cursor:pointer;
}

/* ── MAP OVERLAYS ── */
#pr-banner{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(27,58,107,.88);color:#fff;font-size:12px;
  padding:6px 14px;border-radius:20px;z-index:800;pointer-events:none;
}
[data-theme="twilight"] #pr-banner{background:rgba(10,15,26,.9);color:var(--hdr-text)}
#toast{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  background:var(--toast-bg);color:#fff;font-size:12px;
  padding:7px 16px;border-radius:20px;z-index:800;pointer-events:none;
  opacity:0;transition:opacity .3s;white-space:nowrap;
}
#toast.on{opacity:1}
#hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  background:var(--hint-bg);border:1px solid var(--hint-bd);
  color:var(--text-label);font-size:12px;padding:9px 16px;border-radius:8px;
  z-index:700;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.1);
  display:flex;align-items:center;gap:7px;transition:opacity .5s;white-space:nowrap;
}
#hint.gone{opacity:0}

/* ── LEGEND ── */
#btn-legend{
  position:absolute;bottom:28px;left:10px;z-index:710;
  background:var(--panel-bg);border:1px solid var(--panel-bd);
  border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;
  color:var(--text-label);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.legend{
  position:absolute;bottom:66px;left:10px;background:var(--panel-bg);
  border-radius:8px;padding:9px 12px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  z-index:700;font-size:11px;color:var(--text-label);display:none;
}
.legend strong{
  display:block;margin-bottom:5px;font-size:10px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-head);
}
.lr{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.lr:last-child{margin-bottom:0}
.ld{width:12px;height:12px;border-radius:50%;flex-shrink:0}

/* ── POPUP ── */
.wk-popup{font-size:13px;line-height:1.5;max-width:260px}
.wk-popup img{width:100%;max-height:140px;object-fit:cover;border-radius:5px;display:block;margin-bottom:6px}

/* ── CUSTOM LOCATIONS ── */
.dot-c{background:#e11d48}
.wp-head.th-red{background:var(--grad-red)}
#btn-add-loc:hover{opacity:.88}
#btn-add-loc.active{background:var(--red-dark)!important;box-shadow:0 0 0 5px rgba(225,29,72,.3)!important}
#btn-del-loc:hover{opacity:.88}
#btn-del-loc.active{background:var(--red-darkest)!important;box-shadow:0 0 0 5px rgba(127,29,29,.35)!important}
#map.add-mode{cursor:crosshair!important}
#map.del-mode{cursor:not-allowed!important}
#loc-modal{
  display:none;position:absolute;inset:0;background:rgba(0,0,0,.5);
  z-index:1200;align-items:flex-end;justify-content:center;
}
#loc-modal.on{display:flex!important}
@media(min-width:601px){
  #loc-modal{align-items:center;justify-content:center}
  #loc-modal>div{border-radius:16px;max-width:420px}
}

/* ── NAV LINK ── */
#btn-leaderboard{
  padding:0;width:32px;height:32px;border:none;
  background:var(--hdr-btn-bg);border-radius:50%;
  color:var(--hdr-text);font-size:15px;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background .15s;
}
#btn-leaderboard:hover{background:var(--hdr-btn-hov)}

/* ── MOBILE ── */
@media(max-width:600px){
  header{padding:0 8px;height:48px;gap:6px}
  .mode-btn{padding:3px 6px}
  #btn-add-loc{right:12px;width:52px;height:52px;font-size:24px}
  #walk-panel{
    width:100%!important;right:0!important;bottom:0;top:auto!important;
    border-radius:16px 16px 0 0;max-height:80vh;
  }
  #walk-panel.open{display:flex}
  .wp-head{border-radius:16px 16px 0 0;padding:12px 40px 10px 12px}
  .wp-foot{padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .wp-foot .btn{padding:10px 8px;font-size:12px}
  .stop-item{padding:10px 12px}
  #hint{font-size:11px;white-space:normal;max-width:calc(100vw - 30px);text-align:center;bottom:20px}
  #toast{bottom:16px;font-size:11px}
  #pr-banner{font-size:11px}
  #btn-legend{bottom:auto;top:10px;left:10px}
  .legend{bottom:auto;top:52px;left:10px}
}
@media(min-width:601px){
  #walk-panel{width:310px;right:12px;top:12px;border-radius:12px;max-height:calc(100% - 24px)}
  #share-modal{align-items:center;justify-content:center}
  .share-sheet{border-radius:16px;max-width:420px;padding:24px}
  .share-sheet-handle{display:none}
}


/* ── SITE NAV ── */
.site-nav {
  display: flex; align-items: center;
  flex-shrink: 0; gap: 0; height: 48px;
}
/* Site name */
.site-nav .site-name {
  display: flex; align-items: center;
  height: 48px; padding: 0 16px 0 0;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  color: #ffffff;
  border-right: 2px solid rgba(255,255,255,.2);
  margin-right: 2px; flex-shrink: 0;
}
/* Nav links */
.site-nav a.nav-link {
  display: flex; align-items: center;
  height: 48px; padding: 0 15px;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  white-space: nowrap; flex-shrink: 0;
  background: rgba(255,255,255,.06);
  margin: 0 2px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.site-nav a.nav-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,.14);
}
.site-nav a.nav-link.current {
  color: #ffffff;
  background: rgba(255,255,255,.1);
  border-bottom-color: var(--hdr-accent);
  border-radius: 4px 4px 0 0;
}

/* ── LEADERBOARD PAGE SHARED STYLES ── */
.lb-page{
  min-height:100vh;background:var(--bg);
  font-family:'Segoe UI',system-ui,sans-serif;
  display:flex;flex-direction:column;
  transition:background .3s;
}
.lb-header{
  background:var(--hdr-bg);color:var(--hdr-text);
  padding:0;height:48px;display:flex;align-items:stretch;
  box-shadow:0 2px 10px rgba(0,0,0,.28);flex-shrink:0;overflow:hidden;
}
/* .lb-header a removed — nav links must not get width:32px */
.lb-body{flex:1;padding:20px 16px;max-width:900px;margin:0 auto;width:100%}
.lb-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.lb-grid{grid-template-columns:1fr}}
.lb-card{
  background:var(--panel-bg);border-radius:12px;
  box-shadow:var(--panel-shadow);overflow:hidden;
  transition:background .3s;
}
.lb-card-head{
  padding:14px 16px 12px;border-bottom:1px solid var(--panel-bd);
  display:flex;align-items:center;gap:10px;
}
.lb-card-icon{font-size:22px}
.lb-card-title{font-size:14px;font-weight:700;color:var(--text-head)}
.lb-card-sub{font-size:11px;color:var(--text-secondary);margin-top:1px}
.lb-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--panel-faint);
  transition:background .1s;
}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:var(--panel-hover)}
.lb-rank{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;
}
.lb-rank-1{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff}
.lb-rank-2{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#fff}
.lb-rank-3{background:linear-gradient(135deg,#b45309,#d97706);color:#fff}
.lb-rank-n{background:var(--panel-faint);color:var(--text-secondary)}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-detail{font-size:11px;color:var(--text-secondary);margin-top:1px}
.lb-bar-wrap{width:90px;flex-shrink:0}
.lb-bar-bg{height:6px;background:var(--panel-faint);border-radius:3px;overflow:hidden}
.lb-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.lb-score{font-size:13px;font-weight:700;color:var(--text-accent);width:36px;text-align:right;flex-shrink:0}
.lb-badge{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;
  background:rgba(30,143,212,.15);color:var(--text-accent);flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════
   ORIENTATION-AWARE STYLES
   Phones in landscape: header shrinks, panels adjust
   Phones in portrait: full-height map, bottom sheet walks
═══════════════════════════════════════════════════════ */

/* Portrait phone — optimise vertical space */
@media (max-width: 600px) and (orientation: portrait) {
  header {
    height: 44px;
  }
  .site-nav .site-name {
    font-size: 14px;
    padding-right: 10px;
  }
  .site-nav a.nav-link {
    padding: 0 10px;
    font-size: 12px;
  }
  .sw { width: 140px; }
  .mode-btn span:last-child { display: none; } /* hide label text, keep dot */
  #walk-panel {
    width: 100% !important; right: 0 !important;
    bottom: 0; top: auto !important;
    border-radius: 16px 16px 0 0;
    max-height: 55vh;
  }
  #btn-add-loc { width: 50px; height: 50px; }
  #btn-del-loc { width: 50px; height: 50px; }
}

/* Landscape phone — header must be compact, map needs all vertical space */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    height: 38px;
  }
  .site-nav { height: 38px; }
  .site-nav .site-name {
    font-size: 13px; padding-right: 8px; height: 38px;
  }
  .site-nav a.nav-link {
    height: 38px; padding: 0 10px; font-size: 11px;
  }
  .sw { width: 120px; }
  .mode-btn { padding: 2px 5px; font-size: 10px; min-height: 26px; }
  .mode-btn span:last-child { display: none; } /* hide text, keep dot */
  /* Walk panel becomes a narrow side panel in landscape */
  #walk-panel {
    width: 260px !important;
    top: 6px !important; right: 6px !important;
    bottom: auto; border-radius: 10px !important;
    max-height: calc(100vh - 50px) !important;
  }
  #btn-add-loc { width: 40px; height: 40px; font-size: 18px; }
  #btn-del-loc { width: 40px; height: 40px; font-size: 16px; }
  #btn-capture { width: 40px; height: 40px; font-size: 16px; }
  #hint { font-size: 10px; padding: 6px 12px; bottom: 10px; }
  #toast { bottom: 10px; font-size: 10px; }
  .wp-head { padding: 8px 36px 8px 10px; }
  .wp-stat-n { font-size: 14px; }
  .stop-item { padding: 6px 10px; }
  .stitle { font-size: 11px; }
  .ssub { font-size: 10px; }
  /* Legend moves to not block map */
  #btn-legend { bottom: 10px; }
}

/* Landscape phone — leaderboard page needs scrollable body */
@media (max-height: 500px) and (orientation: landscape) {
  .lb-header { height: 38px; }
  .lb-header .site-nav { height: 38px; }
  .lb-header .site-nav .site-name { height: 38px; font-size: 13px; }
  .lb-header .site-nav a.nav-link { height: 38px; font-size: 11px; padding: 0 10px; }
  .lb-body { padding: 10px 12px 24px; }
}

/* JS adds .is-landscape / .is-portrait to <html> for JS-driven layout tweaks */
html.is-landscape .landscape-hide { display: none !important; }
html.is-portrait  .portrait-hide  { display: none !important; }

/* ── CAPTURE MODE ── */
#btn-capture {
  position:absolute;top:calc(50% - 84px);right:12px;z-index:800;
  width:48px;height:48px;border-radius:50%;border:none;
  background:#0ea5e9;color:#fff;font-size:20px;cursor:pointer;
  box-shadow:0 3px 12px rgba(14,165,233,.45);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,box-shadow .15s;
}
#btn-capture:hover{opacity:.88}
#btn-capture.active{
  background:#0284c7!important;
  box-shadow:0 0 0 5px rgba(14,165,233,.35)!important;
  animation:capture-pulse 1.5s infinite;
}
#btn-capture.gps-searching{
  background:#f59e0b!important;
  box-shadow:0 0 0 5px rgba(245,158,11,.3)!important;
}
@keyframes capture-pulse{
  0%,100%{box-shadow:0 0 0 5px rgba(14,165,233,.35)}
  50%{box-shadow:0 0 0 10px rgba(14,165,233,.1)}
}
.user-location-dot{
  width:16px;height:16px;background:#0ea5e9;
  border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 0 3px rgba(14,165,233,.4),0 2px 6px rgba(0,0,0,.3);
  animation:loc-pulse 2s infinite;
}
@keyframes loc-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(14,165,233,.4),0 2px 6px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 8px rgba(14,165,233,.1),0 2px 6px rgba(0,0,0,.3)}
}
#toast.toast-success{background:rgba(21,128,61,.95)!important}
#toast.toast-fail{background:rgba(185,28,28,.95)!important}
#captured-badge{
  position:absolute;top:calc(50% - 130px);right:8px;z-index:801;
  background:#22c55e;color:#fff;font-size:9px;font-weight:800;
  border-radius:10px;padding:2px 5px;min-width:18px;text-align:center;
  display:none;box-shadow:0 1px 4px rgba(0,0,0,.3);
}
@media(max-height:500px) and (orientation:landscape){
  #btn-capture{top:calc(50% - 66px);right:10px;width:40px;height:40px;font-size:16px}
  #captured-badge{top:calc(50% - 110px);right:6px}
}

/* ── SITE FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--hdr-bg);
  color: rgba(255,255,255,.7);
  margin-top: auto;
  flex-shrink: 0;
}
.sf-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 20px;
}
.sf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.sf-links a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: color .15s;
}
.sf-links a:hover { color: #fff; }
.sf-copy p {
  font-size: 12px;
  margin-bottom: 4px;
  color: rgba(255,255,255,.6);
}
.sf-copy p:first-child { font-weight: 700; color: rgba(255,255,255,.85); }
.sf-legal { font-size: 11px !important; color: rgba(255,255,255,.45) !important; line-height: 1.6; }

/* Pages that scroll need flex column body */
body.page-scroll {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Plaque action popup - Leaflet popup override */
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
  min-width: 240px;
  max-width: 300px;
}
.leaflet-popup-content {
  margin: 0 !important;
  width: auto !important;
}
.leaflet-popup-tip-container { margin-top: -1px; }
.plaque-popup-inner {
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.plaque-popup-head {
  background: var(--grad-blue);
  color: #fff;
  padding: 12px 14px 10px;
}
.plaque-popup-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 3px;
}
.plaque-popup-addr {
  font-size: 11px;
  opacity: .8;
  margin-bottom: 2px;
}
.plaque-popup-inscription {
  font-size: 11px;
  font-style: italic;
  opacity: .75;
  line-height: 1.4;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.plaque-popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.plaque-popup-btn {
  padding: 10px 6px;
  border: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .12s;
  border-top: 1px solid var(--panel-bd);
  background: var(--panel-bg);
  color: var(--text-primary);
  line-height: 1.3;
}
.plaque-popup-btn:not(:last-child) { border-right: 1px solid var(--panel-bd); }
.plaque-popup-btn:hover { background: var(--panel-hover); }
.plaque-popup-btn.btn-capture { color: #0ea5e9; }
.plaque-popup-btn.btn-capture:disabled { color: #22c55e; cursor: default; }
.plaque-popup-btn.btn-walk { color: var(--text-accent); }
.plaque-popup-btn.btn-close-p { color: var(--text-secondary); }








/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{background:var(--hdr-bg);color:rgba(255,255,255,.65);flex-shrink:0;border-top:1px solid rgba(255,255,255,.08)}
.sf-inner{max-width:1100px;margin:0 auto;padding:14px 20px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.sf-links{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin:0}
.sf-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:11px;font-weight:500;transition:color .15s;white-space:nowrap}
.sf-links a:hover{color:#fff}
.sf-copy{font-size:11px;color:rgba(255,255,255,.45);margin:0;flex:1;min-width:200px}
@media(max-width:600px){.sf-inner{padding:12px 16px}.sf-copy{width:100%}}