/* Mikkeller Passport — web rebuild design system (zero-build).
   Light is default; [data-theme="dark"] is the "Dark Craft" theme. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #FAF7F0; --surface: #FFFDF8; --line: #DFE3D7; --line2: #C9CFC2;
  --text: #1B241C; --dim: #5C685B; --muted: #6B7264; --ink: #1F4D2B; --lbl: #41503F; --surface2: #F1EFE8;
  --green: #2E7D32; --green-soft: #E7F0E4; --brand: #5EC94A; --ring: #CFD5C7;
  --paper: #FBF8F0; --perf: #C3BBA6;
  --b-open: #2E7D32; --b-open-tx: #22662A; --b-closed: #B3403D; --b-closed-tx: #9C3634;
  --b-seasonal: #C08A2E; --b-seasonal-tx: #8A6410; --b-festival: #2E7D32; --b-festival-tx: #1E6B2E;
  --b-popup: #2F6F9F; --b-popup-tx: #22597F; --b-special: #6B5BD0; --b-special-tx: #4A3D9E;
  --tile-bg: #E8E2D3; --tile-bd: #D2CAB6; --tile-digit: #1C241B; --tile-shadow: rgba(120,110,80,.20);
  --tip-bg: #FFFDF8; --tip-bd: #BFC7B8;
}
[data-theme="dark"] {
  --bg: #0C0D0C; --surface: #151713; --line: #272B25; --line2: #34392F;
  --text: #F1F2EE; --dim: #B4BAB0; --muted: #8B9283; --ink: #A9D9A0; --lbl: #B6CBB2; --surface2: #1B1D18;
  --green: #5EC94A; --green-soft: #17250F; --brand: #5EC94A; --ring: #333A2E;
  --paper: #15140F; --perf: #3A3A2E;
  --b-open: #5EC94A; --b-open-tx: #8FD98A; --b-closed: #E06B68; --b-closed-tx: #EE9B98;
  --b-seasonal: #D9A94A; --b-seasonal-tx: #E0BC72; --b-festival: #6ED46E; --b-festival-tx: #8FD98A;
  --b-popup: #6FA8D8; --b-popup-tx: #9CC6EC; --b-special: #9E90EE; --b-special-tx: #BDB2F4;
  --tile-bg: #0A0B07; --tile-bd: #262B20; --tile-digit: #F3F6EF; --tile-shadow: rgba(0,0,0,.65);
  --tip-bg: #23271D; --tip-bd: #55604A;
}

html { background: var(--bg); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
#app { max-width: 1000px; margin: 0 auto; padding-bottom: 40px; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 32px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { color: var(--green); font-size: 16px; }
.brand .wm { font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: 2px; }
.tools { display: flex; align-items: center; gap: 12px; }
.ib { width: 34px; height: 34px; display: grid; place-items: center; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 9px; }
.ib:hover { color: var(--text); }
.ib svg { width: 16px; height: 16px; }
.ib.plain { border: 0; }
.avp { width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); background: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.avp svg { width: 17px; height: 17px; }

/* ── Double-height navbar (nav + status), persistent ─────── */
.navbar { display: flex; align-items: stretch; height: 140px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 3px double var(--line2); }
.nbmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.navrow { flex: 1; display: flex; align-items: center; gap: 5px; padding: 0 24px; }
.nbdiv { border-top: 1px dashed var(--perf); margin: 0 6px 0 24px; }
.statsrow { flex: 1; display: flex; align-items: center; gap: 26px; padding: 0 24px; }
.navitem { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--dim); padding: 9px 16px; border-radius: 10px; }
.navitem svg { width: 16px; height: 16px; }
.navitem.on { background: var(--green); color: #fff; }
.sc { display: flex; flex-direction: column; gap: 6px; }
.scl { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lbl); }
.sc .tiles { display: flex; gap: 4px; }
.sc .tile { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 20px; line-height: 1; color: var(--tile-digit); background: var(--tile-bg); border: 1px solid var(--tile-bd); border-radius: 5px; padding: 6px 8px; min-width: 20px; text-align: center; position: relative; box-shadow: 0 1px 0 var(--tile-shadow), inset 0 -1px 0 var(--tile-shadow); }
.sc .tile::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: var(--tile-bd); opacity: .85; }
.sc.hero .tile { color: #fff; background: var(--green); border-color: var(--green); }
.sc.hero .tile::after { background: rgba(0, 0, 0, .25); }
.nbstub { flex: 0 0 150px; border-left: 1.5px dashed var(--perf); background: var(--green-soft); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; }
.stn { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1.4px; color: var(--green); }
.sts { font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--dim); }
.barcode { width: 96px; height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px); }

/* ── Content ─────────────────────────────────────────────── */
.hd { display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 32px 12px; }
.hd h1 { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 1px; line-height: .92; }
.hd p { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.prog { margin: 8px 32px 0; display: flex; align-items: center; gap: 16px; }
.prog .lbl { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lbl); white-space: nowrap; }
.prog .lbl b { color: var(--green); }
.bar { flex: 1; display: block; height: 8px; border-radius: 99px; background: var(--green-soft); overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3E8F42, var(--brand)); transition: width .3s; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 18px 32px 0; }
.toolbar .search { flex: 1 1 auto; min-width: 0; }
.sorts { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 8px 0 13px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--surface); }
.sorts .slbl { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lbl); }
.sorts select { appearance: none; -webkit-appearance: none; height: 34px; border: 0; background: none; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; padding: 0 24px 0 4px; outline: 0; cursor: pointer; }
.sorts::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 15px; border: 1.5px solid var(--line2); border-radius: 12px; background: var(--surface); color: var(--muted); }
.search input { border: 0; outline: 0; flex: 1; background: none; font-family: inherit; font-size: 14px; color: var(--text); }
.chips { display: flex; gap: 8px; padding: 14px 32px 4px; flex-wrap: wrap; }
.chip { font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); background: var(--surface); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

/* ── Venue list ──────────────────────────────────────────── */
.list { margin: 14px 32px 30px; }
.row { display: flex; align-items: center; gap: 16px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.thumb { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; background: var(--surface); flex: 0 0 48px; display: grid; place-items: center; border: 1.5px solid var(--ring); padding: 0; margin: 0; font: inherit; cursor: pointer; }
.thumb:hover { border-color: var(--text); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { width: 18px; height: 18px; border: 1.5px dashed var(--line2); border-radius: 999px; }
.vm { flex: 1; min-width: 0; }
.vn { font-size: 14.5px; font-weight: 600; }
.vs { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.loc { font-size: 12px; color: var(--dim); }
.tag { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border: 1px solid; border-radius: 5px; white-space: nowrap; }
.b-open { border-color: var(--b-open); color: var(--b-open-tx); }
.b-closed { border-color: var(--b-closed); color: var(--b-closed-tx); }
.b-seasonal { border-color: var(--b-seasonal); color: var(--b-seasonal-tx); }
.b-festival { border-color: var(--b-festival); color: var(--b-festival-tx); }
.b-popup { border-color: var(--b-popup); color: var(--b-popup-tx); }
.b-special { border-color: var(--b-special); color: var(--b-special-tx); }
.b-unknown { border-color: var(--line2); color: var(--dim); }
.acts { display: flex; align-items: center; gap: 8px; }
/* Reserve room for two controls (map + Instagram) so the divider holds a fixed column. */
.actctl { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 76px; flex: 0 0 76px; }
.actdiv { width: 1px; height: 22px; background: var(--line2); margin: 0 2px; flex: 0 0 1px; }
.acts .ib { width: 34px; height: 34px; }
.acts .ib.done { background: var(--green-soft); border-color: transparent; color: var(--green); }
.acts .ib.off { color: var(--line2); cursor: not-allowed; }
.acts .ib.off:hover { color: var(--line2); }
.acts .ib.off svg { opacity: .5; }
.acts .ib.stampbtn { width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0; color: var(--green); border-color: var(--green); }
.acts .ib.stampbtn:hover { color: var(--green); }
.acts .ib.stampbtn.done { background: var(--green-soft); border-color: transparent; color: var(--green); }
.stampbtn .slab { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* Log visit — same pill as Stamp, with a count badge (hidden at 0). */
.acts .ib.visitbtn { position: relative; }
.visitbtn .vbadge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; background: var(--green); color: #fff; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; line-height: 1; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Modal + toast ───────────────────────────────────────── */
.dim { position: fixed; inset: 0; background: rgba(12, 14, 10, .5); display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px 24px; z-index: 2000; overflow-y: auto; }
.modal { width: min(720px, calc(100vw - 32px)); background: var(--surface); border: 1.5px solid var(--line2); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); max-height: calc(100vh - 88px); display: flex; flex-direction: column; }
.mh { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.mh b { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }
.mb { display: flex; gap: 20px; padding: 20px; overflow-y: auto; min-height: 0; }
/* Lock the page behind an open modal so scrolling scrolls the modal, not the site. */
body:has(.dim) { overflow: hidden; }
.big { width: 250px; height: 215px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); flex: 0 0 250px; background: #111; }
.big img { width: 100%; height: 100%; object-fit: contain; }
.kv { font-size: 13px; color: var(--dim); margin: 7px 0; }
.kv b { color: var(--text); font-weight: 600; }
.dim:has(.vc) .modal { width: min(440px, calc(100vw - 24px)); }
.mb.vc { display: block; padding: 14px 16px 16px; }
/* Google-Maps-share-style card: artwork left, name + address right. */
.vcard { display: flex; gap: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.vimg { width: 132px; height: 132px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: #111; flex: 0 0 132px; }
.vimg img { width: 100%; height: 100%; object-fit: contain; }
.vinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vname { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.vaddr { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.vtagrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vtagrow .tag { font-size: 10px; padding: 3px 8px; }
.vsub { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
/* Circular brand action buttons (Google share sheet pattern). */
.vacts { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.vbtn { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; padding: 0; margin: 0; background: none; font: inherit; cursor: pointer; color: var(--text); }
.vbtn .ic { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line2); background: var(--surface); transition: transform .12s ease; }
.vbtn:hover .ic { transform: scale(1.06); }
.vbtn svg { width: 26px; height: 26px; }
.vbtn .lb { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.vbtn.ig .ic { background: linear-gradient(45deg, #FEDA75, #D62976 55%, #962FBF); border: 0; }
.vbtn.ig.sh .ic { background: var(--bg); border: 1px solid var(--line2); color: var(--dim); }
.vbtn.amap .ic { border-color: rgba(20, 120, 214, .35); }
.vbtn.apple .ic { border-color: var(--line2); }
.vbtn.wl .ic { color: var(--green); border-color: var(--green); }
.vrare { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--green-soft, rgba(46,125,50,.08)); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.vrare b { color: var(--green); font-weight: 700; }
.vrare .tag { font-size: 9px; padding: 2px 7px; }
.tag.rare { border-color: var(--b-special); color: var(--b-special-tx); font-weight: 700; }
.rstamp { margin-top: 2px; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--muted); }
.rstamp b { color: var(--green); font-weight: 700; }
.rstamp .tag.rare { margin-left: 4px; font-size: 8.5px; padding: 1px 5px; }
.vhours { margin-top: 8px; font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.55; color: var(--muted); }
.vhours .ostate { display: block; width: fit-content; margin-bottom: 6px; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.vhours .ostate.on { background: var(--green); color: #fff; }
.vhours .ostate.off { background: transparent; border: 1px solid var(--b); color: var(--muted); }
.fld { margin-bottom: 15px; position: relative; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 38px; }
.fld:has(select)::after { content: ''; position: absolute; right: 15px; bottom: 19px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.fld label { display: block; font-family: 'DM Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lbl); margin-bottom: 7px; }
.fld input, .fld select { width: 100%; height: 46px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 13.5px; padding: 0 13px; outline: 0; }
.fld textarea { width: 100%; min-height: 96px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 13.5px; padding: 11px 13px; outline: 0; resize: vertical; }
.btns, .btnrow { display: flex; gap: 10px; margin-top: 4px; }
.b { height: 42px; padding: 0 18px; border-radius: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; border: 1px solid transparent; }
.b.pri { background: var(--green); color: #fff; }
.b.gho { background: transparent; border-color: var(--line2); color: var(--text); }
.b.oauth { display: flex; align-items: center; justify-content: center; gap: 10px; }
.b.is-off { opacity: .5; filter: grayscale(.35); }
.b.is-off:hover { opacity: .5; }
.b.oauth svg { flex: 0 0 auto; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 10px; font-size: 13px; opacity: 0; transition: .2s; z-index: 3000; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; }
  .navbar { height: auto; }
  .navrow { padding: 8px 12px 0; overflow-x: auto; }
  .nbdiv { margin: 0 12px; }
  .statsrow { padding: 10px 12px 12px; gap: 18px; overflow-x: auto; }
  .nbstub { display: none; }
  .sc.opt { display: none; }          /* Countries/Cities drop on mobile */
  .hd { padding: 20px 16px 8px; }
  .prog, .toolbar, .chips, .list { margin-left: 16px; margin-right: 16px; }
  .toolbar, .chips, .list { padding-left: 0; padding-right: 0; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1 1 100%; }
  .sorts { flex: 1 1 100%; justify-content: space-between; }
  .mb { flex-direction: column; }
  .stampbtn .slab { display: none; }
  .actctl { width: auto; flex: 0 0 auto; }
  .acts .ib.stampbtn { width: 34px; padding: 0; }
  .aacts { flex-direction: column; }
  .bbtn { width: 100%; }
  .big { width: 100%; height: 200px; flex-basis: auto; }
}
.tiers { display: flex; gap: 6px; padding: 10px 32px 0; flex-wrap: wrap; }
.tier { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--surface); }
.tier.on { color: var(--green); border-color: var(--green); }
.nudge { margin: 8px 32px 0; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 10px; }
.share { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.share input { flex: 1; height: 40px; border: 1.5px solid var(--line2); border-radius: 9px; background: var(--bg); color: var(--dim); font-family: 'DM Mono', monospace; font-size: 11px; padding: 0 12px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Accessibility / SEO ─────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff; padding: 8px 14px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* The main view carries tabindex=-1 so route changes can move focus to it (a11y),
   but it is not interactive — suppress its focus ring so pressing a key (e.g.
   Escape) can't outline the whole view. */
#view:focus, #view:focus-visible { outline: none; }

/* ── Caption / tabs / gate ───────────────────────────────── */
.caption { padding: 18px 32px 6px; font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lbl); }
.caption b { color: var(--green); }
.tabs { display: flex; gap: 20px; padding: 6px 32px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px 32px 6px; }
.bchips .chip { min-width: 138px; text-align: center; }
.tb { background: none; border: 0; font-size: 13px; color: var(--muted); padding: 12px 0; border-bottom: 2px solid transparent; }
.tb.on { color: var(--text); border-color: var(--green); font-weight: 600; }
.gate { margin: 24px 32px; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 32px 24px; background: var(--surface); }
.gate .gt { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; }
.gate p { color: var(--dim); font-size: 13px; margin: 8px auto 16px; max-width: 440px; }

/* Board — Leaderboard | Activity segmented toggle + connections activity feed */
.boardbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 32px; flex-wrap: wrap; }
.boardtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.boardtoggle[hidden] { display: none; }
.info { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line2); color: var(--muted); background: none; padding: 0; font-size: 10px; align-items: center; justify-content: center; margin-left: 6px; vertical-align: middle; cursor: pointer; font-family: 'DM Mono', monospace; font-style: normal; line-height: 1; }
.info:hover { border-color: var(--green); color: var(--green); }
.boardtoggle button { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 14px; background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.boardtoggle button.on { background: var(--green); color: #fff; font-weight: 600; }
.actlist { margin: 8px 32px 40px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.actrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.actrow:last-child { border-bottom: 0; }
.actav { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 600; }
.actmain { min-width: 0; }
.acttxt { font-size: 13.5px; color: var(--text); }
.acttxt b { font-weight: 600; }
.actsub { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Badges ──────────────────────────────────────────────── */
.bgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 16px 32px 30px; }
.bc { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bc .i { font-size: 26px; }
.bc .n { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .6px; line-height: 1.1; }
.bc .d { font-family: 'DM Mono', monospace; font-size: 8.5px; color: var(--muted); line-height: 1.4; }
.bc.earn { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.bc.lock { opacity: .4; }

/* ── Board ───────────────────────────────────────────────── */
.lb { margin: 12px 32px 30px; }
.lbh, .lbr { display: flex; align-items: center; padding: 11px 10px; }
.lbh { border-bottom: 1.5px solid var(--line2); font-family: 'DM Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--lbl); }
.lbr { border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lbr.me { background: var(--green-soft); }
.c1 { width: 44px; } .c2 { flex: 1; min-width: 0; } .c3 { width: 150px; } .c4, .c5 { width: 84px; text-align: right; } .c6 { width: 190px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rk { font-family: 'Bebas Neue', sans-serif; font-size: 19px; color: var(--muted); }
.rk.top { color: var(--green); }
.self { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ctag { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--green); }
/* Connect control at the top of the public-profile modal */
.pubsocial { margin-bottom: 14px; }
.pubsocial .b { height: 38px; }
.b.soft { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.b.off { background: var(--surface2); color: var(--muted); border-color: var(--line); }
.b[disabled] { cursor: default; opacity: .9; }
.b.compact { height: 32px; padding: 0 12px; font-size: 11.5px; border-radius: 999px; }
.pint { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--green-soft); color: var(--green); }
.pint.sent { background: var(--green); color: #fff; border-color: var(--green); }
.pint svg { width: 19px; height: 19px; }

/* ── Map ─────────────────────────────────────────────────── */
.mapwrap { display: flex; gap: 16px; margin: 12px 32px 30px; }
.map { flex: 1; height: 470px; position: relative; overflow: hidden; border: 1.5px solid var(--line2); border-radius: 16px; background: #eef2ea; }
[data-theme="dark"] .map { background: #101410; }
/* Dark map: invert the OSM raster tiles in dark mode (OSM has no dark tiles and
   the keyless dark providers are gone). Tiles only — controls/attribution stay. */
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.8); }
/* "You are here" marker — person in an ink circle (distinct from every venue colour). */
.you-wrap { background: none; border: 0; }
.you { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ink, #1c2b25); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); color: #fff; }
.you svg { width: 16px; height: 16px; }
.grid-l { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 52px 52px; opacity: .5; }
.pins { position: absolute; inset: 0; }
.maptop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 32px 0; flex-wrap: wrap; }
.maptop .caption { padding: 0; }
.maphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 32px 4px; flex-wrap: wrap; }
.maphead .chips { padding: 0; }
#mk-nearctl { flex-basis: 100%; }
.chip.nic { display: inline-flex; align-items: center; gap: 6px; }
.chip.nic svg { width: 14px; height: 14px; }
.mpcap { text-align: left; font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pin { position: absolute; width: 16px; height: 16px; border-radius: 999px; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%, -50%); padding: 0; }
.p-open { background: #2E7D32; } .p-closed { background: #B3403D; } .p-seasonal { background: #C08A2E; } .p-festival { background: #6B5BD0; } .p-popup { background: #2F6F9F; } .p-special { background: #8E8E8E; }
.legend { position: absolute; left: 14px; bottom: 14px; background: var(--surface); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; display: flex; gap: 14px; font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 5px; vertical-align: middle; }
.mpsearch { width: 318px; height: 42px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; padding: 0 12px; }
.mpsearch::placeholder { color: var(--dim); }
.mpsearch:focus { outline: none; border-color: var(--green); }
.mplist { width: 318px; display: flex; flex-direction: column; gap: 10px; height: 470px; overflow-y: auto; padding-right: 6px; }
.mprow { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); width: 100%; text-align: left; }
.mprow .th { width: 38px; height: 38px; border-radius: 99px; overflow: hidden; border: 1.5px solid var(--ring); flex: 0 0 38px; background: var(--surface2, #111); }
.mprow .th img { width: 100%; height: 100%; object-fit: cover; }
.mprow .vn { display: block; font-size: 13.5px; font-weight: 600; }
.mprow .loc { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.dotp { width: 10px; height: 10px; border-radius: 99px; }

/* ── Settings ────────────────────────────────────────────── */
.settings { display: flex; gap: 22px; margin: 12px 32px 30px; }
.snav { width: 220px; flex: 0 0 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; height: max-content; }
.sni { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; background: none; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--dim); }
.sni.on { background: var(--green-soft); color: var(--green); font-weight: 600; }
.snav .sep { height: 1px; background: var(--line); margin: 7px 6px; }
.sni.dgr { color: #B3403D; }
.spanel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1px; margin-bottom: 4px; }
.card .hint { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.tgl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tgl .tt { font-size: 13.5px; font-weight: 600; }
.tgl .td { font-size: 11.5px; color: var(--muted); margin-top: 3px; max-width: 430px; }
.sw { width: 44px; height: 25px; border-radius: 99px; background: var(--line2); position: relative; flex: 0 0 44px; cursor: pointer; }
.sw i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 99px; background: #fff; transition: .15s; }
.sw.on { background: var(--green); } .sw.on i { left: 22px; }
.connrow, .tiprow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.tiprow .tt { font-size: 13.5px; font-weight: 600; } .tiprow .td { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── Stats (Settings) ────────────────────────────────────── */
.statsmap { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.statsmap[data-stats-enlarge] { cursor: pointer; }
.statsmap[data-stats-enlarge]:hover { border-color: var(--line2); }
.statsmap[data-stats-enlarge]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.statsmap canvas { display: block; width: 100%; height: 240px; }
.statsmap .statsmaptip { position: absolute; right: 10px; bottom: 8px; padding: 3px 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line2); font-family: 'DM Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.statsmap-large { margin-top: 0; }
.statsmap-large canvas { height: auto; }
.statsmap-cap { margin-top: 12px; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .4px; color: var(--muted); }
.dim:has(.cmap) .modal { width: min(1040px, calc(100vw - 32px)); }
.mb.cmap { display: block; }
.statsrare { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); }
.statsrare .lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.statsrare b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .6px; color: var(--text); }
.statsrare .pct { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--green); }

/* ── Notifications ───────────────────────────────────────── */
.notifpanel { position: fixed; top: 62px; right: 24px; width: 340px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1.5px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.22); z-index: 60; }
.nh { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1.2px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nhc { background: none; border: 0; padding: 0; color: var(--green); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
.nhc:hover { text-decoration: underline; }
.nrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nrow .nt { font-size: 13px; font-weight: 600; } .nrow .nd { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 99px; background: #E05050; }
#bell-btn { position: relative; }

@media (max-width: 760px) {
  .bgrid { grid-template-columns: repeat(3, 1fr); padding: 14px 16px 24px; }
  .caption { padding: 16px 16px 4px; }
  .tabs { padding: 4px 16px 0; }
  .settings { flex-direction: column; margin: 12px 16px 24px; }
  .snav { width: auto; flex-basis: auto; }
  .lb { margin: 12px 16px 24px; } .c3, .c5 { display: none; }
  .mapwrap { flex-direction: column; margin: 12px 16px 24px; } .mplist { width: auto; height: auto; max-height: 320px; } .map { height: 300px; } .maptop { padding: 16px 16px 0; } .maphead { padding: 12px 16px 4px; } .mpsearch { width: 100%; }
  .notifpanel { right: 12px; left: 12px; width: auto; }
}

/* ── Badge detail modal ─────────────────────────────────── */
.bmodal { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bicon { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 16px; display: grid; place-items: center; font-size: 40px; line-height: 1; background: var(--bg); border: 1.5px solid var(--line2); }
.bicon.earn { border-color: var(--green); background: var(--green-soft); }
.bicon.lock { opacity: .45; filter: grayscale(1); }
.bname { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; }
.bcat { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.bdesc { font-size: 14px; color: var(--text); line-height: 1.5; }
.bunlock { margin-top: 14px; font-size: 13.5px; color: var(--dim); }
.bunlock b { color: var(--green); }
.bhow { margin-top: 14px; font-size: 13.5px; color: var(--dim); }
.bhow .k { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ── Year in Review header ──────────────────────────────── */
.yrhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.yrbar { display: flex; align-items: center; gap: 10px; }
.yrbar label { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lbl); }
.yrbar select { height: 40px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--text); font-family: 'Inter', sans-serif; font-size: 13.5px; padding: 0 10px; }

/* ── Connection profile modal ───────────────────────────── */
.connlink { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; }
.connlink .loc { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.connlink:hover .vn { color: var(--green); }
.dim:has(.cmodal) .modal { width: min(470px, calc(100vw - 24px)); }
.mb.cmodal { display: block; padding: 14px 18px 16px; }
.cnone { margin-top: 12px; font-size: 13px; color: var(--dim); }
.chead { display: flex; align-items: center; gap: 14px; }
.cavatar { display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-family: 'Inter', sans-serif; flex: 0 0 auto; }
.cname { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; }
.cmeta { font-size: 13px; color: var(--dim); margin-top: 3px; }
.cstats { display: flex; gap: 8px; margin-top: 14px; }
.cstat { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.cstat b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--text); line-height: 1; }
.cstat span { display: block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.cfacts { margin-top: 14px; border-top: 1px solid var(--line); }
.cfact { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cfact span { color: var(--dim); }
.cblock { margin-top: 16px; }
.cblock-h { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ccontact { display: flex; flex-direction: column; gap: 12px; }
.ccontact-row { display: flex; flex-direction: column; gap: 3px; }
.ccontact-lbl { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.ccontact-val { font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
a.ccontact-val { color: var(--green); }
a.ccontact-val:hover { text-decoration: underline; }
.crecent { display: flex; flex-direction: column; }
.crec { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.crec b { color: var(--green); font-family: 'DM Mono', monospace; font-weight: 700; }

/* ── Site footer (Terms / Privacy) ───────────────────────── */
.foot { max-width: 1000px; margin: 4px auto 28px; padding: 0 32px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.foot a { text-decoration: underline; }
.foot a:hover { color: var(--text); }
.footsep { opacity: .5; }

/* ── Tier-unlock celebration (confetti.js) ───────────────── */
.confetti-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s ease; cursor: pointer; }
.confetti-overlay.show { opacity: 1; }
.confetti-overlay.hide { opacity: 0; transition: opacity .4s ease; }
.confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.confetti-card { position: relative; z-index: 1; max-width: min(360px, calc(100vw - 48px)); padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); text-align: center; transform: translateY(10px) scale(.97); transition: transform .25s ease; }
.confetti-overlay.show .confetti-card { transform: none; }
.confetti-emoji { font-size: 42px; line-height: 1; }
.confetti-kicker { margin-top: 8px; font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.confetti-level { margin-top: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 2px; line-height: 1; color: var(--text); }
.confetti-reward { margin-top: 8px; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600; color: var(--green); }
.confetti-hint { margin-top: 16px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); }