/* BAGHUNT app shell: rail (desktop) / top bar + tab bar (phone), the map screen, the bag sheet, and the list pages. */
body.appbody { overflow: hidden; background: var(--bg) }
.routebar { position: fixed; z-index: 400; top: 0; left: 0; height: 3px; width: 100%; background: var(--g); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none }
.routebar.go { opacity: 1; animation: rb 1s var(--ease) forwards } .routebar.done { transform: scaleX(1); opacity: 0; transition: opacity .4s } @keyframes rb { to { transform: scaleX(.85) } }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--hf); font-weight: 800; font-size: 20px; letter-spacing: -.02em; font-stretch: 110% } .brand img { width: 36px; height: 36px; object-fit: contain }
.chip.soon { color: var(--mut); border-style: dashed }

/* ---------- layout: phone first ---------- */
.rail { display: none }
.topbar { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 56px; padding: 0 14px; padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: space-between; background: rgba(5, 8, 6, .96); border-bottom: 1px solid var(--line) }
.tabbar { position: fixed; z-index: 60; inset: auto 0 0 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(5, 8, 6, .98); border-top: 1px solid var(--line) }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 650; color: var(--mut); transition: color .2s; position: relative }
.tabbar svg, .rail-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.tabbar a.on { color: var(--g) } .tabbar a.on::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 4px 4px; background: var(--g); box-shadow: 0 0 14px var(--g) }
.main { position: fixed; inset: calc(56px + env(safe-area-inset-top)) 0 calc(64px + env(safe-area-inset-bottom)) 0; overflow: hidden }
.hunt { position: absolute; inset: 0; background: var(--bg) } .page { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 16px 28px; -webkit-overflow-scrolling: touch; outline: none }
.page > * { max-width: 760px; margin-left: auto; margin-right: auto } .page > .ptitle { margin-bottom: 18px }
.ptitle { font-size: clamp(34px, 6vw, 48px); font-stretch: 110% }

@media (min-width: 900px) {
  .topbar, .tabbar { display: none }
  .rail { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 236px; display: flex; flex-direction: column; gap: 22px; padding: 22px 16px; background: var(--bg2); border-right: 1px solid var(--line) }
  .rail-nav { display: grid; gap: 4px } .rail-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; font-weight: 650; color: var(--mut); transition: background .2s, color .2s } .rail-nav a:hover { color: var(--ink); background: var(--bg3) } .rail-nav a.on { color: #021105; background: var(--g) }
  .rail-foot { margin-top: auto; display: grid; gap: 12px } .rail-foot .btn { min-height: 44px }
  .main { inset: 0 0 0 236px } .page { padding: 40px 32px 56px }
}

/* ---------- the map screen ---------- */
.map-host { position: absolute; inset: 0; isolation: isolate; background: var(--bg) }
.map-host.notiles { background: var(--bg) radial-gradient(rgba(56, 255, 85, .08) 1px, transparent 1px) 0 0 / 28px 28px }
.map-host.leaflet-container { background: #070b08; font-family: var(--bf) }
/* the dark gray tiles get a deep green tint (one cheap blended layer, no filters), so the map matches the banner */
.map-host::after { content: ''; position: absolute; inset: 0; z-index: 400; pointer-events: none; background: rgba(8, 60, 22, .5); mix-blend-mode: multiply }
.map-host.cvmap::after { display: none }
.leaflet-container a { color: var(--g) } .leaflet-control-attribution { background: rgba(5, 8, 6, .85) !important; color: var(--mut) !important; font-size: 12px !important; border-radius: 8px 0 0 0; padding: 2px 8px }
.cvmap canvas { width: 100%; height: 100%; touch-action: manipulation; cursor: pointer }
.cv-zoom { position: absolute; left: 12px; bottom: 12px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); font: 700 13px var(--mf); display: inline-flex; align-items: center; justify-content: center }
.hud-top { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none } .hud-top > * { pointer-events: auto }
.hud-count { background: #0b1a10 }
.hud-near { position: absolute; z-index: 5; top: 60px; left: 12px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(8, 16, 11, .94); border: 1px solid var(--line2); font-size: 13.5px; color: var(--mut) } .hud-near b { color: var(--ink) }
.hud-btns { position: absolute; z-index: 5; right: 12px; bottom: 20px; display: grid; gap: 8px; transition: transform .3s var(--ease) }
.rbtn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--bg2); color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, transform .2s } .rbtn:hover { border-color: var(--g) } .rbtn:active { transform: scale(.92) } .rbtn.loc { color: var(--g) }
.notice { position: absolute; z-index: 6; top: 100px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); padding: 10px 14px; border-radius: 12px; border: 1px solid #5e4510; background: #1a1407; color: var(--warn); font-size: 14px; text-align: center }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: 13px; background: var(--bg2) }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--mut); font-weight: 650; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; transition: background .2s, color .2s } .seg button:hover { color: var(--ink) } .seg button.on { background: var(--g); color: #021105 }
.gate { position: absolute; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 8, 6, .9) }
.gate-card { width: min(440px, 100%); padding: 26px 22px; text-align: center; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r) } .gate-card img { margin: 0 auto 10px; animation: bob 3s ease-in-out infinite } .gate-card h2 { font-size: 30px; margin-bottom: 10px; font-stretch: 110% } .gate-card p { font-size: 15px; margin-bottom: 18px }
.empty-map { position: absolute; z-index: 5; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); padding: 16px 18px; border-radius: var(--r); background: rgba(8, 16, 11, .96); border: 1px solid var(--line2); text-align: center; color: var(--mut); font-size: 14.5px } .empty-map b { display: block; color: var(--ink); font-family: var(--hf); font-size: 19px; margin-bottom: 4px } .empty-map .btn { margin-top: 10px }
.devbar { position: absolute; z-index: 6; left: 12px; bottom: 20px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; border: 1px dashed var(--warn); background: rgba(26, 20, 7, .95); font-size: 13px } .devbar b { color: var(--warn); padding: 0 4px } .devbar button, .devbar select { min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg3); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: auto } .devbar select { padding-right: 24px; background-image: none }

/* ---------- the markers ---------- */
.bm-wrap, .me-wrap { background: none !important; border: 0 !important }
.bm { position: relative; width: 64px; height: 80px; display: flex; flex-direction: column; align-items: center; cursor: pointer }
.bm img { width: 56px; height: 56px; --s: 1; filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .75)); transform-origin: 50% 90%; animation: bob 3s ease-in-out infinite; transition: filter .2s }
.bm .lbl { margin-top: -6px; position: relative; min-width: 44px; height: 22px; padding: 0 9px; border-radius: 11px; background: #0c1a11; border: 1px solid var(--g3); color: var(--g); font: 700 13px/1 var(--mf); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap }
.bm.legendary .lbl { color: var(--gold); border-color: #6b5214 } .bm.legendary img { filter: drop-shadow(0 0 12px rgba(255, 201, 58, .75)) drop-shadow(0 7px 8px rgba(0, 0, 0, .7)) }
.bm.rare img { filter: drop-shadow(0 0 12px rgba(56, 255, 85, .85)) drop-shadow(0 7px 8px rgba(0, 0, 0, .7)) } .bm.rare .lbl { background: #0f2c18; border-color: var(--g) }
.bm.blind .lbl { color: var(--ink); border-style: dashed }
.bm .ring { position: absolute; left: 50%; top: 18px; width: 66px; height: 66px; margin-left: -33px; border-radius: 50%; border: 2px solid var(--g); opacity: 0; pointer-events: none }
.bm.near .ring { opacity: 1; animation: ping 1.5s ease-out infinite } .bm.sel img { --s: 1.2 }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(var(--s, 1)) } 50% { transform: translateY(-4px) scale(var(--s, 1)) } }
@keyframes ping { from { transform: scale(.7); opacity: 1 } to { transform: scale(1.45); opacity: 0 } }
.pme { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center } .pme i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--g); box-shadow: 0 0 0 0 var(--gglow); animation: pulse 2s infinite }

/* ---------- the bag sheet (bottom sheet on a phone, a card on a desktop) ---------- */
.sheet { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; padding: 18px 16px 18px; background: var(--bg2); border-top: 1px solid var(--g3); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .9); animation: rise .35s var(--ease) }
.has-sheet .hud-btns { transform: translateX(80px) } .has-sheet .empty-map, .has-sheet .devbar { display: none }
.sheet-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg3); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 2 }
.sheet-top { display: flex; align-items: center; gap: 14px; padding-right: 44px } .sheet-top > img { flex: none; width: 92px; height: 92px; animation: bob 3s ease-in-out infinite } .sheet-info { min-width: 0; flex: 1 }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px }
.amt { font-family: var(--hf); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-stretch: 112%; color: var(--g); margin: 2px 0 6px } .amt .unit { font-size: 18px; letter-spacing: 0; color: var(--ink); font-stretch: 100% } .amt.gld { color: var(--gold) } .amt.big { font-size: 64px }
.sheet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 12px } .sheet-stats > div { padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-align: center } .sheet-stats span { display: block; font-size: 12px; color: var(--mut); margin-bottom: 2px } .sheet-stats b { font: 700 15px var(--mf) } .dist { display: inline-flex; align-items: center; justify-content: center; gap: 6px } .dist i { font-style: normal } .dist svg { transition: transform .35s var(--ease); flex: none }
.prox { height: 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin-bottom: 14px } .prox i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--g3), var(--g)); transition: width .5s var(--ease) } .prox.full i { box-shadow: 0 0 14px var(--g) }
#cn { margin-top: 10px; text-align: center; min-height: 20px }
.win { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 0 0 } .win > img { animation: bob 2.4s ease-in-out infinite } .win .amt { margin: 0 } .win p { max-width: 420px }
@media (min-width: 900px) {
  .sheet { left: 20px; right: auto; bottom: 20px; width: 400px; max-height: calc(100% - 40px); border: 1px solid var(--g3); border-radius: var(--r) }
  .has-sheet .hud-btns { transform: none }
  .gate-card { padding: 34px 30px }
}

/* ---------- list pages ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px } .tile { padding: 16px 16px 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); position: relative }
.tile span { display: block; font-size: 13px; color: var(--mut); margin-bottom: 6px } .tile b { font: 800 34px/1 var(--hf); letter-spacing: -.03em; color: var(--g); font-stretch: 110% } .tile small { color: var(--mut); font-size: 13px; margin-left: 6px }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr) } }
.sect { margin-top: 26px } .sect h2 { font-size: 24px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-stretch: 105% }
.list { display: grid; gap: 8px }
.lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); transition: border-color .2s } .lrow:hover { border-color: var(--line2) } .lrow.mine { border-color: var(--g); background: #0b1c10 }
.lrow img { flex: none } .lmain { min-width: 0; flex: 1 1 120px; display: grid; gap: 1px } .lmain b { font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .lside { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.n { font: 700 12px var(--mf); font-style: normal; min-width: 26px; padding: 0 6px; height: 22px; border-radius: 7px; background: var(--bg3); color: var(--mut); display: inline-flex; align-items: center; justify-content: center }
.pos { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--bg3); border: 1px solid var(--line2); font: 800 15px var(--mf); font-style: normal; display: inline-flex; align-items: center; justify-content: center } .pos.top { background: var(--g); color: #021105; border-color: var(--g) }
.lnk { color: var(--g); text-decoration: underline; text-underline-offset: 3px }
.myrank { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px } .myrank .big { font: 800 40px/1 var(--hf); color: var(--g) }
.invite { margin-top: 26px } .invite h2 { font-size: 24px; margin-bottom: 6px } .linkbox { display: flex; gap: 8px; margin-top: 12px } .linkbox input { font: 500 13.5px var(--mf); min-width: 0 }
.steps3 { display: grid; gap: 10px } .steps3 .card { padding: 18px } .steps3 i { font: 800 13px var(--mf); font-style: normal; color: #021105; background: var(--g); width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px } .steps3 h3 { font-size: 26px; margin-bottom: 4px }
@media (min-width: 700px) { .steps3 { grid-template-columns: repeat(3, 1fr) } }
.faq { display: grid; gap: 10px } .faq details { padding: 0 } .faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; font-size: 17px; position: relative; min-height: 56px; display: flex; align-items: center } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; background: var(--bg3); display: inline-flex; align-items: center; justify-content: center; color: var(--g); font-size: 20px; line-height: 1 } .faq details[open] summary::after { content: '\2212' } .faq details p { padding: 0 18px 18px; font-size: 15px }
.car { text-align: center } .car-img { height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px } .car-img img { animation: bob 3s ease-in-out infinite } .car h3 { margin: 10px 0 8px } .car .eyebrow { margin-bottom: 4px } .car .row { justify-content: center }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); transition: width .3s var(--ease), background .2s } .dots i.on { width: 24px; border-radius: 5px; background: var(--g) }

/* big screens: the chrome around the map and the list pages are scaled (the map canvas is not) */
@media (min-width: 1600px) {
  .rail { zoom: var(--z) } .main { inset: 0 0 0 calc(236px * var(--z)) }
  .page > * { zoom: var(--z) } .hud-top, .hud-near, .hud-btns, .sheet, .empty-map, .devbar, .gate-card, .notice { zoom: var(--z) }
  .hud-top { top: calc(12px / var(--z)); left: calc(12px / var(--z)); right: calc(12px / var(--z)) } .hud-near { top: calc(60px / var(--z)); left: calc(12px / var(--z)) }
  .hud-btns { right: calc(12px / var(--z)); bottom: calc(20px / var(--z)) } .sheet { left: calc(20px / var(--z)); bottom: calc(20px / var(--z)); max-height: calc((100% - 40px) / var(--z)) }
  .devbar { left: calc(12px / var(--z)); bottom: calc(20px / var(--z)) }
}

/* "Add to Home Screen" hint: phones only, above the tab bar, hidden while a bag sheet is open */
.a2hs { position: fixed; z-index: 58; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; background: #0b1a10; border: 1px solid var(--g3); box-shadow: 0 16px 40px -14px #000; animation: rise .35s var(--ease) }
.a2hs img { flex: none; border-radius: 10px } .a2t { flex: 1; min-width: 0; display: grid; gap: 1px } .a2t b { font-size: 15px; line-height: 1.2 } .a2t span { font-size: 13px; color: var(--mut); line-height: 1.3 }
.a2x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg3); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center }
body.sheet-open .a2hs { display: none }
@media (min-width: 900px) { .a2hs { display: none } }

/* look around: the browsing banner, the city picker */
.browsebar { position: absolute; z-index: 5; top: 60px; left: 12px; width: min(560px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: rgba(8, 16, 11, .96); border: 1px solid var(--g3) }
.bb-t { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; font-size: 14.5px; line-height: 1.35 } .bb-t b { color: var(--g) } .bb-t .dot { flex: none }
.bb-b { display: flex; gap: 8px; flex: 0 0 auto; width: 100% } .bb-b .btn { flex: 1 }
@media (min-width: 700px) { .bb-b { width: auto } .bb-b .btn { flex: none } }
.citylist { display: grid; gap: 6px; max-height: 44vh; overflow-y: auto; margin: 12px 0 8px; padding-right: 2px }
.city { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg3); font-weight: 650; font-size: 16px; text-align: left } .city:hover { border-color: var(--g) }
#cq { margin-top: 4px }
.gate-card .btn.ghost { margin-top: 10px }
.sheet #cenable { margin-top: 8px }
@media (min-width: 1600px) { .browsebar { zoom: var(--z); top: calc(60px / var(--z)); left: calc(12px / var(--z)) } }

/* world view: cluster bubbles */
.cl { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, rgba(56, 255, 85, .5), rgba(15, 107, 34, .85)); border: 2px solid var(--g); box-shadow: 0 0 0 5px rgba(56, 255, 85, .14), 0 8px 22px -6px #000; color: #021105; cursor: pointer; text-align: center; transition: transform .2s var(--ease) }
.cl:hover { transform: scale(1.08) } .cl b { font: 800 17px/1 var(--hf); color: #f2fff4; letter-spacing: -.02em } .cl span { font: 700 12px/1.1 var(--mf); color: #d7ffe0; margin-top: 2px; white-space: nowrap }
.cl.blindonly { background: radial-gradient(circle at 35% 30%, rgba(233, 255, 233, .22), rgba(16, 26, 19, .9)); border-style: dashed; box-shadow: 0 8px 22px -6px #000 }