/* The dial page: full screen, no scroll. Everything over the canvas is minimal; the dial carries the information. */
html, body.dial-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.dial-page { background: #ece4d6; }
.stage { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#gl.scrubbing { cursor: ew-resize; }

/* ── no-WebGL fallback: still render of the dial + the engraved text as DOM ── */
.still { position: absolute; inset: 0; display: block; }
.still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.no-gl #gl { display: none; }
.panel { position: absolute; left: var(--pad); top: calc(var(--bar-h) + 46px); width: min(330px, calc(100vw - 2 * var(--pad))); display: grid; gap: 3px;
  padding: 12px 14px 13px; border: 1px solid var(--rule); border-radius: 10px; background: rgba(243, 237, 226, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel .p-label { font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 19px; line-height: 1.1; }
.panel .p-big { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.panel .p-caps { font-variant-caps: all-small-caps; letter-spacing: .09em; font-weight: 600; font-size: 16px; color: var(--ink-2); }
.panel .p-line { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.panel .p-note { font-style: italic; color: var(--ink-2); font-size: 15px; }
.panel .mint { color: var(--mint-ink); }
.panel a { color: var(--ink); text-decoration-color: var(--stone); text-underline-offset: 3px; display: inline-flex; gap: 3px; align-items: center; }
.panel a svg { width: 11px; height: 11px; }

.clock { position: absolute; top: calc(var(--bar-h) + 14px); left: var(--pad); font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); pointer-events: none; white-space: nowrap; }
.clock b { color: var(--ink); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.clock .sc { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.clock .hint { font-family: var(--serif); font-style: italic; font-size: 15px; }

.tip { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; background: var(--ink); color: var(--lime); font-family: var(--mono); font-size: 11.5px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }

/* drops dock: bottom-left on desktop, full-width strip on mobile */
.dock { position: absolute; left: var(--pad); bottom: 42px; width: min(712px, calc(100vw - 2 * var(--pad))); display: grid; gap: 10px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.tagline { font-size: 26px; line-height: 1.1; font-weight: 600; }
.tagline em { font-weight: 500; }
.refill { margin: -6px 0 0; font-size: 14.5px; font-style: italic; color: var(--ink-2); }
.refill a { color: var(--ink-2); }
.cards-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x mandatory; }
.cards-row::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; width: 228px; scroll-snap-align: start; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px 11px; background: rgba(243, 237, 226, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 15px; line-height: 1.35; display: grid; gap: 4px; }
.card header { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.c-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.c-kind { font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 17px; margin-right: 2px; }
.c-sym { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.c-sym b { font-size: 14px; color: var(--ink); font-weight: 500; }
.c-pot { font-family: var(--mono); font-size: 12px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.c-pot b { color: var(--ink); font-size: 15px; font-weight: 500; }
.c-pot a, .c-trig a { color: var(--ink); text-decoration-color: var(--stone); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 2px; }
.c-pot a svg { width: 11px; height: 11px; }
.c-pot.muted { font-family: var(--serif); font-style: italic; font-size: 15px; }
.c-trig { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.card.is-live { border-color: var(--mint); box-shadow: 0 0 0 1px rgba(63, 224, 176, .35) inset; }
.card.is-unfunded { opacity: .82; }

/* catch control */
.catch-wrap { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.catch-wrap > * { pointer-events: auto; }
.catch { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px 0 6px; border-radius: 40px; border: 1px solid var(--ink); background: var(--ink); color: var(--lime);
  font-family: var(--serif); font-weight: 600; font-size: 21px; font-variant-caps: all-small-caps; letter-spacing: .09em; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.catch .ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.catch .ring-bg { fill: none; stroke: rgba(239, 231, 216, .22); stroke-width: 4; }
.catch .ring-fg { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 163.36; stroke-dashoffset: 163.36; }
.catch::before { content: ''; position: absolute; left: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--mint); }
.catch:disabled { cursor: default; background: rgba(43, 38, 32, .78); }
.catch.is-done { background: var(--lime); color: var(--ink); border-color: var(--mint); }
.catch.is-done .ring-fg { stroke-dashoffset: 0 !important; }
.catch-note { margin: 0; font-size: 15px; color: var(--ink-2); background: rgba(243, 237, 226, .75); padding: 3px 10px; border-radius: 6px; text-align: center; max-width: 420px; }

.me { position: absolute; right: var(--pad); top: calc(var(--bar-h) + 10px); font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: rgba(243, 237, 226, .8); border: 1px solid var(--rule); border-radius: 8px; padding: 4px 4px 4px 10px; display: flex; align-items: center; gap: 4px; }
.me b { color: var(--ink); font-weight: 500; }
.me-x { border: 0; background: transparent; cursor: pointer; width: 22px; height: 22px; border-radius: 5px; font-size: 15px; line-height: 1; }
.me-x:hover { background: rgba(43, 38, 32, .08); }

.legal-line { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 7px var(--pad) 9px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); text-align: center; pointer-events: auto; }
.legal-line a { color: var(--ink-2); }

.fixture .legal-line::before { content: 'FIXTURE DATA · '; font-family: var(--mono); color: #8a3b1f; }

@media (min-width: 1100px) {
  .drop-live .catch-wrap { left: auto; right: var(--pad); transform: none; justify-items: end; }
}
@media (max-width: 760px) {
  .dock { left: 0; right: 0; width: auto; bottom: 52px; padding: 0 var(--pad); }
  .tagline { font-size: 22px; }
  .card { width: 200px; padding: 8px 10px 9px; gap: 3px; font-size: 14px; }
  .c-kind { font-size: 15.5px; }
  .card .badge { height: 17px; font-size: 9.5px; padding: 0 5px; }
  .c-sym { font-size: 10.5px; } .c-sym b { font-size: 13px; }
  .c-pot { font-size: 11px; } .c-pot b { font-size: 14px; }
  .c-trig { font-size: 10px; }
  .catch-wrap { bottom: 194px; width: calc(100vw - 2 * var(--pad)); gap: 6px; }
  .catch-note { font-size: 13.5px; line-height: 1.3; }
  .drop-live .dock .tagline { display: none; }
  .catch { height: 58px; font-size: 19px; }
  .catch .ring { width: 46px; height: 46px; }
  .catch::before { left: 20px; }
  .clock .hint { display: none; }
  .panel { top: calc(var(--bar-h) + 38px); left: var(--pad); right: var(--pad); width: auto; gap: 1px; padding: 8px 11px 9px; }
  .panel .p-label { font-size: 16px; }
  .panel .p-big { font-size: 24px; }
  .panel .p-caps { font-size: 14px; }
  .panel .p-line { font-size: 11px; }
  .refill { font-size: 13px; }
  .drop-live .refill { display: none; }
  .legal-line { font-size: 10.5px; }
  .me { top: calc(var(--bar-h) + 8px); bottom: auto; right: var(--pad); font-size: 10.5px; white-space: nowrap; padding: 2px 2px 2px 8px; }
  .me .me-more { display: none; }
}

/* ?og: clean render for the OG image */
.og .bar, .og .drawer, .og .dock, .og .clock, .og .legal-line, .og .catch-wrap, .og .me, .og .tip, .og .panel,
.still-render .bar, .still-render .drawer, .still-render .dock, .still-render .clock, .still-render .legal-line, .still-render .catch-wrap, .still-render .me, .still-render .tip, .still-render .panel { display: none !important; }
.og-title { display: none; }
.og .og-title { display: grid; gap: 10px; position: absolute; left: 64px; top: 50%; transform: translateY(-54%); z-index: 5; max-width: 520px; }
.og-word { font-weight: 600; font-size: 112px; line-height: .95; letter-spacing: -.01em; }
.og-line { font-size: 40px; line-height: 1.1; font-weight: 600; }
.og-line em { font-weight: 500; }
.og-sub { font-size: 24px; font-style: italic; color: var(--ink-2); margin-top: 6px; }