/* Encore theme — "Miami Vice meets Bret Hart".
   Black base, hot pink as the hero, electric blue as the accent, clean white type.
   Inspired by the Heat's Vice City Edition kit and the Hitman's pink-and-black.
   Dark and premium, but with real colour and energy — this is a celebration, not an
   admin tool.

   Palette:
     • pink   — the hero. Primary actions, key numbers, active states, "you did this".
     • ice    — electric blue. The second half of the duotone: accents, trim, secondary glow.
     • black  — a cool near-black base, so pink and blue read as neon against it.
     • white  — crisp type.
*/

:root {
  /* Cool near-black base — lets the neons pop the way they do on the jersey. */
  --bg: #100E16;
  --surface: #191622;
  --surface-2: #221E2E;
  --line: #2C2740;
  --line-soft: #241F33;
  --ink: #F4F1FA;
  --ink-soft: #A79FBC;
  --ink-faint: #6C6482;
  --ok: #4FD08B;
  --ok-bg: #113126;
  --warn: #E0B25A;
  --warn-bg: #2A2415;
  --danger: #FF5B7F;
  --danger-bg: #2E1522;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 34px -18px rgba(0,0,0,.8);
  --headbar: #140F1E;

  /* HERO — hot pink (the Vice / Bret Hart pink). "--spot" keeps its name so every existing
     use becomes pink automatically; it's just no longer amber. */
  --spot: #FF2E93;
  --spot-deep: #FF63B0;
  --spot-soft: rgba(255,46,147,.14);
  --spot-line: rgba(255,46,147,.42);

  /* ACCENT — electric light blue (the Vice "MIAMI" script blue). */
  --ice: #29C6F0;
  --ice-deep: #62D8F7;
  --ice-soft: rgba(41,198,240,.14);
  --ice-line: rgba(41,198,240,.42);
  --blue: #29C6F0;

  --accent: #F4F1FA;
  --accent-ink: #14101C;
  --accent-deep: #FFFFFF;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* A condensed, sporty display face for the big celebratory numbers. */
  --display: "Arial Narrow", "Helvetica Neue", var(--font);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(72px + var(--safe-b)); }

/* The Vice sky: a pink glow bleeding into an electric-blue one, washing down from the top.
   This is the whole mood in one element — it sits behind everything and never moves. */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(90% 45% at 18% -8%, rgba(255,46,147,.16) 0%, rgba(255,46,147,.04) 40%, transparent 66%),
    radial-gradient(90% 45% at 88% -6%, rgba(41,198,240,.15) 0%, rgba(41,198,240,.04) 40%, transparent 66%),
    radial-gradient(120% 40% at 50% 0%, rgba(255,255,255,.025) 0%, transparent 60%);
}
#app { position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
p { margin: 0; line-height: 1.55; }
a { color: inherit; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23,21,26,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: calc(10px + var(--safe-t)) 16px 10px;
}
.topbar-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.brand { font-size: 17px; font-weight: 680; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
.brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--spot), var(--ice));
  box-shadow: 0 0 12px 2px rgba(255,46,147,.5), 0 0 14px 3px rgba(41,198,240,.35);
}
.brand small { color: var(--ink-faint); font-weight: 500; letter-spacing: 0; font-size: 12px; }

/* ── Bottom navigation — thumb-first ─────────────────────────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(27,25,32,.94);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
.nav-in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); }
.nav button {
  background: none; border: 0; color: var(--ink-faint);
  padding: 10px 4px 12px; font: inherit; font-size: 10.5px; font-weight: 560;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; letter-spacing: .02em; position: relative;
}
.nav button svg { width: 21px; height: 21px; stroke-width: 1.6; }
.nav button.on { color: var(--spot); }
.nav button.on::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 0 0 3px 3px;
  background: var(--spot); box-shadow: 0 0 10px 1px rgba(255,46,147,.6);
}
.nav .badge {
  position: absolute; top: 6px; right: 50%; margin-right: -20px;
  background: var(--spot); color: #1A1712; font-size: 9px; font-weight: 800;
  border-radius: 9px; padding: 1px 5px; min-width: 15px;
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.card + .card { margin-top: 12px; }

/* ── Stat tiles ──────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.stat .n {
  font-size: 30px; font-weight: 680; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.stat .k { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; letter-spacing: .01em; }
.stat.hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255,46,147,.16), rgba(41,198,240,.10) 60%, transparent);
  border-color: var(--spot-line);
}
.stat.hero .n {
  font-size: 46px;
  background: linear-gradient(100deg, var(--spot-deep), var(--ice-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat.hero .k { color: var(--ink-soft); font-size: 12.5px; }
.stat .note { font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.4; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 15px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.975); }
/* An inline SVG has no intrinsic size — without this it collapses to nothing inside a button. */
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--spot); border-color: var(--spot); color: #1A1712; }
.btn-primary:hover { background: var(--spot-deep); border-color: var(--spot-deep); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--spot-soft); border-color: var(--spot-line); color: var(--spot); }
.btn-danger { background: transparent; border-color: rgba(226,114,127,.4); color: var(--danger); }
.btn-sm { padding: 7px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
input, select, textarea {
  font: inherit; font-size: 16px;             /* 16px stops iOS zooming on focus */
  width: 100%; padding: 12px 13px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
input:focus, select, textarea:focus { outline: none; border-color: var(--spot-line); box-shadow: 0 0 0 3px var(--spot-soft); }
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 560; }
.field + .field { margin-top: 13px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%23A39A8C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 13px;
  padding-right: 32px;
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.search-row { position: relative; display: flex; align-items: center; }
.search-row input { padding-left: 38px; padding-right: 36px; }
.search-ico {
  position: absolute; left: 12px; display: flex; color: var(--ink-faint); pointer-events: none;
}
.search-ico svg { width: 17px; height: 17px; stroke-width: 1.7; fill: none; stroke: currentColor; }
.search-x {
  position: absolute; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-soft); font-size: 15px; cursor: pointer;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: 12.5px; font-weight: 560; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--spot-soft); border-color: var(--spot-line); color: var(--spot); }

/* ── Pills / tags ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 620; padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-soft); letter-spacing: .02em;
}
.pill.spot { background: var(--spot-soft); color: var(--spot); }
.pill.ice { background: var(--ice-soft); color: var(--ice-deep); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }

/* ── Gig card — ticket-stub inspired ─────────────────────────────────────── */
/* The perforation on the left edge is the only decorative flourish in the product.
   It reads as a programme stub without a single stock photo or microphone icon. */
.gig {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 14px 14px 22px;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s ease, transform .06s ease;
}
.gig:active { transform: scale(.99); }
.gig:hover { border-color: var(--spot-line); }
.gig::before {
  content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(var(--line-soft) 55%, transparent 0);
  background-size: 2px 7px;
}
.gig.fav::before { background-image: linear-gradient(var(--spot) 55%, transparent 0); opacity: .75; }
.gig-date {
  font-size: 10.5px; font-weight: 680; color: var(--spot);
  letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.gig-title { font-size: 15.5px; font-weight: 620; margin: 3px 0 2px; letter-spacing: -0.015em; }
.gig-where { font-size: 12.5px; color: var(--ink-soft); }
.gig-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.gig-tix {
  margin-left: auto; font-size: 13px; font-weight: 680;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.gig-tix small { font-size: 10px; color: var(--ink-faint); font-weight: 500; }
.gig-tix.none { color: var(--ink-faint); font-weight: 500; font-size: 11.5px; }

/* ── Section headers ─────────────────────────────────────────────────────── */
.sec { margin: 22px 0 10px; display: flex; align-items: baseline; gap: 9px; }
.sec h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 650; }
.sec .rule { flex: 1; height: 1px; background: var(--line); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-soft); }
.empty h3 { font-size: 16px; color: var(--ink); margin-bottom: 7px; }
.empty p { font-size: 13.5px; max-width: 300px; margin: 0 auto; }

/* ── Map ─────────────────────────────────────────────────────────────────── */
#map { height: 62vh; min-height: 340px; border-radius: var(--radius); border: 1px solid var(--line); background: #eceafc; overflow: hidden; }
/* A light, bright basemap (CARTO Voyager / Google light style) — no invert filter. */
.leaflet-container { background: #eceafc !important; font-family: var(--font) !important; }
.teardrop { background: none !important; border: 0 !important; }
.teardrop svg { display: block; }
/* Google Maps info window — keep it light and legible against the light map. */
.gm-style .gm-style-iw-c { border-radius: 12px !important; padding: 12px !important; }
.gm-style-iw-d { overflow: hidden !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--ink); border-radius: 10px; }
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; }
.leaflet-control-attribution { background: rgba(23,21,26,.8) !important; color: var(--ink-faint) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--ink-soft) !important; }
.leaflet-bar a { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.pin {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 750; color: #fff; font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 35% 28%, #FF9CCB, var(--spot) 70%);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 0 0 5px rgba(255,46,147,.16), 0 0 18px 2px rgba(255,46,147,.4), 0 4px 12px rgba(0,0,0,.6);
  transition: transform .12s ease;
}
.pin:hover { transform: scale(1.08); }
.leaflet-popup-content-wrapper { box-shadow: 0 10px 30px rgba(0,0,0,.6) !important; }

/* ── Interactive journal — "rate the night" ──────────────────────────────── */
.jcard { padding: 6px 16px 16px; }
.jblock { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.jblock:last-of-type { border-bottom: 0; }
.jblock-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 750;
  color: var(--ink-soft); margin-bottom: 12px;
}

/* Stars */
.stars { display: inline-flex; gap: 6px; }
.stars.pop .star.on { animation: star-pop .32s ease; }
.star {
  background: none; border: 0; cursor: pointer; padding: 2px;
  font-size: 34px; line-height: 1; color: var(--line);
  transition: color .15s ease, transform .1s ease;
  -webkit-text-stroke: 0;
}
.star.on { color: var(--spot); text-shadow: 0 0 14px rgba(255,46,147,.5); }
.star:active { transform: scale(.88); }
@keyframes star-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Sliders */
.slide { margin-bottom: 18px; }
.slide:last-child { margin-bottom: 0; }
.slide-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.slide-label { font-size: 14px; font-weight: 600; }
.slide-val {
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--spot-deep); min-width: 26px; text-align: right;
}
.slide-val.unset { color: var(--ink-faint); }
.slide-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ink-faint); }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; padding: 0; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background-color: var(--surface-2);
  background-image: var(--grad); background-repeat: no-repeat; background-size: var(--pct, 50%) 100%;
  box-shadow: none;
}
input[type=range]:focus { box-shadow: none; outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--spot); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--spot);
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* Vibe chips */
.vibes { display: flex; flex-wrap: wrap; gap: 8px; }
.vibe {
  font: inherit; font-size: 13px; font-weight: 560; cursor: pointer;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.vibe.on {
  background: var(--spot-soft); border-color: var(--spot); color: var(--spot-deep); font-weight: 700;
}
.vibe:active { transform: scale(.94); }
.vibe.pop { animation: star-pop .3s ease; }

/* Prompts */
.jprompt + .jprompt { margin-top: 12px; }
.jprompt label { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 560; }
#jprompts.collapsed .jprompt:not(:first-child) { display: none; }

/* ── Media gallery ───────────────────────────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.media-tile {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 0; cursor: pointer; aspect-ratio: 1; display: block;
}
.media-tile.audio { aspect-ratio: auto; padding: 12px; cursor: default; }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile.audio audio { height: 40px; }
.media-del {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10,9,12,.72); color: #fff; font-size: 16px; line-height: 24px;
  display: flex; align-items: center; justify-content: center; border: 0;
}
.media-tile.audio .media-del { position: static; width: auto; height: auto; }

/* ── Milestone Awards ─────────────────────────────────────────────────────── */
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 14px 15px; position: relative; overflow: hidden;
}
.badge.earned {
  border-color: var(--spot-line);
  box-shadow: 0 0 0 1px rgba(255,46,147,.12), 0 14px 30px -18px rgba(255,46,147,.5);
}
.badge.locked { opacity: .62; }

.medal {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 12px;
}
.earned .medal {
  background: radial-gradient(circle at 35% 30%, var(--spot-deep), var(--spot) 60%, #A3115F);
  box-shadow: 0 0 16px rgba(255,46,147,.6), inset 0 2px 6px rgba(255,255,255,.35);
}
.earned .medal.ice {
  background: radial-gradient(circle at 35% 30%, var(--ice-deep), var(--ice) 60%, #12708C);
  box-shadow: 0 0 16px rgba(41,198,240,.6), inset 0 2px 6px rgba(255,255,255,.35);
}
.locked .medal { background: var(--surface-2); border: 1px solid var(--line); filter: grayscale(.4); }

.badge h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.badge .crit { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.badge .when {
  margin-top: 10px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ok); font-weight: 700;
}

/* progress ring for a locked badge */
.prog { margin-top: 11px; display: flex; align-items: center; gap: 9px; }
.ring {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ice) var(--p, 0deg), rgba(255,255,255,.09) 0);
  display: flex; align-items: center; justify-content: center;
}
.ring::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); }
.prog .txt { font-size: 11px; color: var(--ink-soft); line-height: 1.35; }
.prog .txt b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Wrapped — a tap-through story ────────────────────────────────────────── */
/* Full-bleed 9:16 story frames, Spotify-Wrapped style: progress bars along the top, tap
   left/right (or swipe, or arrow keys) to move, one stat per card. Sized on a story frame
   so a card can become a shareable image later without redesigning it. */

.wstage {
  position: relative; width: 100%; aspect-ratio: 9/16; max-height: 68vh;
  border-radius: 22px; overflow: hidden; background: var(--bg);
  box-shadow: 0 24px 70px -30px rgba(255,46,147,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
}

.wsl {
  position: absolute; inset: 0; padding: 46px 24px 66px;
  display: none; flex-direction: column; color: var(--ink);
  background:
    radial-gradient(90% 45% at 16% -6%, rgba(255,46,147,.20), transparent 60%),
    radial-gradient(90% 45% at 88% 104%, rgba(41,198,240,.18), transparent 60%),
    var(--bg);
}
.wsl.on { display: flex; animation: wfade .38s ease; }
@keyframes wfade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

/* progress bars */
.wbars { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 6; display: flex; gap: 5px; }
.wbar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.wbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--spot), var(--ice)); transition: width .35s ease; }
.wbar.done > i { width: 100%; }

.wkick { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; }
.wkick b { background: linear-gradient(90deg, var(--spot), var(--ice)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wcen { margin: auto 0; text-align: left; }
.wbig { font-family: var(--display); font-weight: 700; letter-spacing: .5px; line-height: .92; text-transform: uppercase; }

.whuge {
  font-family: var(--display); font-size: clamp(72px, 24vw, 120px); font-weight: 700;
  line-height: .82; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--spot));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(255,46,147,.25);
}
.whuge.ice { background: linear-gradient(180deg, #fff, var(--ice)); -webkit-background-clip: text; background-clip: text; }
.wlab { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; }
.wnote { font-size: 12px; color: var(--ink-faint); margin-top: 14px; max-width: 280px; line-height: 1.5; }

.wvenue { font-family: var(--display); font-size: clamp(34px, 12vw, 52px); font-weight: 700; line-height: .9; text-transform: uppercase; margin-top: 6px; }
.wcity { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.wpill { display: inline-block; margin-top: 16px; padding: 8px 14px; border: 1px solid var(--spot); border-radius: 999px; color: var(--spot); font-size: 13px; font-weight: 700; }

/* brand mini-bars */
.brow { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; }
.brow .name { width: 96px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .track { flex: 1; height: 9px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.brow .fill { height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--spot), var(--spot-deep)); }
.brow .v { width: 26px; text-align: right; color: var(--ink-soft); font-weight: 700; }

/* records grid */
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.wcard { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.wcard .n { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wcard .n.ice { color: var(--ice); }
.wcard .t { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

.wfoot { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 6; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.whandle { font-size: 12px; font-weight: 700; }
.whandle .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--spot), var(--ice)); margin-right: 6px; vertical-align: middle; }
.wmade { font-size: 9.5px; letter-spacing: 2px; color: var(--ink-faint); text-transform: uppercase; }

/* the map slide's canvas — same renderer as the shareable poster */
.wmapcanvas {
  width: 100%; flex: 1; min-height: 0; margin-top: 14px;
  border-radius: 16px; background: #0D0B12; display: block;
}

/* tap zones */
.wtap { position: absolute; top: 0; bottom: 0; z-index: 5; border: 0; background: transparent; cursor: pointer; padding: 0; }
.wtap.l { left: 0; width: 35%; }
.wtap.r { right: 0; width: 65%; }


/* ── Sheet / modal ───────────────────────────────────────────────────────── */
.sheet-bg {
  position: fixed; inset: 0; z-index: 50; background: rgba(10,9,12,.72);
  backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--surface); width: 100%; max-width: 720px;
  border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding: 18px 16px calc(20px + var(--safe-b));
  max-height: 88vh; overflow-y: auto;
  animation: up .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 34px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b)); z-index: 60;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 16px; font-size: 13px; font-weight: 560;
  box-shadow: var(--shadow); animation: pop .2s ease; max-width: calc(100% - 32px);
}
.toast.good { border-color: var(--spot-line); color: var(--spot); }
.toast.bad { border-color: rgba(226,114,127,.4); color: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--ink-soft); font-size: 13px; }
.faint { color: var(--ink-faint); font-size: 11.5px; }
.mt { margin-top: 12px; } .mt2 { margin-top: 20px; }
.sp { height: 8px; }
.hr { height: 1px; background: var(--line); margin: 15px 0; }
.grow { flex: 1; }
.center { text-align: center; }
.spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--spot); border-radius: 50%; animation: sp .7s linear infinite; margin: 30px auto; }
@keyframes sp { to { transform: rotate(360deg); } }

/* The refresh control turns while it's checking the calendar. */
.spinning svg { animation: sp .8s linear infinite; }

/* A milestone landing is worth a moment — but only a moment (brief §13). */
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,46,147,0); } 50% { box-shadow: 0 0 0 7px rgba(255,46,147,.14); } }
.celebrate { animation: glow 1.5s ease 2; }

@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat.hero { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* The Wrapped cards start hidden for their entrance animation — with animations off they
     must be shown outright, or the whole screen would be blank. */
  /* Story slides show/hide with display, not opacity, so they're safe with animation off.
     The progress bars need their width restored though, since that's a transition. */
  .wbar.done > i { width: 100% !important; }
}