/* Compact soundtrack controls beside the original wordmark. */
.brand-group{display:flex;align-items:center;gap:22px;min-width:0}
.brand-group .wordmark{flex-shrink:0}
.audio-player{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 4px;border:1px solid #3d4832;flex-shrink:0;background:#171d13}
.audio-toggle{width:28px;height:28px;display:grid;place-items:center;color:var(--acid);padding:0}
.audio-toggle svg{width:12px;height:12px;fill:currentColor}
.audio-toggle svg[hidden]{display:none}
.audio-player[data-playing=true]{border-color:#627448}
.audio-volume{appearance:none;-webkit-appearance:none;width:60px;height:28px;margin:0;cursor:pointer;background:transparent;border-radius:0}
.audio-volume::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#c9dc8f var(--volume,25%),#445037 var(--volume,25%))}
.audio-volume::-moz-range-track{height:3px;background:linear-gradient(to right,#c9dc8f var(--volume,25%),#445037 var(--volume,25%))}
.audio-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:13px;margin-top:-5px;background:#c9dc8f;border:0;border-radius:0}
.audio-volume::-moz-range-thumb{width:7px;height:13px;background:#c9dc8f;border:0;border-radius:0}
.audio-toggle:focus-visible,.audio-volume:focus-visible{outline:2px solid var(--acid);outline-offset:5px}
.studio-contact-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:10px}
.studio-contact-links a{overflow-wrap:anywhere}

/* Five mission states, from a calm blue to an open-crisis red. */
#phase-tabs{gap:8px;border:0;overflow:visible}
#phase-tabs button{--phase-color:#78b8ee;--phase-bg:#182735;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-width:0;text-align:left;border:1px solid var(--phase-color);border-bottom-width:3px;background:var(--phase-bg);color:var(--phase-color);position:relative}
#phase-tabs button[data-phase="1"]{--phase-color:#69c8cd;--phase-bg:#183031}
#phase-tabs button[data-phase="2"]{--phase-color:#e2c369;--phase-bg:#342e1c}
#phase-tabs button[data-phase="3"]{--phase-color:#eda168;--phase-bg:#38271e}
#phase-tabs button[data-phase="4"]{--phase-color:#ee817c;--phase-bg:#391f20}
#phase-tabs .phase-card-image{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;opacity:.76;transition:opacity .15s ease}
#phase-tabs .phase-card-label{display:flex;align-items:center;gap:10px;padding:15px 12px;margin:0;color:inherit}
#phase-tabs .phase-card-label>span{font-size:20px;line-height:1;font-weight:400}
#phase-tabs .phase-card-label b{font-size:9px;letter-spacing:.5px;font-weight:400}
#phase-tabs button[aria-pressed=true]{box-shadow:inset 0 -3px var(--phase-color);color:var(--phase-color)}
#phase-tabs button[aria-pressed=true]::after{content:'●';position:absolute;right:9px;top:7px;font-size:12px;color:var(--phase-color);text-shadow:0 0 5px #000}
#phase-tabs button:hover .phase-card-image,#phase-tabs button[aria-pressed=true] .phase-card-image{opacity:1}
#phase-tabs button:focus-visible{outline:2px solid var(--phase-color);outline-offset:3px;z-index:1}
.phase-detail{border-top:1px solid #475137;margin-top:12px}
.phase-scene-open{display:block;margin-top:14px;padding:7px 0;text-align:left;color:#c9d6b4;font:9px var(--mono);letter-spacing:.5px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1180px){.brand-group{gap:14px}.topbar{gap:18px}.topbar nav{gap:18px}}
@media(max-width:960px){#phase-tabs .phase-card-label{gap:7px;padding:12px 8px}#phase-tabs .phase-card-label b{font-size:8px;letter-spacing:0}}
@media(max-width:760px) and (min-width:651px){.topbar nav a[href='#partida']{display:none}.brand-group{gap:12px}.audio-volume{width:48px}}
@media(max-width:650px){
 .topbar{height:auto;min-height:106px;flex-wrap:wrap;gap:0;padding-top:14px}
 .brand-group{width:100%;justify-content:space-between;gap:12px}
 .audio-player{gap:6px;padding:2px 6px 2px 2px}
 .audio-volume{width:60px}
 .topbar nav{width:100%;justify-content:space-between;gap:14px}
 .topbar nav a,.topbar nav button{padding:15px 0 12px}
 .topbar nav a[href='#partida']{display:block}
 #phase-tabs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 3px 9px;scrollbar-width:thin;scrollbar-color:#667456 #1c2318}
 #phase-tabs button{flex:0 0 190px;scroll-snap-align:start}
 #phase-tabs .phase-card-label{padding:14px 12px;gap:10px}
 #phase-tabs .phase-card-label>span{font-size:20px}
 #phase-tabs .phase-card-label b{font-size:9px;letter-spacing:.5px}
 .studio-contact-links{flex-direction:column;gap:12px}
}
@media(prefers-reduced-motion:reduce){#phase-tabs .phase-card-image{transition:none}}