/* Responsive CSS for Word Chain Game */

/* Large Desktop (default) */
/* Styles above 1200px are in the main style.css file */

/* Medium Desktop and Laptop */
@media screen and (max-width: 1200px) {
    .game-container {
        max-width: 90%;
        max-height: 90vh;
    }
}

/* Small Desktop and Laptop */
@media screen and (max-width: 992px) {
    .game-container {
        max-width: 95%;
    }
    
    .word {
        font-size: 1.8rem;
    }
    
    .word span {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }
    
    .letter-button {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* Tablet */
@media screen and (max-width: 768px) {
    .game-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .header-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .word-list-selector,
    .difficulty-selector {
        margin-bottom: var(--spacing-xs);
    }
    
    .word-display {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .anchor-word-container,
    .link-word-container {
        padding: var(--spacing-sm);
    }
    
    .game-info {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .word-info,
    .score-info {
        justify-content: center;
    }
    
    .game-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    .info-label {
        font-size: 0.7rem;
    }
    
    .info-value {
        font-size: 1rem;
    }
    
    /* Chain Display */
    .chain-display-section {
        padding: var(--spacing-sm);
    }
    
    .chain-container {
        padding: var(--spacing-sm);
    }
    
    .chain-word {
        font-size: 0.9rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .chain-word::after {
        right: -12px;
        font-size: 0.9rem;
    }
    
    .word-header {
        flex-direction: row;
        align-items: center;
    }
    
    .lookup-button {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }
    
    .definition-container {
        width: 95%;
        padding: var(--spacing-md);
    }
    
    .definition-content {
        max-height: 300px;
    }
}

/* Mobile Large */
@media screen and (max-width: 576px) {
    body {
        padding: 0;
    }
    
    .game-container {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .game-header h1 {
        font-size: 1.5rem;
    }
    
    .word-list-selector label,
    .difficulty-selector label {
        font-size: 0.8rem;
    }
    
    .word-list-selector select,
    .difficulty-selector select {
        font-size: 0.8rem;
    }
    
    .game-board {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .word {
        font-size: 1.5rem;
    }
    
    .word span {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 1px;
    }
    
    .anchor-word-container h2,
    .link-word-container h2 {
        font-size: 1rem;
    }
    
    .letter-button {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    .action-buttons {
        gap: var(--spacing-sm);
    }
    
    .info-item {
        min-width: 70px;
    }
    
    .lookup-button {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
    
    .word-with-controls {
        gap: var(--spacing-xs);
    }
}

/* Mobile Small */
@media screen and (max-width: 375px) {
    .game-header h1 {
        font-size: 1.3rem;
    }
    
    .word {
        font-size: 1.3rem;
    }
    
    .word span {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }
    
    .letter-button {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
    
    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .info-item {
        min-width: 60px;
    }
    
    .info-value {
        font-size: 0.9rem;
    }
    
    .message-area {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }
}

/* Landscape Mode for Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .game-container {
        max-height: 100vh;
    }
    
    .game-header {
        padding: var(--spacing-xs);
    }
    
    .game-header h1 {
        font-size: 1.2rem;
    }
    
    .game-board {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    
    .word-display {
        flex-direction: row;
        margin-bottom: var(--spacing-xs);
    }
    
    .anchor-word-container,
    .link-word-container {
        padding: var(--spacing-xs);
    }
    
    .word {
        font-size: 1.2rem;
    }
    
    .word span {
        width: 24px;
        height: 24px;
        line-height: 24px;
    }
    
    .game-controls {
        gap: var(--spacing-xs);
    }
    
    .letter-button {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }
    
    .game-info {
        padding: var(--spacing-xs);
    }
    
    .info-label {
        font-size: 0.6rem;
    }
    
    .info-value {
        font-size: 0.8rem;
    }
    
    .message-area {
        padding: var(--spacing-xs);
        font-size: 0.8rem;
    }
    
    .header-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
    }
    
    .info-button {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
    
    .lookup-button {
        width: 20px;
        height: 20px;
        font-size: 0.9rem;
    }
    
    .definition-container {
        max-width: 90%;
        padding: var(--spacing-sm);
    }
    
    .definition-content {
        max-height: 200px;
        padding: var(--spacing-xs);
    }
    
    .word-with-controls {
        gap: var(--spacing-xs);
    }
}

/* Small screens (mobile phones) */
@media (max-width: 480px) {
    /* Chain Display */
    .word-chain {
        gap: 15px 5px;
    }
    
    .chain-word {
        font-size: 0.8rem;
        padding: 2px 6px;
        margin-bottom: 5px;
    }
    
    .chain-word::after {
        content: "↓";
        right: auto;
        bottom: -12px;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .chain-word:last-child::after {
        content: "";
    }
    
    .lookup-button {
        width: 22px;
        height: 22px;
        font-size: 0.9rem;
    }
    
    .definition-container {
        padding: var(--spacing-sm);
    }
    
    .definition-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .definition-content {
        max-height: 250px;
    }
}