.single-player-preview { position:relative; width:100%; height:100%; background:#160f13; }
.single-player-preview video { display:block; width:100%; height:100%; object-fit:contain; }
.single-player-frozen { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.single-player-preview .single-player-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; background:#160f13; }
.single-player-preview [hidden] { display:none!important; }
.single-player-preview .single-player-start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:76px; height:76px; padding:0; border:0; border-radius:50%; background:#ff774b; color:white; cursor:pointer; }
.single-player-start:focus-visible { outline:3px solid white; outline-offset:4px; }
.single-player-triangle { width:0; height:0; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:22px solid white; margin-left:5px; }
.single-player-spinner { display:none; width:28px; height:28px; border:3px solid #ffffff60; border-top-color:white; border-radius:50%; animation:single-player-spin .8s linear infinite; }
[data-state="loading"] .single-player-triangle { display:none; }
[data-state="loading"] .single-player-spinner { display:block; }
.single-player-message { position:absolute; bottom:16px; left:12px; right:12px; margin:0; padding:10px; background:#241820e8; color:white; font-size:14px; text-align:center; border-radius:8px; }
.single-player-preview .single-player-surface { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.single-player-preview .single-player-controls { position:absolute; inset:0; background:rgb(16 12 15 / 26%); color:white; font:14px/1.3 sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; pointer-events:none; }
.single-player-seek-row { position:absolute; bottom:8px; left:8px; right:8px; display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; pointer-events:auto; text-shadow:0 1px 4px #160f13; }
.single-player-seek-row span { white-space:nowrap; font-variant-numeric:tabular-nums; }
.single-player-preview .single-player-seek-row input { flex:1 1 110px; min-width:0; max-width:100%; width:auto; height:44px; margin:0; padding:0; accent-color:white; cursor:pointer; }
/* Size to the frame itself; fullscreen exit and browser bars can both narrow it. */
.single-player-top-actions { position:absolute; top:8px; left:8px; right:8px; display:grid; grid-template-columns:44px minmax(44px,1fr) 44px; align-items:start; justify-items:center; gap:4px; }
.single-player-actions { position:absolute; top:50%; left:50%; width:calc(100% - 12px); max-width:360px; transform:translate(-50%,-50%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; justify-items:center; gap:4px; }
.single-player-preview .single-player-controls button { position:relative; display:grid; place-items:center; box-sizing:border-box; max-width:100%; flex-shrink:0; width:52px; height:52px; min-width:44px; min-height:44px; margin:0; padding:4px; border:0; border-radius:8px; background:transparent; color:white; font:inherit; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 1px 3px #160f1380); }
.single-player-preview .single-player-controls button:active { background:#ffffff25; }
.single-player-controls svg { display:block; width:100%; height:100%; }
.single-player-preview .single-player-controls [data-toggle] { width:64px; height:72px; }
.single-player-top-actions svg { width:30px; height:30px; }
.single-player-preview .single-player-controls [data-back],
.single-player-preview .single-player-controls [data-forward] { width:56px; height:64px; grid-template-rows:32px 18px; align-content:center; row-gap:3px; }
.single-player-actions .player-icon-back,
.single-player-actions .player-icon-forward { width:32px; height:32px; }
.single-player-actions button span { font-size:12px; font-weight:500; line-height:18px; letter-spacing:.02em; }
.single-player-preview:not([data-paused="true"]) .player-icon-play,
.single-player-preview[data-paused="true"] .player-icon-pause,
.single-player-preview:not([data-muted="true"]) .player-icon-muted,
.single-player-preview[data-muted="true"] .player-icon-sound { display:none; }
.single-player-preview :focus-visible { outline:3px solid #ffb59b; outline-offset:-3px; }
.single-player-preview:fullscreen { width:100%; height:100%; }
.single-player-preview { container-type:size; }
.single-player-top-actions [data-fullscreen] { grid-column:1; grid-row:1; }
.single-player-top-actions [data-mute] { grid-column:3; grid-row:1; }
.single-player-preview .single-player-controls .single-player-top-actions button { width:44px; }
.single-player-preview .single-player-controls .single-player-top-actions .single-player-quality { grid-column:2; grid-row:1; width:100%; min-width:44px; max-width:180px; padding:4px; font-size:13px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; background:rgb(22 15 19 / 65%); }
.single-player-quality-panel { position:absolute; z-index:1; inset:8px; padding:12px; overflow:auto; background:#241c22; border:1px solid #ffffff60; border-radius:10px; pointer-events:auto; }
.single-player-quality-heading { display:flex; align-items:center; justify-content:space-between; }
.single-player-quality-panel p { margin:4px 0 12px; font:14px/1.5 sans-serif; color:#fff; }
.single-player-quality-panel [data-quality-options] { display:flex; gap:8px; flex-wrap:wrap; }
.single-player-preview .single-player-quality-panel button { width:auto; max-width:100%; min-width:56px; min-height:44px; height:auto; padding:8px 10px; border:1px solid #ffffff80; font-size:14px; line-height:1.4; }
.single-player-quality-panel [aria-pressed="true"] { background:#fff!important; color:#241c22!important; }
/* Short landscape frames need distinct top / middle / seek lanes, not smaller tap targets. */
.single-player-preview[data-compact-controls="true"] .single-player-top-actions { top:2px; left:4px; right:4px; }
.single-player-preview[data-compact-controls="true"] .single-player-top-actions button { height:44px; width:44px; }
.single-player-preview[data-compact-controls="true"] .single-player-top-actions .single-player-quality { width:auto; }
.single-player-preview[data-compact-controls="true"] .single-player-controls [data-toggle],
.single-player-preview[data-compact-controls="true"] .single-player-controls [data-back],
.single-player-preview[data-compact-controls="true"] .single-player-controls [data-forward] { height:44px; width:56px; }
.single-player-preview[data-compact-controls="true"] .single-player-controls [data-back],
.single-player-preview[data-compact-controls="true"] .single-player-controls [data-forward] { grid-template-rows:22px 14px; row-gap:0; }
.single-player-preview[data-compact-controls="true"] .player-icon-back,
.single-player-preview[data-compact-controls="true"] .player-icon-forward { width:24px; height:22px; }
.single-player-preview[data-compact-controls="true"] .single-player-actions button span { font-size:11px; line-height:14px; }
.single-player-preview[data-compact-controls="true"] .single-player-seek-row { bottom:0; left:8px; right:8px; font-size:12px; gap:6px; }
@keyframes single-player-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .single-player-spinner { animation:none; } }