/* Luminous Crystal visual theme for image bingo. */

.image-bingo-theme-cristal-luminoso {
    --image-bingo-bg: #f7feff;
    --image-bingo-ink: #173c48;
    --image-bingo-muted: #5d7880;
    --image-bingo-line: rgba(95, 198, 218, 0.34);
    --image-bingo-green: #7bdc46;
    --image-bingo-green-dark: #2d9f68;
    --image-bingo-blue: #29b8d9;
    --image-bingo-yellow: #ffe86a;
    --image-bingo-red: #ff708a;
    --image-bingo-shadow:
        0 20px 46px rgba(31, 135, 160, 0.14),
        0 2px 0 rgba(255, 255, 255, 0.92) inset;
    --image-bingo-page-background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.72) 0 16%, transparent 16% 100%),
        radial-gradient(circle at 14% 10%, rgba(184, 243, 107, 0.26), transparent 27%),
        radial-gradient(circle at 86% 14%, rgba(41, 184, 217, 0.22), transparent 28%),
        radial-gradient(circle at 72% 90%, rgba(255, 112, 138, 0.12), transparent 28%),
        linear-gradient(150deg, #f7feff 0%, #eafaff 42%, #fbfff2 100%);
    --image-bingo-board-radius: 18px;
    --image-bingo-board-background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(231, 250, 255, 0.72)),
        repeating-linear-gradient(135deg, rgba(41, 184, 217, 0.07) 0 1px, transparent 1px 34px);
    --image-bingo-cell-radius: 16px;
    --image-bingo-cell-background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 252, 255, 0.96) 58%, rgba(249, 255, 239, 0.94) 100%);
    --image-bingo-cell-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.96),
        inset 0 -10px 18px rgba(41, 184, 217, 0.05),
        0 8px 18px rgba(38, 142, 166, 0.08);
    --image-bingo-cell-image-filter: drop-shadow(0 7px 5px rgba(28, 91, 107, 0.12));
    --image-bingo-cell-name-size: clamp(12px, 1.02vw, 20px);
    --image-bingo-called-cell-background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.96), transparent 25%),
        linear-gradient(150deg, #effcff 0%, #d7f9ff 42%, #f0ffdc 100%);
    --image-bingo-called-cell-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.94),
        inset 0 0 0 6px rgba(123, 220, 70, 0.62),
        0 0 0 3px rgba(41, 184, 217, 0.32),
        0 0 28px rgba(123, 220, 70, 0.42),
        0 14px 28px rgba(41, 184, 217, 0.18);
    --image-bingo-called-name-color: #103947;
    --image-bingo-called-name-shadow:
        0 1px 0 rgba(255, 255, 255, 0.96),
        0 0 10px rgba(184, 243, 107, 0.42);
    --image-bingo-panel-border: 2px solid rgba(95, 198, 218, 0.32);
    --image-bingo-brand-logo-filter:
        drop-shadow(0 5px 0 rgba(41, 184, 217, 0.12))
        drop-shadow(0 12px 18px rgba(123, 220, 70, 0.12));
    --image-bingo-brand-subtitle-color: #194553;
    --image-bingo-current-frame-radius: 24px;
    --image-bingo-current-frame-background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 45%, rgba(220, 249, 255, 0.9) 100%);
    --image-bingo-current-frame-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, 0.94),
        inset 0 0 38px rgba(41, 184, 217, 0.12),
        0 0 0 5px rgba(123, 220, 70, 0.28),
        0 20px 34px rgba(28, 122, 148, 0.16);
    --image-bingo-current-image-filter: drop-shadow(0 10px 7px rgba(28, 91, 107, 0.14));
    --image-bingo-current-badge-background:
        linear-gradient(90deg, #29b8d9 0%, #72dcf0 42%, #b8f36b 100%);
    --image-bingo-current-badge-color: #ffffff;
    --image-bingo-current-badge-radius: 999px;
    --image-bingo-current-badge-shadow:
        0 5px 0 rgba(21, 128, 154, 0.2),
        0 0 24px rgba(41, 184, 217, 0.26);
    --image-bingo-last-circle-background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(232, 252, 255, 0.96));
    --image-bingo-counter-background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(236, 252, 255, 0.76));
    --image-bingo-button-shadow: 0 7px 0 rgba(21, 128, 154, 0.18);
    --image-bingo-pause-background: linear-gradient(180deg, #67dcf1, #1fb2d4);
    --image-bingo-pause-color: #ffffff;
    --image-bingo-resume-background: linear-gradient(180deg, #b8f36b, #5fcf47);
    --image-bingo-exit-background: linear-gradient(180deg, #ff9caf, #ff5f7b);
    --image-bingo-toggle-background: #ffffff;
    --image-bingo-toggle-active-background: #effcff;
    --image-bingo-intro-background:
        radial-gradient(circle at 22% 18%, rgba(184, 243, 107, 0.28), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(41, 184, 217, 0.24), transparent 28%),
        linear-gradient(150deg, #f7feff 0%, #eafaff 52%, #fbfff2 100%);
    --image-bingo-intro-text-shadow:
        2px 2px 0 #ffffff,
        0 0 24px rgba(41, 184, 217, 0.28);
    --image-bingo-loader-track: rgba(41, 184, 217, 0.14);
    --image-bingo-loader-border: 3px solid rgba(255, 255, 255, 0.96);
    --image-bingo-loader-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.86),
        0 14px 36px rgba(41, 184, 217, 0.16);
    --image-bingo-loader-complete-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.92),
        0 18px 42px rgba(123, 220, 70, 0.24);
    --image-bingo-loader-bar-background:
        linear-gradient(90deg, #29b8d9 0%, #72dcf0 28%, #b8f36b 58%, #ffe86a 78%, #29b8d9 100%);
    --image-bingo-loader-bar-shadow: 0 0 18px rgba(41, 184, 217, 0.48);
    --image-bingo-cell-mounted-animation: imageBingoCrystalCellRise 460ms cubic-bezier(0.18, 0.86, 0.2, 1.16) both;
    --image-bingo-panel-item-animation: imageBingoCrystalPanelGlide 560ms cubic-bezier(0.18, 0.86, 0.2, 1) both;
    --image-bingo-called-cell-animation: imageBingoCrystalCellPulse 980ms cubic-bezier(0.14, 0.9, 0.18, 1.26);
    --image-bingo-called-image-animation: imageBingoCrystalImageFlare 860ms cubic-bezier(0.14, 0.9, 0.18, 1.24);
    --image-bingo-current-frame-animation: imageBingoCrystalCurrentFrame 920ms cubic-bezier(0.14, 0.9, 0.18, 1.24);
    --image-bingo-current-image-animation: imageBingoCrystalCurrentImage 880ms cubic-bezier(0.16, 0.9, 0.18, 1.24);
    --image-bingo-current-badge-animation: imageBingoCrystalBadgeSweep 760ms ease-out;
    --image-bingo-last-item-animation: imageBingoCrystalLastSlide 680ms cubic-bezier(0.15, 0.9, 0.18, 1.24);
    --image-bingo-last-circle-animation: imageBingoCrystalLastGlow 900ms ease-out;
}

.image-bingo-theme-cristal-luminoso .image-bingo-board-wrap,
.image-bingo-theme-cristal-luminoso .image-bingo-side,
.image-bingo-theme-cristal-luminoso .image-bingo-counter {
    backdrop-filter: blur(9px) saturate(1.16);
}

.image-bingo-theme-cristal-luminoso .image-bingo-board-wrap {
    position: relative;
    overflow: hidden;
}

.image-bingo-theme-cristal-luminoso .image-bingo-board-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 45%, transparent 57% 100%);
    transform: translateX(-120%);
    animation: imageBingoCrystalBoardSheen 7s ease-in-out infinite;
    pointer-events: none;
}

.image-bingo-theme-cristal-luminoso .image-bingo-board {
    position: relative;
    z-index: 1;
}

.image-bingo-theme-cristal-luminoso .image-bingo-side {
    border-left: 0;
    border: var(--image-bingo-panel-border);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 252, 255, 0.66)),
        radial-gradient(circle at 24% 12%, rgba(184, 243, 107, 0.18), transparent 34%);
    box-shadow: var(--image-bingo-shadow);
    padding-inline: clamp(12px, 1.05vw, 20px);
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell {
    transition: none;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell::before,
.image-bingo-theme-cristal-luminoso .image-bingo-cell::after {
    pointer-events: none;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    border-radius: calc(var(--image-bingo-cell-radius) - 3px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), transparent 36% 100%);
    opacity: 0.78;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell.called {
    transform: none;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell.just-called::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 4;
    border-radius: 24px;
    border: 3px solid rgba(184, 243, 107, 0.78);
    box-shadow:
        0 0 0 5px rgba(41, 184, 217, 0.16),
        0 0 28px rgba(184, 243, 107, 0.52),
        inset 0 0 22px rgba(255, 255, 255, 0.82);
    animation: imageBingoCrystalSparkRing 980ms ease-out both;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell.just-called::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        radial-gradient(circle at 17% 18%, rgba(255, 255, 255, 0.96) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 18%, rgba(255, 232, 106, 0.96) 0 4px, transparent 5px),
        radial-gradient(circle at 74% 74%, rgba(114, 220, 240, 0.92) 0 5px, transparent 6px),
        radial-gradient(circle at 22% 78%, rgba(184, 243, 107, 0.95) 0 4px, transparent 5px);
    filter: drop-shadow(0 0 8px rgba(41, 184, 217, 0.52));
    animation: imageBingoCrystalSparkBurst 860ms ease-out both;
}

.image-bingo-theme-cristal-luminoso .image-bingo-cell.called .image-bingo-image-box img {
    filter:
        var(--image-bingo-cell-image-filter)
        saturate(1.12)
        brightness(1.05);
}

.image-bingo-theme-cristal-luminoso .image-bingo-current-frame {
    isolation: isolate;
    width: min(92%, 100cqh);
    height: auto;
    flex: 0 0 auto;
}

.image-bingo-theme-cristal-luminoso .image-bingo-current-frame::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 28px;
    background:
        conic-gradient(from 0deg, rgba(41, 184, 217, 0), rgba(41, 184, 217, 0.52), rgba(184, 243, 107, 0.44), rgba(255, 232, 106, 0.38), rgba(41, 184, 217, 0));
    opacity: 0;
}

.image-bingo-theme-cristal-luminoso .image-bingo-current-frame.current-called::before {
    animation: imageBingoCrystalCurrentHalo 920ms ease-out both;
}

.image-bingo-theme-cristal-luminoso .image-bingo-current-badge {
    left: 10%;
    right: 10%;
    bottom: -7px;
    padding-block: 5px;
    font-size: clamp(16px, 1.5vw, 26px);
    text-shadow:
        0 2px 0 rgba(21, 128, 154, 0.24),
        0 0 12px rgba(255, 255, 255, 0.46);
}

.image-bingo-theme-cristal-luminoso .image-bingo-brand {
    margin-bottom: clamp(4px, 0.55vw, 10px);
    padding-top: clamp(0px, 0.25vw, 4px);
}

.image-bingo-theme-cristal-luminoso .image-bingo-brand-sub {
    margin-top: 0.35cqh;
}

.image-bingo-theme-cristal-luminoso .image-bingo-current-card {
    padding-top: clamp(2px, 0.25vw, 5px);
    padding-bottom: clamp(16px, 1.3vw, 24px);
}

.image-bingo-theme-cristal-luminoso .image-bingo-last-title {
    color: #194553;
    text-shadow: 0 1px 0 #ffffff, 0 0 14px rgba(41, 184, 217, 0.18);
}

.image-bingo-theme-cristal-luminoso .image-bingo-last-item-circle {
    border-color: rgba(41, 184, 217, 0.58);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.86),
        0 8px 18px rgba(41, 184, 217, 0.12);
}

.image-bingo-theme-cristal-luminoso .image-bingo-last-item.just-entered .image-bingo-last-item-circle {
    border-color: rgba(123, 220, 70, 0.82);
}

.image-bingo-theme-cristal-luminoso .image-bingo-counter {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 12px 26px rgba(41, 184, 217, 0.12);
}

.image-bingo-theme-cristal-luminoso .image-bingo-counter-number {
    color: #22a5c8;
    text-shadow: 0 2px 0 #ffffff, 0 0 18px rgba(184, 243, 107, 0.34);
}

.image-bingo-theme-cristal-luminoso .image-bingo-btn {
    border-radius: 18px;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.26),
        var(--image-bingo-button-shadow),
        0 12px 20px rgba(41, 184, 217, 0.12);
}

@keyframes imageBingoCrystalCellRise {
    0% {
        opacity: 0;
        transform: translateY(13px) scale(0.88);
        filter: blur(3px) brightness(1.16);
    }
    58% {
        opacity: 1;
        transform: translateY(-3px) scale(1.02);
        filter: blur(0) brightness(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
    }
}

@keyframes imageBingoCrystalPanelGlide {
    0% {
        opacity: 0;
        transform: translateX(30px);
        filter: blur(3px);
    }
    66% {
        opacity: 1;
        transform: translateX(-3px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: none;
    }
}

@keyframes imageBingoCrystalCellPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    28% {
        transform: scale(1.08);
        filter: brightness(1.12) saturate(1.08);
    }
    58% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes imageBingoCrystalSparkRing {
    0% {
        opacity: 0;
        transform: scale(0.68);
    }
    28% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes imageBingoCrystalSparkBurst {
    0% {
        opacity: 0;
        transform: scale(0.55) rotate(-10deg);
    }
    32% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.22) rotate(14deg);
    }
}

@keyframes imageBingoCrystalImageFlare {
    0% {
        transform: scale(0.86);
        filter: saturate(0.96) brightness(1.28);
    }
    42% {
        transform: scale(1.08);
        filter: saturate(1.14) brightness(1.14) drop-shadow(0 0 18px rgba(184, 243, 107, 0.52));
    }
    100% {
        transform: scale(1);
        filter: saturate(1) brightness(1);
    }
}

@keyframes imageBingoCrystalCurrentFrame {
    0% {
        transform: translateY(12px) scale(0.9);
        filter: brightness(1.22);
    }
    48% {
        transform: translateY(-4px) scale(1.04);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes imageBingoCrystalCurrentHalo {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.86);
    }
    38% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: rotate(115deg) scale(1.08);
    }
}

@keyframes imageBingoCrystalCurrentImage {
    0% {
        opacity: 0.45;
        transform: translateY(18px) scale(0.78) rotate(-4deg);
        filter: brightness(1.24) blur(2px);
    }
    54% {
        opacity: 1;
        transform: translateY(-4px) scale(1.08) rotate(2deg);
        filter: brightness(1.06) blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: none;
    }
}

@keyframes imageBingoCrystalBadgeSweep {
    0% {
        opacity: 0;
        transform: translateY(16px) scaleX(0.88);
        filter: brightness(1.2);
    }
    52% {
        opacity: 1;
        transform: translateY(-2px) scaleX(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleX(1);
        filter: brightness(1);
    }
}

@keyframes imageBingoCrystalLastSlide {
    0% {
        opacity: 0;
        transform: translateX(18px) scale(0.74);
    }
    54% {
        opacity: 1;
        transform: translateX(-4px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes imageBingoCrystalLastGlow {
    0% {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, 0.9),
            0 0 0 rgba(184, 243, 107, 0);
        filter: brightness(1.2);
    }
    44% {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, 0.94),
            0 0 0 7px rgba(184, 243, 107, 0.32),
            0 0 26px rgba(41, 184, 217, 0.36);
    }
    100% {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, 0.86),
            0 8px 18px rgba(41, 184, 217, 0.12);
        filter: brightness(1);
    }
}

@keyframes imageBingoCrystalBoardSheen {
    0%, 62% {
        transform: translateX(-120%);
    }
    82%, 100% {
        transform: translateX(120%);
    }
}