/* Independent vertical presentation; shared playback and telemetry stay unchanged. */
.vertical-gesture{display:none}
body.vertical-mode{overflow:hidden;background:#000}
body.vertical-mode #app{max-width:none;height:100dvh;min-height:0;padding:0;border:0;background:#000;overflow:hidden}
.vertical-mode .brand,.vertical-mode .discovery,.vertical-mode .page-footer{display:none}
body.vertical-mode #app>main{height:100%;width:100%;max-width:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.vertical-mode .watch-dock{position:relative;top:auto;grid-row:1;min-width:0;min-height:0;display:block;background:#000;isolation:isolate;z-index:1}
body.vertical-mode #app .player{width:100%;height:100%;min-height:0;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#000;overflow:hidden}
.vertical-mode .poster img{object-fit:contain}
.vertical-mode .embed-mount{position:absolute;inset:0}
.vertical-mode .embed-mount iframe,.vertical-mode .embed-mount video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.vertical-mode .player.vertical-external .embed-mount iframe{pointer-events:auto}
.vertical-mode .player.vertical-external .vertical-gesture{display:none}
.vertical-mode .vertical-gesture{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:0;touch-action:pan-x pinch-zoom;cursor:pointer}
.vertical-mode .vertical-gesture:focus-visible{outline:3px solid #c5e8ce;outline-offset:-4px}
.vertical-mode .film-details{grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;direction:ltr;width:100%;min-width:0;height:calc(56px + env(safe-area-inset-bottom));max-height:none;margin:0;padding:6px max(14px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:hidden;border:0;border-top:1px solid #242a34;background:#12161e;position:relative;z-index:4}
.vertical-mode #film-title{grid-column:1;grid-row:1;min-width:0;font-size:14px;line-height:1.45;margin:0;font-weight:500;letter-spacing:0;color:#f4f7fc;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}
.vertical-mode .film-details:not([data-playback=playing]) #film-title{display:none}
.vertical-mode .film-details .playback-support{display:contents}
.vertical-mode .film-details .playback-identity{grid-column:1;grid-row:1;display:flex;align-items:center;min-width:0;gap:10px;padding:0}
.vertical-mode .film-details[data-playback=playing] .playback-identity{display:none}
.vertical-mode .playback-support .playback-state{min-width:0;font-size:13px;line-height:1.5;font-weight:400;color:#c8d0dc;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.vertical-mode .playback-actions{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;flex:none;max-width:none;flex-wrap:nowrap;gap:8px}
.vertical-mode .film-details .sound-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;min-height:36px;min-width:36px;padding:0;margin:0;border:0;border-radius:10px;background:#202733;color:#a5afbe;box-shadow:none;transition:background .15s,border-color .15s}
.vertical-mode .film-details .sound-toggle[aria-pressed=true]{background:#29374a;color:#dceaff;box-shadow:none}
.vertical-mode .film-details .sound-toggle:disabled{background:#1d2430;opacity:.5;cursor:wait}
.vertical-mode .film-details .sound-toggle svg{display:block;width:18px;height:18px;opacity:1}
.vertical-mode .sound-label,.vertical-mode .sound-switch{display:none}
.vertical-mode .film-details .sound-toggle:hover:not(:disabled){background:#314057;filter:none}
.vertical-mode .film-details .play-retry{height:34px;min-height:34px;padding:6px 10px;border:1px solid #46566e;border-radius:8px;background:#263247;color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.vertical-mode .vertical-resume{display:none;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid #4c6380;border-radius:9px;background:#29374a;color:#fff}
.vertical-resume svg{width:19px;height:19px;fill:currentColor;transform:translateX(-1px)}
.vertical-mode .film-details:is([data-playback=paused],[data-playback=ended],[data-playback=blocked]) .vertical-resume{display:inline-flex}
.vertical-mode .film-details:is([data-playback=paused],[data-playback=ended],[data-playback=blocked]) .status-visual{display:none}
.vertical-mode .film-details button:focus-visible{outline:3px solid #a6d0ff;outline-offset:3px}
html[dir=rtl] .vertical-mode #film-title,html[dir=rtl] .vertical-mode .playback-identity{direction:rtl;text-align:right}
.vertical-mode .front-message{margin:0}
.vertical-mode .vertical-empty{position:absolute;inset:45% 20px auto;text-align:center;font-size:14px;color:#a6b1c3}
.vertical-mode .load-more{display:none}
.vertical-load-retry{position:absolute;top:54%;left:50%;transform:translateX(-50%);border:1px solid #ffffff30;border-radius:20px;padding:10px 20px;background:#ffffff10}
.vertical-transition .player{animation:vertical-enter .18s ease-out}
@keyframes vertical-enter{from{opacity:.7}to{opacity:1}}
.vertical-mode .player.is-loading .poster{z-index:2;pointer-events:none}
.vertical-mode .player.is-loading .poster img{opacity:.7}
.vertical-mode .player.is-loading .play-circle{display:none}
.vertical-mode .admin-preview-banner{position:fixed;top:0;inset-inline:0;z-index:10}
@media(max-width:350px){.vertical-mode .film-details{column-gap:8px;padding-inline:12px}.vertical-mode .playback-actions{gap:6px}.vertical-mode .film-details .play-retry{padding-inline:8px}.vertical-mode .film-details .sound-toggle{width:36px;min-width:36px}.vertical-mode .film-details .sound-toggle svg{display:block}}
@media(prefers-reduced-motion:reduce){.vertical-transition .player{animation:none}}

/* Full viewport playback with a floating, state-driven control layer. */
body.vertical-mode #app>main{display:block}
.vertical-mode .watch-dock{position:absolute;inset:0;height:100%;width:100%}
.vertical-mode .film-details{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:5px;min-height:64px;height:auto;padding:26px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;background:linear-gradient(180deg,transparent,#070c15b8 42%,#070c15e6);color:#f5f7fc;transition:opacity .14s ease,transform .14s ease,visibility .14s;transform:translateY(0);opacity:1;visibility:visible}
.vertical-mode .film-details #film-title,.vertical-mode .film-details:not([data-playback=playing]) #film-title{display:-webkit-box;grid-row:1;grid-column:1;text-shadow:0 1px 3px #0008}
.vertical-mode .film-details .playback-identity{grid-row:2;grid-column:1;gap:8px}
.vertical-mode .film-details .playback-actions{grid-column:2;grid-row:1/span 2;align-self:center}
.vertical-mode .film-details .playback-state{font-size:12px;color:#d0d9e6;text-shadow:0 1px 3px #0008}
.vertical-mode .film-details .sound-toggle{background:#182332df;color:#e8f0fc}
.vertical-mode .film-details .sound-toggle[aria-pressed=false]{width:auto;max-width:145px;gap:6px;padding-inline:10px;background:#273951ed;color:#f0f6ff}
.vertical-mode .sound-toggle[aria-pressed=false] .sound-label{display:inline;font-size:12px;white-space:nowrap}
.vertical-mode .film-details .sound-toggle[aria-pressed=true]{background:#182332df;color:#e8f0fc}
.vertical-mode #app.vertical-controls-hidden .film-details{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
.vertical-mode .player.is-loading .poster img{opacity:1}
.vertical-mode .player.vertical-manual .embed-mount iframe{pointer-events:auto}
.vertical-mode .player.vertical-manual .vertical-gesture{display:none}
@media(prefers-reduced-motion:reduce){.vertical-mode .film-details{transition:none}}

/* Status and sound share one baseline below the full-width title. */
.vertical-mode .film-details:not([data-playback=playing]) #film-title{grid-column:1/-1}
.vertical-mode .film-details:not([data-playback=playing]) .playback-actions{grid-row:2;align-self:center}
.vertical-mode .film-details:not([data-playback=playing]) .playback-identity{min-height:36px;align-self:center}