/* Controls stay legible without darkening the complete video. */
.stage .shade{display:none}
.topbar{background:none;text-shadow:0 1px 4px #000}
.caption{text-shadow:0 1px 4px #000,0 2px 9px #000}
.caption::before{content:"";position:absolute;inset:-8px -10px;z-index:-1;border-radius:10px;background:#08070b59;pointer-events:none}
.transport{text-shadow:0 1px 3px #000}
.transport #time,.transport #duration{padding:3px 2px;border-radius:4px;background:#08070b80}
.transport>.icon{background:#08070b80;border-radius:50%}
/* The same 56px content row in both views; the browser supplies its safe area once. */
.discover-bottom,.player-bottom.bottom-nav{height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(12px,env(safe-area-inset-left,0px));align-items:stretch;box-sizing:border-box}
.discover-bottom{border-radius:12px 12px 0 0}
.discover-bottom a,.player-bottom :is(a,button){min-height:44px;height:55px;padding:3px 4px;gap:3px}
.discover-bottom .discover-mark svg,.player-bottom .discover-mark svg{width:30px;height:30px;margin-top:-4px}
.discover-wrap{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.discover-card{content-visibility:auto;contain-intrinsic-size:auto 300px}
.discover-availability{color:var(--discover-sub);font-size:12px;line-height:1.5;margin:2px 0 12px}
@media(min-width:680px){.discover-card{contain-intrinsic-size:auto 350px}}