:root {
    --transition-fast: 0.2s;
    --transition-normal: 0.25s;
    --transition-slow: 0.35s;
    --ease-default: ease;
    --ease-out: ease-out;
}

html {
    scroll-behavior: smooth;
}

#game-iframe-wrapper {
    animation: pageFadeIn var(--transition-slow) var(--ease-out) forwards;
    overflow: hidden;
    overscroll-behavior: none;
}
#game-iframe-wrapper iframe {
    animation: pageFadeIn var(--transition-normal) 0.1s var(--ease-out) forwards;
    overflow: hidden;
    overscroll-behavior: none;
}
@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

html.game-iframe-active,
html.game-iframe-active body {
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    overscroll-behavior: none;
    touch-action: manipulation;
}
html.game-iframe-active body {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.custom-popup-overlay,
.game-details-overlay {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.custom-popup-overlay .custom-popup,
.game-details-overlay .game-details-modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.rules-modal[style*="flex"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.rules-modal[style*="flex"] .rules-content {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}

.credits-overlay[style*="block"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}

#account-modal[style*="flex"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
#account-modal[style*="flex"] .modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}

.leaderboard-overlay {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.leaderboard-overlay .leaderboard-modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}