/* Two visual cards, one dialog/backdrop and one scroll area. Deposit-only scope. */
.modal-shell[data-modal="deposit"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-bottom));
}

.modal-shell[data-modal="deposit"] > .modal-backdrop {
    position: fixed;
    touch-action: none;
}

.modal-shell[data-modal="deposit"] .deposit-dialog-stack {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(100%, 420px);
    margin-block: auto;
    outline: none;
}

.modal-shell[data-modal="deposit"] .deposit-raffle {
    margin: 0;
    width: 100%;
    padding: 16px 14px;
    border-radius: 24px;
    transform-origin: center center;
    animation: deposit-promotion-enter 660ms cubic-bezier(.2, .7, .2, 1) 350ms both;
}

/* One light sweep confined to the outline: never over the text or controls. */
.modal-shell[data-modal="deposit"] .deposit-raffle::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, #ffcf50 44%, #fff3c5 50%, #ffcf50 56%, transparent 70%) 160% 0 / 250% 100% no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    animation: deposit-promotion-border-sweep 900ms ease-in-out 1000ms both;
}

.modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 span {
    padding-right: 0;
    white-space: normal;
}

.modal-shell[data-modal="deposit"] .modal-card--deposit {
    width: 100%;
    max-width: 100%;
    max-height: none;
    padding-top: 12px;
    overflow: hidden;
}

.modal-shell[data-modal="deposit"] .modal-copy--deposit {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-right: 36px;
    margin-bottom: 14px;
}

.modal-shell[data-modal="deposit"] .modal-copy--deposit h3 {
    font-size: clamp(22px, 6vw, 29px);
}

.modal-shell[data-modal="deposit"] .home-deposit-form {
    margin-top: 0;
}

.modal-shell[data-modal="deposit"] .modal-card--deposit > .modal-close {
    top: 6px;
    right: 8px;
}

.modal-shell[data-modal="deposit"] #depositAmountTitle:focus {
    outline: none;
}

@keyframes deposit-promotion-enter {
    0% { opacity: 0; transform: translateY(-48px) scale(.92); }
    60% { opacity: 1; transform: translateY(7px) scale(1.012); }
    80% { opacity: 1; transform: translateY(-3px) scale(.997); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes deposit-promotion-border-sweep {
    0% { opacity: 0; background-position: 160% 0; }
    15%, 85% { opacity: 1; }
    100% { opacity: 0; background-position: -60% 0; }
}

@media (max-width: 360px) {
    .modal-shell[data-modal="deposit"] .deposit-raffle { padding: 14px 10px; }
}

/* Fit the actual browser viewport, including the shorter in-app browser area.
   Keep emergency scrolling for keyboard/zoom; never crop or scale the form. */
@media (max-height: 740px) {
    .modal-shell[data-modal="deposit"] {
        padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom));
    }
    .modal-shell[data-modal="deposit"] .deposit-dialog-stack { gap: 10px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle { padding-block: 10px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-media img { max-width: 90px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 { margin-bottom: 4px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 span { margin-bottom: 4px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy p + p { margin-top: 4px; }
    .modal-shell[data-modal="deposit"] .modal-card--deposit { padding: 10px 16px 14px; }
    .modal-shell[data-modal="deposit"] .modal-copy--deposit { margin-bottom: 8px; }
    .modal-shell[data-modal="deposit"] .home-deposit-form { gap: 10px; }
    .modal-shell[data-modal="deposit"] .quick-amount-grid { margin-top: 4px; gap: 16px 10px; }
    .modal-shell[data-modal="deposit"] .quick-amount-button {
        min-height: 60px;
        padding-block: 12px;
        border-radius: 18px;
    }
    .modal-shell[data-modal="deposit"] .deposit-bonus-face { inset: 12px 8px 5px; }
    .modal-shell[data-modal="deposit"] .deposit-bonus-face__total { font-size: 24px; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value { margin-top: 0; gap: 4px; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value > .sr-only { font-size: 12px; line-height: 1.2; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value input:not([type="hidden"]) { min-height: 46px; padding-block: 6px; font-size: 20px; }
    .modal-shell[data-modal="deposit"] .deposit-limits-copy { margin: 0; line-height: 1.2; }
    .modal-shell[data-modal="deposit"] .modal-primary--submit {
        min-height: 48px;
        padding: 10px 10px 12px;
        font-size: 15px;
        letter-spacing: .02em;
    }
}

@media (max-height: 560px), (max-width: 340px) and (max-height: 740px) {
    .modal-shell[data-modal="deposit"] { padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
    .modal-shell[data-modal="deposit"] .deposit-raffle { grid-template-columns: 88px minmax(0, 1fr); padding: 8px 10px; gap: 8px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-media img { max-width: 76px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-timing { gap: 3px; margin-top: 3px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle .deposit-countdown span { height: 24px; font-size: 14px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 span { font-size: 14px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 strong { font-size: 22px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy p,
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy .deposit-raffle-audience { font-size: 12px; line-height: 1.2; }
    .modal-shell[data-modal="deposit"] .modal-card--deposit { padding: 8px 14px 10px; }
    .modal-shell[data-modal="deposit"] .modal-copy--deposit { margin-bottom: 6px; }
    .modal-shell[data-modal="deposit"] .modal-copy--deposit h3 { font-size: 22px; }
    .modal-shell[data-modal="deposit"] .home-deposit-form { gap: 6px; }
    .modal-shell[data-modal="deposit"] .quick-amount-grid { margin-top: 4px; gap: 14px 10px; }
    .modal-shell[data-modal="deposit"] .quick-amount-button { min-height: 54px; padding-block: 8px; }
    .modal-shell[data-modal="deposit"] .deposit-choice-value { font-size: 24px; }
    .modal-shell[data-modal="deposit"] .deposit-choice-currency { font-size: 14px; }
    .modal-shell[data-modal="deposit"] .deposit-bonus-face__from { font-size: 11px; }
    .modal-shell[data-modal="deposit"] .deposit-bonus-face__total { font-size: 22px; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value { gap: 2px; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value input:not([type="hidden"]) { min-height: 44px; }
    .modal-shell[data-modal="deposit"] .modal-primary--submit { min-height: 44px; padding-block: 8px 10px; font-size: 14px; }
}

/* Landscape: retain the promotion above; arrange the form in two columns. */
@media (min-width: 480px) and (max-height: 440px) {
    .modal-shell[data-modal="deposit"] .deposit-dialog-stack { width: min(100%, 760px); }
    .modal-shell[data-modal="deposit"] .deposit-raffle {
        grid-template-columns: 94px minmax(0, 1fr);
        padding-block: 6px;
    }
    .modal-shell[data-modal="deposit"] .deposit-raffle-media img { width: 58px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-timing { margin: 0; width: 94px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy { display: grid; grid-template-columns: minmax(140px, .9fr) minmax(0, 1.1fr); gap: 4px 10px; align-items: center; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy p { grid-column: 2; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy h4 span { margin-bottom: 2px; }
    .modal-shell[data-modal="deposit"] .deposit-raffle-copy p + p { margin-top: 0; }
    .modal-shell[data-modal="deposit"] .modal-card--deposit { padding-block: 8px; }
    .modal-shell[data-modal="deposit"] .modal-copy--deposit { margin-bottom: 4px; }
    .modal-shell[data-modal="deposit"] .home-deposit-form { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
    .modal-shell[data-modal="deposit"] .quick-amount-grid { grid-column: 1; grid-row: 1 / span 3; margin: 0; align-self: stretch; }
    .modal-shell[data-modal="deposit"] .register-field--deposit-value { grid-column: 2; grid-row: 1; }
    .modal-shell[data-modal="deposit"] .deposit-limits-copy { grid-column: 2; grid-row: 2; align-self: center; }
    .modal-shell[data-modal="deposit"] .modal-primary--submit { grid-column: 2; grid-row: 3; }
    .modal-shell[data-modal="deposit"] .register-feedback,
    .modal-shell[data-modal="deposit"] .home-deposit-notice { grid-column: 1 / -1; }
}

@media (min-width: 480px) and (max-width: 559px) and (max-height: 440px) {
    .modal-shell[data-modal="deposit"] .deposit-raffle-media img { width: 48px; }
    .modal-shell[data-modal="deposit"] .home-deposit-form { grid-template-columns: 1.15fr 1fr; column-gap: 12px; }
    .modal-shell[data-modal="deposit"] .deposit-bonus-badge { padding-inline: 3px; letter-spacing: 0; white-space: nowrap; }
    .modal-shell[data-modal="deposit"] .modal-primary--submit { padding-block: 6px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-shell[data-modal="deposit"] .deposit-raffle,
    .modal-shell[data-modal="deposit"] .deposit-raffle::after {
        animation: none;
    }
}