:root {
    /* CHRISTMAS PALETTE */
    --correct: #2e8b57; /* Holly Green */
    --present: #c5a005; /* Gold/Bell */
    --absent: #3a3a3c;  /* Coal */
    --bg-color: #4a0e0e; /* Deep Cranberry Red */
    --text-color: #f0f8ff; /* Snowy white */
    --border-color: #6e1818; 
    --key-bg: #8c2a2a; /* Light red keys */
    
    /* VISUAL EFFECTS */
    --glow: 0 0 10px rgba(255, 255, 255, 0.2);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace; 
    
    /* --- FIX 1: Allow vertical space management --- */
    min-height: 100vh; /* Ensure it covers at least one screen height */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Remove 'height: 100vh' and 'overflow: hidden' */
    
    background-image: radial-gradient(circle at 50% 50%, #5e1313 0%, #290505 100%); 
}

.container {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    /* --- FIX 2: Ensure the container uses available space --- */
    height: 100%; 
    min-height: 100vh; /* Stretch to cover the viewport height */
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-bottom: 3px dashed #ffffff; 
    background-color: rgba(0, 0, 0, 0.2);
}

header h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px #003300; 
}

.controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

select, button {
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid #c5a005;
    background-color: #0f380f; 
    color: white;
    font-weight: bold;
    cursor: pointer;
}

/* THE BOARD */
#board-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* --- FIX 3: Push the keyboard down and make the board flexible --- */
    flex-grow: 1; 
    overflow-y: auto; /* Allow board to scroll if needed on tiny screens */
    padding: 10px;
}

#board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 350px;
    /* Removing aspect-ratio here is safer for tiny screens, 
       but if you want it back for desktop, use a media query. */
    aspect-ratio: 5 / 6; 
}

.tile {
    border: 2px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.05); 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
    border-radius: 8px; 
    transition: all 0.2s;
}

/* TILE STATES (With Glows) */
.tile.active { 
    border-color: #fff; 
    box-shadow: var(--glow);
}
.tile.correct { 
    background-color: var(--correct); 
    border-color: var(--correct); 
    box-shadow: 0 0 10px var(--correct);
}
.tile.present { 
    background-color: var(--present); 
    border-color: var(--present); 
    box-shadow: 0 0 10px var(--present);
}
.tile.absent { 
    background-color: var(--absent); 
    border-color: var(--absent); 
}

/* KEYBOARD */
#keyboard-container {
    padding: 10px 5px; /* Reduced side padding slightly */
    width: 100%;
    /* --- FIX 4: Ensure keyboard does not affect scroll position when tapped --- */
    flex-shrink: 0; 
    background-color: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    gap: 6px;
}

.key {
    background-color: var(--key-bg);
    color: white;
    font-weight: bold;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    height: 58px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3); 
}

.key:active {
    transform: translateY(2px);
    box-shadow: none;
}

.key.big { flex: 1.5; font-size: 12px; }
.key.correct { background-color: var(--correct); border: 1px solid #fff; }
.key.present { background-color: var(--present); border: 1px solid #fff;}
.key.absent { background-color: var(--absent); opacity: 0.7; }

/* MESSAGE TOAST */
#message-container {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.message {
    background-color: #fff;
    color: #4a0e0e;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    border: 2px solid #c5a005;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* SNOW ANIMATION */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}

.snowflake {
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  cursor: default;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
  opacity: 0.3; /* Subtle snow */
}

.snowflake:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s; }
.snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; }
.snowflake:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; }
.snowflake:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; }
.snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; }
.snowflake:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; }