/* --- VISUAL PHYSICS & THEMING --- */

:root {
    /* Light Theme (Default) - RGB Values */
    --color-surface: 249 248 244; /* #F9F8F4 */
    --color-ink: 18 18 18;       /* #121212 */
    --color-accent: 212 175 55;  /* #D4AF37 (Gold) */
    --color-error: 220 38 38;    /* #DC2626 */
}

.dark-theme {
    /* Dark Theme (OLED) - RGB Values */
    --color-surface: 18 18 18;    /* #121212 */
    --color-ink: 229 229 229;     /* #E5E5E5 */
    --color-accent: 212 175 55;   /* Gold stays same */
    --color-error: 239 68 68;     /* #EF4444 */
}

body {
    /* We now use rgb() wrapper to consume the variables */
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-ink));
    font-family: 'Georgia', serif;
    overflow: hidden;
    touch-action: manipulation;
    cursor: default; 
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- THE CRITICAL GRID FIX --- */
#game-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 100%;
    height: 100%;
}

/* Tactile Button Base Class */
.btn-tactile {
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* Box shadow color must be explicit rgb */
    box-shadow: 0 4px 0 rgb(var(--color-ink)); 
}

.btn-tactile:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 transparent !important;
}

.btn-selected {
    background-color: rgb(var(--color-ink)) !important; 
    color: rgb(var(--color-surface)) !important; 
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgb(var(--color-ink)) !important;
}

/* Pencil Notes Grid */
.note-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.note-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    font-family: sans-serif;
    color: rgb(var(--color-ink));
    opacity: 0.7;
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.anim-shake { animation: shake 0.3s ease-in-out; }

@keyframes flash-red {
    0% { background-color: rgb(var(--color-error)); color: white; }
    100% { background-color: transparent; }
}
.anim-error { animation: flash-red 0.5s ease-out; }

.no-select { user-select: none; -webkit-user-select: none; }