/* ============================================================
   Solar Puzzles product page
   Layout comes from cw.css (the shared app-page components:
   .cw-hero, .cw-store-row, .cw-shots, .cw-disclaimer, .apps-showcase);
   this file only re-tints them for the space palette and adds the
   game list.
   ============================================================ */

/* Ambient orbs in the game's colors: deep space, sun, ice giant */
.sp-page .ai-orb-1 { background: #4a3aa8; }
.sp-page .ai-orb-2 { background: #12183a; opacity: 0.9; }
.sp-page .ai-orb-3 { background: #f2a33c; opacity: 0.32; }

.sp-page .cw-badge:hover img {
    filter: drop-shadow(0 10px 24px rgba(122, 92, 255, 0.4));
}

.sp-page .cw-hero-shot::before {
    background: radial-gradient(circle, rgba(122, 92, 255, 0.3), rgba(18, 24, 58, 0.4) 45%, transparent 70%);
}

.sp-page .app-promo:hover,
.sp-page .apps-showcase-shot:hover img {
    border-color: rgba(122, 92, 255, 0.55);
}

/* ---------- Planet chips (hero) ---------- */
.sp-planet-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sp-planet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.9rem;
    font-weight: 600;
}

.sp-planet::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sp-dot);
    box-shadow: 0 0 12px var(--sp-dot);
}

.sp-planet--blocks  { --sp-dot: #3b9ae1; }
.sp-planet--rescue  { --sp-dot: #d8a05a; }
.sp-planet--portals { --sp-dot: #7dd6e8; }
.sp-planet--marbles { --sp-dot: #c1440e; }
.sp-planet--museum  { --sp-dot: #e3c16f; }

/* ---------- Screenshot strip ---------- */
.sp-shots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.sp-shot img {
    width: 240px;
    max-width: 100%;
    height: auto;
    border-radius: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.sp-shot--ipad img { width: 420px; border-radius: 1.2rem; }

.sp-shot figcaption {
    margin-top: 1rem;
    color: var(--second-text-color);
    font-size: 0.95rem;
    text-align: center;
}

/* ---------- Kid-safety facts row ---------- */
.sp-facts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: 2.5rem;
    color: var(--second-text-color);
    font-size: 0.95rem;
}

.sp-facts span strong {
    color: var(--text-color);
}

@media screen and (max-width: 1000px) {
    .sp-planet-row { justify-content: center; }
    .sp-shot--ipad img { width: 100%; max-width: 420px; }
}