/* Spooky Scavenger Hunt: shared tokens and components.
   One committed dark theme: a hunt that runs after dark is dark by design. */
:root{
  --ink:#110D17;--ink-2:#0A0710;--crypt:#1A1422;--crypt-2:#241C2F;--crypt-3:#2E2439;
  --line:#33293F;--line-soft:#261F31;--bone:#EFE7DB;--ash:#9C90A8;--ash-2:#6E6379;
  --candle:#F4A340;--candle-lo:#7A4C16;--candle-ink:#2A1B08;
  --ecto:#77E3AE;--ecto-lo:#1C4736;--blood:#E4523B;--blood-lo:#4E1D15;
  --hex:#8FB0CF;--hex-lo:#2C3A47;
  --r-s:8px;--r-m:14px;--r-l:22px;
  --f-d:"Bodoni Moda",Georgia,serif;
  --f-b:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--f-b);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
/* Every icon is sized by the thing it sits in, and each of those contexts has
   its own rule below. An icon that lands somewhere nobody wrote a rule for
   falls back to the SVG default of 300x150, which is how a car ended up half a
   screen tall on the join form. This floor is the least specific rule in the
   file, so every context rule still wins. */
svg{width:1em;height:1em}
[hidden]{display:none!important}
.veil{position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(70% 50% at 12% 0%,rgba(244,163,64,.10),transparent 60%),
  radial-gradient(60% 45% at 92% 8%,rgba(143,176,207,.10),transparent 62%)}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 16px}

.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-2);font-weight:600}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.pts{font-family:var(--f-m);font-weight:600;font-variant-numeric:tabular-nums;color:var(--candle)}
.panel{background:var(--crypt);border:1px solid var(--line-soft);border-radius:var(--r-m)}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);font-weight:700;text-wrap:balance}

.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:linear-gradient(to bottom,rgba(10,7,16,.97),rgba(10,7,16,.86));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding-block:11px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.flame{width:24px;height:28px;flex:none;filter:drop-shadow(0 0 9px rgba(244,163,64,.55))}
/* --wm-h is the whole file including the drips. The letters are the top 65%
   of it, so the negative margin hands the drip band back to the bar's padding
   and the flex centring lands on the letters. */
.mark span{display:block;min-width:0}
.mark .wm{--wm-h:34px;display:block;height:var(--wm-h);width:auto;max-width:100%;
  object-fit:contain;object-position:left top;margin-bottom:calc(var(--wm-h) * -0.3)}
@media(min-width:520px){.mark .wm{--wm-h:40px}}
.mark i{display:block;font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash-2);font-weight:600;margin-top:3px}
.clock{display:flex;align-items:center;gap:8px;font-family:var(--f-m);font-size:12.5px;color:var(--ash);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--crypt);white-space:nowrap}
.clock b{color:var(--candle);font-weight:600;font-variant-numeric:tabular-nums}
.clock.over b{color:var(--blood)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ecto);box-shadow:0 0 8px var(--ecto);
  animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:3.5px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--ash);background:var(--crypt-2)}
.chip svg{width:11px;height:11px;flex:none}
.chip.ok{color:var(--ecto);border-color:var(--ecto-lo);background:rgba(119,227,174,.09)}
.chip.wait{color:var(--candle);border-color:var(--candle-lo);background:rgba(244,163,64,.09)}
.chip.no{color:var(--blood);border-color:var(--blood-lo);background:rgba(228,82,59,.09)}
.chip.bonus{color:var(--hex);border-color:var(--hex-lo);background:rgba(143,176,207,.1)}

.btn{font:inherit;font-weight:600;font-size:14px;border-radius:10px;border:1px solid var(--line);
  background:var(--crypt-2);color:var(--bone);padding:10px 16px;cursor:pointer;transition:.16s;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn.sm svg{width:14px;height:14px}
.btn:hover{background:var(--crypt-3);border-color:var(--ash-2)}
.btn.go{background:var(--candle);border-color:var(--candle);color:var(--candle-ink)}
.btn.go:hover{background:#FFB556;border-color:#FFB556}
.btn.yes{background:var(--ecto);border-color:var(--ecto);color:#0B2419}
.btn.yes:hover{background:#95F0C2}
.btn.no{background:transparent;border-color:var(--blood-lo);color:var(--blood)}
.btn.no:hover{background:rgba(228,82,59,.12);border-color:var(--blood)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--candle);outline-offset:2px}

input,select,textarea{font:inherit;font-size:16px;color:var(--bone);background:var(--ink-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
textarea{resize:vertical;min-height:74px;line-height:1.45}
label.fl{display:block;margin-bottom:16px}
label.fl>span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash-2);font-weight:600;margin-bottom:6px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer;margin-bottom:14px}
.check input{width:auto;flex:none;margin-top:3px}
.check svg{width:16px;height:16px;flex:none;vertical-align:-3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

.av{flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--f-m);font-weight:600;
  color:#120D18;width:38px;height:38px;font-size:13px;overflow:hidden;position:relative}
.av.xs{width:22px;height:22px;font-size:9px}
.av.sm{width:30px;height:30px;font-size:11px}
.av.lg{width:52px;height:52px;font-size:17px}
.av.xl{width:96px;height:96px;font-size:30px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.shot{position:relative;border-radius:var(--r-s);overflow:hidden;background:#15101C;
  border:1px solid var(--line-soft);aspect-ratio:4/5;display:grid;place-items:center}
.shot img,.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .badge{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;
  background:rgba(8,5,12,.78);border-radius:5px;padding:2.5px 6px;font-family:var(--f-m);font-size:10px}
.shot .badge svg{width:9px;height:9px}

/* progress meter */
.meter{display:flex;align-items:center;gap:13px}
.fill{position:relative;flex:1;min-width:0;height:26px;border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#0E0518,#1A0C2C);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.85),inset 0 0 0 1px rgba(201,162,39,.22)}
/* the molten column */
.fill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);
  background:linear-gradient(180deg,#FFE7A8 0%,#FFB03A 34%,#E8631A 68%,#A82708 100%);
  box-shadow:0 0 16px rgba(255,150,50,.75);transition:width .5s cubic-bezier(.22,1,.36,1)}
/* the bright lip at the leading edge */
.fill::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:3px;
  margin-left:-2px;background:#FFF6DC;
  box-shadow:0 0 12px 3px rgba(255,226,150,.9);
  opacity:.95;transition:left .5s cubic-bezier(.22,1,.36,1)}
.fill.full::after{opacity:0}
.fill.full::before{background:linear-gradient(180deg,#FFF0BE 0%,#FFC85A 40%,#F08A20 100%);
  box-shadow:0 0 26px rgba(255,190,80,.95)}
.fill.small{height:15px;border-radius:2px}
.meter .num{flex:none;text-align:right}
.meter .num b{display:block;font-family:var(--f-m);font-size:19px;font-weight:600;color:var(--candle);
  line-height:1;font-variant-numeric:tabular-nums}
.meter .num span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-2);font-weight:600;margin-top:5px}
.meter.full .num b{color:#FFD98A}

/* leaderboard row */
.lb{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-s);
  margin-bottom:6px;border:1px solid transparent;background:var(--crypt)}
.lb.me{background:rgba(244,163,64,.07);border-color:var(--candle-lo)}
.lb .rk{font-family:var(--f-m);font-size:13px;color:var(--ash-2);width:22px;font-weight:600;flex:none}
.lb .rk.top{color:var(--candle)}
.lb .nm{font-weight:600;font-size:13.5px;line-height:1.2}
.lb .sub{font-size:11px;color:var(--ash-2);margin-top:1px}
.lb .sc{margin-left:auto;text-align:right;flex:none}
.lb .sc b{font-family:var(--f-m);font-size:16px;font-weight:600}
.lb .sc span{display:block;font-size:10px;color:var(--ash-2);font-family:var(--f-m)}
.lb .fill{width:74px;flex:none;margin-left:10px}
/* The syringe was illegible at this width and got hidden on phones. A plain
   fill is not, so it stays on every screen. */
@media(max-width:400px){.lb .fill{width:52px}}

/* modal.
   #modal is a bare child of body, and theme.css lifts every body child to
   z-index 1 so they clear its two fixed backdrop layers. That turned the host
   into a stacking context, which trapped the scrim's z-index 60 inside it and
   left the sheet painting under the top bar and the tab bar at 40. An id beats
   that rule on specificity and puts the host above everything it must cover. */
#modal{position:relative;z-index:70}
.scrim{position:fixed;inset:0;height:100dvh;z-index:60;background:rgba(6,4,10,.76);
  backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;
  padding:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  overscroll-behavior:contain}
@media(min-width:620px){.scrim{align-items:center}}
/* The sheet never outgrows the screen. Header and footer hold their place and
   the body takes the slack, so the send button is reachable on any phone no
   matter how long the trial runs. Letting the whole sheet grow instead pushed
   that button off the bottom, where no amount of scrolling reached it. */
.sheet{width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;
  background:var(--crypt);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:0 30px 70px -18px #000}
/* The header holds its place, but a long description must never squeeze the
   body to nothing. Organizers write that text, so cap it rather than trust it. */
.sheet>header{flex:none;max-height:38vh;overflow-y:auto;overscroll-behavior:contain;
  display:flex;align-items:flex-start;gap:12px;padding:17px 18px 14px;border-bottom:1px solid var(--line-soft)}
.sheet>header h3{font-size:20px;line-height:1.2}
.sheet>header p{margin:5px 0 0;font-size:12.5px;color:var(--ash);line-height:1.45}
.sheet .x{margin-left:auto;background:none;border:0;color:var(--ash-2);cursor:pointer;font-size:22px;
  line-height:1;padding:0 2px}
.sheet .bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:17px 18px}
.sheet .ft{flex:none;padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px;background:var(--ink-2)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);z-index:80;
  z-index:80;background:var(--bone);color:var(--ink);font-weight:600;font-size:13.5px;padding:11px 18px;
  border-radius:999px;box-shadow:0 14px 34px -8px #000;display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 32px);text-align:left}
.toast svg{width:17px;height:17px;flex:none}
.toast.bad{background:var(--blood);color:#fff}

.banner{border-radius:var(--r-m);padding:12px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.5;color:var(--ash)}
.banner b{display:block;font-family:var(--f-d);font-size:15px;margin-bottom:4px;color:var(--bone)}
.banner.queued{border:1px solid var(--candle-lo);background:rgba(244,163,64,.09)}
.banner.stale{border:1px solid var(--line);background:var(--crypt)}
.banner.todo{border:1px solid var(--hex-lo);background:rgba(143,176,207,.1)}
.shot.pending{outline:1px dashed var(--candle-lo);outline-offset:-1px}
.shot.pending img,.shot.pending video{opacity:.82}
.empty{text-align:center;padding:42px 18px;color:var(--ash-2)}
.empty svg{width:40px;height:40px;opacity:.35;margin-bottom:12px}
.empty p{margin:0;font-size:13.5px}
.sechead{display:flex;align-items:baseline;gap:9px;margin:20px 0 10px}
.sechead h3{font-size:16px}
.sechead .c{font-family:var(--f-m);font-size:11px;color:var(--ash-2);margin-left:auto}
.scrollx{overflow-x:auto}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.kv span{color:var(--ash-2)}
.kv b{font-weight:600;text-align:right}
.kv:last-child{border-bottom:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}