@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,700;1,700&display=swap');

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #0d0f12;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    margin: 0;
    font-family: 'Almendra', serif;
    overflow: hidden;
}

/* KHUNG MÁY SLOT */
.machine-container {
    width: 100%;
    max-width: 420px;
    height: 100dvh;
    max-height: 900px;
    background: #2c2218;
    background-image: radial-gradient(circle at 50% 0%, #3f3022 0%, #1a130e 100%);
    border: 4px solid #0a0705;
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* BẢNG HỆ SỐ NHÂN */
.top-banner {
    background: linear-gradient(to bottom, #4a3524, #2b1d11);
    border-bottom: 3px solid #8b6508;
    border-radius: 0 0 20px 20px;
    padding: 10px 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.top-banner span {
    color: #7a5e3e;
    font-size: clamp(12px, 3vw, 16px);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.3s;
}

.top-banner span.active {
    color: #ffdf73;
    font-size: clamp(16px, 4vw, 22px);
    text-shadow: 0 0 10px #ffdf73, 0 0 20px #ffdf73;
    animation: mult-pulse 0.5s infinite alternate;
}

@keyframes mult-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.3); text-shadow: 0 0 20px #ffdf73, 0 0 40px #ff0000; }
}

/* LƯỚI QUAY */
.reels-wrapper {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.reels-background {
    background: #120d09;
    border: 2px solid #3d2b1b;
    border-radius: 10px;
    padding: 6px;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.9);
}

.reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cell {
    background: #1c1611;
    border-radius: 8px;
    height: clamp(60px, 12dvh, 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(30px, 8vw, 45px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    border: 1px solid #2e2216;
    position: relative;
    transition: filter 0.1s;
}

.cell.spinning {
    filter: blur(4px);
    animation: blur-anim 0.1s infinite;
}

@keyframes blur-anim {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
}

.cell.winning {
    border: 2px solid #ffdf73;
    box-shadow: 0 0 20px #ffdf73, inset 0 0 20px #ffdf73;
    background: #3a2a1a;
    z-index: 2;
    animation: win-pulse 0.5s infinite alternate;
}

@keyframes win-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.sym-emoji { filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.6)); }
.card-letter {
    font-family: 'Times New Roman', serif;
    font-weight: 900;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0px 4px 5px rgba(0,0,0,0.8);
    -webkit-text-stroke: 1px #000;
}
.sym-K { color: #ff4444; } .sym-Q { color: #55dd55; } .sym-J { color: #44aaff; } .sym-A { color: #ffdd44; }

/* PHẦN ĐIỀU KHIỂN DƯỚI */
.bottom-ui {
    padding: 10px 10px 20px;
    background: linear-gradient(to top, #1a120a, #2c1e13);
    border-top: 3px solid #4a3524;
    flex-shrink: 0;
    position: relative;
}

.win-banner {
    background: linear-gradient(to bottom, #e3b85d, #a8752b);
    border: 1px solid #4a2e0e;
    border-radius: 5px;
    padding: 4px;
    text-align: center;
    color: #4a2e0e;
    font-size: clamp(16px, 4vw, 20px);
    font-weight: bold;
    margin-bottom: 10px;
}

.info-bar {
    display: flex;
    justify-content: space-between;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: clamp(12px, 3vw, 14px);
    color: #a8926e;
    margin-bottom: 15px;
    border: 1px solid #3d2b1b;
}

.info-item { display: flex; align-items: center; gap: 5px; }
.coin-icon { width: 12px; height: 12px; background: #ffd700; border-radius: 50%; box-shadow: inset 0 0 2px #fff; }

.spin-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: -10px;
}

.spin-btn {
    width: clamp(80px, 25vw, 100px);
    height: clamp(80px, 25vw, 100px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b 60%, #5c4306);
    border: 4px solid #2b1d11;
    box-shadow: 0 8px 15px rgba(0,0,0,0.8), inset 0 5px 10px rgba(255,255,255,0.5);
    color: #fff;
    font-size: clamp(16px, 5vw, 22px);
    font-weight: bold;
    font-family: 'Almendra', serif;
    text-shadow: 1px 1px 3px #000;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.1s;
}

.spin-btn:active:not(:disabled) { transform: scale(0.95); }
.spin-btn:disabled { filter: grayscale(80%); }

.side-btn {
    position: absolute; bottom: 20px;
    background: linear-gradient(to bottom, #4a3524, #1a120a);
    border: 2px solid #8b6508; border-radius: 6px;
    color: #a8926e; padding: 6px 10px;
    font-size: 10px; font-weight: bold;
    font-family: 'Almendra', serif;
    cursor: pointer;
}

.btn-ex { left: 15px; width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; z-index: 10;}
.btn-withdraw { right: 15px; background: linear-gradient(to bottom, #d4af37, #b8860b); color: #000; padding: 8px 12px; border-radius: 5px; text-align: center;}

.floating-win {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #00ff00;
    font-weight: 900;
    text-shadow: 0 0 10px #00ff00, 2px 2px 2px #000;
    pointer-events: none;
    opacity: 0;
    z-index: 20;
}

.floating-win.animate {
    animation: float-up 1.5s ease-out forwards;
}

@keyframes float-up {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -80%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }

.modal-box {
    background: #2c2218; border: 3px solid #b8860b; border-radius: 10px;
    padding: 20px; width: 90%; max-width: 350px; text-align: center;
    color: #fff; box-shadow: 0 0 30px #ffd700; font-family: Arial, sans-serif;
    transform: translateY(20px); transition: transform 0.3s;
}
.modal-overlay.show .modal-box { transform: translateY(0); }

.modal-box h2 { margin-top: 0; color: #ffd700; font-family: 'Almendra', serif; font-size: 24px; }

.amount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.amount-btn {
    background: #4a3524; border: 1px solid #8b6508; color: #ffd700;
    padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold;
}
.amount-btn.selected { background: #8b6508; color: #fff; border-color: #ffd700; }

.phone-input {
    width: 100%; padding: 10px; margin: 10px 0 20px;
    border-radius: 5px; border: 1px solid #8b6508; background: #1a120a; color: #fff;
    font-size: 16px; text-align: center;
}

.action-btn {
    background: #00cc00; color: white; border: none; padding: 12px;
    width: 100%; border-radius: 5px; font-weight: bold; font-size: 16px; cursor: pointer;
}

#adminPanel {
    background: #fff; color: #000; padding: 20px; width: 100%; height: 100%;
    position: fixed; top: 0; left: 0; z-index: 200; display: none;
    overflow-y: auto;
}
#adminPanel h2 { color: #d32f2f; text-align: center; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.admin-table th, .admin-table td { border: 1px solid #ccc; padding: 8px; text-align: center; }
.admin-table th { background: #f4f4f4; }
.close-admin { background: #d32f2f; color: #fff; border: none; padding: 10px; margin-top: 20px; width: 100%; border-radius: 5px; font-weight: bold; }

.jackpot-text {
    font-size: 30px; color: #ff0000; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    animation: shake 0.5s infinite; margin-bottom: 10px; font-weight: 900;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}