/* Custom Utility Styles & Animations */

/* Active Tab Highlight */
.active-tab {
    background-color: #FF6A00 !important;
    color: #000000 !important;
    box-shadow: 0 0 12px rgba(255,106,0,0.64);
}

/* Station Card Glow States */
.card-active-open {
    border-color: #FF6A00 !important;
    box-shadow: 0 0 20px rgba(255,106,0,0.24);
}

.card-active-fixed {
    border-color: #F59E0B !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

/* Pulsing red alert for expired sessions */
.card-expired {
    border-color: #EF4444 !important;
    animation: pulse-red 1.2s infinite alternate;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    }
    100% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
    }
}
/* ---- Moonlight Gaming brand ---- */
.brand-font {
    font-family: 'Alfa Slab One', Rockwell, Georgia, serif;
    letter-spacing: 0.02em;
}

.brand-gradient-text {
    background: linear-gradient(90deg, #FF3D1F 0%, #FF9A1F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-glow {
    box-shadow: 0 0 40px rgba(255,61,31,0.52), 0 0 90px rgba(255,154,31,0.22);
}

/* ---- Modals: pop in ---- */
.modal-overlay:not(.hidden) { animation: fadeIn .12s ease-out; }
.modal-overlay:not(.hidden) > div { animation: modalPop .18s cubic-bezier(.2,.9,.3,1.25); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.modal-overlay:not(.hidden) .cancel-icon { animation: iconWobble .6s .15s ease-out; }
@keyframes iconWobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }

/* ---- Button press feel ---- */
button { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: scale(.96); }

/* ---- Session launch: ring burst + light sweep on the card ---- */
.fx-start { animation: cardLaunch .7s cubic-bezier(.2,.9,.3,1.3); }
.fx-start::before, .fx-start::after { content: ""; position: absolute; pointer-events: none; }
.fx-start::before { inset: 0; border-radius: inherit; border: 2px solid #FF9A1F; animation: ringBurst .8s ease-out forwards; }
.fx-start::after { top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,154,31,0.52), transparent); animation: sweep .8s .05s ease-out forwards; }
.fx-start [id^="timer-"] { animation: timerPop .6s .1s cubic-bezier(.2,.9,.3,1.6); }
@keyframes cardLaunch { 0% { transform: scale(.94); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes ringBurst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes sweep { to { left: 130%; } }
@keyframes timerPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Checkout: green flash / Cancel: shake ---- */
.fx-checkout { animation: payFlash .9s ease-out; }
@keyframes payFlash { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); border-color: #10B981; } 100% { box-shadow: 0 0 0 28px rgba(16,185,129,0); } }
.fx-cancel { animation: shake .45s ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.stat-pop { animation: statPop .5s cubic-bezier(.2,.9,.3,1.6); }
@keyframes statPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- Cancel button on station cards ---- */
.cancel-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 0; border-radius: 10px; font-size: 11px; font-weight: 600; color: #64748b; border: 1px dashed #2B1D17; transition: all .2s; }
.cancel-link:hover { color: #fb7185; border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.08); }

/* ---- Toasts ---- */
#toast-root { position: fixed; top: 84px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #0D0B0A; border: 1px solid #2B1D17; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2), toastOut .3s 2.6s ease-in forwards; }
.toast.ok { border-color: rgba(255,154,31,0.75); }
.toast.pay { border-color: rgba(16,185,129,.55); }
.toast.cancel { border-color: rgba(244,63,94,.5); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---- Logout fade ---- */
body.fx-leave { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    .fx-start, .fx-checkout, .fx-cancel, .stat-pop, .modal-overlay:not(.hidden), .modal-overlay:not(.hidden) > div { animation: none !important; }
    .fx-start::before, .fx-start::after { display: none; }
}

/* ---- Game picker chips ---- */
.game-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid #2B1D17; background: #000; color: #cbd5e1; font-size: 12px; font-weight: 600; text-align: left; transition: all .15s; }
.game-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-chip:hover { border-color: rgba(255,106,0,.6); }
.game-chip.on { border-color: #FF6A00; background: rgba(255,106,0,.2); color: #FF6A00; box-shadow: 0 0 14px rgba(255,106,0,.3); }