/* === 08. EFEKTY GLOBALNE =================================================== */

/* --- 08.0 Wspólne prymitywy warstw --- */
#reward-overlay,
#post-fight-overlay {
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#reward-overlay.visible,
#post-fight-overlay.visible {
    display: flex;
}

#game-canvas,
#class-list,
#merge-fx-overlay,
#abyss-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#merge-side-panel,
.class-picker-details,
#dice-skill-details,
.treasury-details,
.war-panel {
    position: absolute;
    right: 16px;
    top: 4px;
    width: 400px;
    height: 960px;
    border: 0;
    background: transparent url("../image/ui/window_extra_tall.png") center / 400px 960px no-repeat;
    box-shadow: none;
}

/* --- 08.1 Globalny kursor gry --- */
html,
body,
body *,
*::before,
*::after,
#shell-layer,
#game-container,
#ui-layer,
#game-canvas,
canvas {
    cursor: none !important;
}

#custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    z-index: 2147483647;
    pointer-events: none;
    background: transparent url("../image/ui/mouse.png") 0 0 / 80px 80px no-repeat;
    image-rendering: pixelated;
    transform-origin: 0 0;
    transform: translate(-200px, -200px);
    opacity: 0;
    will-change: transform, opacity;
}

#custom-cursor.visible {
    opacity: 1;
}

/* --- 08.2 Przejscia pomiedzy ekranami ---
   Jeden globalny layer maskuje przełączanie ekranów i resetowanie walki.
   W tej wersji animujemy wyłącznie opacity/transform, bez pełnoekranowych filtrów i dużych blurów. */
#screen-transition-layer {
    --screen-transition-duration: 320ms;
    position: fixed;
    inset: 0;
    z-index: 260;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    contain: layout paint style;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
    background:
        radial-gradient(circle at 50% 45%, rgba(84, 56, 25, 0.18), rgba(4, 3, 2, 0.90) 56%, rgba(0, 0, 0, 0.98) 100%),
        linear-gradient(115deg, rgba(24, 17, 11, 0.96), rgba(0, 0, 0, 1));
    transition:
        opacity var(--screen-transition-duration) cubic-bezier(.22, .72, .22, 1),
        visibility 0ms linear var(--screen-transition-duration);
}

#screen-transition-layer.is-active {
    visibility: visible;
    transition:
        opacity var(--screen-transition-duration) cubic-bezier(.22, .72, .22, 1),
        visibility 0ms linear 0ms;
}

#screen-transition-layer.is-armed,
#screen-transition-layer.is-revealing {
    opacity: 0;
}

#screen-transition-layer.is-covered {
    opacity: 1;
}

#screen-transition-layer[data-preset="battle"] {
    background:
        radial-gradient(circle at 50% 48%, rgba(116, 68, 26, 0.20), rgba(5, 3, 2, 0.92) 58%, rgba(0, 0, 0, 0.99) 100%),
        linear-gradient(135deg, rgba(31, 17, 11, 0.98), rgba(0, 0, 0, 1));
}

#screen-transition-layer[data-preset="fight"] {
    background:
        radial-gradient(circle at 50% 50%, rgba(76, 37, 22, 0.22), rgba(0, 0, 0, 0.92) 60%, rgba(0, 0, 0, 0.99) 100%),
        linear-gradient(90deg, rgba(18, 9, 7, 1), rgba(0, 0, 0, 1));
}

#screen-transition-layer[data-preset="menu"] {
    background:
        radial-gradient(circle at 50% 40%, rgba(81, 64, 35, 0.16), rgba(4, 3, 2, 0.90) 58%, rgba(0, 0, 0, 0.98) 100%),
        linear-gradient(155deg, rgba(21, 16, 11, 0.98), rgba(0, 0, 0, 1));
}

.screen-transition-vignette {
    position: absolute;
    inset: -4%;
    opacity: 0.78;
    transform: scale(1.02) translateZ(0);
    will-change: opacity, transform;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.88) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px);
}

.screen-transition-smoke {
    position: absolute;
    inset: -12%;
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(1.02);
    will-change: opacity, transform;
    background:
        radial-gradient(ellipse at 28% 54%, rgba(130, 101, 62, 0.10), transparent 0 28%),
        radial-gradient(ellipse at 72% 46%, rgba(78, 56, 39, 0.12), transparent 0 30%),
        radial-gradient(ellipse at 50% 72%, rgba(0, 0, 0, 0.40), transparent 0 48%);
}

.screen-transition-smoke.smoke-b {
    transform: translate3d(0, -12px, 0) scale(1.04);
    opacity: 0;
}

#screen-transition-layer.is-covered .screen-transition-vignette {
    transform: scale(1.055) translateZ(0);
    transition: transform calc(var(--screen-transition-duration) + 160ms) cubic-bezier(.16, .8, .22, 1);
}

#screen-transition-layer.is-covered .screen-transition-smoke {
    opacity: 0.62;
    transform: translate3d(0, 0, 0) scale(1.04);
    transition:
        opacity calc(var(--screen-transition-duration) + 80ms) ease-out,
        transform calc(var(--screen-transition-duration) + 220ms) cubic-bezier(.16, .8, .22, 1);
}

#screen-transition-layer.is-revealing .screen-transition-smoke,
#screen-transition-layer.is-revealing .screen-transition-vignette {
    opacity: 0;
    transition:
        opacity var(--screen-transition-duration) ease-in,
        transform var(--screen-transition-duration) ease-in;
}

body.screen-transitioning #shell-layer,
body.screen-transitioning #game-container,
body.screen-transitioning #reward-overlay,
body.screen-transitioning #post-fight-overlay {
    pointer-events: none !important;
}

#reward-overlay.visible #reward-panel {
    animation: rewardPanelEnter 340ms cubic-bezier(.16, .9, .24, 1) both;
}

#post-fight-overlay.visible #post-fight-panel {
    animation: heavyPanelEnter 340ms cubic-bezier(.16, .9, .24, 1) both;
}

@keyframes rewardPanelEnter {
    0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.992); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes heavyPanelEnter {
    0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.992); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #screen-transition-layer,
    .screen-transition-smoke,
    .screen-transition-vignette,
    #reward-overlay.visible #reward-panel,
    #post-fight-overlay.visible #post-fight-panel,
    .dice-hover-aura .aura-glow,
    .dice-hover-aura .aura-cloud,
    .dice-hover-aura .aura-bolt {
        animation: none !important;
        transition: none !important;
    }

    .dice-roll-stage.is-madness-roll .dice-roll-hitbox.is-madness-choice {
        animation: none !important;
    }

    .dice-roll-stage.is-enemy-roll .dice-roll-hitbox.is-enemy-choice {
        animation: none !important;
    }
}

/* --- 08.3 Wstrzas ekranu ---
   Jedna lekka warstwa screenshake dla aktywnego widoku. Animujemy tylko transform
   przez zmienne CSS ustawiane z requestAnimationFrame w js/ui/shake_UI.js. */
#shell-layer,
#game-container,
#reward-overlay,
#post-fight-overlay {
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

body.screen-shaking #shell-layer,
body.screen-shaking #game-container,
body.screen-shaking #reward-overlay,
body.screen-shaking #post-fight-overlay {
    transform: translate3d(var(--screen-shake-x), var(--screen-shake-y), 0) rotate(var(--screen-shake-rot));
    will-change: transform;
}



body.screen-shaking #screen-transition-layer {
    transform: translateZ(0);
}


/* --- 08.4 Licznik FPS ---
   Mały licznik testowy do oceny kosztu FX/przejść. Wyłączany przez
   DEBUG_UI_CONFIG.showFpsCounter w js/ui/debug_UI.js. */
.debug-fps-counter {
    position: fixed;
    right: 14px;
    top: 12px;
    z-index: 12000;
    min-width: 68px;
    padding: 5px 8px 4px;
    border: 1px solid rgba(197, 160, 89, .38);
    border-radius: 6px;
    background: rgba(7, 6, 5, .72);
    color: rgba(214, 196, 154, .86);
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .05em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    pointer-events: none;
    user-select: none;
    backdrop-filter: blur(2px);
}

.debug-fps-counter.fps-low {
    border-color: rgba(128, 35, 30, .66);
    color: rgba(205, 108, 91, .92);
}