/* LS-013 private preview (playable simplified episode): additions to the POC stylesheet (ls013-poc/ls-013.css, unchanged). */
.ls13-screen-l .ls13-dest{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:16px;font-weight:400;color:var(--ink);line-height:1.3}
.ls13-screen-l .ls13-dest:first-child{font-size:16px;font-weight:400;margin-bottom:6px}
.ls13-dest svg{flex:0 0 34px;width:34px;height:34px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ls13-dest.is-odd{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,63,208,.55);color:#ff7fe0}
.ls13-dest.is-odd svg{stroke:#ff3fd0}
.ls13-call{position:absolute;z-index:3;right:14px;top:calc(var(--ls-ht,0px) + 10px);display:grid;gap:2px;padding:10px 14px 10px 46px;border-radius:10px;border:1px solid rgba(47,111,106,.8);
  background:rgba(10,24,32,.86) radial-gradient(circle at 22px 50%,#2f6f6a 0 11px,transparent 12px);color:var(--ink);font-size:13px;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.ls13-call[hidden]{display:none}
.ls13-call span{color:var(--muted);font-size:11px;letter-spacing:.04em}
.ls13-call.is-speaking{border-color:#58dcf8;box-shadow:0 0 0 2px rgba(88,220,248,.35),0 6px 22px rgba(0,0,0,.4)}
.ls13-fact{margin:10px 0;padding:8px 10px;border-left:3px solid var(--line)}
.ls13-fact.is-you{border-left-color:var(--gold)}
.ls13-fact ul{margin:4px 0 0 18px;padding:0;font-size:13px;line-height:1.45;color:var(--body)}
.ls13-tide{margin:12px 0}
.ls13-tide h4{margin:0 0 8px;font-size:13px}
.ls13-grade{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:8px}
.ls13-grade-l{margin:0;font-size:56px;font-weight:300;line-height:1;color:var(--gold)}
.ls13-checks{margin:10px 0;padding:0 0 0 18px;font-size:14px;line-height:1.5}
.ls13-checks .is-ok::marker{content:'✓ ';color:#7fe0b0}
.ls13-checks .is-no::marker{content:'✗ ';color:#ff8a7a}
@media (max-width:560px){.ls13-call{right:8px;top:8px;font-size:12px;padding:8px 10px 8px 40px}.ls13-dest svg{flex-basis:26px;width:26px;height:26px}.ls13-screen-l .ls13-dest{font-size:14px}}
/* phones: the shared stylesheet hides Advanced (the live episodes move it into a menu this page does not have). Here the
   toolbar is two rows of three, Advanced (playback speed 0.5x / 1x / 2x) shows, and its panel opens inline below it (a floating panel landed off-screen). */
@media (max-width:560px),(max-width:980px) and (max-height:500px) and (orientation:landscape){
  .ls-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ls-adv{display:block;min-width:0}
  .ls-adv>summary{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;cursor:pointer}
  .ls-adv[open]{grid-column:1/-1}
  .ls-adv-panel{position:static;width:auto;margin-top:6px;box-shadow:none}
  .ls-adv-row .ls-tb{min-width:64px}
}
/* landscape phones: the toolbar is the 44px icon column on the scene's left edge (shared stylesheet). Sound and Advanced
   show an icon (their words stay as accessible names), CC shows "CC" (its On/Off state is the pressed style and is still
   read out), and the Advanced panel opens beside the column instead of inside it. */
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  .ls-bar .ls-snd-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ls-bar #ls13-cc{font-size:0;padding:0}
  .ls-bar #ls13-cc::before{content:"CC";font-size:12px;margin:0;letter-spacing:.04em}
  .ls-bar #ls13-cc .ls13-cc-v{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-size:12px}
  .ls-bar .ls-adv{width:44px}
  .ls-bar .ls-adv>summary{width:44px;padding:0;font-size:0}
  .ls-bar .ls-adv>summary::before{content:"\22EF";font-size:20px;line-height:1}
  .ls-bar .ls-adv>summary::after{content:none}
  .ls-bar .ls-adv-panel{position:fixed;z-index:12;left:calc(66px + env(safe-area-inset-left));top:auto;bottom:12px;width:min(300px,60vw);margin:0;background:rgba(5,9,20,.98);box-shadow:0 18px 40px rgba(0,0,0,.5)}
}
/* landscape phones: captions and speech bubbles centre on the visible scene (right of the icon column), not under the column */
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  .ls13-cc{left:calc(var(--ls-hl,0px) + (100% - var(--ls-hl,0px)) / 2);max-width:calc(100% - var(--ls-hl,0px) - 16px);box-sizing:border-box}
  .ls13-say.is-docked{left:calc(var(--ls-hl,0px) + (100% - var(--ls-hl,0px)) / 2)!important;max-width:calc(100% - var(--ls-hl,0px) - 16px);box-sizing:border-box}
}