/* =====================================================================
   Titus feature styles (loads after style.css)
   What it does: styles the newer pieces of the site:
   - Header bell ("New on Titus") and profile button with their pop-up menus
   - "Who's watching?" profile picker, add/edit profile form, Kids tag
   - Title page: top bar above the video (so the close button never covers
     the player's own controls), a control bar under the video with
     Full screen and Next episode, details list (runtime, director, cast,
     genres, mood, captions), thumbs up / down, and the Episodes list
     with season tabs
   - Full screen: the player fills the screen when someone presses play;
     on iPhone it fills the window instead, with an exit button
   - Row extras: NEW badge, collection descriptions, "Resume S1 E3" lines
   - The plain text version of a title page that search engines read
   - Watch Party: the panel under the video (who's watching, invite, leave,
     end, chat, reaction buttons), reactions that float up over the video,
     the newest chat over the video in full screen, and the synced player
   ===================================================================== */

/* ---------- Header buttons: bell + profile ---------- */
.pop { position: relative; flex: none; }
.pop[hidden] { display: none; }
.hdr-btn, .profile-btn {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text);
  transition: background .2s;
}
.hdr-btn:hover, .profile-btn:hover { background: rgba(255,255,255,.14); }
.profile-btn { border: 0; background: none; }
.bell-count {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #e5484d; color: #fff; font: 700 11px/18px Inter, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.bell-count[hidden] { display: none; }
.pop-menu { width: 320px; max-height: min(70vh, 520px); overflow-y: auto; }
.pop-title { font: 600 15px/1.2 Outfit, sans-serif; padding: 10px 10px 8px; color: var(--muted); }
.bell-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; text-align: left; color: var(--text);
}
.bell-item:hover { background: rgba(255,255,255,.07); }
.bell-item.unseen .bell-name::after { content: "NEW"; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #111; background: var(--accent); padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.bell-thumb { flex: none; width: 92px; aspect-ratio: 16/10; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.bell-name { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.bell-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Profiles ---------- */
.p-avatar {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  color: #fff; font: 600 16px/1 Outfit, sans-serif; background: #555; flex: none;
}
.kids-tag {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font: 700 8px/1 Inter, sans-serif;
  font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: #111;
  padding: 2px 4px; border-radius: 4px;
}
.profile-item { display: flex; align-items: center; gap: 10px; }
.profile-item .p-avatar { width: 28px; height: 28px; font-size: 14px; border-radius: 7px; }
.profile-item .kids-tag { font-size: 7px; bottom: -5px; }
.profile-item.active { color: var(--accent); }
.profile-item .tick { margin-left: auto; }
.sheet-wrap.center { align-items: center; padding: 16px; }
.profile-sheet { border-radius: 20px; width: min(620px, 100%); padding: 30px 24px 26px; }
.profile-sheet h3 { font-size: 26px; margin-bottom: 22px; }
.profile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 18px; }
.profile-grid[hidden] { display: none; }
.profile-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; padding: 0; border: 0; background: none; color: var(--muted); }
.profile-tile:hover { color: var(--text); }
.p-avatar-lg { width: 88px; height: 88px; border-radius: 18px; font-size: 38px; transition: box-shadow .2s, transform .2s var(--ease); }
.p-avatar-lg .kids-tag { font-size: 10px; padding: 3px 6px; bottom: -8px; }
.profile-tile:hover .p-avatar-lg { box-shadow: 0 0 0 3px var(--text); transform: translateY(-2px); }
.add-avatar { background: transparent; border: 2px dashed rgba(255,255,255,.3); color: var(--muted); }
.edit-badge { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); }
.tile-name { font-size: 14px; font-weight: 500; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-form { text-align: left; display: grid; gap: 14px; margin-bottom: 6px; }
.profile-form[hidden] { display: none; }
.profile-form label { display: grid; gap: 6px; font-size: 14px; color: #cfcfd8; }
.profile-form input:not([type]) {
  height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--text); font: inherit; outline: 0;
}
.profile-form input:not([type]):focus { border-color: rgba(232,185,74,.6); }
.profile-form .check { display: flex; align-items: center; gap: 10px; }
.profile-form .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.profile-form small { color: var(--muted); }
.profile-form-btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.profile-sheet .profile-form-btns .btn { width: auto; }
#pfDelete { margin-right: auto; color: #ff8a8a; }
#psDone[hidden] { display: none; }

/* ---------- Title page: top bar, player, control bar ---------- */
#modal .modal-top {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 22px; background: rgba(17,17,22,.96); border-bottom: 1px solid var(--line);
}
.modal-top-title { flex: 1; min-width: 0; font: 600 15px/1.2 Outfit, sans-serif; color: #cfcfd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal .modal-top .close { position: static; flex: none; width: 36px; height: 36px; }
.player-wrap { position: relative; background: #000; }
.player-wrap:fullscreen, .player-wrap:-webkit-full-screen { width: 100%; height: 100%; display: flex; align-items: center; }
.player-wrap:fullscreen .player, .player-wrap:-webkit-full-screen .player { width: 100%; height: 100%; aspect-ratio: auto; }
.player-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; background: #0c0c10; border-bottom: 1px solid var(--line);
}
.now-playing { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; }
.player-bar-btns { display: flex; gap: 8px; margin-left: auto; }
.player-bar .btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
#nextEp[hidden] { display: none; }
.fs-exit {
  position: absolute; z-index: 5; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left));
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: #fff;
}
.fs-exit[hidden] { display: none; }
/* Full-window player (iPhone, or if the browser refuses full screen) */
body.pseudo-fs { overflow: hidden !important; }
/* Blur, animations and transforms on the pop-up would trap the player inside it, so drop them */
body.pseudo-fs .modal, body.pseudo-fs .modal-box {
  transform: none !important; animation: none !important; filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.pseudo-fs .player-wrap {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.pseudo-fs .player { width: 100%; height: 100%; aspect-ratio: auto; max-height: 100%; }

/* ---------- Title page: details, thumbs, episodes ---------- */
.thumb { width: 38px; padding: 0; justify-content: center; }
.thumb svg { fill: none; stroke: currentColor; stroke-width: 2; width: 17px; height: 17px; }
.thumb[aria-pressed="true"] { background: var(--accent); color: #111; border-color: var(--accent); }
.chip-cc { font-weight: 700; letter-spacing: .06em; }
.chip-rating { border-color: rgba(255,255,255,.3); }
.modal-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 40px; margin-top: 18px; }
.modal-cols .modal-desc { margin: 0; }
.details { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.details div { display: flex; gap: 8px; }
.details dt { color: var(--muted); flex: none; }
.details dt::after { content: ":"; }
.details dd { margin: 0; color: #e4e4ea; }
.episodes { margin-top: 28px; }
.episodes[hidden] { display: none; }
.episodes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.episodes-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.season-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.season-tab { border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.season-tab.active { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 460px; overflow-y: auto; }
.ep {
  width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); text-align: left;
  transition: background .2s, border-color .2s;
}
.ep:hover { background: #22222b; border-color: rgba(232,185,74,.45); }
.ep.playing { border-color: var(--accent); background: rgba(232,185,74,.08); }
.ep-num { font: 600 14px/1 Outfit, sans-serif; color: var(--accent); }
.ep-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-len { font-size: 13px; color: var(--muted); }
.ep-play { display: grid; place-items: center; font-size: 11px; color: var(--accent); }
.ep-play svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }

/* ---------- Rows ---------- */
.row-badge { font: 700 11px/1 Outfit, sans-serif; letter-spacing: .08em; color: #fff; background: #e5484d; padding: 5px 7px 4px; border-radius: 6px; margin-right: 10px; vertical-align: 3px; }
.row-desc { margin: -6px 0 10px; padding: 0 var(--pad); color: var(--muted); font-size: 14px; }
.card-sub.show { max-height: 20px; opacity: 1; color: var(--accent); }
.collections-head { padding-bottom: 0; }

/* ---------- Text version of a title page (for search engines; replaced on load) ---------- */
.seo-page { padding: calc(150px + env(safe-area-inset-top)) var(--pad) 40px; max-width: 900px; }
.seo-page h1 { font-size: clamp(30px, 5vw, 48px); margin: 0 0 10px; }
.seo-page p { color: #cfcfd8; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .modal-cols { grid-template-columns: 1fr; }
  .pop-menu { position: fixed; left: 12px; right: 12px; width: auto; top: calc(64px + env(safe-area-inset-top)); }
}
@media (max-width: 430px) {
  .hdr-btn, .profile-btn { width: 36px; height: 36px; }
  .p-avatar { width: 32px; height: 32px; font-size: 15px; }
  #modal .modal-top { padding: calc(8px + env(safe-area-inset-top)) 10px 8px 16px; }
  .player-bar { padding: 10px 16px; }
  .player-bar .btn-sm { height: 40px; }
  .modal-head .actions { gap: 8px; }
  .ep { grid-template-columns: 58px minmax(0, 1fr) auto 28px; gap: 8px; padding: 12px; }
  .profile-tile { width: 84px; }
  .p-avatar-lg { width: 76px; height: 76px; font-size: 32px; }
  .edit-badge { top: 22px; }
}

/* ---------- Watch Party ---------- */
.party-btn.on { background: var(--accent); color: #111; border-color: var(--accent); }
.party-btn[hidden] { display: none; }
.player video, .player #ytParty, .player iframe#ytParty { width: 100%; height: 100%; display: block; background: #000; border: 0; }
.party-loading { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }
.party-panel { padding: 16px 22px 18px; background: #101016; border-bottom: 1px solid var(--line); }
.party-panel[hidden] { display: none; }
.party-panel.joining > :not(.party-join) { display: none; }
.party-join { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.party-join[hidden] { display: none; }
.party-join p { margin: 0; color: #e4e4ea; }
.party-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.party-title { font-size: 14px; color: var(--muted); }
.party-title strong { color: var(--accent); font-family: Outfit, sans-serif; font-size: 16px; }
.party-host { margin-left: 6px; }
.party-people { display: flex; }
.party-person {
  display: grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 2px solid #101016; font: 600 13px/1 Outfit, sans-serif; color: var(--text);
}
.party-person:first-child { margin-left: 0; }
.party-person img { width: 100%; height: 100%; object-fit: cover; }
.party-btns { display: flex; gap: 8px; margin-left: auto; }
.party-btns .btn[hidden] { display: none; }
.btn.danger { color: #ff8a8a; }
.party-chat { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; display: grid; gap: 6px; }
.party-chat:empty { display: none; }
.chat-msg { font-size: 14px; line-height: 1.4; }
.chat-name { font-weight: 600; color: var(--accent); margin-right: 8px; }
.chat-msg.mine .chat-name { color: #9fd3ff; }
.chat-text { color: #e4e4ea; word-break: break-word; }
.party-reacts { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.react-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  font-size: 19px; line-height: 1; display: grid; place-items: center; transition: transform .15s var(--ease), background .2s;
}
.react-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px) scale(1.08); }
.party-form { display: flex; gap: 8px; }
.party-form input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.06); color: var(--text); font: inherit; font-size: 14px; outline: 0;
}
.party-form input:focus { border-color: rgba(232,185,74,.6); }
/* Over the video (also shows in full screen) */
.party-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.party-fx[hidden], .fx-bar[hidden] { display: none; }
.fx-react { position: absolute; bottom: 60px; font-size: 34px; animation: floatUp 2.6s ease-out forwards; text-shadow: 0 4px 14px rgba(0,0,0,.5); }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { transform: translateY(-260px) scale(1); opacity: 0; } }
.fx-chat {
  position: absolute; left: 14px; bottom: 70px; max-width: min(70%, 420px); padding: 8px 12px; border-radius: 12px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 14px; animation: rise .25s var(--ease) both, fade .4s 5.5s reverse both;
}
.fx-chat + .fx-chat { bottom: 116px; }
.fx-chat b { color: var(--accent); margin-right: 4px; }
.fx-bar { position: absolute; top: 10px; right: 10px; z-index: 5; display: none; gap: 4px; opacity: .25; transition: opacity .2s; }
.player-wrap:fullscreen .fx-bar:not([hidden]), .player-wrap:-webkit-full-screen .fx-bar:not([hidden]), body.pseudo-fs .fx-bar:not([hidden]) { display: flex; }
.fx-bar:hover, .fx-bar:focus-within { opacity: 1; }
.fx-bar .react-btn { width: 34px; height: 34px; font-size: 17px; background: rgba(0,0,0,.5); pointer-events: auto; }
body.pseudo-fs .fx-bar { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
.tap-sync {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto;
  padding: 14px 22px; border-radius: 999px; border: 0; background: var(--accent); color: #111; font-weight: 700;
}
@media (max-width: 430px) {
  .party-panel { padding: 14px 16px; }
  .party-btns { margin-left: 0; width: 100%; }
  .party-btns .btn { flex: 1; justify-content: center; }
  .fx-bar { opacity: .6; }
}