/* ==========================================================================
   RDM Anime Child Theme — Override Styles v2 (v1.0.2 child theme)
   Enhanced with UI/UX Pro Max design system & Vengeance UI effects
   ========================================================================== */

/* ----- UI/UX Pro Max Design Tokens — Cinema Dark ----- */
:root {
    /* Z-Index */
    --z-header: var(--rdm-z-header, 1100);
    --z-mobile-nav: var(--rdm-z-mobile-nav, 1050);
    --z-bottom-nav: var(--rdm-z-bottom-nav, 1200);
    --z-overlay: var(--rdm-z-overlay, 999);
    --z-toast: var(--rdm-z-toast, 2000);

    /* Colors — UI/UX Pro Max Cinema Dark palette */
    --color-bg: var(--rdm-bg, #020203);
    --color-bg-deep: #010102;
    --color-bg-elevated: var(--rdm-bg-elevated, #0a0a0f);
    --color-bg-card: var(--rdm-bg-card, #0e0e16);
    --color-bg-card-hover: var(--rdm-bg-card-hover, #141420);
    --color-bg-surface: var(--rdm-bg-surface, rgba(255, 255, 255, 0.04));
    --color-primary: var(--rdm-gold, #4f7cff);
    --color-primary-hover: var(--rdm-gold-bright, #7aa2ff);
    --color-primary-dim: var(--rdm-purple-dim, rgba(94, 106, 210, 0.12));
    --color-accent: var(--rdm-green, #22c55e);
    --color-danger: var(--rdm-red, #ef4444);
    --color-text: var(--rdm-text, #ede);
    --color-text-secondary: var(--rdm-text-secondary, #b0b3ba);
    --color-text-muted: var(--rdm-text-muted, #9499a5);
    --color-border: var(--rdm-border, rgba(255, 255, 255, 0.06));
    --color-border-hover: var(--rdm-border-hover, rgba(255, 255, 255, 0.12));

    /* Purple / Indigo Glow — UI/UX Pro Max accent */
    --glow-purple: var(--rdm-purple, #5e6ad2);
    --glow-purple-dim: var(--rdm-purple-dim, rgba(94, 106, 210, 0.12));
    --glow-purple-mid: var(--rdm-purple-mid, rgba(94, 106, 210, 0.25));
    --glow-purple-bright: var(--rdm-purple-bright, rgba(130, 140, 230, 0.4));
    --glow-pink: var(--rdm-pink, #4f7cff);
    --glow-pink-dim: var(--rdm-pink-dim, rgba(79, 124, 255, 0.12));

    /* Glass — UI/UX Pro Max cinematic dark */
    --glass-bg: var(--rdm-glass-bg, rgba(10, 10, 15, 0.88));
    --glass-blur: var(--rdm-glass-blur, blur(20px) saturate(180%));
    --glass-border: var(--rdm-glass-border, 1px solid rgba(255, 255, 255, 0.06));

    /* Radii — UI/UX Pro Max 16px default */
    --radius-sm: var(--rdm-radius-sm, 6px);
    --radius-md: var(--rdm-radius, 10px);
    --radius-lg: var(--rdm-radius-lg, 16px);
    --radius-xl: var(--rdm-radius-xl, 20px);
    --radius-full: var(--rdm-radius-full, 999px);

    /* Shadows — deeper blacks */
    --shadow-sm: var(--rdm-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.5));
    --shadow-md: var(--rdm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.6));
    --shadow-lg: var(--rdm-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.7));
    --shadow-glow: var(--rdm-glow-gold, 0 0 20px rgba(79, 124, 255, 0.15));
    --shadow-purple: var(--rdm-glow-purple, 0 0 30px rgba(94, 106, 210, 0.2));
    --shadow-purple-lg: var(--rdm-glow-purple-lg, 0 8px 40px rgba(94, 106, 210, 0.3));

    /* Transitions — UI/UX Pro Max cinematic easing */
    --ease-out: var(--rdm-ease, cubic-bezier(0.16, 1, 0.3, 1));
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: var(--rdm-fast, 150ms);
    --duration-normal: var(--rdm-normal, 250ms);
    --duration-slow: var(--rdm-slow, 400ms);
}

/* ----- UI/UX Pro Max: Smooth scroll ----- */
html {
    scroll-behavior: smooth;
}

/* ----- UI/UX Pro Max: Cursor pointer on all clickable elements ----- */
a, button, input[type="submit"], input[type="button"], 
.nav-link, .nav-item a, [role="button"], label[for] {
    cursor: pointer;
}

/* ----- Body / Reset — Cinema Dark ----- */
body {
	color: var(--color-text) !important;
	font-family: 'Inter', var(--rdm-font-body), -apple-system, BlinkMacSystemFont, sans-serif !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-display: swap;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast) ease;
}
a:hover, a:focus {
	color: var(--color-primary-hover);
	text-decoration: none;
}

/* UI/UX Pro Max: Focus-visible for keyboard accessibility */
:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--rdm-bg), 0 0 18px rgba(79, 124, 255, 0.55) !important;
}

/* UI/UX Pro Max: Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
    .btn, button, a, [role="button"] {
        -webkit-tap-highlight-color: rgba(79, 124, 255, 0.2);
    }
    .btn:active, button:active, a:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
}

/* UI/UX Pro Max: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal-section, .rdm-stagger-text > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ----- Header — Cinema Dark glassmorphism ----- */
#rdm-masthead,
.rdm-site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: var(--glass-border);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Clean header — no decorative accent strip */
#rdm-masthead::before,
.rdm-site-header::before {
	content: none;
	display: none;
}

.rdm-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.rdm-site-branding { flex-shrink: 0; }
.rdm-logo-link { display: inline-block; text-decoration: none !important; }
.rdm-logo-text {
	font-family: var(--rdm-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
	color: var(--rdm-text);
	letter-spacing: 0.5px;
}
.rdm-logo-accent {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--rdm-accent-bright) !important;
	filter: none !important;
}

.rdm-main-nav { flex: 1; }
.rdm-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	justify-content: center;
}
.rdm-nav-list > li > a {
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 8px 0;
	position: relative;
	transition: color var(--duration-fast) var(--ease-out);
	display: inline-block;
}
.rdm-nav-list > li > a:hover {
	color: var(--rdm-gold-bright, #7aa2ff);
	text-decoration: none;
}
.rdm-nav-list > li > a::after { content: none; display: none; }
.rdm-nav-list > li > a:hover::after { width: 100%; }

/* Search bar in header — glass input */
.rdm-header-search { flex-shrink: 0; max-width: 260px; }
.rdm-search-form {
	display: flex;
	align-items: center;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 4px 4px 4px 14px;
	transition: all var(--duration-fast) var(--ease-out);
	max-width: 100%;
}
.rdm-search-form:focus-within {
	border-color: var(--glow-purple);
	background: rgba(79, 124, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 20px rgba(79, 124, 255, 0.1);
}
.rdm-search-input {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	color: var(--color-text) !important;
	font-size: 0.9rem;
	width: 100%;
	min-width: 0;
	padding: 6px 0;
}
.rdm-search-input::placeholder { color: var(--color-text-muted); }
.rdm-search-submit {
	background: linear-gradient(135deg, #3a61e8, #7aa2ff);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-bg);
	transition: all var(--duration-fast) var(--ease-out);
	flex-shrink: 0;
	touch-action: manipulation;
}
.rdm-search-submit:hover { transform: scale(1.08); }
.rdm-search-submit:active { transform: scale(0.95); }

/* Mobile menu toggle */
.rdm-mobile-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 6px;
}
.rdm-mobile-menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	transition: all 0.3s ease;
}
.rdm-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.rdm-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rdm-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav drawer — glassmorphism (Unified Gold + Purple Neon) */
#rdm-mobile-nav,
.rdm-mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 320px;
	height: 100vh;
	background: rgba(10, 10, 18, 0.92);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border-left: var(--glass-border);
	z-index: var(--z-mobile-nav);
	padding: 80px 24px 24px;
	transition: right var(--duration-slow) var(--ease-out);
	overflow-y: auto;
	box-shadow: -6px 0 30px rgba(79, 124, 255, 0.15);
}
#rdm-mobile-nav.is-open,
.rdm-mobile-nav.is-open {
	right: 0;
}

/* Drawer overlay — smooth transition */
.rdm-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: var(--z-overlay);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity var(--duration-normal) var(--ease-out);
}
.rdm-drawer-overlay.active {
	display: block;
}
.rdm-mobile-nav-list {
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
}
.rdm-mobile-nav-list > li > a {
	display: block;
	color: var(--color-text);
	font-size: 1.1rem;
	font-weight: 600;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
	transition: all var(--duration-fast) var(--ease-out);
}
.rdm-mobile-nav-list > li > a:hover { color: var(--rdm-accent-bright); text-decoration: none; }
.rdm-mobile-search input,
.rdm-mobile-search button {
	padding: 10px 14px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-bg-surface);
	color: var(--color-text);
	transition: all var(--duration-fast) var(--ease-out);
}
.rdm-mobile-search input {
	width: calc(100% - 90px);
	margin-right: 8px;
}
.rdm-mobile-search input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);
}
.rdm-mobile-search button {
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7);
	color: var(--color-bg);
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
}
.rdm-mobile-search button:active {
	transform: scale(0.95);
	transition-duration: 80ms;
}

/* ----- Content container ----- */
.site-content { min-height: calc(100vh - 200px); }
.ast-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
}

/* ----- Breadcrumbs (UI/UX Pro Max) ----- */
.rdmh-breadcrumb-nav {
	padding: 14px 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.rdmh-breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
	padding: 2px 4px;
	border-radius: var(--radius-sm);
}
.rdmh-breadcrumb a:hover {
	color: var(--color-primary-hover);
	text-decoration: none;
	background: var(--color-primary-dim);
}
.rdmh-breadcrumb-sep {
	margin: 0 8px;
	color: #4b5563;
}
.rdmh-breadcrumb-current {
	color: var(--color-text);
	font-weight: 500;
}

/* ----- Archive header ----- */
.rdm-archive-header {
	padding: 20px 0 30px;
	text-align: center;
}

/* ----- Page title (homepage H1) ----- */
.rdm-page-title {
	font-family: 'Poppins', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #4f7cff;
	margin: 0 0 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(79, 124, 255, 0.15);
}
.rdm-archive-title {
	font-family: 'Poppins', sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 12px;
}
.rdm-archive-title span {
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.rdm-archive-description {
	color: #b0b7c3;
	font-size: 0.95rem;
	max-width: 700px;
	margin: 0 auto;
}
.rdm-archive-description p { margin: 8px 0; }

/* ----- Archive card grid (Unified spacing) ----- */
.rdm-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
	padding: 10px 0 30px;
}

/* ----- Pagination ----- */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 30px 0;
	flex-wrap: wrap;
}
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none !important;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all var(--duration-fast) var(--ease-out);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.pagination .page-numbers:active,
.nav-links .page-numbers:active {
	transform: scale(0.92) !important;
	transition-duration: 80ms !important;
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: linear-gradient(135deg, #3a61e8, #7aa2ff);
	color: var(--color-bg);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}
.pagination .page-numbers:hover:not(.current),
.nav-links .page-numbers:hover:not(.current) {
	background: #1f1f2e;
	border-color: var(--glow-purple-mid);
	color: var(--color-primary);
	box-shadow: 0 0 15px rgba(79, 124, 255, 0.2);
}

/* ----- Single post ----- */
.rdm-single-post {
	max-width: 1100px;
	margin: 0 auto;
}

/* ----- Footer (Unified Gold + Purple Neon) ----- */
.rdm-site-footer {
	background:
		radial-gradient(800px 300px at 50% 120%, rgba(79, 124, 255, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(15, 15, 26, 0.6), #07070d);
	border-top: 1px solid rgba(79, 124, 255, 0.16);
	padding: 50px 24px 24px;
	margin-top: 60px;
	position: relative;
}
.rdm-site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(79, 124, 255, 0.4), rgba(79, 124, 255, 0.4), rgba(79, 124, 255, 0.3), transparent);
}
/* Fix: Footer bottom needs extra padding on mobile to avoid bottom nav overlap */
@media (max-width: 921px) {
	.rdm-footer-bottom {
		padding-bottom: 80px;
	}
}
.rdm-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
}
.rdm-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(79, 124, 255, 0.1);
}
.rdm-footer-brand { max-width: 360px; }
.rdm-footer-logo {
	font-family: var(--rdm-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 10px;
	text-shadow: 0 0 16px rgba(79, 124, 255, 0.4);
}
.rdm-footer-tagline {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}
.rdm-footer-heading {
	font-family: var(--rdm-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: linear-gradient(90deg, var(--rdm-gold-bright, #7aa2ff), var(--glow-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0 0 14px;
}
.rdm-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rdm-footer-links li { margin-bottom: 8px; }
.rdm-footer-links a {
	color: var(--color-text-secondary);
	font-size: 0.9rem;
	text-decoration: none;
	transition: all var(--duration-fast) var(--ease-out), text-shadow var(--duration-fast);
	padding: 2px 0;
	border-radius: var(--radius-sm);
}
.rdm-footer-links a:hover { 
	color: var(--rdm-gold-bright, #7aa2ff);
	text-shadow: 0 0 12px rgba(79, 124, 255, 0.5);
	text-decoration: none;
	padding-left: 4px;
}
.rdm-footer-bottom {
	padding-top: 20px;
	text-align: center;
	color: #9ca3b8;
	font-size: 0.85rem;
}
.rdm-footer-bottom p { margin: 4px 0; }
.rdm-footer-disclaimer {
	font-size: 0.8rem !important;
	opacity: 0.85;
}

/* ----- Mobile bottom nav (Unified Gold + Purple Neon) ----- */
.rdm-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(10, 10, 18, 0.92);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(79, 124, 255, 0.2);
	padding: 8px 0;
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
	z-index: var(--z-bottom-nav);
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -6px 30px rgba(79, 124, 255, 0.2);
}
.rdm-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	color: var(--color-text-muted);
	text-decoration: none !important;
	font-size: 0.7rem;
	font-weight: 600;
	transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast);
	min-width: 60px;
	min-height: 44px;
	justify-content: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.rdm-bottom-nav-item:hover,
.rdm-bottom-nav-item.is-active {
	color: var(--rdm-gold-bright, #7aa2ff);
	text-decoration: none;
}
.rdm-bottom-nav-item:active,
.rdm-bottom-nav-item[aria-current="page"] {
	color: var(--rdm-gold-bright, #7aa2ff) !important;
	transform: translateY(-2px);
}
.rdm-bottom-nav-item[aria-current="page"] svg {
	filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.6));
}
.rdm-bottom-nav-item:active {
	transform: scale(0.9) !important;
	transition-duration: 80ms !important;
}

/* ----- Touch device: disable hover transforms ----- */
@media (hover: none) {
	.tk-card:hover,
	.tatakai-card:hover {
		transform: none !important;
		box-shadow: none !important;
	}
	.tk-card:hover .tk-card-poster img,
	.tatakai-card:hover .tk-card-poster img {
		transform: none !important;
	}
	.hero-poster:hover {
		transform: rotate(2deg) !important;
	}
}

/* ----- 404 page (UI/UX Pro Max) ----- */
.rdm-404 { text-align: center; padding: 80px 24px; }
.rdm-404-title {
	font-family: 'Poppins', sans-serif;
	font-size: 6rem;
	font-weight: 900;
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
	line-height: 1;
	text-shadow: 0 0 40px rgba(79, 124, 255, 0.2);
}
.rdm-404-subtitle {
	font-size: 1.5rem;
	color: var(--color-text);
	font-weight: 600;
	margin: 10px 0 24px;
}
.rdm-404-text { color: var(--color-text-muted); margin-bottom: 24px; }
.rdm-404-search { max-width: 500px; margin: 0 auto 30px; }
.rdm-404-home a { 
	color: var(--color-primary); 
	font-weight: 600;
	padding: 8px 20px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	transition: all var(--duration-fast) var(--ease-out);
}
.rdm-404-home a:hover {
	background: var(--color-primary);
	color: var(--color-bg);
	text-decoration: none;
}

/* ----- No results ----- */
.rdm-no-results {
	text-align: center;
	padding: 40px 24px;
	color: #b0b7c3;
}
.rdm-no-results p { margin-bottom: 20px; }
.rdm-no-results a { color: #4f7cff; }

/* ----- Hide Astra leftovers ----- */
#colophon,
.ast-archive-description,
.ast-page-header,
.astra-advanced-hook,
#masthead .ast-primary-header-bar,
.ast-builder-menu-1,
.ast-desktop-header-content,
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	display: none !important;
}

/* Hide Astra's default site-footer (NOT our rdm-site-footer) */
footer.site-footer:not(.rdm-site-footer) {
	display: none !important;
}

/* Admin bar margin conflict fix */
html.wp-toolbar,
body.admin-bar,
html.admin-bar {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
#wpadminbar {
	display: none !important;
	visibility: hidden !important;
}

/* Force dark background everywhere — Hybrid Gold + Purple ambient */
html, body, #page, .site, .hfeed.site, #content, .site-content,
.ast-container, #primary, .content-area, main, .site-main,
article, .ast-article-single, .post.type-page, .entry-content,
.ast-article-inner, .ast-plain-container, .ast-separate-container {
	background: transparent !important;
}

/* ----- Post page improvements ----- */
/* Hide redundant subtitle (H2 is essentially same as H1) */
.rdmh-post-subtitle {
	display: none !important;
}

/* Make H1 title wrap nicely on mobile */
.rdmh-post-title {
	font-size: clamp(1.1rem, 4vw, 1.6rem) !important;
	line-height: 1.3 !important;
	margin: 0 0 14px 0 !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

/* Episode list improvements */
.rdmh-ep {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	padding: 10px 12px !important;
	margin-bottom: 8px !important;
	background: #13131f !important;
	border: 1px solid rgba(79, 124, 255, 0.12) !important;
	border-radius: 8px !important;
	transition: border-color 0.2s ease, transform 0.2s ease !important;
}
.rdmh-ep:hover {
	border-color: rgba(79, 124, 255, 0.4) !important;
	transform: translateX(2px) !important;
}
.rdmh-ep br { display: none !important; }
.rdmh-ep-badge {
	flex-shrink: 0 !important;
	width: 32px !important;
	height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #3a61e8, #7aa2ff) !important;
	color: #1a1205 !important;
	font-weight: 700 !important;
	border-radius: var(--radius-full) !important;
	font-size: 0.85rem !important;
	box-shadow: var(--shadow-glow) !important;
}
.rdmh-ep-info {
	flex: 1 !important;
	min-width: 150px !important;
	font-size: 0.9rem !important;
	color: #d1d5db !important;
}
.rdmh-ep-info .new-tag,
.rdmh-ep-info .new-badge {
	background: #ef4444 !important;
	color: #fff !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	font-size: 0.7rem !important;
	margin-left: 6px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}
.rdmh-ep-btns {
	display: flex !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}
.rdmh-ep-btns br { display: none !important; }
.rdmh-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 7px 14px !important;
	border-radius: var(--radius-sm) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all var(--duration-fast) var(--ease-out) !important;
	border: none !important;
	cursor: pointer !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.rdmh-btn:active {
	transform: scale(0.95) !important;
	transition-duration: 80ms !important;
}
.rdmh-btn:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 2px !important;
}
.rdmh-btn-watch {
	background: linear-gradient(135deg, #3a61e8, #7aa2ff) !important;
	color: #1a1205 !important;
}
.rdmh-btn-watch:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-md), 0 0 25px rgba(79, 124, 255, 0.3) !important;
}
.rdmh-btn-download {
	background: rgba(79, 124, 255, 0.16) !important;
	color: var(--glow-purple-bright) !important;
	border: 1px solid rgba(79, 124, 255, 0.45) !important;
}
.rdmh-btn-download:hover {
	background: rgba(79, 124, 255, 0.32) !important;
	border-color: rgba(122, 162, 255, 0.55) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: var(--shadow-purple) !important;
}

@media (max-width: 640px) {
	.rdmh-ep {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.rdmh-ep-btns { width: 100% !important; }
	.rdmh-ep-btns .rdmh-btn {
		flex: 1 !important;
		justify-content: center !important;
	}
	.rdmh-ep-info { min-width: 0 !important; }
}

/* Poster image quality + responsive */
.rdmh-poster-wrap {
	max-width: 280px !important;
	margin: 0 auto 20px !important;
}
.rdmh-poster-img {
	width: 100% !important;
	height: auto !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-lg) !important;
	transition: transform var(--duration-normal) var(--ease-out) !important;
}
.rdmh-poster-img:hover {
	transform: scale(1.03) !important;
}
@media (max-width: 640px) {
	.rdmh-poster-wrap { max-width: 200px !important; }
}

/* ----- Homepage card improvements (UI/UX Pro Max: glassmorphism) ----- */
/* Force consistent card aspect ratio and image quality */
.tk-card-poster,
.tatakai-card .tk-card-poster {
	position: relative !important;
	aspect-ratio: 2 / 3 !important;
	background: var(--color-bg) !important;
	overflow: hidden !important;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.tk-card-poster img,
.tatakai-card .tk-card-poster img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--duration-slow) var(--ease-out) !important;
}
.tk-card-poster img:hover,
.tatakai-card:hover .tk-card-poster img {
	transform: scale(1.08) !important;
}

/* Consistent badge positioning */
.tk-card-lang-badge,
.tk-card-season,
.tk-card-eps,
.tk-card-score {
	position: absolute !important;
	z-index: 2 !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	padding: 3px 7px !important;
	border-radius: 5px !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}
.tk-card-lang-badge {
	top: 6px !important;
	left: 6px !important;
	background: rgba(239, 68, 68, 0.85) !important;
	color: #fff !important;
	text-transform: uppercase !important;
}
.tk-card-season {
	top: 6px !important;
	right: 6px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #4f7cff !important;
}
.tk-card-eps {
	bottom: 6px !important;
	right: 6px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #fff !important;
}
.tk-card-score {
	bottom: 6px !important;
	left: 6px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #4f7cff !important;
}

/* Card body — Cinema Dark glass surface (UI/UX Pro Max) */
.tk-card-body,
.tatakai-card .tk-card-body {
	padding: 10px 12px 14px !important;
	background: var(--color-bg-card) !important;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
	border-top: 1px solid var(--color-border) !important;
}
.tk-card-title,
.tatakai-card .tk-card-title {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 6px 0 !important;
	color: #ffffff !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 2.2em !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
.tk-card-meta {
	color: #b0b7c3 !important;
	font-size: 0.7rem !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Card hover effect — glassmorphism + purple glow (Hybrid) */
.tk-card,
.tatakai-card {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-lg) !important;
	background: var(--color-bg-elevated) !important;
	transition: transform var(--duration-normal) var(--ease-out),
	            border-color var(--duration-normal) var(--ease-out),
	            box-shadow var(--duration-normal) var(--ease-out) !important;
}
.tk-card:hover,
.tatakai-card:hover {
	transform: translateY(-6px) scale(1.02) !important;
	border-color: var(--glow-purple-mid) !important;
	box-shadow: var(--shadow-lg), 0 0 30px rgba(79, 124, 255, 0.25), 0 0 60px rgba(79, 124, 255, 0.1) !important;
}
.tk-card:active,
.tatakai-card:active {
	transform: translateY(-2px) scale(0.98) !important;
	transition-duration: 80ms !important;
}

/* ----- Hero slider improvements (Hybrid Gold + Purple Glow) ----- */
.hero-wrapper {
	/* Desktop: 520px default from plugin CSS */
	position: relative;
}
.hero-wrapper::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(79, 124, 255, 0.3), rgba(79, 124, 255, 0.3), rgba(79, 124, 255, 0.2));
	z-index: -1;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
	filter: blur(20px);
}
.hero-wrapper:hover::after {
	opacity: 1;
}
.hero-title {
	font-size: clamp(1.4rem, 4vw, 2.4rem) !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
	margin: 0 0 8px 0 !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
.spotlight-tag {
	background: rgba(79, 124, 255, 0.15) !important;
	color: #4f7cff !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin-bottom: 10px !important;
	display: inline-block !important;
}
.hero-meta {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	margin-bottom: 12px !important;
}
.quality-badge {
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7) !important;
	color: #0a0a12 !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
}

/* Hero watch button — elevated CTA (Hybrid Gold + Purple Glow) */
.hero-watch-btn,
.hero-btn-watch {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7) !important;
	color: var(--color-bg) !important;
	padding: 12px 28px !important;
	border-radius: var(--radius-md) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	transition: all var(--duration-normal) var(--ease-out) !important;
	box-shadow: 0 4px 16px rgba(79, 124, 255, 0.3), 0 0 20px rgba(79, 124, 255, 0.15) !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.hero-watch-btn:hover,
.hero-btn-watch:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 28px rgba(79, 124, 255, 0.45), 0 0 40px rgba(79, 124, 255, 0.3) !important;
	color: var(--color-bg) !important;
	text-decoration: none !important;
}
.hero-watch-btn:active,
.hero-btn-watch:active {
	transform: translateY(-1px) scale(0.97) !important;
	transition-duration: 80ms !important;
}
.hero-watch-btn:focus-visible,
.hero-btn-watch:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 3px !important;
}

/* Hero details button — glass style */
.hero-details-btn,
.hero-btn-details {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: var(--glass-bg) !important;
	color: var(--color-text) !important;
	padding: 12px 28px !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	text-decoration: none !important;
	border: var(--glass-border) !important;
	cursor: pointer !important;
	transition: all var(--duration-normal) var(--ease-out) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.hero-details-btn:hover,
.hero-btn-details:hover {
	background: rgba(79, 124, 255, 0.12) !important;
	border-color: var(--color-border-hover) !important;
	color: var(--color-primary) !important;
	text-decoration: none !important;
	transform: translateY(-2px) !important;
}
.hero-details-btn:active,
.hero-btn-details:active {
	transform: translateY(0) scale(0.97) !important;
	transition-duration: 80ms !important;
}

/* Hero carousel arrows — glass style (UI/UX Pro Max) */
.hero-arrow,
.hero-nav-arrow {
	background: var(--glass-bg) !important;
	color: var(--color-primary) !important;
	border: var(--glass-border) !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	transition: all var(--duration-fast) var(--ease-out) !important;
	touch-action: manipulation;
}
.hero-arrow:hover,
.hero-nav-arrow:hover {
	background: rgba(79, 124, 255, 0.2) !important;
	border-color: var(--color-primary) !important;
	transform: scale(1.1) !important;
}
.hero-arrow:active,
.hero-nav-arrow:active {
	transform: scale(0.9) !important;
	transition-duration: 80ms !important;
}

/* ----- Section headers (UI/UX Pro Max) ----- */
.tk-section-header,
.section-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid var(--color-border) !important;
}
.tk-section-title,
.section-title {
	font-family: 'Poppins', sans-serif !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--color-text) !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.tk-view-all,
.view-all-link {
	color: var(--color-primary) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	transition: all var(--duration-fast) var(--ease-out) !important;
	padding: 4px 8px !important;
	border-radius: var(--radius-sm) !important;
}
.tk-view-all:hover,
.view-all-link:hover {
	color: var(--color-primary-hover) !important;
	background: var(--color-primary-dim) !important;
	text-decoration: none !important;
}

/* ----- Hscroll improvements (UI/UX Pro Max: scroll-snap) ----- */
.tk-hscroll-wrap { position: relative !important; }
.tk-hscroll {
	display: flex !important;
	gap: 14px !important;
	overflow-x: auto !important;
	scroll-behavior: smooth !important;
	scroll-snap-type: x proximity !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(79, 124, 255, 0.3) transparent !important;
	padding-bottom: 8px !important;
	-webkit-overflow-scrolling: touch;
}
.tk-hscroll > * {
	scroll-snap-align: start !important;
	flex-shrink: 0 !important;
}
.tk-hscroll::-webkit-scrollbar { height: 6px !important; }
.tk-hscroll::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04) !important;
	border-radius: 3px !important;
}
.tk-hscroll::-webkit-scrollbar-thumb {
	background: rgba(79, 124, 255, 0.3) !important;
	border-radius: 3px !important;
}
.tk-hscroll::-webkit-scrollbar-thumb:hover {
	background: rgba(79, 124, 255, 0.5) !important;
}
.tk-hscroll-btn.prev,
.tk-hscroll-btn.next {
	position: absolute !important;
	top: 35% !important;
	transform: translateY(-50%) !important;
	background: var(--glass-bg) !important;
	color: var(--color-primary) !important;
	border: var(--glass-border) !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 5 !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	transition: all var(--duration-fast) var(--ease-out) !important;
	touch-action: manipulation;
}
.tk-hscroll-btn.prev { left: -8px !important; }
.tk-hscroll-btn.next { right: -8px !important; }
.tk-hscroll-btn.prev:hover,
.tk-hscroll-btn.next:hover {
	background: rgba(79, 124, 255, 0.25) !important;
	border-color: var(--glow-purple) !important;
	transform: translateY(-50%) scale(1.1) !important;
	box-shadow: 0 0 20px rgba(79, 124, 255, 0.3) !important;
}
.tk-hscroll-btn:active {
	transform: translateY(-50%) scale(0.9) !important;
	transition-duration: 80ms !important;
}

/* ----- Schedule table improvements — glass card ----- */
.rdmh-schedule-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--color-bg-elevated) !important;
	border-radius: var(--radius-lg) !important;
	overflow: hidden !important;
	border: 1px solid var(--color-border) !important;
}
.rdmh-schedule-table thead {
	background: linear-gradient(135deg, #3a61e8, #7aa2ff) !important;
}
.rdmh-schedule-table thead th {
	color: #1a1205 !important;
	font-weight: 700 !important;
	padding: 12px 14px !important;
	text-align: left !important;
	font-size: 0.85rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}
.rdmh-schedule-table tbody td {
	padding: 12px 14px !important;
	border-bottom: 1px solid rgba(79, 124, 255, 0.08) !important;
	color: #d1d5db !important;
	font-size: 0.88rem !important;
}
.rdmh-schedule-table tbody tr:hover {
	background: rgba(79, 124, 255, 0.04) !important;
}
.rdmh-schedule-table tbody tr:last-child td {
	border-bottom: none !important;
}

/* Status badge */
.rdmh-schedule-table .status-badge,
.rdmh-schedule-table .status {
	display: inline-block !important;
	padding: 3px 10px !important;
	border-radius: 12px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}
.status-ongoing {
	background: rgba(34, 197, 94, 0.15) !important;
	color: #22c55e !important;
}
.status-new {
	background: rgba(239, 68, 68, 0.15) !important;
	color: #ef4444 !important;
}
.status-completed {
	background: rgba(156, 163, 175, 0.15) !important;
	color: #b0b7c3 !important;
}

/* Mobile schedule cards */
@media (max-width: 768px) {
	.rdmh-schedule-table,
	.rdmh-schedule-table tbody,
	.rdmh-schedule-table tr,
	.rdmh-schedule-table td {
		display: block !important;
		width: 100% !important;
	}
	.rdmh-schedule-table thead { display: none !important; }
	.rdmh-schedule-table tr {
		background: var(--color-bg-elevated) !important;
		border: 1px solid var(--color-border) !important;
		border-radius: var(--radius-lg) !important;
		margin-bottom: 12px !important;
		padding: 12px !important;
	}
	.rdmh-schedule-table td {
		border: none !important;
		padding: 6px 0 !important;
		text-align: left !important;
	}
	.rdmh-schedule-table td::before {
		content: attr(data-label) ": " !important;
		font-weight: 700 !important;
		color: var(--rdm-gold-bright) !important;
		margin-right: 8px !important;
	}
}

/* ----- Responsive: tablet/mobile ----- */
@media (max-width: 1024px) {
	.rdm-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	.rdm-footer-brand {
		grid-column: 1 / -1;
		max-width: 100%;
	}
	/* Fix: Tablet footer needs bottom padding for bottom nav */
	.rdm-site-footer {
		padding-bottom: 80px;
	}
}

@media (max-width: 921px) {
	.rdm-main-nav,
	.rdm-header-search {
		display: none;
	}
	.rdm-mobile-menu-toggle {
		display: flex;
	}
	#rdm-mobile-nav,
	.rdm-mobile-nav {
		display: block;
	}
	.rdm-bottom-nav {
		display: flex;
	}
	.rdm-header-inner {
		padding: 10px 16px;
		gap: 12px;
	}
	.rdm-logo-text {
		font-size: 1.4rem;
	}
	.rdm-archive-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 12px;
	}
	.rdm-archive-title {
		font-size: 1.5rem;
	}
	.ast-container {
		padding: 16px;
	}
	.rdm-footer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.rdm-site-footer {
		padding: 30px 16px 16px;
	}
	/* Fix: Body padding for bottom nav */
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
	}
	/* Fix: Hero slider tablet height */
	.hero-wrapper {
		height: 400px !important;
	}
	.hero-content {
		padding: 0 30px;
	}
	.hero-info {
		width: 55%;
	}
	.hero-poster {
		width: 160px;
	}
}

@media (max-width: 480px) {
	.rdm-archive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.rdm-archive-title {
		font-size: 1.25rem;
	}
	.rdm-404-title {
		font-size: 4rem;
	}
	/* Fix: Small mobile bottom nav needs more padding */
	.rdm-bottom-nav {
		padding: 6px 0;
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
	}
	.rdm-bottom-nav-item {
		padding: 4px 8px;
		min-width: 50px;
	}
}

/* ===== Episode list (actual HTML classes) ===== */
.rdmh-eps {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 20px 0 !important;
}

.rdmh-ep {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	padding: 12px 14px !important;
	margin-bottom: 8px !important;
	background: var(--color-bg-elevated) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	transition: all var(--duration-normal) var(--ease-out) !important;
	list-style: none !important;
}

.rdmh-ep:hover {
	border-color: var(--color-border-hover) !important;
	transform: translateX(4px) !important;
	box-shadow: var(--shadow-sm), -4px 0 12px rgba(79, 124, 255, 0.1) !important;
}

.rdmh-ep:active {
	transform: translateX(2px) !important;
	transition-duration: 80ms !important;
}

.rdmh-ep br { display: none !important; }

.rdmh-ep-badge {
	flex-shrink: 0 !important;
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7) !important;
	color: #0a0a12 !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
}

.rdmh-ep-info {
	flex: 1 !important;
	min-width: 150px !important;
	font-size: 0.9rem !important;
	color: #d1d5db !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.rdmh-ep-title {
	color: #ffffff !important;
	font-weight: 500 !important;
}

.rdmh-ep-new-tag,
.rdmh-ep-new-badge {
	background: #ef4444 !important;
	color: #fff !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.rdmh-ep-btns {
	display: flex !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}

.rdmh-ep-btns br { display: none !important; }

.rdmh-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 7px 14px !important;
	border-radius: var(--radius-sm) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all var(--duration-fast) var(--ease-out) !important;
	border: none !important;
	cursor: pointer !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.rdmh-btn:active {
	transform: scale(0.95) !important;
	transition-duration: 80ms !important;
}

.rdmh-btn:focus-visible {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 2px !important;
}

.rdmh-btn-watch {
	background: linear-gradient(135deg, #2b4cc7, #4f7cff, #2b4cc7) !important;
	color: var(--color-bg) !important;
}

.rdmh-btn-watch:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-md), 0 0 25px rgba(79, 124, 255, 0.3) !important;
	color: var(--color-bg) !important;
	text-decoration: none !important;
}

.rdmh-btn-dl,
.rdmh-btn-download {
	background: var(--color-bg-surface) !important;
	color: var(--color-primary) !important;
	border: 1px solid rgba(79, 124, 255, 0.3) !important;
}

.rdmh-btn-dl:hover,
.rdmh-btn-download:hover {
	background: rgba(79, 124, 255, 0.1) !important;
	border-color: rgba(79, 124, 255, 0.6) !important;
	color: var(--color-primary) !important;
	text-decoration: none !important;
}

@media (max-width: 640px) {
	.rdmh-ep {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.rdmh-ep-btns {
		width: 100% !important;
	}
	.rdmh-ep-btns .rdmh-btn {
		flex: 1 !important;
		justify-content: center !important;
	}
	.rdmh-ep-info {
		min-width: 0 !important;
	}
	/* Fix: Hero poster on small mobile */
	.hero-poster {
		width: 80px !important;
	}
}

/* Series info table improvements — glass card */
.rdmh-series-info,
.rdmh-info-table {
	background: var(--color-bg-elevated) !important;
	border-radius: var(--radius-lg) !important;
	padding: 18px !important;
	border: 1px solid var(--color-border) !important;
}

.rdmh-series-info dt,
.rdmh-info-table dt {
	color: #4f7cff !important;
	font-weight: 600 !important;
	margin-top: 8px !important;
}

.rdmh-series-info dd,
.rdmh-info-table dd {
	color: #d1d5db !important;
	margin: 4px 0 0 0 !important;
}

/* Synopsis improvements — glass card with accent border */
.rdmh-synopsis {
	background: var(--color-bg-elevated) !important;
	padding: 18px !important;
	border-radius: var(--radius-lg) !important;
	margin: 16px 0 !important;
	color: var(--color-text-secondary) !important;
	line-height: 1.7 !important;
	border: 1px solid var(--color-border) !important;
	border-left: 3px solid var(--color-primary) !important;
}

.rdmh-synopsis-heading,
.rdmh-section-heading {
	color: #4f7cff !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	margin: 0 0 10px 0 !important;
	font-size: 1.1rem !important;
}

/* v6.35.1: Handle landscape featured images in portrait card containers */
.tk-card-poster img {
    object-fit: cover !important;
    object-position: center top !important;
}

/* If image is clearly landscape (wide banner), use contain to show full image */
.tk-card-poster img[src*="cover-1457"],
.tk-card-poster img[src*="cover-1454"] {
    object-fit: contain !important;
    background: var(--color-bg-deep) !important;
    padding: 10px !important;
}

/* Card poster missing image placeholder */
.tk-card-poster:empty,
.tk-hscroll-poster:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #13131f;
}
.tk-card-poster:empty::after,
.tk-hscroll-poster:empty::after {
    content: '🎬';
    font-size: 2rem;
    opacity: 0.3;
}

/* ===== UI/UX Pro Max: Loading States & Skeleton Screens ===== */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton {
    background: var(--color-bg-elevated);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    animation: shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-title {
    height: 20px;
    margin-bottom: 12px;
    width: 70%;
}

.skeleton-poster {
    aspect-ratio: 2 / 3;
    width: 100%;
}

.skeleton-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ===== UI/UX Pro Max: Enhanced Micro-Interactions ===== */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes gradient-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Live indicator pulse */
.live-indicator {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Floating animation for special elements */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Gradient animation for hero elements */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradient-pulse 3s ease infinite;
}

/* ===== UI/UX Pro Max: Touch Feedback ===== */
@media (hover: hover) {
    .tk-card:hover {
        transform: translateY(-6px) scale(1.02);
    }
    
    .hero-watch-btn:hover {
        transform: translateY(-3px);
    }
}

/* Touch device: immediate feedback */
@media (hover: none) {
    .tk-card:active {
        transform: scale(0.98);
        transition-duration: 80ms;
    }
    
    .hero-watch-btn:active {
        transform: scale(0.97);
        transition-duration: 80ms;
    }
}

/* ===== UI/UX Pro Max: Focus States for Accessibility ===== */
.tk-card:focus-within, .rdm-card:focus-within,
.hero-watch-btn:focus-visible,
.rdmh-btn:focus-visible,
.pagination .page-numbers:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* ===== UI/UX Pro Max: Performance Optimizations ===== */
/* will-change only on hover for GPU acceleration */
.tk-card:hover,
.hero-watch-btn:hover,
.rdmh-btn:hover {
    will-change: transform;
}

/* Contain layout for card grid */
.rdm-archive-grid {
    contain: style;
}

/* GPU acceleration for animations */
.hero-wrapper,
.hero-bg,
.tk-hscroll {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== UI/UX Pro Max: Dark Mode Contrast Verification ===== */
/* Primary text: 4.5:1+ contrast on dark backgrounds */
.hero-title,
.rdmh-post-title,
.tk-card-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Secondary text: 3:1+ contrast */
.hero-meta,
.rdmh-ep-info,
.tk-card-meta {
    color: #d1d5db !important;
}

/* Muted text: 2:1+ contrast for decorative content */
.rdm-archive-description,
.rdm-footer-bottom {
    color: #b0b7c3 !important;
}

/* ===== UI/UX Pro Max: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }

    .live-indicator {
        animation: none;
    }

    .float-animation {
        animation: none;
    }

    .gradient-animate {
        animation: none;
    }

    .tk-card:hover {
        transform: none;
    }

    .hero-watch-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   RDM ANIME — v4 REDESIGN LAYER (Unified Gold + Purple Neon)
   Appended LAST so these rules win over everything above.
   Uses unified --rdm-* tokens from style.css :root.
   Sections: 1) Global polish  2) Header/footer  3) Homepage hero+carousels
             4) Homepage grid cards + pills  5) Single-anime detail page
             6) Episode list force-override  7) Responsive
   ========================================================================== */

/* ---------- v4.1  GLOBAL POLISH ---------- */
html {
    background: var(--color-bg-deep) !important;
    scrollbar-color: var(--glow-purple) var(--color-bg-deep);
    scrollbar-width: thin;
}
body {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(79, 124, 255, 0.12), transparent 60%),
        radial-gradient(1000px 500px at 0% 0%, rgba(79, 124, 255, 0.06), transparent 55%),
        var(--color-bg-deep) !important;
    background-attachment: fixed;
}
/* Neon scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rdm-gold), var(--rdm-purple));
    border-radius: var(--rdm-radius-full);
    border: 2px solid #0b0b16;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--rdm-gold-bright), var(--rdm-purple-bright)); }

/* Stronger, gold-to-purple focus ring across the UI */

/* Heading display scale */
h1, h2, h3 { font-family: var(--rdm-font-display, 'Poppins', sans-serif) !important; letter-spacing: -0.01em; }

/* Generic reusable neon button (used by hero, cards, episode list) */
.rdm-btn-gold,
.btn-gold,
.tk-card-btn-watch,
.rdmh-btn-watch,
.hero-watch-btn,
a[href*="/watch/"].btn-gold {
    background: var(--rdm-gold-grad) !important;
    color: #1a1205 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: var(--rdm-radius-full) !important;
    box-shadow: var(--rdm-glow-gold), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    transition: transform var(--rdm-fast) var(--rdm-ease), box-shadow var(--rdm-fast) var(--rdm-ease), filter var(--rdm-fast) var(--rdm-ease) !important;
}
.rdm-btn-gold:hover, .btn-gold:hover, .tk-card-btn-watch:hover, .rdmh-btn-watch:hover, .hero-watch-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
    box-shadow: var(--rdm-glow-gold), var(--rdm-glow-purple), 0 8px 22px rgba(0, 0, 0, 0.5) !important;
}
.rdm-btn-purple,
.btn-glass,
.tk-card-btn-details,
.rdmh-btn-dl,
.rdmh-btn-pack {
    background: rgba(79, 124, 255, 0.16) !important;
    color: var(--rdm-purple-bright) !important;
    border: 1px solid rgba(79, 124, 255, 0.45) !important;
    border-radius: var(--rdm-radius-full) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 600 !important;
    transition: transform var(--rdm-fast) var(--rdm-ease), background var(--rdm-fast) var(--rdm-ease), box-shadow var(--rdm-fast) var(--rdm-ease) !important;
}
.rdm-btn-purple:hover, .btn-glass:hover, .tk-card-btn-details:hover, .rdmh-btn-dl:hover, .rdmh-btn-pack:hover {
    background: rgba(79, 124, 255, 0.32) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--rdm-glow-purple) !important;
}

/* ---------- v4.2  HEADER & FOOTER ---------- */
#rdm-masthead,
.rdm-site-header {
    background: rgba(11, 14, 20, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}
#rdm-masthead::before,
.rdm-site-header::before {
    content: none !important;
    display: none !important;
}
.rdm-logo-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--rdm-text);
}
.rdm-logo-accent {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--rdm-accent-bright) !important;
    filter: none !important;
}
.rdm-nav-list > li > a:hover { color: var(--rdm-accent-bright) !important; }

/* Footer — glass panels + neon link hover */
#rdm-site-footer,
.rdm-site-footer {
    background:
        radial-gradient(800px 300px at 50% 120%, rgba(79, 124, 255, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(15, 15, 26, 0.6), #07070d) !important;
    border-top: 1px solid rgba(79, 124, 255, 0.16) !important;
}
.rdm-footer-logo { text-shadow: 0 0 16px rgba(79, 124, 255, 0.4); }
.rdm-footer-links a,
.rdm-footer-col a {
    color: var(--color-text-secondary) !important;
    transition: color var(--duration-fast), text-shadow var(--duration-fast);
}
.rdm-footer-links a:hover,
.rdm-footer-col a:hover {
    color: var(--rdm-gold-bright) !important;
    text-shadow: 0 0 12px rgba(79, 124, 255, 0.5);
    text-decoration: none !important;
}
.rdm-footer-heading {
    background: linear-gradient(90deg, var(--rdm-gold-bright), var(--rdm-purple)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Mobile bottom nav — neon active state */
.rdm-bottom-nav {
    background: rgba(10, 10, 18, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(79, 124, 255, 0.2) !important;
    box-shadow: 0 -6px 30px rgba(79, 124, 255, 0.2) !important;
}
.rdm-bottom-nav-item { transition: color var(--duration-fast), transform var(--duration-fast); }
.rdm-bottom-nav-item:active,
.rdm-bottom-nav-item[aria-current="page"] {
    color: var(--rdm-gold-bright) !important;
    transform: translateY(-2px);
}
.rdm-bottom-nav-item[aria-current="page"] svg {
    filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.6));
}

/* ---------- v4.3  HOMEPAGE — HERO / SPOTLIGHT (cinematic) ---------- */
.tatakai-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 20px 0;
}
.hero-wrapper,
#rdm-hero-slider {
    position: relative;
    border-radius: var(--rdm-radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--rdm-shadow-lg), var(--rdm-glow-purple) !important;
    border: 1px solid rgba(79, 124, 255, 0.14);
    margin-bottom: 8px;
}
.hero-overlay {
    background: linear-gradient(90deg, rgba(7, 7, 13, 0.96) 0%, rgba(7, 7, 13, 0.82) 38%, rgba(7, 7, 13, 0.35) 75%, rgba(7, 7, 13, 0.05) 100%) !important;
}
.hero-bg::after {
    /* purple neon wash behind hero content */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 320px at 14% 78%, rgba(79, 124, 255, 0.32), transparent 65%);
    pointer-events: none;
}
.hero-content { padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 56px) !important; }
.spotlight-tag {
    color: var(--rdm-gold-bright) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.78rem !important;
}
.spotlight-line {
    background: linear-gradient(90deg, var(--rdm-gold-bright), var(--rdm-purple)) !important;
    box-shadow: 0 0 10px rgba(122, 162, 255, 0.6);
}
.hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, var(--rdm-gold-bright) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 24px rgba(79, 124, 255, 0.35));
    line-height: 1.08 !important;
    max-width: 620px;
}
.quality-badge {
    background: linear-gradient(135deg, #3a61e8, #7aa2ff) !important;
    color: #1a1205 !important;
    font-weight: 800 !important;
    box-shadow: var(--rdm-glow-gold) !important;
    border-radius: var(--rdm-radius-sm) !important;
}
.hero-desc {
    color: var(--color-text-secondary) !important;
    max-width: 560px;
    line-height: 1.65;
}
.hero-poster-wrapper {
    border-radius: var(--rdm-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--rdm-shadow-lg), var(--rdm-glow-purple) !important;
    border: 1px solid rgba(79, 124, 255, 0.22);
}
.hero-dots .hero-dot { transition: all var(--duration-fast); }
.hero-dot-fill {
    background: linear-gradient(90deg, var(--rdm-gold-bright), var(--rdm-purple)) !important;
    box-shadow: 0 0 8px rgba(122, 162, 255, 0.5);
}
.hero-nav .nav-arrow,
.nav-arrow {
    background: rgba(79, 124, 255, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 162, 255, 0.35) !important;
    color: #fff !important;
    transition: all var(--duration-fast) var(--ease-out);
}
.hero-nav .nav-arrow:hover,
.nav-arrow:hover {
    background: rgba(79, 124, 255, 0.42) !important;
    box-shadow: var(--shadow-purple) !important;
    transform: scale(1.08);
}

/* Homepage hero search bar */
.tk-search-bar form,
#rdm-hero-search {
    background: rgba(20, 20, 42, 0.7) !important;
    border: 1px solid rgba(79, 124, 255, 0.22) !important;
    border-radius: var(--rdm-radius-full) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--shadow-md) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.tk-search-bar form:focus-within,
.tk-search-bar input:focus {
    border-color: var(--rdm-purple) !important;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.18), var(--shadow-purple) !important;
}

/* ---------- v4.4  SECTION HEADERS + CAROUSELS ---------- */
.tk-section { margin-top: clamp(28px, 4vw, 46px) !important; }
.tk-section-title,
h2.tk-section-title {
    color: var(--rdm-gold) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--rdm-gold) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    display: block !important;
}
.tk-section-header.v-text-reveal,
.tk-section-header {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.tk-title-icon { filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.6)); }
.tk-view-all {
    color: var(--color-text-muted) !important;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--rdm-radius-full);
    border: 1px solid var(--color-border);
    transition: all var(--duration-fast) var(--ease-out);
}
.tk-view-all:hover {
    color: var(--rdm-gold-bright) !important;
    border-color: rgba(79, 124, 255, 0.5);
    box-shadow: var(--shadow-glow);
    text-decoration: none !important;
}

/* Carousel scroll arrows */
.tk-hscroll-btn {
    background: rgba(20, 20, 42, 0.82) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 124, 255, 0.22) !important;
    color: var(--rdm-gold-bright) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--duration-fast) var(--ease-out);
}
.tk-hscroll-btn:hover {
    background: rgba(79, 124, 255, 0.4) !important;
    border-color: rgba(122, 162, 255, 0.5) !important;
    color: #fff !important;
    box-shadow: var(--shadow-purple) !important;
    transform: scale(1.1);
}

/* Carousel card — neon edge glow + poster zoom */
.tk-hscroll-card {
    background: transparent !important;
    border-radius: var(--rdm-radius-lg) !important;
    text-decoration: none !important;
}
.tk-hscroll-poster {
    position: relative;
    border-radius: var(--rdm-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(79, 124, 255, 0.12);
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.tk-hscroll-poster img {
    transition: transform var(--duration-slow) var(--ease-out) !important;
}
.tk-hscroll-card:hover .tk-hscroll-poster {
    transform: translateY(-6px);
    border-color: rgba(122, 162, 255, 0.6);
    box-shadow: var(--shadow-lg), var(--shadow-purple) !important;
}
.tk-hscroll-card:hover .tk-hscroll-poster img {
    transform: scale(1.07);
}
.tk-hscroll-card:hover h3 {
    color: var(--rdm-gold-bright) !important;
}
/* Carousel badges */
.tk-rank-badge {
    background: linear-gradient(135deg, #3a61e8, #7aa2ff) !important;
    color: #1a1205 !important;
    font-weight: 900 !important;
    box-shadow: var(--shadow-glow) !important;
    border-radius: var(--rdm-radius-full) !important;
}
.tk-status-new,
.tk-hscroll-status.tk-status-new {
    background: linear-gradient(135deg, var(--rdm-purple), var(--rdm-pink)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-purple) !important;
    border-radius: var(--radius-sm) !important;
}
.tk-status-airing,
.tk-hscroll-status.tk-status-airing {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    border-radius: var(--radius-sm) !important;
}
.tk-hscroll-status {
    background: rgba(10, 10, 18, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}

/* ---------- v4.5  PILLS (language + genre) ---------- */
.tk-lang-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.tk-lang-card {
    position: relative;
    background: rgba(20, 20, 42, 0.6) !important;
    border: 1px solid rgba(79, 124, 255, 0.18) !important;
    border-radius: var(--rdm-radius-lg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
    text-decoration: none !important;
}
.tk-lang-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.0), rgba(79, 124, 255, 0.22));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}
.tk-lang-card:hover {
    transform: translateY(-4px);
    border-color: rgba(122, 162, 255, 0.55) !important;
    box-shadow: var(--shadow-purple) !important;
}
.tk-lang-card:hover::before { opacity: 1; }
.tk-lang-card:hover .tk-lang-name { color: var(--rdm-gold-bright) !important; }

.tk-genres { gap: 10px !important; flex-wrap: wrap; display: flex; }
.tk-genre {
    background: rgba(20, 20, 42, 0.6) !important;
    border: 1px solid rgba(79, 124, 255, 0.2) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--rdm-radius-full) !important;
    padding: 8px 18px !important;
    font-weight: 600;
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
}
a.tk-genre:hover {
    background: rgba(79, 124, 255, 0.28) !important;
    border-color: rgba(122, 162, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: var(--shadow-purple);
    transform: translateY(-2px);
}
.tk-genre.active,
span.tk-genre.active {
    background: var(--rdm-gold-grad) !important;
    color: #1a1205 !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-glow);
}

/* ---------- v4.6  GRID CARD (Recently Updated) ---------- */
.tk-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.tk-card {
    background: var(--rdm-bg-card) !important;
    border: 1px solid rgba(79, 124, 255, 0.12) !important;
    border-radius: var(--rdm-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.tk-card:hover {
    transform: translateY(-6px);
    border-color: rgba(122, 162, 255, 0.55) !important;
    box-shadow: var(--shadow-lg), var(--shadow-purple) !important;
}
.tk-card-poster { overflow: hidden; }
.tk-card-poster img { transition: transform var(--duration-slow) var(--ease-out) !important; }
.tk-card:hover .tk-card-poster img { transform: scale(1.08); }
.tk-card-overlay {
    background: linear-gradient(180deg, transparent 40%, rgba(7, 7, 13, 0.85)) !important;
}
.tk-card-play {
    color: var(--rdm-gold-bright) !important;
    filter: drop-shadow(0 0 10px rgba(79, 124, 255, 0.7));
}
.tk-card-lang-badge.lang-dub {
    background: linear-gradient(135deg, var(--rdm-purple), var(--rdm-pink)) !important;
    color: #fff !important;
    box-shadow: var(--shadow-purple) !important;
}
.tk-card-score,
.tk-card-rating-val {
    color: var(--rdm-gold-bright) !important;
    font-weight: 700;
}
.tk-card-season,
.tk-card-eps {
    background: rgba(7, 7, 13, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
}
.tk-card-title a { color: var(--color-text) !important; text-decoration: none; }
.tk-card:hover .tk-card-title a { color: var(--rdm-gold-bright) !important; }
.tk-card-meta { color: var(--color-text-muted) !important; }

/* CTA boxes (A-Z + Telegram) */
.tk-az-cta-box,
.tk-telegram-box {
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.16), rgba(79, 124, 255, 0.08)) !important;
    border: 1px solid rgba(122, 162, 255, 0.28) !important;
    border-radius: var(--rdm-radius-xl) !important;
    box-shadow: var(--shadow-purple) !important;
}

/* ---------- v4.7  SINGLE-ANIME DETAIL PAGE ---------- */
.rdmh-anime-content {
    max-width: 1100px;
    margin: 0 auto;
}
.rdmh-post-title,
h1.rdmh-post-title,
h2.rdmh-post-title {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, var(--rdm-gold-bright) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.18 !important;
}
.rdmh-post-subtitle,
h2.rdmh-post-subtitle {
    color: var(--rdm-purple-bright) !important;
    font-weight: 600 !important;
}

/* Two-column poster + info panel (desktop) */
.rdmh-anime-content {
    overflow: hidden;
}
@media (min-width: 769px) {
    .rdmh-poster-wrap {
        float: left !important;
        width: 300px !important;
        margin: 0 32px 16px 0 !important;
        position: relative;
        border-radius: var(--rdm-radius-lg) !important;
        overflow: hidden;
        box-shadow: var(--shadow-lg), var(--shadow-purple) !important;
        border: 1px solid rgba(79, 124, 255, 0.22);
    }
}
.rdmh-poster-img,
.rdmh-poster-wrap img {
    border-radius: var(--rdm-radius-lg) !important;
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Section headings on the detail page */
.rdmh-section > h2,
.rdmh-anime-content h2 {
    background: linear-gradient(90deg, #ffffff, var(--rdm-gold-bright) 75%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    position: relative;
    padding-bottom: 8px;
}
.rdmh-section > h2::after,
.rdmh-anime-content h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    border-radius: var(--rdm-radius-full);
    background: linear-gradient(90deg, var(--rdm-gold-bright), var(--rdm-purple));
    box-shadow: 0 0 10px rgba(122, 162, 255, 0.6);
}

/* Series info list */
.rdmh-series-info,
.rdmh-info-list {
    background: rgba(20, 20, 42, 0.5) !important;
    border: 1px solid rgba(79, 124, 255, 0.14) !important;
    border-radius: var(--rdm-radius-lg) !important;
    padding: 8px 22px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.rdmh-info-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 9px 0 !important;
}
.rdmh-info-list li:last-child { border-bottom: none !important; }
.rdmh-info-list strong {
    color: var(--rdm-gold-bright) !important;
    min-width: 130px;
    display: inline-block;
}

.rdmh-synopsis { color: var(--color-text-secondary) !important; line-height: 1.7; }

/* ---------- v4.8  EPISODE LIST (force-override inline wp_head styles) ----------
   The plugin injects an inline <style> via wp_head priority 100 with !important.
   We beat it with higher specificity + !important (later equal-specificity wins,
   so we scope under body to guarantee the win regardless of source order). */
body.single .rdmh-ep {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    background: linear-gradient(135deg, rgba(20, 20, 42, 0.7), rgba(15, 15, 26, 0.7)) !important;
    border: 1px solid rgba(79, 124, 255, 0.14) !important;
    border-left: 3px solid var(--rdm-gold-bright) !important;
    border-radius: var(--rdm-radius) !important;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast) !important;
}
body.single .rdmh-ep:hover {
    transform: translateX(4px) !important;
    border-left-color: var(--rdm-purple-bright) !important;
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.14), rgba(20, 20, 42, 0.8)) !important;
    box-shadow: var(--shadow-purple) !important;
}
body.single .rdmh-ep br { display: none !important; }
body.single .rdmh-ep-badge {
    flex-shrink: 0 !important;
    min-width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--rdm-gold-grad) !important;
    color: #1a1205 !important;
    font-weight: 800 !important;
    border-radius: var(--rdm-radius-full) !important;
    box-shadow: var(--shadow-glow) !important;
}
body.single .rdmh-ep-info {
    flex: 1 1 160px !important;
    min-width: 150px !important;
}
body.single .rdmh-ep-title { color: var(--color-text) !important; font-weight: 600; }
body.single .rdmh-ep-new-tag {
    background: linear-gradient(135deg, var(--rdm-purple), var(--rdm-pink)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-purple) !important;
    margin-left: 6px;
}
body.single .rdmh-ep-btns {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
body.single .rdmh-ep-btns br { display: none !important; }
body.single .rdmh-btn { white-space: nowrap; }
/* Watch = gold, Download = purple (covered globally, reinforce size here) */
body.single .rdmh-ep-btns .rdmh-btn-watch,
body.single .rdmh-ep-btns .rdmh-btn-dl {
    padding: 9px 16px !important;
    font-size: 0.9rem !important;
}

/* Season pack + how-to + disclaimer */
.rdmh-zip-pack {
    background: rgba(79, 124, 255, 0.1) !important;
    border: 1px solid rgba(122, 162, 255, 0.28) !important;
    border-radius: var(--rdm-radius-lg) !important;
    padding: 18px !important;
}
.rdmh-btn-pack {
    padding: 12px 24px !important;
    font-size: 1rem !important;
}
.rdmh-disclaimer {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
    border-radius: var(--rdm-radius) !important;
    padding: 14px 18px !important;
    color: var(--color-text-secondary) !important;
    font-size: 0.88rem !important;
}

/* Breadcrumbs on detail page */
.rdmh-breadcrumb-nav a,
nav.rdmh-breadcrumb-nav a {
    color: var(--rdm-gold-bright) !important;
}
.rdmh-breadcrumb-current {
    color: var(--color-text-muted) !important;
}

/* ---------- v4.9  RESPONSIVE POLISH ---------- */

/* Tablet transition (769-921px) — graceful poster reveal */
@media (min-width: 769px) and (max-width: 921px) {
    .hero-poster-wrapper {
        display: block;
        max-width: 200px;
        margin: 0 auto;
    }
    .hero-title {
        font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    }
}

/* Tablet and below */
@media (max-width: 768px) {
    .tatakai-home { padding: 14px 14px 0; }

    /* Hero: tighter, poster hidden to maximize space if present */
    .hero-content { padding: 22px 18px !important; }
    .hero-poster-wrapper { display: none; }
    .hero-title { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
    .hero-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Denser, scrollable card grid -> fewer columns */
    .tk-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }

    /* Language pills stack to 2-up */
    .tk-lang-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Detail page poster full width, clear float */
    .rdmh-poster-wrap {
        float: none !important;
        width: 160px !important;
        margin: 0 auto 16px !important;
    }

    /* Episode list stacks vertically, buttons full width */
    body.single .rdmh-ep {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.single .rdmh-ep-info { width: 100%; }
    body.single .rdmh-ep-btns {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    body.single .rdmh-ep-btns .rdmh-btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center;
        padding: 11px 12px !important;
    }
}

/* Small phones */
@media (max-width: 544px) {
    .tk-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 11px !important;
    }
    /* Hide carousel side-arrows on phones (swipe instead) */
    .tk-hscroll-btn { display: none !important; }
    .tk-hscroll-poster img { width: 100%; }

    .tk-section-title,
    h2.tk-section-title { font-size: 1.15rem !important; }

    /* Series info labels stack on tiny screens */
    .rdmh-info-list strong { display: block !important; min-width: 0; margin-bottom: 2px; }

    /* Bottom nav + content padding so nothing hides behind it */
    .tatakai-home { padding-bottom: 84px; }
    .ast-container, #content { padding-bottom: 70px; }
}

/* Very small phones */
@media (max-width: 360px) {
    .tk-grid { gap: 9px !important; }
    .hero-btns { flex-direction: column; align-items: stretch; gap: 8px; }
    .hero-btns .btn-gold,
    .hero-btns .btn-glass { width: 100%; text-align: center; }
}

/* Touch devices: disable hover lifts/zoom that cause sticky states */
@media (hover: none) {
    .tk-hscroll-card:hover .tk-hscroll-poster,
    .tk-card:hover,
    body.single .rdmh-ep:hover {
        transform: none !important;
    }
    .tk-hscroll-card:hover .tk-hscroll-poster img,
    .tk-card:hover .tk-card-poster img {
        transform: none !important;
    }
}

/* ==========================================================================
   HOMEPAGE LAYOUT REFINEMENTS (Stage 3)
   Hero cinematic poster, section rhythm, carousel density
   ========================================================================== */

/* Hero poster — larger, more cinematic */
.hero-poster {
    width: 260px !important;
    border-radius: var(--rdm-radius-lg) !important;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(79, 124, 255, 0.3) !important;
}
.hero-poster-wrapper {
    transform: translateX(40px) scale(0.95) rotate(1.5deg) !important;
}
.hero-slide.active .hero-poster-wrapper {
    transform: translateX(0) scale(1) rotate(1.5deg) !important;
}

/* Section rhythm — tighter, cleaner gaps between sections */
.tk-section {
    margin-top: clamp(20px, 3vw, 36px) !important;
    margin-bottom: 0 !important;
}
.tk-section-header {
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
}

/* Carousel cards — slightly wider for better poster visibility */
.tk-hscroll-card {
    flex: 0 0 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
}

/* Grid cards — poster-dominant, tighter */
.tk-card-poster {
    aspect-ratio: 2/3 !important;
}
.tk-card-body {
    padding: 8px 10px 12px !important;
}
.tk-card-title {
    font-size: 0.8rem !important;
    min-height: 2em !important;
}

/* Language grid — 3-up on desktop */
@media (min-width: 769px) {
    .tk-lang-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Genre pills — horizontal scroll on mobile */
@media (max-width: 768px) {
    .tk-genres {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    .tk-genres::-webkit-scrollbar { display: none !important; }
    .tk-genre {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   SINGLE-ANIME DETAIL PAGE REFINEMENTS (Stage 4)
   Episode list polish, poster shadow, season pack, series info
   ========================================================================== */

/* Episode list — tighter rows, better hover feedback */
body.single .rdmh-ep {
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
}
body.single .rdmh-ep:hover {
    border-left-color: var(--rdm-gold-bright) !important;
    box-shadow: var(--shadow-md), 0 0 20px rgba(79, 124, 255, 0.2) !important;
}

/* Episode badge — larger, more prominent */
body.single .rdmh-ep-badge {
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
    border-radius: var(--rdm-radius-lg) !important;
}

/* Episode info — tighter */
body.single .rdmh-ep-info {
    font-size: 0.88rem !important;
}
body.single .rdmh-ep-title {
    font-size: 0.92rem !important;
}

/* Watch button — gold with glow */
body.single .rdmh-ep-btns .rdmh-btn-watch {
    box-shadow: 0 2px 12px rgba(79, 124, 255, 0.4), 0 0 20px rgba(79, 124, 255, 0.15) !important;
}

/* Download button — purple glass */
body.single .rdmh-ep-btns .rdmh-btn-dl {
    background: rgba(79, 124, 255, 0.2) !important;
    border: 1px solid rgba(122, 162, 255, 0.4) !important;
    color: var(--rdm-purple-bright) !important;
}
body.single .rdmh-ep-btns .rdmh-btn-dl:hover {
    background: rgba(79, 124, 255, 0.35) !important;
    box-shadow: 0 0 20px rgba(79, 124, 255, 0.3) !important;
}

/* Poster — enhanced shadow on detail page */
.rdmh-poster-wrap {
    box-shadow: var(--shadow-lg), 0 0 40px rgba(79, 124, 255, 0.25) !important;
    border: 1px solid rgba(79, 124, 255, 0.2) !important;
}
.rdmh-poster-img {
    transition: transform var(--duration-normal) var(--ease-out) !important;
}
.rdmh-poster-img:hover {
    transform: scale(1.04) !important;
}

/* Series info — glass card with purple accent */
.rdmh-series-info,
.rdmh-info-list {
    border-left: 3px solid var(--rdm-purple) !important;
}

/* Synopsis — refined */
.rdmh-synopsis {
    border-left: 3px solid var(--rdm-gold-bright) !important;
    background: rgba(20, 20, 42, 0.6) !important;
}

/* Season pack — purple glass */
.rdmh-zip-pack {
    background: rgba(79, 124, 255, 0.12) !important;
    border: 1px solid rgba(122, 162, 255, 0.3) !important;
    border-radius: var(--rdm-radius-lg) !important;
}
.rdmh-btn-pack {
    background: linear-gradient(135deg, var(--rdm-purple), var(--rdm-pink)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--shadow-purple) !important;
}
.rdmh-btn-pack:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-purple-lg) !important;
}

/* Disclaimer — refined */
.rdmh-disclaimer {
    border-left: 3px solid var(--rdm-red) !important;
}

/* Detail page headings — gradient text */
.rdmh-anime-content h2 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   RESPONSIVE POLISH (Stage 5)
   Small phone tweaks, hero cleanup, episode stack, bottom-nav glow
   ========================================================================== */

/* Tablet (≤921px) — refined hero */
@media (max-width: 921px) {
    .hero-wrapper {
        height: 380px !important;
    }
    .hero-content {
        padding: 0 24px !important;
    }
    .hero-info {
        width: 55% !important;
    }
    .hero-poster {
        width: 160px !important;
    }
    .hero-title {
        font-size: 1.5rem !important;
    }
    .hero-desc {
        display: none !important;
    }
}

/* Small phone (≤480px) — poster hidden, title fills, touch targets */
@media (max-width: 480px) {
    .hero-wrapper {
        height: 320px !important;
    }
    .hero-content {
        padding: 0 16px !important;
    }
    .hero-info {
        width: 100% !important;
    }
    .hero-poster-wrapper {
        display: none !important;
    }
    .hero-title {
        font-size: 1.3rem !important;
    }
    .hero-desc {
        display: none !important;
    }
    .hero-btns {
        gap: 10px !important;
    }
    .hero-btn {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }
    /* Carousel cards — smaller */
    .tk-hscroll-card {
        flex: 0 0 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
    }
    /* Grid — 2 columns */
    .tk-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* Episode rows — vertical stack on tiny screens */
    body.single .rdmh-ep {
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
    }
    body.single .rdmh-ep-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.8rem !important;
    }
    body.single .rdmh-ep-info {
        min-width: 0 !important;
        width: 100% !important;
    }
    body.single .rdmh-ep-btns {
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 4px !important;
    }
    body.single .rdmh-ep-btns a {
        flex: 1 !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Detail page — poster full width */
    .rdmh-poster-wrap {
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto 20px !important;
        float: none !important;
    }
}

/* Bottom nav — active glow */
.rdm-bottom-nav-item.active .rdm-bottom-nav-icon,
.rdm-bottom-nav-item.active {
    color: var(--rdm-gold-bright) !important;
    filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.6)) drop-shadow(0 0 16px rgba(79, 124, 255, 0.3)) !important;
}

/* =============================================
   VENGEANCE UI INSPIRED EFFECTS
   ============================================= */

/* --- 1. BORDER BEAM GLOW --- */
@keyframes border-beam {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
.rdm-beam {
    position: relative;
    overflow: hidden;
}
.rdm-beam::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(79, 124, 255, 0.8), rgba(79, 124, 255, 0.8), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.rdm-beam:hover::after,
.rdm-beam.active::after {
    opacity: 1;
    animation: border-beam 2.5s linear infinite;
}
/* Header beam */
#rdm-masthead.rdm-beam::after {
    background: linear-gradient(90deg, transparent 0%, rgba(79, 124, 255, 0.7) 25%, rgba(79, 124, 255, 0.7) 50%, rgba(79, 124, 255, 0.7) 75%, transparent 100%);
    background-size: 200% 100%;
    animation: beam-sweep 3s ease-in-out infinite;
}
@keyframes beam-sweep {
    0%, 100% { background-position: 200% 0; opacity: 0.6; }
    50% { background-position: -200% 0; opacity: 1; }
}
/* Card beam on hover */
.tk-card.rdm-beam::after {
    border-radius: var(--rdm-radius-lg);
}
.tk-card:hover.rdm-beam::after {
    opacity: 1;
}

/* --- 2. SHINE BUTTON EFFECT --- */
.btn-gold,
.btn-glass,
.tk-card-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-gold::before,
.btn-glass::before,
.tk-card-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    z-index: -1;
    pointer-events: none;
}
.btn-gold:hover::before,
.btn-glass:hover::before,
.tk-card-btn:hover::before {
    left: 120%;
}
/* Active press scale */
.btn-gold:active,
.btn-glass:active,
.tk-card-btn:active {
    transform: scale(0.97);
}

/* --- 3. ANIMATED GRADIENT TEXT --- */
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.rdm-gradient-text {
    background: linear-gradient(135deg, #4f7cff, #ff6b35, #4f7cff, #ff6b9d, #4f7cff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease infinite;
}
.tk-section-title {
    position: relative;
    display: inline-block;
}
.tk-section-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rdm-gold), var(--rdm-purple));
    border-radius: 2px;
    transition: width 0.4s ease;
}
.tk-section:hover .tk-section-title::after,
.tk-section-title:hover::after {
    width: 100%;
}

/* --- 4. SCROLL-DRIVEN ANIMATIONS --- */
.reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
}
.reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children */
.reveal-section .tk-card,
.reveal-section.revealed .tk-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
.reveal-section.revealed .tk-card:nth-child(1) { animation-delay: 0.05s; }
.reveal-section.revealed .tk-card:nth-child(2) { animation-delay: 0.1s; }
.reveal-section.revealed .tk-card:nth-child(3) { animation-delay: 0.15s; }
.reveal-section.revealed .tk-card:nth-child(4) { animation-delay: 0.2s; }
.reveal-section.revealed .tk-card:nth-child(5) { animation-delay: 0.25s; }
.reveal-section.revealed .tk-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes card-reveal {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Horizontal scroll cards */
.reveal-section .tk-hscroll-card,
.reveal-section.revealed .tk-hscroll-card {
    transform: none !important;
    animation: none !important;
    opacity: 0;
}
.reveal-section.revealed .tk-hscroll-card {
    opacity: 1 !important;
}
.reveal-section.revealed .tk-hscroll-card:nth-child(1) { animation-delay: 0.05s; }
.reveal-section.revealed .tk-hscroll-card:nth-child(2) { animation-delay: 0.1s; }
.reveal-section.revealed .tk-hscroll-card:nth-child(3) { animation-delay: 0.15s; }
.reveal-section.revealed .tk-hscroll-card:nth-child(4) { animation-delay: 0.2s; }
@keyframes hscroll-reveal {
    from { opacity: 0; transform: translateX(-20px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
/* Hero section reveal — disabled for reliability */
.reveal-section .hero-wrapper,
.reveal-section.revealed .hero-wrapper {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
@keyframes hero-reveal {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* --- 5. 3D CARD HOVER TILT --- */
.tk-grid {
    perspective: 800px;
}
.tk-card {
    transform-style: preserve-3d;
}
.tk-card .tk-card-poster {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    transform: translateZ(0);
}
.tk-card:hover .tk-card-poster {
    transform: translateZ(12px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 12px 40px rgba(79, 124, 255, 0.3), 0 0 20px rgba(79, 124, 255, 0.15);
}
/* Language cards */
.tk-lang-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.tk-lang-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 30px rgba(79, 124, 255, 0.25);
}

/* --- 6. FLOATING GLOW PARTICLES --- */
@keyframes float-particle {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; }
    25% { transform: translateY(-20px) translateX(10px) scale(1.2); opacity: 0.7; }
    50% { transform: translateY(-10px) translateX(-5px) scale(0.9); opacity: 0.5; }
    75% { transform: translateY(-30px) translateX(-15px) scale(1.1); opacity: 0.6; }
}
.tatakai-home {
    position: relative;
}
.tatakai-home::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    width: 6px;
    height: 6px;
    background: var(--rdm-gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--rdm-gold), 0 0 24px rgba(79, 124, 255, 0.3);
    animation: float-particle 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.tatakai-home::after {
    content: '';
    position: absolute;
    top: 60%;
    right: 15%;
    width: 4px;
    height: 4px;
    background: var(--rdm-purple);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--rdm-purple), 0 0 20px rgba(79, 124, 255, 0.3);
    animation: float-particle 8s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* =====================================================================
   UI/UX Pro Max: Skeleton Loading Screens
   ===================================================================== */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.skeleton {
    background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-elevated) 50%, var(--color-bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

.skeleton-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.skeleton-card .skeleton-poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.skeleton-card .skeleton-body {
    padding: 10px 12px 14px;
    background: var(--color-bg-card);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.skeleton-card .skeleton-title {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
}

.skeleton-card .skeleton-meta {
    height: 12px;
    width: 50%;
}

.skeleton-section-title {
    height: 24px;
    width: 200px;
    margin-bottom: 20px;
}

.skeleton-section-subtitle {
    height: 14px;
    width: 120px;
    margin-bottom: 24px;
}

/* --- 7. REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .reveal-section,
    .reveal-section.revealed .tk-card,
    .reveal-section.revealed .tk-hscroll-card,
    .reveal-section.revealed .hero-wrapper {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .rdm-beam::after {
        animation: none !important;
        opacity: 0.5 !important;
    }
    .tatakai-home::before,
    .tatakai-home::after {
        animation: none !important;
    }
}

/* =====================================================================
   UI/UX Pro Max: Enhanced Responsive Breakpoints
   ===================================================================== */

/* Mobile first: 375px+ */
@media (min-width: 375px) {
    .rdm-header-inner {
        padding: 12px 16px;
    }
    .rdm-nav-list {
        gap: 16px;
    }
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
    .rdm-header-inner {
        padding: 14px 24px;
    }
    .rdm-nav-list {
        gap: 24px;
    }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    .rdm-header-inner {
        padding: 14px 32px;
    }
    .rdm-nav-list {
        gap: 28px;
    }
}

/* Large desktop: 1440px+ */
@media (min-width: 1440px) {
    .rdm-header-inner {
        max-width: 1400px;
    }
}

/* =====================================================================
   UI/UX Pro Max: Enhanced Button Interactions
   ===================================================================== */

/* Spring-like hover effect */
.btn, .rdm-btn, button {
    transition: transform var(--duration-fast) var(--ease-spring),
                background var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.btn:hover, .rdm-btn:hover {
    transform: scale(1.02);
}

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

/* Gold button enhanced shine */
.btn-gold, .rdm-btn-gold {
    position: relative;
    overflow: hidden;
}

.btn-gold::after, .rdm-btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-75deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: btn-shine 3s linear infinite;
    animation-play-state: paused;
    pointer-events: none;
}

.btn-gold:hover::after, .rdm-btn-gold:hover::after {
    animation-play-state: running;
}

@keyframes btn-shine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* =====================================================================
   UI/UX Pro Max: Enhanced Card Interactions
   ===================================================================== */

/* Card hover lift with glow */
.tk-card, .rdm-card {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) ease;
}

.tk-card:hover, .rdm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(79, 124, 255, 0.15);
}

/* =====================================================================
   UI/UX Pro Max: Section Spacing (48px+ gaps)
   ===================================================================== */

.tk-section, .rdm-section {
    padding: 0;
}

/* =====================================================================
   UI/UX Pro Max: Typography Scale (32px+ for headlines)
   ===================================================================== */

.tk-section-title, .rdm-section-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .tk-section-title, .rdm-section-title {
        font-size: clamp(2rem, 3vw, 3rem);
    }
}

/* =====================================================================
   UI/UX Pro Max: Scroll Snap for Horizontal Sections
   ===================================================================== */

.tk-hscroll, .rdm-hscroll {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.tk-hscroll-card, .rdm-hscroll-card {
    scroll-snap-align: start;
}

/* =====================================================================
   UI/UX Pro Max: Touch Target Minimum (44x44pt)
   ===================================================================== */

@media (hover: none) and (pointer: coarse) {
    .rdm-nav-list > li > a {
        padding: 12px 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .rdm-search-submit {
        width: 44px;
        height: 44px;
    }
    
    .rdm-mobile-menu-toggle {
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* =====================================================================
   UI/UX Pro Max: Horizontal Scroll Prevention
   ===================================================================== */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure content fits viewport */
.tk-section, .rdm-section, .rdm-header-inner {
    max-width: 100%;
    overflow: hidden;
}

/* =====================================================================
   UI/UX Pro Max: Loading States
   ===================================================================== */

/* Skeleton loading placeholder */
.skeleton {
    background: linear-gradient(90deg, var(--color-bg-surface) 25%, rgba(255, 255, 255, 0.08) 50%, var(--color-bg-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

/* =====================================================================
   UI/UX Pro Max: Focus Management
   ===================================================================== */

/* Skip to content link (use .skip-link in HTML) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 600;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* =====================================================================
   UI/UX Pro Max: Dark Mode Enhancements
   ===================================================================== */

/* Ensure proper contrast in dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
    
    /* Text contrast 4.5:1+ */
    .color-text {
        color: var(--color-text);
    }
    
    /* Secondary text contrast 3:1+ */
    .color-text-secondary {
        color: var(--color-text-secondary);
    }
    
    /* Border visibility */
    .color-border {
        border-color: var(--color-border);
    }
}

/* =====================================================================
   UI/UX Pro Max: Performance Optimizations
   ===================================================================== */

/* Will-change for animated elements */
.tk-card:hover .tk-card-poster,
.btn:hover,
.rdm-mobile-menu-toggle span {
    will-change: transform;
}

/* Contain layout for cards */
.tk-card {
    contain: style;
}

/* =====================================================================
   UI/UX Pro Max: Accessibility Enhancements
   ===================================================================== */

/* High contrast mode support */
@media (forced-colors: active) {
    .btn, .rdm-btn {
        border: 2px solid currentColor;
    }
    
    .tk-card {
        border: 1px solid currentColor;
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Print stylesheet — fix invisible text */
@media print {
    * {
        -webkit-text-fill-color: initial !important;
        text-fill-color: initial !important;
        animation: none !important;
        transition: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* ==========================================================================
   UI/UX Pro Max — Enhanced Visual Polish (v2.1)
   Cinema Dark + Vibrant block-based style
   ========================================================================== */

/* ----- Card Hover: Glow + Lift Effect ----- */
.tk-card {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out) !important;
}
.tk-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(79, 124, 255, 0.15),
                0 0 30px rgba(79, 124, 255, 0.08) !important;
    border-color: rgba(79, 124, 255, 0.2) !important;
}
.tk-card:active {
    transform: translateY(-2px) !important;
    transition-duration: 100ms !important;
}

/* ----- Card Poster: Enhanced Hover Zoom ----- */
.tk-card-poster img {
    transition: transform var(--duration-slow) var(--ease-out),
                filter var(--duration-normal) var(--ease-out) !important;
}
.tk-card:hover .tk-card-poster img {
    transform: scale(1.08) !important;
    filter: brightness(1.1) contrast(1.05) !important;
}

/* ----- Card Overlay: Play Button Glow ----- */
.tk-card-overlay {
    transition: opacity var(--duration-normal) var(--ease-out) !important;
}
.tk-card-play {
    transition: transform var(--duration-normal) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out) !important;
}
.tk-card:hover .tk-card-play {
    transform: scale(1.1) !important;
    box-shadow: 0 0 25px rgba(79, 124, 255, 0.4) !important;
}

/* ----- Card Badges: Subtle Pulse on Hover ----- */
.tk-card-score,
.tk-card-rating-val {
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring) !important;
}
.tk-card:hover .tk-card-score,
.tk-card:hover .tk-card-rating-val {
    background: rgba(79, 124, 255, 0.9) !important;
    color: #000 !important;
    transform: scale(1.05) !important;
}

/* ----- Button: Micro-interactions (UI/UX Pro Max) ----- */
.btn-gold,
.tk-card-btn-watch,
.rdm-btn-gold {
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out),
                background var(--duration-fast) var(--ease-out) !important;
    position: relative;
    overflow: hidden;
}
.btn-gold::after,
.tk-card-btn-watch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.btn-gold:hover::after,
.tk-card-btn-watch:hover::after {
    opacity: 1;
}
.btn-gold:hover,
.tk-card-btn-watch:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(79, 124, 255, 0.3) !important;
}
.btn-gold:active,
.tk-card-btn-watch:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 80ms !important;
}

/* Glass buttons */
.btn-glass,
.tk-card-btn-details {
    transition: transform var(--duration-fast) var(--ease-spring),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out) !important;
}
.btn-glass:hover,
.tk-card-btn-details:hover {
    transform: translateY(-2px) !important;
    background: rgba(94, 106, 210, 0.15) !important;
    border-color: rgba(94, 106, 210, 0.4) !important;
}
.btn-glass:active,
.tk-card-btn-details:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 80ms !important;
}

/* ----- Section Headers: Typography Hierarchy ----- */
.tk-section-header {
    position: relative;
    padding-bottom: 12px !important;
}
.tk-section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--glow-purple));
    border-radius: 2px;
    transition: width var(--duration-normal) var(--ease-out);
}
.tk-section-header:hover::after {
    width: 80px;
}

/* ----- Hero Section: Enhanced Gradient ----- */
.hero-wrapper {
    position: relative;
    overflow: hidden;
}
.hero-bg {
    transition: opacity var(--duration-slow) var(--ease-out) !important;
}
.hero-pattern {
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 20% 50%, var(--glow-purple) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--color-primary) 0%, transparent 40%);
}

/* ----- Hero Title: Text Shadow for Readability ----- */
.hero-title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ----- Hero Buttons: Shine Effect ----- */
.hero-btns .btn-gold {
    position: relative;
    overflow: hidden;
}
.hero-btns .btn-gold::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: none;
}
.hero-btns .btn-gold:hover::before {
    animation: shine 0.6s ease-out;
}

@keyframes shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ----- Loading Skeleton (UI/UX Pro Max) ----- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.tk-card.loading .tk-card-poster,
.tk-card.loading .tk-card-body {
    background: linear-gradient(90deg, 
        var(--color-bg-card) 25%, 
        rgba(255, 255, 255, 0.06) 50%, 
        var(--color-bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.tk-card.loading .tk-card-poster img,
.tk-card.loading .tk-card-title,
.tk-card.loading .tk-card-meta {
    opacity: 0;
}

/* ----- Rating Star: Pulse Animation ----- */
.rating-item svg,
.tk-card-score svg {
    transition: transform var(--duration-fast) var(--ease-spring) !important;
}
.rating-item:hover svg,
.tk-card-score:hover svg {
    transform: scale(1.2) rotate(5deg) !important;
}

/* ----- Navigation: Spotlight Effect ----- */
.nav-link,
.nav-item a {
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out) !important;
    position: relative;
}
.nav-link::after,
.nav-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--duration-normal) var(--ease-out),
                left var(--duration-normal) var(--ease-out);
    border-radius: 1px;
}
.nav-link:hover::after,
.nav-item a:hover::after {
    width: 100%;
    left: 0;
}

/* ----- Search Input: Focus Glow ----- */
input[type="search"],
input[name="s"] {
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out) !important;
}
input[type="search"]:focus,
input[name="s"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15) !important;
}

/* ----- Footer: Subtle Border Glow ----- */
footer,
.site-footer {
    border-top: 1px solid var(--color-border);
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-purple-dim), transparent);
}

/* ----- Scroll-to-Top: Glow Button ----- */
.scroll-top,
#scroll-top {
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out) !important;
}
.scroll-top:hover,
#scroll-top:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(79, 124, 255, 0.3) !important;
}

/* ----- Accessibility: Focus Visible States (UI/UX Pro Max) ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm) !important;
}

/* ----- Reduced Motion (UI/UX Pro Max: required) ----- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .tk-card:hover {
        transform: none !important;
    }
    .btn-gold:hover,
    .tk-card-btn-watch:hover {
        transform: none !important;
    }
}

/* ----- Dark Mode Text Contrast (UI/UX Pro Max: WCAG) ----- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #f0f0f5;
        --color-text-secondary: #b8bcc8;
        --color-text-muted: #9ca3b8;
    }
}

/* ----- High Contrast Mode ----- */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(255, 255, 255, 0.2);
        --color-text-secondary: #d1d5db;
        --color-text-muted: #b0b7c3;
    }
    .tk-card {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
}

/* ==========================================================================
   CACHE-BYPASS FIXES — Plugin PHP changes blocked by nginx OPcache
   These CSS/JS workarounds deliver fixes via filemtime-versioned assets
   ========================================================================== */

/* ----- Fix: Hide "No Image" text, show gradient background ----- */
.tk-card-noimg {
    background: linear-gradient(135deg, #1a1a2e 0%, #0a0a12 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2b4cc7 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
}
.tk-card-noimg::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 40%, rgba(79, 124, 255, 0.15) 0%, transparent 60%) !important;
}

/* ----- Fix: Hero background gradient when empty ----- */
.hero-bg[style*="url('')"],
.hero-bg[style*='url("")'],
.hero-bg[data-bg=""] {
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 40%, #0a0a12 100%) !important;
}
.hero-bg:not([style*="background-image"]):not([style*="background:"]) {
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 40%, #0a0a12 100%) !important;
}

/* ----- Fix: Hero poster fallback for empty src ----- */
.hero-poster[src=""],
.hero-poster:not([src]) {
    content: none !important;
}
.hero-poster-wrapper:has(.hero-poster[src=""]) {
    background: linear-gradient(135deg, #1a1a2e, #0a0a12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hero-poster-wrapper:has(.hero-poster[src=""]) .hero-poster {
    display: none !important;
}
.hero-poster-wrapper:has(.hero-poster[src=""])::after {
    content: 'No Image' !important;
    color: #2b4cc7 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
}