.playback-extras{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .75rem}
.playback-extra-button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.45rem .75rem;white-space:nowrap}
.playback-extra-button:focus-visible,.playback-extras-dialog button:focus-visible{outline:3px solid var(--accent,#b88aff);outline-offset:2px}
.playback-extra-button:disabled{opacity:.55;cursor:not-allowed}
.playback-extra-icon{display:inline-flex;align-items:center;justify-content:center;gap:.25rem}
.playback-extra-icon svg{width:1.15rem;height:1.15rem}
.playback-extra-button[data-remaining]:not([data-remaining=""])::after{content:attr(data-remaining);font-size:.8rem}
.playback-extra-button[aria-pressed="true"]{border-color:var(--accent,#b88aff);color:var(--accent,#b88aff)}
.playback-extras-backdrop{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:1rem;background:rgba(8,5,13,.78)}
.playback-extras-dialog{width:min(100%,28rem);max-height:90%;overflow:auto;display:flex;flex-direction:column;gap:.65rem;padding:1.25rem;border:1px solid rgba(255,255,255,.16);border-radius:1rem;background:#171221;color:#fff;box-shadow:0 1.5rem 5rem rgba(0,0,0,.5)}
.playback-extras-dialog h2{margin:0;font-size:1.25rem}
.playback-extras-dialog p{margin:0 0 .25rem;color:#ded6ea;line-height:1.5}
.playback-extras-dialog button{min-height:44px;text-align:left}
@media(max-width:600px){.playback-extras{gap:.35rem}.playback-extra-button{min-height:44px;padding:.45rem .6rem}.playback-extras-dialog{padding:1rem}}