/*
 * LAYOUT CONFIGURATION
 * ====================
 * Aspect ratio threshold for team layout switching: 4/3 (1.33)
 * 
 * Team panels are duplicated in HTML:
 * - .team-panel-portrait: In .game-header (shown in portrait mode)
 * - .team-panel-landscape: In .game-area (shown in landscape mode)
 * 
 * LANDSCAPE MODE (>= 4/3 aspect ratio):
 *   - Turn indicator at top (full width)
 *   - Teams on LEFT and RIGHT sides of grid
 *   - Layout: [Turn]
 *             [Team] [Grid] [Team]
 * 
 * PORTRAIT MODE (< 4/3 aspect ratio):
 *   - Teams in horizontal TOP ROW with turn indicator in center
 *   - Layout: [Red Team] [Turn/Clue] [Blue Team]
 *   -         [Grid - Full Width]
 * 
 * To adjust threshold: Change 4/3 in @media queries below
 */

/* ========================================================================
   TURN INDICATION ENHANCEMENTS (WT-7)
   ======================================================================== */

/* Team panel state classes - proper state-based architecture */
/* Base styles without box-shadow/border - these are applied via state classes */

/* Inactive team - default appearance */
.team.team-inactive {
    box-shadow: var(--shadow-base);
    border: 3px solid transparent;
}

/* Active red team - glowing red (reduced intensity) */
.team.team-active-red {
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
    border: 3px solid var(--color-team-red);
}

/* Active blue team - glowing blue (reduced intensity) */
.team.team-active-blue {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.2);
    border: 3px solid var(--color-team-blue);
}

/* ========================================================================
   EXISTING STYLES (unchanged)
   ======================================================================== */

/* Game UI - inherit height from main, no scroll */
#game-ui {
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from 100vh to inherit from main */
    overflow: hidden;
    width: 100%;
}

#game-ui .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-xs);
    overflow: hidden;
    gap: var(--spacing-xs);
}

#game-ui h2 {
    font-size: var(--font-size-2xl);
    margin: 0;
    flex-shrink: 0;
}

/* Game header */
.game-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-xs);
}

/* Turn indicator */
.turn-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex-shrink: 0;
    min-height: 70px;
    padding: var(--spacing-xs) 0;
    width: 100%;
}

#current-turn {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#turn-text {
    margin-bottom: var(--spacing-xs);
}

.arrow {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-none);
}

.arrow-left::before { content: "←"; }
.arrow-right::before { content: "→"; }

/* Color based on turn */
.turn-red #turn-text, .turn-red .arrow { color: var(--color-team-red); }
.turn-blue #turn-text, .turn-blue .arrow { color: var(--color-team-blue); }

/* Clue display - single element approach with consistent height */
#current-clue.clue {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-xs);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-base);
    transition: color var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

/* Waiting for clue state */
#current-clue.waiting {
    opacity: 0.7;
    font-style: italic;
    color: var(--color-text-secondary);
    background-color: transparent;
}

/* Clue is active state - no yellow background */
#current-clue.active {
    opacity: 1;
    font-style: normal;
    color: var(--color-text-primary);
    background-color: transparent;
}

/* Emphasize word/number in active clue */
#clue-word {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    margin-left: var(--spacing-xs);
}

/* Game over message */
#game-over-message {
    text-align: center;
    margin: var(--spacing-xs) 0;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

/* Main game area */
.game-area {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Team panels */
.team-panel-left,
.team-panel-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.team {
    background: var(--color-bg-primary);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-lg);
    /* box-shadow and border are applied via state classes */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    transition: box-shadow 0.4s ease-in-out, border 0.4s ease-in-out;
}

.team h3 {
    text-align: center;
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

#red-team-players, #blue-team-players,
#red-team-players-portrait, #blue-team-players-portrait {
    list-style: none;
    font-size: var(--font-size-sm);
    text-align: center;
    width: 100%;
    padding: 0;
    margin: var(--spacing-xs) 0;
}

#red-team-players li, #blue-team-players li,
#red-team-players-portrait li, #blue-team-players-portrait li {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) 0;
}

.spymaster-mark {
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-xs);
    opacity: 0.8;
    font-size: var(--font-size-xs);
}

.remaining-cards {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

#red-remaining, #red-remaining-portrait {
    color: var(--color-team-red);
}

#blue-remaining, #blue-remaining-portrait {
    color: var(--color-team-blue);
}

/* Game grid - 5x5 that adapts to available space */
.game-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: var(--spacing-xs);
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    min-height: 0;
    min-width: 0;
}

/* ========================================================================
   CARD STYLING - WT-14: Dynamic uniform font sizing + dynamic padding
   ======================================================================== */
.card {
    background-color: var(--color-card-default);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    text-align: center;
    /* Padding dynamically set by JavaScript (scales with font size) - minimal fallback */
    padding: 4px;
    transition: all var(--duration-normal) var(--easing-standard);
    position: relative;
    /* Font size dynamically set by JavaScript - base fallback */
    font-size: 1rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    /* Single line - no wrapping (WT-14) */
    white-space: nowrap;
    text-overflow: ellipsis;
    aspect-ratio: auto;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-raised);
}

/* Revealed card colors - applied by JavaScript based on card type */
.card.neutral { background-color: var(--color-warning); }
.card.assassin { background-color: var(--color-card-assassin); }
.card.red-team { background-color: var(--color-team-red); }
.card.blue-team { background-color: var(--color-team-blue); }

/* Bottom controls */
#game-ui .bottom-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1vw, 16px);
    flex-wrap: nowrap;
    padding: var(--spacing-sm);
    background-color: var(--color-bg-tertiary);
    border-radius: var(--border-radius-lg);
    flex-shrink: 0;
    min-height: 50px;
}

#game-ui .spymaster-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(4px, 0.8vw, 10px);
    flex-wrap: nowrap;
}

#game-ui .spymaster-controls label {
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    font-weight: var(--font-weight-medium);
    margin: 0;
    white-space: nowrap;
}

#game-ui .spymaster-controls input[type="text"] {
    padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    border: var(--border-width) solid var(--color-border-dark);
    border-radius: var(--border-radius-md);
    min-width: 70px;
    width: clamp(70px, 15vw, 150px);
}

#game-ui .number-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
    flex-wrap: nowrap;
}

#game-ui .spymaster-controls button[id="decrease-number"],
#game-ui .spymaster-controls button[id="increase-number"] {
    width: clamp(28px, 5vw, 36px);
    height: clamp(28px, 5vw, 36px);
    font-size: clamp(1rem, 2vw, 1.4rem);
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
    line-height: var(--line-height-none);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
}

#game-ui .spymaster-controls button[id="decrease-number"]:hover,
#game-ui .spymaster-controls button[id="increase-number"]:hover {
    background-color: var(--color-primary-dark);
}

/* Disabled state for increase/decrease buttons */
#game-ui .spymaster-controls button[id="decrease-number"]:disabled,
#game-ui .spymaster-controls button[id="increase-number"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--color-primary);
}

#game-ui .spymaster-controls button[id="decrease-number"]:disabled:hover,
#game-ui .spymaster-controls button[id="increase-number"]:disabled:hover {
    background-color: var(--color-primary);
}

#game-ui .clue-number-display {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: var(--font-weight-bold);
    min-width: 20px;
    text-align: center;
}

#game-ui #give-clue {
    padding: clamp(5px, 1.2vw, 9px) clamp(10px, 2vw, 18px);
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    background-color: var(--color-success);
    border-radius: var(--border-radius-md);
    border: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    white-space: nowrap;
}

#game-ui #give-clue:hover {
    background-color: var(--color-success-dark);
}

#game-ui #end-turn {
    padding: clamp(5px, 1.2vw, 9px) clamp(10px, 2vw, 18px);
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    color: var(--color-text-inverse);
    background-color: var(--color-error);
    white-space: nowrap;
}

#game-ui #end-turn:hover {
    background-color: var(--color-error-dark);
}

/* Back to Lobby button - orange/amber color for distinct identity */
#game-ui #back-to-lobby {
    padding: clamp(5px, 1.2vw, 9px) clamp(10px, 2vw, 18px);
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    color: var(--color-text-inverse);
    background-color: #ff9800; /* Orange/amber - distinct from red/green */
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
}

#game-ui #back-to-lobby:hover {
    background-color: #f57c00; /* Darker orange on hover */
}

/* Team colors */
.team-red { color: var(--color-team-red); }
.team-blue { color: var(--color-team-blue); }

/* Spymaster view - unrevealed cards show semi-transparent team colors */
body.spymaster-view .card.red-team.spymaster-unrevealed { background-color: var(--color-team-red-transparent); }
body.spymaster-view .card.blue-team.spymaster-unrevealed { background-color: var(--color-team-blue-transparent); }
body.spymaster-view .card.neutral.spymaster-unrevealed { background-color: var(--color-card-neutral-transparent); }
body.spymaster-view .card.assassin.spymaster-unrevealed { background-color: var(--color-card-assassin-transparent); }

/* Spymaster view - revealed cards show full solid colors */
body.spymaster-view .card.red-team:not(.spymaster-unrevealed) { background-color: var(--color-team-red); }
body.spymaster-view .card.blue-team:not(.spymaster-unrevealed) { background-color: var(--color-team-blue); }
body.spymaster-view .card.neutral:not(.spymaster-unrevealed) { background-color: var(--color-warning); }
body.spymaster-view .card.assassin:not(.spymaster-unrevealed) { background-color: var(--color-card-assassin); }

.card:not(.red-team):not(.blue-team):not(.neutral):not(.assassin) {
    background-color: var(--color-card-default);
}

/* ========================================================================
   LANDSCAPE MODE (>= 4/3): Turn at top, teams on left/right of grid
   ======================================================================== */
@media (min-aspect-ratio: 4/3) and (min-width: 768px) {
    /* Hide portrait teams in header */
    .team-panel-portrait {
        display: none;
    }
    
    /* Show landscape teams in game-area */
    .team-panel-landscape {
        display: flex;
    }
    
    /* Turn indicator in header */
    .game-header {
        flex-direction: column;
    }
    
    .turn-indicator {
        width: 100%;
    }
    
    /* Teams on sides of grid in game-area */
    .game-area {
        flex-direction: row;
        gap: var(--spacing-sm);
        align-items: center;
        justify-content: center;
    }
    
    .team-panel-left {
        order: 1;
        width: 160px;
        flex-shrink: 0;
    }
    
    .game-grid {
        order: 2;
        flex: 1 1 auto;
        max-width: 100%;
        max-height: 100%;
    }
    
    .team-panel-right {
        order: 3;
        width: 160px;
        flex-shrink: 0;
    }
    
    .team {
        min-height: 140px;
        padding: var(--spacing-sm);
    }
    
    .team h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-sm);
    }
    
    #red-team-players li, #blue-team-players li {
        font-size: var(--font-size-base);
        padding: var(--spacing-xs) 0;
    }
    
    .remaining-cards {
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-xs);
    }
}

/* ========================================================================
   PORTRAIT MODE (< 4/3): Teams alongside turn indicator at top
   ======================================================================== */
@media (max-aspect-ratio: 4/3), (max-width: 767px) {
    /* Show portrait teams in header */
    .team-panel-portrait {
        display: flex;
    }
    
    /* Hide landscape teams in game-area */
    .team-panel-landscape {
        display: none;
    }
    
    /* Teams in horizontal row with turn indicator */
    .game-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }
    
    /* Teams compact in header */
    .team-panel-left,
    .team-panel-right {
        width: 28%;
        max-width: 170px;
    }
    
    /* Turn indicator in center */
    .turn-indicator {
        flex: 1;
        min-height: auto;
        padding: var(--spacing-xs) 0;
    }
    
    #current-turn {
        font-size: var(--font-size-base);
    }
    
    .arrow {
        font-size: var(--font-size-xl);
    }
    
    #current-clue.clue {
        font-size: var(--font-size-sm);
        min-height: 22px;
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-top: var(--spacing-xs);
    }
    
    .team {
        padding: var(--spacing-xs);
    }
    
    .team h3 {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
    }
    
    #red-team-players-portrait li, #blue-team-players-portrait li {
        font-size: var(--font-size-xs);
        padding: 1px 0;
    }
    
    .remaining-cards {
        font-size: var(--font-size-xs);
    }
    
    /* Grid gets full width below */
    .game-area {
        flex-direction: column;
    }
    
    .game-grid {
        width: 100%;
        flex: 1;
    }
}

/* Mobile portrait - dynamic padding/font handled by JS (WT-14) */
@media (max-width: 600px) {
    #game-ui .container {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    
    #game-ui h2 {
        font-size: var(--font-size-xl);
    }
    
    .team-panel-left,
    .team-panel-right {
        width: 26%;
        max-width: 130px;
    }
    
    .game-grid {
        gap: var(--spacing-xs);
    }
}

/* Short screens - dynamic padding/font handled by JS (WT-14) */
@media (max-height: 600px) {
    #game-ui .container {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    
    #game-ui h2 {
        font-size: var(--font-size-base);
    }
    
    .turn-indicator {
        min-height: 50px;
        padding: var(--spacing-xs) 0;
    }
    
    #current-turn {
        font-size: var(--font-size-sm);
    }
    
    .arrow {
        font-size: var(--font-size-lg);
    }
    
    #current-clue.clue {
        font-size: var(--font-size-xs);
        min-height: 18px;
        padding: var(--spacing-xs) var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }
    
    .team {
        padding: var(--spacing-xs);
    }
    
    .team h3 {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    #red-team-players li, #blue-team-players li,
    #red-team-players-portrait li, #blue-team-players-portrait li {
        font-size: var(--font-size-xs);
        padding: 1px 0;
    }
    
    .remaining-cards {
        font-size: var(--font-size-xs);
    }
    
    .game-grid {
        gap: var(--spacing-xs);
    }
    
    #game-over-message {
        font-size: var(--font-size-base);
        margin: var(--spacing-xs) 0;
    }
}