/* Cosmic — dreamy celestial styling. */

/* Star field: pure CSS, sits behind everything. */
.starfield {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 32% 68%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 51% 12%, rgba(196,181,253,0.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 64% 45%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 74%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 28%, rgba(125,211,252,0.75) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 22% 88%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 43% 34%, rgba(240,171,252,0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70% 92%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 94% 58%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(109, 40, 217, 0.22), transparent 70%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
[data-theme="light"] .starfield { opacity: 0.25; }
@keyframes twinkle { from { opacity: 0.75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .starfield { animation: none; } }

/* Tabs */
.tabs { display: flex; gap: 8px; margin: var(--space-4) 0; justify-content: center; }
.tab {
  font: 700 0.95rem var(--font); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 10px 18px; cursor: pointer;
  min-height: 44px;
}
.tab.active { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* Sign picker */
.sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sign-cell {
  font: 650 0.8rem var(--font); color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 4px; cursor: pointer;
  text-align: center; min-height: 62px;
}
.sign-cell .se { display: block; font-size: 1.3rem; }
.sign-cell:hover { border-color: var(--accent); }
.sign-cell[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

/* Reading cards */
.cosmic-card { margin-top: var(--space-4); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg-elev)), var(--bg-elev)); }
.big-sign { font-size: 3.2rem; display: block; }
.reading { color: var(--text-dim); font-size: 1.02rem; margin: var(--space-3) 0; }
.lucky-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-3); }
.today-actions { display: grid; gap: var(--space-2); }

/* Chart */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.big3 { display: grid; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.big3 .b3 {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
}
.big3 .b3 .glyph { font-size: 2rem; }
.big3 .b3 .what { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--accent-text); font-weight: 800; text-transform: uppercase; }
.big3 .b3 .who { font-weight: 800; font-size: 1.15rem; }
.big3 .b3 .why { color: var(--text-dim); font-size: 0.86rem; }

/* Match */
.match-emojis { font-size: 2.6rem; letter-spacing: 8px; }
.match-score {
  font-size: 3.4rem; font-weight: 850;
  background: linear-gradient(120deg, #c4b5fd, #f0abfc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (max-width: 420px) {
  .sign-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}