/* =====================================================================
   QUESTMARK v2 — design system
   spacing scale: 4 8 12 16 24 32 48 64 96 128
   ===================================================================== */
:root {
  --ink: #101318;
  --ink-2: #151920;
  --surface: rgba(26, 31, 40, 0.62);
  --surface-2: rgba(36, 43, 56, 0.7);
  --solid: #1b212b;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f3ecdc;
  --muted: #b5ae9d;
  --dim: #737066;
  --violet: #d8b25a;
  --violet-2: #f0d38a;
  --teal: #a3b86c;
  --amber: #e9a94f;
  --coral: #e0674f;
  --sky: #8fb0dd;
  --good: #9fc25e;
  --bad: #e0674f;
  --grad: linear-gradient(110deg, #f0d38a 0%, #c9a24a 35%, #a3b86c 70%, #f0d38a 100%);
  --r-lg: 28px;
  --r: 20px;
  --r-sm: 14px;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line);
  --shadow-lg: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --f-display: 'Fraunces', Georgia, serif;
  --f-serif: 'Fraunces', Georgia, serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --top: 84px;
  --page: 1200px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   /* no blue tap square; keyboard users keep :focus-visible below */
html, body { margin: 0; min-height: 100%; }
body { background: var(--ink); color: var(--text); font: 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(216, 178, 90, 0.5); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; font-variation-settings: 'SOFT' 50, 'WONK' 0; }
h1 { font-size: clamp(44px, 6.4vw, 96px); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 3.8vw, 56px); }
h3 { font-size: 22px; letter-spacing: -0.02em; }
p { margin: 0; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.grad-text { padding-bottom: 0.12em; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 8s ease-in-out infinite alternate; }
@keyframes gradShift { to { background-position: 100% 0; } }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--f-mono); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 620px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; }
.center { text-align: center; }
.hide { display: none !important; }

/* ---------- backdrop ---------- */
#topo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -3; }
.vignette { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 90% at 50% 10%, transparent 45%, rgba(10, 12, 15, 0.9) 100%); }
.grain { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#fx { position: fixed; inset: 0; z-index: 177; pointer-events: none; }   /* above .finder (175) + .ghostcam (176) so bursts show while hunting */

/* ---------- custom cursor (desktop) ---------- */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; border-radius: 50%; transform: translate3d(-100px, -100px, 0); }
.cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; mix-blend-mode: difference; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(255, 255, 255, 0.45); transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), border-color 0.3s, background 0.3s; }
.cursor-ring.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--teal); background: rgba(163, 184, 108, 0.08); }
.cursor-ring.down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
@media (hover: none), (max-width: 760px) { .cursor, .cursor-ring { display: none; } }
@media (hover: hover) and (min-width: 761px) { body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; } body.cursor-on input, body.cursor-on textarea, body.cursor-on select { cursor: text; } }

/* ---------- portal page transition ---------- */
::view-transition-old(root) { animation: none; z-index: 1; }
::view-transition-new(root) { animation: portal 0.75s var(--ease) both; z-index: 2; }
@keyframes portal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }
.portal-ring { position: fixed; z-index: 250; pointer-events: none; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--teal); box-shadow: 0 0 40px var(--teal), inset 0 0 30px rgba(216, 178, 90, 0.9); animation: ring 0.75s var(--ease) forwards; }
@keyframes ring { to { transform: scale(160); opacity: 0; border-width: 0.2px; } }

/* ---------- nav ---------- */
.topbar { position: fixed; z-index: 100; top: 16px; left: 50%; transform: translateX(-50%); width: min(1240px, calc(100vw - 32px)); height: 60px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 12px; border-radius: 20px;
  background: rgba(21, 25, 32, 0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 50px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.5s var(--ease), background 0.3s; }
.topbar.tucked { transform: translate(-50%, -110px); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-display); letter-spacing: -0.02em; }
.brand .brand-badge { width: auto; height: 44px; transform-origin: 30% 90%; transition: transform 0.6s var(--spring); filter: drop-shadow(0 4px 10px rgba(216, 178, 90, 0.25)); }
.brand:hover .brand-badge { transform: rotate(-8deg) scale(1.1); }
.brand .wm { height: 36px; width: auto; }
@keyframes draw { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
.navlinks { position: relative; display: flex; gap: 4px; margin: 0 auto; }
.navlink { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; color: var(--muted); font-weight: 500; font-size: 15px; transition: color 0.25s; white-space: nowrap; }
.navlink:hover, .navlink.on { color: var(--text); }
.navlink .ic { font-size: 17px; }
.navblob { position: absolute; z-index: 0; top: 0; height: 100%; border-radius: 12px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line-2); transition: left 0.45s var(--spring), width 0.45s var(--spring), opacity 0.2s; }
.badge-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: #fff; font: 700 11px/20px var(--f-body); text-align: center; }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px; transition: background 0.2s; }
.me-chip:hover { background: rgba(255, 255, 255, 0.06); }
.me-chip .pts { font: 600 13px var(--f-mono); color: var(--amber); }
.icon-btn { width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: grid; place-items: center; font-size: 17px; transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.tabbar { display: none; }

/* ---------- layout ---------- */
main#app { min-height: 100vh; min-height: 100dvh; }
.page { width: min(var(--page), calc(100vw - 48px)); margin: 0 auto; padding: calc(var(--top) + 56px) 0 120px; }
.page.narrow { --page: 860px; }
.section { margin-top: 96px; }
.stack > * + * { margin-top: 24px; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.page-title h1 { font-size: clamp(40px, 5vw, 72px); margin-top: 16px; }

/* ---------- surfaces ---------- */
.card { position: relative; border-radius: var(--r-lg); background: var(--surface); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.card.pad { padding: 32px; }
.card.pad-lg { padding: 48px; }
.hover-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 211, 138, 0.13), transparent 50%); }
.hover-glow:hover::after { opacity: 1; }
.divider { height: 1px; background: var(--line); margin: 24px 0; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 0.4s var(--spring), box-shadow 0.3s, background 0.3s, opacity 0.2s; }
.btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn.primary { color: #1a1508; background: linear-gradient(115deg, #f0d38a, #d8b25a 45%, #a9853a 120%); box-shadow: 0 14px 34px -12px rgba(216, 178, 90, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.primary::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-130%); transition: transform 1s var(--ease); }
.btn.primary:hover::before { transform: translateX(130%); }
.btn.gold { background: linear-gradient(115deg, #f0d38a, #ff9f43); color: #1d1100; box-shadow: 0 14px 34px -12px rgba(255, 160, 60, 0.95); }
.btn.good { background: linear-gradient(115deg, #1fc98a, #a3b86c); color: #141a0f; }
.btn.danger { background: rgba(224, 103, 79, 0.12); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(224, 103, 79, 0.4); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.btn.sm { padding: 9px 16px; font-size: 14px; border-radius: 12px; }
.btn.lg { padding: 18px 32px; font-size: 17px; border-radius: 18px; }
.btn.block { width: 100%; }

/* hold-to-accept */
.hold { position: relative; width: 100%; padding: 22px; border: 0; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; font: 700 18px var(--f-body); letter-spacing: 0.01em;
  background: linear-gradient(115deg, #2b3850, #1e2638); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.45), 0 20px 50px -20px rgba(216, 178, 90, 0.8);
  user-select: none; -webkit-user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center; gap: 12px; }
.hold::before { content: ''; position: absolute; inset: 0; z-index: -1; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #c9a24a, #d8b25a, #a3b86c); }
.hold .sub { opacity: 0.7; font-weight: 500; font-size: 14px; }
.hold.charging { animation: shake 0.1s infinite; }
@keyframes shake { 25% { transform: translate(-0.8px, 0.6px); } 75% { transform: translate(0.8px, -0.6px); } }

/* ---------- chips / inputs ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); transition: all 0.35s var(--spring); user-select: none; }
button.chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-1px); }
.chip.on { color: #fff; background: linear-gradient(115deg, rgba(216, 178, 90, 0.6), rgba(163, 184, 108, 0.35)); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.6), 0 8px 22px -10px rgba(216, 178, 90, 0.9); }
.chip.xs { padding: 5px 11px; font-size: 12.5px; }
.chip.perk { color: #f5e2b0; background: rgba(233, 169, 79, 0.16); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.45); }
.chip.occ { color: #ffd0e0; background: rgba(224, 103, 79, 0.16); box-shadow: inset 0 0 0 1px rgba(224, 103, 79, 0.4); }
.chip.priv { color: #cfe9ff; background: rgba(143, 176, 221, 0.16); box-shadow: inset 0 0 0 1px rgba(143, 176, 221, 0.4); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field > .lbl { font: 600 12px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; gap: 12px; }
.field > .help { font-size: 13.5px; color: var(--dim); margin-top: -4px; }
.input, textarea.input, select.input { width: 100%; padding: 15px 18px; border: 0; border-radius: var(--r-sm); background: rgba(16, 19, 24, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); outline: none; transition: box-shadow 0.25s, background 0.25s; }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--violet-2), 0 0 0 5px rgba(216, 178, 90, 0.16); background: rgba(16, 19, 24, 0.85); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.55; }
.input::placeholder { color: var(--dim); }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--violet) var(--fill, 50%), rgba(255, 255, 255, 0.1) var(--fill, 50%)); outline: none; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(216, 178, 90, 0.3), 0 4px 14px rgba(0, 0, 0, 0.6); transition: transform 0.25s var(--spring); }
input[type='range']::-webkit-slider-thumb:active { transform: scale(1.25); }
input[type='range']::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; }
.hue-range { background: linear-gradient(90deg, hsl(0,90%,60%), hsl(60,90%,60%), hsl(120,90%,60%), hsl(180,90%,60%), hsl(240,90%,60%), hsl(300,90%,60%), hsl(360,90%,60%)) !important; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(16, 19, 24, 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: transparent; padding: 10px 15px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.on { color: #fff; background: rgba(216, 178, 90, 0.55); box-shadow: 0 6px 18px -8px rgba(216, 178, 90, 1); }
.switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.12); position: relative; transition: background 0.3s; cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.35s var(--spring); }
.switch input:checked { background: linear-gradient(115deg, var(--violet), var(--teal)); }
.switch input:checked::after { transform: translateX(18px); }
.switch b { display: block; }
.switch small { color: var(--dim); font-size: 13.5px; }

/* ---------- quest card ---------- */
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.qcard { --h: 260; position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; cursor: pointer; background: var(--solid); box-shadow: var(--shadow);
  transform-style: preserve-3d; transition: transform 0.6s var(--ease), box-shadow 0.4s; will-change: transform; }
.qcard:hover { box-shadow: 0 40px 90px -34px hsla(var(--h), 55%, 50%, 0.5), 0 0 0 1px hsla(var(--h), 50%, 70%, 0.35); }
.qcard .media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.qcard .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.qcard:hover .media img { transform: scale(1.08); }
.aurora { position: absolute; inset: -40%;
  background: radial-gradient(38% 48% at 28% 38%, hsla(var(--h), 55%, 58%, 0.9), transparent 60%), radial-gradient(34% 44% at 72% 62%, hsla(calc(var(--h) + 18), 45%, 45%, 0.75), transparent 60%),
    radial-gradient(28% 38% at 55% 22%, hsla(42, 60%, 70%, 0.45), transparent 60%), linear-gradient(160deg, hsl(var(--h), 30%, 16%), hsl(218, 30%, 10%));
  filter: blur(16px) saturate(130%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { 50% { transform: rotate(14deg) scale(1.12) translate(3%, -2%); } 100% { transform: rotate(-10deg) scale(1.05) translate(-3%, 3%); } }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; mix-blend-mode: overlay; pointer-events: none; }
.holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity 0.4s;
  background: conic-gradient(from calc(var(--ang, 0) * 1deg) at var(--mx, 50%) var(--my, 50%), #f0d38a33, #a3b86c33, #8fb0dd33, #e9a94f33, #f0d38a33); }
.qcard:hover .holo { opacity: 1; }
.qcard .sigil { position: absolute; right: 18px; bottom: 16px; font-size: 40px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); transition: transform 0.6s var(--spring); }
.qcard:hover .sigil { transform: translateY(-6px) rotate(-8deg) scale(1.1); }
.qcard .topchips { position: absolute; top: 14px; left: 14px; right: 90px; display: flex; gap: 6px; flex-wrap: wrap; }
.qcard .topchips .chip { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(16, 19, 24, 0.55); }
.qcard .pts { position: absolute; top: 14px; right: 14px; }
.pts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 700 13px var(--f-mono); color: #251500;
  background: linear-gradient(110deg, #ffd27a, #e9a94f 40%, #fff3cf 50%, #e9a94f 60%, #ff9a3d); background-size: 250% 100%; animation: shimmer 3.5s linear infinite; box-shadow: 0 8px 22px -8px rgba(255, 170, 60, 0.9); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.qcard .body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.qcard h3 { font-size: 22px; line-height: 1.12; }
.qcard .tagline { color: var(--muted); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcard .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.qcard .meta span { display: inline-flex; align-items: center; gap: 6px; }
.qcard.locked .media { filter: grayscale(0.85) brightness(0.55); }
.lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 6px; height: 13px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); transform: skewX(-14deg); }
.pips i.on { background: linear-gradient(180deg, var(--amber), var(--coral)); }
.stars { color: var(--amber); }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: block; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.avatar.md { width: 56px; height: 56px; } .avatar.lg { width: 96px; height: 96px; } .avatar.xl { width: 140px; height: 140px; }
.crest { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.crest svg { width: 22px; height: 22px; }
.rank-name { font: 600 11px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- HOME ---------- */
.home-hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; }
.home-hero #globe { position: absolute; inset: 0; }
.home-hero .shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 70% 50%, transparent 40%, rgba(16, 19, 24, 0.85) 100%), linear-gradient(90deg, rgba(16, 19, 24, 0.92) 0%, rgba(16, 19, 24, 0.45) 45%, transparent 70%); }
.home-hero .copy { position: absolute; left: max(24px, calc((100vw - 1200px) / 2)); top: 50%; transform: translateY(-44%); max-width: 700px; }
.home-hero h1 { font-size: clamp(52px, 6.8vw, 106px); line-height: 0.95; letter-spacing: -0.035em; }
.home-hero h1 .line { white-space: nowrap; }
.home-hero h1 .line { display: block; overflow: hidden; padding: 0.04em 0 0.24em; margin-bottom: -0.2em; }
.home-hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
@keyframes rise { to { transform: none; } }
.home-hero .lead { margin: 28px 0 40px; opacity: 0; animation: fadeUp 1s 0.8s var(--ease) forwards; }
.home-hero .ctas { opacity: 0; animation: fadeUp 1s 1s var(--ease) forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--dim); font: 600 11px var(--f-mono); letter-spacing: 0.2em; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--teal), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.stats { display: flex; gap: 48px; margin-top: 56px; opacity: 0; animation: fadeUp 1s 1.2s var(--ease) forwards; }
.stats b { display: block; font: 800 36px var(--f-display); }
.stats small { color: var(--dim); font: 600 11px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.marquee { overflow: hidden; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 56px; width: max-content; animation: marquee 50s linear infinite; font: 700 clamp(28px, 3vw, 44px) var(--f-display); letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.85); }
.marquee .track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee .track span::after { content: '✦'; color: var(--violet); font-size: 0.6em; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.story .steps-list { display: flex; flex-direction: column; gap: 18vh; padding: 16vh 0; }
.story .sstep { opacity: 0.25; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transform: translateX(-12px); }
.story .sstep.on { opacity: 1; transform: none; }
.story .sstep .num { font: 700 14px var(--f-mono); color: var(--teal); }
.story .sstep h3 { font-size: clamp(28px, 3vw, 44px); margin: 14px 0 12px; }
.phone-wrap { position: sticky; top: calc(50vh - 300px); height: 600px; display: grid; place-items: center; }
.phone { width: 290px; height: 590px; border-radius: 46px; padding: 12px; background: linear-gradient(160deg, #2b3242, #0e1016); box-shadow: 0 60px 120px -40px rgba(216, 178, 90, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #12161c; }
.phone .scene { position: absolute; inset: 0; padding: 26px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(30px) scale(0.96); transition: all 0.7s var(--ease); }
.phone .scene.on { opacity: 1; transform: none; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.feature { padding: 44px; min-height: 380px; overflow: hidden; }
.feature .big { font-size: 56px; display: inline-block; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-5deg); } }
.feature ul { margin: 24px 0 0; padding: 0; list-style: none; }
.feature li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }
.feature li::before { content: '✦'; color: var(--teal); }
.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.occ-tile { position: relative; padding: 28px; min-height: 180px; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; cursor: pointer; background: var(--solid); box-shadow: var(--shadow); transition: transform 0.5s var(--spring); }
.occ-tile:hover { transform: translateY(-6px) rotate(-1deg); }
.occ-tile .aurora { opacity: 0.55; }
.occ-tile > * { position: relative; }
.occ-tile .em { font-size: 40px; margin-bottom: auto; }
.occ-tile b { font: 700 22px var(--f-display); }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }
.rung { padding: 28px 16px; border-radius: 22px; text-align: center; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.45s var(--spring); }
.rung:hover { transform: translateY(-10px); }
.rung svg { width: 70px; height: 70px; margin: 0 auto 12px; }
.cta-band { padding: 96px 48px; text-align: center; overflow: hidden; }

/* ---------- DISCOVER ---------- */
.disc { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }   /* dvh: the visible height, with the browser's address bar showing */
.disc #dmap { position: absolute; inset: 0; }
.disc .search { position: absolute; z-index: 5; top: calc(var(--top) + 20px); left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); display: flex; gap: 10px; padding: 8px; border-radius: 20px;
  background: rgba(21, 25, 32, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line-2); }
.disc .search .input { background: transparent; box-shadow: none; padding: 12px 14px; }
.disc .occbar { position: absolute; z-index: 5; top: calc(var(--top) + 96px); left: 0; right: 0; display: flex; gap: 8px; padding: 4px max(16px, calc((100vw - 900px) / 2)); overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.disc .occbar::-webkit-scrollbar { display: none; }
.disc .occbar .chip { background-color: rgba(21, 25, 32, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.disc .occbar .chip.on { background: linear-gradient(115deg, rgba(216, 178, 90, 0.85), rgba(163, 184, 108, 0.55)); }
.suggest { position: absolute; z-index: 10; left: 8px; right: 8px; top: calc(100% + 8px); background: var(--solid); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.suggest button { display: block; width: 100%; text-align: left; padding: 14px 18px; border: 0; background: transparent; color: var(--muted); font-size: 14.5px; border-bottom: 1px solid var(--line); }
.suggest button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.carousel { position: absolute; z-index: 5; left: 0; right: 0; bottom: 22px; display: flex; gap: 18px; padding: 10px max(20px, calc((100vw - 1240px) / 2)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .qcard { flex: none; width: 340px; scroll-snap-align: center; flex-direction: row; height: 152px; }
.carousel .qcard .media { aspect-ratio: auto; width: 116px; flex: none; }
.carousel .qcard .body { padding: 16px 18px; gap: 6px; }
.carousel .qcard h3 { font-size: 18px; }
.carousel .qcard .meta { padding-top: 8px; gap: 10px; font-size: 12px; }
.carousel .qcard .tagline { -webkit-line-clamp: 1; font-size: 13px; }
.carousel .qcard .sigil { font-size: 30px; right: 10px; bottom: 10px; }
.carousel .qcard .topchips { display: none; }
.carousel .qcard.active { box-shadow: 0 0 0 2px var(--teal), 0 30px 70px -30px rgba(163, 184, 108, 0.7); transform: translateY(-6px); }
.disc .tools { position: absolute; z-index: 5; right: 20px; top: calc(var(--top) + 150px); display: flex; flex-direction: column; gap: 10px; }
.fab { width: 50px; height: 50px; border: 0; border-radius: 16px; display: grid; place-items: center; font-size: 19px; background: rgba(21, 25, 32, 0.8); backdrop-filter: blur(14px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line-2); transition: transform 0.35s var(--spring), background 0.2s; position: relative; }
.fab:hover { transform: scale(1.08); background: rgba(40, 50, 66, 0.9); }
.fab.on { background: linear-gradient(135deg, var(--violet), #8a6a2c); }
.fab .badge-dot { position: absolute; top: -6px; right: -6px; background: var(--violet); }
.count-pill { position: absolute; z-index: 5; left: 50%; bottom: 196px; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: rgba(21, 25, 32, 0.8); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line-2); font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.drawer-bg { position: fixed; inset: 0; z-index: 120; background: rgba(10, 12, 15, 0.55); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 121; top: 12px; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); padding: 32px; overflow-y: auto; border-radius: 28px; background: rgba(19, 23, 30, 0.97); backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg); transform: translateX(110%); transition: transform 0.6s var(--ease); display: flex; flex-direction: column; gap: 28px; }
.drawer.open { transform: none; }
.listview { position: absolute; inset: 0; z-index: 6; overflow-y: auto; padding: calc(var(--top) + 160px) max(24px, calc((100vw - 1200px) / 2)) 80px; background: rgba(16, 19, 24, 0.92); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
.listview.open { opacity: 1; pointer-events: auto; }
.beacon { --h: 260; position: relative; width: 24px; height: 24px; cursor: pointer; }
.beacon .dot { position: absolute; inset: 5px; border-radius: 50%; background: hsl(var(--h), 60%, 62%); box-shadow: 0 0 0 3px rgba(16, 19, 24, 0.85), 0 0 18px hsl(var(--h), 60%, 55%); transition: transform 0.35s var(--spring); }
.beacon::before, .beacon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid hsla(var(--h), 60%, 62%, 0.8); animation: ping 2.4s var(--ease) infinite; }
.beacon::after { animation-delay: 1.2s; }
.beacon:hover .dot, .beacon.hot .dot { transform: scale(1.8); }
.beacon .tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: rgba(21, 25, 32, 0.95); box-shadow: var(--shadow); font: 600 13px var(--f-body); color: var(--text); opacity: 0; pointer-events: none; transition: all 0.3s var(--ease); }
.beacon:hover .tip, .beacon.hot .tip { opacity: 1; transform: translate(-50%, 0); }
.beacon.perk .dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(16, 19, 24, 0.85), 0 0 22px var(--amber); }
.beacon.me .dot { background: #fff; box-shadow: 0 0 0 4px var(--sky), 0 0 24px var(--sky); }
.beacon.me::before, .beacon.me::after { border-color: var(--sky); }
@keyframes ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.pin { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-mono); color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--violet), #a9853a); box-shadow: 0 0 0 3px rgba(16, 19, 24, 0.85), 0 0 22px rgba(216, 178, 90, 0.8); }
.pin.done { background: linear-gradient(135deg, var(--good), var(--teal)); }
.maplibregl-ctrl-attrib { background: rgba(10, 8, 22, 0.6) !important; color: var(--dim) !important; font-size: 10px !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-group { background: rgba(21, 25, 32, 0.8) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px var(--line-2) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) opacity(0.7); }
.mapbox { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #12161c; }

/* ---------- QUEST DETAIL ---------- */
.qhero { --h: 260; position: relative; height: min(78vh, 760px); min-height: 520px; overflow: hidden; }
.qhero .bg { position: absolute; inset: -8% 0 0; will-change: transform; }
.qhero .bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.12) translate(-2%, -2%); } }
.qhero .shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 2%, rgba(16, 19, 24, 0.55) 45%, rgba(16, 19, 24, 0.15) 75%, rgba(16, 19, 24, 0.4)); }
.qhero .copy { position: absolute; left: 0; right: 0; bottom: 56px; width: min(var(--page), calc(100vw - 48px)); margin: 0 auto; }
.qhero h1 { font-size: clamp(44px, 7vw, 104px); margin: 18px 0 16px; max-width: 900px; }
.qhero .tagline { font-size: clamp(18px, 1.8vw, 22px); color: #efe6d2; max-width: 640px; }
.statline { display: flex; flex-wrap: wrap; margin-top: 32px; border-radius: 20px; overflow: hidden; background: rgba(16, 19, 24, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-2); width: fit-content; max-width: 100%; }
.statline div { padding: 14px 22px; border-right: 1px solid var(--line); }
.statline div:last-child { border-right: 0; }
.statline b { display: block; font: 700 18px var(--f-mono); }
.statline small { color: var(--dim); font: 600 10.5px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.detail { width: min(var(--page), calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; padding: 48px 0 140px; align-items: start; }
.sticky { position: sticky; top: calc(var(--top) + 24px); }
.desc { font-size: 17.5px; line-height: 1.75; color: #e6dfcd; white-space: pre-wrap; }
.journey { position: relative; display: flex; flex-direction: column; }
.jstep { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 36px; }
.jstep::before { content: ''; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px; background: linear-gradient(var(--violet), transparent); opacity: 0.5; }
.jstep:last-child::before { display: none; }
.jnode { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font: 800 18px var(--f-display); background: var(--solid); box-shadow: inset 0 0 0 2px rgba(216, 178, 90, 0.6), 0 0 26px -6px rgba(216, 178, 90, 0.8); transition: all 0.5s var(--spring); }
.jstep.done .jnode { background: linear-gradient(135deg, var(--good), var(--teal)); color: #141a0f; box-shadow: 0 0 30px -4px rgba(159, 194, 94, 0.8); }
.jstep.pending .jnode { box-shadow: inset 0 0 0 2px var(--amber), 0 0 30px -4px rgba(233, 169, 79, 0.8); animation: pulse 1.8s infinite; }
.jstep.sealed .jnode { background: #1b212b; box-shadow: inset 0 0 0 2px #34445f; color: var(--dim); }
.jstep.current .jnode { background: linear-gradient(135deg, var(--violet), #a9853a); transform: scale(1.08) rotate(-6deg); box-shadow: 0 0 0 6px rgba(216, 178, 90, 0.18), 0 0 34px rgba(216, 178, 90, 0.9); }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 2px var(--amber), 0 0 44px rgba(233, 169, 79, 0.95); } }
.jstep h4 { font-size: 21px; margin: 4px 0 8px; }
.jstep .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.jstep .ref { margin-top: 14px; width: 100%; max-width: 360px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); }
.ptag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font: 600 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); background: rgba(163, 184, 108, 0.1); box-shadow: inset 0 0 0 1px rgba(163, 184, 108, 0.3); }
.ptag.warm { color: var(--amber); background: rgba(233, 169, 79, 0.1); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.3); }
.perk-card { position: relative; padding: 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #3a2208, #1c2330 60%); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.45), 0 30px 60px -30px rgba(255, 150, 60, 0.6); }
.perk-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 220, 150, 0.22) 50%, transparent 65%); transform: translateX(-100%); animation: sheen 5s infinite; pointer-events: none; }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
.perk-card .demo { margin-top: 12px; font-size: 12.5px; color: #ffcf8a; opacity: 0.85; }
.actionbar { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); padding: 10px; border-radius: 24px; background: rgba(21, 25, 32, 0.85); backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-2); display: none; }
.crew-row, .lb-row { display: grid; grid-template-columns: 36px 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.crew-row:last-child, .lb-row:last-child { border-bottom: 0; }
.review { padding: 20px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* ---------- RUN ---------- */
.runhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.runwrap { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start; }
.stepcard { margin-top: 18px; padding: 28px; }
.stepcard .instr { font-size: 18px; line-height: 1.65; color: #efe6d2; white-space: pre-wrap; }
.proofbox { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.camera { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; display: grid; place-items: center; cursor: pointer; background: rgba(16, 19, 24, 0.6); box-shadow: inset 0 0 0 1.5px rgba(216, 178, 90, 0.4); color: var(--muted); }
.camera .shutter { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; border: 5px solid #fff; display: grid; place-items: center; box-shadow: 0 0 30px rgba(216, 178, 90, 0.8); transition: transform 0.35s var(--spring); }
.camera .shutter::after { content: ''; width: 54px; height: 54px; border-radius: 50%; background: #fff; }
.camera:hover .shutter { transform: scale(1.1); }
.camera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera .corners { position: absolute; inset: 18px; pointer-events: none; --c: var(--teal); background:
  linear-gradient(var(--c), var(--c)) 0 0 / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 28px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 28px no-repeat,
  linear-gradient(var(--c), var(--c)) 0 100% / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 28px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 28px no-repeat; }
.radar { position: relative; width: 200px; height: 200px; margin: 4px auto; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, transparent 29%, rgba(163, 184, 108, 0.22) 30%, transparent 31%, transparent 59%, rgba(163, 184, 108, 0.22) 60%, transparent 61%, transparent 89%, rgba(163, 184, 108, 0.3) 90%, transparent 92%); box-shadow: 0 0 60px -10px rgba(163, 184, 108, 0.5); }
.radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(163, 184, 108, 0.65), transparent 25%); animation: spin 2.2s linear infinite; }
.radar .you { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px #fff; }
.radar .dist { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: 600 12px var(--f-mono); color: var(--teal); }
@keyframes spin { to { transform: rotate(360deg); } }
.wobble { animation: wobble 0.5s; }
@keyframes wobble { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill.pending { background: rgba(233, 169, 79, 0.14); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.35); }
.pill.done, .pill.approved, .pill.auto, .pill.completed { background: rgba(159, 194, 94, 0.12); color: var(--good); box-shadow: inset 0 0 0 1px rgba(159, 194, 94, 0.35); }
.pill.rejected { background: rgba(224, 103, 79, 0.12); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(224, 103, 79, 0.35); }
.pill.active { background: rgba(216, 178, 90, 0.15); color: var(--violet-2); box-shadow: inset 0 0 0 1px rgba(216, 178, 90, 0.4); }
.orb { position: relative; width: 132px; height: 132px; flex: none; }
.orb svg { transform: rotate(-90deg); }
.orb .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 32px var(--f-display); line-height: 1; }
.orb .lbl small { display: block; font: 600 10px var(--f-mono); color: var(--dim); letter-spacing: 0.16em; margin-top: 6px; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 45%, rgba(40, 50, 66, 0.9), rgba(10, 12, 15, 0.97)); backdrop-filter: blur(10px); animation: fadeIn 0.4s; overflow-y: auto; }
@keyframes fadeIn { from { opacity: 0; } }
.celebrate { text-align: center; max-width: 620px; }
.celebrate h1 { font-size: clamp(52px, 8vw, 110px); animation: zoomIn 0.9s var(--spring); }
@keyframes zoomIn { from { transform: scale(0.3); opacity: 0; } }
.seal { width: 170px; height: 170px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; position: relative; font: 800 60px var(--f-display); color: #ffd6de;
  background: radial-gradient(circle at 35% 30%, #ff8a9a, #d91e4a 45%, #6e2416 80%); box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.45), inset 0 8px 20px rgba(255, 255, 255, 0.25), 0 20px 60px rgba(217, 30, 74, 0.6); animation: slam 0.7s var(--spring) both; }
.seal::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 3px dashed rgba(255, 214, 222, 0.45); }
@keyframes slam { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 60% { transform: scale(0.92) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }
.big-points { font: 800 clamp(60px, 10vw, 120px)/1 var(--f-display); background: linear-gradient(180deg, #fff3c9, #e9a94f 60%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255, 170, 60, 0.6)); }
.stars-pick { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }
.stars-pick button { border: 0; background: transparent; font-size: 46px; line-height: 1; color: rgba(255, 255, 255, 0.18); transition: all 0.3s var(--spring); padding: 4px; }
.stars-pick button.on { color: var(--amber); text-shadow: 0 0 20px rgba(233, 169, 79, 0.9); transform: scale(1.15) rotate(-8deg); }
.pass { width: min(420px, 100%); padding: 36px 30px; border-radius: 32px; text-align: center; position: relative; overflow: hidden; color: #1c2330;
  background: linear-gradient(135deg, #f5e2b0, #ffb56b 40%, #e98a6a 75%, #e8c97f); background-size: 300% 300%; animation: passShift 6s ease-in-out infinite; box-shadow: 0 50px 120px -30px rgba(255, 150, 90, 0.8); }
@keyframes passShift { 50% { background-position: 100% 100%; } }
.pass .code { font: 800 44px var(--f-mono); letter-spacing: 0.08em; margin: 18px 0 6px; }
.pass .clock { font: 600 15px var(--f-mono); opacity: 0.8; }
.pass .live { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e0164b; margin-right: 8px; animation: blink 1s infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0.2; } }
.stamp { position: fixed; left: 50%; top: 50%; z-index: 160; pointer-events: none; font: 800 clamp(60px, 10vw, 130px) var(--f-display); padding: 8px 34px; border: 8px solid currentColor; border-radius: 20px; text-transform: uppercase; mix-blend-mode: screen; animation: stamp 1.2s var(--ease) forwards; }
.stamp.approved { color: var(--good); } .stamp.rejected { color: var(--bad); }
@keyframes stamp { 0% { transform: translate(-50%, -50%) scale(3) rotate(-18deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(0.95) rotate(-12deg); opacity: 1; } 26% { transform: translate(-50%, -50%) scale(1.05) rotate(-12deg); } 75% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-12deg); opacity: 0; } }

/* ---------- review deck ---------- */
.deck { position: relative; height: 640px; max-width: 520px; margin: 0 auto; }
.rcard { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: var(--solid); box-shadow: var(--shadow-lg); touch-action: none; user-select: none; transition: transform 0.45s var(--ease), opacity 0.4s; display: flex; flex-direction: column; }
.rcard.dragging { transition: none; }
.rcard .photo { height: 300px; flex: none; background: #000; position: relative; }
.rcard .photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rcard .photo .nophoto { height: 100%; display: grid; place-items: center; padding: 32px; font: italic 20px var(--f-serif); color: #efe6d2; text-align: center; background: radial-gradient(circle, #2b3850, #12161c); }
.rcard .verdict { position: absolute; top: 24px; padding: 6px 16px; border: 4px solid; border-radius: 12px; font: 800 26px var(--f-display); opacity: 0; }
.rcard .verdict.yes { left: 24px; color: var(--good); transform: rotate(-12deg); }
.rcard .verdict.no { right: 24px; color: var(--bad); transform: rotate(12deg); }
.rcard .info { padding: 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.deck-actions { display: flex; justify-content: center; gap: 24px; margin-top: 28px; }
.round { width: 76px; height: 76px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 30px; transition: transform 0.35s var(--spring); }
.round:hover { transform: scale(1.12); }
.round.no { background: rgba(224, 103, 79, 0.14); color: var(--bad); box-shadow: inset 0 0 0 2px rgba(224, 103, 79, 0.5); }
.round.yes { background: rgba(159, 194, 94, 0.14); color: var(--good); box-shadow: inset 0 0 0 2px rgba(159, 194, 94, 0.5); }
.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.evidence div { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); font-size: 12px; color: var(--muted); }
.evidence b { display: block; color: var(--text); font: 600 14px var(--f-mono); }

/* ---------- CREATE wizard ---------- */
.wiz-steps { display: flex; gap: 10px; margin-bottom: 44px; overflow-x: auto; scrollbar-width: none; }
.wiz-steps button { flex: 1; min-width: 140px; border: 0; background: transparent; text-align: left; padding: 0; color: var(--dim); }
.wiz-steps .bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-bottom: 12px; }
.wiz-steps .bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 0.6s var(--ease); }
.wiz-steps button.done .bar i, .wiz-steps button.on .bar i { width: 100%; }
.wiz-steps button.on, .wiz-steps button.done { color: var(--text); }
.wiz-steps small { font: 600 11px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.wiz-steps b { display: block; font-size: 16px; margin-top: 2px; }
.wiz { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.wiz-pane { animation: paneIn 0.6s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateX(40px); } }
.wiz-pane.back { animation-name: paneBack; }
@keyframes paneBack { from { opacity: 0; transform: translateX(-40px); } }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.dropzone { position: relative; aspect-ratio: 16 / 7; border-radius: 22px; overflow: hidden; display: grid; place-items: center; text-align: center; cursor: pointer; color: var(--muted);
  background: rgba(16, 19, 24, 0.5); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow 0.3s; }
.dropzone:hover, .dropzone.drag { box-shadow: inset 0 0 0 2px var(--violet-2), 0 0 0 6px rgba(216, 178, 90, 0.15); }
.dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dropzone .x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dropzone.sm { aspect-ratio: 16 / 9; max-width: 260px; }
.fstep { padding: 26px; border-radius: 24px; background: rgba(16, 19, 24, 0.45); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s; animation: fadeUp 0.5s var(--ease); }
.fstep.active { box-shadow: inset 0 0 0 1.5px rgba(240, 211, 138, 0.7), 0 0 50px -16px rgba(216, 178, 90, 0.8); }
.fstep-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fnum { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 800 15px var(--f-display); background: linear-gradient(135deg, var(--violet), #a9853a); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- HUB / profile ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 36px; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; padding: 12px 20px; border-radius: 14px; color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: all 0.3s var(--ease); }
.tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.tabs button.on { color: #fff; background: rgba(216, 178, 90, 0.25); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.45); }
.runrow { display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center; padding: 18px; border-radius: 22px; cursor: pointer; }
.runrow .thumb { --h: 260; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; position: relative; }
.runrow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.bar-line { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar-line i { display: block; height: 100%; border-radius: 99px; background: var(--grad); width: 0; transition: width 1.4s var(--ease); }
.prof { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding: 44px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.badge { position: relative; padding: 24px 16px; border-radius: 22px; text-align: center; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.badge .bi { font-size: 42px; }
.badge.earned { background: linear-gradient(160deg, rgba(216, 178, 90, 0.24), rgba(163, 184, 108, 0.08)); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.45); }
.badge.earned::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-100%); animation: sheen 4s infinite; }
.badge:not(.earned) { filter: grayscale(1); opacity: 0.35; }
.badge b { display: block; margin-top: 10px; font-size: 15px; }
.badge small { color: var(--muted); font-size: 12.5px; }
.journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 28px; padding: 8px; }
.polaroid { display: block; background: #f5efe6; color: #1f2632; padding: 12px 12px 20px; border-radius: 6px; box-shadow: 0 24px 44px -16px rgba(0, 0, 0, 0.85); transform: rotate(var(--r, -2deg)); transition: transform 0.45s var(--spring); }
.polaroid:hover { transform: rotate(0) scale(1.05); }
.polaroid .ph { --h: 260; aspect-ratio: 1; overflow: hidden; border-radius: 2px; position: relative; }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .cap { font: italic 19px/1.15 var(--f-serif); margin-top: 12px; }
.polaroid .sub { font: 11px var(--f-mono); color: #6b6178; margin-top: 6px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: end; margin: 20px 0 32px; }
.podium .p { text-align: center; padding: 30px 16px; border-radius: 28px 28px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.podium .first { padding-bottom: 64px; background: linear-gradient(180deg, rgba(233, 169, 79, 0.26), rgba(233, 169, 79, 0.03)); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.4), 0 0 70px -24px rgba(233, 169, 79, 0.8); }
.podium .second { padding-bottom: 40px; background: linear-gradient(180deg, rgba(200, 210, 255, 0.18), transparent); box-shadow: inset 0 0 0 1px rgba(200, 210, 255, 0.3); }
.podium .third { padding-bottom: 24px; background: linear-gradient(180deg, rgba(255, 140, 90, 0.18), transparent); box-shadow: inset 0 0 0 1px rgba(255, 140, 90, 0.3); }
.empty { text-align: center; padding: 72px 24px; color: var(--muted); }
.empty .big { font-size: 60px; display: inline-block; margin-bottom: 12px; animation: bob 4s ease-in-out infinite; }
.empty h3 { margin-bottom: 10px; color: var(--text); }
.empty .btn { margin-top: 20px; }
.auth { width: min(480px, calc(100vw - 32px)); margin: 0 auto; padding: 48px; }

/* ---------- toasts, reveal, loaders ---------- */
.toasts { position: fixed; z-index: 178; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }   /* above .finder/.ghostcam, below .unlock-pop (180) */
.toast { pointer-events: auto; padding: 14px 20px; border-radius: 18px; background: rgba(22, 26, 33, 0.96); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; font-weight: 500; animation: toastIn 0.6s var(--spring); max-width: 92vw; }
.toast.out { animation: toastOut 0.35s var(--ease) forwards; }
.toast.err { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(224, 103, 79, 0.5); }
.toast.ok { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(159, 194, 94, 0.45); }
@keyframes toastIn { from { transform: translateY(40px) scale(0.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(20px) scale(0.95); opacity: 0; } }
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.02em 0.26em; margin: -0.04em -0.02em -0.26em; } /* room for descenders (g, y, p) */
.split .w > span { display: inline-block; transform: translateY(108%) rotate(4deg); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 0.05s); }
.split.in .w > span { transform: none; }
.loader { width: 56px; height: 56px; margin: 30vh auto; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.08); border-top-color: var(--violet-2); border-right-color: var(--teal); animation: spin 0.9s linear infinite; }
.skel { border-radius: 26px; height: 340px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 70%); background-size: 300% 100%; animation: skel 1.4s infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .detail, .runwrap, .wiz { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .story { grid-template-columns: 1fr; } .phone-wrap { display: none; } .story .steps-list { gap: 64px; padding: 24px 0; } .story .sstep { opacity: 1; transform: none; }
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .navlink .t { display: none; }
}
@media (max-width: 760px) {
  :root { --top: 16px; }
  .topbar { display: none; }
  .tabbar { position: fixed; z-index: 100; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-radius: 22px;
    background: rgba(21, 25, 32, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line-2); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 14px; color: var(--dim); font-size: 10.5px; font-weight: 600; position: relative; }
  .tabbar a .ic { font-size: 20px; transition: transform 0.35s var(--spring); }
  .tabbar a.on { color: var(--text); background: rgba(216, 178, 90, 0.22); }
  .tabbar a.on .ic { transform: translateY(-2px) scale(1.12); }
  .tabbar .badge-dot { position: absolute; top: 2px; right: 14%; }
  .page { width: calc(100vw - 32px); padding: 40px 0 130px; }
  .card.pad, .card.pad-lg, .feature { padding: 24px; }
  .split-2, .two, .three { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .home-hero .copy { top: auto; bottom: 110px; transform: none; left: 20px; right: 20px; }
  .home-hero .shade { background: linear-gradient(0deg, rgba(16, 19, 24, 0.97) 35%, rgba(16, 19, 24, 0.2) 70%, rgba(16, 19, 24, 0.5)); }
  .home-hero h1 { font-size: clamp(34px, 10.5vw, 46px); } .home-hero .copy .btn.lg { padding: 15px 22px; font-size: 16px; }
  .stats { gap: 28px; margin-top: 32px; } .stats b { font-size: 26px; }
  .scroll-cue { display: none; }
  .disc .search { top: 14px; } .disc .search .t { display: none; } .disc .search .btn { padding: 9px 13px; } .disc .occbar { top: 86px; } .disc .tools { top: 140px; right: 12px; }
  .carousel { bottom: 96px; } .count-pill { bottom: 266px; }
  .carousel .qcard { width: 300px; }
  .qhero { min-height: 480px; } .qhero .copy { bottom: 32px; }
  .statline div { padding: 12px 16px; }
  .detail { padding-bottom: 180px; }
  .actionbar { display: block; bottom: 92px; }
  .prof { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 28px; }
  .runrow { grid-template-columns: 64px 1fr; } .runrow .thumb { width: 64px; height: 64px; } .runrow > :last-child { grid-column: 1 / -1; }
  .deck { height: 600px; }
  .toasts { bottom: 100px; }
  .listview { padding: 150px 16px 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}