/* ========================================
   MOBILE ADAPTATION FIXES
   Telegram Mini App Optimized
   ======================================== */

/* Base responsive font sizes */
:root {
    font-size: 14px;
}

@media (min-width: 768px) {
    :root {
        font-size: 16px;
    }
}

/* ========================================
   GAME GRID - Responsive Tiles
   ======================================== */

@media (max-width: 600px) {
    .number-grid {
        gap: clamp(4px, 1.5vw, 8px) !important;
    }

    .number-btn {
        min-height: clamp(44px, 8vw, 48px) !important;
        max-height: clamp(44px, 8vw, 48px) !important;
        font-size: clamp(14px, 3.5vw, 18px) !important;
        border-radius: clamp(10px, 2vw, 14px) !important;
    }
}

/* Smaller phones */
@media (max-width: 375px) {
    .number-grid {
        gap: 4px !important;
    }

    .number-btn {
        min-height: 40px !important;
        max-height: 40px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   BUTTONS - Responsive Sizing
   ======================================== */

@media (max-width: 600px) {
    /* Bet buttons */
    .bet-btn {
        min-height: clamp(44px, 10vw, 50px) !important;
        min-width: clamp(44px, 10vw, 50px) !important;
        padding: clamp(10px, 2.5vw, 14px) clamp(14px, 3.5vw, 18px) !important;
        font-size: clamp(13px, 3vw, 16px) !important;
        border-radius: clamp(10px, 2vw, 12px) !important;
        gap: clamp(4px, 1vw, 6px) !important;
    }

    /* Action buttons */
    .action-btn {
        min-height: clamp(44px, 10vw, 50px) !important;
        padding: clamp(12px, 3vw, 16px) clamp(18px, 4.5vw, 24px) !important;
        font-size: clamp(14px, 3.5vw, 18px) !important;
        border-radius: clamp(10px, 2vw, 14px) !important;
    }

    /* Play button */
    .play-btn {
        min-height: clamp(50px, 12vw, 68px) !important;
        font-size: clamp(16px, 4vw, 22px) !important;
        padding: clamp(14px, 3.5vw, 20px) clamp(24px, 6vw, 32px) !important;
        border-radius: clamp(12px, 2.5vw, 16px) !important;
    }
}

/* ========================================
   TEXT - Responsive Typography
   ======================================== */

@media (max-width: 600px) {
    .balance-value {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    .balance-label {
        font-size: clamp(12px, 3vw, 14px) !important;
    }

    .section-title {
        font-size: clamp(16px, 4vw, 22px) !important;
        margin-bottom: clamp(12px, 3vw, 16px) !important;
    }

    .selection-info {
        font-size: clamp(12px, 3vw, 14px) !important;
    }
}

/* ========================================
   CONTAINERS - Padding & Spacing
   ======================================== */

@media (max-width: 600px) {
    .game-container {
        padding: clamp(8px, 2vw, 12px) !important;
    }

    .game-header {
        padding: clamp(12px, 3vw, 16px) !important;
        border-radius: clamp(12px, 2.5vw, 16px) !important;
        margin-bottom: clamp(10px, 2.5vw, 12px) !important;
    }

    .game-main {
        padding: clamp(12px, 3vw, 16px) !important;
        border-radius: clamp(12px, 2.5vw, 16px) !important;
        margin-bottom: clamp(10px, 2.5vw, 12px) !important;
    }
}

/* ========================================
   TUTORIAL OVERLAY - Responsive
   ======================================== */

@media (max-width: 600px) {
    .tutorial-overlay {
        padding: clamp(10px, 2.5vw, 20px) !important;
    }

    .tutorial-step {
        padding: clamp(16px, 4vw, 24px) !important;
        border-radius: clamp(12px, 2.5vw, 20px) !important;
        max-width: calc(100% - clamp(20px, 5vw, 40px)) !important;
    }

    .tutorial-step h3 {
        font-size: clamp(16px, 4vw, 20px) !important;
        margin-bottom: clamp(10px, 2.5vw, 12px) !important;
    }

    .tutorial-step p {
        font-size: clamp(13px, 3.2vw, 16px) !important;
        margin-bottom: clamp(12px, 3vw, 20px) !important;
    }

    .tutorial-btn {
        padding: clamp(10px, 2.5vw, 12px) clamp(16px, 4vw, 24px) !important;
        font-size: clamp(13px, 3.2vw, 16px) !important;
        border-radius: clamp(8px, 2vw, 12px) !important;
    }

    .tutorial-highlight {
        border-width: clamp(2px, 0.5vw, 3px) !important;
        border-radius: clamp(12px, 2.5vw, 15px) !important;
    }
}

/* ========================================
   DRAWING OVERLAY - Responsive
   ======================================== */

@media (max-width: 600px) {
    .drawing-content {
        padding: clamp(16px, 4vw, 24px) !important;
        border-radius: clamp(12px, 2.5vw, 20px) !important;
        max-width: calc(100% - clamp(20px, 5vw, 40px)) !important;
    }

    .drawing-title {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        margin-bottom: clamp(12px, 3vw, 20px) !important;
    }

    .drawn-numbers {
        gap: clamp(6px, 1.5vw, 8px) !important;
    }

    .drawn-number {
        width: clamp(44px, 10vw, 48px) !important;
        height: clamp(44px, 10vw, 48px) !important;
        font-size: clamp(16px, 4vw, 18px) !important;
        border-radius: clamp(10px, 2vw, 12px) !important;
    }
}

/* ========================================
   JACKPOT & STATS - Responsive
   ======================================== */

@media (max-width: 600px) {
    .jackpot-display {
        padding: clamp(12px, 3vw, 20px) !important;
        border-radius: clamp(12px, 2.5vw, 20px) !important;
    }

    .jackpot-icon {
        font-size: clamp(36px, 9vw, 48px) !important;
    }

    .jackpot-label {
        font-size: clamp(11px, 2.7vw, 14px) !important;
    }

    .jackpot-amount {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    #playerStats {
        padding: clamp(12px, 3vw, 20px) !important;
        gap: clamp(10px, 2.5vw, 15px) !important;
    }

    .stat-item {
        padding: clamp(10px, 2.5vw, 15px) !important;
        font-size: clamp(12px, 3vw, 14px) !important;
    }
}

/* ========================================
   HOTKEYS HINT - Responsive
   ======================================== */

@media (max-width: 600px) {
    .hotkeys-hint {
        padding: clamp(12px, 3vw, 20px) !important;
        border-radius: clamp(10px, 2vw, 16px) !important;
        max-width: calc(100% - clamp(20px, 5vw, 40px)) !important;
    }

    .hotkeys-hint-title {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
    }

    .hotkey-item {
        padding: clamp(8px, 2vw, 10px) 0 !important;
    }

    .hotkey {
        padding: clamp(3px, 0.8vw, 4px) clamp(8px, 2vw, 10px) !important;
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }
}

/* ========================================
   ANIMATIONS - Relative Scaling
   ======================================== */

@media (max-width: 600px) {
    /* Number button glow */
    .number-btn.selected {
        box-shadow: 
            0 0 clamp(16px, 4vw, 24px) rgba(255, 215, 0, 0.6),
            0 0 clamp(32px, 8vw, 48px) rgba(255, 215, 0, 0.4) !important;
    }

    /* Button glow */
    .bet-btn.active,
    .action-btn:hover {
        box-shadow: 0 0 clamp(12px, 3vw, 20px) rgba(157, 78, 221, 0.4) !important;
    }

    /* Play button glow */
    .play-btn {
        box-shadow: 0 0 clamp(20px, 5vw, 40px) rgba(255, 215, 0, 0.5) !important;
    }

    .play-btn:hover:not(:disabled) {
        box-shadow: 0 0 clamp(30px, 7.5vw, 60px) rgba(255, 215, 0, 0.8) !important;
    }
}

/* ========================================
   SCALE ANIMATIONS - Relative
   ======================================== */

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .number-btn.selected {
        transform: scale(1.05) !important; /* Relative, not fixed */
    }

    .bet-btn.active {
        transform: scale(1.03) !important;
    }

    .play-btn:hover:not(:disabled) {
        transform: translateY(-2px) scale(1.03) !important;
    }
}

/* ========================================
   SAFE AREA SUPPORT
   ======================================== */

@supports (padding: max(0px)) {
    @media (max-width: 600px) {
        .game-container {
            padding-top: max(10px, env(safe-area-inset-top));
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }

        .action-buttons {
            padding-bottom: max(10px, env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 600px) and (orientation: landscape) {
    .game-container {
        padding: 6px !important;
    }

    .game-header {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .game-main {
        padding: 12px !important;
    }

    .number-grid {
        gap: 4px !important;
    }

    .number-btn {
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 13px !important;
    }

    .balance-value {
        font-size: 18px !important;
    }

    .section-title {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
}