/* Inter: the closest free match to Netflix Sans (Netflix's own font can't be used elsewhere). Loaded by each page's <head> (a <link>, not an @import here: an @import only starts once this whole file has arrived) */

/* ============================== Theme ============================== */

:root {
  --bg: #101010;
  --surface: #17181c;
  --surface-2: #1f2025;
  --card: #141417;
  --text: #ffffff;
  --text-muted: #aeaeae;
  --border: rgba(255, 255, 255, 0.12);
  --nav: #17181c;
  --nav-text: #ffffffb3;
  --accent: #900d09;
  --accent-hover: #b92222;
  --gold: #f5c518;
  --fav: #690000;
  --rate: #c79800;
  --watch: #002366;
  --yt: #b92222;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  --radius: 12px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #ececef;
  --card: #ffffff;
  --text: #17181c;
  --text-muted: #5b5b63;
  --border: rgba(0, 0, 0, 0.1);
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-color: #7777 transparent;
  /* room for the scrollbar from the start: pages don't nudge sideways when theirs appears */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* buttons, fields and menus use the same font as everything else */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Netflix-style type: bold, slightly tight headings */
h1,
h2,
h3,
.page-title,
.section-title {
  letter-spacing: -0.02em;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
  padding: 24px 30px 48px;
}

.muted {
  color: var(--text-muted);
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  margin: 12px 0 20px;
  letter-spacing: -0.02em;
}

/* ============================== Buttons & inputs ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.btn:hover {
  border-color: var(--text-muted);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-danger {
  color: var(--accent-hover);
}

.btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.input,
.select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}

.input:focus,
.select:focus {
  border-color: var(--accent-hover);
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================== Navbar ============================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* the page waits for its navbar (js/core/layout.js adds it a moment after the page is drawn),
   so it doesn't show at the top and then drop down when the navbar arrives */
body[data-page]:not(:has(> .site-nav)) > main {
  visibility: hidden;
}

.nav-bar {
  position: relative;
  max-width: 1550px; /* same width as the page content, so the navbar lines up with it */
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo {
  flex-shrink: 0; /* never squash the logo */
}

.nav-logo img {
  height: 24px;
  width: auto;
  display: block;
}

.nav-toggle,
.nav-close {
  display: none;
  background: none;
  border: 0;
  color: var(--nav-text);
  font-size: 24px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 8px;
  transition: color 0.2s;
}

.nav-links a i {
  display: none;
  width: 22px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nav-text);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  opacity: 1;
}

.nav-links a.active::after {
  background: var(--accent-hover);
}

.nav-menu-head {
  display: none;
}

.nav-tools {
  display: flex;
  align-items: center;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--nav-text);
  font-size: 19px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- search ---------- */

.search {
  position: relative;
}

.search-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 340px;
  background: var(--nav);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s;
}

.search.open .search-panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.search-panel input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: #242526;
  color: #fff;
  outline: none;
  font-size: 14px;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.search-results a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.search-results a:hover,
.search-results a.focused {
  background: rgba(255, 255, 255, 0.08);
}

.search-results img {
  width: 34px;
  height: 51px;
  object-fit: cover;
  border-radius: 4px;
  background: #2a2a2a;
}

/* a person (search: People): a round photo, the same width as the posters */
.search-results .sr-person img {
  height: 34px !important;
  margin: 8px 0;
  border-radius: 50% !important;
  object-position: center 20%;
}

.sheet-results .sr-person img {
  width: 40px;
  height: 40px !important;
  margin: 10px 0;
}

.search-results small {
  display: block;
  color: #aaa;
  font-size: 12px;
}

.search-empty {
  padding: 10px;
  color: #aaa;
  font-size: 13px;
}

/* ---------- profile menu ---------- */

.profile {
  position: relative;
}

.user-pic-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.user-pic {
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  display: block;
  padding: 0;
  background: none;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
}

.profile.open .profile-menu {
  opacity: 1;
  pointer-events: auto;
}

.profile-menu .user-info {
  text-align: center;
}

.profile-menu .user-info img {
  border-radius: 50%;
  object-fit: cover;
}

.profile-menu .user-info h2 {
  margin: 10px 0 0;
}

.profile-menu hr {
  border: 0;
  height: 1px;
  background: #444;
  margin: 14px 0 6px;
}

.profile-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.profile-menu a i:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5e5e5;
  color: #17181c;
}

.profile-menu a span {
  flex: 1;
}

.profile-menu a .fa-chevron-right {
  font-size: 12px;
  transition: transform 0.3s;
}

.profile-menu a:hover span {
  font-weight: 600;
}

.profile-menu a:hover .fa-chevron-right {
  transform: translateX(4px);
}

.profile-menu .sync-status[data-status="synced"] i {
  color: #4caf7a;
}

.profile-menu .sync-status[data-status="offline"] i,
.profile-menu .sync-status[data-status="signed-out"] i {
  color: #e8a33d;
}

/* (the account refused the save: red, so it's noticed) */
.profile-menu .sync-status[data-status="refused"] {
  color: #ff8a80;
}

.profile-menu .sync-status[data-status="refused"] i {
  color: #ff5a50;
}

.profile-menu .menu-label {
  font-weight: 600;
  text-transform: uppercase;
}

.profile-menu a .acct-pic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- mobile nav ---------- */

@media (max-width: 1330px) {
  .nav-bar {
    padding: 0 15px;
  }

  .nav-toggle,
  .nav-close {
    display: block;
  }

  .nav-menu {
    position: fixed;
    inset: 0 auto 0 -100%;
    width: 300px;
    max-width: 85vw;
    padding: 20px;
    background: var(--nav);
    z-index: 110;
    transition: left 0.35s ease;
    box-shadow: var(--shadow);
  }

  .nav-menu.open {
    left: 0;
  }

  .nav-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-links a {
    padding: 12px;
  }

  .nav-links a i {
    display: inline-block;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a.active {
    background: rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 480px) {
  .search-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 70px;
    width: auto;
  }
}

/* ============================== Movie cards ============================== */

.movie-grid {
  display: grid;
  gap: 18px;
}

.movie-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}

.movie-item:hover,
.movie-item:focus-within {
  transform: scale(1.03);
  box-shadow: var(--shadow);
  z-index: 3;
}

/* spotlight that follows the mouse (was spotlightEffect.js) */
.movie-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.08),
    transparent 40%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 1;
}

.movie-item:hover::before {
  opacity: 1;
}

.poster-link {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.movie-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
}

.new-label {
  position: absolute;
  z-index: 2;
}

.badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  gap: 5px;
}

.badges span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  color: #fff;
}

.badges .fa-heart {
  color: #e0393e;
}

.movie-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}

.movie-title {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-title a {
  text-decoration: none;
}

.movie-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
}

.movie-meta .score i {
  color: var(--gold);
  margin-right: 4px;
}

.movie-meta .score.unrated i {
  color: var(--text-muted);
}

/* action buttons with tooltips (same look as the original site) */
.action-circle {
  display: flex;
}

.action-circle .icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.action-circle .icon .bubble {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.action-circle .tooltip {
  position: absolute;
  top: 0;
  padding: 6px 14px;
  border-radius: 25px;
  background: #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.action-circle .tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.action-circle .icon:hover .tooltip,
.action-circle .icon:focus-visible .tooltip {
  opacity: 1;
}

.action-circle .fav:hover .bubble,
.action-circle .fav:hover .tooltip {
  background: var(--fav);
}

.action-circle .rate:hover .bubble,
.action-circle .rate:hover .tooltip {
  background: var(--rate);
}

.action-circle .watch:hover .bubble,
.action-circle .watch:hover .tooltip {
  background: var(--watch);
}

.action-circle .trailer:hover .bubble,
.action-circle .trailer:hover .tooltip {
  background: var(--yt);
}

.action-circle .fav.on i {
  color: #e0393e;
}

.action-circle .fav.on:hover i {
  color: #fff;
}

.action-circle .rate.on i {
  color: var(--gold);
}

/* on the watchlist: the filled bookmark (and the bookmark on the poster) is enough, no colour */
.action-circle .watch.on i {
  color: #fff;
}

.action-circle .watch.on:hover i {
  color: #fff;
}

/* light theme: keep the dark round buttons readable */
:root[data-theme="light"] .movie-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 700px) {
  .container {
    padding: 14px 10px 40px;
  }

  .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .movie-info {
    padding: 8px 8px 10px;
  }

  .movie-title {
    font-size: 14px;
  }

  .movie-meta {
    font-size: 12px;
  }

  .action-circle {
    gap: 6px;
    margin-top: 8px;
  }

  .action-circle .icon .bubble {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .action-circle .tooltip {
    display: none;
  }

  .page-title {
    font-size: 24px;
  }
}

/* ============================== Chips (filters) ============================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}

.chip .count {
  opacity: 0.7;
  margin-left: 4px;
}

.result-count {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 14px;
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 42px;
  margin-bottom: 12px;
  display: block;
}

/* ============================== Home ============================== */

.hero {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.4);
  background: #000;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 2;
  color: #fff;
}

.hero-caption p {
  margin: 0 0 14px;
  color: #ddd;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

.hero-arrow.prev {
  left: 14px;
}

.hero-arrow.next {
  right: 14px;
}

.hero-dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
}

.hero-dots button {
  border: 0;
  cursor: pointer;
  padding: 0;
}

.row-section {
  margin-top: 36px;
}

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.row-head h2 {
  font-size: 24px;
  margin: 0;
}

.row-head a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  /* a bigger tap area (same look), kept above the posters of the row before it */
  position: relative;
  z-index: 5;
  padding: 10px 0 10px 16px;
  margin: -10px 0;
  touch-action: manipulation;
}

.row-head a:hover {
  color: var(--text);
}

.movie-row {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  padding: 56px 6px 14px;
  margin-top: -44px;
  scroll-snap-type: x proximity;
}

.movie-row > .movie-item {
  scroll-snap-align: start;
}

@media (max-width: 700px) {
  .hero {
    aspect-ratio: 16 / 10;
  }

  .hero-caption {
    left: 16px;
    bottom: 16px;
    max-width: 85%;
  }

  .hero-caption p {
    display: none;
  }

  .hero-arrow {
    display: none;
  }

  .movie-row {
    grid-auto-columns: 150px;
    gap: 10px;
  }
}

/* ============================== Modals (rating, trailer, add) ============================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #222;
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.overlay.active .modal {
  transform: none;
}

.modal h3 {
  margin: 0 0 6px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  color: #ccc;
  font-size: 24px;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
}

/* rating */
.rating-modal {
  text-align: center;
}

/* sign-in messages (e.g. "This account can't sign in") */
.notice-modal {
  max-width: 420px;
  text-align: center;
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: rgba(144, 13, 9, 0.18);
  color: var(--accent-hover);
  font-size: 26px;
}

.notice-modal h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.notice-modal p {
  margin: 0 0 22px;
  color: #ccc;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.notice-modal p strong {
  color: #fff;
}

.notice-modal .notice-ok {
  min-width: 120px;
}

.rating-for {
  color: #bbb;
  margin: 0 0 14px;
}

.stars {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.star {
  background: none;
  border: 0;
  padding: 0 6px;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.star.selected,
.star.hover {
  transform: scale(1.1);
}

.feedback-message {
  min-height: 56px;
  margin: 14px 0 6px;
  font-weight: 600;
  font-size: 17px;
}

.rating-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.modal .rating-actions .save {
  border-color: gold;
}

.modal .rating-actions .save:disabled {
  cursor: not-allowed;
}

.rating-modal .btn:not(.save) {
  background: #333;
  color: #fff;
  border-color: #444;
}

.trailer-head {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trailer-modal iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.trailer-message {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.trailer-message i {
  font-size: 40px;
}

.trailer-note {
  margin: 0;
  padding: 12px 18px;
  background: #141414;
  color: #ccc;
  font-size: 13px;
}

.trailer-note i {
  color: var(--gold);
  margin-right: 4px;
}

/* add title */

.modal .input,
.modal .select {
  background: #2d2d2f;
  border-color: #3a3a3d;
  color: #fff;
}

.modal label.field {
  color: #bbb;
}

.modal .btn {
  background: #333;
  color: #fff;
  border-color: #444;
}

.modal .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}

.tmdb-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tmdb-results button {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  color: #ddd;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
}

.tmdb-results button:hover,
.tmdb-results button.picked {
  border-color: gold;
}

.tmdb-results img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #333;
}

.tmdb-results span {
  display: block;
  padding: 4px;
}

/* ============================== Toast ============================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 10px;
  background: #222;
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================== Title page ============================== */

/* top block: always dark, like a cinema screen */
.title-hero {
  position: relative;
  background: #0b0b0c;
  color: #fff;
  overflow: hidden;
}

.t-backdrop {
  position: absolute;
  inset: 0;
}

.t-backdrop picture,
.t-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
}

.t-backdrop img {
  object-fit: cover;
  object-position: center 20%;
}

.t-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.97) 25%, rgba(11, 11, 12, 0.5)), linear-gradient(to top, #0b0b0c, transparent 40%);
}

.t-topbar {
  display: none;
}

.t-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-top: 40px;
}

.t-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #222;
}

.t-head h1 {
  font-size: clamp(28px, 4vw, 46px);
  margin: 0 0 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.t-meta,
.t-genres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: #ddd;
  font-size: 15px;
}

.t-genres {
  margin-top: 10px;
  gap: 6px 10px;
}

.t-score,
.t-rt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #fff;
}

.t-score .imdb-tag,
.t-score .tmdb-tag {
  margin: 0;
  font-size: 11px;
  padding: 2px 5px;
}

.t-rt {
  gap: 3px;
}

.t-rt.rotten .rt-icon {
  filter: hue-rotate(80deg) saturate(1.4);
}

.t-cert {
  padding: 0 6px;
}

.t-providers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  font-size: 14px;
  color: #ddd;
}

.t-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.t-provider-list img {
  display: block;
  width: 36px;
  height: 36px;
  background: #fff;
}

.t-providers small {
  color: #888;
  font-size: 11px;
}

.t-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin-top: 20px;
}

/* title page's big red Trailer button only (Discover cards reuse the class name) */
.btn.t-trailer {
  width: 100%;
  border: 0;
  font-weight: 600;
}

.t-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.t-actions .btn {
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}

.t-actions .btn.is-rated i {
  color: var(--gold);
}

.t-about {
  max-width: 760px;
  margin-top: 18px;
}

.t-overview {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.t-read-more {
  display: block;
  margin: 4px 0 0 auto;
  color: #fff;
}

.t-director {
  margin: 12px 0 0;
  font-size: 14px;
}

.section-title {
  margin: 36px 0 14px;
  font-size: 24px;
}

.t-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
}

.t-section-title small {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}
.t-empty {
  padding: 8px 0 16px;
}

.t-cast {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.t-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.t-person img {
  background: var(--surface-2);
}

.t-person strong {
  font-size: 14px;
  line-height: 1.25;
}

.t-person span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.t-sub {
  margin: 6px 0 10px;
  font-size: 16px;
}

.t-media-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  overflow-x: auto;
}

.t-video {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.t-video strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-video span {
  color: var(--text-muted);
  font-size: 12px;
}

.t-reviews {
  display: grid;
  gap: 12px;
}

.t-review header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.t-review header small {
  margin-left: auto;
  color: var(--text-muted);
}

.t-review-score i {
  color: var(--gold);
}

.t-review p {
  margin: 0 0 6px;
  line-height: 1.6;
  white-space: pre-line;
}

.t-review p.clamp {
  -webkit-line-clamp: 5;
}

.tmdb-note {
  margin-top: 30px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- phone: tall header image with the title over it (like a streaming app) ---------- */
@media (max-width: 700px) {
  body[data-page="title"] .site-nav {
    display: none;
  }

  .t-backdrop {
    inset: 0 0 auto 0;
    height: min(64vh, 560px);
  }

  .t-backdrop img {
    object-position: center top;
    opacity: 1;
  }

  .t-backdrop::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 20%, transparent 45%, #0b0b0c 100%);
  }

  .t-topbar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .t-spacer {
    flex: 1;
  }

  .t-round {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 18px;
    backdrop-filter: blur(6px);
    cursor: pointer;
  }

  .t-hero-inner {
    display: block;
    padding: calc(min(64vh, 560px) - 120px) 16px 20px;
  }

  .t-poster {
    display: none;
  }

  .t-head h1 {
    font-size: 30px;
    line-height: 1.15;
  }

  .t-meta,
  .t-genres {
    font-size: 14px;
  }

  .t-cta {
    max-width: none;
  }

  .t-actions {
    gap: 8px;
  }

  .t-actions .btn {
    padding: 10px 4px;
    font-size: 14px;
  }

  .t-section {
    margin-top: 24px;
  }

  .t-cast {
    grid-auto-columns: calc((100% - 24px) / 3);
  }

  .t-media-row {
    grid-auto-columns: 78%;
  }
}
/* ============================== Tier list ============================== */

.tier-help {
  color: var(--text-muted);
  margin: -8px 0 18px;
}
/* ============================== Panels and help text ============================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.panel + .panel {
  margin-top: 24px;
}

.panel h2 {
  font-size: 20px;
  margin: 0 0 16px;
}

.help {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ============================== Footer ============================== */

/* a glass panel (logo, description, two buttons, link columns) and a slim bottom row */
.site-footer {
  padding: 40px 30px 22px;
  color: var(--text-muted);
  font-size: 14px;
  background: linear-gradient(to bottom, transparent, rgba(144, 13, 9, 0.06));
}

.footer-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  padding: 32px 36px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.footer-logo img {
  display: block;
  max-width: 190px;
}

:root[data-theme="light"] .footer-logo img {
  filter: invert(1) hue-rotate(180deg);
}

.footer-brand p {
  max-width: 460px;
  margin: 14px 0 20px;
  line-height: 1.7;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--glass-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.footer-btn:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
}

.footer-btn.primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(144, 13, 9, 0.4);
}

.footer-btn.primary:hover {
  background: var(--accent-hover);
}

.footer-col h3 {
  margin: 4px 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: -10px;
  padding: 7px 10px;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.footer-col a i {
  width: 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  transition: color 0.2s;
}

.footer-col a:hover {
  background: var(--glass-bg-hover);
  color: var(--text);
}

.footer-col a:hover i {
  color: #ff4d3a;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 18px 8px 0;
  font-size: 13px;
}

.footer-credit {
  margin-right: auto;
  opacity: 0.8;
}

.footer-credit a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-hover);
  text-underline-offset: 3px;
}

.footer-top {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--glass-text);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.footer-top:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-3px);
}

@media (max-width: 900px) {
  .footer-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    padding: 26px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .site-footer {
    padding: 28px 12px 18px;
  }

  .footer-card {
    gap: 20px;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .footer-btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  .footer-bottom {
    flex-wrap: nowrap;
    padding-top: 14px;
  }

  /* copyright and the credit stacked on the left, the back-to-top button on the right */
  .footer-bottom > span:first-child {
    flex: 1 1 0;
    min-width: 0;
  }

  .footer-credit {
    display: none;
  }

  .footer-top {
    flex-shrink: 0;
  }
}

[hidden] {
  display: none !important;
}

/* ============================== Discover / TMDB cards ============================== */

.badges .type-badge {
  width: auto;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.movie-meta .score.tmdb i {
  color: #01b4e4;
}

.action-circle .t-add:hover .bubble,
.action-circle .t-add:hover .tooltip {
  background: #1b7f3b;
}

.action-circle .t-rate:hover .bubble,
.action-circle .t-rate:hover .tooltip {
  background: var(--rate);
}

.action-circle .t-watch:hover .bubble,
.action-circle .t-watch:hover .tooltip {
  background: var(--watch);
}

.action-circle .t-trailer:hover .bubble,
.action-circle .t-trailer:hover .tooltip {
  background: var(--yt);
}

.discover-search .btn {
  height: 44px;
}
/* ============================== My rating + TMDB rating ============================== */

.movie-meta .ratings {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.movie-meta .score {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.movie-meta .score.mine {
  color: var(--text);
  font-weight: 600;
}

.movie-meta .score.mine.unrated {
  color: var(--text-muted);
  font-weight: 400;
}

.movie-meta .year {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .movie-meta .ratings {
    gap: 6px;
  }

  .tmdb-tag {
    font-size: 8px;
    padding: 1px 3px;
    margin-right: 3px;
  }
}
/* ============================== IMDb / Rotten Tomatoes ============================== */

.imdb-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #f5c518;
  color: #000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .imdb-tag {
    font-size: 8px;
    padding: 1px 3px;
    margin-right: 3px;
  }
}
/* ============================== Live home page ============================== */

.hero-slide {
  pointer-events: none;
}

.hero-slide.active {
  pointer-events: auto;
}

.hero-slide::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25) 60%, transparent), linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent 60%);
}

.hero-kicker {
  margin-bottom: 8px;
}

.hero-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-score.mine i {
  color: var(--gold);
}

.hero-score small {
  font-weight: 400;
  color: #ccc;
}

.hero-overview {
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hero-buttons .btn:not(.btn-primary) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(4px);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

.movie-row > .movie-item.skeleton {
  aspect-ratio: 2 / 3.3;
  border: 0;
}

.hero-slide.skeleton {
  opacity: 1;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.home-mine {
  margin-top: 56px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mine-head .section-title {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .hero {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }

  .hero-caption {
    max-width: 92%;
  }

  .hero-caption p.hero-overview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
  }

  .hero-buttons .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}
/* keep the slideshow arrows clear of the text */
@media (min-width: 701px) {
  .hero-caption {
    left: 76px;
    bottom: 36px;
  }
}

@media (max-width: 700px) {
  .hero-dots {
    top: 14px;
    right: 16px;
    bottom: auto;
  }
}

/* ============================== Genre browsing ============================== */

.select:disabled {
  opacity: 0.5;
}
/* back button: only inside the installed app (no browser back button there) */
.nav-back {
  display: none;
}

.nav-back.show {
  display: grid;
}

/* ============================== EN | RU movie names ============================== */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  overflow: hidden;
}

.lang-toggle button {
  padding: 5px 10px;
  border: 0;
  background: none;
  color: var(--nav-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.lang-toggle button:hover {
  color: #fff;
}

.lang-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* the copy in the sidebar is only for phones / small screens */
.lang-toggle.in-menu {
  display: none;
}

@media (max-width: 1330px) {
  .lang-toggle.in-menu {
    display: flex;
    gap: 0;
    width: max-content;
    margin: 26px 12px 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .lang-toggle.in-menu span {
    margin-right: 12px;
    color: var(--nav-text);
    font-size: 14px;
    letter-spacing: 1px;
  }

  .lang-toggle.in-menu button {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
  }

  .lang-toggle.in-menu button:first-of-type {
    border-radius: 999px 0 0 999px;
  }

  .lang-toggle.in-menu button:last-of-type {
    border-left: 0;
    border-radius: 0 999px 999px 0;
  }
}

/* English name under the Russian one on title pages */
.t-alt-title {
  margin: -4px 0 10px;
  color: #aaa;
  font-size: 15px;
}

/* ============================== Navbar: glass + pill (Apple-style) ============================== */

/* frosted glass: the page blurs softly behind the bar as you scroll.
   The glass sits on a layer behind the bar (::before), not on the bar itself: a
   backdrop-filter on the bar would trap the phone side menu and the profile menu
   inside it (squashed to the bar's height, and unable to blur the page themselves). */
.site-nav {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 14, 16, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  pointer-events: none;
}

.nav-bar {
  height: 76px;
}

/* round icon buttons on the right */
.nav-tools {
  gap: 10px;
}

.nav-tools .icon-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  transition: background 0.25s, transform 0.25s, color 0.25s;
}

.nav-tools .icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transform: scale(1.06);
}

/* the search button is the accent circle */
.nav-tools .search-toggle {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.nav-tools .search-toggle:hover {
  background: var(--accent-hover);
}

.user-pic-btn {
  margin-left: 0;
}

.user-pic {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.25s, transform 0.25s;
}

.user-pic-btn:hover .user-pic {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.04);
}

.search-panel,
.profile-menu {
  top: calc(100% + 16px);
  background: rgba(24, 24, 28, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* the links live in one rounded capsule, with a pill that slides to the page you hover */
@media (min-width: 1331px) {
  .nav-links {
    position: relative;
    gap: 2px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .nav-links li {
    position: relative;
    z-index: 1;
  }

  .nav-links a {
    padding: 9px 15px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: color 0.25s;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #fff;
  }

  .nav-links .nav-indicator {
    position: absolute;
    z-index: 0;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: #0a0a0b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: left 0.35s cubic-bezier(0.32, 0.72, 0, 1), width 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s;
  }

  .nav-links .nav-indicator.show {
    opacity: 1;
  }
}

/* phones / small screens: same glass look, round menu button */
@media (max-width: 1330px) {
  .nav-bar {
    height: 64px;
  }

  .nav-toggle {
    flex: 0 0 42px; /* stay a circle */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
  }

  .nav-links .nav-indicator {
    display: none;
  }

  .nav-tools .icon-btn,
  .user-pic {
    width: 40px;
    height: 40px;
  }

  /* side menu: frosted glass like the navbar, a little darker so the links stay readable */
  .nav-menu {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: rgba(14, 14, 16, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a {
    letter-spacing: 0.5px;
  }

  .nav-links a.active {
    background: rgba(255, 255, 255, 0.08);
  }
}
@media (max-width: 480px) {
  .nav-bar {
    gap: 8px;
  }

  .nav-logo img {
    height: 15px;
  }

  .nav-tools {
    gap: 6px;
  }

  .nav-tools .icon-btn,
  .user-pic {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .nav-toggle {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }
}

/* round buttons stay round: never squeeze them */
.nav-tools > *,
.nav-tools .icon-btn,
.user-pic-btn {
  flex-shrink: 0;
}

/* EN | RU inside the profile menu (computers); phones use the side menu */
.lang-toggle.in-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 2px 0 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: #fff;
  font-size: 14px;
}

.lang-toggle.in-profile > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5e5e5;
  color: #17181c;
}

.lang-toggle.in-profile > span {
  flex: 1;
}

.lang-toggle.in-profile button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.lang-toggle.in-profile button:first-of-type {
  border-radius: 999px 0 0 999px;
}

.lang-toggle.in-profile button:last-of-type {
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.lang-toggle.in-profile button.active {
  border-color: var(--accent);
  color: #fff;
}

@media (max-width: 1330px) {
  .lang-toggle.in-profile {
    display: none;
  }
}
/* ============================== Glass controls (search + filters, same feel as the navbar) ============================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-pill: #0a0a0b;
  --glass-text: #fff;
  --glass-muted: rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] {
  --glass-bg: rgba(0, 0, 0, 0.045);
  --glass-bg-hover: rgba(0, 0, 0, 0.08);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-pill: #ffffff;
  --glass-text: #17181c;
  --glass-muted: rgba(0, 0, 0, 0.5);
}

/* one big rounded search pill */
.glass-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  margin-bottom: 14px;
  padding: 0 7px 0 22px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.glass-search:focus-within {
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
}

.glass-search .gs-icon {
  color: var(--glass-muted);
  font-size: 17px;
}

.glass-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  color: var(--glass-text);
  font-size: 16px;
}

.glass-search input::placeholder {
  color: var(--glass-muted);
}

.gs-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

/* Advanced search, inside the page's search bar (UI.advLink) */
.gs-adv {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}

.gs-adv:hover {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.12);
}

html[data-theme="light"] .gs-adv {
  background: rgba(0, 0, 0, 0.04);
}

@media (max-width: 700px) {
  .gs-adv {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .gs-adv span {
    display: none;
  }

  .ax-search:has(.gs-adv) .input {
    padding-right: 56px;
  }

  .ax-search .gs-adv {
    width: auto;
    aspect-ratio: 1;
  }
}

.gs-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.06);
}

/* pill-shaped dropdowns */
.glass-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--glass-text);
  transition: background 0.25s;
}

.glass-select:hover {
  background: var(--glass-bg-hover);
}

.glass-select > i {
  position: absolute;
  left: 16px;
  color: var(--glass-muted);
  font-size: 14px;
  pointer-events: none;
}

.glass-select::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--glass-muted);
  border-bottom: 2px solid var(--glass-muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.glass-select select {
  height: 100%;
  width: 100%;
  padding: 0 40px 0 18px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: transparent;
  color: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.glass-select > i + select {
  padding-left: 40px;
}

.glass-select select:disabled {
  cursor: default;
  opacity: 0.45;
}

.glass-select select option {
  background: #1c1c20;
  color: #fff;
}

:root[data-theme="light"] .glass-select select option {
  background: #fff;
  color: #17181c;
}

.glass-select.small {
  height: 40px;
  flex-shrink: 0;
  border-color: transparent;
}

.glass-select.small select {
  font-size: 14px;
}

.glass-select.grow {
  flex: 1 1 220px;
}

/* filter row: label, segmented type switch, genre, sort */
.glass-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 18px;
}

.gf-label {
  margin-right: 2px;
  color: var(--glass-muted);
  font-size: 14px;
  font-weight: 500;
}

/* Movies | TV shows | Anime: a capsule with a sliding pill */
.segmented {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
}

.segmented button {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--glass-muted);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s;
}

.segmented button:hover,
.segmented button.active {
  color: var(--glass-text);
}

.seg-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 999px;
  background: var(--glass-pill);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: left 0.35s cubic-bezier(0.32, 0.72, 0, 1), width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* category chips get the same glass look */
.chip {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-muted);
  font-weight: 500;
  transition: background 0.25s, color 0.25s;
}

.chip:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg-hover);
  color: var(--glass-text);
}

.chip.active {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

@media (max-width: 700px) {
  .glass-search {
    height: 52px;
    padding-left: 16px;
  }

  .glass-search {
    gap: 4px;
    padding-right: 5px;
  }

  .glass-search .glass-select.small select {
    padding: 0 28px 0 10px;
    font-size: 13px;
  }

  .glass-search .glass-select.small::after {
    right: 12px;
  }

  .glass-filters .gf-label {
    width: 100%;
  }

  .glass-filters .segmented {
    width: 100%;
  }

  .glass-filters .segmented button {
    flex: 1;
  }

  .glass-filters .glass-select {
    flex: 1 1 100%;
  }
}
/* the page's own search button is on screen: the navbar one goes neutral (like the moon button) */
.site-nav.page-search-visible .search-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.site-nav.page-search-visible .search-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ============================== Glass filters on list pages + tier list ============================== */

/* "1900 – 2026" in one capsule */
.glass-years {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--glass-muted);
  transition: background 0.25s;
}

.glass-years:hover,
.glass-years:focus-within {
  background: var(--glass-bg-hover);
}

.glass-years i {
  margin-right: 4px;
  font-size: 14px;
}

.glass-years input {
  width: 54px;
  border: 0;
  outline: none;
  background: none;
  color: var(--glass-text);
  font-size: 14.5px;
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
}

.glass-years input::-webkit-outer-spin-button,
.glass-years input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.glass-years input::placeholder {
  color: var(--glass-muted);
}

/* round glass button (reset) */
.glass-round {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--glass-text);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.glass-round:hover {
  background: var(--glass-bg-hover);
  transform: rotate(-90deg);
}

/* glass pill button with text (Clear tiers) */

/* ---------- folding search / filters (title + two icons) ---------- */

.page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 20px;
}

.page-head > :first-child {
  margin: 0;
}

.page-tools {
  display: flex;
  gap: 10px;
  margin-left: 8px;
}

.tool-btn {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--glass-text);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}

.tool-btn:hover {
  background: var(--glass-bg-hover);
}

.tool-btn:active {
  transform: scale(0.92);
}

/* open: light pill (red stays reserved for the actual search button) */
.tool-btn.on {
  border-color: transparent;
  background: var(--glass-text);
  color: var(--bg);
}

/* the panel is closed but still filtering the list */
.tool-btn.dot::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent-hover);
}

.tool-btn.on.dot::after {
  display: none;
}

.fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s;
}

.fold {
  grid-template-columns: minmax(0, 1fr); /* never wider than the page (search bars stay on screen) */
}

.fold > div {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.35s;
}

.fold.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.fold.open > div {
  visibility: visible;
  transition: none;
  /* let focus glows and dropdown shadows show once it has opened */
  animation: fold-unclip 0s 0.35s forwards;
}

@keyframes fold-unclip {
  to {
    overflow: visible;
  }
}

/* keep focus rings from being clipped while it slides open */
.fold > div > :first-child {
  margin-top: 2px;
}

@media (max-width: 700px) {
  .tool-btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

@media (max-width: 700px) {
  .list-filters .glass-select {
    flex: 1 1 calc(50% - 6px);
  }

  .list-filters .glass-select.grow {
    flex-basis: 100%;
  }

  .list-filters .glass-years {
    flex: 1 1 auto;
    justify-content: center;
  }

  .glass-years input {
    width: 48px;
  }
}
/* ============================== Installed app on a phone: bottom tab bar ============================== */

/* only exist in the installed app (layout.js), shown only at phone / small tablet width */
.tab-bar,
.app-sheet {
  display: none;
}

@media (max-width: 900px) {
  /* top: the logo on the left and your profile picture on the right; search and the
     page links live in the tab bar */
  html.app-ui .nav-bar > :not(.nav-logo):not(.nav-tools),
  html.app-ui .nav-tools > :not(.profile):not(.nav-pick):not(.notif) {
    display: none;
  }

  html.app-ui .nav-tools {
    margin-left: auto;
  }

  /* "What should I watch?" stays next to your picture */
  html.app-ui .nav-tools .nav-pick {
    width: 36px;
    height: 36px;
  }

  /* EN / RU is in the profile menu here (there's no side menu in the app) */
  html.app-ui .lang-toggle.in-profile {
    display: flex;
  }

  /* the page's own search / filter icons go to the other end of the title row */
  html.app-ui .page-tools {
    margin-left: auto;
  }

  html.app-ui .site-nav {
    padding-top: env(safe-area-inset-top); /* clear of the iPhone status bar / notch */
  }

  html.app-ui .nav-bar {
    height: 56px;
    justify-content: flex-start;
  }

  html.app-ui .nav-bar > .nav-logo img {
    height: 19px;
  }

  /* gap under the tab bar: on iPhones with a home bar it sits just above that bar
     (34px safe area - 12px = 22px from the edge), elsewhere 10px */
  html.app-ui {
    --tab-gap: max(10px, calc(env(safe-area-inset-bottom) - 12px));
  }

  html.app-ui body {
    padding-bottom: calc(74px + var(--tab-gap));
  }

  html.app-ui .toast {
    bottom: calc(70px + var(--tab-gap));
  }

  /* floating frosted-glass pill, icon above the label; the current tab sits in its own
     lighter pill (like Netflix) */
  html.app-ui .tab-bar {
    display: flex;
    gap: 4px;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: var(--tab-gap);
    z-index: 150;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(30, 30, 34, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }

  .tab-bar .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, 0.45);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, transform 0.15s;
  }

  .tab-bar .tab i {
    font-size: 18px;
  }

  .tab-bar .tab:active {
    transform: scale(0.92);
  }

  .tab-bar .tab.on,
  .tab-bar .tab.open {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
  }

  /* Library panel: slides up from the bottom */
  html.app-ui .app-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 140;
    pointer-events: none;
  }

  .app-sheet.open {
    pointer-events: auto;
  }

  .sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .app-sheet.open .sheet-backdrop {
    opacity: 1;
  }

  .sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    padding: 10px 18px calc(92px + var(--tab-gap));
    border-radius: 24px 24px 0 0;
    background: rgba(20, 20, 24, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .app-sheet.open .sheet-panel {
    transform: none;
  }

  .sheet-grip {
    width: 40px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
  }

  .sheet-title {
    margin: 0 0 12px;
    font-size: 20px;
  }

  .sheet-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
  }

  .sheet-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 16px; /* 16px+ stops iPhone from zooming in */
  }

  /* "Search everything for …" (opens Discover) */
  .sheet-more {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
  }

  .sheet-more[hidden] {
    display: none;
  }

  .sheet-more span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sheet-more .fa-chevron-right {
    font-size: 12px;
    opacity: 0.6;
  }

  .sheet-results {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .sheet-results:empty {
    display: none;
  }

  .sheet-results a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    color: #fff;
    text-decoration: none;
  }

  .sheet-results img {
    width: 40px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
  }

  .sheet-results span {
    display: flex;
    flex-direction: column;
    font-size: 15px;
  }

  .sheet-results small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
  }

  .sheet-results .search-empty {
    padding: 12px 4px;
    color: rgba(255, 255, 255, 0.55);
  }

  .sheet-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .sheet-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
  }

  .sheet-links a.wide {
    grid-column: 1 / -1;
  }

  .sheet-links a.on {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
  }

  .sheet-links a i {
    width: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
  }

  .sheet-links a span {
    flex: 1;
  }

  .sheet-links a small {
    color: rgba(255, 255, 255, 0.5);
  }
}

@media (max-width: 900px) {
  /* while the Library panel is open, only its tab is highlighted */
  .tab-bar:has(.tab.open) .tab.on:not(.open) {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    background: none;
  }
}

/* iPhone zooms the whole page in when you tap a field with text under 16px (and the page
   then looks too wide). On touch screens every field uses at least 16px. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

.segmented button {
  white-space: nowrap;
}

/* ============================== Home slideshow: glass redesign ============================== */

.hero-slide::after {
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.55) 35%, transparent 70%),
    linear-gradient(to right, rgba(8, 8, 10, 0.75) 0%, rgba(8, 8, 10, 0.25) 45%, transparent 70%);
}

.hero-caption {
  max-width: min(600px, 80%);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* "#1 Trending": a glass pill like the navbar's, with a red flame */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.hero-kicker i {
  color: #ff4d3a;
}

.hero-owned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(92, 204, 120, 0.35);
  border-radius: 999px;
  background: rgba(92, 204, 120, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #8fe3a4;
  font-size: 12.5px;
  font-weight: 600;
}

.hero-caption h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* rating · year · type · genres, like the title page */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  font-weight: 500;
}

.hero-meta .dot {
  opacity: 0.45;
}

.hero-score {
  font-weight: 600;
  color: #fff;
}

.hero-caption p.hero-overview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.6;
}

.hero-buttons {
  gap: 12px;
}

/* white main button, glass second button, round glass Watchlist button */
.hero-play,
.hero-glass {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.hero-play {
  border: 0;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hero-play:hover {
  transform: translateY(-1px) scale(1.02);
  background: #f1f1f1;
}

.hero-glass {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: #fff;
}

.hero-glass:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hero-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.hero-round:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.06);
}

.hero-round.on {
  border-color: transparent;
  background: var(--accent);
}

/* arrows: round glass buttons; dots: pills, the current one longer */
.hero-arrow {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  font-size: 16px;
  transition: background 0.2s, transform 0.2s;
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%) scale(1.06);
}

.hero-dots {
  gap: 6px;
  align-items: center;
}

.hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.35s;
}

.hero-dots button.active {
  width: 28px;
  background: #fff;
}

@media (max-width: 700px) {
  .hero-caption {
    left: 18px;
    right: 18px;
    bottom: 20px;
    max-width: none;
  }

  .hero-tags {
    margin-bottom: 10px;
  }

  .hero-caption h2 {
    margin-bottom: 8px;
    font-size: 28px;
  }

  .hero-meta {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .hero-caption p.hero-overview {
    -webkit-line-clamp: 2;
    margin-bottom: 14px;
    font-size: 13.5px;
  }

  .hero-buttons {
    gap: 8px;
  }

  .hero-play,
  .hero-glass {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  .hero-round {
    width: 44px;
    height: 44px;
  }

  .hero-arrow {
    display: none; /* phones swipe instead */
  }
}

.hero-meta {
  margin-bottom: 6px;
}

.hero-genres {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

@media (max-width: 700px) {
  .hero-genres {
    margin-bottom: 8px;
    font-size: 13px;
  }
}

/* tablets / small laptops: a taller slideshow so the text always fits */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero {
    aspect-ratio: 16 / 9;
  }

  .hero-caption p.hero-overview {
    -webkit-line-clamp: 2;
  }
}

/* ============================== TMDB label: glass pill with a glowing red dot ============================== */

.tmdb-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 5px;
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-hover);
  color: var(--glass-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.5;
  vertical-align: 1px;
}

.tmdb-tag::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a70, #e0271a);
  box-shadow: 0 0 6px rgba(255, 70, 45, 0.85);
}

/* on top of pictures (slideshow, title page) it's always light-on-dark glass */
.hero .tmdb-tag,
.t-meta .tmdb-tag {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}

.t-score .tmdb-tag {
  padding: 2px 8px 2px 6px;
  font-size: 11px;
}

.hero-score .tmdb-tag {
  padding: 2px 8px 2px 6px;
  font-size: 10.5px;
}

@media (max-width: 480px) {
  .movie-item .tmdb-tag {
    gap: 3px;
    margin-right: 3px;
    padding: 0 5px 0 4px;
    font-size: 8px;
  }

  .movie-item .tmdb-tag::before {
    width: 4px;
    height: 4px;
  }
}

/* taller slideshow */
.hero {
  aspect-ratio: 2 / 1;
  max-height: min(760px, 78vh);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 700px) {
  .hero {
    aspect-ratio: 3 / 4;
    max-height: 76vh;
  }
}

/* ============================== Hover preview (Netflix style, computers only) ============================== */

.hover-preview {
  position: fixed;
  z-index: 95; /* above the cards, below the navbar */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(22, 22, 26, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.hover-preview.show {
  opacity: 1;
  transform: none;
}

.hp-video {
  position: relative;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.hp-backdrop,
.hp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* the video fades in over the picture once it's actually playing; slightly zoomed so
   YouTube's black edges and corner labels stay out of view */
.hp-frame {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hover-preview.playing .hp-frame {
  opacity: 1;
}

.hp-video::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(22, 22, 26, 0.95), transparent);
  pointer-events: none;
}

.hp-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.hp-sound:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hp-info {
  padding: 4px 18px 18px;
}

.hp-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.hp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
}

.hp-meta .dot {
  opacity: 0.45;
}

.hp-mine i {
  color: var(--gold);
}

.hp-cert {
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: 11px;
}

.hover-preview .tmdb-tag {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.hp-genres {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}

.hp-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.hp-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.hp-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.07);
}

/* already on: a soft tint of the button's own colour (like the card buttons), not a solid fill */
.hp-btn.on[data-action="fav"] {
  border-color: rgba(229, 9, 20, 0.45);
  background: rgba(229, 9, 20, 0.16);
  color: #ff4d57;
}

.hp-btn.on[data-action="rate"] {
  border-color: rgba(245, 197, 24, 0.45);
  background: rgba(245, 197, 24, 0.14);
  color: var(--gold);
}

.hp-btn.on[data-action="watch"] {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
}

/* hover: each icon lights up in its own colour */
.hp-btn[data-action$="fav"]:hover {
  color: #ff4d57;
}

.hp-btn[data-action$="rate"]:hover {
  color: var(--gold);
}

.hp-btn[data-action="t-add"]:hover {
  color: #3fb950;
}

.hp-play {
  border-color: transparent;
  background: #fff;
  color: #111;
}

.hp-play:hover {
  background: #e8e8e8;
}

.hp-more {
  margin-left: auto;
}

/* hover preview: as tall as the poster card; the video takes the space above the text */
.hover-preview {
  display: flex;
  flex-direction: column;
}

.hp-video {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.hp-info {
  flex-shrink: 0;
}

.hp-frame {
  inset: auto;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
}

/* built early (while the trailer loads) but not shown yet: invisible and click-through */
.hover-preview:not(.show) {
  pointer-events: none;
}

/* phone app tab bar: a touch darker */
@media (max-width: 900px) {
  html.app-ui .tab-bar {
    background: rgba(24, 24, 28, 0.8);
  }
}

/* an open panel (Library / Search) takes taps; a closed one lets them through */
html.app-ui .app-sheet.open {
  pointer-events: auto;
}

@media (max-width: 900px) {
  /* Tier List tray: sit above the tab bar, not behind it */
  html.app-ui .tl-tray {
    bottom: calc(70px + var(--tab-gap));
  }

  /* when the page scrolls to something (e.g. a focused field), keep it clear of the tab bar */
  html.app-ui {
    scroll-padding-bottom: calc(78px + var(--tab-gap));
  }
}

/* phones: the tab bar slides down out of sight while you scroll down, and back up when you
   scroll up; what sits above it (the tier list tray, a message) follows it down and up */
/* (coming back) */
html.app-ui .tab-bar {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
}

/* (going away: a slow, soft glide down; the fade starts late, so you see it slide) */
html.app-ui.tabs-away .tab-bar {
  opacity: 0;
  transform: translateY(calc(100% + var(--tab-gap) + 16px));
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.35s ease-in 0.25s;
}

html.app-ui .tl-tray {
  transition: bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

html.app-ui.tabs-away .tl-tray {
  transition: bottom 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

html.app-ui .toast {
  transition: opacity 0.25s, transform 0.25s, bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

html.app-ui.tabs-away .toast {
  transition: opacity 0.25s, transform 0.25s, bottom 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

@media (max-width: 900px) {
  html.app-ui.tabs-away .tl-tray {
    bottom: var(--tab-gap);
  }

  html.app-ui.tabs-away .toast {
    bottom: calc(16px + var(--tab-gap));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.app-ui .tab-bar,
  html.app-ui.tabs-away .tab-bar,
  html.app-ui .tl-tray,
  html.app-ui.tabs-away .tl-tray {
    transition: opacity 0.2s;
  }
}

/* ============================== Title page: glass redesign (matches the home slideshow) ============================== */

.t-backdrop img {
  opacity: 0.62;
}

.t-backdrop::after {
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.96) 20%, rgba(11, 11, 12, 0.55) 55%, rgba(11, 11, 12, 0.25)),
    linear-gradient(to top, #0b0b0c 0%, rgba(11, 11, 12, 0.6) 22%, transparent 55%);
}

/* phones: the same look, the shade a little lighter so the picture shows a bit more */
@media (max-width: 700px) {
  .t-backdrop img {
    opacity: 0.7;
  }

  .t-backdrop::after {
    background: linear-gradient(90deg, rgba(11, 11, 12, 0.86) 20%, rgba(11, 11, 12, 0.45) 55%, rgba(11, 11, 12, 0.18)),
      linear-gradient(to top, #0b0b0c 0%, rgba(11, 11, 12, 0.55) 22%, transparent 55%);
  }
}

.t-head h1 {
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.t-head h1 .year {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

/* the copy button by the title: a small glass circle, red on hover, a tick once copied */
.t-copy {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  line-height: 1;
  text-shadow: none;
  vertical-align: baseline;
  cursor: pointer;
  transform: translateY(-0.14em);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.t-copy:hover,
.t-copy:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.t-copy:active {
  transform: translateY(-0.14em) scale(0.92);
}

.t-copy.done {
  border-color: #2fbf71;
  background: #2fbf71;
  color: #fff;
}

.t-copy .tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.t-copy:hover .tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: none) {
  .t-copy .tooltip {
    display: none;
  }
}

.t-meta {
  gap: 6px 10px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.t-meta .dot {
  color: rgba(255, 255, 255, 0.4);
}

.t-genres {
  color: rgba(255, 255, 255, 0.7);
}

.t-cert {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.t-provider-list img {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* buttons: white Trailer, glass pills for the rest */
.btn.t-trailer {
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #111;
  font-size: 15.5px;
  transition: transform 0.2s, background 0.2s;
}

.btn.t-trailer:hover {
  filter: none;
  background: #f1f1f1;
  transform: translateY(-1px) scale(1.02);
}

.t-actions .btn {
  height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.t-actions .btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.t-actions .btn.is-on {
  border-color: transparent;
  background: var(--accent);
}

.t-actions .btn.is-on:hover {
  background: var(--accent-hover);
}

.t-actions .btn.is-rated {
  border-color: rgba(245, 197, 24, 0.45);
  background: rgba(245, 197, 24, 0.12);
}

.t-overview {
  color: rgba(255, 255, 255, 0.8);
}

.t-director {
  color: rgba(255, 255, 255, 0.85);
}

.t-director span {
  color: rgba(255, 255, 255, 0.5);
}

/* computers: poster + text side by side, buttons in one row */
@media (min-width: 701px) {
  .t-hero-inner {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .t-poster {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  }

  .t-head h1 {
    margin-bottom: 14px;
    font-size: clamp(34px, 4.4vw, 58px);
  }

  .t-cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: none;
    margin-top: 26px;
  }

  .btn.t-trailer {
    width: auto;
  }

  .t-actions {
    display: flex;
    gap: 12px;
  }

  .t-about {
    max-width: 680px;
    margin-top: 22px;
  }
}

/* phones: same look, stacked */
@media (max-width: 700px) {
  .btn.t-trailer {
    width: 100%;
  }

}

/* sections below: glass cards, cleaner headings */
.t-section {
  margin-top: 40px;
}

.t-section-title {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 22px;
  font-weight: 800;
}

.t-person {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  transition: background 0.2s, transform 0.2s;
}

.t-person:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
}

.t-review {
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
}

/* long links / words in reviews wrap instead of stretching the page on phones */
.t-reviews {
  grid-template-columns: minmax(0, 1fr);
}

.t-review p,
.t-review header strong {
  overflow-wrap: anywhere;
}

.t-person {
  gap: 2px;
  padding: 8px 8px 14px;
}

.t-person img {
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 700px) {
  .t-cast {
    grid-auto-columns: calc((100% - 24px) / 3);
  }

  .t-person {
    padding: 6px 6px 12px;
  }

  .t-person img {
    margin-bottom: 8px;
    border-radius: 10px;
  }
}

/* cast photos a bit smaller */
.t-cast {
  grid-auto-columns: 130px;
}

@media (max-width: 700px) {
  .t-cast {
    grid-auto-columns: calc((100% - 36px) / 4);
  }

  .t-person strong {
    font-size: 12.5px;
  }

  .t-person span {
    font-size: 11px;
  }
}

/* cast cards: the whole card (photo + name) has the poster's 2:3 shape;
   the photo fills whatever the name / role leave */
.t-person {
  aspect-ratio: 2 / 3;
  justify-content: flex-start;
  overflow: hidden;
}

.t-person img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: auto;
  object-position: center 15%;
}

.t-person strong,
.t-person span {
  flex-shrink: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* one line each for name and role, so every photo is the same size */
.t-person strong,
.t-person span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .t-cast {
    grid-auto-columns: calc((100% - 24px) / 3);
  }
}

/* ============================== Thin, modern scrollbars ============================== */
/* poster rows, cast, media, tier pool, search results, pop-ups: a slim rounded bar with no
   arrow buttons, faint until you point at the row */

.movie-row,
.t-cast,
.t-media-row,
.tl-pool,
.search-results,
.modal,
.sheet-panel {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

/* Chrome / Edge / Brave / Safari */
@supports selector(::-webkit-scrollbar) {
  .movie-row,
  .t-cast,
  .t-media-row,
  .tl-pool,
  .search-results,
  .modal,
  .sheet-panel {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .movie-row::-webkit-scrollbar,
  .t-cast::-webkit-scrollbar,
  .t-media-row::-webkit-scrollbar,
  .tl-pool::-webkit-scrollbar,
  .search-results::-webkit-scrollbar,
  .modal::-webkit-scrollbar,
  .sheet-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .movie-row::-webkit-scrollbar-button,
  .t-cast::-webkit-scrollbar-button,
  .t-media-row::-webkit-scrollbar-button,
  .tl-pool::-webkit-scrollbar-button,
  .search-results::-webkit-scrollbar-button,
  .modal::-webkit-scrollbar-button,
  .sheet-panel::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  .movie-row::-webkit-scrollbar-track,
  .t-cast::-webkit-scrollbar-track,
  .t-media-row::-webkit-scrollbar-track,
  .tl-pool::-webkit-scrollbar-track,
  .search-results::-webkit-scrollbar-track,
  .modal::-webkit-scrollbar-track,
  .sheet-panel::-webkit-scrollbar-track {
    background: transparent;
  }

  /* boxes with rounded corners (pop-ups, sheets, the search list, Box Office's top 10): the
     bar runs only along the straight part of the side, so it never sticks out past a
     rounded corner (Chrome draws scrollbars square, right into the curve) */
  .modal::-webkit-scrollbar-track,
  .sheet-panel::-webkit-scrollbar-track,
  .search-results::-webkit-scrollbar-track {
    margin: 16px 0;
  }

  .movie-row::-webkit-scrollbar-thumb,
  .t-cast::-webkit-scrollbar-thumb,
  .t-media-row::-webkit-scrollbar-thumb,
  .tl-pool::-webkit-scrollbar-thumb,
  .search-results::-webkit-scrollbar-thumb,
  .modal::-webkit-scrollbar-thumb,
  .sheet-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.28);
    transition: background 0.2s;
  }

  .movie-row:hover::-webkit-scrollbar-thumb,
  .t-cast:hover::-webkit-scrollbar-thumb,
  .t-media-row:hover::-webkit-scrollbar-thumb,
  .tl-pool:hover::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.55);
  }

  .movie-row::-webkit-scrollbar-thumb:hover,
  .t-cast::-webkit-scrollbar-thumb:hover,
  .t-media-row::-webkit-scrollbar-thumb:hover,
  .tl-pool::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
  }
}

/* scrollbars stay exactly the same when you point at them (no brighter / red / bigger on hover) */
.movie-row:hover,
.t-cast:hover,
.t-media-row:hover,
.tl-pool:hover {
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

@supports selector(::-webkit-scrollbar) {
  .movie-row:hover,
  .t-cast:hover,
  .t-media-row:hover,
  .tl-pool:hover {
    scrollbar-color: auto;
  }

  .movie-row:hover::-webkit-scrollbar-thumb,
  .t-cast:hover::-webkit-scrollbar-thumb,
  .t-media-row:hover::-webkit-scrollbar-thumb,
  .tl-pool:hover::-webkit-scrollbar-thumb,
  .movie-row::-webkit-scrollbar-thumb:hover,
  .t-cast::-webkit-scrollbar-thumb:hover,
  .t-media-row::-webkit-scrollbar-thumb:hover,
  .tl-pool::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.28);
  }
}

/* ============================== Custom scrollbar under rows (computers) ============================== */

/* the rows' own bar is hidden; ours (js/components/scrollbars.js) goes underneath */
html.custom-scrollbars .movie-row,
html.custom-scrollbars .t-cast,
html.custom-scrollbars .t-media-row {
  scrollbar-width: none;
}

html.custom-scrollbars .movie-row::-webkit-scrollbar,
html.custom-scrollbars .t-cast::-webkit-scrollbar,
html.custom-scrollbars .t-media-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* no scrollbar under the rows (js/components/scrollbars.js): where there's more to the side the
   row fades out at that edge, and while it's pointed at a round arrow waits there, as on Home's
   collections */
.x-nav {
  position: relative;
  height: 0;
}

/* the scrollbar: still there under the row (it keeps its place) and still works, never seen */
.x-scrollbar {
  position: relative;
  height: 14px;
  margin: 2px 0 8px;
  padding: 4px 0;
  opacity: 0;
  touch-action: none;
}

.x-scrollbar[hidden] {
  display: none;
}

.x-thumb {
  height: 6px;
  border-radius: 999px;
  will-change: transform;
}

.xr-cast .x-scrollbar {
  margin: -2px 0 -6px;
}

/* (the row above a collection: its scrollbar stays on top of the band, which starts right under it) */
.row-section:has(+ .spot) .x-scrollbar,
.row-section:has(+ .spot) .x-nav {
  z-index: 2;
}

html.custom-scrollbars .x-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent);
}

html.custom-scrollbars .x-more-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70px);
  mask-image: linear-gradient(to right, transparent, #000 70px);
}

html.custom-scrollbars .x-more-left.x-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 90px), transparent);
}

.x-arrow {
  position: absolute;
  top: var(--x-y, -120px);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x-in, 10px), -50%) scale(0.88);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
}

.x-arrow.prev {
  --x-in: -10px; /* (slides in from its own side) */
  left: calc(var(--x-l, 0px) + 8px);
}

.x-arrow.next {
  right: calc(var(--x-r, 0px) + 8px);
}

.x-more-right + .x-nav.on .x-arrow.next,
.x-more-left + .x-nav.on .x-arrow.prev {
  opacity: 0.9;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.x-arrow:hover {
  opacity: 1 !important;
  border-color: transparent;
  background: var(--accent);
}

/* computers: no snapping to poster edges (it made scrolling jump); the rows glide instead */
html.custom-scrollbars .movie-row {
  scroll-snap-type: none;
}

/* dragging a row with the mouse */
html.custom-scrollbars .movie-row.grabbing,
html.custom-scrollbars .t-cast.grabbing,
html.custom-scrollbars .t-media-row.grabbing,
html.custom-scrollbars .grabbing * {
  cursor: grabbing !important;
  user-select: none;
}

html.custom-scrollbars .grabbing .movie-item {
  pointer-events: none; /* no hover effects / previews while dragging */
}

/* app Search panel: "Search in" drop-down under the search bar */
.sheet-type {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.sheet-type span {
  flex-shrink: 0;
}

.sheet-type select {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-right: 22px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-weight: 600;
  text-align: right;
  text-align-last: right;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.sheet-type select option {
  background: #1c1c20;
  color: #fff;
}

.sheet-type-arrow {
  position: absolute;
  right: 16px;
  font-size: 12px;
  pointer-events: none;
}

/* where-to-watch logos: clickable, lift a little on hover */
.t-provider-list a {
  display: block;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.t-provider-list a:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* app Search panel: the results scroll with the panel (no second scrollbar inside) */
.sheet-results {
  max-height: none;
  overflow: visible;
}

/* rating stars in half steps: a grey star with a gold one on top, cut to half or shown whole */
.star {
  position: relative;
  color: #555;
}

.star .star-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: gold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.star.selected,
.star.hover {
  color: #555; /* the old whole-star colouring is replaced by the gold layer */
}

.star.selected-full .star-fill,
.star.selected-half .star-fill,
.star.hover-full .star-fill,
.star.hover-half .star-fill {
  opacity: 1;
}

.star.selected-half .star-fill,
.star.hover-half .star-fill {
  clip-path: inset(0 50% 0 0);
}

/* while pointing (a mouse), the hover picture wins over the saved rating. Not on touch
   screens: there ":hover" sticks after a tap and your stars would stay hidden */
@media (hover: hover) {
  .stars:hover .star.selected-full:not(.hover-full):not(.hover-half) .star-fill,
  .stars:hover .star.selected-half:not(.hover-full):not(.hover-half) .star-fill {
    opacity: 0;
  }

  .stars:hover .star.hover-full .star-fill {
    clip-path: none;
  }
}

/* a finger slides along the stars without scrolling the page */
.stars {
  touch-action: none;
}

.star.hover-full,
.star.hover-half,
.star.selected-full,
.star.selected-half {
  transform: scale(1.1);
}

.half-hint {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* rating stars stay on one line on narrow phones */
@media (max-width: 480px) {
  .stars {
    flex-wrap: nowrap;
  }

  .star {
    padding: 0 2px;
    font-size: 22px;
  }
}

/* app Search panel: "In your library" / "More from TMDB" groups */
.sheet-group {
  margin: 18px 4px 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sheet-group[hidden] {
  display: none;
}

.sheet-note {
  margin: 16px 4px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* ============================== Cast cards open the person page ============================== */

a.t-person {
  color: inherit;
  text-decoration: none;
}

/* ============================== Person page (actors / crew) ============================== */

/* the top part is always dark, like the title page */
.p-hero {
  position: relative;
  background: #0b0b0c;
  color: #fff;
  overflow: hidden;
}

.p-backdrop {
  position: absolute;
  inset: 0;
}

.p-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.4;
}

.p-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 12, 0.35), rgba(11, 11, 12, 0.75) 45%, #0b0b0c 92%);
}

.p-grid {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 40px;
}

.p-side,
.p-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-content: start;
  min-width: 0;
}

.p-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(24, 24, 28, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

/* photo card */
.p-id {
  padding: 0;
  overflow: hidden;
  text-align: center;
}

.p-badge {
  padding: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}

.p-badge i {
  margin-right: 4px;
  color: #f5c518;
}

.p-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center 20%;
  background: #1f2025;
}

.p-id-body {
  padding: 18px 22px 22px;
}

.p-id h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.p-sub {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.p-sub .dot,
.p-counts .dot {
  margin: 0 8px;
  opacity: 0.6;
}

.p-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.p-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
}

.p-main-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #111;
}

.p-round {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.p-round:hover {
  background: rgba(255, 255, 255, 0.2);
}

.p-imdb {
  padding: 2px 4px;
  border-radius: 3px;
  background: #f5c518;
  color: #000;
  font-size: 10px;
  font-weight: 800;
}

.p-lib {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-lib-line {
  color: #ff6b61;
  font-weight: 600;
}

.p-lib small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.p-lib small i {
  color: #f5c518;
}

/* top genres */
.p-genres h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-chips a {
  padding: 6px 12px;
  border: 1px solid rgba(255, 90, 79, 0.25);
  border-radius: 999px;
  background: rgba(144, 13, 9, 0.25);
  color: #ffb3ad;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s;
}

.p-chips a:hover {
  background: rgba(144, 13, 9, 0.45);
}

/* overview card */
.p-counts {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

.p-media {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.p-media::-webkit-scrollbar {
  display: none;
}

.p-media > a {
  position: relative;
  flex: 0 0 auto;
  height: 230px;
  overflow: hidden;
  border-radius: 16px;
  background: #1f2025;
}

.p-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.p-media > a:hover img {
  transform: scale(1.04);
}

.p-feature {
  width: 400px;
  color: #fff;
  text-decoration: none;
}

.p-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 60%);
}

.p-feature-text {
  position: absolute;
  left: 18px;
  right: 70px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.p-feature-text small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.p-feature-text strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.p-feature-text em {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-style: normal;
}

.p-feature-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.p-shot {
  width: 154px;
}

.p-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin: 24px 0;
}

.p-stats strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

.p-stats span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.p-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 8px 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-bio {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.65;
}

.p-bio p {
  margin: 0 0 12px;
}

.p-bio.folded {
  max-height: 10em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.p-bio-more {
  grid-column: 1;
  justify-self: start;
}

.p-facts {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 18px 20px;
  margin: 0;
}

.p-facts div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 3px;
}

.p-facts .wide {
  grid-column: 1 / -1;
}

.p-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.p-facts dt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* best known for */

/* filmography (normal page colours, follows light / dark) */
.p-filmography {
  scroll-margin-top: 90px; /* clear of the sticky navbar */
}

.p-film-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.p-film-head .t-section-title {
  margin: 0;
}

.p-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-credits {
  display: grid;
  gap: 4px;
}

.p-credit {
  display: grid;
  grid-template-columns: 56px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}

.p-credit:hover {
  background: var(--glass-bg-hover);
}

.p-year {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800;
}

.p-credit img {
  width: 46px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
}

.p-credit-text strong,
.p-credit-text small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-credit-text strong {
  font-size: 15px;
}

.p-credit-text strong i {
  margin-left: 4px;
  color: #3fb950;
  font-size: 12px;
}

.p-credit-text small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
}

.p-score {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.p-score.mine {
  color: #f5c518;
}

.p-other {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .p-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 20px;
  }

  /* photo on the left, details on the right */
  .p-id {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    text-align: left;
  }

  .p-badge {
    grid-column: 1 / -1;
    text-align: left;
    padding: 12px 18px;
  }

  .p-photo {
    height: 100%;
    aspect-ratio: 2 / 3;
  }

  .p-id-body {
    padding: 16px 18px;
  }

  .p-buttons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .p-card {
    padding: 16px;
    border-radius: 18px;
  }

  .p-id {
    padding: 0;
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .p-id h1 {
    font-size: 22px;
  }

  .p-main-btn {
    padding: 9px 14px;
    font-size: 14px;
  }

  .p-round {
    width: 38px;
    height: 38px;
  }

  .p-media > a {
    height: 180px;
  }

  .p-feature {
    width: min(78vw, 320px);
  }

  .p-shot {
    width: 120px;
  }

  .p-stats {
    gap: 12px 26px;
  }

  .p-stats strong {
    font-size: 19px;
  }

  .p-about {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-facts {
    grid-column: 1;
    grid-row: auto;
    margin-top: 12px;
  }

  .p-credit {
    grid-template-columns: 40px 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 6px;
  }

  .p-credit img {
    width: 40px;
  }

  .p-year {
    font-size: 13px;
  }
}
/* director / creator names open their person page */
.t-director-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.t-director-link:hover {
  color: #fff;
  text-decoration-color: var(--accent-hover);
}
/* person page: role dropdown + type chips + "In my library" */
.p-filters {
  align-items: center;
}

.p-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-role {
  min-width: 190px;
  border-color: var(--glass-border);
}

.p-lib-chip i {
  margin-right: 4px;
}

/* "9 titles in your library" opens the filmography showing only those */
button.p-lib-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

button.p-lib-line:hover {
  background: rgba(144, 13, 9, 0.25);
  border-color: rgba(255, 90, 79, 0.3);
}

.p-lib-arrow {
  font-size: 11px;
  transition: transform 0.2s;
}

button.p-lib-line:hover .p-lib-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  button.p-lib-line {
    margin: 0 0 0 -12px; /* text lines up with the name; the hover pill sticks out a little */
  }
}

@media (max-width: 700px) {
  .p-filters {
    width: 100%;
  }

  .p-role {
    width: 100%;
  }
}
/* Discover: "Coming soon · Dec 15" on titles that aren't out yet */
.soon-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.soon-label i {
  color: #ffb3ad;
}

@media (max-width: 700px) {
  .soon-label {
    left: 6px;
    bottom: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
  }
}
/* NEW label: frosted-glass pill with a red dot (same family as the TMDB tag and "Coming soon") */
.new-label {
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.new-label::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff1a24;
  box-shadow: 0 0 0 2px rgba(255, 26, 36, 0.25), 0 0 10px rgba(229, 9, 20, 0.95);
}

/* "Coming soon" sits in the top-right corner too (a title is never both new and coming soon) */
.soon-label {
  top: 8px;
  right: 8px;
  left: auto;
  bottom: auto;
  max-width: calc(100% - 60px); /* clear of the "Film" tag on the left */
}

@media (max-width: 700px) {
  .new-label {
    top: 6px;
    right: 6px;
    padding: 3px 8px 3px 7px;
    font-size: 10px;
  }

  .soon-label {
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
  }
}
/* ============================== Cards: glass lower part (title, ratings, buttons) ============================== */
/* (the mouse spotlight, .movie-item::before, stays as it is) */

.movie-item {
  border-color: var(--glass-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)), var(--card);
}

.poster-link {
  border-radius: 16px 16px 0 0;
}

.movie-title {
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.movie-title a {
  color: var(--text);
  transition: color 0.2s;
}

.movie-title a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--accent-hover);
  text-underline-offset: 3px;
}

.movie-meta {
  margin-top: 0;
  font-size: 13px;
}

.movie-meta .year {
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--glass-muted);
  font-size: 12px;
  font-weight: 600;
}

/* buttons: a row of frosted-glass circles under a hairline */
.action-circle {
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid var(--glass-border);
}

.action-circle .icon {
  color: var(--glass-text);
}

.action-circle .icon .bubble {
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: none;
  font-size: 15px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.25s;
}

.action-circle .icon:hover .bubble,
.action-circle .icon:focus-visible .bubble {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--glass-bg-hover);
  transform: translateY(-3px);
}

/* each button lights up in its own colour on hover */
.action-circle .fav:hover i,
.action-circle .fav.on:hover i {
  color: #ff4d57;
}

.action-circle .rate:hover i,
.action-circle .t-rate:hover i {
  color: var(--gold);
}

.action-circle .t-add:hover i {
  color: #3fb950;
}

.action-circle .trailer:hover i,
.action-circle .t-trailer:hover i {
  color: #ff3b3b;
}

/* already on: a soft tint of that colour */
.action-circle .fav.on .bubble {
  border-color: rgba(229, 9, 20, 0.35);
  background: rgba(229, 9, 20, 0.14);
}

.action-circle .rate.on .bubble {
  border-color: rgba(245, 197, 24, 0.35);
  background: rgba(245, 197, 24, 0.12);
}

.action-circle .watch.on .bubble {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
}

/* tooltip: dark glass pill instead of a coloured one */
.action-circle .tooltip,
.action-circle .icon:hover .tooltip,
.action-circle .icon:focus-visible .tooltip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 22, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.action-circle .tooltip::before {
  display: none;
}

.action-circle .icon:hover .tooltip,
.action-circle .icon:focus-visible .tooltip {
  top: -44px;
}

/* light theme */
:root[data-theme="light"] .movie-item {
  background: #fff;
}

:root[data-theme="light"] .movie-title a:hover {
  color: var(--text);
}

:root[data-theme="light"] .action-circle .icon:hover .bubble {
  border-color: rgba(0, 0, 0, 0.15);
}

@media (max-width: 700px) {
  .movie-item {
    border-radius: 14px;
  }

  .poster-link {
    border-radius: 14px 14px 0 0;
  }

  .movie-info {
    gap: 5px;
    padding: 9px 9px 10px;
  }

  .movie-title {
    font-size: 13.5px;
  }

  .movie-meta .year {
    padding: 1px 6px;
    font-size: 10.5px;
  }

  .action-circle {
    gap: 2px;
    margin-top: 4px;
    padding-top: 8px;
  }

  .action-circle .icon .bubble {
    width: 31px;
    height: 31px;
    font-size: 13px;
  }
}
/* same card height as before the glass redesign (lower part 120px on computers, 97px on phones) */
.movie-info {
  gap: 4px;
  padding: 12px 14px 10px;
}

.movie-meta .year {
  padding: 1px 8px;
}

.action-circle {
  margin-top: 3px;
  padding-top: 8px;
}

@media (max-width: 700px) {
  .movie-info {
    gap: 3px;
    padding: 8px 9px 7px;
  }

  .movie-meta .year {
    padding: 0 6px;
  }

  .action-circle {
    margin-top: 2px;
    padding-top: 6px;
  }
}
/* cards a little wider, so they look less tall (poster keeps its 2:3 shape).
   Grid pages keep the same number of columns but get a bit more room:
   on a big screen 6 columns of ~250px instead of ~233px */
.movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* grid pages always use the full width of the screen: the cards stretch to fill each row
   (more cards per row on big screens) */
.container:has(.movie-grid) {
  max-width: none;
}

/* the library / Explore / Watchlist pages are full width from the start (their grid is drawn
   a moment later, and the page jumped sideways when it appeared) */
body:is([data-page="movie"], [data-page="tv"], [data-page="anime"], [data-page="watchlist"]) main.container {
  max-width: none;
}

/* (but an anime's own page keeps the usual width, like a title page) */
body[data-page="anime"] main.container:has(> .ax-detail-wait, > .ax-hero) {
  max-width: 1550px;
}

.movie-row {
  grid-auto-columns: 226px;
}

@media (max-width: 700px) {
  .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }

  .movie-row {
    grid-auto-columns: 162px;
  }
}
/* ============================== Tablet layout (iPad…): html.tablet, set in layout.js ============================== */
/* pill navbar on top (no side menu, no tab bar), a full-width slideshow under a see-through
   navbar, and poster-only cards in a 4-column grid (6 in landscape) */

.profile-menu .tablet-link {
  display: none;
}

/* ---- navbar: the links in one glass capsule, like on computers ---- */
html.tablet .nav-bar {
  height: 64px;
  padding: 0 20px;
  gap: 14px;
}

html.tablet.standalone .site-nav {
  padding-top: env(safe-area-inset-top);
}

html.tablet .nav-toggle,
html.tablet .nav-close,
html.tablet .nav-menu-head,
html.tablet .lang-toggle.in-menu {
  display: none;
}

html.tablet .nav-menu {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
}

html.tablet .nav-links {
  position: relative;
  flex-direction: row;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.45);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

html.tablet .nav-links .nav-indicator {
  display: none;
}

html.tablet .nav-links a {
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

html.tablet .nav-links a i,
html.tablet .nav-links a::after {
  display: none;
}

html.tablet .nav-links a.active {
  background: #0a0a0b;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.tablet .nav-logo img {
  height: 17px;
}

html.tablet .nav-tools .icon-btn,
html.tablet .user-pic {
  width: 40px;
  height: 40px;
}

html.tablet .lang-toggle.in-profile {
  display: flex;
}

/* upright iPad: Tier List moves into the profile menu, the dark-mode button hides
   (the bar has room for six links) */
@media (max-width: 1000px) {
  html.tablet .nav-links li:has(> a[href="tier-list.html"]),
  html.tablet .nav-links li:has(> a[href="box-office.html"]) {
    display: none;
  }

  html.tablet .profile-menu .tablet-link {
    display: flex;
  }

}

@media (max-width: 900px) {
  html.tablet .nav-bar {
    padding: 0 14px;
    gap: 10px;
  }

  html.tablet .nav-logo img {
    height: 14px;
  }

  html.tablet .nav-links a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* iPad mini, upright (744px): a little tighter still */
@media (max-width: 780px) {
  html.tablet .nav-bar {
    padding: 0 12px;
    gap: 8px;
  }

  html.tablet .nav-links a {
    padding: 8px 8px;
  }

  html.tablet .nav-tools .icon-btn,
  html.tablet .user-pic {
    width: 36px;
    height: 36px;
  }
}

/* ---- home: the slideshow fills the width and sits under a see-through navbar ---- */
html.tablet body[data-page="home"] .site-nav::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.3s;
}

html.tablet.scrolled body[data-page="home"] .site-nav::before {
  background: rgba(14, 14, 16, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

html.tablet body[data-page="home"] .hero {
  width: auto;
  height: min(72vh, 760px);
  max-height: none;
  aspect-ratio: auto;
  margin-left: -30px; /* past the page's side padding: edge to edge */
  margin-right: -30px;
  margin-top: calc(-64px - 24px - env(safe-area-inset-top, 0px));
  border-radius: 0;
  box-shadow: none;
}

/* fade into the page at the bottom, darker on the left for the text */
html.tablet body[data-page="home"] .hero-slide::after {
  background: linear-gradient(to top, var(--bg) 0%, rgba(8, 8, 10, 0.6) 30%, transparent 62%),
    linear-gradient(to right, rgba(8, 8, 10, 0.8) 0%, rgba(8, 8, 10, 0.3) 45%, transparent 70%);
}

html.tablet body[data-page="home"] .hero-caption {
  left: 30px;
  bottom: 56px;
  max-width: min(560px, 70%);
}

/* ---- cards: poster only, rounder, 4 across when upright ---- */
html.tablet .movie-item {
  border: 0;
  border-radius: 18px;
  background: none;
  box-shadow: none;
}

html.tablet .movie-item .movie-info {
  display: none;
}

html.tablet .poster-link {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

html.tablet .movie-item:hover,
html.tablet .movie-item:focus-within {
  transform: none;
}

html.tablet .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

html.tablet .movie-row {
  grid-auto-columns: 180px;
  gap: 14px;
}
/* smallest iPads (upright, ~744px): still 4 posters across */
@media (max-width: 800px) {
  html.tablet .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
/* navbar search: "In your library" / "More from TMDB" headings, and "All results" on Discover */
.search-results .search-group {
  padding: 10px 8px 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-results .search-all a {
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

.search-results .search-all a:hover,
.search-results .search-all a.focused {
  background: rgba(255, 255, 255, 0.12);
}

.search-results .search-all i {
  color: #ff6b61;
}

/* a bit wider on tablets and computers (room for the TMDB results) */
@media (min-width: 701px) {
  .search-panel {
    width: 400px;
  }
}
/* ============================== Phones: poster-only cards, like on tablets ============================== */
/* (html.app-ui = phones in the browser and the installed app; tap a poster to open its page) */

html.app-ui .movie-item {
  border: 0;
  border-radius: 14px;
  background: none;
  box-shadow: none;
}

html.app-ui .movie-item .movie-info {
  display: none;
}

html.app-ui .poster-link {
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html.app-ui .movie-item:hover,
html.app-ui .movie-item:focus-within {
  transform: none;
}

html.app-ui .soon-label {
  top: auto;
  right: auto;
  max-width: calc(100% - 12px);
}

/* wider phones / small tablets in phone mode: 4 across */
@media (min-width: 540px) {
  html.app-ui .movie-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html.app-ui .movie-row {
    grid-auto-columns: calc((100% - 30px) / 4.3);
  }
}
/* small phone posters: the clock + date is enough ("Oct 2") */
html.app-ui .soon-label .soon-word {
  display: none;
}

html.app-ui .movie-item .badges .type-badge {
  border-radius: 999px;
  letter-spacing: 0.3px;
}

@media (min-width: 540px) {
  html.app-ui .movie-row {
    grid-auto-columns: calc((100% - 30px) / 4);
  }
}
html.app-ui .movie-row {
  padding-left: 0;
  padding-right: 0;
  scroll-padding: 0;
}
/* phones: exactly 2 posters across at any phone width, filling the screen
   (grids and home rows alike; rows swipe to show the next two) */
html.app-ui .movie-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html.app-ui .movie-row {
  grid-auto-columns: calc((100% - 12px) / 2);
  gap: 12px;
}

@media (min-width: 540px) {
  html.app-ui .movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.app-ui .movie-row {
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

/* bigger posters: labels back to a normal size */
html.app-ui .movie-item .badges {
  top: 8px;
  left: 8px;
}

html.app-ui .movie-item .badges span {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

html.app-ui .movie-item .badges .type-badge {
  width: auto;
  height: 24px;
  padding: 0 9px;
  font-size: 11px;
}

html.app-ui .new-label {
  top: 8px;
  right: 8px;
  gap: 5px;
  padding: 3px 9px 3px 8px;
  font-size: 10px;
}

html.app-ui .new-label::before {
  width: 8px;
  height: 8px;
}

html.app-ui .soon-label {
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  font-size: 10.5px;
}

html.app-ui .movie-item,
html.app-ui .poster-link {
  border-radius: 16px;
}
/* ============================== Home: Top 10 today (movies / TV) ============================== */

.top10-head h2 {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  line-height: 1;
}

/* "TOP 10": big outlined letters with a red glow */
.top10-word {
  color: transparent;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 22px rgba(229, 9, 20, 0.45);
}

.top10-sub {
  padding-bottom: 6px;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 800;
}

.movie-row.top10-row,
html .movie-row.top10-row {
  grid-auto-columns: max-content;
  gap: 18px;
  padding-top: 6px;
  padding-bottom: 14px;
}

.top10-item {
  position: relative;
  display: flex;
  text-decoration: none;
  transition: transform 0.25s;
}

.top10-item.skeleton {
  width: 260px;
  height: 255px;
  border-radius: 16px;
}

/* the number: huge, outlined, half hidden behind the poster */
.top10-num {
  position: relative;
  z-index: 0;
  color: #0b0b0c;
  font-size: 190px;
  font-weight: 900;
  letter-spacing: -0.06em;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 26px rgba(229, 9, 20, 0.55), 6px 6px 0 rgba(229, 9, 20, 0.35);
  user-select: none;
  transition: -webkit-text-stroke-color 0.25s, text-shadow 0.25s;
}

.top10-item img {
  position: relative;
  z-index: 1;
  width: 170px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.top10-item:hover {
  transform: translateY(-4px);
}

.top10-item:hover .top10-num {
  -webkit-text-stroke-color: #ff3b3b;
  text-shadow: 0 0 34px rgba(229, 9, 20, 0.85), 6px 6px 0 rgba(229, 9, 20, 0.5);
}

:root[data-theme="light"] .top10-word {
  -webkit-text-stroke-color: #17181c;
}

:root[data-theme="light"] .top10-num {
  color: var(--bg);
  -webkit-text-stroke-color: #17181c;
}

/* tablets */
html.tablet .top10-num {
  font-size: 160px;
}

html.tablet .top10-item img {
  width: 150px;
}

/* phones: about two per screen */
@media (max-width: 700px) {
  .top10-head h2 {
    gap: 10px;
  }

  .top10-word {
    -webkit-text-stroke-width: 1.5px;
  }

  .top10-sub {
    padding-bottom: 3px;
  }

  .movie-row.top10-row,
  html .movie-row.top10-row {
    gap: 12px;
  }

  .top10-num {
    margin-right: -18px;
    font-size: 118px;
    -webkit-text-stroke-width: 2px;
  }

  .top10-item img {
    width: 34vw;
    max-width: 150px;
    border-radius: 14px;
  }

  .top10-item.skeleton {
    width: 44vw;
    height: 51vw;
  }
}
.movie-row.top10-row,
html .movie-row.top10-row {
  margin-top: 0;
}

@media (max-width: 700px) {
  .top10-num {
    margin-right: -8px;
  }
}
.movie-row.top10-row,
html .movie-row.top10-row {
  overflow-y: hidden;
}
/* Top 10: Poppins for the outlined text (Inter's letters are drawn from overlapping pieces,
   which show up as extra lines inside an outline) */
.top10-word,
.top10-num {
  font-family: "Poppins", "Arial Black", sans-serif;
  font-weight: 800;
}

/* the number sits at the middle of the poster's height, not at its foot */
.top10-item {
  align-items: center;
}

.movie-row.top10-row,
html .movie-row.top10-row {
  align-items: center;
}

.top10-num {
  line-height: 1;
}

/* heading row: TOP 10 · today, and the Movies / TV shows switch on the right */
.top10-head {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
}

.top10-sub {
  color: var(--text-muted);
}

.top10-switch {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
}

.top10-tab {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--glass-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.top10-tab:hover {
  color: var(--glass-text);
}

.top10-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(144, 13, 9, 0.45);
}

@media (max-width: 700px) {
  .top10-tab {
    padding: 7px 13px;
    font-size: 13px;
  }
}
/* every number gets room of its own (a thin "1" isn't swallowed by the poster) */
.top10-num {
  min-width: 0.62em;
  margin-right: -6px;
  text-align: right;
}

html.tablet .top10-num {
  margin-right: -6px;
}

@media (max-width: 700px) {
  .top10-num {
    margin-right: -2px;
    font-size: 104px;
  }
}
/* ============================== On / off switch (profile menu) ============================== */

.switch-track {
  display: block;
  width: 48px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s;
}

:root[data-theme="light"] .switch-track {
  background: rgba(0, 0, 0, 0.18);
}

.switch-thumb {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================== Computers: "posters only" card style ============================== */
/* (same look as phones and tablets; the hover preview still gives the buttons) */

html.posters-only .movie-item {
  border: 0;
  border-radius: 16px;
  background: none;
  box-shadow: none;
}

html.posters-only .movie-item .movie-info {
  display: none;
}

html.posters-only .poster-link {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* posters are shorter without the details: a few more per row */
html.posters-only:not(.app-ui):not(.tablet) .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

html.posters-only:not(.app-ui):not(.tablet) .movie-row {
  grid-auto-columns: 200px;
}
/* profile menu: "Details under posters" switch, same row style as "Movie names" */
.menu-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.menu-switch > i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5e5e5;
  color: #17181c;
}

.menu-switch > span:first-of-type {
  flex: 1;
}

.menu-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.menu-switch input:checked + .switch-track {
  background: var(--accent);
}

.menu-switch input:checked + .switch-track .switch-thumb {
  transform: translateX(20px);
}

.menu-switch input:focus-visible + .switch-track {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.menu-switch .switch-track {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
}

/* phones and tablets always show posters only: no switch there */
html.app-ui .menu-switch,
html.tablet .menu-switch {
  display: none;
}
/* ============================== Profile menu: preferences block (Movie names, Poster details) ============================== */

.profile-menu .menu-prefs {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.menu-prefs .lang-toggle.in-profile,
.menu-prefs .menu-switch {
  gap: 10px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s;
}

.menu-prefs .lang-toggle.in-profile:hover,
.menu-prefs .menu-switch:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* glass icon circles instead of the white ones */
.menu-prefs .lang-toggle.in-profile > i,
.menu-prefs .menu-switch > i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* EN | RU: a glass capsule, the chosen one lit red */
.menu-prefs .lang-toggle.in-profile button {
  padding: 5px 11px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.25s, color 0.25s;
}

.menu-prefs .lang-toggle.in-profile button:first-of-type {
  border-radius: 999px 0 0 999px;
  box-shadow: -4px 0 0 -3px transparent;
}

.menu-prefs .lang-toggle.in-profile button:first-of-type,
.menu-prefs .lang-toggle.in-profile button:last-of-type {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.menu-prefs .lang-toggle.in-profile button:first-of-type {
  border-right: 0;
}

.menu-prefs .lang-toggle.in-profile button:last-of-type {
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.menu-prefs .lang-toggle.in-profile button:hover {
  color: #fff;
}

.menu-prefs .lang-toggle.in-profile button.active {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(144, 13, 9, 0.45);
}

/* on / off switch: glass track, red when on */
.menu-prefs .switch-track {
  width: 44px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.menu-prefs .switch-thumb {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.menu-prefs .menu-switch input:checked + .switch-track {
  border-color: transparent;
  background: var(--accent);
  box-shadow: 0 3px 10px rgba(144, 13, 9, 0.45);
}

.menu-prefs .menu-switch input:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
  background: #fff;
}
.menu-prefs .lang-toggle.in-profile,
.menu-prefs .menu-switch {
  width: auto;
  min-width: 0;
}
.menu-prefs .lang-toggle.in-profile > i,
.menu-prefs .menu-switch > i {
  flex-shrink: 0;
}

.menu-prefs .lang-toggle.in-profile > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Russian titles" switch: in the profile menu on computers, phones and tablets
   (narrow computer windows have EN | RU in the side menu instead) */
@media (max-width: 1330px) {
  .menu-switch.lang-switch {
    display: none;
  }
}

html.app-ui .menu-switch.lang-switch,
html.tablet .menu-switch.lang-switch {
  display: flex;
}

/* Top 10: its own sizes win over every other row rule (posters-only, phones, tablets) */
#home-rows .movie-row.top10-row {
  grid-auto-columns: max-content;
  gap: 18px;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 700px) {
  #home-rows .movie-row.top10-row {
    gap: 12px;
  }
}
/* home: the rows use the full width of the screen too, like the library pages */
body[data-page="home"] main.container {
  max-width: none;
}
/* ============================== Trailer pop-up: glass redesign ============================== */

/* the page behind blurs and darkens */
.overlay:has(.trailer-modal) {
  background: rgba(6, 6, 8, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.trailer-modal {
  max-width: 1100px;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background: rgba(24, 24, 28, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* head: a "Trailer" pill and the title */
.trailer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 60px 14px 8px;
  border: 0;
  background: none;
  color: #fff;
}

.th-kicker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.th-kicker i {
  color: #ff4d3a;
  font-size: 10px;
}

.th-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.th-title span {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* round glass close button */
.trailer-modal .modal-close {
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.trailer-modal .modal-close i {
  font-weight: 900;
}

.trailer-modal .modal-close i::before {
  content: "\f00d"; /* an X, drawn plain inside the glass circle */
}

.trailer-modal .modal-close:hover {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  transform: rotate(90deg);
}

/* the video (or a message) in a rounded frame */
.trailer-body {
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.trailer-modal iframe {
  border-radius: 18px;
}

.trailer-message {
  gap: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(144, 13, 9, 0.18), transparent 60%), #0b0b0c;
  color: rgba(255, 255, 255, 0.8);
}

.trailer-message i {
  color: rgba(255, 255, 255, 0.35);
}

.trailer-message .fa-youtube {
  color: #ff3b3b;
}

.trailer-message a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-hover);
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .trailer-modal {
    padding: 8px;
    border-radius: 20px;
  }

  .trailer-head {
    gap: 8px;
    padding: 4px 52px 10px 6px;
  }

  .th-kicker {
    padding: 4px 9px;
    font-size: 10.5px;
  }

  .th-title {
    font-size: 16px;
  }

  .trailer-modal .modal-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  .trailer-body,
  .trailer-modal iframe {
    border-radius: 14px;
  }
}
/* hover preview: the player is a real 1920 × 1080 (so YouTube sends HD), shrunk to the
   preview with --hp-fit, then zoomed 1.4× as before to hide YouTube's own labels */
.hp-frame {
  transform: translate(-50%, -50%) scale(calc(var(--hp-fit, 0.25) * 1.4));
}
/* trailer pop-up head: title in the site's heading style, the year in its own glass pill */
.th-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.th-year {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .th-title {
    font-size: 16px;
  }

  .th-year {
    padding: 3px 8px;
    font-size: 11px;
  }
}
/* ============================== Title page: Seasons (TV) ============================== */

.t-seasons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 12px;
}

.t-season {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.t-season:hover,
.t-season:focus-visible {
  background: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.ts-poster {
  position: relative;
  display: block;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.ts-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 0.4s, filter 0.3s;
}

.t-season:hover .ts-poster img {
  transform: scale(1.05);
  filter: brightness(0.7);
}

/* season number: a small glass badge */
.ts-num {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

/* play button: appears on hover (always shown on touch screens) */
.ts-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 17px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
}

.ts-play i {
  margin-left: 3px;
}

.t-season:hover .ts-play,
.t-season:focus-visible .ts-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.t-season:hover .ts-play {
  background: var(--accent);
  border-color: transparent;
}

@media (hover: none) {
  .ts-play {
    width: 42px;
    height: 42px;
    font-size: 14px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.t-season strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.t-season > span:last-child {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .t-seasons {
    grid-auto-columns: calc((100% - 28px) / 3);
    gap: 10px;
  }

  .t-season {
    padding: 6px 6px 10px;
    border-radius: 14px;
  }

  .ts-poster {
    border-radius: 10px;
  }

  .t-season strong {
    font-size: 12.5px;
  }

  .t-season > span:last-child {
    font-size: 11px;
  }
}
/* season card: what plays ("▶ Trailer", "▶ Teaser"…), bottom-left of the poster */
.ts-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-tag i {
  color: #ff4d3a;
  font-size: 8px;
}

.ts-tag.loading i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.ts-tag.none {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* a season with no video: dimmed, no play button */
.t-season.no-video {
  cursor: default;
}

.t-season.no-video .ts-poster img {
  filter: grayscale(0.6) brightness(0.55);
}

.t-season.no-video .ts-play {
  display: none;
}

.t-season.no-video:hover {
  transform: none;
}

.t-season.no-video:hover .ts-poster img {
  transform: none;
}
/* Seasons row: same custom scrollbar as the other rows (browser's own bar hidden) */
html.custom-scrollbars .t-seasons {
  scrollbar-width: none;
}

html.custom-scrollbars .t-seasons::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html.custom-scrollbars .t-seasons.grabbing,
html.custom-scrollbars .t-seasons.grabbing * {
  cursor: grabbing !important;
  user-select: none;
}

/* phones / tablets: thin, no arrows */
.t-seasons {
  scrollbar-width: thin;
}
/* title page: less empty space between the top part and the first section (Seasons / Cast) */
.t-hero-inner {
  padding-bottom: 16px;
}

#title-main .t-sections > .t-section:first-child {
  margin-top: 0;
}

#title-main {
  padding-top: 20px;
}
/* ============================== Pop-ups (rating, add a title, notices): glass redesign ============================== */

/* the page behind blurs and darkens (the trailer pop-up has its own, slightly stronger) */
.overlay {
  background: rgba(6, 6, 8, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.modal:not(.trailer-modal) {
  padding: 30px 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background: rgba(24, 24, 28, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* round glass close button, an X that turns red (same as the trailer pop-up) */
.modal:not(.trailer-modal) .modal-close {
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.modal:not(.trailer-modal) .modal-close i {
  font-weight: 900;
}

.modal:not(.trailer-modal) .modal-close i::before {
  content: "\f00d";
}

.modal:not(.trailer-modal) .modal-close:hover {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  transform: rotate(90deg);
}

/* ---- rating pop-up ---- */

.rating-modal h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rating-modal .rating-for {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
}

/* the ten stars: soft grey, gold (with a glow) when picked */
.rating-modal .stars {
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
}

.rating-modal .star {
  padding: 2px 5px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 25px;
}

/* no white box on the first star when the pop-up opens; a soft ring only for keyboard use */
.rating-modal .star:focus {
  outline: none;
}

.rating-modal .star:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 1px;
}

.rating-modal .half-hint {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.rating-modal .feedback-message {
  min-height: 44px;
  margin: 12px 0 8px;
}

/* buttons: Save = white pill (like Trailer), Clear / Skip = glass pill */
.modal .rating-actions .save {
  min-width: 170px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.modal .rating-actions .save:hover {
  background: #e9e9e9;
}

.modal .rating-actions .save:disabled {
  opacity: 0.35;
  box-shadow: none;
}

.rating-modal .rating-actions .btn:not(.save) {
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

.rating-modal .rating-actions .btn:not(.save):hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 480px) {
  .modal:not(.trailer-modal) {
    padding: 26px 16px 20px;
    border-radius: 22px;
  }

  .rating-modal .stars {
    padding: 8px 6px;
  }

  .rating-modal .star {
    padding: 2px 2px;
    font-size: 22px;
  }
}
/* pop-ups: pill buttons and rounded glass fields (Add a title, notices) */
.modal:not(.trailer-modal) .btn {
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
}

.modal:not(.trailer-modal) .input,
.modal:not(.trailer-modal) .select {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.modal:not(.trailer-modal) .input:focus,
.modal:not(.trailer-modal) .select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
/* rating pop-up: an Apple-style progress ring (like the Watch activity rings) instead of the
   big cartoon star; it fills in gold to your score, the number sits clean in the middle */
@property --pct-anim {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.rate-ring {
  --pct-anim: var(--pct, 0);
  position: relative;
  width: 124px;
  height: 124px;
  margin: 2px auto 14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd95a 0%, #f5a623 calc(var(--pct-anim) * 1%), rgba(255, 255, 255, 0.08) calc(var(--pct-anim) * 1%));
  transition: --pct-anim 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.rate-ring.has-value {
  filter: drop-shadow(0 0 16px rgba(245, 166, 35, 0.22));
}

/* the inside of the ring: a dark glass disc (ring stroke = 9px) */
.rate-ring-inner {
  position: absolute;
  inset: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #26262b, #151518);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rate-ring .selected-rating {
  position: static;
  padding: 0;
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rr-of {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.rr-empty {
  display: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 30px;
}

.rate-ring:not(.has-value) .rr-empty {
  display: block;
}

.rate-ring:not(.has-value) .selected-rating,
.rate-ring:not(.has-value) .rr-of {
  display: none;
}

/* the ten stars: calmer gold, only a hint of glow */
.rating-modal .star .star-fill {
  color: #f5b82e;
  filter: drop-shadow(0 0 3px rgba(245, 184, 46, 0.35));
}

.rating-modal .feedback-message {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
/* ============================== Private libraries ============================== */

/* things only the site's owner sees (html.is-owner is set by js/core/cloud.js) */

/* signed out: "Sign in to start your own list" */
.guest-state {
  max-width: 460px;
  margin: 40px auto;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.guest-state > i {
  display: block;
  margin-bottom: 14px;
  font-size: 38px;
  color: var(--accent-hover);
}

.guest-state h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.guest-state p {
  margin: 0 0 20px;
  color: var(--text-muted);
  line-height: 1.5;
}

.guest-state .btn {
  border-radius: 999px;
  padding-inline: 22px;
}

.mine-head + .guest-state {
  margin-top: 8px;
}

.p-guest .guest-state {
  margin-top: 0;
}

:root[data-theme="light"] .guest-state {
  border-color: var(--border);
  background: var(--surface);
}

/* Members (owner only, Profile page) */
.members {
  margin-bottom: 24px;
}

.member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.member img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 520px) {
  .member {
    flex-wrap: wrap;
  }

}

/* ============================== Watchlist page: Plan to watch + Favorites ============================== */

.wl-row:first-child {
  margin-top: 8px;
}

.wl-row .row-head h2 i {
  margin-right: 6px;
  font-size: 0.8em;
  color: var(--accent-hover);
}

.wl-row .row-head .wl-see {
  cursor: pointer;
}

.wl-row-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 26px 20px;
  border: 1px dashed var(--glass-border);
  border-radius: 16px;
  color: var(--text-muted);
  text-align: center;
}

.wl-row-empty[hidden] {
  display: none;
}

.wl-add-big {
  border-radius: 999px;
}

/* a list's row: "+ Add titles" next to "See all" */
.wl-row-tools {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* your own list's ✕ (delete it), in the row's corner: there while the row is pointed at */
.wl-row-x {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  align-self: center;
  width: 30px;
  height: 30px;
  margin-left: -4px;
  padding: 0;
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 50%;
  background: var(--glass-bg, var(--surface-2));
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.55s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wl-row-x:hover,
.wl-row-x:focus-visible {
  border-color: transparent;
  background: var(--accent-hover);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .wl-row .wl-row-x {
    opacity: 0;
  }

  .wl-row:hover .wl-row-x,
  .wl-row:focus-within .wl-row-x {
    opacity: 1;
  }
}

.wl-add {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.wl-add:hover {
  color: var(--text);
}

.wl-add i {
  margin-right: 4px;
  color: var(--accent-hover);
}

/* "Edit list" pop-up (js/pages/browse.js): its name, its titles (take any out), Appearance, Delete */
.le-modal {
  max-width: 560px;
}

.le-modal h3 {
  margin: 0 0 16px;
  padding-right: 40px;
  text-align: left;
  font-size: 19px;
}

.le-modal h3 i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.le-field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.le-field span,
.le-head span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.le-name {
  padding: 11px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.le-name:focus {
  border-color: var(--accent);
  outline: none;
}

.le-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.le-items {
  display: grid;
  gap: 6px;
  max-height: clamp(160px, calc(100vh - 470px), 380px);
  margin: 0;
  padding: 0 2px 0 0;
  overflow-y: auto;
  list-style: none;
}

.le-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  transition: opacity 0.2s;
}

.le-items li.out {
  opacity: 0.45;
}

.le-items li.out b {
  text-decoration: line-through;
}

.le-items img {
  flex: none;
  width: 34px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.le-items li > span {
  display: grid;
  flex: 1;
  min-width: 0;
}

.le-items b {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.le-items small {
  color: var(--text-muted);
  font-size: 12px;
}

.le-items .le-empty {
  justify-content: center;
  padding: 18px;
  color: var(--text-muted);
}

.le-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: pointer;
}

.le-x:hover {
  background: rgba(229, 9, 20, 0.2);
  color: var(--text);
}

.le-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.le-more .le-delete {
  margin-left: auto;
}

/* "Add titles" pop-up: search your library and TMDB */
.adder-modal {
  max-width: 520px;
}

.adder-modal h3 {
  margin: 0 44px 14px 0;
  font-size: 21px;
  font-weight: 800;
}

.cc-hint {
  margin: 12px 0 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
}

.cc-hint:empty {
  display: none;
}

.cc-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* as wide as the pop-up, never as its longest title */
  gap: 4px;
  max-height: 55vh;
  margin: 10px -6px 0 0;
  padding-right: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.cc-results::-webkit-scrollbar {
  width: 6px;
}

.cc-results::-webkit-scrollbar-button {
  display: none;
}

.cc-results::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
}

.cc-results::-webkit-scrollbar-track {
  background: transparent;
}

.cc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  border-radius: 12px;
  transition: background 0.2s;
}

.cc-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cc-row img {
  width: 38px;
  height: 57px;
  flex: none;
  border-radius: 7px;
  object-fit: cover;
}

.cc-row div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.cc-row strong {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-row small {
  color: rgba(255, 255, 255, 0.55);
}

.adder-modal .cc-btn {
  flex: none;
  white-space: nowrap;
  padding: 7px 14px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13.5px;
}

.adder-modal .cc-btn.on {
  border-color: transparent;
  background: #1f8a4c;
}

/* the filters over your library, "Add all", "Show more" */
.cc-filters {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.cc-filters:empty {
  display: none;
}

.cc-types {
  width: max-content;
  max-width: 100%;
}

.cc-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cc-selects select {
  max-width: 170px;
}

.cc-hide-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
}

.cc-hide-in input {
  accent-color: var(--accent);
}

.cc-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cc-hint-row .cc-hint {
  margin: 12px 0 0;
}

.adder-modal .cc-all {
  flex: none;
  margin-top: 10px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
}

.adder-modal .cc-show-more {
  justify-self: center;
  margin: 8px 0 4px;
  border-radius: 999px;
  font-size: 13.5px;
}

.cc-show-more small {
  margin-left: 4px;
  opacity: 0.6;
}

.adder-modal h3 small {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 600;
}

/* "Generate a marathon": a wide button at the top of Add titles */
.cc-marathon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(245, 197, 24, 0.14), rgba(229, 9, 20, 0.1));
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.cc-marathon:hover {
  border-color: rgba(245, 197, 24, 0.6);
}

.cc-marathon > span {
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, #f5c518, #e08a00);
  color: #1a1200;
}

.cc-marathon b {
  font-size: 14.5px;
}

.cc-marathon small {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}

.cc-marathon > .fa-chevron-right {
  grid-column: 3;
  grid-row: 1 / 3;
  color: rgba(255, 255, 255, 0.5);
}

/* the marathon generator (js/components/marathon.js) */
.mr-modal {
  max-width: 600px;
}

.mr-head {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 14px;
  margin-right: 40px;
}

.mr-modal .mr-head h3 {
  margin: 0 0 2px;
  text-align: left;
}

.mr-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f5c518, #e08a00);
  color: #1a1200;
  font-size: 19px;
  box-shadow: 0 8px 22px -8px rgba(245, 197, 24, 0.7);
}

.mr-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.4;
}

.mr-sub b {
  color: #fff;
}

.mr-kinds {
  display: flex;
  gap: 8px;
  margin: 16px -4px 0;
  padding: 2px 4px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mr-kinds::-webkit-scrollbar {
  display: none;
}

.mr-kind {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.mr-kind span {
  font-size: 16px;
}

.mr-kind:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mr-kind.on {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(229, 9, 20, 0.8);
}

.mr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.mr-modal .mr-more {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
}

.mr-num {
  flex: none;
  width: 22px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.mr-row.in {
  opacity: 0.55;
}

.mr-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.mr-x:hover {
  background: rgba(229, 9, 20, 0.85);
  color: #fff;
}

.mr-search {
  margin-top: 12px;
}

.mr-found {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.mr-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.mr-hit:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mr-hit img {
  width: 30px;
  height: 45px;
  border-radius: 5px;
  object-fit: cover;
}

.mr-hit span {
  flex: 1;
  min-width: 0;
}

.mr-hit small {
  color: rgba(255, 255, 255, 0.5);
}

.mr-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.mr-foot .mr-add {
  width: 100%;
  justify-content: center;
}

/* one scroll only: the head, the choices, the search and "Add" stay put and the films scroll in
   the room left (the whole pop-up scrolling too pushed the head out of sight, and a list
   scrolling inside a scrolling pop-up left blank gaps on phones) */
.mr-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mr-modal > * {
  flex: none;
}

.mr-modal .mr-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  overscroll-behavior: contain;
}

/* (what the search under the films finds: a few rows, scrolling, so "Add" stays in sight) */
.mr-modal .mr-found {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 34%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* phones: as tall as the screen allows, and solid (a blurred glass pop-up doesn't always repaint
   a list scrolling inside it on phones: rows went missing) */
@media (max-width: 700px) {
  .modal.mr-modal {
    max-height: calc(100dvh - 32px);
    padding: 22px 18px 18px;
    background: rgba(24, 24, 28, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mr-modal .mr-list {
    -webkit-overflow-scrolling: touch;
  }
}

.cc-loading,
.cc-empty {
  margin: 10px 6px;
  color: rgba(255, 255, 255, 0.6);
}

/* the full list, under the two rows */
.wl-panel {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--glass-border);
  scroll-margin-top: 90px;
  animation: wl-in 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes wl-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.wl-panel .page-head {
  margin-top: 0;
}

.wl-title {
  font-size: 24px;
}

.wl-switch {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.wl-switch button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--glass-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.wl-switch button:hover {
  color: var(--glass-text);
}

.wl-switch button.active {
  background: var(--accent);
  color: #fff;
}

.wl-switch .count {
  opacity: 0.7;
  font-size: 0.9em;
}

.wl-switch .wl-close {
  width: 40px;
  padding: 0;
  justify-content: center;
}

@media (max-width: 520px) {
  .wl-switch {
    gap: 2px;
  }

  .wl-switch button {
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  .wl-switch .wl-close {
    width: 38px;
  }
}

/* ============================== Profile menu: glass redesign ============================== */

.profile-menu {
  width: 292px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background: rgba(20, 20, 24, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.profile.open .profile-menu {
  transform: none;
}

/* you: photo with a soft red ring, name, sync pill */
.profile-menu .user-info {
  padding: 10px 0 14px;
}

.profile-menu .user-info img {
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 5px rgba(144, 13, 9, 0.28), 0 10px 28px rgba(0, 0, 0, 0.5);
}

.profile-menu .user-info h2 {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.profile-menu .sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
}

.profile-menu .sync-status:empty {
  display: none;
}

.profile-menu hr {
  display: none;
}

/* rows grouped in glass capsules, like the preferences block */
.profile-menu .menu-group {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-menu .menu-group a {
  display: flex;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.2s;
}

.profile-menu .menu-group a[hidden],
.profile-menu .menu-group a.tablet-link {
  display: none;
}

@media (max-width: 1000px) {
  html.tablet .profile-menu .menu-group a.tablet-link {
    display: flex;
  }
}

.profile-menu .menu-group a:hover {
  background: rgba(255, 255, 255, 0.07);
}

.profile-menu .menu-group a:hover span {
  font-weight: 500;
}

.profile-menu .menu-group a i:first-child {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.profile-menu .menu-group a .fa-chevron-right {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  transition: transform 0.3s, color 0.2s;
}

.profile-menu .menu-group a:hover .fa-chevron-right {
  color: rgba(255, 255, 255, 0.8);
}

.profile-menu .menu-group a .acct-pic {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.profile-menu .menu-label {
  padding: 12px 10px 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Sign out: a quiet red */
.profile-menu .menu-group a.menu-danger {
  color: #ff8a84;
}

.profile-menu .menu-group a.menu-danger i:first-child {
  border-color: rgba(185, 34, 34, 0.35);
  background: rgba(185, 34, 34, 0.16);
  color: #ff6b63;
}

.profile-menu .menu-group a.menu-danger:hover {
  background: rgba(185, 34, 34, 0.14);
}

/* Sign in: lit red, like the site's main buttons */
.profile-menu .menu-group a.menu-signin i:first-child {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(144, 13, 9, 0.45);
}

/* ============================== Welcome (an empty library) ============================== */

.welcome {
  margin: 8px 0 12px;
  padding: 28px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(144, 13, 9, 0.22), transparent 60%),
    var(--glass-bg);
}

.welcome-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.welcome-head p {
  margin: 0;
  color: var(--text-muted);
}

.welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.welcome-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
}

.welcome-step > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(144, 13, 9, 0.45);
}

.welcome-step .ws-num {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--glass-muted);
  font-size: 13px;
  font-weight: 700;
}

.welcome-step h4 {
  margin: 4px 0 0;
  font-size: 17px;
}

.welcome-step p {
  flex: 1;
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.welcome-step .btn {
  border-radius: 999px;
}

@media (max-width: 800px) {
  .welcome {
    padding: 20px;
  }

  .welcome-steps {
    grid-template-columns: 1fr;
  }
}

/* ============================== Watchlist page: Coming up ============================== */

.wl-coming {
  margin-top: 8px;
}

.wl-coming .row-head h2 i {
  margin-right: 6px;
  color: var(--accent-hover);
  font-size: 0.8em;
}

.wl-coming-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.coming-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s;
}

.coming-item:hover {
  background: var(--glass-bg-hover);
}

.coming-item img {
  width: 42px;
  height: 63px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}

.coming-item span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.coming-item strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-item small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.coming-item.soon small {
  color: #ff8a84;
  font-weight: 600;
}

/* ============================== "What should I watch?" pop-up ============================== */
/* like the Box Office stage: a cinematic stage on top (titles that fit what you've picked,
   slowly zooming and fading one into the next, what you're after in words, how many fit,
   counting), then the choices as the site's pill switches with icons, rising in one by one.
   Then a shortlist: the picked title big over its own backdrop, the five posters under it,
   a spin that runs along them */

.picker-modal {
  max-width: 620px;
  padding: 14px 14px 20px;
  transition: max-width 0.35s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s ease;
}

.picker-modal.pk-wide {
  max-width: 660px;
  padding: 28px;
}

.pk-ask[hidden],
.pk-short[hidden],
.pk-mine[hidden],
.pk-tally[hidden] {
  display: none;
}

/* the stage */
.pk-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  min-height: 190px;
  padding: 22px 22px 20px;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(229, 9, 20, 0.35), transparent 55%), #0b0b0e;
  color: #fff;
  isolation: isolate;
}

.pk-bg {
  position: absolute;
  inset: -2%;
  z-index: -2;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.pk-bg.on {
  opacity: 1;
  animation: bo-kenburns 14s ease-out forwards;
}

.pk-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.2)),
    linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent 70%);
}

.pk-stage-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.9);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(144, 13, 9, 0.5);
}

.pk-sentence {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.pk-sentence b {
  color: #fff;
  font-weight: 800;
}

.pk-sentence.again {
  animation: bo-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pk-tally {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.pk-tally b {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.pk-tally small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pk-tally.pop b {
  animation: pk-tally-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pk-tally-pop {
  40% {
    transform: scale(1.15);
    color: #ff8a84;
  }
}

.pk-cap {
  position: absolute;
  top: 14px;
  left: 18px;
  max-width: 70%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the choices */
.pk-form {
  display: grid;
  gap: 10px;
  padding: 16px 8px 0;
}

.pk-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.pk-ask.enter .pk-row{
  animation: bo-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}

.pk-lab {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pk-lab i {
  width: 12px;
  color: var(--accent-hover);
  font-size: 11px;
}

.pk-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.pk-seg button {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}

.pk-seg button i {
  font-size: 12px;
  opacity: 0.8;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pk-seg button:hover:not(:disabled) {
  color: #fff;
}

.pk-seg button:hover:not(:disabled) i {
  transform: scale(1.18);
}

.pk-seg button.on {
  color: #fff;
}

.pk-seg button.on i {
  opacity: 1;
}

.pk-seg button:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: not-allowed;
}

.pk-seg button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: -2px;
}

.pk-seg .pk-s {
  display: none;
}

.pk-mine {
  padding: 2px 0 0;
}

.pk-mine > i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.pk-mine .switch-track {
  width: 44px;
  height: 26px;
}

/* the button: a light sweeps across it now and then */
.pk-actions {
  margin: 18px 8px 0;
}

.pk-go {
  position: relative;
  width: 100%;
  min-height: 52px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 15.5px;
  box-shadow: 0 10px 26px rgba(144, 13, 9, 0.45);
}

.pk-go::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  animation: pk-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pk-sweep {
  0%,
  55% {
    left: -40%;
  }
  100% {
    left: 130%;
  }
}

@media (max-width: 520px) {
  .picker-modal {
    padding: 10px 10px 16px;
  }

  .pk-stage {
    min-height: 170px;
    padding: 18px 16px 16px;
  }

  .pk-sentence {
    font-size: 16px;
  }

  .pk-tally b {
    font-size: 36px;
  }

  .pk-form {
    padding: 14px 2px 0;
  }

  .pk-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pk-seg button {
    gap: 5px;
    padding: 8px 4px;
    font-size: 12.5px;
  }

  .pk-seg button i {
    display: none;
  }

  .pk-seg .pk-l {
    display: none;
  }

  .pk-seg .pk-s {
    display: inline;
  }

  .pk-actions {
    margin: 16px 2px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-bg.on,
  .pk-ask.enter .pk-row,
  .pk-go::after,
  .pk-sentence.again,
  .pk-tally.pop b {
    animation: none;
  }
}

/* ---------- the shortlist ---------- */
.pk-short {
  animation: wl-in 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.pk-short-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 34px 14px 0;
}

.pk-short-head small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pk-tags span,
.pk-why span {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pk-short-head .pk-edit {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

.pk-loose {
  margin: -4px 0 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.pk-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: #111;
  isolation: isolate;
}

.pk-feature::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  background: var(--art) center / cover no-repeat;
  filter: blur(18px) saturate(1.3) brightness(0.45);
  transform: scale(1.1);
  transition: background-image 0.3s;
}

.pk-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.35), rgba(10, 10, 12, 0.75));
}

.pk-f-in {
  display: grid;
  grid-template-columns: 138px 1fr;
  grid-template-rows: 1fr auto;
  gap: 0 18px;
  padding: 18px;
}

.pk-f-in .pk-poster {
  grid-row: 1 / 3;
  align-self: center;
}

.pk-f-in .pk-info {
  align-self: end;
}

.pk-feature.in .pk-f-in {
  animation: pk-in 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes pk-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.pk-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
}

.pk-info {
  min-width: 0;
}

.pk-info small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
}

.pk-info small .fa-star {
  color: #f5c518;
}

.pk-info h4 {
  margin: 4px 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.pk-info h4 a {
  color: #fff;
  text-decoration: none;
}

.pk-info p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
}

.pk-why {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.pk-why span {
  padding: 3px 9px;
  border-color: rgba(229, 9, 20, 0.35);
  background: rgba(229, 9, 20, 0.14);
  font-size: 12px;
}

.pk-info .pk-on {
  color: #7fd6a2;
}

.pk-plot {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.pk-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pk-buttons .btn,
.pk-more .btn {
  border-radius: 999px;
}

.picker-modal .pk-buttons .btn:not(.btn-primary),
.picker-modal .pk-more .btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.picker-modal .pk-buttons .pk-trailer,
.picker-modal .pk-buttons .pk-drop {
  width: 42px;
  padding: 0;
  justify-content: center;
}

.picker-modal .pk-buttons .pk-drop:hover {
  border-color: rgba(229, 9, 20, 0.6);
  background: rgba(229, 9, 20, 0.2);
}

.picker-modal .pk-buttons .pk-add.done {
  color: #7fd6a2;
  opacity: 1;
}

/* the five posters */
.pk-strip {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 96px));
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.pk-slot {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transform: scale(0.94);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.2s;
  animation: pk-deal 0.45s cubic-bezier(0.32, 0.72, 0, 1) backwards;
  animation-delay: var(--d, 0ms);
}

@keyframes pk-deal {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-4deg) scale(0.9);
  }
}

.pk-slot img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  object-fit: cover;
}

.pk-slot b {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11.5px;
}

.pk-slot:hover {
  opacity: 0.85;
}

.pk-slot.on,
.pk-slot.hot {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 2px var(--accent), 0 10px 26px rgba(144, 13, 9, 0.45);
}

.pk-slot.on b,
.pk-slot.hot b {
  background: var(--accent);
}

.spinning .pk-slot.on:not(.hot) {
  opacity: 0.55;
  transform: scale(0.94);
  box-shadow: none;
}

.spinning .pk-slot {
  transition-duration: 0.08s;
}

.pk-more {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.pk-more .btn:disabled {
  opacity: 0.4;
}

.pk-spin i {
  transition: transform 0.4s;
}

.spinning .pk-spin i {
  animation: fa-spin 0.6s linear infinite;
}

.pk-none {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 10px 10px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.pk-none-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.15);
  color: var(--accent-hover);
  font-size: 24px;
}

.pk-none p {
  margin: 0;
}

.pk-none .btn {
  border-radius: 999px;
}

@media (max-width: 520px) {
  .pk-f-in {
    grid-template-columns: 96px 1fr;
    gap: 0 14px;
    padding: 14px;
  }

  .pk-f-in .pk-poster {
    grid-row: 1;
  }

  .pk-f-in .pk-buttons {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .pk-f-in .pk-buttons .btn {
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
  }

  .picker-modal .pk-buttons .pk-add {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .pk-buttons .pk-add span {
    display: none;
  }

  .pk-info h4 {
    font-size: 18px;
  }

  .pk-plot {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .pk-buttons .btn-primary {
    flex: 1 1 auto;
    justify-content: center;
  }

  .pk-strip {
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-slot,
  .pk-short,
  .pk-feature.in .pk-f-in {
    animation: none;
  }
}

/* ============================== Profile: streaming services, import, diary ============================== */

.services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.services[hidden] {
  display: none;
}

.svc-mine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  font-size: 13.5px;
}

.svc-chip img,
.svc-opt img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

.svc-mine .btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.svc-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.svc-opt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-opt:hover {
  background: var(--glass-bg-hover);
}

.svc-opt.on {
  border-color: var(--accent-hover);
  background: rgba(144, 13, 9, 0.22);
}

.import-panel .imp-how {
  margin: 12px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  font-size: 13.5px;
  line-height: 1.55;
}

.imp-how summary,
.imp-missing summary {
  cursor: pointer;
  font-weight: 600;
}

.imp-how p {
  margin: 8px 0 0;
  color: var(--text-muted);
}

.imp-pick {
  cursor: pointer;
  border-radius: 999px;
}

.imp-pick.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.imp-status > p {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.imp-bad,
.imp-error {
  color: #ff8a84;
}

.imp-bar {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg-hover);
}

.imp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-hover);
  transition: width 0.3s;
}

.imp-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.imp-summary div {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
}

.imp-summary strong {
  font-size: 22px;
  font-weight: 800;
}

.imp-summary span {
  color: var(--text-muted);
  font-size: 12.5px;
}

.imp-missing {
  margin-top: 12px;
  font-size: 13.5px;
}

.imp-missing p {
  color: var(--text-muted);
}

.imp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.imp-actions .btn {
  border-radius: 999px;
}

.imp-done {
  color: #7fd6a2 !important;
  font-weight: 600;
}

/* title page: "Watched on 12 Sep 2026 · Change" */
.t-watched-on {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.twd-edit {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ============================== Light theme ==============================
   The page goes light; the "chrome" (navbar, menus, search, pop-ups, phone tab bar,
   title header) stays dark, like Netflix / Apple TV. Here it's made solid enough that
   the light page doesn't show through it as grey. */

:root[data-theme="light"] .site-nav::before {
  background: rgba(14, 14, 16, 0.95);
}

:root[data-theme="light"] .profile-menu,
:root[data-theme="light"] .search-panel {
  background: rgba(20, 20, 24, 0.97);
}

:root[data-theme="light"] .modal:not(.trailer-modal) {
  background: rgba(22, 22, 26, 0.97);
}

:root[data-theme="light"] .overlay {
  background: rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] .sheet-panel {
  background: rgba(20, 20, 24, 0.97);
}

html.app-ui:root[data-theme="light"] .tab-bar {
  background: rgba(20, 20, 24, 0.94);
}

:root[data-theme="light"] .toast {
  background: #17181c;
}

/* page pieces that were drawn white-on-dark */
:root[data-theme="light"] .member {
  border-color: var(--border);
  background: var(--surface);
}

:root[data-theme="light"] .panel {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .welcome {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(185, 34, 34, 0.1), transparent 60%),
    var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .welcome-step,
:root[data-theme="light"] .coming-item,
:root[data-theme="light"] .imp-summary div,
:root[data-theme="light"] .svc-chip,
:root[data-theme="light"] .svc-opt {
  background: var(--surface);
}

:root[data-theme="light"] .coming-item.soon small,
:root[data-theme="light"] .imp-bad,
:root[data-theme="light"] .imp-error {
  color: #b92222;
}

:root[data-theme="light"] .imp-done {
  color: #1d7a45 !important;
}

:root[data-theme="light"] .svc-opt.on {
  background: rgba(185, 34, 34, 0.1);
}

/* ============================== Removing a title: Undo, quick actions ============================== */

/* a message with a button ("Removed · Undo") */
.toast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(520px, calc(100vw - 24px));
  padding: 7px 7px 7px 18px;
  border-radius: 26px;
}

/* the words take the room that's left (two lines at most on a small phone); the button
   never shrinks or spills out of the pill */
.toast.has-action .toast-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.toast.has-action.show {
  pointer-events: auto;
}

.toast-action {
  flex: none;
  min-height: 36px;
  padding: 7px 16px;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.toast-action:hover {
  background: var(--accent-hover);
}

/* quick actions: long-press a poster (phones) or right-click it (computers) */
.quick-modal {
  max-width: 380px;
  padding: 18px;
}

.qa-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 44px 14px 0;
}

.qa-head img {
  width: 54px;
  height: 81px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.qa-head div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.qa-head strong {
  font-size: 17px;
  line-height: 1.25;
}

.qa-head small {
  color: rgba(255, 255, 255, 0.6);
}

.qa-list {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.qa-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.qa-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.qa-row i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.qa-row .fa-heart.fa-solid {
  color: #ff5a5f;
}

.qa-row .fa-bookmark.fa-solid,
.qa-row .fa-star {
  color: var(--gold);
}

.qa-row.qa-danger {
  color: #ff8a84;
}

.qa-row.qa-danger i {
  border-color: rgba(185, 34, 34, 0.35);
  background: rgba(185, 34, 34, 0.16);
  color: #ff6b63;
}

.qa-row.qa-danger:hover {
  background: rgba(185, 34, 34, 0.14);
}

/* phones: the menu comes up from the bottom, like a native sheet */
@media (max-width: 600px) {
  .overlay:has(.quick-modal) {
    align-items: flex-end;
    padding: 0;
  }

  .quick-modal {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
  }
}

/* the phone's own long-press menu (save image / open link) would cover ours */
.movie-item img,
.movie-item a {
  -webkit-touch-callout: none;
}

/* hover preview: the trash button turns red */
.hp-btn.hp-remove:hover {
  border-color: transparent;
  background: rgba(185, 34, 34, 0.9);
  color: #fff;
}

/* right-click on a poster (computers): the menu sits on the poster, exactly its size,
   over a blurred, darkened copy of the poster */
.qa-card {
  position: absolute;
  z-index: 95; /* above the cards, below the navbar (like the hover preview) */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.qa-card.show {
  opacity: 1;
  transform: none;
}

.qa-card::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  background: linear-gradient(rgba(12, 12, 14, 0.62), rgba(12, 12, 14, 0.8)), var(--qa-poster) center / cover;
  filter: blur(14px) saturate(140%);
}

.qa-p-title {
  flex: none;
  overflow: hidden;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
}

.qa-p-list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 2px;
}

.qa-p-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.qa-p-row:hover {
  background: rgba(255, 255, 255, 0.14);
}

.qa-p-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-p-row i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

.qa-p-row.on .fa-bookmark,
.qa-p-row.on .fa-star {
  color: var(--gold);
}

.qa-p-row.on .fa-heart {
  color: #ff5a5f;
}

.qa-p-row.danger {
  color: #ff8a84;
}

.qa-p-row.danger i {
  border-color: rgba(185, 34, 34, 0.45);
  background: rgba(185, 34, 34, 0.25);
  color: #ff6b63;
}

.qa-p-row.danger:hover {
  background: rgba(185, 34, 34, 0.3);
}

/* small posters (posters-only rows): tighter rows */
.qa-card.compact {
  padding: 8px 6px 6px;
  gap: 2px;
}

.qa-card.compact .qa-p-row {
  gap: 8px;
  padding: 3px 5px;
  font-size: 12.5px;
}

.qa-card.compact .qa-p-row i {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* long-press on a phone opens the quick menu, not text / picture selection */
.movie-item,
.quick-modal,
.qa-card {
  -webkit-user-select: none;
  user-select: none;
}

.movie-item img {
  -webkit-user-drag: none;
}

/* ============================== Match % (js/services/taste.js) ============================== */

.match {
  color: #6fcf8f;
  font-weight: 700;
  white-space: nowrap;
}

.match.high {
  color: #46d369; /* Netflix green */
}

/* on the poster (bottom-right corner): just the number, "86%" */
.match-pill {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #6fcf8f;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.match-pill.high {
  color: #46d369;
}

/* posters only (the switch in the profile menu, and always on phones / tablets): no pill,
   the match is in the hover preview instead */
html.posters-only .match-pill,
html.app-ui .match-pill,
html.tablet .match-pill {
  display: none;
}

/* "Match %" switched off in the profile menu: not on posters, not in the hover preview.
   Only with Poster details on: with posters only the hover preview always keeps it */
html.no-match:not(.posters-only) .match-pill,
html.no-match:not(.posters-only) .hover-preview .match,
html.no-match:not(.posters-only) .hover-preview .match + .dot {
  display: none;
}

/* a switch that can't be used right now (Settings → Match % while Poster details is off) */
.menu-switch.disabled,
.sv-row.disabled .sv-switch {
  opacity: 0.4;
  cursor: not-allowed;
}

.menu-switch.disabled .switch-track,
.sv-row.disabled .switch-track {
  pointer-events: none;
}

:root[data-theme="light"] .match {
  color: #1f8a4c;
}

/* ============================== Remind me ============================== */

.action-circle .icon.t-remind.on .bubble,
.qa-p-row.on .fa-bell,
.qa-row .fa-bell.fa-solid {
  color: var(--gold);
}

.coming-item strong .fa-bell {
  color: var(--gold);
  font-size: 0.85em;
}

/* ============================== Your own lists ============================== */

.lists-modal {
  max-width: 420px;
}

.lists-modal h3 {
  margin: 0 0 2px;
  font-size: 21px;
  font-weight: 800;
}

.lm-for {
  margin: 0 44px 14px 0;
  color: rgba(255, 255, 255, 0.6);
}

.lm-lists {
  display: grid;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.lm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.lm-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.lm-row i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

.lm-row.on i {
  color: #46d369;
}

.lm-row span {
  flex: 1;
}

.lm-row small {
  color: rgba(255, 255, 255, 0.45);
}

.lm-empty {
  margin: 8px;
  color: rgba(255, 255, 255, 0.6);
}

.lm-new {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.lm-new .input {
  flex: 1;
  min-width: 0;
}

.lm-new .btn,
.wl-new .btn,
.wl-list-tools .btn {
  border-radius: 999px;
}

/* Watchlist page: New list, the list switch row, Rename / Delete */
.wl-new {
  margin-top: 24px;
}

.wl-new-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
}

.wl-new-form[hidden],
.wl-new-btn[hidden] {
  display: none;
}

.wl-new-form .input {
  flex: 1 1 220px;
}

.wl-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
}

.wl-switch-row .wl-switch {
  flex-wrap: wrap;
  margin-bottom: 0;
  border-radius: 22px;
}

.wl-switch-row .wl-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--glass-text);
  cursor: pointer;
}

.wl-list-tools {
  display: flex;
  gap: 8px;
  margin: -6px 0 16px;
}

.wl-list-tools[hidden] {
  display: none;
}

.wl-list-tools .wl-delete {
  color: #ff8a84;
}

/* ============================== Title page: franchise, X-Ray ============================== */

.col-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: -4px 0 6px;
  color: var(--text-muted);
  font-size: 14px;
}

.col-bar {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg-hover);
}

.col-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.col-progress.done .col-bar span {
  background: #46d369;
}

.col-progress.done > span {
  color: #46d369;
  font-weight: 600;
}

.t-xray .t-section-title i {
  color: var(--gold);
}

/* the tagline, like the line on a poster */
.xr-tagline {
  position: relative;
  margin: 0 0 22px;
  padding: 26px 28px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(185, 34, 34, 0.28), transparent 55%), var(--glass-bg);
  color: var(--text);
  font-size: clamp(20px, 2.6vw, 30px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

/* the cards: glass, a small red label on top, the fact large */
.xr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.xr-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
}

.xr-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xr-label i {
  margin-right: 5px;
  color: var(--accent-hover);
}

/* budget vs box office */
.xr-money {
  grid-column: span 2;
}

@media (max-width: 700px) {
  .xr-money {
    grid-column: auto;
  }
}

.xr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xr-verdict {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
}

.xr-verdict.gold {
  background: rgba(245, 197, 24, 0.16);
  color: var(--gold);
}

.xr-verdict.green {
  background: rgba(70, 211, 105, 0.16);
  color: #46d369;
}

.xr-verdict.grey {
  background: var(--glass-bg-hover);
  color: var(--text-muted);
}

.xr-verdict.red {
  background: rgba(185, 34, 34, 0.2);
  color: #ff6b63;
}

.xr-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xr-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.xr-bar-top b {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.xr-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg-hover);
}

.xr-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.xr-bar i.budget {
  background: rgba(255, 255, 255, 0.45);
}

.xr-bar i.gross {
  background: linear-gradient(90deg, var(--accent), #ff6b63);
  box-shadow: 0 0 14px rgba(185, 34, 34, 0.5);
}

/* the release date */
.xr-big {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.xr-date small {
  margin-top: -6px;
  color: var(--text-muted);
  font-size: 14px;
}

/* awards: gold */
.xr-awards {
  border-color: rgba(245, 197, 24, 0.3);
  background: radial-gradient(120% 120% at 100% 0%, rgba(245, 197, 24, 0.16), transparent 60%), var(--glass-bg);
}

.xr-awards .xr-label i {
  color: var(--gold);
}

.xr-awards p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* 🏆 2 / Oscars won / 132 wins · 139 nominations */
.xr-award-big {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}

.xr-award-big i {
  font-size: 26px;
  filter: drop-shadow(0 0 12px rgba(245, 197, 24, 0.45));
}

.xr-award-big b {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.xr-award-name {
  margin-top: -4px;
  font-size: 16px;
  font-weight: 700;
}

.xr-award-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.xr-award-stats:empty {
  display: none;
}

.xr-award-stats span {
  padding: 4px 12px;
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.08);
  color: var(--text-muted);
  font-size: 13px;
}

.xr-award-stats b {
  color: var(--text);
}

/* countries: their flags */
.xr-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

/* each logo in its own colours on a light chip (logos with their own background stay readable) */
.xr-logo {
  display: inline-grid;
  place-items: center;
  height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* (a link to the studio's / network's page: lifts a little when pointed at) */
a.xr-logo,
a.xr-chip {
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.xr-logo:hover,
a.xr-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.xr-logo img {
  display: block;
  max-width: 110px;
  max-height: 28px;
  object-fit: contain;
}

:root[data-theme="light"] .xr-logo {
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
}

.xr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-hover);
  font-size: 13.5px;
  font-weight: 600;
}

.xr-chip img {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}

.xr-flags {
  gap: 8px;
}

.xr-lang {
  color: var(--text-muted);
  font-size: 14px;
}

.xr-lang i {
  margin-right: 4px;
  color: var(--accent-hover);
}

.xr-lang b {
  color: var(--text);
}

/* the card's content centred in the space under its label */
.xr-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  text-align: center;
}

.xr-date .xr-body small {
  margin-top: 0;
}

.xr-body .xr-flags {
  justify-content: center;
}

/* the main studio / network, big enough to read: a wide logo up to 200px across, a square one (Warner
   Bros.' shield) up to 78px tall */
.xr-brands .xr-logo {
  height: auto;
  min-height: 64px;
  padding: 12px 22px;
  border-radius: 16px;
}

.xr-brands .xr-logo img {
  max-width: 200px;
  max-height: 78px;
}

.xr-brands .xr-logo.tone-color,
.xr-brands .xr-logo.tone-mono-dark,
.xr-brands .xr-logo.tone-mono-light {
  padding: 4px 6px;
}

/* "Where you've seen the cast": a card per person */
.xr-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.xr-cast {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  transition: border-color 0.2s, background 0.2s;
}

.xr-cast:hover {
  border-color: rgba(185, 34, 34, 0.45);
  background: var(--glass-bg-hover);
}

.xr-cast-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.xr-face {
  width: 60px;
  height: 60px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(144, 13, 9, 0.25);
}

.xr-cast-head span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.xr-cast-head strong {
  overflow: hidden;
  font-size: 16.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-cast-head small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-cast-label {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xr-line {
  width: 60%;
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--glass-border);
}

.xr-sub {
  margin: 24px 0 10px;
  font-size: 16px;
}

.xr-sub i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.xr-noimg {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--glass-bg-hover);
  color: var(--text-muted);
}

/* ============================== Movie Nights Wrapped ============================== */

html.wr-lock {
  overflow: hidden;
}

.diary .wr-open {
  width: 100%;
  margin-bottom: 4px;
  border-radius: 999px;
}

.wrapped {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.wrapped.open {
  display: grid;
}

.wr-card {
  position: relative;
  display: flex;
  width: min(420px, 100%);
  height: min(760px, calc(100dvh - 32px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 56px 28px 36px;
  border-radius: 28px;
  background: radial-gradient(120% 80% at 20% 0%, #b92222, transparent 60%), radial-gradient(120% 80% at 100% 100%, #3a0d5c, transparent 60%), #120f16;
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: wr-in 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes wr-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.wr-card small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wr-card h2 {
  margin: 0;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.wr-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.wr-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.5;
}

.wr-card .wr-note {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.wr-big {
  font-family: "Poppins", Inter, sans-serif;
  font-size: clamp(90px, 28vw, 140px);
  font-weight: 800;
  line-height: 1;
}

.wr-poster {
  width: 62%;
  max-width: 230px;
  aspect-ratio: 2 / 3;
  margin: 8px 0;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.wr-face {
  width: 150px;
  height: 150px;
  margin: 8px 0;
  border: 4px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  object-fit: cover;
}

.wr-score {
  color: var(--gold);
  font-size: 30px;
  font-weight: 800;
}

.wr-bars {
  display: grid;
  width: 100%;
  gap: 10px;
  margin-top: 14px;
}

.wr-bar {
  display: grid;
  grid-template-columns: 110px 1fr 28px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  text-align: left;
}

.wr-bar div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.wr-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.wr-cols {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  height: 150px;
  margin-top: 18px;
}

.wr-cols div {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.wr-cols i {
  width: 100%;
  min-height: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
}

.wr-cols .on i {
  background: #fff;
}

.wr-cols span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.wr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 14px 0;
}

.wr-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.wr-grid b {
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-grid span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.wr-share {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  border-radius: 999px;
}

/* a different mood per card */
.wr-card.wr-count {
  background: radial-gradient(120% 80% at 80% 0%, #e0393e, transparent 60%), radial-gradient(120% 80% at 0% 100%, #7a1010, transparent 60%), #150c0c;
}

.wr-card.wr-genres {
  background: radial-gradient(120% 80% at 0% 0%, #2a5bd7, transparent 60%), radial-gradient(120% 80% at 100% 100%, #0d2a5c, transparent 60%), #0b0f1a;
}

.wr-card.wr-months {
  background: radial-gradient(120% 80% at 100% 0%, #1f9d6b, transparent 60%), radial-gradient(120% 80% at 0% 100%, #0d3d2a, transparent 60%), #08130e;
}

.wr-card.wr-top,
.wr-card.wr-first {
  background: radial-gradient(120% 80% at 50% 0%, #c79800, transparent 60%), radial-gradient(120% 80% at 50% 100%, #4d2a00, transparent 60%), #140f05;
}

.wr-card.wr-actor {
  background: radial-gradient(120% 80% at 0% 0%, #9b2fae, transparent 60%), radial-gradient(120% 80% at 100% 100%, #3a0d5c, transparent 60%), #120a16;
}

.wr-card.wr-avg {
  background: radial-gradient(120% 80% at 100% 0%, #ff7a1a, transparent 60%), radial-gradient(120% 80% at 0% 100%, #5c1f0d, transparent 60%), #160c07;
}

/* story bars, close button and the two tap zones sit on the card: the stage is exactly the
   card's size */
.wrapped .wr-stage {
  position: relative;
  width: min(420px, 100%);
  height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
  border-radius: 28px;
}

.wrapped .wr-stage .wr-card {
  width: 100%;
  height: 100%;
}

/* the tap zones are invisible: no focus box after a tap (keyboard users get ← / →) */
.wr-nav:focus {
  outline: none;
}

.wr-bars-top {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  gap: 4px;
}

.wr-bars-top span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
}

.wr-bars-top span.done,
.wr-bars-top span.now {
  background: #fff;
}

.wr-close {
  position: absolute;
  top: 30px;
  right: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
}

.wr-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  border: 0;
  background: none;
  cursor: pointer;
}

.wr-prev {
  left: 0;
  width: 35%;
}

.wr-next {
  right: 0;
  width: 65%;
}

/* ============================== Wrapped 2: story player, motion, living backgrounds ============================== */

/* the card: a dark base, its colours (--c1 --c2 --c3) drift behind the content */
.wrapped .wr-card {
  --c1: #b92222;
  --c2: #3a0d5c;
  --c3: #e0393e;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #0d0b10;
  animation: none;
}

.wr-card.wr-count { --c1: #e0393e; --c2: #7a1010; --c3: #ff7a1a; }
.wr-card.wr-first { --c1: #c79800; --c2: #4d2a00; --c3: #e0393e; }
.wr-card.wr-genres { --c1: #2a5bd7; --c2: #0d2a5c; --c3: #9b2fae; }
.wr-card.wr-months { --c1: #1f9d6b; --c2: #0d3d2a; --c3: #2a5bd7; }
.wr-card.wr-top { --c1: #f5c518; --c2: #7a4a00; --c3: #e0393e; }
.wr-card.wr-actor { --c1: #9b2fae; --c2: #3a0d5c; --c3: #e0393e; }
.wr-card.wr-avg { --c1: #ff7a1a; --c2: #5c1f0d; --c3: #f5c518; }
.wr-card.wr-sum { --c1: #b92222; --c2: #3a0d5c; --c3: #f5c518; }

/* cards slide in the way you're going */
.wr-card.from-right .wr-content { animation: wr-slide-r 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.wr-card.from-left .wr-content { animation: wr-slide-l 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes wr-slide-r {
  from { opacity: 0; transform: translateX(40px) scale(0.98); }
}

@keyframes wr-slide-l {
  from { opacity: 0; transform: translateX(-40px) scale(0.98); }
}

/* living background: three soft blobs drifting */
.wr-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wr-blob {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.75;
  animation: wr-drift 14s ease-in-out infinite alternate;
}

.wr-blob.b1 { top: -20%; left: -20%; background: var(--c1); }
.wr-blob.b2 { right: -30%; bottom: -20%; background: var(--c2); opacity: 0.9; animation-duration: 18s; animation-direction: alternate-reverse; }
.wr-blob.b3 { top: 40%; left: 30%; width: 45%; background: var(--c3); opacity: 0.35; animation-duration: 11s; }

@keyframes wr-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18%, 12%) scale(1.15); }
  100% { transform: translate(-10%, 22%) scale(0.95); }
}

/* a light film grain on top of the colours */
.wr-grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* a wall of this year's posters scrolling slowly behind (intro, count, summary) */
.wr-wall {
  position: absolute;
  inset: -10% -20%;
  display: flex;
  gap: 10px;
  opacity: 0.22;
  transform: rotate(-12deg);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}

.wr-wall-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  animation: wr-scroll var(--s) linear infinite;
}

.wr-wall-col:nth-child(2) { animation-direction: reverse; }

.wr-wall-col img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
}

@keyframes wr-scroll {
  to { transform: translateY(-50%); }
}

/* the poster itself, blurred and huge, behind a poster card */
.wr-blur {
  position: absolute;
  inset: -40px;
  background: center / cover;
  filter: blur(40px) saturate(150%);
  opacity: 0.45;
  transform: scale(1.1);
}

/* the content, above all that */
.wr-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 28px 40px;
  text-align: center;
}

/* each line slides up in turn */
.wr-a {
  animation: wr-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes wr-up {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
}

/* posters / photos pop in */
.wr-pop {
  animation-name: wr-pop;
  animation-duration: 0.9s;
}

@keyframes wr-pop {
  0% { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  60% { opacity: 1; transform: scale(1.05) rotate(2deg); }
}

.wr-card .wr-poster {
  width: 64%;
  max-width: 240px;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* the best of the year: gently tilting, with a gold glow */
.wr-tilt {
  animation: wr-tilt 5s ease-in-out 1s infinite;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(245, 197, 24, 0.45) !important;
}

@keyframes wr-tilt {
  0%, 100% { transform: perspective(700px) rotateY(-8deg) rotateX(3deg); }
  50% { transform: perspective(700px) rotateY(8deg) rotateX(-3deg); }
}

/* the actor: a pulsing ring */
.wr-ring {
  position: relative;
}

.wr-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--c1);
  border-radius: 50%;
  animation: wr-pulse 2.2s ease-out 1s infinite;
}

@keyframes wr-pulse {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.35); }
}

.wr-card .wr-face {
  width: 170px;
  height: 170px;
  border: 4px solid #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* big numbers and the year */
.wr-card .wr-big {
  font-size: clamp(96px, 30vw, 150px);
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
}

.wr-year {
  display: inline-block;
  font-family: "Poppins", Inter, sans-serif;
  font-size: clamp(90px, 28vw, 140px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #fff, var(--c3), #fff, var(--c3));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wr-shine 6s linear infinite;
}

@keyframes wr-shine {
  to { background-position: 300% 0; }
}

.wr-glow {
  text-shadow: 0 0 30px var(--c1);
}

.wr-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  animation: wr-breathe 2.4s ease-in-out infinite;
}

@keyframes wr-breathe {
  50% { opacity: 0.55; }
}

.wr-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wr-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 600;
}

.wr-card .wr-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 34px;
  text-shadow: 0 0 24px rgba(245, 197, 24, 0.6);
}

.wr-tens {
  color: var(--gold);
  letter-spacing: 2px;
}

/* genre bars grow */
.wr-card .wr-bar i {
  width: var(--w);
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
  animation: wr-grow-x 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d);
}

@keyframes wr-grow-x {
  from { width: 0; }
}

/* month columns rise */
.wr-card .wr-cols i {
  height: var(--h);
  animation: wr-grow-y 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d);
}

.wr-card .wr-cols .on i {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

@keyframes wr-grow-y {
  from { height: 0; }
}

/* summary */
.wr-card .wr-grid b .wr-num {
  color: inherit;
  font-size: inherit;
}

.wr-card .wr-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.wr-actions {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.wr-actions .btn {
  border-radius: 999px;
}

.wr-actions .wr-replay {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* confetti on the last card */
.wr-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.wr-confetti i {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: wr-fall var(--t) cubic-bezier(0.25, 0.6, 0.4, 1) var(--d) forwards;
}

@keyframes wr-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), 820px) rotate(calc(var(--r) + 720deg)); }
}

/* story bars fill up while a card plays; they stop while you hold */
.wr-bars-top span {
  position: relative;
  overflow: hidden;
}

.wr-bars-top span i {
  position: absolute;
  inset: 0;
  width: 0;
  background: #fff;
}

.wr-bars-top span.done i {
  width: 100%;
}

.wr-bars-top span.now {
  background: rgba(255, 255, 255, 0.3);
}

.wr-bars-top span.now i {
  animation: wr-fill var(--t) linear forwards;
}

@keyframes wr-fill {
  to { width: 100%; }
}

.wrapped.paused .wr-bars-top span.now i,
.wrapped.paused .wr-blob,
.wrapped.paused .wr-wall-col {
  animation-play-state: paused;
}

/* the last card stays: its bar is simply full */
.wr-card.wr-sum ~ .wr-nav {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .wr-blob,
  .wr-wall-col,
  .wr-tilt,
  .wr-ring::after,
  .wr-year,
  .wr-hint {
    animation: none !important;
  }
}

/* ============================== Profile page (profile.html): the site's own style ==============================
   Built from what the rest of the site uses: a header like a title page, X-Ray glass cards
   (.xr-card / .xr-label), poster rows (.movie-row + cards), Home's Top 10. Only .pv is styled here. */

.pv,
.pv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* poster rows scroll inside, never widen the page */
  gap: 28px;
}

.pv-body[hidden] {
  display: none;
}

/* header: a blurred backdrop from your favourite, like a title page */
.pv-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: #0b0b0c;
}

.pv-backdrop {
  position: absolute;
  inset: 0;
}

.pv-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.6;
}

.pv-backdrop .pv-backdrop-blur {
  filter: blur(30px) saturate(140%);
  transform: scale(1.2);
}

.pv-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.96) 20%, rgba(11, 11, 12, 0.55) 60%, rgba(11, 11, 12, 0.3)),
    linear-gradient(to top, #0b0b0c 0%, transparent 60%);
}

.pv-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 44px 40px;
}

.pv-avatar {
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, #b92222, #ff6b63);
  box-shadow: 0 18px 50px rgba(144, 13, 9, 0.5);
}

.pv-avatar img {
  display: block;
  width: 150px;
  height: 150px;
  border: 4px solid #0b0b0c;
  border-radius: 50%;
  object-fit: cover;
}

.pv-who {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: #fff;
}

.pv-who h1 {
  margin: 0;
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.pv-who .p-joined {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.pv-who .p-joined .dot {
  opacity: 0.5;
}

.pv-actions,
.pv .name-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.pv-actions[hidden],
.pv .name-form[hidden],
.pv .p-signin[hidden],
.pv .pv-edit[hidden] {
  display: none;
}

/* glass pill buttons, like on a title page */
.pv-actions .btn,
.pv .name-form .btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font-weight: 600;
}

.pv-actions .btn:hover,
.pv .name-form .btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.pv-actions .btn-primary,
.pv .name-form .btn-primary {
  border-color: transparent;
  background: var(--accent);
}

.pv .name-form .input {
  width: min(300px, 70vw);
  border-radius: 999px;
}

/* stat cards: X-Ray cards with the number large */
.pv .pv-stats,
.pv .pv-charts {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* three counters in a row, the month chart under them */
.pv .pv-diary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pv .pv-stat {
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.pv a.pv-stat:hover {
  border-color: rgba(185, 34, 34, 0.45);
  background: var(--glass-bg-hover);
}

.pv-big {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pv-stat small,
.pv-caption {
  color: var(--text-muted);
  font-size: 13px;
}

.pv-caption b {
  color: var(--text);
}

.pv-progress {
  margin-top: 4px;
}

/* Wrapped: a glass banner with the red glow (like the X-Ray tagline) */
.pv-wrapped {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 150px;
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(185, 34, 34, 0.38), transparent 60%), var(--glass-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.pv-wrapped:hover {
  border-color: rgba(185, 34, 34, 0.5);
}

.pv-wrapped-art {
  position: absolute;
  top: -24px;
  right: 150px;
  bottom: -24px;
  display: flex;
  gap: 10px;
  opacity: 0.35;
  transform: rotate(-8deg);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent);
}

.pv-wrapped-art img {
  width: 92px;
  height: 138px;
  border-radius: 10px;
  object-fit: cover;
  align-self: center;
}

.pv-wrapped-text {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.pv-wrapped-text strong {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pv-wrapped-text > span:last-child {
  color: var(--text-muted);
  font-size: 14.5px;
}

.pv-wrapped-play {
  position: relative;
  flex: none;
}

/* section headings: the site's row heads, a red icon in front */
.pv .row-head h2 i {
  margin-right: 8px;
  color: var(--accent-hover);
  font-size: 0.8em;
}

.pv-section .diary-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.pv .pv-row {
  margin-top: 18px;
}

.pv-empty {
  margin: 0;
  color: var(--text-muted);
}

/* month columns / rating columns in the red accent */
.pv-months-card {
  grid-column: 1 / -1;
}

.pv-months {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 160px;
}

.pv-month {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pv-month-num {
  height: 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.pv-month-bar {
  display: flex;
  flex: 1;
  align-items: flex-end;
  width: 100%;
  max-width: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--glass-bg-hover);
}

.pv-month-bar i {
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff6b63, var(--accent));
}

.pv-month.now .pv-month-bar i {
  box-shadow: 0 0 16px rgba(185, 34, 34, 0.6);
}

.pv-month small {
  color: var(--text-muted);
  font-size: 11.5px;
}

.pv-month.now small {
  color: var(--text);
  font-weight: 700;
}

/* bars (decades, by type) */
.pv-bars {
  display: grid;
  gap: 10px;
}

.pv-bar {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.pv-bar span {
  color: var(--text-muted);
  font-weight: 600;
}

.pv-bar div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg-hover);
}

.pv-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff6b63);
}

.pv-bar b {
  text-align: right;
}

.pv .pv-top {
  margin-top: 0;
}

.pv .p-guest .guest-state {
  max-width: none;
  margin: 0;
}

@media (max-width: 700px) {
  .pv-hero-inner {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px 20px;
    text-align: center;
  }

  .pv-who {
    align-items: center;
  }

  .pv-who .p-joined,
  .pv-actions,
  .pv .name-form {
    justify-content: center;
  }

  .pv-avatar img {
    width: 120px;
    height: 120px;
  }

  .pv .pv-stats,
  .pv .pv-diary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pv-wrapped {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  .pv-wrapped-art {
    right: -40px;
    opacity: 0.22;
  }

  .pv-months {
    gap: 4px;
  }
}

/* ============================== Settings page (settings.html): the site's own style ==============================
   X-Ray glass cards with a small red label, red icon circles, pill buttons and the site's red
   pill switch. Only .sv is styled here. */

.sv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* you, on top: like the profile menu's header */
.sv-account {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(185, 34, 34, 0.28), transparent 55%), var(--glass-bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s;
}

.sv-account:hover {
  border-color: rgba(185, 34, 34, 0.45);
}

.sv-account img {
  width: 70px;
  height: 70px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px rgba(144, 13, 9, 0.28), 0 10px 28px rgba(0, 0, 0, 0.45);
}

.sv-account .sv-name strong {
  font-size: 22px;
}

.sv-account-btn {
  flex: none;
  border-radius: 999px;
}

.sv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.sv-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.sv .sv-card {
  gap: 14px;
  padding: 20px 22px;
}

.sv .sv-card[hidden] {
  display: none;
}

/* a row: red icon circle, name, the control on the right */
.sv-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sv-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(185, 34, 34, 0.18);
  color: #ff6b63;
  font-size: 15px;
}

.sv-name {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sv-name strong {
  font-size: 15.5px;
  font-weight: 700;
}

.sv-name small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.sv-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sv-note i {
  margin-right: 4px;
  color: var(--accent-hover);
}

.sv-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sv .btn {
  border-radius: 999px;
}

.sv label.btn {
  cursor: pointer;
}

.sv .input {
  width: 100%;
  border-radius: 999px;
}

/* Dark | Light: the site's red pill switch */
.sv .sv-theme .top10-tab i {
  margin-right: 4px;
}

/* delete: set apart */
.sv-danger {
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}

.sv-danger .sv-ic {
  background: rgba(185, 34, 34, 0.28);
}

/* the import tool inside its card: the card's label already says "Import" */
.sv .import-panel > h2 {
  display: none;
}

.sv .import-panel > .help:first-of-type {
  margin-top: 0;
}

/* streaming services and members, inside their cards */
.sv .services {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv .p-guest .guest-state {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .sv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sv-account {
    flex-wrap: wrap;
  }

  .sv-account-btn {
    width: 100%;
  }

  .sv-row {
    flex-wrap: wrap;
  }

  /* the label keeps its width; the switch goes under it */
  .sv-row .sv-name {
    min-width: 160px;
  }

  .sv-row .sv-theme {
    margin-left: 54px;
  }
}

/* ============================== Profile page: motion and details ==============================
   .pv-anim blocks play when they scroll into view (js adds .in); .no-anim = end state straight away. */

/* cards rise in */
.pv .pv-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, background 0.2s;
}

.pv .pv-anim.in {
  opacity: 1;
  transform: none;
}

.pv .pv-stats .pv-anim:nth-child(2),
.pv .pv-diary .pv-anim:nth-child(2) { transition-delay: 0.06s; }
.pv .pv-stats .pv-anim:nth-child(3),
.pv .pv-diary .pv-anim:nth-child(3) { transition-delay: 0.12s; }
.pv .pv-stats .pv-anim:nth-child(4),
.pv .pv-diary .pv-anim:nth-child(4) { transition-delay: 0.18s; }
.pv .pv-stats .pv-anim:nth-child(5) { transition-delay: 0.24s; }
.pv .pv-stats .pv-anim:nth-child(6) { transition-delay: 0.3s; }

.pv .no-anim,
.pv .no-anim * {
  transition: none !important;
  animation: none !important;
}

/* stat cards: 3 a row (2 on phones), room for the poster fan on the right */
.pv .pv-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pv .pv-stat {
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.pv .pv-stat:has(.pv-fan) > :not(.pv-fan):not(.xr-label) {
  max-width: calc(100% - 110px);
}

.pv .pv-stat > :not(.pv-fan) {
  position: relative;
  z-index: 1;
}

.pv-fan {
  position: absolute;
  right: 18px;
  bottom: -16px;
  width: 120px;
  height: 130px;
  pointer-events: none;
}

.pv-fan img {
  position: absolute;
  right: calc(var(--n) * 20px);
  bottom: 0;
  width: 72px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  transform: rotate(calc(8deg - var(--n) * 8deg));
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pv-fan img:nth-child(1) { z-index: 3; }
.pv-fan img:nth-child(2) { z-index: 2; }
.pv-fan img:nth-child(3) { z-index: 1; }

.pv .pv-stat:hover .pv-fan img {
  right: calc(var(--n) * 26px);
  transform: rotate(calc(12deg - var(--n) * 12deg)) translateY(-8px);
}

/* the Rated bar fills up */
.pv .pv-progress span {
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.pv .pv-anim.in .pv-progress span {
  width: var(--w);
}

/* five stars filled to your average */
.pv-stars {
  position: relative;
  display: inline-block;
  width: max-content;
  color: var(--glass-bg-hover);
  font-size: 18px;
  letter-spacing: 3px;
}

.pv-stars-on {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  overflow: hidden;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
  transition: width 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.pv .pv-anim.in .pv-stars-on {
  width: var(--s);
}

.pv-stat small b {
  color: var(--text);
}

/* this month vs last month */
.pv-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glass-bg-hover);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.pv-trend.up {
  background: rgba(70, 211, 105, 0.14);
  color: #46d369;
}

.pv-trend.down {
  background: rgba(185, 34, 34, 0.18);
  color: #ff6b63;
}

/* columns (months, ratings) rise one after another */
.pv .pv-month-bar i {
  height: 0;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0ms) + 0.2s);
}

.pv .pv-anim.in .pv-month-bar i {
  height: var(--h);
}

.pv .pv-month-num {
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}

.pv .pv-anim.in .pv-month-num {
  opacity: 1;
}

/* months are buttons: tap one to see its titles */
.pv button.pv-month {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pv button.pv-month:disabled {
  cursor: default;
}

.pv button.pv-month:not(:disabled):hover .pv-month-bar {
  background: rgba(255, 255, 255, 0.12);
}

.pv .pv-month.picked .pv-month-bar i,
.pv .pv-month.peak .pv-month-bar i {
  background: linear-gradient(180deg, #ff8a84, #e0393e);
  box-shadow: 0 0 20px rgba(224, 57, 62, 0.65);
}

.pv .pv-month.picked small,
.pv .pv-month.peak small {
  color: var(--text);
  font-weight: 800;
}

.pv .pv-month.now:not(.picked) small {
  font-weight: 600;
}

.pv-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.pv-card-head small {
  color: var(--text-muted);
  font-size: 12.5px;
}

/* the picked month's posters */
.pv-month-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}

.pv-strip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pv-strip-head small {
  color: var(--text-muted);
}

.pv-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.pv-strip-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  animation: pv-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d);
}

.pv-strip-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}

.pv-strip-item:hover img {
  transform: translateY(-3px);
}

.pv-strip-item b {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold);
  font-size: 11px;
}

.pv-strip-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes pv-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
}

/* the ratings caption: chips */
.pv-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-hover);
  color: var(--text-muted);
  font-size: 12.5px;
}

.pv-chip b {
  color: var(--text);
}

.pv-chip i {
  color: var(--gold);
}

/* decades: bars fill in, the best title under each */
.pv .pv-bar i {
  width: 0;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0ms) + 0.2s);
}

.pv .pv-anim.in .pv-bar i {
  width: var(--w);
}

.pv-decade {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pv-best {
  overflow: hidden;
  margin-left: 82px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-best:hover {
  color: var(--text);
}

.pv-best i {
  margin-right: 3px;
  color: var(--gold);
  font-size: 10px;
}

.pv-best span {
  color: var(--gold);
}

.pv .decade-chart {
  gap: 12px;
}

/* Your taste: ratings across the top, decades and types side by side under it */
.pv .pv-charts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pv .pv-charts .pv-histo-card {
  grid-column: 1 / -1;
}

.pv .pv-histo-cols {
  height: 190px;
}

@media (max-width: 800px) {
  .pv .pv-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* average by type: rings that fill */
@property --pv-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.pv-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
}

.pv-ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pv-ring {
  --pv-p: 0;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #1b1b1f 78%, transparent 79%),
    conic-gradient(from 0deg, #ff6b63, var(--accent) calc(var(--pv-p) * 1%), var(--glass-bg-hover) 0);
  transition: --pv-p 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0ms) + 0.2s);
}

:root[data-theme="light"] .pv-ring {
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(from 0deg, #ff6b63, var(--accent) calc(var(--pv-p) * 1%), var(--glass-bg-hover) 0);
}

.pv .pv-anim.in .pv-ring {
  --pv-p: var(--p);
}

.pv-ring b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pv-ring-item strong {
  font-size: 14px;
}

.pv-ring-item small {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .pv .pv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .pv-fan {
    right: 4px;
    transform: scale(0.6);
    transform-origin: bottom right;
  }

  .pv .pv-stat:has(.pv-fan) > :not(.pv-fan):not(.xr-label) {
    max-width: calc(100% - 60px);
  }

  .pv-ring {
    width: 80px;
    height: 80px;
  }

  .pv-ring b {
    font-size: 20px;
  }

  .pv-best {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv .pv-anim,
  .pv .pv-anim * {
    transition: none !important;
    animation: none !important;
  }
}

/* Settings: today's OMDb lookups as a meter */

.sv-meter-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sv-meter-num {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sv-meter-num b {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
}

.sv-meter-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.sv-meter-pct {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-hover);
  background: rgba(229, 9, 20, 0.14);
}

.sv-meter-pct.high {
  color: #f5b041;
  background: rgba(245, 176, 65, 0.15);
}

.sv-meter-pct.full {
  color: #fff;
  background: var(--accent);
}

.sv-meter-bar {
  height: 10px;
  margin: 10px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sv-meter-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.5);
  transition: width 0.8s ease;
}

.sv-meter-bar.high i {
  background: linear-gradient(90deg, #e67e22, #f5b041);
  box-shadow: 0 0 12px rgba(245, 176, 65, 0.45);
}

.sv-meter-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sv-meter-facts b {
  color: var(--text);
}

.sv-meter-facts i {
  margin-right: 4px;
  color: var(--accent-hover);
}

html[data-theme="light"] .sv-meter-bar {
  background: rgba(0, 0, 0, 0.08);
}

/* Settings: "Admin only" badge on the owner's cards */

/* Discover: posters waiting for the next "Load more" */
.movie-grid > .dc-later {
  display: none !important;
}

/* ============================== Home page: motion ============================== */
/* (html.home-fx is set by js/pages/home.js, and only when motion isn't turned down) */

/* the banner: a slow zoom out on the picture, the text coming in line by line */
html.home-fx .hero-slide {
  overflow: hidden;
}

html.home-fx .hero-slide.active img {
  animation: hm-zoom 9s ease-out both;
}

html.home-fx .hero-slide.active .hero-caption > * {
  animation: hm-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

html.home-fx .hero-slide.active .hero-caption > :nth-child(1) { animation-delay: 0.15s; }
html.home-fx .hero-slide.active .hero-caption > :nth-child(2) { animation-delay: 0.25s; }
html.home-fx .hero-slide.active .hero-caption > :nth-child(3) { animation-delay: 0.35s; }
html.home-fx .hero-slide.active .hero-caption > :nth-child(4) { animation-delay: 0.45s; }
html.home-fx .hero-slide.active .hero-caption > :nth-child(5) { animation-delay: 0.55s; }
html.home-fx .hero-slide.active .hero-caption > :nth-child(n + 6) { animation-delay: 0.65s; }

/* the active dot fills up until the next slide */
html.home-fx .hero-dots button {
  position: relative;
  overflow: hidden;
}

html.home-fx .hero.ticking .hero-dots button.active {
  background: rgba(255, 255, 255, 0.35);
}

html.home-fx .hero.ticking .hero-dots button.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  animation: hm-tick 8s linear both;
}

/* rows: the title slides in, then the posters one after another */
html.home-fx .row-section:not(.in) .row-head,
html.home-fx .row-section:not(.in) .movie-row > * {
  opacity: 0;
}

html.home-fx .row-section.in:not(.shown) .row-head {
  animation: hm-head 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

html.home-fx .row-section.in:not(.shown) .movie-row > * {
  animation: hm-card 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 0.7s;
}

html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(1) { animation-delay: 0.1s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(2) { animation-delay: 0.16s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(3) { animation-delay: 0.22s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(4) { animation-delay: 0.28s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(5) { animation-delay: 0.34s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(6) { animation-delay: 0.4s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(7) { animation-delay: 0.46s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(8) { animation-delay: 0.52s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(9) { animation-delay: 0.58s; }
html.home-fx .row-section.in:not(.shown) .movie-row > :nth-child(10) { animation-delay: 0.64s; }

/* the Top 10 numbers land a moment after their posters */
html.home-fx .row-section.in:not(.shown) .top10-num {
  animation: hm-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s backwards;
}

@keyframes hm-zoom {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}

@keyframes hm-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
}

@keyframes hm-tick {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes hm-head {
  from { opacity: 0; transform: translateX(-24px); }
}

@keyframes hm-card {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
}

@keyframes hm-pop {
  from { opacity: 0; transform: scale(0.4) translateY(20px); }
}

/* ============================== Discover page: motion ============================== */
/* (html.dx-fx is set by js/pages/discover.js, and only when motion isn't turned down)
   Kept calm, like the library pages: nothing goes blank when you switch. */

/* placeholders while the first posters load */
.dx-skeletons > .movie-item.skeleton {
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 14px;
}

/* the chips settle in when the page opens */
html.dx-fx .chips > .chip {
  animation: lb-soft 0.35s ease-out backwards;
}

html.dx-fx .chips > .chip:nth-of-type(2) { animation-delay: 0.02s; }
html.dx-fx .chips > .chip:nth-of-type(3) { animation-delay: 0.04s; }
html.dx-fx .chips > .chip:nth-of-type(4) { animation-delay: 0.06s; }
html.dx-fx .chips > .chip:nth-of-type(5) { animation-delay: 0.08s; }
html.dx-fx .chips > .chip:nth-of-type(n + 6) { animation-delay: 0.1s; }

/* the red pill behind the picked chip glides to each new pick */
.chip-indicator {
  display: none;
}

html.dx-fx .chips {
  position: relative;
}

html.dx-fx .chips > .chip {
  position: relative;
  z-index: 1;
}

html.dx-fx .chips > .chip.active {
  background: transparent;
}

html.dx-fx .chip-indicator {
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.3);
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.32, 0.72, 0, 1), top 0.4s cubic-bezier(0.32, 0.72, 0, 1), width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
}

html.dx-fx .chip-indicator.intro {
  transition: none;
  animation: lb-soft 0.35s ease-out backwards;
}

html.dx-fx .chip-indicator.off {
  opacity: 0;
}

/* the count changes with a quick fade */
html.dx-fx .result-count.dx-count {
  animation: lb-fade 0.3s ease-out;
}

/* posters: a short, soft settle (also the ones "Load more" shows) */
html.dx-fx .movie-grid:not(.dx-skeletons) > .movie-item {
  animation: lb-settle 0.3s ease-out backwards;
  animation-delay: var(--dx-d, 0ms);
}

/* ============================== Library pages (Movies, TV Shows, Anime): motion ============================== */
/* (html.lb-fx is set by js/pages/browse.js, and only when motion isn't turned down)
   Kept calm on purpose: these pages are switched between often, so nothing goes blank. */

/* opening the page: the chips settle in */
html.lb-fx .chips.lb-intro > .chip {
  animation: lb-soft 0.35s ease-out backwards;
}

html.lb-fx .chips.lb-intro > .chip:nth-of-type(2) { animation-delay: 0.03s; }
html.lb-fx .chips.lb-intro > .chip:nth-of-type(3) { animation-delay: 0.06s; }
html.lb-fx .chips.lb-intro > .chip:nth-of-type(n + 4) { animation-delay: 0.09s; }

/* the red pill behind the picked chip glides to each new pick */
html.lb-fx .chips {
  position: relative;
}

html.lb-fx .chips > .chip {
  position: relative;
  z-index: 1;
}

html.lb-fx .chips > .chip.active {
  background: transparent;
}

html.lb-fx .chip-indicator {
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.3);
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.32, 0.72, 0, 1), top 0.4s cubic-bezier(0.32, 0.72, 0, 1), width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
}

html.lb-fx .chip-indicator.intro {
  transition: none;
  animation: lb-soft 0.35s ease-out backwards;
}

html.lb-fx .chip-indicator.off {
  opacity: 0;
}

/* the count changes with a quick fade */
html.lb-fx .result-count.lb-count {
  animation: lb-fade 0.3s ease-out;
}

/* posters: a short, soft settle (never hidden, so the page doesn't flash) */
html.lb-fx .movie-grid > .lb-in {
  animation: lb-settle 0.3s ease-out backwards;
  animation-delay: var(--lb-d, 0ms);
}

html.lb-fx .empty-state:not([hidden]) {
  animation: lb-fade 0.3s ease-out;
}

@keyframes lb-soft {
  from { opacity: 0; transform: translateY(4px); }
}

@keyframes lb-fade {
  from { opacity: 0.3; }
}

@keyframes lb-settle {
  from { opacity: 0.55; transform: translateY(6px); }
}

/* ============================== Pop-ups: dark in both themes, with dark glass inside ============================== */
/* (pop-ups stay dark in light mode; their glass fields, dropdowns and text follow them) */
:root[data-theme="light"] .modal:not(.trailer-modal) {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-pill: #0a0a0b;
  --glass-text: #fff;
  --glass-muted: rgba(255, 255, 255, 0.55);
  --text: #fff;
  --text-muted: #aeaeae;
  --border: rgba(255, 255, 255, 0.12);
  --surface: #17181c;
  --surface-2: #1f2025;
  color: #fff;
}

/* the red switches inside pop-ups show on phones too (the profile menu's hide there) */
html .modal .menu-switch:not([hidden]) {
  display: flex;
}

/* ============================== Questions (UI.confirm / UI.ask) ============================== */

.ui-dialog .notice-icon.danger {
  background: rgba(229, 9, 20, 0.16);
  color: #ff5a5f;
}

.ui-dialog .ui-d-input {
  width: 100%;
  margin: -6px 0 20px;
  padding: 12px 16px;
  font-size: 16px;
}

.ui-d-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.ui-d-buttons .btn {
  min-width: 120px;
  padding: 11px 20px;
  font-weight: 600;
}

.ui-dialog .btn-danger {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.ui-dialog .btn-danger:hover {
  background: var(--accent-hover);
}

/* ============================== Add a title (the site's own pieces) ============================== */

.add-modal {
  max-width: 600px;
  text-align: center;
}

.add-modal h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.at-form {
  text-align: left;
}

.at-search {
  height: 54px;
  margin-bottom: 12px;
  padding-left: 18px;
}

.at-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
}

.at-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.at-field > span:first-child {
  padding-left: 4px;
  color: var(--glass-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.at-field .input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
}

.at-field .glass-select {
  width: 100%;
}

.at-field .glass-select select {
  width: 100%;
}

.at-switches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.at-switch {
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
}

.at-switch > i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(229, 9, 20, 0.16);
  color: #ff6b6f;
  font-size: 13px;
}

.at-switch .switch-track {
  width: 44px;
  height: 26px;
}

.at-error {
  margin: 12px 0 0;
  color: #ff8080;
  font-size: 13.5px;
  text-align: center;
}

.at-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.at-actions .btn {
  padding: 11px 20px;
  font-weight: 600;
}

/* TMDB results: posters, the picked one gets the red ring */
.add-modal .tmdb-results {
  margin: 0 0 8px;
}

.add-modal .tmdb-results button {
  border-radius: 12px;
  background: var(--glass-bg);
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s, transform 0.2s;
}

.add-modal .tmdb-results button:hover {
  border-color: rgba(229, 9, 20, 0.5);
  transform: translateY(-2px);
}

.add-modal .tmdb-results button.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25);
}

.add-modal .tmdb-results span {
  padding: 6px 8px;
}

@media (max-width: 520px) {
  .at-grid,
  .at-switches {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================== Discover without a TMDB key ============================== */

.dx-nokey {
  max-width: 720px;
}

.dx-nokey h2 {
  margin: 10px 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.dk-lead {
  margin: 0 0 16px;
  color: var(--text-muted);
  line-height: 1.55;
}

.dk-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.dk-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.dk-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* ============================== Tier list (tier-list.html): the site's own style ============================== */
/* glass rows with a glowing letter (hot red S down to grey D, --tc), poster tiles that show
   their title and score on hover, a tray of unranked titles fixed to the bottom of the screen,
   and the Quick rank pop-up */

.tl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.tl-actions .btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}

.tl-actions .btn:disabled {
  opacity: 0.45;
}

.tl-board {
  display: grid;
  gap: 10px;
}

.tl-row {
  display: flex;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 13%, transparent), transparent 45%), var(--glass-bg);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

#tier-app.dragging-on .tl-row {
  border-color: rgba(255, 255, 255, 0.16);
}

.tl-row.drag-over {
  border-color: var(--tc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent), 0 12px 34px color-mix(in srgb, var(--tc) 22%, transparent);
  transform: scale(1.005);
}

.tl-label {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 120px;
  border-right: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  cursor: pointer;
  user-select: none;
}

.tl-label b {
  color: var(--tc);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--tc) 70%, transparent);
}

.tl-row[data-tier="S"] .tl-label b {
  color: #ff5a64;
  text-shadow: 0 0 20px rgba(255, 59, 71, 0.9), 0 0 46px rgba(255, 59, 71, 0.5);
}

.tl-row[data-tier="D"] .tl-label b {
  color: #9a9aa3;
  text-shadow: none;
}

.tl-name {
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tl-count {
  color: var(--text-muted);
  font-size: 11.5px;
}

.tl-label:focus-visible {
  outline: 2px solid var(--tc);
  outline-offset: -4px;
}

.tl-drop {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.tl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 14px 18px;
  border: 1.5px dashed var(--glass-border);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}

.tl-drop .tl-empty {
  flex: 1;
  min-height: 118px;
}

.tl-row.drag-over .tl-empty {
  border-color: var(--tc);
  color: var(--text);
}

/* a poster tile: lifts on hover and shows its title and your score */
.tl-item {
  position: relative;
  flex: none;
  width: 88px;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.tl-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.tl-cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 6px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.tl-cap b {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tl-cap small {
  color: #f5b82e;
  font-weight: 700;
}

@media (hover: hover) {
  .tl-item:hover {
    z-index: 1;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
    transform: translateY(-3px) scale(1.05);
  }

  .tl-item:hover .tl-cap {
    opacity: 1;
    transform: none;
  }
}

.tl-item:focus-visible .tl-cap {
  opacity: 1;
  transform: none;
}

.tl-item:active {
  cursor: grabbing;
}

.tl-item.dragging {
  opacity: 0.3;
  transform: scale(0.9);
}

/* phones: the picked poster pulses, the tiers light up to be tapped */
.tl-item.selected {
  box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(229, 9, 20, 0.55);
  animation: tl-pulse 1.2s ease-in-out infinite;
}

#tier-app.picking .tl-label {
  animation: tl-glow 1.4s ease-in-out infinite;
}

/* a franchise: the edges of its other films peek out behind, and how many */
.tl-item.tl-group {
  margin-right: 10px;
  overflow: visible;
  box-shadow: 6px 0 0 -3px #6c6c78, 12px 0 0 -6px #44444d, 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tl-group img {
  border-radius: 12px;
}

.tl-group .tl-cap {
  border-radius: 0 0 12px 12px;
}

.tl-group.selected {
  box-shadow: 6px 0 0 -3px #6c6c78, 12px 0 0 -6px #44444d, 0 0 0 3px var(--accent), 0 0 22px rgba(229, 9, 20, 0.55);
}

.tl-fr {
  position: absolute;
  top: 5px;
  left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.tl-fr i {
  color: var(--accent-hover);
  font-size: 9.5px;
}

/* the switch in the tray: franchises as one, or every film on its own */
.tl-frs {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--glass-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.tl-frs[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
}

/* (less room: just the icon, the same one as on a franchise's poster) */
@media (max-width: 1000px) {
  .tl-frs {
    justify-content: center;
    width: 38px;
    padding: 0;
  }

  .tl-frs span {
    display: none;
  }
}

@media (max-width: 700px) {
  .tl-frs {
    flex: none;
    order: 7;
  }
}

.tl-frs.busy i {
  animation: tl-busy 1s ease-in-out infinite;
}

@keyframes tl-busy {
  50% {
    opacity: 0.35;
  }
}

/* a poster that just moved lands with a pop */
.tl-item.landed {
  animation: tl-land 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tl-pulse {
  50% {
    transform: scale(1.06);
  }
}

@keyframes tl-glow {
  50% {
    background: color-mix(in srgb, var(--tc) 40%, transparent);
  }
}

@keyframes tl-land {
  from {
    opacity: 0.3;
    transform: scale(0.6);
  }
}

/* ---- the tray: unranked titles, fixed to the bottom of the screen ---- */

.tl-tray {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  margin-top: 22px;
  padding: 12px 14px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: rgba(18, 18, 22, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] .tl-tray {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.12);
}

.tl-tray-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tl-tray-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 15px;
}

.tl-tray-title i {
  color: var(--accent-hover);
}

.tl-left {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.tl-search {
  width: 220px;
  height: 40px;
  margin: 0;
  padding: 0 14px;
}

.tl-search input {
  font-size: 14px;
}

.tl-tray .glass-select {
  height: 40px;
}

.tl-fold {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--text);
  cursor: pointer;
}

.tl-fold i {
  transition: transform 0.25s;
}

.tl-tray.folded .tl-fold i {
  transform: rotate(180deg);
}

.tl-tray.folded .tl-pool,
.tl-tray.folded .tl-more {
  display: none;
}

.tl-pool {
  display: flex;
  gap: 10px;
  min-height: 138px;
  margin-top: 8px;
  padding: 8px 2px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 14px;
  transition: background 0.2s;
}

.tl-pool .tl-item {
  width: 82px;
}

.tl-pool .tl-empty {
  flex: 1;
}

.tl-pool.drag-over {
  background: rgba(229, 9, 20, 0.08);
  outline: 2px dashed rgba(229, 9, 20, 0.5);
  outline-offset: -2px;
}

.tl-more {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.tl-more:empty {
  display: none;
}

/* a poster picked (phones): the tiers as round buttons on top of the tray */
.tl-pick {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
}

.tl-tray.picking .tl-pick {
  display: flex;
}

.tl-pick-name {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-pick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tl-pick-tier {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--tc);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tc) 45%, transparent);
  cursor: pointer;
}

.tl-pick .btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
}

/* ---- Quick rank ---- */

.qr-modal {
  max-width: 470px;
  text-align: center;
}

.qr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-right: 44px;
}

.qr-left {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.qr-stage {
  display: grid;
  place-items: center;
  min-height: 370px;
}

.qr-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: qr-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.qr-card.from-left {
  animation-name: qr-in-left;
}

.qr-poster {
  width: 200px;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}

.qr-card h3 {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 800;
}

.qr-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Movies / TV / Anime: the tabs share the window's width (big counts like 1049 still fit) */
.qr-types {
  display: flex;
  width: 100%;
  margin: 0 0 14px;
}

.qr-types[hidden],
.qr-types [hidden] {
  display: none;
}

.qr-types .top10-tab {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 6px;
  white-space: nowrap;
}

.qr-types .top10-tab small {
  opacity: 0.7;
  font-size: 12px;
  font-weight: 700;
}

.qr-pwrap {
  position: relative;
}

/* your own rating, on the poster's corner */
.qr-score {
  position: absolute;
  top: -10px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid rgba(245, 184, 46, 0.55);
  border-radius: 999px;
  background: rgba(20, 16, 8, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.qr-score i {
  color: #f5b82e;
  font-size: 14px;
}

.qr-score.unrated {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.55);
}

.qr-score.unrated i {
  color: rgba(255, 255, 255, 0.45);
}

/* a franchise in Quick rank: its posters fanned out, every film with your score */
.qr-fan .qr-back {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: brightness(0.75);
}

/* (a franchise card has more to show: a smaller poster keeps it in the window) */
.qr-fr .qr-poster {
  width: 150px;
}

.qr-fr h3 {
  font-size: 19px;
}

.qr-fan .qr-back.b1 {
  transform: translateX(-34px) rotate(-7deg) scale(0.92);
}

.qr-fan .qr-back.b2 {
  transform: translateX(34px) rotate(7deg) scale(0.92);
}

.qr-fan {
  isolation: isolate;
}

.qr-frtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--accent-hover);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qr-fr h3 {
  margin-top: 2px;
}

.qr-films {
  display: grid;
  gap: 3px;
  width: min(100%, 340px);
  max-height: 94px;
  margin: 6px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.qr-films li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  text-align: left;
}

.qr-films span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-films b {
  flex: none;
  color: #fff;
  font-size: 12.5px;
}

.qr-films b i {
  color: #f5b82e;
  font-size: 10.5px;
}

.qr-films b.none {
  color: rgba(255, 255, 255, 0.4);
}

.qr-apart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.qr-apart:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.qr-card p.qr-mine {
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.qr-mine b {
  color: #fff;
}

.qr-mine .qr-hint {
  text-shadow: 0 0 10px var(--tc);
}

/* the tier your score points to: a ring and a small gold star */
.qr-tier.suggest {
  position: relative;
  border-color: var(--tc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 45%, transparent), 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent);
}

.qr-tier.suggest::after {
  content: "★";
  position: absolute;
  top: -7px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f5b82e;
  color: #1a1206;
  font-size: 11px;
  line-height: 1;
}

.qr-tiers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.qr-tiers[hidden] {
  display: none;
}

.qr-tier {
  display: grid;
  gap: 2px;
  padding: 10px 2px;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--tc) 22%, transparent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}

.qr-tier b {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 14px var(--tc);
}

.qr-tier small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.qr-tier:hover {
  background: color-mix(in srgb, var(--tc) 42%, transparent);
  transform: translateY(-2px);
}

.qr-tier.hit {
  animation: qr-hit 0.4s ease;
}

.qr-foot {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.qr-foot .btn {
  padding: 10px 18px;
}

.qr-foot .btn:disabled {
  opacity: 0.4;
}

.qr-keys {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.qr-keys kbd {
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
}

.qr-done {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.qr-done i {
  color: #f5b82e;
  font-size: 46px;
  filter: drop-shadow(0 0 16px rgba(245, 184, 46, 0.45));
}

.qr-done h3 {
  margin: 6px 0 0;
  font-size: 22px;
}

.qr-done p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.65);
}

@keyframes qr-in {
  from {
    opacity: 0;
    transform: translateX(40px) rotate(3deg) scale(0.95);
  }
}

@keyframes qr-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px) rotate(-3deg) scale(0.95);
  }
}

@keyframes qr-hit {
  40% {
    background: var(--tc);
    transform: scale(1.12);
  }
}

@media (max-width: 700px) {
  .tl-row {
    min-height: 112px;
    border-radius: 18px;
  }

  .tl-label {
    width: 70px;
  }

  .tl-label b {
    font-size: 36px;
  }

  .tl-name {
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }

  .tl-count {
    font-size: 10.5px;
  }

  .tl-drop {
    gap: 8px;
    padding: 8px;
  }

  .tl-drop .tl-empty {
    min-height: 90px;
    padding: 10px;
    font-size: 12.5px;
  }

  .tl-item,
  .tl-pool .tl-item {
    width: 62px;
    border-radius: 10px;
  }

  .tl-tray {
    padding: 10px 10px 8px;
    border-radius: 20px;
  }

  .tl-search {
    order: 5;
    flex: 1 1 100%;
    width: auto;
  }

  .tl-tray .glass-select {
    flex: 1;
  }

  .tl-tray .glass-select select {
    width: 100%;
  }

  .tl-pool {
    min-height: 104px;
  }

  .qr-stage {
    min-height: 310px;
  }

  .qr-poster {
    width: 160px;
  }

  .qr-score {
    right: -10px;
    font-size: 15px;
  }

  .qr-fr .qr-poster {
    width: 116px;
  }

  .qr-types .top10-tab {
    gap: 4px;
    padding: 7px 4px;
  }
}

/* narrow phones: the counts keep their room, the icons step aside */
@media (max-width: 440px) {
  .qr-types .top10-tab i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-item.selected,
  #tier-app.picking .tl-label,
  .tl-item.landed,
  .qr-card,
  .qr-tier.hit {
    animation: none;
  }
}

/* Tier list on phones: a compact tray (the tiers stay in view) */
@media (max-width: 700px) {
  .tl-tray-head {
    gap: 6px;
  }

  .tl-search {
    order: 5;
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
  }

  .tl-tray .glass-select {
    flex: 0 0 auto;
    order: 6;
    height: 38px;
  }

  /* (sorted by your rating on phones) */
  .tl-tray .glass-select:has(select[name="order"]) {
    display: none;
  }

  /* a poster picked: just the tiers to tap and the posters */
  .tl-tray.picking .tl-tray-head,
  .tl-tray.picking .tl-more {
    display: none;
  }

  .tl-pick {
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 8px;
  }

  .tl-pick-name {
    flex-basis: 100%;
    font-size: 14px;
  }

  .tl-pick-buttons {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
  }

  .tl-pick-tier,
  .tl-pick .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 14px;
  }

  .tl-word {
    display: none;
  }
}

@media (max-width: 700px) {
  /* first row: "Unranked 39" and the fold button; second: search + type */
  .tl-tray-title {
    flex: 1 0 calc(100% - 50px);
  }
}

/* ============================== Continue watching, notes, "out today" ============================== */

/* the episode you're at, on a show's poster (bottom-left; Match % is bottom-right) */
.ep-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.45);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  pointer-events: none;
}

.ep-badge i {
  font-size: 8px;
}

/* title page: your progress (shows) and your notes, side by side */
.t-yours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 0 0 28px;
}

.t-yours:empty {
  display: none;
}

.tp-card .xr-head,
.tn-card .xr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tp-pct {
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 800;
}

.tp-now {
  display: grid;
  gap: 2px;
  margin: 12px 0 10px;
}

.tp-now b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tp-card.done .tp-now b i {
  margin-right: 4px;
  color: #f5b82e;
}

.tp-now small,
.tn-state {
  color: var(--text-muted);
  font-size: 12.5px;
}

.tp-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg-hover);
}

.tp-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.5);
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-card.done .tp-bar i {
  background: linear-gradient(90deg, #d99a16, #f5b82e);
  box-shadow: 0 0 12px rgba(245, 184, 46, 0.45);
}

.tp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tp-actions .btn,
.tp-off .btn {
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 600;
}

.tp-actions .glass-select {
  height: 40px;
}

.tp-lead {
  margin: 10px 0 14px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.tn-text {
  display: block;
  width: 100%;
  min-height: 92px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  resize: vertical;
}

.tn-text:focus {
  border-color: rgba(229, 9, 20, 0.55);
  outline: none;
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
}

/* a red number on the Watchlist link / tab: titles out today */
.nav-links a[href="watchlist.html"],
.tab-bar a[href="watchlist.html"] {
  position: relative;
}

@media (max-width: 520px) {
  .t-yours {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Watchlist page: All / Movies / TV / Anime next to each row's title */
.wl-row .row-head,
.wl-coming .row-head {
  flex-wrap: wrap;
  align-items: center;
}

.wl-type {
  margin: 0 auto 0 6px;
}

.wl-type[hidden] {
  display: none;
}

.wl-type .top10-tab {
  padding: 6px 14px;
  font-size: 13px;
}

@media (max-width: 700px) {
  /* phones: the switch gets its own line under the title */
  .wl-type {
    order: 3;
    margin: 0;
  }

  .wl-type .top10-tab {
    padding: 6px 12px;
    font-size: 12.5px;
  }
}

/* after a switch: the posters settle in, one after another */
.wl-in {
  animation: wl-settle 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--wl-d, 0ms);
}

@keyframes wl-settle {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-in {
    animation: none;
  }
}

/* ============================== Pill switches: the gliding red pill (js/core/layout.js) ============================== */
/* Home's Top 10, the theme in Settings, the Watchlist's switches, the picker's choices */

.has-pill {
  position: relative;
}

.has-pill > button,
.has-pill > a {
  position: relative;
  z-index: 1;
}

/* the picked button lets the pill show through (the pill is its red background now) */
.has-pill > button.active,
.has-pill > button.on,
.has-pill > a.active {
  background: transparent;
  box-shadow: none;
}

.sw-pill {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(144, 13, 9, 0.45);
  pointer-events: none;
  transition: left 0.38s cubic-bezier(0.32, 0.72, 0, 1), top 0.38s cubic-bezier(0.32, 0.72, 0, 1), width 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
}

/* the picker's rows: round pills too */
.pk-seg > .sw-pill {
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .sw-pill {
    transition: none !important;
  }
}

/* Wide screens: theme / search / profile sit at the right edge of the window (the navbar
   itself stays as wide as the page, so the menu in the middle doesn't move). The shift is
   the empty space beside the page, less a little room for the scrollbar. */
@media (min-width: 1331px) {
  html:not(.app-ui):not(.tablet) .nav-tools {
    position: relative;
    left: max(0px, calc((100vw - 1550px) / 2 - 6px));
  }
}

/* ============================== Discover and Home: dim what you've watched (like Letterboxd) ============================== */
/* the switch sits in the profile menu, under "Russian titles", on every device */
html .profile-menu .menu-switch.fade-row {
  display: flex;
}

/* the poster goes dark and nearly colourless (still clear enough to recognise); pointing
   at it (or its buttons) brings it back */
html.fade-watched #discover .movie-item[data-seen] .poster-link,
html.fade-watched #home-rows .movie-item[data-seen] .poster-link,
html.fade-watched #home-rows .top10-item[data-seen] img {
  filter: brightness(0.3) grayscale(0.75);
  transition: filter 0.25s;
}

html.fade-watched #discover .movie-item[data-seen]:hover .poster-link,
html.fade-watched #discover .movie-item[data-seen]:focus-within .poster-link,
html.fade-watched #home-rows .movie-item[data-seen]:hover .poster-link,
html.fade-watched #home-rows .movie-item[data-seen]:focus-within .poster-link,
html.fade-watched #home-rows .top10-item[data-seen]:hover img,
html.fade-watched #home-rows .top10-item[data-seen]:focus-visible img {
  filter: none;
}

/* (and the title under it, when poster details are on) */
html.fade-watched #discover .movie-item[data-seen] .movie-info,
html.fade-watched #home-rows .movie-item[data-seen] .movie-info {
  opacity: 0.4;
  transition: opacity 0.25s;
}

html.fade-watched #discover .movie-item[data-seen]:hover .movie-info,
html.fade-watched #home-rows .movie-item[data-seen]:hover .movie-info {
  opacity: 1;
}

/* ============================== Profile picture: a character (Settings) ============================== */

/* your picture is round everywhere; a character's photo (a tall portrait) shows from its top edge,
   so the head has room above it and the face sits in the middle of the circle */
img[data-my-pic] {
  object-fit: cover;
  object-position: 50% 10%;
}

/* Profile page: your picture is a button (a camera badge; it lifts a little on hover) */
.pv-avatar-btn {
  position: relative;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}

.pv-avatar-btn:hover {
  box-shadow: 0 22px 60px rgba(229, 9, 20, 0.55);
  transform: scale(1.03);
}

.pv-cam {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid #0b0b0c;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s;
}

.pv-avatar-btn:hover .pv-cam {
  transform: scale(1.12);
}

/* "as Cooper · Interstellar" under your name */
/* (the header is dark in both themes: its own light text) */
.pv-as {
  margin: -4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.pv-as i {
  margin-right: 4px;
  color: #ff6b63;
}

.pv-as b {
  color: #fff;
}

.avatar-modal .av-google {
  margin: -6px 0 12px;
  border-radius: 999px;
}

.avatar-modal .av-google[hidden] {
  display: none;
}

/* the gallery */
.avatar-modal {
  max-width: 760px;
  text-align: center;
}

.avatar-modal h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.av-search {
  height: 50px;
  margin: 6px 0 14px;
  padding-left: 18px;
}

.av-found {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  overflow-x: auto;
}

.av-found[hidden] {
  display: none;
}

.av-title {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.av-title:hover {
  border-color: rgba(229, 9, 20, 0.5);
  background: var(--glass-bg-hover);
}

.av-title img {
  width: 34px;
  height: 51px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
}

.av-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-title small,
.av-group h4 small {
  color: var(--text-muted);
  font-weight: 500;
}

.av-groups,
.av-picked {
  text-align: left;
}

.av-group {
  margin-bottom: 18px;
}

.av-group h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
}

.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px 10px;
}

.av-pick {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

/* The round frame. TMDB's portraits are tight close-ups (the head fills the width), so the
   photo is shown a bit smaller than the circle and placed so the face sits in the middle,
   with the same room above the head as below the chin. The strips it leaves at the sides and
   top are filled with a soft, blurred copy of the same photo, and the photo's edges fade
   into it, so there's no hard line. */
.av-face {
  position: relative;
  display: block;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 50%;
  background: #1c1c21;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.av-face::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--av) 50% 25% / cover no-repeat;
  filter: blur(7px) brightness(0.8);
}

.av-face img {
  position: absolute;
  top: 7%;
  left: 10%;
  width: 80%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  mask-composite: intersect;
}

.av-pick:hover .av-face,
.av-pick:focus-visible .av-face {
  border-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.07);
}

.av-pick.on .av-face {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.25), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.av-pick > span:not(.av-face) {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-pick.on > span:not(.av-face) {
  color: var(--accent-hover);
}

/* while a title's characters load */
.av-skel {
  height: 128px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

@media (max-width: 520px) {
  .av-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }

  .av-face {
    width: 66px;
    height: 66px;
  }
}

/* the gallery's tabs: Movie & TV cast, Superheroes, Harry Potter… (scroll sideways when narrow) */
.av-tabs-wrap {
  max-width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.av-tabs-wrap::-webkit-scrollbar {
  display: none;
}

.av-tabs {
  flex-wrap: nowrap;
  margin: 0;
}

.av-tabs .top10-tab {
  flex: none;
  padding: 7px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.av-set {
  text-align: left;
}

.av-set[hidden],
.av-groups[hidden],
.av-picked[hidden] {
  display: none;
}

/* a picture of the character itself (not a TMDB close-up): just fills the circle, framed a
   little above the middle, where faces usually are */
.av-face.ext::before {
  content: none;
}

.av-face.ext img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- reviews: 2 lines each ("Read more" when longer), your like / dislike ---------- */
.t-review p.clamp {
  -webkit-line-clamp: 2;
}

.t-review p {
  margin-bottom: 8px;
}

.t-review-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.t-votes {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.t-vote {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.15s;
}

.t-vote:hover {
  color: var(--text);
  background: var(--glass-bg);
}

.t-vote:active {
  transform: scale(0.9);
}

.t-vote.on {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

/* (while folded, the paragraphs run on so the 2 lines are all words) */
.t-review p.clamp {
  white-space: normal;
}

/* ---------- title page Media: Videos / Images switch, featured video + playlist, image mosaic + viewer ---------- */
.md-switch {
  margin: 2px 0 16px;
}

.md-switch .top10-tab i {
  margin-right: 4px;
  font-size: 12px;
}

.md-switch .top10-tab small {
  margin-left: 4px;
  opacity: 0.6;
  font-weight: 600;
}

.md-pane.md-in {
  animation: md-in 0.35s ease both;
}

@keyframes md-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* videos: the big one + the playlist beside it (under it on phones) */
.md-videos {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 14px;
}

.md-videos:has(> .md-feature:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

.md-feature {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.md-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.md-feature:hover img {
  transform: scale(1.04);
}

.md-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.1) 55%, transparent);
}

.md-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 24px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.md-play i {
  margin-left: 4px;
}

.md-feature:hover .md-play {
  border-color: var(--accent);
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.md-info {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.md-info strong {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.md-type {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* (as tall as the big video, scrolling inside) */
.md-list {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

@media (min-width: 901px) {
  .md-list {
    height: 0;
    min-height: 100%;
  }
}

.md-item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.md-item:hover {
  background: var(--glass-bg-hover);
}

.md-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.md-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-thumb i {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.md-item:hover .md-thumb i {
  opacity: 1;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1);
}

.md-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.md-text strong {
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.md-text small {
  color: var(--text-muted);
  font-size: 12px;
}

/* images: a mosaic, the first one big */
.md-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 10px;
}

.md-shot {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-bg);
  cursor: zoom-in;
}

.md-shot:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* (every count fills whole rows) */
.md-mosaic.n7 .md-shot:nth-child(n + 6),
.md-mosaic.n4 .md-shot:nth-child(4),
.md-mosaic.n3 .md-shot:nth-child(n + 2) {
  grid-column: span 2;
}

.md-mosaic.n6 .md-shot:nth-child(6) {
  grid-column: span 4;
}

.md-mosaic.n2 .md-shot:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

.md-mosaic.n1 .md-shot:first-child {
  grid-column: span 4;
}

.md-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.md-shot:hover img {
  transform: scale(1.06);
}

.md-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
}

.md-more-phone {
  display: none;
}

/* the viewer */
html.mv-lock {
  overflow: hidden;
}

.md-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 60px 76px 84px;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.md-viewer.open {
  opacity: 1;
  visibility: visible;
}

.mv-img {
  max-width: 100%;
  max-height: calc(100vh - 144px);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mv-img.in {
  opacity: 1;
  transform: none;
}

.mv-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mv-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.mv-close {
  top: 14px;
  right: 14px;
}

.mv-prev,
.mv-next {
  top: 50%;
  transform: translateY(-50%);
}

.mv-prev {
  left: 14px;
}

.mv-next {
  right: 14px;
}

.mv-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}

.mv-full {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.mv-full:hover {
  color: #fff;
}

.mv-grid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  cursor: pointer;
}

.mv-grid:hover {
  color: #fff;
}

/* every picture in a grid (the "+12" tile); the viewer opens over it */
.md-gallery {
  position: fixed;
  inset: 0;
  z-index: 2990;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 clamp(16px, 4vw, 48px) 40px;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.md-gallery.open {
  opacity: 1;
  visibility: visible;
}

.mg-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 calc(-1 * clamp(16px, 4vw, 48px)) 18px;
  padding: 16px clamp(16px, 4vw, 48px);
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.6) 70%, transparent);
}

.mg-title {
  min-width: 0;
}

.mg-title .xr-label {
  color: var(--accent);
}

.mg-title h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(19px, 2.4vw, 26px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-title h2 small {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 600;
}

.mg-head .mv-btn {
  position: static;
  flex: none;
}

.mg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.mg-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
}

.mg-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mg-shot:hover img {
  transform: scale(1.06);
}

.mg-shot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.md-more[data-gallery] {
  cursor: pointer;
}

@media (max-width: 900px) {
  .md-videos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the playlist becomes a sideways row */
  .md-list {
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .md-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 0;
  }

  .md-item:hover {
    background: none;
  }

  .md-thumb i {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  /* images: the big one on top, then 2 × 2 (the 5th says how many more) */
  .md-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 110px;
  }

  .md-mosaic .md-shot {
    grid-column: auto !important;
    grid-row: auto;
  }

  .md-mosaic .md-shot:first-child {
    grid-column: span 2 !important;
    grid-row: span 2;
  }

  .md-mosaic .md-shot:nth-child(n + 6) {
    display: none;
  }

  .md-more {
    display: none;
  }

  .md-more-phone {
    display: grid;
  }

  .md-viewer {
    padding: 60px 10px 90px;
  }

  .mg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mg-shot {
    border-radius: 10px;
  }

  .mv-prev,
  .mv-next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-pane.md-in {
    animation: none;
  }

  .mv-img,
  .md-feature img,
  .md-shot img,
  .mg-shot img {
    transition: none;
  }
}

/* ---------- "My rating" (menu): library posters show your rating (on) or IMDb (off), not both ---------- */
html:not(.ext-ratings) .movie-item[data-id] .ratings .ext-score,
html.ext-ratings .movie-item[data-id] .ratings .score.mine {
  display: none;
}

/* ---------- the site's date picker (UI.pickDate): dark glass like the menus, red for your day ---------- */
.cal-pop {
  position: fixed;
  z-index: 3100;
  width: 312px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(24, 24, 28, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.cal-pop.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cal-pop button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.cal-pop button:disabled {
  cursor: default;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: background-color 0.2s ease;
}

.cal-title i {
  font-size: 10px;
  opacity: 0.6;
}

.cal-title:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cal-arrows {
  display: inline-flex;
  gap: 6px;
}

.cal-nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cal-nav:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
}

.cal-nav:disabled {
  opacity: 0.3;
}

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-week span {
  padding: 4px 0 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.cal-day:hover:not(:disabled):not(.on) {
  background: rgba(255, 255, 255, 0.1);
}

.cal-day:active:not(:disabled) {
  transform: scale(0.9);
}

.cal-day:disabled {
  color: rgba(255, 255, 255, 0.2) !important;
}

/* today: a small red dot under the number */
.cal-day.today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.cal-day.on {
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(144, 13, 9, 0.5);
}

.cal-day.on::after {
  background: #fff;
}

.cal-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.cal-month {
  padding: 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cal-month:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.cal-month.on {
  border-color: var(--accent);
  background: var(--accent);
}

.cal-month:disabled {
  opacity: 0.3;
}

.cal-body {
  animation: cal-in 0.2s ease both;
}

@keyframes cal-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.cal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cal-chip {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cal-chip:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
}

.cal-chip:disabled {
  opacity: 0.35;
}

.cal-clear {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7) !important;
}

.cal-clear i {
  margin-right: 4px;
  font-size: 11px;
}

.cal-pop :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* phones: a sheet at the bottom */
.cal-pop.sheet {
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  top: auto;
  width: auto;
  padding: 18px;
  border-radius: 26px;
  transform: translateY(24px);
  transform-origin: bottom center;
}

.cal-pop.sheet.open {
  transform: none;
}

.cal-pop.sheet .cal-day {
  font-size: 16px !important;
}

@media (prefers-reduced-motion: reduce) {
  .cal-pop,
  .cal-body {
    transition: none;
    animation: none;
  }
}

/* ---------- title page: your notes (grows with the text, prompts, saving state) ---------- */
.tn-text {
  min-height: 0;
  max-height: 460px;
  resize: none;
  overflow-y: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tn-text:focus {
  background: var(--glass-bg-hover);
}

.tn-card.has-note .tn-text:not(:focus) {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  cursor: text;
}

.tn-card.has-note .tn-text:not(:focus):hover {
  padding-left: 14px;
  padding-right: 14px;
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

.tn-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.tn-foot:has(.tn-prompts:empty) {
  justify-content: flex-end;
}

.tn-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tn-prompts:empty {
  display: none;
}

.tn-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.tn-prompt i {
  color: var(--accent-hover);
  font-size: 11px;
}

.tn-prompt:hover {
  border-style: solid;
  border-color: rgba(229, 9, 20, 0.45);
  background: rgba(229, 9, 20, 0.08);
  color: var(--text);
}

.tn-prompt:active {
  transform: scale(0.95);
}

.tn-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tn-count.full {
  color: var(--accent-hover);
  font-weight: 700;
}

.tn-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.tn-state i {
  font-size: 11px;
}

.tn-state.ok {
  color: #46c46e;
}

/* ---------- notes: fold / unfold from the header (the first line shows while folded) ---------- */
.tn-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tn-toggle .xr-label {
  flex-shrink: 0;
}

.tn-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tn-card.folded .tn-preview {
  opacity: 1;
}

.tn-toggle .tn-state {
  flex-shrink: 0;
  margin-left: auto;
}

.tn-chev {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.tn-toggle:hover .tn-chev {
  background: var(--glass-bg-hover);
  color: var(--text);
}

.tn-card.folded .tn-chev {
  transform: rotate(-90deg);
}

.tn-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.tn-body > div {
  min-height: 0;
  overflow: hidden;
  margin: -4px;
  padding: 4px;
}

.tn-card.folded .tn-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tn-body,
  .tn-chev {
    transition: none;
  }
}

/* (folded: just the header, not as tall as the card beside it) */
.tn-card.folded {
  align-self: start;
}

/* ============================== Box Office page ============================== */
.bo-lead {
  margin: -12px 0 22px;
  color: var(--text-muted);
  font-size: 15px;
}

.bo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.bo-controls .top10-switch,
.bo-sort {
  margin: 0;
}

.bo-page .top10-switch .top10-tab i {
  margin-right: 5px;
  font-size: 12px;
}

.bo-controls .glass-select select {
  min-width: 120px;
}

/* genres: one sideways row of chips, the red pill gliding to the picked one */
.bo-genres {
  position: relative;
  flex-wrap: nowrap;
  margin: 0 0 22px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.bo-genres::-webkit-scrollbar {
  display: none;
}

.bo-genres .chip {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.bo-genres .chip.active {
  background: transparent;
}

.bo-genres .chip-indicator {
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.35);
  pointer-events: none;
  transition: left 0.45s cubic-bezier(0.32, 0.72, 0, 1), width 0.45s cubic-bezier(0.32, 0.72, 0, 1), top 0.45s, height 0.45s;
}

/* ---------- the podium stage ---------- */
.bo-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 420px;
  padding: 32px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  overflow: hidden;
  background: #07070a;
  color: #fff;
  isolation: isolate;
}

.bo-stage:empty {
  display: none;
}

.bo-stage-skel {
  position: absolute;
  inset: 0;
  background: var(--glass-bg);
  animation: bo-pulse 1.4s ease-in-out infinite;
}

@keyframes bo-pulse {
  50% {
    opacity: 0.55;
  }
}

.bo-bg {
  position: absolute;
  inset: -2%;
  z-index: -2;
  background-position: center 25%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.bo-bg.on {
  opacity: 1;
  animation: bo-kenburns 14s ease-out forwards;
}

@keyframes bo-kenburns {
  from {
    transform: scale(1.12) translateX(1.5%);
  }
  to {
    transform: scale(1) translateX(0);
  }
}

.bo-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.15)),
    linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent 65%);
}

.bo-stage-text {
  display: grid;
  gap: 10px;
  justify-items: start;
  animation: bo-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bo-stage-text > * {
  animation: bo-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bo-stage-text > :nth-child(2) {
  animation-delay: 0.06s;
}

.bo-stage-text > :nth-child(3) {
  animation-delay: 0.12s;
}

.bo-stage-text > :nth-child(4) {
  animation-delay: 0.18s;
}

@keyframes bo-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.bo-top-rank {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}

.bo-top-rank i {
  margin-right: 4px;
  color: var(--gold);
}

.bo-top-title {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-decoration: none;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.bo-top-title:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.bo-top-title small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.5em;
  font-weight: 600;
}

.bo-top-gross {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.bo-top-gross b {
  margin-right: 6px;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #f5c518 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bo-top-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

/* the podium itself: 2nd, 1st, 3rd */
.bo-podium {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 330px;
}

.bo-pod {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 128px;
  height: var(--h);
  color: #fff;
  text-decoration: none;
  animation: bo-podium-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bo-pod.gold {
  animation-delay: 0.15s;
}

.bo-pod.silver {
  animation-delay: 0.3s;
}

.bo-pod.bronze {
  animation-delay: 0.45s;
}

@keyframes bo-podium-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

.bo-pod-poster {
  position: relative;
  display: block;
  margin: 0 8px -10px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
  opacity: 0.6;
  transform: scale(0.92);
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, box-shadow 0.35s ease;
}

.bo-pod-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.bo-pod:hover .bo-pod-poster,
.bo-pod.on .bo-pod-poster {
  opacity: 1;
  transform: scale(1) translateY(-8px);
}

.bo-pod.on .bo-pod-poster {
  box-shadow: 0 0 0 2px var(--medal), 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 40px color-mix(in srgb, var(--medal) 45%, transparent);
}

.bo-pod.gold {
  --medal: #f5c518;
}

.bo-pod.silver {
  --medal: #c9ced6;
}

.bo-pod.bronze {
  --medal: #d08a52;
}

.bo-pod-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  flex: 1;
  min-height: 64px;
  padding: 14px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.bo-pod.on .bo-pod-step {
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 35%, transparent), rgba(255, 255, 255, 0.03));
}

.bo-medal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--medal);
  color: #111;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.bo-pod-step b {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* the time left before the next one (it stops while you point at the stage) */
.bo-pod-time {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--medal);
}

.bo-pod.on .bo-pod-time {
  animation: bo-time 7s linear forwards;
}

.bo-stage.hold .bo-pod-time {
  animation-play-state: paused;
}

@keyframes bo-time {
  to {
    width: 100%;
  }
}

/* ---------- four numbers ---------- */
.bo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 40px;
}

.bo-stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 124px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.bo-stat.in,
.bo-stat.skeleton {
  opacity: 1;
  transform: none;
}

.bo-stats .bo-stat:nth-child(2) {
  transition-delay: 0.07s, 0.07s, 0s, 0s;
}

.bo-stats .bo-stat:nth-child(3) {
  transition-delay: 0.14s, 0.14s, 0s, 0s;
}

.bo-stats .bo-stat:nth-child(4) {
  transition-delay: 0.21s, 0.21s, 0s, 0s;
}

a.bo-stat:hover {
  border-color: rgba(229, 9, 20, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.bo-stat-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  opacity: 0.18;
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.8s ease;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 85%);
  mask-image: linear-gradient(to left, #000, transparent 85%);
}

a.bo-stat:hover .bo-stat-bg {
  opacity: 0.4;
  transform: scale(1.12);
}

.bo-stat b {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bo-stat small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.bo-stat.skeleton {
  animation: bo-pulse 1.4s ease-in-out infinite;
}

/* ---------- budget vs box office ---------- */
.bo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.bo-head .section-title {
  margin: 0;
}

.bo-head .section-title i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.bo-plot .bo-head {
  display: block;
}

.bo-sub {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.bo-plot {
  margin-bottom: 44px;
}

.bo-plot-wrap {
  position: relative;
  padding: 14px 10px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass-bg);
}

/* ---------- the chart ---------- */
.bo-chart {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bo-row {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.bo-row.in {
  opacity: 1;
  transform: none;
}

.bo-row.skeleton {
  height: 96px;
  opacity: 1;
  transform: none;
  animation: bo-pulse 1.4s ease-in-out infinite;
}

.bo-row:hover,
.bo-row.open {
  background: var(--glass-bg-hover);
}

.bo-row.open {
  border-color: rgba(229, 9, 20, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.bo-line {
  display: grid;
  grid-template-columns: 44px 56px minmax(0, 1fr) 150px 22px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 10px;
  cursor: pointer;
  outline: none;
}

.bo-line:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  border-radius: 18px;
}

.bo-rank {
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bo-rank.top1 {
  color: #f5c518;
}

.bo-rank.top2 {
  color: #c9ced6;
}

.bo-rank.top3 {
  color: #d08a52;
}

.bo-poster img {
  display: block;
  width: 56px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bo-row:hover .bo-poster img {
  transform: scale(1.08) rotate(-2deg);
}

.bo-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bo-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.bo-name strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bo-name small {
  color: var(--text-muted);
  font-size: 13px;
}

.bo-mine {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.14);
  color: var(--accent-hover);
  font-size: 11.5px;
  font-weight: 700;
}

.bo-mine i {
  font-size: 10px;
}

/* the gross as a bar (the biggest fills it), the budget the darker part inside it */
.bo-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--glass-bg-hover);
  overflow: hidden;
}

.bo-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

.bo-row.in .bo-fill {
  width: var(--w);
}

/* a shine across the bar once it's filled */
.bo-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
}

.bo-row.in .bo-fill::after {
  animation: bo-shine 1.2s ease 1.2s;
}

@keyframes bo-shine {
  to {
    transform: translateX(100%);
  }
}

.bo-budget {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--b);
  background: rgba(0, 0, 0, 0.55);
  border-right: 2px solid rgba(255, 255, 255, 0.6);
}

.bo-nums {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.bo-nums > * {
  white-space: nowrap;
}

.bo-nums b {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bo-nums small {
  color: var(--text-muted);
  font-size: 12px;
}

.bo-nums .xr-verdict {
  margin-top: 3px;
  padding: 3px 10px;
  font-size: 11.5px;
}

.bo-chev {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.35s ease, color 0.2s ease;
}

.bo-row:hover .bo-chev {
  color: var(--text);
}

.bo-row.open .bo-chev {
  transform: rotate(180deg);
}

/* the details under a row (opened by tapping it) */
.bo-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bo-detail > div {
  min-height: 0;
  overflow: hidden;
}

.bo-row.open .bo-detail {
  grid-template-rows: 1fr;
}

.bo-detail-in {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0 10px 10px;
  padding: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  isolation: isolate;
}

.bo-detail-in::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.96) 35%, rgba(10, 10, 12, 0.6)), var(--bg, none) center / cover;
}

.bo-row.open .bo-detail-in > * {
  animation: bo-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bo-row.open .bo-detail-in > :nth-child(2) {
  animation-delay: 0.06s;
}

.bo-row.open .bo-detail-in > :nth-child(3) {
  animation-delay: 0.12s;
}

.bo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.bo-fact {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.bo-fact small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bo-fact b {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.bo-fact span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.bo-overview {
  display: -webkit-box;
  max-width: 760px;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bo-actions .btn {
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  text-decoration: none;
}

.bo-more {
  display: flex;
  justify-content: center;
  margin: 18px 0 8px;
}

.bo-more .btn {
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 700;
}

.bo-none,
.bo-empty {
  padding: 40px 20px;
  border: 1px dashed var(--glass-border);
  border-radius: 18px;
  color: var(--text-muted);
  text-align: center;
  list-style: none;
}

.bo-empty i {
  font-size: 28px;
}

/* ---------- your box office ---------- */
.bo-yours {
  margin-top: 48px;
}

.bo-yours .section-title i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.bo-progress {
  display: grid;
  gap: 10px;
  max-width: 420px;
  color: var(--text-muted);
}

.bo-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--glass-bg-hover);
  overflow: hidden;
}

.bo-progress-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

.bo-yours-hero {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 170px;
  align-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(229, 9, 20, 0.25), transparent 60%),
    var(--glass-bg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bo-yours-hero.in {
  opacity: 1;
  transform: none;
}

.bo-yours-hero > :not(.bo-yours-posters) {
  position: relative;
  z-index: 1;
}

.bo-yours-hero b {
  font-size: clamp(38px, 5.5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.bo-yours-hero small {
  color: var(--text-muted);
  font-size: 14px;
}

/* a fan of your biggest films on the right */
.bo-yours-posters {
  position: absolute;
  right: 24px;
  top: 50%;
  display: flex;
  transform: translateY(-50%);
}

.bo-yours-posters img {
  width: 78px;
  aspect-ratio: 2 / 3;
  margin-left: -34px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  transform: rotate(calc((var(--n) - 3) * 5deg)) translateY(calc(var(--n) * 2px));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.4s ease;
}

.bo-yours-hero:hover .bo-yours-posters img {
  margin-left: -18px;
  transform: rotate(calc((var(--n) - 3) * 3deg)) translateY(-6px);
}

.bo-yours .bo-stats {
  margin-top: 12px;
}

.bo-note {
  margin: 36px 0 10px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.bo-note i {
  margin-right: 4px;
}

/* the budget card on a title page links here */
.xr-money-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.xr-money-link:hover {
  color: var(--text);
}

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .bo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bo-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 24px;
  }

  .bo-podium {
    justify-content: center;
    height: 260px;
  }

  .bo-pod {
    width: 104px;
  }

  .bo-yours-posters {
    opacity: 0.35;
  }
}

@media (max-width: 700px) {
  .bo-controls .top10-switch {
    width: 100%;
  }

  .bo-controls .top10-switch .top10-tab {
    flex: 1;
  }

  .bo-controls .glass-select {
    flex: 1;
  }

  .bo-stage {
    padding: 18px;
    border-radius: 22px;
  }

  .bo-podium {
    gap: 8px;
    height: 220px;
  }

  .bo-pod {
    width: 92px;
  }

  .bo-pod-step b {
    font-size: 13px;
  }

  .bo-stat b {
    font-size: 22px;
  }

  .bo-line {
    grid-template-columns: 26px 44px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 10px;
  }

  .bo-rank,
  .bo-poster {
    grid-row: span 2;
  }

  .bo-rank {
    font-size: 16px;
  }

  .bo-poster img {
    width: 44px;
  }

  .bo-chev {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .bo-nums {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    text-align: left;
  }

  .bo-nums b {
    font-size: 16px;
  }

  .bo-nums .xr-verdict {
    margin: 0;
  }

  .bo-plot-wrap {
    margin: 0 -6px;
    padding: 8px 2px 2px;
    overflow-x: auto;
  }

  .bo-yours-posters {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-row,
  .bo-fill,
  .bo-stat,
  .bo-yours-hero,
  .bo-pod-poster {
    transition: none;
  }

  .bo-bg.on,
  .bo-stage-text,
  .bo-stage-text > *,
  .bo-pod,
  .bo-fill::after,
  .bo-row.open .bo-detail-in > * {
    animation: none;
  }
}

/* (podium: each poster stands on its step; the steps rise from the bottom edge: 1st tallest) */
.bo-stage {
  padding-bottom: 0;
}

.bo-stage-info {
  padding-bottom: 32px;
}

.bo-podium {
  height: auto;
}

.bo-pod {
  height: auto;
}

.bo-pod.gold {
  --step: 120px;
}

.bo-pod.silver {
  --step: 88px;
}

.bo-pod.bronze {
  --step: 62px;
}

.bo-pod-poster {
  margin: 0 10px 12px;
}

.bo-pod-step {
  flex: none;
  height: var(--step);
  min-height: 0;
  padding-top: 10px;
}

.bo-pod.bronze .bo-pod-step {
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 0;
  align-content: center;
}

@media (max-width: 1000px) {
  .bo-stage-info {
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  .bo-pod.gold {
    --step: 96px;
  }

  .bo-pod.silver {
    --step: 70px;
  }

  .bo-pod.bronze {
    --step: 52px;
  }

  .bo-pod.bronze .bo-pod-step {
    grid-auto-flow: row;
    gap: 2px;
  }

  .bo-pod.bronze .bo-medal {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* (your box office sits above the budget vs box office plot) */
.bo-yours {
  margin: 0 0 48px;
}

/* ---------- your box office: a card per film (poster, its colour, a small picture of the number) ---------- */
.by-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.by-cards.n4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.by-card {
  --tint: 229, 9, 20;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-height: 170px;
  padding: 20px;
  border-color: rgba(var(--tint), 0.22);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--tint), 0.16), transparent 60%),
    var(--glass-bg);
}

.by-top {
  --tint: 245, 197, 24;
}

.by-flop {
  --tint: 255, 90, 80;
}

.by-love {
  --tint: 255, 77, 141;
}

.by-gem {
  --tint: 45, 212, 191;
}

.by-roi {
  --tint: 70, 211, 105;
}

.by-cost {
  --tint: 160, 140, 255;
}

.by-card .xr-label i {
  color: rgb(var(--tint));
}

a.by-card:hover {
  border-color: rgba(var(--tint), 0.55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--tint), 0.2), 0 10px 40px rgba(var(--tint), 0.12);
}

/* the film, blurred, behind everything */
.by-blur {
  position: absolute;
  inset: -20px;
  z-index: -1;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(1.4);
  opacity: 0.16;
  transition: opacity 0.4s ease;
}

a.by-card:hover .by-blur {
  opacity: 0.3;
}

.by-poster {
  width: 92px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-4deg);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.by-cards .by-card:nth-child(even) .by-poster {
  transform: rotate(3deg);
}

.by-cards a.by-card:hover .by-poster {
  transform: rotate(0) translateY(-4px) scale(1.04);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(var(--tint), 0.7);
}

.by-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.by-card b {
  margin-top: 2px;
  font-size: 30px;
  line-height: 1.05;
}

.by-flop b {
  color: #ff6b63;
}

.by-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.by-name small {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* the little pictures */
.by-meter {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.by-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--glass-bg-hover);
  overflow: hidden;
}

.by-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tint), 0.6), rgb(var(--tint)));
  box-shadow: 0 0 12px rgba(var(--tint), 0.45);
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

.by-card.in .by-track i {
  width: var(--w);
}

/* a flop: what it made in grey, the rest of the budget (the loss) red */
.by-meter.loss .by-track {
  background: rgba(255, 90, 80, 0.35);
}

.by-meter.loss .by-track i {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.by-meter small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.by-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  color: rgb(var(--tint));
  font-size: 14px;
}

.by-stars .by-off {
  opacity: 0.2;
}

.by-stars b {
  margin: 0 0 0 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

/* the stars light up one after another */
.by-card .by-stars i {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.by-card.in .by-stars i {
  opacity: 1;
  transform: none;
}

.by-card.in .by-stars i.by-off {
  opacity: 0.2;
}

.by-card.in .by-stars i:nth-child(1) { transition-delay: 0.3s; }
.by-card.in .by-stars i:nth-child(2) { transition-delay: 0.38s; }
.by-card.in .by-stars i:nth-child(3) { transition-delay: 0.46s; }
.by-card.in .by-stars i:nth-child(4) { transition-delay: 0.54s; }
.by-card.in .by-stars i:nth-child(5) { transition-delay: 0.62s; }

.by-cards .by-card:nth-child(5) {
  transition-delay: 0.28s, 0.28s, 0s, 0s;
}

.by-cards .by-card:nth-child(6) {
  transition-delay: 0.35s, 0.35s, 0s, 0s;
}

@media (max-width: 1100px) {
  .by-cards,
  .by-cards.n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .by-cards,
  .by-cards.n4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .by-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 16px;
  }

  .by-poster {
    width: 72px;
  }

  .by-card b {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .by-track i,
  .by-card .by-stars i,
  .by-poster {
    transition: none;
  }
}

/* ---------- box office: the poster skyline (height = what it made, the striped foot = what it cost) ---------- */
.bo-plot-wrap {
  padding: 18px 20px 16px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(229, 9, 20, 0.14), transparent 70%),
    var(--glass-bg);
}

/* the readout: the film you point at */
.sk-read {
  min-height: 104px;
  margin-bottom: 14px;
}

.sk-read-in {
  --c: 245, 197, 24;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(var(--c), 0.3);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(var(--c), 0.12), rgba(var(--c), 0.02) 60%);
  animation: sk-read-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sk-read-in.green {
  --c: 70, 211, 105;
}

.sk-read-in.grey {
  --c: 154, 154, 163;
}

.sk-read-in.red {
  --c: 255, 107, 99;
}

@keyframes sk-read-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.sk-read-in img {
  width: 58px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.sk-read-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sk-read-text small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.sk-read-text strong {
  overflow: hidden;
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sk-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.sk-flow > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.sk-flow em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sk-flow b {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sk-flow > i {
  color: rgb(var(--c));
  font-size: 13px;
}

.sk-net b {
  color: rgb(var(--c));
}

.sk-mult {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.sk-mult b {
  color: rgb(var(--c));
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(var(--c), 0.45);
}

.sk-mult small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* the chart */
.sk-chart {
  position: relative;
  height: 340px;
  padding-bottom: 26px;
}

.sk-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--glass-border);
  pointer-events: none;
}

.sk-lines em {
  position: absolute;
  right: 0;
  bottom: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.8;
}

.sk-lines {
  position: absolute;
  inset: 0 0 26px;
}

.sk-cols {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
  padding-right: 44px;
}

.sk-col {
  --c: 245, 197, 24;
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  color: var(--text);
  text-decoration: none;
  outline: none;
}

.sk-col.green {
  --c: 70, 211, 105;
}

.sk-col.grey {
  --c: 154, 154, 163;
}

.sk-col.red {
  --c: 255, 107, 99;
}

.sk-bar {
  position: relative;
  display: block;
  height: var(--h);
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) var(--d, 0ms), box-shadow 0.25s ease, filter 0.25s ease;
}

.sk-chart.in .sk-bar {
  transform: scaleY(1);
}

/* the poster fills the column, dark at its foot */
.sk-poster {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
}

.sk-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}

/* the budget: a striped band at the foot, its top edge in the verdict's colour */
.sk-budget {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-top: 2px solid rgb(var(--c));
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.72) 0 5px, rgba(0, 0, 0, 0.5) 5px 10px);
  transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d, 0ms) + 0.75s);
}

.sk-chart.in .sk-budget {
  height: var(--b);
}

/* the multiple on top of each column */
.sk-tag {
  position: absolute;
  top: 6px;
  left: 50%;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(var(--c), 0.92);
  color: #111;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease calc(var(--d, 0ms) + 0.9s);
}

.sk-chart.in .sk-tag {
  opacity: 1;
}

.sk-rank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition: color 0.2s ease;
}

/* pointing at one: it glows in its colour, the others step back */
.sk-cols:hover .sk-col:not(:hover):not(.on) .sk-bar,
.sk-cols:focus-within .sk-col:not(:focus):not(.on) .sk-bar {
  filter: saturate(0.4) brightness(0.55);
}

.sk-col.on .sk-bar,
.sk-col:hover .sk-bar {
  box-shadow: 0 0 0 2px rgb(var(--c)), 0 0 26px rgba(var(--c), 0.45);
}

.sk-col.on .sk-rank {
  color: rgb(var(--c));
}

.sk-col:not(.on):hover .sk-bar {
  filter: brightness(1.1);
}

.sk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.sk-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sk-key {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.sk-key.made {
  background: linear-gradient(180deg, #d9d9e0, #6b6b75);
}

.sk-key.cost {
  border-top: 2px solid #f5c518;
  background: repeating-linear-gradient(-45deg, #2a2a30 0 3px, #444450 3px 6px);
}

.sk-verdicts {
  gap: 6px !important;
  margin-left: auto;
}

.sk-verdicts .xr-verdict {
  padding: 3px 9px;
  font-size: 11px;
}

/* smaller screens: the columns scroll sideways, a little wider */
@media (max-width: 900px) {
  .sk-chart {
    height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .sk-chart::-webkit-scrollbar {
    display: none;
  }

  .sk-cols {
    width: max(100%, calc(var(--n, 20) * 46px));
    min-width: 900px;
  }

  .sk-lines {
    right: auto;
    width: max(100%, 900px);
  }

  .sk-verdicts {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .bo-plot-wrap {
    padding: 14px 12px 12px;
  }

  .sk-read-in {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .sk-read-in img {
    width: 46px;
  }

  .sk-read-text strong {
    font-size: 16px;
  }

  .sk-mult {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 8px;
  }

  .sk-mult b {
    font-size: 28px;
  }

  .sk-flow b {
    font-size: 13.5px;
  }

  .sk-cols {
    min-width: 760px;
  }

  .sk-lines {
    width: 760px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-bar,
  .sk-budget,
  .sk-tag,
  .sk-read-in {
    transition: none;
    animation: none;
  }
}

/* (room above the tallest column) */
.sk-chart {
  margin-top: 26px;
}

/* ---------- the skyline: which films to compare (chart / franchise / director / studio / years / yours) ---------- */
.sk-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.sk-modes {
  justify-self: start;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sk-modes::-webkit-scrollbar {
  display: none;
}

.sk-modes .top10-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

.sk-modes .top10-tab i {
  margin-right: 5px;
  font-size: 12px;
}

.sk-picks:empty {
  display: none;
}

.sk-picks {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sk-search {
  position: relative;
  flex: 0 0 220px;
  display: flex;
  align-items: center;
}

.sk-search i {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}

.sk-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 36px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sk-search input:focus {
  border-color: rgba(229, 9, 20, 0.55);
  outline: none;
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
}

.sk-chips {
  flex: 1;
  flex-wrap: nowrap;
  margin: 0;
  padding: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}

.sk-chips::-webkit-scrollbar {
  display: none;
}

.sk-chips .chip {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sk-chips .sk-hit {
  border-style: dashed;
  animation: sk-read-in 0.3s ease both;
}

.sk-chips .sk-hit i {
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.7;
}

.sk-chips .sk-none {
  cursor: default;
  opacity: 0.7;
}

/* loading: grey columns breathing */
.sk-loading {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 10px 0 6px;
}

.sk-loading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.sk-skel {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 300px;
}

.sk-skel span {
  flex: 1;
  height: var(--h);
  border-radius: 10px 10px 4px 4px;
  background: var(--glass-bg-hover);
  animation: bo-pulse 1.4s ease-in-out infinite;
}

.sk-skel span:nth-child(odd) {
  animation-delay: 0.2s;
}

.sk-empty {
  margin: 0;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.sk-empty i {
  margin-right: 6px;
}

/* a few films (a trilogy): wider columns, in the middle */
.sk-chart.few .sk-cols {
  justify-content: center;
  gap: 14px;
}

.sk-chart.few .sk-col {
  flex: 0 1 110px;
}

@media (max-width: 900px) {
  .sk-chart.few .sk-cols {
    width: 100%;
    min-width: 0;
  }

  .sk-chart.few .sk-lines {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .sk-picks {
    flex-direction: column;
    align-items: stretch;
  }

  .sk-search {
    flex-basis: auto;
  }
}

/* ---------- box office chart: verdict colours, backdrops, quick buttons, filter, poster wall ---------- */
.bo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 14px;
}

.bo-tools .top10-switch {
  margin: 0;
}

.bo-tools .top10-tab i {
  margin-right: 5px;
  font-size: 12px;
}

.bo-tools .top10-tab small {
  margin-left: 5px;
  opacity: 0.6;
  font-weight: 700;
}

/* each verdict its colour (the bar, the rank's glow, the poster's edge) */
.bo-row {
  --vc: 229, 9, 20;
}

.bo-row.v-gold {
  --vc: 245, 197, 24;
}

.bo-row.v-green {
  --vc: 70, 211, 105;
}

.bo-row.v-grey {
  --vc: 154, 154, 163;
}

.bo-row.v-red {
  --vc: 255, 107, 99;
}

.bo-fill {
  background: linear-gradient(90deg, rgba(var(--vc), 0.45), rgb(var(--vc)));
  box-shadow: 0 0 14px rgba(var(--vc), 0.35);
}

.bo-bar {
  height: 12px;
}

.bo-budget {
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.62) 0 4px, rgba(0, 0, 0, 0.42) 4px 8px);
  border-right-color: #fff;
}

.bo-main {
  gap: 7px;
}

/* under the bar: the cost at its start, the profit at its end */
.bo-barnote {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: max(var(--w), 230px);
  max-width: 100%;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bo-barnote i {
  margin-right: 3px;
  font-size: 10px;
}

.bo-pl {
  color: rgb(var(--vc));
  font-weight: 800;
}

.bo-line {
  position: relative;
  grid-template-columns: 44px 56px minmax(0, 1fr) 130px auto 22px;
  isolation: isolate;
}

/* the film's backdrop slides in behind the row you point at */
.bo-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg, none) right 30% / 55% auto no-repeat;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 85%);
}

.bo-row:hover .bo-line::before,
.bo-row.open .bo-line::before {
  opacity: 0.28;
  transform: none;
}

/* the top 3: a medal-coloured edge */
.bo-row.medal.m1 {
  border-color: rgba(245, 197, 24, 0.45);
  box-shadow: inset 3px 0 0 #f5c518, 0 0 30px rgba(245, 197, 24, 0.08);
}

.bo-row.medal.m2 {
  border-color: rgba(201, 206, 214, 0.35);
  box-shadow: inset 3px 0 0 #c9ced6;
}

.bo-row.medal.m3 {
  border-color: rgba(208, 138, 82, 0.4);
  box-shadow: inset 3px 0 0 #d08a52;
}

.bo-mine.later {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

/* quick buttons: Trailer, Watchlist, Watched */
.bo-acts {
  display: flex;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

.bo-row:hover .bo-acts,
.bo-row.open .bo-acts,
.bo-acts:focus-within {
  opacity: 1;
}

.bo-act {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.bo-act:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.bo-act:active {
  transform: scale(0.92);
}

.bo-act.on {
  border-color: rgba(229, 9, 20, 0.5);
  color: var(--accent-hover);
}

/* ---------- the poster wall ---------- */
.bo-chart.posters {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.bo-tile {
  position: relative;
  overflow: visible;
  border: 0;
  background: none;
}

.bo-tile:hover {
  background: none;
}

.bo-tile-in {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.bo-tile:hover .bo-tile-in {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px rgb(var(--vc)), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--vc), 0.25);
}

.bo-tile-in img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bo-tile:hover .bo-tile-in img {
  transform: scale(1.06);
}

.bo-tile-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 5%, rgba(0, 0, 0, 0.5) 38%, transparent 62%);
}

.bo-tile-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 900;
}

.bo-tile.m1 .bo-tile-rank {
  background: #f5c518;
  color: #111;
}

.bo-tile.m2 .bo-tile-rank {
  background: #c9ced6;
  color: #111;
}

.bo-tile.m3 .bo-tile-rank {
  background: #d08a52;
  color: #111;
}

.bo-tile .bo-mine {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 1;
  background: rgba(229, 9, 20, 0.85);
  color: #fff;
}

.bo-tile .bo-mine.later {
  background: rgba(0, 0, 0, 0.6);
}

.bo-tile-info {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.bo-tile-info strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bo-tile-info b {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bo-tile-meta {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 600;
}

.bo-tile-x {
  color: rgb(var(--vc));
  font-weight: 900;
}

/* the quick buttons float over the poster's top when you point at it */
.bo-tile .bo-acts {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -30%);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bo-tile:hover .bo-acts,
.bo-tile .bo-acts:focus-within {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.bo-tile .bo-act {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}

@media (max-width: 1000px) {
  .bo-line {
    grid-template-columns: 44px 56px minmax(0, 1fr) 130px 22px;
  }

  .bo-line > .bo-acts {
    grid-column: 3 / -1;
    justify-content: flex-end;
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .bo-line {
    grid-template-columns: 26px 44px minmax(0, 1fr) 14px;
  }

  .bo-line > .bo-acts {
    grid-column: 3;
    grid-row: 3;
    justify-content: flex-start;
  }

  .bo-barnote {
    width: 100%;
  }

  .bo-line::before {
    display: none;
  }

  .bo-chart.posters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* phones: no pointing, so the buttons show under each poster */
  .bo-tile .bo-acts {
    position: static;
    justify-content: center;
    margin-top: 8px;
    opacity: 1;
    transform: none;
  }

  .bo-tile .bo-act {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text);
  }

  .bo-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .bo-tools .top10-switch {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-line::before,
  .bo-tile-in,
  .bo-tile-in img,
  .bo-tile .bo-acts {
    transition: none;
  }
}

@media (max-width: 700px) {
  /* (phones: rank and poster beside the name, the numbers and the buttons under it) */
  .bo-line .bo-rank,
  .bo-line .bo-poster {
    grid-row: span 3;
  }
}

/* (box office on phones: a compact sort switch; the gross and the quick buttons share a line) */
@media (max-width: 700px) {
  .bo-sort .top10-tab i,
  .bo-tools .top10-tab i {
    display: none;
  }

  .bo-sort .top10-tab {
    padding: 8px 12px;
  }

  .bo-line .bo-rank,
  .bo-line .bo-poster {
    grid-row: span 2;
  }

  .bo-line > .bo-acts {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }

  .bo-line .bo-nums .xr-verdict {
    display: none;
  }

  .bo-act {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* (the poster wall: the medal is the rank badge, not the row edge) */
.bo-row.bo-tile.medal.m1,
.bo-row.bo-tile.medal.m2,
.bo-row.bo-tile.medal.m3 {
  border: 0;
  box-shadow: none;
}

@media (max-width: 700px) {
  /* (a row's details on phones: the facts 2 × 2) */
  .bo-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bo-fact {
    padding: 10px 12px;
  }

  .bo-fact b {
    font-size: 18px;
  }

  .bo-detail-in {
    padding: 14px;
  }
}

/* (skyline: the multiple sits at the top of its column, or above it when the column is short) */
.sk-col > .sk-tag {
  top: auto;
  bottom: calc(var(--h) - 26px);
  z-index: 2;
}

.sk-col.low > .sk-tag {
  bottom: calc(var(--h) + 6px);
}

@media (max-width: 900px) {
  /* (it scrolls sideways: an edge fades only when there's more that way, so the first
     and last columns show in full at the start and the end) */
  .sk-chart:not(.few) {
    -webkit-mask-image: linear-gradient(90deg, var(--fade-l, transparent), #000 18px, #000 calc(100% - 18px), var(--fade-r, transparent));
    mask-image: linear-gradient(90deg, var(--fade-l, transparent), #000 18px, #000 calc(100% - 18px), var(--fade-r, transparent));
  }

  .sk-chart.at-start {
    --fade-l: #000;
  }

  .sk-chart.at-end {
    --fade-r: #000;
  }
}

/* (the money lines live inside the columns' area, so they span it however wide it scrolls) */
.sk-cols > .sk-lines {
  inset: 0;
  width: auto !important;
}

/* (every row the same: the quick buttons always get room for three, lined up on the right,
   so all the bars are as long, whether a film has 2 buttons or 3) */
@media (min-width: 1001px) {
  .bo-line {
    grid-template-columns: 44px 56px minmax(0, 1fr) 150px 114px 22px;
  }

  .bo-line > .bo-acts {
    justify-content: flex-end;
  }
}

/* ---------- box office: adjusted for inflation (a switch beside the filter) ---------- */

.bo-real-tag {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.14);
  color: #f5c518;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: middle;
}

.bo-top-then {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.bo-top-then i {
  margin-right: 4px;
  font-size: 11px;
}

/* (a budget that is a sliver of the gross, e.g. a classic that made 100× its cost, still shows
   as a small striped marker at the start of the bar; the exact cost is written under it) */
.bo-budget {
  width: max(var(--b), 10px);
}

/* (the inflation switch sits at the top, with the years: on the right on wide screens) */
.bo-controls .bo-infl {
  margin-left: auto;
}

@media (max-width: 700px) {
  .bo-controls .bo-infl {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* ---------- adjusted for inflation: a chip, "2026 dollars" (grey; solid gold with a soft shine when on) ---------- */
.bo-controls .bo-infl,
.bo-infl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--glass-bg);
  color: var(--glass-muted, var(--text-muted));
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.bo-infl > .fa-scale-balanced {
  color: #f5c518;
  font-size: 13px;
  transition: color 0.3s ease;
}

.bo-infl:hover {
  border-color: rgba(245, 197, 24, 0.45);
  background: var(--glass-bg-hover);
  color: var(--text);
}

.bo-infl:active {
  transform: scale(0.96);
}

.bo-infl:focus-visible {
  outline: 2px solid #f5c518;
  outline-offset: 3px;
}

/* the check comes in when it's on */
.bi-check {
  width: 0;
  margin-left: -8px;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.4);
  transition: width 0.3s ease, margin 0.3s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* on: solid gold */
.bo-infl.on {
  border-color: transparent;
  background: linear-gradient(135deg, #ffe680, #f5c518 45%, #d49b0a);
  color: #1d1500;
  box-shadow: 0 4px 18px rgba(245, 197, 24, 0.35);
}

.bo-infl.on > .fa-scale-balanced {
  color: #1d1500;
}

.bo-infl.on .bi-check {
  width: 12px;
  margin-left: 0;
  opacity: 1;
  transform: none;
}

/* a soft shine across the gold now and then */
.bo-infl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.bo-infl.on::after {
  opacity: 1;
  animation: bi-shine 3.4s ease-in-out 0.4s infinite;
}

@keyframes bi-shine {
  0% {
    transform: translateX(-120%);
  }
  40%,
  100% {
    transform: translateX(120%);
  }
}

@media (max-width: 700px) {
  .bo-controls .bo-infl {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-infl.on::after {
    animation: none;
    opacity: 0;
  }

  .bi-check {
    transition: none;
  }
}

/* (light theme: a deeper gold icon, so it shows on the light chip) */
html[data-theme="light"] .bo-infl:not(.on) > .fa-scale-balanced {
  color: #b07d05;
}

/* (tablets under 1100px: Box Office moves from the bar into the profile menu, so the eight
   links don't crowd the logo and the buttons; Tier List follows under 1000px) */
@media (max-width: 1100px) {
  html.tablet .nav-links li:has(> a[href="box-office.html"]) {
    display: none;
  }

  html.tablet .profile-menu .menu-group a.bo-menu-link {
    display: flex;
  }
}

/* Box Office in the profile menu only where nothing else shows it: tablets under 1100px.
   Computers have it in the navbar (or its side menu), phones in the Library tab */
.profile-menu .menu-group a.bo-menu-link {
  display: none;
}

@media (max-width: 1100px) {
  html.tablet .profile-menu .menu-group a.bo-menu-link {
    display: flex;
  }
}

/* (room before the first column: it and its highlight outline stay clear of the chart's edge) */
.sk-cols {
  padding-left: 6px;
}

@media (max-width: 900px) {
  .sk-cols {
    padding-left: 12px;
  }
}

/* (phones: the chart clips what sticks out (it scrolls sideways), so room above the tallest
   column: its outline and glow stay whole) */
@media (max-width: 900px) {
  .sk-chart {
    padding-top: 12px;
  }
}

/* ---------- the chart's controls: sort + List / Posters together on the right, the Watched filter under them ---------- */
.bo-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bo-head-tools .top10-switch {
  margin: 0;
}

.bo-view .top10-tab i {
  margin-right: 0;
}

.bo-view-label {
  margin-left: 5px;
}

@media (max-width: 700px) {
  /* the title with the two view icons beside it; the sort below, full width, four equal parts;
     then the Watched filter, full width too */
  .bo-chart-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title view"
      "sort sort";
    align-items: center;
    gap: 12px 10px;
    margin-bottom: 10px;
  }

  .bo-head-tools {
    display: contents;
  }

  .bo-chart-title {
    grid-area: title;
  }

  .bo-view {
    grid-area: view;
    align-self: start;
  }

  .bo-view-label {
    display: none;
  }

  .bo-view .top10-tab {
    padding: 8px 12px;
  }

  .bo-sort {
    grid-area: sort;
    display: flex;
    width: 100%;
  }

  .bo-sort .top10-tab {
    flex: 1;
    padding: 9px 4px;
  }

  .bo-tools {
    display: block;
    margin: 0 0 14px;
  }

  .bo-show {
    display: flex;
    width: 100%;
    overflow: visible;
  }

  .bo-show .top10-tab {
    flex: 1 1 auto;
    padding: 9px 6px;
    white-space: nowrap;
  }
}

/* (the "in 2026 dollars" tag stays in one piece: it moves to the next line whole) */
.bo-real-tag {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .bo-chart-title .bo-real-tag {
    margin: 6px 0 0;
  }
}

/* (phones: the years on the first row; the year picker and the Inflation chip side by side
   on the second, the chip only as wide as it needs) */
@media (max-width: 700px) {
  .bo-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .bo-controls .bo-scope {
    grid-column: 1 / -1;
  }

  .bo-controls .glass-select {
    grid-column: 1;
    min-width: 0;
  }

  .bo-controls .glass-select select {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .bo-controls .bo-infl {
    grid-column: 2;
    width: auto;
    flex: none;
    padding: 0 16px;
  }
}

/* ---------- phones: a chip row (Discover categories, Movies / TV / Anime filters) is one line that
   scrolls sideways, edge to edge; an edge fades only where there are more chips that way ---------- */
@media (max-width: 700px) {
  .chips:not(.bo-genres):not(.sk-chips) {
    position: relative;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 2px 10px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, var(--chips-l, transparent), #000 18px, #000 calc(100% - 28px), var(--chips-r, transparent));
    mask-image: linear-gradient(90deg, var(--chips-l, transparent), #000 18px, #000 calc(100% - 28px), var(--chips-r, transparent));
  }

  .chips:not(.bo-genres):not(.sk-chips)::-webkit-scrollbar {
    display: none;
  }

  .chips:not(.bo-genres):not(.sk-chips) > .chip {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .chips.at-start {
    --chips-l: #000;
  }

  .chips.at-end {
    --chips-r: #000;
  }
}

/* ---------- phones: the › button at the right end of a chip row (while there are more chips that way) ---------- */
.chips-wrap {
  position: relative;
}

.chips-more {
  display: none;
}

@media (max-width: 700px) {
  .chips-more {
    position: absolute;
    top: 50%;
    right: -4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    font-size: 11px;
    box-shadow: -10px 0 16px var(--bg), 0 4px 12px rgba(0, 0, 0, 0.35);
    transform: translateY(calc(-50% - 2px));
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .chips-more:active {
    transform: translateY(calc(-50% - 2px)) scale(0.9);
  }

  /* (at the end of the row, or a row that fits: no button) */
  .chips-wrap:has(> .chips.at-end) .chips-more {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 2px)) scale(0.6);
  }

  /* (room after the last chip, so the button never covers it; constant, so nothing jumps) */
  .chips-wrap .chips {
    padding-right: 40px;
  }
}

/* ---------- the site's dropdown lists (every <select>): dark glass like the menus, the picked one in red ---------- */
html.sm-lock {
  overflow: hidden;
}

.sm-pop {
  position: fixed;
  z-index: 3100;
  display: flex;
  flex-direction: column;
  max-height: min(380px, calc(100vh - 40px));
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(24, 24, 28, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0.2s;
}

.sm-pop.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sm-title {
  display: none;
}

.sm-find {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 2px 2px 6px;
}

.sm-find i {
  position: absolute;
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  pointer-events: none;
}

.sm-search {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 14px;
}

.sm-search:focus {
  border-color: rgba(229, 9, 20, 0.6);
  outline: none;
}

.sm-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sm-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sm-opt.hot {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.sm-opt.on {
  background: rgba(229, 9, 20, 0.2);
  color: #fff;
}

.sm-opt.on.hot {
  background: rgba(229, 9, 20, 0.3);
}

.sm-opt i {
  color: var(--accent-hover);
  font-size: 12px;
}

.sm-opt:disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.sm-none {
  margin: 0;
  padding: 16px 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-align: center;
}

/* phones: a sheet at the bottom (the page dims behind it), with its title and bigger rows */
.sm-pop.sheet {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto;
  max-height: 70vh;
  padding: 10px;
  border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.55);
  transform: translateY(30px);
  transform-origin: bottom center;
}

.sm-pop.sheet.open {
  transform: none;
}

.sm-pop.sheet .sm-title {
  display: block;
  flex-shrink: 0;
  padding: 6px 12px 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sm-pop.sheet .sm-opt {
  min-height: 48px;
  font-size: 16px;
}

.sm-pop.sheet .sm-search {
  height: 44px;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .sm-pop {
    transition: none;
  }
}

/* (opening: visible at once, so its search box can take the cursor; the fade still plays) */
.sm-pop.open {
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s;
}

/* Watchlist page: Plan to watch / Favorites in the order they were added, or newest releases first */
.wl-sort {
  margin: 0 4px 0 auto;
}

.wl-sort .top10-tab {
  padding: 6px 14px;
  font-size: 13px;
}

.wl-sort .top10-tab i {
  margin-right: 2px;
  font-size: 11.5px;
}

.wl-sort-s {
  display: none;
}

@media (max-width: 700px) {
  /* phones: under the title, beside the type switch, the short labels */
  .wl-sort {
    order: 4;
    margin: 0 0 0 auto;
  }

  .wl-sort .top10-tab {
    padding: 6px 10px;
    font-size: 12.5px;
  }

  .wl-sort-l {
    display: none;
  }

  .wl-sort-s {
    display: inline;
  }
}

/* ============================== Tier list: saved tier lists (the shelf, Save, the viewer) ============================== */
/* each saved list is a glass card with a tiny version of its tiers (the letters and a few
   posters); the one on the board has a red edge. Opening one shows it big, to look at. */

.tl-saved {
  margin: 0 0 18px;
}

.tl-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tl-saved-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tl-saved-head h2 i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.tl-saved-head h2 small {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--text-muted);
  font-size: 12px;
  vertical-align: middle;
}

.tl-saved-head .btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
}

.tl-shelf {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 12px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tl-card {
  position: relative;
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s, box-shadow 0.2s;
}

.tl-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.tl-card.on {
  border-color: rgba(229, 9, 20, 0.7);
  box-shadow: 0 0 0 1px rgba(229, 9, 20, 0.35), 0 10px 28px rgba(144, 13, 9, 0.25);
}

.tl-mini {
  display: grid;
  gap: 3px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.tl-mini-row {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding-right: 4px;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%);
}

.tl-mini-row b {
  flex: none;
  width: 22px;
  color: var(--tc);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.tl-mini-row[style*="#62626b"] b {
  color: #9a9aa3;
}

.tl-mini-row img {
  flex: none;
  width: 17px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
}

.tl-mini-row em {
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.tl-card-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tl-card-text strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-card-text small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.tl-card-on {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(144, 13, 9, 0.45);
}

.tl-shelf-empty {
  flex: 1;
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--glass-border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.tl-shelf-empty i {
  margin-right: 6px;
  color: var(--accent-hover);
}

/* the status and Save, at the end of the buttons */
.tl-actions {
  align-items: center;
}

.tl-status {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13.5px;
}

.tl-status b {
  color: var(--text);
}

.tl-status .fa-check {
  color: #7fd6a2;
}

.tl-dirty {
  color: #ffb14a;
  font-weight: 600;
}

.tl-actions .tl-save:not(:disabled) {
  border-color: rgba(229, 9, 20, 0.6);
  background: rgba(229, 9, 20, 0.16);
  color: #fff;
}

.tl-actions .btn[hidden] {
  display: none;
}

/* the viewer */
.tlv-modal {
  max-width: 820px;
}

.tlv-head {
  margin: 0 36px 16px 0;
}

.tlv-head h3 {
  margin: 4px 0 2px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
}

.tlv-head small {
  color: var(--text-muted);
  font-size: 13px;
}

.tlv-board {
  display: grid;
  gap: 8px;
}

.tlv-row {
  display: flex;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 14%, transparent), transparent 45%), rgba(255, 255, 255, 0.04);
  animation: wl-in 0.4s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

.tlv-row:nth-child(2) { animation-delay: 40ms; }
.tlv-row:nth-child(3) { animation-delay: 80ms; }
.tlv-row:nth-child(4) { animation-delay: 120ms; }
.tlv-row:nth-child(5) { animation-delay: 160ms; }

.tlv-label {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}

.tlv-label b {
  color: var(--tc);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 16px color-mix(in srgb, var(--tc) 70%, transparent);
}

.tlv-row[data-tier="S"] .tlv-label b {
  color: #ff5a64;
}

.tlv-row[data-tier="D"] .tlv-label b {
  color: #9a9aa3;
  text-shadow: none;
}

.tlv-label small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tlv-posters {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
  padding: 8px;
}

.tlv-posters button {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.tlv-posters button:hover {
  transform: translateY(-2px) scale(1.04);
}

.tlv-posters img {
  display: block;
  width: 50px;
  height: 75px;
  border-radius: 8px;
  object-fit: cover;
}

.tlv-none {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

.tlv-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tlv-buttons .btn {
  border-radius: 999px;
}

.tlv-modal .tlv-buttons .btn:not(.btn-primary) {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tlv-modal .tlv-buttons .tlv-delete {
  width: 42px;
  margin-left: auto;
  padding: 0;
  justify-content: center;
}

.tlv-modal .tlv-buttons .tlv-delete:hover {
  border-color: rgba(229, 9, 20, 0.6);
  background: rgba(229, 9, 20, 0.2);
}

@media (max-width: 700px) {
  .tl-card {
    flex-basis: 190px;
    gap: 8px;
    padding: 10px;
  }

  .tl-mini-row {
    height: 20px;
  }

  .tl-mini-row img {
    width: 13px;
    height: 19px;
  }

  .tl-saved-head h2 {
    font-size: 17px;
  }

  .tl-saved-head .btn {
    padding: 7px 13px;
    font-size: 13.5px;
  }

  .tl-status {
    order: -1;
    flex: 1 1 100%;
    margin: 0;
  }

  .tlv-label {
    width: 54px;
  }

  .tlv-label b {
    font-size: 26px;
  }

  .tlv-label small {
    display: none;
  }

  .tlv-posters img {
    width: 40px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlv-row {
    animation: none;
  }
}

/* ============================== Wrapped: decades, countries, director, runtimes, fun facts ============================== */

.wr-card.wr-decades { --c1: #0fa3b1; --c2: #0b3c49; --c3: #2a5bd7; background: radial-gradient(120% 80% at 100% 0%, #0fa3b1, transparent 60%), radial-gradient(120% 80% at 0% 100%, #0b3c49, transparent 60%), #061216; }
.wr-card.wr-countries { --c1: #1f9d6b; --c2: #0b3c49; --c3: #f5c518; background: radial-gradient(120% 80% at 0% 0%, #1f9d6b, transparent 60%), radial-gradient(120% 80% at 100% 100%, #0b3c49, transparent 60%), #07120e; }
.wr-card.wr-director { --c1: #e0393e; --c2: #3a0d5c; --c3: #f5c518; background: radial-gradient(120% 80% at 100% 0%, #b92222, transparent 60%), radial-gradient(120% 80% at 0% 100%, #3a0d5c, transparent 60%), #12090d; }
.wr-card.wr-runtime { --c1: #ff7a1a; --c2: #2a5bd7; --c3: #e0393e; background: radial-gradient(120% 80% at 0% 0%, #ff7a1a, transparent 60%), radial-gradient(120% 80% at 100% 100%, #1b2f6b, transparent 60%), #120b08; }
.wr-card.wr-facts { --c1: #9b2fae; --c2: #e0393e; --c3: #f5c518; background: radial-gradient(120% 80% at 100% 0%, #9b2fae, transparent 60%), radial-gradient(120% 80% at 0% 100%, #7a1010, transparent 60%), #110a14; }

/* decades: the count sits on each column */
.wr-cols-dec {
  gap: 8px;
  height: 170px;
}

.wr-cols-dec b {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.wr-cols-dec .on b {
  color: #fff;
}

.wr-cols-dec span {
  font-size: 12px;
  font-weight: 700;
}

/* countries: a flag before the name */
.wr-flags .wr-bar {
  grid-template-columns: 140px 1fr 28px;
}

.wr-flags .wr-bar span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wr-flags img {
  flex: none;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* a director's films, a row of small posters */
.wr-strip {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.wr-strip img {
  width: 52px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.wr-strip img:nth-child(odd) {
  transform: rotate(-3deg);
}

.wr-strip img:nth-child(even) {
  transform: rotate(3deg) translateY(4px);
}

/* the runners-up: small faces with their count */
.wr-faces {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.wr-faces span {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 64px;
}

.wr-faces img,
.wr-faces span > i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.wr-faces b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11px;
  line-height: 1.2;
}

.wr-faces small {
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  font-weight: 700;
}

/* fun facts */
.wr-facts-list {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.wr-facts-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.wr-facts-list span {
  flex: none;
  font-size: 26px;
  line-height: 1;
}

.wr-facts-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

/* the summary: six numbers */
.wr-grid-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wr-grid-6 div {
  justify-content: center;
  min-width: 0;
  padding: 10px 12px;
}

.wr-grid-6 b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 18px;
  line-height: 1.15;
  white-space: normal;
}

.wr-grid-6 .wr-t b {
  font-size: 15px;
}

.wr-grid-6 span {
  font-size: 12px;
}

@media (max-width: 420px) {
  .wr-flags .wr-bar {
    grid-template-columns: 138px 1fr 24px;
  }

  .wr-faces {
    gap: 8px;
  }
}

.wr-nw {
  white-space: nowrap;
}

/* ============================== Profile: challenges & achievements ============================== */
/* glass badge cards with a medal: the ring fills with your progress to the next level, and
   turns bronze, silver or gold (--tc) as you reach them */

.t-locked { --tc: #6b6b75; --tc2: #3a3a42; }
.t-bronze { --tc: #d08a4e; --tc2: #6e3c16; }
.t-silver { --tc: #d7dde6; --tc2: #6f7886; }
.t-gold { --tc: #f5c518; --tc2: #8a5a00; }

.ach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ach-tally {
  display: flex;
  gap: 6px;
}

.ach-tally span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tc) 90%, #fff), var(--tc2));
  color: #1a1206;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tc) 35%, transparent);
}

.ach-progress {
  display: grid;
  gap: 6px;
  margin: 4px 0 18px;
}

.ach-progress > span {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--glass-bg);
}

.ach-progress > span::before {
  content: "";
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d08a4e, #d7dde6, #f5c518);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ach-progress small {
  color: var(--text-muted);
  font-size: 13px;
}

.ach-sub {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ach-next,
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.ach-next {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ach {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s, box-shadow 0.2s;
}

.ach:hover {
  border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.ach:not(.t-locked) {
  background: linear-gradient(120deg, color-mix(in srgb, var(--tc) 12%, transparent), transparent 55%), var(--glass-bg);
}

/* the medal: a progress ring around the icon */
.ach-medal {
  display: grid;
  flex: none;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--tc) var(--p, 100%), rgba(255, 255, 255, 0.1) 0);
}

.ach-medal span {
  display: grid;
  place-items: center;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 55%, #1b1b20), #141418 75%);
  font-size: 25px;
  line-height: 1;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.12), inset 0 -3px 8px rgba(0, 0, 0, 0.5);
}

.t-locked .ach-medal span {
  background: #1a1a1f;
  filter: grayscale(0.9);
  opacity: 0.7;
}

.t-gold .ach-medal {
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.35);
}

.ach-text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.ach-text strong {
  font-size: 15.5px;
}

.ach-text small {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.ach-bar {
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.2);
}

.ach-bar i {
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: inherit;
  background: var(--tc);
}

.t-locked .ach-bar i {
  background: var(--accent);
}

.ach-meta {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ach-meta b {
  color: var(--tc);
}

.t-silver .ach-meta b {
  color: var(--text);
}

.ach-new {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(144, 13, 9, 0.45);
  animation: ach-bounce 1.4s ease-in-out infinite;
}

.ach.fresh .ach-medal {
  animation: ach-shine 1.6s ease-in-out infinite;
}

@keyframes ach-bounce {
  50% {
    transform: translateY(-3px);
  }
}

@keyframes ach-shine {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tc) 25%, transparent), 0 0 28px color-mix(in srgb, var(--tc) 55%, transparent);
  }
}

/* next up: bigger */
.ach-big {
  padding: 18px;
}

.ach-big .ach-medal {
  width: 72px;
  height: 72px;
}

.ach-big .ach-medal span {
  font-size: 32px;
}

/* the pop-up */
.ach-modal {
  max-width: 620px;
}

.ach-m-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 36px 18px 0;
}

.ach-m-top .ach-medal {
  --p: 100%;
  width: 84px;
  height: 84px;
}

.ach-m-top .ach-medal span {
  font-size: 38px;
}

.ach-m-top h3 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 800;
  text-align: left;
}

.ach-who {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.ach-levels {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.ach-levels li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.ach-levels li.done {
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
  background: color-mix(in srgb, var(--tc) 10%, transparent);
}

.ach-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 800;
}

.done .ach-dot {
  background: var(--tc);
  color: #1a1206;
}

.ach-levels div {
  display: grid;
  flex: 1;
  min-width: 0;
}

.ach-levels b {
  color: var(--tc);
  font-size: 13px;
}

.ach-levels small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.ach-levels em {
  flex: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

.ach-m h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.ach-m h4 small {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.ach-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}

.ach-posters button {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 10.5px;
  text-align: center;
  cursor: pointer;
}

.ach-posters img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s;
}

.ach-posters button:hover img {
  transform: translateY(-2px) scale(1.03);
}

.ach-posters span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ach-more,
.ach-empty {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

@media (max-width: 520px) {
  .ach-next {
    display: flex;
    overflow-x: auto;
    margin: 0 -10px 22px;
    padding: 10px 10px 4px;
    scroll-padding: 0 10px;
    scroll-snap-type: x mandatory;
  }

  .ach-next .ach {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .ach-grid {
    grid-template-columns: 1fr;
  }

  .ach-m-top .ach-medal {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ach-new,
  .ach.fresh .ach-medal {
    animation: none;
  }
}

/* ============================== Movie trivia (title page card + the quiz pop-up) ============================== */

.trivia-modal {
  max-width: 560px;
  overflow: hidden;
}

.tq-intro,
.tq-end {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.tq-poster {
  width: 110px;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  transform: rotate(-3deg);
}

.tq-intro h3,
.tq-end h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.tq-intro h3 span {
  color: var(--accent-hover);
}

.tq-intro p,
.tq-end p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.tq-best b {
  color: #fff;
}

.tq-best.new {
  color: #7fd6a2;
  font-weight: 600;
}

.tq-intro .btn,
.tq-end .btn {
  border-radius: 999px;
}

.tq-start {
  min-width: 200px;
  margin-top: 6px;
}

.tq-sorry {
  margin-top: 6px;
}

/* a question */
.tq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-right: 48px;
}

.tq-dots {
  display: flex;
  gap: 5px;
}

.tq-dots span {
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s, width 0.3s;
}

.tq-dots .now {
  width: 26px;
  background: #fff;
}

.tq-dots .ok {
  background: #46d369;
}

.tq-dots .no {
  background: var(--accent);
}

.tq-score {
  color: var(--gold, #f5c518);
  font-weight: 800;
}

.tq-time {
  height: 4px;
  margin: 14px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.tq-time i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5c518, var(--accent));
  transform-origin: left;
  animation: tq-time var(--t) linear forwards;
}

.tq-time.stop i {
  animation-play-state: paused;
}

@keyframes tq-time {
  to {
    transform: scaleX(0);
  }
}

.tq-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trivia-modal .tq-q {
  margin: 6px 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  animation: wl-in 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.tq-q b {
  color: var(--accent-hover);
}

.tq-opts {
  display: grid;
  gap: 8px;
}

.tq-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  animation: wl-in 0.35s cubic-bezier(0.32, 0.72, 0, 1) backwards;
  animation-delay: var(--d);
}

.tq-opt:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.tq-opt:active:not(:disabled) {
  transform: scale(0.98);
}

.tq-opt b {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

.tq-opt:disabled {
  cursor: default;
  opacity: 0.55;
}

.tq-opt.right {
  border-color: rgba(70, 211, 105, 0.8);
  background: rgba(70, 211, 105, 0.18);
  opacity: 1;
  animation: tq-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tq-opt.right b {
  background: #46d369;
  color: #06220f;
}

.tq-opt.wrong {
  border-color: rgba(229, 9, 20, 0.8);
  background: rgba(229, 9, 20, 0.2);
  opacity: 1;
  animation: tq-shake 0.4s;
}

.tq-opt.wrong b {
  background: var(--accent);
}

@keyframes tq-pop {
  50% {
    transform: scale(1.03);
  }
}

@keyframes tq-shake {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

.tq-after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 14px;
}

.tq-after:empty {
  visibility: hidden;
}

.tq-verdict {
  margin: 0;
  font-weight: 700;
}

.tq-verdict.ok {
  color: #7fd6a2;
}

.tq-verdict.no {
  color: #ff8a84;
}

.tq-verdict small {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.tq-after .btn {
  flex: none;
  border-radius: 999px;
}

/* the score */
.tq-ring {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 6px 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p), rgba(255, 255, 255, 0.1) 0);
}

.great .tq-ring {
  background: conic-gradient(#f5c518 var(--p), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 40px rgba(245, 197, 24, 0.3);
}

.tq-ring > span {
  display: grid;
  place-items: center;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 50%;
  background: #1b1b20;
  line-height: 1;
}

.tq-ring b {
  font-size: 52px;
  font-weight: 900;
}

.tq-ring small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
}

.tq-rank-icon {
  display: inline-block;
  animation: tq-pop 0.6s 0.4s both;
}

.tq-ach {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(245, 197, 24, 0.45);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(245, 197, 24, 0.2), rgba(245, 197, 24, 0.08));
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}

.tq-ach i {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5c518;
  color: #2a1d00;
  font-size: 13px;
}

.tq-ach b {
  color: #f5c518;
}

.tq-end-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.trivia-modal .tq-end-buttons .btn:not(.btn-primary) {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tq-confetti {
  position: absolute;
  inset: -30px 0 0;
  overflow: hidden;
  pointer-events: none;
}

.tq-confetti i {
  position: absolute;
  top: -10px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  animation: tq-fall var(--t) var(--d) ease-in forwards;
}

@keyframes tq-fall {
  to {
    transform: translate(var(--x), 520px) rotate(540deg);
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .tq-dots span {
    width: 12px;
  }

  .tq-dots .now {
    width: 18px;
  }

  .tq-q {
    font-size: 18px;
  }

  .tq-opt {
    min-height: 48px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tq-opt,
  .tq-q,
  .tq-opt.right,
  .tq-opt.wrong,
  .tq-rank-icon {
    animation: none;
  }
}

/* ============================== Title page: Soundtrack (Apple Music previews) ============================== */
/* one glass card over the album's blurred cover: the album on the left (the cover with a
   record behind it that slides out and spins while a preview plays, the facts, the buttons,
   what's playing now), the tracks on the right in their own scrolling list */

.st-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 26px;
  padding: 24px;
  overflow: hidden;
  overflow: clip; /* (hidden could still be scrolled by the browser) */
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: #121215;
  color: #fff;
  isolation: isolate;
}

.st-card::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -2;
  background: var(--art) center / cover no-repeat;
  filter: blur(40px) saturate(1.4);
  opacity: 0.55;
  transform: scale(1.15);
}

.st-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(12, 12, 14, 0.55), rgba(12, 12, 14, 0.82) 45%, rgba(12, 12, 14, 0.9));
}

.st-side {
  display: grid;
  align-content: start;
  gap: 16px;
}

.st-cover {
  position: relative;
  width: min(100%, 230px);
  aspect-ratio: 1;
  margin-right: 40px;
}

.st-cover img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}

.st-vinyl {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1a1a1e 0 2px, #0c0c0e 2px 4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  translate: 14px 0;
  transition: translate 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.st-vinyl::before {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--art) center / cover;
  box-shadow: 0 0 0 3px #0b0b0d;
}

.st-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, 0.1) 25%, transparent 30% 70%, rgba(255, 255, 255, 0.08) 75%, transparent 80%);
}

.t-sound:hover .st-vinyl {
  translate: 24px 0;
}

.t-sound.is-playing .st-vinyl {
  translate: 40px 0;
  animation: st-spin 2.2s linear infinite;
}

@keyframes st-spin {
  to {
    rotate: 360deg;
  }
}

.st-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.st-info small {
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-info h3 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.st-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

.st-info .st-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
}

.st-switch {
  justify-self: start;
  margin-top: 10px;
}

.st-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.st-buttons .btn {
  border-radius: 999px;
}

.st-card .st-apple {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* now playing */
.st-now {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 14px;
  background: rgba(229, 9, 20, 0.12);
  animation: wl-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.st-now[hidden] {
  display: none;
}

.st-now-name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-now-bar {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.st-now-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s linear;
}

.st-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 14px;
}

.st-bars i {
  flex: 1;
  height: 30%;
  border-radius: 1px;
  background: #ff6b6b;
  animation: st-bar 0.9s ease-in-out infinite;
}

.st-bars i:nth-child(2) {
  animation-delay: -0.3s;
}

.st-bars i:nth-child(3) {
  animation-delay: -0.6s;
}

.st-now.paused .st-bars i {
  animation-play-state: paused;
}

@keyframes st-bar {
  50% {
    height: 100%;
  }
}

/* the tracks: their own scrolling list */
.st-tracks {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  max-height: 420px;
  margin: 0;
  padding: 0 6px 0 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  /* (a soft fade at the bottom: there is more below) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  padding-bottom: 28px;
}

.st-track {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 12px 4px 4px;
  overflow: hidden;
  border-radius: 12px;
  transition: background 0.2s;
}

.st-track:hover {
  background: rgba(255, 255, 255, 0.07);
}

.st-track.on {
  background: rgba(229, 9, 20, 0.18);
}

.st-track.on::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--p, 0%);
  height: 2px;
  background: var(--accent);
  transition: width 0.25s linear;
}

.st-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  cursor: pointer;
}

.st-play i {
  position: absolute;
  opacity: 0;
  font-size: 11px;
  transition: opacity 0.15s;
}

.st-n {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s;
}

.st-track:hover .st-play:not(:disabled) .st-n,
.st-track.on .st-n {
  opacity: 0;
}

.st-track:hover .st-play:not(:disabled) i,
.st-track.on .st-play i {
  opacity: 1;
}

.st-track.on .st-play {
  background: var(--accent);
  color: #fff;
}

.st-play:disabled {
  cursor: default;
}

.st-name {
  display: grid;
  min-width: 0;
}

.st-name b {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-track.on .st-name b {
  color: #ff8a84;
}

.st-name small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-preview .st-name b {
  color: rgba(255, 255, 255, 0.45);
}

.st-track time {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.st-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .st-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
    border-radius: 22px;
  }

  .st-side {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 14px 30px;
  }

  .st-cover {
    width: 120px;
    margin-right: 0;
  }

  .t-sound.is-playing .st-vinyl {
    translate: 26px 0;
  }

  .t-sound:hover .st-vinyl {
    translate: 14px 0;
  }

  .st-info h3 {
    font-size: 18px;
  }

  .st-buttons .btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .st-now {
    grid-column: 1 / -1;
  }

  .st-tracks {
    max-height: 360px;
  }

  .st-track {
    gap: 8px;
    padding-right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-sound.is-playing .st-vinyl,
  .st-bars i {
    animation: none;
  }
}

/* ============================== Advanced search (search.html) ============================== */
/* the filters in a glass column on the left (a fold-out panel on phones), the results on the
   right with the filters in use as removable chips above them */

.page-sub {
  margin: -6px 0 18px;
  color: var(--text-muted);
}

.as-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.as-sort {
  margin-left: auto;
}

.as-toggle {
  display: none;
  border-radius: 999px;
}

.as-toggle b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
}

.as-toggle b:empty {
  display: none;
}

.as-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.as-filters {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 4px;
  max-height: calc(100vh - 100px);
  padding: 8px 14px 16px;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.as-group {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.as-group h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.as-group h3 i {
  margin-right: 4px;
  color: var(--accent-hover);
}

.as-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.as-chip {
  padding: 6px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.as-chip:hover {
  border-color: rgba(229, 9, 20, 0.5);
}

.as-chip:active {
  transform: scale(0.96);
}

.as-chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(144, 13, 9, 0.35);
}

.as-years {
  display: flex;
  align-items: center;
  gap: 8px;
}

.as-years input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.as-years input:focus {
  border-color: var(--accent);
  outline: none;
}

.as-group .glass-select {
  width: 100%;
}

.as-hint {
  color: var(--text-muted);
  font-size: 12px;
}

/* a person / franchise: type, then pick */
.as-person,
.as-picked {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.as-person > i,
.as-picked > i {
  color: var(--text-muted);
  font-size: 13px;
}

.as-person input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  outline: none;
}

.as-person:focus-within {
  border-color: var(--accent);
}

.as-picked {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(229, 9, 20, 0.12);
}

.as-picked span {
  flex: 1;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-unpick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.18);
  color: var(--text);
  cursor: pointer;
}

.as-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(24, 24, 28, 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.as-suggest[hidden] {
  display: none;
}

.as-sug {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.as-sug:hover,
.as-sug:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.as-sug img,
.as-noimg {
  flex: none;
  width: 34px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.as-noimg {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.4);
}

.as-sug span {
  display: grid;
  min-width: 0;
}

.as-sug b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-sug small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-reset {
  margin-top: 12px;
  border-radius: 999px;
}

/* the filters in use */
.as-active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.as-active:empty {
  display: none;
}

.as-on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(229, 9, 20, 0.45);
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.12);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  animation: wl-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.as-on i {
  font-size: 11px;
  opacity: 0.7;
}

.as-on:hover {
  background: rgba(229, 9, 20, 0.22);
}

.as-on.as-clear-all {
  border-color: var(--glass-border);
  background: transparent;
  color: var(--text-muted);
}

.as-note {
  margin: -4px 0 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.as-results .result-count {
  margin-top: 0;
}

/* while it looks: the results fade a little, placeholders pulse */
.as-loading .as-results .movie-grid {
  opacity: 0.75;
  transition: opacity 0.2s;
}

.as-skel {
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--glass-bg) 30%, rgba(255, 255, 255, 0.08) 50%, var(--glass-bg) 70%) 0 0 / 300% 100%;
  animation: as-shimmer 1.3s linear infinite;
}

@keyframes as-shimmer {
  to {
    background-position: -150% 0;
  }
}

@media (max-width: 900px) {
  .as-layout {
    grid-template-columns: 1fr;
  }

  .as-toggle {
    display: inline-flex;
  }

  /* (folded into the page here, as tall as its filters: no longer a box of its own that
     scrolls. Left as one, with overscroll "contain", a swipe that started on the filters
     was kept inside it and the page didn't move: only the edges of the screen scrolled) */
  .as-filters {
    position: static;
    display: none;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }

  #adv.as-open .as-filters {
    display: grid;
    animation: wl-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #adv.as-open .as-toggle {
    border-color: var(--accent);
  }
}

/* phones: Movies | TV shows across the top in two equal halves, then the sort and
   Filters side by side, both the same height and shape */
@media (max-width: 520px) {
  .as-top {
    gap: 8px;
  }

  .as-type {
    display: flex;
    flex: 1 1 100%;
    margin: 0;
  }

  .as-type .top10-tab {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    font-size: 14.5px;
  }

  .as-sort {
    flex: 1 1 0;
    order: 2;
    min-width: 0;
    height: 44px;
    margin-left: 0;
  }

  .as-sort select {
    width: 100%;
    font-size: 14.5px;
  }

  .as-toggle {
    flex: none;
    order: 3;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-skel,
  .as-on {
    animation: none;
  }
}

/* Advanced search: the link under the navbar search, and on Discover */
.search-adv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.search-adv i:first-child {
  color: var(--accent-hover);
}

.search-adv i:last-child {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.6;
}

.search-adv:hover {
  color: #fff;
}

/* Advanced search: posters that would start a half row wait for "Load more" */
.movie-grid .as-held {
  display: none !important;
}

/* ---------- Title page: the Trivia card, one row like the folded notes beside it ---------- */
.xr-card.tq-card {
  display: flex;
  flex-direction: row;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
  align-self: start;
  align-items: center;
  gap: 14px;
}

/* your best: a small ring that fills with the score (grey, red, then gold) */
.tq-ring-s {
  --tc: rgba(255, 255, 255, 0.35);
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--tc) var(--p), rgba(127, 127, 127, 0.18) 0);
}

.tq-ring-s.t-fan {
  --tc: var(--accent);
}

.tq-ring-s.t-buff {
  --tc: #f0a830;
}

.tq-ring-s.t-gold {
  --tc: #f5c518;
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.3);
}

.tq-ring-s > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  padding-top: 10px;
  border-radius: 50%;
  background: var(--surface, #17181c);
  line-height: 1;
}

.tq-ring-s b {
  font-size: 17px;
  font-weight: 800;
}

.tq-ring-s small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.tq-ring-s.t-none > span {
  align-items: center;
  padding: 0;
  color: var(--accent-hover);
  font-size: 17px;
}

.tq-txt {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.tq-txt .xr-label {
  margin-bottom: 2px;
}

.tq-txt b {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tq-txt small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.tq-card .tq-play {
  flex: none;
  padding: 8px 16px;
  border: 1px solid rgba(229, 9, 20, 0.55);
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.14);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s, transform 0.15s;
}

.tq-card .tq-play:hover {
  background: var(--accent);
  color: #fff;
}

.tq-card .tq-play:active {
  transform: scale(0.96);
}

.tq-card .tq-play i {
  font-size: 11px;
}

.tq-txt b small {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}

@media (max-width: 420px) {
  .tq-txt b small {
    display: none;
  }
}

/* Soundtrack: the album centred over the player (computers; phones keep the cover beside the text) */
@media (min-width: 761px) {
  .st-cover {
    justify-self: center;
    /* (the cover itself in the middle; the record slides out to its right) */
    margin: 0;
  }

  .st-info {
    justify-items: center;
    text-align: center;
  }

  .st-switch {
    justify-self: center;
  }

  .st-buttons {
    justify-content: center;
  }

  .st-now {
    justify-self: stretch;
    text-align: left;
  }
}

.pk-cap i {
  margin-right: 4px;
  color: var(--accent-hover);
}

/* ============================== Title page (phones): one row of actions, "Add to a list" ============================== */
/* the Watchlist / Watched / Favorite / Rate buttons: one row, however many there are, the icon
   above a short label (they used to wrap: Rate on a row of its own) */
@media (max-width: 700px) {
  .t-actions {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
  }

  .t-actions .btn {
    flex-direction: column;
    gap: 5px;
    height: 62px;
    padding: 0 4px;
    border-radius: 18px;
    font-size: 12.5px;
    line-height: 1.1;
  }

  .t-actions .btn i {
    font-size: 17px;
  }
}

/* the list button beside Share: red with a count once it's in one of your lists */
.t-round.t-lists {
  position: relative;
}

.t-round.t-lists.on {
  background: var(--accent);
}

/* title page: "More like this" with its Your library / Discover switch */
.t-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 36px; /* (the heading's own top margin, moved here: with it on the heading, the switch beside it sat higher) */
}

.t-more-head .section-title {
  margin: 0;
}

.t-more-head .t-more-switch {
  margin-bottom: 0;
}

.t-more-switch .top10-tab:disabled {
  opacity: 0.4;
  cursor: default;
}

/* (rows keep 56px of room above the posters for lifting on hover, taken back by a -44px
   margin; here 14px more under the switch, not 14px instead of the -44px: that left a gap) */
.t-more-like .movie-row {
  margin-top: -30px;
}

/* ---------- X-Ray: "Made in" as flags only, big and waving a little (the name on hover / tap) ---------- */
.xr-flags.xr-flags-big {
  justify-content: center;
  gap: 14px;
  padding: 4px 0;
}

.xr-flag {
  display: block;
  width: 64px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  animation: xr-flag-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, xr-wave 5s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + 0.6s);
  transform-origin: 0 50%;
}

.xr-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a soft light moving across, like cloth */
.xr-flag {
  position: relative;
}

.xr-flag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 45%, transparent 60%, rgba(0, 0, 0, 0.18) 85%);
  background-size: 250% 100%;
  animation: xr-cloth 4s ease-in-out infinite;
  animation-delay: var(--d);
  pointer-events: none;
}

@keyframes xr-flag-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.8) rotate(-6deg);
  }
}

@keyframes xr-wave {
  0%,
  100% {
    transform: perspective(300px) rotateY(0deg);
  }
  50% {
    transform: perspective(300px) rotateY(-10deg);
  }
}

@keyframes xr-cloth {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xr-flag,
  .xr-flag::before {
    animation: none;
    transition: none;
  }
}

/* ---------- Soundtrack on phones and tablets: the album on top (the cover, beside it the
   facts, vertically centred), the buttons in one row under it, what's playing, and the tracks
   folded behind "Show all 28 tracks" ---------- */
.st-toggle {
  display: none;
}

html.app-ui .st-card,
html.tablet .st-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

html.app-ui .st-side,
html.tablet .st-side {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
}

/* (the facts become the grid's own items, beside the cover) */
html.app-ui .st-info,
html.tablet .st-info {
  display: contents;
  text-align: left;
}

html.app-ui .st-cover,
html.tablet .st-cover {
  grid-column: 1;
  grid-row: 1 / 5;
  justify-self: start;
  width: 108px;
  margin: 0;
}

html.app-ui .st-info > small,
html.tablet .st-info > small {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 11px;
}

html.app-ui .st-info > h3,
html.tablet .st-info > h3 {
  grid-column: 2;
  grid-row: 2;
  font-size: 19px;
}

html.app-ui .st-info > p:not(.st-meta),
html.tablet .st-info > p:not(.st-meta) {
  grid-column: 2;
  grid-row: 3;
  overflow: hidden;
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.app-ui .st-info > .st-meta,
html.tablet .st-info > .st-meta {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  font-size: 13px;
}

html.app-ui .st-switch,
html.app-ui .st-buttons,
html.app-ui .st-now,
html.tablet .st-switch,
html.tablet .st-buttons,
html.tablet .st-now {
  grid-column: 1 / -1;
}

html.app-ui .st-switch,
html.tablet .st-switch {
  justify-self: start;
  margin-top: 12px;
}

html.app-ui .st-buttons,
html.tablet .st-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

html.app-ui .st-buttons .btn,
html.tablet .st-buttons .btn {
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
}

html.app-ui .st-now,
html.tablet .st-now {
  margin-top: 10px;
}

/* the record slides out a little less beside the smaller cover */
html.app-ui .t-sound.is-playing .st-vinyl,
html.tablet .t-sound.is-playing .st-vinyl {
  translate: 22px 0;
}

/* the tracks, folded */
html.app-ui .st-toggle,
html.tablet .st-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

html.app-ui .st-toggle > i:first-child,
html.tablet .st-toggle > i:first-child {
  color: #ff6b6b;
}

html.app-ui .st-toggle .st-chev,
html.tablet .st-toggle .st-chev {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

html.app-ui .st-card.open .st-toggle .st-chev,
html.tablet .st-card.open .st-toggle .st-chev {
  transform: rotate(180deg);
}

html.app-ui .st-card:not(.open) ol.st-tracks,
html.tablet .st-card:not(.open) ol.st-tracks {
  display: none;
}

html.app-ui .st-card.open ol.st-tracks,
html.tablet .st-card.open ol.st-tracks {
  animation: wl-in 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* trivia score: the three buttons on one row on phones (Share as an icon) */
@media (max-width: 420px) {
  .tq-end-buttons {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .tq-end-buttons .btn {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  .tq-end-buttons .tq-bt {
    display: none;
  }
}

/* Profile (phones): the three buttons in one row (icon above the label, like a title page's),
   and "Member since … · 64 titles · 48 rated" only breaking between its parts */
.p-joined .pj {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pv-actions {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    width: 100%;
  }

  .pv-actions > .btn:not([hidden]) {
    flex-direction: column;
    gap: 5px;
    min-height: 60px;
    padding: 8px 4px;
    border-radius: 18px;
    font-size: 12.5px;
    line-height: 1.15;
  }

  .pv-actions > .btn i {
    font-size: 16px;
  }

  .pv-actions > [hidden] {
    display: none;
  }
}

@media (max-width: 700px) {
  /* (phones: the three facts as small pills instead of a line with dots) */
  .p-joined {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .p-joined .dot {
    display: none;
  }

  .p-joined .pj {
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
  }
}

/* phones: "Advanced search" in the search sheet, under the type */
.sheet-adv {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 16px;
  background: rgba(229, 9, 20, 0.1);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.sheet-adv > i:first-child {
  grid-row: 1 / 3;
  color: #ff6b6b;
}

.sheet-adv small {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
}

.sheet-adv .fa-chevron-right {
  grid-column: 3;
  grid-row: 1 / 3;
  font-size: 12px;
  opacity: 0.6;
}

/* wide tablets: the soundtrack's buttons and "Now playing" don't stretch across the whole card */
html.tablet .st-buttons,
html.tablet .st-now,
html.tablet .st-toggle {
  max-width: 560px;
}

/* ============================== Phone tweaks (from screenshots) ============================== */

/* sideways rows on phones: no scrollbars at all (you swipe). Android drew the styled desktop
   ones: a thin vertical bar beside each row and a white corner square */
html.app-ui .movie-row,
html.app-ui .t-cast,
html.app-ui .t-media-row,
html.app-ui .tl-pool {
  scrollbar-width: none;
}

html.app-ui .movie-row::-webkit-scrollbar,
html.app-ui .t-cast::-webkit-scrollbar,
html.app-ui .t-media-row::-webkit-scrollbar,
html.app-ui .tl-pool::-webkit-scrollbar {
  display: none;
}

/* typing (the keyboard is up): the tab bar steps aside, so it doesn't sit on top of the
   Search panel or a form */
html.app-ui.typing .tab-bar {
  opacity: 0;
  transform: translateY(calc(100% + var(--tab-gap) + 16px));
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s;
}

/* Discover: Movies | TV shows | Anime picks in the site's red, like every other switch */
.glass-filters .seg-indicator {
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(144, 13, 9, 0.45);
}

.glass-filters .segmented button.active {
  color: #fff;
}

@media (max-width: 700px) {
  /* Discover on phones: the sort and Advanced search share one row, the same height */
  .glass-filters .glass-select:not(.grow) {
    flex: 1 1 0;
    min-width: 0;
  }

  .glass-filters .glass-select:not(.grow) select {
    width: 100%;
  }

  /* (your lists on phones: one quiet row. Genre, order and rating are round icons (a tap opens
     the usual picker; the one that's set is red, js/pages/browse.js), then the years, then Reset) */
  .list-filters {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 0;
  }

  .list-filters .glass-select,
  .list-filters .glass-select:not(.grow),
  .list-filters .glass-select.grow {
    flex: 0 0 auto;
    justify-content: center;
    width: 40px;
    min-width: 0;
    height: 40px;
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  .list-filters .glass-select > i {
    position: static;
    font-size: 15px;
    transition: color 0.3s ease;
  }

  .list-filters .glass-select::after {
    display: none;
  }

  /* (the picker itself: over the whole circle, unseen) */
  .list-filters .glass-select select,
  .list-filters .glass-select:not(.grow) select,
  .list-filters .glass-select > i + select {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    opacity: 0;
  }

  .list-filters .glass-select.set {
    border-color: transparent;
    background: var(--accent);
  }

  .list-filters .glass-select.set > i {
    color: #fff;
  }

  .list-filters .glass-years {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
  }

  .list-filters .glass-years input {
    width: 44px;
    font-size: 14px;
  }

  .list-filters .glass-round {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }

  /* Watchlist on phones: the type switch and the order switch fit side by side under the title */
  .wl-type .top10-tab {
    padding: 6px 9px;
  }

  .wl-sort .top10-tab {
    padding: 6px 9px;
  }

  .wl-sort .top10-tab i {
    display: none;
  }
}

/* typing in a panel (Search): the tab bar is away, so the panel's room for it goes too and the
   boxes sit just above the keyboard */
html.app-ui.typing .app-sheet.open .sheet-panel {
  padding-bottom: 18px;
}

/* typing in a panel: it stays above the keyboard and never taller than the room left, so its
   top (the title and the search box) stays on screen; the results scroll inside it */
html.app-ui.typing .app-sheet.open .sheet-panel {
  bottom: var(--kb, 0px);
  max-height: calc(var(--vvh, 100vh) - 24px);
}

/* ============================== Share: the sheet (title page) ============================== */
/* a live preview of the picture card, your score / name to add or leave out, a note, the link */

.share-modal {
  max-width: 440px;
}

.sh-top {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding-right: 44px;
}

.sh-title {
  margin: 0;
  overflow: hidden;
  font-size: 19px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-preview {
  position: relative;
  display: grid;
  place-items: center;
  height: min(46vh, 400px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(160deg, #1d1d23, #111115);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.sh-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s;
}

.sh-img:not([src]) {
  opacity: 0;
}

.sh-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.sh-preview.busy .sh-wait {
  opacity: 1;
}

.sh-preview.busy .sh-img {
  opacity: 0.45;
}

.sh-opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.sh-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sh-opt[hidden] {
  display: none;
}

.sh-opt b {
  font-weight: 800;
}

.sh-opt.on {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
}

.sh-opt.on .fa-star {
  color: #f5b82e;
}

.sh-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
}

.sh-note input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
}

.sh-note:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
}

.sh-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
}

.sh-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-copy {
  flex: none;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sh-copy.btn-primary {
  border-color: transparent;
  background: var(--accent);
}

.sh-buttons {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.sh-buttons .btn {
  flex: 1;
  justify-content: center;
  min-height: 46px;
}

.sh-buttons .btn[hidden] {
  display: none;
}

.sh-hint {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 520px) {
  .sh-preview {
    height: min(40vh, 340px);
  }

  /* the two options stay on one row; a long name shortens */
  .sh-opts {
    flex-wrap: nowrap;
  }

  .sh-opt {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 12px;
  }

  .sh-opt[data-opt="rating"] {
    flex: none;
  }

  .sh-opt b {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Title page opened from a shared link: who sent it, their score and their note, in a glass
   card floating at the foot of the screen (above the tab bar on phones) until it is closed */
.t-shared {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 140;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(calc(100% - 32px), 520px);
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(22, 22, 27, 0.82);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: #fff;
  transform: translateX(-50%);
  animation: t-shared-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
  transition: bottom 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s, transform 0.35s;
}

.t-shared.out {
  opacity: 0;
  transform: translate(-50%, 20px);
}

@keyframes t-shared-in {
  from {
    opacity: 0;
    transform: translate(-50%, 30px) scale(0.96);
  }
}

.t-shared-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e50914, #7d0a07);
  box-shadow: 0 6px 16px rgba(229, 9, 20, 0.4);
  font-size: 17px;
  font-weight: 800;
}

.t-shared-text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.t-shared-text p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14.5px;
  line-height: 1.35;
}

.t-shared-text b {
  color: #fff;
}

.t-shared-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid rgba(245, 184, 46, 0.55);
  border-radius: 999px;
  background: rgba(245, 184, 46, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.t-shared-score i {
  align-self: center;
  color: #f5b82e;
  font-size: 11.5px;
}

.t-shared-score small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 600;
}

.t-shared-text q {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
}

.t-shared-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.t-shared-x:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* phones: above the tab bar, and down with it when it slides away */
html.app-ui .t-shared {
  bottom: calc(70px + var(--tab-gap));
}

html.app-ui.tabs-away .t-shared {
  bottom: calc(16px + var(--tab-gap));
}

@media (prefers-reduced-motion: reduce) {
  .t-shared {
    animation: none;
  }
}
/* (the "shared with you" card: the avatar, the text and the close button on one centre line) */
.t-shared {
  align-items: center;
}

.t-shared-text {
  padding-top: 0;
}

/* Title page on computers and tablets: the ⋯ menu at the picture's top right (Share, Add to a
   list). Phones have the same in the round buttons of the top bar, so it hides there. */
.t-more {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "Based on a book": a glass pill beside the ⋯ (the book's warm paper colour on its icon) */
.t-based {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.t-based i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f3dfb4, #c9a46a);
  color: #4a3218;
  font-size: 13px;
  box-shadow: 0 4px 12px -4px rgba(201, 164, 106, 0.8);
}

.t-based:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
}

.t-based-round i {
  color: #f3dfb4;
}

/* (the ⋯ menu stays under its button, not under the pill) */
.t-more .t-more-menu {
  right: 0;
}

.t-more-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.t-more-btn:hover,
.t-more.open .t-more-btn {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
}

.t-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(22, 22, 27, 0.9);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  backdrop-filter: saturate(170%) blur(22px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s 0.2s;
}

.t-more.open .t-more-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s;
}

.t-more-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.t-more-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.t-more-menu button i {
  width: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.t-more-menu button span {
  flex: 1;
}

/* (how many of your lists it's in) */
.t-more-menu button b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 11.5px;
}

/* phones: the ⋮ is in the top row (the round buttons); its menu opens under it, from this box
   (its own buttons are the computer's: hidden here, and Share is already in the top row) */
@media (max-width: 700px) {
  .t-more {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    right: 12px;
    z-index: 7;
  }

  .t-more > :not(.t-more-menu),
  .t-more-menu [data-t="share"] {
    display: none !important;
  }
}

/* (the score sits at the right, just before the close button) */
.t-shared-score {
  flex: none;
}

/* (phones: the name on its own line, "shared this with you" under it) */
@media (max-width: 520px) {
  .t-shared {
    gap: 10px;
    padding: 12px 12px 12px 14px;
  }

  .t-shared-text p {
    font-size: 13.5px;
  }

  .t-shared-text b {
    display: block;
    font-size: 15px;
  }
}

/* (the score in the middle of the room between the text and the close button: the text takes
   only the room it needs, the score's equal margins share the rest; no score: the close button
   keeps to the right) */
.t-shared-text {
  flex: 0 1 auto;
}

.t-shared-score {
  margin: 0 auto;
}

.t-shared-x {
  margin-left: auto;
}

.t-shared-score + .t-shared-x {
  margin-left: 0;
}

/* ============================== Title page: one family of buttons, tidy facts ============================== */
/* Favorite / On Watchlist when on: tinted glass with a red edge (like the gold of a rated title),
   not a solid red block, so the buttons read as one set */
.t-actions .btn.is-on {
  border-color: rgba(229, 9, 20, 0.6);
  background: rgba(229, 9, 20, 0.2);
}

.t-actions .btn.is-on:hover {
  background: rgba(229, 9, 20, 0.3);
}

.t-actions .btn.is-on i {
  color: #ff4d57;
}

@media (max-width: 700px) {
  /* phones: every button a pill of the same height as Trailer, the icon beside its label */
  .btn.t-trailer {
    height: 50px;
  }

  /* the actions under Trailer (Watchlist, Watched, Favorite, Rate): a pill the shape and height
     of Trailer, in the dark glass of the round buttons up top, split by short thin lines into
     equal parts, each its icon beside its name; on: red, rated: gold (no blocks of colour) */
  .t-actions {
    gap: 0;
    height: 50px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .t-actions .btn,
  .t-actions .btn:hover,
  .t-actions .btn.is-on,
  .t-actions .btn.is-on:hover,
  .t-actions .btn.is-rated {
    position: relative;
    flex-direction: row;
    gap: 5px;
    height: 100%;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transform: none;
  }

  .t-actions .btn + .btn::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
  }

  .t-actions .btn:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* only the icons (the names stay for screen readers); a rating keeps its score by the star */
  .t-actions .btn i {
    font-size: 19px;
    color: #fff;
  }

  .t-actions .btn .t-btn-l {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .t-actions .btn .t-btn-score {
    font-size: 15px;
    font-weight: 700;
  }

  .t-actions .btn.is-on,
  .t-actions .btn.is-on i {
    color: #ff4d57;
  }

  .t-actions .btn.is-rated,
  .t-actions .btn.is-rated i {
    color: var(--gold);
  }
}

/* phones: the facts row (match, IMDb, length, year, Rotten Tomatoes) on one line: a little
   tighter, "8.1" without "/ 10", "2h 25m"; if a long one still doesn't fit, it slides sideways
   instead of breaking onto a second line */
@media (max-width: 700px) {
  .t-meta {
    flex-wrap: nowrap;
    gap: 0 6px;
    overflow-x: auto;
    font-size: 13.5px;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .t-meta::-webkit-scrollbar {
    display: none;
  }

  .t-meta > * {
    flex: none;
  }

  .t-meta .t-long {
    display: none;
  }

  .t-meta .imdb-tag,
  .t-meta .tmdb-tag {
    margin-right: 4px;
  }
}

/* library chips: a thin line between All / Watched / Watchlist and the filters inside them */
.chip-sep {
  flex: none;
  align-self: center;
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.16);
}

:root[data-theme="light"] .chip-sep {
  background: rgba(0, 0, 0, 0.14);
}

/* Box Office, "Your box office": a card's top 10 pop-up (a click on the card; its poster opens
   the film). Each ranking in its card's colour (--tint from .by-top / .by-flop / ...). */
.by-top-modal {
  max-width: 560px;
}

.byt-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding-right: 44px;
}

.byt-head .xr-label i {
  color: rgb(var(--tint));
}

.byt-head h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
}

.byt-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.byt-list li {
  animation: wl-settle 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--d, 0ms);
}

.byt-row {
  display: grid;
  grid-template-columns: 26px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.byt-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* the film on the card */
.byt-row.on {
  border-color: rgba(var(--tint), 0.45);
  background: rgba(var(--tint), 0.1);
}

.byt-rank {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.byt-list li:nth-child(1) .byt-rank {
  color: #f5c518;
}

.byt-list li:nth-child(2) .byt-rank {
  color: #c9d1d9;
}

.byt-list li:nth-child(3) .byt-rank {
  color: #d08b4f;
}

.byt-row img {
  width: 44px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.byt-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.byt-text strong {
  overflow: hidden;
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.byt-text strong small {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.byt-text > small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.byt-bar {
  height: 4px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.byt-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--tint));
}

.byt-value {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.byt-value.loss {
  color: #ff6b63;
}

@media (max-width: 520px) {
  .byt-row {
    grid-template-columns: 20px 38px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .byt-row img {
    width: 38px;
  }

  .byt-value {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .byt-list li {
    animation: none;
  }
}

/* Settings: Problems on this device (the site's own recent errors) */
.sv-errors {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin: 12px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.sv-errors li {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--glass-bg);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.sv-errors li small {
  color: var(--text-muted);
  font-size: 12px;
}

.sv-errors .sv-errors-none {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.sv-errors .sv-errors-none i {
  color: #4caf7a;
}

.sv-errors-buttons[hidden] {
  display: none;
}

/* Settings: a switch at the end of a row (Smooth scrolling), the site's red pill switch */
.sv-switch {
  position: relative;
  flex: none;
  cursor: pointer;
}

.sv-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sv-switch input:checked + .switch-track {
  background: var(--accent);
}

.sv-switch input:checked + .switch-track .switch-thumb {
  transform: translateX(20px);
}

.sv-switch input:focus-visible + .switch-track {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* (only computers have a mouse wheel) */

/* ============================== Title page: where a title stands ============================== */
/* the pill under the genres: Released 12 Mar 2024 / Coming 14 Nov 2026 · in 40 days /
   S3 E5 Thu 12 Oct · in 3 days / Ended · 2008–2013 / Release date not announced */
.t-release {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  line-height: 1.3;
}

.t-release i {
  flex: none;
  color: rgba(255, 255, 255, 0.6);
}

.t-release b {
  color: #fff;
  font-weight: 700;
}

.t-release.soon {
  border-color: rgba(229, 9, 20, 0.55);
  background: rgba(185, 34, 34, 0.18);
}

.t-release.soon i {
  color: #ff6b63;
}

.t-release.unknown {
  border-style: dashed;
}

/* X-Ray: not out yet. A countdown card instead of "Released" */
.xr-card.xr-soon {
  border-color: rgba(229, 9, 20, 0.35);
  background: radial-gradient(120% 120% at 0% 0%, rgba(185, 34, 34, 0.22), transparent 65%), var(--glass-bg);
}

.xr-soon .xr-label i {
  color: #ff6b63;
}

.xr-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.xr-count b {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.xr-count span {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

.xr-soon-date {
  color: var(--text-muted);
  font-size: 14px;
}

.xr-soon-date b {
  color: var(--text);
}

.xr-soon-date i {
  margin-right: 2px;
}

.xr-tba .xr-big {
  font-size: 22px;
}

@media (max-width: 700px) {
  .t-release {
    margin-top: 10px;
    font-size: 12.5px;
  }
}

/* ---------- X-Ray: studio / network logos straight on the dark card (title.js: logoTone) ---------- */
/* transparent logos lose the light chip: colourful ones in their own colours, one-colour dark
   ones drawn white (dark again in the light theme). A logo with a background of its own
   ("solid") or one not looked at yet keeps the light rounded card. */
.xr-logo.tone-color,
.xr-logo.tone-mono-dark,
.xr-logo.tone-mono-light {
  padding: 4px 6px;
  border: 0;
  background: none;
  box-shadow: none;
}

.xr-logo.tone-mono-dark img {
  filter: grayscale(1) invert(1);
  opacity: 0.92;
}

.xr-logo.tone-color img {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

:root[data-theme="light"] .xr-logo.tone-mono-dark img {
  filter: none;
  opacity: 1;
}

:root[data-theme="light"] .xr-logo.tone-mono-light img {
  filter: brightness(0);
  opacity: 0.85;
}

:root[data-theme="light"] .xr-logo.tone-color img {
  filter: none;
}

/* its own background: the picture itself, rounded, no extra frame around it */
.xr-logo.tone-solid {
  padding: 0;
  overflow: hidden;
  background: none;
}

.xr-logo.tone-solid img {
  max-height: 100%;
}

.xr-brands .xr-logo.tone-solid img {
  max-height: 58px;
  border-radius: 12px;
}

/* ============================== Title page: Episodes (TVmaze) ============================== */
.ep-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ep-top-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
}

.ep-top-card:first-child {
  border-color: rgba(229, 9, 20, 0.35);
  background: radial-gradient(120% 140% at 0% 0%, rgba(185, 34, 34, 0.16), transparent 60%), var(--glass-bg);
}

.ep-top-card .xr-label i {
  color: var(--accent-hover);
}

.ep-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* the seasons: one sideways row of pills (swipe on phones) */
.ep-seasons {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ep-seasons::-webkit-scrollbar {
  display: none;
}

.ep-seasons .top10-tab {
  flex: none;
  white-space: nowrap;
}

.ep-season-info {
  margin: 4px 2px 12px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.ep-list {
  display: grid;
  /* two episodes a row when there's room (each needs about 560px), one on narrower screens */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
  gap: 10px;
}

.ep-card {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.ep-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.ep-top-card .ep-card {
  padding: 0;
  border: 0;
  background: none;
  grid-template-columns: 150px minmax(0, 1fr);
}

.ep-still {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.ep-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-noimg {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 20px;
}

.ep-code {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.ep-seen {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
}

.ep-text {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.ep-text strong {
  font-size: 15.5px;
  line-height: 1.3;
}

.ep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.ep-meta i {
  margin-right: 3px;
  opacity: 0.8;
}

.ep-meta .fa-star {
  color: var(--gold);
  opacity: 1;
}

.ep-soon {
  color: #ff8a84;
  font-weight: 600;
}

.ep-sum {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.ep-sum.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ep-link {
  justify-self: start;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}

.ep-link:hover {
  color: var(--text);
}

.ep-card.future .ep-still img {
  filter: saturate(0.6) brightness(0.8);
}

.ep-card.seen .ep-text strong {
  color: var(--text-muted);
}

.ep-more {
  margin-top: 12px;
}

.ep-credit {
  margin: 12px 2px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.ep-credit a {
  color: inherit;
}

@media (max-width: 700px) {
  .ep-card,
  .ep-top-card .ep-card {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
  }

  .ep-top {
    grid-template-columns: 1fr;
  }

  .ep-text strong {
    font-size: 14.5px;
  }
}

/* X-Ray: when it airs */
.xr-air-rows {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}

.xr-air-rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.xr-air-rows dt {
  color: var(--text-muted);
  white-space: nowrap;
}

.xr-air-rows dt i {
  width: 16px;
  margin-right: 4px;
  text-align: center;
}

.xr-air-rows dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* the week: the days it airs lit, today ringed */

/* the next episode, counted down: tap it for the episode */

/* First aired: the last / next episode, and the seasons, to tap */

.xr-air-rows dd small {
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================== Anime explorer (anime-explore.html) ============================== */
.ax-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.ax-top .page-title {
  margin: 0;
}

.ax-switch .top10-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.ax-search {
  position: relative;
  max-width: 560px;
  margin: 0 0 22px;
}

.ax-search > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.ax-search .input {
  width: 100%;
  padding-left: 42px;
  border-radius: 999px;
}

.ax-search:has(.gs-adv) .input {
  padding-right: 136px;
}

.ax-search .gs-adv {
  position: absolute;
  top: 50%;
  right: 5px;
  height: calc(100% - 10px);
  transform: translateY(-50%);
}

.ax-row {
  margin-bottom: 26px;
}

/* an anime's page: its seasons in order, the one you're on ringed; "Season 2" on each */
.ax-seasons .badges {
  display: none;
}

.ax-season-tag {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ax-seasons .ax-card.ax-here .poster-link {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.ax-row .row-head h2 i,
.ax-browse .row-head h2 i {
  margin-right: 6px;
  color: var(--accent-hover);
  font-size: 0.85em;
}

.see-all {
  white-space: nowrap;
}

.ax-skel {
  flex: none;
  width: var(--card-w, 170px);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--glass-bg) 30%, rgba(255, 255, 255, 0.08) 50%, var(--glass-bg) 70%) 0 0 / 300% 100%;
  animation: as-shimmer 1.3s linear infinite;
}

.movie-grid .ax-skel {
  width: auto;
}

/* the score on the poster (top right) */
.ax-score {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.ax-score i {
  color: var(--gold);
  font-size: 10px;
}

.ax-browse {
  margin: 8px 0 26px;
}

.ax-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.ax-chips .as-chip {
  text-decoration: none;
}

.ax-theme {
  opacity: 0.8;
}

/* the most-loved characters: round faces with their rank */
.ax-chars {
  gap: 14px;
}

.ax-char {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 116px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.ax-char-img {
  position: relative;
}

.ax-char-img img {
  display: block;
  width: 104px;
  height: 104px;
  border: 2px solid var(--glass-border);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  transition: border-color 0.2s, transform 0.2s;
}

.ax-char:hover .ax-char-img img {
  border-color: var(--accent);
  transform: scale(1.04);
}

.ax-char-img b {
  position: absolute;
  bottom: -2px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
}

.ax-char strong {
  font-size: 13.5px;
  line-height: 1.25;
}

.ax-char small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.ax-char small span {
  display: block;
}

.ax-char small i {
  color: var(--accent-hover);
}

.ax-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 18px;
  border: 1px dashed var(--glass-border);
  border-radius: 18px;
  color: var(--text-muted);
}

.ax-error > i {
  color: var(--accent-hover);
  font-size: 18px;
}

.ax-grid-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.ax-grid-head h2 {
  margin: 0;
  font-size: 24px;
}

.ax-grid-head .t-link {
  justify-self: start;
  text-decoration: none;
}

.ax-credit a {
  color: inherit;
}

/* one anime: the header */
.ax-detail-wait {
  padding: 60px 0;
  color: var(--text-muted);
  text-align: center;
}

.ax-hero {
  position: relative;
  margin: 0 0 10px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  color: #fff;
  background: #0b0b0c;
}

.ax-hero-bg {
  position: absolute;
  inset: -40px;
  background-position: center;
  background-size: cover;
  filter: blur(34px) saturate(1.2) brightness(0.45);
  transform: scale(1.1);
}

.ax-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0b0b0c, transparent 55%);
}

.ax-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ax-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
  background: #222;
}

.ax-head h1 {
  margin: 6px 0;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.1;
}

.ax-back {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-decoration: none;
}

.ax-alt {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.65);
}

.ax-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ax-pills span {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

.ax-pills .ax-status.airing {
  border-color: rgba(52, 199, 89, 0.5);
  background: rgba(52, 199, 89, 0.16);
}

.ax-pills .ax-status.soon {
  border-color: rgba(229, 9, 20, 0.5);
  background: rgba(185, 34, 34, 0.2);
}

.ax-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 4px;
}

.ax-stat {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: 0 8px;
  min-width: 98px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.ax-stat i {
  color: rgba(255, 255, 255, 0.6);
}

.ax-stat b {
  font-size: 20px;
  font-weight: 800;
}

.ax-stat small {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.ax-stat.gold {
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(245, 197, 24, 0.12);
}

.ax-stat.gold i {
  color: var(--gold);
}

.ax-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ax-cta .btn {
  border-radius: 999px;
}

.ax-mn:empty {
  display: none;
}

.ax-synopsis {
  max-width: 900px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
  white-space: pre-line;
}

.ax-synopsis.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.ax-facts {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ax-facts a {
  color: inherit;
}

.ax-tags .ax-chips {
  margin: 4px 0 0;
}

/* a title page's anime part: four cards as on the Box Office page (js/pages/title.js: animePanel) */
.ax-cards {
  margin: 14px 0 22px;
}

.ax-card {
  min-height: 132px;
}

.ax-card b a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.ax-card b a:hover,
.ax-card small a:hover {
  color: var(--accent-hover);
}

.ax-card small a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.ax-card small b {
  margin: 0;
  color: var(--text);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
}

/* (the score: in gold, out of 10) */
.ax-card.ax-gold {
  border-color: rgba(245, 197, 24, 0.35);
}

.ax-card.ax-gold .xr-label i,
.ax-card.ax-gold > b {
  color: var(--gold);
}

.ax-of {
  margin-left: 3px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

/* (a name, not a number: a little smaller, on one line) */
.ax-card.ax-word > b {
  overflow: hidden;
  font-size: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .ax-card.ax-word > b {
    font-size: 20px;
    line-height: 1.2;
    white-space: normal;
  }
}

.ax-card .xr-show-bg {
  opacity: 0.22;
}

.ax-card:hover .xr-show-bg {
  opacity: 0.32;
  transform: scale(1.1);
}

.ax-syn {
  margin: 12px 2px 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* characters and their voices, side by side */
.ax-va-switch {
  margin-bottom: 12px;
}

.ax-cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
}

.ax-pair {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
}

.ax-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ax-who img {
  flex: none;
  width: 48px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

.ax-who span {
  display: grid;
  min-width: 0;
}

.ax-who strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-who small {
  color: var(--text-muted);
  font-size: 12px;
}

.ax-va {
  text-align: right;
}

@media (max-width: 700px) {
  .ax-hero-in {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
  }

  .ax-hero {
    padding: 18px 16px 20px;
    border-radius: 22px;
  }

  .ax-stats {
    gap: 6px;
  }

  .ax-stat {
    min-width: 0;
    padding: 8px 10px;
  }

  .ax-stat b {
    font-size: 16px;
  }

  .ax-cta .btn {
    flex: 1 1 auto;
  }

  .ax-cast {
    grid-template-columns: 1fr;
  }

  .ax-char {
    width: 96px;
  }

  .ax-char-img img {
    width: 86px;
    height: 86px;
  }
}

@media (max-width: 480px) {
  .ax-hero-in {
    grid-template-columns: 1fr;
  }

  .ax-poster {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-skel {
    animation: none;
  }
}

.ax-chars-all {
  margin-top: 12px;
}

/* X-Ray: an anime's MyAnimeList card */
.xr-anime-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 12px;
}

.xr-anime-stats span {
  display: grid;
}

.xr-anime-stats b {
  font-size: 18px;
}

.xr-anime-stats small {
  color: var(--text-muted);
  font-size: 12px;
}

.xr-anime-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 13.5px;
}

/* ============================== Movie News (news.html) ============================== */
/* the masthead: Live, today's date and when it was updated over the title, the line under it; the
   search and Refresh on the right, on the same line as the title */
.nw-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  margin: 2px 0 16px;
  padding: 0 0 20px;
}

/* (the line under it: the accent fading out) */
.nw-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(229, 9, 20, 0.35) 30%, var(--glass-border) 60%, transparent);
}

.nw-hero-text,
.nw-hero-tools {
  position: relative;
  z-index: 1;
}

.nw-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.nw-date {
  color: var(--text);
  font-weight: 600;
}

.nw-hero .page-title {
  margin: 8px 0 4px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.nw-hero .page-sub {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.nw-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 59, 48, 0.35);
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.12);
  color: #ff6b6f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nw-live > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
  animation: nw-live 1.8s ease-out infinite;
}

.nw-updated {
  color: var(--text-muted);
}

.nw-hero .nw-search .input {
  height: 46px;
  background: rgba(255, 255, 255, 0.05);
}

.nw-hero .nw-refresh {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
}

/* a source's mark: its letters on its colour */
.nw-mono {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  background: var(--src);
  color: #111;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.nw-hero-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(440px, 100%);
}

.nw-search {
  flex: 1;
  margin: 0;
}

/* (no button inside it here: the words get the room) */
.nw-search .input {
  padding-right: 16px;
}

.nw-refresh {
  flex: none;
}

/* the ticker: the newest headlines running by (stops while pointed at) */
.nw-ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
}

.nw-ticker-label {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  margin: 4px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nw-ticker-track {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.nw-ticker-run {
  display: flex;
  width: max-content;
  animation: nw-ticker var(--ticker-time, 60s) linear infinite;
}

.nw-ticker:hover .nw-ticker-run {
  animation-play-state: paused;
}

.nw-ticker-run a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  color: var(--text);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.nw-ticker-run a::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 22px;
  border-radius: 50%;
  background: var(--accent);
}

.nw-ticker-run a b {
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nw-ticker-run a:hover {
  color: #fff;
  text-decoration: underline;
}

.nw-chips {
  margin-bottom: 0;
}

.nw-chips .chip i {
  margin-right: 4px;
}

/* the top story (its picture filling the card, the words over it) and the Latest column */
.nw-lead {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}

.nw-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: #0d0d0f;
  isolation: isolate;
}

.nw-feature-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.nw-feature-img img,
.nw-feature-img .nw-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}

.nw-feature:hover .nw-feature-img img {
  transform: scale(1.05);
}

.nw-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(8, 8, 10, 0.96) 0%, rgba(8, 8, 10, 0.75) 38%, rgba(8, 8, 10, 0.1) 75%), linear-gradient(90deg, rgba(8, 8, 10, 0.55), transparent 60%);
  pointer-events: none;
}

.nw-feature-text {
  display: grid;
  gap: 12px;
  max-width: 780px;
  padding: 30px 32px;
  color: #fff;
}

.nw-feature-text h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.nw-feature-text h2 a,
.nw-card h3 a {
  color: inherit;
  text-decoration: none;
}

.nw-feature-text h2 a:hover,
.nw-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nw-feature-text p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.nw-feature .nw-meta,
.nw-feature .nw-meta b,
.nw-feature .nw-when {
  color: rgba(255, 255, 255, 0.85);
}

.nw-feature .nw-tag {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.nw-read {
  border-radius: 999px;
}

.nw-feature .nw-share.big {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nw-side {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass-bg);
}

.nw-side h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nw-side h3 i {
  color: var(--accent-hover);
}

.nw-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s;
}

.nw-row + .nw-row {
  border-top: 1px solid var(--glass-border);
  border-radius: 0 0 14px 14px;
}

.nw-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.nw-row-img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #0d0d0f;
}

.nw-row-img img,
.nw-row-img .nw-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nw-row-img .nw-ph b {
  font-size: 15px;
}

.nw-row-img .nw-ph i {
  display: none;
}

.nw-row-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nw-row-text small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.nw-row-text small .nw-mono {
  min-width: 18px;
  height: 18px;
  font-size: 8.5px;
  border-radius: 5px;
}

.nw-row-text strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* the line over a story: its source (mark and name), how long ago, its kind */
.nw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.nw-src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nw-src b {
  color: var(--text);
}

.nw-when::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.6;
}

.nw-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 11.5px;
}

.nw-tag i {
  font-size: 10px;
}

.nw-latest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* the days */
.nw-day {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 14px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.nw-day::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, var(--glass-border), transparent);
}

.nw-day small {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

/* the cards: the picture fills the card, a shade from the foot, the kind and the time up top, the
   source and the headline over the picture; on hover the picture moves in and the excerpt shows */
.nw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.nw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: #0d0d0f;
  color: #fff;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.3s, box-shadow 0.3s;
}

.nw-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--src) 55%, transparent);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--src) 70%, transparent);
}

/* (the whole card opens the story; what's on it sits above this) */
.nw-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.nw-card-link:focus-visible {
  outline: 2px solid var(--src);
  outline-offset: -2px;
}

.nw-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
  background: #0d0d0f;
}

.nw-img img,
.nw-img .nw-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}

.nw-card:hover .nw-img img {
  transform: scale(1.07);
}

.nw-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(8, 8, 10, 0.97) 0%, rgba(8, 8, 10, 0.86) 34%, rgba(8, 8, 10, 0.25) 64%, rgba(8, 8, 10, 0.55) 100%);
  transition: background 0.3s;
}

.nw-card.no-img .nw-shade {
  background: linear-gradient(0deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.6) 45%, transparent 70%);
}

.nw-card-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nw-when-pill {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nw-card .nw-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 16px 14px;
}

.nw-card .nw-meta,
.nw-card .nw-src b {
  color: rgba(255, 255, 255, 0.9);
}

.nw-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.nw-card:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* (the excerpt: folded away, it opens on hover) */
.nw-card p {
  display: -webkit-box;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
}

.nw-card:hover p,
.nw-card:focus-within p {
  max-height: 64px;
  opacity: 1;
}

.nw-card-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}

.nw-card-foot .nw-share {
  margin-left: auto;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 12, 0.5);
  color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nw-card .nw-meta {
  position: relative;
  z-index: 3;
  justify-content: space-between;
}

/* the other outlets, small */
.nw-also-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 700;
}

.nw-card.is-breaking {
  border-color: rgba(255, 59, 48, 0.55);
}

/* a story without a picture: its source's card (the mark big, the kind of story) */
.nw-ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 20% 15%, color-mix(in srgb, var(--src) 55%, transparent), transparent 70%),
    radial-gradient(70% 80% at 90% 100%, color-mix(in srgb, var(--src) 25%, transparent), transparent 70%),
    #121214;
}

.nw-ph b {
  color: rgba(255, 255, 255, 0.92);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.nw-card .nw-ph {
  place-items: start center;
  padding-top: 64px;
}

.nw-card .nw-ph b {
  font-size: 64px;
}

.nw-ph i {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 26px;
}

.nw-card .nw-ph i {
  top: 60px;
  right: 18px;
  bottom: auto;
}

.nw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.6);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nw-badge i {
  font-size: 10px;
}

/* Breaking: wide cards side by side, the picture on the left */
.nw-breaking-list {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: 14px;
}

.nw-bcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
  overflow: hidden;
  min-height: 180px;
  border: 1px solid rgba(255, 59, 48, 0.45);
  border-radius: 20px;
  background: rgba(10, 10, 12, 0.6);
  transition: transform 0.25s, box-shadow 0.25s;
}

.nw-bcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(229, 9, 20, 0.8);
}

.nw-bcard-img {
  position: relative;
  overflow: hidden;
}

.nw-bcard-img img,
.nw-bcard-img .nw-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nw-bcard-text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  pointer-events: none;
}

.nw-bcard-text a,
.nw-bcard-text button {
  pointer-events: auto;
}

.nw-bcard h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.nw-bcard p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nw-failed {
  color: #ff8a84;
}

@media (max-width: 1000px) {
  .nw-breaking-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .nw-card {
    min-height: 300px;
  }

  /* (no picture: the source's colours only; its mark is beside its name already) */
  .nw-card .nw-ph {
    padding-top: 52px;
  }

  .nw-card .nw-ph b {
    display: none;
  }

  .nw-card .nw-ph i {
    top: 56px;
  }

  /* (no hover on a phone: the excerpt shows) */
  .nw-card p {
    max-height: 64px;
    opacity: 1;
    -webkit-line-clamp: 2;
  }

  .nw-bcard {
    grid-template-columns: minmax(0, 1fr);
  }

  .nw-bcard-img {
    aspect-ratio: 16 / 9;
  }

  .nw-kicker .nw-date {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-card,
  .nw-card p,
  .nw-img img {
    transition: none;
  }
}

/* waiting: the shapes of what's coming */
.nw-wait {
  display: grid;
  gap: 18px;
}

.nw-lead.nw-wait {
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  margin-bottom: 30px;
}

.nw-skel {
  min-height: 280px;
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%) 0 0 / 300% 100%;
  animation: nw-shine 1.4s linear infinite;
}

.nw-skel-big {
  min-height: 460px;
  border-radius: 26px;
}

.nw-skel-col {
  display: grid;
  gap: 10px;
}

.nw-skel-row {
  min-height: 80px;
  border-radius: 14px;
}

/* the chips and Preferences on one line */
.nw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.nw-bar .nw-chips {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* (phones wrap a chip row in .chips-wrap, for its › button) */
.nw-bar > .chips-wrap {
  flex: 1;
  min-width: 0;
}

.nw-prefs-btn {
  flex: none;
  border-radius: 999px;
}

.nw-chip-breaking i {
  color: #ff5a52;
}

.nw-chip-breaking.active i {
  color: inherit;
}

/* Breaking: red, up top */
.nw-breaking {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid rgba(255, 59, 48, 0.4);
  border-radius: 26px;
  background: radial-gradient(60% 120% at 0% 0%, rgba(229, 9, 20, 0.22), transparent 60%), rgba(229, 9, 20, 0.04);
}

.nw-breaking .nw-sec-title {
  margin-top: 0;
}

.nw-breaking .nw-sec-title > span {
  color: #ff6b6f;
}

.nw-breaking .nw-sec-title > span i {
  animation: nw-flash 1.6s ease-in-out infinite;
}

.nw-card.is-breaking {
  border-color: rgba(255, 59, 48, 0.45);
}

.nw-badge-breaking {
  border-color: rgba(255, 90, 82, 0.6);
  background: #e50914;
  animation: nw-badge 2s ease-out infinite;
}

.nw-badge-pick {
  border-color: rgba(245, 197, 24, 0.6);
  background: rgba(245, 197, 24, 0.9);
  color: #1a1400;
}

.nw-feature.is-breaking {
  border-color: rgba(255, 59, 48, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.25), 0 20px 50px -24px rgba(229, 9, 20, 0.7);
}

.nw-ticker-run a.hot b {
  color: #ff6b6f;
}

/* the front page's kinds: a heading with "See all", a few cards */
.nw-section {
  margin-top: 30px;
}

.nw-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.nw-sec-title > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nw-sec-title > span i {
  color: var(--accent-hover);
  font-size: 0.85em;
}

.nw-sec-title .t-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* one kind: its name and count, Top / Newest */
.nw-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.nw-sec-head h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.015em;
}

.nw-sec-head h2 small {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* "also reported by" */
.nw-also {
  font-size: 12.5px;
}

.nw-also summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.nw-also summary::-webkit-details-marker {
  display: none;
}

.nw-also summary:hover {
  color: var(--text);
}

.nw-also-marks {
  display: inline-flex;
}

.nw-also-marks .nw-mono {
  min-width: 20px;
  height: 20px;
  margin-right: -5px;
  border: 2px solid var(--surface);
  font-size: 8.5px;
}

.nw-also-marks .nw-mono:last-child {
  margin-right: 0;
}

.nw-also ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.nw-also li a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
}

.nw-also li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.nw-also li b {
  color: var(--text);
}

.nw-feature .nw-also summary,
.nw-feature .nw-also li a {
  color: rgba(255, 255, 255, 0.8);
}

.nw-feature .nw-also li b {
  color: #fff;
}

.nw-feature .nw-also ul {
  max-width: 560px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* a story about a title in your library: a small pill with its poster, "In your library" over its name */
.nw-about {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: start;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05));
  color: #fff;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, background 0.2s;
}

.nw-about:hover {
  border-color: rgba(245, 197, 24, 0.7);
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.26), rgba(245, 197, 24, 0.08));
}

.nw-about img {
  flex: none;
  width: 22px;
  height: 33px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.nw-about > i:first-child {
  display: grid;
  place-items: center;
  width: 22px;
  height: 33px;
  color: var(--gold);
}

.nw-about span {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.nw-about small {
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nw-about b {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-about-go {
  flex: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

/* News preferences: a panel (a sheet on a phone) */
.nw-prefs {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  pointer-events: none;
}

.nw-prefs.open {
  visibility: visible;
  pointer-events: auto;
}

.nw-prefs-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s;
}

.nw-prefs.open .nw-prefs-back {
  opacity: 1;
}

.nw-prefs-panel {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.nw-prefs.open .nw-prefs-panel {
  opacity: 1;
  transform: none;
}

.nw-prefs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nw-prefs-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
}

.nw-prefs-head h3 i {
  color: var(--accent-hover);
}

.nw-prefs-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.nw-modes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nw-modes .cc-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.nw-mysrc h4 {
  margin: 14px 0 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nw-mysrc.off .nw-src-row {
  opacity: 0.7;
}

.nw-prefs-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.nw-src-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
}

.nw-src-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.nw-src-row .nw-mono {
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 11px;
}

.nw-src-row span:nth-child(2) {
  display: grid;
}

.nw-src-row small {
  color: var(--text-muted);
  font-size: 12px;
}

@keyframes nw-flash {
  50% {
    opacity: 0.45;
  }
}

@keyframes nw-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.6);
  }
  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(229, 9, 20, 0);
  }
}

@media (max-width: 700px) {
  .nw-prefs-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  .nw-prefs-btn span {
    display: none;
  }

  .nw-prefs {
    align-items: end;
    padding: 0;
  }

  .nw-prefs-panel {
    max-height: 86vh;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .nw-modes {
    grid-template-columns: minmax(0, 1fr);
  }

  .nw-modes .cc-opt {
    flex-direction: row;
    align-items: center;
  }

  .nw-breaking {
    padding: 12px;
    border-radius: 22px;
  }

  .nw-sec-head h2 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-badge-breaking,
  .nw-breaking .nw-sec-title > span i {
    animation: none;
  }
}

@keyframes nw-live {
  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }
}

@keyframes nw-ticker {
  to {
    transform: translateX(-50%);
  }
}

@keyframes nw-shine {
  to {
    background-position: -100% 0;
  }
}

@media (max-width: 1000px) {
  .nw-lead,
  .nw-lead.nw-wait {
    grid-template-columns: minmax(0, 1fr);
  }

  .nw-side {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .nw-side h3 {
    grid-column: 1 / -1;
  }

  .nw-row + .nw-row {
    border-top: 0;
    border-radius: 14px;
  }
}

@media (max-width: 700px) {
  /* (a phone: no card around the header; the title, its Live light, and on the right the search as an
     icon (it opens across the line when tapped: .searching) and Refresh) */
  .nw-hero {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    margin: 12px 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .nw-hero-text {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-right: 104px;
    transition: opacity 0.25s;
  }

  .nw-hero .page-title {
    order: -1;
    margin: 0;
    font-size: 28px;
  }

  .nw-hero .page-sub,
  .nw-updated {
    display: none;
  }

  .nw-live {
    padding: 4px 10px;
    font-size: 10.5px;
  }

  .nw-hero-tools {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .nw-hero-tools > * {
    pointer-events: auto;
  }

  .nw-search {
    flex: none;
    width: 42px;
    max-width: none;
    transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .nw-search .input {
    height: 42px;
    padding-left: 40px;
    font-size: 15px;
    cursor: pointer;
  }

  .nw-search > i {
    left: 14px;
    color: var(--text);
  }

  .nw-hero:not(.searching) .nw-search .input {
    padding: 0;
  }

  .nw-hero:not(.searching) .nw-search .input::placeholder {
    color: transparent;
  }

  .nw-hero.searching .nw-search {
    width: calc(100% - 50px);
  }

  .nw-hero.searching .nw-search .input {
    cursor: text;
  }

  .nw-hero.searching .nw-search > i {
    color: var(--text-muted);
  }

  .nw-hero.searching .nw-hero-text {
    opacity: 0;
    pointer-events: none;
  }

  .nw-refresh {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
  }

  .nw-refresh span {
    display: none;
  }

  /* (the ticker: its label just the bolt) */
  .nw-ticker {
    margin-bottom: 12px;
  }

  .nw-ticker-label {
    margin: 3px;
    padding: 6px 9px;
    font-size: 0;
    letter-spacing: 0;
  }

  .nw-ticker-label i {
    font-size: 12px;
  }

  .nw-ticker-run a {
    padding: 0 16px;
    font-size: 13px;
  }

  .nw-ticker-run a::after {
    margin-left: 16px;
  }

  .nw-feature {
    min-height: 380px;
    border-radius: 22px;
  }

  .nw-feature-text {
    padding: 20px 18px;
  }

  .nw-feature-text p {
    -webkit-line-clamp: 2;
  }

  .nw-grid,
  .nw-wait {
    grid-template-columns: minmax(0, 1fr);
  }

  .nw-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nw-chips::-webkit-scrollbar {
    display: none;
  }

  .nw-chips .chip {
    flex: none;
  }

  .nw-skel-col {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-ticker-run,
  .nw-live > i,
  .nw-skel {
    animation: none;
  }

  .nw-ticker-track {
    overflow-x: auto;
  }

  .nw-card,
  .nw-img img,
  .nw-feature-img img {
    transition: none;
  }
}

:root[data-theme="light"] .nw-ph b {
  color: #fff;
}

/* ============================== Title page: Books (Open Library) ============================== */
.t-books .t-section-title i {
  margin-right: 6px;
  color: var(--accent-hover);
  font-size: 0.85em;
}

.bk-row {
  gap: 14px;
}

.bk-card {
  flex: none;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 132px;
  color: inherit;
  text-decoration: none;
}

.bk-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin-bottom: 4px;
  border-radius: 6px 12px 12px 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--text-muted);
  font-size: 26px;
}

.bk-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.bk-card:hover .bk-cover img {
  transform: scale(1.04);
}

.bk-card strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bk-card small {
  color: var(--text-muted);
  font-size: 12px;
}

.bk-facts .fa-star{
  color: var(--gold);
}

/* "Based on": the book, big */
.bk-main {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
}

.bk-main-cover {
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px 14px 14px 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.4);
  color: var(--text-muted);
  font-size: 36px;
}

.bk-main-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-main-text {
  display: grid;
  align-content: start;
  gap: 8px;
}

.bk-main-text h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.bk-by {
  margin: 0;
  color: var(--text-muted);
}

.bk-by b {
  color: var(--text);
}

.bk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bk-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 12.5px;
}

.bk-facts small {
  color: var(--text-muted);
}

.bk-desc {
  margin: 4px 0 0;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-line;
}

.bk-desc.clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.bk-more {
  justify-self: start;
}

/* phones: the cover beside the label, the title and the author; the facts (one quiet line), the
   story and the Open Library button across the whole card under them */
@media (max-width: 640px) {
  .bk-main {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 16px;
  }

  .bk-main-text {
    display: contents;
  }

  .bk-main-cover {
    grid-row: 1 / span 3;
  }

  .bk-main-text > .xr-label,
  .bk-main-text > h3,
  .bk-by {
    grid-column: 2;
  }

  .bk-main-text > .xr-label {
    align-self: end;
    font-size: 11px;
  }

  .bk-main-text h3 {
    font-size: 20px;
  }

  .bk-by {
    align-self: start;
    font-size: 14px;
  }

  .bk-facts,
  .bk-desc,
  .bk-more {
    grid-column: 1 / -1;
  }

  .bk-facts {
    gap: 4px 14px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
  }

  .bk-facts span {
    padding: 0;
    border: 0;
    font-size: 13px;
  }

  .bk-desc {
    margin-top: 6px;
    font-size: 14.5px;
  }

  .bk-card {
    width: 112px;
  }
}

/* Movie News in the profile menu only where the navbar doesn't show it: tablets under 1100px
   (phones have it in the Library tab, computers in the navbar or its side menu) */
.profile-menu .menu-group a.news-menu-link {
  display: none;
}

@media (max-width: 1100px) {
  html.tablet .nav-links li:has(> a[href="news.html"]) {
    display: none;
  }

  html.tablet .profile-menu .menu-group a.news-menu-link {
    display: flex;
  }
}

/* a link hidden by the Admin Control Center (js/core/site.js) */
[data-nav][hidden],
li[hidden] {
  display: none !important;
}

/* ============================== List atmospheres (js/components/list-themes.js) ==============================
   Every atmosphere is data in list-themes.js: its colours come in as --lt-a / --lt-b (two lights),
   --lt-base (the dark under them), --lt-edge, --lt-dot / --lt-dot2 (particles, lights). Below: the
   box, then each particle kind (data-k) and each layer (.lt-l-*) once. Only .lt-play moves (on
   screen, two at most, one on a phone); only transform and opacity are animated. The box stays dark
   in the light theme too (a cinema), with its own light text. */
.lt.wl-row,
.lt.wl-panel,
.lt.lt-preview {
  --text: #f4f4f6;
  --text-muted: rgba(255, 255, 255, 0.68);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.13);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: -14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--lt-edge);
  border-radius: 24px;
  background:
    radial-gradient(95% 130% at 0% 0%, var(--lt-a), transparent 62%),
    radial-gradient(85% 120% at 100% 100%, var(--lt-b), transparent 62%),
    radial-gradient(70% 85% at 28% 112%, var(--lt-c, transparent), transparent 64%),
    linear-gradient(180deg, var(--lt-base), rgba(0, 0, 0, 0.42)),
    #0c0c0f;
  box-shadow: 0 26px 60px -30px var(--lt-a), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -34px 46px -30px var(--lt-c, transparent);
  color: var(--text);
}

.lt > :not(.lt-fx) {
  position: relative;
  z-index: 1;
}

/* (the head above the posters: the row reaches up over it, which took its buttons' clicks) */
.lt > .row-head,
.lt > .wl-list-tools,
.lt > .wl-switch-row {
  z-index: 2;
}

.wl-panel.lt {
  --lt-h: 1100px;
}

/* the posters stay first: a lift of light around the one pointed at */
.lt .movie-item .movie-poster {
  transition: box-shadow 0.35s ease;
}

.lt .movie-item:hover .movie-poster {
  box-shadow: 0 0 0 1px var(--lt-edge), 0 16px 36px -10px var(--lt-a);
}

.lt-emblem {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.95em;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* a themed list: its emblem stands in for the list icon */
.lt .row-head h2 > i.fa-list-ul {
  display: none;
}

.lt-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* the photo: a still from one of its titles, faded: most of its colour taken out, darkened, thin,
   and fading away towards the edges, so the atmosphere's coloured lights (the box's background)
   show through it and tint it; fades in once loaded, a very slow push-in while the list plays */
.lt-photo {
  position: absolute;
  inset: -3%;
  background: center 30% / cover no-repeat;
  opacity: 0;
  filter: saturate(0.3) brightness(0.62) contrast(1.05);
  -webkit-mask-image: radial-gradient(70% 90% at 64% 42%, #000 20%, rgba(0, 0, 0, 0.4) 58%, transparent 90%);
  mask-image: radial-gradient(70% 90% at 64% 42%, #000 20%, rgba(0, 0, 0, 0.4) 58%, transparent 90%);
  transition: opacity 1.4s ease;
}

.lt-photo.in {
  opacity: 0.34;
}

.lt-play .lt-photo.in {
  animation: lt-push 40s ease-in-out infinite alternate;
}

@keyframes lt-push {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

/* ---------------- particles ---------------- */
.lt-parts i {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
  border-radius: 50%;
  background: var(--lt-dot);
  opacity: 0;
  will-change: transform, opacity;
}

.lt-play .lt-parts i {
  animation: lt-fall var(--t) linear var(--d) infinite;
}

/* snow: soft round flakes, falling steadily (transform) while each sways side to side on its own
   (translate: a second movement that doesn't fight the first); the far ones small and faint behind
   the posters, the near ones (.near, in front of them) bigger and quicker */
.lt-parts[data-k="snow"] i {
  --lt-o: calc(0.3 + var(--s) * 0.35);
  width: calc(5px * var(--s));
  height: calc(5px * var(--s));
  background: radial-gradient(circle, #fff 0 32%, rgba(255, 255, 255, 0.55) 52%, transparent 72%);
}

.lt-play .lt-parts[data-k="snow"] i {
  animation:
    lt-fall var(--t) linear var(--d) infinite,
    lt-sway var(--st) ease-in-out var(--d) infinite alternate;
}

.lt-parts.near[data-k="snow"] i {
  --lt-o: 0.9;
  width: calc(9px * var(--s));
  height: calc(9px * var(--s));
  background: radial-gradient(circle, #fff 0 28%, rgba(255, 255, 255, 0.5) 50%, transparent 72%);
}

/* (the nearest few a little out of focus) */
.lt-parts.near[data-k="snow"] i:nth-child(4n) {
  width: calc(14px * var(--s));
  height: calc(14px * var(--s));
  filter: blur(1.5px);
}

.lt-play .lt-parts.near[data-k="snow"] i {
  animation-duration: calc(var(--t) * 0.7), var(--st);
}

@keyframes lt-sway {
  0% {
    translate: calc(var(--sw) * -1) 0;
  }
  100% {
    translate: var(--sw) 0;
  }
}

/* snow settled on top of each poster (data-caps="snow"): broad soft mounds, wrapping down round the
   card's rounded corners, a couple of soft clumps bulging over the front edge; white on top, cool
   blue-grey underneath. Three shapes (and every fourth the other way round): no two neighbours match */
.lt[data-caps="snow"] .movie-item::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -1px;
  right: -1px;
  z-index: 4;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.45' stop-color='%23f3f6fc'/%3E%3Cstop offset='0.8' stop-color='%23d6e1f1'/%3E%3Cstop offset='1' stop-color='%23b9c9e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 27 C0 20 2 15 6 12 C10 8 18 6 28 6 C40 6 46 3 58 3 C70 3 76 6 88 5 C100 4 108 1 122 1 C136 1 142 4 154 4 C166 4 174 6 184 8 C192 10 197 15 199 20 C200 23 200 26 200 27 C199 22 196 16 189 13.5 C186 13 183 13 180 13 C172 13 170 13.4 168 15 C165 18 158 18 156 15 C154 13.4 150 13 140 13 C120 13 100 13.5 84 13 C78 13 76 13.4 75 14.6 C73 16.8 68 16.8 66.5 14.6 C65.6 13.4 62 13 56 13 C40 13 28 13 20 13 C14 13 8 14 5 17 C2 20 1 24 0 27 Z' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.lt[data-caps="snow"] .movie-item:nth-child(3n + 2)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.45' stop-color='%23f3f6fc'/%3E%3Cstop offset='0.8' stop-color='%23d6e1f1'/%3E%3Cstop offset='1' stop-color='%23b9c9e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 27 C0 20 2 15 6 12 C11 7 20 3 34 2 C48 1 56 4 68 5 C82 6 92 4 106 4 C120 4 128 3 140 2 C154 1 164 2 174 5 C186 8 196 13 199 20 C200 23 200 26 200 27 C199 22 196 16 189 13.5 C184 13 170 13 150 13 C140 13 136 13.4 135 15 C133 18.5 126 18.5 124.5 15 C123.6 13.4 118 13 104 13 C80 13 60 13 44 13 C38 13 36 13.4 35 14.5 C33.6 16.2 29.4 16.2 28.5 14.5 C27.8 13.4 26 13 20 13 C14 13 8 14 5 17 C2 20 1 24 0 27 Z' fill='url(%23g)'/%3E%3C/svg%3E");
}

.lt[data-caps="snow"] .movie-item:nth-child(3n)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='0.45' stop-color='%23f3f6fc'/%3E%3Cstop offset='0.8' stop-color='%23d6e1f1'/%3E%3Cstop offset='1' stop-color='%23b9c9e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 27 C0 20 2 15 6 12 C12 9 20 8 30 7 C44 6 56 2 72 1 C88 0 96 4 108 5 C120 6 130 3 144 3 C158 3 166 5 176 7 C186 9 196 14 199 20 C200 23 200 26 200 27 C199 22 196 16 189 13.5 C184 13 176 13 168 13 C162 13 160 13.4 159 14.8 C157.4 17.4 152.6 17.4 151 14.8 C150 13.4 146 13 136 13 C110 13 90 13 70 13 C62 13 60 13.5 59 15.2 C57 19 50 19 48.4 15.2 C47.6 13.5 44 13 36 13 C28 13 20 13 20 13 C14 13 8 14 5 17 C2 20 1 24 0 27 Z' fill='url(%23g)'/%3E%3C/svg%3E");
}

.lt[data-caps="snow"] .movie-item:nth-child(4n)::after {
  transform: scaleX(-1);
}

/* ash: small grey flakes, slow, drifting */
.lt-parts[data-k="ash"] i {
  --lt-o: 0.55;
  width: calc(4px * var(--s));
  height: calc(3px * var(--s));
  border-radius: 40%;
}

.lt-play .lt-parts[data-k="ash"] i {
  animation-duration: calc(var(--t) * 1.4);
}

/* petals / leaves: turning as they fall */
.lt-parts[data-k="petals"] i,
.lt-parts[data-k="leaves"] i {
  width: calc(10px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 70% 0 70% 0;
}

.lt-parts[data-k="leaves"] i:nth-child(odd),
.lt-parts[data-k="petals"] i:nth-child(3n) {
  background: var(--lt-dot2);
}

.lt-play .lt-parts[data-k="petals"] i,
.lt-play .lt-parts[data-k="leaves"] i {
  animation-name: lt-petal;
}

/* rain: thin streaks, fast */
.lt-parts[data-k="rain"] i {
  --lt-o: 0.5;
  width: 1.5px;
  height: calc(24px * var(--s));
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--lt-dot));
}

.lt-play .lt-parts[data-k="rain"] i {
  animation: lt-rain calc(var(--t) * 0.075) linear var(--d) infinite;
}

/* embers / motes: rising from the bottom, glowing */
.lt-parts[data-k="embers"] i,
.lt-parts[data-k="motes"] i,
.lt-parts[data-k="hearts"] i,
.lt-parts[data-k="shapes"] i {
  top: auto;
  bottom: 0;
}

.lt-parts[data-k="embers"] i {
  --lt-o: 0.9;
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  box-shadow: 0 0 10px 2px var(--lt-dot);
}

/* (every third one in the third colour: Halloween's blood-red embers) */
.lt-parts[data-k="embers"] i:nth-child(3n) {
  background: var(--lt-dot3);
  box-shadow: 0 0 10px 2px var(--lt-dot3);
}

.lt-parts[data-k="motes"] i {
  --lt-o: 0.6;
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  box-shadow: 0 0 8px var(--lt-dot);
}

.lt-play .lt-parts[data-k="embers"] i,
.lt-play .lt-parts[data-k="motes"] i {
  animation-name: lt-rise;
}

/* the near embers, rising in front of the posters: bigger, quicker */
.lt-parts.near[data-k="embers"] i {
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
}

.lt-play .lt-parts.near[data-k="embers"] i {
  animation-duration: calc(var(--t) * 0.75);
}

/* hearts: a few, small, rising slowly */
.lt-parts[data-k="hearts"] i {
  --lt-o: 0.7;
  width: auto;
  height: auto;
  background: none;
  color: var(--lt-dot);
  font-size: calc(12px * var(--s));
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 10px var(--lt-dot);
}

.lt-parts[data-k="hearts"] i::before {
  content: "\2665";
}

.lt-parts[data-k="hearts"] i:nth-child(even) {
  color: var(--lt-dot2);
}

.lt-play .lt-parts[data-k="hearts"] i {
  animation: lt-rise calc(var(--t) * 1.3) ease-in-out var(--d) infinite;
}

/* shapes (Funny): little rounds and squares floating up, turning */
.lt-parts[data-k="shapes"] i {
  --lt-o: 0.55;
  width: calc(8px * var(--s));
  height: calc(8px * var(--s));
}

.lt-parts[data-k="shapes"] i:nth-child(odd) {
  border-radius: 3px;
  background: var(--lt-dot2);
}

.lt-play .lt-parts[data-k="shapes"] i {
  animation: lt-float calc(var(--t) * 1.2) ease-in-out var(--d) infinite;
}

/* stars / sparks: still, twinkling where they are (seen even when nothing moves) */
.lt-parts[data-k="stars"] i,
.lt-parts[data-k="sparks"] i {
  top: var(--y);
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
  opacity: 0.35;
  box-shadow: 0 0 5px var(--lt-dot);
}

.lt-parts[data-k="sparks"] i {
  opacity: 0.25;
  box-shadow: 0 0 8px 1px var(--lt-dot);
}

.lt-parts[data-k="sparks"] i:nth-child(3n) {
  background: var(--lt-dot2);
  box-shadow: 0 0 8px 1px var(--lt-dot2);
}

.lt-play .lt-parts[data-k="stars"] i {
  animation: lt-twinkle var(--t) ease-in-out var(--d) infinite;
}

.lt-play .lt-parts[data-k="sparks"] i {
  animation: lt-twinkle calc(var(--t) * 0.35) ease-in-out var(--d) infinite;
}

/* dust: motes drifting across, low */
.lt-parts[data-k="dust"] i {
  --lt-o: 0.45;
  top: calc(20% + var(--y) * 0.75);
  left: -3%;
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
}

.lt-play .lt-parts[data-k="dust"] i {
  animation: lt-dust calc(var(--t) * 2.2) linear var(--d) infinite;
}

/* ---------------- layers ---------------- */
.lt-l {
  position: absolute;
  pointer-events: none;
}

/* fog / smoke along the bottom, drifting */
.lt-l-fog {
  left: -25%;
  right: -25%;
  bottom: -40px;
  height: 150px;
  background: radial-gradient(50% 60% at 30% 60%, rgba(214, 204, 232, 0.24), transparent 70%), radial-gradient(40% 50% at 75% 50%, rgba(214, 204, 232, 0.18), transparent 70%);
  filter: blur(8px);
}

.lt-l-fog.two {
  bottom: -14px;
  opacity: 0.75;
}

.lt-l-fog.smoke {
  height: 200px;
  background: radial-gradient(50% 60% at 30% 60%, rgba(70, 56, 48, 0.55), transparent 70%), radial-gradient(40% 50% at 75% 50%, rgba(140, 96, 70, 0.3), transparent 70%);
}

.lt-play .lt-l-fog {
  animation: lt-drift 18s ease-in-out infinite alternate;
}

.lt-play .lt-l-fog.two {
  animation-duration: 25s;
  animation-direction: alternate-reverse;
}

/* mist: wisps of fog drifting right across the box, in front of the posters (.lt-over), thin
   enough to read them through, thinner still while one is pointed at. Off screen when still */
.lt > .lt-over {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.lt:has(.movie-item:hover) > .lt-over {
  opacity: 0.4;
}

.lt-l-mist {
  top: 30%;
  left: 0;
  width: 65%;
  height: 55%;
  border-radius: 50%;
  background:
    radial-gradient(42% 38% at 35% 55%, rgba(228, 222, 242, 0.5), rgba(228, 222, 242, 0.2) 50%, transparent 75%),
    radial-gradient(38% 30% at 68% 42%, rgba(214, 206, 236, 0.42), rgba(214, 206, 236, 0.14) 55%, transparent 78%);
  filter: blur(12px);
  opacity: 0;
  transform: translate3d(-110%, 0, 0);
}

.lt-l-mist.two {
  top: 32%;
  width: 50%;
  height: 45%;
}

/* (the mist drifts over the posters: never over the switch and the buttons at the top, and not
   at all in a list with nothing in it yet) */
.lt:not(:has(.movie-item)) > .lt-over {
  display: none;
}

.lt-l-mist.three {
  top: 55%;
  width: 80%;
  height: 50%;
}

.lt-play .lt-l-mist {
  animation: lt-mist 30s linear infinite;
}

.lt-play .lt-l-mist.two {
  animation-duration: 38s;
  animation-delay: -14s;
}

.lt-play .lt-l-mist.three {
  animation-duration: 46s;
  animation-delay: -30s;
}

@keyframes lt-mist {
  0% {
    opacity: 0;
    transform: translate3d(-110%, 0, 0) scale(1);
  }
  12% {
    opacity: 1;
  }
  50% {
    transform: translate3d(60%, -8%, 0) scale(1.15);
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(180%, 4%, 0) scale(1);
  }
}

/* a light that now and then fails for a moment */
.lt-l-flicker {
  inset: 0;
  background: radial-gradient(55% 75% at 12% 0%, var(--lt-a), transparent 70%);
  opacity: 0.8;
}

.lt-play .lt-l-flicker {
  animation: lt-flicker 7s linear infinite;
}

/* a tiny ghost, far off, barely there */
.lt-l-ghost {
  top: 16%;
  right: 7%;
  color: rgba(255, 255, 255, 0.11);
  font-size: 20px;
}

.lt-play .lt-l-ghost {
  animation: lt-hover 9s ease-in-out infinite;
}

/* a string of warm lights along the top, twinkling in turns */
.lt-l-lights {
  top: 2px;
  left: 0;
  right: 0;
  height: 16px;
  background: radial-gradient(circle at 50% 60%, var(--lt-dot2) 0 2.5px, transparent 3.5px) 0 0 / 38px 16px repeat-x;
  filter: drop-shadow(0 0 4px var(--lt-dot2));
  opacity: 0.9;
}

.lt-l-lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, #ff5a4f 0 2.5px, transparent 3.5px) 19px 0 / 38px 16px repeat-x;
  opacity: 0.7;
}

.lt-play .lt-l-lights {
  animation: lt-blink 3.2s ease-in-out infinite alternate;
}

.lt-play .lt-l-lights::after {
  animation: lt-blink 3.2s ease-in-out -1.6s infinite alternate;
}

/* a garland of lights (Christmas): a wire drooping along the top, red / gold / green / blue
   bulbs; their glow (::before red and green, ::after gold and blue) twinkles in turns */
.lt-l-garland {
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34'%3E%3Cpath d='M0 3 Q80 30 160 3' fill='none' stroke='%231d2b20' stroke-width='1.6'/%3E%3Cg fill='%23595f5a'%3E%3Crect x='18.6' y='8.4' width='2.8' height='3'/%3E%3Crect x='58.6' y='14.8' width='2.8' height='3'/%3E%3Crect x='98.6' y='14.8' width='2.8' height='3'/%3E%3Crect x='138.6' y='8.4' width='2.8' height='3'/%3E%3C/g%3E%3Cellipse cx='20' cy='14.6' rx='2.9' ry='3.9' fill='%23ff4a4a'/%3E%3Cellipse cx='60' cy='21' rx='2.9' ry='3.9' fill='%23ffd166'/%3E%3Cellipse cx='100' cy='21' rx='2.9' ry='3.9' fill='%2348e08f'/%3E%3Cellipse cx='140' cy='14.6' rx='2.9' ry='3.9' fill='%2366b8ff'/%3E%3C/svg%3E")
    0 0 / 160px 34px repeat-x;
}

.lt-l-garland::before,
.lt-l-garland::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
}

.lt-l-garland::before {
  background:
    radial-gradient(circle at 20px 15px, rgba(255, 74, 74, 0.75), rgba(255, 74, 74, 0.2) 6px, transparent 13px) 0 0 / 160px 34px repeat-x,
    radial-gradient(circle at 100px 21px, rgba(72, 224, 143, 0.7), rgba(72, 224, 143, 0.18) 6px, transparent 13px) 0 0 / 160px 34px repeat-x;
}

.lt-l-garland::after {
  background:
    radial-gradient(circle at 60px 21px, rgba(255, 209, 102, 0.8), rgba(255, 209, 102, 0.2) 6px, transparent 13px) 0 0 / 160px 34px repeat-x,
    radial-gradient(circle at 140px 15px, rgba(102, 184, 255, 0.7), rgba(102, 184, 255, 0.18) 6px, transparent 13px) 0 0 / 160px 34px repeat-x;
}

.lt-play .lt-l-garland::before {
  animation: lt-blink 2.6s ease-in-out infinite alternate;
}

.lt-play .lt-l-garland::after {
  animation: lt-blink 2.6s ease-in-out -1.3s infinite alternate;
}

/* a snowbank settled along the bottom, catching a little light */
.lt-l-snowbank {
  left: -2%;
  right: -2%;
  bottom: -2px;
  height: 54px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 54' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C40 18 80 30 120 24 S200 10 250 22 S340 30 400 16 L400 54 L0 54Z' fill='%23eef4ff' fill-opacity='0.16'/%3E%3Cpath d='M0 44 C60 30 110 42 170 36 S280 26 330 36 S380 40 400 32 L400 54 L0 54Z' fill='%23eef4ff' fill-opacity='0.22'/%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
}

/* pines in the far corner, dark with snow on their tips */
.lt-l-pines {
  right: 10px;
  bottom: 0;
  width: 170px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120'%3E%3Cg fill='%23051a10'%3E%3Cpath d='M40 18 L58 50 L50 50 L66 80 L56 80 L74 112 L6 112 L24 80 L14 80 L30 50 L22 50Z'/%3E%3Cpath d='M112 2 L134 42 L124 42 L144 78 L132 78 L154 118 L70 118 L92 78 L80 78 L100 42 L90 42Z'/%3E%3Cpath d='M150 52 L162 74 L157 74 L168 96 L162 96 L170 112 L132 112 L140 96 L134 96 L145 74 L140 74Z'/%3E%3C/g%3E%3Cg fill='%23f2f6ff' fill-opacity='0.8'%3E%3Cpath d='M40 18 L47 31 L40 28 L33 31Z'/%3E%3Cpath d='M112 2 L120 17 L112 14 L104 17Z'/%3E%3Cpath d='M150 52 L155 61 L150 59 L145 61Z'/%3E%3C/g%3E%3C/svg%3E")
    right bottom / contain no-repeat;
  opacity: 0.75;
}

/* a warm glow from below (a fire, a lamp) */
.lt-l-glow {
  left: 10%;
  right: 10%;
  bottom: -45%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lt-dot2), transparent);
  opacity: 0.2;
}

.lt-play .lt-l-glow {
  animation: lt-glow 8s ease-in-out infinite;
}

/* a low sun in the corner */
.lt-l-sun {
  top: -140px;
  right: -90px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lt-dot), transparent 65%);
  opacity: 0.32;
}

.lt-play .lt-l-sun {
  animation: lt-glow 7s ease-in-out infinite;
}

/* frost round the edges */
.lt-l-frost {
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 44px rgba(200, 230, 255, 0.28);
  background: linear-gradient(180deg, rgba(220, 240, 255, 0.1), transparent 30%);
}

/* wet street: a sheen along the bottom, a slow glint crossing it */
.lt-l-reflect {
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(190, 210, 255, 0.1), transparent);
}

.lt-l-reflect::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-120%);
}

.lt-play .lt-l-reflect::after {
  animation: lt-glint 11s ease-in-out infinite;
}

/* a soft haze from below */
.lt-l-haze {
  inset: 0;
  background: radial-gradient(75% 65% at 50% 115%, var(--lt-b), transparent 70%);
}

.lt-play .lt-l-haze {
  animation: lt-glow 10s ease-in-out infinite;
}

/* dark corners */
.lt-l-vignette {
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 90px 12px rgba(0, 0, 0, 0.6);
}

/* film grain */
.lt-l-grain {
  inset: 0;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* a nebula, drifting very slowly */
.lt-l-nebula {
  inset: -20%;
  background: radial-gradient(32% 30% at 72% 28%, var(--lt-a), transparent 70%), radial-gradient(28% 26% at 24% 72%, var(--lt-b), transparent 70%);
  filter: blur(12px);
  opacity: 0.9;
}

.lt-play .lt-l-nebula {
  animation: lt-drift 40s ease-in-out infinite alternate;
}

/* bokeh: big soft out-of-focus lights */
.lt-l-bokeh {
  inset: 0;
  background:
    radial-gradient(circle at 12% 28%, var(--lt-dot) 0 14px, transparent 30px),
    radial-gradient(circle at 34% 78%, var(--lt-dot2) 0 20px, transparent 40px),
    radial-gradient(circle at 58% 22%, var(--lt-dot) 0 10px, transparent 24px),
    radial-gradient(circle at 80% 64%, var(--lt-dot2) 0 24px, transparent 46px),
    radial-gradient(circle at 92% 18%, var(--lt-dot) 0 12px, transparent 26px);
  filter: blur(4px);
  opacity: 0.22;
}

.lt-play .lt-l-bokeh {
  animation: lt-bokeh 14s ease-in-out infinite alternate;
}

/* light bursts (New Year's Eve): small rings of sparks, now and then */
.lt-l-burst {
  top: 14%;
  left: 68%;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--lt-dot) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 50%, transparent 54%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 50%, transparent 54%);
  opacity: 0;
}

.lt-l-burst.two {
  top: 34%;
  left: 22%;
  width: 70px;
  height: 70px;
  background: repeating-conic-gradient(var(--lt-dot2) 0 5deg, transparent 5deg 30deg);
}

.lt-l-burst.three {
  top: 8%;
  left: 44%;
  width: 56px;
  height: 56px;
}

.lt-play .lt-l-burst {
  animation: lt-burst 6.5s ease-out infinite;
}

.lt-play .lt-l-burst.two {
  animation-delay: -2.2s;
}

.lt-play .lt-l-burst.three {
  animation-delay: -4.4s;
}

/* light streaks (Action): a slanted beam sweeping across now and then */
.lt-l-streak {
  top: -30%;
  left: 0;
  width: 18%;
  height: 160%;
  background: linear-gradient(90deg, transparent, var(--lt-a), rgba(255, 255, 255, 0.08), var(--lt-a), transparent);
  transform: translateX(-160%) rotate(16deg);
  mix-blend-mode: screen;
}

.lt-l-streak.two {
  width: 10%;
}

.lt-play .lt-l-streak {
  animation: lt-streak 9s ease-in-out infinite;
}

.lt-play .lt-l-streak.two {
  animation-delay: -4.5s;
}

/* the road (Road trip): lane marks passing along the bottom */
.lt-l-road {
  left: 0;
  bottom: 6px;
  width: calc(100% + 70px);
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--lt-dot) 0 28px, transparent 28px 70px);
  opacity: 0.3;
}

.lt-play .lt-l-road {
  animation: lt-road 1.6s linear infinite;
}

/* ---------------- scenes (js/components/list-themes.js: SCENE) ----------------
   Silhouettes along the bottom or in the far corner: near-black, edged by the list's own light */
.lt-sil {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 160px;
  overflow: visible;
  /* (the sky lit low behind it, so the shapes stand out: dusk behind a skyline) */
  background: linear-gradient(0deg, transparent 4%, var(--lt-a) 38%, transparent 85%);
}

.lt-sil .s {
  fill: rgba(3, 3, 8, 0.86);
}

.lt-sil .far {
  fill: rgba(8, 6, 14, 0.58);
}

/* city / ruins: lit windows (fire in the ruins) */
.lt-l-city .w {
  fill: var(--lt-dot);
  opacity: 0.75;
}

.lt-l-ruins .s {
  fill: rgba(8, 2, 0, 0.9);
}

.lt-l-ruins .w {
  fill: var(--lt-dot2);
  filter: drop-shadow(0 0 3px var(--lt-dot2));
}

.lt-play .lt-l-city .w,
.lt-play .lt-l-ruins .w {
  animation: lt-blink 4s ease-in-out infinite alternate;
}

/* mountains: snow on the peaks */
.lt-l-mountains .cap {
  fill: rgba(236, 244, 255, 0.85);
}

/* meadow: grass, small flowers */
.lt-l-meadow {
  height: 60px;
}

.lt-l-meadow .s {
  fill: rgba(10, 30, 14, 0.85);
}

.lt-l-meadow .f1 {
  fill: var(--lt-dot);
}

.lt-l-meadow .f2 {
  fill: var(--lt-dot2);
}

.lt-l-meadow .f3 {
  fill: #fff;
  opacity: 0.85;
}

/* the sea: dark water, glints catching the low sun */
.lt-l-sea .s {
  fill: rgba(6, 10, 26, 0.75);
}

.lt-l-sea .g {
  fill: var(--lt-dot);
  opacity: 0.6;
}

.lt-play .lt-l-sea .g {
  animation: lt-blink 2.4s ease-in-out infinite alternate;
}

/* the far corner: bare trees (Horror), a castle with lit windows (Fantasy) */
.lt-l-trees,
.lt-l-castle {
  left: auto;
  right: 14px;
  width: 240px;
  height: 180px;
  background: radial-gradient(60% 55% at 65% 60%, var(--lt-a), transparent 72%);
}

.lt-l-trees .trunk,
.lt-l-trees .br {
  fill: none;
  stroke: rgba(4, 0, 0, 0.9);
  stroke-linecap: round;
}

.lt-l-trees .moon {
  fill: #b3121c;
  opacity: 0.55;
}

.lt-l-trees .halo {
  fill: #ff2a36;
  opacity: 0.14;
}

.lt-l-trees .trunk {
  stroke-width: 7;
}

.lt-l-trees .br {
  stroke-width: 2.6;
}

.lt-l-castle {
  width: 230px;
  height: 168px;
}

.lt-l-castle .s {
  fill: rgba(6, 4, 18, 0.88);
}

.lt-l-castle .w {
  fill: var(--lt-dot3, var(--lt-dot));
  filter: drop-shadow(0 0 4px var(--lt-dot3, var(--lt-dot)));
}

.lt-play .lt-l-castle .w {
  animation: lt-blink 3s ease-in-out infinite alternate;
}

/* ---------------- more effects ---------------- */

/* an aurora (Winter): two bands of green and blue light rippling across the top */
.lt-l-aurora {
  top: -6%;
  left: -10%;
  right: -10%;
  height: 70%;
  background: radial-gradient(34% 22% at 58% 42%, rgba(80, 255, 180, 0.6), transparent 72%), radial-gradient(30% 20% at 82% 30%, rgba(90, 200, 255, 0.55), transparent 72%), radial-gradient(24% 18% at 70% 56%, rgba(170, 120, 255, 0.36), transparent 72%);
  filter: blur(10px);
}

.lt-play .lt-l-aurora {
  animation: lt-aurora 16s ease-in-out infinite alternate;
}

/* a warm window (Cozy): glowing panes, its light spilling out */
.lt-l-window {
  top: 54px;
  right: 34px;
  width: 150px;
  height: 120px;
  border-radius: 10px 10px 4px 4px;
  background: radial-gradient(circle at 50% 62%, rgba(255, 196, 120, 0.6), rgba(255, 140, 60, 0.28) 60%, rgba(60, 30, 10, 0.5));
  box-shadow: 0 0 70px rgba(255, 160, 80, 0.32), inset 0 0 0 6px rgba(26, 13, 5, 0.92);
}

.lt-l-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(26, 13, 5, 0.92), rgba(26, 13, 5, 0.92)) center / 6px 100% no-repeat, linear-gradient(rgba(26, 13, 5, 0.92), rgba(26, 13, 5, 0.92)) center / 100% 6px no-repeat;
}

.lt-l-window::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(26, 13, 5, 0.92);
}

.lt-play .lt-l-window {
  animation: lt-candle 5s ease-in-out infinite;
}

/* a planet in the corner (Sci-Fi): lit from one side, a thin ring */
.lt-l-planet {
  right: -90px;
  bottom: -170px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--lt-dot2), rgba(40, 30, 110, 0.9) 42%, #06051a 72%);
  box-shadow: 0 0 60px var(--lt-a), inset -30px -30px 60px rgba(0, 0, 0, 0.6);
  opacity: 0.8;
}

.lt-l-planet::after {
  content: "";
  position: absolute;
  inset: 38% -22%;
  border: 2px solid rgba(200, 220, 255, 0.35);
  border-radius: 50%;
  transform: rotate(-14deg);
}

/* shooting stars (Sci-Fi), now and then */
.lt-l-shoot {
  top: 14%;
  left: 62%;
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  opacity: 0;
  transform: rotate(-24deg);
}

.lt-l-shoot.two {
  top: 30%;
  left: 30%;
  width: 110px;
}

.lt-play .lt-l-shoot {
  animation: lt-shoot 9s ease-in infinite;
}

.lt-play .lt-l-shoot.two {
  animation-duration: 13s;
  animation-delay: -6s;
}

/* a crescent moon (Late night), glowing */
.lt-l-moon {
  top: 64px;
  right: 120px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: inset -14px 8px 0 0 #eef0ff, 0 0 40px rgba(220, 226, 255, 0.28);
  transform: rotate(-20deg);
}

/* stage spotlights (Funny): two beams from above, sweeping */
.lt-l-spot {
  top: -6%;
  left: 18%;
  width: 280px;
  height: 120%;
  background: linear-gradient(180deg, rgba(255, 244, 210, 0.3), rgba(255, 244, 210, 0.06) 70%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transform: rotate(-12deg);
  mix-blend-mode: screen;
}

.lt-l-spot.two {
  left: 62%;
  background: linear-gradient(180deg, rgba(160, 210, 255, 0.28), rgba(160, 210, 255, 0.05) 70%, transparent);
  transform: rotate(12deg);
}

.lt-play .lt-l-spot {
  animation: lt-swing 7s ease-in-out infinite alternate;
}

.lt-play .lt-l-spot.two {
  animation-duration: 9s;
  animation-direction: alternate-reverse;
}

/* a projector beam (Nostalgic) from the top right corner, across the open side, flickering; scratches jumping across */
.lt-l-projector {
  top: -10%;
  right: -6%;
  width: 75%;
  height: 125%;
  background: linear-gradient(118deg, rgba(255, 236, 196, 0.42), rgba(255, 236, 196, 0.1) 55%, transparent 78%);
  clip-path: polygon(0 0, 16% 0, 100% 100%, 40% 100%);
  filter: blur(2px);
  transform: scaleX(-1);
}

.lt-play .lt-l-projector {
  animation: lt-proj 3s steps(6) infinite;
}

.lt-l-scratches {
  inset: 0;
  background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 22.12%, transparent 22.12%, transparent 64%, rgba(255, 255, 255, 0.1) 64%, rgba(255, 255, 255, 0.1) 64.08%, transparent 64.08%);
  opacity: 0;
}

.lt-play .lt-l-scratches {
  animation: lt-scratch 1.1s steps(1) infinite;
}

/* puddle ripples (Rainy day) */
.lt-l-ripple {
  bottom: 10px;
  left: var(--x);
  width: 90px;
  height: 14px;
  border: 1.5px solid rgba(200, 222, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.2);
}

.lt-play .lt-l-ripple {
  animation: lt-ripple 2.8s ease-out var(--d) infinite;
}

/* a lens flare (Action) */
.lt-l-flare {
  top: 6%;
  right: 10%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.6), rgba(255, 170, 80, 0.22) 24%, transparent 60%);
}

.lt-l-flare::before,
.lt-l-flare::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.lt-l-flare::before {
  left: -120px;
  top: 150px;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle, rgba(255, 140, 60, 0.3), transparent 70%);
}

.lt-l-flare::after {
  left: -260px;
  top: 260px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.22), transparent 70%);
}

.lt-play .lt-l-flare {
  animation: lt-glow 6s ease-in-out infinite;
}

/* light through venetian blinds (Noir), slanted across the box */
.lt-l-blinds {
  top: -12%;
  right: -6%;
  width: 62%;
  height: 130%;
  background: repeating-linear-gradient(180deg, rgba(220, 230, 255, 0.11) 0 12px, transparent 12px 30px);
  transform: rotate(-16deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.lt-play .lt-l-blinds {
  animation: lt-blink 7s ease-in-out infinite alternate;
}

/* ---------------- on the posters: blossom, blood, raindrops ---------------- */

/* a sprig of blossom on one top corner (Spring, Easter) */
.lt[data-caps="blossom"] .movie-item::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -10px;
  z-index: 4;
  width: 66px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 40'%3E%3Cpath d='M4 30 C20 26 36 22 60 8' stroke='%235a3a2a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 23 C32 16 40 14 44 16 C40 20 36 23 30 23Z M48 13 C52 8 58 8 60 10 C56 13 52 14 48 13Z' fill='%236fbf6a'/%3E%3Cg fill='%23ffc3dc'%3E%3Ccircle cx='14' cy='22' r='4'/%3E%3Ccircle cx='20' cy='24' r='4'/%3E%3Ccircle cx='18' cy='30' r='4'/%3E%3Ccircle cx='11' cy='30' r='4'/%3E%3Ccircle cx='9' cy='25' r='4'/%3E%3C/g%3E%3Ccircle cx='14.4' cy='26.4' r='2.2' fill='%23ffe08a'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='38' cy='9' r='3.2'/%3E%3Ccircle cx='43' cy='11' r='3.2'/%3E%3Ccircle cx='41' cy='16' r='3.2'/%3E%3Ccircle cx='35' cy='16' r='3.2'/%3E%3Ccircle cx='33.5' cy='11.5' r='3.2'/%3E%3C/g%3E%3Ccircle cx='38.2' cy='12.8' r='1.8' fill='%23ffd166'/%3E%3Ccircle cx='54' cy='4.5' r='2.6' fill='%23ffc3dc'/%3E%3C/svg%3E")
    0 0 / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.lt[data-caps="blossom"] .movie-item:nth-child(even)::after {
  left: auto;
  right: -10px;
  transform: scaleX(-1);
}

/* blood (Horror): along the top of each poster, following its rounded corners (clipped by them):
   one flowing edge, thicker and thinner, its drips running out of it without a seam, each a rounded
   tongue catching a streak of light; down both sides. Three patterns (the two drips where the drops
   form are in the same place on each) */
.lt[data-caps="blood"] .movie-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 80px;
  border-radius: 15px 15px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='46'%3E%3Cstop offset='0' stop-color='%23c3151f'/%3E%3Cstop offset='0.35' stop-color='%239e0b16'/%3E%3Cstop offset='0.75' stop-color='%23850812'/%3E%3Cstop offset='1' stop-color='%2372060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H200 L200 32.3 L199.4 32.6 L198.8 32.7 L198.2 32.7 L197.6 32.5 L197 32 L196.4 31.2 L195.8 30 L195.2 28.1 L194.6 25.1 L194 15.2 L193.4 15 L192.8 14.7 L192.2 14.6 L191.6 14.4 L191 13.8 L190.4 13.7 L189.8 13.6 L189.2 13.6 L188.6 14.1 L188 14.3 L187.4 14.5 L186.8 18.4 L186.2 19.9 L185.6 20.6 L185 21 L184.4 21.1 L183.8 21.1 L183.2 21 L182.6 20.5 L182 19.7 L181.4 18.1 L180.8 14.3 L180.2 14.1 L179.6 13.9 L179 13.3 L178.4 13.3 L177.8 13.3 L177.2 13.3 L176.6 13.3 L176 13.3 L175.4 13.3 L174.8 13.3 L174.2 13.3 L173.6 13.2 L173 13.2 L172.4 13.2 L171.8 13.2 L171.2 13.2 L170.6 13.1 L170 13.1 L169.4 13.1 L168.8 13.6 L168.2 13.7 L167.6 13.8 L167 13.9 L166.4 19.3 L165.8 26.3 L165.2 29.4 L164.6 31.2 L164 32.2 L163.4 32.8 L162.8 33 L162.2 33 L161.6 32.8 L161 32.3 L160.4 31.2 L159.8 29.4 L159.2 26.4 L158.6 19.4 L158 14.1 L157.4 14 L156.8 13.9 L156.2 13.9 L155.6 13.5 L155 13.6 L154.4 13.7 L153.8 13.9 L153.2 14 L152.6 14.2 L152 14.4 L151.4 14.6 L150.8 14.8 L150.2 15 L149.6 15.2 L149 15.4 L148.4 15.6 L147.8 15.8 L147.2 16 L146.6 16.2 L146 16.3 L145.4 16.4 L144.8 16.5 L144.2 16.5 L143.6 16.5 L143 16.5 L142.4 16.4 L141.8 16.3 L141.2 16.1 L140.6 15.9 L140 15.6 L139.4 15.4 L138.8 15.1 L138.2 14.8 L137.6 14.5 L137 14.2 L136.4 13.9 L135.8 13.6 L135.2 13.3 L134.6 13.1 L134 12.8 L133.4 12.6 L132.8 13 L132.2 13 L131.6 13.1 L131 13.3 L130.4 21.3 L129.8 23.6 L129.2 24.9 L128.6 25.5 L128 25.8 L127.4 25.9 L126.8 25.8 L126.2 25.2 L125.6 23.8 L125 20.9 L124.4 14.6 L123.8 14.6 L123.2 14.7 L122.6 14.3 L122 14.5 L121.4 14.7 L120.8 14.8 L120.2 14.9 L119.6 15 L119 15 L118.4 15 L117.8 14.9 L117.2 14.8 L116.6 14.6 L116 14.5 L115.4 14.3 L114.8 14 L114.2 13.8 L113.6 13.6 L113 13.4 L112.4 13.2 L111.8 13 L111.2 13.4 L110.6 13.3 L110 13.4 L109.4 13.5 L108.8 17.7 L108.2 19.1 L107.6 19.9 L107 20.4 L106.4 20.6 L105.8 20.7 L105.2 20.7 L104.6 20.6 L104 20.3 L103.4 19.7 L102.8 18.5 L102.2 15.9 L101.6 13.7 L101 13.6 L100.4 13.6 L99.8 13 L99.2 13.1 L98.6 13.2 L98 13.3 L97.4 13.3 L96.8 13.4 L96.2 13.5 L95.6 13.5 L95 13.6 L94.4 13.6 L93.8 13.7 L93.2 13.7 L92.6 13.7 L92 13.7 L91.4 13.7 L90.8 13.7 L90.2 13.7 L89.6 13.7 L89 13.7 L88.4 13.7 L87.8 13.6 L87.2 13.6 L86.6 13.6 L86 13.5 L85.4 13.5 L84.8 13.5 L84.2 13.4 L83.6 13.4 L83 13.4 L82.4 13.3 L81.8 13.3 L81.2 13.3 L80.6 13.3 L80 13.3 L79.4 13.2 L78.8 13.2 L78.2 13.2 L77.6 13.2 L77 13.3 L76.4 13.3 L75.8 13.3 L75.2 13.3 L74.6 13.3 L74 13.3 L73.4 13.4 L72.8 13.4 L72.2 13.4 L71.6 13.4 L71 13.5 L70.4 13.5 L69.8 13.5 L69.2 13.5 L68.6 13.5 L68 13.6 L67.4 13.6 L66.8 13.6 L66.2 13.6 L65.6 13.6 L65 13.6 L64.4 13.6 L63.8 13.6 L63.2 13.6 L62.6 13.6 L62 13.6 L61.4 13.6 L60.8 13.6 L60.2 13.5 L59.6 13.5 L59 13.5 L58.4 13.5 L57.8 13.5 L57.2 13.5 L56.6 13.6 L56 13.6 L55.4 13.6 L54.8 13.6 L54.2 13.6 L53.6 13.7 L53 13.7 L52.4 13.8 L51.8 13.8 L51.2 13.9 L50.6 13.9 L50 14 L49.4 14 L48.8 14.1 L48.2 14.2 L47.6 14.2 L47 14.3 L46.4 14.3 L45.8 15 L45.2 15.2 L44.6 15.3 L44 15.5 L43.4 25.2 L42.8 32.6 L42.2 36.4 L41.6 38.8 L41 40.4 L40.4 41.3 L39.8 41.8 L39.2 42 L38.6 42 L38 41.8 L37.4 41.2 L36.8 40.2 L36.2 38.4 L35.6 35.8 L35 31.4 L34.4 16.4 L33.8 16.3 L33.2 16.3 L32.6 16.3 L32 16.4 L31.4 15.9 L30.8 16.1 L30.2 16.1 L29.6 16.2 L29 16.2 L28.4 16.2 L27.8 16.1 L27.2 16 L26.6 15.9 L26 15.7 L25.4 15.5 L24.8 15.2 L24.2 15 L23.6 14.7 L23 14.5 L22.4 14.2 L21.8 14 L21.2 13.8 L20.6 13.6 L20 13.4 L19.4 13.3 L18.8 13.2 L18.2 13.1 L17.6 13 L17 12.9 L16.4 12.8 L15.8 12.8 L15.2 12.7 L14.6 12.6 L14 12.6 L13.4 12.6 L12.8 12.5 L12.2 12.5 L11.6 12.4 L11 12.3 L10.4 12.3 L9.8 12.2 L9.2 12.2 L8.6 12.7 L8 12.7 L7.4 12.7 L6.8 12.8 L6.2 12.9 L5.6 22.2 L5 26.3 L4.4 28.6 L3.8 30 L3.2 30.9 L2.6 31.5 L2 31.7 L1.4 31.7 L0.8 31.6 L0.2 31.3 L0 31.1 Z' fill='url(%23b)'/%3E%3Cpath d='M3 2.4 C40 3.8 80 2.6 120 3.4 C150 4 176 2.8 197 2.6 C176 4.8 150 5.8 120 5 C80 4.4 40 5.8 3 4.4 Z' fill='%23ffffff' fill-opacity='0.24'/%3E%3Cpath d='M37.5 16.3 C37.8 25.7 38.4 33.8 38.4 39.8M161.2 14.4 C161.5 20.9 162.1 27 162 30.8M126.8 13.9 C127.1 17.8 127.7 21.8 127.4 23.6' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.lt[data-caps="blood"] .movie-item:nth-child(3n + 2)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='46'%3E%3Cstop offset='0' stop-color='%23c3151f'/%3E%3Cstop offset='0.35' stop-color='%239e0b16'/%3E%3Cstop offset='0.75' stop-color='%23850812'/%3E%3Cstop offset='1' stop-color='%2372060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H200 L200 31.7 L199.4 32.1 L198.8 32.3 L198.2 32.3 L197.6 32.1 L197 31.8 L196.4 31.1 L195.8 30 L195.2 28.2 L194.6 25.3 L194 15.6 L193.4 15.5 L192.8 15.5 L192.2 15.5 L191.6 15.6 L191 15.2 L190.4 15.4 L189.8 15.6 L189.2 15.8 L188.6 16 L188 16.1 L187.4 16.3 L186.8 16.5 L186.2 16.6 L185.6 16.6 L185 16.7 L184.4 16.7 L183.8 16.6 L183.2 16.5 L182.6 16.3 L182 16.1 L181.4 15.9 L180.8 15.6 L180.2 15.3 L179.6 15 L179 14.7 L178.4 14.4 L177.8 14.1 L177.2 13.8 L176.6 13.6 L176 13.4 L175.4 13.2 L174.8 13 L174.2 12.9 L173.6 12.8 L173 12.7 L172.4 12.7 L171.8 12.6 L171.2 12.6 L170.6 12.6 L170 12.6 L169.4 12.7 L168.8 13.2 L168.2 13.3 L167.6 13.5 L167 13.7 L166.4 19.2 L165.8 26.2 L165.2 29.3 L164.6 31.1 L164 32.2 L163.4 32.8 L162.8 33 L162.2 33 L161.6 32.8 L161 32.2 L160.4 31.1 L159.8 29.3 L159.2 26.2 L158.6 19.2 L158 13.7 L157.4 13.5 L156.8 13.4 L156.2 13.2 L155.6 12.7 L155 12.6 L154.4 12.6 L153.8 12.6 L153.2 12.5 L152.6 12.5 L152 12.5 L151.4 12.4 L150.8 12.4 L150.2 12.4 L149.6 12.4 L149 12.3 L148.4 12.3 L147.8 12.3 L147.2 12.3 L146.6 12.3 L146 12.3 L145.4 12.3 L144.8 12.3 L144.2 12.3 L143.6 12.3 L143 12.3 L142.4 12.3 L141.8 12.3 L141.2 12.2 L140.6 12.2 L140 12.2 L139.4 12.2 L138.8 12.2 L138.2 12.2 L137.6 12.1 L137 12.1 L136.4 12.1 L135.8 12 L135.2 12 L134.6 11.9 L134 11.9 L133.4 11.8 L132.8 11.8 L132.2 11.7 L131.6 12.2 L131 12.3 L130.4 12.5 L129.8 14.4 L129.2 16.7 L128.6 17.7 L128 18.2 L127.4 18.5 L126.8 18.5 L126.2 18.5 L125.6 18.3 L125 18 L124.4 17.3 L123.8 16 L123.2 12.4 L122.6 12.1 L122 12 L121.4 11.9 L120.8 11.4 L120.2 11.5 L119.6 11.5 L119 11.6 L118.4 11.7 L117.8 11.8 L117.2 11.8 L116.6 11.9 L116 12 L115.4 12.1 L114.8 12.2 L114.2 12.3 L113.6 12.4 L113 12.5 L112.4 12.5 L111.8 12.6 L111.2 12.7 L110.6 12.8 L110 12.9 L109.4 12.9 L108.8 13 L108.2 13 L107.6 13.1 L107 13.2 L106.4 13.2 L105.8 13.2 L105.2 13.3 L104.6 13.3 L104 13.3 L103.4 13.4 L102.8 13.4 L102.2 13.4 L101.6 13.4 L101 13.5 L100.4 13.5 L99.8 13.5 L99.2 13.5 L98.6 13.5 L98 13.6 L97.4 13.6 L96.8 13.6 L96.2 13.6 L95.6 13.7 L95 13.7 L94.4 13.8 L93.8 13.8 L93.2 13.8 L92.6 13.9 L92 13.9 L91.4 14 L90.8 14.1 L90.2 14.1 L89.6 14.2 L89 14.3 L88.4 14.4 L87.8 14.5 L87.2 14.6 L86.6 15.3 L86 15.5 L85.4 15.9 L84.8 17.4 L84.2 24.4 L83.6 26.9 L83 28.4 L82.4 29.3 L81.8 29.8 L81.2 30 L80.6 30.1 L80 30 L79.4 29.4 L78.8 28.2 L78.2 26.1 L77.6 19.8 L77 17.9 L76.4 17.7 L75.8 17.6 L75.2 17 L74.6 16.9 L74 16.8 L73.4 16.7 L72.8 16.6 L72.2 16.4 L71.6 16.2 L71 16 L70.4 15.8 L69.8 15.6 L69.2 15.4 L68.6 15.2 L68 15 L67.4 14.8 L66.8 14.6 L66.2 14.5 L65.6 14.3 L65 14.2 L64.4 14.1 L63.8 14 L63.2 14 L62.6 13.9 L62 13.9 L61.4 13.9 L60.8 13.9 L60.2 13.9 L59.6 13.9 L59 13.9 L58.4 14 L57.8 14 L57.2 14 L56.6 14 L56 14.1 L55.4 14.1 L54.8 14.1 L54.2 14.1 L53.6 14.1 L53 14.1 L52.4 14.1 L51.8 14.1 L51.2 14.1 L50.6 14.1 L50 14.1 L49.4 14.1 L48.8 14.1 L48.2 14.1 L47.6 14 L47 14 L46.4 14 L45.8 14.6 L45.2 14.6 L44.6 14.8 L44 14.9 L43.4 24.8 L42.8 32.5 L42.2 36.4 L41.6 38.8 L41 40.4 L40.4 41.4 L39.8 41.9 L39.2 42 L38.6 42 L38 41.7 L37.4 41.1 L36.8 39.9 L36.2 38.1 L35.6 35.3 L35 30.6 L34.4 15 L33.8 14.8 L33.2 14.7 L32.6 14.6 L32 14.5 L31.4 14 L30.8 14.1 L30.2 14.1 L29.6 14.2 L29 14.3 L28.4 14.4 L27.8 14.5 L27.2 14.6 L26.6 14.7 L26 14.9 L25.4 15 L24.8 15.1 L24.2 15.3 L23.6 15.4 L23 15.5 L22.4 15.5 L21.8 15.6 L21.2 16.1 L20.6 16.3 L20 16.4 L19.4 18.7 L18.8 20.2 L18.2 20.8 L17.6 21 L17 20.9 L16.4 20.7 L15.8 20.4 L15.2 19.8 L14.6 18.9 L14 17.5 L13.4 14 L12.8 13.6 L12.2 13.2 L11.6 12.4 L11 12.2 L10.4 12.1 L9.8 12 L9.2 11.9 L8.6 12.4 L8 12.4 L7.4 12.5 L6.8 12.6 L6.2 12.8 L5.6 22.1 L5 26.2 L4.4 28.6 L3.8 30.1 L3.2 31.1 L2.6 31.6 L2 31.9 L1.4 32 L0.8 31.9 L0.2 31.6 L0 31.4 Z' fill='url(%23b)'/%3E%3Cpath d='M3 2.4 C40 3.8 80 2.6 120 3.4 C150 4 176 2.8 197 2.6 C176 4.8 150 5.8 120 5 C80 4.4 40 5.8 3 4.4 Z' fill='%23ffffff' fill-opacity='0.24'/%3E%3Cpath d='M37.5 15.3 C37.8 25.1 38.4 33.5 38.4 39.8M161.2 14.4 C161.5 21 162.1 27 162 30.8M80 17.6 C80.3 21.7 80.9 25.8 80.8 27.7' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lt[data-caps="blood"] .movie-item:nth-child(3n)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='46'%3E%3Cstop offset='0' stop-color='%23c3151f'/%3E%3Cstop offset='0.35' stop-color='%239e0b16'/%3E%3Cstop offset='0.75' stop-color='%23850812'/%3E%3Cstop offset='1' stop-color='%2372060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H200 L200 30.5 L199.4 30.9 L198.8 31 L198.2 30.9 L197.6 30.8 L197 30.4 L196.4 29.6 L195.8 28.4 L195.2 26.6 L194.6 23.7 L194 13.9 L193.4 13.7 L192.8 13.6 L192.2 13.5 L191.6 13.4 L191 12.8 L190.4 12.8 L189.8 12.9 L189.2 12.9 L188.6 12.9 L188 12.9 L187.4 13 L186.8 13 L186.2 13 L185.6 13.1 L185 13.2 L184.4 13.2 L183.8 13.3 L183.2 13.4 L182.6 13.5 L182 13.6 L181.4 13.7 L180.8 13.8 L180.2 14 L179.6 14.1 L179 14.3 L178.4 14.4 L177.8 14.6 L177.2 14.8 L176.6 14.9 L176 15.1 L175.4 15.2 L174.8 15.3 L174.2 15.4 L173.6 15.5 L173 15.6 L172.4 15.6 L171.8 15.7 L171.2 15.6 L170.6 15.6 L170 15.5 L169.4 15.5 L168.8 15.9 L168.2 15.9 L167.6 15.9 L167 15.9 L166.4 20.9 L165.8 27.4 L165.2 30.2 L164.6 31.8 L164 32.7 L163.4 33.1 L162.8 33.1 L162.2 33 L161.6 32.6 L161 32 L160.4 30.8 L159.8 28.9 L159.2 25.9 L158.6 19.1 L158 13.9 L157.4 13.6 L156.8 13.4 L156.2 13.2 L155.6 12.5 L155 12.5 L154.4 12.4 L153.8 12.3 L153.2 12.2 L152.6 12.1 L152 12 L151.4 11.9 L150.8 11.9 L150.2 11.8 L149.6 11.7 L149 11.7 L148.4 11.6 L147.8 11.5 L147.2 11.5 L146.6 11.5 L146 11.4 L145.4 11.4 L144.8 11.4 L144.2 11.4 L143.6 11.4 L143 11.3 L142.4 11.4 L141.8 11.4 L141.2 11.4 L140.6 11.4 L140 11.4 L139.4 11.5 L138.8 11.5 L138.2 11.5 L137.6 11.6 L137 11.6 L136.4 11.6 L135.8 11.7 L135.2 11.7 L134.6 11.8 L134 11.8 L133.4 11.8 L132.8 11.9 L132.2 11.9 L131.6 12 L131 12 L130.4 12.1 L129.8 12.1 L129.2 12.2 L128.6 12.3 L128 12.4 L127.4 12.5 L126.8 12.6 L126.2 12.8 L125.6 13 L125 13.2 L124.4 13.5 L123.8 13.7 L123.2 14 L122.6 14.3 L122 14.6 L121.4 14.9 L120.8 15.3 L120.2 15.5 L119.6 15.8 L119 16 L118.4 16.2 L117.8 16.4 L117.2 16.5 L116.6 16.5 L116 16.5 L115.4 16.5 L114.8 16.4 L114.2 16.2 L113.6 16.1 L113 15.9 L112.4 16.4 L111.8 16.3 L111.2 16.3 L110.6 17.7 L110 19.5 L109.4 20.3 L108.8 20.7 L108.2 21 L107.6 21.1 L107 21.2 L106.4 21.2 L105.8 21.2 L105.2 21.1 L104.6 20.7 L104 20.1 L103.4 18.7 L102.8 17 L102.2 17 L101.6 17.1 L101 17.3 L100.4 16.9 L99.8 17.1 L99.2 17.3 L98.6 17.4 L98 17.4 L97.4 17.4 L96.8 17.4 L96.2 17.3 L95.6 17.1 L95 16.9 L94.4 16.7 L93.8 16.4 L93.2 16.1 L92.6 15.9 L92 15.6 L91.4 15.3 L90.8 15 L90.2 14.8 L89.6 14.6 L89 15 L88.4 15 L87.8 15.1 L87.2 19.5 L86.6 21.3 L86 22.2 L85.4 22.7 L84.8 22.9 L84.2 22.9 L83.6 22.8 L83 22.5 L82.4 21.8 L81.8 20.5 L81.2 17.7 L80.6 14.6 L80 14.5 L79.4 14.3 L78.8 13.7 L78.2 13.8 L77.6 13.8 L77 13.7 L76.4 13.7 L75.8 13.7 L75.2 13.7 L74.6 13.7 L74 13.7 L73.4 13.7 L72.8 13.7 L72.2 13.7 L71.6 13.6 L71 13.6 L70.4 13.6 L69.8 13.6 L69.2 13.6 L68.6 13.6 L68 13.6 L67.4 13.6 L66.8 13.6 L66.2 13.6 L65.6 13.7 L65 13.7 L64.4 13.7 L63.8 13.8 L63.2 13.8 L62.6 13.8 L62 13.9 L61.4 13.9 L60.8 14 L60.2 14 L59.6 14.1 L59 14.1 L58.4 14.1 L57.8 14.2 L57.2 14.2 L56.6 14.3 L56 14.3 L55.4 14.3 L54.8 14.3 L54.2 14.4 L53.6 14.4 L53 14.4 L52.4 14.4 L51.8 14.3 L51.2 14.3 L50.6 14.3 L50 14.3 L49.4 14.2 L48.8 14.2 L48.2 14.1 L47.6 14 L47 14 L46.4 13.9 L45.8 14.4 L45.2 14.4 L44.6 14.4 L44 14.5 L43.4 24.8 L42.8 32.7 L42.2 36.6 L41.6 39 L41 40.6 L40.4 41.5 L39.8 42 L39.2 42.1 L38.6 42 L38 41.6 L37.4 40.9 L36.8 39.6 L36.2 37.7 L35.6 34.7 L35 29.8 L34.4 13.5 L33.8 13.3 L33.2 13.1 L32.6 12.9 L32 12.8 L31.4 12.2 L30.8 12.2 L30.2 12.2 L29.6 12.2 L29 12.1 L28.4 12.1 L27.8 12.1 L27.2 12.1 L26.6 12 L26 12 L25.4 12 L24.8 12 L24.2 11.9 L23.6 11.9 L23 11.9 L22.4 11.8 L21.8 11.8 L21.2 11.8 L20.6 11.7 L20 11.7 L19.4 11.6 L18.8 11.6 L18.2 12.2 L17.6 12.3 L17 12.5 L16.4 19.2 L15.8 23.3 L15.2 25.3 L14.6 26.4 L14 26.9 L13.4 27.1 L12.8 27 L12.2 26.6 L11.6 25.7 L11 24 L10.4 20.8 L9.8 12.6 L9.2 12.4 L8.6 12.7 L8 12.8 L7.4 12.5 L6.8 12.7 L6.2 13 L5.6 22.4 L5 26.5 L4.4 28.9 L3.8 30.5 L3.2 31.5 L2.6 32.1 L2 32.4 L1.4 32.5 L0.8 32.5 L0.2 32.2 L0 32.1 Z' fill='url(%23b)'/%3E%3Cpath d='M3 2.4 C40 3.8 80 2.6 120 3.4 C150 4 176 2.8 197 2.6 C176 4.8 150 5.8 120 5 C80 4.4 40 5.8 3 4.4 Z' fill='%23ffffff' fill-opacity='0.24'/%3E%3Cpath d='M37.5 14.3 C37.8 24.5 38.4 33.2 38.4 39.8M161.2 15.3 C161.5 21.5 162.1 27.2 162 30.8M83.3 15.2 C83.6 17.4 84.2 20.1 83.9 20.6M12.3 12.9 C12.6 17.7 13.2 22.3 12.9 24.8' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lt[data-caps="blood"] .movie-item:nth-child(even)::after {
  transform: scaleX(-1);
}

/* the drops, at the tips of two drips (the long one, and the one near the other side; mirrored on
   every other poster, like the blood): while the list plays, each swells from a bead into a
   hanging drop, stretches under its weight, lets go and runs down the cover, fading */
.lt[data-caps="blood"] .poster-link::before,
.lt[data-caps="blood"] .poster-link::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 19.5%;
  z-index: 3;
  width: 8px;
  height: 11px;
  margin-left: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cdefs%3E%3CradialGradient id='d' cx='0.38' cy='0.62' r='0.7'%3E%3Cstop offset='0' stop-color='%23b8121d'/%3E%3Cstop offset='0.6' stop-color='%23900913'/%3E%3Cstop offset='1' stop-color='%2363040b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M5 0 C6 4 9.5 6.5 9.5 9.6 A4.5 4.5 0 0 1 0.5 9.6 C0.5 6.5 4 4 5 0 Z' fill='url(%23d)'/%3E%3Cellipse cx='3.4' cy='9' rx='0.9' ry='1.6' fill='%23ffffff' fill-opacity='0.45'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  transform-origin: 50% 0;
  pointer-events: none;
}

.lt[data-caps="blood"] .poster-link::before {
  top: 29px;
  left: 81.2%;
}

.lt[data-caps="blood"] .movie-item:nth-child(even) .poster-link::after {
  left: 80.5%;
}

.lt[data-caps="blood"] .movie-item:nth-child(even) .poster-link::before {
  left: 18.8%;
}

.lt-play[data-caps="blood"] .poster-link::after {
  animation: lt-drip 7s infinite;
}

.lt-play[data-caps="blood"] .poster-link::before {
  animation: lt-drip 9s -4s infinite;
}

/* (not all at once) */
.lt-play[data-caps="blood"] .movie-item:nth-child(3n + 2) .poster-link::after {
  animation-delay: -2.6s;
}

.lt-play[data-caps="blood"] .movie-item:nth-child(3n) .poster-link::after {
  animation-delay: -5s;
}

.lt-play[data-caps="blood"] .movie-item:nth-child(even) .poster-link::before {
  animation-delay: -7s;
}

@keyframes lt-drip {
  /* a bead, gathering at the tip */
  0% {
    opacity: 0;
    transform: translate3d(0, -3px, 0) scale(0.15, 0.1);
    animation-timing-function: ease-out;
  }
  8% {
    opacity: 1;
  }
  /* full and heavy: from here one movement, as gravity does it: it starts to slide from rest,
     stretching as it picks up speed, and runs down the cover faster and faster, no stop */
  56% {
    transform: translate3d(0, 0, 0) scale(0.9, 0.9);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 200px, 0) scale(0.68, 1.7);
  }
}

/* raindrops clinging along the top edge (Rainy day) */
.lt[data-caps="drops"] .movie-item::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  z-index: 4;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cg fill='%23d6e6ff' fill-opacity='0.55'%3E%3Cellipse cx='14' cy='5' rx='2.4' ry='3.4'/%3E%3Cellipse cx='46' cy='4' rx='1.8' ry='2.6'/%3E%3Cellipse cx='78' cy='6' rx='2.8' ry='4.2'/%3E%3Cellipse cx='112' cy='4' rx='1.6' ry='2.4'/%3E%3Cellipse cx='140' cy='5.5' rx='2.4' ry='3.6'/%3E%3Cellipse cx='176' cy='4.5' rx='2' ry='3'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='13.2' cy='3.6' r='0.8'/%3E%3Ccircle cx='77' cy='4.4' r='0.9'/%3E%3Ccircle cx='139.2' cy='4' r='0.8'/%3E%3C/g%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------------- the movements ---------------- */
@keyframes lt-aurora {
  0% {
    opacity: 0.7;
    transform: translate3d(-6%, 0, 0) skewX(-8deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(6%, 4%, 0) skewX(8deg);
  }
}

@keyframes lt-candle {
  0%,
  100% {
    opacity: 0.85;
  }
  40% {
    opacity: 1;
  }
  55% {
    opacity: 0.78;
  }
  70% {
    opacity: 0.95;
  }
}

@keyframes lt-shoot {
  0%,
  86% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(0, 0, 0);
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(-380px, 0, 0);
  }
}

@keyframes lt-swing {
  0% {
    transform: rotate(-14deg);
  }
  100% {
    transform: rotate(14deg);
  }
}

@keyframes lt-proj {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.86;
  }
  50% {
    opacity: 0.96;
  }
  83% {
    opacity: 0.8;
  }
}

@keyframes lt-scratch {
  0% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0.3;
    transform: translate3d(-180px, 0, 0);
  }
  50% {
    opacity: 0.8;
    transform: translate3d(140px, 0, 0);
  }
  75% {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
}

@keyframes lt-ripple {
  0% {
    opacity: 0.8;
    transform: scale(0.15);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes lt-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  12%,
  88% {
    opacity: var(--lt-o, 0.75);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--lt-h, 460px), 0);
  }
}

@keyframes lt-rain {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(8deg);
  }
  10%,
  90% {
    opacity: var(--lt-o, 0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(-40px, var(--lt-h, 460px), 0) rotate(8deg);
  }
}

@keyframes lt-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  15%,
  75% {
    opacity: var(--lt-o, 0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), calc(var(--lt-h, 460px) * -0.85), 0) scale(0.5);
  }
}

@keyframes lt-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  15%,
  80% {
    opacity: var(--lt-o, 0.55);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), calc(var(--lt-h, 460px) * -0.8), 0) rotate(220deg);
  }
}

@keyframes lt-petal {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  12%,
  88% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--lt-h, 460px), 0) rotate(300deg);
  }
}

@keyframes lt-twinkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.95;
    transform: scale(1);
  }
}

@keyframes lt-dust {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  15%,
  85% {
    opacity: var(--lt-o, 0.45);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--lt-w, 1500px), var(--dx), 0);
  }
}

@keyframes lt-drift {
  0% {
    transform: translate3d(-10%, 0, 0);
  }
  100% {
    transform: translate3d(10%, 0, 0);
  }
}

@keyframes lt-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

@keyframes lt-flicker {
  0%,
  41%,
  47%,
  77%,
  81%,
  100% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.3;
  }
  44% {
    opacity: 0.7;
  }
  45% {
    opacity: 0.2;
  }
  79% {
    opacity: 0.45;
  }
}

@keyframes lt-hover {
  0%,
  100% {
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(-8px, -10px, 0);
  }
}

@keyframes lt-blink {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes lt-glint {
  0%,
  55% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(420%);
  }
}

@keyframes lt-bokeh {
  0% {
    opacity: 0.16;
    transform: translate3d(-12px, 6px, 0);
  }
  100% {
    opacity: 0.3;
    transform: translate3d(12px, -6px, 0);
  }
}

@keyframes lt-burst {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  6% {
    opacity: 0.9;
  }
  30% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

@keyframes lt-streak {
  0%,
  45% {
    transform: translateX(-160%) rotate(16deg);
  }
  100% {
    transform: translateX(700%) rotate(16deg);
  }
}

@keyframes lt-road {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-70px, 0, 0);
  }
}

/* no motion (reduce motion, or the site-wide switch in Admin → Themes): the look stays, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .lt-fx *,
  .lt-fx *::before,
  .lt-fx *::after,
  .lt-over *,
  .lt .movie-item::after,
  .lt .poster-link::before,
  .lt .poster-link::after {
    animation: none !important;
  }
}

html.no-list-fx .lt-fx *,
html.no-list-fx .lt-fx *::before,
html.no-list-fx .lt-fx *::after,
html.no-list-fx .lt-over *,
html.no-list-fx .lt .movie-item::after,
html.no-list-fx .lt .poster-link::before,
html.no-list-fx .lt .poster-link::after {
  animation: none !important;
}

@media (max-width: 700px) {
  .lt.wl-row,
  .lt.wl-panel {
    margin-inline: -10px;
    padding: 12px 10px 10px;
    border-radius: 20px;
  }

  /* (lighter on a phone: no blur on the big layers) */
  .lt-l-nebula,
  .lt-l-bokeh,
  .lt-l-fog,
  .lt-l-mist {
    filter: none;
  }

  .lt-l-ghost {
    display: none;
  }

  .lt-l-pines {
    width: 100px;
    height: 72px;
  }

  .lt-l-trees,
  .lt-l-castle {
    width: 140px;
    height: 100px;
  }

  .lt-l-window {
    top: 60px;
    right: 14px;
    width: 90px;
    height: 74px;
  }

  .lt-l-planet {
    right: -120px;
    bottom: -200px;
  }

  .lt-l-aurora {
    filter: none;
  }

  .lt-sil {
    height: 90px;
  }
}

/* ---------------- the Appearance pop-up ---------------- */
.lt-modal {
  max-width: 720px;
}

.lt-modal h3 {
  margin: 0 0 14px;
  padding-right: 40px;
  text-align: left;
  font-size: 19px;
}

.lt-modal h3 i {
  margin-right: 6px;
  color: var(--accent-hover);
}

/* the live preview: the list as it will look */
.lt-preview {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
}

.lt.lt-preview {
  margin: 0 0 16px;
  --lt-h: 200px;
  --lt-w: 700px;
}

.lt-preview .row-head {
  margin-bottom: 10px;
}

.lt-preview h2 {
  margin: 0;
  font-size: 17px;
}

.lt-pv-row {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.lt-pv-row img {
  flex: none;
  width: 84px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.lt-pv-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 126px;
  border: 1px dashed var(--glass-border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.lt-modes {
  width: 100%;
  margin-bottom: 14px;
}

.lt-modes .top10-tab {
  flex: 1;
  justify-content: center;
}

/* Atmosphere | Background */
.lt-tabs {
  display: flex;
  gap: 18px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--glass-border);
}

.lt-tab {
  margin-bottom: -1px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.lt-tab i {
  margin-right: 5px;
}

.lt-tab:hover {
  color: var(--text);
}

.lt-tab.on {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.lt-tab.on i {
  color: var(--accent-hover);
}

/* the stills to pick from */
.lt-panel-bg {
  max-height: clamp(180px, calc(100vh - 420px), 460px);
}

.lt-bg-note {
  margin: 0 0 10px;
}

.lt-bgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.lt-bg {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.lt-bg:hover {
  transform: translateY(-1px);
}

.lt-bg.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.25);
}

.lt-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lt-bg-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 20px;
}

.lt-bg-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

/* (the rest of the pop-up stays in view: the preview above, Save below) */
.lt-panel {
  max-height: clamp(150px, calc(100vh - 480px), 420px);
  overflow-y: auto;
  padding-right: 2px;
}

/* Auto: what was found, how sure */
.lt-found {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
}

.lt-found-em {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 22px;
}

.lt-found.none .lt-found-em {
  color: var(--text-muted);
  font-size: 17px;
}

.lt-found > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
}

.lt-found small {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lt-found b {
  font-size: 17px;
}

.lt-conf {
  position: relative;
  flex: none;
  width: 90px;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}

.lt-conf i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.lt-found em {
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lt-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 13px;
}

.lt-also > span {
  color: var(--text-muted);
}

.lt-chip {
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.lt-chip:hover {
  border-color: var(--accent);
}

.lt-chip em {
  color: var(--text-muted);
  font-style: normal;
}

.lt-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.lt-none-note i {
  margin-right: 6px;
}

.lt-auto-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Choose: the atmospheres, by kind */
.lt-group {
  margin: 14px 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lt-group:first-child {
  margin-top: 0;
}

.lt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.lt-opt {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.lt-opt:hover {
  transform: translateY(-1px);
}

.lt-opt.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.lt-opt b {
  font-size: 14px;
}

.lt-opt small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.lt-swatch {
  display: grid;
  place-items: center;
  height: 50px;
  margin-bottom: 4px;
  border-radius: 12px;
  font-size: 22px;
}

.lt-anim {
  margin-top: 14px;
}

.lt-anim small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.lt-anim.off {
  opacity: 0.5;
}

.lt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* Admin → Themes: the atmospheres on offer, a tile each (a preview in its colours, its name and what
   it shows, its switch), by kind, each kind with its count and All on / All off */
.cc-lt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}

.cc-lt-total {
  color: var(--text-muted);
  font-size: 13.5px;
}

.cc-lt-total b {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cc-lt-all {
  display: flex;
  gap: 8px;
}

.cc-lt-all .btn {
  padding: 7px 13px;
  font-size: 13px;
}

.cc-lt-group {
  display: grid;
  gap: 12px;
  padding: 16px 0 4px;
}

.cc-lt-group + .cc-lt-group {
  border-top: 1px solid var(--glass-border);
}

.cc-lt-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-lt-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.cc-lt-count {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.cc-lt-gbtns {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.cc-lt-gbtns button {
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.cc-lt-gbtns button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.cc-lt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.cc-lt-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}

.cc-lt-tile:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.cc-lt-swatch {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid;
  border-radius: 13px;
  font-size: 22px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  transition: filter 0.2s;
}

.cc-lt-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cc-lt-text strong {
  font-size: 14px;
  line-height: 1.3;
}

.cc-lt-text small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cc-lt-tile.off {
  background: transparent;
}

.cc-lt-tile.off .cc-lt-swatch {
  filter: grayscale(1) brightness(0.6);
}

.cc-lt-tile.off .cc-lt-text {
  opacity: 0.55;
}

:root[data-theme="light"] .cc-lt-tile:hover,
:root[data-theme="light"] .cc-lt-gbtns button:hover {
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .cc-lt-count {
  background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 640px) {
  .cc-lt-head {
    flex-wrap: wrap;
  }
}

/* the parts of a card, each with its heading (Seasonal look: what everyone sees, how much, the seasons,
   the navbar) */
.cc-part {
  display: grid;
  gap: 12px;
  padding: 16px 0 4px;
}

.cc-part + .cc-part {
  margin-top: 6px;
  border-top: 1px solid var(--glass-border);
}

.cc-part .cc-lt-head {
  flex-wrap: wrap;
  gap: 4px 12px;
}

.cc-part .cc-lt-head small {
  color: var(--text-muted);
  font-size: 12.5px;
}

/* a switch tile's icon in its colour (the seasons, the navbar, the list switches) */
.cc-tile-icon2 {
  --c: var(--accent);
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(80% 80% at 30% 25%, color-mix(in srgb, var(--c) 38%, transparent), transparent 75%), color-mix(in srgb, var(--c) 10%, #121214);
  color: var(--c);
  font-size: 19px;
}

/* one choice of several, as tiles; the picked one lit in its colour with a tick */
.cc-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* (the seven of What everyone sees on one row on a computer) */
.cc-opts-season {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.cc-opts-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cc-opts-season .cc-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.cc-opts-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-opt {
  --c: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.cc-opt:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.cc-opt-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 16px;
}

.cc-opt-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.cc-opt-text strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-opt-text small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.cc-opt-check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--c);
  font-size: 14px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}

.cc-opt.on {
  border-color: color-mix(in srgb, var(--c) 65%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 8px 22px color-mix(in srgb, var(--c) 14%, transparent);
}

.cc-opt.on .cc-opt-icon {
  background: var(--c);
  color: #111;
}

.cc-opt.on .cc-opt-check {
  opacity: 1;
  transform: none;
}

:root[data-theme="light"] .cc-opt:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Overview: the welcome card's switches and the atmosphere lock as tiles (on the dark red card) */
@media (min-width: 901px) {
  .cc-dash > .cc-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 1.15fr);
  }
}

.cc-hero-switches {
  gap: 12px;
  padding: 14px;
}

.cc-hero-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cc-hero .cc-lt-tile {
  min-height: 64px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.cc-hero .cc-lt-tile:hover {
  background: rgba(0, 0, 0, 0.3);
}

.cc-hero .cc-lt-swatch {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.cc-hero .cc-lt-text small,
.cc-hero .cc-opt-text small {
  color: rgba(255, 255, 255, 0.65);
}

.cc-hero .cc-lt-text,
.cc-hero .cc-opt {
  color: #fff;
}

.cc-hero .cc-season-pick {
  margin-top: 0;
  padding: 12px 0 0;
}

/* the small option tiles: icon above the name, no line under it */
.cc-opts-mini {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
}

.cc-opts-mini .cc-opt {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px 9px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  text-align: center;
}

.cc-opts-mini .cc-opt-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
}

.cc-opts-mini .cc-opt-text strong {
  font-size: 12px;
}

.cc-opts-mini .cc-opt-check {
  top: 5px;
  right: 5px;
  font-size: 11px;
}

.cc-opts-mini .cc-opt.on {
  background: color-mix(in srgb, var(--c) 22%, rgba(0, 0, 0, 0.3));
}

/* (the seven on the welcome card: four, then three) */
.cc-hero .cc-opts-mini {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* the Site atmosphere panel's switches */
.cc-season-switches {
  padding-top: 12px;
}

@media (max-width: 640px) {
  .cc-hero-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-hero .cc-opts-mini .cc-opt {
    padding: 9px 2px 8px;
  }

  .cc-hero .cc-opts-mini .cc-opt-text strong {
    overflow: visible;
    font-size: 11px;
    letter-spacing: -0.01em;
  }
}

/* Overview: the stat tiles in the tile look (the icon a swatch in its colour, a soft tint) */
.cc-tiles .cc-tile {
  --c: #7ea4ff;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--c) 9%, transparent), transparent 60%), var(--glass-bg);
}

.cc-tile.red {
  --c: #ff6b6f;
}

.cc-tile.gold {
  --c: #f5c518;
}

.cc-tile.green {
  --c: #4cd97b;
}

.cc-tiles .cc-tile .cc-tile-icon {
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(80% 80% at 30% 25%, color-mix(in srgb, var(--c) 38%, transparent), transparent 75%), color-mix(in srgb, var(--c) 10%, #121214);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  color: var(--c);
}

.cc-tiles .cc-tile:hover {
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}

/* Needs attention: what was checked and is fine, under the issues */
.cc-fine {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cc-fine-title {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-fine ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-fine li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 11px 6px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
}

.cc-fine li > i {
  width: 16px;
  color: var(--text-muted);
  text-align: center;
}

.cc-fine li span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-fine li b {
  color: #4cd97b;
  font-size: 11px;
}

/* Quick actions: compact tiles, two across (an icon swatch, its name) */
.cc-action {
  --c: #9aa4b5;
}

.cc-action.red {
  --c: #ff6b6f;
}

.cc-action.gold {
  --c: #f5c518;
}

.cc-action.green {
  --c: #4cd97b;
}

.cc-action.blue {
  --c: #7ea4ff;
}

.cc-action.purple {
  --c: #c49bff;
}

.cc-actions .cc-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cc-actions .cc-action {
  display: flex;
  align-items: center;
  justify-items: start;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 14px;
  text-align: left;
  font-size: 13px;
}

.cc-actions .cc-action-grid .cc-action i {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 11px;
  background: radial-gradient(80% 80% at 30% 25%, color-mix(in srgb, var(--c) 38%, transparent), transparent 75%), color-mix(in srgb, var(--c) 10%, #121214);
  color: var(--c);
  font-size: 14px;
}

.cc-actions .cc-action:hover {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}

/* Latest saves: a tile each */
.cc-saves {
  display: grid;
  gap: 8px;
}

.cc-saves .cc-lt-tile {
  min-height: 60px;
  padding: 8px 11px;
}

.cc-saves .cc-lt-swatch {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

/* Seasons by the date: each season's tile with its dates to edit under it */
.cc-season-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cc-season-card {
  display: grid;
  align-content: start;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.cc-season-card > .cc-lt-tile {
  border: 0;
  background: transparent;
}

.cc-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 12.5px;
}

.cc-range-part {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cc-range select,
.cc-range input {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.cc-range select {
  padding-right: 4px;
  cursor: pointer;
}

.cc-range select option {
  background: #1b1b1f;
}

.cc-range input {
  width: 54px;
}

.cc-range select:focus,
.cc-range input:focus {
  border-color: var(--accent);
  outline: none;
}

.cc-season-card .cc-lt-tile.off ~ .cc-range {
  opacity: 0.5;
}

:root[data-theme="light"] .cc-range select option {
  background: #fff;
}

/* the Overview's atmosphere panel: the way to the dates */
.cc-season-edit {
  justify-self: start;
  font-size: 13px;
}

/* API integrations: every service at a glance (a tile each: its icon, health, numbers; a dot that
   glows green / red), each card's icon in its service's colour, "Keep its answers for [n] hours" on one line */
.cc-svc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cc-svc-sum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

.cc-svc-sum.ok i {
  color: #4cd97b;
}

.cc-svc-sum.down i {
  color: #ff6b6f;
}

.cc-svc-btns,
.cc-svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-svc-btns .btn,
.cc-svc-actions .btn {
  padding: 8px 14px;
  font-size: 13px;
}

.cc-svc-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cc-svc-tile {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.cc-svc-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a8a8a;
}

.cc-svc-tile.ok .cc-svc-dot {
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.8);
}

.cc-svc-tile.down {
  border-color: rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.07);
}

.cc-svc-tile.down .cc-svc-dot {
  background: #ff453a;
  box-shadow: 0 0 8px rgba(255, 69, 58, 0.8);
}

.cc-svc-tile.off {
  opacity: 0.6;
}

.cc-card > .xr-label[style] i {
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(80% 80% at 30% 25%, color-mix(in srgb, var(--c) 38%, transparent), transparent 75%), color-mix(in srgb, var(--c) 10%, #121214);
  color: var(--c);
}

.cc-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.cc-keep > i {
  font-size: 12px;
}

.cc-keep .input {
  width: 74px;
  height: 36px;
  padding: 0 10px;
  text-align: center;
}

.cc-api-stats span.bad b {
  color: #ff6b6f;
}

/* Admin → News: sources by kind and tier (each source's mark on its colour), the add form, number
   tiles (priorities, weights, Breaking), the stories with their marks, the feeds' health */
.cc-src-mark {
  color: var(--c, #fff);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.cc-story .cc-src-mark {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--c);
  color: #111;
  font-size: 8.5px;
  vertical-align: 1px;
}

.cc-part .cc-lt-head h4 i {
  margin-right: 6px;
  color: var(--accent-hover);
}

.cc-src-rm {
  justify-self: start;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #ff6b6f;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.cc-add-src {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(200px, 2fr) auto 86px auto;
  gap: 8px;
}

.cc-add-src .input,
.cc-add-src .glass-select select {
  height: 42px;
}

.cc-num-tile {
  cursor: default;
}

.cc-num-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.cc-num-in .input {
  width: 70px;
  height: 38px;
  padding: 0 8px;
  text-align: center;
}

.cc-num-in em {
  font-style: normal;
}

.cc-stories-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cc-stories-top .muted {
  flex: 1;
  font-size: 13px;
}

.cc-story-list {
  display: grid;
  gap: 6px;
  max-height: 560px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
}

.cc-story {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.cc-story.is-hidden {
  opacity: 0.5;
}

.cc-story-pick input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.cc-story-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cc-story-text strong {
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-story-text small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-story-text em.hot {
  color: #ff6b6f;
  font-style: normal;
  font-weight: 700;
}

.cc-story-btns {
  display: flex;
  gap: 4px;
}

.cc-story-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cc-story-btn:hover {
  color: var(--text);
}

.cc-story-btn.on {
  border-color: rgba(245, 197, 24, 0.6);
  background: rgba(245, 197, 24, 0.14);
  color: var(--gold);
}

.cc-story-btn.hot.on {
  border-color: rgba(255, 69, 58, 0.6);
  background: rgba(255, 69, 58, 0.14);
  color: #ff6b6f;
}

.cc-feed-tile {
  position: relative;
}

.cc-feed-tile.ok .cc-svc-dot {
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.8);
}

.cc-feed-tile.down {
  border-color: rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.07);
}

.cc-feed-tile.down .cc-svc-dot {
  background: #ff453a;
}

.cc-feed-tile.off {
  opacity: 0.55;
}

@media (max-width: 900px) {
  .cc-add-src {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cc-add-src [name="url"] {
    grid-column: 1 / -1;
  }

  .cc-story {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cc-story-btns {
    grid-column: 2;
  }

  .cc-story-btn span {
    display: none;
  }
}

/* a section's own tabs (News: Sources, Ranking, Stories, Feeds, Pinned): a segmented bar */
.cc-subtabs {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 16px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  scrollbar-width: none;
}

.cc-subtab {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cc-subtab:hover {
  color: var(--text);
}

.cc-subtab.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(229, 9, 20, 0.8);
}

/* News → Sources: a table, a row a source, a column a kind, its priority last */
.cc-src-table {
  display: grid;
  gap: 4px;
}

.cc-src-head,
.cc-src-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(90px, 1fr)) 110px;
  align-items: center;
  gap: 12px;
}

.cc-src-head {
  padding: 4px 14px 10px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-src-head span:not(:first-child) {
  text-align: center;
}

.cc-src-head i {
  margin-right: 4px;
}

.cc-src-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 0 14px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-src-tier::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--glass-border), transparent);
}

.cc-src-row {
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s, background 0.2s;
}

.cc-src-row:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}

.cc-src-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cc-src-id > span {
  display: grid;
  min-width: 0;
}

.cc-src-id strong {
  overflow: hidden;
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-src-id small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-src-badge {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--c);
  color: #111;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.03em;
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.15), 0 6px 16px -8px var(--c);
}

.cc-src-id .cc-src-rm {
  margin: 0 0 0 auto;
  padding: 6px 9px;
}

.cc-src-cell {
  display: flex;
  justify-content: center;
}

.cc-src-na {
  color: var(--text-muted);
  opacity: 0.5;
}

.cc-num-small {
  width: 76px;
  height: 38px;
  padding: 0 8px;
  text-align: center;
}

@media (max-width: 900px) {
  .cc-src-head {
    display: none;
  }

  /* (a phone: a source, then its switches with their names under it) */
  .cc-src-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  .cc-src-id {
    grid-column: 1 / -1;
  }

  .cc-src-cell {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .cc-src-cell::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10.5px;
    text-align: center;
  }

  .cc-subtab span {
    display: none;
  }

  .cc-subtab.on span {
    display: inline;
  }
}

/* (one tile on its own fills its box) */
.cc-lt-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* a member's photo in their tile */
/* a tile that only tells (no switch) */
.cc-info-tile {
  grid-template-columns: auto minmax(0, 1fr);
  cursor: default;
}

.cc-info-tile .cc-lt-text small {
  display: block;
  -webkit-line-clamp: unset;
}

.cc-info-tile:hover {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, 0.025);
}

/* the fields under a card's tiles */
.cc-card .cc-lt-grid + .cc-field,
.cc-card .cc-lt-grid + .cc-part {
  margin-top: 4px;
}

/* the big buttons inside a card (This device, Backup, Add a title) */
.cc-card .cc-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.cc-card .cc-action {
  align-content: start;
  padding: 14px 8px;
}

/* ============================== Site-wide: the notice and maintenance (js/core/site.js) ============================== */
/* the notice across the top: dark glass like the navbar, the tone's glow coming in from the left
   (red: news, amber: a warning), a film strip's holes along both edges, a light sweeping across now
   and then; a pill with its word (pulsing softly), the text, a button to the link. Slides in, folds
   away when closed */
.site-notice {
  --sn: 229, 9, 20;
  --sn-hi: #ff5a52;
  position: relative;
  z-index: 60;
  overflow: hidden;
  padding: 11px 56px 11px 16px;
  border-bottom: 1px solid rgba(var(--sn), 0.35);
  background:
    radial-gradient(55% 220% at 0% 50%, rgba(var(--sn), 0.5), transparent 70%),
    radial-gradient(35% 200% at 100% 50%, rgba(var(--sn), 0.16), transparent 70%),
    linear-gradient(180deg, #17171a, #0d0d0f);
  box-shadow: 0 10px 30px -18px rgba(var(--sn), 0.9);
  color: #fff;
  font-size: 14px;
  animation: sn-in 0.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.site-notice.warn {
  --sn: 245, 166, 35;
  --sn-hi: #ffc75a;
}

/* (the film strip's holes, top and bottom) */
.site-notice::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 17px) 0 2px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 17px) 0 calc(100% - 2px) / 100% 3px no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

/* (the light sweeping across) */
.site-notice::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.1) 55%, transparent);
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
  animation: sn-sweep 7s ease-in-out 1.2s infinite;
}

.sn-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 1550px;
  margin: 0 auto;
}

.sn-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(var(--sn), 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--sn), 0.55), rgba(var(--sn), 0.2));
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: sn-pulse 2.6s ease-out infinite;
}

.sn-badge i {
  font-size: 12px;
}

.sn-badge b {
  font-weight: 800;
}

.sn-text {
  min-width: 0;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.sn-cta {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.sn-cta i {
  font-size: 11px;
  transition: transform 0.2s;
}

.sn-cta:hover {
  border-color: rgba(var(--sn), 0.8);
  background: rgba(var(--sn), 0.35);
}

.sn-cta:hover i {
  transform: translateX(3px);
}

.site-notice-x {
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.site-notice-x:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-50%) rotate(90deg);
}

html.app-ui .site-notice {
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
}

@keyframes sn-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes sn-sweep {
  0% {
    transform: translateX(-120%) skewX(-12deg);
  }
  30%,
  100% {
    transform: translateX(320%) skewX(-12deg);
  }
}

@keyframes sn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--sn), 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(var(--sn), 0);
  }
}

@media (max-width: 700px) {
  .site-notice {
    padding: 9px 46px 9px 12px;
    font-size: 13px;
  }

  .sn-inner {
    justify-content: flex-start;
    gap: 10px;
  }

  /* (the pill shows its icon only, the button its arrow only) */
  .sn-badge {
    padding: 6px;
  }

  .sn-badge b,
  .sn-cta span {
    display: none;
  }

  .sn-cta {
    padding: 7px 9px;
  }

  .sn-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .site-notice-x {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-notice,
  .site-notice::after,
  .sn-badge {
    animation: none;
  }
}

/* the Admin's preview of it (Website → Notice across the top) */
.cc-notice-preview .site-notice {
  border: 1px solid rgba(var(--sn), 0.35);
  border-radius: 14px;
  animation: none;
}

.cc-notice-preview .site-notice-x {
  pointer-events: none;
}

/* maintenance: everyone but the owner sees only this */
html.maint-on body > :not(.site-maint):not(script) {
  display: none !important;
}

.site-maint:not(.owner) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(185, 34, 34, 0.25), transparent 70%), #0b0b0c;
  color: #fff;
}

.site-maint-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 420px;
  text-align: center;
}

.site-maint-card img {
  width: 200px;
  margin-bottom: 10px;
}

.site-maint-card > i {
  color: var(--accent-hover);
  font-size: 34px;
}

.site-maint-card h1 {
  margin: 0;
}

.site-maint-card p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.site-maint.owner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 250;
  max-width: calc(100vw - 24px);
  padding: 9px 16px;
  border: 1px solid rgba(255, 170, 0, 0.5);
  border-radius: 999px;
  background: rgba(40, 28, 0, 0.92);
  color: #ffd27a;
  font-size: 13px;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.site-maint.owner a {
  margin-left: 6px;
  color: #fff;
  font-weight: 700;
}

html.app-ui .site-maint.owner {
  bottom: calc(84px + var(--tab-gap, 10px));
}

/* ============================== Admin Control Center (admin.html) ============================== */

.cc-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--text-muted);
  font-size: 13.5px;
}

.cc-state.ok i {
  color: #34c759;
}

.cc-state.warn {
  border-color: rgba(255, 170, 0, 0.5);
  color: #ffbf47;
}

.cc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  padding-bottom: 90px;
}

.cc-nav {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
}

.cc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.cc-nav a i {
  width: 18px;
  text-align: center;
}

.cc-nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.cc-nav a.on {
  background: var(--accent);
  color: #fff;
}

.cc-body.cc-in {
  animation: wl-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  align-items: start;
  gap: 16px;
}

.cc-card {
  display: grid;
  gap: 10px;
}

.cc-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.cc-field > span:first-child {
  color: var(--text-muted);
}

.cc-field .input,
.cc-field textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  font-size: 14.5px;
}

.cc-field .glass-select,
.cc-field select {
  width: 100%;
}

.cc-num .input {
  max-width: 140px;
}

.cc-color {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-color input[type="color"] {
  width: 54px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.cc-health {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 12.5px;
}

.cc-health i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a8a8a;
}

.cc-health.ok i {
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.7);
}

.cc-health.down i {
  background: #ff453a;
  box-shadow: 0 0 8px rgba(255, 69, 58, 0.7);
}

.cc-health.off {
  opacity: 0.6;
}

.cc-api-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.cc-api-head small {
  color: var(--text-muted);
}

/* a service's numbers: three small tiles (answered, from memory, failed), then when it last answered */
.cc-api-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.cc-api-stats span {
  display: grid;
  justify-items: center;
  padding: 8px 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}

.cc-api-stats span:last-child {
  grid-column: 1 / -1;
  display: block;
  padding: 2px 0 0;
  border: 0;
  background: none;
  text-align: left;
}

.cc-api-stats b {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}

.cc-api-stats span:last-child b {
  font-size: inherit;
}

.cc-err {
  color: #ff8a84;
}

.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  font-size: 13px;
}

.cc-chip button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.cc-chip button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.cc-search .input,
.cc-results {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.cc-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.cc-result:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

.cc-result img {
  width: 30px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.cc-result span {
  flex: 1;
}

.cc-result i {
  color: var(--accent-hover);
}

.cc-pin {
  display: grid;
  gap: 8px;
}

.cc-pin .btn {
  justify-self: start;
}

.cc-pre {
  overflow-x: auto;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.5;
}

/* Users → People: everyone in one list, with what they can do and how active they are */
.cc-pp {
  display: grid;
  gap: 14px;
}

.cc-pp-banner {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 159, 10, 0.3);
  border-radius: 14px;
  background: rgba(255, 159, 10, 0.1);
  font-size: 14px;
  line-height: 1.45;
}

.cc-pp-banner i {
  margin-right: 6px;
  color: #ff9f0a;
}

.cc-pp-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cc-pp-stat {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.cc-pp-stat:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.cc-pp-stat.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.cc-pp-stat b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.cc-pp-stat small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-pp-add {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
  gap: 8px;
}

.cc-pp-add[hidden],
.cc-pp-row[hidden],
.cc-pp-none[hidden] {
  display: none;
}

.cc-pp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cc-pp-find {
  position: relative;
  display: block;
  flex: 1 1 220px;
}

.cc-pp-find i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-muted);
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cc-pp-find .input {
  width: 100%;
  padding-left: 38px;
}

.cc-pp-list {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-pp-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s, background 0.2s;
}

.cc-pp-row:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.cc-pp-face {
  display: grid;
  overflow: hidden;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px var(--glass-border);
}

.cc-pp-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-pp-face b {
  font-size: 17px;
}

.s-blocked .cc-pp-face {
  opacity: 0.5;
  filter: grayscale(1);
}

.cc-pp-who,
.cc-pp-what {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cc-pp-who strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-pp-who small,
.cc-pp-what small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-pp-live {
  color: #30d158;
}

.cc-pp-pill {
  justify-self: start;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.s-owner .cc-pp-pill {
  background: rgba(245, 197, 24, 0.15);
  color: #f5c518;
}

.s-allowed .cc-pp-pill {
  background: rgba(48, 209, 88, 0.14);
  color: #30d158;
}

.s-blocked .cc-pp-pill {
  background: rgba(255, 69, 58, 0.15);
  color: #ff6961;
}

.s-outside .cc-pp-pill {
  background: rgba(255, 159, 10, 0.15);
  color: #ff9f0a;
}

.cc-pp-rename {
  height: 34px;
  padding: 0 10px;
}

.cc-pp-btns {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.cc-pp-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cc-pp-btn:hover,
.cc-pp-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.cc-pp-btn.warn:hover {
  color: #ff9f0a;
}

.cc-pp-btn.danger:hover {
  color: #ff6961;
}

/* (a row's actions show when it's pointed at) */
@media (hover: hover) {
  .cc-pp-btns {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .cc-pp-row:hover .cc-pp-btns,
  .cc-pp-row:focus-within .cc-pp-btns {
    opacity: 1;
  }
}

.cc-pp-none {
  margin: 0;
  padding: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* Users → Security rules: where they stand, the two buttons, the text folded away */
.cc-rules-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.cc-rules-state {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.cc-rules-state.green {
  color: #30d158;
}

.cc-rules-state.amber {
  color: #ff9f0a;
}

.cc-rules-state.red {
  color: #ff6961;
}

.cc-rules-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-rules-text summary {
  padding: 4px 0;
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cc-rules-text[open] summary {
  margin-bottom: 8px;
}

.cc-rules-text .cc-pre {
  max-height: 420px;
  overflow: auto;
}

/* Users → Roles */
.cc-roles {
  display: grid;
  gap: 8px;
}

.cc-role {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.cc-role i {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
}

.cc-role small {
  color: var(--text-muted);
  font-size: 12.5px;
}

@media (max-width: 700px) {
  .cc-pp-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-pp-add {
    grid-template-columns: 1fr 1fr;
  }

  .cc-pp-add .input {
    grid-column: 1 / -1;
  }

  .cc-pp-list {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cc-pp-row {
    row-gap: 4px;
  }

  .cc-pp-face {
    grid-row: span 2;
    width: 40px;
    height: 40px;
  }

  .cc-pp-btns {
    grid-column: 1 / -1;
  }
}

.cc-card .sv-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* unsaved changes: a bar at the foot of the screen */
.cc-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 240;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(23, 24, 28, 0.94);
  color: #fff;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  animation: wl-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.cc-bar span {
  margin-right: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.cc-bar .btn {
  border-radius: 999px;
}

html.app-ui .cc-bar {
  bottom: calc(84px + var(--tab-gap, 10px));
}

@media (max-width: 900px) {
  .cc-layout {
    grid-template-columns: 1fr;
  }

  .cc-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 6px;
    border-radius: 999px;
    scrollbar-width: none;
  }

  .cc-nav::-webkit-scrollbar {
    display: none;
  }

  .cc-nav a {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
  }

  .cc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .cc-bar span {
    display: none;
  }
}

/* Title page, phones: the action buttons share one row, so a label never spills out of its pill
   (it shortens with "…"), and "On Watchlist" says just "Watchlist": the filled bookmark and the
   red tint show it's on (screen readers still hear "On your Watchlist") */
.t-actions .btn {
  min-width: 0;
}

.t-btn-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .t-on-word {
    display: none;
  }

  .t-actions .btn i {
    flex: none;
  }
}

/* Share buttons on news stories and anime pages */
.nw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nw-share {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--text-muted);
  cursor: pointer;
}

.nw-share:hover {
  color: var(--text);
}

.nw-share.big {
  width: auto;
  height: auto;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
}

.nw-feature-text .nw-actions {
  justify-content: flex-start;
}

@media (max-width: 520px) {
  .ax-share-l {
    display: none;
  }
}

/* Share switched off (Admin Control Center → Pages & features) */
html.feat-off-share [data-feature="share"] {
  display: none !important;
}

/* an episode card: TVmaze and Share at its foot; a shared episode stands out when it opens */
.ep-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-share {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}

.ep-share:hover {
  color: var(--text);
}

/* an episode's own videos (TMDB): a play button on its still, its preview / clips as small pills */
.ep-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.2s, transform 0.2s;
}

.ep-play:hover {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.ep-vids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.ep-vid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ep-vid i {
  color: var(--accent-hover);
  font-size: 10px;
}

.ep-vid:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: var(--glass-bg-hover);
}

.ep-vid-more {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ep-vid-more:hover {
  color: var(--text);
}

.ep-card.target {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px rgba(229, 9, 20, 0.25);
}

/* ============================== Scrolling: native, contained, consistent ============================== */
/* sideways rows (posters, cast, seasons, books…): a swipe that reaches the end stops there,
   instead of turning into the browser's "back" gesture or moving the page */
.movie-row,
.t-cast,
.t-media-row,
.t-seasons,
.md-list {
  overscroll-behavior-x: contain;
}

/* pop-ups and bottom sheets that scroll (they have a height limit): scrolling to their end
   doesn't carry on into the page behind them */
.modal,
.sheet-panel,
.search-results {
  overscroll-behavior: contain;
}

/* touch screens: while a pop-up or a sheet is open, the page behind it stays put (a drag on
   the dimmed backdrop no longer scrolls it). Computers keep their scrollbar, so nothing shifts */
@media (hover: none) {
  html:has(.overlay.active),
  html:has(.app-sheet.open) {
    overflow: hidden;
  }
}

/* My … | Explore pages: the title has room for its search / filter buttons from the start, so
   nothing moves down when they're added (js/core/layout.js: foldTools) */
.ax-top .page-title {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.ax-top .page-head {
  margin: 0;
}

/* narrower screens: the title on its own row; under it the search / filter buttons, and the
   switch at the end of the same row (so it doesn't move when the buttons are added) */
@media (max-width: 760px) {
  .ax-top {
    gap: 12px 10px;
  }

  .ax-top .page-head {
    display: contents;
  }

  .ax-top .page-title {
    flex-basis: 100%;
  }

  .ax-top .page-tools,
  html.app-ui .ax-top .page-tools {
    margin-left: 0;
  }

  .ax-top .ax-switch {
    margin: 0 0 0 auto;
  }
}

/* (phones: the search and filter buttons beside the title, where there's room, and the switch
   across the whole row under them, its three tabs sharing it; no half-empty rows) */
@media (max-width: 480px) {
  .ax-top .page-title {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
  }

  .ax-top .page-tools {
    align-self: center;
  }

  .ax-top .ax-switch {
    flex: 1 1 100%;
    margin: 0;
  }

  .ax-top .ax-switch .top10-tab {
    flex: 1 1 auto; /* (as wide as its words, plus a share of what's left: "My TV shows" on one line) */
    justify-content: center;
    padding-inline: 10px;
    white-space: nowrap;
  }
}

/* ============================== Notifications: the bell (js/services/alerts.js) ============================== */
.notif {
  position: relative;
}

.notif-btn {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--bg, #0b0b0c);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.notif-badge[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  right: -60px;
  top: calc(100% + 16px);
  z-index: 120;
  display: grid;
  width: min(380px, calc(100vw - 20px));
  max-height: min(70vh, 560px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(24, 24, 28, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.notif.open .notif-panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 8px;
}

.notif-head h2 {
  margin: 0;
  font-size: 17px;
}

.notif-clear {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

.notif-list {
  margin: 0;
  padding: 0 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.notif-item {
  display: flex;
  align-items: center;
  border-radius: 14px;
  transition: background 0.2s;
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.notif-item > a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  color: inherit;
  text-decoration: none;
}

.notif-pic {
  position: relative;
  flex: none;
  width: 40px;
  height: 58px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.notif-pic img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.notif-pic i {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(24, 24, 28, 1);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
}

.notif-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notif-text strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-text small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  line-height: 1.35;
}

.notif-item.unread .notif-text strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

.notif-x {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.notif-x:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.notif-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 26px 22px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.notif-empty i {
  color: rgba(255, 255, 255, 0.35);
  font-size: 26px;
}

.notif-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  text-decoration: none;
}

.notif-foot:hover {
  color: #fff;
}

/* phones: the bell beside "What should I watch?" and your picture; its panel spans the screen */
@media (max-width: 900px) {
  html.app-ui .nav-tools .notif-btn {
    width: 36px;
    height: 36px;
  }

  html.app-ui .notif-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    width: auto;
  }
}

/* Maintenance strip (owner only), phones: one short line */
@media (max-width: 600px) {
  .site-maint.owner {
    white-space: nowrap;
    font-size: 12px;
  }

  .site-maint.owner .maint-long {
    display: none;
  }
}

/* ============================== Admin Control Center: the dashboard look (js/pages/admin.js) ==============================
   A sidebar of grouped sections, a top bar (where you are, find a setting, saved or not), and on
   Overview a dashboard: welcome card, stat tiles, charts drawn as SVG. The site's own colours. */
body[data-page="admin"] main.container {
  max-width: 1600px;
}

.cc-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
}

.cc-side {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 14px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  scrollbar-width: none;
}

.cc-side::-webkit-scrollbar {
  display: none;
}

.cc-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--glass-border);
}

.cc-brand-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 6px 18px rgba(185, 34, 34, 0.45);
  color: #fff;
  font-size: 17px;
}

.cc-brand strong {
  display: block;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}

.cc-brand small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.cc-side .cc-nav {
  position: static;
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* the sidebar: groups with a fading line, each section's icon in its own colour, the one you're on
   lit in its colour with a bar at its edge, badges as small pills; you and the site at the foot */
.cc-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 10px 4px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.cc-nav-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--glass-border), transparent);
}

.cc-side .cc-nav a {
  --c: #9aa4b5;
  position: relative;
  gap: 11px;
  padding: 7px 10px 7px 8px;
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.cc-nav-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 13px;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.cc-side .cc-nav a i {
  width: auto;
}

.cc-nav-l {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-side .cc-nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.cc-side .cc-nav a:hover .cc-nav-ic {
  background: color-mix(in srgb, var(--c) 20%, transparent);
}

.cc-side .cc-nav a.on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  color: #fff;
}

/* (the bar at its edge) */
.cc-side .cc-nav a.on::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
}

.cc-side .cc-nav a.on .cc-nav-ic {
  background: var(--c);
  box-shadow: 0 6px 16px -6px var(--c);
  color: #111;
}

.cc-badge {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cc-badge.red {
  background: #e5484d;
  color: #fff;
}

.cc-badge.gold {
  background: rgba(245, 197, 24, 0.18);
  box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.35);
  color: var(--gold);
}

.cc-nav a.on .cc-badge {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #fff;
}

/* you and the site, at the foot */
.cc-side-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 6px 2px;
  border-top: 1px solid var(--glass-border);
}

.cc-side-me {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.5);
}

.cc-side-foot > span {
  display: grid;
  flex: 1;
  min-width: 0;
}

.cc-side-foot strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-side-foot small {
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
}

.cc-side-foot small i {
  margin-right: 3px;
  font-size: 10px;
}

.cc-side-site {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}

.cc-side-site:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

:root[data-theme="light"] .cc-side .cc-nav a.on {
  color: var(--text);
}

/* the top bar */
.cc-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.cc-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.cc-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}

.cc-crumbs i {
  font-size: 10px;
  opacity: 0.6;
}

.cc-crumbs strong {
  color: var(--text);
  font-size: 16px;
}

.cc-find {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin-left: auto;
}

.cc-find > i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.cc-find input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.cc-find input:focus {
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
}

.cc-find-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.cc-find-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cc-find-list button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.cc-find-list button i {
  width: 18px;
  color: var(--accent-hover);
  text-align: center;
}

.cc-find-list strong {
  display: block;
  font-size: 14px;
}

.cc-find-list small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-find-list .muted {
  margin: 8px 10px;
}

.cc-top .cc-state {
  flex: none;
}

/* a setting found: it lights up for a moment */
.cc-flash {
  animation: cc-flash 1.6s ease-out;
}

@keyframes cc-flash {
  0%,
  30% {
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.18);
    box-shadow: 0 0 0 6px rgba(229, 9, 20, 0.18);
  }
}

/* every section's cards: the icon in a bubble */
.cc-card {
  border-radius: 22px;
}

.cc-card > .xr-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13px;
}

.cc-card > .xr-label i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(185, 34, 34, 0.16);
  color: #ff6b63;
  font-size: 14px;
}

.cc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---------- the dashboard ---------- */
.cc-dash {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

/* the boxes' sizes (Customize): one column, two, the whole row */
.cc-dash > [data-size="2"],
.cc-grid > [data-size="2"] {
  grid-column: span 2;
}

.cc-dash > [data-size="3"],
.cc-grid > [data-size="3"] {
  grid-column: 1 / -1;
}

.cc-box-hidden {
  display: none !important;
}

.cc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid rgba(229, 9, 20, 0.28);
  border-radius: 26px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(185, 34, 34, 0.55), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(245, 197, 24, 0.12), transparent 60%), var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.cc-hero-art {
  position: absolute;
  right: -30px;
  bottom: -50px;
  color: rgba(255, 255, 255, 0.05);
  font-size: 230px;
  transform: rotate(-14deg);
  pointer-events: none;
}

.cc-hero-text,
.cc-hero-switches {
  position: relative;
  z-index: 1;
}

.cc-hero-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.16);
  color: #4cd97b;
  font-size: 12.5px;
  font-weight: 700;
}

.cc-hero-state.warn {
  background: rgba(245, 197, 24, 0.16);
  color: var(--gold);
}

.cc-hero h2 {
  margin: 12px 0 6px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
}

.cc-hero p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.cc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
}

.cc-hero-stats span {
  display: grid;
}

.cc-hero-stats b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cc-hero-stats small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
}

.cc-hero-switches {
  display: grid;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* stat tiles */
.cc-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.cc-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 14px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
  transition: transform 0.2s, border-color 0.2s;
}

.cc-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.cc-tile-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 19px;
}

.cc-tile b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cc-tile small {
  color: var(--text-muted);
  font-size: 13px;
}

.cc-tile-sub {
  grid-column: 1 / -1;
  overflow: hidden;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-tile.red .cc-tile-icon,
.cc-action.red i {
  background: rgba(229, 72, 77, 0.16);
  color: #ff6b6f;
}

.cc-tile.gold .cc-tile-icon,
.cc-action.gold i {
  background: rgba(245, 197, 24, 0.15);
  color: var(--gold);
}

.cc-tile.green .cc-tile-icon,
.cc-action.green i {
  background: rgba(52, 199, 89, 0.15);
  color: #4cd97b;
}

.cc-tile.blue .cc-tile-icon,
.cc-action.blue i {
  background: rgba(91, 140, 255, 0.16);
  color: #7ea4ff;
}

/* panels */
.cc-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
}

.cc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-panel-head h3 {
  margin: 0;
  font-size: 17px;
}

.cc-panel-head small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.cc-panel-big {
  color: var(--text-muted);
  font-size: 13px;
  text-align: right;
}

.cc-panel-big b {
  display: block;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cc-panel-big em {
  font-style: normal;
  font-weight: 700;
}

.cc-panel-big em.up {
  color: #4cd97b;
}

.cc-panel-big em.down {
  color: #ff6b6f;
}

.cc-chart-wait {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--text-muted);
  font-size: 13px;
}

/* bars */
.cc-bars {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 210px;
}

.cc-bars.small {
  height: 170px;
  gap: 7px;
}

.cc-bar-col {
  display: grid;
  flex: 1;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.cc-bar-col i {
  align-self: end;
  width: 100%;
  max-width: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  transition: height 0.6s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s;
}

.cc-bar-col:hover i {
  background: rgba(255, 255, 255, 0.2);
}

.cc-bar-col.top i {
  background: linear-gradient(180deg, #ff5a52, var(--accent));
  box-shadow: 0 8px 22px rgba(185, 34, 34, 0.45);
}

.cc-bar-v {
  min-height: 16px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.cc-bar-col small {
  color: var(--text-muted);
  font-size: 11.5px;
}

/* the half-round gauge and the services */
.cc-health-wrap {
  display: grid;
  gap: 14px;
}

.cc-gauge {
  position: relative;
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
}

.cc-gauge svg {
  display: block;
  width: 100%;
}

.cc-gauge path {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.cc-gauge-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.cc-gauge.green .cc-gauge-on {
  stroke: #34c759;
}

.cc-gauge.gold .cc-gauge-on {
  stroke: var(--gold);
}

.cc-gauge.red .cc-gauge-on {
  stroke: #e5484d;
}

.cc-gauge > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  justify-items: center;
}

.cc-gauge b {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.cc-gauge small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-svc {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-svc li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-top: 1px solid var(--glass-border);
  font-size: 13.5px;
}

.cc-svc li i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.cc-svc li.ok i {
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.7);
}

.cc-svc li.down i {
  background: #e5484d;
  box-shadow: 0 0 8px rgba(229, 72, 77, 0.7);
}

.cc-svc li.off {
  opacity: 0.5;
}

.cc-svc li b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.cc-svc li em {
  color: #ff6b6f;
  font-size: 12px;
  font-style: normal;
}

/* the ring */
.cc-donut-wrap {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.cc-donut {
  position: relative;
}

.cc-donut svg {
  display: block;
  width: 100%;
  transform: rotate(-90deg);
}

.cc-donut circle {
  fill: none;
  stroke-width: 16;
}

.cc-donut-bg {
  stroke: rgba(255, 255, 255, 0.07);
}

.cc-donut-part {
  stroke-linecap: round;
}

.cc-donut-part.red,
.cc-legend li.red i {
  stroke: #e5484d;
  background: #e5484d;
}

.cc-donut-part.gold,
.cc-legend li.gold i {
  stroke: var(--gold);
  background: var(--gold);
}

.cc-donut-part.blue,
.cc-legend li.blue i {
  stroke: #5b8cff;
  background: #5b8cff;
}

.cc-donut > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.cc-donut b {
  font-size: 24px;
  font-weight: 800;
}

.cc-donut small,
.cc-legend small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-legend {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-legend li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.cc-legend li i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* members */
.cc-people {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-people li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 70px auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.cc-people img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.cc-people-name {
  display: grid;
  min-width: 0;
}

.cc-people-name strong,
.cc-people-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-people-name strong {
  font-size: 14px;
}

.cc-people-name small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-people-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.cc-people-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff5a52);
}

.cc-people li > b {
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* quick actions */
.cc-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cc-action {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.cc-action:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.cc-action i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

/* Tools */
.cc-checks {
  display: grid;
  gap: 2px;
}

.cc-checks:empty {
  display: none;
}

.cc-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-top: 1px solid var(--glass-border);
  font-size: 14px;
}

.cc-check i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.cc-check.wait i {
  animation: cc-blink 0.9s infinite alternate;
}

@keyframes cc-blink {
  to {
    opacity: 0.2;
  }
}

.cc-check.ok i {
  background: #34c759;
}

.cc-check.slow i {
  background: var(--gold);
}

.cc-check.down i {
  background: #e5484d;
}

.cc-check b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.cc-check.down b {
  color: #ff6b6f;
  font-weight: 600;
}

.cc-storage {
  display: grid;
  gap: 8px;
}

.cc-store-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.cc-history {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-history li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 4px;
}

.cc-history li + li::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 8px;
  height: 20px;
  border-left: 2px solid var(--glass-border);
}

.cc-history-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent-hover);
  border-radius: 50%;
}

.cc-history-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.cc-history-text strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-history-text small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-history .btn {
  flex: none;
  padding: 6px 12px;
  font-size: 12.5px;
}

/* the announcement */
.cc-announce-now {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(229, 9, 20, 0.3);
  border-radius: 16px;
  background: rgba(185, 34, 34, 0.1);
}

.cc-announce-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}

.cc-announce-now > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
}

.cc-announce-now small {
  color: var(--text-muted);
}

.cc-announce-now em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}

/* light theme */
:root[data-theme="light"] .cc-hero {
  border-color: rgba(185, 34, 34, 0.25);
  background: radial-gradient(120% 140% at 0% 0%, rgba(185, 34, 34, 0.9), rgba(120, 16, 12, 0.95) 60%), #7a120d;
  color: #fff;
}

:root[data-theme="light"] .cc-hero-switches .sv-name small {
  color: rgba(255, 255, 255, 0.75);
}

:root[data-theme="light"] .cc-hero-switches .sv-name strong {
  color: #fff;
}

:root[data-theme="light"] .cc-bar-col i,
:root[data-theme="light"] .cc-gauge-bg,
:root[data-theme="light"] .cc-donut-bg,
:root[data-theme="light"] .cc-people-bar,
:root[data-theme="light"] .cc-find input,
:root[data-theme="light"] .cc-action {
  background-color: rgba(0, 0, 0, 0.05);
  stroke: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .cc-bar-col.top i {
  background: linear-gradient(180deg, #ff5a52, var(--accent));
}

/* smaller screens */
@media (max-width: 1250px) {
  .cc-dash {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cc-layout {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }

  .cc-side {
    position: static;
    max-height: none;
    padding: 8px;
    border-radius: 22px;
  }

  .cc-brand {
    display: none;
  }

  .cc-side .cc-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cc-nav-group {
    display: none;
  }

  .cc-side .cc-nav a {
    flex: none;
    padding: 5px 13px 5px 5px;
    border-radius: 999px;
    font-size: 13.5px;
  }

  .cc-side .cc-nav-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
  }

  .cc-side .cc-nav a.on::before,
  .cc-side-foot {
    display: none;
  }

  .cc-top {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .cc-find {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .cc-hero {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
}

@media (max-width: 640px) {
  .cc-dash {
    grid-template-columns: 1fr;
  }

  .cc-tiles {
    gap: 10px;
  }

  .cc-tile {
    padding: 14px;
  }

  .cc-tile-icon {
    width: 40px;
    height: 40px;
  }

  .cc-tile b {
    font-size: 21px;
  }

  .cc-bars {
    gap: 5px;
    height: 180px;
  }

  .cc-bar-v {
    font-size: 10px;
  }

  .cc-donut-wrap {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .cc-two {
    grid-template-columns: 1fr;
  }
}

/* ---------- Customize: move, size and hide the boxes ---------- */
.cc-customize {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
}

.cc-customize.on {
  border-color: var(--accent);
  background: rgba(185, 34, 34, 0.18);
}

.cc-edit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px 12px 18px;
  border: 1px dashed rgba(229, 9, 20, 0.55);
  border-radius: 18px;
  background: rgba(185, 34, 34, 0.1);
  font-size: 14px;
}

.cc-edit-bar > i {
  color: #ff6b63;
}

.cc-edit-bar > span {
  flex: 1;
  min-width: 200px;
  color: var(--text-muted);
}

.cc-edit-bar .btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
}

.cc-editing > [data-box] {
  position: relative;
  outline: 2px dashed rgba(255, 255, 255, 0.16);
  outline-offset: 3px;
  touch-action: pan-y;
}

.cc-editing > [data-box].cc-box-hidden {
  display: grid !important;
  opacity: 0.38;
}

.cc-editing > [data-box].cc-box-hidden.cc-tiles {
  display: grid !important;
}

.cc-veil {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.12);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* (the handle and the buttons sit on the box's top edge, clear of its title) */
.cc-veil > * {
  margin-top: -17px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.cc-veil-tools {
  box-shadow: none !important;
}

.cc-editing {
  padding-top: 14px;
  row-gap: 32px !important;
}

.cc-veil:hover {
  background: rgba(185, 34, 34, 0.08);
}

.cc-grip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cc-veil-tools {
  display: flex;
  gap: 6px;
}

.cc-sizes {
  display: flex;
  padding: 3px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cc-sizes button,
.cc-eye {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cc-sizes button.on {
  background: var(--accent);
  color: #fff;
}

.cc-eye {
  height: 34px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* (the welcome card clips its film-reel picture; in Customize its controls must show) */
.cc-editing > .cc-hero {
  overflow: visible;
}

.cc-editing > .cc-hero .cc-hero-art {
  display: none;
}

/* the one being dragged: lifted */
.cc-editing > .cc-dragging {
  z-index: 10;
  outline: 2px solid var(--accent-hover);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: scale(1.015);
  transition: none !important;
}

.cc-editing > .cc-dragging .cc-veil {
  background: rgba(185, 34, 34, 0.14);
  cursor: grabbing;
}

/* (one column on narrow screens: every box takes the row) */
@media (max-width: 900px) {
  .cc-grid > [data-size] {
    grid-column: 1 / -1;
  }

  .cc-customize span {
    display: none;
  }
}

@media (max-width: 640px) {
  .cc-dash > [data-size] {
    grid-column: 1 / -1;
  }
}

/* Admin: masonry (js/pages/admin.js: pack): 1px rows, each box spans its own height + the gap */
.cc-grid.cc-packed {
  grid-auto-rows: 1px;
  row-gap: 0 !important;
  align-items: start;
}

.cc-grid.cc-packed > [data-box] {
  margin-bottom: 16px;
}

.cc-grid.cc-packed.cc-editing > [data-box] {
  margin-bottom: 34px;
}

/* (narrow columns: fields shrink with their card, the date pickers too) */
.cc-grid > [data-box],
.cc-two > *,
.cc-field {
  min-width: 0;
}

.cc-field .input,
.cc-two .input {
  width: 100%;
  min-width: 0;
}

.cc-card .sv-row,
.cc-card .sv-name {
  min-width: 0;
}

.cc-card .sv-name small {
  overflow-wrap: anywhere;
}

/* ============================== Admin → Title page: the order of its rows ============================== */
/* (a tab with one big card: the whole width) */
.cc-grid-one {
  grid-template-columns: minmax(0, 1fr) !important;
}

.tp-page {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
}

.tp-hero {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.9), rgba(10, 10, 12, 0.4)), radial-gradient(120% 140% at 100% 0%, rgba(185, 34, 34, 0.5), transparent 60%), var(--surface-2);
}

.tp-poster {
  flex: none;
  width: 54px;
  height: 80px;
  border-radius: 8px;
  background: linear-gradient(160deg, #3a3b42, #1d1e22);
}

.tp-hero-text {
  display: grid;
  flex: 1;
  align-content: center;
  gap: 7px;
}

.tp-hero-text b {
  font-size: 17px;
}

.tp-hero-text > i {
  display: block;
  width: 60%;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.tp-hero-text > i + i {
  width: 40%;
}

.tp-hero-text > span {
  display: flex;
  gap: 6px;
}

.tp-hero-text em {
  width: 54px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.tp-hero-text em:first-child {
  background: var(--accent);
}

.tp-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tp;
}

.tp-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
  counter-increment: tp;
}

.tp-row:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.tp-row.dragging {
  z-index: 3;
  border-color: var(--accent-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: scale(1.01);
}

.tp-row.off {
  opacity: 0.45;
}

.tp-row.off .tp-text strong {
  text-decoration: line-through;
}

.tp-grip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 38px;
  border-radius: 9px;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}

.tp-grip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.tp-row.dragging .tp-grip {
  cursor: grabbing;
}

.tp-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(185, 34, 34, 0.16);
  color: #ff6b63;
}

.tp-text {
  display: grid;
  min-width: 0;
}

.tp-text strong {
  font-size: 14.5px;
}

.tp-text strong::before {
  content: counter(tp) ". ";
  color: var(--text-muted);
  font-weight: 600;
}

.tp-text small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a hint of what the row looks like */
.tp-look {
  display: flex;
  gap: 4px;
}

.tp-look i {
  width: 16px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.tp-look-cast i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.tp-look-xray i,
.tp-look-yours i {
  width: 24px;
  height: 18px;
  border-radius: 5px;
}

.tp-look-books i,
.tp-look-soundtrack i {
  width: 60px;
  height: 22px;
  border-radius: 6px;
}

.tp-look-reviews i,
.tp-look-episodes i {
  width: 22px;
  height: 12px;
}

.tp-btns {
  display: flex;
  gap: 4px;
}

.tp-btns button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
}

.tp-btns button:hover {
  border-color: rgba(229, 9, 20, 0.5);
  color: var(--text);
}

@media (max-width: 640px) {
  .tp-look {
    display: none;
  }

  .tp-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .tp-btns .tp-move {
    display: none;
  }
}

/* ============================== X-Ray, shows: First aired and When it airs, square (js/pages/title.js) ==============================
   One cell each, like every X-Ray card; one job each. A faint picture behind, the Box Office's
   white-to-gold number. */
.xr-sq {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  color: var(--text);
  font: inherit;
  text-align: left;
  isolation: isolate;
}

button.xr-sq {
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

button.xr-sq:hover {
  border-color: rgba(229, 9, 20, 0.45);
  transform: translateY(-2px);
}

.xr-show-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.8s ease;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 80%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 80%);
}

.xr-sq:hover .xr-show-bg {
  opacity: 0.18;
  transform: scale(1.1);
}

.xr-sq-main {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: auto 0;
  padding: 4px 0;
  text-align: center;
}

.xr-sq-kicker {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xr-sq-date {
  display: grid;
  justify-items: center;
  line-height: 1.05;
}

.xr-sq-date b {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 35%, #f5c518 170%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xr-sq-date b.xr-sq-word {
  font-size: 22px;
}

.xr-sq-date span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  font-weight: 800;
}

.xr-sq-main small {
  color: var(--text-muted);
  font-size: 13px;
}

.xr-sq-seasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.xr-sq-season {
  min-width: 32px;
  padding: 3px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.xr-sq-season:hover {
  border-color: rgba(229, 9, 20, 0.5);
  color: var(--text);
}

.xr-sq-season.now {
  border-color: rgba(245, 197, 24, 0.7);
  background: rgba(245, 197, 24, 0.14);
  color: var(--gold);
}

.xr-sq-season.more {
  border-style: dashed;
}

.xr-sq-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.xr-sq-week span {
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.xr-sq-week span.on {
  background: var(--accent);
  color: #fff;
}

.xr-sq-week span.today {
  border-color: rgba(255, 255, 255, 0.5);
}

.xr-sq-time {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.xr-sq-time i {
  margin-right: 4px;
  color: var(--accent-hover);
}

.xr-sq-time em {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 500;
}

:root[data-theme="light"] .xr-sq-date b {
  background: linear-gradient(180deg, #1b1b1f 45%, #b8860b 170%);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-theme="light"] .xr-sq-date span {
  color: var(--text);
}

/* title page: Your progress folds like Your notes (closed at first: the header says where you are) */
.tp-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tp-toggle .xr-label {
  flex-shrink: 0;
}

.tp-sum {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tp-sum b {
  color: var(--text);
}

.tp-sum .fa-trophy {
  color: var(--gold);
}

.tp-card.folded .tp-sum {
  opacity: 1;
}

.tp-toggle .tp-pct {
  flex-shrink: 0;
  margin-left: auto;
}

.tp-toggle:hover .tn-chev {
  background: var(--glass-bg-hover);
  color: var(--text);
}

.tp-card.folded .tn-chev {
  transform: rotate(-90deg);
}

.tp-card.folded .tn-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.tp-card.folded {
  align-self: start;
}

.tp-card .tn-body > div {
  display: grid;
  gap: 12px;
}

/* the book's writer: their person page */
.bk-author {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.bk-author:hover {
  border-bottom-color: currentColor;
  color: #fff;
}

/* ============================== Person page: books on a bookshelf (js/pages/person.js) ==============================
   Spines out, standing on a wooden plank; a book pointed at rises and turns its cover to you. */
.bk-shelf {
  position: relative;
  margin: 6px 0 22px;
  padding: 0 14px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.35)), #141416;
  box-shadow: inset 0 18px 30px rgba(0, 0, 0, 0.55), inset 0 -2px 0 rgba(255, 255, 255, 0.03);
}

.bk-shelf-books {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 300px;
  padding: 50px 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.bk-shelf-books::-webkit-scrollbar {
  display: none;
}

/* a book, spine out */
.bk-book {
  position: relative;
  flex: none;
  width: var(--bw, 60px);
  height: var(--bh, 220px);
  overflow: hidden;
  border-radius: 3px 5px 5px 3px;
  background: #2a2b31;
  box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.45), 2px 0 4px rgba(0, 0, 0, 0.35);
  transform-origin: bottom center;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1), transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.45s ease, border-radius 0.3s ease;
}

.bk-book img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* the spine: the cover's slice, darkened at the edges, the title down it */
.bk-spine {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 22%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.25) 62%, rgba(0, 0, 0, 0.7) 100%),
    rgba(0, 0, 0, 0.32);
  transition: opacity 0.3s ease;
}

.bk-spine span {
  max-height: calc(100% - 20px);
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* lifted: it rises off the shelf and shows its cover, as wide as the cover's own shape (--cw, set
   by js/pages/person.js once it loads), so none of it is cut off */
.bk-book.up,
.bk-book:focus-visible {
  z-index: 2;
  width: var(--cw, 160px);
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-26px) rotate(-1.5deg);
  outline: none;
}

.bk-book.up .bk-spine,
.bk-book:focus-visible .bk-spine {
  opacity: 0;
}

/* the plank */
.bk-plank {
  position: relative;
  height: 16px;
  margin: 0 -14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7a5233 0%, #5d3c23 45%, #3e2715 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bk-plank::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 8px;
  background: linear-gradient(180deg, #2b1a0d, transparent);
  opacity: 0.8;
}

/* the lifted book's name, under the shelf */
.bk-caption {
  min-height: 22px;
  margin: 14px 4px 0;
  padding-bottom: 12px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.bk-caption strong {
  color: var(--text);
}

:root[data-theme="light"] .bk-shelf {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.1)), #e9e6e1;
  box-shadow: inset 0 18px 30px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .bk-book {
    transition: none;
  }
}

/* a bookend after the last book */
.bk-end {
  flex: none;
  width: 14px;
  height: 120px;
  margin-left: 6px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #3a3b40, #26272c);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .bk-book {
    width: var(--bw, 44px);
  }

  .bk-book.up {
    width: var(--cw, 136px);
  }
}

/* person page: the rows under the top part, in the owner's order (Admin → Person page) */
.p-rows {
  display: flex;
  flex-direction: column;
}

.p-rows > .p-row-off {
  display: none !important;
}

.p-known-row .row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.p-known-row .row-head .t-link {
  white-space: nowrap;
}

.tp-poster.tp-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* each shelf as long as its books need (never the whole width for three books); "By" and "About"
   side by side when they fit, a long one on its own line, its books scrolling */
.bk-shelves {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 28px;
}

.bk-shelf-wrap {
  flex: 0 1 auto;
  min-width: min(260px, 100%);
  max-width: 100%;
}

/* ============================== Seasonal look (js/components/season.js) ==============================
   The whole site in the season's colours (Admin → Themes → Seasonal look): a tint and a line along
   the navbar with something hanging from it, a faint light in the page's corners and a few things
   drifting behind the content. Its own look for a page, quieter than a list's atmosphere. Only
   html.season-play moves */
html[data-season="halloween"] {
  --ss-a: rgba(255, 112, 20, 0.225);
  --ss-b: rgba(124, 44, 196, 0.255);
  --ss-c: rgba(178, 6, 22, 0.18);
  --ss-dot: #ffa04a;
  --ss-dot2: #e0101e;
  --ss-dot3: #b98cff;
  --ss-line: linear-gradient(90deg, transparent, #ff7a1a 18%, #a03cff 50%, #c8101e 82%, transparent);
}

html[data-season="christmas"] {
  --ss-a: rgba(206, 26, 38, 0.21);
  --ss-b: rgba(16, 122, 66, 0.24);
  --ss-c: rgba(255, 184, 90, 0.12);
  --ss-dot: #ffffff;
  --ss-dot2: #ffe9b0;
  --ss-dot3: #ffffff;
  --ss-line: linear-gradient(90deg, transparent, #d6202a 20%, #ffc96b 50%, #14864a 80%, transparent);
}

html[data-season="easter"] {
  --ss-a: rgba(255, 160, 206, 0.21);
  --ss-b: rgba(140, 220, 130, 0.18);
  --ss-c: rgba(255, 236, 140, 0.135);
  --ss-dot: #ffc3dc;
  --ss-dot2: #fff2a8;
  --ss-dot3: #ffffff;
  --ss-line: linear-gradient(90deg, transparent, #ff9cc8 20%, #fff2a8 50%, #8cdc82 80%, transparent);
}

html[data-season="winter"] {
  --ss-a: rgba(110, 170, 255, 0.225);
  --ss-b: rgba(200, 230, 255, 0.12);
  --ss-c: rgba(120, 255, 200, 0.09);
  --ss-dot: #eaf4ff;
  --ss-dot2: #cfe6ff;
  --ss-dot3: #ffffff;
  --ss-line: linear-gradient(90deg, transparent, #6eaaff 20%, #ffffff 50%, #78ffc8 80%, transparent);
}

html[data-season="autumn"] {
  --ss-a: rgba(226, 112, 28, 0.225);
  --ss-b: rgba(150, 52, 18, 0.225);
  --ss-c: rgba(240, 190, 80, 0.12);
  --ss-dot: #e8903a;
  --ss-dot2: #c0441e;
  --ss-dot3: #f2c14e;
  --ss-line: linear-gradient(90deg, transparent, #e8903a 20%, #c0441e 50%, #f2c14e 80%, transparent);
}

/* the light theme: the snow and the lights darker, so they show on white */
:root[data-theme="light"][data-season="christmas"],
:root[data-theme="light"][data-season="winter"] {
  --ss-dot: #9db7d6;
  --ss-dot2: #c9d8ea;
  --ss-dot3: #9db7d6;
}

/* ---- behind the page ---- */
.season-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(65% 55% at 0% 0%, var(--ss-a), transparent 72%), radial-gradient(60% 55% at 100% 100%, var(--ss-b), transparent 72%), radial-gradient(45% 40% at 100% 0%, var(--ss-c), transparent 72%), radial-gradient(40% 35% at 0% 100%, var(--ss-c), transparent 72%);
}

.ss-parts i {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: calc(5px * var(--s));
  height: calc(5px * var(--s));
  border-radius: 50%;
  background: var(--ss-dot);
  opacity: 0;
  will-change: transform, opacity;
}

.season-play .ss-parts i {
  animation:
    ss-fall var(--t) linear var(--d) infinite,
    ss-sway var(--st) ease-in-out var(--d) infinite alternate;
}

/* snow: soft flakes */
.ss-parts[data-k="snow"] i {
  --o: calc(0.25 + var(--s) * 0.35);
  background: radial-gradient(circle, var(--ss-dot) 0 32%, transparent 72%);
  width: calc(7px * var(--s));
  height: calc(7px * var(--s));
}

/* embers: rising from the bottom, glowing, some blood red */
.ss-parts[data-k="ember"] i {
  --o: 0.75;
  top: auto;
  bottom: -10px;
  width: calc(3.5px * var(--s));
  height: calc(3.5px * var(--s));
  box-shadow: 0 0 9px 2px var(--ss-dot);
}

.ss-parts[data-k="ember"] i:nth-child(3n) {
  background: var(--ss-dot2);
  box-shadow: 0 0 9px 2px var(--ss-dot2);
}

.season-play .ss-parts[data-k="ember"] i {
  animation-name: ss-rise, ss-sway;
}

/* petals and leaves: turning as they drift down */
.ss-parts[data-k="petal"] i,
.ss-parts[data-k="leaf"] i {
  --o: 0.75;
  width: calc(10px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 70% 0 70% 0;
}

.ss-parts[data-k="leaf"] i {
  width: calc(12px * var(--s));
  height: calc(8px * var(--s));
  border-radius: 0 80% 0 80%;
}

.ss-parts[data-k="petal"] i:nth-child(3n),
.ss-parts[data-k="leaf"] i:nth-child(3n) {
  background: var(--ss-dot2);
}

.ss-parts[data-k="petal"] i:nth-child(4n),
.ss-parts[data-k="leaf"] i:nth-child(4n + 1) {
  background: var(--ss-dot3);
}

.season-play .ss-parts[data-k="petal"] i,
.season-play .ss-parts[data-k="leaf"] i {
  animation-name: ss-turn, ss-sway;
}

/* Halloween: wisps of mist drifting across the page from one side to the other (like the mist on
   a Halloween list), at different heights and speeds, and now and then a bat crossing */
.ss-fog {
  position: absolute;
  top: 8%;
  left: 0;
  width: 60vw;
  height: 42vh;
  border-radius: 50%;
  background:
    radial-gradient(42% 38% at 35% 55%, rgba(228, 222, 242, 0.32), rgba(228, 222, 242, 0.12) 50%, transparent 75%),
    radial-gradient(38% 30% at 68% 42%, rgba(214, 206, 236, 0.26), rgba(214, 206, 236, 0.08) 55%, transparent 78%);
  filter: blur(14px);
  opacity: 0;
  transform: translate3d(-110%, 0, 0);
}

.ss-fog.two {
  top: 40%;
  width: 48vw;
  height: 34vh;
}

.ss-fog.three {
  top: 64%;
  width: 75vw;
  height: 46vh;
}

.season-play .ss-fog {
  animation: ss-mist 40s linear infinite;
}

.season-play .ss-fog.two {
  animation-duration: 52s;
  animation-delay: -20s;
}

.season-play .ss-fog.three {
  animation-duration: 64s;
  animation-delay: -42s;
}

.ss-bat {
  position: absolute;
  top: 18%;
  left: -70px;
  width: 46px;
  height: 21px;
  opacity: 0;
}

.ss-bat.two {
  top: 36%;
  width: 30px;
  height: 14px;
}

.ss-bat i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'%3E%3Cpath d='M20 6 C17 2 12 1 8 3 C6 1 3 2 0 5 C4 5 6 7 6 9 C9 7 12 8 14 11 C16 9 18 10 20 14 C22 10 24 9 26 11 C28 8 31 7 34 9 C34 7 36 5 40 5 C37 2 34 1 32 3 C28 1 23 2 20 6Z' fill='%23080510'/%3E%3C/svg%3E") center / contain no-repeat;
}

.season-play .ss-bat {
  animation: ss-bat 26s linear infinite;
}

.season-play .ss-bat.two {
  animation-duration: 37s;
  animation-delay: -14s;
}

.season-play .ss-bat i {
  animation: ss-flap 0.2s ease-in-out infinite alternate;
}

/* Winter: frost creeping in at the corners */
.ss-frost {
  position: absolute;
  inset: 0;
  background: radial-gradient(30% 32% at 0 0, rgba(220, 240, 255, 0.16), transparent 70%), radial-gradient(28% 30% at 100% 0, rgba(220, 240, 255, 0.12), transparent 70%), radial-gradient(26% 28% at 0 100%, rgba(220, 240, 255, 0.12), transparent 70%), radial-gradient(28% 30% at 100% 100%, rgba(220, 240, 255, 0.16), transparent 70%);
}

/* ---- the navbar: tinted, a line of the season's colours along its edge, something hanging ---- */
html[data-season] .site-nav::before {
  background: linear-gradient(90deg, var(--ss-a), transparent 45%, var(--ss-b)), rgba(14, 14, 16, 0.72);
}

:root[data-theme="light"][data-season] .site-nav::before {
  background: linear-gradient(90deg, var(--ss-a), transparent 45%, var(--ss-b)), rgba(14, 14, 16, 0.95);
}

.season-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 0;
  height: 0;
  pointer-events: none;
}

.season-nav::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ss-line);
  opacity: 0.85;
}

/* Christmas: a string of lights, twinkling in turns */
.ss-lights {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cpath d='M0 4 Q30 22 60 6 Q90 22 120 4' fill='none' stroke='%231c241e' stroke-width='1.5'/%3E%3Crect x='13.7' y='9.9' width='2.6' height='2.8' rx='0.6' fill='%234b524c'/%3E%3Cellipse cx='15' cy='15.3' rx='2.6' ry='3.6' fill='%23ff4a4a'/%3E%3Crect x='43.7' y='10.9' width='2.6' height='2.8' rx='0.6' fill='%234b524c'/%3E%3Cellipse cx='45' cy='16.3' rx='2.6' ry='3.6' fill='%23ffd166'/%3E%3Crect x='73.7' y='10.9' width='2.6' height='2.8' rx='0.6' fill='%234b524c'/%3E%3Cellipse cx='75' cy='16.3' rx='2.6' ry='3.6' fill='%2348e08f'/%3E%3Crect x='103.7' y='9.9' width='2.6' height='2.8' rx='0.6' fill='%234b524c'/%3E%3Cellipse cx='105' cy='15.3' rx='2.6' ry='3.6' fill='%2366b8ff'/%3E%3C/svg%3E") 0 0 / 120px 34px repeat-x;
}

.ss-lights::before,
.ss-lights::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ss-lights::before {
  background: radial-gradient(circle at 15px 15.3px, rgba(255, 74, 74, 0.7), transparent 11px) 0 0 / 120px 34px repeat-x, radial-gradient(circle at 75px 16.3px, rgba(72, 224, 143, 0.6), transparent 11px) 0 0 / 120px 34px repeat-x;
}

.ss-lights::after {
  background: radial-gradient(circle at 45px 16.3px, rgba(255, 209, 102, 0.75), transparent 11px) 0 0 / 120px 34px repeat-x, radial-gradient(circle at 105px 15.3px, rgba(102, 184, 255, 0.65), transparent 11px) 0 0 / 120px 34px repeat-x;
}

.season-play .ss-lights::before {
  animation: ss-blink 2.6s ease-in-out infinite alternate;
}

.season-play .ss-lights::after {
  animation: ss-blink 2.6s ease-in-out -1.3s infinite alternate;
}

/* Winter: icicles */
.ss-icicles {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23bfe0ff' stop-opacity='0.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H64 V3 L61 3 L58.5 15 L56 3 L49 3 L47 9 L45 3 L37 3 L34 23 L31 3 L23 3 L21.5 10 L20 3 L13 3 L10.5 18 L8 3 L0 3 Z' fill='url(%23i)'/%3E%3Cpath d='M0 0 H64 V2.6 C48 3.6 16 3.4 0 2.6 Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 64px 26px repeat-x;
  filter: drop-shadow(0 2px 3px rgba(150, 200, 255, 0.25));
}

/* Easter: a vine of blossom */
.ss-vine {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='20'%3E%3Cpath d='M0 5 C16 2 32 9 48 5 S80 1 96 5' fill='none' stroke='%234f8a4a' stroke-width='1.4'/%3E%3Cpath d='M22 5.5 q4 -5 9 -2 q-5 3 -9 2Z M58 4 q4 4 9 2 q-4 -4 -9 -2Z M84 4.6 q3 -4 7 -2 q-4 3 -7 2Z' fill='%236fbf6a'/%3E%3Ccircle cx='10' cy='5.6' r='2.2' fill='%23ffc3dc'/%3E%3Ccircle cx='12.3' cy='7.3' r='2.2' fill='%23ffc3dc'/%3E%3Ccircle cx='11.4' cy='10' r='2.2' fill='%23ffc3dc'/%3E%3Ccircle cx='8.6' cy='10' r='2.2' fill='%23ffc3dc'/%3E%3Ccircle cx='7.7' cy='7.3' r='2.2' fill='%23ffc3dc'/%3E%3Ccircle cx='10' cy='8' r='1.2' fill='%23ffd166'/%3E%3Ccircle cx='40' cy='7.1' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='42.3' cy='8.8' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='41.4' cy='11.5' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='38.6' cy='11.5' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='37.7' cy='8.8' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='40' cy='9.5' r='1.2' fill='%23ffd166'/%3E%3Ccircle cx='72' cy='4.1' r='2.2' fill='%23ffb0cf'/%3E%3Ccircle cx='74.3' cy='5.8' r='2.2' fill='%23ffb0cf'/%3E%3Ccircle cx='73.4' cy='8.5' r='2.2' fill='%23ffb0cf'/%3E%3Ccircle cx='70.6' cy='8.5' r='2.2' fill='%23ffb0cf'/%3E%3Ccircle cx='69.7' cy='5.8' r='2.2' fill='%23ffb0cf'/%3E%3Ccircle cx='72' cy='6.5' r='1.2' fill='%23ffd166'/%3E%3Ccircle cx='50' cy='12.5' r='1.8' fill='%23ffc3dc'/%3E%3C/svg%3E") 0 0 / 96px 20px repeat-x;
}

/* Autumn: a garland of leaves */
.ss-leafline {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24'%3E%3Cpath d='M0 5 C20 3 40 8 60 5 S80 3 90 5' fill='none' stroke='%235a3a24' stroke-width='1.6'/%3E%3Cpath transform='translate(12 4.4) rotate(14)' d='M0 0 C3.4 3 4.4 7.5 0 13 C-4.4 7.5 -3.4 3 0 0Z' fill='%23e8903a'/%3E%3Cpath transform='translate(12 4.4) rotate(14)' d='M0 1 L0 11' stroke='%23000' stroke-opacity='0.25' stroke-width='0.6'/%3E%3Cpath transform='translate(33 6) rotate(-10)' d='M0 0 C3.4 3 4.4 7.5 0 13 C-4.4 7.5 -3.4 3 0 0Z' fill='%23c0441e'/%3E%3Cpath transform='translate(33 6) rotate(-10)' d='M0 1 L0 11' stroke='%23000' stroke-opacity='0.25' stroke-width='0.6'/%3E%3Cpath transform='translate(55 5.4) rotate(18)' d='M0 0 C3.4 3 4.4 7.5 0 13 C-4.4 7.5 -3.4 3 0 0Z' fill='%23f2c14e'/%3E%3Cpath transform='translate(55 5.4) rotate(18)' d='M0 1 L0 11' stroke='%23000' stroke-opacity='0.25' stroke-width='0.6'/%3E%3Cpath transform='translate(76 4) rotate(-16)' d='M0 0 C3.4 3 4.4 7.5 0 13 C-4.4 7.5 -3.4 3 0 0Z' fill='%23d9692a'/%3E%3Cpath transform='translate(76 4) rotate(-16)' d='M0 1 L0 11' stroke='%23000' stroke-opacity='0.25' stroke-width='0.6'/%3E%3C/svg%3E") 0 0 / 90px 24px repeat-x;
}

/* Halloween: a spider letting itself down on its thread, and back up */
.ss-spider {
  position: absolute;
  top: 0;
  right: 17%;
  width: 24px;
}

.ss-spider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11.5px;
  width: 1px;
  height: 110px;
  background: linear-gradient(rgba(225, 225, 235, 0.55), rgba(225, 225, 235, 0.25));
  transform: scaleY(0.4);
  transform-origin: 50% 0;
}

.ss-spider i {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 30px;
  margin-left: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 10 L3 4 M12 11 L1.5 10 M12 12.5 L3 17 M12 13.5 L5 21 M12 10 L21 4 M12 11 L22.5 10 M12 12.5 L21 17 M12 13.5 L19 21' stroke='%23101012' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='12' cy='13' rx='3.8' ry='4.8' fill='%230c0c0e'/%3E%3Ccircle cx='12' cy='7.6' r='2.5' fill='%230c0c0e'/%3E%3Ccircle cx='11.1' cy='7.2' r='0.5' fill='%23ff3b2f'/%3E%3Ccircle cx='12.9' cy='7.2' r='0.5' fill='%23ff3b2f'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(255, 170, 90, 0.9)) drop-shadow(0 0 6px rgba(255, 120, 30, 0.6));
  transform: translate3d(0, 40px, 0);
}

.season-play .ss-spider::before {
  animation: ss-thread 11s ease-in-out infinite;
}

.season-play .ss-spider i {
  animation: ss-spin 11s ease-in-out infinite;
}

@media (max-width: 700px) {
  .ss-spider {
    right: 30%;
  }

  .ss-fog {
    filter: none;
  }
}

/* ---- the movements ---- */
@keyframes ss-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  8%,
  92% {
    opacity: var(--o, 0.6);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 108vh, 0);
  }
}

@keyframes ss-turn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  8%,
  92% {
    opacity: var(--o, 0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), 108vh, 0) rotate(420deg);
  }
}

@keyframes ss-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  12%,
  70% {
    opacity: var(--o, 0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), -90vh, 0) scale(0.4);
  }
}

@keyframes ss-sway {
  0% {
    translate: calc(var(--sw) * -1) 0;
  }
  100% {
    translate: var(--sw) 0;
  }
}

@keyframes ss-mist {
  0% {
    opacity: 0;
    transform: translate3d(-110%, 0, 0) scale(1);
  }
  12% {
    opacity: 1;
  }
  50% {
    transform: translate3d(60%, -10%, 0) scale(1.15);
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(190%, 5%, 0) scale(1);
  }
}

@keyframes ss-bat {
  0%,
  82% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  83%,
  98% {
    opacity: 0.85;
  }
  90% {
    transform: translate3d(50vw, -50px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 140px), 20px, 0);
  }
}

@keyframes ss-flap {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.4);
  }
}

@keyframes ss-blink {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ss-thread {
  0%,
  100% {
    transform: scaleY(0.36);
  }
  45%,
  62% {
    transform: scaleY(1);
  }
}

@keyframes ss-spin {
  0%,
  100% {
    transform: translate3d(0, 36px, 0) rotate(0deg);
  }
  45% {
    transform: translate3d(0, 106px, 0) rotate(-6deg);
  }
  53% {
    transform: translate3d(0, 104px, 0) rotate(6deg);
  }
  62% {
    transform: translate3d(0, 106px, 0) rotate(0deg);
  }
}

/* still (reduce motion, or the owner's "Animated atmosphere" off): js/components/season.js leaves
   html.season-play off; the colours and the decoration stay */

/* On a computer and a tablet: the season on the capsule that holds the page links (not across the
   whole navbar). Drawn to its exact shape by js/components/season.js, so it follows the rounded ends.
   Halloween: blood hanging from its underside, following the rounded ends, drips of different lengths,
   and at three of them drops that gather and fall down the page. Christmas / Winter: snow resting on its top,
   thinning where the ends curve away, drooping a little over the edge; now and then a clump falls */
.season-pill {
  display: none;
}

@media (min-width: 1331px) {
  html[data-season] .nav-links > .season-pill {
    display: block;
  }
}

html.tablet[data-season] .nav-links > .season-pill {
  display: block;
}

.nav-links > .season-pill {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.season-pill svg {
  position: absolute;
  overflow: visible;
}

.season-pill[data-k="blood"] svg {
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.45));
}

.season-pill[data-k="snow"] svg {
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.35));
}

.ss-pill-drop,
.ss-pill-puff {
  position: absolute;
  opacity: 0;
}

.ss-pill-drop {
  width: 8px;
  height: 11.2px;
  margin-left: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cdefs%3E%3CradialGradient id='d' cx='0.38' cy='0.62' r='0.7'%3E%3Cstop offset='0' stop-color='%23b8121d'/%3E%3Cstop offset='0.6' stop-color='%23900913'/%3E%3Cstop offset='1' stop-color='%2363040b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M5 0 C6 4 9.5 6.5 9.5 9.6 A4.5 4.5 0 0 1 0.5 9.6 C0.5 6.5 4 4 5 0 Z' fill='url(%23d)'/%3E%3Cellipse cx='3.4' cy='9' rx='0.9' ry='1.6' fill='%23ffffff' fill-opacity='0.45'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 0;
}

.ss-pill-puff {
  width: 11px;
  height: 9px;
  margin-left: -5.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cdefs%3E%3CradialGradient id='p' cx='0.4' cy='0.35' r='0.7'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfdcef'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2 6 C0 6 0 3 2.4 3 C2.6 0.6 6 0 7 2.2 C9.6 1.4 11.6 3.4 10.4 5.6 C11.4 7.8 8.4 9.6 6.4 8.4 C4.4 9.8 1.6 8.6 2 6 Z' fill='url(%23p)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.season-play .ss-pill-drop {
  animation-name: ss-drip;
  animation-iteration-count: infinite;
}

.season-play .ss-pill-puff {
  animation-name: ss-puff;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes ss-drip {
  /* a bead gathering at the tip */
  0% {
    opacity: 0;
    transform: translate3d(0, -3px, 0) scale(0.15, 0.1);
    animation-timing-function: ease-out;
  }
  8% {
    opacity: 1;
  }
  /* full and heavy: from here one movement, sliding from rest, stretching as it speeds up */
  56% {
    transform: translate3d(0, 0, 0) scale(0.9, 0.9);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 260px, 0) scale(0.68, 1.75);
  }
}

@keyframes ss-puff {
  /* resting on the edge, then it lets go: falls, slowing as it catches the air, sways, fades */
  0%,
  60% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 2px, 0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.6);
  }
  75% {
    transform: translate3d(14px, 80px, 0) rotate(40deg);
  }
  88% {
    opacity: 0.9;
    transform: translate3d(-10px, 170px, 0) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(8px, 250px, 0) rotate(140deg);
  }
}

/* ---------- Admin Overview: the site's atmosphere (lock), Needs attention, the year, Latest saves ---------- */
.cc-season-pick {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.cc-season-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
}

.cc-season-head strong i {
  color: var(--gold);
  font-size: 13px;
}

.cc-season-head small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
}

/* the count beside a panel's title */
.cc-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.18);
  color: var(--gold);
  font-size: 12px;
  vertical-align: 2px;
}

/* Needs attention */
.cc-attn {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-attn li {
  --t: #7ea4ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.cc-attn li.gold {
  --t: var(--gold);
}

.cc-attn li.red {
  --t: #ff6b6f;
  border-color: rgba(229, 72, 77, 0.35);
  background: rgba(229, 72, 77, 0.07);
}

.cc-attn-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--t) 16%, transparent);
  color: var(--t);
  font-size: 14px;
}

.cc-attn-text {
  display: grid;
  min-width: 0;
}

.cc-attn-text strong {
  font-size: 14px;
}

.cc-attn-text small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-attn-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.cc-attn-go:hover {
  background: rgba(255, 255, 255, 0.07);
}

.cc-attn-go i {
  font-size: 10px;
}

.cc-allgood {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(52, 199, 89, 0.08);
}

.cc-allgood > i {
  color: #4cd97b;
  font-size: 26px;
}

.cc-allgood span {
  display: grid;
}

.cc-allgood small {
  color: var(--text-muted);
}

/* Site atmosphere: now, the year, next */
.cc-season-now {
  --c: var(--accent);
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-season-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
  font-size: 22px;
}

.cc-season-now > span:last-child {
  display: grid;
}

.cc-season-now small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-season-now strong {
  font-size: 22px;
  letter-spacing: -0.01em;
}

.cc-season-now em {
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: normal;
}

.cc-season-now em i {
  color: var(--gold);
}

.cc-year {
  display: grid;
  gap: 6px;
}

.cc-year-bar {
  position: relative;
  height: 14px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.cc-year-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--c);
  opacity: 0.85;
}

.cc-year-bar b {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.cc-year-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.cc-season-next {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.cc-season-next i {
  margin-right: 4px;
}

.cc-season-switches {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--glass-border);
}

.cc-action.purple i {
  background: rgba(175, 110, 255, 0.16);
  color: #c49bff;
}

@media (max-width: 640px) {
  .cc-attn li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cc-attn-go {
    grid-column: 2;
    justify-self: start;
  }
}

:root[data-theme="light"] .cc-year-bar {
  background: rgba(0, 0, 0, 0.07);
}

:root[data-theme="light"] .cc-attn-go:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* A title's / a person's latest news (from Movie News): a picture, the source and when, the headline */
.t-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 12px;
}

.t-news-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s;
}

.t-news-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

.t-news-item img,
.t-news-ph {
  width: 96px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  object-fit: cover;
}

.t-news-ph {
  display: grid;
  place-items: center;
  background: radial-gradient(80% 90% at 20% 15%, rgba(229, 9, 20, 0.4), transparent 70%), #121214;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
}

.t-news-item > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.t-news-item small {
  color: var(--text-muted);
  font-size: 12px;
}

.t-news-item strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.t-news .t-section-title i,
.p-news-row .t-section-title i {
  margin-right: 6px;
  color: var(--accent-hover);
  font-size: 0.85em;
}

.p-news-row {
  margin-top: 30px;
}

/* ============================== Theme songs (js/components/theme-song.js) ==============================
   Its round button on the title page: beside ⋮ (computer / tablet; the phones' top row uses .t-round),
   a note when paused, three red bars moving while the theme plays */
.ts-btn[hidden] {
  display: none !important;
}

.t-more .ts-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.t-more .ts-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
}

.ts-btn.playing {
  border-color: rgba(229, 9, 20, 0.55) !important;
}

.ts-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.ts-bars i {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  animation: ts-bar 0.9s ease-in-out infinite alternate;
}

.ts-bars i:nth-child(2) {
  animation-delay: -0.3s;
}

.ts-bars i:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes ts-bar {
  from {
    height: 3px;
  }
  to {
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-bars i {
    height: 10px;
    animation: none;
  }
}

/* ============================== X-Ray: "Where you've seen the cast" ==============================
   a card per person: the head (photo, name, who they play here, how many of yours), then a
   sideways row of those titles, each with the part they played */
.xr-cast-head .xr-seen-n {
  flex: none;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(229, 9, 20, 0.45);
  border-radius: 999px;
  background: rgba(229, 9, 20, 0.12);
  color: #ff6b73;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.xr-cast-head > span {
  flex: 1;
}

.xr-seen-row {
  display: grid;
  grid-auto-columns: 96px;
  grid-auto-flow: column;
  gap: 10px;
  margin: 0 -16px -4px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* (the first poster snaps to the card's inner edge, not to the border) */
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.xr-seen-row::-webkit-scrollbar {
  display: none;
}

.xr-seen-pick {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  scroll-snap-align: start;
}

.xr-seen-pick img {
  width: 100%;
  aspect-ratio: 2 / 3;
  margin-bottom: 4px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}

.xr-seen-pick:hover img {
  transform: translateY(-3px);
}

.xr-seen-pick strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.xr-seen-pick small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* phones: a smaller head, a little narrower posters (3 and a bit show: there's more to slide to) */
@media (max-width: 700px) {
  .xr-cast {
    gap: 10px;
    padding: 14px;
  }

  .xr-face {
    width: 48px;
    height: 48px;
  }

  .xr-cast-head {
    gap: 12px;
  }

  .xr-seen-row {
    grid-auto-columns: 88px;
    margin: 0 -14px -2px;
    padding: 0 14px 4px;
    scroll-padding-inline: 14px;
  }
}

/* ============================== "Add to …" (a list's adder, js/components/cards.js) on phones ==============================
   one tidy block: the kinds across the width, then the three choices and "Hide ones in the list"
   as one row of small chips (sliding sideways when they don't fit), the count with "Add all" */
@media (max-width: 700px) {
  .adder-modal h3 {
    margin: 0 48px 12px 0;
    font-size: 19px;
    line-height: 1.25;
    text-align: left;
  }

  .cc-marathon {
    margin-bottom: 10px;
    padding: 8px 12px 8px 8px;
  }

  .cc-marathon > span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .cc-marathon b {
    font-size: 14px;
  }

  .cc-marathon small {
    font-size: 12px;
  }

  .cc-filters {
    gap: 8px;
    margin-top: 10px;
  }

  .cc-types {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100%;
  }

  .cc-types .top10-tab {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* (the row slides inside the pop-up: it must never make the pop-up itself wider) */
  .adder-modal {
    overflow-x: hidden;
  }

  .cc-filters,
  .cc-filters > * {
    min-width: 0;
    max-width: 100%;
  }

  .cc-selects {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -2px;
    padding: 0 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cc-selects::-webkit-scrollbar {
    display: none;
  }

  .cc-selects .glass-select {
    flex: none;
    height: 34px;
  }

  .cc-selects .glass-select::after {
    right: 12px;
    width: 6px;
    height: 6px;
  }

  .cc-selects select {
    max-width: 150px;
    padding: 0 28px 0 13px;
    font-size: 13px;
  }

  /* "Hide ones in the list": a chip that lights up */
  .cc-hide-in {
    position: relative;
    flex: none;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    font-size: 13px;
    white-space: nowrap;
  }

  .cc-hide-in input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .cc-hide-in::before {
    content: "\f070";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
  }

  .cc-hide-in:has(input:checked) {
    border-color: rgba(229, 9, 20, 0.55);
    background: rgba(229, 9, 20, 0.18);
    color: #fff;
  }

  .cc-hint-row .cc-hint {
    margin-top: 10px;
    font-size: 13px;
  }

  .adder-modal .cc-all {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
  }

  .cc-results {
    max-height: none;
  }
}

/* a list's buttons on phones (Add titles, Generate marathon, Appearance, Edit, Delete): one row
   that slides sideways, each label on one line */
@media (max-width: 700px) {
  .wl-list-tools {
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wl-list-tools::-webkit-scrollbar {
    display: none;
  }

  .wl-list-tools .btn {
    flex: none;
    height: 40px;
    padding: 0 15px;
    font-size: 13.5px;
    white-space: nowrap;
  }
}

/* "Where you've seen the cast" on computers: dragged with the mouse like the poster rows, the slim
   bar under it (js/components/scrollbars.js); no snapping (it fights the glide), and a poster
   never starts the browser's own picture drag */
html.custom-scrollbars .xr-seen-row {
  scroll-snap-type: none;
}

html.custom-scrollbars .xr-seen-row.grabbing {
  cursor: grabbing;
  user-select: none;
}

.xr-seen-pick,
.xr-seen-pick img {
  -webkit-user-drag: none;
  user-select: none;
}

/* big screens (27" / 32" monitors): the posters in the rows and grids a little bigger, so they
   read well from further away (computers and laptops under 1700px keep their size) */
@media (min-width: 1700px) {
  html:not(.app-ui):not(.tablet) .movie-row:not(.top10-row) {
    grid-auto-columns: 250px;
  }

  html:not(.app-ui):not(.tablet) .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  }

  /* (Top 10: its posters and their big numbers grow with them) */
  html:not(.app-ui):not(.tablet) .top10-item img {
    width: 190px;
  }

  html:not(.app-ui):not(.tablet) .top10-num {
    font-size: 212px;
  }

  html.posters-only:not(.app-ui):not(.tablet) .movie-row:not(.top10-row) {
    grid-auto-columns: 226px;
  }

  html.posters-only:not(.app-ui):not(.tablet) .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  }
}

@media (min-width: 2200px) {
  html:not(.app-ui):not(.tablet) .movie-row:not(.top10-row) {
    grid-auto-columns: 272px;
  }

  html:not(.app-ui):not(.tablet) .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  }

  html:not(.app-ui):not(.tablet) .top10-item img {
    width: 208px;
  }

  html:not(.app-ui):not(.tablet) .top10-num {
    font-size: 232px;
  }

  html.posters-only:not(.app-ui):not(.tablet) .movie-row:not(.top10-row) {
    grid-auto-columns: 248px;
  }

  html.posters-only:not(.app-ui):not(.tablet) .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  }
}

/* the Anime section on an anime's title page (what the anime explorer showed on its own page) */
.t-anchor {
  display: block;
  scroll-margin-top: 90px;
}

.t-anime .ax-stats {
  margin: 4px 0 16px;
}

.t-anime .xr-sub {
  margin-top: 26px;
}

.t-anime .ax-alt {
  margin: -6px 0 12px;
  color: var(--text-muted);
}

/* the Watchlist page's full list: a ✕ at the top right of each poster, shown while it's pointed
   at (it takes the title out of that list); phones and tablets (no pointing): always there */
.wl-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.movie-item:hover > .wl-x,
.wl-x:focus-visible {
  opacity: 1;
  transform: none;
}

.wl-x:hover {
  border-color: transparent;
  background: var(--accent);
}

/* (the NEW label sits there: it steps aside while the ✕ shows) */
.movie-item:has(> .wl-x):hover .new-label {
  opacity: 0;
}

@media (hover: none) {
  .wl-x {
    width: 28px;
    height: 28px;
    font-size: 12px;
    opacity: 0.9;
    transform: none;
  }

  .movie-item:has(> .wl-x) .new-label {
    display: none;
  }
}

/* Plan to watch, the owner only: Download, under the ✕ (the same round button); computers only */
.wl-dl {
  display: none;
  top: 50px;
  text-decoration: none;
}

@media (min-width: 1024px) {
  html.is-owner .wl-dl {
    display: grid;
  }
}

/* ============================== Watched (the eye, like Letterboxd's) ==============================
   grey when not watched, green when watched: on cards, the hover card, the menus, title pages */
:root {
  --seen: #00e054;
}

.action-circle .seen.on i,
.hp-btn.on[data-action="seen"] i,
.qa-p-row.seen i,
.qa-row[data-action="seen"] .fa-solid.fa-eye {
  color: var(--seen);
}

.action-circle .seen.on .bubble {
  border-color: rgba(0, 224, 84, 0.35);
  background: rgba(0, 224, 84, 0.12);
}

.action-circle .seen:hover i {
  color: var(--seen);
}

.hp-btn.on[data-action="seen"] {
  border-color: rgba(0, 224, 84, 0.45);
  background: rgba(0, 224, 84, 0.14);
}

/* the title page's Watched (computers: a pill with a green edge; phones: the icon in the bar) */
.t-actions .btn.is-seen {
  border-color: rgba(0, 224, 84, 0.55);
  background: rgba(0, 224, 84, 0.14);
}

.t-actions .btn.is-seen i {
  color: var(--seen);
}

@media (max-width: 700px) {
  .t-actions .btn.is-seen,
  .t-actions .btn.is-seen:hover {
    background: none;
    color: var(--seen);
  }
}

/* ============================== TV Shows → Networks (js/pages/networks.js) ==============================
   just the logos, light on the site's dark glass (see .net-logo), in tiles of one size; pointed at:
   a lift, a red edge and a soft red glow */
/* "TV Shows" and the round search button beside it (it opens the search box under it) */
.net-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.net-search-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.net-search-btn:hover,
.net-search-btn.on {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

/* the row over the logos: the search box, once opened (closed: no row, no gap) */
.net-bar:has(> .net-search[hidden]) {
  display: none;
}

.net-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 18px;
  margin: 2px 0 18px;
}

.net-search {
  flex: 1 1 320px;
  max-width: 520px;
  margin-right: auto;
}

.net-search[hidden] {
  display: none;
}

.net-group + .net-group {
  margin-top: 30px;
}

.net-group .xr-sub {
  margin: 0 0 14px;
}

.net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.net-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%), var(--glass-bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.net-card:hover,
.net-card:focus-visible {
  border-color: rgba(229, 9, 20, 0.6);
  background: radial-gradient(120% 100% at 50% 0%, rgba(229, 9, 20, 0.16), transparent 70%), var(--glass-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(229, 9, 20, 0.25);
  transform: translateY(-3px);
}

.net-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.net-card:active {
  transform: translateY(-1px) scale(0.99);
}

.net-card.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
}

/* the logo: always inside the same box, whatever its own size and shape */
/* the logo: always inside the same box, whatever its own size and shape. Logos are drawn for white
   backgrounds: a mostly dark one (HBO, ABC, CBS…) is turned light, its colours kept (NBC's peacock
   stays a peacock: .dark, worked out from the picture by js/pages/networks.js); a bright, colourful
   one (Netflix, Nickelodeon…) shows as it is */
.net-logo {
  position: absolute;
  inset: 22% 14%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.net-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.net-logo img.ready {
  opacity: 0.95;
}

.net-logo img.dark {
  filter: invert(1) hue-rotate(180deg);
}

.net-logo img.dim {
  filter: brightness(1.9) saturate(1.15);
}

.net-card:hover .net-logo img {
  opacity: 1;
  transform: scale(1.06);
}

.net-logo b {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

/* a network's own page */
.net-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 16px;
}

.net-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
}

.net-logo-big {
  position: relative;
  inset: auto;
  flex: none;
  width: 220px;
  height: 110px;
  padding: 18px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%), rgba(255, 255, 255, 0.03);
}

.net-head-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.net-head-text h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
}

.net-total {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.net-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.net-empty .btn {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .net-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .net-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
  }

  .net-logo-big {
    width: 100%;
    height: 92px;
    padding: 14px 24px;
  }

  .net-status {
    width: 100%;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .net-status .top10-tab {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================== Home: the seasonal collection ==============================
   (js/pages/home.js: spotlightShell) a band across the page: a movie's picture behind, darkened
   and tinted in the collection's colours, fading into the page at the top and bottom; the
   collection's name, label and "Explore all" on the left, its movies as wide pictures on the right */
.spot {
  --spot-a: rgba(20, 90, 90, 0.55); /* the mist */
  --spot-b: rgba(230, 110, 30, 0.35); /* the glow */
  --spot-name: #e50914;
  position: relative;
  isolation: isolate;
  margin: -20px calc(50% - 50vw) 0; /* (right under the row above, as on Netflix) */
  padding: 52px max(16px, calc(50vw - 50%)) 34px;
  color: #fff;
}

.spot-christmas { --spot-a: rgba(20, 80, 50, 0.6); --spot-b: rgba(240, 190, 90, 0.35); --spot-name: #ff3b3b; }
.spot-newyear { --spot-a: rgba(30, 30, 90, 0.6); --spot-b: rgba(240, 200, 110, 0.4); --spot-name: #f4c95d; }
.spot-valentine { --spot-a: rgba(110, 20, 50, 0.55); --spot-b: rgba(255, 110, 150, 0.35); --spot-name: #ff4d7d; }
.spot-easter { --spot-a: rgba(60, 110, 90, 0.5); --spot-b: rgba(255, 220, 120, 0.35); --spot-name: #ffd166; }
.spot-summer { --spot-a: rgba(10, 80, 120, 0.5); --spot-b: rgba(255, 170, 60, 0.4); --spot-name: #ffb347; }
.spot-thrillers { --spot-a: rgba(30, 40, 60, 0.6); --spot-b: rgba(144, 13, 9, 0.4); }

.spot-bg {
  position: absolute;
  inset: calc(-1 * var(--spot-bleed, 160px)) 0; /* (it goes on under the rows above and below, fading away behind them, as on Netflix) */
  z-index: -1;
  overflow: hidden;
  background: #0b0c0e;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 12%, rgba(0, 0, 0, 0.85) 26%, #000 34%, #000 66%, rgba(0, 0, 0, 0.85) 74%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 12%, rgba(0, 0, 0, 0.85) 26%, #000 34%, #000 66%, rgba(0, 0, 0, 0.85) 74%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
}

/* (the scene shows: bright enough to see what it is, the words and pictures still read on it) */
.spot-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(1.05) brightness(0.92) contrast(1.05);
  transform: scale(1.03);
}

/* (the tint, and a soft shade on the left for the words) */
.spot-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 65% 35%, var(--spot-a), transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 95%, var(--spot-b), transparent 70%),
    linear-gradient(90deg, rgba(8, 9, 11, 0.72) 0%, rgba(8, 9, 11, 0.42) 28%, rgba(8, 9, 11, 0.08) 60%, rgba(8, 9, 11, 0.25) 100%);
}

.spot-inner {
  display: grid;
  grid-template-columns: minmax(300px, 33%) 1fr;
  align-items: center;
  gap: 0 28px; /* (no row gap: the scrollbar sits right under the pictures) */
  min-height: 300px;
}

.spot-intro {
  text-align: center;
  padding: 10px 8px;
}

/* the name, like a film's title on its poster: tall, condensed, on two lines */
.spot-name {
  margin: 0 auto;
  max-width: calc(4.2em * var(--mwx, 1));
  font-family: var(--ff, "Bebas Neue", "Poppins", Inter, sans-serif);
  font-size: calc(clamp(60px, 4.4vw, 88px) * var(--fs, 1));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 0.86);
  letter-spacing: 0.01em;
  text-transform: var(--tt, uppercase);
  text-wrap: balance;
  color: var(--spot-name);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 12px 34px rgba(0, 0, 0, 0.65);
}

/* the label between two thin lines */
.spot-label {
  margin: 18px auto 0;
  max-width: 340px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.spot-line {
  margin: 20px auto 0;
  max-width: 420px;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.spot-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.spot-btn:hover {
  transform: scale(1.04);
  background: rgba(255, 255, 255, 0.86);
}

/* (stronger than the big screens' poster sizes) */
html .spot .spot-inner > .movie-row.spot-row:not(.top10-row) {
  grid-auto-columns: clamp(167px, 11.76vw, 225px);
  margin-top: 0;
  padding: 14px 6px 14px;
}

.spot-card {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3; /* (its poster, its title on it) */
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  scroll-snap-align: start;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.spot-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spot-card:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--accent), 0 14px 32px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
  .spot {
    --spot-bleed: 100px;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .spot-name {
    font-size: calc(60px * var(--fs, 1));
  }

  .spot-books .spot-name {
    font-size: calc(48px * var(--fs, 1));
  }

  .spot-inner {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .spot-bg::after {
    background:
      radial-gradient(ellipse 80% 50% at 60% 30%, var(--spot-a), transparent 70%),
      radial-gradient(ellipse 70% 40% at 80% 100%, var(--spot-b), transparent 70%),
      linear-gradient(180deg, rgba(8, 9, 11, 0.6), rgba(8, 9, 11, 0.35));
  }

  .spot-line {
    font-size: 17px;
  }

  html .spot .spot-inner > .movie-row.spot-row:not(.top10-row) {
    grid-auto-columns: 39.2%;
  }
}

/* the books collection: warm and cosy (a reading lamp), its long name a little smaller, in gold */
.spot-books { --spot-a: rgba(150, 110, 70, 0.45); --spot-b: rgba(255, 200, 130, 0.35); --spot-name: #e8c27a; }

.spot-books .spot-name {
  max-width: calc(6em * var(--mwx, 1));
  font-size: calc(clamp(50px, 3.6vw, 72px) * var(--fs, 1));
}

/* ============================== Admin → Home page → Collections ==============================
   (js/pages/admin.js: collectionsStudio) the settings in a strip, a tile per collection, and the
   open one's editor: a little band as on Home that follows what's typed, and its fields */
.cc-cs-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(120px, 0.6fr);
  align-items: end;
  gap: 18px;
}

.cc-cs-strip .sv-row {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
}

.cc-cs-strip .cc-num input {
  width: 100%;
}

.cc-ct-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* (8 collections: rows always full, 8 / 4 / 2 across) */
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 1500px) {
  .cc-ct-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* a collection's tile: its picture, its name as on Home, when it shows */
.cc-ct {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: #0b0c0e;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, opacity 0.3s ease;
}

.cc-ct-pic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 26px;
}

.cc-ct-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(1.05);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc-ct::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}

.cc-ct-name {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 28px;
  font-family: var(--ff, "Bebas Neue", "Poppins", Inter, sans-serif);
  font-size: calc(25px * var(--fs, 1));
  line-height: var(--lh, 0.9);
  text-transform: var(--tt, uppercase);
  font-weight: var(--fw, 400);
  color: var(--spot-name, #e50914);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.cc-ct-when {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.cc-ct-live {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 9px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cc-ct:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.cc-ct:hover .cc-ct-pic img {
  transform: scale(1.05);
}

.cc-ct.open {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent), 0 12px 28px rgba(0, 0, 0, 0.4);
}

.cc-ct.off {
  opacity: 0.45;
}

/* the open one: its little band, and its fields */
.cc-ce {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--glass-border);
  animation: cc-ce-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cc-ce-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cc-ce-preview {
  position: relative;
  isolation: isolate;
  align-self: start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0c0e;
  color: #fff;
}

.cc-ce-preview > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(0.9);
}

.cc-ce-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 65% 35%, var(--spot-a, rgba(20, 90, 90, 0.55)), transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 95%, var(--spot-b, rgba(230, 110, 30, 0.35)), transparent 70%),
    linear-gradient(90deg, rgba(8, 9, 11, 0.75) 0%, rgba(8, 9, 11, 0.4) 40%, rgba(8, 9, 11, 0.1) 75%);
}

.cc-ce-movie {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  padding-left: 45%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.cc-ce-text {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.cc-ce-name {
  max-width: calc(4.4em * var(--mwx, 1));
  font-family: var(--ff, "Bebas Neue", "Poppins", Inter, sans-serif);
  font-size: calc(clamp(28px, 3vw, 44px) * var(--fs, 1));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 0.86);
  text-transform: var(--tt, uppercase);
  color: var(--spot-name, #e50914);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.cc-ce-label {
  padding: 5px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cc-ce-line {
  font-size: 11.5px;
  line-height: 1.35;
  opacity: 0.95;
}

.cc-ce-btn {
  padding: 4px 11px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 10.5px;
  font-weight: 700;
}

/* (the row of posters, sketched) */
.cc-ce-posters {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  gap: 6px;
  width: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  mask-image: linear-gradient(to right, #000 70%, transparent);
}

.cc-ce-posters i {
  flex: 0 0 26%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.cc-ce-head {
  margin: 0 0 4px;
}

.cc-ce-head small {
  color: var(--text-muted);
}

.cc-ce-fields .cc-field + .cc-field {
  margin-top: 10px;
}

/* (its buttons: one even row, as many as there are; a narrow phone: one under the other) */
.cc-ce-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.cc-ce-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .cc-ce-actions {
    grid-auto-flow: row;
  }
}

@media (max-width: 860px) {
  .cc-cs-strip,
  .cc-ce {
    grid-template-columns: 1fr;
  }

  .cc-ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the row after a collection: its title close under it, on the band's fading edge (as on Netflix) */
.spot + .row-section {
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

/* (the rows next to a collection stay on top of its picture, which goes on under them) */
.row-section:has(+ .spot) {
  position: relative;
  z-index: 1;
}

/* ---- a collection's row: more to the side? its posters fade out there and an arrow waits ---- */
.spot-rail {
  position: relative;
  min-width: 0;
}

.spot-rail.more-right .spot-row {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 110px), transparent);
}

.spot-rail.more-left .spot-row {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80px);
  mask-image: linear-gradient(to right, transparent, #000 80px);
}

.spot-rail.more-left.more-right .spot-row {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 110px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 110px), transparent);
}

.spot-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x-in, 10px), -50%) scale(0.88);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
}

.spot-arrow.next {
  right: 8px;
}

.spot-arrow.prev {
  --x-in: -10px;
  left: 8px;
}

/* (the arrows show only while the row is pointed at; phones and tablets swipe, the fade is their hint) */
.spot-rail.more-right:hover .spot-arrow.next,
.spot-rail.more-left:hover .spot-arrow.prev {
  opacity: 0.9;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.spot-arrow:hover {
  opacity: 1 !important;
  border-color: transparent;
  background: var(--accent);
}

/* (the "more" arrow nudges now and then, once it has slid in) */
@media (prefers-reduced-motion: no-preference) {
  .spot-rail.more-right:hover .spot-arrow.next {
    animation: spot-nudge 2.4s ease-in-out 0.8s infinite;
  }

  .spot-rail.more-right .spot-arrow.next:hover {
    animation: none;
  }
}

@keyframes spot-nudge {
  0%,
  60%,
  100% {
    transform: translate(0, -50%);
  }
  75% {
    transform: translate(5px, -50%);
  }
  88% {
    transform: translate(0, -50%);
  }
}

@media (max-width: 700px) {
  .spot-arrow {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .spot-rail.more-right .spot-row {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
  }
}

/* Home opened from the admin's "Preview on Home": a reminder that it shows changes not saved yet */
.coll-preview-pill {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(18px + var(--tab-gap, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(144, 13, 9, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}

html.app-ui .coll-preview-pill {
  bottom: calc(84px + var(--tab-gap, 0px));
}

/* ============================== A collection's page (collection.html) ==============================
   (js/pages/collection.js) its picture across the whole top, fading into the page, with its name
   big as on a poster, its label and tagline; then its themed rows (the site's own) */
.cp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(72vh, 680px);
  margin: -16px calc(50% - 50vw) 0;
  padding: 120px max(16px, calc(50vw - 50%)) 36px;
  color: #fff;
}

.cp-bg {
  position: absolute;
  inset: -180px 0 -260px; /* (it goes on behind the top bar and under the first rows, fading away, as on Home's collections) */
  z-index: -1;
  overflow: hidden;
  background: #0b0c0e;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 22%, #000 52%, rgba(0, 0, 0, 0.75) 66%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 22%, #000 52%, rgba(0, 0, 0, 0.75) 66%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
}

.cp-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(1.05) brightness(0.9);
  animation: cp-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cp-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* (the collection's tint, the dark side for the words, and the fade into the page) */
.cp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 30%, var(--spot-a, rgba(20, 90, 90, 0.5)), transparent 70%),
    radial-gradient(ellipse 55% 50% at 85% 90%, var(--spot-b, rgba(230, 110, 30, 0.3)), transparent 70%),
    linear-gradient(90deg, rgba(8, 9, 11, 0.7) 0%, rgba(8, 9, 11, 0.25) 45%, transparent 75%); /* (top and bottom: .cp-bg's mask fades it) */
}

.cp-text {
  max-width: 720px;
  animation: cp-text-in 0.9s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes cp-text-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.cp-label {
  display: inline-block;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.cp-name {
  margin: 14px 0 0;
  max-width: calc(4.3em * var(--mwx, 1)); /* (on two lines, like a film's title on its poster) */
  font-family: var(--ff, "Bebas Neue", "Poppins", Inter, sans-serif);
  font-size: calc(clamp(72px, 9vw, 168px) * var(--fs, 1));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 0.84);
  letter-spacing: 0.005em;
  text-transform: var(--tt, uppercase);
  text-wrap: balance;
  color: var(--spot-name, #e50914);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.6);
}

.cp-line {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.cp-rows {
  z-index: 1; /* (on top of the picture, which goes on under them) */
  position: relative;
  margin-top: -8px;
}

.cp-rows .row-section:first-child {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .cp-hero {
    min-height: 62vh;
    padding-top: 90px;
    padding-bottom: 24px;
  }

  .cp-name {
    font-size: calc(64px * var(--fs, 1));
  }

  .cp-line {
    font-size: 16px;
  }
}

/* a collection's title font (Admin → Collections → Title font): each one with its own size and
   width, so the name stays big and on two lines whatever the font (the title styles read them:
   --ff font, --fw weight, --fs size, --mwx width, --lh line height, --tt capitals or not) */
.font-drip {
  --ff: "Rubik Wet Paint", "Bebas Neue", Inter, sans-serif;
  --fs: 0.78;
  --mwx: 1.45;
  --lh: 0.98;
}

.font-cut {
  --ff: "Londrina Solid", "Bebas Neue", Inter, sans-serif;
  --fw: 900;
  --fs: 0.84;
  --mwx: 1.2;
  --lh: 0.9;
}

.font-bold {
  --ff: "Anton", "Bebas Neue", Inter, sans-serif;
  --fs: 0.86;
  --mwx: 1.1;
  --lh: 0.95;
}

.font-script {
  --ff: "Pacifico", cursive;
  --tt: none;
  --fs: 0.64;
  --mwx: 1.7;
  --lh: 1.2;
}

.font-classic {
  --ff: "Playfair Display", Georgia, serif;
  --fw: 900;
  --fs: 0.6;
  --mwx: 1.75;
  --lh: 1;
}

/* the picker: each font a little card, the collection's own name written in it */
.cc-fonts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cc-font {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: #0f1012;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc-font-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: calc(4.4em * var(--mwx, 1));
  margin: 0 auto;
  font-family: var(--ff, "Bebas Neue", "Poppins", Inter, sans-serif);
  font-size: calc(24px * var(--fs, 1));
  font-weight: var(--fw, 400);
  line-height: var(--lh, 0.9);
  text-transform: var(--tt, uppercase);
  color: var(--spot-name, #e50914);
}

.cc-font small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.cc-font:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.cc-font.on {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

@media (max-width: 520px) {
  .cc-fonts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================== Admin → Posters ==============================
   (js/pages/admin.js: postersStudio) find a title; its two cards (Russian titles on / English) as the
   site shows them, the one being changed lit; every poster TMDB has, by language, to pick from */
.cc-ps-find {
  max-width: 640px;
}

.cc-ps-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.cc-ps-hit,
.cc-ps-mine {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc-ps-hit:hover,
.cc-ps-mine:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.cc-ps-hit img,
.cc-ps-hit i,
.cc-ps-mine img {
  flex: none;
  width: 38px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.cc-ps-hit span {
  display: grid;
  min-width: 0;
}

.cc-ps-hit strong,
.cc-ps-mine span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-ps-hit small,
.cc-ps-mine small {
  color: var(--text-muted);
}

.cc-ps-hint {
  margin: 18px 0 0;
  color: var(--text-muted);
}

.cc-ps-editor {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  animation: cc-ce-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc-ps-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px;
}

/* a mode's card, as the site shows it */
.cc-ps-slot {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cc-ps-slot.on {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent);
}

.cc-ps-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.cc-ps-yours {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-ps-card {
  display: grid;
  gap: 4px;
}

.cc-ps-poster {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #0f1012;
  color: var(--text-muted);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.cc-ps-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cc-ce-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cc-ps-name {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-ps-card small {
  color: var(--text-muted);
}

.cc-ps-acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-ps-head {
  margin: 0 0 10px;
}

.cc-ps-head small {
  color: var(--text-muted);
}

.cc-ps-langs {
  margin-bottom: 12px;
}

.cc-ps-langs small {
  opacity: 0.6;
}

.cc-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  max-height: 560px;
  overflow-y: auto;
  padding: 4px;
}

.cc-ps-thumb {
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #0f1012;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease;
}

.cc-ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-ps-thumb:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.cc-ps-thumb.on {
  box-shadow: 0 0 0 3px var(--accent);
}

.cc-ps-picks {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}

.cc-ps-picks-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.cc-ps-mine {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
}

.cc-ps-mine img {
  grid-row: 1 / 3;
}

@media (max-width: 860px) {
  .cc-ps-editor {
    grid-template-columns: 1fr;
  }
}

/* ============================== Awards (awards.html) ============================== */

/* (the profile menu's Awards link: only on tablets, when the bar has no room for it) */
.profile-menu .menu-group a.aw-menu-link {
  display: none;
}

@media (max-width: 1100px) {
  html.tablet .nav-links li:has(> a[href="awards.html"]) {
    display: none;
  }

  html.tablet .profile-menu .menu-group a.aw-menu-link {
    display: flex;
  }
}

/* the stage: the winner's picture across the top, gold light on it, the ceremony's name */
.aw-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(50vh, 470px);
  margin: -16px calc(50% - 50vw) 0;
  padding: 120px max(16px, calc(50vw - 50%)) 34px;
  color: #fff;
}

.aw-bg {
  position: absolute;
  inset: -180px 0 -140px;
  z-index: -1;
  overflow: hidden;
  background: #0b0c0e;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 24%, #000 58%, rgba(0, 0, 0, 0.6) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 24%, #000 58%, rgba(0, 0, 0, 0.6) 76%, transparent 100%);
}

.aw-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transform: scale(1.03);
  filter: saturate(0.9) brightness(0.8);
  transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aw-bg img.in {
  opacity: 1;
  transform: none;
}

/* (gold stage light from above, and the dark side for the words) */
.aw-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 50% 60% at 78% 18%, rgba(245, 197, 24, 0.2), transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 100%, rgba(200, 140, 20, 0.16), transparent 70%),
    linear-gradient(90deg, rgba(8, 9, 11, 0.85) 0%, rgba(8, 9, 11, 0.45) 45%, rgba(8, 9, 11, 0.1) 80%);
  animation: aw-light 16s ease-in-out infinite alternate;
}

@keyframes aw-light {
  to {
    background-position: 0 0, 0 0, 0 0;
    filter: brightness(1.12);
  }
}

.aw-hero-in {
  max-width: 760px;
  animation: cp-text-in 0.9s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.aw-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid rgba(245, 197, 24, 0.45);
  border-bottom: 1px solid rgba(245, 197, 24, 0.45);
  color: #f5d76e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.aw-name {
  margin: 14px 0 0;
  font-family: "Cinzel", "Playfair Display", Georgia, serif;
  font-size: clamp(44px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-wrap: balance;
  background: linear-gradient(100deg, #b8860b 0%, #f5d76e 28%, #fff6d0 40%, #f5c518 52%, #b8860b 80%, #f5d76e 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
  animation: aw-sheen 3.2s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* (the gold catches the light once, as the page opens) */
@keyframes aw-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.aw-line {
  margin: 16px 0 0;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.aw-line strong {
  color: #f5d76e;
}

.aw-dot {
  margin: 0 10px;
  opacity: 0.5;
}

.aw-sealed-word {
  color: #f5d76e;
  font-weight: 700;
}

.aw-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}

.aw-game {
  gap: 8px;
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(20, 18, 10, 0.5);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.55s ease, color 0.55s ease, box-shadow 0.55s ease;
}

.aw-game:hover {
  background: rgba(245, 197, 24, 0.18);
}

.aw-game[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #f5d76e, #d4a017);
  color: #1a1405;
  box-shadow: 0 8px 26px rgba(245, 197, 24, 0.3);
}

.aw-score {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 14px;
}

.aw-score b {
  color: #f5d76e;
  font-size: 16px;
}

.aw-reset {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.3s;
}

.aw-reset:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* the ceremonies: gold names on black, like the statuettes on their stage */
.aw-shows {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.aw-show {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #0d0d0f;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.55s ease, box-shadow 0.55s ease;
}

.aw-show:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 197, 24, 0.35);
}

.aw-show.on {
  border-color: rgba(245, 197, 24, 0.75);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.35), 0 14px 36px rgba(245, 197, 24, 0.16);
}

/* (a sheen crosses the tile when it's pointed at) */
.aw-show::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.12) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.aw-show:hover::after {
  transform: translateX(100%);
}

.aw-emblem {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 0 12px;
  background: radial-gradient(ellipse 70% 80% at 50% 110%, rgba(245, 197, 24, 0.16), transparent 70%);
  font-family: "Cinzel", "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-align: center;
  background-color: #070708;
}

.aw-emblem {
  color: #e7c35a;
  text-shadow: 0 0 18px rgba(245, 197, 24, 0.25);
}

.aw-show-globes .aw-emblem {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.aw-show-bafta .aw-emblem {
  color: #f1e3b5;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.aw-show-emmys .aw-emblem {
  letter-spacing: 0.3em;
}

.aw-show-festivals .aw-emblem {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* (the tile is its name in gold; the month it's held, a small badge under it) */
.aw-show .aw-emblem {
  height: 128px;
  padding-bottom: 26px;
  background: radial-gradient(ellipse 70% 70% at 50% 120%, rgba(245, 197, 24, 0.2), transparent 70%), #070708;
}

.aw-when {
  position: absolute;
  bottom: 14px;
  left: 50%;
  padding: 3px 10px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.08);
  color: #cdb76d;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background 0.55s ease, color 0.55s ease, border-color 0.55s ease;
}

.aw-show.on .aw-when {
  border-color: transparent;
  background: linear-gradient(135deg, #f5d76e, #d4a017);
  color: #1a1405;
}

/* the years: the newest first, the picked one in gold (← → step through them) */
.aw-years-bar {
  position: relative;
  margin-top: 18px;
}

.aw-years {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 4px;
  scrollbar-width: none;
}

.aw-years::-webkit-scrollbar {
  display: none;
}

.aw-year {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 14px;
  background: var(--glass-bg, var(--surface));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.55s ease, color 0.55s ease, box-shadow 0.55s ease, border-color 0.55s ease;
}

.aw-year strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.aw-year small {
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.55s ease;
}

.aw-year:hover {
  border-color: rgba(245, 197, 24, 0.45);
}

.aw-year.on {
  border-color: transparent;
  background: linear-gradient(135deg, #f5d76e, #d4a017);
  color: #1a1405;
  box-shadow: 0 6px 20px rgba(245, 197, 24, 0.25);
}

.aw-year.on small {
  color: rgba(26, 20, 5, 0.7);
}

/* the categories */
.aw-body {
  min-height: 50vh;
}

.aw-cat {
  margin-top: 30px;
}

.aw-cat-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 4px;
}

.aw-cat-head h2 {
  margin: 0 4px 0 0;
  font-size: 22px;
  font-weight: 800;
}

.aw-count {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.aw-count-seen {
  color: var(--text);
}

.aw-hint,
.aw-verdict {
  font-size: 13.5px;
  font-weight: 700;
  animation: cp-text-in 0.55s ease both;
}

.aw-hint,
.aw-verdict.ok {
  color: #d4a017;
}

.aw-verdict.miss {
  color: var(--text-muted);
}

.aw-sk-h {
  display: inline-block;
  width: 240px;
  height: 24px;
  border-radius: 8px;
}

.aw-row {
  display: grid;
  grid-auto-columns: 176px;
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.aw-row::-webkit-scrollbar {
  display: none;
}

/* wide screens: the small categories (up to six) two side by side, like the ceremony's own results
   page, their cards filling the half; the big ones (Best Picture's ten) the whole width, filling
   it too (--n: how many cards share the width, js/pages/awards.js) */
@media (min-width: 1400px) {
  .aw-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: 44px;
  }

  .aw-cats .aw-wide {
    grid-column: 1 / -1;
  }

  .aw-cats .aw-row {
    grid-auto-columns: max(112px, calc((100% - 8px - (var(--n, 5) - 1) * 14px) / var(--n, 5)));
    gap: 14px;
  }
}

.aw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.aw-card.skeleton {
  aspect-ratio: 2 / 3.4;
  border-radius: 12px;
}

.aw-pic {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 34px;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.55s ease;
}

.aw-pic > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}

/* (in once it has loaded: js/pages/awards.js) */
.aw-pic > img.in {
  opacity: 1;
}

a.aw-card:hover .aw-pic,
a.aw-card:focus-visible .aw-pic {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* (a person's card: the film they were nominated for, small in the corner) */
.aw-mini {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.55s 0.1s ease;
}

.aw-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 2px 0;
}

.aw-txt strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.aw-txt small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* the winner: in gold */
.aw-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: none;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff1b8, #f5c518 45%, #c99a0e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  color: #1a1405;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aw-win .aw-ribbon {
  display: inline-flex;
}

.aw-win .aw-pic {
  border-color: rgba(245, 197, 24, 0.9);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.5), 0 10px 30px rgba(245, 197, 24, 0.18);
}

a.aw-win:hover .aw-pic {
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.6), 0 16px 40px rgba(245, 197, 24, 0.28);
}

.aw-win .aw-txt strong {
  color: #e2b416;
}

html[data-theme="light"] .aw-win .aw-txt strong {
  color: #9a7300;
}

/* (a gold sheen crosses the winner when it's pointed at) */
.aw-win .aw-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 170, 0.28) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.aw-win:hover .aw-pic::after {
  transform: translateX(110%);
}

/* yours: seen (eye), on a list (bookmark) */
.aw-seen {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.65);
  color: #7ee2a0;
  font-size: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.aw-seen.aw-listed {
  color: #fff;
}

/* the game: sealed envelopes */
.aw-pickme {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 16, 4, 0.55), rgba(0, 0, 0, 0.75));
  color: #f5d76e;
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.aw-pickme b {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aw-cat.sealed .aw-card {
  cursor: pointer;
}

.aw-cat.sealed .aw-pickme {
  display: flex;
}

.aw-cat.sealed .aw-card:hover .aw-pickme,
.aw-cat.sealed .aw-card:focus-visible .aw-pickme {
  opacity: 1;
}

.aw-cat.sealed .aw-cat-head h2::before {
  content: "\f0e0";
  margin-right: 10px;
  color: #d4a017;
  font-family: "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
}

.aw-mine {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.75);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.aw-picked.ok .aw-mine {
  background: linear-gradient(135deg, #2f9e5b, #1f7a43);
}

.aw-picked.miss .aw-pic {
  border-color: rgba(255, 107, 111, 0.6);
}

/* the envelope opens: the winner lights up, the others step back a moment */
.aw-cat.opening .aw-win .aw-pic {
  animation: aw-open 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aw-cat.opening .aw-win .aw-ribbon {
  animation: aw-ribbon-in 0.7s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.aw-cat.opening .aw-card:not(.aw-win) .aw-pic {
  animation: aw-step-back 1.4s ease;
}

@keyframes aw-open {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(245, 197, 24, 0);
  }
  35% {
    filter: brightness(1.25);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.9), 0 0 60px rgba(245, 197, 24, 0.55);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes aw-ribbon-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.9);
  }
}

@keyframes aw-step-back {
  35% {
    filter: brightness(0.6) saturate(0.6);
  }
}

.aw-empty {
  margin-top: 40px;
}

.aw-source {
  margin: 44px 0 10px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.aw-source a {
  color: inherit;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .aw-name,
  .aw-bg::after,
  .aw-cat.opening .aw-pic,
  .aw-cat.opening .aw-ribbon {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .aw-shows {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .aw-shows::-webkit-scrollbar {
    display: none;
  }

  .aw-show {
    flex: 0 0 200px;
  }
}

@media (max-width: 700px) {
  .aw-hero {
    min-height: 48vh;
    padding-top: 90px;
    padding-bottom: 22px;
  }

  .aw-name {
    font-size: 42px;
  }

  .aw-line {
    font-size: 15px;
  }

  .aw-dot {
    margin: 0 6px;
  }

  .aw-show {
    flex-basis: 156px;
  }

  .aw-show .aw-emblem {
    height: 104px;
    font-size: 22px;
  }

  .aw-show-globes .aw-emblem {
    font-size: 17px;
  }

  .aw-show-bafta .aw-emblem {
    font-size: 24px;
  }

  .aw-show-festivals .aw-emblem {
    font-size: 11px;
  }

  .aw-year {
    min-width: 64px;
    padding: 7px 10px;
  }

  .aw-cat-head h2 {
    font-size: 19px;
  }

  .aw-row {
    grid-auto-columns: 136px;
    gap: 12px;
  }

  /* (phones: no pointing, so a sealed card says so all the time, softly) */
  .aw-cat.sealed .aw-pickme {
    opacity: 0.55;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 55%);
    justify-content: flex-end;
    padding-bottom: 12px;
    font-size: 18px;
  }
}

/* ============================== Marathons & Collections (js/components/marathon-shelf.js) ==============================
   On the Watchlist page under your lists: a row of marathon boxes for each mood; a box opens its
   marathon in a pop-up. The same boxes in Admin → Marathons. */
.ms {
  margin-top: 56px;
}

/* the heading: an eyebrow, the name big, a quiet line */
.ms-eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ms-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ms-head h2 {
  margin: 8px 0 0;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ms-head p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

/* a mood: its name in its own typeface and colour */
.ms-group {
  margin-top: 34px;
}

.ms-mood {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 2px;
}

.ms-mood-name {
  font-family: var(--ff, "Bebas Neue", Inter, sans-serif);
  font-size: calc(40px * var(--fs, 1));
  font-weight: var(--fw, 400);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: var(--tt, none);
  color: var(--mc);
  text-shadow: 0 0 28px color-mix(in srgb, var(--mc) 35%, transparent);
}

.ms-mood small {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

/* (five a row, the rest on the rows under them; fewer on smaller screens; phones swipe sideways) */
.ms-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 0 18px;
}

@media (max-width: 1400px) {
  .ms-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ms-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ms-row::-webkit-scrollbar {
  display: none;
}

/* a marathon's card: its still full-bleed, graded and tinted in its mood's colour */
.ms-box {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #0c0c0f;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.55s ease;
}

.ms-box:hover,
.ms-box:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mc) 55%, transparent), 0 22px 48px rgba(0, 0, 0, 0.5), 0 10px 40px color-mix(in srgb, var(--mc) 22%, transparent);
}

.ms-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ms-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.85) contrast(1.05);
  transform: scale(1.06);
  transition: opacity 0.8s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-bg img.in {
  opacity: 1;
  transform: scale(1.01);
}

.ms-box:hover .ms-bg img.in {
  transform: scale(1.08);
}

/* (the grade: deep at the foot for the words, the mood's colour glowing in from a corner) */
.ms-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(6, 6, 8, 0.96) 0%, rgba(6, 6, 8, 0.72) 32%, rgba(6, 6, 8, 0.15) 62%, rgba(6, 6, 8, 0.05) 100%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--mc) 38%, transparent), transparent 62%);
  transition: opacity 0.55s ease;
}

.ms-txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 22px 20px;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-kick {
  color: color-mix(in srgb, var(--mc) 70%, #fff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ms-txt strong {
  font-family: "Bebas Neue", "Poppins", Inter, sans-serif;
  font-size: clamp(26px, 1.9vw, 36px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.ms-txt small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* pointed at: its films rise as a strip, the words make room */
.ms-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 6px;
  padding: 0 22px 18px;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.ms-strip img {
  width: 44px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.55s ease;
}

.ms-strip img.in {
  opacity: 1;
}

@media (hover: hover) {
  .ms-box:hover .ms-strip,
  .ms-box:focus-visible .ms-strip {
    opacity: 1;
    transform: none;
  }

  .ms-box:hover .ms-txt,
  .ms-box:focus-visible .ms-txt {
    transform: translateY(-76px);
  }

  .ms-box:hover .ms-strip img {
    transition-delay: 0.05s;
  }
}

/* ---- a marathon, opened ---- */
.overlay .modal.ms-modal {
  max-width: 640px;
  padding: 0;
  overflow: hidden auto;
}

.overlay .modal.ms-modal .ms-m-hero h3 {
  text-align: left;
}

.ms-m-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  padding: 26px 26px 20px;
  color: #fff;
}

.ms-m-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #101014;
}

.ms-m-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cp-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-m-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--surface, #17181c) 0%, rgba(10, 10, 12, 0.55) 55%, rgba(10, 10, 12, 0.25) 100%);
}

.ms-m-kicker {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-m-hero h3 {
  margin: 6px 44px 0 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}

.ms-m-line {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.85);
}

.ms-m-vibe {
  margin: 8px 0 0;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.ms-m-about {
  margin: 4px 26px 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.ms-m-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 26px 6px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.ms-m-stats span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

.ms-m-stats .ms-m-seen i {
  color: #7ee2a0;
}

.ms-m-films {
  display: grid;
  gap: 6px;
  max-height: min(46vh, 460px);
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 6px 18px 10px;
  list-style: none;
}

.ms-m-film a,
.ms-m-film.missing,
.ms-m-film.skeleton-line {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.3s ease;
}

.ms-m-film a:hover {
  background: var(--surface-2);
}

.ms-m-film.missing {
  opacity: 0.55;
}

.ms-m-n {
  width: 22px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ms-m-pic {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.ms-m-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-m-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ms-m-t strong {
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-m-t small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.ms-m-tag {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.ms-m-tag.seen {
  color: #7ee2a0;
}

.ms-m-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 22px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .ms-row {
    grid-template-columns: none;
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    padding-inline: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .ms-txt {
    padding: 0 18px 16px;
  }

  .ms-txt strong {
    font-size: 30px;
  }

  .ms-mood-name {
    font-size: calc(32px * var(--fs, 1));
  }

  .ms-m-hero {
    min-height: 190px;
    padding: 20px 18px 16px;
  }

  .ms-m-hero h3 {
    font-size: 23px;
  }

  .ms-m-about,
  .ms-m-stats {
    margin-inline: 18px;
  }

  .ms-m-films {
    padding-inline: 10px;
  }
}

/* ---- Admin → Marathons ---- */
.btn.cc-danger:hover {
  border-color: transparent;
  background: var(--accent-hover);
  color: #fff;
}

.cc-mt-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.cc-mt-mood {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 999px;
  background: var(--glass-bg, var(--surface-2));
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.cc-mt-mood small {
  color: var(--text-muted);
  font-weight: 600;
}

.cc-mt-mood.on {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.cc-mt-mood.on small {
  color: rgba(255, 255, 255, 0.75);
}

.cc-mt-mood.off {
  opacity: 0.55;
}

.cc-mt-mood.add {
  border-style: dashed;
  color: var(--text-muted);
}

.cc-mt-moodbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.cc-mt-moodbar .cc-field {
  flex: 1 1 220px;
  margin: 0;
}

.cc-mt-moodbar .cc-mt-emoji {
  flex: 0 0 90px;
}

.cc-mt-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-mt-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.cc-mt-tile {
  position: relative;
  border-radius: 20px;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.3s ease;
}

.cc-mt-tile.on {
  outline-color: var(--accent-hover);
}

.cc-mt-tile.off .ms-box {
  opacity: 0.5;
}

.cc-mt-tile .ms-box {
  width: 100%;
}

.cc-mt-tile .ms-txt {
  padding: 0 14px 12px;
}

.cc-mt-tile .ms-txt strong {
  font-size: 24px;
}

.cc-mt-tile .ms-txt small,
.cc-mt-tile .ms-strip {
  display: none;
}

.cc-mt-tile .ms-box:hover .ms-txt {
  transform: none;
}

.cc-mt-hidden {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.cc-mt-new {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 120px;
  border: 2px dashed var(--border);
  border-radius: 18px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.cc-mt-new:hover {
  border-color: var(--accent-hover);
  color: var(--text);
}

.cc-mt-new i {
  font-size: 20px;
}

.cc-mt-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.cc-mt-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-mt-label small {
  margin-left: 4px;
  color: var(--text);
}

.cc-mt-big .ms-box {
  width: 100%;
  cursor: default;
}

.cc-mt-preview .cc-mt-acts {
  margin-top: 12px;
}

.cc-mt-form {
  display: grid;
  align-content: start;
  gap: 10px;
}

.cc-mt-form .cc-field {
  margin: 0;
}

.cc-mt-form textarea.input {
  height: auto;
  min-height: 64px;
  padding-top: 10px;
  border-radius: 14px;
  resize: vertical;
}

.cc-mt-bgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.cc-mt-bg {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 92px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.cc-mt-bg small {
  font-size: 11px;
  font-weight: 700;
}

.cc-mt-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-mt-bg.on {
  border-color: var(--accent-hover);
}

.cc-mt-wait {
  align-self: center;
  color: var(--text-muted);
}

.cc-mt-films ol {
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.cc-mt-films li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-2);
}

.cc-mt-films li.missing {
  outline: 1px dashed rgba(255, 107, 111, 0.6);
}

.cc-mt-fpic {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
}

.cc-mt-fpic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-mt-ft {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.cc-mt-ft strong {
  overflow: hidden;
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-mt-ft small {
  color: var(--text-muted);
  font-size: 12px;
}

.cc-mt-facts {
  display: flex;
  gap: 2px;
}

.cc-mt-facts button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cc-mt-facts button:hover:not(:disabled) {
  background: var(--surface);
  color: var(--text);
}

.cc-mt-facts button[data-mt-del]:hover {
  background: var(--accent-hover);
  color: #fff;
}

.cc-mt-facts button:disabled {
  opacity: 0.3;
  cursor: default;
}

.cc-mt-found {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.cc-mt-foot {
  margin: 18px 0 0;
}

@media (max-width: 1200px) {
  .cc-mt-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cc-mt-preview {
    grid-column: 1 / -1;
    max-width: 460px;
  }
}

@media (max-width: 700px) {
  .cc-mt-editor {
    grid-template-columns: 1fr;
  }
}

/* Admin → Marathons: a mood's heading as members see it; its colour and font pickers */
.cc-mt-headprev {
  margin: 0 0 12px;
}

.cc-mt-moodbar .cc-mt-colour {
  flex: 0 0 90px;
}

.cc-mt-colour input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

.cc-mt-moodbar .cc-mt-font {
  flex: 0 0 170px;
}