.selected-scene{padding:1rem 1.25rem;margin:1rem 0;background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;overflow-wrap:anywhere;scroll-margin-top:12rem}
.selected-scene h2{font-size:1.2rem;margin:.25rem 0 .75rem}
.selected-scene p{margin:.35rem 0}
.selected-scene-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.75rem}
.selected-scene-actions a,.selected-scene-actions button{min-height:44px;display:inline-flex;align-items:center}
.selected-scene-actions button{font:inherit;padding:.4rem .75rem;background:var(--surface);color:var(--accent);border:1px solid var(--line-strong);border-radius:6px;cursor:pointer}
.selected-scene input{box-sizing:border-box;width:100%;min-height:44px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong)}
.selected-scene:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:79.99rem){.selected-scene{scroll-margin-top:6rem}}
.ep-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ep-nav .btn{justify-content:center;text-align:center;padding-inline:.4rem}
.share-link{font:inherit;min-height:44px;padding:.4rem 0;margin-left:.5rem;color:var(--accent);background:none;border:0;text-decoration:underline;cursor:pointer}
.share-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.player-facade{position:absolute;inset:0;display:block;background:#000}
.player-facade img{display:block;width:100%;height:100%;object-fit:cover}
.player-facade svg{position:absolute;left:50%;top:50%;margin:-24px 0 0 -34px;transition:transform .15s}
.player-facade:hover svg{transform:scale(1.08)}
.player-facade:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.player-facade svg{transition:none}}
/* Episode scene list as a timeline: the start time leads, then title, details and actions. */
.ep-scenes .moment-head{display:flex;flex-direction:column}
.ep-scenes .moment-meta{order:-1;margin:0 0 .15rem}
.ep-scenes .moment-links{gap:.25rem .75rem;align-items:center}
.ep-scenes .moment-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
/* Phone: tighter card. Timestamp stays first, targets stay 44px; only padding, gaps and snippet length shrink. */
@media(max-width:47.999rem){
.ep-scenes .moment{padding:.55rem .75rem}
.ep-scenes .moment-title{margin:0 0 .1rem}
.ep-scenes .snippet{margin:.25rem 0;padding:.15rem .6rem;-webkit-line-clamp:2}
.ep-scenes .moment-links{margin-top:.1rem;gap:0 .5rem}
.ep-scenes .moment-links a:not(.btn){font-size:.875rem}
}
@media(min-width:48rem){
.ep-scenes .moment{display:grid;grid-template-columns:9rem minmax(0,1fr);column-gap:1.25rem;align-items:start}
.ep-scenes .moment-head{display:contents}
.ep-scenes .moment-meta{grid-column:1;grid-row:1/span 4;flex-direction:column;align-items:flex-start;margin:0}
.ep-scenes .moment-title,.ep-scenes .snippet,.ep-scenes .moment-details,.ep-scenes .moment-links{grid-column:2}
}