/* VIPerClub Vault + Player (pages: /vault, /player). Builds on cyber-styles.css.
 * Precompiled tailwind.css has a limited class set, so layout for these pages lives here. */

/* ---- Login gate: nothing protected renders until checkLogin() resolves ---- */
.gate-loader { display: none; }
body.gate-pending .gated { display: none !important; }
body.gate-pending .gate-loader {
  display: flex !important; position: fixed; inset: 0; z-index: 99999; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; background: #050505;
}
html.tv-mode body.gate-pending .gate-loader,
html.tv-mode .gate-loader,
html.tv-mode .nav-app .nav-actions > a[data-nav="dashboard"],
html.tv-mode .nav-app .nav-actions > a[data-nav="requests"] {
  display: none !important;
}
.gate-loader .gate-text { color: var(--cyber-cyan); font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: .9rem; }
.gate-loader .gate-bar { width: 16rem; height: 6px; border: 1px solid var(--cyber-cyan); overflow: hidden; background: #111; }
.gate-loader .gate-bar span { display: block; height: 100%; width: 50%; background: var(--cyber-cyan); animation: gateLoad 1.4s ease-in-out infinite alternate; }
@keyframes gateLoad { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* ---- High-Performance Mode for Vault & Player Pages ---- */
/* Keep the iconic 3D perspective cyber grid and scanlines completely STATIC on these media-heavy pages
   to eliminate GPU rasterization overhead and memory pressure during browsing and streaming */
.bg-grid,
.bg-grid-red {
  animation: none !important;
}
.scanlines {
  animation: none !important;
}
.text-glow-cyan {
  animation: none !important;
}

/* ---- Shared ---- */
/* Same wide layout as dashboard / admin: full width with 2rem side padding (no centred 80rem column).
   Phones/tablets were already full width, so only desktop widths above 1280px change. */
.vault-wrap { width: 100%; max-width: none; margin: 0 auto; padding: 8rem 2rem 2rem; box-sizing: border-box; }
.vault-sub { color: #9ca3af; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; font-weight: 700; }
.nav-link-cyan {
  font-size: .75rem; font-weight: 700; color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan);
  padding: .5rem 1rem; letter-spacing: .1em; text-transform: uppercase; transition: all .2s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.nav-link-cyan:hover, .nav-link-cyan.active { background: var(--cyber-cyan); color: #000; }
.chip {
  border: 1px solid var(--cyber-cyan); color: var(--cyber-cyan); background: #000; padding: .4rem .9rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.chip.active { background: var(--cyber-cyan); color: #000; }
.chip:hover:not(.active) { border-color: var(--cyber-yellow); color: var(--cyber-yellow); }
.cyber-select {
  background: rgba(0,0,0,.7); border: 1px solid var(--cyber-cyan); color: #fff; padding: .75rem 1rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.cyber-select:focus { outline: none; border-color: var(--cyber-yellow); }
.cyber-select option { background: #050505; color: #fff; }
.vault-label { display: block; color: var(--cyber-yellow); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .4rem; }

/* ---- Vault (library) ---- */
.vault-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.vault-search { position: relative; flex: 1 1 18rem; min-width: 0; }
.vault-search input { width: 100%; padding: .9rem 3rem .9rem 3rem; font-size: 1.1rem; letter-spacing: .05em; box-sizing: border-box; }
.vault-search .fa-magnifying-glass { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--cyber-cyan); pointer-events: none; }
.vault-search .clear-btn { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: #9ca3af; background: none; padding: .25rem .4rem; cursor: pointer; }
.vault-search .clear-btn:hover { color: var(--cyber-yellow); }
.vault-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: 1.5rem; }
.vault-count { color: var(--cyber-yellow); font-size: .75rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 1rem; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; }
@media (min-width: 1280px) { .vault-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* wide screens: one more column */
.vault-card, .vault-card-sk {
  display: flex; flex-direction: column; background: rgba(0,0,0,.85); border: 1px solid rgba(0,240,255,.35);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .2s, transform .2s; color: inherit; text-decoration: none;
}
.vault-card:hover, .vault-card:focus-visible { border-color: var(--cyber-yellow); transform: translateY(-3px); outline: none; }
.vault-poster-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #111; }
.vault-poster-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.vault-card:hover .vault-poster-wrap img { transform: scale(1.05); }
.vault-tag { position: absolute; top: .5rem; font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; padding: .15rem .45rem; background: rgba(0,0,0,.85); border: 1px solid; }
.vault-tag.type { left: .5rem; color: var(--cyber-cyan); border-color: var(--cyber-cyan); }
.vault-tag.type.movie { color: var(--cyber-yellow); border-color: var(--cyber-yellow); }
.vault-tag.rating { right: .5rem; color: var(--cyber-yellow); border-color: rgba(252,238,9,.5); }
.vault-tag.anime-badge { left: 3.8rem; color: #ff0055; border-color: #ff0055; background: rgba(20, 0, 10, 0.9); }
.vault-body { padding: .7rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.vault-title { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.vault-meta { color: var(--cyber-yellow); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
.vault-syn { color: #d1d5db; font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vault-cta { margin-top: auto; padding-top: .5rem; border-top: 1px solid rgba(0,240,255,.2); display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.vault-cta .go { color: var(--cyber-cyan); }
.vault-card:hover .vault-cta .go { color: var(--cyber-yellow); }
.vault-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; border: 1px dashed rgba(0,240,255,.4); background: rgba(0,0,0,.6); color: #9ca3af; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
.vault-empty .actions { margin-top: 1rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ---- Player ---- */
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 28rem); gap: 1.5rem; align-items: start; }
/* Desktop: the 16:9 stage grows with the width but stays inside the first screen (header, title and player bar
   take ~25rem above/around it), never smaller than 45rem wide. */
@media (min-width: 1024px) {
  .player-stage { max-width: max(45rem, calc((100vh - 25rem) * 16 / 9)); max-width: max(45rem, calc((100dvh - 25rem) * 16 / 9)); margin-inline: auto; }
}
.player-stage:fullscreen { max-width: none; margin: 0; }
.player-layout.theater { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) { .player-layout { grid-template-columns: minmax(0, 1fr); } }
.player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 2px solid rgba(0,240,255,.8); box-shadow: 0 0 20px rgba(0,240,255,.3); overflow: hidden; }
.player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; }
.player-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: 1.5rem; background: rgba(5,5,5,.95); }
.player-idle.hidden, .player-idle .hidden { display: none; } /* tailwind's .hidden loses to the display above (same specificity, later file) */
.player-stage::before { content: 'Connecting to stream…'; position: absolute; inset: 0; display: grid; place-items: center; color: #6b7280; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.player-idle h3 { color: #fff; font-size: 1.1rem; text-transform: uppercase; }
.player-idle p { color: #9ca3af; max-width: 28rem; font-size: .9rem; }
.player-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.player-status { color: var(--cyber-cyan); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.player-status .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cyber-yellow); margin-right: .5rem; box-shadow: 0 0 8px var(--cyber-yellow); }
.icon-btn { background: #000; border: 1px solid rgba(0,240,255,.6); color: var(--cyber-cyan); padding: .4rem .7rem; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.icon-btn:hover { border-color: var(--cyber-yellow); color: var(--cyber-yellow); }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.remote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 639px) { .remote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.remote-grid .icon-btn { padding: .65rem .5rem; }
.ctrl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.player-info-poster { width: 96px; aspect-ratio: 2/3; object-fit: cover; background: #111; flex: 0 0 auto; border: 1px solid rgba(0,240,255,.4); }
input[type=range].cyber-range { width: 100%; accent-color: #00f0ff; }
.space-y > * + * { margin-top: 1.25rem; }

@media (max-width: 639px) {
  .vault-wrap { padding: 6.5rem 1rem 2rem; }
  .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* Utilities used here that aren't in precompiled tailwind.css */
.mt-1 { margin-top: .25rem; }
@media (min-width: 768px) { .md\:p-8 { padding: 2rem; } }
@media (max-width: 639px) {
  .vault-wrap .cyber-card { padding: 1.25rem 1rem !important; }
  .vault-controls .cyber-select { width: 100%; }
  .ctrl-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Access lock screen + grace banner ---- */
.lock-card { max-width: 40rem; margin: 2rem auto; padding: 2.5rem 2rem; text-align: center; border-top: 6px solid var(--cyber-red); }
.lock-icon { font-size: 2.75rem; color: var(--cyber-yellow); margin-bottom: 1rem; display: block; }
.lock-title { color: #fff; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; text-transform: uppercase; margin-bottom: 1rem; }
.lock-body p { color: #d1d5db; font-size: 1.05rem; margin-bottom: .6rem; }
.lock-body strong { color: var(--cyber-yellow); }
.lock-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.lock-btn { display: inline-block; padding: .7rem 1.4rem; font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; }
.grace-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .9rem 1.1rem; margin-bottom: 1.5rem;
  background: rgba(252,238,9,.08); border: 1px solid var(--cyber-yellow); color: #f3f4f6; font-weight: 600;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.grace-banner i { color: var(--cyber-yellow); }
.grace-banner strong { color: var(--cyber-yellow); }
.grace-banner span { flex: 1 1 16rem; }
.admin-bypass-banner { padding: .6rem 1rem; margin-bottom: 1.25rem; border: 1px dashed var(--cyber-red); color: var(--cyber-red); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; font-size: .8rem; }

/* ---- Full catalogue: rows, type chips, load more ---- */
.vault-types { margin-bottom: .75rem; }
.vault-types .chip { border-color: var(--cyber-yellow); color: var(--cyber-yellow); }
.vault-types .chip.active { background: var(--cyber-yellow); color: #000; }
.catalog-notice { padding: .6rem 1rem; margin-bottom: 1rem; border: 1px dashed var(--cyber-yellow); color: var(--cyber-yellow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }
.vault-rows { display: flex; flex-direction: column; gap: 2rem; }
.vault-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.vault-row-title { color: #fff; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }
.vault-row-all { color: var(--cyber-yellow); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; background: none; cursor: pointer; white-space: nowrap; transition: color .15s ease; }
.vault-row-all:hover { color: #fff; }
.vault-row-track { display: grid; grid-auto-flow: column; grid-auto-columns: 170px; gap: 1rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; }
.vault-row-track > .vault-item { scroll-snap-align: start; }
.vault-row-loading { color: #6b7280; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; padding: 2rem 0; }
.vault-more { display: flex; justify-content: center; margin-top: 1.5rem; }
.vault-more .icon-btn { padding: .7rem 1.6rem; min-height: 44px; }
/* tailwind's .hidden loses to .vault-more { display:flex } (same specificity, later file) */
.vault-more.hidden, .vault-end.hidden { display: none; }
/* Rows: fixed card height so skeleton shells and loaded cards are the same size (no layout shift when a
   row's data arrives). Titles clamp to 2 lines in rows; the grid keeps natural heights. */
.vault-row-track .vault-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vault-row-track .vault-body { min-height: var(--row-body-h, 10rem); }
/* Sideways paging tile at the end of a Home row (shimmers while the next page loads) */
.row-more .vault-poster-wrap { background: linear-gradient(90deg, #0d0d0d 0%, #16232a 50%, #0d0d0d 100%); background-size: 200% 100%; animation: skShine 1.3s linear infinite; }
.row-more .vault-card-sk { border-color: rgba(0,240,255,.15); }
.row-more-fail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; font-size: .8rem; color: rgba(255,255,255,.65); border: 1px dashed rgba(0,240,255,.25); padding: 1rem; }
.row-more-fail .catalog-retry { min-height: 44px; padding: 0 1rem; margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .row-more .vault-poster-wrap { animation: none; } }
.vault-end { text-align: center; margin-top: 1.5rem; font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.55); }
@media (max-width: 639px) { .vault-row-track { grid-auto-columns: 42vw; gap: .75rem; } }

/* ---- Player: real season / episode list ---- */
.episode-list { display: flex; flex-direction: column; gap: .4rem; max-height: 22rem; overflow-y: auto; margin-top: .75rem; padding-right: .25rem; }
.episode-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .6rem; align-items: center; text-align: left; background: rgba(0,0,0,.7); border: 1px solid rgba(0,240,255,.25); padding: .35rem; color: #d1d5db; cursor: pointer; }
.episode-item:hover { border-color: var(--cyber-yellow); }
.episode-item.current { border-color: var(--cyber-yellow); background: rgba(252,238,9,.08); }
.episode-item img { width: 88px; aspect-ratio: 16/9; object-fit: cover; background: #111; }
.episode-item .ep-num { color: var(--cyber-yellow); font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.episode-item .ep-name { color: #fff; font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vault-chips .chip[hidden] { display: none; }
.catalog-retry { margin-left: .75rem; padding: .25rem .7rem; border: 1px solid var(--cyber-yellow); color: var(--cyber-yellow); background: transparent; font: inherit; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.catalog-retry:hover, .catalog-retry:focus-visible { background: var(--cyber-yellow); color: #000; outline: none; }

/* ===================== Quality-of-life additions ===================== */
/* ---- Cards: wrapper with My List / details buttons over the poster ---- */
.vault-item { position: relative; display: flex; min-width: 0; }
.vault-item > .vault-card, .vault-item > .vault-card-sk { flex: 1; min-width: 0; }
.card-acts { position: absolute; z-index: 3; top: 0; left: 0; right: 0; aspect-ratio: 2 / 3; display: flex; align-items: flex-end; justify-content: flex-end; gap: .35rem; padding: .45rem; pointer-events: none; }
.card-act { pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.78); border: 1px solid rgba(0,240,255,.6); color: var(--cyber-cyan); cursor: pointer; font-size: .95rem; transition: border-color .15s, color .15s, transform .2s; }
.card-act { position: relative; }
.card-act[data-act="forget"] { position: absolute; top: .45rem; right: .45rem; } /* keeps the poster's middle free for the stream link */
.card-act::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; } /* 44px hit area on desktop too */
@media (hover: none) { .vault-item:hover .card-acts, .vault-card:hover, .vault-card:hover .vault-poster-wrap img { transform: none; } }
.card-act:hover, .card-act:focus-visible { border-color: var(--cyber-yellow); color: var(--cyber-yellow); }
.card-act.on { background: var(--cyber-yellow); border-color: var(--cyber-yellow); color: #000; }
.vault-item:hover .card-acts { transform: translateY(-3px); }
.vault-item:focus-within > .vault-card { border-color: var(--cyber-yellow); }
.vault-resume { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .12em; padding: .15rem .45rem; background: var(--cyber-yellow); color: #000; text-transform: uppercase; }
.vault-poster-wrap img { opacity: 0; transition: opacity .25s, transform .3s; }
.vault-poster-wrap img.ok { opacity: 1; }
@media (scripting: none) { .vault-poster-wrap img { opacity: 1; } }

/* ---- Skeletons ---- */
@keyframes skShine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.sk, .skeleton .vault-poster-wrap { background: linear-gradient(90deg, #0d0d0d 0%, #16232a 50%, #0d0d0d 100%); background-size: 200% 100%; animation: skShine 1.3s linear infinite; }
.sk-line { display: block; height: .8rem; margin: .25rem 0; width: 85%; }
.sk-line.short { width: 50%; }
.skeleton .vault-card-sk { border-color: rgba(0,240,255,.15); }
.skeleton-ep { cursor: default; }
.skeleton-ep .sk-still { width: 88px; aspect-ratio: 16/9; display: block; }
@media (prefers-reduced-motion: reduce) { .sk, .skeleton .vault-poster-wrap { animation: none; } }

/* ---- Search: recent searches ---- */
.vault-recent { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #050505; border: 1px solid var(--cyber-cyan); box-shadow: 0 10px 30px rgba(0,0,0,.6); padding: .4rem; }
.vr-head { display: flex; justify-content: space-between; align-items: center; color: var(--cyber-yellow); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; padding: .25rem .4rem .4rem; }
.vr-clear { background: none; color: #9ca3af; font: inherit; letter-spacing: .15em; cursor: pointer; padding: .3rem .5rem; }
.vr-clear:hover { color: var(--cyber-yellow); }
.vr-item { display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left; background: none; color: #e5e7eb; font-size: 1rem; padding: .6rem .5rem; cursor: pointer; min-height: 44px; }
.vr-item i { color: var(--cyber-cyan); }
.vr-item:hover, .vr-item:focus-visible { background: rgba(0,240,255,.08); color: #fff; }

/* ---- Back to top ---- */
.back-to-top { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 50px); z-index: 60; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(5,5,5,.88); border: 1px solid var(--cyber-yellow); color: var(--cyber-yellow); cursor: pointer; }
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: var(--cyber-yellow); color: #000; }

/* ---- Title details modal ---- */
.title-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.title-modal.hidden { display: none; }
body.modal-open { overflow: hidden; }
.tm-box {
  position: relative;
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.75rem;
  border-left: 5px solid var(--cyber-cyan);
  background: #09090b;
  margin: auto;
  box-sizing: border-box;
}
.tm-overview .sk-line { height: .9rem; margin: .45rem 0; }
.tm-overview { white-space: pre-line; }
.tm-close { position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; color: #9ca3af; font-size: 1.2rem; cursor: pointer; z-index: 2; }
.tm-close:hover { color: var(--cyber-yellow); }
.tm-body { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; position: relative; z-index: 1; align-items: start; }
.tm-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: #111; border: 1px solid rgba(0,240,255,.4); }
.tm-title { color: #fff; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; padding-right: 2rem; overflow-wrap: anywhere; }
.tm-overview { color: #e5e7eb; font-size: 0.92rem; line-height: 1.5; margin-top: .75rem; }
.tm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.15rem; }
.tm-play { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; letter-spacing: .15em; min-height: 40px; }
@media (max-width: 539px) { .tm-body { grid-template-columns: minmax(0, 1fr); } .tm-poster { width: 7.5rem; } .tm-box { padding: 1.25rem 1rem; } }

/* ---- Player: header, My List, pickers, next episode ---- */
.player-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.back-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--cyber-cyan); color: var(--cyber-cyan); font-size: .85rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; background: rgba(0,0,0,.6); }
.back-btn:hover { background: var(--cyber-cyan); color: #000; }
.mylist-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--cyber-yellow); color: var(--cyber-yellow); background: rgba(0,0,0,.6); font-size: .85rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.mylist-btn.on, .mylist-btn:hover { background: var(--cyber-yellow); color: #000; }
.player-head-meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: 1.75rem; }
.player-head-meta span { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #d1d5db; padding: .2rem .55rem; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.5); }
.player-head-meta .rt { color: var(--cyber-yellow); border-color: rgba(252,238,9,.5); }
.player-head-meta .g { color: var(--cyber-cyan); border-color: rgba(0,240,255,.4); }
.tm-text .player-head-meta { margin: .6rem 0 0; }
.ep-pickers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .75rem; }
.ep-pickers .cyber-select { text-transform: none; letter-spacing: .02em; text-overflow: ellipsis; }
.ep-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ep-nav .icon-btn { padding: .65rem .5rem; }
.next-ep-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: .75rem; width: 100%; margin-top: .75rem; padding: .8rem 1rem; text-align: left; background: var(--cyber-yellow); color: #000; border: 0; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.next-ep-btn.hidden { display: none; }
.next-ep-btn .lbl { font-family: 'Orbitron', sans-serif; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; font-size: .85rem; }
.next-ep-btn .nm { grid-row: 2; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-ep-btn i { grid-row: 1 / 3; grid-column: 2; font-size: 1.3rem; }
.next-ep-btn:hover { filter: brightness(1.1); }
.kbd-hint { display: none; margin-top: .6rem; color: #6b7280; font-size: .75rem; letter-spacing: .08em; }
.kbd-hint kbd { display: inline-block; min-width: 1.5em; padding: 0 .35em; border: 1px solid #4b5563; color: #d1d5db; font: 700 .7rem/1.5 monospace; text-align: center; }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: block; } }
.episode-item[aria-current="true"] .ep-name::after { content: ' • now'; color: var(--cyber-yellow); font-size: .7rem; }

/* ---- Accessibility: visible focus, comfortable tap targets ---- */
.vault-wrap a:focus-visible, .vault-wrap button:focus-visible, .vault-wrap select:focus-visible, .vault-wrap input:focus-visible,
.title-modal a:focus-visible, .title-modal button:focus-visible, .back-to-top:focus-visible, nav a:focus-visible, nav button:focus-visible {
  outline: 2px solid var(--cyber-yellow); outline-offset: 2px;
}
.vault-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cyber-yellow); }
.cyber-select:focus-visible { border-color: var(--cyber-yellow); }
.chip { min-height: 36px; }
@media (pointer: coarse) {
  .icon-btn, .chip, .vault-row-all, .catalog-retry { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .vault-search .clear-btn { min-width: 44px; min-height: 44px; right: .3rem; }
  .card-act { width: 44px; height: 44px; }
  .episode-item { min-height: 56px; }
}
/* keyboard shortcuts help (desktop pointers only, like the hint) */
.kbd-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: .4rem; border: 1px solid #4b5563; color: #d1d5db; font: 700 .8rem/1 monospace; background: #000; border-radius: 50%; vertical-align: middle; }
.kbd-help-btn:hover, .kbd-help-btn:focus-visible { border-color: var(--cyber-cyan); color: var(--cyber-cyan); outline: none; }
.kbd-help { margin-top: .6rem; padding: .9rem 1rem; border: 1px solid #374151; background: #050505; max-width: 34rem; }
.kbd-help.hidden { display: none; }
.kbd-help-head { display: flex; align-items: center; justify-content: space-between; color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin-bottom: .5rem; }
.kbd-help dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .8rem; color: #d1d5db; }
.kbd-help dt { white-space: nowrap; }
.kbd-help kbd { display: inline-block; min-width: 1.5em; padding: 0 .35em; border: 1px solid #4b5563; color: #d1d5db; font: 700 .7rem/1.5 monospace; text-align: center; }
.kbd-help-note { margin-top: .6rem; color: #6b7280; font-size: .72rem; }
@media not all and (hover: hover) and (pointer: fine) { .kbd-help { display: none !important; } }
.player-stage:focus { outline: none; }

/* ---- Theatre Mode: Darkened Background & Cinema Focus ---- */
body.theater-mode {
  background-color: #000000 !important;
}
body.theater-mode .bg-clip,
body.theater-mode .bg-grid {
  opacity: 0.02 !important;
  filter: brightness(0.05) contrast(1.5) !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
body.theater-mode .bg-radial {
  opacity: 0.02 !important;
  transition: opacity 0.3s ease;
}
body.theater-mode .scanlines {
  opacity: 0.03 !important;
  transition: opacity 0.3s ease;
}
body.theater-mode nav.nav-app {
  background: rgba(0, 0, 0, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.95) !important;
}
body.theater-mode .vault-wrap {
  max-width: min(92vw, 1280px) !important;
  padding-top: 5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  transition: max-width 0.3s ease, padding 0.3s ease;
}
body.theater-mode .player-top {
  margin-bottom: 0.5rem !important;
}
body.theater-mode #playerTitle {
  font-size: 1.5rem !important;
  margin-bottom: 0.25rem !important;
}
body.theater-mode .player-head-meta {
  margin-bottom: 0.75rem !important;
}
body.theater-mode .player-layout.theater > section.cyber-card {
  background: rgba(0, 0, 0, 0.98) !important;
  border-color: rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 1) !important;
  padding: 1rem !important;
  transition: background 0.3s ease, border-color 0.3s ease;
}
body.theater-mode .player-layout.theater > section.cyber-card::before {
  opacity: 0 !important;
}
body.theater-mode .player-stage:not(:fullscreen) {
  width: 100% !important;
  max-width: min(100%, calc((75vh - 40px) * 16 / 9)) !important;
  aspect-ratio: 16 / 9 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9) !important;
  background: #000 !important;
  transition: max-width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Cinema Fullscreen: Bypass iframe fullscreen on low-end devices ---- */
/* Stops 3D gridMove, scanlineGlitch, and CSS shadows entirely so GPU resources go 100% to video decoding */
body.cinema-fullscreen {
  overflow: hidden !important;
  background-color: #000000 !important;
}
body.cinema-fullscreen .bg-clip,
body.cinema-fullscreen .bg-grid,
body.cinema-fullscreen .bg-radial,
body.cinema-fullscreen .scanlines {
  display: none !important;
  animation: none !important;
}
body.cinema-fullscreen nav.nav-app,
body.cinema-fullscreen .player-top,
body.cinema-fullscreen #playerTitle,
body.cinema-fullscreen .player-head-meta,
body.cinema-fullscreen .player-layout > aside,
body.cinema-fullscreen .kbd-hint,
body.cinema-fullscreen .kbd-help,
body.cinema-fullscreen .mt-6 {
  display: none !important;
}
body.cinema-fullscreen .vault-wrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}
body.cinema-fullscreen .player-layout {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.cinema-fullscreen .player-layout > section.cyber-card {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #000000 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 99999 !important;
  clip-path: none !important;
}
body.cinema-fullscreen .player-layout > section.cyber-card::before {
  display: none !important;
}
body.cinema-fullscreen .player-bar {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  left: 0.5rem !important;
  z-index: 100000 !important;
  background: rgba(0,0,0,0.65) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 4px !important;
  margin: 0 !important;
  opacity: 0.2 !important;
  transition: opacity 0.2s ease !important;
}
body.cinema-fullscreen .player-bar:hover,
body.cinema-fullscreen .player-bar:focus-within {
  opacity: 1 !important;
}
body.cinema-fullscreen .player-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #000000 !important;
  z-index: 99999 !important;
}
body.cinema-fullscreen .player-stage iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000000 !important;
}

/* ==========================================================================
   Compact Continue Watching Shelf (#row-continue on /vault)
   - Limited to 3 small horizontal cards (48x68 poster, 84px total card height)
   - Includes ON/OFF toggle button + per-card remove (×) and info (i) buttons
   ========================================================================== */
#row-continue.vault-row--cw-compact {
  margin-bottom: 1.35rem;
}
#row-continue.vault-row--cw-compact .vault-cw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.1);
  color: var(--cyber-cyan);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
#row-continue.vault-row--cw-compact .vault-cw-toggle[aria-pressed="false"] {
  border-color: rgba(252, 238, 9, 0.45);
  background: rgba(252, 238, 9, 0.08);
  color: var(--cyber-yellow);
}
#row-continue .vault-cw-off-msg {
  padding: 0.55rem 0.85rem;
  background: rgba(10, 14, 22, 0.82);
  border: 1px dashed rgba(252, 238, 9, 0.35);
  border-radius: 6px;
  font-size: 0.78rem;
  color: #cbd5e1;
}
#row-continue.vault-row--cw-compact .vault-row-track {
  grid-auto-columns: minmax(270px, 340px);
  gap: 0.65rem;
  padding-bottom: 0.25rem;
}
#row-continue.vault-row--cw-compact .vault-item {
  min-height: 84px;
}
#row-continue.vault-row--cw-compact a.vault-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.42rem 8.8rem 0.42rem 0.5rem !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  border-radius: 6px;
}
#row-continue.vault-row--cw-compact .vault-poster-wrap {
  width: 48px !important;
  height: 68px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  aspect-ratio: auto !important;
  flex: 0 0 48px !important;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 240, 255, 0.3);
}
#row-continue.vault-row--cw-compact .vault-tag,
#row-continue.vault-row--cw-compact .vault-meta,
#row-continue.vault-row--cw-compact .vault-syn,
#row-continue.vault-row--cw-compact .vault-cta {
  display: none !important;
}
#row-continue.vault-row--cw-compact .vault-body {
  min-height: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.2rem !important;
}
#row-continue.vault-row--cw-compact .vault-title {
  font-size: 0.82rem !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#row-continue.vault-row--cw-compact .vault-resume {
  position: static !important;
  display: inline-block;
  padding: 0.1rem 0.35rem !important;
  font-size: 0.62rem !important;
  border-radius: 3px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  margin-top: 0.05rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#row-continue.vault-row--cw-compact .card-acts {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0.35rem !important;
  left: auto !important;
  aspect-ratio: auto !important;
  height: 100% !important;
  width: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  padding: 0 !important;
}
#row-continue.vault-row--cw-compact .card-act[data-act="forget"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* ==========================================================================
   Enlarged In-Player Buttons, Timeline Scrubber, PiP & Fullscreen Controls
   - Minimum 48px-52px touch targets & large crisp icons (1.15rem-1.3rem)
   - Thumb-friendly Timeline scrubber bar with 26px grab handle
   ========================================================================== */
.player-bar {
  gap: 0.65rem;
}
.player-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.player-bar .icon-btn,
.player-bar .player-top-btn {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  border-width: 1.5px !important;
  border-radius: 6px !important;
}
.player-bar .icon-btn i,
.player-bar .player-top-btn i {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}
.player-timeline-box {
  background: rgba(5, 8, 15, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.32);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
}
.player-timeline-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.timeline-step-btn {
  min-height: 48px !important;
  min-width: 68px !important;
  padding: 0.5rem 0.7rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}
.timeline-step-btn i {
  font-size: 1.1rem !important;
}
.cyber-range.timeline-range,
#volRange.cyber-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  background: transparent;
  cursor: pointer;
}
.cyber-range.timeline-range::-webkit-slider-runnable-track,
#volRange.cyber-range::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.45), rgba(252, 238, 9, 0.45));
  border: 1px solid rgba(0, 240, 255, 0.65);
}
.cyber-range.timeline-range::-webkit-slider-thumb,
#volRange.cyber-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyber-yellow, #fcee09);
  border: 2px solid #000;
  box-shadow: 0 0 10px rgba(252, 238, 9, 0.9);
  margin-top: -8px;
}
.cyber-range.timeline-range::-moz-range-track,
#volRange.cyber-range::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.45), rgba(252, 238, 9, 0.45));
  border: 1px solid rgba(0, 240, 255, 0.65);
}
.cyber-range.timeline-range::-moz-range-thumb,
#volRange.cyber-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyber-yellow, #fcee09);
  border: 2px solid #000;
  box-shadow: 0 0 10px rgba(252, 238, 9, 0.9);
}
.remote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 640px) {
  .remote-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.remote-grid .icon-btn,
#btnMute.icon-btn,
.ep-nav .icon-btn {
  min-height: 52px !important;
  padding: 0.65rem 0.75rem !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  border-width: 1.5px !important;
  border-radius: 6px !important;
}
.remote-grid .icon-btn i,
#btnMute.icon-btn i,
.ep-nav .icon-btn i {
  font-size: 1.22rem !important;
  line-height: 1 !important;
}
/* Floating Picture-in-Picture mini-stage mode */
body.pip-floating:not(.cinema-fullscreen) #playerStage {
  position: fixed !important;
  right: 1rem !important;
  bottom: 1rem !important;
  width: min(360px, 88vw) !important;
  aspect-ratio: 16 / 9 !important;
  z-index: 9500 !important;
  border: 2px solid var(--cyber-cyan, #00f0ff) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.92), 0 0 18px rgba(0, 240, 255, 0.45) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* Keep fullscreen top bar clearly visible & easy to tap on touch / mobile / PWA */
@media (pointer: coarse), (max-width: 900px) {
  body.cinema-fullscreen .player-bar {
    opacity: 0.92 !important;
    padding: 0.4rem 0.6rem !important;
  }
  .player-bar .icon-btn,
  .player-bar .player-top-btn {
    min-height: 50px !important;
    min-width: 50px !important;
    padding: 0.55rem 0.75rem !important;
  }
  .player-bar .icon-btn i,
  .player-bar .player-top-btn i {
    font-size: 1.25rem !important;
  }
}