/* ── Chunk row ── */
  .chunk-row {
    background: var(--bg);
    border: 1px solid var(--surface-2);
    border-left: 0;
    border-radius: 6px;
    padding: 6px 12px 6px 22px;     /* extra left padding leaves room for the layout track */
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;             /* anchor for ::before track and ::after playhead */
    flex-shrink: 0;                 /* parent (captions-list) is column-flex; without
                                       this, rows get squished below their content
                                       height when chunk-words wraps to multiple lines */
    transition: border-color 0.1s, background 0.1s, opacity 0.15s;
  }
  .chunk-row:hover { border-color: #3a3a3a; }
  .chunk-row.active { border-color: var(--info); background: #1a2538; }

  .chunk-time {
    font-size: 10px;
    color: var(--text-quiet);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
    white-space: nowrap;
    min-width: 96px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .chunk-dur {
    font-size: 9px; color: var(--border-2); margin-left: 2px;
  }

  .chunk-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;                  /* row-gap, col-gap */
    flex: 1 1 0;
    min-width: 0;                  /* allow shrinking past content size */
    justify-content: flex-start;   /* pack to the left on every wrapped line */
    align-content: center;         /* center wrapped lines vertically */
    align-items: center;
  }

  .word-input {
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 15px;
    font-weight: 600;
    width: auto;
    min-width: 32px;
    transition: border-color 0.12s, background 0.12s;
    font-family: inherit;
  }
  .word-chip:hover .word-input:not(:focus) { background: rgba(255,255,255,0.04); }
  .word-input:focus {
    outline: none;
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.55);
  }
  .word-input:placeholder-shown { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.40); color: var(--danger-2); }
  .word-input::placeholder { color: var(--text-muted); font-size: 11px; font-weight: 400; }
  .word-chip.word-playing .word-input { background: rgba(80,255,30,0.14); border-color: rgba(80,255,30,0.50); transition: border-color 0.08s, background 0.08s; }

  /* ── Right panel ── */
  .panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #08080e;
  }

  .video-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 14px;
    gap: 12px;
    background: radial-gradient(ellipse 130% 70% at 50% -5%, #0c0f1e 0%, #08080e 65%);
    overflow: hidden;
    position: relative;
  }
  /* ambient halo behind the phone */
  .video-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 45% at 50% 48%, rgba(99,102,241,0.055) 0%, transparent 70%);
    pointer-events: none;
  }

  .scrubber-bar {
    display: none;
    width: 100%;
    max-width: min(100%, 520px);   /* let the bar breathe under the preview */
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 8px 12px;
  }
  .scrubber-bar.show { display: flex; }
  .scrubber-wrap {
    position: relative;
    flex: 1;
    height: 26px;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .scrubber-track-bg {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 8px;                  /* thicker, easier scrub target */
    background: var(--surface);
    border-radius: 4px;
    pointer-events: none;
    overflow: hidden;
  }
  #scrubberActiveRange {
    position: absolute; top: 0; bottom: 0;
    background: var(--bg);
    pointer-events: none;
  }
  #scrubberWordTicks {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
  }
  .swt { position: absolute; top: 28%; height: 44%; width: 1.5px; border-radius: 1px; }
  .swt-visible  { background: rgba(99,102,241,0.55); }
  .swt-hidden   { background: rgba(75,85,99,0.32); }
  .swt-emph     { background: rgba(251,191,36,0.78); width: 2px; top: 18%; height: 64%; }
  /* Chunk boundary: a taller divider at the start of each new caption chunk
     so users can find the next/previous spoken section by sight. */
  .swt-chunk    {
    background: rgba(255,255,255,0.22);
    width: 2px; top: 8%; height: 84%; border-radius: 1px;
  }
  /* Played fill — a soft gradient that fades to the playhead instead of a
     solid wall of indigo across the whole track. */
  #scrubberPlayedFill {
    position: absolute; top: 0; bottom: 0;
    background: linear-gradient(to right,
      rgba(99,102,241,0.18) 0%,
      rgba(99,102,241,0.55) 70%,
      rgba(165,180,252,0.95) 100%);
    pointer-events: none;
  }
  .scrubber-trim-before, .scrubber-trim-after {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    pointer-events: none;
  }
  .scrubber-wrap input[type=range] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
  }
  .scrubber-wrap input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border-radius: 4px;
  }
  .scrubber-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 2px solid var(--bg);     /* small ring so the dot reads against word ticks */
    margin-top: -5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: transform 0.12s, background 0.12s, border-color 0.12s;
  }
  .scrubber-wrap input[type=range]:active::-webkit-slider-thumb,
  .scrubber-wrap input[type=range]:hover::-webkit-slider-thumb {
    background: var(--accent-pale);
    transform: scale(1.15);
  }
  .scrubber-wrap input[type=range]::-moz-range-track {
    height: 8px;
    background: transparent;
    border-radius: 4px;
  }
  .scrubber-wrap input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 2px solid var(--bg);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  /* Trim handles — wider visual, central grab notch, cleaner colors. */
  .trim-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 22px;
    border-radius: 2px;
    z-index: 3;
    cursor: ew-resize;
    opacity: 0.85;
    transition: opacity 0.12s, width 0.1s, height 0.1s;
  }
  .trim-handle::before {
    content: '';
    position: absolute;
    inset: 0 -8px;
  }
  .trim-handle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 2px; height: 8px;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.65);
    border-radius: 1px;
  }
  .trim-handle.trim-active,
  .trim-handle:hover { opacity: 1; width: 7px; height: 24px; }
  .trim-handle-in  { background: var(--success); }
  .trim-handle-out { background: var(--danger); }
  /* Cut/hidden-range segments painted on the scrubber track */
  .scrubber-cut-seg { position: absolute; top: 0; bottom: 0; pointer-events: none; }
  .scrubber-hidden-seg { background: rgba(250,204,21,0.6); }   /* amber — hidden words */
  .scrubber-gap-seg    { background: rgba(168,85,247,0.6); }   /* purple — gap cuts */
  /* Hover tooltip above scrubber */
  .scrubber-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--bg);
    border: 1px solid var(--surface-2);
    color: var(--text-3);
    font-size: 10px;
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    padding: 3px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  /* Zoom panel — magnified timeline view on scrubber hover */
  #scrubberZoom {
    position: absolute;
    bottom: calc(100% + 26px);
    left: 0; right: 0;
    height: 60px;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    border-radius: 6px;
    pointer-events: none;
    display: none;
    overflow: hidden;
    z-index: 12;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  }
  .sz-track-bg {
    position: absolute;
    left: 0; right: 0; top: 55%; bottom: 0;
    background: var(--surface);
    pointer-events: none;
  }
  .sz-tick {
    position: absolute;
    top: 28%; bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
  }
  .sz-tick-visible { background: rgba(99,102,241,0.85); }
  .sz-tick-hidden  { background: rgba(75,85,99,0.50); }
  .sz-tick-emph    { background: rgba(251,191,36,0.95); width: 3px; top: 18%; }
  .sz-label {
    position: absolute;
    top: 4px;
    font-size: 9.5px;
    font-weight: 500;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.02em;
    z-index: 3;
  }
  .sz-label-visible { color: var(--accent-2); }
  .sz-label-hidden  { color: var(--text-quiet); text-decoration: line-through; }
  .sz-label-emph    { color: var(--warning); }
  .sz-cursor {
    position: absolute;
    top: 0; bottom: 0;
    width: 1.5px;
    background: rgba(199,210,254,0.55);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
  }
  .sz-seg {
    position: absolute;
    top: 55%; bottom: 0;
    pointer-events: none;
    opacity: 0.85;
  }
  .sz-trim {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    pointer-events: none;
    z-index: 1;
  }
  .sz-range-label {
    position: absolute;
    bottom: 3px;
    left: 0; right: 0;
    font-size: 8px;
    color: var(--border);
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    text-align: center;
    letter-spacing: 0.04em;
  }
  /* Help overlay */
  #helpBtn {
    background: transparent; color: var(--text-muted); border: 1px solid var(--surface-2);
    border-radius: 5px; padding: 5px 9px; font-size: 12px; cursor: pointer;
    flex-shrink: 0; font-family: inherit;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    line-height: 1;
  }
  #helpBtn:hover { color: var(--text-3); border-color: var(--border); background: rgba(255,255,255,0.02); }
  #helpOverlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.72);
    z-index: 9999; display: none; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
  }
  #helpOverlay.open { display: flex; }
  #helpPanel {
    background: var(--bg); border: 1px solid var(--surface-2); border-radius: 8px;
    width: 520px; max-width: 96vw; color: var(--text-3); overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
  }
  #helpSearch {
    display: block; width: 100%; box-sizing: border-box;
    background: transparent; border: none; border-bottom: 1px solid var(--surface-2);
    padding: 13px 18px; font-size: 13px; color: var(--text-3); outline: none;
    font-family: inherit;
  }
  #helpSearch:focus { border-bottom-color: var(--accent); color: var(--text); }
  #helpSearch::placeholder { color: var(--text-quiet); }
  #helpList {
    max-height: 58vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent;
  }
  #helpList::-webkit-scrollbar { width: 5px; }
  #helpList::-webkit-scrollbar-track { background: transparent; }
  #helpList::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
  #helpNoResults {
    display: none; padding: 18px; text-align: center; color: var(--text-quiet); font-size: 12px;
  }
  #helpFooter {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 16px; border-top: 1px solid var(--surface-2); font-size: 10px; color: var(--text-quiet);
    background: var(--surface);
  }
  .help-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; padding: 7px 18px; font-size: 12px; border-bottom: 1px solid var(--hover);
    cursor: default;
  }
  .help-row:last-child { border-bottom: none; }
  .help-row.help-focus { background: rgba(99,102,241,0.08); }
  .help-row.help-hide  { display: none; }
  .help-key {
    background: var(--surface); border: 1px solid var(--surface-2); border-radius: 4px;
    padding: 2px 7px; font-family: ui-monospace, monospace;
    color: var(--accent-soft); font-size: 11px; font-weight: 500; white-space: nowrap;
  }
  .scrubber-time {
    font-size: 10px;
    color: var(--text-quiet);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.02em;
    min-width: 80px;
    text-align: right;
    font-weight: 500;
  }
  .scrubber-time.trim-on { color: var(--success-2); }
  /* Playback-controls cluster — time + speed + loop grouped as one unit
     with a subtle divider before the loop button. */
  .scrubber-controls {
    display: inline-flex; align-items: center; gap: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--surface-2);
    flex-shrink: 0;
  }
  #speedSelect {
    background: var(--surface); color: var(--text-2); border: 1px solid var(--surface-2);
    border-radius: 5px; padding: 3px 4px; font-size: 10px; font-weight: 600;
    cursor: pointer; font-family: inherit; flex-shrink: 0;
    appearance: none; -webkit-appearance: none;
    text-align: center; width: 46px;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
  }
  #speedSelect:hover { border-color: var(--border); color: var(--text-3); }
  #speedSelect:focus { outline: none; border-color: var(--accent); color: var(--accent-soft); }
  #speedSelect option { background: var(--bg); color: var(--text-3); }
  .loop-btn {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    padding: 5px 7px;
    line-height: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .loop-btn:hover { background: rgba(255,255,255,0.08); color: #aaa; }
  .loop-btn.loop-active {
    background: rgba(99,102,241,0.20);
    color: var(--accent-soft);
    border-color: rgba(99,102,241,0.55);
    animation: loop-pulse 2s ease-in-out infinite;
  }
  .loop-btn svg { display: block; }
  @keyframes loop-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.0); }
    50%      { box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
  }

  .video-container {
    position: relative;
    height: 100%;
    max-height: calc(100vh - 150px);
    aspect-ratio: 9 / 16;
    background: #0e0e12;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,0.08),
      0 0 0 4px rgba(0,0,0,0.75),
      0 30px 80px rgba(0,0,0,0.95),
      0 6px 20px rgba(0,0,0,0.6),
      0 0 100px -12px rgba(99,102,241,0.10);
  }

  .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .no-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    /* --text-2, not --border-2 (a border token): the body line ("Render the
       short to see it here") inherits this, and --border-2 gave only 2.55:1.
       --text-2 is ~7.5:1 on the #0e0e12 preview backdrop. */
    color: var(--text-2);
    font-size: 11px;
    text-align: center;
    padding: 28px;
    line-height: 1.55;
  }
  .no-video-icon {
    color: var(--surface-2);
    margin-bottom: 4px;
    line-height: 0;
  }
  .no-video-icon svg { display: block; }
  .no-video-title {
    font-size: 13px;
    font-weight: 600;
    /* --text-2, not --text-muted: muted gave 3.98:1, below AA. --text-2 is
       ~7.5:1; the 13px/600 weight still reads as the title above the body. */
    color: var(--text-2);
    letter-spacing: 0.01em;
  }

  .config-input {
    width: 100%;
    background: var(--surface);
    color: #e2e8f0;
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
  }
  .config-input:hover { border-color: var(--border); }
  .config-input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
  select.config-input { cursor: pointer; }
  select.config-input option { background: var(--bg); color: var(--text-3); }
  .title-textarea { text-align: center; resize: vertical; line-height: 1.5; min-height: 60px; font-size: 13px; }

  /* ── Toast ── */
  #toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg);
    color: var(--text-3);
    border: 1px solid var(--surface-2);
    border-left: 3px solid var(--success);
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 999;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    letter-spacing: 0.01em;
  }
  #toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  #toast.error { border-left-color: var(--danger); color: var(--danger-2); }

  /* ── Row selection + playback highlight ── */
  .chunk-row { cursor: default; user-select: none; }
  .chunk-row.row-selected { border-color: var(--accent); background: #1e1a38; }
  .chunk-row.row-selected:hover { border-color: #818cf8; }
  /* Animated playhead bar: a thin horizontal line that fills left→right across
     the row as audio progresses through it. Drives off a CSS custom property
     (--playhead-progress, 0..1) set by drawSubtitleFrame() every rAF tick.
     Same treatment for chunk rows and gap rows so playback feels continuous
     as the user's eye moves from caption to silence and back. */
  .chunk-row.row-playing::after,
  .gap-row.gap-playing::after {
    content: "";
    position: absolute;
    left: 4px;       /* start just after the layout track */
    right: 0;
    bottom: 0;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(var(--playhead-progress, 0));
    background: linear-gradient(to right, rgba(80,255,30,0.0) 0%, rgba(80,255,30,0.55) 35%, #50ff1e 100%);
    border-radius: 1px;
    pointer-events: none;
  }
  .chunk-row.row-playing,
  .gap-row.gap-playing { box-shadow: inset 0 0 0 1px rgba(80,255,30,0.15); }
  .chunk-row.row-looping { outline: 1px solid rgba(99,102,241,0.45); }

  /* ── Hide toggle ── */
  .hide-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.55;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hide-btn:hover { opacity: 1; color: var(--text); background: rgba(255,255,255,0.05); }
  /* Unified SVG sizing inside row controls */
  .layout-indicator svg, .fx-indicator svg, .hide-btn svg,
  .sfx-btn svg, .sfx-placeholder svg, .emph-btn svg,
  .split-btn svg, .split-word-btn svg, .gap-hide-btn svg, .gap-split-btn svg,
  .gap-cut-badge svg { display: block; }
  /* ── Row popup ── */
  .chunk-row.chunk-hidden { opacity: 0.38; }
  .chunk-row.chunk-hidden .word-input { text-decoration: line-through; color: var(--text-muted); }
  .chunk-row.chunk-hidden .hide-btn { opacity: 1; }

  /* ── Subtitle canvas + badges ── */
  #subCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  #badgeContainer {
    position: absolute;
    top: 10px; right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    pointer-events: none;
  }
  .mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.25s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .mode-badge.show { opacity: 1; }
  #previewBadge {
    background: rgba(99,102,241,0.18);
    color: var(--accent-soft);
    border: 1px solid rgba(99,102,241,0.30);
  }
  #previewBadge::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-2);
    animation: badge-pulse 2.2s ease-in-out infinite;
  }
  #renderedBadge {
    background: rgba(34,197,94,0.18);
    color: var(--success-2);
    border: 1px solid rgba(34,197,94,0.30);
  }
  #renderedBadge::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--success);
  }
  @keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* ── Play/Pause overlay (replaces native <video controls>) ─────────────
     Centered persistent play icon when paused → iOS gets a visible tap cue
     (without which the preview reads as a black box). Translucent enough
     (0.35 alpha, 60 px) that karaoke captions in the lower half stay
     readable through it. Larger opaque flash on every tap for feedback. */
  #playPauseOverlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 6;
  }
  #playPauseOverlay.show { display: flex; }
  #playPauseOverlay .pp-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
  }
  #playPauseOverlay .pp-icon { width: 24px; height: 24px; fill: rgba(255,255,255,0.85); }
  /* Transient flash: bigger, fully-opaque scale+fade pulse for tap feedback. */
  #playPauseOverlay.flash .pp-circle {
    width: 84px;
    height: 84px;
    background: rgba(0,0,0,0.55);
    animation: pp-flash-anim 0.55s ease-out forwards;
  }
  #playPauseOverlay.flash .pp-icon { width: 38px; height: 38px; fill: #fff; }
  @keyframes pp-flash-anim {
    0%   { opacity: 0; transform: scale(0.7); }
    25%  { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.3); }
  }