html, body { margin:0; padding:0; height:100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
  /* accessibility: honor reduced-motion + give keyboard users a visible focus ring (mouse users none) */
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
  :focus-visible { outline:2px solid #b8860b; outline-offset:2px; border-radius:3px; }
  button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline:none; }
  #hdr { background:#4e342e; color:#fff; padding:calc(7px + env(safe-area-inset-top)) 12px 7px; display:flex; align-items:center; gap:10px; height:calc(40px + env(safe-area-inset-top)); box-sizing:border-box; }
  #hdr h1 { font-size:15px; margin:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #btnPanel, #btnAbout { background:#b8860b; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
  /* the old-western letterpress look: serif small-caps, no heavy bolding */
  #btnPanel, #btnTable, #btnAbout { font-family:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif; font-weight:400; font-variant:small-caps; letter-spacing:.7px; font-size:14px; }
  .nrBtn span { font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif; font-weight:400; font-variant:small-caps; letter-spacing:1px; font-size:11.5px; }
  #authBtn { background:#b8860b; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
  #btnAbout { background:#6a4fa3; }
  #map { position:absolute; top:calc(40px + env(safe-area-inset-top)); bottom:0; left:0; right:0; z-index:0; }   /* own stacking context: map controls can never paint over app views */
  #panel { position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; bottom:0; padding-left:env(safe-area-inset-left); width:340px; max-width:100%; background:#fff; z-index:1100;
           box-shadow:2px 0 10px rgba(0,0, 0, .3); transform:translateX(-105%); transition:transform .18s ease; display:flex; flex-direction:column; }
  #panel.open { transform:none; }
  #controls { padding:10px 12px 6px; border-bottom:1px solid #ddd; flex:1 1 auto; overflow-y:auto; }
  #listWrap { flex-shrink:0; border-top:2px solid #d8cdb8; background:#faf6ee; }
  #listWrap > summary { font-size:13px; font-weight:700; color:#3a2412; cursor:pointer; padding:9px 12px; user-select:none; }
  #listWrap > summary:hover { background:#f1e9d6; }
  #listWrap[open] #hhList { max-height:42vh; overflow-y:auto; }
  body.c49dark #listWrap { background:#241f18; border-top-color:#3a3226; }
  body.c49dark #listWrap > summary { color:#f0c27b; }
  #controls details { border-top:1px solid #e4e4e4; padding:2px 0 4px; }
  #controls summary { font-size:12.5px; font-weight:700; color:#4e342e; cursor:pointer; padding:7px 8px 7px 4px; user-select:none; list-style:none; display:flex; align-items:center; gap:7px; border-radius:7px; transition:background .12s; }
  #controls summary::-webkit-details-marker { display:none; }
  #controls summary::after { content:''; margin-left:auto; flex:0 0 auto; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.5; transform:rotate(-45deg); transition:transform .18s; }
  #controls details[open] > summary::after { transform:rotate(45deg); }
  #controls summary:hover { color:#b8860b; background:rgba(184,134,11, .08); }
  #controls details[open] > *:not(summary) { animation:ckFade .18s ease; }
  @keyframes ckFade { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
  /* redesign 6: the selected honey hole pulses a 24px gold ring */
  @keyframes c49ring { 0% { box-shadow:0 0 0 0 rgba(212,175,55,.55); } 70% { box-shadow:0 0 0 13px rgba(212,175,55,0); } 100% { box-shadow:0 0 0 0 rgba(212,175,55,0); } }
  .c49ring { width:22px; height:22px; border-radius:50%; border:2px solid rgba(212,175,55,.95); box-sizing:border-box; }
  @media (prefers-reduced-motion: no-preference) { .c49ring { animation:c49ring 1.5s ease-out infinite; } }
  .ckRow { font-size:12px; color:#333; margin-bottom:6px; display:flex; align-items:flex-start; gap:5px; }
  .subWrap { margin:0 0 7px 16px; display:flex; flex-wrap:wrap; gap:3px 12px; }
  .subWrap label { font-size:12px; color:#555; display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
  .subWrap input { margin:0; }
  /* layer toggles as switches: clearer on/off at a glance than a tiny checkbox */
  .ckRow input[type=checkbox] { -webkit-appearance:none; appearance:none; margin:1px 0 0; flex:0 0 auto; cursor:pointer; width:40px; height:22px; border-radius:11px; background:#bcb4a1; border:1px solid rgba(0,0,0,.18); position:relative; transition:background .15s; }
  .ckRow input[type=checkbox]::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0, 0, .35); transition:left .15s; }
  .ckRow input[type=checkbox]:checked { background:#b8860b; }
  .ckRow input[type=checkbox]:checked::after { left:22px; }
  .ckRow input[type=checkbox]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(184,134,11, .4); }
  #controls summary .cnt { font-weight:400; color:#8a7c6c; font-size:12px; }
  .hint { font-size:12px; color:#5a5045; line-height:1.45; margin:3px 0 7px; }
  .pn { font-size:12.5px; color:#5a5045; line-height:1.4; }   /* popup note, lightened in dark mode */
  /* honey-hole popup: references block + member-contributed photo gallery */
  .refBlock { margin:5px 0 2px; }
  .refBlock > summary { cursor:pointer; font-size:12.5px; font-weight:700; color:#6a5a2a; list-style:none; padding:2px 0; }
  .refBlock > summary::-webkit-details-marker { display:none; }
  .refBlock > summary::before { content:"\25B8"; display:inline-block; margin-right:4px; transition:transform .15s; }
  .refBlock[open] > summary::before { transform:rotate(90deg); }
  .refBody { font-size:12px; color:#5a5045; line-height:1.45; border-left:2px solid #e6d28a; padding:2px 0 2px 8px; margin:3px 0 4px; }
  .refBody a { color:#1565c0; }
  .holeMedia { margin:7px 0 4px; }
  .holeMedia .hmHint { font-size:12px; color:#6a6258; }
  .holeMedia .hmTitle { font-size:12.5px; font-weight:700; color:#3a2a12; margin:0 0 4px; display:flex; align-items:center; gap:4px; }
  .holeMedia .hmGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
  .holeMedia .hmGrid img { width:100%; height:56px; object-fit:cover; border-radius:5px; border:1px solid #d8d2c4; display:block; }
  body.c49dark .refBlock > summary { color:#e6c879; }
  body.c49dark .refBody { color:#c4b9a3; border-left-color:#6a5a2a; }
  body.c49dark .holeMedia .hmHint { color:#bcae97; }
  body.c49dark .holeMedia .hmTitle { color:#f0c27b; }
  .leaflet-tooltip.deerLbl { background:transparent; border:0; box-shadow:none; padding:0; color:#4e342e; font-weight:800; font-size:14px; text-shadow:0 0 3px #fff, 0 0 5px #fff, 0 1px 2px #fff; }
  .leaflet-tooltip.deerLbl:before { display:none; }
  body.c49dark .leaflet-tooltip.deerLbl { color:#ffd98a; text-shadow:0 0 3px #000, 0 0 6px #000; }
  .authLink { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
  .authLink:hover { color:#b8860b; }
  #hhList { overflow-y:auto; }
  .hh { padding:8px 12px; border-bottom:1px solid #eee; cursor:pointer; }
  .hh:hover { background:#fdf6e3; }
  .hh b { font-size:13px; }
  .hh .sub { font-size:12.5px; color:#666; margin-top:2px; }
  .scoreChip { display:inline-block; background:#b8860b; color:#fff; border-radius:10px; padding:1px 8px; font-size:12px; font-weight:700; margin-right:6px; }
  .pop b { font-size:13px; }
  .pop td { padding:1px 4px 1px 0; font-size:12px; vertical-align:top; }
  .pop a { color:#1565c0; }
  /* an anchor wearing a button stays a BUTTON: white on its dark fill, never the popup link-blue.
     This outranks .pop a / dark-mode link rules for every <a class="popBtn"> and <a class="abtn">. */
  .pop a.popBtn, .leaflet-popup-content a.popBtn, .pop a.abtn, a.popBtn, a.abtn,
  body.c49dark .pop a.popBtn, body.c49dark .leaflet-popup-content a.popBtn, body.c49dark .pop a.abtn { color:#fff; text-decoration:none; }
  /* the legend wears the same coat as the Labels and Clear buttons when closed, and drops open
     downward beneath them like a proper menu */
  .legend { background:transparent; padding:0; box-shadow:none; font-size:12px; line-height:1.7; }
  .legend details { background:rgba(20,14,6,.86); color:#f3e2b0; border:1px solid rgba(243,226,176,.35); padding:6px 10px; border-radius:8px; font-size:12.5px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.35); line-height:1; }
  .legend details[open] { background:#fff; color:#2c2417; font-weight:400; line-height:1.7; }
  /* open: ride ABOVE everything else on the map, scroll inside, and keep the Legend header pinned
     so one click collapses it from anywhere in the list. The corner container itself must outrank
     the other corners (each Leaflet corner is its own stacking context, so the child alone cannot
     climb past the bottom-left coordinates and scale). */
  .leaflet-top.leaflet-left { z-index:1100; }
  /* keyboard users get a visible ring on whatever holds focus, and never lose it to custom styling */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
  summary:focus-visible, [onclick]:focus-visible { outline:3px solid #b8860b !important; outline-offset:2px; }
  /* honor the system high-contrast preference: hint text darkens, faded legend entries stay legible,
     borders firm up */
  @media (prefers-contrast: more) {
    .hint, .pn, .cap, .meta, .aka { color:#4a3f30 !important; }
    body.c49dark .hint, body.c49dark .pn, body.c49dark .cap { color:#d8ccb4 !important; }
    .legend .lgItem.dim { opacity:.75; }
    .abtn, .popBtn, .c49in { border:2px solid currentColor; }
  }
  .legend { position:relative; z-index:1500; }
  .legend details[open] { padding:0 10px 8px; max-height:min(62vh, 520px); overflow:auto; box-shadow:0 4px 18px rgba(0,0,0,.5); }
  .legend details[open] > summary { position:sticky; top:0; z-index:3; background:rgba(20,14,6,.94); color:#f3e2b0; font-weight:700; margin:0 -10px 4px; padding:7px 10px 6px; border-radius:8px 8px 0 0; }
  body.c49dark .legend details[open] > summary { background:#100b05; }
  .legend-old { background:#fff; padding:8px 10px; border-radius:6px; box-shadow:0 1px 5px rgba(0,0, 0, .4); font-size:12px; line-height:1.7;
            box-sizing:border-box; max-height:calc(100vh - 265px); overflow-y:auto; }   /* opened, it may never climb under the zoom control */
  .legend summary { cursor:pointer; font-size:12.5px; }
  .legend .lgItem { cursor:pointer; border-radius:5px; padding:0 3px; display:inline-block; transition:background .12s, opacity .15s; }
  .legend .lgItem:hover { background:rgba(184,134,11,.20); }
  .legend .lgItem:active { background:rgba(184,134,11,.35); }
  /* entries whose layer is currently OFF fade back, so the legend reflects what is actually on the map;
     still tappable (hovering brightens it) to turn that layer on and solo it. */
  .legend .lgItem.dim { opacity:.38; }
  .legend .lgItem.dim:hover { opacity:.72; }
  .goldClu { width:32px; height:32px; border-radius:50%; background:rgba(255,193,7, .85); border:2px solid #b26a00;
             color:#5d4000; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .honeyClu { width:34px; height:34px; border-radius:50%; background:rgba(212,175,55, .92); border:2.5px solid #241d0c;
             color:#241d0c; font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; }
  .scoutClu { width:30px; height:30px; border-radius:50%; background:rgba(255,179,0, .92); border:2px solid #7a4a00;
             color:#3a2600; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .honeyIcon { font-size:22px; line-height:26px; text-align:center; text-shadow:0 0 4px #fff, 0 1px 3px rgba(0,0, 0, .7); }
  .scoutIcon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
               font-size:14px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0, 0, .5); }
  .scoutHigh { background:#ffb300; } .scoutOper { background:#66bb6a; } .scoutOld { background:#9e9e9e; } .scoutWar { background:#8b1a1a; }
  .locBtn { width:38px; height:38px; background:#fff; border-radius:8px; box-shadow:0 1px 5px rgba(0,0, 0, .4);
            font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .gaugeIcon { font-size:16px; line-height:20px; text-align:center; text-shadow:0 0 3px #fff, 0 1px 2px rgba(0,0, 0, .6); }
  .caveIcon { font-size:18px; line-height:22px; text-align:center; text-shadow:0 0 3px #fff, 0 1px 2px rgba(0,0, 0, .7); }
  .caseIcon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
              border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0, 0, .6); color:#fff; font-size:13px; }
  .xbtn { border:none; color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px; cursor:pointer; margin:2px 4px 6px 0; }
  #aboutView { display:none; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; bottom:0; background:#fff; z-index:1060; overflow:auto; }
  #aboutInner { max-width:760px; margin:0 auto; padding:18px 20px 60px; font-size:13.5px; line-height:1.65; color:#222; }
  #aboutInner h2 { font-size:17px; color:#4e342e; border-bottom:2px solid #4e342e; padding-bottom:4px; margin:22px 0 8px; }
  #aboutInner .law { background:#fff3e6; border-left:4px solid #e65100; padding:8px 12px; border-radius:4px; }
  .popBtn { display:inline-block; background:#15314b; color:#fff; font-size:12.5px; font-weight:600; padding:4px 8px; border-radius:6px; cursor:pointer; user-select:none; }
  #btnTable { background:#0a8754; border:none; color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
  #tableView { display:none; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; bottom:0; background:#fff; z-index:1055; overflow:auto; }
  #tFilters { position:sticky; top:0; background:#f3efe6; border-bottom:1px solid #ccc; padding:8px 12px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12px; z-index:2; }
  #tFilters label { display:flex; align-items:center; gap:3px; }
  #tFilters input[type=number], #tFilters input[type=text], #tFilters select { border:1px solid #bbb; border-radius:5px; padding:3px 5px; font-size:12px; }
  #tFilters input[type=number] { width:62px; }
  #tCount { font-weight:700; color:#4e342e; }
  #gtbl { border-collapse:collapse; width:100%; font-size:12px; }
  #gtbl th { position:sticky; top:39px; background:#4e342e; color:#fff; padding:6px 8px; text-align:left; white-space:nowrap; cursor:pointer; z-index:1; }
  #gtbl th:hover { background:#6d4c41; }
  #gtbl td { padding:5px 8px; border-bottom:1px solid #eee; vertical-align:top; }
  #gtbl tr:nth-child(even) td { background:#faf7f2; }
  #gtbl tbody tr { cursor:pointer; }
  #gtbl tbody tr:hover td { background:#fdf6e3; }
  .fav1 { color:#2e7d32; font-weight:700; } .favNo { color:#c62828; }
  .commodClu { width:30px; height:30px; border-radius:50%; background:rgba(141,110,99, .85); border:2px solid #4e342e;
               color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .fungiClu { width:30px; height:30px; border-radius:50%; background:rgba(84,110,122, .85); border:2px solid #37474f;
              color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.55); }
  .fungiDot { width:15px; height:11px; border-radius:50% 50% 32% 32% / 78% 78% 30% 30%; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.6); }   /* mushroom cap: wide dome, flatter base */
  .gemDot { width:13px; height:13px; background:linear-gradient(135deg,#4dd0e1,#00acc1); border:1.5px solid #fff; box-shadow:0 0 0 1px #00838f, 0 1px 4px rgba(0,0,0,.6); transform:rotate(45deg); }
  .seepClu { width:28px; height:28px; border-radius:50%; background:rgba(2,119,189,.82); border:2px solid #01579b;
              color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
  .seepDot { width:11px; height:11px; border-radius:50%; background:#29b6f6; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
  .crawClu { width:28px; height:28px; border-radius:50%; background:rgba(178,58,30,.85); border:2px solid #7a2e12;
              color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
  .crawDot { width:11px; height:11px; border-radius:50%; background:#c0392b; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
  /* a small polite nudge on Get app for visitors who have not installed: two gentle wiggles every
     seven seconds, nothing that shouts. Honors reduced-motion. */
  @keyframes c49nudge { 0%, 90%, 100% { transform: none; } 92% { transform: rotate(-3deg) translateY(-1px); } 94% { transform: rotate(2.5deg); } 96% { transform: rotate(-1.5deg); } 98% { transform: rotate(0.5deg); } }
  @media (prefers-reduced-motion: no-preference) { #installBtn.nudge { animation: c49nudge 7s ease-in-out infinite; } }
  .stockClu { width:28px; height:28px; border-radius:50%; background:rgba(46,125,50,.85); border:2px solid #1b5e20;
              color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
  .advClu { width:26px; height:26px; border-radius:50%; background:rgba(176,0,32,.9); border:2px solid #7f0000;
              color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.5); }
  .gameDot { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ff8a65,#e64a19); border:1.5px solid #fff; box-shadow:0 0 0 1px #bf360c, 0 1px 4px rgba(0,0,0,.6); }
  .trackTip { background:rgba(26,20,10,.92); color:#f3e2b0; border:1px solid #e65100; border-radius:8px; padding:5px 9px; font-size:12.5px; line-height:1.45; box-shadow:0 3px 10px rgba(0,0,0,.5); white-space:nowrap; }
  .trackTip::before { border-right-color:#e65100; }
  .inspectIcon { width:14px; height:14px; border-radius:3px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 4px rgba(0,0, 0, .6); }
  #presetBar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px; }
  .pgLabel { width:100%; font-size:12px; color:#523d31; margin-bottom:2px; }
  /* skip-to-content link: off-screen until a keyboard user tabs to it (WCAG 2.4.1) */
  .skipLink { position:absolute; left:-9999px; top:0; z-index:6000; background:#13321f; color:#fff; padding:9px 15px; border-radius:0 0 8px 0; font-weight:700; font-size:13px; text-decoration:none; }
  .skipLink:focus { left:0; }
  /* Beginner mode: one toggle that trims the panel to the essentials for new members */
  #begBtn { width:100%; margin:0 0 7px; background:#fff; color:#2f6b50; border:1.5px solid #2f6b50; border-radius:8px; padding:7px; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  #begBtn:hover { background:#f0f7f1; }
  body.c49beginner #begBtn { background:#2f6b50; color:#fff; border-color:#2f6b50; }
  .begTip { display:none; background:#13321f; color:#dff5e6; border-radius:8px; padding:8px 10px; margin:0 0 8px; font-size:12.5px; line-height:1.5; }
  body.c49beginner .begTip { display:block; }
  body.c49beginner #controls .advSec { display:none !important; }
  body.c49dark #begBtn { background:#241f18; color:#7fd0a2; border-color:#3a7d59; }
  body.c49dark.c49beginner #begBtn { background:#2f6b50; color:#fff; }
  .presetGrp { font-size:11.5px; font-weight:700; color:#a1887f; text-transform:uppercase; letter-spacing:.3px; margin:0 1px 0 4px; }
  .preset { background:#4e342e; color:#fff; border:none; border-radius:14px; padding:4px 9px; font-size:12.5px; font-weight:600; cursor:pointer; }
  .preset:hover { background:#6d4c41; }
  #presetStatus { min-height:14px; }
  #adjustBar { background:#f3efe6; border-radius:6px; padding:6px 8px; margin-bottom:8px; font-size:12.5px; }
  #adjustBar summary { cursor:pointer; font-size:12px; margin-bottom:4px; color:#4e342e; }
  #adjustBar label { display:block; margin-bottom:2px; }
  #adjustBar input[type=range] { width:50%; vertical-align:middle; }
  .sv { display:inline-block; min-width:34px; color:#6d4c41; font-weight:700; }
  /* floating Image Lab, visible over the map so you can tune while watching */
  #imgLabBtn { position:absolute; top:346px; right:calc(10px + env(safe-area-inset-right)); z-index:1040; width:42px; height:42px; border-radius:9px;
    background:#4e342e; color:#fff; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0, 0, .45); font-size:20px; line-height:1; cursor:pointer; }
  #imgLabBtn.on { background:#b8860b; }
  #imgLab { position:absolute; right:8px; bottom:8px; z-index:1040; display:none; box-sizing:border-box; width:min(520px, calc(100vw - 16px)); max-width:calc(100vw - 16px);
    background:rgba(247,243,236, .90); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    border:1px solid #c9b9a3; border-radius:11px; box-shadow:0 3px 16px rgba(0,0, 0, .4); padding:9px 11px 10px;
    max-height:46vh; overflow:auto; font-size:12px; }
  #imgLab.show { display:block; }
  #imgLab h4 { margin:0 0 7px; font-size:13px; color:#4e342e; display:flex; align-items:center; justify-content:space-between; }
  #imgLab .ilBtn { background:#8d6e63; color:#fff; border:none; border-radius:5px; padding:2px 9px; font-size:12px; cursor:pointer; margin-left:5px; }
  #imgLab .ilGrid { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
  #imgLab .ilGrid label { display:flex; align-items:center; gap:5px; font-size:12px; color:#333; }
  #imgLab .ilGrid input[type=range] { flex:1; min-width:0; }
  #imgLab .ilChks { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:7px; }
  #imgLab .ilChks label { display:inline-flex; align-items:center; gap:3px; font-size:12.5px; }
  #imgLab select { min-width:0; max-width:100%; box-sizing:border-box; text-overflow:ellipsis; }   /* a select sizes to its longest option; keep it inside the panel */
  /* phones: the two-column slider grid was ~448px wide inside a ~340px panel and clipped the sliders.
     Stack to one column, give the panel more height with internal scroll, and clear the home-button dock. */
  @media (max-width: 640px) {
    #imgLab { left:8px; right:8px; width:auto; max-width:none; bottom:calc(8px + env(safe-area-inset-bottom)); max-height:64vh; }
    #imgLab .ilGrid { grid-template-columns:1fr; gap:2px 0; }
    #imgLab .ilGrid label { font-size:13px; }
    #imgLab .ilGrid input[type=range] { height:26px; }
    #imgLab .ilChks label { font-size:13px; }
  }
  #cmpTile { position:absolute; left:8px; bottom:8px; z-index:1041; display:none; width:min(330px, calc(100% - 16px)); background:rgba(255,255,255,.96); border:1px solid #d8d2c4; border-radius:11px; padding:10px 12px; box-shadow:0 6px 22px rgba(0,0,0,.3); }
  #cmpTile.show { display:block; }
  body.c49dark #cmpTile { background:rgba(36,31,24,.96); color:#ece4d6; border-color:#4a4636; }
  #cmpTile h4 { margin:0 0 7px; font-size:13px; color:#4e342e; display:flex; align-items:center; justify-content:space-between; }
  body.c49dark #cmpTile h4 { color:#f0c27b; }
  #cmpTile .ilBtn { background:#8d6e63; color:#fff; border:none; border-radius:5px; padding:2px 9px; font-size:12px; cursor:pointer; margin-left:5px; }
  /* Club 49 trial / membership UI */
  #trialBar { position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; right:0; z-index:1035; background:#b8860b; color:#fff;
    font-size:12px; padding:5px 10px; display:none; align-items:center; gap:8px; box-shadow:0 1px 6px rgba(0,0, 0, .35); }
  #trialBar.show { display:flex; }
  #trialBar .tjoin { background:#fff; color:#7a5a0a; font-weight:800; border:none; border-radius:6px; padding:3px 10px; cursor:pointer; white-space:nowrap; }
  #trialBar .tx { margin-left:auto; cursor:pointer; opacity:.9; font-weight:700; padding-left:6px; }
  /* persistent "which view is on" chip, floats over the map after the panel closes */
  #viewChip { position:absolute; top:calc(46px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:1034;
    display:none; align-items:center; gap:8px; max-width:min(92vw,540px);
    background:rgba(24,17,7,.9); color:#f3e2b0; border:1px solid #6b5426; border-radius:999px;
    padding:5px 6px 5px 13px; font-size:12.5px; box-shadow:0 6px 18px rgba(0,0,0,.42); }
  #viewChip.show { display:flex; }
  #viewChip .vcName { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #viewChip .vcN { flex:0 0 auto; opacity:.72; font-weight:500; }
  #viewChip .vcX { flex:0 0 auto; cursor:pointer; opacity:.85; font-weight:700; font-size:15px; line-height:1;
    background:rgba(255,255,255,.12); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
  #viewChip .vcX:hover { opacity:1; background:rgba(255,255,255,.24); }
  /* chat: date dividers + grouped-message spacing */
  .chatDay { text-align:center; margin:11px 0 7px; font-size:11.5px; color:#8a7c6c; }
  .chatDay span { background:#efe9dc; border:1px solid #e2dccf; border-radius:10px; padding:1px 10px; }
  body.c49dark .chatDay span { background:#2a2820; border-color:#4a4736; color:#c9bfa8; }
  .chatRow.grp { margin-top:2px !important; }
  /* gold ticker styled like a real exchange quote */
  #goldPill { display:flex; align-items:center; gap:8px; background:linear-gradient(180deg,#1d1910,#131009); border:1px solid #3a3122; border-radius:8px; padding:5px 10px; margin:0 0 7px; color:#e8dcc0; cursor:pointer; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
  #goldPill:empty { display:none; }
  #goldPill .tkSym { font-size:11px; font-weight:800; letter-spacing:.6px; color:#d4af37; flex:0 0 auto; }
  #goldPill .tkPx { font-size:15px; font-weight:800; color:#fff; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
  #goldPill .tkChg { font-size:12px; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:nowrap; }
  #goldPill .tkChg.up { color:#26c281; } #goldPill .tkChg.down { color:#ff5b5b; } #goldPill .tkChg.flat { color:#9a907e; }
  #goldPill .tkLive { margin-left:auto; font-size:8.5px; font-weight:800; letter-spacing:.6px; color:#8a8272; display:flex; align-items:center; gap:4px; flex:0 0 auto; }
  #goldPill .tkLive i { width:6px; height:6px; border-radius:50%; background:#26c281; }
  @media (prefers-reduced-motion: no-preference) { #goldPill .tkLive i { animation:tkpulse 1.9s infinite; } }
  @keyframes tkpulse { 0%{box-shadow:0 0 0 0 rgba(38,194,129,.5)} 70%{box-shadow:0 0 0 5px rgba(38,194,129,0)} 100%{box-shadow:0 0 0 0 rgba(38,194,129,0)} }
  .ckRow.locked > label { opacity:.55; }
  .lockTag { color:#8a6d0a; font-weight:700; font-size:11px; margin-left:4px; cursor:pointer; }
  #authModal, #adminModal { display:none; position:absolute; inset:0; z-index:1300; background:rgba(20,12,4, .62); align-items:center; justify-content:center; }
  #authModal.show, #adminModal.show { display:flex; }
  #authModal .box, #adminModal .box { background:#fff; border-radius:15px; padding:22px 22px; width:330px; max-width:90vw; text-align:center; box-shadow:0 14px 44px rgba(0,0, 0, .55); }
  #authModal h3, #adminModal h3 { margin:6px 0 8px; color:#3a2a12; font-size:19px; }
  #authModal p { font-size:12.5px; color:#555; margin:0 0 10px; line-height:1.5; }
  #authModal .cx, #adminModal .cx { display:block; margin-top:13px; color:#6f655a; font-size:12px; cursor:pointer; }
  .abtn { background:#8d6e63; color:#fff; border:none; border-radius:8px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; margin:2px; }
  .abtn.app { background:#0a8754; } .abtn.rej { background:#c62828; }
  .arow { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #eee; padding:8px 2px; font-size:13px; }
  .arow > div:last-child { white-space:nowrap; }
  #spotList { margin-top:5px; }
  #spotList .spot { font-size:12px; border-bottom:1px solid #eee; padding:5px 0; display:flex; gap:7px; align-items:flex-start; }
  #spotList .spot .sgo { cursor:pointer; flex:1; min-width:0; }
  #spotList .spot .sgo b { color:#4e342e; }
  #spotList .spot .sx { color:#c62828; cursor:pointer; font-weight:700; }
  .c49in { width:100%; box-sizing:border-box; padding:8px 10px; border:1.5px solid #9c8c72; border-radius:7px; font-size:13.5px; margin-bottom:5px; }
  .c49in:focus { outline:none; border-color:#b8860b; box-shadow:0 0 0 2px rgba(184,134,11, .25); }

  /* ===== higher contrast across the board ===== */
  #controls summary { font-size:13px; color:#3a2412; }
  .ckRow { font-size:12.5px; color:#1f1a12; }
  .subWrap label { color:#3a342a; }
  .hint { color:#5b5345; }
  .hh .sub { color:#544; }
  #controls summary .cnt { color:#7a6c5c; }
  body.c49dark #controls summary .cnt { color:#9a8d7c; }   /* measured 3.4:1 on the dark panel without this; ~5.3:1 with it (WCAG AA) */
  #hdr { border-bottom:2px solid #2e1d14; }

  /* ===== honey-hole quick-jump dropdown (bottom of filters) ===== */
  #hhJumpWrap { padding:8px 12px 10px; border-top:2px solid #e0d8c8; background:#faf6ee; }
  #hhJumpWrap label { font-size:12px; font-weight:700; color:#3a2412; display:block; margin-bottom:4px; }
  #hhJump { width:100%; box-sizing:border-box; padding:9px 10px; border:1.5px solid #9c8c72; border-radius:7px; font-size:13.5px; background:#fff; color:#1f1a12; }
  #hhJumpWrap .lk { font-size:12px; color:#8a6d0a; font-weight:700; margin-top:4px; }

  /* ===== Share / Invite + Community modals reuse the auth modal shell ===== */
  #shareModal, #commModal, #hubModal, #analysisModal, #dmModal, #shareSpotModal, #annModal, #workModal, #journalModal, #notifModal, #profileModal, #aiModal, #briefModal, #planModal, #provenModal, #riversModal, #dlcModal, #expModal, #whatsNewModal, #chalModal, #legendsModal, #promiseModal, #consentModal, #rockModal, #marketModal, #speciesModal, #forageModal, #gemGuideModal, #radioModal, #flightModal, #kitModal, #queryModal, #creatorModal { display:none; position:absolute; inset:0; z-index:1300; background:rgba(20,12,4, .62); align-items:center; justify-content:center; }
  #shareModal.show, #commModal.show, #hubModal.show, #analysisModal.show, #dmModal.show, #shareSpotModal.show, #annModal.show, #workModal.show, #journalModal.show, #notifModal.show, #profileModal.show, #aiModal.show, #briefModal.show, #planModal.show, #provenModal.show, #riversModal.show, #dlcModal.show, #expModal.show, #whatsNewModal.show, #chalModal.show, #legendsModal.show, #promiseModal.show, #consentModal.show, #rockModal.show, #marketModal.show, #speciesModal.show, #forageModal.show, #gemGuideModal.show, #radioModal.show, #flightModal.show, #kitModal.show, #queryModal.show, #creatorModal.show { display:flex; }
  #legendsModal .box, #rockModal .box, #marketModal .box, #speciesModal .box, #forageModal .box, #gemGuideModal .box, #radioModal .box, #flightModal .box, #kitModal .box, #queryModal .box, #creatorModal .box { background:linear-gradient(180deg,#fbf6ea,#f1e6cd); border:1px solid #d8c9a3; border-radius:15px; padding:18px; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:92vh; overflow:auto; text-align:left; }
  /* tall modals anchor to the TOP and size against the DYNAMIC viewport, so the header can never
     clip above a phone screen (the iOS vh trap: 92vh of the layout viewport is taller than what
     the browser actually shows, and flex-centering pushes the title off the top, unreachable). */
  #radioModal, #speciesModal, #forageModal, #gemGuideModal, #flightModal, #kitModal, #queryModal, #creatorModal { align-items:flex-start; }
  #radioModal .box, #speciesModal .box, #forageModal .box, #gemGuideModal .box, #flightModal .box, #kitModal .box, #queryModal .box {
    margin-top:max(12px, env(safe-area-inset-top)); box-sizing:border-box; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  body.c49dark #legendsModal .box, body.c49dark #rockModal .box, body.c49dark #marketModal .box, body.c49dark #speciesModal .box, body.c49dark #forageModal .box, body.c49dark #gemGuideModal .box, body.c49dark #radioModal .box, body.c49dark #flightModal .box, body.c49dark #kitModal .box, body.c49dark #queryModal .box, body.c49dark #creatorModal .box { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  .spCard .warn { font-size:12px; line-height:1.5; margin-top:4px; color:#b00020; } .spCard .warn b { color:#b00020; }
  /* the club airwaves wears walnut and brass: wood grain, a carved plate, a stitched leather mic */
  .awCard { border:1px solid #6b4a2a; border-radius:12px; padding:11px 12px; margin:7px 0;
    background:linear-gradient(180deg,#43301c,#2c1d10) , repeating-linear-gradient(92deg, rgba(0,0,0,.12) 0 3px, transparent 3px 9px);
    background-blend-mode:multiply; box-shadow:inset 0 1px 0 rgba(255,220,150,.12), 0 2px 8px rgba(0,0,0,.4); }
  .awPlate { font-family:Georgia,serif; font-weight:700; letter-spacing:2px; font-size:12.5px; color:#d9b36a;
    text-align:center; border:1px solid #8a6a35; border-radius:6px; padding:3px 8px; margin:0 auto 7px; width:fit-content;
    background:linear-gradient(180deg,#4a3418,#3a2a16); text-shadow:0 1px 0 #1a1108; }
  .awText { font-size:12px; line-height:1.5; color:#e0d0ac; }
  .awLbl { font-size:10.5px; font-weight:700; letter-spacing:1.6px; color:#a8895c; font-family:Georgia,serif; }
  .awNum { font-size:30px; font-weight:800; color:#e8c15a; font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 8px rgba(232,193,90,.35); }
  .awDial { background:linear-gradient(180deg,#5a4326,#3f2e18); color:#e8d5a8; border:1px solid #7a5a30; border-radius:8px;
    padding:6px 13px; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,220,150,.15); }
  .awDial:active { transform:translateY(1px); }
  .awMic { width:100%; padding:16px; border-radius:12px; color:#f3e8cd; font-weight:800; font-size:15px; cursor:pointer;
    user-select:none; -webkit-user-select:none; touch-action:none; letter-spacing:1px;
    background:linear-gradient(180deg,#3f6b4f,#2a4d38); border:2px dashed rgba(243,232,205,.35); outline:2px solid #24422f; outline-offset:-5px;
    box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
  .awMic.tx { background:linear-gradient(180deg,#a03227,#7c231b); outline-color:#5e1a13; }
  .awStatus { font-size:12.5px; color:#b8a281; margin-top:6px; text-align:center; min-height:14px; }
  .spCard { border:1px solid #e2d6bb; border-radius:10px; padding:9px 11px; margin:7px 0; background:rgba(255,255,255,.5); }
  body.c49dark .spCard { background:rgba(255,255,255,.05); border-color:#4a4030; }
  .spCard h4 { margin:0 0 2px; font-size:14.5px; color:#3a2a12; } body.c49dark .spCard h4 { color:#f0e7d6; }
  .spCard .aka { font-size:12px; color:#8a7c6c; font-weight:600; }
  .spCard .row { font-size:12px; line-height:1.5; margin-top:4px; } .spCard .row b { color:#2f6b50; }
  .spFam { position:sticky; top:0; background:linear-gradient(180deg,#fbf6ea,#fbf6ea); padding:6px 2px 3px; font-weight:800; color:#7a4a1e; font-size:13px; border-bottom:1px solid #e2d6bb; z-index:1; }
  body.c49dark .spFam { background:#241f18; color:#e8c15a; }
  .spTab { display:inline-block; padding:3px 9px; margin:0 5px 5px 0; border-radius:14px; border:1px solid #cbb98f; background:#fff; color:#5a4a2e; font-size:12px; cursor:pointer; }
  .spTab.on { background:#7a4a1e; color:#fff; border-color:#7a4a1e; } body.c49dark .spTab { background:#2a241b; color:#d8c9a3; }
  .lgCard { border:1px solid #e0d4ba; border-radius:10px; padding:10px 12px; margin:0 0 9px; background:rgba(255,255,255,.55); }
  body.c49dark .lgCard { background:rgba(255,255,255,.05); border-color:#4a4030; }
  .lgCard h4 { margin:0 0 3px; font-size:14px; color:#3a2a12; } body.c49dark .lgCard h4 { color:#f0d9a8; }
  .lgArea { font-size:12px; color:#9c5a00; font-weight:700; } body.c49dark .lgArea { color:#e0a800; }
  .lgCard p { margin:5px 0; font-size:12.5px; line-height:1.45; color:#3a3228; } body.c49dark .lgCard p { color:#d8cdbb; }
  .lgBtns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
  #promiseModal { z-index:2600; background:rgba(20,12,4,.8); }
  #promiseModal .box { background:#fff; border-radius:15px; padding:20px; max-width:94vw; width:480px; box-shadow:0 14px 44px rgba(0,0,0,.6); text-align:left; max-height:92vh; overflow:auto; }
  body.c49dark #promiseModal .box { background:#241f18; color:#ece4d6; }
  .promiseLine { display:flex; gap:9px; align-items:flex-start; padding:7px 0; }
  .promiseLine b { color:#1f6b3f; } body.c49dark .promiseLine b { color:#7fd0a2; }
  .promiseLine .pchk { flex:0 0 auto; color:#1f6b3f; font-weight:800; }
  #dlcModal .box, #expModal .box, #whatsNewModal .box, #chalModal .box { background:#fff; border-radius:15px; padding:18px; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0,0,.55); max-height:92vh; overflow:auto; text-align:left; }
  body.c49dark #dlcModal .box, body.c49dark #expModal .box, body.c49dark #whatsNewModal .box, body.c49dark #chalModal .box { background:#241f18; color:#ece4d6; }
  /* dark-mode contrast for the newer modals' theme colors (expedition brown + the pledge, challenge green) */
  body.c49dark [style*="color:#5b3a1a"] { color:#e8c98c !important; }
  body.c49dark #chalModal h3 { color:#7fd0a2 !important; }
  .chalCard { border:1px solid #e3ddcf; border-radius:10px; padding:11px 13px; margin:9px 0; }
  body.c49dark .chalCard { border-color:#3a342a; background:#2a251d; }
  .chalCard h4 { margin:0 0 2px; font-size:14.5px; color:#3a2a12; } body.c49dark .chalCard h4 { color:#f0c27b; }
  .chalProg { height:8px; border-radius:5px; background:#e3d6b6; overflow:hidden; margin:7px 0 4px; } body.c49dark .chalProg { background:#3a3326; }
  .chalProg > i { display:block; height:100%; background:linear-gradient(90deg,#b8860b,#2e7d32); }
  .chalBadge { display:inline-block; background:#1f6b3f; color:#fff; font-size:12px; font-weight:800; border-radius:9px; padding:2px 9px; }
  .wnItem { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid #eee3cf; }
  body.c49dark .wnItem { border-top-color:#3a342a; }
  .wnItem .wnIco { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:#7a4a1e; color:#fff; display:flex; align-items:center; justify-content:center; }
  .wnItem h4 { margin:0 0 1px; font-size:13.5px; color:#3a2a12; } body.c49dark .wnItem h4 { color:#f0c27b; }
  .wnItem div.wnTxt { font-size:12px; color:#555; } body.c49dark .wnItem div.wnTxt { color:#c4b9a3; }
  /* Expeditions: an explorer-journal feel (warm parchment in light, lantern-lit in dark) */
  #expModal .box { background:linear-gradient(180deg,#fbf6ea,#f3ead4); border:1px solid #d8c9a3; }
  body.c49dark #expModal .box { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; }
  .expCard { border:1px solid #d8c9a3; border-radius:10px; padding:11px 13px; margin:9px 0; background:rgba(255,255,255,.55); }
  body.c49dark .expCard { border-color:#4a4030; background:rgba(255,255,255,.04); }
  .expCard h4 { margin:0 0 3px; font-size:15px; color:#5b3a1a; letter-spacing:.2px; }
  body.c49dark .expCard h4 { color:#e8c98c; }
  .expProg { height:7px; border-radius:5px; background:#e3d6b6; overflow:hidden; margin:7px 0 4px; }
  body.c49dark .expProg { background:#3a3326; }
  .expProg > i { display:block; height:100%; background:linear-gradient(90deg,#b8860b,#d8b258); }
  .expSeal { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 7px; border-radius:9px; }
  .expSeal.locked { background:#5b4636; color:#f0e2c8; } .expSeal.open { background:#1f6b3f; color:#fff; }
  /* Rally flag: the loud recruitment banner that waves at the top of the group so people want to join */
  .rallyFlag { position:relative; margin:0 0 10px; padding:11px 13px 11px 46px; border-radius:10px; color:#fff5e1;
    background:linear-gradient(135deg,#7a4a1e,#9c5a1f 55%,#b8860b); border:1px solid #d8b258; box-shadow:0 4px 16px rgba(0,0,0,.32); overflow:hidden; }
  .rallyFlag::before { content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%); width:22px; height:26px;
    background:#f0e2c8; clip-path:polygon(0 0,100% 0,100% 78%,50% 62%,0 78%); box-shadow:0 1px 3px rgba(0,0,0,.4); }
  .rallyFlag .rfPole { position:absolute; left:22px; top:8px; bottom:8px; width:3px; background:#3a2412; border-radius:2px; }
  .rallyFlag h4 { margin:0 0 2px; font-size:14.5px; color:#fff; letter-spacing:.3px; }
  .rallyFlag .rfCta { display:inline-block; margin-top:7px; background:#1f6b3f; color:#fff; font-weight:800; font-size:12.5px; border:none; border-radius:8px; padding:6px 14px; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.35); }
  .rallyFlag .rfCta:hover { background:#258a4f; }
  .rallyFlag .rfProg { height:7px; border-radius:5px; background:rgba(0,0,0,.28); overflow:hidden; margin:7px 0 0; }
  .rallyFlag .rfProg > i { display:block; height:100%; background:linear-gradient(90deg,#ffd98a,#fff); }
  @keyframes rfWave { 0%,100%{ transform:translateY(-50%) skewY(0deg);} 50%{ transform:translateY(-50%) skewY(-4deg);} }
  .rallyFlag::before { animation:rfWave 2.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .rallyFlag::before { animation:none; } }
  .dlcCard { border:1px solid #e3ddcf; border-radius:10px; padding:10px 12px; margin:8px 0; }
  body.c49dark .dlcCard { border-color:#3a342a; background:#2a251d; }
  .dlcCard h4 { margin:0 0 2px; font-size:14px; color:#3a2a12; }
  body.c49dark .dlcCard h4 { color:#f0c27b; }
  .dlcCard .meta { font-size:12px; color:#8a7c6c; margin-top:3px; }
  .dlcKind { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:#ede4d2; color:#6a5a2a; border-radius:10px; padding:1px 7px; vertical-align:middle; }
  body.c49dark .dlcKind { background:#3a3320; color:#e6c879; }
  .dlcTab { background:none; border:none; border-bottom:2px solid transparent; color:#6a5a45; font-size:13px; font-weight:700; padding:6px 8px; cursor:pointer; }
  .dlcTab.on { color:#5e3a8c; border-bottom-color:#5e3a8c; }
  body.c49dark .dlcTab { color:#cdbfa6; } body.c49dark .dlcTab.on { color:#c4a6ec; border-bottom-color:#c4a6ec; }
  #consentModal { z-index:5000; background:rgba(20,12,4, .9); }   /* blocking: highest, darkest, no easy dismiss */
  #consentModal .box { background:#fff; border-radius:15px; padding:22px; max-width:94vw; width:440px; box-shadow:0 14px 44px rgba(0,0,0,.6); text-align:left; }
  body.c49dark #consentModal .box { background:#241f18; color:#ece4d6; }
  #planModal .box, #provenModal .box, #riversModal .box { background:#fff; border-radius:15px; padding:20px; max-width:96vw; width:520px; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:92vh; overflow:auto; text-align:left; }
  body.c49dark #planModal .box, body.c49dark #provenModal .box, body.c49dark #riversModal .box { background:#241f18; color:#ece4d6; }
  .planRow { display:flex; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px solid #eee3cf; cursor:pointer; }
  body.c49dark .planRow { border-bottom-color:#3a342a; }
  .planRow:hover { background:#fbf4dd; } body.c49dark .planRow:hover { background:#2c2519; }
  .spin { display:inline-block; width:15px; height:15px; border:2px solid #d8d2c4; border-top-color:#9c7c33; border-radius:50%; animation:c49spin .7s linear infinite; vertical-align:-3px; margin-right:5px; }
  @keyframes c49spin { to { transform:rotate(360deg); } }
  /* "Rendering" pill for the slow USGS raster layers (LiDAR + historic topo), so the map never looks frozen */
  #mapLoading { position:fixed; left:50%; top:74px; transform:translateX(-50%) translateY(-6px); z-index:1200; display:flex; align-items:center; gap:8px; background:rgba(36,29,12,.93); color:#f3e2b0; border:1px solid #c9a04a; border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:600; box-shadow:0 6px 18px rgba(0,0, 0, .4); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
  #mapLoading.show { opacity:1; transform:translateX(-50%) translateY(0); }
  #mapLoading .ldSpin { display:inline-block; width:14px; height:14px; border:2px solid rgba(243,226,176,.35); border-top-color:#f3e2b0; border-radius:50%; animation:c49spin .7s linear infinite; }
  /* live coordinate readout (grouped with the scale bar); monospace so digits don't jitter as they change */
  .coordBox { background:rgba(20,14,6,.82); color:#f3e2b0; font:600 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:4px 9px; border-radius:7px; cursor:pointer; box-shadow:0 1px 5px rgba(0,0, 0, .4); user-select:none; white-space:nowrap; margin-bottom:5px; }
  .wfTri { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:12px solid #00acc1; filter:drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
  .tlTag { width:16px; height:16px; background:#1f6b3f; color:#fff; font-weight:800; font-size:12px; border-radius:4px; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-shadow:0 0 0 1px #555; }
  /* Guide accordion drawers */
  .gsec { border:1px solid #d8cdb0; border-radius:10px; margin:10px 0; background:#fbf7ec; }
  .gsec > summary { cursor:pointer; padding:10px 14px; list-style-position:inside; }
  .gsec > summary h2 { display:inline; margin:0; font-size:17px; border:none; padding:0; }
  .gsec[open] > summary { border-bottom:1px dashed #d8cdb0; }
  .gsec .gbody { padding:4px 16px 12px; }
  body.c49dark .gsec { background:#241f18; border-color:#4a4030; }
  body.c49dark .gsec[open] > summary { border-bottom-color:#4a4030; }
  /* ===== Car Mode: big-target, glanceable layout for vehicle screens and mounted phones ===== */
  body.c49car #hdr, body.c49car #trialBar, body.c49car #dockClub, body.c49car #dockTools, body.c49car .legend, body.c49car #labelsMapBtn { display:none !important; }
  body.c49car #map { top:0 !important; }
  #carRail { display:none; position:fixed; right:calc(12px + env(safe-area-inset-right)); top:50%; transform:translateY(-50%); flex-direction:column; gap:14px; z-index:1250; }
  #carRail button { width:106px; height:90px; background:rgba(20,14,6,.93); color:#f3e2b0; border:2px solid #b8860b; border-radius:16px; font-weight:800; font-size:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0, 0, .5); }
  #carRail button:active { transform:scale(.96); background:#b8860b; color:#1a1206; }
  #carRail .ci { transform:scale(1.9); line-height:0; }
  body.c49car .locBtn { transform:scale(1.6); transform-origin:bottom right; }
  body.c49car .leaflet-control-zoom a { width:52px !important; height:52px !important; line-height:52px !important; font-size:26px !important; }
  body.c49car .coordBox { font-size:15px; padding:7px 12px; }
  @media (max-width: 480px) { #carRail button { width:86px; height:76px; font-size:13px; } #carRail { gap:10px; } }
  /* the big buttons must never cover what they opened: while any modal or the side panel is up,
     the rail steps aside (returns the moment the sheet closes) */
  body.c49car:has([id$="Modal"].show) #carRail, body.c49car:has(#panel.open) #carRail { display:none !important; }
  #carFollowBtn.on { background:#0a8754; border-color:#0f6b45; color:#eafff3; }
  #carHud { min-height:22px; text-align:center; color:#ffd54f; font-weight:800; font-size:20px; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; }
  .coordBox:hover { background:rgba(40,28,12,.92); }
  /* consistent, teaching "nothing here yet" block for empty member panels */
  .emptyState { text-align:center; padding:26px 18px 22px; }
  .emptyState .esIcon { opacity:.38; margin-bottom:7px; line-height:0; }
  .emptyState .esIcon svg { width:34px; height:34px; }
  .emptyState .esTitle { font-weight:800; font-size:14.5px; color:#4e342e; margin-bottom:4px; }
  .emptyState .esSub { font-size:12.5px; line-height:1.55; color:#6a6258; max-width:290px; margin:0 auto 13px; }
  .emptyState .esCta { display:inline-block; width:auto; padding:8px 18px; }
  body.c49dark .emptyState .esTitle { color:#ece4d6; }
  body.c49dark .emptyState .esSub { color:#b8ad9a; }
  .hmBtn { flex:1; background:#efe8d8; border:1px solid #d8d2c4; border-radius:6px; padding:4px 0; cursor:pointer; color:#4e342e; font-size:12px; }
  .hmBtn.on { background:#6d4c41; color:#fff; border-color:#6d4c41; }
  body.c49dark .hmBtn { background:#2c2519; color:#d8cfb6; border-color:#4a4636; }
  body.c49dark .hmBtn.on { background:#9c7c33; color:#fff; }
  #swipeBar { display:none; position:absolute; top:0; bottom:0; width:0; border-left:3px solid #fff; box-shadow:0 0 6px rgba(0,0,0,.6); z-index:455; cursor:ew-resize; }
  #swipeBar .grip { position:absolute; top:50%; left:-15px; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; color:#6d4c41; font-size:14px; }
  #map3d { display:none; position:fixed; inset:0; z-index:3000; background:#0a0a0a; }
  #map3d.show { display:block; }
  #map3dCanvas { position:absolute; inset:0; }
  #map3dBar { position:absolute; top:10px; left:10px; right:10px; z-index:5; display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:rgba(20,14,6,.85); color:#f3e2b0; padding:7px 10px; border-radius:10px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
  #map3dBar .hmBtn { flex:0 0 auto; padding:4px 9px; }
  /* Collapsible 3D bar: the middle controls live in #d3barTools, which flows inline exactly as before
     (display:contents) but can be hidden as one unit so a guided flyover has the whole screen. Back +
     the Controls toggle stay pinned. */
  #d3barTools { display:contents; }
  #map3dBar.collapsed #d3barTools { display:none; }
  #map3dBar.collapsed #map3dMsg { display:none; }
  #map3dBar.collapsed { right:auto; width:max-content; max-width:calc(100vw - 20px); }
  #d3barToggle::after { content:'\25B4'; margin-left:5px; font-size:11px; opacity:.85; }
  #map3dBar.collapsed #d3barToggle::after { content:'\25BE'; }
  #d3labels.on { background:#b8860b; color:#1a1206; }
  /* On-map "Labels" quick toggle (2D), so satellite names are one tap away without opening the panel */
  .c49MapBtn { background:rgba(20,14,6,.86); color:#f3e2b0; border:1px solid rgba(243,226,176,.35); border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35); display:inline-flex; align-items:center; gap:5px; line-height:1; }
  .c49MapBtn:hover { background:rgba(40,28,12,.95); }
  .c49MapBtn.on { background:#b8860b; color:#1a1206; border-color:#e8c15a; }
  .c49FlatBtn { border-color:rgba(212,175,55,.7); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.25); }
  .c49FlatBtn:hover { background:linear-gradient(180deg,#e6c15c,#c49a2c); color:#1a1206; }
  .c49MapBtn svg { width:15px; height:15px; }
  #map3dHint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:5; background:rgba(20,14,6,.8); color:#f3e2b0; padding:5px 12px; border-radius:9px; font-size:12.5px; }
  /* ===== Guided 3D journeys (Seven Wonders + the Gold Road): the cinematic caption card ===== */
  #jrSel, #d3overlay, #d3quick, #d3detect, #d3markers { flex:0 0 auto; background:#2a1d0c; color:#f3e2b0; border:1px solid #6a5320; border-radius:7px; padding:4px 6px; font-size:12px; font-weight:700; cursor:pointer; max-width:180px; }
  #d3overlay option, #jrSel option, #d3quick option, #d3detect option, #d3markers option { background:#241a08; color:#f3e2b0; }
  #d3markers.on { border-color:#e8c15a; }
  #d3detect.on, #jrSel.on { border-color:#e8c15a; }
  #map3dCanvas.lab3d { filter:contrast(1.12) saturate(1.18) brightness(1.03); }   /* "Enhance": the Image Lab pop, for 3D */
  #jrCard { display:none; position:absolute; left:50%; bottom:52px; transform:translateX(-50%); z-index:6;
    width:min(440px, calc(100vw - 24px)); box-sizing:border-box; background:linear-gradient(180deg,rgba(28,20,8,.94),rgba(18,12,5,.96));
    color:#f5ead0; border:1px solid #6a5320; border-radius:14px; padding:13px 15px; box-shadow:0 10px 34px rgba(0,0,0,.6); text-align:left; }
  #jrCard.show { display:block; animation:c49BoxIn .3s var(--c49-ease); }
  #jrName { font-size:11.5px; text-transform:uppercase; letter-spacing:1.4px; color:#c9a04a; font-weight:800; }
  #jrTitle { font-size:17px; font-weight:800; margin:2px 0 4px; color:#f7e9c6; }
  #jrBlurb { font-size:12.5px; line-height:1.5; color:#e4d6b6; min-height:34px; }
  #jrProg { height:4px; background:rgba(255,255,255,.14); border-radius:3px; margin:9px 0 8px; overflow:hidden; }
  #jrProg > div { height:100%; width:0; background:linear-gradient(90deg,#d4af37,#e8c15a); border-radius:3px; transition:width .5s ease; }
  #jrCtrls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  #jrCtrls button { flex:0 0 auto; background:#3a2a12; color:#f3e2b0; border:1px solid #6a5320; border-radius:8px; padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .12s var(--c49-ease), background .12s; }
  #jrCtrls button:hover { background:#4e380f; } #jrCtrls button:active { transform:scale(.94); }
  #jrCtrls .jrPrimary { background:#b8860b; color:#241a06; border-color:#b8860b; }
  #jrReliefBtn.on { background:#1f6b3f; border-color:#1f6b3f; color:#fff; }
  @media (max-width:640px){ #jrCard { bottom:44px; padding:11px 12px; } #jrTitle { font-size:15.5px; } }
  #briefModal .box { background:#fff; border-radius:15px; padding:0; max-width:96vw; width:560px; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:92vh; overflow:auto; }
  body.c49dark #briefModal .box { background:#241f18; color:#ece4d6; }
  #briefBody { padding:20px 22px; }
  #briefBody h2 { font-size:16px; color:#4e342e; margin:0 0 2px; } body.c49dark #briefBody h2 { color:#f0c27b; }
  #briefBody h4 { font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:#8a7c6c; margin:14px 0 4px; border-bottom:1px solid #e6ddc9; padding-bottom:3px; }
  body.c49dark #briefBody h4 { color:#caa86a; border-bottom-color:#3a342a; }
  #briefBody ol, #briefBody ul { margin:4px 0; padding-left:18px; }
  #briefBody li { margin:3px 0; }
  #briefBody .kv { font-size:13px; line-height:1.6; }
  @media print {
    body * { visibility:hidden !important; }
    #briefModal, #briefModal * { visibility:visible !important; }
    #briefModal { position:absolute; inset:0; background:#fff; display:block !important; }
    #briefModal .box { box-shadow:none; max-height:none; width:100%; border-radius:0; }
    .briefHide { display:none !important; }
  }
  #aiModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #aiModal .box { background:#241f18; color:#ece4d6; }
  #aiResult a { color:#1565c0; } body.c49dark #aiResult { color:#e7ddcd; }
  #profileModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #profileModal .box { background:#241f18; color:#ece4d6; }
  body.c49dark #emojiPanel, body.c49dark #gifPanel { background:#241f18; border-color:#3a342a; }
  #notifModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #notifModal .box { background:#241f18; color:#ece4d6; }
  #workModal .box, #journalModal .box { background:#fff; border-radius:15px; padding:20px; max-width:94vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #workModal .box, body.c49dark #journalModal .box { background:#241f18; color:#ece4d6; }
  /* the find journal is leather-bound, same family as the club airwaves: a parchment page inside an
     oxblood cover, stitched along the seam */
  #journalModal .box { border:12px solid transparent; border-radius:14px;
    background: linear-gradient(180deg,#fdf8ec,#f3e9d2) padding-box,
                linear-gradient(160deg,#5e3a22,#402512 60%,#2e1a0c) border-box;
    outline:2px dashed rgba(240,220,180,.45); outline-offset:-8px;
    box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 0 18px rgba(90,60,30,.12); }
  body.c49dark #journalModal .box { background: linear-gradient(180deg,#241f18,#1d1812) padding-box,
    linear-gradient(160deg,#5e3a22,#402512 60%,#2e1a0c) border-box; }
  .gtruth { background:#eef6ee; border:1px solid #cfe6cf; border-radius:6px; padding:5px 7px; margin:5px 0; font-size:12.5px; color:#2f5a2f; }
  body.c49dark .gtruth { background:#1a241a; border-color:#2f5a2f; color:#9fd49f; }
  .workTabs { display:flex; gap:4px; border-bottom:1px solid #e2dccf; flex-wrap:wrap; }
  .wtab { background:transparent; border:0; padding:7px 9px; font-size:12.5px; font-weight:600; color:#6a6258; cursor:pointer; border-bottom:2px solid transparent; }
  .wtab.on { color:#15314b; border-bottom-color:#b8860b; }
  body.c49dark .wtab { color:#bcae97; } body.c49dark .wtab.on { color:#f0c27b; }
  .gigCard { border:1px solid #e2dccf; border-radius:10px; padding:10px 11px; margin-bottom:8px; }
  body.c49dark .gigCard { border-color:#3a342a; background:#2a251d; }
  .gigKind { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; vertical-align:middle; }
  .gk-hiring { background:#b8860b; } .gk-paid { background:#2f6b50; } .gk-shares { background:#9c7c33; } .gk-rec { background:#15314b; } .gk-equipment { background:#6a4fa3; } .gk-mentor { background:#8d6e63; }
  .gigRep { display:flex; align-items:center; gap:6px; font-size:12px; color:#6a6258; margin:6px 0; }
  body.c49dark .gigRep { color:#bcae97; }
  .repBadge { font-size:11px; font-weight:700; color:#6a5a2a; background:#fbf4dd; border:1px solid #e6d28a; border-radius:20px; padding:1px 7px; }
  body.c49dark .repBadge { background:#33301f; color:#e6c879; border-color:#6a5a2a; }
  .chipBtn { font-size:12.5px; padding:4px 9px; border-radius:20px; border:1px solid #d8d2c4; background:#fff; color:#5a5045; cursor:pointer; }
  .chipBtn.on { background:#15314b; color:#fff; border-color:#15314b; }
  body.c49dark .chipBtn { background:#2a251d; color:#cdbfa6; border-color:#3a342a; }
  #annModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #annModal .box { background:#241f18; color:#ece4d6; }
  #shareSpotModal .box { background:#fff; border-radius:15px; padding:20px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); max-height:90vh; overflow:auto; }
  body.c49dark #shareSpotModal .box { background:#241f18; color:#ece4d6; }
  #shareModal .box, #commModal .box, #hubModal .box, #analysisModal .box, #dmModal .box { background:#fff; border-radius:15px; padding:20px; width:340px; max-width:92vw; box-shadow:0 14px 44px rgba(0,0, 0, .55); text-align:center; max-height:90vh; overflow:auto; }
  #commModal .box, #hubModal .box, #analysisModal .box, #dmModal .box { width:420px; text-align:left; }
  .anFactor { display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0; color:#1f1a12; }
  .anDot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
  .anBar { height:10px; border-radius:6px; background:#e7ddc9; overflow:hidden; }
  .anBar > div { height:100%; background:linear-gradient(90deg, #b8860b, #d4af37); }
  .shareGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
  .shareGrid a, .shareGrid button { display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
    border:none; cursor:pointer; border-radius:9px; padding:11px 8px; font-size:13px; font-weight:700; color:#fff; }
  .sh-sms{background:#0a8754}.sh-fb{background:#1877f2}.sh-x{background:#111}.sh-wa{background:#25d366}.sh-em{background:#6a4fa3}.sh-cp{background:#b8860b}
  #refLink { width:100%; box-sizing:border-box; font-size:12px; padding:8px; border:1.5px solid #9c8c72; border-radius:7px; text-align:center; color:#3a2412; background:#faf6ee; }
  .credPill { display:inline-block; background:#b8860b; color:#fff; font-weight:800; border-radius:20px; padding:3px 11px; font-size:12.5px; }
  .post { border:1px solid #e2dccf; border-radius:10px; padding:9px; margin-bottom:9px; background:#fbf8f2; }
  .post img { width:100%; border-radius:7px; display:block; margin-bottom:6px; max-height:240px; object-fit:cover; }
  .fvb { display:inline-flex; align-items:center; background:#1d4a31; color:#d7f0c9; border:1px solid #2f6b50; border-radius:6px; padding:1px 7px; font-size:11px; font-weight:800; letter-spacing:.5px; vertical-align:middle; }
  .fvb-corner { position:absolute; top:5px; left:5px; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.4); }
  .cvPin { background:none; border:none; }
  .cvPinIn { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #e05a4e, #a52f24); border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.45); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; padding-left:2px; box-sizing:border-box; }
  .cvPlayBtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(165,47,36,.92); border:2px solid #fff; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; padding-left:3px; box-sizing:border-box; box-shadow:0 3px 12px rgba(0,0,0,.5); }
  #flatModal { display:none; position:absolute; inset:0; z-index:1400; background:rgba(20,12,4,.72); align-items:flex-start; justify-content:center; overflow:auto; }
  #flatModal.show { display:flex; }
  #flatModal .fmBox { background:linear-gradient(180deg,#fbf6ea,#f1e6cd); border:1px solid #d8c9a3; border-radius:15px; padding:18px; width:min(96vw,600px); margin:12px; box-shadow:0 14px 44px rgba(0,0,0,.55); }
  #flatModal canvas { max-width:100%; border-radius:50%; box-shadow:0 0 0 3px #b8860b, 0 0 0 8px #5b3a1a, 0 6px 22px rgba(0,0,0,.5); }
  .fmBtn { background:rgba(20,14,6,.9); color:#f3e2b0; border:1px solid rgba(243,226,176,.4); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
  .fmBtn:hover { background:#3a2a12; }
  .fmBtn.on { background:#b8860b; color:#241d0c; border-color:#b8860b; }
  .fmSw { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,.35); box-shadow:0 0 0 .5px rgba(255,255,255,.4); }
  #flatModal .fmCtl { display:flex; gap:7px; justify-content:center; align-items:center; margin-top:10px; flex-wrap:wrap; }
  #flatModal .fmZoomGrp { display:inline-flex; }
  #flatModal .fmZoomGrp .fmBtn { min-width:34px; }
  #flatModal .fmZoomGrp .fmBtn:first-child { border-radius:8px 0 0 8px; }
  #flatModal .fmZoomGrp .fmBtn:last-child { border-radius:0 8px 8px 0; margin-left:-1px; }
  #flatModal .fmLegend { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px 16px; }
  #flatModal .fmGrpH { font:700 10px/1 Georgia,serif; letter-spacing:.8px; text-transform:uppercase; color:#9a875f; margin:0 0 7px; padding-bottom:4px; border-bottom:1px solid rgba(90,58,26,.16); }
  #flatModal .fmGrid { display:flex; flex-direction:column; gap:5px; }
  .fmChip { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:rgba(20,14,6,.05); color:#3a2a12; border:1px solid rgba(90,58,26,.18); border-radius:8px; padding:7px 10px; font:600 12.5px Georgia,serif; cursor:pointer; transition:background .12s,border-color .12s; }
  .fmChip:hover { background:rgba(184,134,11,.14); border-color:rgba(184,134,11,.4); }
  .fmChip.on { background:#b8860b; color:#241d0c; border-color:#b8860b; font-weight:700; }
  .fmChip.on .fmSw { border-color:rgba(0,0,0,.5); }
  body.c49dark #flatModal .fmGrpH { color:#c9b487; border-color:rgba(255,255,255,.12); }
  body.c49dark .fmChip { background:rgba(255,255,255,.05); color:#ece4d6; border-color:rgba(255,255,255,.13); }
  body.c49dark .fmChip:hover { background:rgba(184,134,11,.22); }
  body.c49dark .fmChip.on { background:#b8860b; color:#241d0c; }
  #flatModal.fs .fmBox { width:100vw; height:100dvh; max-width:none; border-radius:0; margin:0; padding:10px 10px 6px; overflow:auto; }
  body.c49dark #flatModal .fmBox { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  /* EXPEDITION DESK rail: one column, every station, desktop only */
  #navRail { display:none; }
  @media (min-width: 900px) {
    #navRail { display:flex; flex-direction:column; gap:2px; position:absolute; top:calc(40px + env(safe-area-inset-top)); left:0; bottom:0; width:58px; background:linear-gradient(180deg,#2a2014,#1d1610); border-right:1px solid rgba(214,178,87,.28); z-index:1150; padding:8px 0; }
    .nrBtn { background:none; border:none; color:#cdbb92; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px; font-size:10.5px; font-weight:700; letter-spacing:.2px; border-left:3px solid transparent; border-right:3px solid transparent; }
    .nrBtn svg { width:20px; height:20px; }
    .nrBtn:hover { color:#f3e2b0; background:rgba(214,178,87,.09); }
    .nrBtn.on { color:#f0c27b; border-left-color:#d6b257; background:rgba(214,178,87,.14); }
    #map, #aboutView, #tableView, #panel { left:58px; }
    #dockClub, #aiFab, #dockTools, #dockRadio { display:none !important; }
  }
  .post .meta { font-size:12px; color:#7a6c5c; }
  .post .cap { font-size:13px; color:#1f1a12; margin:2px 0; }
  .commTabs { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px; }
  #panelClose { display:none; }
  @media (max-width: 640px) { #panelClose { display:block; width:100%; box-sizing:border-box; background:#47453a; color:#efe3bf; border:none; padding:9px; font-size:14px; font-weight:700; cursor:pointer; } }

  /* ===== "How are you liking it?" review invite (guests, after real use) ===== */
  #reviewModal { display:none; position:absolute; inset:0; z-index:1600; background:rgba(20,12,4,.72); align-items:center; justify-content:center; }
  #reviewModal.show { display:flex; }
  #reviewModal .box { background:#fff; border-radius:16px; padding:20px; width:360px; max-width:calc(100vw - 24px); max-height:90vh; overflow:auto; box-shadow:0 16px 48px rgba(0,0, 0, .55); text-align:left; }
  body.c49dark #reviewModal .box { background:#241f18; color:#ece4d6; }
  body.c49dark #reviewModal .box p, body.c49dark #reviewModal .box h3 { color:#ece4d6; }
  #revStars { display:flex; justify-content:center; gap:8px; font-size:32px; line-height:1; margin:2px 0 12px; }
  #revStars span { cursor:pointer; color:#d8cdb0; user-select:none; transition:transform .08s; }
  #revStars span.on { color:#e8b923; text-shadow:0 1px 2px rgba(0,0, 0, .18); }
  #revStars span:active { transform:scale(1.18); }

  /* the inline-positioned floating controls also clear a landscape notch on the right */
  #dockClub, #aiFab, #dockTools { right:calc(10px + env(safe-area-inset-right)) !important; }

  /* ===== DARK MODE (UI chrome; map imagery stays) ===== */
  body.c49dark { background:#15110b; }
  body.c49dark #hdr { background:#1c1812; border-bottom-color:#000; }
  body.c49dark #panel, body.c49dark #aboutView, body.c49dark #tableView { background:#1e1a14; color:#ece4d6; }
  body.c49dark #controls { border-bottom-color:#332c22; }
  body.c49dark #controls details { border-top-color:#332c22; }
  body.c49dark #controls summary { color:#f0c27b; }
  body.c49dark #controls summary:hover { color:#ffd98a; }
  body.c49dark .ckRow { color:#e7ddcd; }
  body.c49dark .ckRow input[type=checkbox] { background:#5a5446; border-color:rgba(0,0, 0, .35); }
  body.c49dark .ckRow input[type=checkbox]:checked { background:#caa133; }
  body.c49dark .subWrap label { color:#cdc2ad; }
  body.c49dark .hint { color:#c4b9a3; }
  body.c49dark .pgLabel { color:#cdbfa6; }
  body.c49dark [style*="color:#15314b"] { color:#86b4ea !important; }   /* navy job titles -> readable blue on dark */
  #jobsLinks a:hover .jl-title, #usaJobsList a:hover { text-decoration:underline; }
  body.c49dark .hint[style*="f3efe6"], body.c49dark #adjustBar { background:#2a241b !important; }
  body.c49dark .c49in, body.c49dark #hhJump, body.c49dark #homeAddr, body.c49dark #refLink,
  body.c49dark #tFilters input, body.c49dark #tFilters select { background:#2a241b; color:#ece4d6; border-color:#4a4030; }
  body.c49dark [style*="background:#f0eadf"] { background:#33301f !important; border-color:#4a4030 !important; color:#e6c879 !important; }   /* chat/comment photo, emoji, GIF buttons */
  body.c49dark [style*="background:#faf6ee"] { background:#1c1812 !important; }                                                            /* chat log + inline cream panels */
  body.c49dark #hhJumpWrap { background:#241f18; border-top-color:#3a3226; }
  body.c49dark #hhJumpWrap label { color:#f0c27b; }
  body.c49dark .hh { border-bottom-color:#2c261d; }
  body.c49dark .hh:hover { background:#2a241b; }
  body.c49dark .hh b { color:#f3e7cf; }
  body.c49dark .hh .sub { color:#b3a892; }
  body.c49dark #panel > div[style*="border-bottom"] { color:#ece4d6 !important; }
  body.c49dark #authModal .box, body.c49dark #adminModal .box, body.c49dark #shareModal .box, body.c49dark #commModal .box, body.c49dark #hubModal .box, body.c49dark #analysisModal .box, body.c49dark #dmModal .box { background:#241f18; color:#ece4d6; }
  body.c49dark .anFactor { color:#e7ddcd; }
  body.c49dark #hubHead h3, body.c49dark #hubPerks > div:first-child { color:#f0c27b; }
  body.c49dark #hubPerks > div { color:#cdc2ad !important; }
  body.c49dark #authModal h3, body.c49dark #adminModal h3 { color:#f0c27b; }
  /* dark-mode rescue: any hardcoded dark inline text becomes readable */
  body.c49dark [style*="3a2a12"], body.c49dark [style*="3a2412"], body.c49dark [style*="3a2a10"] { color:#f0c27b !important; }
  body.c49dark [style*="1f1a12"], body.c49dark [style*="241d0c"] { color:#e7ddcd !important; }
  body.c49dark [style*="color:#555"], body.c49dark [style*="color:#666"], body.c49dark [style*="color:#5a5045"],
  body.c49dark [style*="color:#7a6c5c"], body.c49dark [style*="color:#333"], body.c49dark [style*="color:#444"],
  body.c49dark [style*="color:#6a6258"], body.c49dark [style*="color:#8a7c6c"], body.c49dark [style*="color:#3a342a"],
  body.c49dark [style*="color:#555"], body.c49dark [style*="color:#8d6e63"], body.c49dark [style*="color:#5a5045"],
  body.c49dark [style*="color:#6f655a"], body.c49dark [style*="color:#6a5045"], body.c49dark [style*="color:#5a504"] { color:#c4b9a3 !important; }
  /* dark mode: the walkthrough card has an inline white background, so its recolored (light) title/body
     would be light-on-white. Force the card dark (!important beats the inline style) so every step reads. */
  body.c49dark #tourTip { background:#241f18 !important; color:#ece4d6 !important; box-shadow:0 12px 44px rgba(0,0,0,.72); }
  /* walkthrough: premium card polish (accent bar, step icon, progress bar, animated ring) */
  #tourTip { overflow:hidden; }
  #tourAccent { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#f6dd88,#d4af37,#a8801f); }
  #tourHd { display:flex; align-items:center; gap:9px; margin-bottom:2px; }
  #tourIcon { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:16px; background:linear-gradient(180deg,#fbf1cf,#e9cf86); color:#5a4310; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  body.c49dark #tourIcon { background:linear-gradient(180deg,#4a3d1c,#33280f); color:#f0d9a8; }
  #tourProg { height:5px; background:rgba(0,0,0,.09); border-radius:3px; margin:11px 0 3px; overflow:hidden; }
  body.c49dark #tourProg { background:rgba(255,255,255,.12); }
  #tourProg > div { height:100%; width:0; background:linear-gradient(90deg,#d4af37,#b8902f); border-radius:3px; transition:width .35s ease; }
  #tourBack { background:none; border:none; color:#6f655a; font-size:12.5px; cursor:pointer; padding:6px 8px; }
  #tourBack:hover { color:#3a2a12; } body.c49dark #tourBack:hover { color:#f0d9a8; }
  #tourTip.in { animation: tourpop .3s cubic-bezier(.2,.8,.3,1); }
  @keyframes tourpop { from { opacity:0; transform:translateY(10px) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { #tourTip.in { animation:none; } #tourProg > div { transition:none; } }
  body.c49dark [style*="color:#6a5a2a"], body.c49dark [style*="color:#8a6d0a"] { color:#e6c879 !important; }
  body.c49dark .post .meta, body.c49dark .arow span { color:#a99e89 !important; }
  body.c49dark #authModal p { color:#c9bfac; }
  body.c49dark .post { background:#2a241b; border-color:#3a3226; }
  body.c49dark .post .cap { color:#ece4d6; }
  body.c49dark #aboutInner { color:#e7ddcd; }
  body.c49dark #aboutInner h2 { color:#f0c27b; border-bottom-color:#6d4c41; }
  body.c49dark #gtbl td { border-bottom-color:#2c261d; }
  body.c49dark #gtbl tr:nth-child(even) td { background:#241f18; }
  body.c49dark #tFilters { background:#241f18; border-bottom-color:#3a3226; }

  /* ===== MOBILE (phones / narrow) ===== */
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  @media (max-width: 640px) {
    #hdr { gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 7px; scrollbar-width:none; -ms-overflow-style:none; }
    #hdr::-webkit-scrollbar { display:none; }
    #hdr h1 { display:none; }
    .hlbl { display:none; }                       /* icon-only toolbar on phones so every button fits, no sideways scroll */
    #hdr button { font-size:13px; padding:7px 8px; flex-shrink:0; }
    #hdr .preset { padding:6px 6px; font-size:12px; }
    #regionSel { max-width:64px; font-size:12px; }      /* compact "CA..." on phones, full list on tap */
    /* phones: the wordmark hides, so let the LOGO carry the brand, a touch larger + a crisper ring */
    #brandLogo, #brandEmblem { width:36px; height:36px; border-width:2.5px; box-shadow:0 1px 7px rgba(0,0, 0, .65); }
    #brand { margin-right:2px; }
    #hdr button { min-height:40px; }                    /* comfortable thumb targets */
    .abtn, .xbtn, .popBtn, .chipBtn { min-height:42px; }
    #panel { width:100%; max-width:100%; }
    #controls { padding:12px 14px 8px; }
    #controls summary { font-size:14px; padding:9px 0 8px; }
    .ckRow { font-size:14px; gap:8px; margin-bottom:9px; align-items:center; }
    .ckRow input[type=checkbox] { width:40px; height:22px; flex-shrink:0; }
    .subWrap { gap:7px 14px; margin-left:18px; }
    .subWrap label { font-size:13px; }
    .subWrap input[type=checkbox] { width:17px; height:17px; }
    .preset { font-size:13px; padding:8px 13px; }
    .hh { padding:13px 14px; }
    .hh b { font-size:15px; }
    .hh .sub { font-size:13px; }
    #hhJump { font-size:16px; padding:12px; }   /* 16px stops iOS zoom-on-focus */
    .c49in, #homeAddr { font-size:16px; padding:11px; }
    .xbtn, .abtn { font-size:14px; padding:9px 13px; }
    .pop b { font-size:15px; } .pop td { font-size:14px; }
    .leaflet-popup-content { font-size:14px; }
    .legend { font-size:13px; max-width:calc(100vw - 78px); }   /* opened, it stops short of the right-hand button stack */
    #dockClub, #aiFab, #dockTools { width:46px !important; height:46px !important; }   /* comfortable thumb targets */
    /* On a phone the filter bar wraps to several rows. The old build trapped it in a tiny 108px
       inner-scroll box, which clipped the burn filter, the search field and the CSV button (it looked
       broken). Instead let it scroll away with the page and pin the dark table header to the top, the
       expected mobile-table pattern. The app's top bar stays above the table for navigation. */
    #tFilters { font-size:13px; gap:6px 11px; padding:7px 10px; position:static; max-height:none; overflow:visible; }
    #tFilters input[type=number], #tFilters input[type=text], #tFilters select { font-size:16px; padding:4px 5px; }
    #tFilters input[type=number] { width:58px; }
    #gtbl th, #gtbl td { padding:8px 7px; font-size:13px; }
    #gtbl th { top:0; }   /* filters scroll away above it, so the header pins to the top of the scroll area */
    /* the data table is too wide for a phone, so show only the columns that matter on the go
       (Type, Name, Score, Miles, Claim). The rest stay on desktop and in each spot's popup. */
    #gtbl .c-placers, #gtbl .c-lode, #gtbl .c-rock, #gtbl .c-catch,
    #gtbl .c-fpw, #gtbl .c-bench, #gtbl .c-burn, #gtbl .c-detail { display:none; }
    #gtbl .c-name { max-width:42vw; white-space:normal; word-break:break-word; }
  }

  /* ===== map markers + Leaflet UI contrast (read over ANY basemap) ===== */
  .honeyIcon { text-shadow:0 0 4px #fff, 0 0 2px #fff, 0 1px 3px rgba(0,0, 0, .9); }
  .gaugeIcon, .caveIcon { text-shadow:0 0 3px #fff, 0 0 2px #fff, 0 1px 2px rgba(0,0, 0, .85); }
  .scoutIcon, .caseIcon, .inspectIcon { box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 5px rgba(0,0, 0, .6); }
  .goldClu, .commodClu, .honeyClu, .scoutClu { box-shadow:0 0 0 1px rgba(0,0, 0, .25), 0 1px 6px rgba(0,0, 0, .55); text-shadow:0 1px 1px rgba(255,255,255, .4); }
  .leaflet-popup-content-wrapper { box-shadow:0 3px 16px rgba(0,0, 0, .5); }
  .legend { box-shadow:0 2px 10px rgba(0,0, 0, .5); }
  .leaflet-bar a { font-weight:700; color:#2a1d12; }
  .leaflet-control-layers-toggle { box-shadow:0 1px 5px rgba(0,0, 0, .5); }
  /* popup never taller/wider than the screen (scrolls instead of forcing zoom) */
  .leaflet-popup-content { max-height:60vh; overflow-y:auto; overflow-x:hidden; margin:11px 13px; }
  .leaflet-popup-content-wrapper { max-width:90vw; }
  .pop table { width:100%; } .pop td { vertical-align:top; }
  .pop td:first-child { white-space:nowrap; padding-right:7px; color:#7a6c5c; }
  .pop td:last-child { word-break:break-word; }
  /* crisp, high-contrast map scale */
  .leaflet-control-scale-line { font-weight:700; font-size:12.5px; color:#1f1a12; background:rgba(255,255,255, .94); border:2px solid #555; border-top:none; padding:1px 6px; line-height:1.4; box-shadow:0 1px 4px rgba(0,0, 0, .45); text-shadow:none; }
  /* dark mode: lift low-contrast reds (claim warnings, etc.) */
  body.c49dark [style*="c62828"] { color:#ff8a8a !important; }
  body.c49dark .favNo { color:#ff8a8a !important; }

  /* DARK MODE: make Leaflet's own white chrome match the dark UI */
  body.c49dark .leaflet-popup-content-wrapper, body.c49dark .leaflet-popup-tip { background:#241f18; color:#ece4d6; }
  body.c49dark .leaflet-popup-content, body.c49dark .pop, body.c49dark .pop b { color:#ece4d6; }
  body.c49dark .pn, body.c49dark .pop .pn { color:#c4b9a3; }
  body.c49dark .pop td:first-child { color:#b6a88f; }
  body.c49dark .leaflet-popup-content a, body.c49dark .pop a { color:#82b6ff; }
  body.c49dark .leaflet-popup-close-button { color:#cdbfa6; }
  body.c49dark .leaflet-control-layers, body.c49dark .legend,
  body.c49dark .leaflet-control-attribution, body.c49dark .leaflet-control-scale-line { background:#241f18 !important; color:#ece4d6 !important; border-color:#4a4030 !important; }
  body.c49dark .leaflet-control-attribution a { color:#82b6ff; }
  body.c49dark .leaflet-bar a { background:#241f18; color:#ece4d6; border-bottom-color:#3a3226; }
  body.c49dark .leaflet-bar a:hover { background:#322b21; }
  body.c49dark .leaflet-control-layers-toggle { filter:invert(1) hue-rotate(180deg); }
  /* dark mode fixes the NEW legend structure: the card is the details element now, and faded
     (off) entries need more presence against the dark card */
  body.c49dark .legend { background:transparent !important; }
  body.c49dark .legend details { background:#241f18; color:#ece4d6; border:1px solid #4a4030; }
  body.c49dark .legend .lgItem.dim { opacity:.55; }
  /* TRUE NIGHT: dark mode drops a moonlight filter over the map imagery itself (markers, popups and
     controls ride separate panes and stay bright), and NASA's Black Marble city lights screen-blend
     on top, so at night the towns genuinely glow. */
  body.c49dark .leaflet-tile-pane { filter:brightness(.55) saturate(.6) contrast(1.06); }
  .nightLights { mix-blend-mode:screen; }
  body.c49dark .locBtn { background:#241f18; color:#ece4d6; box-shadow:0 1px 5px rgba(0,0, 0, .6); }

  /* ===== Club 49 brand (logo vibe: dark olive + antique gold + silver ring) ===== */
  #hdr { background:linear-gradient(180deg, #3a3830, #28271e); border-bottom:2px solid #c9a04a; gap:8px; }
  #brand { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
  #brandLogo, #brandEmblem { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:2px solid #cfcdc4; box-shadow:0 1px 5px rgba(0,0, 0, .55); }
  #brandLogo { object-fit:cover; background:#28271e; }
  #betaChip { border:1px solid #c9a04a; color:#e8c15a; font-size:9px; font-weight:800; letter-spacing:1.2px; padding:1px 5px; border-radius:5px; vertical-align:middle; margin-left:4px; }
  #brandEmblem { align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-.5px; color:#d4af37; background:radial-gradient(circle at 50% 36%, #46443a, #211f18); }
  /* region dropdown: one compact control instead of per-state chips; new states = new options */
  #regionSel { flex-shrink:0; background:#3f3a30; color:#e8ddc2; border:1px solid #5a5546; border-radius:7px;
    padding:5px 4px; font-size:12.5px; font-weight:700; cursor:pointer; max-width:120px; }
  #regionSel:hover { background:#4e473a; }
  #regionSel option { background:#2a271f; color:#ece4d6; }
  @media (max-width: 640px) { #regionSel { max-width:64px; font-size:12px; } }   /* re-stated AFTER the base rule so it wins the cascade on phones */

  /* the open surface shows on its header button: a gold underline says "you are here" */
  #hdr button.on { box-shadow:inset 0 -3px 0 var(--c49-gold-hi), inset 0 1px 0 rgba(255,255,255,.14), var(--c49-shadow-1); filter:brightness(1.12); }

  /* the wordmark NEVER clips: "Club 49" is the floor (min-content), "Prospecting" gives way first */
  #hdr h1 { font-size:14px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#ecd9a6; margin:0; display:flex; align-items:baseline; gap:6px; overflow:hidden; min-width:min-content; }
  #hdr h1 .wm { flex:0 0 auto; white-space:nowrap; }
  #hdr h1 .sub { font-weight:600; letter-spacing:2px; color:#b6a884; font-size:12px; flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width: 980px) { #hdr h1 .sub { display:none; } #hdr { gap:8px; } }   /* mid widths: logo + CLUB 49, whole and unclipped */
  #brand { min-width:min-content; }   /* the brand box may NEVER shrink under its wordmark: no sibling can sit on the 49 again */
  @media (max-width: 900px) { #hdr .hlbl { display:none; } }   /* mid widths: icon-only toolbar buttons so the row always fits */
  #btnPanel, #btnTable, #btnAbout { background:#47453a; color:#efe3bf; border:1px solid #5c5849; }
  #btnPanel:hover, #btnTable:hover, #btnAbout:hover { background:#54513f; }
  #adminBtn { display:none; background:#8a6a2a !important; border:none; color:#fff; font-size:13px; font-weight:700; padding:6px 12px; border-radius:6px; cursor:pointer; flex-shrink:0; }
  #authBtn { background:#c9a04a; color:#241d0c; border:1px solid #e6c878; font-weight:800; }
  #authBtn:hover { background:#d8b258; }
  body.c49dark #hdr { background:linear-gradient(180deg, #222019, #161410); border-bottom-color:#9c7c33; }
  @media (max-width: 640px) { #hdr h1 { display:none; } #brand { flex:0 0 auto; } }

  /* refinement: calmer, less candy-bright palette, closer to the badge */
  #presetSelect { width:100%; box-sizing:border-box; padding:9px 10px; font-size:14px; font-weight:600; border:1.5px solid #9c8c72; border-radius:7px; background:#fff; color:#1f1a12; cursor:pointer; }
  body.c49dark #presetSelect { background:#2a241b; color:#ece4d6; border-color:#4a4030; }
  .adminTabs .active { box-shadow:0 0 0 2px #c9a04a; outline:none; }
  .swd, .swc { display:inline-block; width:9px; height:9px; border:1px solid #fff; box-shadow:0 0 0 1px #999; vertical-align:middle; margin:0 3px 0 1px; }
  .swd { transform:rotate(45deg); } .swc { border-radius:50%; }
  .abtn.app { background:#2f6b50; }
  /* one distinct hue per channel (only ONE green = WhatsApp) so a quick glance reads cleanly */
  .sh-sms { background:#46637a; } .sh-fb { background:#2d5aa0; } .sh-x { background:#2a2622; }
  .sh-wa { background:#2f8f5a; } .sh-em { background:#6a4fa3; } .sh-cp { background:#9c7c33; }
  /* align inline icons + label inside buttons */
  #hdr button, .abtn, .popBtn, .xbtn { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
  .preset { border-radius:7px; background:#3f3a30; }
  .preset:hover { background:#4e473a; }
  .scoreChip, .credPill { background:#9c7c33; }
  .popBtn { border-radius:6px; }
  #trialBar { background:#3a3830; border-bottom:2px solid #c9a04a; color:#f0e6cf; box-shadow:0 1px 6px rgba(0,0,0,.4); }
  #trialBar .tjoin { background:#c9a04a; color:#241d0c; }
  #dockClub { background:#2f6b50 !important; }
  #darkBtn { background:#3f3a30; }
  /* gradient strokes for the belts (defs live in the hidden SVG) + a soft glow for depth */
  .beltGoldLine { stroke:url(#beltGold) !important; filter:drop-shadow(0 0 2px rgba(212,175,55,.55)); }
  .beltSerpLine { stroke:url(#beltSerp) !important; filter:drop-shadow(0 0 2px rgba(63,155,70,.5)); }
  /* subtle in-hue gradient depth on primary buttons + chips (polished, not cartoonish) */
  .abtn.app { background:linear-gradient(180deg, #34795b, #275842); }
  .scoreChip, .credPill { background:linear-gradient(180deg, #b3913f, #876b26); }
  #trialBar .tjoin { background:linear-gradient(180deg, #d6b257, #b8902f); color:#241d0c; }

  /* crisp non-emoji map markers, each layer a DISTINCT shape */
  .scoutDot { width:15px; height:15px; border:2px solid #fff; border-radius:3px; transform:rotate(45deg); box-shadow:0 0 0 1px rgba(0,0, 0, .35), 0 1px 4px rgba(0,0, 0, .55); display:flex; align-items:center; justify-content:center; }   /* DIAMOND */
  .scoutDot .pip { width:5px; height:5px; border-radius:50%; background:#fff; }
  .commTri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; filter:drop-shadow(0 1px 3px rgba(0,0, 0, .6)); }   /* TRIANGLE */
  .inspectIcon { border:2px solid #fff; border-radius:3px; }   /* SQUARE */
  .spotPin, .gaugePin { filter:drop-shadow(0 1px 2px rgba(0,0, 0, .55)); }

  /* ============================================================
     CRAFT PASS - the finishing coat. One coherent design language:
     tokens, frontier-serif display headings, tactile buttons, live
     modals, branded popups, styled scrollbars. Sits last so it wins.
     ============================================================ */
  :root {
    --c49-gold:#b8860b; --c49-gold-hi:#d4af37; --c49-ink:#241d0c; --c49-brown:#4e342e;
    --c49-shadow-1:0 1px 3px rgba(31,26,18,.22);
    --c49-shadow-2:0 6px 18px rgba(31,26,18,.28);
    --c49-shadow-3:0 18px 50px rgba(20,12,4,.5);
    --c49-ease:cubic-bezier(.2,.75,.3,1);
  }
  ::selection { background:var(--c49-gold-hi); color:var(--c49-ink); }

  /* Frontier serif for display headings: the single strongest "not a template" cue.
     Body copy stays in the clean system sans; only titles carry the character. */
  #hdr h1, .box h2, .box h3, #aboutView h2, #tourBody b:first-child,
  #legendsModal h3, #expModal h3, #chalModal h3, .lgCard h4, .expCard h4, .chalCard h4 {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    letter-spacing:.25px;
  }
  #hdr h1 { font-weight:600; }
  #hdr { background:linear-gradient(180deg,#553a31,#48302a); }

  /* Tactile buttons: an inner top highlight + a real hover lift + a press.
     This trio is what separates crafted UI from flat fills. */
  .abtn, .popBtn, #btnPanel, #btnAbout, #authBtn, #btnTable, #adminBtn, #installBtn, .tjoin, .sh-cp, .shareGrid a, .shareGrid button {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--c49-shadow-1);
    transition:transform .14s var(--c49-ease), box-shadow .14s var(--c49-ease), filter .14s var(--c49-ease);
  }
  .abtn:hover, .popBtn:hover, #btnPanel:hover, #btnAbout:hover, #authBtn:hover, #btnTable:hover, #adminBtn:hover, #installBtn:hover, .tjoin:hover, .shareGrid a:hover, .shareGrid button:hover {
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--c49-shadow-2);
    filter:brightness(1.05);
  }
  .abtn:active, .popBtn:active, #btnPanel:active, #btnAbout:active, #authBtn:active, .tjoin:active, .shareGrid a:active, .shareGrid button:active {
    transform:translateY(0) scale(.985);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18), var(--c49-shadow-1);
    filter:brightness(.97);
  }
  .abtn[disabled] { opacity:.55; transform:none !important; filter:none !important; cursor:default; }

  /* Floating map buttons: alive under the finger */
  #dockClub, #aiFab, #dockTools, .locBtn {
    transition:transform .16s var(--c49-ease), box-shadow .16s var(--c49-ease);
  }
  #dockClub:hover, #aiFab:hover, #dockTools:hover, .locBtn:hover { transform:scale(1.07); }
  #dockClub:active, #aiFab:active, #dockTools:active, .locBtn:active { transform:scale(.94); }

  /* Modals arrive, they do not just appear */
  @keyframes c49BoxIn { from { opacity:0; transform:translateY(9px) scale(.975); } to { opacity:1; transform:none; } }
  [id$="Modal"].show .box { animation:c49BoxIn .24s var(--c49-ease); }

  /* Branded map popups: gold-edged paper instead of stock Leaflet white */
  .leaflet-popup-content-wrapper { border-radius:12px; border:1px solid rgba(184,134,11,.32); box-shadow:0 4px 9px rgba(31,26,18,.18), var(--c49-shadow-3); }
  .leaflet-popup-tip { box-shadow:var(--c49-shadow-1); }
  .leaflet-container a.leaflet-popup-close-button { transition:transform .14s var(--c49-ease), color .14s; }
  .leaflet-container a.leaflet-popup-close-button:hover { transform:scale(1.15); color:var(--c49-gold); }

  /* Inputs that answer the touch */
  .c49in { transition:border-color .15s, box-shadow .15s; }
  .c49in:focus { border-color:var(--c49-gold); box-shadow:0 0 0 3px rgba(184,134,11,.16); outline:none; }
  body.c49dark .c49in:focus { box-shadow:0 0 0 3px rgba(212,175,55,.22); }

  /* Slim branded scrollbars in the panel and every modal (default 17px grey bars scream unfinished) */
  #controls, #hhList, .box, #adminBody, #chatBox, #legendsList { scrollbar-width:thin; scrollbar-color:rgba(154,124,51,.55) transparent; }
  #controls::-webkit-scrollbar, #hhList::-webkit-scrollbar, .box::-webkit-scrollbar, #adminBody::-webkit-scrollbar, #chatBox::-webkit-scrollbar, #legendsList::-webkit-scrollbar { width:9px; }
  #controls::-webkit-scrollbar-thumb, #hhList::-webkit-scrollbar-thumb, .box::-webkit-scrollbar-thumb, #adminBody::-webkit-scrollbar-thumb, #chatBox::-webkit-scrollbar-thumb, #legendsList::-webkit-scrollbar-thumb {
    background:rgba(154,124,51,.45); border-radius:5px; border:2px solid transparent; background-clip:content-box; }
  #controls::-webkit-scrollbar-thumb:hover, .box::-webkit-scrollbar-thumb:hover { background:rgba(154,124,51,.7); background-clip:content-box; }
  #controls::-webkit-scrollbar-track, .box::-webkit-scrollbar-track { background:transparent; }

  /* Zoom control joins the family */
  .c49FlatRow { display:flex; align-items:center; gap:6px; cursor:pointer; padding:3px 2px 1px;
    font:400 13px/1.25 Georgia, "Times New Roman", serif; color:#3a342a; white-space:nowrap; }
  .c49FlatRow:hover { color:var(--c49-gold); }
  .c49FlatRow .c49FlatIco { display:inline-flex; width:15px; justify-content:center; opacity:.85; }
  .leaflet-control-zoom a { transition:background .14s, color .14s; }
  .leaflet-control-zoom a:hover { color:var(--c49-gold) !important; }

  /* ===== Docks: two labeled launchers replace the old stack of unlabeled floating buttons ===== */
  #dockSheet { display:none; position:absolute; inset:0; z-index:1350; background:rgba(20,12,4,.30); }
  #dockSheet.show { display:block; }
  .dsBox { position:absolute; right:60px; width:238px; max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(180deg,#fbf6ea,#f3ead4);
    border:1px solid #d8c9a3; border-radius:13px; box-shadow:var(--c49-shadow-3); padding:6px; animation:c49BoxIn .18s var(--c49-ease); }
  body.c49dark .dsBox { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; }
  .dsRow { display:flex; gap:9px; align-items:center; padding:8px 9px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; color:#1f1a12; }
  .dsRow:hover { background:rgba(184,134,11,.13); }
  .dsRow:active { transform:scale(.98); }
  body.c49dark .dsRow { color:#ece4d6; }
  .dsIco { width:27px; height:27px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }

  /* ===== Near me now: the in-the-field bottom sheet (nearest ground from live GPS) ===== */
  #nearCard { display:none; position:fixed; left:9px; right:9px; margin:0 auto; bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:1250; width:auto; max-width:370px; background:linear-gradient(180deg,#fbf6ea,#f3ead4);
    border:1px solid #d8c9a3; border-radius:14px; box-shadow:var(--c49-shadow-3); padding:11px 12px 8px; box-sizing:border-box; }
  /* centered with left/right+margin, NOT translateX: the entrance animation's transform would cancel it */
  #nearCard.show { display:block; animation:c49BoxIn .24s var(--c49-ease); }
  body.c49dark #nearCard { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  body.c49dark #nearCard b { color:#f0c27b; }
  .nearRow { display:flex; align-items:center; gap:8px; padding:6px 2px; border-top:1px solid rgba(0,0,0,.07); cursor:pointer; border-radius:6px; }
  .nearRow:hover { background:rgba(184,134,11,.08); }
  body.c49dark .nearRow { border-top-color:rgba(255,255,255,.08); }
  .nearRow .nk { flex:0 0 auto; font-size:10.5px; font-weight:800; color:#fff; border-radius:4px; padding:2px 5px; text-transform:uppercase; letter-spacing:.4px; }
  .nearRow .nn { flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nearRow .nd { flex:0 0 auto; font-size:12.5px; color:#2f6b50; font-weight:700; font-variant-numeric:tabular-nums; }
  body.c49dark .nearRow .nd { color:#7fd0a2; }
  .nearTrial { flex:0 0 auto; cursor:pointer; font-size:13px; color:#b8860b; padding:2px 4px; border-radius:6px; }
  .nearTrial:hover { background:rgba(184,134,11,.14); }

  /* ===== Time Trials: race your own clock to a site (the timer is for the adventure, not the road) ===== */
  #trialHud { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:1460;
    background:linear-gradient(180deg,#20242b,#171a20); color:#eef2f7; border:1px solid #3a4250; border-radius:13px; padding:9px 13px;
    box-shadow:0 6px 22px rgba(0,0,0,.45); min-width:220px; text-align:center; font-variant-numeric:tabular-nums; }
  #trialHud .thTop { font-size:20px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
  #trialHud .thGo { font-size:10.5px; font-weight:800; letter-spacing:1px; color:#0b0d10; background:#e6b84c; border-radius:5px; padding:2px 6px; }
  #trialHud .thMid { font-size:12.5px; color:#c7d0dc; margin-top:1px; }
  #trialHud .thBot { font-size:12.5px; color:#9fb0c4; margin-top:2px; }
  #trialHud .thBtns { display:flex; gap:8px; justify-content:center; margin-top:7px; }
  #trialHud .thBtns span { cursor:pointer; font-size:12.5px; font-weight:700; color:#dfe6ef; background:#2b313b; border:1px solid #3f4753; border-radius:7px; padding:4px 10px; }
  #trialHud .thBtns span:hover { background:#343b47; }
  #trialModal { display:none; position:absolute; inset:0; z-index:1470; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
  #trialModal.show { display:flex; }
  #trialModal .box { background:linear-gradient(180deg,#fbf6ea,#f3ead4); border:1px solid #d8c9a3; border-radius:16px; padding:20px; width:390px; max-width:calc(100vw - 24px); max-height:88vh; overflow:auto; box-shadow:var(--c49-shadow-3); text-align:left; }
  body.c49dark #trialModal .box { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  .trRow { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid rgba(0,0,0,.08); font-size:13px; }
  body.c49dark .trRow { border-top-color:rgba(255,255,255,.08); }
  .trRow .trName { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .trRow .trBest { flex:0 0 auto; font-weight:800; color:#2f6b50; font-variant-numeric:tabular-nums; }
  body.c49dark .trRow .trBest { color:#7fd0a2; }

  /* ===== Compass: works walking (device magnetometer) or driving (GPS course). ===== */
  #compassPanel { position:absolute; right:12px; bottom:calc(120px + env(safe-area-inset-bottom,0px)); z-index:1460;
    background:linear-gradient(180deg,#20242b,#171a20); color:#eef2f7; border:1px solid #3a4250; border-radius:15px; padding:11px 11px 9px;
    box-shadow:0 6px 22px rgba(0,0,0,.45); width:174px; text-align:center; user-select:none; }
  #compassPanel .cmpStage { position:relative; width:150px; height:150px; margin:0 auto; }
  #compassPanel .cmpDial { position:absolute; inset:0; transition:transform .12s linear; }
  #compassPanel .cmpLub { position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:11px solid #e6b84c; z-index:3; }
  #compassPanel .cmpNeedle { position:absolute; inset:0; z-index:2; transition:transform .12s linear; pointer-events:none; }
  #compassPanel .cmpRead { margin-top:7px; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
  #compassPanel .cmpSrc { font-size:11px; color:#93a2b6; margin-top:-1px; }
  #compassPanel .cmpTgt { font-size:12.5px; color:#a9e3c0; margin-top:5px; line-height:1.3; }
  #compassPanel .cmpClose { position:absolute; top:6px; right:9px; cursor:pointer; color:#93a2b6; font-weight:800; font-size:13px; }
  .cmpBtn { background:#20242b; }

  /* ===== Rock ID: field-test grid + multi-photo thumbnails ===== */
  .rkGrid { display:grid; grid-template-columns:1fr 1fr; gap:7px 9px; }
  @media (max-width: 520px) { .rkGrid { grid-template-columns:1fr; } }
  .rkGrid label { display:flex; flex-direction:column; gap:2px; font-size:12px; font-weight:700; color:#5a4a2a; }
  .rkGrid label span { font-weight:400; font-size:11.5px; color:#8a7c5c; }
  .rkGrid .c49in { padding:5px 7px; font-size:12px; }
  .rkThumb { position:relative; width:62px; height:62px; border-radius:8px; overflow:hidden; border:1px solid #d8c9a3; }
  .rkThumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .rkThumb .rkX { position:absolute; top:1px; right:3px; color:#fff; background:rgba(0,0,0,.55); border-radius:50%;
    width:16px; height:16px; line-height:15px; text-align:center; font-size:12px; cursor:pointer; }
  .rkThumb .rkTag { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff;
    font-size:8.5px; text-align:center; padding:1px 0; letter-spacing:.2px; }

  /* ===== GPS photo checkpoints: live in-app camera capture, verified real (not an upload / not AI) ===== */
  .cpOverlay { display:none; position:absolute; inset:0; z-index:1480; background:rgba(6,8,11,.92); align-items:center; justify-content:center; }
  .cpOverlay.show { display:flex; }
  .cpCam { width:min(94vw,460px); background:#12161c; border:1px solid #2c333d; border-radius:16px; overflow:hidden; box-shadow:0 10px 34px rgba(0,0,0,.5); color:#eef2f7; }
  .cpHead { display:flex; align-items:center; gap:8px; padding:11px 13px; font-weight:800; font-size:14px; border-bottom:1px solid #232a33; }
  .cpHead .cpX { margin-left:auto; cursor:pointer; color:#93a2b6; font-size:15px; }
  #cpVideo { width:100%; max-height:56vh; background:#000; display:block; object-fit:cover; }
  .cpGeo { font-size:12px; color:#a9e3c0; padding:8px 13px 0; text-align:center; font-variant-numeric:tabular-nums; }
  .cpBtns { display:flex; justify-content:center; padding:11px; }
  .cpShoot { background:#e6b84c; color:#0b0d10; font-weight:800; font-size:15px; border:none; border-radius:999px; width:66px; height:66px; cursor:pointer; box-shadow:0 0 0 4px rgba(230,184,76,.25); }
  .cpShoot:disabled { background:#4a5361; color:#8b96a4; box-shadow:none; cursor:default; }
  .cpNote { font-size:12.5px; color:#93a2b6; padding:0 14px 13px; text-align:center; line-height:1.35; }
  .cpBtn { background:#20242b; }
  #cpGallery { display:none; position:absolute; inset:0; z-index:1475; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
  #cpGallery.show { display:flex; }
  #cpGallery .box { background:linear-gradient(180deg,#fbf6ea,#f3ead4); border:1px solid #d8c9a3; border-radius:16px; padding:18px; width:440px; max-width:calc(100vw - 24px); max-height:88vh; overflow:auto; box-shadow:var(--c49-shadow-3); }
  body.c49dark #cpGallery .box { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  .cpGrid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }
  .cpCard { border:1px solid #e0d3b0; border-radius:11px; overflow:hidden; background:#fff; }
  body.c49dark .cpCard { border-color:#4a4030; background:#1a1610; }
  .cpCard img { width:100%; height:104px; object-fit:cover; display:block; cursor:pointer; }
  .cpMeta { padding:6px 8px; font-size:12px; color:#6a5a3a; }
  body.c49dark .cpMeta { color:#c9bfa8; }
  .cpBadge { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.3px; border-radius:5px; padding:1px 5px; }
  .cpBadge.live { background:#1f7a4d; color:#fff; }
  .cpBadge.unver { background:#8a6d0a; color:#fff; }
  .cpBadge.flag { background:#b23b2e; color:#fff; }

  /* ===== Today's brief: the one-tap morning card (gold, rivers, weather, challenge) ===== */
  #todayModal { display:none; position:absolute; inset:0; z-index:1450; background:rgba(20,12,4,.66); align-items:center; justify-content:center; }
  #todayModal.show { display:flex; }
  #todayModal .box { background:linear-gradient(180deg,#fbf6ea,#f3ead4); border:1px solid #d8c9a3; border-radius:16px; padding:20px; width:400px; max-width:calc(100vw - 24px); max-height:90vh; overflow:auto; box-shadow:var(--c49-shadow-3); text-align:left; }
  body.c49dark #todayModal .box { background:linear-gradient(180deg,#241f18,#1d1812); border-color:#4a4030; color:#ece4d6; }
  .tdRow { display:flex; align-items:flex-start; gap:9px; padding:8px 0 7px; border-top:1px solid rgba(0,0,0,.07); font-size:13px; }
  body.c49dark .tdRow { border-top-color:rgba(255,255,255,.09); }
  .tdIco { flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(184,134,11,.15); color:#7a5a1a; }
  body.c49dark .tdIco { color:#e8c15a; }
  #todayBtn { flex:0 0 auto; box-sizing:border-box; background:linear-gradient(180deg,#3f3a30,#322f29); color:#e8ddc2; border:1px solid #4a4736; border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
  #goldPill:empty + #todayBtn { flex:1; }   /* before the first price lands, the Brief button holds the row alone */
  #questLine { font-size:12.5px; color:#6a5a2a; background:#fbf4dd; border:1px solid #e6d28a; border-radius:7px; padding:6px 8px; margin:0 0 8px; cursor:pointer; }
  body.c49dark #questLine { background:#33291c; border-color:#4a4030; color:#e8c15a; }

  /* Chat reactions: little tactile chips under a message */
  .rxRow { display:flex; gap:3px; margin-top:3px; flex-wrap:wrap; min-height:0; }
  .rxRow.mine { justify-content:flex-end; }
  .rxChip { font-size:12px; line-height:1.5; background:#f1e9d6; border:1px solid #e0d4b4; border-radius:10px;
    padding:1px 7px; cursor:pointer; user-select:none; transition:transform .12s var(--c49-ease), background .12s; }
  .rxChip:hover { transform:scale(1.1); }
  .rxChip:active { transform:scale(.94); }
  .rxChip.on { background:#2f6b50; border-color:#2f6b50; color:#fff; }
  .rxChip.add { opacity:.45; }
  .rxChip.add:hover { opacity:1; }
  .rxChip.pick { font-size:14px; padding:2px 7px; }
  body.c49dark .rxChip { background:#33291c; border-color:#4a4030; color:#ece4d6; }
  body.c49dark .rxChip.on { background:#2f6b50; border-color:#2f6b50; color:#fff; }

  /* Text-size preference (Notifications -> Privacy & comfort): zoom the reading surfaces,
     never the #map itself, so Leaflet's click/touch hit-testing stays pixel-exact. */
  body.c49txtlg #panel, body.c49txtlg .box, body.c49txtlg .leaflet-popup-content,
  body.c49txtlg #aboutView, body.c49txtlg #tableView, body.c49txtlg #imgLab { zoom:1.14; }
  body.c49txtxl #panel, body.c49txtxl .box, body.c49txtxl .leaflet-popup-content,
  body.c49txtxl #aboutView, body.c49txtxl #tableView, body.c49txtxl #imgLab { zoom:1.3; }