/* 暦奏 / Calendar Score: one quiet, world-aware audio layer across the portal. */
.calendar-score {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 18;
  display: grid;
  grid-template-columns: 34px;
  align-items: center;
  gap: 0;
  padding: 4px;
  color: var(--ink);
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--reading-strong) 84%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--void) 18%, transparent);
  backdrop-filter: blur(16px) saturate(.82);
}

.calendar-score__toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: transparent;
  color: var(--acc);
  cursor: pointer;
  font: 600 .76rem/1 var(--mono);
  transition: border-color .24s ease, color .24s ease, transform .24s ease;
}

.calendar-score__toggle:hover,
.calendar-score__toggle[aria-pressed="true"] {
  border-color: var(--acc);
  color: var(--ink);
  transform: rotate(4deg);
}
.calendar-score__toggle:active{transform:scale(.98)}

.calendar-score__copy { min-width: 0; display: grid; gap: 2px; }
.calendar-score__name { font-family: var(--mincho); font-size: .72rem; letter-spacing: .16em; white-space: nowrap; }
.calendar-score__meta { overflow: hidden; color: var(--faint); font: .53rem/1.35 var(--mono); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.calendar-score__meter { grid-column: 1 / -1; width: 100%; height: 12px; display: block; opacity: .78; }

/* A score is an instrument, not a permanently open information card. */
.calendar-score__copy,
.calendar-score__meter { display: none; }

/* 天球儀 has its own lower-right observation log. Keep the score in the same
   instrument rail without stacking the two controls. */
body.zzk-vantage--sky .calendar-score {
  right: 196px;
  bottom: 24px;
}

.calendar-score-stage {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(42px, 6vw, 76px) clamp(20px, 6vw, 72px);
  border-top: 1px solid var(--hair2);
  border-bottom: 1px solid var(--hair2);
}

.calendar-score-stage__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.calendar-score-stage__kicker { color: var(--acc); font: .62rem/1.5 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.calendar-score-stage h2 { margin-top: 12px; font-family: var(--mincho); font-size: clamp(1.9rem, 4.4vw, 3.9rem); font-weight: 500; line-height: 1.16; letter-spacing: .08em; }
.calendar-score-stage__sigil {
  width: clamp(94px, 11vw, 144px);
  aspect-ratio: 1;
  border: 1px solid var(--hair);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--acc);
  font: 1rem/1 var(--mono);
  background: linear-gradient(90deg, transparent 49.5%, var(--hair) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, var(--hair) 50%, transparent 50.5%);
}

.calendar-score-stage__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: clamp(24px, 5vw, 68px); align-items: end; margin-top: 40px; }
.calendar-score-stage__visual { min-height: 210px; border-block: 1px solid var(--hair); display: flex; align-items: center; position: relative; overflow: hidden; }
.calendar-score-stage__visual::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 11.8%, var(--hair2) 12%, transparent 12.2%); pointer-events: none; }
.calendar-score-stage__visual canvas { width: 100%; height: 180px; display: block; }
.calendar-score-stage__facts { display: grid; border-top: 1px solid var(--hair); }
.calendar-score-stage__fact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair2); }
.calendar-score-stage__fact dt { color: var(--faint); font: .58rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.calendar-score-stage__fact dd { margin: 0; color: var(--dim); font-family: var(--mincho); font-size: .82rem; letter-spacing: .06em; }

@media (max-width: 860px) {
  .calendar-score { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: 32px; padding: 5px; }
  .calendar-score__copy, .calendar-score__meter { display: none; }
  .calendar-score__toggle { width: 32px; height: 32px; }
  .calendar-score-stage__head, .calendar-score-stage__body { grid-template-columns: 1fr; }
  .calendar-score-stage__sigil { display: none; }
}

@media (max-width: 700px) {
  body.zzk-vantage--sky .calendar-score {
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    bottom: 68px;
  }
}

@media (prefers-reduced-motion: reduce) { .calendar-score__toggle { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .calendar-score { backdrop-filter:none; background:var(--reading-strong); } }
@media (prefers-contrast: more) { .calendar-score,.calendar-score__toggle { border-color:var(--ink); } }