/* ===================================
   GRUNDLÄGGANDE OCH STJÄRNHIMMEL
   =================================== */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    
    /* --- NY, MER SLUMPMÄSSIG STJÄRNHIMMEL (Gradient-metod) --- */
    background-color: #0f0f1a; /* Grundfärg */
    background-image: 
        /* 1. Tätt "stjärndamm" (pyttesmå, svagt blå) */
        radial-gradient(circle, rgba(200, 220, 255, 0.4) 0.5px, transparent 0.5px),
        /* 2. Små vita stjärnor (annat mönster) */
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
        /* 3. Små gula stjärnor (glesare) */
        radial-gradient(circle, rgba(255, 240, 200, 0.6) 1px, transparent 1px),
        /* 4. Mellanstora vita stjärnor (ännu glesare) */
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),
        /* 5. Några få större blå stjärnor (väldigt glesa) */
        radial-gradient(circle, rgba(200, 240, 255, 0.8) 2px, transparent 2px);
    
    /* Använd stora, olika primtal för att förhindra uppenbara mönster */
    background-size: 
        31px 37px,    /* Lager 1 (tätt) */
        83px 71px,    /* Lager 2 */
        137px 149px,  /* Lager 3 */
        283px 311px,  /* Lager 4 (glesare) */
        503px 449px;  /* Lager 5 (väldigt glesa) */
    
    background-position: 
        10px 20px, 50px 80px, 100px 30px, 200px 150px, 400px 300px;
    
    /* Animation (längre tid för långsammare parallax) */
    animation: move-stars 180s linear infinite;
    /* --- SLUT STJÄRNHIMMEL --- */
}

/* 4. Animation för drift */
@keyframes move-stars {
    from { 
        background-position: 
            10px 20px,    /* 1 */
            50px 80px,    /* 2 */
            100px 30px,   /* 3 */
            200px 150px,  /* 4 */
            400px 300px;  /* 5 */
    }
    to   { 
        /* Flytta lagren med olika hastighet för parallax */
        background-position: 
            -90px 120px,   /* 1. Snabbast */
            30px 110px,    /* 2. Medium-snabb */
            110px -20px,   /* 3. Långsamt (annan riktning) */
            180px 100px,   /* 4. Långsammare */
            405px 290px;   /* 5. Långsammast */
    }
}


/* ===================================
   SPELARENS STILAR (Dina fungerande stilar)
   =================================== */

.player-container { text-align: center; }
h2 { font-weight: 300; letter-spacing: 1px; margin-bottom: 5px; }
p { font-size: 0.9em; color: #aaa; margin-top: 0; }

.solar-system-player {
    position: relative;
    width: 600px; height: 600px;
    margin: 40px auto;
}

.orbit-container {
    position: absolute; inset: 0;
    z-index: 1;
}

.orbit-path {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.sun {
    position: absolute; top: 50%; left: 50%;
    width: 150px; height: 150px;
    background: radial-gradient(circle at 60% 30%, #fff7e6 0%, #ffecb3 20%, #ffc107 60%, #ff8800 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px #ffc107, 0 0 60px #ff8800, 0 0 100px rgba(255, 140, 0, 0.5);
    overflow: hidden;
    z-index: 10;
}

.sun img {
    width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease;
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 80%);
    mask-image: radial-gradient(circle, black 60%, transparent 80%);
}

.sun-title-overlay {
    position: absolute; inset: 0; display: flex;
    justify-content: center; align-items: center;
    background-color: rgba(0, 0, 0, 0.75); 
    opacity: 0; transition: opacity 0.3s ease;
    padding: 15px; box-sizing: border-box; pointer-events: none;
}

.scroll-wrapper {
    width: 100%; max-height: 100%;
    overflow-y: hidden; text-align: center;
}
.sun-title-overlay.is-long-text .scroll-wrapper {
    overflow-y: auto; text-align: left;
}
#sun-episode-title {
    color: white; font-size: 0.9em; font-weight: 600; line-height: 1.3;
    display: block; width: 100%; max-width: 100%;
    white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
}
.sun-title-overlay.is-long-text #sun-episode-title {
    font-size: 0.8em; font-weight: normal; line-height: 1.4;
}
.sun.is-darkened img { filter: brightness(0.3); }
.sun.is-darkened .sun-title-overlay { opacity: 1; }

.planet-container {
    position: absolute; inset: 0;
    z-index: 5;
    pointer-events: none;
}

.planet {
    position: absolute; border-radius: 50%; background-color: #667eea; cursor: pointer;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.7), inset 0 0 20px 15px rgba(0,0,0,0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    background-size: cover; background-position: center; transform-origin: center; opacity: 0.8;
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
    mask-image: radial-gradient(circle, black 70%, transparent 100%);
    z-index: 6;
    pointer-events: auto;
}

.planet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(102, 126, 234, 1), inset 0 0 20px 15px rgba(0,0,0,0.9);
    opacity: 1; filter: brightness(1.1);
    z-index: 7;
}

.planet.is-ghosted {
    opacity: 0.15 !important; filter: grayscale(100%) brightness(0.5) !important;
    pointer-events: none !important; transform: scale(1) !important; box-shadow: none !important;
    z-index: 2 !important;
}

.planet::after,
.orbiting-planet::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
    --base-highlight-x: 30%; --base-highlight-y: 30%; --specular-highlight-x: 25%; --specular-highlight-y: 25%;
    --base-shadow-x: 75%; --base-shadow-y: 75%; --mouse-offset-x: 0px; --mouse-offset-y: 0px;
    background:
        radial-gradient(circle at calc(var(--specular-highlight-x) + var(--mouse-offset-x)) calc(var(--specular-highlight-y) + var(--mouse-offset-y)), rgba(255, 255, 255, 0.8) 2%, transparent 15%),
        radial-gradient(circle at calc(var(--base-highlight-x) + var(--mouse-offset-x)) calc(var(--base-highlight-y) + var(--mouse-offset-y)), rgba(255, 255, 255, 0.35), transparent 50%),
        radial-gradient(circle at calc(var(--base-shadow-x) + var(--mouse-offset-x)) calc(var(--base-shadow-y) + var(--mouse-offset-y)), rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.95) 60%, transparent 70%),
        radial-gradient(circle at calc(var(--base-shadow-x) + var(--mouse-offset-x)) calc(var(--base-shadow-y) + var(--mouse-offset-y)), rgba(255, 255, 255, 0.08) 60%, transparent 80%);
}
.planet-image-layer {
    position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center;
    border-radius: 50%; transform-origin: center center;
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
    mask-image: radial-gradient(circle, black 70%, transparent 100%);
    z-index: 0;
    background-color: #ff00ff;
}

.play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; background: transparent; border: none; padding: 0;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
    z-index: 8;
    pointer-events: none;
}

.play-button svg { width: 100%; height: 100%; fill: white; }
.planet:hover .play-button { opacity: 1; }

.orbiting-planet-wrapper {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    pointer-events: none;
}

.orbiting-planet {
    position: absolute; top: 50%; left: 100%; border-radius: 50%; background-color: #1a1a2e;
    box-shadow: 0 0 20px #504e58, 0 0 40px #b1aab8, inset 0 0 20px 15px rgba(0,0,0,0.9);
    cursor: grab; z-index: 26; pointer-events: auto; overflow: hidden;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    -webkit-user-drag: none;
}
.orbiting-planet:active { cursor: grabbing; }

.orbit-control-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; background: transparent; border: none; padding: 0;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
    z-index: 27;
    pointer-events: auto;
}

.orbiting-planet:hover .orbit-control-button { opacity: 1; }
.orbiting-planet.is-playing .orbit-control-button .svg-play { display: none; }
.orbiting-planet.is-playing .orbit-control-button .svg-pause { display: block; }
.orbiting-planet:not(.is-playing) .orbit-control-button .svg-play { display: block; }
.orbiting-planet:not(.is-playing) .orbit-control-button .svg-pause { display: none; }

.progress-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none; overflow: visible;
}

.progress-circle { transition: stroke-dashoffset 0.1s linear; }

.episode-info { margin-top: 20px; height: 40px; font-size: 0.9em; color: #aaa; }