/* Planet environments and the persistent music/effects mixer. */
body { --scene-accent: #efac75; }
body[data-planet="earth"] { --scene-accent: #7ddedb; }
body[data-planet="uranus"] { --scene-accent: #a9c8ff; }
#bg { opacity: 1; background-image: none !important; background: #090c1b; overflow:hidden; }
#bg .planet-backdrop { position:absolute; inset:0; background-size:cover; background-position: center; opacity:0; transition:opacity .8s ease; }
#bg .planet-backdrop.is-active { opacity:1; }
#bg::after { background:linear-gradient(180deg,rgba(6,9,22,.13),rgba(7,6,20,.22) 42%,rgba(7,6,20,.8)),radial-gradient(ellipse at 47% 48%,rgba(7,6,20,.30),transparent 72%); }
#bg .planet-backdrop[data-planet="mars"] { background-image:url('../assets/backgrounds/mars.png'); }
#bg .planet-backdrop[data-planet="earth"] { background-image:url('../assets/backgrounds/earth.png'); }
#bg .planet-backdrop[data-planet="uranus"] { background-image:url('../assets/backgrounds/uranus.png'); }
.environment-caption { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:var(--scene-accent); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.environment-caption::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.sound-panel { border:1px solid var(--line-2,#44354e); background:rgba(10,9,25,.82); border-radius:9px; padding:15px; margin-top:20px; color:#f2ece0; backdrop-filter:blur(12px); }
.sound-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:1.6px; color:#c1bdcf; }
.sound-heading svg { width:14px; height:14px; vertical-align:middle; margin-right:5px; }
.sound-indicator { display:flex; gap:3px; align-items:center; height:14px; color:var(--scene-accent); }
.sound-indicator i { width:2px; height:4px; background:currentColor; }
.sound-indicator i:nth-child(2),.sound-indicator i:nth-child(4) { height:9px; }
.sound-indicator i:nth-child(3) { height:13px; }
body[data-audio="playing"] .sound-indicator i { animation:sound-meter 1.2s ease-in-out infinite alternate; }
body[data-audio="playing"] .sound-indicator i:nth-child(even) { animation-delay:-.7s; }
@keyframes sound-meter { to { transform:scaleY(.35); } }
.sound-track { font-size:15px; font-weight:600; margin:9px 0 15px; color:var(--scene-accent); letter-spacing:.4px; }
.sound-row { display:grid; grid-template-columns:48px minmax(30px,1fr) 33px; align-items:center; gap:9px; margin:8px 0; font-size:11px; }
.sound-row output { text-align:right; font-variant-numeric:tabular-nums; color:#c1bdcf; }
.sound-row input { accent-color:var(--scene-accent); cursor:pointer; width:100%; height:24px; margin:0; min-width:0; }
.sound-row input:focus-visible { outline:2px solid var(--scene-accent); outline-offset:4px; border-radius:3px; }
.sound-note { margin:9px 0 0; font-size:10px; line-height:1.5; color:#c1bdcf; }
.sound-note button { border:0; color:var(--scene-accent); background:transparent; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }
#muteBtn[aria-pressed="true"] { color:#f2afaa; }
.mission:focus-visible { outline:2px solid white; outline-offset:4px; }
@media(max-width:1099px) { .sound-panel { max-width:420px; width:100%; margin:12px auto 0; } #bg .planet-backdrop { background-position:68% center; } }
@media(prefers-reduced-motion:reduce) { #bg .planet-backdrop { transition:none; } .sound-indicator i { animation:none !important; } body.shake { animation:none; } }

@font-face{font-family:'Chakra Petch';src:url('../assets/fonts/chakra-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Chakra Petch';src:url('../assets/fonts/chakra-700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Bungee';src:url('../assets/fonts/bungee-400.woff2') format('woff2');font-weight:400;font-display:swap;}

.sound-heading { cursor:pointer; list-style:none; min-height:16px; }
.sound-heading::-webkit-details-marker { display:none; }
.sound-heading:focus-visible { outline:2px solid white; outline-offset:5px; }
.sound-panel:not([open]) .sound-heading>span:first-child::after { content:" +"; color:var(--scene-accent); }
@media(max-width:1099px) {
  #comm { position:static; justify-content:center; align-items:center; margin-top:4px; }
  #comm .comm-frame { width:76px; height:76px; }
  #comm .bubble { margin-top:0; }
  .footnote { padding-bottom:24px; }
}