:root {
    --bg: #000814;
    --accent: #ffc300;
    --blue: #003566;
}

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

body {
    background: var(--bg);
    color: white;
    font-family: sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* BLOCCA LO SCROLL */
}

#game-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 5px;
}

header { height: 12vh; text-align: center; }
.brand { font-size: 0.7rem; color: #00ccff; letter-spacing: 2px; }
.game-title { font-size: 1rem; margin-top: 2px; }
#artist-display { font-size: 0.9rem; color: var(--accent); font-weight: bold; margin-top: 2px; }

#status-bar { 
    height: 6vh; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    font-size: 0.8rem;
    border-bottom: 1px solid #111;
}

#phrase-area {
    height: 35vh; /* Spazio per le lettere */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#phrase-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    width: 100%;
}

.letter-card {
    width: 28px;
    height: 38px;
    background: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 3px;
}

.letter-card.hidden { background: #1a1a1a; color: #1a1a1a; border: 1px solid #333; }
.letter-card.space { background: transparent; width: 12px; }

#action-bar {
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

#timer-box { display: flex; align-items: center; gap: 8px; }
#hourglass { width: 18px; height: 30px; border: 1px solid white; position: relative; }
#sand { background: var(--accent); width: 100%; position: absolute; bottom: 0; transition: height 1s linear; }
#timer-text { font-size: 1rem; font-weight: bold; }

#btn-daje {
    background: #fb8500;
    color: white;
    border: none;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: bold;
}

#keyboard-area {
    height: 35vh; /* Tastiera fissa in basso */
    display: flex;
    align-items: center;
}

#keyboard {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 tasti per riga per essere grandi */
    gap: 4px;
    width: 100%;
}

.key-btn {
    height: 42px; /* Altezza fissa tasti */
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
}

.pulse { animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { color: white; } to { color: red; } }