@import "tokens.css";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Lao Sangam MN";
  src: url("../../assets/fonts/Lao Sangam MN.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Lao Sangam MN", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

:focus-visible {
  outline: 2px solid rgba(var(--pink), 0.9);
  outline-offset: 2px;
}

/* custom cursors. !important is load-bearing: the global layer must beat per-page
   `cursor:` rules on ~90 elements. svg cursors fall back to the post-comma keyword in
   Safari. inlined as data URIs so there's no file-fetch flash of the OS cursor. */
:root {
  --cur-default: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cpath%20d=%22M4%204%2011.07%2021%2013.58%2013.61%2021%2011.07Z%22%20fill=%22%23ffffff%22%20stroke=%22%23BC6676%22%20stroke-width=%221.3%22%20stroke-linejoin=%22round%22/%3E%20%3C/svg%3E") 4 4, default;
  --cur-pointer: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cpath%20d=%22M8%2012%20V5.6%20a1.6%201.6%200%200%201%203.2%200%20V10%20h4.4%20a3.4%203.4%200%200%201%203.4%203.4%20v2.4%20a4%204%200%200%201%20-4%204%20h-4%20a4%204%200%200%201%20-3.35%20-1.8%20l-2.1%20-3.2%20a1.45%201.45%200%200%201%202.2%20-1.85%20L8%2013%20Z%22%20fill=%22%23ffffff%22%20stroke=%22%23BC6676%22%20stroke-width=%221.2%22%20stroke-linejoin=%22round%22/%3E%20%3C/svg%3E") 9 4, pointer;
  --cur-text: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cpath%20d=%22M9%204.5H15V6H13V18H15V19.5H9V18H11V6H9Z%22%20fill=%22%23ffffff%22%20stroke=%22%23BC6676%22%20stroke-width=%220.8%22%20stroke-linejoin=%22round%22/%3E%20%3C/svg%3E") 12 12, text;
}

/* inherit (not force arrow on `*`) so a button's child <img> keeps the hand */
html { cursor: var(--cur-default) !important; }
* { cursor: inherit !important; }

a, button, summary, select, label[for], [role="button"], [role="tab"], [role="menuitem"],
[onclick],
input[type="button"], input[type="submit"], input[type="reset"],
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"],
.genre-btn, .provider-item, .tab-btn, .cb-slider-dot, .cb-toggle, .cb-tag-more,
.cb-tag-remove, .spin-btn, .save-btn, .winner-action, .winner-close, .ai-mode-btn,
.back-btn, .nav-link, .icon-btn, .surprise-container, .cb-add-btn, .wheel-add-btn,
.row-edit, .row-delete, .ai-info-btn, .ai-winner-btn, .ai-tryagain, .movie-card,
.mobile-nav-toggle, .header-login-btn, .header-profile-btn, .provider-clear-btn {
  cursor: var(--cur-pointer) !important;
}

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"], input:not([type]),
textarea, [contenteditable="true"] {
  cursor: var(--cur-text) !important;
}

/* must follow the pointer rule so it wins for elements matching both */
:disabled, [disabled], [aria-disabled="true"],
.generate-wheel-btn--disabled, .save-btn--disabled,
.genre-btn--unavailable, .provider-item--unavailable {
  cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
  /* !important needed to override every animation/transition regardless of specificity */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(var(--ink), 0.8);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.toastify.mk-toast {
  width: -moz-fit-content;
  width: fit-content;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 90vw;
  line-height: 1.35;
}

.app-body {
  background-image: url("../../assets/images/movie-knight-gradient-bg.svg");
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  /* no overflow-x: hidden, it hid zoomed-in content (the wheel) with no way to scroll */
}

.app-container {
  --rail-width: clamp(200px, 14vw, 250px);
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* feature pages drop the left rail on desktop; still reached on mobile via hamburger */
@media (min-width: 1025px) {
  .feature-page .sidebar,
  .feature-page .user-rail {
    display: none;
  }
}

.sidebar {
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  position: sticky;
  overflow-y: auto;
  flex-shrink: 0;
  top: 0;
  height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-logo .nav-logo {
  padding: 30px 20px;
  min-width: 137px;
  min-height: 182.66px;
  margin-bottom: 10px;
}

.nav-logo {
  transition: transform var(--t-slow) var(--ease-pop);
  transform-origin: center;
  display: block;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-grow: 1;
}

.settings-container {
  position: relative; /* anchors the ::before active-indicator */
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  transition: background-color 0.3s ease;
  width: fit-content;
}

.settings-container.open {
  background-color: var(--overlay-weak);
}

.settings-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border-left: 3px solid rgba(var(--pink), 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}

.settings-container.open::before {
  opacity: 1;
}

.settings-container.open .nav-link {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: transparent;
}

/* while open, ::before is the active indicator; kill the toggle's hover line so two
   pink lines don't sit 4px apart */
.settings-container.open #settingsToggleBtn:hover {
  transform: none;
  box-shadow: none;
}

#settingsToggleBtn {
  display: flex;
  align-items: center;
  gap: 18px;
}

.custom-gear {
  transition: transform 1s ease;
  transform-origin: 50% 50%;
  opacity: 0.7;
}

.settings-container.open .custom-gear {
  transform: rotate(360deg);
}

.settings-submenu a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    color 0.2s ease,
    transform var(--t-fast) var(--ease-snap);
}

.settings-submenu a:hover {
  color: var(--text);
  transform: translateX(3px);
}

.settings-arrow {
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: transform 0.6s ease;
  opacity: 0.7;
  transform: rotate(-90deg);
}

.settings-container.open .settings-arrow {
  transform: rotate(0deg);
}

.settings-submenu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* open height set inline (= scrollHeight). padding isn't transitioned and is always
     present so scrollHeight measures the full padded height, else the bottom row clips. */
  transition:
    max-height 0.35s var(--ease-snap),
    opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 5px 0 20px 50px;
}

.settings-container.open .settings-submenu {
  max-height: 200px; /* fallback; JS sets exact px height inline */
  opacity: 1;
}
.about-link {
  margin-top: auto;
  margin-bottom: 110px;
}

.about-link img {
  opacity: 70%;
  padding-left: 18px;
}

.about-link span {
  padding-left: 10px;
}

.nav-link {
  width: 194px;
  min-height: 50px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  background-color: rgba(var(--pink), 0.03);
  color: var(--text-dim);
  text-decoration: none;
  padding: 10px 15px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  transition:
    background-color var(--t-base),
    color var(--t-base),
    transform var(--t-base) var(--ease-snap),
    box-shadow var(--t-base);
}

.nav-link img,
.nav-link .nav-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  padding: 0;
}

.nav-link:hover img {
  transform: scale(1.12);
}

.nav-link:hover {
  background-color: var(--overlay);
  color: var(--text);
  transform: translateX(4px);
  box-shadow: inset 3px 0 0 0 rgba(var(--pink), 0.9);
}
.nav-link.active {
  background-color: var(--overlay);
  color: var(--text);
}

.main-content {
  --content-width: 1640px;
  flex: 1;
  min-width: 0;
  padding: 30px 40px 100px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.top-header {
  margin-top: 42px;
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.user-rail {
  width: var(--rail-width);
  flex-shrink: 0;
  padding: 24px 0 0 0;
  justify-content: center;
  display: flex;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.header-login-btn {
  appearance: none;
  border: 0px;
  border-radius: 12px;
  min-width: 129.63px;
  min-height: 48.85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--pink-alt), 0.13);
  color: var(--text-muted);
  font-size: 25px;
  cursor: pointer;
  transition:
    background-color var(--t-slow),
    transform var(--t-fast) var(--ease-snap);
}
.header-login-btn p {
  margin: 0;
  padding: 0;
}

.header-login-btn:hover {
  background-color: rgba(var(--pink-alt), 0.3);
  cursor: pointer;
}

.header-login-btn:active {
  background: rgba(var(--pink-alt), 0.7);
  transform: scale(0.96);
}

.user-profile-display {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  position: relative;
}

/* .x[hidden] specificity needed to beat the display:flex above; UA [hidden] loses to it */
.user-profile-display[hidden],
.settings-container[hidden] {
  display: none;
}

.user-welcome {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.2;
}

.welcome-text {
  color: var(--text-muted);
  font-size: 16px;
}

.username-text {
  color: var(--text);
  font-size: 16px;
}

.header-profile-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

/* kill the button's focus ring so it renders on .profile-pic instead */
.header-profile-btn:focus-visible {
  outline: none;
}

.profile-pic {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgba(var(--pink), 0.13);
  transition:
    box-shadow var(--t-base) ease,
    background-color var(--t-base) ease,
    transform var(--t-base) var(--ease-pop);
}

.user-profile-display:hover .profile-pic {
  background-color: rgba(var(--pink), 0.25);
  box-shadow: 0 0 0 2px rgba(var(--pink), 0.8);
  transform: scale(1.05);
}

.header-profile-btn:focus-visible .profile-pic {
  box-shadow: 0 0 0 2px rgba(var(--pink), 0.8);
}

.header-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 150px;
  background-color: var(
    --surface-menu
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity var(--t-base) ease,
    transform var(--t-base) var(--ease-snap);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.header-dropdown.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.header-dropdown a {
  padding: 10px 20px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.header-dropdown a:hover {
  background-color: var(--overlay-weak);
  color: var(--text);
}

/* scoped under .header-dropdown a so it out-specifies the base link color/hover rules */
.header-dropdown a.danger-text {
  color: rgb(var(--danger));
}
.header-dropdown a.danger-text:hover {
  background-color: rgba(var(--danger), 0.1);
}

.dropdown-user {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 20px 10px;
}
.dropdown-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "out" state stays muted, not danger-red; Sign Out below owns danger-red */
.dropdown-ai-usage {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-soft);
}
.dropdown-ai-usage.is-low {
  color: rgb(var(--warn));
}
.dropdown-ai-usage.is-out {
  color: var(--text-muted);
}

/* quota bar; width set inline by common.js, color driven by state class on the track */
.ai-bar {
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--overlay);
  overflow: hidden;
}
.ai-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: rgb(var(--pink));
  transition:
    width var(--t-base) ease,
    background-color var(--t-base) ease;
}
.ai-bar.is-low .ai-bar-fill {
  background: rgb(var(--warn));
}
/* out: fill is 0-width so the empty track carries the faded state */
.ai-bar.is-out {
  background: rgba(var(--warn), 0.1);
}
.dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-base) ease,
    visibility var(--t-base);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background-color: var(--surface-dropdown);
  border: 1px solid var(--overlay);
  border-radius: 16px;
  padding: 28px 32px;
  width: 360px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--t-base) var(--ease-pop);
}

.modal-overlay.show .modal-card {
  transform: translateY(0) scale(1);
}

.modal-title {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.modal-text {
  color: var(--text-soft);
  font-size: 16px;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.modal-btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition:
    background-color var(--t-base) ease,
    transform var(--t-fast) var(--ease-snap);
}

.modal-btn:active {
  transform: scale(0.96);
}

.modal-btn--ghost {
  background: var(--overlay);
  color: var(--text);
}

.modal-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}

.modal-btn--danger {
  background: rgba(var(--danger), 0.85);
  color: #fff;
}

.modal-btn--danger:hover {
  background: rgb(var(--danger));
}

.mobile-topbar {
  display: none;
}
.mobile-nav-toggle {
  display: none;
}
.nav-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .app-container {
    flex-direction: column;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    padding: 12px 16px;
    background: rgba(30, 16, 22, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
    margin-right: auto; /* keep auth widget pinned right */
  }

  .mobile-brand-knight {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .mobile-brand-text {
    height: 24px;
    width: auto;
    max-width: 60vw;
    object-fit: contain;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(var(--pink), 0.13);
    cursor: pointer;
    transition:
      background-color var(--t-base) ease,
      transform var(--t-fast) var(--ease-snap);
  }

  .mobile-nav-toggle:hover {
    background: rgba(var(--pink), 0.25);
  }

  .mobile-nav-toggle:active {
    transform: scale(0.94);
  }

  .mobile-nav-toggle img {
    width: 22px;
    height: 22px;
  }

  .sidebar-logo {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 64px;
    left: 12px;
    width: min(76vw, 270px);
    height: auto;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    padding: 10px;
    background: rgba(42, 22, 30, 0.98);
    border: 1px solid var(--overlay);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    z-index: 1300;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity var(--t-base) ease,
      transform var(--t-base) var(--ease-snap);
  }

  body.nav-open .sidebar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav {
    gap: 6px;
  }

  .settings-container {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    min-height: 50px;
    font-size: 20px;
    padding: 12px 16px;
    border-radius: 12px;
    gap: 14px;
  }

  .nav-link:hover {
    transform: none;
  }

  .nav-link.active {
    background: rgba(var(--pink), 0.15);
  }

  .nav-link img,
  .nav-link .nav-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    padding: 0;
  }

  .about-link img {
    padding-left: 0;
  }

  .about-link span {
    padding-left: 0;
  }

  .about-link {
    margin-top: 14px;
    margin-bottom: 4px;
  }

  /* backdrop dim, closes the menu on tap */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) ease;
    z-index: 1200;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .user-rail {
    display: none;
  }

  .main-content {
    padding: 16px 16px 64px;
    gap: 16px;
  }

  .top-header {
    margin-top: 0;
  }

  .mobile-topbar .user-welcome {
    text-align: right;
  }

  .mobile-topbar .welcome-text {
    font-size: 13px;
  }

  .mobile-topbar .username-text {
    font-size: 14px;
  }

  .mobile-topbar .header-login-btn {
    font-size: 18px;
    min-width: 0;
    min-height: 42px;
    padding: 0 18px;
  }

  .mobile-topbar .profile-pic {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 560px) {
  .mobile-brand-knight {
    height: 32px;
  }

  .mobile-brand-text {
    height: 21px;
  }

  .mobile-topbar .user-welcome {
    display: none;
  }
  
  .mobile-topbar .profile-pic {
    width: 40px;
    height: 40px;
  }
}

/* collection cover collage (profile grid + Add-to-Collection modal), built by
   window.buildCollectionCover() in common.js.
   fixed 2:3 box so every card cover is the same height; tiles fill it, never drive it */
.collection-cover {
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border-radius: 1px;
  transition: transform var(--t-base) var(--ease-snap);
}
.collection-card:hover .collection-cover {
  transform: scale(1.05);
}
.collection-cover .cover-tile {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  background: #4f454b; /* fallback so a broken poster is never a blank cell */
}
.cover-tile--empty {
  background: #4f454b;
}
/* buildCollectionCover() applies exactly one layout per cover, matched to movie count
   and card shape. desktop = 2:3 box, mobile = 5:2 banner (profile responsive.css). */
.cover-d1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.cover-dstack-2 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.cover-dstack-3 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.cover-dgrid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.cover-m1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.cover-m2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.cover-mcols-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}
.cover-mcols-4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
}

/* empty (0-movie) cover: checkerboard with a centered circled "+" that opens the modal */
.cover-empty {
  position: relative;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(#e9e9e9 0% 25%, #ffffff 0% 50%) 0 0 / 44px 44px;
  cursor: pointer;
}
.cover-empty__plus {
  content: "";
  width: 56px;
  height: 56px;
  /* one color drives the ring + the "+" bars via currentColor so they darken together */
  color: rgba(0, 0, 0, 0.42);
  border: 4px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 26px 4px no-repeat,
    linear-gradient(currentColor, currentColor) center / 4px 26px no-repeat;
  transition: color var(--t-base) ease;
}
.collection-card:hover .cover-empty__plus {
  color: rgba(0, 0, 0, 0.62);
}

/* cancel the empty cover's hover zoom so the CSS "+" stays sharp; poster covers zoom */
.collection-card:hover .collection-cover.cover-empty {
  transform: none;
}

/* server-down maintenance curtain. common.js drops this full-screen when api.js can't
   reach the backend at all. terminal state, no back button. self-contained so it works
   on every page that loads common.css with no per-page markup. */
body.mk-maint-open { overflow: hidden; }
/* hide any toast underneath; Toastify pins to max z-index so we can't out-stack it */
body.mk-maint-open .toastify { display: none; }

.mk-maint {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    background:
        radial-gradient(ellipse at 50% 42%, #3a2127 0%, #1c0f14 58%, #0a0608 100%);
}

/* two velvet panels: sweep closed, pause, then settle open leaving copy in the gap */
.mk-maint-curtain {
    position: absolute;
    top: 0;
    height: 145vh;
    width: 76vw;
    z-index: 3;
    overflow: hidden;
    transform-origin: top center;
    background-color: #7d1820;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.5) 0px,
            rgba(0, 0, 0, 0.08) 16px,
            rgba(255, 255, 255, 0.10) 31px,
            rgba(0, 0, 0, 0.08) 46px,
            rgba(0, 0, 0, 0.5) 62px),
        linear-gradient(90deg, #450b11, #8e1c24 50%, #450b11);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
    will-change: transform;
}

/* diagonal stage-light gleam sweeping across the closed velvet during the hold */
.mk-maint-curtain::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -40%;
    width: 60%;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 235, 210, 0.16) 50%,
        transparent 60%);
    opacity: 0;
    animation: mk-maint-sheen 2.4s ease-in-out 0.35s 1 forwards;
}

@keyframes mk-maint-sheen {
    0%   { opacity: 0;   transform: translateX(0); }
    25%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translateX(240%); }
}

.mk-maint-curtain--right::before {
    left: auto;
    right: -40%;
    background: linear-gradient(255deg,
        transparent 40%,
        rgba(255, 235, 210, 0.16) 50%,
        transparent 60%);
    animation-name: mk-maint-sheen-right;
}

@keyframes mk-maint-sheen-right {
    0%   { opacity: 0;   transform: translateX(0); }
    25%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translateX(-240%); }
}

.mk-maint-curtain--left {
    left: -22vw;
    box-shadow: inset -34px 0 55px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(0, 0, 0, 0.45);
    animation: mk-maint-curtain-left 3.2s cubic-bezier(0.62, 0.02, 0.2, 1) forwards;
}

.mk-maint-curtain--right {
    right: -22vw;
    box-shadow: inset 34px 0 55px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(0, 0, 0, 0.45);
    animation: mk-maint-curtain-right 3.2s cubic-bezier(0.62, 0.02, 0.2, 1) forwards;
}

@keyframes mk-maint-curtain-left {
    0%   { transform: translateX(0) rotate(0deg) skewX(0deg); }
    16%  { transform: translateX(0) rotate(0deg) skewX(0deg); }
    34%  { transform: translateX(-3vw) rotate(-11deg) skewX(3deg); }
    62%  { transform: translateX(-24vw) rotate(-5deg) skewX(1.5deg); }
    84%  { transform: translateX(-32vw) rotate(2.5deg) skewX(-1.5deg); }
    93%  { transform: translateX(-29vw) rotate(-1deg) skewX(0.6deg); }
    100% { transform: translateX(-30vw) rotate(0deg) skewX(0deg); }
}

@keyframes mk-maint-curtain-right {
    0%   { transform: translateX(0) rotate(0deg) skewX(0deg); }
    16%  { transform: translateX(0) rotate(0deg) skewX(0deg); }
    34%  { transform: translateX(3vw) rotate(11deg) skewX(-3deg); }
    62%  { transform: translateX(24vw) rotate(5deg) skewX(-1.5deg); }
    84%  { transform: translateX(32vw) rotate(-2.5deg) skewX(1.5deg); }
    93%  { transform: translateX(29vw) rotate(1deg) skewX(-0.6deg); }
    100% { transform: translateX(30vw) rotate(0deg) skewX(0deg); }
}

/* draped scalloped swag pinned across the top, never moves */
.mk-maint-valance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(96px, 19vh, 200px);
    z-index: 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a51f29'/%3E%3Cstop offset='1' stop-color='%234d0c12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 H1000 V95 Q900,185 800,95 Q700,185 600,95 Q500,185 400,95 Q300,185 200,95 Q100,185 0,95 Z' fill='url(%23v)'/%3E%3Cpath d='M1000,95 Q900,185 800,95 Q700,185 600,95 Q500,185 400,95 Q300,185 200,95 Q100,185 0,95' fill='none' stroke='%23d9b15a' stroke-width='3' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

/* revealed in the central gap as the curtains part */
.mk-maint-content {
    position: relative;
    z-index: 2;
    max-width: min(560px, 86vw);
    padding: 0 24px;
    text-align: center;
    opacity: 0;
    animation: mk-maint-reveal 1.1s ease 1.6s forwards;
}

@keyframes mk-maint-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mk-maint-eyebrow {
    margin: 0 0 10px;
    font-size: 16px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(var(--pink-alt), 0.85);
}

.mk-maint-title {
    margin: 0;
    font-size: clamp(40px, 8vw, 78px);
    line-height: 1.05;
    font-weight: 400;
    color: var(--text);
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.mk-maint-copy {
    margin: 20px auto 0;
    font-size: clamp(17px, 2.2vw, 21px);
    line-height: 1.6;
    color: var(--text-soft);
}

@media (max-width: 600px) {
    .mk-maint-curtain { width: 84vw; }
    .mk-maint-content { z-index: 6; max-width: 80vw; padding: 0 14px; }
    .mk-maint-eyebrow { font-size: 11px; letter-spacing: 2.5px; margin-bottom: 7px; }
    .mk-maint-title   { font-size: clamp(26px, 8.6vw, 40px); }
    .mk-maint-copy    { font-size: clamp(13px, 3.6vw, 16px); margin-top: 14px; line-height: 1.5; }

    @keyframes mk-maint-curtain-left {
        0%, 16% { transform: translateX(0) rotate(0deg) skewX(0deg); }
        34%     { transform: translateX(-4vw) rotate(-11deg) skewX(3deg); }
        62%     { transform: translateX(-30vw) rotate(-5deg) skewX(1.5deg); }
        84%     { transform: translateX(-38vw) rotate(2.5deg) skewX(-1.5deg); }
        93%     { transform: translateX(-35vw) rotate(-1deg) skewX(0.6deg); }
        100%    { transform: translateX(-36vw) rotate(0deg) skewX(0deg); }
    }
    @keyframes mk-maint-curtain-right {
        0%, 16% { transform: translateX(0) rotate(0deg) skewX(0deg); }
        34%     { transform: translateX(4vw) rotate(11deg) skewX(-3deg); }
        62%     { transform: translateX(30vw) rotate(5deg) skewX(-1.5deg); }
        84%     { transform: translateX(38vw) rotate(-2.5deg) skewX(1.5deg); }
        93%     { transform: translateX(35vw) rotate(1deg) skewX(-0.6deg); }
        100%    { transform: translateX(36vw) rotate(0deg) skewX(0deg); }
    }
}

/* reduced motion: skip sweep + gleam, land on the final revealed state */
@media (prefers-reduced-motion: reduce) {
    .mk-maint-curtain--left  { animation: none; transform: translateX(-30vw); }
    .mk-maint-curtain--right { animation: none; transform: translateX(30vw); }
    .mk-maint-curtain::before { animation: none; opacity: 0; }
    .mk-maint-content { animation: none; opacity: 1; }
}