.playback-button{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;min-width:96px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font:var(--ui-label-weight,500) 13px/20px var(--font-mixed);cursor:pointer;touch-action:manipulation;transform-origin:center;transition:background-color var(--ui-duration-feedback,180ms) var(--ui-ease,cubic-bezier(.22,1,.36,1)),color var(--ui-duration-feedback,180ms) var(--ui-ease,cubic-bezier(.22,1,.36,1))}.playback-button:enabled:is(:hover,:focus-visible){background:var(--brand-hover,var(--brand-soft));color:var(--brand-ink)}.playback-button:focus-visible:not(:where(:root[data-input-modality=pointer] *)){outline:2px solid var(--brand-ink);outline-offset:3px}.playback-button:disabled{opacity:.45;cursor:default}.playback-button[data-icon-only]{width:44px;height:44px;min-width:0;min-height:0;padding:0}
.playback-face{display:inline-flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;line-height:20px}.playback-glyph{position:relative;display:inline-grid;place-items:center;flex:none;vertical-align:middle}.playback-glyph>span{position:absolute;inset:0;display:grid;place-items:center;transform-origin:center}.playback-glyph svg{display:block;width:100%;height:100%;fill:currentColor;stroke:none;stroke-linecap:round;stroke-linejoin:round}.playback-glyph svg :is(path,rect,line){vector-effect:non-scaling-stroke;stroke-width:1px}
.playback-label{display:inline-grid;grid-template-columns:minmax(0,1fr);height:20px;line-height:20px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 2px,#000 calc(100% - 2px),transparent)}.playback-label>span{grid-area:1/1;display:block;white-space:nowrap;text-align:center}
/* The native episode control retains its existing96×40/44px footprint. */
body.chart-system #evidence .film-controls #play .playback-glyph svg{fill:currentColor;stroke:none;width:16px;height:16px}body.chart-system #evidence .film-controls #play .playback-glyph svg :is(path,rect,line){stroke-width:1px;vector-effect:non-scaling-stroke}
@media(max-width:700px){.playback-button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.playback-button{transition:none}}

/* Explicit solid media-icon role; all other Lucide UI icons keep their stroke. */
:is(body.frogku-app,body.chart-system,body.gallery-page) .playback-glyph svg.lucide{fill:currentColor;stroke:none}