/* Shared popup geometry. Loaded after page styles; visibility stays page-owned. */
:root { --popup-height: 100vh; --popup-top: 0px; }
@supports (height: 100dvh) { :root { --popup-height: 100dvh; } }

:is(.tutorial-overlay, .modal-overlay, .overlay-modal, .reward-overlay,
    .result-overlay, .chip-zoom-overlay, .slot-modal-overlay, .clan-modal-overlay,
    .cooler-modal-overlay, .server-restart-overlay, #surrender-modal, #overlay,
    #alert-overlay, #pledge-overlay, #share-overlay, #image-modal, #hiring-overlay) {
    position: fixed;
    top: var(--popup-top) !important;
    bottom: auto !important;
    height: var(--popup-height) !important;
    width: 100%;
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overscroll-behavior: contain;
}

:is(.tutorial-modal, .modal-card, .reward-popup, .result-modal, .chip-zoom-content,
    .slot-modal-card, .clan-modal-card, .cooler-modal-card, .server-restart-card,
    #alert-overlay > .card, #pledge-overlay > .card, #share-overlay > .card) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}

/* Scrolling the whole card also keeps footers reachable on very short displays.
   Do not let flexbox shrink text and actions into overlapping rows. */
:is(.tutorial-modal, .modal-card, .reward-popup, .result-modal, .chip-zoom-content,
    .slot-modal-card, .clan-modal-card, .cooler-modal-card, .server-restart-card) > * { flex-shrink: 0; }
:is(.tutorial-modal, .modal-card, .reward-popup, .result-modal,
    .slot-modal-card, .clan-modal-card, .cooler-modal-card) :is(div, input, select, textarea) {
    min-width: 0;
}
:is(.tutorial-modal, .modal-card, .reward-popup, .result-modal,
    .slot-modal-card, .clan-modal-card, .cooler-modal-card,
    #alert-overlay, #pledge-overlay, #share-overlay) button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    flex-shrink: 0;
}
.popup-actions, .modal-actions { flex-wrap: wrap; }
.popup-actions > button, .modal-actions > button { flex: 1 1 120px; }

/* In column containers, all buttons are full-width and never stretch in height */
:is(.popup-actions, .modal-actions)[style*="column"] > button,
:is(.popup-actions, .modal-actions).column > button {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
}

/* Primary play again & restart buttons: prominent in height and padding without stretching vertically */
:is(.btn-popup-play, .btn-continue, .result-btn-restart, .btn-play-again,
    #result-btn-restart, #popup-btn-play, #res-btn, #popup-btn) {
    min-height: 48px !important;
    height: auto !important;
    padding: 13px 20px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}

/* In horizontal / row action groups, give play again priority width */
:is(.popup-actions, .modal-actions):not([style*="column"]):not(.column) > :is(.btn-popup-play, .btn-continue, .result-btn-restart, .btn-play-again,
    #result-btn-restart, #popup-btn-play, #res-btn, #popup-btn) {
    flex: 2 1 170px !important;
    min-width: 160px !important;
}

/* Secondary back/menu buttons in horizontal action groups */
:is(.popup-actions, .modal-actions):not([style*="column"]):not(.column) > :is(.btn-popup-back, .btn-back, .result-btn-menu, #result-btn-menu, #popup-back-btn, #modalBackBtn) {
    flex: 1 1 100px;
    min-width: 80px;
}

/* On wider screens (tablets, desktop, Telegram WebApp on PC) */
@media (min-width: 480px) {
    :is(.reward-popup, .result-modal, .modal-card, #resultsModal .modal-card) {
        max-width: 440px !important;
        width: 100% !important;
        padding: 26px 22px !important;
    }
    :is(.btn-popup-play, .btn-continue, .result-btn-restart, .btn-play-again,
        #result-btn-restart, #popup-btn-play, #res-btn, #popup-btn) {
        min-height: 50px !important;
        height: auto !important;
        padding: 14px 24px !important;
        font-size: 1rem !important;
    }
}
.cropper-actions-row { flex-wrap: wrap; gap: 8px; }
.cropper-actions-row > button { flex: 1 1 90px; }
.cropper-slider { width: 0; min-width: 0; }
.slot-modal-header, .modal-header { gap: 8px; }
:is(.slot-modal-close, .modal-close-btn, .close-modal-btn, .cooler-modal-close, .chip-zoom-close) {
    min-width: 44px; min-height: 44px; flex-shrink: 0;
}
.chip-zoom-content { padding: 24px 12px 12px; max-width: 100%; }
.chip-zoom-close { top: 0; right: 0; }
.chip-zoom-frame {
    width: min(70vw, 340px, calc(var(--popup-height) * .55));
    height: min(70vw, 340px, calc(var(--popup-height) * .55));
    flex-shrink: 0;
}
#image-modal img { max-width: 100%; max-height: calc(var(--popup-height) - 80px); object-fit: contain; }
#hiring-overlay { overflow-y: auto; justify-content: flex-start; }
#hiring-overlay > * { flex-shrink: 0; }

#album-toast, #tot-notification-toast {
    top: calc(var(--popup-top) + max(12px, env(safe-area-inset-top))) !important;
    box-sizing: border-box;
    max-width: calc(100% - 24px) !important;
    max-height: calc(var(--popup-height) - 24px);
    overflow-y: auto;
    overflow-wrap: anywhere;
}
#album-toast-title, #album-toast-desc { white-space: normal !important; }

@media (max-width: 380px), (max-height: 500px) {
    :is(.tutorial-overlay, .modal-overlay, .overlay-modal, .reward-overlay,
        .result-overlay, .slot-modal-overlay, .clan-modal-overlay, .cooler-modal-overlay) {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    :is(.tutorial-modal, .modal-card, .reward-popup, .result-modal,
        .clan-modal-card, .cooler-modal-card,
        #alert-overlay > .card, #pledge-overlay > .card, #share-overlay > .card) {
        width: 100% !important;
        padding: 14px 12px !important;
    }
    :is(.tutorial-modal, .modal-card, .reward-popup, .result-modal,
        .slot-modal-card, .clan-modal-card, .cooler-modal-card,
        #alert-overlay, #pledge-overlay, #share-overlay) button {
        min-height: 34px;
    }
    .slot-modal-header, .slot-modal-body { padding: 10px 12px; }
    /* Inputs stay readable and avoid the iOS focus-zoom jump. */
    :is(.tutorial-modal, .modal-card, #share-overlay) :is(input, select, textarea) { font-size: 16px; }
}