/* scenes/eclipse.css -- the eclipse in voxels (scenes/eclipse.js) */
.gscene-eclipse .gscene-stage { height: clamp(500px, 76vh, 680px);
  background:
    radial-gradient(1.5px 1.5px at 8% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 14%, #dfe8ff 50%, transparent 51%), radial-gradient(1px 1px at 57% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 62%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 88%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 84%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #03050b, #060a16 50%, #03050b); }
.gscene-eclipse .stage-canvas { transition: opacity 0.12s linear; }
.ec-glow { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.75), rgba(255, 190, 80, 0.25) 30%, transparent 68%); }
.ec-tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 9px; border-radius: 99px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  font: 800 0.72rem var(--display); letter-spacing: 0.06em; color: #fff; background: rgba(10, 15, 28, 0.6); border: 1px solid var(--line); white-space: nowrap; }
.ec-tag.on { opacity: 1; }
.ec-tag-umbra { color: #ffb2a0; } .ec-tag-penumbra { color: #b9c8ff; }
.ec-note { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 3; margin: 0; max-width: 34em; pointer-events: none;
  font: 700 0.86rem/1.45 var(--display); color: rgba(238, 243, 255, 0.92); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.ec-red { position: absolute; right: 14px; top: 14px; z-index: 4; padding: 6px 12px; border-radius: 99px; cursor: pointer;
  font: 800 0.75rem var(--display); color: #ffd0c0; background: rgba(120, 30, 12, 0.45); border: 1px solid rgba(255, 120, 80, 0.5); }
.ec-red[aria-pressed="true"] { color: var(--muted); background: rgba(255, 255, 255, 0.06); border-color: var(--line); }
.gscene-eclipse .gscene-stage:not([data-mode="lunar"]):not([data-mode="moon"]) .ec-red { display: none; }
.ec-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 10px; padding: 26px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 18, 0.88) 40%); }
.ec-modes { display: flex; flex-wrap: wrap; gap: 7px; }
.ec-modes button { padding: 7px 13px; border-radius: 99px; cursor: pointer; font: 800 0.82rem var(--display); color: var(--ink);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.ec-modes button:hover { transform: translateY(-2px); }
.ec-modes button[aria-pressed="true"] { background: color-mix(in srgb, var(--sky) 26%, transparent); border-color: var(--sky); }
.ec-row { display: flex; align-items: center; gap: 12px; }
.ec-play { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; font: 800 0.95rem/1 var(--display); color: #0a1a33;
  background: linear-gradient(180deg, #c3d8ff, var(--sky)); box-shadow: 0 4px 0 #3c5a94; }
.ec-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #3c5a94; }
.ec-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gold); height: 28px; }
.ec-status { flex: none; min-width: 9em; text-align: right; font: 800 0.9rem var(--display); color: var(--muted); }
.ec-status[data-state="total"] { color: #ff8a6a; } .ec-status[data-state="partial"] { color: var(--gold); } .ec-status[data-state="penumbral"] { color: #b9c8ff; }
@media (max-width: 640px) {
  .gscene-eclipse .gscene-stage { height: clamp(560px, 86vh, 700px); }
  .ec-note { font-size: 0.8rem; right: 16px; top: 52px; }
  .ec-status { min-width: 0; font-size: 0.8rem; }
  .ec-modes button { padding: 6px 10px; font-size: 0.76rem; }
}
.ec-tag-sun { color: var(--gold); }
.ec-tag-sun::before { content: "\2600\00a0"; }
.gscene-eclipse .gscene-stage:not([data-mode="moon"])::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 0% 45%, rgba(255, 200, 90, 0.22), transparent 70%); }