/* =============================================================================
   MODALS.CSS — Overlays, Modals, Toast Notifications, Splash Screen
   Plinko Game | Claymorphism Theme
   ============================================================================= */

/* ── Modal Overlay (full-screen backdrop) ─────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(121, 110, 187, 0.32);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal Card ───────────────────────────────────────────────────────────── */
.modal-content {
    background: #fdfbff;
    border: 4px solid #ffffff;
    border-radius: 32px;
    padding: 26px;
    width: 90%;
    max-width: 330px;
    box-shadow:
        0 30px 65px rgba(46, 43, 84, 0.18),
        inset 4px 4px 12px #ffffff,
        inset -4px -4px 12px rgba(121, 110, 187, 0.15);
    position: relative;
    animation: scaleUp 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.25);
    color: var(--clay-text-dark);
}
@keyframes scaleUp { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Wider variant for the how-to modal */
.modal-howto-content { max-width: 370px; width: 92%; }

/* ── Shared Modal Elements ────────────────────────────────────────────────── */
.modal-close-x {
    position: absolute;
    top: 18px;
    right: 20px;
    background: none;
    border: none;
    color: var(--clay-text-muted);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.15s;
}
.modal-close-x:hover { color: var(--clay-text-dark); }

.modal-title {
    text-align: center;
    font-size: 15px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--clay-text-dark);
    margin-bottom: 20px;
    text-shadow: 1px 1px 0px #ffffff;
}

/* ── Modal Input Field ────────────────────────────────────────────────────── */
.modal-input-row    { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.modal-input-wrapper { position: relative; flex: 1; display: flex; align-items: center; }
.modal-input {
    background: #f3ecf9;
    border: 2px solid #ffffff;
    border-radius: 16px;
    padding: 14px 48px 14px 16px;
    width: 100%;
    color: var(--clay-text-dark);
    font-weight: 950;
    text-align: center;
    font-size: 19px;
    box-sizing: border-box;
    box-shadow: inset 3px 3px 6px rgba(121, 110, 187, 0.3);
    outline: none;
    transition: all 0.15s ease;
}
.modal-input:focus {
    border-color: #ebdffd;
    box-shadow: inset 3px 3px 6px rgba(121, 110, 187, 0.4), 0 0 10px rgba(121, 110, 187, 0.15);
}
/* Currency tag floating at right of input */
.input-currency-tag {
    position: absolute;
    right: 18px;
    color: var(--clay-text-muted);
    font-weight: 900;
    font-size: 11px;
    pointer-events: none;
}

/* Clear (✕) button beside input */
.btn-clear-modal {
    height: 52px;
    width: 52px;
    background: #ffe8ef;
    border: 2px solid #ffffff;
    border-radius: 16px;
    color: #ef004c;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.03),
        inset 2px 2px 4px #ffffff,
        inset -2px -2px 4px rgba(239, 0, 76, 0.15);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-clear-modal:hover  { transform: scale(1.06); background: #fff2f6; }
.btn-clear-modal:active { transform: scale(0.92); }

/* Insufficient-balance warning flash */
.insufficient-warning {
    text-align: center;
    color: #ef004c;
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: -12px;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
    animation: flash 1s infinite alternate;
}
.hidden-warning { display: none !important; }
@keyframes flash { from { opacity: 0.5; } to { opacity: 1; } }

/* ── Quick-Select Grid (Bet / Refill presets) ─────────────────────────────── */
.quick-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.quick-btn {
    background: #f4edf8;
    border: 2px solid #ffffff;
    padding: 12px;
    border-radius: 16px;
    font-weight: 850;
    font-size: 13.5px;
    color: var(--clay-text-dark);
    cursor: pointer;
    box-shadow:
        0 4px 8px rgba(121, 110, 187, 0.15),
        inset 2px 2px 4px #ffffff,
        inset -2px -2px 4px rgba(121, 110, 187, 0.18);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.quick-btn:hover  { color: #8338ec; background: #fbf8ff; }
.quick-btn:active { transform: scale(0.92); }
.quick-btn-disabled { opacity: 0.45; pointer-events: none; filter: grayscale(0.5); }
.plus-sign { color: #8338ec; font-size: 10px; font-weight: 950; }

/* ── Primary Modal Action Button ──────────────────────────────────────────── */
.btn-modal-primary {
    background: linear-gradient(135deg, #ff758f 0%, #ff0054 100%);
    border: 3px solid #ffffff;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(153, 0, 48, 0.6);
    box-shadow:
        0 6px 18px rgba(255, 0, 84, 0.18),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2.5px -2.5px 5px rgba(153, 0, 48, 0.4);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.25);
    letter-spacing: 0.03em;
}
.btn-modal-primary:hover    { transform: scale(1.03); filter: brightness(1.04); }
.btn-modal-primary:active   { transform: scale(0.95); box-shadow: inset 2.5px 2.5px 5px rgba(153, 0, 48, 0.4); }
.btn-modal-primary:disabled { opacity: 0.45; pointer-events: none; filter: grayscale(0.5); }

/* ── How-To Modal Content ─────────────────────────────────────────────────── */
.howto-scrollable {
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Thin custom scrollbar inside how-to */
.howto-scrollable::-webkit-scrollbar       { width: 4px; }
.howto-scrollable::-webkit-scrollbar-track { background: rgba(121, 110, 187, 0.1); border-radius: 2px; }
.howto-scrollable::-webkit-scrollbar-thumb { background: rgba(121, 110, 187, 0.3); border-radius: 2px; }

/* Step cards */
.howto-card {
    background: #fdfbff;
    border: 2px solid #ffffff;
    border-radius: 18px;
    padding: 14px;
    box-shadow:
        0 4px 10px rgba(121, 110, 187, 0.08),
        inset 2px 2px 4px #ffffff,
        inset -2px -2px 4px rgba(121, 110, 187, 0.12);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.howto-heading { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 11px; letter-spacing: 0.05em; }
.howto-step {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 950;
    border: 1px solid #ffffff;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
}
.howto-text { font-size: 11.5px; line-height: 1.5; color: var(--clay-text-muted); }

/* Colour themes per step card */
.tag-cyan   .howto-heading { color: #ff3a69; }
.tag-cyan   .howto-step    { background-color: #ff3a69; }
.text-cyan                 { color: #ff3a69; font-weight: 850; }

.tag-yellow .howto-heading { color: #e07a00; }
.tag-yellow .howto-step    { background-color: #ffab40; color: #ffffff; }
.text-red                  { color: #ef004c; font-weight: 850; }

.tag-green  .howto-heading { color: #00b484; }
.tag-green  .howto-step    { background-color: #00b484; }

.tag-purple .howto-heading { color: #8338ec; }
.tag-purple .howto-step    { background-color: #8338ec; }

.mt-layout { margin-top: 16px; }

/* ── Toast Notifications ──────────────────────────────────────────────────── */
.notification {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    animation: bouncePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}
@keyframes bouncePop {
    0%   { transform: translateX(-50%) translateY(-20px) scale(0.85); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0) scale(1);         opacity: 1; }
}
.toast-box {
    padding: 13px 26px;
    border-radius: 22px;
    border: 3px solid #ffffff;
    box-shadow: 0 10px 25px rgba(121, 110, 187, 0.15), inset 2px 2px 4px #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fdfbff;
}
/* Semantic colour variants */
.toast-success {
    color: #00b484;
    background-color: #e0faf1;
    box-shadow: 0 8px 24px rgba(0, 180, 132, 0.15), inset 2px 2px 4px #ffffff, inset -2px -2px 4px rgba(0, 180, 132, 0.05);
}
.toast-error {
    color: #ef004c;
    background-color: #ffe8ef;
    box-shadow: 0 8px 24px rgba(239, 0, 76, 0.15), inset 2px 2px 4px #ffffff, inset -2px -2px 4px rgba(239, 0, 76, 0.05);
}
.toast-text {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
}

/* ── Splash / Loading Screen ──────────────────────────────────────────────── */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 25%, #ffeef2 0%, #e8eaff 50%, #ccd2ff 100%);
    transition: opacity 0.5s ease-in-out;
}
.splash-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}
.splash-logo-container { margin-bottom: 24px; filter: drop-shadow(0 12px 24px rgba(121, 110, 187, 0.15)); }

/* Multi-colour gradient text logo */
.splash-logo-text {
    font-size: 48px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, #ff0054, #8338ec, #ffab40, #00b484);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8), -2px -2px 4px rgba(0, 0, 0, 0.05);
}

/* Loading bar track + fill */
.splash-progress-track {
    width: 192px;
    height: 10px;
    background: #ebdffd;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    border: 2.5px solid #ffffff;
    box-shadow: var(--clay-inset);
}
.splash-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #ff0054, #8338ec);
    width: 0%;
    transition: width 0.04s linear;
    border-radius: 9999px;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
}