/* Own layer, below ReelSpeak subtitles (20) and playback controls (35). */
.burned-mask-viewport { position: absolute; z-index: 5; overflow: hidden; pointer-events: none; }
.burned-mask-viewport[hidden], .burned-mask-toggle[hidden] { display: none !important; }
.burned-mask { position: absolute; left: 0; width: 100%; box-sizing: border-box; background: rgba(15, 17, 24, .62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: auto; touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.burned-mask.editing { box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 -1px rgba(255,255,255,.5); }
.burned-mask.subtitle-snap-target {
    box-shadow: inset 0 1px rgba(233,69,96,.85), inset 0 -1px rgba(233,69,96,.85);
}
.burned-mask:focus-visible, .burned-mask-grip:focus-visible { outline: 2px solid #eee; outline-offset: -2px; }
.burned-mask-grip { position: absolute; bottom: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; color: rgba(255,255,255,.8); background: transparent; opacity: 0; transition: opacity 160ms ease-out; touch-action: none; }
.burned-mask-grip svg { width: 18px; height: 18px; pointer-events: none; }
.burned-mask.editing .burned-mask-grip { opacity: 1; }
/* Keep keyboard focus discoverable on pointer-precise devices without making
   iPhone/Safari's persistent focus keep the resize handle visible. */
@media (hover: hover) and (pointer: fine) {
    .burned-mask-grip:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .burned-mask-grip { transition: none; }
}

/* ── Top player controls: three visual islands ─────────────────────────────
   48px touch targets remain intact; visible surfaces are lighter-weight and
   share one stable material so bright/dark video frames do not change them. */
.phase-play .m-top-btn {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.phase-play .m-top-btn svg { width: 30px; height: 30px; }

/* Left island: 44px visible surface inside the existing 48px back target. */
.phase-play .m-btn-back {
    background: transparent !important;
}
.phase-play .m-btn-back::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(18,18,24,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.phase-play .m-btn-back svg { position: relative; z-index: 1; }
.phase-play .m-btn-back:hover::before,
.phase-play .m-btn-back:active::before { background: rgba(18,18,24,.80); }
.phase-play .m-btn-back:active { background: transparent !important; }

/* Center island: information, not a button. Keep its capsule shape but use the
   same material as the action islands. */
.phase-play .m-top-status {
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(18,18,24,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* Right island: mask | caption cycle | share, with layout owned by style.css. */
.m-top-actions {
    overflow: visible;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(18,18,24,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.m-top-actions .m-top-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.m-top-actions .m-top-btn[hidden] { display: none !important; }
.m-top-actions .m-top-btn:hover:not(:disabled),
.m-top-actions .m-top-btn:active { background: rgba(255,255,255,.08) !important; }

/* Three-cell capsule separators. */
.m-top-actions:has(.burned-mask-toggle:not([hidden])) .m-btn-caption-cycle:not([hidden]) {
    border-left: 1px solid rgba(255,255,255,.09);
}
.m-top-actions .m-btn-share:not([hidden]) {
    border-left: 1px solid rgba(255,255,255,.09);
}

/* Progressive-caption ON/OFF must be legible without adding a heavy color block.
   OFF stays quiet; ON gets a brighter glyph, a soft inner tile and a status dot. */
.m-top-actions .m-btn-caption-cycle {
    color: rgba(242,245,255,.64);
}
/* Keep ON stronger than the shared hover rule, including sticky touch hover. */
.m-top-actions .m-top-btn.m-btn-caption-cycle[aria-pressed="true"] {
    color: #fff;
    background: rgba(255,255,255,.15) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.m-top-actions .m-btn-caption-cycle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: translateX(-50%) scale(.7);
    transition: opacity 140ms ease, transform 140ms ease;
}
.m-top-actions .m-btn-caption-cycle[aria-pressed="true"]::after {
    opacity: .95;
    transform: translateX(-50%) scale(1);
}

/* Keep the first-round Figma B geometry at 30px, with a small optical-weight
   correction so it does not look smaller than the back/share glyphs. */
.burned-mask-toggle { color: #eee; }
.burned-mask-toggle svg { display: none; }
.burned-mask-toggle::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    filter: brightness(1.18) contrast(1.06);
    background: center / 30px 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='2.2' y='6.6' width='8.58' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='1'/%3E%3Crect x='10.78' y='6.6' width='5.72' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='.30'/%3E%3Crect x='4.4' y='12.1' width='6.38' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='1'/%3E%3Crect x='10.78' y='12.1' width='3.74' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='.24'/%3E%3Crect x='9.9' y='3.3' width='9.9' height='15.4' rx='3.3' fill='%23BFC7DB' fill-opacity='.13' stroke='%23BFC7DB' stroke-opacity='.32'/%3E%3C/svg%3E");
}
.burned-mask-toggle[aria-pressed="true"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='2.75' y='6.6' width='15.95' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='.40'/%3E%3Crect x='4.95' y='12.1' width='11.55' height='1.87' rx='.935' fill='%23FFFFFF' fill-opacity='.30'/%3E%3Crect x='2.2' y='2.86' width='17.6' height='5.72' rx='3.3' fill='%23BFC7DB' fill-opacity='.12'/%3E%3Crect x='2.2' y='7.37' width='17.6' height='7.7' rx='3.3' fill='%23BFC7DB' fill-opacity='.24'/%3E%3Crect x='2.2' y='13.42' width='17.6' height='5.72' rx='3.3' fill='%23BFC7DB' fill-opacity='.10'/%3E%3C/svg%3E");
}

/* Match all three visual islands to the same safe-area/fullscreen baseline. */
.phase-play.css-fullscreen .m-top-actions,
.phase-play.css-fullscreen .m-top-status,
:fullscreen .m-top-actions,
:fullscreen .m-top-status,
:-webkit-full-screen .m-top-actions,
:-webkit-full-screen .m-top-status {
    top: max(42px, calc(env(safe-area-inset-top) + 10px));
}

/* Make room for the extra tool without changing the video layout. */
.video-container:has(.burned-mask-toggle:not([hidden])) .time-display { right: 120px; }
.phase-play.sentence-editing-mode .burned-mask-viewport { pointer-events: none; }
.phase-play.sentence-editing-mode .burned-mask { pointer-events: none; }
.burned-mask-toggle:focus-visible { outline: 2px solid #eee; outline-offset: -2px; }

/* Homepage: make the video-language selector use the same compact native
   height as the text-language selector on touch phones. */
@media (max-width: 768px) and (pointer: coarse) {
    #defaultRecognitionLanguage {
        height: auto;
        min-height: 0;
    }
}

/* Desktop: anchor top actions to the actual rendered video frame, not the
   black letterbox/pillarbox container. Mobile keeps the existing safe-area
   placement. */
@media (min-width: 769px) {
    .phase-play .video-container .m-btn-back,
    .phase-play.css-fullscreen .video-container .m-btn-back,
    :fullscreen .video-container .m-btn-back,
    :-webkit-full-screen .video-container .m-btn-back {
        top: calc(var(--rs-media-top, 0px) + 8px) !important;
        left: calc(var(--rs-media-left, 0px) + 8px) !important;
    }

    .phase-play .video-container .m-top-actions,
    .phase-play.css-fullscreen .video-container .m-top-actions,
    :fullscreen .video-container .m-top-actions,
    :-webkit-full-screen .video-container .m-top-actions {
        top: calc(var(--rs-media-top, 0px) + 8px) !important;
        right: calc(var(--rs-media-right, 0px) + 8px) !important;
    }

    .phase-play .time-display {
        display: none !important;
    }
}