/* sound.css: the sound controls of Levels of the Levels (assets/levels/sound.js). A row of small round glass icon toggles
   beside Scarlet's presence: master sound (a speaker; waves on, slashed off, a small dot for Scarlet only), Scarlet (a
   voice wave), Chimes (a bell), Music (a note) and a sliders button that opens the mixer panel (the master volume, then a
   switch and a slider for each). Off until pressed; hidden in present mode, where M, V and N do the same. Icons are inline
   SVG drawn by sound.js, stroked in currentColor here. */
.lv-sound{
  position:fixed;right:16px;bottom:16px;z-index:520;
  display:flex;align-items:center;gap:8px;
  --lv-s-glass:rgba(11,20,32,.72);--lv-s-border:var(--o-reel-glass-b,rgba(255,255,255,.14));
  --lv-s-ink:var(--o-reel-ink,#e9edf2);--lv-s-ink-2:var(--o-reel-ink-2,rgba(233,237,242,.72));
  --lv-s-quiet:var(--o-reel-quiet,rgba(233,237,242,.5));--lv-s-gold:var(--o-reel-gold,#e6cf9a);
  --lv-s-mono:var(--o-reel-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  --lv-s-body:var(--o-reel-body,'Inter',system-ui,sans-serif);
}
:root{--lv-s-d:34px;--lv-s-gap:16px;--lv-s-row:210px}   /* the toggle, its gap to the being, the row's width (five toggles) */
html.is-present .lv-sound{display:none}

/* one icon toggle: a 34px glass circle with a 44px touch target (the ::before, 6px beyond the padding box), a visible focus ring, dim and slashed when off */
.lv-ctl{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;position:relative;flex:none;
  width:var(--lv-s-d);height:var(--lv-s-d);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--lv-s-border);background:var(--lv-s-glass);color:var(--lv-s-quiet);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
}
.lv-ctl::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.lv-ctl:hover{border-color:var(--lv-s-gold);color:var(--lv-s-ink)}
.lv-ctl:focus-visible{outline:2px solid var(--lv-s-gold);outline-offset:2px}
.lv-ctl[aria-pressed="true"]{border-color:var(--lv-s-gold);color:var(--lv-s-gold);background:color-mix(in srgb,var(--lv-s-gold) 14%,rgba(11,20,32,.78))}
.lv-ctl[aria-pressed="true"][data-running="false"]{border-style:dashed}   /* "on", while the audio waits for the context */
.lv-ctl[data-state="solo"]{border-color:color-mix(in srgb,#9fd6ff 55%,var(--lv-s-gold));color:#cfe9ff}
.lv-sound__mix{color:var(--lv-s-ink-2)}
.lv-sound__mix:hover,.lv-sound.is-open .lv-sound__mix{border-color:var(--lv-s-gold);color:var(--lv-s-gold)}
.lv-sound > .lv-ctl--voice,.lv-sound > .lv-ctl--mix{margin-left:4px}
html.x-nav-light .lv-ctl,html.x-nav-light .lv-mix{background:rgba(11,20,32,.94)}
html.x-nav-light .lv-ctl[aria-pressed="true"]{background:color-mix(in srgb,var(--lv-s-gold) 14%,rgba(11,20,32,.94))}
html.x-nav-light .lv-ctl:focus-visible{outline-color:#b8862f}

/* the icon: stroke 1.6, round caps, currentColor; the slash shows when off, the dot only for Scarlet only */
.lv-ic{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.lv-ic .ic-fill,.lv-ic .ic-pip{fill:currentColor}
.lv-ic .ic-pip{stroke:none}
.lv-ic .ic-slash,.lv-ic .ic-pip{display:none}
.lv-ctl[aria-pressed="false"] .ic-slash{display:inline}
.lv-ctl[aria-pressed="false"] .lv-ic > :not(.ic-slash){opacity:.55}
.lv-ctl[data-ctl="master"][data-state="off"] .ic-w1,.lv-ctl[data-ctl="master"][data-state="off"] .ic-w2,.lv-ctl[data-ctl="master"][data-state="solo"] .ic-w2{display:none}
.lv-ctl[data-ctl="master"][data-state="solo"] .ic-pip{display:inline}

/* the phone's channel toggles at the top of the panel, with a word under each */
.lv-mix__quick{display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px}
.lv-ctl--cap{width:100%;height:auto;min-height:56px;border-radius:12px;padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.lv-ctl--cap::before{inset:0;border-radius:12px}
.lv-ctl__cap{font:600 .62rem/1 var(--lv-s-mono);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}

/* the panel */
.lv-mix{
  position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 32px));
  padding:14px 16px 12px;border-radius:14px;
  background:rgba(9,14,22,.93);border:1px solid var(--lv-s-border);color:var(--lv-s-ink);
  font:500 13px/1.3 var(--lv-s-body);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:lv-mix-in .28s cubic-bezier(.2,.7,.2,1) both;
}
.lv-mix[hidden]{display:none}
@keyframes lv-mix-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lv-mix{animation:none}}
.lv-mix__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.lv-mix__title{font:600 .68rem/1 var(--lv-s-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lv-s-gold)}
.lv-mix__master{
  appearance:none;-webkit-appearance:none;margin:0;min-width:52px;height:24px;padding:0 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--lv-s-border);background:transparent;color:var(--lv-s-ink-2);
  font:600 .64rem/1 var(--lv-s-mono);letter-spacing:.14em;text-transform:uppercase;
}
.lv-mix__master[aria-checked="true"]{border-color:var(--lv-s-gold);color:var(--lv-s-gold);background:color-mix(in srgb,var(--lv-s-gold) 12%,transparent)}
.lv-mix__row{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"sw lab" "sw rg";column-gap:12px;row-gap:4px;align-items:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}
.lv-mix__row--master{grid-template-columns:1fr;grid-template-areas:"lab" "rg";border-top:0;padding-top:2px}
/* sound engine 2: the Nature level sits under Music (no switch of its own: the Music switch rules it), indented past the switch */
.lv-mix__row--sub{grid-template-columns:1fr;grid-template-areas:"lab" "rg";padding-left:42px;border-top:0;padding-top:0}
.lv-mix__row--sub[hidden]{display:none}
.lv-mix__row > .lv-mix__sw{grid-area:sw}
.lv-mix__row > .lv-mix__lab{grid-area:lab;display:flex;align-items:baseline;gap:8px;cursor:pointer}
.lv-mix__row > .lv-mix__range{grid-area:rg}
.lv-mix__row > .lv-mix__val{grid-area:lab;justify-self:end;font:500 .7rem/1 var(--lv-s-mono);color:var(--lv-s-quiet);font-variant-numeric:tabular-nums}
.lv-mix__name{font-weight:600;color:var(--lv-s-ink)}
.lv-mix__hint{font-size:.78em;color:var(--lv-s-quiet)}
.lv-mix__row[data-on="false"] .lv-mix__name,.lv-mix__row[data-on="false"] .lv-mix__range{opacity:.45}

/* a small switch */
.lv-mix__sw{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;position:relative;cursor:pointer;
  width:30px;height:18px;border-radius:999px;border:1px solid var(--lv-s-border);background:rgba(255,255,255,.05);
  transition:background-color .25s ease,border-color .25s ease;
}
.lv-mix__sw::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--lv-s-ink-2);transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s ease}
.lv-mix__sw[aria-checked="true"]{border-color:var(--lv-s-gold);background:color-mix(in srgb,var(--lv-s-gold) 22%,transparent)}
.lv-mix__sw[aria-checked="true"]::after{transform:translateX(12px);background:var(--lv-s-gold)}
.lv-mix__sw:focus-visible,.lv-mix__master:focus-visible{outline:2px solid var(--lv-s-gold);outline-offset:2px}

/* the slider: a hairline track that fills in gold to the value (--lv-fill, set through the CSSOM) */
.lv-mix__range{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer;
  --lv-fill:50%;
}
.lv-mix__range:focus{outline:none}
.lv-mix__range:focus-visible{outline:2px solid var(--lv-s-gold);outline-offset:2px;border-radius:4px}
.lv-mix__range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--lv-s-gold) 0,var(--lv-s-gold) var(--lv-fill),rgba(255,255,255,.14) var(--lv-fill))}
.lv-mix__range::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.lv-mix__range::-moz-range-progress{height:3px;border-radius:2px;background:var(--lv-s-gold)}
.lv-mix__range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:var(--lv-s-ink);border:2px solid var(--lv-s-gold)}
.lv-mix__range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--lv-s-ink);border:2px solid var(--lv-s-gold)}
.lv-mix__keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:8px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);color:var(--lv-s-quiet);font-size:.74rem}
.lv-mix__keys kbd{font:600 .66rem/1 var(--lv-s-mono);padding:3px 6px;border-radius:5px;border:1px solid var(--lv-s-border);color:var(--lv-s-ink-2)}
.lv-mix__keys span{margin-right:6px}
.lv-mix__note{margin:8px 0 0;color:var(--lv-s-quiet);font-size:.74rem}
.lv-mix__note[hidden]{display:none}
@media (hover:none),(pointer:coarse){.lv-mix__keys{display:none}}
/* below 1280px the row keeps master, Scarlet and the mixer; Chimes and Music move to the top of the panel (on a phone too) */
@media (max-width:1279px){
  :root{--lv-s-row:126px}
  .lv-sound > .lv-ctl--fx,.lv-sound > .lv-ctl--music{display:none}
  .lv-mix__quick{display:grid}
}
@media (max-width:480px){
  :root{--lv-s-gap:12px}
  .lv-sound{right:12px;bottom:12px}
}
/* the captions and Scarlet's subtitles never share pixels with the row (6 Nov 2026): from 900px, with the being on, the
   caption stack stops short of the row's left edge (its words centre in what is left, a little left of the stage) */
:root{--lv-s-reach:calc(var(--sp-right,16px) + var(--sp-core,84px) + var(--lv-s-gap) + var(--lv-s-row) + 12px)}
@media (min-width:900px){
  html[data-presence="on"]:not(.is-present) .x-capstack{box-sizing:border-box;padding-right:var(--lv-s-reach)}   /* once voice.js has wrapped the caption */
  html[data-presence="on"]:not(.is-present) .o-shot__pin > .o-shot__caption{margin-right:var(--lv-s-reach)}   /* before it has */
  /* the narrower measure can add a line to the longest captions: a touch smaller and tighter keeps them inside their room */
  html[data-presence="on"]:not(.is-present) .o-shot__caption{font-size:calc(clamp(1.05rem,.72rem + 1.25vw,1.95rem) * .92);line-height:1.22}
}
@media (prefers-reduced-motion:reduce){.lv-ctl{transition:none}}

/* Scarlet's presence (assets/presence/presence.css) holds the corner: the being sits at the bottom right and the icon row
   and mixer sit beside it, on its centre line, with a clear gap so nothing crowds her or her rings. The master icon wears
   a small dot after her first press ('Scarlet only'). In present mode the row is hidden and the being moves into the
   stage's corner, above the letterbox bars (905) and under the laser (978) and B's blackout (980): Sim clicks it live. */
html[data-presence="on"] .lv-sound{
  right:calc(var(--sp-right,16px) + var(--sp-core,84px) + var(--lv-s-gap));
  bottom:calc(var(--sp-bottom,16px) + (var(--sp-core,84px) - var(--lv-s-d)) / 2);
}
html[data-presence="on"] .lv-mix{box-sizing:border-box;width:min(320px,calc(100vw - var(--sp-right,16px) - var(--sp-core,84px) - var(--lv-s-gap) - 16px))}
html.is-present .sp-presence{
  --sp-z:950;--sp-core:76px;
  --sp-right:calc(var(--o-stage-x,0px) + 18px);--sp-bottom:calc(var(--o-stage-y,0px) + 18px);
}