.rotation-active .stats-panel,
.rotation-active .panel,
.rotation-active .page-footnote { display: none; }
.rotation-active #moss-title { display: none; }
.rotation-active .heading { justify-content: flex-end; }
.rotation-settings-dialog { width: min(480px, calc(100vw - 32px)); }
.rotation-settings-dialog .dialog-header { margin-bottom: 24px; }
.rotation-settings { display: grid; gap: 20px; }
.rotation-settings .field { min-width: 0; }
.rotation-settings-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.rotation-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 520px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.rotation-art { position: relative; display: grid; place-items: center; min-height: 400px; background: #182638; }
.rotation-placeholder { color: #74869e; font-size: 100px; }
.rotation-art img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; }
.rotation-project { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: clamp(24px, 3vw, 52px); min-width: 0; }
.rotation-badge { color: var(--cyan); font-size: 12px; margin-bottom: 20px; }
.rotation-name { font-size: clamp(26px, 2.3vw, 42px); line-height: 1.4; overflow-wrap: anywhere; }
.rotation-description { color: #a9b8cb; font-size: 15px; line-height: 1.9; margin: 18px 0 24px; overflow-wrap: anywhere; }
.rotation-details { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 13px 18px; width: 100%; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.rotation-details dt { color: #7d8fa7; }
.rotation-details dd { margin: 0; color: #bdcadb; overflow-wrap: anywhere; }
.rotation-report { margin-top: 28px; }
.rotation-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 32px; text-align: center; }
.rotation-empty h2 { font-size: 22px; }
.rotation-empty p { color: var(--muted); line-height: 1.8; }
.rotation-progress { height: 3px; background: #ffffff0c; margin-top: 18px; overflow: hidden; }
.rotation-progress span { display: block; width: 0; height: 100%; background: var(--cyan); }
.rotation-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 18px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rotation-controls > div { display: flex; gap: 12px; }
.rotation-icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid #ffffff22; border-radius: 8px; background: transparent; color: #bac5d5; }
.rotation-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rotation-icon-button:hover:not(:disabled) { background: #ffffff08; border-color: #ffffff44; color: var(--ink); }
.rotation-icon-button.primary { background: var(--cyan); border-color: var(--cyan); color: #11282f; }
.rotation-icon-button.primary:hover:not(:disabled) { background: #a1e5e8; color: #11282f; }
.rotation-control-divider { width: 1px; height: 22px; margin-inline: 4px; background: var(--line); align-self: center; }
#rotation-countdown { text-align: right; }
:fullscreen .rotation-stage { min-height: calc(100dvh - 160px); }
@media (max-width: 950px) {
  .rotation-stage { grid-template-columns: 1fr; }
  .rotation-art { min-height: 260px; }
  .rotation-project { padding: 28px; }
  .rotation-name { font-size: 28px; }
  :fullscreen .rotation-stage { min-height: 0; }
}
@media (max-width: 480px) {
  .rotation-project { padding: 24px 20px; }
  .rotation-description { font-size: 13px; }
  .rotation-details { gap: 10px; grid-template-columns: 84px minmax(0, 1fr); }
  .rotation-controls { grid-template-columns: 1fr 1fr; gap: 14px; }
  .rotation-controls > div { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  #rotation-countdown { grid-column: 2; grid-row: 1; }
  .rotation-empty { min-height: 360px; }
}