/* ============================================================
   APPLE 50 — Origin Trail
   Glow design system for Meta Ray-Ban Display
   600x600 viewport, additive waveguide (pure black = transparent)
   D-pad navigation, high-contrast luminous elements
   ============================================================ */

:root{
  --glow: #74c7ff;            /* primary luminous hue (tweakable) */
  --glow-soft: color-mix(in oklch, var(--glow) 55%, white);
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,.62);
  --ink-faint: rgba(255,255,255,.34);
  --hair: rgba(255,255,255,.16);
  --warn: #ffb273;
  --gi: 1;                    /* glow intensity multiplier (tweakable) */
  --spd: 1;                   /* animation speed multiplier (tweakable) */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- responsive root ----------
   The app is authored 600px wide. We scale by --fit to fill the viewport WIDTH,
   and the design-space height grows to --app-h so the screen fills the FULL
   viewport height (the screens' flex layouts expand to use it). On the glasses
   (600x600) --fit is 1 and --app-h is 600, so it stays exactly 1:1. */
html,body{ width:100%; height:100%; }
body{
  background:#000;
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:fixed; inset:0;
  width:100vw; height:100dvh;
}
#app{
  position:absolute; top:50%; left:50%;
  width:var(--app-w, 600px); height:var(--app-h, 600px); overflow:hidden;
  transform:translate(-50%, -50%) scale(var(--fit, 1));
  transform-origin:center center;
}

/* ============================================================
   SCREEN — fills the 600x600. App root.
   ============================================================ */
.screen{
  position:absolute; inset:0;
  padding:38px 40px 34px;
  display:flex; flex-direction:column;
  animation:screenIn calc(.4s/var(--spd)) cubic-bezier(.2,.8,.2,1) both;
}
@keyframes screenIn{ from{ transform:scale(.99); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .screen{ animation:none; } }

/* ambient bloom anchored top of most screens */
.bloom{
  position:absolute; pointer-events:none; z-index:0;
  background:radial-gradient(circle at center,
    color-mix(in oklch, var(--glow) 38%, transparent) 0%,
    transparent 68%);
  filter:blur(2px);
  opacity:calc(.9 * var(--gi));
}

/* ---------- type helpers ---------- */
.label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint);
}
.glow-text{ text-shadow:0 0 calc(10px*var(--gi)) var(--glow), 0 0 calc(26px*var(--gi)) color-mix(in oklch, var(--glow) 70%, transparent); }
.title{ font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1.02; }
.kicker{ font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--glow-soft); }

/* ---------- focus system ---------- */
.focusable{ outline:none; cursor:pointer; position:relative; }
.focusable.is-focused{ }

/* ---------- HOME ---------- */
.home-top{ display:flex; align-items:flex-start; justify-content:space-between; z-index:2; }
.progress-ring{ position:relative; width:78px; height:78px; flex:none; }
.progress-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.progress-ring .pr-track{ stroke:var(--hair); fill:none; }
.progress-ring .pr-val{ stroke:var(--glow); fill:none; stroke-linecap:round;
  filter:drop-shadow(0 0 calc(5px*var(--gi)) var(--glow)); transition:stroke-dashoffset calc(.7s/var(--spd)) ease; }
.progress-ring .pr-num{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.progress-ring .pr-num b{ font-size:24px; font-weight:600; line-height:1; }
.progress-ring .pr-num span{ font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; color:var(--ink-faint); margin-top:3px; }

.site-list{ margin-top:8px; display:flex; flex-direction:column; gap:1px; flex:1; min-height:0; z-index:2; overflow-y:auto; scrollbar-width:none; }
.site-list::-webkit-scrollbar{ display:none; }
.home-subhead{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; z-index:2; }
.home-subhead .label{ font-size:10px; }
.site-dist{ font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); text-align:right; flex:none; min-width:48px; }
.site-dist span{ font-size:9px; color:var(--ink-faint); margin-left:2px; letter-spacing:.04em; }
.site-row.done .site-dist{ color:var(--glow-soft); }
.site-row.is-focused .site-dist{ color:#fff; }
.site-row{
  display:flex; align-items:center; gap:16px;
  padding:9px 14px; border-radius:12px;
  border:1px solid transparent;
  transition:background calc(.2s/var(--spd)) ease, border-color calc(.2s/var(--spd)) ease;
}
.site-row + .site-row{ border-top:1px solid var(--hair); border-radius:13px; }
.site-row.is-focused{
  background:linear-gradient(90deg, color-mix(in oklch, var(--glow) 16%, transparent), transparent 90%);
  border-color:color-mix(in oklch, var(--glow) 50%, transparent);
  box-shadow:0 0 calc(18px*var(--gi)) -4px color-mix(in oklch, var(--glow) 70%, transparent),
             inset 0 0 calc(20px*var(--gi)) -10px color-mix(in oklch, var(--glow) 80%, transparent);
}
.site-row .idx{ flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.site-row .idx .patch-svg{ display:block; }
.site-info{ flex:1; min-width:0; }
.site-info .nm{ font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-info .mt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-faint); margin-top:2px; }
.site-row.done .site-info .nm{ color:#fff; }
.site-row:not(.done) .site-info .nm{ color:var(--ink-dim); }
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot.locked{ border:1.5px solid var(--ink-faint); }
.dot.ready{ background:var(--glow); box-shadow:0 0 calc(10px*var(--gi)) var(--glow); animation:pulse calc(1.8s/var(--spd)) ease-in-out infinite; }
.dot.done{ background:var(--glow); box-shadow:0 0 calc(9px*var(--gi)) var(--glow); }
.dot.bonus{ background:var(--warn); box-shadow:0 0 calc(9px*var(--gi)) var(--warn); }

/* bonus / secret-location rows in the home list — amber, never patch-earning */
.list-divider{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in oklch, var(--warn) 80%, white); margin:14px 4px 4px; opacity:.85; }
.site-row.bonus .site-info .nm{ color:#fff; }
.site-row.bonus .site-info .mt{ color:color-mix(in oklch, var(--warn) 70%, white); }
.site-row.bonus .site-dist{ color:color-mix(in oklch, var(--warn) 60%, white); }
.site-row.bonus.is-focused{
  background:linear-gradient(90deg, color-mix(in oklch, var(--warn) 16%, transparent), transparent 90%);
  border-color:color-mix(in oklch, var(--warn) 50%, transparent);
  box-shadow:0 0 calc(18px*var(--gi)) -4px color-mix(in oklch, var(--warn) 65%, transparent); }
.bonus-glyph{ color:var(--warn); font-size:18px; line-height:1;
  text-shadow:0 0 calc(10px*var(--gi)) color-mix(in oklch, var(--warn) 70%, transparent); }

@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.82);} }

.home-foot{ display:flex; gap:10px; margin-top:14px; z-index:2; }

/* ---------- generic pill button ---------- */
.btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 16px; border-radius:13px;
  border:1px solid var(--hair);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); background:rgba(255,255,255,.02);
  transition:all calc(.2s/var(--spd)) ease;
}
.btn .gi{ width:16px; height:16px; }
.btn.is-focused{
  color:#001018; background:var(--glow); border-color:var(--glow);
  box-shadow:0 3px calc(15px*var(--gi)) -5px var(--glow);
  text-shadow:none;
}
.btn.is-focused .gi *{ stroke:#001018 !important; }
.btn.primary{ color:var(--glow); border-color:color-mix(in oklch, var(--glow) 45%, transparent); }
.btn.primary.is-focused{ color:#001018; background:var(--glow); }

/* ---------- RADAR ---------- */
.radar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; z-index:2; }
.radar{ position:relative; width:300px; height:300px; }
.radar .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--hair); }
.radar .ring.r2{ inset:46px; }
.radar .ring.r3{ inset:92px; }
.radar .sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, color-mix(in oklch, var(--glow) 30%, transparent) 38deg, transparent 60deg);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 31%);
          mask:radial-gradient(circle, transparent 30%, #000 31%);
  animation:sweep calc(3.4s/var(--spd)) linear infinite; opacity:calc(.85*var(--gi)); }
@keyframes sweep{ to{ transform:rotate(360deg);} }
.radar .you{ position:absolute; left:50%; top:50%; width:12px; height:12px; transform:translate(-50%,-50%);
  border-radius:50%; background:#fff; box-shadow:0 0 calc(12px*var(--gi)) #fff; }
.radar .target{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  transition:transform calc(.6s/var(--spd)) cubic-bezier(.2,.8,.2,1); }
.radar .target .blip{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.radar .heading-needle{ position:absolute; left:50%; top:50%; width:2px; height:150px; transform-origin:bottom center;
  background:linear-gradient(to top, transparent, var(--glow)); margin-left:-1px; margin-top:-150px;
  filter:drop-shadow(0 0 calc(5px*var(--gi)) var(--glow)); transition:transform calc(.4s/var(--spd)) ease; }
.radar-read{ text-align:center; margin-top:26px; }
.radar-read .dist{ font-size:42px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.radar-read .dist small{ font-family:var(--font-mono); font-size:15px; font-weight:400; color:var(--ink-dim); letter-spacing:.05em; margin-left:5px; }
.radar-read .sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:9px; }
.radar-name{ position:absolute; top:38px; left:0; right:0; text-align:center; z-index:3; }

/* ---------- ARRIVAL / CLAIM ---------- */
.claim{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; text-align:center; }
.claim .patch-stage{ position:relative; width:230px; height:230px; display:flex; align-items:center; justify-content:center; }
.hold-ring{ position:absolute; inset:0; }
.hold-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hold-ring .hr-track{ fill:none; stroke:var(--hair); }
.hold-ring .hr-val{ fill:none; stroke:var(--glow); stroke-linecap:round;
  filter:drop-shadow(0 0 calc(8px*var(--gi)) var(--glow)); transition:stroke-dashoffset .08s linear; }
.claim .prompt{ margin-top:26px; }
.claim .prompt .big{ font-size:18px; font-weight:500; }
.claim .prompt .sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px; }
.pinch-glyph{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--glow-soft); }

/* ---------- PATCH DETAIL ---------- */
.detail{ z-index:2; display:flex; flex-direction:column; height:100%; }
.dt-hero{ position:relative; margin-top:12px; height:142px; border-radius:16px; overflow:hidden;
  display:flex; align-items:flex-end;
  box-shadow:0 0 0 1px var(--hair), 0 0 26px -10px color-mix(in oklch, var(--glow) 70%, transparent); }
.dt-hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.74) saturate(1.06) contrast(1.02); }
/* no photo: drop the image-placeholder banner box entirely — the patch + meta
   render as a plain, un-boxed header (no frame, dashed border, or panel fill). */
.dt-hero.no-photo{ background:none; box-shadow:none; height:auto; border-radius:0; overflow:visible; }
.dt-hero.no-photo .dt-hero-content{ padding:2px 0; text-shadow:none; }
/* dissolve the photo into the black UI: fade bottom + sides + glow inset */
.dt-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.32) 46%, rgba(0,0,0,.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 40px -6px color-mix(in oklch, var(--glow) 38%, transparent); }
.dt-hero.no-photo::after{ background:none; }
.dt-hero-content{ position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  padding:14px 16px; pointer-events:none; width:100%;
  text-shadow:0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.dt-chip{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); padding:4px 10px; border:1px solid var(--hair); border-radius:20px; }
.dt-chip.done{ color:var(--glow); border-color:color-mix(in oklch, var(--glow) 50%, transparent);
  text-shadow:0 0 calc(8px*var(--gi)) var(--glow); }
.dt-meta{ min-width:0; }
.dt-meta .yr{ font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; color:var(--glow-soft); }
.dt-meta .nm{ font-size:23px; font-weight:600; letter-spacing:-.01em; margin-top:3px; line-height:1.04; }
.dt-meta .ad{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-dim); margin-top:5px; }

.dt-scroll-wrap{ position:relative; flex:1; min-height:0; margin-top:14px; }
.dt-scroll{
  height:100%; overflow-y:auto; padding:4px 14px 8px 14px;
  border-left:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
  scrollbar-width:none;
}
.dt-scroll::-webkit-scrollbar{ display:none; }
.dt-scroll.is-focused{
  border-left-color:color-mix(in oklch, var(--glow) 60%, transparent);
  box-shadow:-10px 0 calc(22px*var(--gi)) -16px var(--glow);
}
.dt-scroll .lede{ font-size:15px; font-weight:600; color:#fff; line-height:1.4; text-wrap:pretty; }
.dt-scroll .hpar{ font-size:13.5px; line-height:1.55; color:var(--ink-dim); margin-top:11px; text-wrap:pretty; }
.visit-card{ display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border-radius:12px; margin-bottom:14px;
  border:1px solid color-mix(in oklch, var(--glow) 38%, transparent);
  background:linear-gradient(90deg, color-mix(in oklch, var(--glow) 11%, transparent), transparent 88%); }
.visit-card.warn{ border-color:color-mix(in oklch, var(--warn) 48%, transparent);
  background:linear-gradient(90deg, color-mix(in oklch, var(--warn) 13%, transparent), transparent 88%); }
.visit-ic{ flex:none; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--glow); border:1px solid color-mix(in oklch, var(--glow) 40%, transparent);
  box-shadow:0 0 calc(10px*var(--gi)) -3px var(--glow); }
.visit-card.warn .visit-ic{ color:var(--warn); border-color:color-mix(in oklch, var(--warn) 45%, transparent);
  box-shadow:0 0 calc(10px*var(--gi)) -3px var(--warn); }
.visit-body{ min-width:0; flex:1; }
.visit-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--glow-soft); }
.visit-card.warn .visit-label{ color:var(--warn); }
.visit-line{ font-size:12.5px; line-height:1.45; color:var(--ink-dim); margin-top:5px; text-wrap:pretty; }
.visit-line:first-of-type{ color:#fff; }

/* Secret location — amber accent (var(--warn)) sets it apart from the blue glow.
   The parent site's detail only shows a compact teaser that opens SecretScreen. */
/* Secret "revealed" note on the parent site's detail. On the glasses (D-pad) it's
   a passive note — the secret is reached from the home bonus row. On MOBILE it's
   tappable (pointer-events enabled below) so touch users can open it directly. */
.secret-teaser{ display:flex; flex-direction:column; gap:3px; width:100%; cursor:default;
  pointer-events:none; padding:10px 13px; border-radius:11px; margin-bottom:14px;
  border:1px solid color-mix(in oklch, var(--warn) 45%, transparent);
  background:linear-gradient(90deg, color-mix(in oklch, var(--warn) 12%, transparent), transparent 92%); }
.secret-teaser.reveal{ animation:fadeUp calc(.6s/var(--spd)) ease both; }
.st-head{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--warn); }
.st-name{ font-size:15px; font-weight:600; color:#fff; margin-top:1px; }
.st-go{ display:none; color:var(--warn); }
.st-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-dim); }
.st-hint-mobile{ display:none; }
/* Mobile only: make the teaser a tappable link into the SecretScreen. */
@media (max-width: 599px) {
  .secret-teaser{ pointer-events:auto; cursor:pointer; }
  .secret-teaser:active{ border-color:color-mix(in oklch, var(--warn) 75%, transparent);
    background:linear-gradient(90deg, color-mix(in oklch, var(--warn) 20%, transparent), transparent 92%); }
  .st-go{ display:inline; }
  .st-hint-desktop{ display:none; }
  .st-hint-mobile{ display:inline; }
}

/* SecretScreen — the dedicated bonus-location screen */
.sx-chip{ color:var(--warn); border-color:color-mix(in oklch, var(--warn) 45%, transparent); }
.sx-hero{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.sx-glyph{ flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--warn); border:1px solid color-mix(in oklch, var(--warn) 45%, transparent);
  background:color-mix(in oklch, var(--warn) 10%, transparent); box-shadow:0 0 calc(20px*var(--gi)) -6px var(--warn); }
.sx-name{ font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.05; color:#fff; }
.sx-place{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); margin-top:4px; }
.sx-unlock{ font-family:var(--font-mono); font-size:10px; line-height:1.5; letter-spacing:.04em;
  color:var(--ink-faint); padding-top:10px; margin-bottom:12px; }
.secret-flash{ display:inline-flex; align-items:center; gap:6px; margin-top:13px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--warn);
  text-shadow:0 0 calc(11px*var(--gi)) color-mix(in oklch, var(--warn) 70%, transparent);
  animation:fadeUp calc(.7s/var(--spd)) ease both; }
.detail .quote{ border-left:2px solid color-mix(in oklch, var(--glow) 60%, transparent);
  padding-left:13px; margin-top:16px; font-size:14px; font-style:italic; color:#fff; line-height:1.4; }
.detail .quote cite{ display:block; font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; color:var(--ink-faint); margin-top:7px; }
.src{ margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); }
.src-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--glow-soft); }
.src-item{ font-size:12.5px; color:var(--ink-dim); margin-top:6px; }
.src-note{ font-family:var(--font-mono); font-size:9.5px; line-height:1.5; color:var(--ink-faint); margin-top:12px; }
.scroll-cue{ position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  color:var(--glow); filter:drop-shadow(0 0 calc(6px*var(--gi)) var(--glow));
  animation:cueBob calc(1.6s/var(--spd)) ease-in-out infinite; transition:opacity .3s ease; }
.scroll-cue.hidden{ opacity:0; }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,4px);} }
.detail-foot{ display:flex; gap:10px; margin-top:12px; position:relative; }
.detail-foot::before{ content:""; position:absolute; left:-44px; right:-44px; top:-22px; bottom:-40px;
  background:linear-gradient(to top, #000 55%, rgba(0,0,0,.82) 78%, transparent); z-index:0; pointer-events:none; }
.detail-foot .btn{ z-index:1; }

/* ---------- PASSPORT / COLLECTION ---------- */
.passport{ z-index:2; display:flex; flex-direction:column; height:100%; }
.pp-scroll{ flex:1; min-height:0; margin-top:10px; overflow-y:auto; scrollbar-width:none; }
.pp-scroll::-webkit-scrollbar{ display:none; }
.pp-sec{ margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--glow-soft); }
.pp-sec:first-child{ margin-top:4px; }
.pp-sec.wwdc{ color:#ffd23f; }
.passport .grid{ margin-top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pcard{ aspect-ratio:1; border-radius:16px; border:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:all calc(.2s/var(--spd)) ease; padding:6px; }
.pcard.is-focused{ border-color:color-mix(in oklch, var(--glow) 55%, transparent);
  box-shadow:0 0 calc(22px*var(--gi)) -6px color-mix(in oklch, var(--glow) 75%, transparent); }
.pcard .pc-cap{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; line-height:1.3; }
.pcard.done .pc-cap{ color:var(--ink-dim); }
/* WWDC yearly patches — gold accent, distinct from the blue trail cards */
.pcard.wwdc.done{ border-color:color-mix(in oklch, #ffd23f 42%, transparent); }
.pcard.wwdc.live{ border-color:color-mix(in oklch, #ffd23f 50%, transparent);
  animation:pulse calc(2.4s/var(--spd)) ease-in-out infinite; }
.pcard.wwdc.is-focused{ border-color:color-mix(in oklch, #ffd23f 62%, transparent);
  box-shadow:0 0 calc(22px*var(--gi)) -6px color-mix(in oklch, #ffd23f 72%, transparent); }
.pcard.wwdc.done .pc-cap{ color:#ffd23f; }

/* ---------- COMPLETION ---------- */
.complete{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:2; gap:0; }
.complete .seal{ position:relative; width:200px; height:200px; display:flex; align-items:center; justify-content:center; }
.complete .ttl{ font-size:27px; font-weight:600; letter-spacing:-.01em; }
.complete .msg{ font-size:13px; color:var(--ink-dim); margin-top:10px; line-height:1.5; max-width:360px; }
/* earned patches shown on the reward screen */
.cp-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 20px; margin-top:20px; max-width:440px; }
.cp-patch{ display:flex; flex-direction:column; align-items:center; gap:6px; width:62px; }
.cp-cap{ font-family:var(--font-mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); line-height:1.25; text-align:center; }
.complete .reward{ margin-top:22px; padding:14px 22px; border-radius:14px;
  border:1px solid color-mix(in oklch, var(--glow) 45%, transparent);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--glow);
  box-shadow:0 0 calc(30px*var(--gi)) -8px var(--glow); }
.complete .disclaimer{ margin-top:18px; max-width:360px; font-family:var(--font-mono);
  font-size:9.5px; line-height:1.5; letter-spacing:.04em; color:var(--ink-faint); }
/* small persistent non-affiliation note on the home screen */
.home-disclaimer{ margin-top:10px; text-align:center; font-family:var(--font-mono);
  font-size:8.5px; letter-spacing:.06em; color:var(--ink-faint); opacity:.8; z-index:2; }

/* ---------- top status row (shared) ---------- */
.statusbar{ display:flex; align-items:center; justify-content:space-between; z-index:3; }
.statusbar .label{ font-size:11px; }
.back-hint{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; color:var(--ink-faint);
  background:none; border:0; cursor:pointer; padding:5px 9px; margin:-5px -9px; border-radius:9px;
  transition:color calc(.18s/var(--spd)) ease, background calc(.18s/var(--spd)) ease; }
.back-hint:hover{ color:var(--glow-soft); background:rgba(255,255,255,.05); }
.back-hint svg{ transition:transform calc(.18s/var(--spd)) ease; }
.back-hint:hover svg{ transform:translateX(-2px); }

/* patch svg glow */
.patch-svg{ filter:drop-shadow(0 0 calc(7px*var(--gi)) color-mix(in oklch, var(--glow) 80%, transparent)); }
.patch-svg .stroke{ stroke:var(--glow); fill:none; }
.patch-svg .ink{ fill:#fff; }
.patch-svg .dim{ stroke:var(--ink-faint); fill:none; }
.patch-svg.locked{ filter:none; }
.patch-svg.locked .glyph{ opacity:.4; }

.materialize{ animation:materialize calc(1.1s/var(--spd)) cubic-bezier(.2,.8,.2,1) both; }
@keyframes materialize{
  0%{ opacity:0; transform:scale(.6) rotate(-12deg); filter:blur(8px);}
  60%{ opacity:1; filter:blur(0);}
  100%{ opacity:1; transform:none;}
}
.fade-up{ animation:fadeUp calc(.6s/var(--spd)) ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce){
  .materialize,.fade-up,.dot.ready,.radar .sweep{ animation:none !important; }
}

/* ---------- WATCH BAR (in detail) ---------- */
.watch-bar{
  display:flex; align-items:center; gap:13px; width:100%;
  margin-top:12px; padding:11px 14px; border-radius:13px;
  border:1px solid color-mix(in oklch, var(--glow) 38%, transparent);
  background:linear-gradient(90deg, color-mix(in oklch, var(--glow) 12%, transparent), transparent 85%);
  text-align:left; transition:all calc(.2s/var(--spd)) ease;
}
.watch-bar.is-focused{
  border-color:var(--glow);
  box-shadow:0 0 calc(20px*var(--gi)) -5px var(--glow), inset 0 0 calc(20px*var(--gi)) -12px var(--glow);
}
.wb-play{ flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--glow); display:flex; align-items:center; justify-content:center;
  color:var(--glow); box-shadow:0 0 calc(10px*var(--gi)) -2px var(--glow); }
.wb-play svg{ margin-left:2px; }
.wb-text{ min-width:0; flex:1; }
.wb-title{ display:block; font-size:13px; font-weight:500; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-meta{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:var(--glow-soft); margin-top:3px; }

/* ---------- WATCH SCREEN ---------- */
.watch{ z-index:2; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; margin-top:16px;
  border-radius:14px; overflow:hidden; border:1px solid var(--hair);
  background:#0a0c10 center/cover no-repeat;
  box-shadow:0 0 calc(40px*var(--gi)) -16px var(--glow); }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-meta{ margin-top:16px; }
.vm-title{ font-size:17px; font-weight:600; line-height:1.25; text-wrap:pretty; }
.vm-sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-dim); margin-top:8px; }
.vm-src{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--glow-soft); margin-top:10px; }
.watch .detail-foot{ margin-top:auto; }
.watch .detail-foot::before{ display:none; }

/* Mobile video drawer — a bottom sheet that slides up and plays inline. */
.vd-overlay{ position:absolute; inset:0; z-index:1000; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.62); animation:vdFade calc(.25s/var(--spd)) ease both; }
.vd-sheet{ width:100%; max-height:92%; overflow-y:auto; scrollbar-width:none;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom)); background:#0a0d12;
  border-top-left-radius:20px; border-top-right-radius:20px;
  border-top:1px solid var(--hair); box-shadow:0 -18px 50px -12px #000;
  animation:vdUp calc(.32s/var(--spd)) cubic-bezier(.2,.8,.2,1) both; }
.vd-sheet::-webkit-scrollbar{ display:none; }
.vd-handle{ width:42px; height:4px; border-radius:3px; background:rgba(255,255,255,.28); margin:6px auto 4px; }
.vd-sheet .video-frame{ margin-top:10px; }
.vd-close{ width:100%; justify-content:center; margin-top:16px; }
@keyframes vdFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vdUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

/* ---------- MAP SCREEN ---------- */
.map{ z-index:2; }
.map-field{ position:relative; flex:none; margin-top:8px; }
.map-graticule{ position:absolute; inset:0; pointer-events:none; }
.map-path{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.map-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:0; background:none; border:0; cursor:pointer; }
.mn-dot{ width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ink-faint); font-family:var(--font-mono); font-size:8px; color:var(--ink-faint);
  transition:all calc(.18s/var(--spd)) ease; }
.map-node.done .mn-dot{ border-color:var(--glow); color:#001018; background:var(--glow);
  box-shadow:0 0 calc(11px*var(--gi)) var(--glow); }
.map-node.sel .mn-dot{ border-color:var(--glow); color:var(--glow);
  width:22px; height:22px; font-size:10px;
  box-shadow:0 0 calc(20px*var(--gi)) -2px var(--glow), inset 0 0 calc(12px*var(--gi)) -6px var(--glow); }
.map-node.sel.done .mn-dot{ color:#001018; }
.mn-label{ position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  color:#fff; opacity:0; transition:opacity calc(.18s/var(--spd)) ease; pointer-events:none;
  text-shadow:0 0 6px #000, 0 0 6px #000; }
.map-node.sel .mn-label{ opacity:1; }
.mn-d{ position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-mono); font-size:9px; letter-spacing:.02em;
  color:var(--glow-soft); pointer-events:none; text-shadow:0 0 5px #000, 0 0 5px #000;
  opacity:0; transition:opacity calc(.18s/var(--spd)) ease; }
.map-node.sel .mn-d{ opacity:1; }
.map-you{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.you-ping{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:1px solid var(--glow); animation:youping calc(2.4s/var(--spd)) ease-out infinite; }
@keyframes youping{ 0%{ transform:scale(.5); opacity:.9;} 100%{ transform:scale(3.2); opacity:0;} }
.you-dot{ position:absolute; left:50%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; background:#fff; box-shadow:0 0 calc(12px*var(--gi)) #fff, 0 0 0 2px #000; }
.you-lbl{ position:absolute; top:calc(50% + 11px); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; color:#fff; text-shadow:0 0 6px #000; }
/* secret pin — claimed sites only, amber, display-only (not a D-pad node) */
.map-secret{ position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; }
.ms-glyph{ width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#1a1205; background:var(--warn); border:1.5px solid var(--warn);
  box-shadow:0 0 calc(11px*var(--gi)) var(--warn), 0 0 0 2px #000; }
.ms-label{ position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.04em;
  color:var(--warn); text-shadow:0 0 5px #000, 0 0 5px #000; }
.map-compass{ position:absolute; top:2px; right:4px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; color:var(--ink-faint); display:flex; align-items:center; gap:4px; }
.map-compass b{ color:var(--glow); }
.map-read{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:8px; padding-top:12px; border-top:1px solid var(--hair); }
.map-read .mr-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.map-read .mr-name small{ display:block; font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:.1em; color:var(--ink-faint); margin-top:4px; text-transform:uppercase; }
.map-read .mr-dist{ text-align:right; flex:none; }
.map-read .mr-dist b{ font-size:26px; font-weight:600; letter-spacing:-.02em; }
.map-read .mr-dist b small{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--ink-dim); margin-left:4px; }
.map-read .mr-dist span{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  color:var(--glow-soft); margin-top:3px; }
.map-loc-tag{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); padding:3px 9px; border:1px solid var(--hair); border-radius:20px; }

/* ---------- WWDC BINGO ---------- */
.bingo, .leaderboard{ z-index:2; display:flex; flex-direction:column; height:100%; }
.bingo-lede{ margin-top:8px; font-size:13px; line-height:1.45; color:var(--ink-dim); }
/* Home footer Bingo button — only shown while the keynote bingo is live; the
   pulse "blinks" to signal it's live. */
.bingo-cta{ animation:pulse calc(2.4s/var(--spd)) ease-in-out infinite; }
.bingo-cta.is-focused{ animation:none; }

/* The card */
.bingo-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; flex:1; min-height:0; }
.bingo-grid::-webkit-scrollbar{ display:none; }
.bcard{ position:relative; min-height:0; border-radius:13px; border:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:6px 5px; cursor:pointer; overflow:hidden; transition:all calc(.2s/var(--spd)) ease; }
.bcard-text{ font-family:var(--font-mono); font-size:11px; line-height:1.25; letter-spacing:.01em;
  text-align:center; color:var(--ink-dim); }
.bcard-src{ font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); }
.bcard.marked{ border-color:color-mix(in oklch, var(--glow) 50%, transparent);
  background:linear-gradient(160deg, color-mix(in oklch, var(--glow) 22%, transparent), transparent 85%); }
.bcard.marked .bcard-text{ color:var(--ink); }
.bcard.in-line{ border-color:var(--glow);
  box-shadow:0 0 calc(22px*var(--gi)) -4px var(--glow), inset 0 0 calc(24px*var(--gi)) -12px var(--glow); }
/* Focused card zooms up so it's readable as you navigate — for ANY card,
   checked (called) or not. Placed last so its backdrop + glow win. */
.bcard.is-focused{ transform:scale(1.5); z-index:5;
  background:rgba(9,12,18,.98); border-color:color-mix(in oklch, var(--glow) 75%, transparent);
  box-shadow:0 8px 30px -6px #000, 0 0 calc(30px*var(--gi)) -4px color-mix(in oklch, var(--glow) 88%, transparent); }
.bcard.is-focused .bcard-text{ font-size:12px; }
.bcard.is-focused .bcard-src{ font-size:8.5px; }
.bcard-check{ position:absolute; top:4px; right:4px; color:var(--glow);
  filter:drop-shadow(0 0 calc(5px*var(--gi)) var(--glow)); }
.bcard-check .gi{ stroke:var(--glow); }
.bingo-win{ margin-top:12px; text-align:center; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--glow);
  padding:9px; border-radius:11px; border:1px solid color-mix(in oklch, var(--glow) 45%, transparent);
  box-shadow:0 0 calc(28px*var(--gi)) -8px var(--glow);
  animation:fadeUp calc(.4s/var(--spd)) ease both; }
.bingo-note{ margin-top:12px; font-family:var(--font-mono); font-size:8.5px; line-height:1.5;
  letter-spacing:.04em; color:var(--ink-faint); opacity:.85; }

/* Leaderboard — "who called it" */
.lb-list{ margin-top:14px; display:flex; flex-direction:column; gap:9px; flex:1; min-height:0;
  align-content:start; overflow-y:auto; scrollbar-width:none; border-radius:10px; }
.lb-list::-webkit-scrollbar{ display:none; }
.lb-list.is-focused{ outline:1px solid color-mix(in oklch, var(--glow) 40%, transparent); outline-offset:4px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:13px;
  border:1px solid var(--hair); background:rgba(255,255,255,.02); }
.lb-row.top{ border-color:color-mix(in oklch, var(--glow) 50%, transparent);
  background:linear-gradient(90deg, color-mix(in oklch, var(--glow) 14%, transparent), transparent 90%);
  box-shadow:0 0 calc(20px*var(--gi)) -6px color-mix(in oklch, var(--glow) 70%, transparent); }
.lb-rank{ font-family:var(--font-mono); font-size:16px; min-width:24px; text-align:center; color:var(--ink-dim); }
.lb-row.top .lb-rank{ font-size:18px; }
.lb-main{ flex:1; min-width:0; }
.lb-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lb-src{ font-size:15px; font-weight:600; color:var(--ink); }
.lb-score{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-dim); }
.lb-row.top .lb-score{ color:var(--glow-soft); }
.lb-bar{ margin-top:7px; height:5px; border-radius:3px; background:var(--hair); overflow:hidden; }
.lb-fill{ height:100%; border-radius:3px; background:var(--glow);
  box-shadow:0 0 calc(8px*var(--gi)) var(--glow); transition:width calc(.4s/var(--spd)) ease; }

/* ── DebugPanel — localhost-only dev tools. Intentionally utilitarian, sits
   outside the 600×600 product surface (fixed to the viewport corner). ── */
/* Debug is a full screen (reached from the Home footer "Debug" control). */
.dbg-screen{ z-index:2; }
.dbg-scroll{ flex:1; min-height:0; margin-top:12px; overflow-y:auto; scrollbar-width:none;
  display:flex; flex-direction:column; gap:7px; }
.dbg-scroll::-webkit-scrollbar{ display:none; }
.dbg-btn.is-focused{ outline:2px solid #ffd9a0; outline-offset:1px; background:rgba(255,255,255,.14); }
.dbg-grp{ font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-top:8px; }
.dbg-btn{ appearance:none; cursor:pointer; text-align:left; font-family:var(--font-mono);
  font-size:11px; line-height:1.3; color:#fff; padding:7px 9px; border-radius:7px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); }
.dbg-btn:hover{ background:rgba(255,255,255,.1); }
.dbg-btn:disabled{ opacity:.4; cursor:not-allowed; }
.dbg-btn.warn{ color:#ff9b9b; border-color:rgba(255,120,120,.35); }
.dbg-btn.primary{ color:#0e1116; font-weight:600; background:#ffd9a0; border-color:#ffd9a0; }
.dbg-btn.primary:hover{ background:#ffe6bd; }
.dbg-btn b{ color:#ffd9a0; }
.dbg-hint{ font-size:8.5px; line-height:1.35; letter-spacing:.02em; color:rgba(255,255,255,.5); margin:-2px 2px 2px; }
.dbg-note{ font-size:9px; letter-spacing:.06em; color:rgba(255,255,255,.45); margin-top:6px; }