:root {
    --loto-cell-height: 1.6rem;
    --loto-font-size: 0.8rem;
    --loto-content-size: 1.6rem;
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media (min-width: 1024px) {
    :root {
        --loto-cell-height: 55px;
        --loto-font-size: 1.5rem;
        --loto-content-size: 45px;
    }
}

.loto-number { height: var(--loto-cell-height); font-size: var(--loto-font-size); }
.loto-table { border-spacing: 2px; table-layout: fixed; border-collapse: separate; }

.loto-choosed .number-content {
    background: #ef4444 !important;
    color: white !important;
    width: var(--loto-content-size);
    height: var(--loto-content-size);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; margin: 0 auto;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from { transform: scale(0.5); } to { transform: scale(1); } }

.main-number-circle {
    background: var(--primary-gradient);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 6px solid rgba(255,255,255,0.2);
}
.loto-list-choosed > div:first-child {
    background: var(--primary-gradient) !important;
    color: white !important;
    position: relative;
    z-index: 10;
    animation: new-number-pulse 1s infinite alternate;
}
@keyframes new-number-pulse {
    from {
        transform: scale(0.9);
        box-shadow: 0 0 5px rgba(118, 75, 162, 0.4);
    }
    to {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(118, 75, 162, 0.8), 0 0 5px #fbbf24;
    }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.role-hidden { display: none !important; }
.row-waiting {
    animation: row-glow 1.5s infinite alternate;
    background-color: rgba(255, 249, 196, 0.5) !important;
}

@keyframes row-glow {
    from { box-shadow: inset 0 0 5px rgba(234, 179, 8, 0.2); }
    to { box-shadow: inset 0 0 20px rgba(234, 179, 8, 0.5); }
}
.row-winner {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.5), rgba(74, 222, 128, 0.2)) !important;
    position: relative;
    z-index: 20;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8);
    transition: all 0.5s ease;
}
.row-winner td {
    border-color: #22c55e !important;
}
.row-winner td.loto-choosed .number-content {
    box-shadow: 0 0 20px #fff, 0 0 10px #fbbf24;
    border: 3px solid #fff;
    transform: scale(1.1);
}

@keyframes row-win-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-2px); }
}
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
}
:fullscreen body {
    background-color: #f8fafc;
}
#btn-fullscreen:hover {
    background-color: #6366f1;
    color: white !important;
    border-color: #4f46e5;
}