/**
 * posterrama.app - Main Stylesheet
 *
 * Author: Mark Frelink
 * Last Modified: 2025-07-26
 * License: GPL-3.0-or-later - This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 */

/* --- Lazy Loading Styles --- */

img[data-lazy-src] {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
}

img.lazy-loading {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

img.lazy-loaded {
    opacity: 1;
    transition: opacity 0.5s ease;
}

img.lazy-error {
    background: #2a2a2a;
    opacity: 0.8;
    border: 1px solid #555;
    transition: opacity 0.3s ease;
}

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

/* --- Global Styles & Fonts & Variables --- */

:root {
    --plex-orange: #e5a00d;
    --background-color: rgb(30, 30, 30);
    --text-color: #fff;
    --text-color-muted: rgba(255, 255, 255, 0.6);
    --text-color-semi-muted: rgba(255, 255, 255, 0.65);
    --text-color-strong: rgba(255, 255, 255, 0.85);

    /* UI Scaling variables - defaults to 1 (100%) */
    --content-scale: 1;
    --clearlogo-scale: 1;
    --clock-scale: 1;
}

html,
body {
    /* Use standard viewport height so content stops above mobile browser address bar */
    height: 100vh;
    /* Keep layout consistent across browsers */
    width: 100%;
    margin: 0;
    /* No global safe-area padding; we offset specific UI elements instead */
    padding: 0;
    overflow: hidden;
    /* Prevents unwanted scrollbars */
    background-color: var(--background-color);
    /* Fallback background color */
    color: var(--text-color);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    cursor: none;
    /* Enhanced rendering for stability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent layout shifts */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Removed iOS-specific overrides to restore original behavior */

/* --- Utility Classes --- */
.is-hidden {
    display: none !important;
}

/* Force metadata hiding when disabled - extra specificity */
#text-wrapper.is-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* --- Loader & Error Message --- */
/* --- Modern Dual-Ring Spinner Loader --- */
#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    transition: opacity 0.5s;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

/* Dual-ring spinner */
.poster-loader {
    position: relative;
    width: 60px;
    height: 60px;
}

.poster-loader::before,
.poster-loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

/* Outer ring - clockwise */
.poster-loader::before {
    width: 60px;
    height: 60px;
    border-top: 3px solid #667eea;
    border-right: 3px solid #667eea;
    animation: spinClockwise 1.2s linear infinite;
}

/* Inner ring - counter-clockwise */
.poster-loader::after {
    width: 40px;
    height: 40px;
    top: 10px;
    left: 10px;
    border-bottom: 3px solid #764ba2;
    border-left: 3px solid #764ba2;
    animation: spinCounterClockwise 1s linear infinite;
}

/* Clean loading text */
.loader-text {
    color: rgba(255, 255, 255, 0.8);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: textPulse 2.5s ease-in-out infinite;
    display: none; /* Hide textual loading indicator; spinner only */
}

@keyframes spinClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinCounterClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes textPulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

/* Legacy spin animation for fallback */
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 2.5rem !important;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999;
    text-align: center;
    color: #e2e8f0;
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    animation: errorSlideIn 0.3s ease-out;
}

#error-message.is-hidden {
    display: none !important;
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}

#error-message .error-icon {
    font-size: 2.5rem;
    color: #64748b;
    margin-bottom: 1rem;
}

#error-message .error-brand {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#error-message .error-title {
    text-align: center !important;
    margin-bottom: 2rem !important;
    font-size: 1.875rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #e2e8f0 !important;
}

#error-message .error-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

#error-message .error-suggestions {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#error-message .error-suggestions h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

#error-message .error-suggestions ul {
    margin: 0;
    padding-left: 1.2rem;
    list-style: none;
}

#error-message .error-suggestions li {
    margin-bottom: 0.5rem;
    color: #94a3b8;
    font-size: 0.85rem;
    position: relative;
}

#error-message .error-suggestions li:before {
    content: '•';
    position: absolute;
    left: -1.2rem;
    color: #64748b;
}

/* Beautiful fallback background when no media is found - same as admin login */
body.no-media-background {
    background: linear-gradient(
        135deg,
        #0f0f23 0%,
        #1a1a2e 25%,
        #16213e 50%,
        #0f3460 75%,
        #533483 100%
    ) !important;
    background-color: transparent !important;
}

@keyframes gradientShift {
    0% {
        background-position:
            0% 50%,
            0% 0%,
            100% 100%,
            0% 100%,
            100% 0%;
    }
    25% {
        background-position:
            50% 100%,
            25% 25%,
            75% 75%,
            25% 75%,
            75% 25%;
    }
    50% {
        background-position:
            100% 50%,
            50% 50%,
            50% 50%,
            50% 50%,
            50% 50%;
    }
    75% {
        background-position:
            50% 0%,
            75% 75%,
            25% 25%,
            75% 25%,
            25% 75%;
    }
    100% {
        background-position:
            0% 50%,
            100% 100%,
            0% 0%,
            100% 0%,
            0% 100%;
    }
}

/* --- Promo Box for /site page --- */
#promo-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Start slightly smaller for animation */
    z-index: 50;
    background-color: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(15px);
    color: #fff;
    padding: 40px 50px;
    border-radius: 16px;
    text-align: center;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0; /* Start hidden for animation */
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out; /* Smooth transition for when it appears */
}

/* When the is-hidden class is removed, these styles will apply */
#promo-box:not(.is-hidden) {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* FORCE promo box to be visible and on top for promo site */
body.promo-site #promo-box {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 99999 !important;
    visibility: visible !important;
}

body.promo-site #promo-box.is-hidden {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.promo-logo {
    margin: 0 auto 25px auto;
    width: 60px;
    height: 60px;
    color: rgba(255, 255, 255, 0.8);
}

#promo-box h1 {
    font-size: 2.2em; /* Larger font */
    font-weight: 800; /* Bolder */
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

#promo-box p {
    font-size: 1.1em;
    color: var(--text-color-muted);
    margin-bottom: 30px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.promo-brand-name {
    font-weight: 700; /* Consistent with admin panel */
    /* Gradient text effect to match the admin panel for a more striking look */
    background: linear-gradient(90deg, #e0e0e0, #bb86fc, #53a8b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.movie-extensions {
    font-size: 0.65em;
    color: #fcd34d; /* Warm yellow color */
    vertical-align: super;
    font-weight: 400;
    opacity: 0.9;
    margin-left: 3px;
    letter-spacing: 0.3px;
    font-family: 'Kalam', cursive; /* Handwritten font */
    transform: rotate(-2deg); /* Slight tilt for handwritten effect */
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    position: relative;
    top: -2px; /* Fine-tune vertical position */
}

.promo-cta a.button-promo {
    display: inline-block;
    background-color: var(--plex-orange);
    color: #111;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    padding: 14px 28px;
    border-radius: 50px; /* Pill shape */
    transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out,
        background-color 0.2s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.promo-cta a.button-promo:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(229, 160, 13, 0.4);
    background-color: #ffb40f;
}

.promo-cta a.button-promo .fab {
    margin-right: 10px;
    font-size: 1.2em;
    vertical-align: middle;
}

/* --- Responsive Promo Box Sizing --- */
/* Desktop and larger screens - Make promo box more prominent */
@media (min-width: 768px) {
    #promo-box {
        max-width: 700px;
        padding: 50px 60px;
    }

    #promo-box h1 {
        font-size: 2.6em;
        margin-bottom: 20px;
    }

    #promo-box p {
        font-size: 1.2em;
        margin-bottom: 35px;
        max-width: 500px;
    }

    .promo-logo {
        width: 70px;
        height: 70px;
        margin-bottom: 30px;
    }
}

/* Large desktop screens - Even more prominent */
@media (min-width: 1200px) {
    #promo-box {
        max-width: 700px;
        padding: 50px 60px;
    }

    #promo-box h1 {
        font-size: 2.6em;
        margin-bottom: 20px;
    }

    #promo-box p {
        font-size: 1.2em;
        margin-bottom: 35px;
        max-width: 500px;
    }

    .promo-logo {
        width: 70px;
        height: 70px;
        margin-bottom: 30px;
    }

    .promo-cta a.button-promo {
        font-size: 1.1em;
        padding: 14px 28px;
    }
}

/* Ultra-wide screens - Maximum impact */
@media (min-width: 1920px) {
    #promo-box {
        max-width: 750px;
        padding: 60px 70px;
    }

    #promo-box h1 {
        font-size: 2.9em;
    }

    #promo-box p {
        font-size: 1.3em;
        max-width: 550px;
    }

    .promo-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 35px;
    }
}

/* --- SEO Content Styling --- */
.seo-content {
    /* Accessibility-friendly screen reader only content */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.seo-content h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 1em 0 0.5em 0;
    color: #fff;
}

.seo-content ul {
    list-style-type: disc;
    margin: 0.5em 0 1em 1.5em;
    padding: 0;
}

.seo-content li {
    margin: 0.3em 0;
    color: #fff;
    line-height: 1.4;
}

/* --- Background Layers & Ken Burns Effect --- */
.screensaver-layer {
    position: fixed; /* Cover full viewport; under iOS bars when combined with scroll bg */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: transform, opacity;
    /* Basic anti-aliasing without interfering with Ken Burns */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: optimizeQuality;
    backface-visibility: hidden;
}

/* Apply stability only when no Ken Burns animation is active */
.screensaver-layer:not([data-ken-burns]) {
    transform: translateZ(0);
    background-attachment: fixed;
}

/* Ken Burns layers need special handling */
.screensaver-layer[data-ken-burns] {
    background-attachment: scroll;
    transform: none;
}

/* Removed iOS-specific background attachment override */

/* --- Ken Burns Effect Keyframes --- */
/* More subtle and varied animations for a smoother, more cinematic feel. */

/* Zoom Out Variations */
@keyframes kenburns-zoom-out-tl {
    0% {
        transform: scale(1.05) translate3d(-2.5%, -2.5%, 0);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}
@keyframes kenburns-zoom-out-br {
    0% {
        transform: scale(1.05) translate3d(2.5%, 2.5%, 0);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}
@keyframes kenburns-zoom-out-tr {
    0% {
        transform: scale(1.05) translate3d(2.5%, -2.5%, 0);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}
@keyframes kenburns-zoom-out-bl {
    0% {
        transform: scale(1.05) translate3d(-2.5%, 2.5%, 0);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}

/* Zoom In Variations */
@keyframes kenburns-zoom-in-tl {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.05) translate3d(-2.5%, -2.5%, 0);
    }
}
@keyframes kenburns-zoom-in-br {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.05) translate3d(2.5%, 2.5%, 0);
    }
}
@keyframes kenburns-zoom-in-tr {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.05) translate3d(2.5%, -2.5%, 0);
    }
}
@keyframes kenburns-zoom-in-bl {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.05) translate3d(-2.5%, 2.5%, 0);
    }
}

/* --- Widgets (Clock & ClearLogo) --- */
#clock-widget-container {
    position: fixed;
    top: 30px;
    left: 50px; /* Align with poster and controls margin */
    z-index: 10;
    display: none; /* Hide by default to prevent FOUC */
}

#time-widget {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--text-color-muted); /* Increased opacity for clarity, but still transparent */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* A sharper, darker shadow to define the edges */
    display: flex;
    align-items: baseline;
    gap: 0.2em;
    transform: scale(var(--clock-scale));
    transform-origin: top left;
}

.time-ampm {
    font-size: 0.6em;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 0.3em;
}

#clearlogo-container {
    position: fixed;
    top: 30px;
    right: 40px;
    z-index: 10;
    max-width: 250px;
    max-height: 120px;
    transform: scale(var(--clearlogo-scale));
    transform-origin: top right;
}

#clearlogo {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#clearlogo.visible {
    opacity: 1;
}

/* --- Main Information Container --- */
#info-container {
    position: fixed;
    bottom: 0px;
    left: 50px;
    right: 50px; /* Use right instead of fixed width for better responsiveness */
    top: 50px; /* Add top constraint to prevent overflow at top */
    max-width: none; /* Remove max-width constraint */
    display: flex;
    align-items: flex-end;
    gap: calc(40px * var(--content-scale)); /* Scale gap with content */
    z-index: 5;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    padding-bottom: 50px;
    overflow: visible; /* Allow shadows to be visible */
}

#info-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#poster-wrapper {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: flex-end; /* Align poster to bottom of wrapper */
    justify-content: flex-start; /* Align poster to left of wrapper */
    min-height: 270px; /* Minimum height to accommodate base poster size */
    height: calc(270px * var(--content-scale)); /* Dynamic height based on scaling */
    min-width: 180px; /* Minimum width for base poster */
    width: calc(180px * var(--content-scale)); /* Dynamic width to accommodate scaling */
    padding-left: 15px; /* Extra space for left shadow */
    width: calc(180px * var(--content-scale)); /* Dynamic width to accommodate scaling */
}

#poster {
    width: 180px;
    height: 270px;
    background-size: cover;
    background-position: center center;
    background-color: #2a2a2a; /* Fallback background color */
    border-radius: 8px;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.45);
    transform: scale(var(--content-scale));
    transform-origin: bottom left;
}

/* Enhanced drop shadow for screensaver mode */
body.screensaver-mode #poster {
    box-shadow: -8px 15px 30px rgba(0, 0, 0, 0.6); /* Left and bottom shadow for depth */
}

/* Extra space for shadow in screensaver mode */
body.screensaver-mode #poster-wrapper {
    padding-left: 20px; /* More space for left shadow */
    margin-left: -10px; /* Compensate positioning */
}

/* Poster layers for smooth transitions in cinema mode */
.poster-layer {
    display: none; /* Hide poster layers, use simple poster only */
}

#rt-badge {
    position: absolute;
    bottom: -5px;
    right: -8px;
    line-height: 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
    transition-delay: 0.2s;
    pointer-events: none;
}

#rt-badge.visible {
    opacity: 1;
    transform: translateY(0);
}

#rt-icon {
    width: 24px; /* A bit larger for better visibility */
    height: 24px; /* A bit larger for better visibility */
}

#poster::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle 200px at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.3s;
}

#poster-wrapper:hover #poster::before {
    opacity: 1;
}

#poster-wrapper:hover #poster {
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5); /* Hover shadow also less high */
}

#text-wrapper {
    flex-grow: 1;
    min-width: 0; /* Allow text to shrink */
    padding-bottom: 0;
    transform: scale(var(--content-scale));
    transform-origin: bottom left;
    padding-left: calc(20px * var(--content-scale)); /* Add some spacing from poster */
}

#title {
    font-size: 3.2em; /* A bit smaller for a more subtle look */
    font-weight: 700;
    color: var(--text-color-strong); /* Original color */
    margin: 0; /* Margin removed to bring the tagline even closer */
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* Subtle shadow for readability */
}

#tagline {
    font-size: 1.3em;
    font-style: italic;
    color: var(--text-color-muted);
    margin: 0 0 15px 0; /* Lighter font */
    font-weight: 400;
}

#meta-info {
    font-size: 1.1em; /* More transparent for subtlety */
    font-weight: 400;
    color: var(--text-color-semi-muted);
}

#meta-info #rating::before {
    content: '★';
    color: var(--plex-orange);
    margin: 0 10px 0 15px;
}

/* --- Controls --- */
#controls-container {
    position: fixed; /* A bit lower for better visual alignment with the poster's shadow */
    bottom: 35px; /* Default spacing */
    right: 50px;
    display: flex;
    gap: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px 15px;
    border-radius: 50px; /* Adjusted to new 'bottom' value */
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: translateY(calc(100% + 35px)); /* Adjusted to new 'bottom' value */
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
    z-index: 20;
}

#controls-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#controls-container button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.2s,
        color 0.2s;
}

#controls-container button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#controls-container button svg {
    width: 24px;
    height: 24px;
}

#pause-button .icon-play {
    display: none;
}
#pause-button.is-paused .icon-pause {
    display: none;
}
#pause-button.is-paused .icon-play {
    display: block;
}

/* --- Branding --- */
#branding-container {
    position: fixed; /* A bit lower for a better balance */
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Removed iOS safe-area overrides to restore original spacing */

#branding-container a {
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

#branding-container a:hover {
    color: rgba(255, 255, 255, 0.8);
}

#branding-container svg {
    width: 24px;
    height: 24px;
}

/* iOS-only: lock to clip behavior for screensaver view */
@supports (-webkit-touch-callout: none) {
    /* Use modern viewport units on iOS Safari */
    /* Clip mode: stop above the visible toolbar area */
    body.ios-bg-clip:not(.cinema-mode):not(.wallart-mode) .screensaver-layer {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto !important;
        /* Fallbacks: use 100vh, then prefer 100svh when supported */
        height: 100vh !important; /* baseline: stops above address bar */
        height: 100svh !important; /* preferred: small viewport height excludes the address bar */
        background-attachment: scroll !important;
    }
    body.ios-bg-clip:not(.cinema-mode):not(.wallart-mode) #info-container {
        padding-bottom: 50px !important; /* keep original spacing */
    }
    body.ios-bg-clip:not(.cinema-mode):not(.wallart-mode) #controls-container {
        bottom: 70px !important; /* ensure controls do not cross the background edge */
    }
}
/* Desktop-specific poster positioning (override mobile changes) */
@media (min-width: 769px) {
    #poster-wrapper {
        padding-left: 15px !important;
        margin-left: 0 !important;
        width: calc(180px * var(--content-scale)) !important;
        height: calc(270px * var(--content-scale)) !important;
        min-width: 180px !important;
        min-height: 270px !important;
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
    }

    body.screensaver-mode #poster-wrapper {
        padding-left: 20px !important;
        margin-left: -10px !important;
    }

    #poster {
        width: 180px !important;
        height: 270px !important;
        transform: scale(var(--content-scale));
        transform-origin: bottom left !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
    }

    .poster-layer {
        display: none !important; /* Hide poster layers on desktop too */
    }
    /* Poster layers are hidden, no screensaver specific rules needed */

    #text-wrapper {
        padding-left: calc(20px * var(--content-scale)) !important;
    }
}

/* --- Media Queries for Mobile Devices --- */
@media (max-width: 768px) {
    /* Override content scaling for mobile */
    :root {
        --content-scale: 1 !important;
    }

    /* Fix poster layers for mobile */
    .poster-layer {
        display: none; /* Hide poster layers on mobile too */
    }

    /* Adjust promo box for smaller screens */
    .promo-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
    }
    #promo-box {
        padding: 25px 20px; /* More generous padding */
        width: 90%; /* Keep original mobile styling as fallback */
    }
    #promo-box h1 {
        font-size: 1.4em;
    }
    #promo-box p {
        font-size: 0.85em;
        margin-bottom: 20px;
    }
    .promo-cta a.button-promo {
        font-size: 0.8em;
        padding: 8px 16px;
    }

    /* Hide the sidebar and logo on small screens */
    #branding-container {
        display: none !important;
    }

    /* Adjust the main information container for mobile - keep horizontal layout */
    #info-container {
        flex-direction: row; /* Keep poster and text side by side like desktop */
        align-items: flex-end; /* Align at the bottom */
        justify-content: flex-start; /* Align to left */
        text-align: left; /* Left align text like desktop */
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        padding: 0 15px 25px 15px; /* More bottom padding for the dropshadow */
        gap: 16px; /* Nice comfortable gap between poster and text on mobile */
        box-sizing: border-box;
    }

    #poster-wrapper {
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
        /* Reset wrapper size to exactly fit the poster on mobile */
        width: 25vw !important; /* Larger viewport width for mobile */
        height: 37.5vw !important; /* Maintain 2:3 aspect ratio */
        max-width: 100px !important; /* Larger max size for mobile */
        max-height: 150px !important; /* Maintain aspect ratio */
        min-width: 70px !important; /* Set minimum size to prevent too small */
        min-height: 105px !important; /* Maintain aspect ratio */
        padding-left: 0 !important; /* Remove left padding that adds extra space */
    }

    #poster {
        /* Larger poster for better visibility on mobile */
        width: 25vw; /* Larger viewport width */
        height: 37.5vw; /* Maintain 2:3 aspect ratio */
        max-width: 100px; /* Larger max size for mobile */
        max-height: 150px; /* Maintain aspect ratio */
        min-width: 70px; /* Set minimum size to prevent too small */
        min-height: 105px; /* Maintain aspect ratio */
        flex-shrink: 0; /* Don't let poster shrink */
    }

    /* Disable poster hover effects on touch devices */
    #poster-wrapper:hover #poster::before {
        opacity: 0;
    }
    #poster-wrapper:hover {
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
    }
    /* Keep the scaling transform even on hover for touch devices */

    /* Adjust text sizes and layout for mobile horizontal layout */
    #text-wrapper {
        text-align: left; /* Left align like desktop */
        width: auto; /* Let it take remaining space */
        flex: 1; /* Take up remaining space after poster */
        min-width: 0; /* Allow text to wrap/shrink */
        padding-left: 20px !important; /* More padding for better spacing from poster */
        transform: none !important; /* Remove scaling transform on mobile */
        transform-origin: unset !important; /* Reset transform origin */
    }

    #title {
        /* min, ideal, max - smaller for mobile */
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        line-height: 1.1;
        margin-bottom: 4px; /* Compact spacing */
    }

    #tagline {
        font-size: clamp(0.7rem, 2.5vw, 0.9rem);
        margin-bottom: 4px; /* Compact spacing */
    }

    #meta-info {
        font-size: clamp(0.6rem, 2vw, 0.8rem);
    }

    /* Position the clock and clearlogo differently */
    #clock-widget-container {
        left: 15px;
        top: 15px;
        padding-left: 0; /* Reset desktop alignment */
    }
    #time-widget {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem); /* Clock made smaller */
    }

    #clearlogo-container {
        right: 15px;
        top: 15px;
        display: flex; /* Helps with vertical alignment */
        align-items: center; /* Centers the logo vertically in the container */
        /* Scalable with a maximum */
        max-width: clamp(100px, 35vw, 150px);
    }

    /* Ensure controls container is above everything */
    #controls-container {
        bottom: 20px;
        right: 15px;
        padding: 5px 10px;
        gap: 6px;
    }
    #controls-container button {
        padding: 4px;
    }
    #controls-container button svg {
        width: 20px;
        height: 20px;
    }
}

/* --- Cinema Mode Styles --- */
body.cinema-mode {
    background: black;
    overflow: visible; /* Allow slide animations from outside viewport */
}

/* Cinema mode - hide all overflow and scrollbars */
body.cinema-mode {
    overflow: hidden !important; /* Hide all scrollbars */
    margin: 0 !important;
    padding: 0 !important;
}

body.cinema-mode html {
    overflow: hidden !important; /* Hide all scrollbars */
    margin: 0 !important;
    padding: 0 !important;
}

body.cinema-mode #info-container {
    /* Show info container but hide text elements */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
}

body.cinema-mode #poster-wrapper {
    width: 100vw !important; /* Match poster width */
    height: 100vh !important; /* Full height for centering */
    max-width: 100vw !important;
    max-height: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important; /* Hide any overflow */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important; /* Include borders in width calculation */
}

body.cinema-mode #info-container #poster-wrapper #poster {
    /* Calculate poster size maintaining 2:3 aspect ratio - fit within screen width */
    width: 100vw !important; /* Use full screen width */
    height: calc(100vw * 3 / 2) !important; /* Height = width * (3/2) for 2:3 ratio */
    max-width: 100vw !important;
    max-height: 100vh !important; /* Don't exceed screen height */
    background-size: contain !important; /* Keep full poster visible with black bars */
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    flex: none !important;
}

/* Cinema mode poster layers */
body.cinema-mode .poster-layer {
    width: 100vw !important; /* Use full screen width */
    height: calc(100vw * 3 / 2) !important; /* Height = width * (3/2) for 2:3 ratio */
    max-width: 100vw !important;
    max-height: 100vh !important; /* Don't exceed screen height */
    background-size: contain !important; /* Keep full poster visible with black bars */
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Enhanced stability for cinema mode */
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    image-rendering: optimizeQuality !important;
    /* Prevent sub-pixel movement */
    transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* Disable poster interactivity in cinema mode */
body.cinema-mode #poster-link {
    pointer-events: none !important;
    cursor: default !important;
}

body.cinema-mode #poster-wrapper {
    pointer-events: none !important;
    cursor: default !important;
}

/* Disable hover effects in cinema mode */
body.cinema-mode #poster::before {
    display: none !important;
}

body.cinema-mode #poster-wrapper:hover #poster::before {
    display: none !important;
}

body.cinema-mode #poster-wrapper:hover #poster {
    /* Don't override transform for animations - only remove hover effects */
    box-shadow: none !important;
}

/* Cinema mode header space */
body.cinema-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px; /* Smaller header space */
    z-index: 1000;
    pointer-events: none;
}

/* Cinema mode - poster takes full screen, orientation handled by poster-wrapper */

/* Desktop adjustments for regular mode only */
@media (min-width: 769px) {
    #text-wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
        max-width: 33vw !important; /* Limit to 1/3 of screen width */
        word-wrap: break-word !important;
    }

    #text-wrapper #title {
        order: 1 !important;
        flex-shrink: 0 !important; /* Never shrink title */
        flex: none !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        margin: 0 0 8px 0 !important;
    }

    #text-wrapper #tagline {
        order: 2 !important;
        flex: 1 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 6 !important; /* Limit tagline to ~6 lines on desktop */
        line-clamp: 6 !important;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
        margin: 8px 0 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        min-height: 0 !important;
    }

    #text-wrapper #meta-info {
        order: 3 !important;
        flex-shrink: 0 !important; /* Never shrink year/rating line */
        flex: none !important;
        word-wrap: break-word !important;
        margin: 8px 0 0 0 !important;
    }

    /* Cinema mode poster adjustments for larger screens */
    body.cinema-mode #poster-wrapper {
        width: auto !important;
        height: auto !important;
    }

    body.cinema-mode #info-container #poster-wrapper #poster,
    body.cinema-mode .poster-layer {
        max-width: calc(100vh / 1.5) !important;
        height: 100vh !important;
    }
}

/* Mobile cinema mode adjustments */
@media (max-width: 768px) {
    /* Cinema mode poster stays fullscreen on mobile too */
    body.cinema-mode #poster-wrapper {
        width: auto !important;
        height: auto !important;
    }

    body.cinema-mode #info-container #poster-wrapper #poster,
    body.cinema-mode .poster-layer {
        max-width: calc(100vh / 1.5) !important;
        height: 100vh !important;
    }
}

/* Hide elements that should not appear in cinema mode */
body.cinema-mode #layer-a,
body.cinema-mode #layer-b,
body.cinema-mode #clock-widget-container,
body.cinema-mode #clearlogo-container,
body.cinema-mode #branding-container,
body.cinema-mode #rt-badge,
body.cinema-mode #controls-container,
body.cinema-mode #background-image,
body.cinema-mode .background-layer,
body.cinema-mode .fanart-background,
body.cinema-mode #text-wrapper {
    display: none !important;
}

/* --- Transition Effects Animations --- */

/* Fade In/Out Effect */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Slide Transitions - true slide effects for layers */
@keyframes slide-in-left {
    from {
        transform: translateX(100%);
        opacity: 1;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(-100%);
        opacity: 1;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-up {
    from {
        transform: translateY(100%);
        opacity: 1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-down {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Poster-specific slide effect (scale + fade since posters can't truly slide) */
@keyframes slide-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.9) translateX(-30px);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95) translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

/* True slide animations for posters in cinema mode */
@keyframes slide-in-left {
    0% {
        opacity: 1;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 1;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Cinema mode specific slide animations - these create a push effect */
@keyframes cinema-slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cinema-slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cinema-slide-out-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes cinema-slide-out-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        opacity: 1;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-bottom {
    0% {
        opacity: 1;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom Effects */
@keyframes zoom-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoom-out {
    from {
        transform: scale(1.2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Parallax Scroll Effect */
@keyframes parallax-slow {
    from {
        transform: translateY(0) scale(1.1);
    }
    to {
        transform: translateY(-5%) scale(1.15);
    }
}

@keyframes parallax-fast {
    from {
        transform: translateY(0) scale(1.05);
    }
    to {
        transform: translateY(-10%) scale(1.1);
    }
}

/* Cross Fade Effect */
@keyframes crossfade-in {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Blur Transition */
@keyframes blur-in {
    from {
        filter: blur(10px);
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        filter: blur(0px);
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate Transition */
@keyframes rotate-in {
    from {
        transform: rotate(-5deg) scale(0.9);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Ken Burns variations - existing animations enhanced */
@keyframes kenburns-zoom-in-center {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}

@keyframes kenburns-zoom-out-center {
    from {
        transform: scale(1.3);
    }
    to {
        transform: scale(1);
    }
}

@keyframes kenburns-pan-left {
    from {
        transform: scale(1.2) translateX(0);
    }
    to {
        transform: scale(1.3) translateX(-8%);
    }
}

@keyframes kenburns-pan-right {
    from {
        transform: scale(1.2) translateX(0);
    }
    to {
        transform: scale(1.3) translateX(8%);
    }
}

/* Cinema Mode Poster Effects */
body.cinema-mode .poster-effect-fade {
    animation: fade-in var(--effect-duration, 3s) ease-in-out forwards;
}

body.cinema-mode .poster-effect-zoom {
    animation: zoom-in var(--effect-duration, 3s) ease-out forwards;
}

body.cinema-mode .poster-effect-blur {
    animation: blur-in var(--effect-duration, 3s) ease-out forwards;
}

body.cinema-mode .poster-effect-rotate {
    animation: rotate-in var(--effect-duration, 3s) ease-out forwards;
}

/* ==========================================
   WALLART MODE STYLES - Multi-poster grid
   ========================================== */

/* Wallart mode - display multiple posters in grid layout */
body.wallart-mode {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important; /* Black background for margins */
    background-color: #000 !important;
    background-image: none !important;
}

body.wallart-mode::before,
body.wallart-mode::after {
    display: none !important;
}

body.wallart-mode #background-image,
body.wallart-mode .background-layer,
body.wallart-mode .fanart-background,
body.wallart-mode #fanart-container,
body.wallart-mode .poster-layer {
    display: none !important; /* Hide all background layers in wallart mode */
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important; /* Override any inline background styles */
    background: transparent !important;
}

body.wallart-mode #poster-wrapper {
    display: none !important; /* Hide single poster display */
}

/* Wallart grid container - SUPER SIMPLE VERSION */
#wallart-grid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.wallart-mode #wallart-grid {
    /* Dynamic grid layout is set via JavaScript for perfect screen filling */
    background: #000 !important;
    transition: transform 0.6s ease-in-out !important;
    z-index: 10 !important; /* Above ambient overlay */
}

/* Ambient gradient overlay for Wallart mode */
#wallart-ambient-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important; /* Behind wallart grid */
    pointer-events: none !important;
    opacity: 0.48 !important; /* Stronger for clearer visibility */
    transition:
        opacity 0.6s ease,
        background 0.6s ease !important;
    mix-blend-mode: overlay; /* Gentle highlight/shadow tint instead of flat darkening */
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important; /* fallback */
}

/* Individual wallart poster items - Clean, edge-to-edge layout */
.wallart-poster-item {
    background: #111 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.wallart-poster-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    /* Ensure 2:3 aspect ratio is always maintained */
    aspect-ratio: 2/3 !important;
}

/* Allow overflow during animations */
.wallart-poster-item.animating {
    overflow: visible !important;
    z-index: 10 !important;
}

.wallart-poster-item {
    perspective: 1000px; /* For 3D flip animations */
    position: relative; /* Anchor pseudo-element overlays to the tile */
}

.wallart-poster-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    position: relative; /* ensure ::after can layer above */
    z-index: 1;
    transform: scale(1);
    will-change: transform, opacity !important;
    transition: none; /* Let JS control transitions */
    transform-style: preserve-3d; /* For 3D transformations */
}

/* Fade in animation for wallart items */

/* Neon Pulse helper */
.wallart-poster-item.neon-pulse::after {
    content: '';
    position: absolute;
    inset: -6px; /* expand a bit for outer glow */
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: box-shadow, filter, opacity;
    animation: neonPulseOuter 2.2s ease-out forwards;
}

/* Inner edge glow to make it visible right at the poster borders */
.wallart-poster-item.neon-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: box-shadow, opacity;
    animation: neonPulseInner 2.2s ease-out forwards;
}

.wallart-poster-item.neon-pulse {
    --neon-color: rgba(255, 0, 122, 0.5);
}

@keyframes neonPulseOuter {
    0% {
        opacity: 0;
        filter: blur(0px);
        box-shadow: 0 0 0px var(--neon-color);
    }
    18% {
        opacity: 1;
        filter: blur(1.5px);
        box-shadow:
            0 0 16px var(--neon-color),
            0 0 32px var(--neon-color),
            0 0 56px var(--neon-color);
    }
    50% {
        opacity: 1;
        filter: blur(2px);
        box-shadow:
            0 0 22px var(--neon-color),
            0 0 44px var(--neon-color),
            0 0 78px var(--neon-color);
    }
    85% {
        opacity: 0.85;
        filter: blur(1.4px);
        box-shadow:
            0 0 16px var(--neon-color),
            0 0 32px var(--neon-color),
            0 0 56px var(--neon-color);
    }
    100% {
        opacity: 0;
        filter: blur(0px);
        box-shadow: 0 0 0px var(--neon-color);
    }
}

@keyframes neonPulseInner {
    0% {
        opacity: 0;
        box-shadow: inset 0 0 0px var(--neon-color);
    }
    25% {
        opacity: 0.9;
        box-shadow:
            inset 0 0 12px var(--neon-color),
            inset 0 0 20px var(--neon-color);
    }
    60% {
        opacity: 0.8;
        box-shadow:
            inset 0 0 18px var(--neon-color),
            inset 0 0 30px var(--neon-color);
    }
    90% {
        opacity: 0.5;
        box-shadow:
            inset 0 0 10px var(--neon-color),
            inset 0 0 14px var(--neon-color);
    }
    100% {
        opacity: 0;
        box-shadow: inset 0 0 0px var(--neon-color);
    }
}

/* Chromatic Shift: RGB channel layers */
.wallart-poster-item.chromatic-shift {
    overflow: visible !important;
}
.wallart-poster-item.chromatic-shift .layer-r,
.wallart-poster-item.chromatic-shift .layer-g,
.wallart-poster-item.chromatic-shift .layer-b {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0;
    will-change: transform, opacity, filter;
    pointer-events: none;
    z-index: 2;
}
.wallart-poster-item.chromatic-shift .layer-r {
    filter: hue-rotate(320deg) saturate(1.6) brightness(1.05);
}
.wallart-poster-item.chromatic-shift .layer-g {
    filter: hue-rotate(100deg) saturate(1.6) brightness(1.05);
}
.wallart-poster-item.chromatic-shift .layer-b {
    filter: hue-rotate(200deg) saturate(1.6) brightness(1.05);
}

/* Mosaic Shatter container */
.wallart-poster-item.mosaic-shatter {
    overflow: visible !important;
}
.wallart-poster-item.mosaic-shatter.animating {
    /* Override global .animating overflow to keep base image clipped inside the tile */
    overflow: hidden !important;
}
.wallart-poster-item.pixel-lock img {
    width: var(--lock-w) !important;
    height: var(--lock-h) !important;
}
.wallart-poster-item .shard {
    position: absolute;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
    pointer-events: none;
}
@keyframes wallartFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spotlight removed */

/* Hide all UI elements in wallart mode */
body.wallart-mode #info-panel,
body.wallart-mode #info-container,
body.wallart-mode #clear-logo,
body.wallart-mode #clearlogo,
body.wallart-mode #rotten-tomatoes,
body.wallart-mode #clock-widget,
body.wallart-mode #clock-widget-container,
body.wallart-mode #controls-container,
body.wallart-mode #rt-badge,
body.wallart-mode .metadata-overlay,
body.wallart-mode .button-promo:not(.promo-site .button-promo),
body.wallart-mode button:not(.promo-site button),
body.wallart-mode .control-button,
body.wallart-mode .ui-controls,
body.wallart-mode .admin-link {
    display: none !important;
}

/* Exception: Keep specific elements visible on promo sites */
body.promo-site.wallart-mode .button-promo,
body.promo-site.wallart-mode #promo-box button {
    display: inline-block !important;
}

/* Hide promo box in wallart mode ONLY when NOT on promo site */
body.wallart-mode:not(.promo-site) #promo-box {
    display: none !important;
}

/* On promo sites, ensure wallart grid doesn't overlap with promo box */
body.promo-site.wallart-mode #wallart-grid {
    top: 60px !important; /* Give space for promo box */
}

/* Ensure promo box stays visible and on top even in wallart mode on promo sites */
body.promo-site.wallart-mode #promo-box {
    display: block !important;
    z-index: 99999 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Responsive wallart grid */
@media (max-width: 1200px) {
    body.wallart-mode #wallart-grid {
        grid-template-columns: repeat(4, 1fr);
        --wallart-columns: 4;
    }
}

@media (max-width: 768px) {
    body.wallart-mode #wallart-grid {
        grid-template-columns: repeat(3, 1fr);
        --wallart-columns: 3;
    }

    /* Mobile wallart posters should fill entire cell */
    .wallart-poster-item img {
        object-fit: contain !important;
        aspect-ratio: 2/3 !important;
    }

    /* Ensure ALL controls and UI elements are hidden on mobile in wallart mode */
    body.wallart-mode #controls-container,
    body.wallart-mode .controls,
    body.wallart-mode .control-button,
    body.wallart-mode .mobile-controls,
    body.wallart-mode .touch-controls,
    body.wallart-mode .ui-overlay,
    body.wallart-mode .admin-button,
    body.wallart-mode .nav-controls,
    body.wallart-mode .button-promo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* But keep promo button visible on promo sites */
    body.promo-site.wallart-mode .button-promo {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    /* Fix poster layers for very small screens */
    .poster-layer {
        width: 20vw !important;
        height: 30vw !important;
        max-width: 85px !important;
        max-height: 127px !important;
        min-width: 65px !important;
        min-height: 97px !important;
        transform: none !important;
        transform-origin: initial !important;
    }

    /* Further reduce poster size on very small screens */
    #poster-wrapper {
        width: 20vw !important;
        height: 30vw !important;
        max-width: 85px !important;
        max-height: 127px !important;
        min-width: 65px !important;
        min-height: 97px !important;
    }

    #poster {
        width: 20vw;
        height: 30vw;
        max-width: 85px;
        max-height: 127px;
        min-width: 65px;
        min-height: 97px;
        position: relative;
    }

    body.wallart-mode #wallart-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0px; /* Remove gap to fill entire screen */
        padding: 0px; /* Remove padding to fill entire screen */
        --wallart-columns: 2;
    }

    /* Very small screens - posters should fill entire cell */
    .wallart-poster-item img {
        object-fit: contain !important;
        aspect-ratio: 2/3 !important;
    }
}

/* All mobile devices - general fix */
@media (max-width: 430px) {
    /* Fix for all small mobile devices */
    .poster-layer {
        width: 70px !important;
        height: 105px !important;
        max-width: 70px !important;
        max-height: 105px !important;
        min-width: 70px !important;
        min-height: 105px !important;
        transform: none !important;
        transform-origin: initial !important;
    }

    #poster-wrapper {
        width: 80px !important;
        height: 120px !important;
        max-width: 80px !important;
        max-height: 120px !important;
        min-width: 80px !important;
        min-height: 120px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #poster {
        width: 80px !important;
        height: 120px !important;
        max-width: 80px !important;
        max-height: 120px !important;
        min-width: 80px !important;
        min-height: 120px !important;
        position: relative;
    }

    /* More padding for text on small screens */
    #text-wrapper {
        padding-left: 24px !important;
    }

    /* Ensure info container positioning is correct on all mobile */
    #info-container {
        left: 15px !important;
        right: 15px !important;
        padding-bottom: 30px !important;
        gap: 16px !important; /* Slightly larger gap for bigger poster */
        bottom: 0px !important;
        position: fixed !important;
    }

    .poster-layer {
        width: 80px !important;
        height: 120px !important;
        max-width: 80px !important;
        max-height: 120px !important;
        min-width: 80px !important;
        min-height: 120px !important;
        transform: none !important;
        transform-origin: initial !important;
    }

    /* Override content-scale calculations for mobile */
    #info-container {
        gap: 12px !important; /* Fixed gap, no scaling */
    }

    #poster-wrapper {
        /* Disable all dynamic calculations */
        width: 70px !important;
        height: 105px !important;
        min-height: 105px !important;
        min-width: 70px !important;
    }
}