/* The sound panel. Its own file because the garage and the mountain are two
   separate pages with separate stylesheets, and one dialog should not need
   its rules written twice to appear on both. */
/* ------------------------------------------------------------ sound panel
   One button used to cycle all / engine / off, which is three states for four
   decisions - there was no way to keep the motor and halve the soundtrack. */
.sound-panel{position:fixed;inset:0;z-index:44;display:grid;place-items:center;padding:20px;
  background:#061018d9;backdrop-filter:blur(10px)}
.sound-panel.hidden{display:none}
.sound-card{width:min(420px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:20px;border-radius:13px;background:linear-gradient(155deg,#162a35f5,#0b161ef8);
  border:1px solid #9ec4d433;box-shadow:0 22px 60px #02101866}
/* Explicit placement. Auto-placement put the title and the close button in
   the same column and pushed the heading off to the side. */
.sound-head{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  align-items:start;gap:0 12px;margin-bottom:16px}
.sound-head small{grid-column:1;grid-row:1;display:block;font:800 8px/1 monospace;
  letter-spacing:.24em;color:#8fb6c6}
.sound-head h2{grid-column:1;grid-row:2;margin:8px 0 0;font:900 25px/1 Arial,sans-serif;
  letter-spacing:-.02em;color:#eaf6fb}
.sound-close{grid-column:2;grid-row:1/3;align-self:start;min-height:44px;padding:0 13px;
  border-radius:8px;cursor:pointer;white-space:nowrap;
  border:1px solid #ffffff26;background:#16242ce8;color:#dfeaef;font:800 9px/1 Arial;letter-spacing:.1em}
.sound-toggle{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:13px 14px;border-radius:9px;background:#0d1a2366;border:1px solid #ffffff14;margin-bottom:14px}
.sound-toggle strong{display:block;font:800 11px/1.3 Arial;letter-spacing:.09em;color:#e7f3f8}
.sound-toggle span{display:block;margin-top:3px;font:10px/1.4 Arial;color:#90aebd}
.sound-switch{min-width:72px;min-height:44px;border-radius:8px;cursor:pointer;
  border:1px solid #ffffff26;background:#16242ce8;color:#9db3bd;font:900 11px/1 Arial;letter-spacing:.1em}
.sound-switch.on{background:linear-gradient(130deg,#2a6d55,#1d5340);border-color:#4fd49a;color:#eafff4}
.sound-slider{display:block;padding:13px 14px;border-radius:9px;background:#0d1a2366;
  border:1px solid #ffffff14;margin-bottom:11px}
.sound-slider-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sound-slider-top span{font:800 10px/1.3 Arial;letter-spacing:.1em;color:#e7f3f8}
.sound-slider-top b{font:800 13px/1 Consolas,monospace;color:#8eeaff}
.sound-slider input{display:block;width:100%;margin:11px 0 7px;accent-color:#f2653d;height:28px}
.sound-slider small{display:block;font:9.5px/1.45 Arial;color:#88a5b4}
.sound-slider.muted{opacity:.45}
.sound-slider.muted .sound-slider-top b::after{content:' · OFF';color:#f1ad91;font-size:10px}
.sound-silence{width:100%;min-height:46px;margin-top:4px;border-radius:9px;cursor:pointer;
  border:1px solid #f2653d55;background:#2a110988;color:#ffcbb4;font:800 10px/1 Arial;letter-spacing:.11em}
@media(max-width:520px){.sound-card{padding:16px}.sound-head h2{font-size:21px}}