/* moon-phase specific styles (after base.css). */
.container{max-width:720px}
.card{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.field{flex:1;min-width:180px}
button.today{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:12px 16px;border-radius:11px;cursor:pointer;font-weight:600}
#result{margin-top:28px;text-align:center}
.moon{margin:0 auto 6px;filter:drop-shadow(0 0 26px rgba(210,200,150,.25))}
.phase-name{font-size:24px;font-weight:800;margin:8px 0 2px}
.phase-sub{color:var(--muted);margin:0 0 18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px;margin:0 auto}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .v{font-size:20px;font-weight:700}
.stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.next{display:flex;gap:12px;max-width:520px;margin:16px auto 0}
.next .stat{flex:1}
.disclaimer{margin-top:22px;border:none;text-align:center}
@media(max-width:560px){.stats{grid-template-columns:1fr}.next{flex-direction:column}}