:root{--bg:#0f0f0f;--panel:#181818;--panel2:#222;--text:#fff;--muted:#aaa;--line:#333;--yellow:#ffd400;--blue:#3ea6ff;--radius:16px;--shadow:0 14px 38px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input{font:inherit}.topbar{height:84px;display:grid;grid-template-columns:280px minmax(360px,720px) 280px;align-items:center;gap:20px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.06);position:relative}.brand-cluster{display:flex;align-items:center;gap:18px}.icon-btn,.control-btn{border:0;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}.icon-btn svg{width:28px;height:28px}.brand{display:flex;align-items:center;color:var(--text);text-decoration:none;gap:10px}.brand b{font-size:28px}.brand small{font-size:12px;align-self:flex-start;margin-top:2px}.brand-mark{width:40px;height:29px;border-radius:8px;background:var(--yellow);display:flex;justify-content:center;gap:5px;align-items:center}.brand-mark span{display:block;width:4px;height:13px;background:#fff;border-radius:2px}.search{height:48px;display:grid;grid-template-columns:1fr 64px;position:relative;border:1px solid var(--line);border-radius:999px;overflow:visible;background:#121212}.search input{border:0;background:transparent;color:var(--text);outline:none;padding:0 22px;font-size:20px}.search>button{border:0;border-left:1px solid var(--line);background:#222;color:#fff;border-radius:0 999px 999px 0;display:grid;place-items:center;cursor:pointer}.search-dropdown{position:absolute;top:56px;left:0;right:0;background:#202020;border:1px solid #393939;border-radius:14px;box-shadow:var(--shadow);z-index:50;max-height:460px;overflow:auto;padding:8px}.search-result{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px;border-radius:11px;cursor:pointer}.search-result:hover{background:#303030}.search-result img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.search-result h3{font-size:15px;margin:0 0 6px;line-height:1.25}.search-result p,.search-result small{margin:0;color:#aaa}.search-state{padding:18px;color:#bbb}.page-grid{height:calc(100vh - 84px);display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:26px;padding:22px 24px 0}.watch{min-width:0;overflow:hidden}.player-shell{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 220px);background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);isolation:isolate}.youtube-layer,.player-shell video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}.youtube-layer{z-index:1}.player-shell video{z-index:0}.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.55) 100%)}
.ad-motion-group{position:absolute;left:24px;bottom:88px;z-index:5;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease}.player-shell.controls-visible .ad-motion-group,.player-shell.is-paused .ad-motion-group,.player-shell.is-scrubbing .ad-motion-group{transform:translateY(-44px)}.ad-card{display:flex;align-items:center;gap:16px;min-width:420px;max-width:min(650px,calc(100vw - 520px));height:96px;padding:12px 16px;border-radius:20px;background:rgba(20,20,20,.74);backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(0,0,0,.25)}.avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:0;background:#eee;display:grid;place-items:center;flex:0 0 auto;cursor:pointer}.avatar img,.advertiser-icon img{width:100%;height:100%;object-fit:cover}.ad-copy{min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}.ad-copy strong{font-size:21px;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ad-copy span{font-size:17px;color:#d7d7d7}.cta{height:52px;display:flex;align-items:center;justify-content:center;padding:0 30px;border-radius:999px;background:#fff;color:#111;text-decoration:none;font-weight:700;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.16);transition:transform .15s ease,box-shadow .15s ease}.cta:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.24)}.sponsor-row{display:flex;align-items:center;gap:9px;color:#fff;font-size:16px;line-height:1;min-height:22px;text-shadow:0 1px 3px #000}.info-dot{width:20px;height:20px;border:2px solid currentColor;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;line-height:1;transform:none}.skip-pill{position:absolute;right:24px;bottom:92px;z-index:6;height:58px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(20,20,20,.76);backdrop-filter:blur(18px);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;gap:13px;transition:transform .15s ease,background .15s ease}.player-shell.controls-visible .skip-pill,.player-shell.is-paused .skip-pill,.player-shell.is-scrubbing .skip-pill{transform:translateY(-44px)}.skip-pill:hover{background:rgba(35,35,35,.9);transform:scale(1.04)}.skip-pill[hidden]{display:none}
.controls-layer{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 18px 12px;background:linear-gradient(transparent,rgba(0,0,0,.86));transform:translateY(48px);transition:transform .15s ease}.player-shell.controls-visible .controls-layer,.player-shell.is-paused .controls-layer,.player-shell.is-scrubbing .controls-layer{transform:translateY(0)}.timeline-hitbox{height:20px;position:relative;display:flex;align-items:flex-end}.timeline-track{position:absolute;left:0;right:0;bottom:8px;height:3px;background:#3a3a3a;border-radius:99px;overflow:hidden}.timeline-buffer,.timeline-progress{position:absolute;left:0;top:0;bottom:0;width:0}.timeline-buffer{background:#666}.timeline-progress{background:var(--yellow)}.timeline-hitbox:hover .timeline-track,.player-shell.is-scrubbing .timeline-track{height:7px}.timeline-hitbox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.control-bar{height:44px;display:flex;align-items:center;justify-content:space-between}.control-group{display:flex;align-items:center;gap:8px}.control-btn{width:40px;height:40px;border-radius:50%;transition:transform .15s ease,background .15s ease}.control-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.12)}.control-btn svg{width:25px;height:25px}.volume-wrap{width:0;overflow:hidden;transition:width .18s ease}.control-group:hover .volume-wrap{width:90px}.volume-wrap input{width:82px;accent-color:#fff}.time{font-size:15px}.settings-menu{position:absolute;right:18px;bottom:66px;z-index:20;background:#202020;border-radius:12px;padding:8px;box-shadow:var(--shadow)}.settings-menu button{display:block;width:100%;padding:10px 18px;border:0;background:transparent;color:#fff;text-align:left;border-radius:8px}.settings-menu button:hover,.settings-menu button.active{background:#353535}
.meta{padding:16px 2px 0}.title-line{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.title-line h1{font-size:24px;margin:0;line-height:1.25}.title-tags{display:flex;gap:7px;flex-wrap:wrap;max-width:100%}.title-tag,.tags-more{border:0;background:transparent;color:var(--blue);padding:0;font-weight:700;font-size:21px;cursor:pointer}.tags-more{letter-spacing:1px}.meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.advertiser{display:flex;align-items:center;gap:14px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}.advertiser-icon{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#ddd;display:block}.advertiser span:last-child{display:flex;flex-direction:column;gap:4px}.advertiser b{font-size:18px}.advertiser small{color:var(--muted);font-size:14px}.meta-actions{display:flex;gap:10px}.meta-pill{height:44px;padding:0 18px;border:0;border-radius:999px;background:#272727;color:#fff;display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}.meta-pill:hover{background:#343434}.sidebar{height:100%;overflow:hidden}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:3px 0 12px}.sidebar-head h2{font-size:22px;margin:0}.sidebar-head span{color:#aaa}.video-list{height:calc(100% - 44px);overflow-y:auto;padding-right:8px}.video-card{display:grid;grid-template-columns:168px 1fr;gap:11px;padding:8px;border-radius:13px;margin-bottom:6px;cursor:pointer;opacity:0;transform:translateY(10px);animation:cardIn .22s ease forwards}.video-card:hover{background:#252525;transform:translateY(0) scale(1.01)}.video-card.active{background:#2a2a2a;box-shadow:inset 3px 0 0 var(--yellow)}.video-card img{width:168px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.video-card h3{font-size:15px;line-height:1.25;margin:1px 0 7px}.video-card p,.video-card small{margin:0;color:#aaa;font-size:13px}.video-card small{display:block;margin-top:4px}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#292929;color:#fff;padding:11px 17px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
body.theater .page-grid{grid-template-columns:1fr}body.theater .sidebar{display:none}body.theater .player-shell{max-height:none}.player-shell:fullscreen{border-radius:0}.player-shell:fullscreen .ad-card{max-width:min(700px,70vw)}
@media(max-width:1050px){.topbar{grid-template-columns:230px 1fr 30px}.page-grid{grid-template-columns:1fr}.sidebar{display:none}.ad-card{max-width:calc(100vw - 190px);min-width:0}.meta-actions{display:none}}@media(max-width:700px){.topbar{grid-template-columns:auto 1fr;height:70px;padding:0 12px}.topbar-spacer{display:none}.brand b{font-size:22px}.search{height:42px}.page-grid{height:calc(100vh - 70px);padding:12px}.ad-card{height:78px;padding:9px}.avatar{width:52px;height:52px}.ad-copy strong{font-size:15px}.ad-copy span{font-size:13px}.cta{height:44px;padding:0 18px}.sponsor-row{font-size:13px}.title-line h1{font-size:19px}.title-tag,.tags-more{font-size:17px}}

/* V25 refined player behaviour */
html,body{font-family:Roboto,Arial,Helvetica,sans-serif}
.player-shell{border:0;outline:0}
.ad-motion-group{left:28px;bottom:18px;gap:3px;transition:transform .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{transform:translateY(-54px)}
.ad-card{height:84px;min-width:390px;max-width:min(620px,calc(100vw - 500px));padding:10px 14px;border-radius:18px;gap:14px;background:rgba(22,22,22,.66);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:0 8px 22px rgba(0,0,0,.23)}
.avatar{width:48px;height:48px}
.ad-copy{gap:3px}
.ad-copy strong{font-size:20px;font-weight:500;line-height:1.18;color:#fff}
.ad-copy span{font-size:15px;color:rgba(255,255,255,.78)}
.cta{height:50px;padding:0 28px;border:0;outline:0;border-radius:999px;background:#fff;color:#111;font-size:17px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.16),0 6px 16px rgba(0,0,0,.12)}
.cta:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sponsor-row{gap:7px;min-height:20px;font-size:15px;font-weight:400;line-height:20px}
.sponsor-row b{font-weight:700}
.info-dot{width:18px;height:18px;border-width:2px;font-size:12px;line-height:14px;transform:translateY(0)}
.skip-pill{right:28px;bottom:20px;height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.42);background:rgba(22,22,22,.66);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:18px;font-weight:500;transition:transform .15s cubic-bezier(.2,0,0,1),background .15s ease}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill{transform:translateY(-54px)}
.skip-pill:hover{transform:scale(1.04);background:rgba(36,36,36,.82)}
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{transform:translateY(-54px) scale(1.04)}
.controls-layer{padding:0 18px 8px;transform:translateY(58px);transition:transform .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .controls-layer,
.player-shell.is-paused .controls-layer,
.player-shell.is-scrubbing .controls-layer{transform:translateY(0)}
.edge-timeline{position:absolute;left:8px;right:8px;bottom:0;height:14px;z-index:7;transition:bottom .15s cubic-bezier(.2,0,0,1)}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:48px}
.edge-timeline .timeline-track{left:0;right:0;bottom:2px;height:3px;background:rgba(60,60,60,.9)}
.edge-timeline:hover .timeline-track,
.player-shell.is-scrubbing .edge-timeline .timeline-track{height:6px}
.timeline-buffer{background:rgba(120,120,120,.72)}
.timeline-progress{background:var(--yellow)}
.control-bar{height:46px}
.control-btn{width:40px;height:40px}
.control-btn svg{width:24px;height:24px}
.vignette{background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.48) 100%)}
@media(max-width:700px){.ad-motion-group{left:14px}.skip-pill{right:14px}.ad-card{height:74px;min-width:0;max-width:calc(100vw - 150px)}.avatar{width:44px;height:44px}.ad-copy strong{font-size:15px}.cta{height:42px;padding:0 17px;font-size:14px}.player-shell.controls-visible .ad-motion-group,.player-shell.is-paused .ad-motion-group,.player-shell.is-scrubbing .ad-motion-group,.player-shell.controls-visible .skip-pill,.player-shell.is-paused .skip-pill,.player-shell.is-scrubbing .skip-pill{transform:translateY(-48px)}.player-shell.controls-visible .edge-timeline,.player-shell.is-paused .edge-timeline,.player-shell.is-scrubbing .edge-timeline{bottom:43px}}


/* V26 — theater, icon, overlay and motion refinement */
:root{--player-controls-rise:58px;--ad-expanded-rise:72px;--timeline-expanded-bottom:54px}
.icon-btn svg,.control-btn svg,.skip-pill svg,.meta-pill svg,.search>button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar,.advertiser-icon{position:relative}
.avatar img,.advertiser-icon img{position:relative;z-index:2}
.avatar-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:linear-gradient(145deg,#ffd400,#e9b900);color:#111;font-weight:700;font-size:18px;text-transform:uppercase}
.avatar.is-fallback img,.advertiser-icon.is-fallback img{display:none}

/* Smaller ad card */
.ad-motion-group{bottom:8px;gap:2px}
.ad-card{height:76px;min-width:360px;max-width:min(580px,calc(100vw - 470px));padding:8px 12px;border-radius:16px;gap:12px}
.avatar{width:46px;height:46px}
.ad-copy strong{font-size:18px;line-height:1.16}
.ad-copy span{font-size:14px}
.cta{height:46px;padding:0 24px;font-size:16px}
.sponsor-row{font-size:14px;min-height:18px;line-height:18px;gap:6px}
.info-dot{width:17px;height:17px;font-size:11px}
.skip-pill{bottom:10px;height:48px;padding:0 20px;font-size:17px}

/* Collapsed elements lower; expanded elements higher */
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{transform:translateY(calc(-1 * var(--ad-expanded-rise)))}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill{transform:translateY(calc(-1 * var(--ad-expanded-rise)))}
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{transform:translateY(calc(-1 * var(--ad-expanded-rise))) scale(1.04)}
.controls-layer{transform:translateY(var(--player-controls-rise))}
.edge-timeline{bottom:-2px}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:var(--timeline-expanded-bottom)}
.edge-timeline .timeline-track{bottom:1px}

/* Real theater mode: full viewport player, no squeezed layout */
body.theater{overflow:hidden}
body.theater .topbar{display:none}

.profile-menu{position:relative;justify-self:end;z-index:60}
.profile-button{width:46px;height:46px;border:1px solid #3a3a3a;border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.profile-button:hover,.profile-button[aria-expanded="true"]{background:#343434;border-color:#5a5a5a;transform:scale(1.03)}
.profile-button svg{width:24px;height:24px}
.profile-dropdown{position:absolute;top:56px;right:0;width:250px;padding:8px;background:#202020;border:1px solid #3a3a3a;border-radius:14px;box-shadow:var(--shadow)}
.profile-dropdown[hidden]{display:none}
.profile-dropdown button{width:100%;min-height:44px;border:0;border-radius:9px;background:transparent;color:#fff;padding:9px 11px;display:block;text-align:left;cursor:pointer}
.profile-dropdown button:hover{background:#343434}
.search-result{grid-template-columns:150px minmax(0,1fr) auto;align-items:center}
.search-add{border:0;border-radius:999px;background:var(--yellow);color:#111;padding:9px 12px;font-weight:700;cursor:pointer}
.search-add.saved{background:#444;color:#fff}
.search-policy{display:block;margin-top:4px;color:#aaa}
.search-policy.reject{color:#ff9b9b}
.search-state.error{color:#ffb4b4}
.search-tools{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#181818;border-bottom:1px solid #333;color:#bbb;font-size:12px}
.search-tools>div{display:flex;gap:7px}
.search-tools button{border:1px solid #444;border-radius:999px;background:#292929;color:#fff;padding:7px 10px;cursor:pointer;white-space:nowrap}
.search-tools .search-bulk{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:700}
.search-tools button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:900px){.topbar{grid-template-columns:230px minmax(260px,1fr) 52px}.page-grid{height:calc(100vh - 84px)}}
@media(max-width:700px){.search-tools{align-items:flex-start;flex-direction:column}.search-result{grid-template-columns:96px minmax(0,1fr)}.search-result .search-add{grid-column:1/-1;width:100%}}
body.theater .page-grid{display:block;height:100vh;padding:0}
body.theater .watch{width:100%;height:100vh;overflow:hidden}
body.theater .player-shell{width:100%;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
body.theater .meta,body.theater .sidebar{display:none!important}
body.theater .youtube-layer,body.theater .player-shell video{object-fit:contain;background:#000}
body.theater .ad-card{max-width:min(600px,60vw)}
body.theater .player-shell.controls-visible .edge-timeline,
body.theater .player-shell.is-paused .edge-timeline,
body.theater .player-shell.is-scrubbing .edge-timeline{bottom:56px}

@media(max-width:700px){
  :root{--ad-expanded-rise:58px;--timeline-expanded-bottom:45px}
  .ad-motion-group{bottom:6px}
  .skip-pill{bottom:8px}
  .ad-card{height:68px;max-width:calc(100vw - 138px);padding:7px 9px}
  .avatar{width:42px;height:42px}
  .cta{height:40px;padding:0 15px}
}

/* V27 — compact translucent ad treatment from current YouTube ad references */
:root{
  --ad-expanded-rise:82px;
  --timeline-expanded-bottom:58px;
}

/* The card may be this large at most; the moving image remains visible through it. */
.ad-motion-group{
  left:32px;
  bottom:2px;
  gap:2px;
}
.ad-card{
  width:min(610px,calc(100vw - 520px));
  min-width:0;
  max-width:610px;
  height:88px;
  padding:9px 14px;
  gap:12px;
  border:0;
  border-radius:18px;
  background:rgba(13,13,13,.56);
  -webkit-backdrop-filter:blur(12px) saturate(112%);
  backdrop-filter:blur(12px) saturate(112%);
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.avatar{width:48px;height:48px}
.ad-copy{gap:2px}
.ad-copy strong{font-size:18px;font-weight:600;line-height:1.18;color:#fff}
.ad-copy span{font-size:14px;color:rgba(255,255,255,.76)}
.cta{
  height:46px;
  padding:0 25px;
  border:0;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 5px 14px rgba(0,0,0,.10);
}
.sponsor-row{
  min-height:18px;
  font-size:14px;
  line-height:18px;
  gap:6px;
}

/* Collapsed card a few pixels lower; expanded card rises farther above controls. */
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{
  transform:translateY(calc(-1 * var(--ad-expanded-rise)));
}

/* Skip remains anchored in one place in every player state. */
.skip-pill{
  right:30px;
  bottom:96px;
  height:44px;
  padding:0 17px;
  gap:9px;
  border:0;
  border-radius:999px;
  background:rgba(18,18,18,.62);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:15px;
  font-weight:500;
  transition:background .15s ease,transform .15s ease;
}
.skip-pill svg{width:21px;height:21px}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill,
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{
  transform:none;
}
.skip-pill:hover{transform:scale(1.035);background:rgba(30,30,30,.78)}

/* Edge progress line: almost flush when collapsed, slightly higher when controls open. */
.edge-timeline{bottom:-3px}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:var(--timeline-expanded-bottom)}
.edge-timeline .timeline-track{bottom:1px;height:3px}

body.theater .ad-card{width:min(610px,60vw);max-width:610px}
body.theater .skip-pill{bottom:96px}

@media(max-width:900px){
  .ad-card{width:min(560px,calc(100vw - 210px))}
}
@media(max-width:700px){
  :root{--ad-expanded-rise:66px;--timeline-expanded-bottom:47px}
  .ad-motion-group{left:14px;bottom:1px}
  .ad-card{width:calc(100vw - 150px);height:70px;padding:7px 9px;border-radius:15px}
  .avatar{width:42px;height:42px}
  .ad-copy strong{font-size:15px}
  .ad-copy span{font-size:12px}
  .cta{height:40px;padding:0 15px;font-size:14px}
  .skip-pill{right:14px;bottom:76px;height:40px;padding:0 14px;font-size:14px}
  .skip-pill svg{width:19px;height:19px}
}

/* V28 — central tuning, visible actions, compact overlay, quieter skip hover */
.ad-motion-group{
  bottom:var(--ui-banner-bottom,-4px);
}
.ad-card{
  width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  max-width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  height:var(--ui-banner-height,74px);
  padding:8px 12px;
  border-radius:16px;
}
.ad-copy strong{font-size:16px}
.ad-copy span{font-size:13px}
.avatar{width:44px;height:44px}
.cta{height:42px;padding:0 20px;font-size:15px}
.sponsor-row{font-size:13px;min-height:17px}
.skip-pill{
  right:var(--ui-skip-right,28px);
  bottom:var(--ui-skip-bottom,92px);
  height:var(--ui-skip-height,42px);
  font-size:14px;
  background:rgba(18,18,18,.68);
}
.skip-pill:hover{background:rgba(18,18,18,.46);transform:scale(1.035)}
.edge-timeline{bottom:var(--ui-timeline-collapsed,-4px)}
.meta-actions{display:flex!important;flex-wrap:wrap}
.meta-pill svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1050px){
  .meta-row{align-items:flex-start;gap:14px;flex-wrap:wrap}
  .meta-actions{margin-left:auto}
}
body.theater .ad-card{
  width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
  max-width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,500px));
}
@media(max-width:700px){
  .ad-card{width:min(68%,420px);max-width:min(68%,420px);height:66px}
  .meta-actions{display:flex!important}
  .meta-pill{height:40px;padding:0 14px}
}


/* V29 — header/search repair and stable responsive geometry */
.topbar{
  height:76px;
  grid-template-columns:minmax(210px,280px) minmax(300px,640px) minmax(210px,280px);
  justify-content:center;
  gap:18px;
  padding:0 22px;
  overflow:visible;
}
.brand-cluster{min-width:0;overflow:visible;white-space:nowrap}
.brand{min-width:max-content}
.search{width:100%;max-width:640px;justify-self:center;height:46px;min-width:0}
.search input{min-width:0;width:100%;font-size:17px;padding:0 20px}
.search>button{width:58px}
.search>button svg{width:25px;height:25px}
.topbar-spacer{min-width:0}
.search-dropdown{top:54px;max-height:min(520px,calc(100vh - 100px))}
.search-result{grid-template-columns:132px minmax(0,1fr) auto;align-items:center}
.search-result img{width:132px}
.search-result .search-copy{min-width:0}
.search-result .search-copy h3,.search-result .search-copy p,.search-result .search-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-add{border:0;border-radius:999px;background:var(--yellow);color:#111;font-weight:700;padding:9px 14px;cursor:pointer;white-space:nowrap}
.search-add.saved{background:#333;color:#ddd}
.search-state strong{color:var(--text)}

@media(max-width:1120px){
  .topbar{grid-template-columns:minmax(190px,230px) minmax(260px,1fr) 24px;padding:0 16px;gap:14px}
  .brand b{font-size:25px}
  .brand-mark{width:36px;height:27px}
  .search{max-width:560px}
}
@media(max-width:760px){
  html,body{overflow:auto}
  .topbar{height:auto;min-height:116px;grid-template-columns:1fr auto;padding:12px;gap:10px}
  .brand-cluster{grid-column:1/2}
  .topbar-spacer{display:none}
  .search{grid-column:1/-1;grid-row:2;max-width:none;height:44px}
  .search input{font-size:16px}
  .page-grid{height:auto;min-height:calc(100vh - 116px);padding:12px;display:block}
  .watch{overflow:visible}
  .sidebar{display:block;margin-top:18px;height:auto;max-height:none;overflow:visible}
  .video-list{max-height:none;overflow:visible}
  .search-result{grid-template-columns:104px minmax(0,1fr)}
  .search-result img{width:104px}
  .search-add{grid-column:2;justify-self:start;margin-top:6px}
}


/* V30 — compact, normal YouTube-like search geometry */
.topbar{
  height:72px;
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(360px,620px) minmax(220px,1fr);
  align-items:center;
  gap:18px;
  padding:0 24px;
  overflow:visible;
}
.brand-cluster{justify-self:start;min-width:0}
.topbar-spacer{display:block;justify-self:end;width:1px;height:1px}
.search{
  justify-self:center;
  width:min(100%,620px);
  max-width:620px;
  height:44px;
  grid-template-columns:minmax(0,1fr) 58px;
  border:1px solid #3a3a3a;
  border-radius:999px;
  background:#121212;
  overflow:visible;
}
.search input{font-size:17px;padding:0 20px}
.search>button{width:58px;border-radius:0 999px 999px 0;background:#222}
.search>button svg{width:23px;height:23px}
.search-dropdown{top:52px}
@media(max-width:1050px){
  .topbar{grid-template-columns:minmax(205px,1fr) minmax(320px,560px) minmax(40px,1fr);padding:0 16px;gap:12px}
  .search{max-width:560px}
}
@media(max-width:760px){
  .topbar{height:auto;min-height:112px;grid-template-columns:1fr;padding:10px 12px;gap:8px}
  .brand-cluster{grid-row:1;grid-column:1}
  .search{grid-row:2;grid-column:1;width:100%;max-width:none;height:44px}
  .topbar-spacer{display:none}
}
/* V31: robuste, einheitliche Werbetreibenden-Darstellung */
.brand-cluster .icon-btn{display:grid;text-decoration:none;color:inherit}
.ad-card{width:min(var(--ui-banner-max-percent,50%),var(--ui-banner-max-px,1000px));max-width:calc(100% - 160px);min-width:0;height:var(--ui-banner-height,74px);padding:10px 14px;gap:12px;border-radius:16px;background:rgba(20,20,20,.72)}
.avatar{width:48px;height:48px;min-width:48px;border-radius:50%}.ad-copy strong{font-size:17px;font-weight:600}.ad-copy span{font-size:14px}.cta{height:44px;padding:0 22px;font-size:15px}
.avatar img,.advertiser-icon img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#ffd400}
.avatar-fallback{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#ffd400;color:#111;font-weight:700}

/* V32: fast personal deletion mode */
.video-card{position:relative;transition:opacity .15s ease,transform .15s ease,background-color .15s ease}
.video-card.is-deleting{opacity:0;transform:scale(.97);pointer-events:none}
.ad-edit-actions{position:absolute;inset:auto 6px 6px 6px;display:flex;gap:4px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;z-index:4}
.ad-edit-actions button{flex:1;border:0;border-radius:999px;padding:6px 5px;background:rgba(22,22,22,.94);color:#fff;font-size:10px;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.38)}
.ad-edit-actions button:hover{background:#fff;color:#111}
.ad-edit-actions button.danger{background:#a82828}
.edit-mode .ad-edit-actions{opacity:1;visibility:visible;transform:none}
.edit-mode .video-card{outline:1px solid rgba(255,212,0,.22)}
.edit-mode-badge{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:1000;background:var(--yellow);color:#111;padding:8px 14px;border-radius:999px;font-weight:750;font-size:13px;box-shadow:0 5px 18px rgba(0,0,0,.35);pointer-events:none}
.edit-mode-badge[hidden]{display:none}

/* V33 — unified compact ad banner and quieter skip button */
.ad-motion-group{
  left:24px;
  bottom:var(--ui-banner-bottom,14px);
  gap:4px;
}
.ad-card,
body.theater .ad-card{
  width:min(var(--ui-banner-max-percent,48%),var(--ui-banner-max-px,520px));
  max-width:min(var(--ui-banner-max-percent,48%),var(--ui-banner-max-px,520px));
  min-width:0;
  height:52px;
  padding:6px 8px;
  gap:9px;
  border-radius:12px;
  background:rgba(24,24,24,.62);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.ad-card .avatar{width:32px;height:32px;border-radius:50%;flex:0 0 32px}
.ad-card .avatar img,.advertiser-icon img{border-radius:50%;object-fit:cover;display:block}
.ad-copy{gap:1px}
.ad-copy strong{font-size:13px;line-height:1.15;font-weight:650}
.ad-copy span{font-size:11px;line-height:1.15;color:rgba(255,255,255,.76)}
.cta{height:34px;padding:0 14px;font-size:12px;border-radius:17px;box-shadow:none}
.sponsor-row{font-size:11px;min-height:13px;gap:5px;color:rgba(255,255,255,.88)}
.sponsor-row .info-dot{width:14px;height:14px;border-width:1px;font-size:9px}
.skip-pill{
  opacity:.42;
  background:rgba(18,18,18,.42);
  border-color:rgba(255,255,255,.34);
  transition:opacity .15s ease,background .15s ease,transform .15s ease;
}
.skip-pill:hover,
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{
  opacity:1;
  background:rgba(18,18,18,.82);
}
@media(max-width:700px){
  .ad-card,body.theater .ad-card{width:min(68%,420px);max-width:min(68%,420px);height:50px;padding:5px 7px}
  .ad-card .avatar{width:30px;height:30px;flex-basis:30px}
  .cta{height:32px;padding:0 11px}
}

/* V35 — exact circular identity and unified CTA */
.ad-card{align-items:center;overflow:hidden}
.ad-card .avatar{
  width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;
  flex:0 0 38px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;
  overflow:hidden;background:#fff;display:grid;place-items:center;
}
.ad-card .avatar img{
  width:100%!important;height:100%!important;min-width:100%!important;max-width:100%!important;
  aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important;
}
.ad-card .cta{height:38px;border-radius:19px;padding:0 18px;font-size:13px;font-weight:750;flex:0 0 auto}
.ad-card .ad-copy{min-width:0;overflow:hidden}
.ad-card .ad-copy strong,.ad-card .ad-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Step 24: side list is never horizontally scrollable or clipped */
.page-grid,.sidebar,.video-list,.video-card,.video-card>div{min-width:0}
.sidebar{padding-left:0;overflow:hidden}
.video-list{width:100%;max-width:100%;overflow-y:auto!important;overflow-x:hidden!important;padding-left:3px;padding-right:8px;scrollbar-gutter:stable}
.video-card{width:100%;max-width:100%;grid-template-columns:minmax(118px,168px) minmax(0,1fr);margin-left:0}
.video-card h3,.video-card p,.video-card small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* V38.2 — Quellen-Badges (YouTube vs. Ads Transparency Center) */
.src-badge{display:inline-block;font-size:10px;line-height:1;font-weight:700;letter-spacing:.02em;padding:2px 5px;border-radius:4px;vertical-align:middle;margin-left:4px}
.src-badge.src-yt{background:#ffd400;color:#111}
.src-badge.src-tc{background:#1a73e8;color:#fff}

/* V38.2.2 — current YouTube-style in-player advertiser lockup
   This deliberately replaces the old image-banner geometry. The lockup is
   assembled from avatar + two text rows + CTA, so no channel banner is cropped. */
.ad-motion-group{
  left:16px;
  bottom:18px;
  width:auto;
  max-width:calc(100% - 32px);
  gap:5px;
  align-items:flex-start;
  pointer-events:none;
}
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{
  transform:translateY(-48px);
}
.ad-card,
body.theater .ad-card{
  width:auto;
  min-width:304px;
  max-width:min(381px,calc(100vw - 48px));
  height:48px;
  padding:4px 8px;
  gap:8px;
  border-radius:8px;
  overflow:visible;
  background:rgba(18,18,18,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  pointer-events:auto;
}
.ad-card .avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  flex:0 0 36px!important;
  padding:0!important;
  border-radius:50%!important;
  overflow:hidden;
  background:#f1f1f1;
}
.ad-card .avatar img{
  display:block;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.ad-card .ad-copy{
  min-width:0;
  flex:1 1 auto;
  gap:1px;
  overflow:hidden;
}
.ad-card .ad-copy strong{
  display:block;
  min-width:0;
  font-size:12px;
  font-weight:500;
  line-height:15px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ad-card .ad-copy span{
  display:block;
  min-width:0;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:400;
  line-height:13px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ad-card .cta{
  flex:0 0 auto;
  width:auto;
  min-width:112px;
  max-width:129px;
  height:36px;
  padding:0 14px;
  border-radius:18px;
  overflow:hidden;
  background:#f2f2f2;
  color:#111;
  box-shadow:none;
  font-size:12px;
  font-weight:500;
  line-height:36px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ad-card .cta:hover{
  transform:none;
  background:#fff;
  box-shadow:none;
}
.sponsor-row{
  min-height:14px;
  max-width:381px;
  padding-left:0;
  gap:5px;
  overflow:hidden;
  color:rgba(255,255,255,.88);
  font-size:10px;
  line-height:14px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  pointer-events:auto;
}
.sponsor-row > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sponsor-row .info-dot{
  width:12px;
  height:12px;
  border-width:1px;
  font-size:8px;
  flex:0 0 12px;
}
@media(max-width:700px){
  .ad-motion-group{
    left:12px;
    right:12px;
    bottom:14px;
    max-width:none;
  }
  .ad-card,
  body.theater .ad-card{
    width:min(100%,381px);
    min-width:0;
    max-width:100%;
    height:48px;
    padding:4px 7px;
  }
  .ad-card .cta{
    min-width:96px;
    max-width:112px;
    padding:0 11px;
  }
}
@media(max-width:430px){
  .ad-card .cta{min-width:86px;max-width:96px;padding:0 9px;font-size:11px}
  .ad-card .ad-copy strong{font-size:11px}
  .ad-card .ad-copy span{font-size:9px}
}

/* V39.7.4 — kompakte Verwaltung hinter einem Profilmenü */
.topbar{
  grid-template-columns:minmax(220px,1fr) minmax(360px,620px) minmax(52px,1fr);
}
.profile-menu{grid-column:3;grid-row:1;align-self:center;justify-self:end}
@media(max-width:760px){
  .topbar{grid-template-columns:minmax(0,1fr) auto;min-height:112px}
  .brand-cluster{grid-column:1;grid-row:1}
  .profile-menu{grid-column:2;grid-row:1}
  .search{grid-column:1/-1;grid-row:2}
}

/* V39.8 — YouTube research-player calibration
   Reference: current desktop watch, theater and fullscreen ad-player captures.
   The external text-reading accessibility bubble visible in one fullscreen
   capture is intentionally not reproduced. */
:root{
  --yt-header-height:56px;
  --yt-page-gutter:12px;
  --yt-column-gap:12px;
  --yt-sidebar-width:390px;
  --player-controls-rise:44px;
  --ad-expanded-rise:48px;
  --timeline-expanded-bottom:44px;
}
html,body{font-family:Roboto,Arial,Helvetica,sans-serif}
.topbar{
  height:var(--yt-header-height);
  grid-template-columns:minmax(190px,1fr) minmax(360px,620px) minmax(44px,1fr);
  gap:16px;
  padding:0 16px;
  border-bottom:0;
}
.brand-cluster{gap:16px}
.brand{gap:8px}
.brand b{font-size:24px;line-height:1}
.brand small{font-size:10px}
.brand-mark{width:34px;height:24px;border-radius:7px}
.brand-mark span{height:11px}
.brand-cluster .icon-btn{width:40px;height:40px}
.brand-cluster .icon-btn svg{width:24px;height:24px}
.search{
  width:min(100%,620px);
  height:40px;
  grid-template-columns:minmax(0,1fr) 56px;
}
.search input{font-size:16px;padding:0 16px}
.search>button{width:56px}
.search>button svg{width:22px;height:22px}
.search-dropdown{top:46px}
.profile-button{width:36px;height:36px;border:0}
.profile-button svg{width:21px;height:21px}
.profile-dropdown{top:44px}

.page-grid{
  height:calc(100vh - var(--yt-header-height));
  grid-template-columns:minmax(0,1fr) var(--yt-sidebar-width);
  gap:var(--yt-column-gap);
  padding:var(--yt-page-gutter) var(--yt-page-gutter) 0;
}
.player-shell{
  max-height:calc(100vh - 184px);
  border-radius:12px;
  box-shadow:none;
}
.meta{padding:12px 4px 0}
.title-line{gap:6px}
.title-line h1{font-size:20px;line-height:1.25;font-weight:700}
.title-tag,.tags-more{font-size:16px}
.meta-row{margin-top:10px}
.advertiser{gap:12px}
.advertiser-icon{width:40px;height:40px}
.advertiser b{font-size:16px}
.advertiser small{font-size:12px}
.meta-pill{height:36px;padding:0 14px;gap:8px;font-size:14px}
.meta-pill svg{width:20px;height:20px}
.sidebar-head{padding:2px 4px 8px}
.sidebar-head h2{font-size:20px}
.video-list{height:calc(100% - 38px);padding-right:4px}
.video-card{
  grid-template-columns:168px minmax(0,1fr);
  gap:8px;
  padding:4px;
  margin-bottom:4px;
  border-radius:10px;
}
.video-card img{border-radius:8px}
.video-card h3{font-size:14px;line-height:1.25;margin:1px 0 5px}
.video-card p,.video-card small{font-size:12px}

/* The dimensions measured from YouTube DevTools are kept constant in every
   desktop mode: outer lockup <=381×80, 36×36 avatar and 129×36 CTA. */
.ad-motion-group,
body.theater .ad-motion-group,
.player-shell:fullscreen .ad-motion-group{
  left:16px;
  right:auto;
  bottom:18px;
  width:auto;
  max-width:calc(100% - 32px);
  gap:5px;
}
.ad-card,
body.theater .ad-card,
.player-shell:fullscreen .ad-card{
  width:auto;
  min-width:304px;
  max-width:min(381px,calc(100vw - 48px));
  height:48px;
  padding:4px 8px;
  gap:8px;
  border-radius:8px;
  background:rgba(18,18,18,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.ad-card .avatar,
body.theater .ad-card .avatar,
.player-shell:fullscreen .ad-card .avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  flex-basis:36px!important;
}
.ad-card .cta,
body.theater .ad-card .cta,
.player-shell:fullscreen .ad-card .cta{
  min-width:112px;
  max-width:129px;
  height:36px;
  padding:0 14px;
  border-radius:18px;
  font-size:12px;
  line-height:36px;
}
.sponsor-row,
body.theater .sponsor-row,
.player-shell:fullscreen .sponsor-row{
  min-height:14px;
  max-width:381px;
  font-size:10px;
  line-height:14px;
}
.player-shell.controls-visible .ad-motion-group,
.player-shell.is-paused .ad-motion-group,
.player-shell.is-scrubbing .ad-motion-group{
  transform:translateY(-48px);
}
.skip-pill,
body.theater .skip-pill,
.player-shell:fullscreen .skip-pill{
  right:16px;
  bottom:56px;
  height:36px;
  padding:0 14px;
  gap:8px;
  border:0;
  border-radius:18px;
  background:rgba(18,18,18,.74);
  opacity:1;
  font-size:14px;
  font-weight:500;
}
.skip-pill svg{width:20px;height:20px}
.player-shell.controls-visible .skip-pill,
.player-shell.is-paused .skip-pill,
.player-shell.is-scrubbing .skip-pill,
.player-shell.controls-visible .skip-pill:hover,
.player-shell.is-paused .skip-pill:hover,
.player-shell.is-scrubbing .skip-pill:hover{transform:none}
.controls-layer{
  padding:0 12px 4px;
  transform:translateY(44px);
}
.control-bar{height:40px}
.control-group{gap:4px}
.control-btn{width:36px;height:36px}
.control-btn svg{width:22px;height:22px}
.time{font-size:13px}
.edge-timeline{left:12px;right:12px}
.player-shell.controls-visible .edge-timeline,
.player-shell.is-paused .edge-timeline,
.player-shell.is-scrubbing .edge-timeline{bottom:44px}
.edge-timeline .timeline-track{height:3px}

/* YouTube theater mode keeps the 56px header, metadata and research list.
   It widens the player instead of turning the whole page into fullscreen. */
body.theater{overflow:auto}
body.theater .topbar{display:grid}
body.theater .page-grid{
  display:block;
  height:auto;
  min-height:calc(100vh - var(--yt-header-height));
  padding:0;
}
body.theater .watch{width:100%;height:auto;overflow:visible}
body.theater .player-shell{
  width:100%;
  height:min(56.25vw,calc(100vh - 140px));
  max-height:calc(100vh - 140px);
  aspect-ratio:auto;
  border-radius:0;
}
body.theater .meta{display:block!important;padding:12px 16px 0}
body.theater .sidebar{
  display:block!important;
  height:auto;
  padding:18px 16px 30px;
}
body.theater .video-list{
  height:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:8px;
  overflow:visible!important;
}

/* True fullscreen remains distraction-free. Only the player and its exact
   YouTube-sized ad/transport overlays are shown. */
.player-shell:fullscreen{
  width:100vw;
  height:100vh;
  max-height:none;
  aspect-ratio:auto;
  border-radius:0;
}
.player-shell:fullscreen .youtube-layer,
.player-shell:fullscreen video{object-fit:contain;background:#000}

@media(max-width:1050px){
  .topbar{grid-template-columns:minmax(180px,1fr) minmax(300px,560px) 44px}
  .page-grid{grid-template-columns:1fr}
  .sidebar{display:none}
}
@media(max-width:760px){
  :root{--yt-header-height:104px}
  .topbar{
    min-height:104px;
    grid-template-columns:minmax(0,1fr) auto;
    padding:8px 12px;
    gap:8px;
  }
  .search{height:40px}
  .page-grid{min-height:calc(100vh - 104px);padding:8px}
  .player-shell{border-radius:8px}
  .ad-motion-group{left:12px;right:12px;bottom:14px}
  .ad-card,body.theater .ad-card,.player-shell:fullscreen .ad-card{
    width:min(100%,381px);
    min-width:0;
    max-width:100%;
  }
  .skip-pill,body.theater .skip-pill,.player-shell:fullscreen .skip-pill{
    right:12px;
    bottom:50px;
  }
}


/* ==========================================================
   ADTUBE FULLSCREEN V9
   ========================================================== */

.fullscreen-interaction-ui{
  display:none;
}


/* ==========================================================
   FULLSCREEN STAGE
   ========================================================== */

.player-shell:fullscreen{
  position:relative;

  width:100vw;
  height:100vh;

  max-height:none;

  aspect-ratio:auto;

  border-radius:0;

  background:#000;

  overflow:hidden;

  box-shadow:none;
}


/*
Keep both possible video layers full size.
*/

.player-shell:fullscreen .youtube-layer,
.player-shell:fullscreen > video#htmlVideo{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  background:#000;

  object-fit:contain;
}


/* ==========================================================
   HIDE NORMAL PLAYER CONTROLS
   ========================================================== */

.player-shell:fullscreen #controls,
.player-shell:fullscreen #settingsMenu,
.player-shell:fullscreen .edge-timeline,
.player-shell:fullscreen #skipButton{
  display:none !important;
}


/* ==========================================================
   V9 AD BANNER
   ========================================================== */

.player-shell:fullscreen .ad-motion-group{
  position:absolute !important;

  z-index:20 !important;

  left:20px !important;
  right:auto !important;

  bottom:42px !important;

  display:block !important;

  transform:none !important;

  transition:none !important;
}


.player-shell:fullscreen .ad-card,
.player-shell:fullscreen.controls-visible .ad-card,
.player-shell:fullscreen.is-paused .ad-card,
.player-shell:fullscreen.is-scrubbing .ad-card{

  width:auto !important;

  min-width:372px !important;

  max-width:min(
    570px,
    calc(100vw - 140px)
  ) !important;

  min-height:64px !important;

  height:64px !important;

  padding:9px 11px !important;

  display:flex !important;

  align-items:center !important;

  gap:11px !important;

  border-radius:10px !important;

  background:
    rgba(10,10,10,.91) !important;

  box-shadow:
    0 8px 28px rgba(0,0,0,.34) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;
}


/* avatar */

.player-shell:fullscreen .ad-card .avatar{
  width:42px !important;
  height:42px !important;

  flex:0 0 42px !important;

  border-radius:50% !important;
}


.player-shell:fullscreen .ad-card .avatar img{
  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:50%;
}


/* banner copy */

.player-shell:fullscreen .ad-card .ad-copy{
  min-width:0;

  flex:1 1 auto;

  padding:1px 0 2px;
}


.player-shell:fullscreen .ad-card .ad-copy strong{
  display:block;

  min-height:18px;

  font-size:14px !important;

  font-weight:700 !important;

  line-height:18px !important;

  color:#fff !important;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.player-shell:fullscreen .ad-card .ad-copy span{
  display:block;

  margin-top:4px;

  font-size:11px !important;

  line-height:14px !important;

  color:
    rgba(255,255,255,.72) !important;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* CTA */

.player-shell:fullscreen .ad-card .cta{

  flex:0 0 auto;

  min-width:118px !important;

  width:auto !important;

  min-height:42px !important;

  height:42px !important;

  padding:0 18px !important;

  display:flex;

  align-items:center;

  justify-content:center;

  border:0;

  border-radius:999px !important;

  background:#fff !important;

  color:#111 !important;

  font-size:14px !important;

  font-weight:700 !important;

  box-shadow:none !important;

  transform:none !important;
}


.player-shell:fullscreen .ad-card .cta:hover{
  transform:none !important;
}


/*
Hide normal sponsor line.
V9 gets its own independent one below.
*/

.player-shell:fullscreen .sponsor-row{
  display:none !important;
}


/* ==========================================================
   FULLSCREEN V9 OVERLAY
   ========================================================== */

.player-shell:fullscreen .fullscreen-interaction-ui{
  display:block;

  position:absolute;

  inset:0;

  z-index:80;

  pointer-events:none;
}


/* ==========================================================
   V9 META LINE
   Gesponsert ⓘ 1 / ∞ youtube.com
   ========================================================== */

.fullscreen-v9-meta{
  position:absolute;

  z-index:20;

  left:20px;

  bottom:19px;

  display:flex;

  align-items:center;

  gap:6px;

  color:
    rgba(255,255,255,.88);

  font-family:
    Roboto,
    Arial,
    Helvetica,
    sans-serif;

  font-size:10px;

  font-weight:600;

  line-height:12px;

  white-space:nowrap;

  text-shadow:
    0 1px 2px rgba(0,0,0,.85);

  pointer-events:none;
}


.fullscreen-infinity{
  display:inline-block;

  font-family:
    "STIX Two Math",
    "Cambria Math",
    "Times New Roman",
    serif;

  font-size:15px;

  font-weight:400;

  line-height:10px;

  transform:
    scaleX(1.12)
    translateY(-.15px);

  transform-origin:center;

  margin:0 1px;
}


/* ==========================================================
   V9 THUMB
   ========================================================== */

.fullscreen-v9-thumb{
  --gesture:0;

  position:absolute;

  z-index:31;

  right:20px;

  bottom:16px;

  width:58px;

  height:58px;

  display:grid;

  place-items:center;

  border:0;

  padding:0;

  background:transparent;

  pointer-events:none;

  user-select:none;
}


.fullscreen-v9-thumb svg{
  width:39px;

  height:39px;

  display:block;

  fill:
    rgb(
      245,
      calc(
        245 -
        (31 * var(--gesture))
      ),
      calc(
        245 -
        (245 * var(--gesture))
      )
    );

  stroke:none;

  filter:
    drop-shadow(
      0 1px 2px rgba(0,0,0,.6)
    );

  transform:
    scale(
      calc(
        1 +
        var(--gesture) *
        .08
      )
    );
}


.fullscreen-v9-thumb.triggered svg{
  transform:
    scale(1.14);
}


/* ==========================================================
   V9 PROGRESS
   ========================================================== */

.fullscreen-v9-progress-track{
  position:absolute;

  z-index:40;

  left:0;

  right:0;

  bottom:0;

  height:3px;

  background:
    rgba(255,255,255,.12);

  pointer-events:none;
}


#fullscreenProgress{
  height:100%;

  width:0%;

  background:
    var(--yellow,#ffd400);
}


/* ==========================================================
   INVISIBLE CAMERA
   ========================================================== */

.vision-camera,
.vision-canvas{
  position:fixed;

  left:-9999px;

  top:-9999px;

  width:640px;

  height:480px;

  opacity:0;

  pointer-events:none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

  .player-shell:fullscreen .ad-motion-group{
    left:10px !important;

    bottom:39px !important;
  }


  .player-shell:fullscreen .ad-card{

    min-width:0 !important;

    width:
      min(
        400px,
        calc(100vw - 84px)
      ) !important;

    max-width:
      min(
        400px,
        calc(100vw - 84px)
      ) !important;
  }


  .fullscreen-v9-meta{
    left:10px;

    bottom:17px;
  }


  .fullscreen-v9-thumb{
    right:8px;

    bottom:13px;
  }

}


/* ==========================================================
   ADTUBE LEGAL POPUPS
   ========================================================== */

.legal-overlay[hidden],
.legal-modal[hidden]{
  display:none !important;
}

.legal-overlay{
  position:fixed;
  inset:0;
  z-index:10000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px;

  background:rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.legal-modal{
  position:relative;

  width:min(680px,calc(100vw - 40px));
  max-height:min(78vh,760px);

  overflow:hidden;

  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;

  background:#181818;
  color:#f5f5f5;

  box-shadow:
    0 20px 70px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.02);

  animation:legalModalIn .16s ease-out;
}

@keyframes legalModalIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.985);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.legal-close{
  position:absolute;
  top:13px;
  right:14px;

  z-index:2;

  width:30px;
  height:30px;

  border:0;
  border-radius:50%;

  display:grid;
  place-items:center;

  padding:0;

  background:transparent;
  color:rgba(255,255,255,.72);

  font-family:Arial,Helvetica,sans-serif;
  font-size:25px;
  font-weight:300;
  line-height:1;

  cursor:pointer;

  transition:
    background .14s ease,
    color .14s ease,
    transform .14s ease;
}

.legal-close:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
  transform:scale(1.05);
}

.legal-scroll{
  max-height:min(78vh,760px);
  overflow:auto;

  padding:
    34px
    42px
    40px;
}

.legal-scroll h2{
  margin:
    0
    48px
    26px
    0;

  color:#fff;

  font-size:26px;
  font-weight:600;
  line-height:1.15;
}

.legal-scroll h3{
  margin:
    28px
    0
    8px;

  color:#fff;

  font-size:15px;
  font-weight:600;
  line-height:1.35;
}

.legal-scroll p{
  margin:
    0
    0
    14px;

  color:rgba(255,255,255,.72);

  font-size:14px;
  font-weight:400;
  line-height:1.62;
}

.legal-scroll strong{
  color:#fff;
  font-weight:600;
}

.legal-scroll::-webkit-scrollbar{
  width:8px;
}

.legal-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.legal-scroll::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

body.legal-open{
  overflow:hidden;
}

@media(max-width:700px){

  .legal-overlay{
    padding:14px;
  }

  .legal-modal{
    width:100%;
    max-height:84vh;
    border-radius:16px;
  }

  .legal-scroll{
    max-height:84vh;
    padding:
      30px
      24px
      32px;
  }

  .legal-scroll h2{
    font-size:23px;
  }
}


/* Legal popup links */
.legal-scroll a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32);
}

.legal-scroll a:hover{
  border-bottom-color:#fff;
}



/* ==========================================================
   ADTUBE ARTISTIC STATEMENT
   ========================================================== */

.legal-statement{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.13);
}

.legal-statement-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 16px;
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}

.legal-statement-language{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:24px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.legal-statement p{
  color:rgba(255,255,255,.76);
  line-height:1.62;
}

.legal-statement-divider{
  height:1px;
  margin:30px 0 26px;
  background:rgba(255,255,255,.10);
}

@media(max-width:700px){
  .legal-statement{
    margin-top:28px;
    padding-top:24px;
  }

  .legal-statement-header{
    font-size:16px;
  }
}


/* ==========================================================
   ADTUBE WATCH STATS
   ========================================================== */

.watch-stats-menu{
  position:relative;
  z-index:90;
}

.watch-stats-panel[hidden]{
  display:none;
}

.watch-stats-panel{
  position:absolute;
  top:46px;
  left:0;

  width:310px;
  max-height:min(
    620px,
    calc(100vh - 110px)
  );

  overflow:auto;

  padding:18px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .12
    );

  border-radius:16px;

  background:
    rgba(
      24,
      24,
      24,
      .96
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:
    0 18px 55px
    rgba(
      0,
      0,
      0,
      .45
    );

  color:#fff;
}

.watch-stats-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:13px;
}

.watch-stats-head strong{
  font-size:16px;
  font-weight:700;
}

.watch-stats-head span{
  color:
    rgba(
      255,
      255,
      255,
      .58
    );

  font-size:13px;
}

.watch-stats-progress{
  width:100%;
  height:3px;

  margin-bottom:20px;

  border-radius:999px;

  background:
    rgba(
      255,
      255,
      255,
      .12
    );

  overflow:hidden;
}

.watch-stats-progress > div{
  width:0;
  height:100%;

  border-radius:inherit;

  background:
    var(
      --yellow,
      #ffd400
    );

  transition:
    width .28s ease;
}

.watch-stats-grid{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:8px;
}

.watch-stats-grid > div{
  display:flex;
  flex-direction:column;
  gap:5px;

  min-width:0;

  padding:11px 10px;

  border-radius:11px;

  background:
    rgba(
      255,
      255,
      255,
      .06
    );
}

.watch-stats-grid span{
  color:
    rgba(
      255,
      255,
      255,
      .54
    );

  font-size:11px;
}

.watch-stats-grid strong{
  font-size:21px;
  font-weight:650;
  line-height:1;
}

.watch-stats-section{
  margin-top:21px;
}

.watch-stats-label{
  display:block;

  margin-bottom:9px;

  color:
    rgba(
      255,
      255,
      255,
      .52
    );

  font-size:11px;

  text-transform:uppercase;

  letter-spacing:.06em;
}

.watch-stats-advertisers{
  display:flex;
  flex-direction:column;
}

.watch-stats-advertiser-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  min-height:33px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .07
    );

  font-size:13px;
}

.watch-stats-advertiser-row span{
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:
    rgba(
      255,
      255,
      255,
      .82
    );
}

.watch-stats-advertiser-row strong{
  flex:0 0 auto;

  font-size:13px;
}

.watch-stats-empty{
  padding:10px 0;

  color:
    rgba(
      255,
      255,
      255,
      .45
    );

  font-size:13px;
}

.watch-stats-reset{
  width:100%;

  margin-top:17px;

  padding:10px 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  border-radius:10px;

  background:
    transparent;

  color:
    rgba(
      255,
      255,
      255,
      .58
    );

  cursor:pointer;

  font-size:12px;
}

.watch-stats-reset:hover{
  color:#fff;

  background:
    rgba(
      255,
      255,
      255,
      .06
    );
}

@media(max-width:700px){

  .watch-stats-panel{
    position:fixed;

    top:64px;
    left:12px;
    right:12px;

    width:auto;

    max-height:
      calc(
        100vh - 80px
      );
  }
}



/* ============================================================
   ADTUBE FULLSCREEN EXPERIENCE
   ============================================================ */

.profile-dropdown .profile-link{
  display:block;
  width:100%;
  padding:10px 14px;
  border-radius:8px;
  color:#fff;
  background:transparent;
  text-decoration:none;
  text-align:left;
}

.profile-dropdown .profile-link:hover{
  background:#353535;
}


.adtube-vision-camera{
  position:fixed !important;
  left:-10000px !important;
  top:-10000px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}


.adtube-thumb-indicator{
  display:none;
}


.player-shell:fullscreen{
  width:100vw;
  height:100vh;

  max-width:none;
  max-height:none;

  aspect-ratio:auto;

  border-radius:0;

  background:#000;
}


.player-shell:fullscreen
.youtube-layer,

.player-shell:fullscreen
> video:not(.adtube-vision-camera){

  width:100%;
  height:100%;

  background:#000;
}


.player-shell:fullscreen
.controls-layer,

.player-shell:fullscreen
.skip-pill,

.player-shell:fullscreen
.settings-menu{

  display:none !important;
}


/* bottom yellow progress line */

.player-shell:fullscreen
.edge-timeline{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  width:100%;
  height:5px;

  z-index:30;

  pointer-events:none;
}


.player-shell:fullscreen
.edge-timeline
.timeline-track{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:4px;

  border-radius:0;

  background:rgba(
    255,
    255,
    255,
    .16
  );
}


.player-shell:fullscreen
.timeline-buffer{

  display:none;
}


.player-shell:fullscreen
.timeline-progress{

  height:100%;

  background:#ffd400;

  transition:
    width .15s linear;
}


.player-shell:fullscreen
.edge-timeline input{

  display:none;
}


/* banner */

.player-shell:fullscreen
.ad-motion-group{

  left:24px;
  bottom:18px;

  transform:none !important;

  z-index:20;
}


.player-shell:fullscreen
.ad-card{

  width:min(
    520px,
    calc(100vw - 150px)
  );

  max-width:none;
  min-width:0;

  height:64px;

  padding:
    8px
    10px;

  gap:10px;

  border-radius:14px;

  background:
    rgba(
      18,
      18,
      18,
      .68
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  overflow:hidden;
}


.player-shell:fullscreen
.ad-card
.avatar{

  width:42px;
  height:42px;

  flex:
    0
    0
    42px;
}


.player-shell:fullscreen
.ad-copy{

  min-width:0;

  gap:2px;
}


.player-shell:fullscreen
.ad-copy strong{

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:16px;

  line-height:20px;

  min-height:20px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.player-shell:fullscreen
.ad-copy span{

  font-size:12px;

  line-height:15px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.player-shell:fullscreen
.ad-card
.cta{

  height:38px;

  padding:
    0
    16px;

  border-radius:20px;

  font-size:13px;
}


.player-shell:fullscreen
.sponsor-row{

  min-height:16px;

  font-size:12px;

  line-height:16px;

  color:#fff;

  text-shadow:
    0
    1px
    3px
    #000;
}


.player-shell:fullscreen
.sponsor-row
.info-dot{

  width:14px;
  height:14px;

  font-size:9px;

  border-width:1px;
}


/* one visual thumbs-up only */

.player-shell:fullscreen
.adtube-thumb-indicator{

  --thumb-progress:0;

  display:grid;

  position:absolute;

  top:26px;
  right:30px;

  z-index:40;

  width:58px;
  height:58px;

  place-items:center;

  pointer-events:none;

  opacity:.76;

  transition:
    opacity .15s ease;
}


.player-shell:fullscreen
.adtube-thumb-indicator svg{

  width:48px;
  height:48px;

  overflow:visible;
}


.player-shell:fullscreen
.adtube-thumb-indicator path{

  fill:
    color-mix(
      in srgb,
      #ffd400
      calc(
        var(--thumb-progress)
        * 100%
      ),
      rgba(
        20,
        20,
        20,
        .5
      )
    );

  stroke:#fff;

  stroke-width:3;

  stroke-linejoin:round;

  transition:
    fill .08s linear,
    stroke .08s linear;
}


.player-shell:fullscreen
.adtube-thumb-indicator.active{

  opacity:1;
}


.player-shell:fullscreen.controls-visible
.ad-motion-group,

.player-shell:fullscreen.is-paused
.ad-motion-group,

.player-shell:fullscreen.is-scrubbing
.ad-motion-group{

  transform:none !important;
}


@media(max-width:700px){

  .player-shell:fullscreen
  .ad-motion-group{

    left:12px;
    bottom:12px;
  }


  .player-shell:fullscreen
  .ad-card{

    width:
      calc(
        100vw -
        90px
      );

    height:58px;

    padding:
      6px
      8px;
  }


  .player-shell:fullscreen
  .ad-card
  .avatar{

    width:38px;
    height:38px;

    flex-basis:38px;
  }


  .player-shell:fullscreen
  .adtube-thumb-indicator{

    top:18px;
    right:18px;

    width:50px;
    height:50px;
  }


  .player-shell:fullscreen
  .adtube-thumb-indicator
  svg{

    width:42px;
    height:42px;
  }
}


/* ============================================================
   ADTUBE FULLSCREEN CLEAN UI
   ============================================================ */

/*
Fullscreen intent:
- no circular advertiser avatar at upper left
- no advertiser/channel subtitle at upper left
- only the video title at upper left
- remove the duplicate thumbs-up in upper right
- move YouTube-generated overlay controls visually toward upper-left
  as far as the iframe/player API allows
- keep the real bottom AdTube banner intact
*/


/* ------------------------------------------------------------
   CLEAN TOP-LEFT TITLE
   ------------------------------------------------------------ */

.fullscreen-clean-title{
  display:none;
}

.player-shell:fullscreen .fullscreen-clean-title{
  position:absolute;
  top:18px;
  left:28px;
  right:220px;
  z-index:30;

  display:block;

  color:#fff;
  pointer-events:none;

  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.55);
}

.player-shell:fullscreen .fullscreen-clean-title strong{
  display:block;
  overflow:hidden;

  font-family:Arial,Helvetica,sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:1.18;

  white-space:nowrap;
  text-overflow:ellipsis;
}


/* ------------------------------------------------------------
   REMOVE OLD / DUPLICATE TOP-LEFT CONTENT
   ------------------------------------------------------------ */

/*
These selectors intentionally only apply in fullscreen.
If MediaPipe/fullscreen JS has created its own top metadata wrapper,
hide avatar + subtitle but preserve title.
*/

.player-shell:fullscreen .adtube-fullscreen-top-left .avatar,
.player-shell:fullscreen .adtube-fullscreen-top-left img,
.player-shell:fullscreen .adtube-fullscreen-top-left .subtitle,
.player-shell:fullscreen .adtube-fullscreen-top-left small,
.player-shell:fullscreen .adtube-fullscreen-top-left span:not(.title){
  display:none !important;
}

.player-shell:fullscreen .adtube-fullscreen-top-left{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
}


/* common variants from previous patches */
.player-shell:fullscreen .fullscreen-video-meta .avatar,
.player-shell:fullscreen .fullscreen-video-meta .channel,
.player-shell:fullscreen .fullscreen-video-meta .advertiser,
.player-shell:fullscreen .fullscreen-video-meta small,
.player-shell:fullscreen .fullscreen-video-meta img{
  display:none !important;
}


/* ------------------------------------------------------------
   REMOVE DUPLICATE TOP-RIGHT THUMB
   ------------------------------------------------------------ */

/*
Keep the actual MediaPipe/interaction thumb at the bottom/right,
remove any extra one generated in the fullscreen header.
*/

.player-shell:fullscreen .fullscreen-top-right-thumb,
.player-shell:fullscreen .adtube-fullscreen-top-thumb,
.player-shell:fullscreen .fullscreen-header-thumb,
.player-shell:fullscreen [data-fullscreen-thumb="header"]{
  display:none !important;
}


/* if previous patch placed #adtubeThumbIndicator at top-right,
   force the single surviving indicator to bottom-right */

.player-shell:fullscreen #adtubeThumbIndicator{
  top:auto !important;
  left:auto !important;

  right:24px !important;
  bottom:20px !important;

  z-index:40 !important;
}


/* ------------------------------------------------------------
   REMOVE NATIVE YOUTUBE-LIKE TOP METADATA CLUTTER
   FROM OUR OWN OVERLAY ONLY
   ------------------------------------------------------------ */

.player-shell:fullscreen .fullscreen-channel-avatar,
.player-shell:fullscreen .fullscreen-channel-name,
.player-shell:fullscreen .fullscreen-channel-subtitle{
  display:none !important;
}


/* ------------------------------------------------------------
   YOUTUBE IFRAME
   ------------------------------------------------------------ */

/*
Important:
The actual "Weitere Videos", YouTube logo and some share/end-screen
elements are rendered INSIDE the cross-origin YouTube iframe.
CSS on accessed.live cannot individually reposition those DOM nodes.

We can, however, keep our own UI above them and mask the lower-right
iframe chrome in fullscreen.
*/

.player-shell:fullscreen::after{
  content:"";

  position:absolute;
  right:0;
  bottom:0;

  width:390px;
  height:92px;

  z-index:8;
  pointer-events:none;

  background:
    linear-gradient(
      to left,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.98) 72%,
      rgba(0,0,0,0) 100%
    );
}


/* never cover AdTube's own lower banner */
.player-shell:fullscreen .ad-motion-group,
.player-shell:fullscreen #adtubeThumbIndicator,
.player-shell:fullscreen .edge-timeline,
.player-shell:fullscreen .skip-pill{
  z-index:20;
}


/* ------------------------------------------------------------
   KEEP ONLY THE YELLOW EDGE WHEN CONTROLS COLLAPSE
   ------------------------------------------------------------ */

.player-shell:fullscreen:not(.controls-visible):not(.is-paused):not(.is-scrubbing)
.controls-layer{
  display:none !important;
}

.player-shell:fullscreen:not(.controls-visible):not(.is-paused):not(.is-scrubbing)
.edge-timeline{
  bottom:-3px !important;
}


/* ------------------------------------------------------------
   FULLSCREEN SKIP
   ------------------------------------------------------------ */

.player-shell:fullscreen .skip-pill{
  right:24px;
}


/* ------------------------------------------------------------
   SMALLER SCREENS
   ------------------------------------------------------------ */

@media (max-width:900px){
  .player-shell:fullscreen .fullscreen-clean-title{
    top:14px;
    left:18px;
    right:130px;
  }

  .player-shell:fullscreen .fullscreen-clean-title strong{
    font-size:17px;
  }

  .player-shell:fullscreen::after{
    width:270px;
    height:76px;
  }
}



/* ============================================================
   ADTUBE — NO PLAY / PAUSE FEEDBACK IN FULLSCREEN
   ============================================================ */

/*
The player may still pause/play internally through:
- MediaPipe attention logic
- thumbs-up logic
- autoplay
- manual state changes

But fullscreen must not visually expose a play/pause state.
*/


/* Our own bottom play button */
.player-shell:fullscreen #playButton{
  display:none !important;
}


/*
Any custom central play/pause overlays added by previous fullscreen
patches are suppressed here.
*/
.player-shell:fullscreen .fullscreen-play-indicator,
.player-shell:fullscreen .fullscreen-pause-indicator,
.player-shell:fullscreen .adtube-play-indicator,
.player-shell:fullscreen .adtube-pause-indicator,
.player-shell:fullscreen .play-state-indicator,
.player-shell:fullscreen .pause-state-indicator,
.player-shell:fullscreen [data-player-state="play"],
.player-shell:fullscreen [data-player-state="pause"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


/*
Some browsers / player patches expose a central replay/play overlay
through pseudo-elements.
*/
.player-shell:fullscreen::before{
  pointer-events:none;
}


/*
When paused in fullscreen, do NOT force the normal player controls
visible merely because .is-paused is present.

This is important for gaze-controlled pausing:
the image freezes cleanly instead of suddenly exposing player chrome.
*/
.player-shell:fullscreen.is-paused:not(.controls-visible):not(.is-scrubbing)
.controls-layer{
  display:none !important;
}


/*
Same rule for the yellow edge:
keep the minimal edge treatment even while attention logic has paused.
*/
.player-shell:fullscreen.is-paused:not(.controls-visible):not(.is-scrubbing)
.edge-timeline{
  bottom:-3px !important;
}


/*
Do not raise the ad banner merely because playback has been paused
by MediaPipe.
*/
.player-shell:fullscreen.is-paused:not(.controls-visible):not(.is-scrubbing)
.ad-motion-group{
  transform:none !important;
}


/*
Do not raise/show skip UI as a visual pause cue either.
*/
.player-shell:fullscreen.is-paused:not(.controls-visible):not(.is-scrubbing)
.skip-pill{
  transform:none !important;
}



/* ============================================================
   ADTUBE — YOUTUBE FULLSCREEN OVERLAY MASK
   ============================================================ */

/*
Layer ordering:

YouTube iframe
    z-index: 1

YouTube mask
    z-index: 3

AdTube banner / title / thumb / skip
    z-index: 5+

This means:
YouTube UI disappears,
our own AdTube UI remains visible.
*/

.youtube-fullscreen-mask{
  display:none;
}


/* only active in actual browser fullscreen */
.player-shell:fullscreen .youtube-fullscreen-mask{
  display:block;
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}


/* ------------------------------------------------------------
   TOP MASK

   Covers YouTube's own video-title/channel area.

   Our own clean title is rendered ABOVE this layer.
   ------------------------------------------------------------ */

.player-shell:fullscreen .youtube-mask-top{
  position:absolute;

  top:0;
  left:0;
  right:0;

  height:92px;

  background:#000;

  pointer-events:none;
}


/* ------------------------------------------------------------
   BOTTOM BASE MASK

   Very thin black strip along the bottom edge.
   This removes small native YouTube chrome fragments.
   ------------------------------------------------------------ */

.player-shell:fullscreen .youtube-mask-bottom{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:48px;

  background:#000;

  pointer-events:none;
}


/* ------------------------------------------------------------
   CENTER-RIGHT MASK

   "Weitere Videos" / recommendation teaser area.
   Kept deliberately narrow so we cover as little video as possible.
   ------------------------------------------------------------ */

.player-shell:fullscreen .youtube-mask-bottom-center{
  position:absolute;

  right:150px;
  bottom:0;

  width:310px;
  height:88px;

  background:linear-gradient(
    to top,
    #000 0%,
    #000 68%,
    rgba(0,0,0,.96) 82%,
    rgba(0,0,0,0) 100%
  );

  pointer-events:none;
}


/* ------------------------------------------------------------
   BOTTOM-RIGHT MASK

   YouTube wordmark / YouTube native overlay region.
   ------------------------------------------------------------ */

.player-shell:fullscreen .youtube-mask-bottom-right{
  position:absolute;

  right:0;
  bottom:0;

  width:190px;
  height:94px;

  background:linear-gradient(
    to top,
    #000 0%,
    #000 72%,
    rgba(0,0,0,.96) 84%,
    rgba(0,0,0,0) 100%
  );

  pointer-events:none;
}


/* ============================================================
   KEEP OUR FULLSCREEN UI ABOVE THE MASK
   ============================================================ */

.player-shell:fullscreen .fullscreen-clean-title{
  z-index:8 !important;
}

.player-shell:fullscreen .ad-motion-group{
  z-index:8 !important;
}

.player-shell:fullscreen .skip-pill{
  z-index:8 !important;
}

.player-shell:fullscreen #adtubeThumbIndicator{
  z-index:9 !important;
}

.player-shell:fullscreen .edge-timeline{
  z-index:10 !important;
}


/* ============================================================
   DON'T LET THE YOUTUBE IFRAME CATCH POINTERS IN FULLSCREEN
   ============================================================ */

/*
All fullscreen interaction belongs to our player UI / MediaPipe.
This also prevents accidental clicks on YouTube overlays.
*/

.player-shell:fullscreen .youtube-layer,
.player-shell:fullscreen .youtube-layer iframe{
  pointer-events:none !important;
}


/* ============================================================
   MOBILE / SMALL FULLSCREEN
   ============================================================ */

@media(max-width:900px){

  .player-shell:fullscreen .youtube-mask-top{
    height:74px;
  }

  .player-shell:fullscreen .youtube-mask-bottom{
    height:42px;
  }

  .player-shell:fullscreen .youtube-mask-bottom-center{
    right:110px;
    width:230px;
    height:76px;
  }

  .player-shell:fullscreen .youtube-mask-bottom-right{
    width:140px;
    height:80px;
  }

}



/* ============================================================
   ADTUBE — ACTUAL FULLSCREEN CLEANUP
   ============================================================ */


/* ------------------------------------------------------------
   THE ACTUAL EXTRA THUMB FROM app.js
   ------------------------------------------------------------ */

.player-shell:fullscreen #fullscreenThumb{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/*
Do NOT hide adtubeThumbIndicator here.

That is the MediaPipe progress/gesture indicator we still use.
Only fullscreenThumb is the unwanted extra upper-right thumb.
*/


/* ============================================================
   NATIVE YOUTUBE COVER
   ============================================================ */

.adtube-native-youtube-cover{
  display:none;
}


.player-shell:fullscreen
.adtube-native-youtube-cover{
  display:block !important;

  position:absolute !important;
  inset:0 !important;

  z-index:500 !important;

  pointer-events:none !important;
}


/* ------------------------------------------------------------
   YouTube title / channel overlay
   ------------------------------------------------------------ */

.player-shell:fullscreen
.adtube-native-cover-top-left{
  position:absolute;

  top:0;
  left:0;

  width:72%;
  height:82px;

  background:#000;
}


/* ------------------------------------------------------------
   YouTube Share / Watch later / native top-right area
   ------------------------------------------------------------ */

.player-shell:fullscreen
.adtube-native-cover-top-right{
  position:absolute;

  top:0;
  right:0;

  width:360px;
  height:96px;

  background:#000;
}


/* ------------------------------------------------------------
   Native central YouTube Play/Pause feedback
   ------------------------------------------------------------ */

.player-shell:fullscreen
.adtube-native-cover-center{
  position:absolute;

  left:50%;
  top:50%;

  width:112px;
  height:112px;

  transform:translate(-50%,-50%);

  background:#000;
}


/* ------------------------------------------------------------
   YouTube "Weitere Videos" / lower-right native area
   ------------------------------------------------------------ */

.player-shell:fullscreen
.adtube-native-cover-bottom-right{
  position:absolute;

  right:0;
  bottom:0;

  width:420px;
  height:118px;

  background:#000;
}


/* ============================================================
   FORCE YOUTUBE BELOW THE COVER
   ============================================================ */

.player-shell:fullscreen{
  isolation:isolate !important;
}


.player-shell:fullscreen
.youtube-layer,

.player-shell:fullscreen
.youtube-layer iframe{
  z-index:1 !important;
}


.player-shell:fullscreen
.youtube-layer iframe{
  pointer-events:none !important;
}


/* ============================================================
   OUR UI ABOVE THE COVER
   ============================================================ */

.player-shell:fullscreen
.fullscreen-clean-title{
  z-index:700 !important;
}


.player-shell:fullscreen
#adtubeFullscreenYoutube{
  z-index:710 !important;
}


.player-shell:fullscreen
.ad-motion-group{
  z-index:700 !important;
}


.player-shell:fullscreen
.skip-pill{
  z-index:700 !important;
}


.player-shell:fullscreen
#adtubeThumbIndicator{
  z-index:720 !important;
}


.player-shell:fullscreen
.edge-timeline{
  z-index:730 !important;
}


/* ============================================================
   NO NORMAL PLAYER CONTROLS IN FULLSCREEN
   ============================================================ */

.player-shell:fullscreen
#controls,

.player-shell:fullscreen
.controls-layer,

.player-shell:fullscreen
#playButton,

.player-shell:fullscreen
#nextButton,

.player-shell:fullscreen
#muteButton,

.player-shell:fullscreen
#settingsButton,

.player-shell:fullscreen
#theaterButton,

.player-shell:fullscreen
#fullscreenButton,

.player-shell:fullscreen
.time,

.player-shell:fullscreen
.volume-wrap{
  display:none !important;
}


/*
Paused by face tracking must NOT resurrect the normal controls.
*/

.player-shell:fullscreen.is-paused
.controls-layer,

.player-shell:fullscreen.is-paused
#controls{
  display:none !important;
}


/* Keep our thin yellow timeline at the viewport edge. */

.player-shell:fullscreen
.edge-timeline,

.player-shell:fullscreen.is-paused
.edge-timeline,

.player-shell:fullscreen.controls-visible
.edge-timeline{

  display:block !important;

  bottom:-3px !important;

  z-index:730 !important;
}


/*
Do not move banner merely because MediaPipe paused playback.
*/

.player-shell:fullscreen.is-paused
.ad-motion-group,

.player-shell:fullscreen.controls-visible
.ad-motion-group{

  transform:none !important;
}


/* ============================================================
   SMALL FULLSCREEN
   ============================================================ */

@media(max-width:900px){

  .player-shell:fullscreen
  .adtube-native-cover-top-left{
    width:68%;
    height:72px;
  }

  .player-shell:fullscreen
  .adtube-native-cover-top-right{
    width:280px;
    height:82px;
  }

  .player-shell:fullscreen
  .adtube-native-cover-center{
    width:96px;
    height:96px;
  }

  .player-shell:fullscreen
  .adtube-native-cover-bottom-right{
    width:320px;
    height:100px;
  }

}



/* ============================================================
   ADTUBE — SAFE FULLSCREEN THUMB SUPPRESSION
   ============================================================ */

/*
Do this with CSS only.

DO NOT attach a MutationObserver to fullscreenThumb.
The previous observer could trigger itself continuously because
its callback modified the attributes it was observing.
*/

#fullscreenThumb{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.player-shell:fullscreen #fullscreenThumb{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}