/* ════════════════════════════════════════════════════════════════════
   dead-hours.css · LiveRoll play-multi · DH #284 DEAD-HOURS TAKEOVER (port)
   ────────────────────────────────────────────────────────────────────
   Ported from Claude Design flagship-pass/v3/dead-hours.css. The design
   rode --fp-* tokens; play-multi's inline CSS defines none, so values are
   concrete here (same literals the design's tokens resolved to). The
   takeover renders inside the existing .fp2-feed scroll region (.dh-body)
   with the practice path replacing the wallet (.dh-path) — both mounted by
   feed-app-v2 only in the dead-hours state, so nothing here can leak into
   the live felt. State attrs live on .dh-body itself.
   ════════════════════════════════════════════════════════════════════ */

.dh-body {
  --dh-cyan: oklch(0.80 0.085 205);
  --dh-cyan-soft: oklch(0.87 0.065 200);
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px 16px;
  background:
    radial-gradient(ellipse 130% 46% at 50% 0%, rgba(212,168,67,0.10) 0%, transparent 56%),
    #0a0d10;
  border-radius: 14px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  color: #f0f0ec;
}
.dh-body > * { flex-shrink: 0; }

/* GC coin — the glory chip glyph (replaces "$"); not defined on this page */
.dh-body .gc {
  display: inline-block; width: 0.92em; height: 0.92em; border-radius: 50%;
  vertical-align: -0.07em; margin-right: 0.3em; position: relative; flex-shrink: 0;
  background: radial-gradient(circle at 36% 30%, #f6e0a0 0%, #e8c875 38%, #d4a843 64%, #a87f2c 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.45), inset 0 -1px 1.5px rgba(80,55,10,0.5), 0 0 4px rgba(212,168,67,0.4);
}
.dh-body .gc::after { content: ''; position: absolute; inset: 21%; border-radius: 50%; border: 1px solid rgba(120,88,20,0.55); }

/* ── A · COUNTDOWN HERO ─────────────────────────────────────────────── */
.dh-hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(232,200,117,0.30); border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(212,168,67,0.16), transparent 62%),
    linear-gradient(180deg, #14191e 0%, #0a0d10 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 18px 16px 15px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.dh-hero-glow {
  position: absolute; top: -56%; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; pointer-events: none;
  background: radial-gradient(circle, rgba(232,200,117,0.16), transparent 66%);
}
.dh-eyebrow {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: #d4a843;
}
.dh-eyebrow::before, .dh-eyebrow::after { content: ''; width: 16px; height: 1px; background: rgba(232,200,117,0.5); }

.dh-clock { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.dh-seg { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 60px; }
.dh-seg-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 56px; line-height: 0.86; letter-spacing: 0.01em; color: #e8c875;
  text-shadow: 0 0 26px rgba(232,200,117,0.32);
}
.dh-seg-unit { font-size: 9px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,240,236,0.32); }
.dh-colon {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 40px; font-weight: 300; line-height: 1;
  color: rgba(232,200,117,0.42); padding-bottom: 16px; animation: dh-colon-blink 1.6s steps(1) infinite;
}
@keyframes dh-colon-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
.dh-seg.sec .dh-seg-num { font-size: 38px; color: #d4a843; opacity: 0.82; }
.dh-seg.sec { min-width: 46px; padding-bottom: 2px; }

/* dark framing — date chip; seconds hide */
.dh-when {
  position: relative; z-index: 1; display: none; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: #f0f0ec;
  background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 5px 12px;
}
.dh-when b { color: #e8c875; font-weight: 700; }
.dh-body[data-schedule="dark"] .dh-clock { opacity: 0.92; }
.dh-body[data-schedule="dark"] .dh-seg.sec { display: none; }
.dh-body[data-schedule="dark"] .dh-clock .dh-colon:last-of-type { display: none; }
.dh-body[data-schedule="dark"] .dh-when { display: inline-flex; }

/* tonight's billing */
.dh-billing {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 11px;
  background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.10);
}
.dh-billing-tag {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #e8c875;
}
.dh-billing-tag .dh-glyph { font-size: 10px; }
.dh-billing-match { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dh-abbr {
  font-weight: 800; letter-spacing: 0.04em; border-radius: 3px; line-height: 1;
  display: inline-grid; place-items: center; font-size: 10px; padding: 3px 5px;
}
.dh-at { color: rgba(240,240,236,0.32); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; }
.dh-billing-name { font-size: 11px; font-weight: 700; color: #f0f0ec; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-billing-time {
  margin-left: auto; flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #e8c875;
}
.dh-billing-venue {
  width: 100%; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.06em; color: rgba(240,240,236,0.32); margin-top: -2px;
}

/* remind-me / add-to-calendar (calendar-link only — no push infra) */
.dh-remind {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240,240,236,0.55); background: transparent;
  border: 1px dashed rgba(255,255,255,0.10); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; text-decoration: none;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.dh-remind:hover { color: #e8c875; border-color: rgba(232,200,117,0.5); background: rgba(212,168,67,0.06); }
.dh-remind .dh-bell { font-size: 11px; }
.dh-remind.added { color: #6dba80; border-color: rgba(109,186,128,0.5); border-style: solid; background: rgba(109,186,128,0.08); }

/* ── B · CHAMPIONS STRIP ────────────────────────────────────────────── */
.dh-sec {
  display: flex; align-items: baseline; gap: 10px; padding: 0 2px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.20em; text-transform: uppercase; color: #f0f0ec;
}
.dh-sec .dh-rule-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); align-self: center; }
.dh-sec .glory {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.10em; color: #d4a843;
  border: 1px solid rgba(232,200,117,0.4); border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}

.dh-champ-block { display: flex; flex-direction: column; gap: 8px; margin-top: -2px; }
.dh-reign {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(212,168,67,0.18) 0%, rgba(212,168,67,0.03) 64%);
  border: 1px solid rgba(232,200,117,0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.dh-reign-medal {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 22px; color: #5a4410;
  background: radial-gradient(circle at 38% 32%, #f6e0a0, #e8c875 42%, #d4a843 70%, #9c7526);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(80,55,10,0.5), 0 5px 16px rgba(212,168,67,0.4);
}
.dh-reign-mid { position: relative; z-index: 1; min-width: 0; }
.dh-reign-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: #d4a843; }
.dh-reign-name { font-size: 22px; font-weight: 900; color: #e8c875; line-height: 1; margin: 3px 0 4px; text-shadow: 0 0 18px rgba(232,200,117,0.32); }
.dh-reign-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.03em; color: rgba(240,240,236,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-reign-meta b { color: #f0f0ec; font-weight: 700; }
.dh-reign-stat { position: relative; z-index: 1; text-align: right; flex-shrink: 0; }
.dh-reign-stat-v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 700; color: #f0f0ec; line-height: 1; display: inline-flex; align-items: center; }
.dh-reign-stat-v .gc { width: 0.78em; height: 0.78em; }
.dh-reign-stat-l { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,240,236,0.32); margin-top: 4px; }

.dh-recent { display: flex; flex-direction: column; gap: 5px; }
.dh-rrow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.022); border: 1px solid rgba(255,255,255,0.06);
}
.dh-rrow-av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; font-weight: 700; color: #0a0d10; }
.dh-rrow-id { min-width: 0; }
.dh-rrow-name { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: #f0f0ec; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-rrow-game { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.04em; color: rgba(240,240,236,0.32); margin-top: 3px; }
.dh-rrow-pl { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #6dba80; flex-shrink: 0; display: inline-flex; align-items: center; }
.dh-rrow-pl .gc { width: 0.72em; height: 0.72em; }
.dh-wall-link {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 1px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(240,240,236,0.32); text-decoration: none; padding: 6px; border-radius: 8px;
  transition: color 160ms, background 160ms;
}
.dh-wall-link:hover { color: #e8c875; background: rgba(212,168,67,0.05); }

/* empty state — launch-honest, zero champions exist yet */
.dh-champ-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 18px 14px 16px; border: 1px dashed rgba(255,255,255,0.10); border-radius: 13px; background: rgba(255,255,255,0.015); }
.dh-empty-medal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: rgba(240,240,236,0.32); border: 2px dashed rgba(255,255,255,0.10); background: rgba(255,255,255,0.02); }
.dh-empty-title { font-size: 17px; font-weight: 900; letter-spacing: 0.01em; color: #e8c875; line-height: 1.1; max-width: 18ch; }
.dh-empty-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; line-height: 1.5; letter-spacing: 0.02em; color: rgba(240,240,236,0.55); max-width: 34ch; }

/* ── C · THE PRACTICE PATH — replaces the wallet while dead ─────────── */
.dh-path {
  flex-shrink: 0; position: relative; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px 12px 13px;
  background: linear-gradient(180deg, #0e1418 0%, #0a0d10 100%);
  border-top: 1px solid rgba(255,255,255,0.10); box-shadow: 0 -10px 28px rgba(0,0,0,0.5);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
}
.dh-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  padding: 13px 15px; border-radius: 13px; border: 0;
  background: linear-gradient(180deg, #e8c875 0%, #d4a843 100%);
  box-shadow: 0 8px 22px rgba(212,168,67,0.32);
  transition: transform 90ms;
}
.dh-cta:active { transform: scale(0.985); }
.dh-cta-glyph {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(20,14,2,0.18); color: #2a2007; font-size: 20px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.dh-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dh-cta-act { font-size: 15px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1304; line-height: 1.05; }
.dh-cta-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.04em; color: rgba(40,30,5,0.72); }
.dh-cta-arrow { margin-left: auto; flex-shrink: 0; font-size: 18px; color: #2a2007; font-weight: 700; }

.dh-demo {
  display: flex; align-items: center; gap: 9px; width: 100%; text-decoration: none; cursor: pointer;
  padding: 9px 13px; border-radius: 11px;
  background: linear-gradient(180deg, oklch(0.80 0.085 205 / 0.14), rgba(0,0,0,0));
  border: 1px solid oklch(0.80 0.085 205 / 0.4);
  transition: border-color 160ms, background 160ms;
}
.dh-demo:hover { border-color: oklch(0.80 0.085 205); background: oklch(0.80 0.085 205 / 0.10); }
.dh-demo-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: oklch(0.87 0.065 200); box-shadow: 0 0 7px oklch(0.80 0.085 205); animation: dh-demo-blink 1.8s ease-in-out infinite; }
@keyframes dh-demo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dh-demo-txt { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: oklch(0.87 0.065 200); }
.dh-demo-txt b { color: #fff; font-weight: 800; }
.dh-demo-live { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.80 0.085 205); }
.dh-demo-arrow { margin-left: auto; flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: oklch(0.87 0.065 200); }

@media (prefers-reduced-motion: reduce) {
  .dh-colon, .dh-demo-dot { animation: none !important; }
}