/* V2.6 Bunny + YouTube provider layer */ .video-wrap{isolation:isolate} .vw-external-player-layer{position:absolute;inset:0;z-index:2;background:#020304;display:grid;place-items:stretch;overflow:hidden} .vw-external-frame,.vw-youtube-mount,.vw-youtube-mount iframe{width:100%!important;height:100%!important;border:0;display:block;background:#000} .video-wrap.external-provider-active>video{visibility:hidden;pointer-events:none} .video-wrap.external-provider-active .unlock{z-index:8} .video-wrap.external-provider-active .buffer{z-index:9} .audio-track-picker.provider-unavailable{opacity:.58} .audio-track-picker.provider-unavailable button{cursor:not-allowed} .vw-audio-boost.provider-hidden{display:none!important} .provider-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 12px} .provider-add-card{min-width:0;margin:0!important} .provider-add-head{display:flex;align-items:center;gap:9px;margin-bottom:9px} .provider-add-head>div{min-width:0}.provider-add-head b,.provider-add-head small{display:block}.provider-add-head b{font-size:11px;color:#f0f4ff}.provider-add-head small{font-size:8.5px;color:#718096;margin-top:2px;line-height:1.35} .provider-mark{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:9px;font-size:10px;font-weight:900}.provider-mark.youtube{background:rgba(255,45,64,.13);color:#ff7c88;border:1px solid rgba(255,75,91,.15)}.provider-mark.bunny{background:rgba(255,145,40,.12);color:#ffb260;border:1px solid rgba(255,154,64,.16)} .provider-host-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(255,255,255,.035);color:#eef3ff;text-decoration:none;font-size:9.5px;font-weight:800;white-space:nowrap} .provider-host-link:hover{border-color:rgba(122,98,255,.42);background:rgba(114,87,255,.10)} @media(max-width:700px){.provider-add-grid{grid-template-columns:1fr}.provider-add-card{padding:10px!important}.provider-add-head small{font-size:9px}.provider-host-link{width:100%}} /* VW_WATCH_TOGETHER_EXTERNAL_PROVIDERS_V2_6 */ /* V2.6R2 — same-room Bunny picker */ .provider-room-target{margin:7px 0 9px;padding:8px 9px;border:1px solid rgba(116,94,255,.15);border-radius:10px;background:rgba(103,80,255,.055)} .provider-room-target span,.provider-room-target b,.provider-room-target small{display:block;min-width:0} .provider-room-target span{font-size:7.5px;font-weight:900;letter-spacing:.12em;color:#8e82ff} .provider-room-target b{margin-top:3px;font-size:10px;color:#edf1ff;overflow-wrap:anywhere} .provider-room-target small{margin-top:2px;font-size:8px;line-height:1.35;color:#6f7c90} .bunny-room-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .provider-button{appearance:none;cursor:pointer;font-family:inherit} .bunny-room-panel{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)} .bunny-room-search{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:6px} .bunny-room-search input{min-width:0;height:35px;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.025);color:#edf3ff;outline:none;font:inherit;font-size:9.5px} .bunny-room-search input:focus{border-color:rgba(117,94,255,.40)} .bunny-room-search button{height:35px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.03);color:#dbe3f4;cursor:pointer} .bunny-room-status{padding:7px 1px 5px;font-size:8px;color:#738096} .bunny-room-results{display:grid;gap:6px;max-height:310px;overflow:auto;padding-right:2px} .bunny-room-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.022);min-width:0} .bunny-room-thumb{width:46px;height:34px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:rgba(255,145,40,.10);color:#ffb260;font-size:11px;font-weight:900} .bunny-room-thumb img{width:100%;height:100%;object-fit:cover;display:block} .bunny-room-copy{min-width:0}.bunny-room-copy b,.bunny-room-copy small{display:block;min-width:0} .bunny-room-copy b{font-size:9.5px;color:#e8eef9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bunny-room-copy small{margin-top:2px;font-size:7.8px;color:#6f7b8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bunny-room-item button{height:30px;padding:0 8px;border:1px solid rgba(111,87,255,.25);border-radius:8px;background:rgba(103,80,255,.10);color:#efeaff;font-size:8.5px;font-weight:800;white-space:nowrap;cursor:pointer} .bunny-room-item button:disabled{opacity:.45;cursor:not-allowed} .bunny-room-empty{padding:13px 8px;text-align:center;border:1px dashed rgba(255,255,255,.08);border-radius:10px;font-size:8.5px;color:#718096} @media(max-width:700px){ .bunny-room-actions{display:grid;grid-template-columns:minmax(0,1fr) auto} .bunny-room-actions .provider-host-link{width:auto} .bunny-room-results{max-height:44vh} .bunny-room-item{grid-template-columns:42px minmax(0,1fr)} .bunny-room-thumb{width:42px;height:32px} .bunny-room-item button{grid-column:1/-1;width:100%} } /* VW_WATCH_TOGETHER_SAME_ROOM_PROVIDER_ADDS_V2_6R2 */ /* ========================================================================== * VW_WATCH_TOGETHER_CLEAN_YOUTUBE_PROVIDER_V3_7 * * YouTube is a render surface, not the room-control authority. * All room play/pause/seek/volume/fullscreen interactions stay in VikramWeb. * ========================================================================== */ .video-wrap.external-provider-active .vw-external-player-layer.vw-external-youtube-clean{ pointer-events:none!important; } /* Prevent native YouTube taps from opening its own transport UI / local play. */ .video-wrap.external-provider-active .vw-external-player-layer.vw-external-youtube-clean .vw-youtube-mount, .video-wrap.external-provider-active .vw-external-player-layer.vw-external-youtube-clean .vw-youtube-mount iframe{ pointer-events:none!important; user-select:none!important; -webkit-user-select:none!important; } /* VikramWeb-owned center Play/Pause: deliberately larger than YouTube's native center glyph so it visually owns the exact interaction point. */ .provider-center-play{ position:absolute; left:50%; top:50%; z-index:7; display:grid; place-items:center; width:72px; height:72px; min-width:72px; min-height:72px; margin:0; padding:0; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.20); border-radius:999px; background:rgba(7,10,15,.92); color:#fff; cursor:pointer; pointer-events:auto; touch-action:manipulation; box-shadow: 0 14px 38px rgba(0,0,0,.48), 0 0 0 7px rgba(7,10,15,.28); -webkit-tap-highlight-color:transparent; } .provider-center-play:hover{ background:rgba(15,19,27,.96); border-color:rgba(255,255,255,.30); } .provider-center-play:active{ transform:translate(-50%,-50%) scale(.96); } .provider-center-play:focus-visible{ outline:2px solid #8d74ff; outline-offset:4px; } .provider-center-play-icon{ display:block; margin-left:4px; font-size:31px; line-height:1; color:#fff; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); } /* Full-surface VikramWeb hit layer. It sits above the YouTube iframe but below the custom center control and buffer badge. It is transparent by design. */ .youtube-surface-tap{ position:absolute; inset:0; z-index:6; margin:0; padding:0; border:0; background:transparent; color:transparent; cursor:pointer; pointer-events:auto; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } /* No visual flash/highlight when the movie surface is tapped. */ .youtube-surface-tap:focus, .youtube-surface-tap:active{ outline:none; background:transparent; } /* Pause mode is intentionally the same visual family as Play, so room controls feel native to VikramWeb rather than to the embedded provider. */ .provider-center-play.is-pause{ background:rgba(7,10,15,.88); border-color:rgba(255,255,255,.23); } .provider-center-play.is-pause .provider-center-play-icon{ margin-left:0; font-size:27px; letter-spacing:-.12em; } /* Playing is clean by default. JS removes .hidden only after a movie-surface tap, then auto-hides Pause after the short control window. */ .video-wrap.vw-youtube-playing:not(.vw-youtube-controls-visible) .provider-center-play, .video-wrap.vw-youtube-buffering:not(.vw-youtube-controls-visible) .provider-center-play{ display:none!important; } @media(max-width:980px){ .provider-center-play{ width:64px; height:64px; min-width:64px; min-height:64px; } .provider-center-play-icon{ font-size:28px; } } @media(max-width:380px){ .provider-center-play{ width:58px; height:58px; min-width:58px; min-height:58px; } .provider-center-play-icon{ font-size:25px; } } :root{--vw-watch-clean-youtube-provider-v3-7:1} /* VW_WATCH_TOGETHER_YOUTUBE_CUSTOM_SURFACE_V3_7R1 */ :root{--vw-watch-youtube-custom-surface-v3-7r1:1}