/* ===== RESPONSIVE DESIGN ===== */

/* Large tablets and small desktops */
@media (max-width: 1024px) {
    .game-title {
        font-size: 3.5rem;
    }

    .card {
        width: 70px;
        height: 105px;
    }

    .card:not(:first-child) {
        margin-left: -25px;
    }

    .card-rank {
        font-size: 1.3rem;
    }

    .card-suit {
        font-size: 1rem;
    }

    .card-suit-large {
        font-size: 2.5rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .game-title {
        font-size: 3rem;
    }

    .game-subtitle {
        font-size: 1.2rem;
    }

    .chips-value {
        font-size: 1.3rem;
    }

    .card {
        width: 60px;
        height: 90px;
    }

    .card:not(:first-child) {
        margin-left: -20px;
    }

    .card-rank {
        font-size: 1.1rem;
    }

    .card-suit {
        font-size: 0.9rem;
    }

    .card-suit-large {
        font-size: 2rem;
    }

    .hand-value {
        font-size: 1.1rem;
    }

    .game-message {
        font-size: 1.5rem;
    }

    .dealer-label,
    .player-label {
        font-size: 0.9rem;
    }

    .action-btn {
        padding: 0.7rem 1.2rem;
        font-size: 1rem;
        min-width: 80px;
    }

    .chip-btn {
        width: 55px;
        height: 55px;
    }

    .chip-value {
        font-size: 1.1rem;
    }

    .bet-action-btn {
        padding: 0.7rem 1.5rem;
        font-size: 1.1rem;
    }

    .stacked-chip {
        width: 65px;
        height: 65px;
        font-size: 1.1rem;
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .game-title {
        font-size: 2.5rem;
    }

    .game-subtitle {
        font-size: 1rem;
    }

    .welcome-content {
        padding: 1.5rem;
    }

    .start-button {
        padding: 0.8rem 2rem;
        font-size: 1.2rem;
    }

    .top-bar {
        padding: 0.8rem 1rem;
    }

    .chips-display {
        padding: 0.4rem 0.8rem;
    }

    .chips-icon {
        font-size: 1.2rem;
    }

    .chips-value {
        font-size: 1.2rem;
    }

    .control-btn {
        width: 40px;
        height: 40px;
    }

    .btn-icon {
        font-size: 1.1rem;
    }

    .table-container {
        padding: 0.5rem;
    }

    .dealer-area,
    .player-area {
        padding: 0.5rem;
        min-height: 140px;
    }

    .dealer-label,
    .player-label {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .card {
        width: 50px;
        height: 75px;
    }

    .card:not(:first-child) {
        margin-left: -18px;
    }

    .card-inner {
        padding: 0.3rem;
    }

    .card-rank {
        font-size: 0.9rem;
    }

    .card-suit {
        font-size: 0.7rem;
    }

    .card-suit-large {
        font-size: 1.5rem;
    }

    .hand-value {
        font-size: 1rem;
        min-height: 1.5rem;
        margin-bottom: 0.3rem;
    }

    .cards-container {
        min-height: 100px;
    }

    .hands-container {
        gap: 1rem;
    }

    .bet-display {
        margin-top: 0.3rem;
        padding: 0.2rem 0.6rem;
    }

    .bet-label {
        font-size: 0.8rem;
    }

    .bet-amount {
        font-size: 0.9rem;
    }

    .message-area {
        padding: 0.5rem;
        min-height: 50px;
    }

    .game-message {
        font-size: 1.2rem;
    }

    .betting-area {
        padding: 1rem;
    }

    .bet-amount-display {
        margin-bottom: 0.8rem;
    }

    .bet-label {
        font-size: 0.9rem;
    }

    .current-bet {
        font-size: 1.5rem;
    }

    .chip-selector {
        gap: 0.5rem;
        margin-bottom: 0.8rem;
    }

    .chip-btn {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }

    .chip-value {
        font-size: 1rem;
    }

    .bet-buttons {
        gap: 0.8rem;
    }

    .bet-action-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .chip-stack-display {
        min-height: 70px;
    }

    .stacked-chip {
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }

    .action-area {
        padding: 1rem;
        gap: 0.6rem;
    }

    .action-btn {
        padding: 0.6rem 1rem;
        font-size: 1rem;
        min-width: 70px;
    }

    .insurance-content {
        padding: 1.5rem;
    }

    .insurance-text {
        font-size: 1.5rem;
    }

    .insurance-cost {
        font-size: 1rem;
    }

    .insurance-btn {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }

    .modal-content {
        padding: 2rem;
        max-width: 90%;
    }

    .modal-title {
        font-size: 2rem;
    }

    .modal-message {
        font-size: 1rem;
    }

    .modal-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}

/* Very small mobile devices */
@media (max-width: 360px) {
    .game-title {
        font-size: 2rem;
    }

    .game-subtitle {
        font-size: 0.9rem;
    }

    .card {
        width: 45px;
        height: 68px;
    }

    .card:not(:first-child) {
        margin-left: -15px;
    }

    .card-rank {
        font-size: 0.8rem;
    }

    .card-suit {
        font-size: 0.6rem;
    }

    .card-suit-large {
        font-size: 1.3rem;
    }

    .game-message {
        font-size: 1rem;
    }

    .action-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
        min-width: 65px;
    }

    .chip-btn {
        width: 45px;
        height: 45px;
    }

    .chip-value {
        font-size: 0.85rem;
    }

    .bet-action-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    .chip-stack-display {
        min-height: 60px;
    }

    .stacked-chip {
        width: 55px;
        height: 55px;
        font-size: 0.9rem;
    }

    .action-area {
        padding: 0.8rem;
        gap: 0.5rem;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .welcome-content {
        padding: 1rem;
    }

    .game-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .game-subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .welcome-info {
        margin: 1rem 0;
        padding: 1rem;
    }

    .start-button {
        padding: 0.6rem 2rem;
        font-size: 1.1rem;
    }

    .top-bar {
        padding: 0.5rem 1rem;
    }

    .table-container {
        padding: 0.3rem;
    }

    .dealer-area,
    .player-area {
        padding: 0.3rem;
        min-height: 100px;
    }

    .cards-container {
        min-height: 80px;
    }

    .card {
        width: 45px;
        height: 68px;
    }

    .card:not(:first-child) {
        margin-left: -15px;
    }

    .message-area {
        min-height: 40px;
        padding: 0.3rem;
    }

    .game-message {
        font-size: 1rem;
    }

    .betting-area {
        padding: 0.8rem;
    }

    .action-area {
        padding: 0.8rem;
    }

    .action-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Safe area support for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .top-bar {
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }

    .betting-area,
    .action-area {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

/* Touch-friendly sizing */
@media (hover: none) and (pointer: coarse) {
    .action-btn,
    .bet-action-btn,
    .chip-btn,
    .control-btn,
    .insurance-btn,
    .modal-btn,
    .start-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .card-back-pattern {
        border-width: 2px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}