/* Math Tower - css/solar.css: the Solar System room's screens (v9, js/solarui.js) inside #solar-layer: the chip, the
   caption, the rocket countdown, the flash, and the cards (welcome, fun facts, quiz gates, the grab card, the Orbit Ring,
   the planet map, the badge stamp). Uses the tokens and the .btn components of style.css.
   Look: deep-space glass with a little starfield, warm sun-gold accents, the game's own fonts and sticker buttons. */

.solar-layer {
  --sol-ink: #070a1c;
  --sol-navy: #0d1430;
  --sol-glass: rgba(13, 20, 48, 0.86);
  --sol-line: rgba(127, 208, 255, 0.35);
  --sol-sky: #7fd0ff;
  --sol-gold: #ffd23f;
  --sol-sun: #ffb02e;
  --sol-green: #4dff88;
  --sol-red: #ff5a6e;
  --sol-text: #eef3ff;
  --sol-dim: #a9b6d8;
  position: fixed; inset: 0; z-index: 32; pointer-events: none; font-family: var(--font-body); color: var(--sol-text);
}
.solar-layer [hidden] { display: none !important; }

/* In the Solar System the Math-Tower-only parts of the HUD rest (height meter, skips, powers, carried coins). */
#ui-root.in-solar .hud-meter, #ui-root.in-solar .chip-skip, #ui-root.in-solar .power-dock,
#ui-root.in-solar .wand-rescue, #ui-root.in-solar .chip-carry, #ui-root.in-solar .btn-down { display: none !important; }

/* ---------------- flash and the countdown ---------------- */
.solar-flash {
  position: absolute; inset: 0; pointer-events: auto; opacity: 0;
  background: radial-gradient(circle at 50% 55%, #ffffff 0%, #fff4d6 20%, var(--flash, #ffb02e) 75%);
  transition: opacity 0.26s ease;
}
.solar-flash.is-in { opacity: 1; }
.solar-flash.is-out { opacity: 0; transition-duration: 0.42s; }

.solar-launch {
  position: absolute; inset: 0; pointer-events: auto; overflow: hidden; display: grid; place-items: center;
  background: var(--stars), radial-gradient(ellipse at 50% 120%, #3a2a6e 0%, #120d33 45%, #04030f 100%);
  animation: fade-in 0.18s ease;
}
.solar-launch.is-out { animation: fade-out 0.38s ease forwards; }
.solar-launch-rocket { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); transition: transform 0.6s cubic-bezier(0.5, 0, 0.9, 0.4); }
.solar-launch-rocket svg { width: min(26vw, 140px); height: auto; filter: drop-shadow(0 10px 24px rgba(255, 150, 40, 0.45)); }
.solar-launch-rocket .sl-flame { transform-origin: 60px 168px; animation: sl-flicker 0.12s ease-in-out infinite alternate; }
.solar-launch.is-going .solar-launch-rocket { transform: translate(-50%, -120vh); }
.solar-launch:not(.is-going) .solar-launch-rocket { animation: sl-shake 0.08s linear infinite; }
.solar-count {
  font-family: var(--font-display); font-size: clamp(64px, 18vw, 170px); color: var(--sol-gold); text-shadow: var(--o-lg);
  letter-spacing: 0.02em; text-align: center; padding: 0 16px; margin-bottom: 18vh;
}
.solar-count.pop { animation: sl-pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sl-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sl-flicker { from { transform: scaleY(0.8); } to { transform: scaleY(1.15); } }
@keyframes sl-shake { 0% { margin-left: -2px; } 50% { margin-left: 2px; } 100% { margin-left: -1px; } }

/* ---------------- the chip ---------------- */
.solar-chip {
  position: absolute; left: 50%; top: calc(var(--safe-t) + 12px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 8px; max-width: calc(100vw - 32px);
  border: 1.5px solid var(--sol-line); border-radius: 999px; background: var(--sol-glass); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(0, 4, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  white-space: nowrap; animation: sol-pop-in 0.35s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.solar-chip-art { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
.solar-chip-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.solar-chip-text b { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; color: var(--sol-gold); }
.solar-chip-text span { font-size: 13px; font-weight: 600; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }
.solar-chip-btns { display: inline-flex; gap: 4px; margin-left: 4px; }
.solar-chip-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0;
  border-radius: 999px; background: rgba(127, 208, 255, 0.16); color: #fff; font: 600 14px/1 var(--font-body); cursor: pointer;
}
.solar-chip-btn:hover { background: rgba(127, 208, 255, 0.3); }
.solar-chip-btn:focus-visible { outline: 3px solid var(--sol-gold); outline-offset: 2px; }
.solar-chip-btn .icon { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .solar-chip { top: auto; bottom: calc(var(--safe-b) + 150px); }
  .solar-chip-btn > span:not(.icon) { display: none; }
  .solar-chip-btn { padding: 0 10px; }
}

/* ---------------- the caption (watching day and night) ---------------- */
.solar-caption {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 26px); transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 12px 22px; border-radius: 22px; border: 1.5px solid var(--sol-line);
  background: var(--sol-glass); font-family: var(--font-display); font-size: clamp(18px, 3.4vw, 26px); text-align: center; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); display: flex; align-items: center; gap: 14px;
}
.solar-cap-stop { pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 15px var(--font-body); cursor: pointer; text-shadow: none; }
.solar-cap-stop .icon { width: 18px; height: 18px; }

/* ---------------- cards ---------------- */
.solar-card-layer {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
}
.solar-scrim { position: absolute; inset: 0; background: rgba(3, 5, 18, 0.6); animation: fade-in 0.2s ease; }
.solar-card-layer.is-light .solar-scrim { background: rgba(3, 5, 18, 0.22); }
.solar-card-layer.is-leaving { animation: fade-out 0.2s ease forwards; }
.solar-card {
  position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 20px 22px 18px; border: 1.5px solid var(--sol-line); border-radius: 26px;
  background: radial-gradient(1.5px 1.5px at 12% 14%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 72% 8%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 88% 30%, #ffe98a 50%, transparent 52%), radial-gradient(1px 1px at 40% 4%, #fff 50%, transparent 52%),
    linear-gradient(165deg, rgba(28, 36, 86, 0.96), rgba(7, 10, 28, 0.97));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 4, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation: sol-pop-in 0.32s cubic-bezier(0.2, 1.35, 0.4, 1); outline: none;
}
.solar-card h2 { margin: 2px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 6vw, 40px); letter-spacing: 0.02em; color: #fff; line-height: 1; }
.solar-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: 0.03em; color: var(--sol-gold); }
.solar-card h3 .icon { width: 22px; height: 22px; }
.solar-card p { margin: 0 0 6px; font-size: 16.5px; line-height: 1.38; }
.solar-dim { color: var(--sol-dim); font-size: 14.5px; }
.solar-x {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--sol-line); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; z-index: 2;
}
.solar-x:hover { background: rgba(255, 255, 255, 0.18); }
.solar-x .icon { width: 22px; height: 22px; }
.solar-x:focus-visible, .solar-choice:focus-visible, .solar-grab:focus-visible, .solar-map-row:focus-visible, .solar-seg-btn:focus-visible { outline: 3px solid var(--sol-gold); outline-offset: 2px; }

.solar-head { display: flex; align-items: center; gap: 16px; margin: 0 44px 12px 0; }
.solar-head-art { flex: none; display: grid; place-items: center; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); }
.solar-head-sm .solar-head-art { width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 210, 63, 0.12); border: 1.5px solid rgba(255, 210, 63, 0.35); }
.solar-big-icon { width: 40px !important; height: 40px !important; color: var(--sol-gold); }
.solar-kicker { margin: 0 0 2px !important; font-size: 13px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sol-sky); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.solar-got { width: 16px !important; height: 16px !important; color: var(--sol-gold); }
.solar-tag { font-size: 17px !important; color: var(--sol-text); }

.solar-sec { padding: 12px 0 10px; border-top: 1px solid rgba(127, 208, 255, 0.18); }
.solar-size-art { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 6px; overflow: hidden; border-radius: 14px; }
.solar-size-art .sz-label { fill: #cfe3ff; font: 600 12px var(--font-body); }
.solar-size-art .sz-big { fill: #ffffff; stroke: #2a1300; stroke-width: 4px; paint-order: stroke; font: 400 22px var(--font-display); }

.solar-made { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.solar-made-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 16px; text-align: center;
  border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); opacity: 0.5;
}
.solar-made-opt .icon { width: 28px; height: 28px; }
.solar-made-opt b { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; }
.solar-made-opt small { font-size: 12px; color: var(--sol-dim); line-height: 1.1; }
.solar-made-opt.is-on { opacity: 1; border-color: var(--sol-gold); background: rgba(255, 210, 63, 0.14); color: #fff; box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.15); }
.solar-made-opt.is-on .icon { color: var(--sol-gold); }

.solar-temp { margin: 4px 0 10px; }
.solar-temp-bar { position: relative; height: 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(90deg, #5fb8ff 0%, #a9e4ff 26%, #7be38f 48%, #7be38f 58%, #ffb02e 78%, #ff4a2e 100%); }
.solar-temp-mark { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: #fff; border: 4px solid var(--sol-ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); animation: sol-pop-in 0.4s 0.2s both cubic-bezier(0.2, 1.5, 0.4, 1); }
.solar-temp-mark em { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font: 700 11px var(--font-body); font-style: normal; letter-spacing: 0.06em; color: #fff; }
.solar-temp-scale { display: flex; justify-content: space-between; margin-top: 6px; font: 700 11px var(--font-body); letter-spacing: 0.05em; color: var(--sol-dim); }

.solar-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid rgba(127, 208, 255, 0.18); }
.solar-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(127, 208, 255, 0.08); border: 1.5px solid rgba(127, 208, 255, 0.2); }
.solar-tile .icon { width: 24px; height: 24px; color: var(--sol-sky); }
.solar-tile b { font: 400 13px var(--font-display); letter-spacing: 0.06em; color: var(--sol-sky); }
.solar-tile strong { font: 400 22px/1.05 var(--font-display); color: #fff; }
.solar-tile span { font-size: 13.5px; line-height: 1.25; color: var(--sol-text); }

.solar-facts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 7px; }
.solar-facts li { display: flex; gap: 9px; align-items: flex-start; font-size: 16.5px; line-height: 1.33; }
.solar-facts .icon { flex: none; width: 20px; height: 20px; color: var(--sol-gold); margin-top: 2px; }

.solar-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 1px solid rgba(127, 208, 255, 0.18); }
.solar-foot .btn-big { flex: 1 1 240px; }
.solar-card .btn-big { font-size: 21px; }

/* welcome */
.solar-card-welcome { text-align: center; width: min(520px, 100%); }
.solar-card-art { display: inline-grid; place-items: center; }
.solar-list { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 9px; text-align: left; }
.solar-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16.5px; line-height: 1.3; }
.solar-list .icon { flex: none; width: 24px; height: 24px; color: var(--sol-gold); margin-top: 1px; }
.solar-go { width: 100%; }

/* quiz */
.solar-card-quiz { width: min(600px, 100%); }
.solar-quiz-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.solar-quiz-art { flex: none; }
.solar-q { font-size: clamp(24px, 5vw, 32px) !important; line-height: 1.12 !important; }
.solar-choices { display: grid; gap: 10px; }
.solar-choice {
  display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 18px 8px 10px; border-radius: 20px; text-align: left;
  border: 3px solid rgba(127, 208, 255, 0.45); background: rgba(127, 208, 255, 0.1); color: #fff; cursor: pointer;
  font: 600 20px/1.2 var(--font-body); transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.solar-choice:hover:not([disabled]) { background: rgba(127, 208, 255, 0.22); transform: translateY(-1px); }
.solar-choice:active:not([disabled]) { transform: translateY(2px); }
.solar-choice kbd { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sol-gold); color: var(--sol-ink); font: 400 20px var(--font-display); }
.solar-choice[disabled] { cursor: default; opacity: 0.55; }
.solar-choice.is-right { opacity: 1; border-color: var(--sol-green); background: rgba(77, 255, 136, 0.18); }
.solar-choice.is-right kbd { background: var(--sol-green); }
.solar-choice.is-wrong { opacity: 1; border-color: var(--sol-red); background: rgba(255, 90, 110, 0.18); }
.solar-choice.is-wrong kbd { background: var(--sol-red); color: #fff; }
.solar-feedback { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 18px; font-size: 17px; line-height: 1.35; animation: sol-pop-in 0.3s cubic-bezier(0.2, 1.35, 0.4, 1); }
.solar-feedback > .icon { flex: none; width: 28px; height: 28px; }
.solar-feedback.is-good { background: rgba(77, 255, 136, 0.14); border: 1.5px solid rgba(77, 255, 136, 0.5); }
.solar-feedback.is-good > .icon { color: var(--sol-green); }
.solar-feedback.is-bad { background: rgba(255, 90, 110, 0.12); border: 1.5px solid rgba(255, 90, 110, 0.5); }
.solar-feedback.is-bad > .icon { color: var(--sol-red); }
.solar-coins { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); color: var(--sol-gold); }
.solar-coins .icon { width: 1.1em; height: 1.1em; }
.solar-coins-big { justify-content: center; font-size: 30px !important; }
.solar-quiz-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 14px; }
.solar-quiz-foot .btn-big { flex: 1; }

/* the grab card and the Orbit Ring sit over a lighter scrim, so the planets stay in view */
.solar-card-info, .solar-card-orrery { width: min(560px, 100%); }
.solar-tiles-3 { border-top: 0; padding-top: 0; }
.solar-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1.5px solid var(--sol-line); margin-bottom: 8px; }
.solar-seg-btn { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 400 18px var(--font-display); cursor: pointer; }
.solar-seg-btn.is-on { background: var(--sol-gold); color: var(--sol-ink); }
.solar-speed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.solar-speed-val { flex: 1 1 160px; text-align: center; font: 400 18px var(--font-display); color: #fff; }
.solar-grabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-bottom: 6px; }
.solar-grab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 16px; border: 1.5px solid rgba(127, 208, 255, 0.25);
  background: rgba(127, 208, 255, 0.08); color: #fff; font: 600 14px var(--font-body); cursor: pointer; }
.solar-grab:hover { background: rgba(127, 208, 255, 0.2); }

/* map */
.solar-card-map { width: min(520px, 100%); }
.solar-map { display: grid; gap: 6px; }
.solar-map-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 18px; border: 1.5px solid rgba(127, 208, 255, 0.22);
  background: rgba(127, 208, 255, 0.07); color: #fff; cursor: pointer; text-align: left; font-family: var(--font-body); }
.solar-map-row:hover { background: rgba(127, 208, 255, 0.18); }
.solar-map-row.is-here { border-color: var(--sol-gold); }
.solar-map-name { flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.solar-map-name b { font: 400 19px var(--font-display); letter-spacing: 0.02em; }
.solar-map-name small { font-size: 13px; color: var(--sol-dim); }
.solar-map-badge { width: 26px; height: 26px; color: var(--sol-gold); display: grid; place-items: center; }
.solar-map-badge .icon { width: 24px; height: 24px; }
.solar-map-go { display: inline-flex; align-items: center; gap: 4px; font: 600 14px var(--font-body); color: var(--sol-sky); }
.solar-map-go .icon { width: 18px; height: 18px; }

/* badge stamp */
.solar-card-badge { width: min(420px, 100%); text-align: center; }
.solar-stamp { position: relative; display: inline-grid; place-items: center; margin: 4px 0 6px; animation: sol-stamp 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
.solar-stamp-ring { position: absolute; inset: -6px; border-radius: 50%; border: 6px dashed var(--sol-gold); animation: sol-spin 9s linear infinite; }
.solar-card-badge h2 { color: var(--sol-gold); text-shadow: var(--o-md); }
.solar-card-badge .btn { width: 100%; margin-top: 8px; }
@keyframes sol-stamp { from { transform: scale(2.2) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes sol-spin { to { transform: rotate(360deg); } }

@keyframes sol-pop-in { from { transform: translateX(var(--tx, 0)) scale(0.86); opacity: 0; } to { transform: translateX(var(--tx, 0)) scale(1); opacity: 1; } }
.solar-chip { --tx: -50%; }

@media (max-width: 560px) {
  .solar-card { padding: 16px 14px 14px; border-radius: 22px; }
  .solar-head { gap: 10px; }
  .solar-head-art svg { width: 76px; height: 76px; }
  .solar-tiles { grid-template-columns: 1fr; }
  .solar-made-opt small { display: none; }
  .solar-choice { font-size: 18px; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .solar-chip, .solar-card, .solar-stamp, .solar-temp-mark, .solar-feedback, .solar-count.pop { animation: none; }
  .solar-stamp-ring { animation: none; }
}