/* ══════════════════════════════════════════════════════════════════════════
   HUD sun/moon dial (spec 021 §4.1) — js/hud-clock.js
   Topbar pill beside the season badge; the panel reuses the season panel's
   parchment modal (.season-panel / .season-panel-inner / .sp-*).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --kw-dial-sun:     #ffd36e;
  --kw-dial-horizon: rgba(232, 200, 122, .55);
}

.hud-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 1px 12px 1px 6px;
  background: transparent;
  border: 1px solid var(--kw-gold-dim, #6e5836);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Crimson Pro', serif;
  color: var(--kw-gold, #e8c87a);
  line-height: 1;
}
.hud-clock:hover {
  border-color: var(--kw-gold-deep, #c9a45c);
  background: rgba(201, 164, 92, .08);
}
.hud-clock:focus-visible { outline: 1px solid var(--kw-gold-deep, #c9a45c); outline-offset: 2px; }

.hc-dial { display: block; overflow: visible; }
.hc-sky { stroke: var(--kw-gold-dim, #6e5836); stroke-width: .8; transition: fill 2.5s ease; }
.hc-horizon { stroke: var(--kw-dial-horizon); stroke-width: 1; }
.hc-sun { fill: var(--kw-dial-sun); stroke: rgba(120, 70, 10, .55); stroke-width: .6; }
.hc-moon { font-size: 11px; }
.hc-label { font-size: 13px; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Season + Time panels — the modern modal look (Active Quests): ink card in
   the ornate gold frame (.kw-ornate-frame), Playfair title, Crimson gold
   eyebrows, cream body text, quiet gold close. Overrides the old parchment
   rules in main.css; both panels share .season-panel / .sp-* markup.
   ══════════════════════════════════════════════════════════════════════════ */
.season-panel .season-panel-inner {
  width: 400px;
  max-width: 94vw;
  background: rgba(29, 21, 13, .98);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .7);
  overflow: visible;
}
.season-panel .sp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 6px 14px;
  margin: 0 6px;
  background: none;
  border-bottom: 1px solid var(--kw-gold-dim);
}
.season-panel .sp-title { gap: 12px; }
.season-panel .sp-emoji { font-size: 30px; line-height: 1; }
.season-panel .sp-season-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--kw-cream);
}
.season-panel .sp-flavor {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--kw-muted);
  margin-top: 2px;
}
.season-panel .sp-close {
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--kw-muted);
  font-size: 18px;
  padding: 2px 7px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.season-panel .sp-close:hover { background: rgba(201, 164, 92, .12); color: var(--kw-gold); }

/* Sections */
.season-panel .sp-progress-section,
.season-panel .hc-section {
  padding: 14px 12px;
  border-bottom: 1px solid var(--kw-border);
}
.season-panel .hc-section:last-child { border-bottom: none; }
.season-panel .sp-effects-label {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--kw-gold-deep);
  margin-bottom: 8px;
}

/* Season progress */
.season-panel .sp-progress-labels {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--kw-muted);
  margin-bottom: 8px;
}
.season-panel .sp-progress-labels span:last-child { color: var(--kw-cream); }
.season-panel .sp-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--kw-border);
  border-radius: 999px;
}
.season-panel .sp-progress-fill { border-radius: 999px; }

/* Effects (now / next) */
.season-panel .sp-two-col { border-bottom: 1px solid var(--kw-border); }
.season-panel .sp-col { padding: 14px 12px; }
.season-panel .sp-col:first-child { border-right: 1px solid var(--kw-border); }
.season-panel .sp-effect {
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--kw-cream);
  margin-bottom: 5px;
}
.season-panel .sp-effect-next { color: var(--kw-muted) !important; }

/* Footer line */
.season-panel .sp-day {
  padding: 12px 12px 4px;
  background: none;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--kw-cream);
}
.season-panel .sp-day-note { font-size: 12px; font-style: italic; color: var(--kw-muted); }

/* Time panel specifics */
.hc-title { color: var(--kw-cream); }
.hc-row {
  display: grid;
  grid-template-columns: 1fr 52px 74px 70px;
  gap: 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--kw-cream);
  padding: 3px 0;
}
.hc-utc { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 13px; text-align: right; }
.hc-local { color: var(--kw-muted); text-align: right; }
.hc-row-head span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--kw-muted);
  text-align: right;
}
.hc-in { text-align: right; color: var(--kw-muted); font-style: italic; font-size: 12px; align-self: center; }
.hc-moons { display: flex; justify-content: space-between; font-size: 18px; }
.hc-moon-cell { padding: 3px 4px; border-radius: 6px; border: 1px solid transparent; opacity: .5; }
.hc-moon-cell.hc-today { opacity: 1; border-color: var(--kw-gold-deep); background: rgba(201, 164, 92, .12); }
.hc-moon-name { margin-top: 8px; font-family: 'Crimson Pro', serif; font-size: 13px; color: var(--kw-cream); text-align: center; }
.hc-empty { font-family: 'Crimson Pro', serif; font-size: 13px; font-style: italic; color: var(--kw-muted); }

/* Upcoming Happenings (js/happenings.js) */
.hc-hap {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  font-family: 'Crimson Pro', serif;
}
.hc-hap-active { background: rgba(201, 164, 92, .12); border: 1px solid var(--kw-gold-dim); }
.hc-hap-icon { font-size: 16px; text-align: center; }
.hc-hap-main { display: flex; flex-direction: column; min-width: 0; }
.hc-hap-title { font-size: 14px; font-weight: 500; color: var(--kw-cream); }
.hc-hap-when { font-size: 12px; color: var(--kw-muted); }
.hc-hap-active .hc-hap-when { color: var(--kw-gold); }
.hc-hap-in { font-size: 12px; font-style: italic; color: var(--kw-muted); white-space: nowrap; }
.hc-hap-fx { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 2px; }
.hc-fx { font-size: 11.5px; color: var(--kw-muted); }
.hc-fx-good { color: var(--kw-good, #9fc97a); }
.hc-fx-bad { color: #e8907a; }

@media (max-width: 700px) {
  .hc-label { display: none; }
  .hud-clock { padding: 1px 6px; }
}

/* Admin Happening demo banner (KWHappenings.demo) — this screen only. */
.kw-hap-demo {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
  padding: 8px 10px 8px 14px; border-radius: 12px;
  background: rgba(30, 22, 14, 0.92); border: 1px solid rgba(239, 159, 39, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); color: #efe4cd; font-size: 13px;
}
.kw-hap-demo-icon { font-size: 22px; line-height: 1; }
.kw-hap-demo-main { display: flex; flex-direction: column; min-width: 0; }
.kw-hap-demo-title { font-weight: 600; }
.kw-hap-demo-left { color: #efb04a; font-variant-numeric: tabular-nums; margin-left: 4px; }
.kw-hap-demo .hc-fx { color: rgba(239, 228, 205, 0.7); }
.kw-hap-demo .hc-fx-good { color: #9fc97a; }
.kw-hap-demo .hc-fx-bad { color: #e8907a; }
.kw-hap-demo-note { font-size: 11px; color: rgba(239, 228, 205, 0.5); font-style: italic; margin-top: 2px; }
.kw-hap-demo-stop {
  margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(239, 228, 205, 0.2); color: #efe4cd;
}
.kw-hap-demo-stop:hover { background: rgba(255, 255, 255, 0.12); }

/* Link from the clock's events glance to the full Events view. */
.hc-hap-all { display: block; margin: 6px 0 0 auto; padding: 3px 0; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--kw-gold, #e8c87a); }
.hc-hap-all:hover { text-decoration: underline; }
.hc-empty .hc-hap-all { display: inline; margin: 0; }