/* Cinelet in the browser, in the TV app's look (ui/tv/TvKit.kt, canvas "Android TV v2"): black ground, Manrope, a
   fixed menu on the left, a billboard over rows of cards. One focus language: a card under the pointer gets a white frame (no
   zoom, the others stay as they are); a button turns solid white with black text; "on" (liked, saved, current) is yellow. */
:root {
    --bg: #000; --panel: #0B0D12; --rest: rgba(255, 255, 255, .16); --halo: rgba(255, 255, 255, .35);
    --text: #fff; --soft: #D0D5DD; --sub: #9AA3B2; --line: #2A2F3D; --accent: #F5C518; --on: #0B0D12;
    /* the shared pieces' names (sheets, dialogs, the first-visit screens) */
    --ground: #000; --surface: #12151C; --surface2: #1C2029; --muted: #A3ACBA; --subtle: #8A93A3; --passfg: #FCA5A5;
    --start: 16px; --bar: 60px; --menu: 0px;
    color-scheme: dark;
}
@media (min-width: 900px) { :root { --start: 40px; --bar: 0px; --menu: 208px; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { color: var(--text); font: 500 15px/1.45 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; }
.card, .mitem, .bitem, .maker, .makerpill { text-decoration: none; }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 800; }
h4 { font-size: 14px; font-weight: 800; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; }
html[dir=rtl] h1, html[dir=rtl] .kicker, html[dir=rtl] .label { letter-spacing: 0; }
.small { font-size: 12.5px; line-height: 1.4; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.accent { color: var(--accent); }
.error { color: var(--passfg); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.guest-slow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }   /* GuestStart after 12 s: Try again + Reload */
.pad { padding: 28px 16px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--subtle); }
.boot { height: 100dvh; display: grid; place-items: center; }
/* the app never started (index.html, 12 s): one round reload button instead of the spinner (specs/replay-fixes-1030 AC5) */
.boot-stuck { display: flex; flex-direction: column; align-items: center; }
.boot-reload { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on); display: grid; place-items: center; }
.boot-reload:focus-visible { outline: none; box-shadow: 0 0 0 4px #fff, 0 0 26px 4px rgba(255, 255, 255, .4); }
.boot-stuck span { margin-top: 10px; color: var(--soft); font-weight: 700; font-size: 14px; }
@media (min-width: 900px) { .boot-reload { width: 60px; height: 60px; } }
/* a big screen with no hover = a TV seen from the sofa: bigger, and it takes the remote's focus (index.html) */
@media (min-width: 900px) and (hover: none) {
    .boot-reload { width: 84px; height: 84px; }
    .boot-reload svg { width: 38px; height: 38px; }
    .boot-stuck span { margin-top: 14px; font-size: 20px; }
}
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(245, 197, 24, .25); border-top-color: var(--accent); display: inline-block; animation: spin .8s linear infinite; flex: none; }
.spin.dark { width: 20px; height: 20px; border-color: rgba(0, 0, 0, .2); border-top-color: #1F1F1F; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } * { transition: none !important; } }
.ico { flex: none; }
.wordmark { font-weight: 800; letter-spacing: -.045em; color: var(--text); }
.wordmark i { font-style: normal; color: var(--accent); }

/* --- the shell: the menu, the sections, the bottom bar on a phone ---------------------------------------------- */
.main { position: relative; height: calc(100dvh - var(--bar) - env(safe-area-inset-bottom)); overflow: hidden; }
.pane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.menu { display: none; }
@media (min-width: 900px) {
    /* a fixed sidebar, always open: the sections start right of it */
    .main { margin-left: var(--menu); }
    .menu { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--menu); display: flex; flex-direction: column; gap: 4px;
        padding: 22px 12px; overflow-y: auto; background: var(--bg); border-right: 1px solid #16191F; }
    .brand { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; margin-bottom: 18px; text-decoration: none;
        color: var(--accent); font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
    .mitem { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--sub); white-space: nowrap; font-weight: 700;
        transition: background .12s, color .12s; }
    .mitem .mi { width: 22px; display: flex; flex-direction: column; align-items: center; flex: none; }
    .brand .mi { display: none; }
    .mitem.on { color: var(--text); font-weight: 800; background: rgba(255, 255, 255, .08); }
    .mitem.on .ico { color: var(--accent); }
    .mitem:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
    .mitem:focus-visible { background: #fff; color: #000; outline: none; }
    .mitem:focus-visible .ico { color: #000; }
    .bottombar { display: none !important; }
}
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--bar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #000; border-top: 1px solid #1a1a1a; }
.bitem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--sub); font-size: 10.5px; font-weight: 700; text-align: center; }
.bitem .mi { display: flex; }
.bitem .ml { max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bitem.on { color: var(--text); font-weight: 800; }
.bitem.on .ico { color: var(--accent); }
.shell.playing .bottombar { display: none; }

/* --- the TV pieces ------------------------------------------------------------------------------------------- */
.backdrop { position: absolute; inset: 0; background: var(--panel); overflow: hidden; }
.backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: opacity .35s ease-out; }
.backdrop img.pending { opacity: 0; }
.shade-x { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .5) 42%, transparent 75%); }
.shade-x.strong { background: linear-gradient(90deg, rgba(0, 0, 0, .95) 0, rgba(0, 0, 0, .72) 40%, rgba(0, 0, 0, .1) 75%); }
.shade-y { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, transparent 22%, transparent 58%, #000 100%); }
html[dir=rtl] .shade-x { transform: scaleX(-1); }
.kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--accent); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kicker.muted { color: var(--sub); }
h1.huge { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.8px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
h1.big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin-top: 6px; }
.metaline { font-size: 14px; font-weight: 700; color: var(--soft); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tvbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 8px; background: var(--rest); color: #fff;
    font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .12s, box-shadow .12s, color .12s; text-align: center; }
.tvbtn.big { padding: 11px 22px; font-size: 15px; }
.tvbtn.round { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.tvbtn.primary { background: #fff; color: #000; font-weight: 800; }
.tvbtn.on { color: var(--accent); }
.tvbtn:hover, .tvbtn:focus-visible { background: #fff; color: #000; font-weight: 800; box-shadow: 0 0 0 3px var(--halo); outline: none; }
.tvbtn.on:hover, .tvbtn.on:focus-visible { background: var(--accent); box-shadow: 0 0 0 3px rgba(245, 197, 24, .35); }
.tvpill { flex: none; padding: 8px 16px; border-radius: 20px; background: var(--rest); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; text-align: center; }
.tvpill.on { background: var(--line); color: var(--accent); }
.tvpill:hover, .tvpill:focus-visible { background: #fff; color: #000; outline: none; }
.tvspin { display: grid; place-items: center; padding: 70px 0; }
.tvempty { padding: 30px var(--start); color: var(--sub); font-weight: 600; }

/* cards and rows */
.card { flex: none; width: 260px; display: flex; flex-direction: column; text-align: start; position: relative; outline: none; }
.card-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--panel);
    transition: box-shadow .15s ease; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .18s; }
.card .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.card .dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .78); font-size: 11px; font-weight: 800; }
.card-title { margin-top: 9px; font-size: 13px; font-weight: 800; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.card-sub { font-size: 12px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover, .card:focus-visible { z-index: 2; }
.card:hover .card-img, .card:focus-visible .card-img { box-shadow: 0 0 0 3px #fff; }
.card:hover .card-title, .card:focus-visible .card-title { color: #fff; }
.rows { position: relative; z-index: 2; padding-bottom: 40px; }
.row { margin-bottom: 14px; }
.row-head { display: flex; align-items: baseline; gap: 16px; padding: 0 var(--start); }
.rowlink { color: var(--sub); font-size: 13px; font-weight: 800; }
.rowlink:hover { color: var(--accent); }
.row-body { position: relative; }
.row-track { display: flex; gap: 14px; overflow-x: auto; padding: 14px var(--start) 16px; scroll-padding: 0 var(--start); scrollbar-width: none; scroll-snap-type: x proximity; }
.row-track::-webkit-scrollbar { display: none; }
.row-track .card { scroll-snap-align: start; }
.arrow { position: absolute; top: 14px; height: calc((260px * 9 / 16)); width: 52px; z-index: 3; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .15s; }
.arrow.left { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent); }
.arrow.right { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .9), transparent); }
.row-body:hover .arrow { opacity: 1; }
@media (pointer: coarse) { .arrow { display: none; } }
.tvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 16px; padding: 10px var(--start) 40px; }
.tvgrid .card { width: auto; }

/* Home: the billboard over the rows */
.billboard { position: relative; height: max(420px, min(66vh, 52vw)); }
.bb-text { position: absolute; left: var(--start); bottom: 120px; width: min(560px, calc(100% - var(--start) - 16px)); z-index: 2; animation: fade .3s ease-out; }
html[dir=rtl] .bb-text { left: auto; right: var(--start); }
.hook { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .rows { margin-top: -84px; }
.billboard .tvspin { position: absolute; inset: 0; }

/* the section screens */
.tvscreen { padding-bottom: 40px; }
.tvtitle { display: flex; align-items: center; justify-content: space-between; padding: 30px var(--start) 14px; }
.tvpills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--start) 6px; }
.tvpills::-webkit-scrollbar { display: none; }
.tvpills.flat { padding: 0; flex-wrap: wrap; overflow: visible; }
.tvpills.recent { margin-top: 12px; }
.sub { padding: 6px var(--start); color: var(--sub); font-size: 13.5px; font-weight: 600; }
.tvcard .sub, .fm-body .sub { padding: 0; }
.tvsub { padding: 24px var(--start) 10px; font-size: 18px; }
.tvsearch { margin: 0 var(--start) 6px; max-width: 600px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px;
    background: var(--rest); color: var(--sub); transition: background .12s, box-shadow .12s; }
.tvsearch:focus-within { background: #fff; color: #333; box-shadow: 0 0 0 3px var(--halo); }
.tvsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: inherit; font: inherit; font-size: 16px; font-weight: 700; }
.tvsearch:focus-within input { color: #000; }
.tvsearch input::-webkit-search-cancel-button { filter: grayscale(1); }
.tvtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 0 var(--start); }
.tvtile { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--panel); transition: box-shadow .15s; }
.tvtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tvtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .8)); }
.tvtile span { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 17px; font-weight: 800; text-align: start; }
.tvtile:hover, .tvtile:focus-visible { box-shadow: 0 0 0 3px #fff; outline: none; z-index: 1; }
.makers-row { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 14px var(--start) 10px; }
.maker { flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.maker b { font-size: 13px; line-height: 1.25; }
.maker span { font-size: 12px; color: var(--sub); font-weight: 600; }
.maker .avatar { transition: box-shadow .15s; }
.maker:hover .avatar, .maker:focus-visible .avatar { box-shadow: 0 0 0 3px #fff; }
.maker:focus-visible { outline: none; }

/* Account */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; padding: 0 var(--start); align-items: stretch; }
.tvcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.tvcard h3 { margin-top: 6px; }
.tvcard .sub { color: var(--sub); }
.tvcard .btns { margin-top: 6px; }
.signins { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 6px; }
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 0; text-align: start; text-decoration: none; color: var(--text); }
.linkrow .ico { color: var(--sub); }
.linkrow:hover h3 { color: var(--accent); }

/* pages over the sections: a film, a filmmaker */
.overlay-screen { position: absolute; inset: 0; z-index: 10; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; animation: fade .2s ease-out; }
.fp-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px calc(var(--start) - 12px) 0;
    height: 64px; margin-bottom: -64px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); }
.fp-bar > * { pointer-events: auto; }
.fp-bar .iconbtn { background: rgba(0, 0, 0, .45); }
.fp-hero, .fm-hero { position: relative; min-height: max(460px, 82vh); display: flex; align-items: center; padding: 80px var(--start) 60px; }
.fp-text, .fm-text { position: relative; z-index: 2; width: min(640px, 100%); }
.fp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-badges span { padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); font-size: 10.5px; font-weight: 800; letter-spacing: .8px; }
.fp-badges span.gold { background: var(--accent); color: #000; }
.credits { margin-top: 6px; font-size: 14px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about { margin-top: 12px; max-width: 500px; font-size: 15px; line-height: 1.5; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fp-text .makerpill { margin-top: 14px; }
.fp-rows { margin-top: -30px; }
.fp-hero.playing + .fp-rows { margin-top: 0; }
/* one click on the still plays the film here (inline.js): the cover is the button, the text lets clicks through to it */
.fp-cover { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.fp-cover .bigplay { position: absolute; left: 70%; top: 46%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .9); transition: background .15s, box-shadow .15s; }
.fp-cover:hover .bigplay, .fp-cover:focus-visible .bigplay { background: #fff; box-shadow: 0 0 0 6px var(--halo); }
.fp-hero:not(.playing) .fp-text { pointer-events: none; }
.fp-hero:not(.playing) .fp-text :is(button, a) { pointer-events: auto; }
.fp-hero.playing { display: block; min-height: 0; padding: 64px var(--start) 28px; }
.fp-stage { width: min(100%, calc((100dvh - 170px) * 16 / 9)); }
.fp-hero.playing .fp-text { width: min(960px, 100%); margin-top: 18px; }
.fp-hero.playing h1.huge { font-size: clamp(22px, 2.2vw, 30px); }
.fp-hero.playing .about { -webkit-line-clamp: 3; }
.istage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
/* a card's play button and the window it opens */
.card-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(0, 0, 0, .55); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); cursor: pointer; transition: background .15s, color .15s; }
.card-play:hover { background: #fff; color: #000; }
.scrim.pscrim { z-index: 90; align-items: center; padding: 16px; background: rgba(0, 0, 0, .85); }
.pmodal { width: min(1100px, 100%, calc((100dvh - 110px) * 16 / 9)); max-height: calc(100dvh - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; animation: fade .15s ease-out; }
.pmodal .istage { border-radius: 0; }
.pm-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; }
.pm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-text span { font-size: 12px; color: var(--sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-acts { flex: none; display: flex; gap: 8px; }
/* Full screen: the film alone (inline.js PlayerModal) */
.pscrim .istage:fullscreen { border-radius: 0; }
/* the next film over the ended one (inline.js NextUp) */
.pm-next { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--panel); overflow: hidden; animation: fade .2s ease-out; }
.pm-next-glow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: blur(30px); }
.pm-next-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; max-width: 100%; }
.pm-next-film { position: relative; width: min(280px, 46vw); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.pm-next-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-ring { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.pm-ring .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.pm-ring circle { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; animation: pm-ring 5s linear forwards; }
.pm-next.paused .pm-ring circle { animation-play-state: paused; }
/* Over the end credits: a card in the corner, the credits keep playing around it (clear of the player's own control bar) */
.pm-next.corner { inset: auto 12px 58px auto; width: 300px; border-radius: 10px; background: rgba(18, 18, 20, .92); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.pm-next.corner .pm-next-in { gap: 8px; padding: 12px; }
.pm-next.corner .pm-next-film { width: 100%; }
.pm-next.corner .pm-next-line { font-size: 13px; max-width: 100%; }
.pm-next.corner .fd-pills .pill { height: 32px; }
@keyframes pm-ring { to { stroke-dashoffset: 0; } }
.pm-next-line { font-size: 14px; font-weight: 700; max-width: min(420px, 80vw); text-align: center; }
@media (max-width: 760px) { .pm-next-in { gap: 6px; padding: 8px; } .pm-next-film { width: 150px; } .pm-ring { width: 40px; height: 40px; } .pm-next .fd-pills .pill { height: 32px; }
    /* a phone's film is small: over its credits a strip along its bottom edge */
    .pm-next.corner { inset: auto 0 0 0; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--line); }
    .pm-next.corner .pm-next-in { flex-direction: row; gap: 8px; padding: 6px 8px; }
    .pm-next.corner .label { display: none; }
    .pm-next.corner .pm-next-film { flex: none; width: 72px; border-radius: 4px; }
    .pm-next.corner .pm-ring { width: 30px; height: 30px; } .pm-next.corner .pm-ring svg:not(.ring) { width: 16px; height: 16px; }
    .pm-next.corner .pm-next-line { flex: 1; min-width: 0; font-size: 12px; text-align: left; }
    .pm-next.corner .fd-pills { flex: none; flex-wrap: nowrap; gap: 6px; } .pm-next.corner .fd-pills .pill { height: 28px; padding: 0 10px; font-size: 12px; } }
.fm-text .avatar { box-shadow: 0 0 0 4px rgba(0, 0, 0, .6); }
.fm-text h1.huge { margin-top: 14px; }
.fm-stats { display: flex; gap: 28px; margin-top: 14px; }
.fm-stats span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--sub); font-weight: 600; }
.fm-stats b { font-size: 20px; color: #fff; }
.linkchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.linkchips a { padding: 6px 12px; border-radius: 999px; background: var(--rest); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.linkchips a:hover { background: #fff; color: #000; }
.fm-body { padding-bottom: 40px; }
.fm-body > .sub { padding: 0 var(--start); }
.makerpill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--rest); font-size: 13px; font-weight: 800; }
.makerpill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.makerpill:hover { background: #fff; color: #000; }

/* the player: all film, one strip of controls under it, never over it */
.watch { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; animation: fade .2s ease-out; }
.w-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.w-stage { position: relative; width: min(100vw, calc((100dvh - 84px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.host { position: absolute; inset: 0; }
.w-still { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; }
.soundpill { position: absolute; left: 12px; top: 60px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px;
    border-radius: 17px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); animation: fade .2s ease-out; }
.soundpill:hover, .soundpill:focus-visible, .startpill:hover, .startpill:focus-visible { background: #fff; color: #000; outline: none; }
/* smart start: the film opened past its opening; this goes back to 0:00 (under the sound button when both show) */
.startpill { position: absolute; left: 12px; top: 60px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px;
    border-radius: 17px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); animation: fade .2s ease-out; }
.soundpill + .startpill { top: 102px; }
.w-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.w-still .spin, .w-still .bigplay { position: relative; }
.bigplay { width: 76px; height: 76px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--halo); }
.w-end { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--soft); }
.w-bar { flex: none; height: 84px; display: flex; align-items: center; gap: 10px; padding: 0 24px; transition: opacity .35s; }
.watch.idle .w-bar { opacity: .2; }
.watch.idle .w-bar:hover, .w-bar:focus-within { opacity: 1; }
.w-title { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: start; padding: 0 8px; }
.w-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-title span { font-size: 12px; color: var(--sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-title:hover b { color: var(--accent); }
.w-acts { display: flex; gap: 8px; }
.w-next { width: 200px; display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.w-next span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--sub); }
.w-next b { max-width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .w-next { display: none; } }
@media (max-width: 760px) {
    .w-stage { width: 100vw; }
    .w-bar { height: auto; flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .w-title { order: -1; flex-basis: 100%; padding: 0 2px 4px; }
    .w-acts .tvbtn span { display: none; }
    .w-acts .tvbtn { padding: 10px 12px; }
}
.endscreen { flex: 1; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; padding: 80px 60px; background: var(--panel); overflow-y: auto; }
.es-q { margin-top: 24px; font-size: 18px; font-weight: 700; color: var(--soft); }
.es-tiles { display: flex; gap: 12px; margin: 14px 0 16px; }
.vote { width: 150px; height: 104px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 800; transition: background .12s, box-shadow .12s; }
.vote:hover, .vote:focus-visible { background: #fff; color: #000; box-shadow: 0 0 0 3px var(--halo); outline: none; }
.es-thumb { position: relative; margin-top: 10px; aspect-ratio: 16 / 9; max-width: 720px; border-radius: 10px; overflow: hidden; background: #000; }
.es-thumb img { width: 100%; height: 100%; object-fit: cover; }
.es-progress { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); transition: width 1s linear; }
.es-next h2 { margin-top: 12px; font-size: 20px; }
@media (max-width: 760px) { .endscreen { grid-template-columns: 1fr; padding: 32px 20px; gap: 26px; } .vote { width: 46%; } }

/* phones */
@media (max-width: 899px) {
    .billboard { height: 64vh; min-height: 400px; }
    .bb-text { bottom: 70px; }
    .home .rows { margin-top: -40px; }
    .card { width: 168px; }
    .card-title { font-size: 12.5px; }
    .arrow { height: calc(168px * 9 / 16); }
    .tvgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 10px; }
    .fp-hero, .fm-hero { min-height: 70vh; align-items: flex-end; padding-top: 120px; padding-bottom: 40px; }
    .fp-bar { padding: 8px 4px; }
    .fp-rows { margin-top: 0; }
    .fp-cover .bigplay { left: 50%; top: 36%; width: 64px; height: 64px; }
    .fp-hero.playing { padding: 56px 0 20px; }
    .fp-hero.playing .fp-stage { width: 100%; }
    .fp-hero.playing .istage { border-radius: 0; }
    .fp-hero.playing .fp-text { padding: 0 var(--start); }
    .card-play { width: 40px; height: 40px; }
    .scrim.pscrim { padding: 8px; }
    .pm-bar { flex-wrap: wrap; }
    .pm-text { flex-basis: 100%; }
    .pm-acts { width: 100%; justify-content: space-between; }
    .tvtitle { padding-top: 22px; }
}

/* --- shared: sheets, dialogs, toasts, the first-visit and sign-in screens ----------------------------------------- */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 4px; padding-bottom: 4px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--rest); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; text-align: center; }
.chip:hover { background: #fff; color: #000; }
.chip.on { background: var(--accent); color: var(--on); }
.pill { height: 44px; padding: 0 18px; border-radius: 8px; background: var(--rest); font-size: 14px; font-weight: 800; white-space: nowrap; text-align: center; }
.pill.on { background: #fff; color: #000; }
.pill:hover { box-shadow: 0 0 0 3px var(--halo); }
.wrap-row { display: flex; gap: 8px; flex-wrap: wrap; }
.end-row { display: flex; justify-content: flex-end; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.badge { display: inline-block; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.gold { background: var(--accent); color: var(--on); }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); flex: none; }
.iconbtn:hover { background: #fff !important; color: #000; }
.textbtn { padding: 10px 14px; border-radius: 20px; font-weight: 800; color: var(--muted); text-align: center; }
.textbtn.accent { color: var(--accent); }
.textbtn.small { font-size: 12.5px; padding: 6px 0; font-weight: 700; }
.textbtn:hover { color: var(--text); }
.avatar { flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--on); font-weight: 800; letter-spacing: -.03em; }
.avatar.quiet { background: var(--surface2); color: var(--text); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.progress { display: block; height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; margin-top: 3px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.progress.big { height: 6px; margin: 6px 0; }
.stat { font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: var(--surface2); }
.facet { display: flex; flex-direction: column; gap: 6px; }
.tag { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 20px; background: rgba(245, 197, 24, .12); border: 1px solid rgba(245, 197, 24, .4); }
.tag.quiet { background: var(--surface); border-color: var(--line); color: var(--muted); }
.sentinel { height: 1px; }
.legal { display: flex; gap: 16px; }
.legal a { font-size: 12.5px; color: var(--muted); }
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease-out; }
.sheet { position: relative; width: min(560px, 100%); max-height: 88dvh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
    border-radius: 18px 18px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; outline: none; animation: rise .18s ease-out; }
.grip { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
@media (min-width: 700px) { .scrim { align-items: center; } .sheet { border-radius: 14px; border-bottom: 1px solid var(--line); padding-bottom: 20px; } .grip { display: none; } }
.dialog h2 { font-size: 20px; }
.dialog-body { display: flex; flex-direction: column; gap: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.dialog textarea, .codebox { width: 100%; background: #000; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 10px 12px; }
.dialog textarea:focus, .codebox:focus { outline: none; border-color: #fff; }
.codebox { font-size: 22px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.check input { accent-color: var(--accent); width: 18px; height: 18px; }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar) + 20px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; gap: 8px;
    align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: #fff; color: #000; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: rise .18s ease-out; }
.google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; width: 100%; max-width: 380px; border-radius: 25px; background: #fff; color: #1F1F1F; font-weight: 700; font-size: 16px; }
.google .g { color: #4285F4; font-size: 20px; font-weight: 800; }
.google:hover { box-shadow: 0 0 0 3px var(--halo); }
.field { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 10px; background: var(--rest); color: var(--muted); }
.field:focus-within { background: #fff; color: #333; }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: inherit; font: inherit; font-weight: 600; font-size: 15px; }
.field:focus-within input { color: #000; }
.fullsheet { position: fixed; inset: 0; z-index: 85; background: var(--bg); overflow-y: auto; display: flex; justify-content: center; }
.pickover > .pick { width: 100%; }
.fullsheet .corner { position: absolute; top: 10px; right: 10px; color: var(--muted); }
.fs-in, .centerscreen { width: min(420px, 100%); margin: auto; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.centerscreen { min-height: 100dvh; justify-content: center; overflow-y: auto; }
.fs-in h2 { font-size: 26px; text-align: center; }
.card.benefits, .benefits { width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-top: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit p { color: var(--muted); font-size: 14px; }
.bi { width: 34px; height: 34px; border-radius: 50%; background: rgba(245, 197, 24, .16); color: var(--accent); display: grid; place-items: center; flex: none; }
.pick { height: 100dvh; display: flex; flex-direction: column; }
.pick-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 20px; }
.pick-body { flex: 1; overflow-y: auto; padding: 8px 20px 16px; max-width: 1080px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pick-body h1 { font-size: 30px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); gap: 12px; }
.pick-tiles { margin-top: 12px; }
.tile { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--panel); transition: box-shadow .15s; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .8)); }
.tile > span { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; color: #fff; font-size: 16px; font-weight: 800; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover { box-shadow: 0 0 0 3px #fff; z-index: 1; }
.tile.on { box-shadow: 0 0 0 3px var(--accent); }
.tile .tick { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on); display: grid; place-items: center; }
.pick-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); max-width: 1080px; width: 100%; margin: 0 auto; }
.startbtn { width: 100%; height: 52px; border-radius: 10px; background: #fff; color: #000; font-weight: 800; font-size: 16px; text-align: center; }
.startbtn:hover { box-shadow: 0 0 0 3px var(--halo); }
.startbtn:disabled { background: var(--surface2); color: var(--subtle); opacity: 1; box-shadow: none; }

/* More sign-ins (signin.js, 2026-10-17): Apple, email + password, under the Google button */
.apple, .emailbtn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; width: 100%; max-width: 380px; border-radius: 25px; font-weight: 700; font-size: 16px; }
.apple { background: #000; color: #fff; border: 1px solid var(--line); }
.emailbtn { background: none; color: var(--text); border: 1px solid var(--line); }
.emailbtn:hover, .apple:hover { border-color: var(--muted); }
.emailform { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; text-align: left; }
.emailform h4 { margin: 4px 0 0; }
.emailform .field { flex: none; }
.submitbtn { height: 48px; border-radius: 24px; background: var(--accent); color: var(--on); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.submitbtn:disabled { opacity: .6; }
.emailform-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* Loading in the content's own shape (2026-10-17, user: "better than black then loading"): grey blocks where the pictures
   and lines will be, a light band sweeping across them; a picture's place shimmers until it is there */
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel { background: linear-gradient(100deg, #12151C 30%, #222836 50%, #12151C 70%) !important; background-size: 220% 100% !important;
    animation: shimmer 1.3s linear infinite; }
.card-img img.pending { opacity: 0; }
.skelcard { pointer-events: none; }
.skel-line { display: block; height: 12px; border-radius: 6px; margin-top: 10px; }
.skel-line.thin { height: 9px; margin-top: 8px; }
.skel-line.title { width: 190px; height: 16px; margin: 6px var(--start) 0; }
.skel-line.big { height: 26px; }
.skelrows { padding-top: 10px; }
.skelpage { position: relative; }
.skel-hero { height: min(56vh, 520px); }
.skel-text { padding: 22px var(--start) 6px; display: flex; flex-direction: column; gap: 4px; }
.w-stage.skel { width: min(100vw, calc((100dvh - 84px) * 16 / 9)); }
.w-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
    background-size: 220% 100%; animation: shimmer 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .skel, .w-shimmer { animation-duration: 4s; } }

/* For you (feedscreen.js, the phone app's FeedScreen.kt): one film per screen, snapped; title above the film, its actions
   under it, nothing over it, on a soft glow of its still. The film is as wide as the page allows, never wider than 980 px,
   and leaves the lines above and under it room (--fdw). */
.fd-wrap { position: absolute; inset: 0; }
.fd { position: absolute; inset: 0; z-index: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; overflow-anchor: none; }
.fd::-webkit-scrollbar { display: none; }
.fd-page { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; container-type: size; background: var(--bg); }
.fd-glow { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(48px); opacity: .42; pointer-events: none; }
.fd-page::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); pointer-events: none; }
/* --fdroom = the menu bar's 52, the tallest header (badges, title, filmmaker chip, details) and the reason + actions (the
   reason in 2 lines on short screens): on a short window the film gets smaller, never the title or the labels
   (specs/replay-fixes-1030 AC1, AC2: at 270 a 643 px window squeezed titles to 11 px and cut the Like / Pass labels).
   On a computer the chip and the details share one row (design round 1), so the header needs less. */
.fd-col { --fdroom: 310px; --fdw: min(100cqw, 980px, calc((100cqh - var(--fdroom)) * 16 / 9)); position: relative; z-index: 1; height: 100%;
    display: flex; flex-direction: column; align-items: center; padding-top: 52px; }
.fd-top, .fd-bottom { flex: 1 1 0; min-height: 0; width: var(--fdw); display: flex; flex-direction: column; overflow: hidden; }
.fd-top { justify-content: flex-end; gap: 6px; padding: 0 16px 12px; }
.fd-top > :not(.fd-badges) { flex-shrink: 0; }     /* no room left: the badges give way, never the title */
.fd-by { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fd-bottom { gap: 14px; padding: 10px 16px 10px; }
@media (min-width: 900px) {
    .fd-col { --fdroom: 290px; }
    .fd-top, .fd-bottom { padding-left: 0; padding-right: 0; }
    .fd-by { flex-direction: row; align-items: center; gap: 12px; }
    .fd-by > div { flex: none; }
}
.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; overflow: hidden; }
.fd-badges .badge { background: var(--rest); }
.fd-badges .badge.gold { background: var(--accent); }
.fd-badges .badge.known { background: rgba(245, 197, 24, .16); color: var(--accent); }
.fd-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-title:hover { color: var(--accent); }
.fd-meta { font-size: 13px; color: var(--soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-stage { position: relative; flex: none; width: var(--fdw); aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
@media (min-width: 900px) { .fd-stage { border-radius: 10px; } }
.fd-stage .host { position: absolute; inset: 0; }
.fd-stage.skel { background: var(--surface); }
.fd-player { position: absolute; top: 0; left: 0; z-index: 2; background: #000; overflow: hidden; }   /* the kept player (feedscreen REUSE) */
.fd-player.off { visibility: hidden; pointer-events: none; }
@media (min-width: 900px) { .fd-player { border-radius: 10px; } }
.fd-play { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--on); display: grid; place-items: center; }
.fd-text { font-size: 14px; color: var(--soft); cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
@media (min-width: 700px) and (max-height: 760px), (max-height: 640px) { .fd-text { -webkit-line-clamp: 2; } }
.fd-acts { display: grid; grid-template-columns: repeat(5, minmax(min-content, 1fr)); max-width: 460px; width: 100%; flex: none; }
.fd-act { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 12px; font-weight: 700; color: #fff; min-width: 0; }
/* a long label ("Pantalla completa", "Compartilhar" at 360 px) wraps onto a second line instead of ending in "…" */
.fd-act span { max-width: 100%; text-align: center; line-height: 1.2; overflow-wrap: break-word; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 400px) { .fd-acts { column-gap: 6px; } .fd-act { font-size: 11px; letter-spacing: -.1px; } }
@media (hover: hover) { .fd-act:hover .ico { color: var(--accent); } }
.fd-act.on .ico { color: var(--accent); }
.fd-chips { position: absolute; top: 10px; left: 16px; right: 16px; z-index: 3; }
.fd-nav { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px), (pointer: coarse) { .fd-nav { display: none; } }
.fd-end { position: absolute; inset: 0; display: grid; place-items: center; background: var(--panel); overflow: hidden; }
.fd-end .fd-glow { opacity: .3; filter: blur(30px); }
.fd-end-in { position: relative; width: 100%; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .fd-end-in { padding: 24px 36px; gap: 12px; } .fd-end-in h3 { font-size: 22px; } }
.fd-end-in h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.fd-end .pill, .fd-done .pill { height: 36px; padding: 0 14px; font-size: 13px; }
.fd-end a.pill { display: inline-flex; align-items: center; text-decoration: none; }
.fd-more { display: none; }
@media (min-width: 900px) and (min-height: 700px) { .fd-more { display: flex; flex-direction: column; gap: 6px; } }
.fd-more div { display: flex; gap: 8px; }
.fd-more button img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.fd-more button:hover img { box-shadow: 0 0 0 3px #fff; }
.fd-done { position: relative; z-index: 1; height: 100%; justify-content: center; padding: 32px; }

/* --- sign-in from anywhere (signinsheet.js, owner 2026-10-23): top-right buttons, the guest box, the sign-in sheet ------ */
.topright { position: absolute; z-index: 35; top: 12px; right: calc(var(--start) - 8px); display: flex; align-items: center; gap: 6px;
    padding: 4px; border-radius: 24px; background: rgba(11, 13, 18, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tr-app { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 18px; text-decoration: none; color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.tr-app:hover { background: rgba(255, 255, 255, .12); }
.tr-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .22); }
.tr-signin { height: 36px; padding: 0 18px; border-radius: 18px; background: var(--accent); color: var(--on); font-size: 14px; font-weight: 800; white-space: nowrap; }
.tr-signin:hover { background: #fff; color: #000; }
.tr-me { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.tr-me:hover { background: #fff; color: #000; }
@media (max-width: 899px) {
    .topright { top: 8px; right: 8px; }
    .tr-app span { display: none; }
    .tr-app { width: 36px; padding: 0; justify-content: center; }
}
.fd-chips { right: 300px; }
@media (max-width: 899px) { .fd-chips { right: 150px; } }
/* phones with SHORTS_WEB_PHONE_NAV (owner 2026-10-26, "too loaded, make it minimal like the Android version"): the Android
   feed's top right (bare search icon, outlined Sign in, no capsule, no language menu) and its three-tab bar */
.tr-search, .tr-signin .ico, .phone-only { display: none; }
@media (max-width: 899px) {
    .phonenav .phone-only { display: revert; }
    .phonenav .pc-only, .phonenav .langmenu, .phonenav .tr-sep { display: none; }
    .phonenav .topright { gap: 2px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .phonenav .tr-search { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
    .phonenav .tr-search, .phonenav .tr-app, .phonenav .tr-me { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
    .phonenav .tr-signin { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-left: 2px; font-size: 13px;
        background: rgba(0, 0, 0, .55); border: 1.5px solid var(--accent); color: var(--accent); }
    .phonenav .tr-signin .ico { display: block; }
    .phonenav .fd-chips { right: 160px; }
    .phonenav .bitem { font-size: 11.5px; gap: 3px; }
    .phonenav .bitem .mi { padding: 3px 18px; border-radius: 16px; }
    .phonenav .bitem.on .mi { background: rgba(245, 197, 24, .16); }
    .lib-acc { width: 44px; height: 44px; margin-left: auto; display: grid; place-items: center; flex: none; border-radius: 50%;
        background: var(--surface); border: 1px solid var(--line); color: var(--text); }
    .phonenav .lib-acc.phone-only { display: grid; }
}
/* a short landscape screen (a phone held sideways, a TV browser at 640x356, a small window): on For you the film takes
   the whole height, its title and actions in a column on its right (specs/replay-fixes-1030 AC8: a TV browser had the
   film shrunk to nothing). Only a phone held sideways (the app's Cinema) also drops the tab bar and menu: rotating back
   brings them; a TV or a window can't rotate, so they stay. Full screen still hides the browser's own bars. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .shell.feedon .bottombar, .shell.feedon .menu { display: none !important; }
    .shell.feedon .main { height: 100dvh; margin-left: 0; }
    .shell.feedon .fd-chips { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
    /* the column keeps 240 px; a small window gives the film 55% at least (448x399: 208 px wide was too little), the
       rest still holds the five actions apart */
    .fd-col { --fdw: min(calc(100cqh * 16 / 9), max(calc(100cqw - 240px), calc(100cqw * .55))); display: grid; grid-template-columns: var(--fdw) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr); align-items: start; padding-top: 0; }
    .fd-stage { grid-row: 1 / 3; align-self: center; border-radius: 0; }
    .fd-top, .fd-bottom { width: auto; height: 100%; padding: 0 16px; }
    .fd-top { justify-content: flex-start; padding-top: 56px; padding-bottom: 6px; }
    .fd-title { font-size: 18px; }
    /* the reason right under the details, the actions at the bottom (design round 1 TV frame) */
    .fd-bottom { justify-content: flex-start; gap: 8px; padding-bottom: 8px; }
    .fd-bottom .fd-acts { margin-top: auto; }
    .fd-text { -webkit-line-clamp: 3; font-size: 13px; }
    .fd-act { font-size: 11px; }
    .fd-acts { column-gap: 6px; }
}
.mi { position: relative; }
.mi .dot { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.guestbox { margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.guestbox p { font-size: 13px; line-height: 1.45; color: var(--soft); white-space: normal; }
.gb-btn { height: 38px; border-radius: 19px; background: var(--accent); color: var(--on); font-weight: 800; font-size: 14px; text-align: center; }
.gb-btn:hover { background: #fff; color: #000; }
.guestbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 var(--start) 16px; padding: 10px 8px 10px 16px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line); }
.gbn-ico { color: var(--accent); display: flex; }
.guestbanner p { flex: 1 1 240px; font-size: 14px; color: var(--soft); }
.gbn-btn { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--accent); color: var(--accent); font-weight: 800; font-size: 14px; }
.gbn-btn:hover { background: var(--accent); color: var(--on); }
.signsheet { align-items: center; text-align: center; gap: 10px; padding-top: 28px; }
@media (min-width: 700px) { .signsheet { width: min(420px, 100%); padding: 30px 30px 22px; } }
.signsheet .corner { position: absolute; top: 10px; right: 10px; color: var(--muted); }
.signsheet h2 { font-size: 22px; margin-top: 4px; }
.signsheet > p.muted { font-size: 14px; max-width: 340px; }
.ss-btns { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.ss-btns > * { width: 100%; max-width: 380px; }
.ss-later { margin-top: 2px; }
.ss-app { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 24px; background: var(--accent); color: var(--on); font-weight: 800; font-size: 16px; text-decoration: none; }
.ss-app:hover { background: #fff; color: #000; }
.pick-top-r { display: flex; align-items: center; gap: 2px; }
/* the language menu (langmenu.js) */
.langmenu { position: relative; }
.lm-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 18px; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.lm-btn:hover, .lm-btn[aria-expanded=true] { background: rgba(255, 255, 255, .12); }
.lm-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 180px; padding: 6px; border-radius: 12px; background: var(--panel);
    border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); display: flex; flex-direction: column; animation: fade .12s ease-out; }
.lm-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--soft); font-weight: 700; font-size: 14px; }
.lm-item:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.lm-item.on { color: var(--accent); }
@media (max-width: 899px) { .lm-btn span { display: none; } .lm-btn { width: 36px; padding: 0; justify-content: center; } }
/* the account window (signinsheet.js AccountSheet) and the top-right picture */
.tr-me { width: 40px; height: 36px; padding: 0 2px; }
.tr-me .avatar { border: 2px solid transparent; transition: border-color .12s; }
.tr-me:hover { background: none; color: inherit; }
.tr-me:hover .avatar, .tr-me:focus-visible .avatar { border-color: #fff; }
.acctsheet { gap: 16px; padding-top: 28px; }
@media (min-width: 700px) { .acctsheet { width: min(400px, 100%); padding: 28px 24px 22px; } }
.acctsheet .corner { position: absolute; top: 10px; right: 10px; color: var(--muted); }
.as-who { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 36px; }
.as-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-text h2 { font-size: 18px; }
.as-links { display: flex; flex-direction: column; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.as-row { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 12px 0 16px; font-weight: 700; color: var(--text); }
.as-row + .as-row { border-top: 1px solid var(--line); }
.as-row span { flex: 1; }
.as-row .ico:last-child { color: var(--subtle); }
.as-row:hover { background: rgba(255, 255, 255, .08); }
.as-out { height: 46px; border-radius: 23px; border: 1px solid var(--line); color: var(--text); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.as-out:hover { border-color: var(--passfg); color: var(--passfg); }

/* Framed feed (firstrun.js, SHORTS_FIRST_RUN_FRAME, specs/framed-feed): on a first visit the space above the first film
   says what Cinelet is; every film shows FULL FILM · its length, a thin line of how far it is under it (with the sound
   and From-the-start buttons, which no longer sit over YouTube's player), the next film's card and, once, one hint.
   On a computer the film gives up some height for the words; anything that can't fit on a short screen drops. */
.fd-frame { flex: none; margin-bottom: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.fd-frame-h { font-size: 26px; line-height: 1.12; font-weight: 800; letter-spacing: -.4px; color: #fff; }
.fd-frame-h b, .bb-frame b { color: var(--accent); }
.fd-frame-s { font-size: 13.5px; line-height: 1.4; color: var(--muted); font-weight: 600; }
.fd-col:has(.fd-under) { --fdw: min(100cqw, 980px, calc((100cqh - 310px) * 16 / 9)); }      /* the line under the film */
.fd-col:has(.fd-top.framed) { --fdw: min(100cqw, 980px, calc((100cqh - 400px) * 16 / 9)); }  /* ...and the words above */
.fd-top.framed { flex-grow: 1.7; }
@media (min-width: 900px) { .fd-frame-h { font-size: 28px; } }
@container (max-height: 520px) { .fd-frame { display: none; } }
.fd-badges .badge.full { background: var(--accent); color: var(--on); letter-spacing: .4px; text-transform: uppercase; }
.fd-under { flex: none; width: var(--fdw); }
.fd-prog { height: 3px; background: rgba(255, 255, 255, .14); }
.fd-prog i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.fd-under-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 16px 0; }
@media (min-width: 900px) { .fd-under-row { padding-left: 0; padding-right: 0; } }
.fd-time { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: auto; }
.fd-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 15px; background: var(--surface2);
    color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fd-pill.sound { background: var(--accent); color: var(--on); }
.fd-pill:hover, .fd-pill:focus-visible { background: #fff; color: #000; outline: none; }
.fd-col:has(.fd-under) .fd-bottom { padding-top: 4px; gap: 8px; }
.fd-col:has(.fd-under) .fd-text { -webkit-line-clamp: 2; }
.fd-next { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; padding: 6px; border-radius: 10px;
    background: rgba(18, 21, 28, .85); text-align: start; }
.fd-next img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface); }
.fd-next span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fd-next small { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fd-next b { font-size: 14px; }
.fd-next em { font-style: normal; font-size: 12px; color: var(--muted); }
.fd-next:hover b { color: var(--accent); }
@container (max-height: 720px) { .fd-next { display: none; } }
.fd-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px;
    max-width: calc(100% - 32px); padding: 10px 16px 10px 12px; border-radius: 12px; background: var(--accent); color: var(--on);
    font-weight: 800; font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); cursor: pointer; animation: fade .3s ease-out; }
.fd-whole { color: var(--accent); }
/* Home's billboard on a first visit: the same words, above the film's own title */
.bb-frame { position: absolute; left: var(--start); top: 64px; z-index: 2; width: min(560px, calc(100% - var(--start) - 16px));
    padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bb-frame .fd-frame-h { font-size: 22px; }
.bb-frame .fd-frame-s { margin-top: 3px; color: var(--soft); }
html[dir=rtl] .bb-frame { left: auto; right: var(--start); }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .fd-frame, .fd-next { display: none; } }
/* a short landscape screen of any kind (a TV browser, a small window: specs/replay-fixes-1030 AC8) keeps the film beside
   its column on a framed first visit too: the rules above would size the film from the height left under the words (0 px
   at 640x356); the time and sound line goes in the column; the words and the Up next card can't fit */
@media (orientation: landscape) and (max-height: 500px) {
    .fd-col:has(.fd-under), .fd-col:has(.fd-top.framed) {
        --fdw: min(calc(100cqh * 16 / 9), max(calc(100cqw - 240px), calc(100cqw * .55))); grid-template-rows: auto auto minmax(0, 1fr); }
    .fd-col:has(.fd-under) .fd-stage { grid-row: 1 / 4; }
    .fd-under { width: auto; }
    .fd-under .fd-prog { display: none; }
    .fd-under-row { flex-wrap: wrap; row-gap: 6px; padding: 4px 16px 0; }   /* the time, then the two pills if they need a line */
    .fd-frame, .fd-next { display: none; }
    .fd-act span { -webkit-line-clamp: 3; }                   /* "Not for me" in a narrow column */
}
.fd-time { white-space: nowrap; }
.fd-under-row .fd-pill { flex: none; }
/* a short phone (360x640): the headline alone, smaller; the details line and the title keep their room */
@container (max-height: 640px) { .fd-frame-s { display: none; } .fd-frame-h { font-size: 21px; } .fd-col:has(.fd-top.framed) .fd-text { display: none; } }
/* ...so there the words need 330 px, not 400: at 400 a 320x568 phone shrank the film to 192 px and its column with it
   (pills cut, "Full screen" gone in Portuguese; specs/replay-fixes-1030 AC8) */
@container (max-height: 640px) and (orientation: portrait) { .fd-col:has(.fd-top.framed) { --fdw: min(100cqw, 980px, calc((100cqh - 330px) * 16 / 9)); } }
@media (max-width: 380px) { .fd-act { font-size: 11px; } .fd-pill { font-size: 12px; padding: 0 10px 0 8px; } }
/* computers have the ↑ ↓ buttons: no Up next card (a column of next films is for later); the hint points at ↓ */
@media (min-width: 900px) {
    .fd-next { display: none; }
    .fd-hint { left: auto; right: 78px; bottom: auto; top: calc(50% + 6px); transform: none; }
}
.fd-hint { width: max-content; max-width: min(440px, calc(100vw - 32px)); }
@media (max-width: 380px) { .fd-under-row .fd-pill:not(.sound) span { display: none; } .fd-under-row .fd-pill:not(.sound) { padding: 0 8px; } }
/* The swipe cue on a first visit (specs/swipe-cue): TikTok's cue, traced (swipecue.js). The layer never covers the player
   in 'around' (four pieces around the stage); the arrows and words ignore touches, the layer takes them. */
.cue { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cue-layer { position: absolute; background: rgba(0, 0, 0, .68); pointer-events: auto; touch-action: none; cursor: pointer; }
.cue-poster .cue-layer { background: rgba(0, 0, 0, .62); }
.fd-wrap:has(.cue-poster) .fd-play { display: none; }
.cue-box { position: absolute; width: 390px; height: 270px; transform-origin: 0 0; pointer-events: none; }
.cue-svg { position: absolute; left: 139px; top: 0; overflow: visible; }
.cue-text { position: absolute; left: -40px; right: -40px; top: 225px; margin: 0; text-align: center; color: #fff;
    font: 800 28.5px/1.12 Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: -.2px; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.cue-tap { position: absolute; left: 0; right: 0; top: 268px; margin: 0; text-align: center; color: #E6E8EC; font: 600 16px Inter, system-ui, sans-serif; }
.cue-hand { animation: cuehand 1.9s cubic-bezier(.45, 0, .25, 1) infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
@keyframes cuehand { 0% { transform: translateY(150px); opacity: 0; } 18% { transform: translateY(150px); opacity: 1; }
    70% { transform: translateY(0); opacity: 1; } 88%, 100% { transform: translateY(-20px); opacity: 0; } }
.cue-wheel { animation: cuewheel 1.4s ease-in-out infinite; }
@keyframes cuewheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.cue-down { animation: cuedown 1.4s ease-in-out infinite; }
@keyframes cuedown { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(14px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue-hand, .cue-wheel, .cue-down { animation: none; } }