/* ===========================
   GLOBAL RESET & BASE STYLES
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    transition: background-color 0.5s ease, color 0.5s ease;
    overflow-x: hidden;
}

/* ===========================
   THEME DEFINITIONS
   =========================== */

/* Classic Theme */
body.theme-classic {
    --bg-primary: linear-gradient(135deg, #8B0000 0%, #DC143C 50%, #FFD700 100%);
    --bg-secondary: #FFF8DC;
    --text-primary: #2C1810;
    --text-secondary: #8B0000;
    --accent-color: #FFD700;
    --btn-primary: #DC143C;
    --btn-primary-hover: #B01030;
    --btn-secondary: #DAA520;
    --btn-secondary-hover: #B8860B;
    --btn-danger: #8B0000;
    --btn-danger-hover: #660000;
    --number-bg: #FFF8DC;
    --number-drawn: #FFD700;
    --number-border: #DAA520;
    --current-number-bg: #DC143C;
    --current-number-text: #FFD700;
    --last-bar-bg: #8B0000;
    --last-bar-text: #FFD700;
}

/* Dark Mode Theme */
body.theme-dark {
    --bg-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
    --bg-secondary: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #00d9ff;
    --accent-color: #00d9ff;
    --btn-primary: #00d9ff;
    --btn-primary-hover: #00b3d9;
    --btn-secondary: #7c3aed;
    --btn-secondary-hover: #6d28d9;
    --btn-danger: #ef4444;
    --btn-danger-hover: #dc2626;
    --number-bg: #2a2a2a;
    --number-drawn: #00d9ff;
    --number-border: #404040;
    --current-number-bg: #00d9ff;
    --current-number-text: #0a0a0a;
    --last-bar-bg: #1a1a1a;
    --last-bar-text: #00d9ff;
}

/* Ocean Theme */
body.theme-ocean {
    --bg-primary: linear-gradient(135deg, #006994 0%, #1e90ff 50%, #00ced1 100%);
    --bg-secondary: #e0f7fa;
    --text-primary: #004d61;
    --text-secondary: #006994;
    --accent-color: #00ced1;
    --btn-primary: #1e90ff;
    --btn-primary-hover: #1873cc;
    --btn-secondary: #00ced1;
    --btn-secondary-hover: #00a8aa;
    --btn-danger: #006994;
    --btn-danger-hover: #004d61;
    --number-bg: #e0f7fa;
    --number-drawn: #00ced1;
    --number-border: #00a8aa;
    --current-number-bg: #1e90ff;
    --current-number-text: #ffffff;
    --last-bar-bg: #006994;
    --last-bar-text: #e0f7fa;
}

/* Sunset Theme */
body.theme-sunset {
    --bg-primary: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #a83279 75%, #6c5ce7 100%);
    --bg-secondary: #fff5f7;
    --text-primary: #4a1a3a;
    --text-secondary: #c44569;
    --accent-color: #ff6b6b;
    --btn-primary: #ee5a6f;
    --btn-primary-hover: #d14560;
    --btn-secondary: #a83279;
    --btn-secondary-hover: #8a2863;
    --btn-danger: #c44569;
    --btn-danger-hover: #a83558;
    --number-bg: #fff5f7;
    --number-drawn: #ff6b6b;
    --number-border: #ee5a6f;
    --current-number-bg: #ee5a6f;
    --current-number-text: #ffffff;
    --last-bar-bg: #c44569;
    --last-bar-text: #fff5f7;
}

/* Forest Theme */
body.theme-forest {
    --bg-primary: linear-gradient(135deg, #2d5016 0%, #3d6e1f 50%, #87a922 100%);
    --bg-secondary: #f0f4e8;
    --text-primary: #1e3a0f;
    --text-secondary: #3d6e1f;
    --accent-color: #87a922;
    --btn-primary: #3d6e1f;
    --btn-primary-hover: #2d5016;
    --btn-secondary: #87a922;
    --btn-secondary-hover: #6d8a1b;
    --btn-danger: #8b4513;
    --btn-danger-hover: #6d350f;
    --number-bg: #f0f4e8;
    --number-drawn: #87a922;
    --number-border: #6d8a1b;
    --current-number-bg: #3d6e1f;
    --current-number-text: #f0f4e8;
    --last-bar-bg: #2d5016;
    --last-bar-text: #f0f4e8;
}

/* Neon Theme */
body.theme-neon {
    --bg-primary: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
    --bg-secondary: #0f0f0f;
    --text-primary: #ffffff;
    --text-secondary: #ff00ff;
    --accent-color: #00ffff;
    --btn-primary: #ff00ff;
    --btn-primary-hover: #cc00cc;
    --btn-secondary: #00ffff;
    --btn-secondary-hover: #00cccc;
    --btn-danger: #ff0066;
    --btn-danger-hover: #cc0052;
    --number-bg: #1a1a2e;
    --number-drawn: #00ffff;
    --number-border: #ff00ff;
    --current-number-bg: #ff00ff;
    --current-number-text: #0f0f0f;
    --last-bar-bg: #1a1a2e;
    --last-bar-text: #00ffff;
}

/* Minimal Theme */
body.theme-minimal {
    --bg-primary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    --bg-secondary: #ffffff;
    --text-primary: #212529;
    --text-secondary: #495057;
    --accent-color: #6c757d;
    --btn-primary: #212529;
    --btn-primary-hover: #000000;
    --btn-secondary: #6c757d;
    --btn-secondary-hover: #5a6268;
    --btn-danger: #495057;
    --btn-danger-hover: #343a40;
    --number-bg: #ffffff;
    --number-drawn: #6c757d;
    --number-border: #dee2e6;
    --current-number-bg: #212529;
    --current-number-text: #ffffff;
    --last-bar-bg: #343a40;
    --last-bar-text: #ffffff;
}

/* Party Theme */
body.theme-party {
    --bg-primary: linear-gradient(135deg, #ff0080 0%, #ff8c00 20%, #ffd700 40%, #00ff00 60%, #0080ff 80%, #8000ff 100%);
    --bg-secondary: #fff0f5;
    --text-primary: #4b0082;
    --text-secondary: #ff1493;
    --accent-color: #ff69b4;
    --btn-primary: #ff1493;
    --btn-primary-hover: #db1278;
    --btn-secondary: #ffd700;
    --btn-secondary-hover: #dbb700;
    --btn-danger: #ff4500;
    --btn-danger-hover: #db3800;
    --number-bg: #fff0f5;
    --number-drawn: #ff69b4;
    --number-border: #ff1493;
    --current-number-bg: linear-gradient(135deg, #ff0080 0%, #ffd700 50%, #0080ff 100%);
    --current-number-text: #ffffff;
    --last-bar-bg: linear-gradient(90deg, #ff0080 0%, #ffd700 50%, #0080ff 100%);
    --last-bar-text: #ffffff;
}

/* Christmas Theme */
body.theme-christmas {
    --bg-primary: radial-gradient(circle at 20% 20%, #1d5c3a 0%, #0f2f1e 45%, #0c1f14 100%);
    --bg-secondary: #f8f2e8;
    --text-primary: #1f3d2a;
    --text-secondary: #b1182d;
    --accent-color: #d9a441;
    --btn-primary: #b1182d;
    --btn-primary-hover: #8f0f23;
    --btn-secondary: #1f3d2a;
    --btn-secondary-hover: #173020;
    --btn-danger: #8f0f23;
    --btn-danger-hover: #6b0b1b;
    --number-bg: #fffdf8;
    --number-drawn: #d9a441;
    --number-border: #b1182d;
    --current-number-bg: linear-gradient(135deg, #b1182d 0%, #d9a441 60%, #1f3d2a 100%);
    --current-number-text: #fffdf8;
    --last-bar-bg: linear-gradient(90deg, #0f2f1e 0%, #1f3d2a 50%, #b1182d 100%);
    --last-bar-text: #f8f2e8;
}

/* Christmas Decorations */
.christmas-garland {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: none;
    background: repeating-linear-gradient(
        135deg,
        #b1182d 0px,
        #b1182d 12px,
        #d9a441 12px,
        #d9a441 24px,
        #1f3d2a 24px,
        #1f3d2a 36px,
        #f8f2e8 36px,
        #f8f2e8 48px
    );
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    z-index: 1200;
}

.christmas-garland.top {
    top: 0;
}

.christmas-garland.bottom {
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
    z-index: 1201;
}

.snowflakes {
    display: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1800;
}

.snowflake {
    position: absolute;
    top: -10%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0.8;
    animation: snow 12s linear infinite;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.snowflake:nth-child(1) { left: 5%; animation-duration: 11s; animation-delay: 0s; transform: scale(0.8); }
.snowflake:nth-child(2) { left: 15%; animation-duration: 13s; animation-delay: 1s; transform: scale(1.1); }
.snowflake:nth-child(3) { left: 25%; animation-duration: 10s; animation-delay: 2s; transform: scale(0.9); }
.snowflake:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 0.5s; transform: scale(1.2); }
.snowflake:nth-child(5) { left: 45%; animation-duration: 12s; animation-delay: 1.5s; transform: scale(0.85); }
.snowflake:nth-child(6) { left: 55%; animation-duration: 11.5s; animation-delay: 0.2s; transform: scale(1); }
.snowflake:nth-child(7) { left: 65%; animation-duration: 13.5s; animation-delay: 1.8s; transform: scale(1.15); }
.snowflake:nth-child(8) { left: 75%; animation-duration: 12.5s; animation-delay: 0.7s; transform: scale(0.95); }
.snowflake:nth-child(9)  { left: 85%; animation-duration: 14.5s; animation-delay: 1.1s; transform: scale(1.05); }
.snowflake:nth-child(10) { left: 20%; animation-duration: 15s; animation-delay: 2.3s; transform: scale(1.2); }
.snowflake:nth-child(11) { left: 60%; animation-duration: 9.5s; animation-delay: 0.9s; transform: scale(0.75); }
.snowflake:nth-child(12) { left: 90%; animation-duration: 11.8s; animation-delay: 1.4s; transform: scale(1); }

body.theme-christmas .christmas-garland,
body.theme-christmas .snowflakes {
    display: block;
}

/* ===========================
   CONTAINER & LAYOUT
   =========================== */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===========================
   HEADER
   =========================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.title {
    font-size: 2.5rem;
    color: var(--text-secondary);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-selector label {
    font-weight: 600;
    color: var(--text-primary);
}

.theme-dropdown {
    padding: 10px 15px;
    font-size: 1rem;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-dropdown:hover {
    background: var(--accent-color);
    color: var(--bg-secondary);
}

.theme-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ===========================
   CURRENT NUMBER DISPLAY
   =========================== */
.current-number-section {
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.current-number-label {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.current-number {
    font-size: 8rem;
    font-weight: bold;
    color: var(--current-number-text);
    background: var(--current-number-bg);
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.current-number.reveal {
    animation: numberReveal 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===========================
   CONTROL PANEL
   =========================== */
.control-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px;
    background: var(--bg-secondary);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.controls-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.timer-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timer-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.timer-input {
    width: 80px;
    padding: 10px;
    font-size: 1rem;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: center;
    transition: all 0.3s ease;
}

.timer-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-small {
    padding: 8px 14px;
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--btn-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover);
}

.btn-secondary {
    background: var(--btn-secondary);
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-hover);
}

.btn-danger {
    background: var(--btn-danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: var(--btn-danger-hover);
}

/* ===========================
   CARDS & WINNERS SUMMARY
   =========================== */
.cards-winners-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    align-items: stretch;
}

.stat-card {
    background: var(--number-bg);
    border: 2px solid var(--number-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.stat-card.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.stat-card.clickable:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.stat-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
}

.winners-btn {
    justify-self: end;
}

/* ===========================
   NUMBER BOARD
   =========================== */
.number-board-section {
    padding: 25px;
    background: var(--bg-secondary);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.section-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.number-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 10px;
    max-width: 100%;
}

.number-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--number-bg);
    color: var(--text-primary);
    border: 2px solid var(--number-border);
    border-radius: 10px;
    cursor: default;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.number-cell.drawn {
    background: var(--number-drawn);
    color: white;
    transform: scale(0.95);
    opacity: 0.7;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.number-cell:hover {
    transform: scale(1.05);
}

.number-cell.drawn:hover {
    transform: scale(0.95);
}

/* ===========================
   LAST 4 NUMBERS BAR
   =========================== */
.last-numbers-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--last-bar-bg);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.last-numbers-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.last-numbers-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--last-bar-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.last-numbers {
    display: flex;
    gap: 15px;
}

.last-number {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 3px solid var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.last-number.active {
    animation: pulse 0.5s ease;
}

.cards-winners-section.footer-version {
    max-width: 400px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    padding: 8px;
}

.cards-winners-section.footer-version .winners-btn {
    justify-self: stretch;
}

.cards-winners-section.footer-version .stat-card {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.cards-winners-section.footer-version .stat-label {
    color: var(--last-bar-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cards-winners-section.footer-version .stat-value {
    color: var(--last-bar-text);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ===========================
   CARDS PREVIEW MODAL
   =========================== */
.cards-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1900;
    padding: 12px;
}

.cards-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.cards-panel {
    position: relative;
    background: var(--bg-secondary);
    width: min(1400px, 98vw);
    max-height: 92vh;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1;
}

.cards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cards-actions {
    display: flex;
    gap: 10px;
}

.cards-preview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 20px;
    max-height: 76vh;
    overflow-y: auto;
}

.card-preview-item {
    border: 2px solid var(--number-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--number-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-preview-title {
    font-weight: 800;
    color: var(--text-secondary);
}

.card-preview-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(38px, 1fr));
    gap: 10px;
}

.card-preview-grid .preview-cell {
    font-size: 1.2rem;
    font-weight: 800;
}

/* ===========================
   WINNERS MODAL
   =========================== */
.hidden {
    display: none !important;
}

.winners-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.winners-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.winners-panel {
    position: relative;
    background: var(--bg-secondary);
    width: min(900px, 92vw);
    max-height: 80vh;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
}

.winners-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.winners-list {
    max-height: 45vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.winner-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--number-bg);
    border: 2px solid var(--number-border);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.winner-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.winner-title {
    font-weight: 800;
    color: var(--text-secondary);
}

.winner-meta {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.winner-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-primary);
    border: 2px dashed var(--number-border);
    border-radius: 12px;
}

.winner-preview {
    border-top: 1px solid var(--number-border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.winner-preview h4 {
    color: var(--text-secondary);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(26px, 1fr));
    gap: 6px;
}

.preview-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px dashed var(--number-border);
    border-radius: 8px;
    font-weight: 800;
    color: var(--text-secondary);
    font-size: 0.95rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.preview-cell.filled {
    background: var(--number-drawn);
    color: #fff;
    border-style: solid;
}

.card-preview-grid {
    grid-template-columns: repeat(9, minmax(28px, 1fr));
    gap: 8px;
}

.card-preview-grid .preview-cell {
    font-size: 1.05rem;
}

.winner-preview .preview-grid {
    grid-template-columns: repeat(9, minmax(40px, 1fr));
    gap: 12px;
    justify-content: center;
}

.winner-preview .preview-cell {
    font-size: 1.2rem;
    border-radius: 12px;
    font-weight: 800;
}

@keyframes snow {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(50vh) translateX(15px) rotate(180deg);
    }
    100% {
        transform: translateY(110vh) translateX(-10px) rotate(360deg);
        opacity: 0.3;
    }
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes numberReveal {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Add spacing for fixed bottom bar */
body {
    padding-bottom: 120px;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */
@media (max-width: 1200px) {
    .number-board {
        grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .title {
        font-size: 2rem;
    }

    .header {
        flex-direction: column;
        text-align: center;
    }

    .current-number {
        font-size: 6rem;
        width: 150px;
        height: 150px;
    }

    .current-number-label {
        font-size: 1.2rem;
    }

    .control-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .controls-group {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .winners-btn {
        justify-self: stretch;
        width: 100%;
    }

    .timer-group {
        flex-direction: column;
        align-items: stretch;
    }

    .timer-input {
        width: 100%;
    }

    .number-board {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        gap: 8px;
    }

    .number-cell {
        font-size: 1.2rem;
    }

    .last-numbers-bar {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    .last-numbers-left {
        flex-direction: column;
    }

    .last-numbers {
        gap: 10px;
    }

    .last-number {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .last-numbers-label {
        font-size: 1.1rem;
    }

    .winners-panel {
        width: 94vw;
    }

    .cards-panel {
        width: 94vw;
    }

    .cards-winners-section.footer-version {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 1.5rem;
    }

    .current-number {
        font-size: 5rem;
        width: 120px;
        height: 120px;
    }

    .number-board {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        gap: 6px;
    }

    .number-cell {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.4rem;
    }
}