/* Fee Hunt: a phone-first map app. Light map, glass controls, one colour: drop magenta. */
:root{
  --mag:#FF2D8A;--mag2:#E3166F;--magl:#FFE6F1;--magg:rgba(255,45,138,.16);
  --ink:#0B0B0C;--ink2:#3A3A3F;--mute:#86868B;--faint:#AEAEB2;--line:rgba(60,60,67,.13);--line2:rgba(60,60,67,.07);
  --bg:#F2F1EC;--card:#FFFFFF;--fill:rgba(118,118,128,.12);--fill2:rgba(118,118,128,.08);
  --blue:#0A84FF;--green:#1FAE5B;--red:#FF3B30;--amber:#FF9F0A;
  --glass:rgba(250,250,248,.68);--glass2:rgba(255,255,255,.86);
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,"Segoe UI",Roboto,sans-serif;
  --disp:Tomorrow,var(--sys);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --tabh:64px;--ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:400 15px/1.4 var(--sys);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
img{display:block}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ------------- map ------------- */
#map{position:fixed;inset:0;background:var(--bg)}
#mapFade{position:fixed;left:0;right:0;top:0;height:calc(120px + var(--sat));pointer-events:none;background:linear-gradient(180deg,rgba(242,241,236,.55),rgba(242,241,236,0));z-index:1}
.maplibregl-ctrl-attrib{font:500 10px/1.3 var(--sys)!important;background:rgba(255,255,255,.6)!important;border-radius:8px!important;margin:0 8px 8px 0!important}
.maplibregl-ctrl-bottom-right{bottom:auto!important;top:calc(var(--sat) + 64px)!important;right:4px}
.maplibregl-ctrl-attrib-button{display:none}

/* ------------- glass ------------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);
  box-shadow:0 10px 30px rgba(20,20,30,.12),0 1px 2px rgba(20,20,30,.08),inset 0 0 0 .5px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.9)}

/* ------------- top bar ------------- */
#top{position:fixed;z-index:30;left:0;right:0;top:0;padding:calc(var(--sat) + 10px) 12px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
#top>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border-radius:22px}
.brand .wm{font:italic 700 17px/1 var(--disp);letter-spacing:.035em;padding-top:1px}
.tr{display:flex;gap:8px;align-items:center}
.chip{height:44px;padding:0 16px;border-radius:22px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;white-space:nowrap}
.chip img{width:22px;height:22px;border-radius:50%}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,174,91,.18)}
.ca{font-variant-numeric:tabular-nums}
.ca b{color:var(--mag);font-weight:700}

/* ------------- map controls ------------- */
#ctl{position:fixed;z-index:20;right:12px;top:calc(var(--sat) + 66px);display:flex;flex-direction:column;gap:8px;transition:opacity .3s}
.rb{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;font:700 13px/1 var(--sys);color:var(--ink)}
.rb svg{width:21px;height:21px}
.rb.on{color:var(--blue)}

/* ------------- sheet ------------- */
#sheet{position:fixed;z-index:25;left:8px;right:8px;bottom:0;height:calc(100% - var(--sat) - 64px);border-radius:30px 30px 0 0;
  background:var(--glass2);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:0 -8px 40px rgba(20,20,30,.14),inset 0 0 0 .5px rgba(255,255,255,.8);transform:translateY(calc(100% - 320px));transition:transform .45s var(--ease);display:flex;flex-direction:column;overflow:hidden;will-change:transform}
#sheet[data-detent="peek"]{transform:translateY(calc(100% - 196px - var(--sab)))}
#sheet[data-detent="mid"]{transform:translateY(46%)}
#sheet[data-detent="full"]{transform:translateY(0)}
#sheet.drag{transition:none}
.grab{flex:0 0 auto;height:22px;display:grid;place-items:center;cursor:grab;touch-action:none}
.grab i{width:38px;height:5px;border-radius:3px;background:rgba(60,60,67,.26)}
.sc{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 16px calc(var(--tabh) + 30px + var(--sab));overscroll-behavior:contain}
.sc::-webkit-scrollbar{width:0}

/* ------------- tab bar ------------- */
#tabs{position:fixed;z-index:40;left:14px;bottom:calc(10px + var(--sab));height:var(--tabh);border-radius:32px;display:flex;align-items:stretch;padding:5px;gap:2px;right:88px;max-width:430px}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:27px;font:600 10.5px/1 var(--sys);color:var(--ink2);transition:background .25s,color .25s}
#tabs a svg{width:25px;height:25px}
#tabs a.on{background:rgba(118,118,128,.14);color:var(--mag)}
#fab{position:fixed;z-index:40;right:14px;bottom:calc(10px + var(--sab));width:var(--tabh);height:var(--tabh);border-radius:50%;background:var(--mag);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(255,45,138,.38),0 2px 6px rgba(255,45,138,.3),inset 0 1px 0 rgba(255,255,255,.35)}
#fab svg{width:28px;height:28px}
#fab.on{background:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.25)}

/* ------------- typography in panes ------------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 2px 12px}
.ph h1{margin:0;font:700 27px/1.08 var(--sys);letter-spacing:-.02em}
.ph h1.d{font:italic 700 28px/1 var(--disp);letter-spacing:.01em}
.ph .sub{font-size:14px;color:var(--mute);margin-top:4px}
.ph .act{font-weight:600;color:var(--mag);font-size:15px;white-space:nowrap}
h2.sec{font:700 20px/1.2 var(--sys);letter-spacing:-.01em;margin:26px 2px 10px}
h3.sl{font:600 13px/1.2 var(--sys);color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin:22px 4px 8px}
p.lead{margin:0 2px 14px;color:var(--ink2);font-size:15px;line-height:1.45}
.muted{color:var(--mute)}
.mag{color:var(--mag)}

/* segmented control */
.seg{display:flex;background:var(--fill);border-radius:10px;padding:2px;margin:0 0 12px}
.seg button{flex:1;height:32px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--ink2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04)}

/* list groups (inset grouped) */
.grp{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 0 0 .5px var(--line2)}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;position:relative;min-height:62px}
.row+.row::before{content:"";position:absolute;left:66px;right:0;top:0;height:.5px;background:var(--line)}
.row.tap{cursor:pointer}
.row.tap:active{background:rgba(0,0,0,.04)}
@media (hover:hover){.row.tap:hover{background:#F7F6F2}}
.av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--fill);overflow:hidden;display:grid;place-items:center;font-weight:700;color:var(--mute);position:relative}
.av img{width:100%;height:100%;object-fit:cover}
.av.sq{border-radius:12px}
.av .ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--mag)}
.av>svg{display:block;border-radius:50%}
.av .cb{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px #fff;display:grid;place-items:center;font:700 9px/1 var(--sys)}
.av .cb img{width:100%;height:100%;object-fit:cover}
.rt{flex:1 1 auto;min-width:0}
.rt b{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt span{display:block;font-size:13.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rv{flex:0 0 auto;text-align:right}
.rv b{display:block;font:700 16px/1.15 var(--sys);font-variant-numeric:tabular-nums}
.rv span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.rv b.mag{color:var(--mag)}
.chev{width:16px;height:16px;color:var(--faint);flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:11px;font:700 11px/1 var(--sys);letter-spacing:.02em;text-transform:uppercase}
.pill.live{background:var(--magl);color:var(--mag2)}
.pill.live i{width:6px;height:6px;border-radius:50%;background:var(--mag);animation:blip 1.6s infinite}
.pill.chg{background:var(--fill);color:var(--ink2)}
.pill.paid{background:rgba(31,174,91,.12);color:#11833F}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:26px;font-weight:600;font-size:16.5px;letter-spacing:-.005em;transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn.p{background:var(--mag);color:#fff;box-shadow:0 8px 22px rgba(255,45,138,.3)}
.btn.k{background:var(--ink);color:#fff}
.btn.g{background:var(--fill);color:var(--ink)}
.btn.w{background:#fff;color:var(--ink);box-shadow:0 0 0 .5px var(--line)}
.btn.s{height:40px;padding:0 16px;font-size:15px;border-radius:20px}
.btn.full{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:20px;height:20px}
.brow{display:flex;gap:10px;margin:14px 0}
.brow .btn{flex:1}

/* empty state */
.empty{padding:22px 18px;text-align:center;color:var(--mute);background:var(--card);border-radius:18px;box-shadow:0 0 0 .5px var(--line2)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* ------------- drop detail ------------- */
.dh{display:flex;align-items:flex-start;gap:12px;margin:4px 2px 14px}
.dh .tt{flex:1;min-width:0}
.dh h1{margin:0;font:700 27px/1.08 var(--sys);letter-spacing:-.02em}
.dh .where{font-size:14.5px;color:var(--mute);margin-top:4px}
.xb{width:32px;height:32px;border-radius:50%;background:var(--fill);display:grid;place-items:center;flex:0 0 auto;color:var(--ink2)}
.xb svg{width:15px;height:15px}
.pot{position:relative;border-radius:22px;padding:18px 18px 16px;background:var(--ink);color:#fff;overflow:hidden}
.pot::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(255,45,138,.9);opacity:.95}
.pot .l{font:600 12.5px/1 var(--sys);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pot .v{font:700 46px/1 var(--disp);letter-spacing:-.01em;margin-top:10px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.pot .v small{font:600 20px/1 var(--disp);margin-left:6px;color:rgba(255,255,255,.75)}
.pot .u{font-size:14px;color:rgba(255,255,255,.62);margin-top:6px;position:relative;z-index:1}
.pot .st{position:relative;z-index:1;margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.pot .st span{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:13px;background:rgba(255,255,255,.12);font:600 12.5px/1 var(--sys)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fact{background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:0 0 0 .5px var(--line2)}
.fact span{display:block;font-size:12.5px;color:var(--mute)}
.fact b{display:block;font-size:16px;margin-top:3px;font-variant-numeric:tabular-nums}
.coinrow{display:flex;align-items:center;gap:12px}
.cabox{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--fill2);border-radius:12px;padding:8px 8px 8px 12px;font:500 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink2)}
.cabox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabox button{height:30px;padding:0 12px;border-radius:15px;background:#fff;font:600 13px/1 var(--sys);box-shadow:0 0 0 .5px var(--line)}

/* ------------- hunt HUD ------------- */
#hud{position:fixed;inset:0;z-index:45;pointer-events:none}
#hud>*{pointer-events:auto}
.hd-top{position:absolute;left:10px;right:10px;top:calc(var(--sat) + 10px);border-radius:28px;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px}
.hd-dir{width:58px;height:58px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.hd-dir svg{width:30px;height:30px;color:#fff;transition:transform .35s var(--ease)}
.hd-d{flex:1;min-width:0}
.hd-d b{display:block;font:700 40px/1 var(--disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hd-d span{display:block;font-size:14.5px;color:var(--ink2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-x{width:36px;height:36px;border-radius:50%;background:var(--fill);display:grid;place-items:center;align-self:flex-start;color:var(--ink2)}
.hd-x svg{width:15px;height:15px}
.hd-bot{position:absolute;left:10px;right:10px;bottom:calc(10px + var(--sab));border-radius:30px;padding:16px}
.hb-row{display:flex;align-items:center;gap:12px}
.hb-row .rt b{font-size:17px}
.hb-msg{margin:14px 2px 2px;font-size:15px;color:var(--ink2);line-height:1.4}
.hb-msg b{color:var(--ink)}
.hold{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px;border-radius:20px;background:var(--ink);color:#fff}
.hold .rg{width:58px;height:58px;flex:0 0 auto;position:relative}
.hold .rg svg{width:58px;height:58px;transform:rotate(-90deg)}
.hold .rg b{position:absolute;inset:0;display:grid;place-items:center;font:700 18px/1 var(--disp);font-variant-numeric:tabular-nums}
.hold .tx b{display:block;font-size:17px}
.hold .tx span{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-top:2px}
.blk{margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(255,59,48,.09);color:#B42318;font-size:14px;line-height:1.4}

/* user dot */
.me-dot{width:22px;height:22px;position:relative}
.me-dot i{position:absolute;inset:0;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.me-dot .cone{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:conic-gradient(from -28deg,rgba(10,132,255,.32),rgba(10,132,255,0) 56deg,rgba(10,132,255,0) 304deg,rgba(10,132,255,.32));-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);display:none}
.me-dot.hd .cone{display:block}
.me-dot::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:rgba(10,132,255,.18);animation:mepulse 2.2s infinite}
@keyframes mepulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* pot chips on the map */
.potm{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px 0 4px;border-radius:17px;background:#fff;box-shadow:0 6px 18px rgba(20,20,30,.18),0 0 0 .5px rgba(0,0,0,.06);font:700 14px/1 var(--sys);white-space:nowrap;cursor:pointer;transform-origin:50% 100%;transition:transform .2s}
.potm img,.potm .ci{width:26px;height:26px;border-radius:50%;background:var(--fill);object-fit:cover}
.potm .s{color:var(--mag)}
.potm.chg{background:rgba(255,255,255,.92);color:var(--ink2)}
.potm.chg .s{color:var(--mute)}
.potm::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0;box-shadow:2px 2px 3px rgba(0,0,0,.06)}
.potm.sel{transform:scale(1.12)}
.spotm{font:600 11px/1 var(--sys);color:#7d7a74;background:rgba(255,255,255,.8);padding:4px 7px;border-radius:9px;white-space:nowrap;box-shadow:0 0 0 .5px rgba(0,0,0,.06)}

/* ------------- launch ------------- */
.steps{display:flex;gap:6px;margin:2px 2px 16px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--fill)}
.steps i.on{background:var(--mag)}
.fld{display:block;margin-bottom:10px}
.fld>span{display:block;font:600 13px/1 var(--sys);color:var(--mute);margin:0 4px 7px}
.in{width:100%;height:50px;border:0;border-radius:14px;background:var(--card);padding:0 14px;font-size:16px;box-shadow:0 0 0 .5px var(--line2);outline:none;transition:box-shadow .2s}
.in:focus{box-shadow:0 0 0 2px var(--mag)}
textarea.in{height:84px;padding:12px 14px;resize:none;line-height:1.35}
.err{display:block;color:var(--red);font-size:12.5px;margin:5px 4px 0;min-height:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.imgdrop{display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--line2);cursor:pointer;margin-bottom:10px}
.imgdrop .pv{width:76px;height:76px;border-radius:16px;background:var(--fill2) center/cover;display:grid;place-items:center;color:var(--mute);flex:0 0 auto;border:1.5px dashed rgba(60,60,67,.25)}
.imgdrop .pv.has{border:0}
.imgdrop .pv svg{width:26px;height:26px}
.imgdrop b{display:block;font-size:16px}
.imgdrop span{display:block;font-size:13.5px;color:var(--mute);margin-top:2px}
.imgdrop.drag{box-shadow:0 0 0 2px var(--mag)}
.dropcard{background:var(--card);border-radius:20px;padding:14px;box-shadow:0 0 0 .5px var(--line2);margin-bottom:10px}
.dropcard .top{display:flex;align-items:center;gap:12px}
.dropcard .n{flex:1;min-width:0}
.dropcard .n b{display:block;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropcard .n span{display:block;font-size:13px;color:var(--mute);margin-top:1px}
.dropcard .badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--magl);color:var(--mag);font:700 13px/1 var(--disp)}
.pct{display:flex;align-items:center;gap:12px;margin-top:14px}
.pct b{font:700 30px/1 var(--disp);width:84px;font-variant-numeric:tabular-nums}
.pct input{flex:1}
input[type=range]{-webkit-appearance:none;appearance:none;height:30px;background:none;outline:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--mag) var(--v,30%),var(--fill) var(--v,30%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;margin-top:-11px;box-shadow:0 3px 10px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.08)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--fill)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--mag)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.opts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.opts button{height:32px;padding:0 12px;border-radius:16px;background:var(--fill2);font-weight:600;font-size:13px;color:var(--ink2)}
.opts button.on{background:var(--ink);color:#fff}
.opts .l{font-size:12.5px;color:var(--mute);align-self:center;margin-right:2px;font-weight:600}
.rmx{width:30px;height:30px;border-radius:50%;background:var(--fill2);display:grid;place-items:center;color:var(--mute)}
.rmx svg{width:13px;height:13px}
.adders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:4px 0 12px}
.adders button{height:78px;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:13px}
.adders button svg{width:24px;height:24px;color:var(--mag)}
.adders button.on{box-shadow:0 0 0 2px var(--mag)}
.hot{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.hot::-webkit-scrollbar{display:none}
.hot button{flex:0 0 auto;height:56px;padding:0 14px 0 6px;border-radius:28px;background:var(--card);box-shadow:0 0 0 .5px var(--line2);display:flex;align-items:center;gap:10px;text-align:left}
.hot button .mini{width:44px;height:44px;border-radius:50%;background:var(--magl);display:grid;place-items:center;color:var(--mag)}
.hot button .mini svg{width:22px;height:22px}
.hot button b{display:block;font-size:14px;white-space:nowrap}
.hot button span{display:block;font-size:12px;color:var(--mute)}
.hot button.used{opacity:.4;pointer-events:none}
.srch{position:relative;margin-bottom:8px}
.srch .in{padding-left:40px}
.srch svg{position:absolute;left:13px;top:15px;width:19px;height:19px;color:var(--mute)}
.sres{background:var(--card);border-radius:16px;box-shadow:0 0 0 .5px var(--line2);overflow:hidden;margin-bottom:10px}
.sres button{display:block;width:100%;text-align:left;padding:11px 14px;border-top:.5px solid var(--line)}
.sres button:first-child{border-top:0}
.sres b{display:block;font-size:15px}
.sres span{display:block;font-size:12.5px;color:var(--mute)}
.split{margin:6px 0 14px;background:var(--card);border-radius:20px;padding:14px;box-shadow:0 0 0 .5px var(--line2)}
.split .bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--fill);margin:10px 0 8px}
.split .bar i{display:block;height:100%}
.split .bar i.h{background:var(--mag)}
.split .bar i.c{background:var(--ink)}
.split .lg{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2)}
.split .lg b{font-variant-numeric:tabular-nums}
.split .big{display:flex;align-items:baseline;gap:8px}
.split .big b{font:700 34px/1 var(--disp);color:var(--mag)}
.split .big span{color:var(--mute);font-size:14px}
.pickhint{position:fixed;z-index:44;left:50%;top:calc(var(--sat) + 66px);transform:translateX(-50%);padding:10px 16px;border-radius:20px;font-weight:600;font-size:14px;white-space:nowrap}
.prog{margin:14px 0 4px}
.prog div{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:15px;color:var(--mute)}
.prog div i{width:22px;height:22px;border-radius:50%;border:2px solid var(--fill);flex:0 0 auto;position:relative}
.prog div.now{color:var(--ink);font-weight:600}
.prog div.now i{border-color:var(--mag);border-right-color:transparent;animation:spin .8s linear infinite}
.prog div.ok{color:var(--ink)}
.prog div.ok i{background:var(--mag);border-color:var(--mag)}
.prog div.ok i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.prog div.bad i{border-color:var(--red);background:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
.status{font-size:14px;color:var(--ink2);margin:8px 4px;min-height:20px}
.status.bad{color:var(--red)}
.note{font-size:13px;color:var(--mute);line-height:1.45;margin:10px 4px}

/* ------------- about ------------- */
.how{display:grid;gap:10px}
.how .it{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:18px;padding:14px;box-shadow:0 0 0 .5px var(--line2)}
.how .it .k{width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font:italic 700 17px/1 var(--disp);flex:0 0 auto}
.how .it b{display:block;font-size:16px}
.how .it span{display:block;font-size:14px;color:var(--ink2);margin-top:3px;line-height:1.42}
.qa{background:var(--card);border-radius:18px;box-shadow:0 0 0 .5px var(--line2);overflow:hidden}
.qa details{border-top:.5px solid var(--line)}
.qa details:first-child{border-top:0}
.qa summary{list-style:none;padding:14px 16px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--mute);font-weight:500}
.qa details[open] summary::after{content:"\2212"}
.qa p{margin:0;padding:0 16px 14px;color:var(--ink2);font-size:14.5px;line-height:1.48}
.foot{margin:24px 4px 6px;font-size:12.5px;color:var(--mute);line-height:1.5}
.foot a{color:var(--ink2);font-weight:600}

/* ------------- intro / onboarding ------------- */
#intro{position:fixed;inset:0;z-index:60;background:rgba(242,241,236,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--sab))}
.ob{width:100%;max-width:440px;border-radius:34px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden;animation:obIn .55s var(--ease)}
@keyframes obIn{from{transform:translateY(40px);opacity:0}}
.ob .art{height:270px;position:relative;background:var(--ink);overflow:hidden}
.ob .art canvas{position:absolute;inset:0;width:100%;height:100%}
.ob .tx{padding:22px 24px 8px}
.ob .tx h2{margin:0;font:italic 700 30px/1.04 var(--disp);letter-spacing:.005em}
.ob .tx p{margin:10px 0 0;color:var(--ink2);font-size:15.5px;line-height:1.45}
.ob .dots{display:flex;gap:6px;justify-content:center;margin:16px 0 6px}
.ob .dots i{width:7px;height:7px;border-radius:4px;background:var(--fill);transition:width .3s,background .3s}
.ob .dots i.on{width:22px;background:var(--mag)}
.ob .bt{padding:10px 20px 20px;display:flex;gap:10px}
.ob .bt .btn{flex:1}

/* ------------- win ------------- */
#win{position:fixed;inset:0;z-index:80;background:var(--mag);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 24px calc(30px + var(--sab));animation:winIn .5s var(--ease)}
@keyframes winIn{from{opacity:0;transform:scale(1.04)}}
#win .ring{width:150px;height:150px;border-radius:50%;border:16px solid #fff;display:grid;place-items:center;margin-bottom:28px;position:relative}
#win .ring svg{width:58px;height:58px;color:#fff;transform:rotate(45deg)}
#win h1{margin:0;font:italic 700 64px/.95 var(--disp);letter-spacing:.01em}
#win .amt{font:700 44px/1 var(--disp);margin-top:18px;font-variant-numeric:tabular-nums}
#win p{max-width:340px;margin:12px auto 0;font-size:16px;line-height:1.45;color:rgba(255,255,255,.88)}
#win .wb{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px;margin-top:30px}
#win .btn.w{color:var(--mag2)}
#win .btn.o{background:rgba(255,255,255,.16);color:#fff}

/* ------------- modal ------------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(10,10,12,.32);display:none;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--sab))}
.modal.on{display:flex}
.modal .box{width:100%;max-width:420px;border-radius:30px;padding:20px;background:rgba(255,255,255,.92);animation:obIn .4s var(--ease)}
.modal h3{margin:0 0 4px;font:700 21px/1.2 var(--sys)}
.modal p{margin:0 0 14px;color:var(--ink2);font-size:14.5px;line-height:1.45}
.wl{display:grid;gap:8px}
.wl button{display:flex;align-items:center;gap:12px;height:58px;padding:0 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px var(--line);font-weight:600;font-size:16px;text-align:left}
.wl button img{width:34px;height:34px;border-radius:9px}
.wl button span{margin-left:auto;font-size:12.5px;color:var(--mute);font-weight:500}
.or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12.5px;margin:14px 0 10px}
.or::before,.or::after{content:"";flex:1;height:.5px;background:var(--line)}

#toast{position:fixed;z-index:99;left:50%;top:calc(var(--sat) + 14px);transform:translate(-50%,-90px);padding:12px 18px;border-radius:22px;background:rgba(20,20,22,.9);color:#fff;font-weight:600;font-size:14.5px;transition:transform .45s var(--ease);max-width:calc(100% - 32px);text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#toast.on{transform:translate(-50%,0)}

/* launching is a task of its own on phones: the tab bar steps aside */
@media (max-width:1023px){
  body.launching #tabs,body.launching #fab{display:none}
  body.launching .sc{padding-bottom:calc(36px + var(--sab))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------- top bar parts that only a computer gets ------------- */
.dnav,.dsearch,.dlaunch,#ctl .zoom{display:none}
.dres{position:absolute;left:0;right:0;top:52px;border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 20px 50px rgba(20,20,30,.18),0 0 0 .5px rgba(0,0,0,.06);overflow:hidden;padding:6px}
.dres button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:14px}
.dres button:hover,.dres button.on{background:#F4F3EF}
.dres .av{width:36px;height:36px}
.dres b{display:block;font-size:15px}
.dres span{display:block;font-size:12.5px;color:var(--mute)}
.dres .h{font:600 11.5px/1 var(--sys);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:10px 12px 6px}

/* hot spot cards with a real map thumbnail */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spot{border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 .5px var(--line2);text-align:left;transition:transform .2s var(--ease),box-shadow .2s}
.spot .im{height:96px;background:#E9E7E1 center/cover}
.spot .tx{padding:9px 11px 11px}
.spot b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
@media (hover:hover){.spot:hover{transform:translateY(-2px);box-shadow:0 0 0 .5px var(--line2),0 12px 26px rgba(20,20,30,.1)}}
.hero-im{height:170px;border-radius:20px;background:#E9E7E1 center/cover;margin:0 0 14px;position:relative;overflow:hidden}
.hero-im::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06);border-radius:20px}

/* the welcome card on a computer */
.welcome{position:relative;border-radius:22px;padding:18px 18px 16px;background:var(--ink);color:#fff;margin:0 0 16px;overflow:hidden}
.welcome::after{content:"";position:absolute;right:-62px;top:-62px;width:150px;height:150px;border-radius:50%;border:18px solid var(--mag)}
.welcome h2{position:relative;z-index:1;margin:0;font:italic 700 25px/1.05 var(--disp);max-width:280px}
.welcome ol{position:relative;z-index:1;margin:12px 0 0;padding-left:18px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);max-width:330px}
.welcome .x{position:absolute;z-index:2;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.welcome .x svg{width:13px;height:13px}
.welcome .qrrow{position:relative;z-index:1;display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:14px;border-top:.5px solid rgba(255,255,255,.14)}
.welcome .qr{width:78px;height:78px;background:#fff;border-radius:12px;padding:6px;flex:0 0 auto}
.welcome .qr svg{width:100%;height:100%}
.welcome .qrrow b{display:block;font-size:14.5px}
.welcome .qrrow span{display:block;font-size:12.5px;color:rgba(255,255,255,.65);margin-top:2px}

/* hunt on your phone (a computer cannot walk) */
#mPhone .box{max-width:460px;text-align:center}
#mPhone .qrbig{width:210px;height:210px;margin:6px auto 14px;padding:12px;border-radius:22px;background:#fff;box-shadow:0 0 0 .5px var(--line)}
#mPhone .qrbig svg{width:100%;height:100%}
#mPhone h3{font:italic 700 26px/1.05 var(--disp);margin:4px 0 8px}

/* ------------- a computer: top bar, a side panel, the map ------------- */
@media (min-width:1024px){
  #top{padding:12px 16px 0;display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center}
  .brand{height:46px;padding:0 16px 0 9px}
  .brand .wm{font-size:18px}
  .dnav{display:flex;height:46px;border-radius:23px;padding:4px;gap:2px}
  .dnav a{display:flex;align-items:center;padding:0 16px;border-radius:19px;font-weight:600;font-size:14.5px;color:var(--ink2);transition:background .2s,color .2s}
  .dnav a:hover{color:var(--ink)}
  .dnav a.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04)}
  .dsearch{display:block;position:relative;justify-self:center;width:min(440px,30vw)}
  .dsearch>svg{position:absolute;left:15px;top:13px;width:20px;height:20px;color:var(--mute);z-index:1}
  .dsearch input{width:100%;height:46px;border:0;border-radius:23px;padding:0 16px 0 44px;font-size:15px;outline:none}
  .dsearch input:focus{box-shadow:0 0 0 2px var(--mag),0 10px 30px rgba(20,20,30,.12)}
  .dlaunch{display:inline-flex;height:46px;padding:0 18px;border-radius:23px}
  .chip{height:46px;border-radius:23px}
  #sheet{left:16px;right:auto;top:76px;bottom:16px;width:448px;height:auto;border-radius:28px;transform:none!important;transition:none;background:rgba(255,255,255,.97)}
  .grab{display:none}
  .sc{padding:20px 20px 28px}
  #tabs,#fab{display:none!important}
  #ctl{top:auto;right:16px;bottom:30px}
  #ctl .zoom{display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
  #ctl .zoom .rb{border-radius:0;background:transparent}
  #ctl .zoom .rb+.rb{box-shadow:0 -.5px 0 var(--line)}
  #hud .hd-top{left:auto;right:16px;width:440px}
  #hud .hd-bot{left:auto;right:16px;width:440px}
  #intro{align-items:center}
  .maplibregl-ctrl-bottom-right{top:auto!important;bottom:0!important}
  .ph h1{font-size:30px}
  .spots{grid-template-columns:1fr 1fr}
  .spot .im{height:112px}
  body.launching #sheet{width:500px}
}
@media (min-width:1024px) and (max-width:1240px){ .dnav a[data-tab="about"]{display:none} .dsearch{width:min(340px,26vw)} }

/* ------------- opening gate (closed until $FEEHUNT is on chain) ------------- */
#gate{position:fixed;inset:0;z-index:28;display:grid;place-items:center;padding:calc(var(--sat) + 70px) 16px calc(24px + var(--sab));background:rgba(242,241,236,.42);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);animation:gIn .45s var(--ease)}
#gate.open{animation:gOut .5s 1s var(--ease) forwards}
body.gated #sheet,body.gated #tabs,body.gated #fab,body.gated #ctl,body.gated #hud{display:none!important}
.gcard{width:100%;max-width:420px;background:var(--glass2);border-radius:30px;padding:32px 24px 22px;text-align:center;box-shadow:0 40px 90px -40px rgba(11,11,12,.45),0 0 0 1px var(--line2)}
.gmark{width:96px;height:96px;margin:0 auto 20px;display:grid;place-items:center;position:relative}
.gmark::before,.gmark::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--mag);opacity:0;animation:gRing 2.6s var(--ease) infinite}
.gmark::after{animation-delay:1.3s}
.gmark span{position:relative;z-index:1;display:block;line-height:0}
.gcard h1{margin:0;font:italic 700 34px/1.02 var(--disp);letter-spacing:.005em}
.gcard p{margin:12px auto 0;max-width:330px;color:var(--ink2);font-size:15.5px;line-height:1.5}
.gca{margin-top:22px;padding:14px 14px 14px 16px;border-radius:18px;background:var(--fill2);display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left}
.gca span{grid-column:1;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.gca b{grid-column:1;font-size:13.5px;font-weight:600;word-break:break-all;line-height:1.35}
.gca .btn{grid-column:2;grid-row:1 / span 2}
.gca.soon{display:flex;gap:10px;align-items:center;justify-content:center}
.gca.soon img{width:22px;height:22px;border-radius:6px}
.gca.soon span{font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink2)}
.gstat{display:flex;align-items:center;justify-content:center;gap:9px;margin:20px 0 18px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.gstat i,.h-soon i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--mag);animation:gDot 1.8s infinite}
#gate.open .gstat i{background:var(--green);animation:none}
@keyframes gIn{from{opacity:0}to{opacity:1}}
@keyframes gOut{to{opacity:0;visibility:hidden}}
@keyframes gRing{0%{transform:scale(.72);opacity:.75}100%{transform:scale(1.5);opacity:0}}
@keyframes gDot{0%{box-shadow:0 0 0 0 rgba(255,45,138,.55)}100%{box-shadow:0 0 0 11px rgba(255,45,138,0)}}
@media (min-width:1024px){#gate{padding-top:96px}}
/* phones: the CA chip shows only the ticker (a tap copies the CA), so the top bar fits beside Connect */
@media (max-width:520px){#caChip .num{display:none}#caChip{padding:0 12px}#wbtn{padding:0 13px}#top .tr{gap:6px}#top .brand{flex:none;white-space:nowrap}}
@media (max-width:374px){#caChip{display:none}}