/* Wilddex — sage glass */
:root {
  --ink: #0F2A20; --ink2: #2A4E40; --deep: #1D5540; --gold: #E9B949; --alert: #9E3B2A;
  --bg1: #D7E9DC; --bg2: #C3DDCB; --white: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.45);
  --glass-strong: rgba(255, 255, 255, 0.82);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Poppins, -apple-system, system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(170deg, var(--bg1) 0%, var(--bg2) 100%); background-attachment: fixed;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.screen { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600; color: var(--ink2); }
.h1 { font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; }
.sub { font-size: 14px; color: var(--ink2); }
.glass { background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 26px; backdrop-filter: blur(14px); }
.pill { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; white-space: nowrap; height: 44px; padding: 0 15px; border-radius: 20px; background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.65); font-size: 14px; font-weight: 500; }
.chip.on { background: var(--deep); color: var(--white); border-color: transparent; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.card { position: relative; height: 252px; border-radius: 28px; overflow: hidden; background: var(--glass); border: 1px solid rgba(255,255,255,.6); display: flex; flex-direction: column; }
.card .photo { height: 150px; margin: 8px 8px 0 10px; border-radius: 22px; overflow: hidden; position: relative; background: #cfe3d6; }
.card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .meta { padding: 9px 14px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.card .name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .type { font-size: 12px; color: var(--ink2); display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.card .type svg, .card .near svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .type span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.locked { align-items: center; justify-content: center; }
/* A species still to find: the card it will become, with the colour taken out of it. */
.card.tofind .photo img { filter: grayscale(1) contrast(.92); opacity: .78; }
.card.tofind .tag { filter: grayscale(1); }
.card.tofind .meta { opacity: .72; }
.card.tofind:active .photo img { filter: none; opacity: 1; }
.card.locked .q { font-size: 64px; font-weight: 400; color: rgba(15,42,32,.38); line-height: 1; }
.card.locked .near { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--ink2); }
.card .new { position: absolute; top: 16px; left: 16px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--deep); color: var(--white); display: flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tag { position: absolute; top: 8px; right: 8px; height: 24px; padding: 0 9px; border-radius: 12px; background: rgba(255,255,255,.85); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.btn { width: 100%; height: 56px; border-radius: 28px; background: var(--deep); color: var(--white); font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.ghost { background: var(--glass); color: var(--ink); }
.btn[disabled] { opacity: .5; }
nav { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 76px; border-radius: 38px; background: var(--glass-strong); backdrop-filter: blur(18px); box-shadow: 0 12px 30px rgba(15,42,32,.18); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; z-index: 10; }
nav button { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink2); transition: background .18s, width .18s, height .18s, color .18s; }
nav button.on { width: 54px; height: 54px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 6px 16px rgba(15,42,32,.15); }
nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav button.on svg { stroke-width: 2; }
nav .shoot { width: 56px; height: 56px; background: var(--deep); color: #fff; box-shadow: 0 8px 18px rgba(29,85,64,.4); }
nav .shoot.on { background: var(--deep); color: #fff; width: 56px; height: 56px; }
nav .shoot svg { width: 24px; height: 24px; }

.hero { height: min(440px, 56vh); position: relative; margin: -14px -16px 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%); }
.hero .top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.hero .shade { position: absolute; top: 0; left: 0; right: 0; height: 140px; background: linear-gradient(180deg, rgba(15,42,32,.35), rgba(15,42,32,0)); }
.hero .over { position: absolute; inset: auto 0 0 0; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.hero .hname { font-size: 42px; line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.hero .hlatin { font-size: 16px; font-style: italic; color: var(--ink2); }
.rbtn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass-strong); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(14px); }
.rbtn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel { padding: 16px; margin-top: 12px; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(15,42,32,.09); font-size: 14px; }
.fact:last-child { border-bottom: 0; }
.fact span:first-child { color: var(--ink2); }
.center { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(15,42,32,.15); border-top-color: var(--deep); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.82); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.rise { animation: rise .4s ease-out both; }
.shot { width: 100%; border-radius: 26px; display: block; }
.note { font-size: 13px; line-height: 1.5; color: var(--ink2); }
.err { background: rgba(158,59,42,.12); color: var(--alert); border-radius: 18px; padding: 12px 14px; font-size: 14px; }

/* Explore */
#map, #speciesmap { position: absolute; inset: 0; }
.map-wrap { position: relative; height: 54vh; min-height: 300px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 12px 28px rgba(15,42,32,.14); margin-top: 12px; }
.map-note { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 18px; background: var(--glass-strong); backdrop-filter: blur(10px); font-size: 12px; line-height: 1.4; }
.pin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(15,42,32,.35); background-size: cover; background-position: center; cursor: pointer; }
.pin.mine { border-color: var(--deep); }
.pin.hidden-spot { display: flex; align-items: center; justify-content: center; background: var(--deep); color: #fff; font-weight: 700; font-size: 18px; border-color: rgba(255,255,255,.85); }
.find { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 22px; background: var(--glass); border: 1px solid rgba(255,255,255,.6); margin-top: 10px; }
.find img, .find .q2 { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.find .q2 { background: var(--deep); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.maplibregl-ctrl-attrib { font-family: Poppins, sans-serif; font-size: 10px; }

/* Card page */
.chip-row2 { display: flex; flex-wrap: wrap; gap: 6px; }
.chip2 { height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.chip2 svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.stat { border-radius: 20px; background: var(--glass); border: 1px solid rgba(255,255,255,.6); padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; }
.stat .v { font-size: 17px; font-weight: 600; line-height: 1.15; display: flex; align-items: center; gap: 5px; }
.stat .label { display: flex; align-items: center; gap: 5px; font-size: 9px; }
.stat .label svg { width: 12px; height: 12px; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scale { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 10px; }
.seg { flex: 1; height: 28px; border-radius: 9px; background: rgba(255,255,255,.45); color: var(--ink2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.seg.on { height: 38px; font-weight: 700; }
.warn { margin-top: 10px; border-radius: 18px; background: rgba(255,255,255,.5); padding: 10px 12px; font-size: 13px; line-height: 1.45; display: flex; align-items: flex-start; gap: 10px; }
.warn svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.banner { margin-top: 12px; border-radius: 22px; background: rgba(233,185,73,.5); border: 1px solid rgba(255,255,255,.7); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; }
.banner svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tree { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 24px; margin-top: 12px; }
.tree::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: rgba(15,42,32,.2); }
.tree-row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tree-row::before { content: ''; position: absolute; left: -24px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--deep); }
.tree-row.last::before { background: var(--deep); }
.tree .tv { font-size: 15px; font-weight: 500; text-align: right; }
.caps { display: flex; gap: 10px; overflow-x: auto; margin: 10px -4px 0; padding: 0 4px 4px; scrollbar-width: none; }
.caps::-webkit-scrollbar { display: none; }
.cap { position: relative; width: 120px; height: 152px; flex-shrink: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.75); cursor: pointer; }
.cap-ok { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.cap-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cap-time { font-size: 10px; font-weight: 400; color: var(--ink2); }
.cap.on { border-color: var(--deep); }
.cap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-date { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px 9px; border-radius: 14px; background: var(--glass-strong); font-size: 11px; font-weight: 600; display: flex; flex-direction: column; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(15,42,32,.08); }
.check:last-child { border-bottom: 0; }
.tick { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--deep); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* Collection polish */
.hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); margin-top: 10px; }
.hint svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card.holo { border-color: var(--holo, rgba(255,255,255,.6)); box-shadow: 0 0 0 1px var(--holo, transparent) inset, 0 10px 22px rgba(15,42,32,.14); }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tag.gold { background: var(--gold); color: var(--ink); }
.tag.bottom { top: auto; bottom: 8px; right: auto; left: 8px; }
.tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card.locked .near { font-size: 12px; font-weight: 600; color: var(--ink2); margin-top: 6px; }
.card.locked .tag { top: 10px; left: 10px; right: auto; }

/* Sets */
.sets { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.set { border-radius: 26px; background: var(--glass); border: 1px solid rgba(255,255,255,.6); border-left: 5px solid var(--accent, var(--deep)); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.set.done { background: rgba(255,255,255,.62); }
.set-name { font-size: 18px; font-weight: 600; line-height: 1.2; }
.set-count { font-size: 15px; font-weight: 600; white-space: nowrap; }
.bar { height: 8px; border-radius: 4px; background: rgba(15,42,32,.12); overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; background: var(--accent, var(--deep)); }
.slots { display: flex; gap: 8px; }
.slot { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: rgba(15,42,32,.35); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.reward { font-size: 13px; font-weight: 600; color: var(--deep); }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 20; height: 62px; border-radius: 31px; background: var(--deep); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 18px; box-shadow: 0 14px 30px rgba(15,42,32,.35); animation: rise .45s cubic-bezier(.2,1.3,.4,1) both; cursor: pointer; }
.toast-star { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.toast > div:nth-child(2) { flex: 1; min-width: 0; }

/* Share card */
.share-img { width: 100%; border-radius: 26px; display: block; box-shadow: 0 14px 34px rgba(15,42,32,.22); }
.btn[disabled] { pointer-events: none; }

/* Shop */
.pill.dark { background: #173F31; color: #fff; }
.seg2 { display: flex; gap: 4px; padding: 4px; border-radius: 26px; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.6); margin-top: 12px; }
.seg2 button { flex: 1 1 auto; padding: 0 9px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; border-radius: 22px; font-size: 14px; font-weight: 500; color: var(--ink); }
.seg2 button.on { background: var(--deep); color: #fff; }
.seg2.small button { height: 44px; font-size: 12px; }
.seg2 button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seg2 button .n { opacity: .7; }
.gcard { border-radius: 26px; background: var(--gradient, linear-gradient(160deg, #2B6D53 0%, #173F31 100%)); color: #fff; padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: 0 12px 26px rgba(15,42,32,.22); }
.gcard.owned { opacity: .85; }
.gphoto { height: 132px; border-radius: 20px; overflow: hidden; position: relative; }
.gphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmeta { padding: 0 6px; }
.gmeta .name { font-size: 16px; font-weight: 600; line-height: 1.15; }
.gfoot { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 4px; }
.note.light, .type.light { color: rgba(255,255,255,.8); }
.price { background: #fff; color: var(--ink); border-radius: 16px; padding: 5px 12px; font-size: 14px; font-weight: 700; }
.card.guard { background: linear-gradient(160deg, #2B6D53 0%, #173F31 100%); border-color: rgba(255,255,255,.25); }
.tag.dark { background: #173F31; color: #fff; }
.pack { position: relative; height: 176px; border-radius: 24px; overflow: hidden; background: linear-gradient(165deg, #F1E9D6 0%, #DDCDAA 100%); cursor: pointer; box-shadow: 0 12px 26px rgba(15,42,32,.18); }
.pack.small { width: 92px; height: 74px; border-radius: 14px; flex-shrink: 0; }
.pack-flap { position: absolute; top: 0; left: 0; right: 0; height: 86px; background: linear-gradient(180deg, #E8DCC1 0%, #D2BF98 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pack.small .pack-flap { height: 36px; }
.pack-seal { position: absolute; left: 50%; top: 52px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; object-fit: cover; border: 3px solid #173F31; }
.pack.small .pack-seal { top: 20px; width: 34px; height: 34px; margin-left: -17px; border-width: 2px; }
.pack-cards { position: absolute; top: 10px; right: 10px; height: 22px; padding: 0 9px; border-radius: 11px; background: #173F31; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; }
.pack-meta { position: absolute; left: 12px; right: 12px; bottom: 10px; }
.pack-name { font-size: 17px; font-weight: 600; }
.backdrop { position: fixed; inset: 0; background: rgba(15,42,32,.4); z-index: 30; }
.sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 31; max-height: 82vh; overflow-y: auto; border-radius: 32px; background: var(--glass-strong); backdrop-filter: blur(18px); padding: 18px; animation: rise .3s cubic-bezier(.2,.9,.3,1) both; }
.sheet-img { width: 76px; height: 92px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
/* Envelope opening: sealed envelope, card-by-card reveal, summary */
.open-screen { position: fixed; inset: 0; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 38%, #2F7358 0%, #163A2C 55%, #0C2219 100%); color: #fff; z-index: 40; }
.open-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; }
.open-top .label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.open-top .label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ghost-pill { height: 44px; padding: 0 16px; border-radius: 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 14px; font-weight: 500; }
.center-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: calc(100vh - 120px); }
.pulse-hint { animation: pulse 1.6s ease-in-out infinite; }

/* The sealed envelope */
.envelope { position: relative; width: 290px; height: 196px; animation: envBob 2.4s ease-in-out infinite; }
.envelope.tearing { animation: envShake .5s ease-in-out both, envRise .6s cubic-bezier(.3,.7,.2,1) .5s both; }
.env-body { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(165deg, #F1E9D6 0%, #DDCDAA 100%); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.env-card { position: absolute; left: 14px; right: 14px; top: 16px; height: 150px; border-radius: 12px; background: linear-gradient(160deg, #2B6D53 0%, #173F31 100%); box-shadow: 0 -6px 20px rgba(0,0,0,.25); transition: transform .7s cubic-bezier(.2,.9,.3,1) .35s; }
.envelope.tearing .env-card { transform: translateY(-70px); }
.env-lip { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; border-radius: 0 0 18px 18px; background: linear-gradient(165deg, #F1E9D6 0%, #DDCDAA 100%); }
.env-flap { position: absolute; top: 0; left: 0; right: 0; height: 112px; z-index: 2; transform-origin: 50% 0; transition: transform .55s cubic-bezier(.3,.7,.2,1); background: linear-gradient(180deg, #E8DCC1 0%, #D2BF98 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 18px 18px 0 0; }
.envelope.tearing .env-flap { transform: rotateX(180deg); }
.env-seal { position: absolute; left: 50%; top: 76px; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; object-fit: cover; border: 3px solid #173F31; box-shadow: 0 6px 16px rgba(0,0,0,.35); z-index: 3; transition: opacity .3s; }
.envelope.tearing .env-seal { opacity: 0; }
.burst { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(242,214,140,.85) 0%, rgba(242,214,140,0) 60%); opacity: 0; pointer-events: none; }
.envelope.tearing .burst { animation: burst .9s ease-out .35s both; }
@keyframes envBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes envShake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes envRise { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(60px) scale(.9); opacity: 0; } }
@keyframes burst { 0% { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* The deck of cards */
.deck { position: relative; height: min(460px, 60vh); margin-top: 10px; }
.deck-card { position: absolute; left: 50%; top: 10px; width: 256px; height: min(370px, 52vh); margin-left: -128px; perspective: 1400px; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3,.7,.2,1); }
.flip.on { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.flip .back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg, #2B6D53, #173F31); border: 2px solid rgba(255,255,255,.28); box-shadow: 0 30px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.back-mark { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; }
.back-mark svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.back-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.flip .front { background: linear-gradient(160deg, #2B6D53, #173F31); transform: rotateY(180deg); padding: 9px; display: flex; flex-direction: column; gap: 10px; }
.front-photo { position: relative; flex: 1; border-radius: 19px; overflow: hidden; }
.front-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.front-meta { padding: 0 6px; }
.front-name { font-size: 24px; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.front-latin { font-size: 13px; font-style: italic; opacity: .8; }
.front-foot { padding: 0 6px 4px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .85; }
.front-foot span { display: inline-flex; align-items: center; gap: 5px; }
.front-foot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.open-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.dots { display: flex; gap: 6px; }
.dots span { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
.dots span.done { background: #fff; }
.dots span.on { width: 22px; background: #fff; }
.open-summary { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.open-summary .grid { margin: 0; }
.open-summary .btn { margin: 0; }
.gcard.mini { padding: 6px; border-radius: 22px; }
.gcard.mini .gphoto { height: 104px; border-radius: 16px; }
.gcard.mini .gmeta { min-height: 0; padding: 0 4px 4px; }
.gcard.mini .gmeta .name { font-size: 15px; }
.gcard.mini .tag { height: 20px; padding: 0 7px; font-size: 8px; top: 6px; right: 6px; }
.gcard.mini .gphoto { height: 96px; }
.price { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.price small { font-size: 10px; font-weight: 600; opacity: .65; }

/* Capture: viewfinder, checks, reveal — the prototype's capture flow. */
.cam { position: fixed; inset: 0; background: #0B1F18; overflow: hidden; touch-action: none; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,32,.55) 0%, rgba(15,42,32,0) 28%, rgba(15,42,32,0) 60%, rgba(15,42,32,.72) 100%); }
.cam-top { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gbtn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); }
.gbtn, .gpill { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gpill { height: 38px; padding: 0 14px; border-radius: 19px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--white); }
.gbtn svg, .shutter svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #BDF0D2; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.75); } }
.frame { position: absolute; left: 50%; top: 46%; width: 280px; height: 280px; max-width: 76vw; max-height: 76vw; transform: translate(-50%, -50%); }
.frame i { position: absolute; width: 44px; height: 44px; }
.frame i:nth-child(1) { top: 0; left: 0; border-top: 3px solid var(--white); border-left: 3px solid var(--white); border-top-left-radius: 18px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top: 3px solid var(--white); border-right: 3px solid var(--white); border-top-right-radius: 18px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom: 3px solid var(--white); border-left: 3px solid var(--white); border-bottom-left-radius: 18px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom: 3px solid var(--white); border-right: 3px solid var(--white); border-bottom-right-radius: 18px; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; }
.cam-hint { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.92); text-align: center; text-wrap: balance; }
.shutter { width: 86px; height: 86px; border-radius: 50%; border: 3px solid var(--white); display: flex; align-items: center; justify-content: center; padding: 0; }
.shutter i { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.92); transition: transform .12s ease; }
.shutter:active i { transform: scale(.88); }
.shutter[disabled] { opacity: .5; }
/* The other way in: a photograph already on the phone. Quiet, beside the shutter, never competing
   with it — taking the shot here is still the ordinary way to find something. */
.pick { height: 34px; padding: 0 16px; border-radius: 17px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(15,42,32,.28); color: rgba(255,255,255,.95); font-size: 13px; font-weight: 500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pick:active { transform: scale(.97); }

.checking { padding: calc(20px + env(safe-area-inset-top)) 16px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 100vh; }
.shot-frame { height: min(340px, 44vh); border-radius: 34px; overflow: hidden; position: relative; flex-shrink: 0; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 40px rgba(15,42,32,.2); background: rgba(15,42,32,.12); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; }
.scan { position: absolute; left: 0; right: 0; height: 3px; background: var(--white); box-shadow: 0 0 16px 6px rgba(255,255,255,.7); animation: scan 1.8s ease-in-out infinite; }
@keyframes scan { 0% { top: 8%; } 50% { top: 90%; } 100% { top: 8%; } }
.stamp { position: absolute; left: 14px; bottom: 14px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--glass-strong); display: flex; align-items: center; font-size: 12px; font-weight: 500; }
.checks { display: flex; flex-direction: column; gap: 10px; }
.check { height: 56px; border-radius: 22px; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.check .badge { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(15,42,32,.3); }
.check .badge svg { width: 16px; height: 16px; fill: none; stroke: var(--deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check .text { font-size: 15px; font-weight: 500; flex-grow: 1; min-width: 0; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check .detail { font-size: 12px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.check.done .badge, .check.active .badge { border-color: rgba(255,255,255,.95); }
.check.done .badge { background: var(--white); }
.check.done .badge svg { animation: pop .35s cubic-bezier(.2,1.5,.4,1) both; }
.check.active .badge { background: rgba(255,255,255,.55); }
.check.active .badge svg { animation: spin .8s linear infinite; }
.check.failed .badge { background: var(--alert); border-color: var(--alert); }
.check.failed .badge svg { stroke: var(--white); }
.check.failed .detail { color: var(--alert); }
.check.done .text, .check.active .text, .check.failed .text { color: var(--ink); }

.rays { position: absolute; left: 50%; top: -140px; width: 1000px; height: 1000px; margin-left: -500px; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 34%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.1) 0deg 7deg, rgba(255,255,255,0) 7deg 20deg); animation: rays 70s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 46%, transparent 62%); animation: sheen 3.4s ease-in-out 1s infinite; }
@keyframes sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.zoom-pill { height: 34px; min-width: 62px; padding: 0 14px; border-radius: 17px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--white); font-size: 14px; font-weight: 600; }
.cam video { transform-origin: center; transition: transform .12s ease-out; }
/* Panel headers keep the label and its note on one line each. */
.panel > .between > .label { flex-shrink: 0; }
.panel > .between > .note { text-align: right; font-size: 11px; white-space: nowrap; }
.checking .h1 { font-size: 32px; }
.card.locked .label { font-size: 10px; }
.pill svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Explore: finds list and the find sheet */
.find { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 14px 0 9px; border-radius: 24px; background: var(--glass); border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(16px); margin-top: 10px; }
.find img, .find .q2 { width: 48px; height: 48px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.find .find-name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.find svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag.flat { position: static; flex-shrink: 0; background: rgba(233,185,73,.55); }
.sheet-back { position: fixed; inset: 0; z-index: 30; background: rgba(15,42,32,.18); }
.find-tile { width: 64px; height: 64px; border-radius: 22px; object-fit: cover; flex-shrink: 0; }
.find-tile.q2 { background: var(--deep); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; }
.sheet-title { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.cells .cell { border-radius: 16px; background: rgba(255,255,255,.7); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cells .v { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.sheet .btn { margin-top: 14px; }
.me { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; position: relative; }
.me .ping { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(29,85,64,.25); animation: ping 1.8s ease-out infinite; }
.me .dotme { width: 18px; height: 18px; border-radius: 50%; background: var(--deep); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(15,42,32,.35); }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet.find-sheet { bottom: calc(104px + env(safe-area-inset-bottom));
  /* A pin now says enough to run long. Keep it clear of the menu bar and let it scroll
     inside itself, so the button at the bottom is never half-hidden behind the nav. */
  max-height: calc(100vh - 176px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); }
.map-note { bottom: 28px; }

/* Guardian shop */
.gphoto { height: 140px; border-radius: 22px; }
.gcard { border-radius: 28px; }
.gmeta { display: flex; flex-direction: column; gap: 3px; min-height: 39px; }
.gmeta .name { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gfoot .note.light { display: inline-flex; align-items: center; gap: 4px; }
.gfoot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gcard .tag.gold svg { width: 12px; height: 12px; stroke-width: 2.6; }
.chip span + span { margin-left: 6px; }
.gets { margin-top: 14px; border-radius: 22px; background: rgba(255,255,255,.7); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.get { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.get .tick { width: 22px; height: 22px; border-radius: 50%; background: rgba(29,85,64,.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.get svg { width: 13px; height: 13px; fill: none; stroke: var(--deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet .label { display: inline-flex; align-items: center; gap: 5px; }
.sheet .label svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tag { color: var(--ink); }
.tag.dark { color: #fff; }
.price small { white-space: nowrap; }
.tag.flat { display: inline-flex; width: fit-content; }

/* Share card */
.share-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.share-screen > .between { width: 100%; }
.share-img { width: min(100%, 300px); border-radius: 28px; display: block; box-shadow: 0 24px 50px rgba(15,42,32,.35); }
.shot-pick { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; overflow: hidden; padding: 0; border: 2px solid rgba(255,255,255,.7); }
.shot-pick.on { border-color: var(--deep); }
.shot-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-actions { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.share-actions .btn { flex: 1; }
.rbtn.big { width: 60px; height: 60px; flex-shrink: 0; }
.rbtn.big svg { width: 22px; height: 22px; }
.rbtn[disabled] { opacity: .5; }

/* Missions */
.mission-hero { border-radius: 34px; padding: 18px; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.mission-name { font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.stack { display: flex; align-items: center; }
.stack span { width: var(--size); height: var(--size); margin-right: calc(var(--size) / -4.2); border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2.5px solid rgba(255,255,255,.9); background: rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; }
.stack span.empty { font-size: calc(var(--size) * 0.4); font-weight: 600; color: var(--ink2); }
.stack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set { border-left-width: 5px; }
.set .row svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.reward-won, .reward-locked { display: flex; align-items: center; gap: 12px; border-radius: 26px; padding: 12px 16px; margin-top: 12px; }
.reward-won { background: rgba(233,185,73,.5); border: 1px solid rgba(255,255,255,.7); }
.reward-locked { border: 1.5px dashed rgba(15,42,32,.35); background: rgba(255,255,255,.16); }
.reward-won .medal, .reward-locked .medal { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.reward-won .medal { border-radius: 50%; background: rgba(255,255,255,.8); }
.reward-locked .medal { border-radius: 16px; }
.reward-won svg, .reward-locked svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Marketplace */
.mk-note { display: flex; align-items: center; gap: 10px; border-radius: 20px; background: #173F31; color: #fff; padding: 12px 14px; margin-top: 12px; font-size: 14px; line-height: 1.4; animation: rise .35s ease-out both; }
.mk-note svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* An offer waiting for an answer: the one thing on the swap screen with somebody else's clock
   on it, so it is loud, and the whole strip is the way in. */
.mk-waiting { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border-radius: 22px; background: #173F31; color: #fff; padding: 13px 14px; margin-top: 12px;
  animation: rise .35s ease-out both; }
.mk-waiting > svg:first-child { width: 20px; height: 20px; flex-shrink: 0; fill: none;
  stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-waiting > svg:last-child { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto;
  fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-waiting div { min-width: 0; }
.mk-waiting b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.mk-waiting span { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.78); margin-top: 2px; }
/* A count that is an answer owed, not a tally. */
.seg2 button .n.hot { opacity: 1; background: var(--accent, #C4452F); color: #fff; border-radius: 9px;
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; }
.mk-row { display: flex; align-items: center; gap: 12px; border-radius: 26px; background: var(--glass); border: 1px solid rgba(255,255,255,.6); padding: 8px 14px 8px 8px; margin-top: 10px; }
.mk-thumb { position: relative; width: 72px; height: 92px; border-radius: 18px; overflow: hidden; flex-shrink: 0; background: #173F31; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thumb .ed { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); }
.mk-thumb .ed.guardian { background: #173F31; border: 1px solid rgba(255,255,255,.5); }
.mk-thumb .ed svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-thumb .ed.guardian svg { stroke: #fff; }
.mk-mini { width: 44px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.mk-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row .note { font-size: 12px; display: flex; align-items: center; gap: 5px; }
.mk-wants { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.mk-right svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 600; }
.mini.ghost { background: rgba(255,255,255,.6); color: var(--ink); }
.mini[disabled] { opacity: .5; }
.market-sheet { max-height: 84vh; }
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mk-pick { padding: 0; border-radius: 16px; overflow: hidden; background: var(--glass); border: 1px solid rgba(255,255,255,.6); display: flex; flex-direction: column; text-align: left; }
.mk-pick img { width: 100%; height: 74px; object-fit: cover; display: block; }
.mk-pick .nm { font-size: 12px; font-weight: 600; line-height: 1.2; padding: 6px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pick .label { padding: 2px 8px 8px; font-size: 9px; }
.mk-pick[disabled] { opacity: .45; }
.mk-wanted { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mk-search { width: 100%; height: 46px; border-radius: 23px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.7); padding: 0 16px; font: inherit; font-size: 15px; color: var(--ink); }
.mk-options { max-height: 30vh; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.mk-option { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.5); text-align: left; font-size: 14px; }
.mk-option img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.mk-option[disabled] { opacity: .45; }
.market-sheet .btn { margin-top: 12px; }

/* Card and collection value */
.value-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 14px; border-radius: 20px; background: var(--glass); border: 1px solid rgba(255,255,255,.6); font-size: 13px; margin-top: 10px; }
.value-pill svg { width: 14px; height: 14px; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.factors { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.factor { display: flex; flex-direction: column; gap: 5px; }
.value-hero { border-radius: 30px; background: linear-gradient(160deg, #2B6D53 0%, #173F31 100%); color: #fff; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 36px rgba(15,42,32,.25); margin-top: 14px; }
.value-big { font-size: 42px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.split { height: 12px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(15,42,32,.08); margin: 12px 0 4px; }
.split span { height: 100%; }
.hows { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.how { display: flex; align-items: flex-start; gap: 12px; }
.how-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.how-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.worth { font-size: 11px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.mk-pick .worth { padding: 0 8px 8px; display: block; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.worth-strong { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.worth-strong.light { color: #fff; }
.tag.bottom.right { left: auto; right: 8px; }
.worth.light { color: rgba(255,255,255,.85); padding: 0 4px 2px; }
/* In a fixed-height flex column, children shrink once the content is taller than the screen. */
.open-summary > * { flex-shrink: 0; }
/* The photo keeps its height even when a tile lands in a squeezed flex column. */
.gcard .gphoto { flex-shrink: 0; }
.gcard.mini { height: 156px; }
.gval { display: flex; flex-direction: column; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.8); }
.gval b { color: #fff; font-size: 12px; }
.appeal-box { width: 100%; min-height: 110px; border-radius: 20px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.7); padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink); resize: none; }
.appeal-box:focus { outline: 2px solid var(--deep); outline-offset: 1px; }

/* ---------- Missions ---------- */
.missions { display: flex; flex-direction: column; gap: 10px; }
.mission { background: var(--card, #fff); border: 1px solid var(--line, #E2E8E4); border-radius: 16px;
  padding: 14px; box-shadow: 0 1px 2px rgba(15,42,32,.04); position: relative; overflow: hidden; }
.mission::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.mission.on { border-color: var(--accent); box-shadow: 0 2px 10px rgba(15,42,32,.09); }
.mission.done { background: linear-gradient(180deg, rgba(111,169,138,.14), rgba(255,255,255,.6)); }
.mission.locked { opacity: .5; }
.mission-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mission-name svg { width: 15px; height: 15px; }
.mission-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 3px 8px; border-radius: 9px; flex-shrink: 0; }
.mission-count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink2); flex-shrink: 0; }
.mission-claim { font-size: 12px; font-weight: 700; color: #fff; background: var(--deep, #1D5540);
  padding: 4px 11px; border-radius: 10px; }
.light-chip { font-size: 11px; background: rgba(15,42,32,.06); padding: 3px 9px; border-radius: 9px; }
.mission-active .mission { border-color: var(--accent); }
.mission-active .mini { margin-top: 8px; }
.rankpanel .rankname { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.mission .note svg { width: 12px; height: 12px; vertical-align: -2px; }
.mission-foot .clock { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; }
/* Explore, with a mission on the go */
.mission-guide { margin-top: 12px; border-left: 3px solid var(--accent); }
.mission-guide .guide-name { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin-top: 2px; }
.find.helps { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--deep, #1D5540) 45%, transparent); }
.pin.counts { box-shadow: 0 0 0 3px #E9B949, 0 2px 8px rgba(15,42,32,.35); z-index: 2; }
.mission-take { white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 3px 10px; border-radius: 10px; }
.mission-take.ready { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Explore, full screen ---------- */
/* The map fills the screen; the panels sit on the glass above it. */
.screen.explore { padding: 0; }
.explore-full { position: fixed; inset: 0; overflow: hidden; }
.explore-full #map { position: absolute; inset: 0; }

.ex-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ex-top > * { pointer-events: auto; }
.h1.on-map { margin: 0; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.ex-top .pill.glass { background: rgba(255,255,255,.82); backdrop-filter: blur(12px); }
.seg2.floating { background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ex-top .mission-guide { margin-top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px rgba(0,0,0,.2); }

.explore-full .maplibregl-ctrl-bottom-right { bottom: calc(92px + env(safe-area-inset-bottom)); }
.explore-full .maplibregl-ctrl-top-right { top: calc(96px + env(safe-area-inset-top)); }

/* The mission card on the explore map: small, and it carries the clock and the bar. */
.mission-card { background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-radius: 16px; padding: 10px 13px 11px; border-left: 3px solid var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.mission-card .mc-name { font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-card .mc-note { font-size: 12px; line-height: 1.35; color: var(--ink2); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mission-card .mc-clock { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.mission-card .bar { height: 6px; }
/* With no sheet in the way, the map's own controls come back down. */
.explore-full.hunting .maplibregl-ctrl-bottom-right { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* A mission's terms, read before it is taken on. */
.terms { margin-top: 14px; border-top: 1px solid var(--line, #E2E8E4); }
.term { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #E2E8E4); font-size: 14px; }
.term b { text-align: right; }
.btn.ghost.danger { color: var(--alert, #9E3B2A); }
.mission.lost { opacity: .5; }
.light-chip.lost { color: var(--alert, #9E3B2A); }

/* The countdown: digits that step down, over a bar that drains. */
.mc-time { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.mc-clock { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.mc-clock.urgent { color: var(--alert, #9E3B2A); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.mc-drain-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(15,42,32,.1); overflow: hidden; }
.mc-drain-track i { display: block; height: 100%; width: 100%; border-radius: 2px;
  background: var(--accent); transition: width 1s linear; }
.mc-hint { font-size: 11.5px; line-height: 1.4; color: var(--ink2); margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(15,42,32,.08); }
.mc-hint .mc-dim { opacity: .72; }

/* ---------- The camera, on a mission ---------- */
.cam-mission { flex: 1; min-width: 0; margin: 0 8px; padding: 8px 12px 9px; border-radius: 16px;
  background: rgba(10,22,18,.55); backdrop-filter: blur(14px); color: #fff;
  border: 1px solid rgba(255,255,255,.16); }
.cam-mission .cm-row { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.cam-mission .cm-what { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.cam-mission .mc-clock { color: #fff; font-size: 12px; }
.cam-mission .mc-clock.urgent { color: #FF9A8B; }
.cam-mission .mc-drain-track { flex: 1; background: rgba(255,255,255,.2); }
.cam-mission .mc-drain-track i { background: #fff; }

.pips { display: flex; gap: 5px; margin-top: 7px; }
.pips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.26); transition: background .25s, transform .25s; }
.pips i.on { background: var(--accent, #fff); }
.pips i.pop { animation: pippop .5s cubic-bezier(.2,.9,.3,1); }
@keyframes pippop { 0% { transform: scaleY(1) } 45% { transform: scaleY(3.2) } 100% { transform: scaleY(1) } }
.pip-count { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }

/* The frame says which mission you are on. */
.cam.on-mission .frame i { border-color: var(--accent); }

.drift { position: absolute; left: 50%; transform: translateX(-50%); bottom: 168px; z-index: 4;
  padding: 7px 13px; border-radius: 14px; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(10,22,18,.6); backdrop-filter: blur(12px); white-space: nowrap; }
.drift.near { background: rgba(233,185,73,.85); color: #241a00; }
.drift.over { background: rgba(158,59,42,.9); }

/* What the mission made of the photograph. */
.beat { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px;
  border-radius: 14px; font-size: 13.5px; line-height: 1.4; position: relative; }
.beat svg { width: 16px; height: 16px; flex-shrink: 0; }
.beat.counted { background: rgba(29,85,64,.12); color: var(--deep, #1D5540); font-weight: 600; }
.beat.missed { background: var(--glass, rgba(255,255,255,.5)); color: var(--ink2); }

/* Finishing one is a moment, not a line of text. */
.finish { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1D5540, #0C2C21); overflow: hidden; }
.finish .sweep { position: absolute; inset: -40%; background:
  conic-gradient(from 0deg, transparent 0 20%, rgba(233,185,73,.5) 35%, transparent 55% 100%);
  animation: sweep 2.2s cubic-bezier(.3,0,.2,1) both; }
@keyframes sweep { from { transform: rotate(-90deg) scale(.6); opacity: 0 } 40% { opacity: 1 } to { transform: rotate(320deg) scale(1.3); opacity: 0 } }
.finish-mid { position: relative; text-align: center; color: #fff; padding: 0 28px; }
.finish-mark { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold, #E9B949); color: #1D3A2C; display: flex; align-items: center; justify-content: center;
  animation: pop .5s cubic-bezier(.2,.9,.3,1) both; }
.finish-mark svg { width: 38px; height: 38px; stroke-width: 2.6; }
.finish-title { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.finish-name { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.finish-reward { margin-top: 12px; font-size: 14px; opacity: .85; }

/* Where the money goes. Said plainly, wherever money changes hands. */
.pledge { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px;
  border-radius: 14px; background: rgba(29,85,64,.09); color: var(--deep, #1D5540);
  font-size: 13px; line-height: 1.45; font-weight: 500; }
.pledge svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.pledge.small { margin-top: 10px; padding: 9px 12px; font-size: 12px; background: rgba(29,85,64,.07); }
.pledge.small svg { width: 14px; height: 14px; }

/* Offering a bundle, and asking for a whole kind of card. */
.mk-pick { position: relative; }
.mk-pick.picked { outline: 2px solid var(--deep, #1D5540); outline-offset: -2px; }
.mk-pick .pickmark { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--deep, #1D5540); color: #fff; display: flex; align-items: center; justify-content: center; }
.mk-pick .pickmark svg { width: 13px; height: 13px; }
.mk-pick .wantedtag { position: absolute; top: 6px; left: 6px; background: var(--gold, #E9B949);
  color: #241a00; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tag.flat.kind { background: rgba(29,85,64,.12); color: var(--deep, #1D5540); }
.mk-minis { display: flex; gap: -6px; flex-shrink: 0; }
.mk-minis .mk-mini { margin-right: -10px; box-shadow: 0 0 0 2px var(--white, #fff); }
.mk-minis .mk-mini:last-child { margin-right: 0; }
.mk-wants.open { color: var(--deep, #1D5540); font-weight: 600; }
.tag.flat.canswap { background: rgba(29,85,64,.12); color: var(--deep, #1D5540); font-size: 10px;
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* ---------- Me ---------- */
.me-head { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.me-avatar { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(160deg, #2B6D53, #173F31); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 650; }
.me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.me-stat { background: var(--glass, rgba(255,255,255,.55)); border-radius: 16px; padding: 12px 14px; }
.me-stat .v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 2px 0; }
.me-logs { display: flex; flex-direction: column; gap: 8px; }
.me-log { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px;
  background: var(--glass, rgba(255,255,255,.55)); }
.me-log.hit { background: var(--white, #fff); }
.me-log svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .5; }
.me-shot { width: 48px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #E3EAE6; }
.me-name { font-size: 15px; font-weight: 600; }
.me-appeal { background: var(--glass, rgba(255,255,255,.55)); border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; }
.me-appeal .tag.flat.ok { background: rgba(29,85,64,.14); color: var(--deep, #1D5540); }
.me-appeal .tag.flat.no { background: rgba(158,59,42,.12); color: var(--alert, #9E3B2A); }
.me-set { background: var(--glass, rgba(255,255,255,.55)); border-radius: 14px; padding: 13px 15px; margin-top: 10px; }
.me-set b { font-size: 15px; }
.me-set .note { margin-top: 3px; }
.me-log .note svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }

/* A ranger's face, wherever they appear. */
.avatar { display: inline-flex; align-items: center; justify-content: center; position: relative;
  border-radius: 50%; overflow: hidden; flex-shrink: 0; vertical-align: middle;
  background: linear-gradient(160deg, #2B6D53, #173F31); color: #fff; font-weight: 650; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar i { font-style: normal; }
.byline { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 13px;
  border-radius: 14px; background: var(--glass, rgba(255,255,255,.55)); }
.byline b { font-size: 14px; }
.note.seller .avatar { margin-right: 5px; }
/* The menu bar shows your picture instead of the outline of a person. */
#nav button.has-photo { padding: 0; }
#nav button.has-photo svg { display: none; }
#nav button.has-photo img { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; display: block; }
#nav button.has-photo.on img { box-shadow: 0 0 0 2px var(--deep, #1D5540); }

/* A ranger's profile */
.pbars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pbar { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 14px; align-items: baseline; }
.pbar .t { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: rgba(15,42,32,.09); overflow: hidden; }
.pbar .t i { display: block; height: 100%; border-radius: 4px; background: var(--deep, #1D5540); }
.linkbox { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(15,42,32,.06);
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.me-head[data-profile] { cursor: pointer; }
.note.seller[data-profile] { cursor: pointer; }
.byline[data-profile] { cursor: pointer; }
.byline svg { width: 16px; height: 16px; opacity: .45; flex-shrink: 0; }

/* Rankings */
.ranks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rank { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 14px;
  background: var(--glass, rgba(255,255,255,.55)); }
.rank.you { background: var(--white, #fff); box-shadow: inset 0 0 0 1.5px var(--deep, #1D5540); }
.rank .pos { min-width: 26px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink2); text-align: right; }
.rank:nth-child(1) .pos { color: var(--gold, #E9B949); }
.rank-name { font-size: 15px; font-weight: 600; }
.rank-score { font-size: 15px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.btn.ghost svg { width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; }
.chip.small { font-size: 12px; padding: 5px 11px; }

/* ---------- Latest finds ---------- */
.feed { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.find-card { background: var(--white, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(15,42,32,.08); }
.fc-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px 9px; }
.fc-who { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.fc-name { font-size: 14px; font-weight: 600; }
.fc-more { all: unset; cursor: pointer; padding: 2px 8px; color: var(--ink2); font-size: 18px; line-height: 1; }
.fc-shot { position: relative; aspect-ratio: 4/5; background: #E3EAE6; cursor: pointer; }
.fc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-shot .tag { position: absolute; top: 10px; right: 10px; }
/* The name sits on the photograph, over a scrim, so the card reads as a card. */
.fc-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,24,18,.78) 0%, rgba(8,24,18,.28) 26%, transparent 52%); }
.fc-edge { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tint, #B06B3F); z-index: 2; }
.fc-over { position: absolute; left: 14px; right: 14px; bottom: 13px; display: flex; flex-direction: column; gap: 6px; }
.fc-kind { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--tint, #B06B3F) 45%, #fff); }
.fc-species { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.fc-latin { font-size: 13px; font-style: italic; color: rgba(255,255,255,.75); margin-top: -3px; }
.fc-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.fc-badges .tag.flat { position: static; height: 24px; padding: 0 9px; border-radius: 12px; }
.fc-badges .plate.light { border: 1px solid rgba(255,255,255,.28); }

/* Whether the ranger reading the feed already holds it. */
.have { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; padding: 0 10px; height: 24px; border-radius: 12px; white-space: nowrap; }
.fc-shot .have { position: absolute; top: 10px; left: 10px; z-index: 2; backdrop-filter: blur(6px); }
.have svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.have.yes { background: rgba(255,255,255,.9); color: var(--deep); }
.have.guard { background: rgba(23,63,49,.88); color: #fff; }
.have.no { background: rgba(233,185,73,.94); color: #3A2A00; }
.have.small { padding: 2px 8px; font-size: 10.5px; margin-left: 6px; }
.tr-foot { display: flex; align-items: center; flex-wrap: wrap; }
.fc-acts { display: flex; align-items: center; gap: 6px; padding: 6px 13px 11px 11px; }
.fc-act { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.fc-act svg { width: 17px; height: 17px; }
.fc-act:active { background: rgba(15,42,32,.06); }
.fc-act.liked { color: var(--alert, #9E3B2A); }
.fc-act.liked svg { fill: currentColor; }

/* A card changing hands, in the feed */
.trade-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  background: var(--glass, rgba(255,255,255,.6)); border-radius: 16px; }
.tr-shot { width: 52px; height: 62px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
  background: #E3EAE6; cursor: pointer; }
.tr-line { font-size: 14.5px; }
.tr-who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px;
  font-weight: 600; margin: 4px 0 3px; }
.tr-who span { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tr-who .note { font-weight: 400; }
.tr-arrow { opacity: .5; }
.tr-arrow svg { width: 15px; height: 15px; }

/* ---------- The card: what kind, how scarce, which one ---------- */
/* The type's colour, down the edge of every card. */
.card .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tint, #B06B3F); z-index: 1; }
.card .kind { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tint, #B06B3F); }
.card .kind.light { color: rgba(255,255,255,.72); }
.card .kind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tglyph { flex-shrink: 0; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Rarity as surface. Common stays flat and says nothing. */
.card.sp-special { border-color: rgba(46,139,97,.5); box-shadow: inset 0 0 22px rgba(46,139,97,.16); }
.card.sp-foil { border-color: color-mix(in srgb, var(--gem, #2F7FA8) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem, #2F7FA8) 30%, transparent), 0 10px 22px rgba(15,42,32,.14); }
.card.sp-foil::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 48%, transparent 62%); }
.card.sp-epic::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%,
  color-mix(in srgb, var(--gem, #8A5BB5) 16%, transparent) 58%, transparent 70%); }
.card.sp-holo { border-color: rgba(233,185,73,.8);
  box-shadow: inset 0 0 0 1.5px rgba(233,185,73,.5), 0 10px 26px rgba(15,42,32,.16); }
.card.sp-holo::after { content: ''; position: absolute; inset: -20% -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.62) 50%, rgba(233,185,73,.3) 58%, transparent 70%);
  animation: cardsweep 4.2s ease-in-out infinite; }
@keyframes cardsweep { 0% { transform: translateX(-60%) } 55%, 100% { transform: translateX(160%) } }
@media (prefers-reduced-motion: reduce) { .card.sp-holo::after { animation: none; } }

/* Which card this is. */
.plate { display: inline-flex; align-items: center; gap: 6px; background: rgba(15,42,32,.07);
  border-radius: 7px; padding: 3px 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.plate .pno { color: var(--ink2); }
.plate .pdot { color: rgba(15,42,32,.3); }
.plate.first { background: var(--ink); color: var(--gold); }
.plate.first .pno { color: rgba(233,185,73,.6); }
.plate.first .pdot { color: rgba(233,185,73,.35); }
.plate.light { background: rgba(255,255,255,.16); color: #fff; }

/* The one badge on the photo. */
.tag.first { background: var(--ink); color: var(--gold); }
.tag.threat { background: rgba(158,59,42,.9); color: #fff; }
.card .meta .foot { margin-top: 3px; }

/* The dark over the map. It sits above the map's own layer and below everything you can touch. */
.fog { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.explore-full .fog { z-index: 1; }
.explore-full .ex-top { z-index: 4; }
/* Pointing into the dark. */
.mc-arrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.mc-arrow i { display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent); align-items: center; justify-content: center; }
.mc-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }

/* Pins carry their rarity: the ring is the gem colour, and the scarcer it is the more it asks for. */
.pin { border-color: var(--gem, #fff); }
.pin.r-common, .pin.r-unranked { border-width: 3px; }
.pin.r-special { border-width: 3px; box-shadow: 0 0 0 1px var(--gem), 0 6px 14px rgba(15,42,32,.35); }
.pin.r-rare { width: 46px; height: 46px; border-width: 3px; box-shadow: 0 0 0 2px var(--gem), 0 6px 16px rgba(15,42,32,.4); }
.pin.r-epic { width: 48px; height: 48px; border-width: 3.5px; box-shadow: 0 0 0 2px var(--gem), 0 0 14px rgba(138,91,181,.55), 0 6px 16px rgba(15,42,32,.4); }
.pin.r-legendary { width: 52px; height: 52px; border-width: 4px;
  box-shadow: 0 0 0 2px var(--gem), 0 0 18px rgba(233,185,73,.75), 0 6px 18px rgba(15,42,32,.45);
  animation: pinglow 2.6s ease-in-out infinite; }
@keyframes pinglow { 0%, 100% { box-shadow: 0 0 0 2px var(--gem), 0 0 14px rgba(233,185,73,.55), 0 6px 18px rgba(15,42,32,.45) }
  50% { box-shadow: 0 0 0 3px var(--gem), 0 0 26px rgba(233,185,73,.95), 0 6px 18px rgba(15,42,32,.45) } }
@media (prefers-reduced-motion: reduce) { .pin.r-legendary { animation: none; } }
/* A species already in your collection sits back; one you still need is at full strength. */
.pin.held { opacity: .55; filter: saturate(.7); }
.pin.mine { border-color: var(--deep); }

/* What a pin says about the thing it marks ------------------------------------------------- */
/* A warning has to read before anything else on the sheet, and a warning nobody can ignore has
   to look different from a note. Four levels, because "poisonous if eaten" and "it can kill you"
   should not wear the same colour. */
.hazard { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 18px; margin-top: 12px; }
.hazard svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hazard div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hazard b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.hazard span { font-size: 13px; line-height: 1.45; opacity: .9; }
.hazard.venomous, .hazard.dangerous { background: rgba(190,42,34,.12); color: #8d1f19; }
.hazard.sting { background: rgba(200,125,10,.14); color: #8a5605; }
.hazard.irritant { background: rgba(200,125,10,.14); color: #8a5605; }
.hazard.toxic { background: rgba(29,85,64,.1); color: var(--deep); }

.find-line { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: rgba(255,255,255,.62); border-radius: 16px; padding: 10px 13px; }
.find-line b { font-weight: 700; }
/* A pin the species could have walked away from weeks ago is greyed: it is still information,
   just weaker information, and it should look like it. */
.find-line.stale { opacity: .72; }
.find-line.indoors { background: rgba(80,110,190,.12); }

.find-by { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.find-by b { font-weight: 700; }
.find-by.plain { opacity: .65; cursor: default; }

/* Time of day, and the one-species view --------------------------------------------------- */
.find-line.clock { display: flex; align-items: flex-start; gap: 9px; }
.find-line.clock svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.find-line.clock.nocturnal { background: rgba(38,48,86,.13); }
.find-line.clock.nocturnal svg { fill: currentColor; stroke: none; }
.find-line.clock.crepuscular { background: rgba(196,132,42,.14); }

.hazard.protected { background: rgba(70,110,150,.13); color: #2b4c6b; }

/* The proof shot: the ranger's own photograph, which is what is actually standing there. */
.find-tile.proof { position: relative; display: block; overflow: hidden; }
.find-tile.proof img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find-tile.proof i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 3px 0 4px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }

.only-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 9px 14px; border-radius: 999px; background: var(--glass-strong); backdrop-filter: blur(18px); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.only-chip b { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; border-radius: 999px; background: var(--deep); color: #fff; font-size: 12px; padding: 0 6px; }
.only-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .6; }

/* A map that failed must never be mistaken for a map with nothing on it. */
.map-trouble { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 20px; background: rgba(190,42,34,.14); backdrop-filter: blur(18px); color: #8d1f19; }
.map-trouble b { font-size: 14px; font-weight: 700; }
.map-trouble span { font-size: 12.5px; line-height: 1.45; opacity: .92; }

/* Why a find was turned down ---------------------------------------------------------------- */
/* A rejection and a fault are different things and must not look alike: one is about the photo,
   the other is not about the photo at all. */
.verdict-rules { width: 100%; text-align: left; background: rgba(255,255,255,.62); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.verdict-rules .label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; opacity: .62; margin-bottom: 1px; }
.rule { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; opacity: .55; }
.rule > span:first-child { width: 15px; flex-shrink: 0; text-align: center; font-weight: 700; }
.rule.broke { opacity: 1; color: var(--alert); font-weight: 600; }
.rule.why { opacity: .8; font-style: italic; padding-top: 2px; border-top: 1px solid rgba(15,42,32,.08); margin-top: 2px; }

.verdict-note { width: 100%; text-align: left; display: flex; gap: 10px; align-items: flex-start; background: rgba(70,110,150,.13); color: #2b4c6b; border-radius: 22px; padding: 13px 16px; font-size: 13.5px; line-height: 1.45; }
.verdict-note b { font-weight: 700; }
.verdict-note svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Notifications ----------------------------------------------------------------------------- */
.rbtn.bell { position: relative; }
.rbtn.bell i { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--alert); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--glass-strong); }
.rbtn.bell.lit svg { stroke: var(--deep); }

/* The nav lives outside the app's markup, so the dot is painted onto it rather than rendered. */
nav [data-go="me"] { position: relative; }
.nav-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--alert); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(255,255,255,.9); pointer-events: none; }

/* A long list needs a surface, not a window: the glass that suits a three-line sheet makes an
   inbox unreadable against the collection behind it. */
.sheet.inbox-sheet { background: #f2f7f2; backdrop-filter: none; max-height: calc(100vh - 120px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 8px; }
.rbtn.wide { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.notice { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.75); cursor: pointer; }
/* Unread is a left edge and a touch more weight — loud enough to find, quiet enough to ignore. */
.notice.fresh { background: #fff; box-shadow: inset 3px 0 0 var(--deep); }
.notice.done { opacity: .55; }
.notice .ni { width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(29,85,64,.12); color: var(--deep); }
.notice .ni svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice .ni.like { background: rgba(190,42,34,.12); color: #a8322a; }
.notice .ni.like svg { fill: currentColor; stroke: none; }
.notice .ni.gone { background: rgba(15,42,32,.09); color: var(--ink2); }
.nbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ntally { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--deep); color: #fff; font-size: 11px; vertical-align: 1px; }
.nb { font-size: 13px; line-height: 1.45; color: var(--ink2); }
.nwhen { font-size: 11.5px; color: var(--ink2); opacity: .75; }
.nacts { display: flex; gap: 8px; margin-top: 7px; }
.btn.tiny { height: 36px; padding: 0 16px; font-size: 13.5px; border-radius: 999px; width: auto; flex: 1; }

/* The card fan ------------------------------------------------------------------------------ */
/* Ported from "Card Fan Carousel" by Aayush Duhan (21st.dev): React + GSAP there, transforms and
   a sampled linear() easing here. The arc, the multipliers and the durations are the original's. */
/* The box has to hold the arc's full rotated footprint: a card leaning 21 degrees is both wider
   and taller than it looks, and the outer ones sit a good way down the curve. Anchored to the
   top rather than centred, so the spare room ends up under the fan instead of above it. */
.fan-layout { position: relative; display: flex; align-items: flex-start; justify-content: center;
  width: 100%; height: 23.5rem; padding-top: 8px; margin: 2px 0 4px; }
/* Narrower than a grid card so the ends of the arc stay on a 375px screen: at the original's
   spread the outermost card sits 134px from the middle, and a grid-width card would be cut. */
.fan-card { position: absolute; width: 200px; height: 295px; will-change: transform, opacity;
  transform-origin: 50% 90%; cursor: pointer; }
.fan-card .card { height: 100%; border-radius: 26px; box-shadow: 0 18px 34px rgba(15,42,32,.22); }
.fan-card .card .photo { height: 178px; border-radius: 21px; }
/* The middle card is the one you can open, so it is the only one that reacts to a press. */
.fan-card:active .card { transform: none; }

.fan-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.fan-arrow { width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid rgba(15,42,32,.12);
  background: rgba(255,255,255,.55); backdrop-filter: blur(16px); color: var(--ink2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.fan-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fan-arrow:active { opacity: .7; }
.fan-dots { display: flex; align-items: center; gap: 7px; }
.fan-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(15,42,32,.16); transition: all .3s ease; }
.fan-dot.on { background: rgba(15,42,32,.7); transform: scale(1.3); }
.fan-count { font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }

.fan-switch { display: flex; gap: 4px; align-self: flex-end; margin: 12px 0 -2px auto; padding: 3px;
  border-radius: 999px; background: rgba(255,255,255,.5); width: fit-content; }
.fan-switch button { width: 34px; height: 30px; border-radius: 999px; background: none; border: 0;
  color: var(--ink2); display: flex; align-items: center; justify-content: center; padding: 0; }
.fan-switch button.on { background: var(--deep); color: #fff; }
.fan-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 480px) { .fan-layout { height: 25rem; } .fan-card { width: 216px; height: 318px; } }
@media (min-width: 640px) { .fan-layout { height: 28rem; } .fan-card { width: 240px; height: 354px; } }

/* A card in the fan sits over other cards, not over the page, so the glass that works in a grid
   turns the deck into a pile of overlapping text. An opaque sheet goes behind each one — behind,
   so every card keeps its own surface: guardian green, foils, holo. */
.fan-card::before { content: ''; position: absolute; inset: 0; border-radius: 26px;
  background: #eef3ed; box-shadow: 0 16px 30px rgba(15,42,32,.2); }
.fan-card .card { position: relative; box-shadow: none; }
/* The deck is dragged, so the browser must not try to scroll or select while a finger is on it.
   touch-action: none, not pan-y: a touch that lands on the cards moves the cards, full stop. */
.fan-layout { touch-action: none; user-select: none; -webkit-user-select: none; }
.fan-card img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* A note that acts: the same quiet type as the notes beside it, but tappable. */
.note.as-link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.note.as-link[data-busy] { opacity: .6; }

/* A shelf of collection missions: a family, how much of it is done, and the few nearest to
   coming true. The rest are a tap away — a hundred and fifty rows at once is not a screen. */
.shelf { margin-bottom: 18px; padding: 14px; border-radius: 22px; background: var(--glass);
  border: 1px solid rgba(255,255,255,.55); }
.shelf-name { font-size: 16px; font-weight: 600; }
.shelf .mini { margin-top: 10px; }

/* A milestone: the app stopping to say that something quietly became true. */
.milestone { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(15,42,32,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s ease both; }
.milestone-card { position: relative; overflow: hidden; width: 100%; max-width: 360px; padding: 28px 22px 22px;
  border-radius: 30px; background: var(--card, #fff); text-align: center;
  box-shadow: 0 24px 60px rgba(15,42,32,.4); }
.milestone-rays { position: absolute; inset: -40% -40% auto; height: 260px;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(212,175,55,.18) 8deg 16deg, transparent 16deg 24deg);
  animation: spin 18s linear infinite; pointer-events: none; }
.milestone-badge { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--gold, #d4af37); display: flex; align-items: center; justify-content: center; }
.milestone-badge svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.milestone-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 16px 0 14px; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }
.milestone-list { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.milestone-line { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; }
.milestone-line svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--deep);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* The deck on Explore: the missions on offer, one card at a time. It floats over the map like
   everything else there, because the ground is the screen. */
.offer-deck { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.offer-card { text-align: left; width: 100%; padding: 14px; border-radius: 22px;
  background: var(--glass-strong); border: 1px solid rgba(255,255,255,.6);
  border-left: 4px solid var(--accent, var(--deep));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(15,42,32,.18); cursor: pointer; }
.offer-card.done { border-left-color: var(--gold, #d4af37); cursor: default; }
/* A card can never grow past the map it floats on: long copy scrolls inside it instead. */
.offer-card.open { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.offer-kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink2); }
.offer-name { font-size: 18px; font-weight: 600; margin-top: 2px; text-wrap: balance; }
.offer-actions { display: flex; gap: 8px; margin-top: 12px; }
.offer-actions .btn { flex: 1; }
.offer-empty { padding: 14px; border-radius: 22px; background: var(--glass);
  border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* An offer that comes round rarely should not look like one that comes round daily. */
.offer-card.rare { border-left-color: var(--gold, #d4af37);
  box-shadow: 0 10px 30px rgba(15,42,32,.24), 0 0 0 1px rgba(212,175,55,.35) inset; }
.offer-cost { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px;
  border-radius: 14px; background: rgba(15,42,32,.06); font-size: 12.5px; line-height: 1.4;
  color: var(--ink2); }
.offer-cost svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-run { display: flex; gap: 7px; align-items: center; margin-top: 10px; padding: 8px 11px;
  border-radius: 14px; background: rgba(212,175,55,.16); font-size: 13px; }
.offer-run svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A mission on the ground: a marker in the light, where the ranger has actually been.
   The outer element is the map's to position — it carries maplibre's own transform, so nothing
   here may set one on it. Everything visual lives on the inner .mpin, which is free to move. */
.mpin-hit { width: 38px; height: 38px; cursor: pointer; }
.mpin { position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #2B6D53, #173F31); border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(15,42,32,.45); }
.mpin svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.mpin.rare { background: linear-gradient(160deg, #E4C15C, #B9912B); border-color: #fff; }
.mpin.rare svg { stroke: #2A1F06; }
.mpin.on { transform: scale(1.12); }
.mpin-ring { position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); animation: mpinPulse 2.2s ease-out infinite; }
@keyframes mpinPulse { 0% { transform: scale(.75); opacity: .9 } 100% { transform: scale(1.25); opacity: 0 } }

.offer-found { display: flex; gap: 11px; align-items: center; padding: 13px;
  border-radius: 22px; background: var(--glass-strong); border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(15,42,32,.18); }
.offer-found-dot { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #2B6D53, #173F31); display: flex; align-items: center;
  justify-content: center; }
.offer-found-dot svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

/* How long there is to answer. The one clock on the card that is not about the mission itself. */
.offer-deadline { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; padding: 8px 11px;
  border-radius: 14px; background: rgba(196,69,47,.1); font-size: 12.5px; color: var(--ink2); }
.offer-deadline b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--alert, #C4452F); }
.offer-lift { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding: 9px 11px;
  border-radius: 14px; background: rgba(212,175,55,.18); font-size: 12.5px; line-height: 1.4; }
.offer-lift svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rbtn.small { width: 32px; height: 32px; flex-shrink: 0; }
.rbtn.small svg { width: 16px; height: 16px; }

/* Who else is out on this one. A number, stated plainly — company or the lack of it. */
.offer-company { margin-top: 10px; font-size: 12.5px; color: var(--ink2); text-align: center; }
.offer-company b { color: var(--ink); }

/* The last stretch of a mission you are out on. */
.mc-last { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 11px;
  border-radius: 14px; background: rgba(196,69,47,.16); font-size: 13px; line-height: 1.35;
  animation: lastPulse 1.8s ease-in-out infinite; }
.mc-last svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; animation: spin 1.4s linear infinite; }
@keyframes lastPulse { 0%, 100% { background: rgba(196,69,47,.16) } 50% { background: rgba(196,69,47,.3) } }
.explore-full.last-chance .mc-clock { color: var(--alert, #C4452F); }

/* The lamp, beside the zoom. Only shown where the camera actually lets a web page work it. */
.cam-tools { display: flex; align-items: center; gap: 8px; }
#torch { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; }
#torch svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
#torch.on { background: var(--gold, #d4af37); color: #2A1F06; border-color: transparent; }

/* The shots taken of one find, waiting to be checked together. */
.tray { display: flex; align-items: center; gap: 8px; padding: 2px; }
.tray-shot { position: relative; width: 54px; height: 54px; border-radius: 14px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.tray-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-drop { position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0;
  border-radius: 0 0 0 8px; background: rgba(12,34,25,.82); display: flex; align-items: center;
  justify-content: center; }
.tray-drop svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6;
  stroke-linecap: round; }
.tray-more { font-size: 11px; color: rgba(255,255,255,.75); padding: 0 4px; }
.tray-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cam-flash.on { animation: camFlash .3s ease-out both; }
@keyframes camFlash { 0% { opacity: .85 } 100% { opacity: 0 } }

/* Choosing which shots the check should read. Tapping picks; the × deletes. */
.tray { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tray-shot { position: relative; flex: 0 0 auto; width: 54px; height: 54px; padding: 0;
  border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.45);
  box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.tray-shot.pick { border-color: #fff; }
.tray-shot.full { opacity: .5; }
.tray-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-num { position: absolute; left: 3px; bottom: 3px; min-width: 17px; height: 17px;
  border-radius: 9px; padding: 0 4px; background: var(--deep, #173F31); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tray-num.empty { background: rgba(12,34,25,.5); border: 1px solid rgba(255,255,255,.5); }
.tray-drop { position: absolute; top: 0; right: 0; width: 20px; height: 20px;
  border-radius: 0 0 0 8px; background: rgba(12,34,25,.82); display: flex; align-items: center;
  justify-content: center; }
.tray-drop svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6;
  stroke-linecap: round; }
.cam-note { padding: 8px 12px; border-radius: 14px; background: rgba(12,34,25,.7);
  color: rgba(255,255,255,.95); font-size: 12.5px; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* The bottom of the camera grew a tray, so the text over the viewfinder needs its own ground to
   sit on — it was overlapping the frame corners and becoming unreadable. */
.cam-bottom { background: linear-gradient(to top, rgba(6,20,14,.78) 0%, rgba(6,20,14,.55) 55%, rgba(6,20,14,0) 100%);
  padding-bottom: 8px; border-radius: 28px 28px 0 0; }
.cam-shots { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cam-after { width: 100%; display: flex; justify-content: center; }

/* The introduction -------------------------------------------------------------------------- */
/* A coach card sits over whatever it is explaining, dimming it rather than hiding it: the point
   is to point AT the collection or the map, so the thing being described stays visible. */
.coach-back { position: fixed; inset: 0; z-index: 44; background: rgba(12,34,25,.5); backdrop-filter: blur(2px); animation: fade .25s ease both; }
/* It arrives quietly, a beat after the screen has had a chance to be looked at. */
.coach { position: fixed; left: 14px; right: 14px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 45;
  animation: coach-in .45s cubic-bezier(.2,.9,.3,1) both;
  background: #f4f8f4; border-radius: 30px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 24px 60px rgba(8,26,19,.4); }
@keyframes coach-in { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
.coach-step { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); opacity: .7; }
.coach-title { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.coach-body { font-size: 15px; line-height: 1.5; color: var(--ink); }
.coach-note { font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.coach .btn { margin-top: 6px; }
.coach .btn.ghost { margin-top: 0; }

/* Offering for somebody else's card, from wherever you saw it. The button sits on the card it
   is about, so there is never any doubt which one is being asked for. */
.card-ask { position: absolute; top: 8px; left: 8px; z-index: 3; width: 32px; height: 32px;
  border-radius: 999px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--deep); box-shadow: 0 4px 12px rgba(15,42,32,.2); }
.card-ask svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-ask:active { transform: scale(.92); }
.find-sheet .btn.ghost svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; }

/* The third thing a ranger can do with an offer: go and look at what the other one holds. */
.nlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 0;
  background: none; border: 0; color: var(--deep); font-size: 13.5px; font-weight: 600; }
.nlink svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nlink:active { opacity: .6; }