/*
 * PAGE THEME: Crash Bandicoot — wumpa island, citrus orange & island blue
 * Playlist PLezsbUDiwcpn9zaJbHMNtaNWdWxEwRmgp
 *
 * Official art (supply locally): images/themes/official/crash/page-bg.jpg, header-deco.png
 */
@import url('/styles/game-theme-fonts.css');
.theme-playlist-crash {
  --official-header-deco: url('/images/themes/official/crash/header-deco.png');
  --primary-color: #ea580c;
  --primary-color-hover: #c2410c;
  --primary-color-rgb: 234, 88, 12;
  --pl-sand: #fffbeb;
  --pl-sky: #1d4ed8;
  --pl-palm: #15803d;
}

.theme-playlist-crash,
.theme-playlist-crash * {
  --primary-color: #ea580c;
  --primary-color-hover: #c2410c;
  --primary-color-rgb: 234, 88, 12;
}

.theme-playlist-crash {
  background-color: #fff7ed !important;
  background-image: linear-gradient(
      185deg,
      rgba(255, 251, 235, 0.82) 0%,
      rgba(255, 237, 213, 0.78) 38%,
      rgba(253, 186, 116, 0.75) 85%,
      rgba(234, 88, 12, 0.55) 165%
    ),
    url('/styles/themes/bg/crash.webp'), url('/images/themes/crash-wumpa-watermark.svg'),
    radial-gradient(circle at 12% 22%, rgba(251, 191, 36, 0.22) 0%, transparent 38%),
    repeating-linear-gradient(90deg, rgba(234, 88, 12, 0.04) 0px, rgba(234, 88, 12, 0.04) 1px, transparent 1px, transparent 14px),
    linear-gradient(185deg, #fffbeb 0%, #ffedd5 38%, #fdba74 85%, #ea580c 165%) !important;
  background-size: 100% 100%, cover, min(380px, 85vw) auto, 100% 100%, auto, 100% 100%;
  background-position: center, center, right -1.5rem top 2rem, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
  font-family: 'Rubik', system-ui, sans-serif;
  position: relative;
}

.theme-playlist-crash h1,
.theme-playlist-crash h2,
.theme-playlist-crash .episodes-title {
  font-family: 'Crash A Like', 'Rubik', fantasy, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.theme-playlist-crash::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(29, 78, 216, 0.08) 0%, transparent 70%);
}

.theme-playlist-crash .main-content {
  position: relative;
  z-index: 1;
  background: transparent;
}

.theme-playlist-crash app-top-header {
  background: linear-gradient(90deg, rgba(29, 78, 216, 0.08) 0%, rgba(234, 88, 12, 0.06) 100%) !important;
  border-bottom: 1px solid rgba(234, 88, 12, 0.2) !important;
}

.theme-playlist-crash app-top-header .contact-info,
.theme-playlist-crash app-top-header .contact-info a {
  color: #7c2d12 !important;
}

.theme-playlist-crash app-top-header .contact-info a:hover {
  color: #1d4ed8 !important;
}

.theme-playlist-crash app-top-header .social-icon {
  color: #9a3412 !important;
}

.theme-playlist-crash app-main-header .content {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(29, 78, 216, 0.15) !important;
}

.theme-playlist-crash app-main-header .content.sticky {
  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.12) !important;
}

.theme-playlist-crash app-main-header .content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 25%, #ea580c 50%, #f97316 75%, #15803d 100%);
  pointer-events: none;
}

.theme-playlist-crash app-main-header .logo span {
  color: #7c2d12 !important;
  font-family: 'Crash A Like', 'Rubik', fantasy, sans-serif !important;
  font-weight: 400 !important;
}

.theme-playlist-crash app-main-header .desktop-menu a {
  color: #431407 !important;
}

.theme-playlist-crash app-main-header .desktop-menu a:hover,
.theme-playlist-crash app-main-header .desktop-menu a.active {
  color: #ea580c !important;
}

.theme-playlist-crash app-main-header .desktop-menu a.active::after {
  background-color: #ea580c !important;
}

.theme-playlist-crash app-main-header .hamburger-button span {
  background-color: #431407 !important;
}

.theme-playlist-crash app-main-header .submenu {
  background: #fff !important;
  border: 1px solid rgba(234, 88, 12, 0.18) !important;
  box-shadow: 0 12px 36px rgba(29, 78, 216, 0.12) !important;
}

.theme-playlist-crash app-main-header .submenu a:hover {
  background: rgba(254, 215, 170, 0.45) !important;
  color: #c2410c !important;
  border-left-color: #ea580c !important;
}

.theme-playlist-crash app-main-header .mobile-menu {
  background: #fff7ed !important;
}

.theme-playlist-crash app-main-header .cart-menu-trigger {
  color: #431407 !important;
}

.theme-playlist-crash app-footer {
  background: linear-gradient(180deg, #1e3a5f 0%, #172554 100%) !important;
  border-top: 3px solid #ea580c !important;
}

.theme-playlist-crash app-footer .container {
  color: rgba(255, 237, 213, 0.75) !important;
}

.theme-playlist-crash app-footer a {
  color: #fdba74 !important;
}

.theme-playlist-crash app-footer a:hover {
  color: #fff !important;
}

/* ═══ Playlist detail component chrome (migrated from SCSS) ═══ */
@charset "UTF-8";
/* ═══ Crash Bandicoot — isla wumpa ═══ */
.theme-playlist-crash {
  font-family: "Rubik", system-ui, sans-serif !important;
}
.theme-playlist-crash .playlist-detail-page .detail-layout > .back-link {
  color: #c2410c !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}
.theme-playlist-crash .playlist-detail-page .playlist-header {
  padding: 1.35rem 1.5rem 1.5rem !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fff 0%, #ffedd5 50%, #fed7aa 100%) !important;
  border: 2px solid rgba(234, 88, 12, 0.25) !important;
  box-shadow: 0 10px 36px rgba(234, 88, 12, 0.12) !important;
  margin-bottom: 28px !important;
  position: relative !important;
}
.theme-playlist-crash .playlist-detail-page .playlist-header h1 {
  font-family: "Crash A Like", "Rubik", fantasy, sans-serif !important;
  color: #7c2d12 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  font-size: 1.85rem !important;
}
.theme-playlist-crash .playlist-detail-page .playlist-header .playlist-description {
  color: #9a3412 !important;
  font-weight: 500 !important;
}
.theme-playlist-crash .playlist-detail-page .video-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(29, 78, 216, 0.15) !important;
  border: 3px solid #ea580c !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-title {
  font-family: "Crash A Like", "Rubik", fantasy, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #7c2d12 !important;
}
.theme-playlist-crash .playlist-detail-page .episode {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 2px solid rgba(251, 146, 60, 0.35) !important;
  color: #431407 !important;
}
.theme-playlist-crash .playlist-detail-page .episode:hover {
  background: #fff !important;
  border-color: #ea580c !important;
  transform: translateY(-1px) !important;
  transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
}
.theme-playlist-crash .playlist-detail-page .episode.current {
  background: linear-gradient(90deg, rgba(254, 215, 170, 0.8) 0%, rgba(191, 219, 254, 0.6) 100%) !important;
  border-color: #1d4ed8 !important;
  font-weight: 700 !important;
}
.theme-playlist-crash .playlist-detail-page .episode .episode-num {
  color: #ea580c !important;
  font-weight: 800 !important;
}
.theme-playlist-crash .playlist-detail-page .episode .episode-duration {
  color: #7c2d12 !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-column .episodes-list {
  scrollbar-width: thin !important;
  scrollbar-color: #ea580c rgba(254, 243, 199, 0.65) !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-column .episodes-list::-webkit-scrollbar {
  width: 10px !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-column .episodes-list::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 215, 170, 0.55) 100%) !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
  box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.2) !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-column .episodes-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 50%, #1d4ed8 100%) !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35) !important;
}
.theme-playlist-crash .playlist-detail-page .episodes-column .episodes-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 70%) !important;
}
.theme-playlist-crash .playlist-detail-page.playlist-detail-page--fanwrap .playlist-header {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 237, 213, 0.9) 50%, rgba(254, 215, 170, 0.92) 100%), var(--official-header-deco), url("/images/themes/crash-wumpa-watermark.svg") !important;
  background-size: 100% 100%, min(200px, 48vw) auto, min(160px, 45vw) auto !important;
  background-position: 0 0, right -0.35rem top -0.75rem, right -0.5rem top -1rem !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.theme-playlist-crash .playlist-detail-page.playlist-detail-page--fanwrap .video-column {
  position: relative !important;
  padding-top: 0.85rem !important;
}
.theme-playlist-crash .playlist-detail-page.playlist-detail-page--fanwrap .video-column::before {
  content: "N. Sane playback";
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999999 !important;
  padding: 0.22rem 0.6rem !important;
  border-radius: 8px !important;
  font-family: "Crash A Like", "Rubik", fantasy, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #7c2d12 !important;
  background: #fff !important;
  border: 2px dashed #ea580c !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.2) !important;
}
.theme-playlist-crash .playlist-detail-page.playlist-detail-page--fanwrap .episodes-column {
  padding: 14px 12px 16px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  border: 2px solid rgba(234, 88, 12, 0.28) !important;
  box-shadow: 0 10px 32px rgba(234, 88, 12, 0.12) !important;
}
.theme-playlist-crash .playlist-detail-page.playlist-detail-page--fanwrap .current-video-description {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 237, 213, 0.9) 50%, rgba(254, 215, 170, 0.92) 100%), var(--official-header-deco), url("/images/themes/crash-wumpa-watermark.svg") !important;
  background-size: 100% 100%, min(200px, 48vw) auto, min(160px, 45vw) auto !important;
  background-position: 0 0, right -0.35rem top -0.75rem, right -0.5rem top -1rem !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.theme-playlist-crash .playlist-detail-page .current-video-description {
  margin-top: 28px !important;
  padding: 1.35rem 1.5rem 1.5rem !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fff 0%, #ffedd5 50%, #fed7aa 100%) !important;
  border: 2px solid rgba(234, 88, 12, 0.25) !important;
  box-shadow: 0 10px 36px rgba(234, 88, 12, 0.12) !important;
  position: relative !important;
}
.theme-playlist-crash .playlist-detail-page .current-video-description::before {
  content: "";
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 8px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #1d4ed8, #ea580c, #15803d) !important;
  opacity: 0.85 !important;
}
.theme-playlist-crash .playlist-detail-page .current-video-description__title {
  margin: 0 0 10px !important;
  padding-top: 0.35rem !important;
  font-family: "Crash A Like", "Rubik", fantasy, sans-serif !important;
  color: #7c2d12 !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
}
.theme-playlist-crash .playlist-detail-page .current-video-description__body {
  margin: 0 !important;
  color: #9a3412 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
.theme-playlist-crash .playlist-detail-page .current-video-description__toggle {
  color: #c2410c !important;
}
.theme-playlist-crash app-related-content .related-content {
  --related-surface: linear-gradient(135deg, #fff 0%, #ffedd5 50%, #fed7aa 100%);
  --related-border: rgba(234, 88, 12, 0.25);
  --related-title-color: #7c2d12;
  --related-label-color: #9a3412;
  --related-description-color: #9a3412;
  --related-meta-color: #c2410c;
  --related-shadow: 0 10px 36px rgba(234, 88, 12, 0.12);
  --related-card-bg-hover: rgba(234, 88, 12, 0.08);
}

/* ═══ Comment thread tokens (migrated from theme-comments.scss) ═══ */

.theme-playlist-crash .playlist-detail-page .playlist-detail-comments {
  --primary-color: #ea580c;
  --cs-slug-loading-text: #9a3412;
  --cs-slug-spinner-track: #fed7aa;
  --cs-slug-missing-bg: #fef2f2;
  --cs-slug-missing-text: #991b1b;
  --cs-slug-missing-border: transparent;
  --cs-title-color: #7c2d12;
  --cs-sort-border: rgba(234, 88, 12, 0.28);
  --cs-sort-text: #9a3412;
  --cs-sort-hover-text: #7c2d12;
  --cs-sort-bg: rgba(255, 255, 255, 0.65);
  --cs-dropdown-bg: #fff;
  --cs-dropdown-border: rgba(234, 88, 12, 0.22);
  --cs-dropdown-shadow: 0 10px 32px rgba(234, 88, 12, 0.12);
  --cs-dropdown-item: #7c2d12;
  --cs-dropdown-item-hover: rgba(234, 88, 12, 0.08);
  --cs-empty-text: #c2410c;
  --cs-empty-icon-opacity: 0.35;
  --cs-list-divider: rgba(234, 88, 12, 0.15);
  --cs-overlay-bg: rgba(255, 255, 255, 0.78);
  --cs-spinner-track: #fed7aa;
  --cs-composer-bg: rgba(255, 255, 255, 0.75);
  --cs-composer-border: rgba(234, 88, 12, 0.22);
  --cs-toolbar-border: rgba(234, 88, 12, 0.18);
  --cs-toolbar-bg: rgba(255, 255, 255, 0.92);
  --cs-editor-color: #7c2d12;
  --cs-editor-placeholder: #c2410c;
  --cs-toolbar-btn-color: #9a3412;
  --cs-toolbar-btn-hover-bg: rgba(234, 88, 12, 0.1);
  --cs-toolbar-btn-hover-color: #7c2d12;
  --cs-toolbar-btn-active-bg: rgba(234, 88, 12, 0.12);
  --cs-toolbar-sep: rgba(234, 88, 12, 0.25);
  --cs-panel-bg: #fff;
  --cs-panel-border: rgba(234, 88, 12, 0.22);
  --cs-panel-shadow: 0 10px 32px rgba(234, 88, 12, 0.12);
  --cs-meta-input-bg: #fff;
  --cs-meta-input-color: #7c2d12;
  --cs-meta-input-border: rgba(234, 88, 12, 0.22);
  --cs-meta-placeholder: #c2410c;
  --cs-btn-cancel-text: #c2410c;
  --cs-btn-cancel-hover-bg: rgba(234, 88, 12, 0.08);
  --cs-btn-cancel-hover-text: #7c2d12;
  --cs-comment-name: #7c2d12;
  --cs-comment-text: #9a3412;
  --cs-comment-time: #c2410c;
  --cs-comment-action: #c2410c;
  --cs-comment-action-hover-bg: rgba(234, 88, 12, 0.08);
  --cs-comment-action-hover-text: #7c2d12;
  --cs-blockquote-border: rgba(234, 88, 12, 0.25);
  --cs-blockquote-text: #9a3412;
  --cs-code-bg: rgba(255, 237, 213, 0.9);
  --cs-content-fade: #fff7ed;
  --cs-thread-line: rgba(234, 88, 12, 0.28);
  --cs-gif-search-border: rgba(234, 88, 12, 0.22);
  --cs-gif-loading: #c2410c;
  --cs-composer-shadow: 0 4px 20px rgba(234, 88, 12, 0.1);
  --cs-editor-wrap-bg: rgba(255, 255, 255, 0.55);
  --cs-editor-wrap-radius: 8px;
  --cs-ql-container-bg: transparent;
  --cs-ql-editor-bg: transparent;
  --cs-ql-list-marker: #9a3412;
  --cs-editor-caret: #7c2d12;
  --cs-editor-selection-bg: rgba(234, 88, 12, 0.18);
  --cs-toolbar-btn-active-color: #c2410c;
  --cs-btn-submit-bg: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  --cs-btn-submit-shadow: 0 2px 12px rgba(234, 88, 12, 0.25);
  --cs-emoji-bg: #fff;
  --cs-emoji-border-color: rgba(234, 88, 12, 0.2);
  --cs-emoji-button-hover-bg: rgba(234, 88, 12, 0.08);
  --cs-emoji-category-active: #ea580c;
  --cs-emoji-input-border: rgba(234, 88, 12, 0.22);
  --cs-emoji-input-color: #7c2d12;
  --cs-emoji-input-placeholder: #c2410c;
}