/* ============================================
   Responsive Design - All Media Queries
   ============================================ */

/* ============================================
   Tablet & Small Desktop (max-width: 600px)
   ============================================ */

@media (max-width: 600px) {
    :root {
        --space-xs: 0.2rem;
        --space-sm: 0.4rem;
        --space-md: 0.6rem;
        --space-lg: 0.85rem;
        --space-xl: 1.25rem;
    }

    #app {
        padding: var(--space-sm);
    }

    h1 {
        font-size: 2.5rem !important;
    }

    .scoreboard {
        border-radius: var(--radius-md);
    }

    .score-box {
        padding: 0.5rem 0.25rem;
    }

    /* NO border-radius on score boxes - parent overflow:hidden handles corners */

    .player-label {
        font-size: 0.55rem;
        letter-spacing: 0;
    }

    .score {
        font-size: 2.5rem;
    }

    .game-info {
        padding: 0.25rem 0.5rem;
        min-width: 70px;
    }

    .cards-value {
        font-size: 1.75rem;
    }

    .cards-label,
    .half-indicator {
        font-size: 0.5rem;
    }

    /* Cards use same styling as desktop - no mobile overrides */

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    .help-btn {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .tutorial-container {
        padding: 1.5rem;
    }

    .slide-icon {
        font-size: 3rem;
    }

    .slide-title {
        font-size: 1.5rem;
    }

    /* Mobile Start Screen */
    .start-form {
        padding: 1rem;
        max-width: 100%;
    }

    .player-identity {
        margin-bottom: 0.5rem;
    }

    .continue-game-banner {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .btn-play-ball {
        padding: 0.875rem 1.5rem;
        margin-bottom: 0.75rem;
    }

    .menu-row {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .menu-card {
        padding: 0.75rem 0.5rem;
    }

    .menu-card-icon {
        font-size: 1.5rem;
    }

    .menu-card-label {
        font-size: 0.8rem;
    }

    .menu-utils {
        margin-bottom: 0.5rem;
    }

    .menu-util-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

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

    /* Game board spacing */
    .game-board {
        gap: var(--space-xs);
    }

    .play-area {
        min-height: 160px;
        padding: var(--space-sm);
    }

    .hand-area {
        padding: var(--space-xs);
    }

    /* Overtime screen mobile */
    .overtime-title {
        font-size: 2.5rem;
    }

    .overtime-score-value {
        font-size: 3rem;
    }

    .overtime-scores {
        gap: var(--space-lg);
    }

    /* Discard screen mobile */
    .discard-title {
        font-size: 1.6rem;
    }

    .discard-badge {
        width: 60px;
        height: 60px;
    }

    .discard-icon {
        font-size: 1.8rem;
    }

    .discard-hand {
        gap: 0.5rem;
        max-width: 340px;
    }

    /* Discard cards use same styling as desktop - no mobile overrides */
}

/* ============================================
   Mobile Phones (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    /* Hand layout - 3/2 arrangement */
    .hand,
    .hand-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        max-width: 300px;
        margin: 0 auto;
    }

    /* Cards use same styling as desktop - no mobile overrides */

    /* Tip-off screen - compact for small phones */
    #opening-roll-screen {
        padding: 1rem;
    }

    #opening-roll-screen h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .roll-player > span:first-child {
        font-size: 1rem;
    }

    .roll-vs {
        font-size: 1.25rem;
        margin: 0.25rem 0;
    }

    .roll-total {
        font-size: 1.25rem;
    }

    .roll-winner {
        font-size: 1rem;
        margin: 0.75rem 0;
    }

    .roll-dice {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .roll-dice .die {
        width: 46px !important;
        height: 46px !important;
        padding: 5px !important;
        border-width: 3px;
    }

    .roll-dice .die .pip {
        width: 8px;
        height: 8px;
    }

    /* Halftime screen fixes */
    #halftime-screen {
        padding: 1rem;
    }

    #halftime-screen h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem;
    }

    .halftime-scores {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .halftime-score-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .halftime-score-item span:first-child {
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--text-medium);
    }

    .halftime-score-value {
        font-family: var(--font-display);
        font-size: 2.5rem;
        line-height: 1;
    }

    .halftime-score-item:first-child .halftime-score-value {
        color: var(--primary-orange);
    }

    .halftime-score-item:last-child .halftime-score-value {
        color: var(--accent-cyan);
    }

    .halftime-vs {
        font-family: var(--font-display);
        font-size: 1.25rem;
        color: var(--text-medium);
    }

    /* Stats table - mobile adjustments */
    .halftime-stats,
    .final-stats {
        padding: 0.75rem;
    }

    .halftime-stats h2,
    .final-stats h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }

    .stats-table {
        gap: 0.25rem;
    }

    .stats-header,
    .stats-row {
        gap: 0.25rem;
    }

    .stats-name {
        font-size: 0.85rem;
    }

    .stat-label {
        font-size: 0.75rem;
        min-width: 32px;
    }

    .stat-value {
        font-size: 0.8rem;
    }

    .stats-row {
        padding: 0.2rem 0;
    }

    /* Game over screen fixes */
    #game-over-screen {
        padding: 1rem;
    }

    #game-over-screen h1 {
        font-size: 2rem !important;
    }

    .final-score {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .final-score-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .final-score-item span:first-child {
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--text-medium);
    }

    .final-score-value {
        font-family: var(--font-display);
        font-size: 2.5rem;
        line-height: 1;
    }

    .final-score-item:first-child .final-score-value {
        color: var(--primary-orange);
    }

    .final-score-item:last-child .final-score-value {
        color: var(--accent-cyan);
    }

    .final-score .vs,
    .final-score-vs {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--text-medium);
    }

    .winner-message {
        font-size: 1.5rem !important;
        margin-bottom: 1rem;
    }

    /* Animation wrapper full-width on small screens */
    .animation-wrapper {
        width: calc(100% - 1rem);
    }

    .shot-animation::after {
        font-size: 1.5rem !important;
    }

    /* Mobile Main Menu - Remove white box on small phones */
    .start-form {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.5rem;
    }

    /* Name input needs visible styling since parent is transparent */
    .name-input-wrapper {
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--radius-sm);
        padding: 0.25rem;
    }

    /* Tighter vertical spacing */
    .player-identity {
        margin-bottom: 0.25rem;
    }

    .btn-play-ball {
        margin-bottom: 0.5rem;
    }

    .menu-row {
        margin-bottom: 0.5rem;
        gap: 0.4rem;
    }

    .menu-utils {
        margin-bottom: 0.25rem;
    }

    /* Title styling for transparent background */
    #start-screen h1 {
        text-shadow:
            3px 3px 0 var(--primary-orange),
            5px 5px 0 rgba(45, 27, 14, 0.2);
    }
}

/* ============================================
   Very Small Phones (max-width: 400px)
   ============================================ */

@media (max-width: 400px) {
    .discard-hand {
        max-width: 310px;
    }

    /* Discard cards use same styling as desktop - no mobile overrides */

    .discard-title {
        font-size: 1.3rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .help-btn,
    .toast,
    .animation-overlay {
        display: none !important;
    }
}