/* =============================================================
   Local Curio countdown: premium frosted glass flip-clock
   Prefix: .lc-cd   |   Em-dash free   |   Dark + light themes
   Colors come from :root brand tokens via var(); the only literal
   hex values are theme-specific glass tints and inset highlights.
   ============================================================= */
.lc-cd{display:inline-block;max-width:100%}

.lc-cd-row{
  position:relative;display:flex;align-items:flex-start;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:clamp(14px,4vw,18px) clamp(10px,3.4vw,20px);border-radius:18px;
  background:
    linear-gradient(180deg,#ffffff10,#ffffff04),
    var(--panel-2,#2B2118);
  border:1px solid var(--line,#ffffff18);
  box-shadow:0 1px 0 #ffffff14 inset, 0 18px 40px -22px #000000cc;
  isolation:isolate;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* soft rust/gold glow bleeding behind the row */
.lc-cd-row::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;z-index:-1;
  background:
    radial-gradient(60% 80% at 22% 18%, color-mix(in srgb,var(--rust,#E87437) 30%,transparent),transparent 70%),
    radial-gradient(55% 80% at 82% 12%, color-mix(in srgb,var(--sun,#E9B24A) 22%,transparent),transparent 72%);
  filter:blur(22px);opacity:.55;pointer-events:none;
}

.lc-cd-cell{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}

.lc-cd-face{
  position:relative;overflow:hidden;
  min-width:clamp(44px,13vw,84px);height:clamp(58px,15vw,90px);
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;border-radius:14px;
  background-color:#1d150e;            /* solid fallback if color-mix() is unsupported */
  background:
    linear-gradient(180deg,#ffffff14,#ffffff05 38%,#00000022),
    color-mix(in srgb,var(--panel,#221A13) 82%,#000);
  border:1px solid var(--line,#ffffff18);
  box-shadow:
    0 1px 0 #ffffff22 inset,            /* inner top highlight */
    0 -10px 18px -12px #00000099 inset,
    0 10px 22px -16px #000000aa;
}
/* faint film grain on each card */
.lc-cd-face::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay;
}
/* dateOnly: a single wider DAYS face reads as intentional, not a cut-off clock */
.lc-cd.is-dateonly .lc-cd-face{min-width:clamp(96px,28vw,132px)}

.lc-cd-digits{
  position:absolute;left:0;right:0;text-align:center;
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-weight:600;letter-spacing:.01em;line-height:1;
  font-size:clamp(26px,7.3vw,46px);
  color:var(--bone,#F4ECDD);
  text-shadow:0 1px 0 #00000066, 0 0 18px color-mix(in srgb,var(--rust,#E87437) 22%,transparent);
  will-change:transform,opacity;
}
.lc-cd-next{opacity:0}

.lc-cd-label{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:clamp(9px,2.4vw,10px);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:var(--muted,#9d8f7a);
}

/* optional eyebrow caption above the row (set via opts.label) */
.lc-cd-cap{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted,#9d8f7a);margin:0 0 10px;
}

/* stacked-dot colon separator, vertically centered against the face */
.lc-cd-sep{
  display:flex;flex-direction:column;gap:7px;
  margin-top:clamp(18px,5.2vw,34px);
}
.lc-cd-sep span{
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--rust,#E87437) 78%,var(--bone,#F4ECDD));
  box-shadow:0 0 10px color-mix(in srgb,var(--rust,#E87437) 55%,transparent);
}

/* complete state */
.lc-cd-done{
  display:none;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(20px,5vw,26px);color:var(--rust,#E87437);
  padding:14px 4px 4px;letter-spacing:-.01em;
}
.lc-cd.is-complete .lc-cd-row{display:none}
.lc-cd.is-complete .lc-cd-done{display:block}

/* digit change: a calm, quick opacity crossfade (no slide/scale), so it reads
   like a normal counter rather than a flip. Gated behind reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .lc-cd-cell.is-flipping .lc-cd-cur{animation:lc-cd-out .18s ease forwards}
  .lc-cd-cell.is-flipping .lc-cd-next{animation:lc-cd-in .18s ease forwards}
  @keyframes lc-cd-out{from{opacity:1}to{opacity:0}}
  @keyframes lc-cd-in{from{opacity:0}to{opacity:1}}
}

/* light theme: flip glass to warm bone with darker ink.
   NOTE: we intentionally use explicit cream tints here, never var(--panel-2),
   because --panel-2 stays dark espresso on the light theme in theme.css. */
html[data-theme="light"] .lc-cd-row{
  background:linear-gradient(180deg,#00000008,#0000000a),#fffaf1;
  border-color:#0000001f;
  box-shadow:0 1px 0 #ffffffcc inset,0 16px 34px -24px #6b4a2e66;
}
html[data-theme="light"] .lc-cd-row::before{opacity:.4}
html[data-theme="light"] .lc-cd-face{
  background:linear-gradient(180deg,#ffffffcc,#fff6e9 60%,#f0e4d0),#fff8ee;
  border-color:#00000018;
  box-shadow:0 1px 0 #ffffff inset,0 -8px 14px -12px #6b4a2e33 inset,0 8px 16px -16px #6b4a2e55;
}
html[data-theme="light"] .lc-cd-digits{
  color:#2a2018;text-shadow:0 1px 0 #ffffffaa,0 0 14px color-mix(in srgb,var(--rust,#C8501E) 14%,transparent);
}
html[data-theme="light"] .lc-cd-face::after{mix-blend-mode:multiply;opacity:.04}
html[data-theme="light"] .lc-cd-label,
html[data-theme="light"] .lc-cd-cap{color:#7a6a54}

/* -------- shared hero wrapper (kicker + matchup headline + the clock) -------- */
.lc-cd-hero{margin:20px 0 4px}
.lc-cd-hero-head{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px}
.lc-cd-hero-kicker{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust,#E87437);
}
.lc-cd-hero-team{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:clamp(18px,5vw,25px);line-height:1.05;color:var(--bone,#F4ECDD);letter-spacing:-.01em;
}
html[data-theme="light"] .lc-cd-hero-team{color:#241b14}