@font-face {
    font-family: 'Bakso Sapi';
    src: url('fonts/BaksoSapi.otf') format('opentype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2C5CA9;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    max-width: min(600px, 100vw);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* En desktop, limitar el ancho para mantener formato vertical */
@media (min-width: 601px) {
    .container {
        max-width: min(450px, 100vw);
    }
}

/* Header */
header {
    flex-shrink: 0;
    padding: min(8px, 1.5vh) min(10px, 2vw);
}

.top-bar {
    display: flex;
    align-items: center;
    gap: min(10px, 2vw);
}

.top-logo {
    display: flex;
    align-items: center;
}

.logo {
    height: min(90px, 12vh) !important;
    width: auto;
    border-radius: 10px;
}

h1 {
    font-family: 'Bakso Sapi', sans-serif;
    font-size: min(2.5em, 6vh) !important;
    color: #FBEC4F;
    margin: 0;
}

/* Timer */
#timer-container {
    flex-shrink: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: min(5px, 1vh) 0;
}

#timer {
    font-family: 'Bakso Sapi', sans-serif;
    font-size: min(1.3em, 2.5vh);
    color: #333;
    background-color: #f0f0f0;
    padding: min(6px, 1vh) min(15px, 4vw);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Game Board */
#game-board {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Mantener padding mínimo de 20px siempre, reducir tiles si es necesario */

.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    padding: 0 min(3px, 1vw);
    box-sizing: border-box;
    gap: min(5px, 1vh);
}

.row:not(:last-child) {
    margin-bottom: min(5px, 1vh);
}

.tile {
    border: min(2px, 0.3vh) solid white;
    display: flex;
    color: white;
    justify-content: center;
    font-family: 'Bakso Sapi', sans-serif;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    background-color: transparent;
    font-size: min(1.8em, 4vw, 3.5vh);
    box-sizing: border-box;
    min-width: 0;
}

.tile.correct {
    background-color: #4eae25;
    border-color: #4eae25;
    color: white;
}

.tile.present {
    background-color: #f1c232;
    border-color: #f1c232;
    color: white;
}

.tile.absent {
    background-color: black;
    border-color: black;
    color: white;
}

/* Keyboard Container */
#keyboard-container {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: min(12px, 2.5vh);
    padding: min(5px, 1vh) min(5px, 1.5vw);
    box-sizing: border-box;
}

#keyboard {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    justify-content: center;
}

.key {
    padding: min(10px, 2vh) min(3px, 1vw);
    background-color: white;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: min(1.2em, 2.5vw, 2.5vh);
    font-weight: 600;
    cursor: pointer;
    color: black;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(45px, 6vh);
    width: 100%;
    max-width: 100%;
}

.key:nth-child(10n) {
    border-right: none;
}

/* Centrar la última fila del teclado (ZXCVBNM - 7 letras, teclas 21-27) */
.key:nth-child(21) {
    grid-column: 2 / span 1;
}

.key:nth-child(22) {
    grid-column: 3 / span 1;
}

.key:nth-child(23) {
    grid-column: 4 / span 1;
}

.key:nth-child(24) {
    grid-column: 5 / span 1;
}

.key:nth-child(25) {
    grid-column: 6 / span 1;
}

.key:nth-child(26) {
    grid-column: 7 / span 1;
}

.key:nth-child(27) {
    grid-column: 8 / span 1;
}

.key.correct {
    background-color: #6aaa64;
    color: white;
}

.key.present {
    background-color: #c9b458;
    color: white;
}

.key.absent {
    background-color: #787c7e;
    color: white;
}

.key:hover {
    background-color: #e0e0e0;
}

.key:active {
    transform: scale(0.95);
}

/* Action Buttons */
#action-buttons {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    width: 100%;
    padding: 0 min(5px, 1.5vw);
    box-sizing: border-box;
}

.enter-key,
.delete-key {
    flex: 1;
    padding: min(16px, 3vh) min(15px, 4vw);
    font-size: min(16px, 2.5vw, 2.5vh);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.enter-key:last-child,
.delete-key:last-child {
    border-right: none;
}

.enter-key {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.enter-key:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    opacity: 0.9;
}

.enter-key:active {
    opacity: 0.8;
}

.delete-key {
    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
    color: white;
}

.delete-key:hover {
    background: linear-gradient(135deg, #e53935 0%, #d32f2f 100%);
    opacity: 0.9;
}

.delete-key:active {
    opacity: 0.8;
}

/* Media queries para ajustes específicos */
@media (max-width: 600px) {
    .logo {
        height: min(70px, 10vh) !important;
    }
    
    h1 {
        font-size: min(2.2em, 5.5vh) !important;
    }
    
    #game-board {
        padding: 0 25px;
        max-width: calc(100% - 50px);
    }
    
    .row {
        gap: min(4px, 0.8vh);
        padding: 0 min(2px, 0.8vw);
    }
    
    .row:not(:last-child) {
        margin-bottom: min(4px, 0.8vh);
    }
    
    .tile {
        font-size: 1.2em !important;
        border-width: min(1.5px, 0.25vh);
    }

    .key {
        min-height: min(38px, 5.5vh);
        font-size: min(1.7em, 4vw, 4vh) !important;
        padding: min(8px, 1.5vh) min(2px, 0.8vw);
    }
    
    .enter-key,
    .delete-key {
        padding: min(14px, 2.5vh) min(12px, 3vw);
        font-size: min(22px, 4vw, 4vh) !important;
    }
}

/* Pantallas muy pequeñas */
@media (max-height: 700px) {
    header {
        padding: min(3px, 0.8vh) min(4px, 1.2vw);
    }
    
    .logo {
        height: min(45px, 7vh) !important;
    }
    
    h1 {
        font-size: min(0.9em, 2.3vh);
    }
    
    #timer {
        font-size: min(1em, 2vh);
        padding: min(3px, 0.7vh) min(10px, 2.5vw);
    }
    
    #game-board {
        padding: 0 30px;
        max-width: calc(100% - 60px);
    }
    
    .row {
        gap: min(2px, 0.5vh);
        padding: 0;
    }
    
    .row:not(:last-child) {
        margin-bottom: min(2px, 0.5vh);
    }
    
    .tile {
        font-size: 1.2em !important;
        border-width: min(1px, 0.2vh);
    }
    
    .key {
        min-height: min(30px, 4.8vh);
        font-size: min(0.85em, 1.9vw, 1.9vh);
        padding: min(5px, 1vh) min(1px, 0.4vw);
    }
    
    .enter-key,
    .delete-key {
        padding: min(10px, 2vh) min(8px, 2vw);
        font-size: min(12px, 1.9vw, 1.9vh);
    }
    
    #keyboard-container {
        padding: min(3px, 0.8vh) min(3px, 1vw);
    }
}

/* Pantallas extremadamente pequeñas (iPhone SE, etc.) */
@media (max-height: 600px) {
    header {
        padding: min(2px, 0.5vh) min(3px, 1vw);
    }
    
    .logo {
        height: min(40px, 6vh) !important;
    }
    
    h1 {
        font-size: min(0.8em, 2vh);
    }
    
    #timer-container {
        padding: min(2px, 0.5vh) 0;
    }
    
    #timer {
        font-size: min(0.9em, 1.9vh);
        padding: min(2px, 0.5vh) min(8px, 2vw);
    }
    
    #game-board {
        padding: 0 35px;
        max-width: calc(100% - 70px);
    }
    
    .row {
        gap: min(1px, 0.3vh);
        padding: 0;
    }
    
    .row:not(:last-child) {
        margin-bottom: min(1px, 0.3vh);
    }
    
    .tile {
        font-size: 1.2em !important;
        border-width: min(0.5px, 0.1vh);
    }
    
    .key {
        min-height: min(26px, 4.2vh);
        font-size: min(0.75em, 1.7vw, 1.7vh);
        padding: min(4px, 0.9vh) min(1px, 0.3vw);
    }
    
    .enter-key,
    .delete-key {
        padding: min(8px, 1.8vh) min(6px, 1.8vw);
        font-size: min(11px, 1.7vw, 1.7vh);
    }
    
    #keyboard-container {
        padding: min(2px, 0.6vh) min(2px, 0.8vw);
        gap: min(8px, 2vh);
    }
}

/* iPhone SE y pantallas muy pequeñas - ajustes adicionales */
@media (max-width: 375px) and (max-height: 670px) {
    #game-board {
        padding: 0 25px;
        max-width: calc(100% - 50px);
    }
    
    .row {
        padding: 0;
        gap: min(1px, 0.3vh);
    }
    
    .row:not(:last-child) {
        margin-bottom: min(1px, 0.3vh);
    }
    
    .tile {
        font-size: min(1.2em, 1.6vw, 1.5vh) !important;
        border-width: min(0.5px, 0.1vh);
    }
    
    header {
        padding: min(2px, 0.6vh) min(3px, 1vw);
    }
    
    .logo {
        height: min(35px, 5.5vh) !important;
    }
    
    h1 {
        font-size: min(0.75em, 1.9vh);
    }
    
    #keyboard-container {
        padding: min(2px, 0.6vh) min(2px, 0.8vw);
        gap: min(6px, 1.5vh);
    }
    
    .key {
        min-height: min(24px, 4vh);
        font-size: min(0.7em, 1.6vw, 1.6vh);
        padding: min(3px, 0.8vh) min(0.5px, 0.2vw);
    }
    
    .enter-key,
    .delete-key {
        padding: min(8px, 1.6vh) min(6px, 1.5vw);
        font-size: min(10px, 1.6vw, 1.6vh);
    }
}

/* Orientación landscape en móviles */
@media (orientation: landscape) and (max-height: 500px) {
    .container {
        padding-bottom: 0;
    }
    
    #action-buttons {
        display: none;
    }
    
    #keyboard-container {
        padding-bottom: min(3px, 0.8vh);
    }
}

/* Ajustes específicos para iOS Safari */
@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available;
    }
    
    .container {
        height: -webkit-fill-available;
        max-height: -webkit-fill-available;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    #action-buttons {
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    }
}

/* Pantallas grandes (desktop) */
@media (min-width: 601px) {
    #game-board {
        padding: 0 20px;
    }
    
    .row {
        gap: min(5px, 1vh);
    }
    
    .row:not(:last-child) {
        margin-bottom: min(5px, 1vh);
    }
    
    .tile {
        font-size: min(1.8em, 3.5vh);
        border-width: min(2px, 0.3vh);
    }
}