/* THE BLOCK — page chrome. The two streets are all canvas (integer-upscaled,
   pixelated); the HUD is DOM glued over the letterboxed canvas. Warm-civic kin
   to the arena's dark+violet brand, but daylit. */
:root {
  --bg: #0b0a14;
  --ink: #f2eef7;
  --ink-dim: #b3aecb;
  --warm: #ffcf8a;         /* SNHP warmth */
  --pink: #e58ab4;
  --teal: #7fe0ff;
  --gray: #8a8794;         /* the sticker drain */
  --panel: rgba(14, 13, 26, 0.82);
  --line: rgba(180, 165, 220, 0.20);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
body {
  font-family: var(--mono); color: var(--ink);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130% 110% at 50% 42%, #14121f 0%, #0b0a14 78%);
}
#view {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: pointer;
}

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { position: absolute; }

/* honesty badge — de-emphasized, tucked bottom-left (out of the title's way) */
#badge {
  bottom: 10px; left: 10px;
  background: rgba(240, 198, 116, 0.09);
  border: 1px solid rgba(240, 198, 116, 0.26);
  color: #cdae76;
  font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  pointer-events: auto; text-align: left; line-height: 1.3;
  max-width: 40vw; white-space: normal;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* the one-line thesis, top-center — the "what am I looking at" */
#title {
  top: 9px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink);
  text-align: center; white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}
#title b { color: var(--warm); font-weight: 700; }
@media (max-width: 680px) { #title { font-size: 9.5px; white-space: normal; max-width: 92vw; } }

/* per-panel labels, JS-anchored to the canvas rect */
.panel-label {
  font-size: 11px; letter-spacing: 0.12em; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(9, 8, 16, 0.55); backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.panel-label .dot { width: 7px; height: 7px; border-radius: 2px; }
.panel-label.sticker { color: #c9c5d4; }
.panel-label.sticker .dot { background: var(--gray); }
.panel-label.snhp { color: #ffdca0; }
.panel-label.snhp .dot { background: var(--warm); box-shadow: 0 0 8px var(--warm); }
.panel-label .txt { display: flex; flex-direction: column; line-height: 1.2; }
.panel-label .sub { font-size: 8px; font-weight: 400; opacity: 0.82; letter-spacing: 0.02em; margin-top: 1px; }
@media (max-width: 680px) { .panel-label .sub { display: none; } }

/* the flip-clock scoreboard on the seam */
#scoreboard {
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(10,9,18,0.92), rgba(10,9,18,0.86));
  border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
.score { text-align: center; min-width: 96px; }
.score-label {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 2px;
}
.flip {
  font-size: 21px; font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  position: relative; height: 24px; overflow: hidden;
}
.flip .cur { display: inline-block; will-change: transform; }
.flip.bump .cur { animation: flipbump 0.28s ease-out; }
@keyframes flipbump {
  0% { transform: translateY(-42%); opacity: 0.2; }
  60% { transform: translateY(6%); }
  100% { transform: translateY(0); opacity: 1; }
}
.score.shopper .flip { color: var(--teal); text-shadow: 0 0 12px rgba(127,224,255,0.4); }
.score.merchant .flip { color: var(--warm); text-shadow: 0 0 12px rgba(255,207,138,0.42); }
.score-vs {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7d7893; max-width: 66px; line-height: 1.35; text-align: center;
}

/* the jukebox dock, bottom center */
#dock {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  pointer-events: auto;
  background: rgba(10, 9, 18, 0.8);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#clock-read { text-align: right; line-height: 1.15; }
#clock-day { display: block; font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.08em; }
#clock-time { display: block; font-size: 10px; color: var(--ink-dim); }
#knob {
  width: 42px; height: 42px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #4a4560 0%, #2a2740 46%, #14121f 100%);
  border: 2px solid #55506e;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.14),
              inset 0 -3px 6px rgba(0,0,0,0.6),
              0 3px 8px rgba(0,0,0,0.5);
  position: relative; cursor: grab; touch-action: none;
  flex: 0 0 auto;
}
#knob:active { cursor: grabbing; }
#knob::after { /* knurled ring dots */
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 8deg, transparent 8deg 16deg);
}
#knob-pointer {
  position: absolute; left: 50%; top: 4px; width: 3px; height: 13px;
  margin-left: -1.5px; border-radius: 2px;
  background: linear-gradient(180deg, var(--warm), #e0894a);
  box-shadow: 0 0 6px rgba(255,207,138,0.7);
  transform-origin: 50% 17px;
}
#dock-meta { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ico {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-dim); background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px; cursor: pointer;
}
.ico:hover { color: var(--ink); }
#dock-hint { font-size: 9px; color: #7d7893; letter-spacing: 0.04em; }

/* receipt ticker — the SNHP block's latest confetti receipt, in words */
#ticker {
  bottom: 66px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #ffdca0; letter-spacing: 0.03em;
  background: rgba(10,9,18,0.55); border-radius: 999px; padding: 2px 12px;
  max-width: 84vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.4s ease; text-align: center;
}
#ticker.show { opacity: 1; }
#ticker .amt { color: var(--teal); font-weight: 700; }

/* hover nametag for the named regulars */
#nametag {
  font-size: 10px; color: var(--ink); pointer-events: none;
  background: rgba(9,8,16,0.92); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5); transform: translate(-50%, -100%);
  z-index: 9;
}
#nametag .sub { color: var(--ink-dim); font-size: 9px; }
#nametag.gone { color: #c98a8a; }
.hidden { display: none !important; }

/* the spotlight-open button in the dock */
#spot-btn.spot-open {
  display: flex; align-items: center; gap: 5px;
  color: var(--warm); background: rgba(255, 207, 138, 0.10);
  border-color: rgba(255, 207, 138, 0.34);
  font-size: 9.5px; letter-spacing: 0.06em; font-weight: 700;
  text-transform: uppercase; white-space: nowrap; align-self: center;
}
#spot-btn.spot-open:hover { color: #fff; border-color: rgba(255, 207, 138, 0.7); background: rgba(255, 207, 138, 0.18); }
#spot-btn .spot-ico { font-size: 12px; line-height: 1; }
/* a slow pulse invites the click without nagging */
#spot-btn.pulse { animation: spotPulse 2.2s ease-in-out infinite; }
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 207, 138, 0.0); }
  50% { box-shadow: 0 0 0 3px rgba(255, 207, 138, 0.22); }
}

/* ── SPOTLIGHT overlay — the one-deal mechanism close-up ──────────────────── */
#spotlight {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
#spotlight.hidden { display: none !important; }
.spot-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, rgba(10, 9, 20, 0.72) 0%, rgba(8, 7, 16, 0.9) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.spot-card {
  position: relative; z-index: 1;
  width: min(94vw, 460px);
  background: linear-gradient(180deg, rgba(20, 18, 34, 0.98), rgba(13, 12, 24, 0.98));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 207, 138, 0.06);
  padding: 18px 18px 14px;
  color: var(--ink);
  animation: spotIn 0.32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes spotIn { from { transform: translateY(10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.spot-close {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--mono); font-size: 18px; line-height: 1;
  color: var(--ink-dim); background: transparent; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
}
.spot-close:hover { color: var(--ink); background: rgba(255,255,255,0.06); }

.spot-kicker {
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #b79a5e; font-weight: 700;
}
.spot-kicker span { color: #7d7893; font-weight: 400; }
.spot-item { font-size: 17px; font-weight: 700; margin: 3px 0 12px; letter-spacing: 0.01em; }
.spot-item .spot-venue {
  font-size: 10px; letter-spacing: 0.1em; color: var(--warm);
  background: rgba(255,207,138,0.12); border: 1px solid rgba(255,207,138,0.26);
  padding: 2px 6px; border-radius: 5px; vertical-align: middle; margin-right: 6px;
}

/* the same shopper, two blocks */
.spot-two { display: flex; gap: 10px; margin-bottom: 14px; }
.spot-side { flex: 1 1 0; border-radius: 11px; padding: 10px 11px; border: 1px solid var(--line); }
.spot-side.sticker { background: rgba(138,135,148,0.06); border-color: rgba(138,135,148,0.28); }
.spot-side.snhp { background: rgba(255,207,138,0.06); border-color: rgba(255,207,138,0.3); }
.spot-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.spot-side-lab { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-dim); }
.spot-outcome { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.spot-outcome.walk { color: #d99; background: rgba(200,90,90,0.14); }
.spot-outcome.buy { color: #7fe0b0; background: rgba(90,200,140,0.14); }
.spot-rows { display: flex; flex-direction: column; gap: 3px; }
.spot-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--ink-dim); }
.spot-row b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.spot-row b.save { color: var(--teal); }
.spot-row b.marg { color: var(--warm); }
.spot-verdict { margin-top: 8px; font-size: 9.5px; line-height: 1.3; letter-spacing: 0.02em; }
.spot-verdict.lose { color: #c98a8a; }
.spot-verdict.win { color: #ffdca0; }

/* the three-number spine: cost ≤ quote ≤ sticker */
.spot-spine { display: flex; align-items: center; gap: 8px; margin: 2px 2px 4px; }
.spine-cap { flex: 0 0 auto; width: 46px; font-size: 7.5px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.05em; color: #807a99; text-align: center; }
.spine-cap i { color: #7d7893; font-style: normal; font-size: 7px; }
.spine-cap.floor { text-align: right; }
.spine-cap.ceil { text-align: left; }
.spine-track { position: relative; flex: 1 1 auto; height: 66px; }
.spine-track::before { /* the rail */
  content: ""; position: absolute; left: 0; right: 0; top: 31px; height: 4px;
  background: rgba(255,255,255,0.08); border-radius: 3px;
}
.seg { position: absolute; top: 31px; height: 4px; border-radius: 3px; }
.seg.margin { background: linear-gradient(90deg, #8a6a3a, var(--warm)); }
.seg.saving { background: linear-gradient(90deg, var(--warm), var(--teal)); }
.seg.gap {
  background-image: repeating-linear-gradient(45deg, rgba(200,120,120,0.32) 0 3px, transparent 3px 6px);
  border-top: 1px dashed rgba(200,120,120,0.4); border-bottom: 1px dashed rgba(200,120,120,0.4);
  top: 30px; height: 6px; border-radius: 0;
}
.tick { position: absolute; top: 0; height: 66px; transform: translateX(-50%); text-align: center; width: 0; }
.tk-dot { position: absolute; top: 28px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px rgba(13,12,24,0.9); }
.tk-lab { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.15; }
.tk-lab b { display: block; font-size: 12px; color: var(--ink); text-transform: none; font-variant-numeric: tabular-nums; }
/* alternate labels above/below the rail so the quote & max never collide */
.tick.t-cost .tk-lab, .tick.t-max .tk-lab { top: 42px; }
.tick.t-neg .tk-lab, .tick.t-stk .tk-lab { bottom: 42px; }
/* the two END labels anchor INWARD so they never crash the floor/ceiling caps */
.tick.t-cost .tk-lab { left: 0; transform: none; text-align: left; }
.tick.t-cost .tk-lab b { text-align: left; }
.tick.t-stk .tk-lab { left: auto; right: 0; transform: none; text-align: right; }
.tick.t-stk .tk-lab b { text-align: right; }
.tick.t-cost .tk-dot { background: #b79a5e; }
.tick.t-neg .tk-dot { background: var(--warm); box-shadow: 0 0 8px var(--warm), 0 0 0 2px rgba(13,12,24,0.9); }
.tick.t-max .tk-dot { background: var(--teal); }
.tick.t-stk .tk-dot { background: #c9c5d4; }

.spot-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.spot-nav {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--ink-dim); background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer;
  letter-spacing: 0.04em;
}
.spot-nav:hover { color: var(--ink); border-color: rgba(255,207,138,0.5); }
.spot-nav.next { color: var(--warm); }
.spot-count { font-size: 9px; color: #7d7893; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.spot-prov {
  margin-top: 10px; font-size: 7.5px; line-height: 1.4; letter-spacing: 0.02em;
  color: #807a99; text-align: center;
}

/* tighten the chrome on narrow screens */
@media (max-width: 520px) {
  #scoreboard { gap: 8px; padding: 6px 10px; }
  .score { min-width: 74px; }
  .flip { font-size: 17px; height: 20px; }
  .score-vs { display: none; }
  #dock { gap: 10px; padding: 6px 10px; bottom: 10px; }
  #knob { width: 36px; height: 36px; }
  #knob-pointer { height: 11px; transform-origin: 50% 14px; }
  #dock-hint { display: none; }
  /* keep the button but shrink to the icon on mobile */
  #spot-btn .spot-btn-txt { display: none; }
  #spot-btn.spot-open { padding: 4px 7px; }
  /* POLISH: two-up sides get cramped < 380px — stack if you prefer */
  .spot-card { padding: 16px 14px 12px; }
  .spot-item { font-size: 15px; }
  .spine-cap { width: 40px; font-size: 7px; }
}

/* consistent keyboard focus for links + buttons */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--warm); outline-offset: 2px;
}
/* honor reduced-motion: still the flip/pulse/entrance animations */
@media (prefers-reduced-motion: reduce) {
  .flip.bump .cur { animation: none !important; }
  #spot-btn.pulse { animation: none !important; }
  .spot-card { animation: none !important; }
}

/* ── LIVE layer (live.js): badge stamp + the honest cumulative scoreboard ──
   Shown only when /block/live streams; every number is read off the stream. */
#badge.live {
  color: #9fe8b9;
  background: rgba(127, 224, 160, 0.10);
  border-color: rgba(127, 224, 160, 0.32);
}
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #7fe0a0; margin-right: 5px; vertical-align: 1px;
  box-shadow: 0 0 6px rgba(127, 224, 160, 0.8);
  animation: livedot 2.2s ease-in-out infinite;
}
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

#live-panel {
  top: 44px; right: 12px; width: 218px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(10, 9, 18, 0.93), rgba(10, 9, 18, 0.87));
  border: 1px solid rgba(127, 224, 160, 0.26); border-radius: 12px;
  padding: 9px 12px 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  font-size: 10.5px; line-height: 1.45; color: var(--ink-dim);
  max-height: calc(100vh - 140px); overflow-y: auto;
}
#live-panel.hidden { display: none; }
#live-panel.pulse { animation: livepulse 0.9s ease-out; }
@keyframes livepulse {
  0% { border-color: rgba(127, 224, 160, 0.9);
       box-shadow: 0 0 22px rgba(127, 224, 160, 0.35); }
  100% { border-color: rgba(127, 224, 160, 0.26);
         box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); }
}
.lv-head { display: flex; align-items: center; gap: 6px; }
.lv-title { color: #9fe8b9; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; }
.lv-day { margin-left: auto; color: var(--ink); font-size: 10px;
          font-variant-numeric: tabular-nums; }
.lv-toggle {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-dim); font: 700 11px/1 var(--mono);
  width: 18px; height: 18px; cursor: pointer; flex: none;
}
.lv-toggle:hover { color: var(--ink); border-color: rgba(127, 224, 160, 0.4); }
.lv-note { font-size: 8.5px; color: #7d7893; margin: 5px 0 7px; line-height: 1.4; }
.lv-big { display: flex; align-items: baseline; justify-content: space-between;
          gap: 8px; margin: 3px 0; }
.lv-big b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.lv-big.teal b { color: var(--teal); text-shadow: 0 0 12px rgba(127, 224, 255, 0.4); }
.lv-big.warm b { color: var(--warm); text-shadow: 0 0 12px rgba(255, 207, 138, 0.42); }
.lv-lab { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
          color: var(--ink-dim); }
.lv-pair { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0;
           font-variant-numeric: tabular-nums; }
.lv-pair b { color: var(--ink); font-weight: 600; }
.lv-venues { list-style: none; margin: 7px 0 4px; padding: 6px 0 2px;
             border-top: 1px solid var(--line); }
.lv-venue { display: flex; align-items: center; gap: 6px; padding: 1.5px 0;
            font-variant-numeric: tabular-nums; }
.lv-vname { text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
.lv-varrow { margin-left: auto; font-size: 8px; }
.lv-venue.up .lv-varrow, .lv-venue.up .lv-vamt { color: #7fc48f; }
.lv-venue.down .lv-varrow, .lv-venue.down .lv-vamt { color: #e8734a; }
.lv-vamt { min-width: 52px; text-align: right; font-weight: 600; }
/* the merchant loss-frame — derived live from the stream, warm but not shouty */
.lv-loss { font-size: 9.5px; line-height: 1.45; color: #e6d3b3; margin-top: 7px;
  padding: 6px 8px; border: 1px dashed rgba(255, 224, 138, .4); border-radius: 8px; }
.lv-loss b { color: #ffe08a; }
.lv-life { font-size: 8.5px; color: #7d7893; margin-top: 4px; }
.lv-foot { font-size: 8px; color: #7d7893; margin-top: 7px; padding-top: 6px;
           border-top: 1px solid var(--line); line-height: 1.5;
           overflow-wrap: anywhere; }
.lv-foot code { color: #9a95b0; font-family: var(--mono); }
@media (max-width: 680px) {
  #live-panel { top: auto; bottom: 64px; right: 8px; left: auto; width: 196px;
                max-height: 46vh; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none !important; }
  #live-panel.pulse { animation: none !important; }
}