/* Friends demo visual layer. It keeps the app's existing IDs and behavior while
   making the owner-selected 5B home, calm library and three-tab navigation real. */
:root {
  --bg:#f8f6f1;
  --ink:#29263f;
  --ink2:#7c7787;
  --accent1:#6555ad;
  --card:#fff;
  --shadow:0 8px 22px rgba(48,42,61,.09);
  --tab-height:74px;
}

body { background:#efeee9; }
.app { max-width:440px; min-height:100dvh; background:var(--bg); box-shadow:0 0 50px rgba(41,38,63,.08); }
.screen { padding:10px 18px 28px; }

/* Yogi and the wordmark form one centered brand lockup. The language control
   remains independent so it cannot pull the lockup away from the screen center. */
.topbar { min-height:62px; justify-content:center; padding:8px 2px 4px; direction:ltr; }
.brand-lockup { position:absolute; left:50%; top:8px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; direction:ltr; white-space:nowrap; }
.brand-lockup .heroWrap { width:38px; height:38px; min-height:0 !important; display:grid; place-items:center; overflow:visible; border-radius:50%; background:#e5e1f1; }
.brand-lockup .mascot,
#home.has-shelf .brand-lockup .mascot,
#home.has-recommendations .brand-lockup .mascot { width:27px; max-height:none; height:47px; margin-top:-9px; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(43,38,63,.14)); }
.brand-lockup .logo-min { color:var(--ink); font-size:17px; letter-spacing:-.03em; }
.top-actions { position:absolute; right:2px; top:14px; display:flex; align-items:center; gap:7px; }
.top-actions .langbtn { position:static; box-shadow:none; border:1px solid rgba(41,38,63,.08); }

/* Home: equal poster cards and a single combined text/voice control. */
.home-body,
#home.has-shelf .home-body,
#home.has-recommendations .home-body { gap:0; padding-top:3px; align-items:stretch; }
.home-heading { min-height:103px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.h-title,
#home.has-shelf .h-title,
#home.has-recommendations .h-title { margin:0; font-size:27px; line-height:1.08; letter-spacing:-.035em; }
.home-selection { margin:7px 0 0; color:var(--ink2); font-size:12px; font-weight:600; }
.homeshelf { width:100%; }
.hshelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; overflow:visible; padding:7px 0 0; }
.hcard { width:auto; min-width:0; text-align:center; touch-action:manipulation; -webkit-touch-callout:none; user-select:none; transition:transform .18s ease; }
.hpowrap { overflow:hidden; border-radius:16px; box-shadow:0 10px 22px rgba(48,42,61,.13); transition:box-shadow .2s ease,transform .2s ease; }
.hpo { width:100%; height:auto; aspect-ratio:9/16; border-radius:16px; object-fit:cover; transition:transform .28s ease,filter .28s ease; }
.hcard.is-previewing { transform:translateY(-3px); }
.hcard.is-previewing .hpowrap { box-shadow:0 0 0 3px rgba(101,85,173,.28),0 15px 30px rgba(48,42,61,.2); }
.hcard.is-previewing .hpo { animation:home-living-poster 2.2s ease-in-out infinite alternate; filter:saturate(1.08) contrast(1.02); }
.hcard.is-previewing .hn { color:#6555ad; }
@keyframes home-living-poster {
  from { transform:scale(1.015) translate3d(0,0,0); }
  to { transform:scale(1.09) translate3d(-1.5%,1%,0); }
}
.hcard .hn { min-height:43px; display:flex; align-items:center; justify-content:center; margin:0; padding:8px 5px 3px; color:var(--ink); font-size:11px; line-height:1.25; }
.hcard.seen .hpowrap::after { top:6px; inset-inline-end:6px; width:24px; height:24px; }
.home-ask-row { width:100%; height:58px; display:flex; align-items:center; gap:7px; margin-top:16px; padding:6px 7px; border:1px solid rgba(41,38,63,.12); border-radius:19px; background:#fff; box-shadow:var(--shadow); }
.home-ask-row .typebox { min-width:0; max-width:none; flex:1; height:100%; padding:0 8px; border-radius:0; box-shadow:none; background:transparent; text-align:start; font-size:16px; }
.home-ask-row .search-submit { flex:none; width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid rgba(101,85,173,.2); border-radius:14px; background:#f2eefb; color:#6555ad; cursor:pointer; }
.home-ask-row .search-submit svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.home-ask-row .search-submit:focus-visible { outline:3px solid rgba(101,85,173,.28); outline-offset:2px; }
.home-ask-row .mic-hero,
#home.has-shelf .home-ask-row .mic-hero,
#home.has-recommendations .home-ask-row .mic-hero { flex:none; width:44px; height:44px; border-radius:15px; background:#6555ad; box-shadow:0 6px 14px rgba(101,85,173,.23); animation:none; }
.home-ask-row .mic-hero svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
/* Keep the microphone on the physical right and the submit control on the
   physical left in both Hebrew and English without changing DOM/tab order. */
html[dir="rtl"] .home-ask-row .mic-hero { order:-1; }
html[dir="rtl"] .home-ask-row .search-submit { order:1; }
html[dir="ltr"] .home-ask-row .search-submit { order:-1; }
html[dir="ltr"] .home-ask-row .mic-hero { order:1; }
.home-ask-row:focus-within { border-color:#8d7bc8; box-shadow:0 0 0 3px rgba(101,85,173,.1); }
.hint,
#home.has-shelf .hint { min-height:22px; margin:7px 0 0; color:var(--ink2); text-align:center; font-size:11px; }
.guide-posters { margin:4px 0 10px; }
.guide-posters-row { overflow:visible; }
#home.has-recommendations #homeShelf { display:none; }

/* Library gates: six visual worlds, followed by one calm film grid. */
#library { padding-top:17px; }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 2px 17px; }
.library-heading .screen-title { font-size:29px; letter-spacing:-.04em; }
.library-heading .screen-sub { margin:5px 0 0; font-size:12px; }
.library-heading .backbtn { padding:8px 12px; box-shadow:none; border:1px solid rgba(41,38,63,.09); font-size:12px; }
#catList { display:flex; flex-direction:column; gap:11px; }
.category-gates { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.category-gate { position:relative; min-width:0; height:150px; overflow:hidden; padding:0; border:0; border-radius:19px; background:#e8e4ef; color:#fff; text-align:start; box-shadow:0 9px 22px rgba(48,42,61,.13); cursor:pointer; }
.category-gate:nth-child(3n) { grid-column:1/-1; height:127px; }
.category-gate-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.category-gate-poster.category-poster-empty { display:grid; place-items:center; background:#e7e2f2; color:var(--ink); font-size:38px; }
.category-gate::after { content:""; position:absolute; z-index:1; inset:28% 0 0; background:linear-gradient(transparent,rgba(25,22,38,.86)); }
.category-gate-copy { position:absolute; z-index:2; inset:auto 12px 12px; }
.category-gate-copy b { display:block; font-size:17px; line-height:1.2; text-shadow:0 1px 4px rgba(0,0,0,.25); }
.category-gate-copy small { display:block; margin-top:4px; color:rgba(255,255,255,.84); font-size:10px; }
.category-gate:focus-visible,.library-world-back:focus-visible { outline:3px solid #8d7bc8; outline-offset:3px; }
.library-world-view { display:flex; flex-direction:column; gap:11px; }
.library-world-back { align-self:flex-start; padding:8px 12px; border:1px solid rgba(41,38,63,.09); border-radius:12px; background:#fff; color:var(--ink); font:700 12px 'Rubik',system-ui; cursor:pointer; }
.library-world-hero { position:relative; height:158px; overflow:hidden; border-radius:21px; background:#e7e2f2; color:#fff; box-shadow:0 9px 22px rgba(48,42,61,.13); }
.library-world-hero::after { content:""; position:absolute; z-index:1; inset:28% 0 0; background:linear-gradient(transparent,rgba(25,22,38,.88)); }
.library-world-hero > img { width:100%; height:100%; object-fit:cover; }
.library-world-hero > div { position:absolute; z-index:2; inset:auto 15px 14px; }
.library-world-hero h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.library-world-hero p { margin:4px 0 0; color:rgba(255,255,255,.84); font-size:11px; }
.category-film-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.category-film-grid .vcard { overflow:hidden; min-width:0; border:1px solid rgba(41,38,63,.07); border-radius:17px; background:#fff; box-shadow:0 7px 17px rgba(48,42,61,.08); }
.category-film-grid .vthumb { width:100%; height:auto; aspect-ratio:9/13; object-fit:cover; border-radius:15px 15px 0 0; }
.category-film-grid .vmeta { min-height:64px; padding:9px 9px 10px; }
.category-film-grid .vcard .vt { font-size:11px; line-height:1.35; }
.category-film-grid .vcard .vdur { margin-top:4px; font-size:9px; }
.category-film-grid .savebtn { top:8px; inset-inline-end:8px; width:31px; height:31px; box-shadow:0 4px 10px rgba(41,38,63,.12); background:rgba(255,255,255,.94); }
.my-videos-accordion { overflow:hidden; border:1px solid rgba(41,38,63,.07); border-radius:17px; background:#fff; }
.my-videos-accordion .category-toggle { width:100%; min-height:70px; display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:10px; padding:8px; border:0; background:#fff; color:var(--ink); text-align:start; font:inherit; }
.my-videos-accordion .category-poster { width:52px; height:52px; display:grid; place-items:center; border-radius:13px; background:#eeebf5; }
.my-videos-accordion .category-copy b { display:block; }.my-videos-accordion .category-copy small { color:var(--ink2); font-size:10px; }
.my-videos-accordion .category-chevron { color:var(--violet); }
.my-videos-accordion .category-films { padding:0 8px 8px; }
.savedchip { margin:0 0 2px; box-shadow:none; border:1px solid rgba(41,38,63,.08); }

/* New: a stable destination for manually published films; the home stays quiet. */
#new { padding-top:17px; }
.new-screen-heading { display:flex; align-items:center; gap:12px; margin:0 2px 20px; }
.new-screen-mark { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#fff; background:#6555ad; font-size:22px; }
.new-screen-heading .screen-title { margin:0; font-size:29px; letter-spacing:-.04em; }
.new-screen-heading .screen-sub { margin:5px 0 0; color:var(--ink2); font-size:12px; }
.new-empty { margin-top:58px; padding:30px 22px; border:1px solid rgba(41,38,63,.07); border-radius:22px; background:#fff; text-align:center; box-shadow:var(--shadow); }
.new-empty > span { width:46px; height:46px; display:grid; place-items:center; margin:0 auto 13px; border-radius:15px; color:#6555ad; background:#eeebf5; font-size:24px; }
.new-empty strong { display:block; font-size:18px; }
.new-empty p { margin:7px 0 0; color:var(--ink2); font-size:12px; line-height:1.5; }
.new-film-section + .new-film-section { margin-top:25px; }
.new-section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 2px 11px; }
.new-section-heading h2 { margin:0; font-size:17px; }
.new-section-heading span { color:var(--ink2); font-size:10px; font-weight:600; }
.new-today-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.new-today-grid .new-film-card { border:1px solid rgba(101,85,173,.08); box-shadow:0 8px 20px rgba(48,42,61,.09); }
.new-week-list { display:flex; flex-direction:column; gap:8px; }
.new-week-list .new-film-card { min-height:96px; display:grid; grid-template-columns:74px 1fr; align-items:center; border:1px solid rgba(41,38,63,.07); border-radius:16px; box-shadow:none; }
.new-week-list .new-film-card .vthumb { grid-row:1; width:74px; height:96px; aspect-ratio:auto; object-fit:cover; border-radius:14px; }
.new-week-list .new-film-card .vmeta { grid-column:2; grid-row:1; padding:10px 42px 10px 12px; }
.new-week-list .new-film-card .savebtn { top:50%; transform:translateY(-50%); inset-inline-end:8px; box-shadow:none; background:#f4f1f8; }

/* Main navigation stays reachable on long pages. */
.main-tabs { position:sticky; z-index:21; bottom:0; height:var(--tab-height); flex:none; display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid rgba(41,38,63,.08); background:rgba(255,255,255,.97); backdrop-filter:blur(15px); }
.main-tab { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; background:transparent; color:#9995a2; font:600 11px 'Rubik',system-ui; cursor:pointer; }
.main-tab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.main-tab.is-active { color:#6555ad; }
.new-tab-badge { position:absolute; top:13px; inset-inline-start:calc(50% + 7px); width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#ff6b79; }
.app[data-screen="player"] .main-tabs,
.app[data-screen="saved"] .main-tabs { display:none; }

/* Watched inherits the same calm cards and persistent navigation. */
.watched-grid { gap:10px; }
.watched-card { border-radius:16px; box-shadow:var(--shadow); }
.watched-heading { margin-top:18px; }
#watchedUnseenSection { margin-top:28px; padding-top:19px; border-top:2px solid rgba(101,85,173,.13); }
#watchedUnseenSection .watched-heading { margin:0 0 14px; color:var(--ink); font-size:22px; font-weight:800; letter-spacing:-.025em; }

/* Quiet end state: stay in context, offer two related films and explicit exits. */
.post-film-summary,.post-film-exits { display:none; }
.endcard.quiet-library { padding:7px 0 24px; text-align:center; }
.endcard.quiet-library .post-film-summary { display:block; }
.post-film-summary p { margin:0 0 17px; color:var(--ink2); font-size:13px; }
.endcard.quiet-library .sec-title { margin:14px 0 10px; font-size:15px; }
.endcard.quiet-library .related-grid { gap:10px; margin-top:0; }
.endcard.quiet-library .relcard { overflow:hidden; padding:0 0 10px; border:0; border-radius:16px; background:#fff; box-shadow:var(--shadow); font:inherit; }
.relcard .relposter { width:100%; aspect-ratio:9/16; display:block; object-fit:cover; background:#eeebf5; }
.endcard.quiet-library .relcard .rt { padding:8px 8px 0; font-size:12px; }
.endcard.quiet-library .post-film-exits { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }
.post-film-exits button { min-height:49px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(41,38,63,.1); border-radius:15px; background:#fff; color:var(--ink); font:700 13px 'Rubik',system-ui; cursor:pointer; }
.post-film-exits button:last-child { color:#fff; background:#6555ad; border-color:#6555ad; }

#player .player-top { position:relative; display:grid; grid-template-columns:74px minmax(0,1fr) 74px; align-items:center; direction:ltr; }
#player .player-top > .backbtn { grid-column:1; grid-row:1; width:74px; direction:ltr; }
#player .player-top > .ptitle { grid-column:2; grid-row:1; min-width:0; overflow:hidden; direction:ltr; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.player-top-spacer { grid-column:3; grid-row:1; width:74px; }
html[dir="rtl"] #player .player-top > .backbtn { grid-column:3; direction:rtl; }
html[dir="rtl"] #player .player-top > .ptitle { direction:rtl; }
html[dir="rtl"] #player .player-top-spacer { grid-column:1; }
.controls { display:grid; grid-template-columns:56px 70px 56px; align-items:center; justify-content:center; gap:18px; margin-top:14px; direction:ltr; }
.player-icon-control { display:grid; place-items:center; padding:0!important; border-radius:18px!important; cursor:pointer; }
.player-control-icon { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
.btn-play.player-icon-control { grid-column:2; grid-row:1; width:70px; height:62px; color:#fff; }
.btn-again.player-icon-control { grid-column:3; grid-row:1; width:56px; height:54px; color:var(--accent1); }
.btn-play .player-control-icon { display:none; }
.btn-play[data-state="paused"] .player-play-icon { display:block; fill:currentColor; stroke:none; }
.btn-play[data-state="playing"] .player-pause-icon { display:block; fill:currentColor; stroke:none; }
.speed-control { position:relative; z-index:20; grid-column:1; grid-row:1; width:56px; display:flex; justify-content:center; direction:ltr; }
.speed-toggle { width:56px; min-width:56px; height:54px; display:flex; align-items:center; justify-content:center; gap:4px; padding:6px; border:1px solid rgba(41,38,63,.1); border-radius:17px; background:#fff; color:var(--accent1); font:800 13px 'Rubik',system-ui; box-shadow:var(--shadow); cursor:pointer; }
.speed-toggle-mark { font-size:11px; transition:transform .18s ease; }
.speed-toggle[aria-expanded="true"] .speed-toggle-mark { transform:rotate(180deg); }
.speed-choices { position:absolute; left:50%; bottom:62px; width:90px; transform:translateX(-50%); display:grid; gap:5px; padding:8px; border:1px solid rgba(41,38,63,.1); border-radius:13px; background:#fff; box-shadow:0 10px 28px rgba(41,38,63,.18); }
.speed-label { color:var(--ink2); text-align:center; font-size:9px; font-weight:700; }
.speed-option { min-width:0; min-height:34px; padding:6px 8px; border:1px solid rgba(41,38,63,.1); border-radius:9px; background:#f4f1f8; color:var(--ink); font:700 11px 'Rubik',system-ui; cursor:pointer; }
.speed-option.is-active { border-color:#6555ad; background:#6555ad; color:#fff; }

@media (max-width:360px) {
  .screen { padding-inline:14px; }
  .category-gates { gap:8px; }
  .category-gate { height:136px; }
  .category-gate:nth-child(3n) { height:116px; }
  .hcard .hn { font-size:10px; }
  .main-tab { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .screen,.mascot,.category-chevron,.mic,.hcard,.hpowrap,.hpo { animation:none !important; transition:none !important; }
  .hcard.is-previewing .hpo { transform:scale(1.04); }
}