/* Sistema Solar: a separate, intentionally label-free interactive view. */
.solar-card { grid-column: span 4; }
.solar-visual { background: #0a2338; overflow: hidden; }
.solar-visual::before, .solar-visual::after { content: ''; position: absolute; border: 1px solid #b5d3df42; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.solar-visual::before { width: 182px; height: 78px; }
.solar-visual::after { width: 245px; height: 112px; }
.solar-visual b { position: absolute; width: 32px; height: 32px; left: calc(50% - 16px); top: calc(50% - 16px); border-radius: 50%; background: #ffbf5a; box-shadow: 0 0 24px #ffad438c; }
.solar-visual i { position: absolute; z-index: 2; border-radius: 50%; background: #8bd0ed; box-shadow: 0 0 9px #bdeeff82; }
.solar-visual i:nth-child(2) { width: 9px; height: 9px; left: 24%; top: 39%; background: #d9c6a7; }
.solar-visual i:nth-child(3) { width: 14px; height: 14px; left: 70%; top: 30%; background: #dfac77; }
.solar-visual i:nth-child(4) { width: 7px; height: 7px; left: 78%; top: 71%; background: #7cb9dc; }
.solar-picker { position: fixed; z-index: 31; inset: 0; display: grid; place-items: center; padding: 25px; background: #031521b8; opacity: 0; visibility: hidden; transition: .22s; }
.solar-picker.open { opacity: 1; visibility: visible; }
.solar-picker-card { position: relative; width: min(680px, 100%); padding: 47px 52px 51px; background: #071d30; color: #f7f4eb; box-shadow: 0 25px 70px #000b; }
.solar-picker-card h2 { margin: 0; font-family: Fraunces, serif; font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -1.8px; }
.solar-picker-card > p:not(.eyebrow) { margin: 15px 0 28px; color: #9ab6c0; font-size: 14px; }
.close-solar-picker { position: absolute; right: 19px; top: 15px; border: 0; background: transparent; color: #b5cbd0; font-size: 27px; }
.solar-level-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.solar-level-options button { min-height: 138px; display: flex; flex-direction: column; gap: 9px; padding: 16px; text-align: left; color: #eff7f6; background: #0c2b43; border: 1px solid #527385; transition: .15s; }
.solar-level-options button:hover { transform: translateY(-2px); background: #123c57; border-color: #80c6c4; }
.solar-level-options b { color: #f0b653; font-family: 'DM Mono', monospace; font-size: 12px; }
.solar-level-options span { font-family: Fraunces, serif; font-size: 23px; }
.solar-level-options small { margin-top: auto; color: #91afbb; font-size: 10px; line-height: 1.35; }
.solar-stage { background: #061827; }
.solar-stage .map-grid { opacity: 0; }
.solar-stage .map-hint { color: #b5cbd0; }
.solar-backdrop { fill: #061827; pointer-events: none; }
.solar-orbit, .solar-moon-orbit { fill: none; stroke: #83b8c24d; vector-effect: non-scaling-stroke; pointer-events: none; }
.solar-moon-orbit { stroke: #83b8c233; stroke-dasharray: 3 5; }
.solar-sun { fill: #ffbc53; stroke: #ffdf91; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px #f99e56); pointer-events: none; }
.solar-host { fill: #6ab5df; stroke: #d8eafb; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.solar-saturn-ring { fill: none; stroke: #e7d99f; stroke-width: 3; opacity: .85; vector-effect: non-scaling-stroke; pointer-events: none; }
.world-map .country.solar-body { fill: var(--body-color); stroke: #f5faf9; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; transition: r .15s, filter .15s; }
.world-map .solar-body.solar-static { fill: var(--body-color); stroke: #dce9e966; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.world-map .country.solar-body:hover, .world-map .country.solar-body.selected { stroke: #fff; filter: brightness(1.3) drop-shadow(0 0 6px #c9f1ee); }
.world-map .country.solar-body.correct, .world-map .country.solar-body.completed-answer { fill: #63c6a5; }
.world-map .country.solar-body.wrong { fill: #ed7066; }
@media (max-width: 1000px) and (min-width: 801px) { .solar-card { grid-column: auto; } }
@media (max-width: 800px) { .solar-card { grid-column: auto; } }
@media (max-width: 600px) { .solar-picker-card { padding: 36px 25px 29px; } .solar-picker-card h2 { font-size: 39px; } .solar-level-options { grid-template-columns: 1fr; } .solar-level-options button { min-height: 88px; } }