/* Earth Plus FM 1.1 — the orbit scene and its surrounding player surface. */
:root {
    --cosmos-cyan: #83dfef;
    --cosmos-violet: #b4a5ff;
    --cosmos-ink: #0b1221;
}

.ambient-background i {
    background: radial-gradient(ellipse, #2739632e, transparent 66%);
}

.ambient-background i + i {
    background: radial-gradient(ellipse, #29524b1e, transparent 66%);
}

.site-header { min-height: 96px; }
.intro-row { padding: 28px 0 27px; }
.intro-row h1 { color: #f5f7ff; }
.intro-description { color: #9ba9be; }

.player-shell {
    border-color: #93b1da2c;
    background:
        radial-gradient(ellipse at 48% 26%, #20344e40, transparent 58%),
        radial-gradient(ellipse at 0 0, #6a6ea41a, transparent 44%),
        linear-gradient(155deg, #151d30, #0e1727 53%, #101827);
    box-shadow: 0 25px 90px #00000035, 0 0 70px #6279cc09, inset 0 1px 0 #d9e8ff08;
}

.player-shell::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bcafff60, #99d7da55, transparent);
    pointer-events: none;
}

.player-topline { padding-top: 20px; }
.station-badge {
    border-color: #b6d4c226;
    background: linear-gradient(135deg, #c9edb40c, #7babc005);
    box-shadow: inset 0 1px 0 #ffffff05;
}
.station-badge > .icon { color: #c6ed9f; }
.player-top-actions .icon-button { color: #a2b2c9; }
.player-top-actions .icon-button:hover { background: #a4b5d610; color: #d0efaf; }

.player-scene {
    height: 306px;
    flex: 0 0 auto;
    isolation: isolate;
    contain: layout paint;
    background:
        radial-gradient(ellipse at 50% 45%, #374b6219, transparent 58%),
        radial-gradient(ellipse at 63% 52%, #54468913, transparent 47%);
}

.scene-grid { opacity: .24; }
.scene-halo {
    width: min(520px, 95%);
    height: 300px;
    background: radial-gradient(ellipse, #74c6dc0f, #9b8dda0a 42%, transparent 70%);
    opacity: .7;
    transition: opacity 1.3s;
}
.is-playing .scene-halo { opacity: 1; }

.cosmos-canvas {
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .65s ease;
}
.cosmos-ready .cosmos-canvas { opacity: 1; }
.radio-orbit { transition: opacity .5s ease; }
.cosmos-ready .radio-orbit { opacity: 0; visibility: hidden; }
.cosmos-ready .radio-orbit * { animation: none !important; }

.scene-caption {
    z-index: 3;
    left: 30px;
    right: 30px;
    top: 46%;
    color: #9eafd038;
    font-size: 8px;
    letter-spacing: .32em;
}
.spectrum {
    z-index: 3;
    bottom: 3px;
    height: 23px;
    gap: 4px;
    opacity: .45;
    transition: opacity .7s;
}
.is-playing .spectrum { opacity: .9; }
.spectrum i { background: #b7e9ac8c; }
.spectrum i:nth-child(4n) { background: #a3b4ed9c; }

.track-information { min-height: 122px; }
.current-artist { color: #bac7dc; }
.current-title {
    color: #f2f6ff;
    text-shadow: 0 0 32px #c1cfff0b;
    letter-spacing: -.045em;
}
.track-status { color: #93a4bd; }
.live-pill { color: #bfd7b0; }
.track-label {
    border-color: #a5b8e424;
    color: #a5b9da;
    background: #91abda09;
}

.play-button {
    position: relative;
    background: linear-gradient(145deg, #ddffb0, #b5ed74);
    box-shadow: 0 0 0 7px #bff38c08, 0 0 0 8px #bff38c0a, 0 9px 30px #b5ed7612;
}
.play-button::after {
    content: '';
    position: absolute;
    inset: -12px;
    border: 1px solid #c8f58c17;
    border-top-color: #d5fba45c;
    border-right-color: #9ce1d54a;
    border-radius: 50%;
    pointer-events: none;
    animation: control-orbit 14s linear infinite;
    animation-play-state: paused;
}
.is-playing .play-button::after { animation-play-state: running; }
.play-button:hover:not(:disabled) {
    background: linear-gradient(145deg, #edffd6, #c5f38a);
    box-shadow: 0 0 0 8px #c8f58c0b, 0 0 50px #b6ed762b;
}
.skip-button { color: #b1c1da; }
.player-bottomline { background: #070e191f; border-top-color: #93acc615; }

.reaction-button { border-color: #a6bed41b; background: #a4b8cd05; }
#like-button { color: #b7d8a5; }
#dislike-button { color: #cba5b5; }
#like-button:hover:not(:disabled), #like-button[aria-pressed=true] {
    color: #d2f4b7;
    border-color: #b7ef8952;
    background: linear-gradient(140deg, #b9ec8b22, #76bda40e);
    box-shadow: 0 0 18px #b8ec870b;
}
#dislike-button:hover:not(:disabled), #dislike-button[aria-pressed=true] {
    color: #ffbfce;
    border-color: #e898b05a;
    background: linear-gradient(140deg, #e798b022, #bd839410);
    box-shadow: 0 0 18px #e798b00b;
}
.star-stat { color: #ceba83; }
.star-stat .icon { color: #e6c480; }
.score-stat strong { color: #b7d7c8; }
.motion-button { color: #9aabc4; }

.panel { border-color: #9ab5d21a; box-shadow: inset 0 1px 0 #d5e3ff04; }
.station-card.is-selected {
    border-color: #bcdb9e42;
    background: linear-gradient(105deg, #bde39113, #86b6ba06);
    box-shadow: inset 0 1px 0 #d5eab805, 0 5px 20px #050a150f;
}
.station-card.is-playing { border-color: #c7ec9b66; }
.station-card.is-selected::before { box-shadow: 0 0 12px #bff18a7a; }
.station-card:hover { background-color: #a4b5d108; }
.history-time { color: #9aaac3; }
.history-artist { color: #a8b8cf; }
.history-title { color: #e0e7f4; }
.app-card, .project-link { transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }

@media (hover: hover) and (pointer: fine) {
    .app-card:hover { transform: translateY(-4px); border-color: #b5c9e033; box-shadow: 0 15px 40px #01061340; }
    .project-link:hover { transform: translateY(-2px); box-shadow: 0 10px 25px #01061333; }
}

@keyframes control-orbit { to { transform: rotate(360deg); } }

@media (min-width: 981px) {
    .player-shell { min-height: 700px; }
    .stations-panel { height: 700px; }
}
@media (min-width: 981px) and (max-height: 850px) {
    .site-header { min-height: 80px; }
    .intro-row { padding: 24px 0; }
    .player-shell { min-height: 628px; }
    .stations-panel { height: 628px; }
    .player-scene { height: 252px; }
    .track-information { min-height: 110px; }
}
@media (min-width: 1600px) and (min-height: 851px) {
    .player-scene { height: 328px; }
    .player-shell { min-height: 720px; }
    .stations-panel { height: 720px; }
}
@media (max-width: 980px) {
    .site-header { min-height: 88px; }
    .player-scene { height: 318px; }
}
@media (max-width: 720px) {
    .site-header { min-height: 78px; }
    .intro-row { padding: 25px 0 24px; }
    .player-topline { padding-top: 18px; }
    .player-scene { height: 282px; }
    .scene-caption { left: 22px; right: 22px; font-size: 7px; }
    .track-information { min-height: 122px; }
    .spectrum { gap: 3px; }
    .play-button::after { inset: -10px; }
}
@media (max-width: 440px) {
    .site-header { min-height: 76px; }
    .player-topline { padding-top: 16px; }
    .player-scene { height: 268px; }
    .scene-caption { display: none; }
    .track-information { min-height: 115px; }
    .spectrum { opacity: .35; }
}
@media (max-width: 360px) {
    .player-scene { height: 242px; }
    .spectrum { max-width: 65%; }
}
.player-shell:fullscreen .player-scene { height: min(43dvh, 470px); }
.player-shell:fullscreen { background: radial-gradient(ellipse at 50% 30%, #20304b, #0b1221 67%); }

/* The native controls keep their meaning in every motion/contrast mode. */
.motion-paused .play-button::after, .document-hidden .play-button::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .cosmos-canvas, .radio-orbit, .scene-halo, .spectrum, .app-card, .project-link { transition: none; }
    .play-button::after { animation: none; }
    .app-card:hover, .project-link:hover { transform: none; }
}
@media (prefers-contrast: more) {
    .track-status, .current-artist, .history-time, .history-artist { color: #c4d0e2; }
    .scene-caption { color: #9eafd060; }
}
@media (forced-colors: active) {
    .player-shell::before, .play-button::after { display: none; }
    .player-shell, .play-button { background: Canvas; box-shadow: none; }
    .current-title, .current-artist, .track-status, .history-title, .history-artist, .history-time,
    .reaction-button, #like-button, #dislike-button, .star-stat, .star-stat .icon { color: CanvasText; }
}
@media print {
    .player-shell { background: white; box-shadow: none; }
    .player-shell::before, .cosmos-canvas { display: none; }
    .current-title, .current-artist, .history-title, .history-artist, .history-time { color: #111; text-shadow: none; }
}