/**
 * SCALE™ - Daily Word Puzzle
 * Copyright (c) 2026 Xavier Gonzalez
 * * This source code is licensed under the proprietary license found in the
 * LICENSE file in the root directory of this source tree.
 * * Unauthorized copying, modification, distribution, or use of this file,
 * via any medium, is strictly prohibited.
 */

:root {
    --bg-color: #121213;
    --text-color: #ffffff;
    --tile-border: #3a3a3c;
    --tile-bg: #121213;
    --correct: #538d4e;
    /* Green */
    --present: #b59f3b;
    /* Yellow */
    --absent: #3a3a3c;
    /* Gray */
    --key-bg: #818384;
    --accent-green: #538d4e;
    --accent-yellow: #b59f3b;
    --accent-gray: #3a3a3c;
    --text-secondary: #818384;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    height: 100vh;
    height: 100dvh; /* Mobile browser fix */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Notch Safety */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- HEADER --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--tile-border);
    height: 50px;
    flex-shrink: 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.logo::after {
    content: "™";
    font-size: 0.4em;
    vertical-align: top;
    font-weight: 400;
    color: var(--text-secondary);
    transform: translateY(-8px);
    margin-left: -42px;
}

.mini-tile {
    width: 15px;
    height: 15px;
    border-radius: 2px;
}

.mt-1 { background: var(--accent-gray); height: 15px; }
.mt-2 { background: var(--accent-yellow); height: 20px; }
.mt-3 { background: var(--accent-green); height: 25px; }

h1 {
    letter-spacing: 4px;
    font-size: 1.5rem;
    margin: 0;
}

.icon-btn {
    background: none;
    border: 1px solid var(--tile-border);
    color: var(--text-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- GAME CONTAINER --- */
#game-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    padding: 0 10px; /* Safety padding */
    box-sizing: border-box;
}

/* Inventory */
#inventory-container {
    background: #272729;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.inv-label { font-size: 0.7rem; color: #888; letter-spacing: 1px; }
.inv-content { font-size: 1.2rem; letter-spacing: 3px; font-weight: bold; color: var(--present); margin-top: 5px; }

/* Board */
#board {
    display: grid;
    grid-gap: 5px;
    padding: 10px;
    max-width: 100%;
    justify-content: center;
}

/* Default Tile (Desktop) */
.tile {
    width: 52px;
    height: 52px;
    border: 2px solid var(--tile-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
    background-color: var(--tile-bg);
}

/* Tile States */
.tile[data-state="active"] { border-color: #565758; }
.tile[data-state="correct"] { background: var(--correct); border-color: var(--correct); }
.tile[data-state="present"] { background: var(--present); border-color: var(--present); }
.tile[data-state="absent"] { background: var(--absent); border-color: var(--absent); }

/* Animations */
.pop { animation: pop 0.1s; }
@keyframes pop { 50% { transform: scale(1.1); } }
.flip { animation: flip 0.5s ease-in forwards; }
@keyframes flip { 
    0% { transform: rotateX(0); } 
    50% { transform: rotateX(90deg); } 
    100% { transform: rotateX(0); } 
}
.shake { animation: shake 0.5s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* --- KEYBOARD --- */
#keyboard-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 10px;
    padding: 0 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.key-row {
    display: flex;
    width: 100%;
    margin: 0 auto 8px;
    touch-action: manipulation;
}

.key {
    font-family: inherit;
    font-weight: bold;
    border: 0;
    padding: 0;
    margin: 0 3px;
    height: 58px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    background-color: var(--key-bg);
    color: white;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.key.big { flex: 1.5; font-size: 1rem; }

/* --- MODALS --- */
.hidden { display: none !important; }

#modal-overlay, #help-modal, #loading-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex;
    justify-content: center; align-items: center; z-index: 100;
}

#loading-screen { background: var(--bg-color); z-index: 200; flex-direction: column; }

.modal-card {
    background: #121213; border: 1px solid #565758; padding: 25px;
    border-radius: 8px; text-align: center; max-width: 90%; width: 350px;
    position: relative; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

#modal-btn {
    background: var(--correct); color: white; padding: 15px 30px;
    font-size: 1rem; font-weight: bold; border: none; border-radius: 4px;
    cursor: pointer; margin-top: 20px; width: 100%;
}

#close-help {
    position: absolute; top: 10px; right: 15px; background: none;
    border: none; color: #888; font-size: 1.5rem; cursor: pointer;
}

.instruction-step {
    margin: 15px 0; font-size: 0.9rem; text-align: left;
    border-bottom: 1px solid #333; padding-bottom: 10px;
}

.mini-grid { display: flex; gap: 5px; margin-top: 8px; }
.mini-grid .tile { width: 30px; height: 30px; font-size: 1rem; border-width: 1px; }

.example {
    font-family: monospace; color: var(--present); background: #222;
    padding: 5px; margin-top: 5px; display: inline-block;
}

#toast-container {
    position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
    z-index: 300; pointer-events: none; width: 100%;
    display: flex; flex-direction: column; align-items: center;
}

.toast {
    background: white; color: black; padding: 10px 20px;
    border-radius: 4px; font-weight: bold; margin-bottom: 5px;
}

.spinner {
    width: 40px; height: 40px; border: 4px solid #333;
    border-top: 4px solid var(--correct); border-radius: 50%;
    animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.social-links { display: flex; justify-content: center; margin-bottom: 25px; }
.social-icon {
    width: 30px; height: 30px; color: var(--text-secondary);
    fill: var(--text-secondary); transition: fill 0.3s, transform 0.3s;
}
.social-icon:hover { fill: #0085ff; transform: translateY(-3px) scale(1.1); }


/* --- RESPONSIVE ADJUSTMENTS --- */

/* 1. SHORT SCREENS (Landscape or older phones) */
@media (max-height: 700px) {
    header { height: 40px; }
    h1 { font-size: 1.2rem; }
    #inventory-container { margin-bottom: 8px; padding: 5px 15px; }
    .inv-content { margin-top: 2px; }
    
    /* Short screen tile override */
    .tile { width: 40px; height: 40px; font-size: 1.5rem; }
    
    #board { grid-gap: 3px; }
    #keyboard-container { margin-bottom: 5px; }
    .key-row { margin-bottom: 4px; }
    .key { height: 42px; font-size: 1rem; }
}

@media (max-height: 500px) {
    .tile { width: 30px; height: 30px; font-size: 1rem; }
    .key { height: 35px; }
}


/* 2. NARROW SCREENS (The "Level 5" Fix) */
/* If the screen is narrower than 500px (like an iPhone or Android),
   force the tiles to be 44px regardless of how tall the screen is. 
   This ensures 7 tiles fit perfectly (44 * 7 = 308px). */
@media (max-width: 500px) {
    .tile {
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
    }
    
    /* Tighter gap to save space */
    #board {
        grid-gap: 3px;
    }
}