/* ==========================================================================
   1. GLOBAL VARIABLES & BASE RESET
   ========================================================================== */
:root {
    /* Brand Palette - WCAG AA compliant */
    --col1: #3a6a7a; 
    --col2: #b35a2d; 
    --col3: #4a7050; 
    --col4: #75586e; 
    --col5: #963838; 
    
    /* UI Colors */
    --color-bg-primary: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-text-primary: #2C2C2C;
    --color-text-secondary: #6B6B6B;
    --color-border: #E0E0E0;
    --color-chip-bg: #F0F0F0; /* Soft background for static data chips */
    --color-input-focus: #4A90E2;
    --color-error: #D0021B;
    --color-hint: #8A8D91; 
    
    /* Shadows & Elevations */
    --shadow-low: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-high: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 4px 0 rgba(0, 0, 0, 0.15); /* Standardized button depth */
    
    /* Z-Indexes */
    --z-floating-text: 100;
    
    /* Layout & Fluid Tokens */
    --max-app-width: 500px;
    --space-xs: clamp(2px, 0.5dvh, 4px);
    --space-sm: clamp(4px, 1.2dvh, 8px);
    --space-md: clamp(8px, 2dvh, 16px);
    --space-lg: clamp(12px, 3dvh, 24px);
    --space-xl: clamp(24px, 5dvh, 48px); /* Macro-whitespace for sectioning */
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

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

body { 
    background-color: var(--color-bg-primary); 
    color: var(--color-text-primary); 
    font-family: 'Play', Arial, sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100dvh; 
    padding: 0 var(--space-md) var(--space-md) var(--space-md); 
    overflow-x: hidden; 
    overscroll-behavior-y: none; 
}

.hidden { display: none !important; }

/* Touch Action Fix */
button, .key, .tile {
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   2. HEADER & TOP UI
   ========================================================================== */
.app-header { 
    width: 100%; 
    max-width: var(--max-app-width);
    display: grid; 
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    padding: var(--space-md) 0; 
    position: relative;
}

.header-left { justify-self: start; text-align: left; }
.header-center { justify-self: center; text-align: center; }
.header-right { justify-self: end; text-align: right; }

.app-header h1 { 
    font-size: clamp(1.1rem, 5vw, 1.8rem); 
    letter-spacing: -1px; 
    line-height: 1;
}

#mode-indicator { 
    font-size: clamp(0.6rem, 1.5dvh, 0.75rem); 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 2px var(--space-sm); 
    border-radius: 12px; 
    margin-top: 4px; 
    display: inline-block;
}

.mode-daily { background-color: var(--col2); color: #FFF; }
.mode-practice { background-color: var(--color-border); color: var(--color-text-primary); }

#timer { 
    font-size: clamp(1.1rem, 5vw, 1.8rem); 
    font-weight: bold; 
    color: var(--color-text-primary); 
    letter-spacing: 1px; 
    line-height: 1; 
    transition: color 0.3s ease;
    display: block;
}

#timer.danger { 
    color: var(--color-error); 
    animation: pulse-timer 1s infinite alternate; 
}

#timer-progress-container {
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

#timer-progress-bar {
    height: 100%;
    width: 100%;
    background-color: var(--col3);
    transform-origin: left;
    transition: width 0.5s linear, background-color 0.3s ease;
}

#timer-progress-bar.danger {
    background-color: var(--color-error);
}

#score-wrapper output {
    display: block;
}

#score-total-display { 
    font-size: clamp(0.9rem, 4vw, 1.2rem); 
    font-weight: bold; 
    color: var(--col3); 
    line-height: 1.1; 
}

#score-breakdown-display { 
    font-size: clamp(0.6rem, 2vw, 0.75rem); 
    font-weight: bold; 
    color: var(--color-text-secondary); 
}


/* ==========================================================================
   3. GAME BOARD & ROW LAYOUT
   ========================================================================== */
#game-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: var(--max-app-width);
    flex-grow: 1;
}

#board-area, #keyboard-area { width: 100%; }
#board-area { margin-bottom: var(--space-sm); }

#game-board { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-md); 
    width: 100%;
    max-width: min(100%, 55dvh); 
    margin: 0 auto; 
    position: relative;
}

.row-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-xs); 
    transition: opacity 0.2s ease, filter 0.2s ease; 
    width: 100%; 
}

.dimmed { opacity: 0.3; }
.dead-row { opacity: 0.2; filter: grayscale(100%); pointer-events: none; }

.seed-row-wrapper { 
    margin-bottom: var(--space-xs); 
    padding-bottom: var(--space-sm); 
    border-bottom: 2px dashed var(--color-border); 
}

.row-main { 
    display: grid;
    grid-template-columns: 5fr 1fr; 
    gap: var(--space-sm);
    align-items: center;
}

.row-tiles { 
    display: grid; 
    grid-template-columns: repeat(5, minmax(0, 1fr)); 
    gap: var(--space-sm); 
}

.tile { 
    width: 100%; 
    aspect-ratio: 1; 
    border: 2px solid var(--color-border); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: clamp(1.2rem, 6vmin, 1.8rem);
    font-weight: bold; 
    text-transform: uppercase; 
    background-color: transparent; 
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.row-counter { 
    width: 100%; 
    text-align: right;
    font-size: clamp(0.85rem, 3.5vw, 1.1rem); 
    font-weight: bold; 
    color: var(--color-text-secondary); 
}

.inline-words { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: var(--space-sm); 
    padding: var(--space-xs) 2px var(--space-sm) 2px; 
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory;
}

.inline-words::-webkit-scrollbar { display: none; }

.inline-word-card { 
    flex-shrink: 0; 
    font-size: clamp(0.7rem, 2dvh, 0.8rem); 
    font-weight: bold; 
    text-transform: uppercase; 
    padding: var(--space-xs) var(--space-sm); 
    border-radius: 4px; 
    background-color: transparent;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; 
}


/* ==========================================================================
   4. ELEVATED INPUT ROW
   ========================================================================== */
#player-input-section {
    width: 100%;
    margin-top: auto; 
    padding-bottom: var(--space-md);
    z-index: 10;
}

.input-row-wrapper {
    background: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-high);
    transform: translateY(-4px); 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.input-tile {
    border-color: var(--color-border);
    background-color: var(--color-bg-primary);
    transition: all 0.15s ease-out;
}

.input-tile.active-typing { 
    border-color: var(--color-input-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    transform: scale(1.05); 
    background-color: var(--color-surface);
}

.input-tile[data-state="filled"] {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.streak-active .input-row-wrapper {
    box-shadow: 0 8px 16px rgba(179, 90, 45, 0.2);
    border: 1px solid var(--col2);
}

.streak-active .input-tile.active-typing {
    border-color: var(--col2);
    box-shadow: 0 0 0 3px rgba(179, 90, 45, 0.2);
}


/* ==========================================================================
   5. VIRTUAL KEYBOARD
   ========================================================================== */
#keyboard-area { margin-bottom: var(--space-xs); }

#virtual-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
}

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

.key {
    flex: 1;
    min-height: 48px; 
    height: clamp(48px, 7dvh, 60px); 
    border: none;
    border-radius: 6px;
    background-color: var(--color-border); 
    color: var(--color-text-primary);
    font-size: clamp(1.1rem, 4vw, 1.3rem);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}

.key:active { 
    background-color: var(--color-text-secondary); 
    color: #fff; 
    transform: translateY(4px); 
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.action-key { 
    flex: 1.5; 
    font-size: clamp(0.85rem, 3vw, 1rem); 
    background-color: #CFCFCF; 
}


/* ==========================================================================
   6. NATIVE DIALOG MODALS & ONBOARDING
   ========================================================================== */
dialog {
    margin: auto; 
    border: none;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-modal);
    width: 90%;
    max-width: var(--max-app-width);
    max-height: 90dvh;
    overflow-y: auto;
    padding: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.modal-content {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.onboarding-steps { 
    margin: var(--space-lg) 0; 
    width: 100%; 
    text-align: left; 
}

.step-group-title { 
    font-weight: bold; 
    color: var(--col1); 
    margin: var(--space-md) 0 var(--space-sm) 0; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: clamp(0.8rem, 2.5dvh, 0.9rem);
}

.onboarding-subtitle { 
    line-height: 1.4; 
    margin-bottom: var(--space-md); 
    text-align: center;
}

.step { 
    display: flex; 
    gap: var(--space-md); 
    margin-bottom: var(--space-md); 
    align-items: flex-start; 
    font-size: clamp(0.9rem, 2.5dvh, 1rem); 
}

.step-icon { font-size: clamp(1.2rem, 4dvh, 1.5rem); }

#start-action-area { width: 100%; text-align: center; }

.manual-link {
    display: inline-block; 
    margin-top: var(--space-lg); 
    font-size: clamp(0.85rem, 2.5dvh, 0.95rem); 
    color: var(--col1); 
    text-decoration: underline; 
    font-weight: bold;
}


/* ==========================================================================
   7. GAME OVER SCREEN (Spacing & Hierarchy)
   ========================================================================== */
#game-over-modal { text-align: center; }

#final-score { 
    font-size: clamp(1.5rem, 5dvh, 2rem); 
    color: var(--col3); 
    margin: var(--space-md) 0 var(--space-sm) 0; 
    font-weight: bold;
}

#final-score-breakdown { 
    color: var(--color-text-secondary); 
    font-size: clamp(0.9rem, 2.5dvh, 1rem); 
}

/* Increased Prominence & Breathing Room */
.step-group-title.game-over-prompt {
    font-size: clamp(1rem, 3dvh, 1.2rem);
    color: var(--color-text-primary);
    margin-top: var(--space-xl); /* Force clear separation from Score area */
    margin-bottom: var(--space-md);
}

#practice-tier-group {
    margin-bottom: var(--space-xl); /* Force clear separation from Answers area */
}

#all-solutions-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--space-sm); 
    justify-content: center; 
    margin-top: var(--space-md);
}


/* ==========================================================================
   8. BUTTON STANDARDIZATION & AFFORDANCES
   ========================================================================== */
.primary-btn, .secondary-btn, .tier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-family: inherit;
    font-weight: bold;
    font-size: clamp(0.9rem, 2.5dvh, 1.1rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--border-radius-md); 
    cursor: pointer; 
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.primary-btn { 
    padding: clamp(0.8rem, 2.5dvh, 1rem) clamp(1rem, 4vw, 2rem); 
    background-color: var(--col3); 
    color: #FFF; 
    box-shadow: var(--shadow-button);
}

.primary-btn:hover:not(:disabled) { background-color: #3b5c40; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.primary-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.primary-btn:disabled { background-color: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; box-shadow: none; }

.secondary-btn {
    padding: clamp(0.8rem, 2.5dvh, 1rem) clamp(1rem, 4vw, 2rem); 
    background-color: transparent; 
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border); 
    width: 100%;
}

.secondary-btn:hover:not(:disabled) { 
    background-color: var(--color-chip-bg); 
    color: var(--color-text-primary); 
}

.practice-tier-container {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--max-app-width);
    margin: 0 auto;
}

/* Tier Buttons: Solid Fills to signify interactivity */
.tier-btn {
    flex: 1;
    padding: var(--space-sm);
    color: #FFF;
    box-shadow: var(--shadow-button);
}

.easy-btn { background-color: var(--col3); }
.medium-btn { background-color: var(--col2); } 
.hard-btn { background-color: var(--col5); }

.tier-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.tier-btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

#start-daily-btn {
    width: auto;
    min-width: 280px; 
    margin: 0 auto var(--space-md) auto;
}


/* ==========================================================================
   9. DYNAMIC STATES & UTILITY CLASSES
   ========================================================================== */
.bg-col1 { background-color: var(--col1); color: #FFF; border-color: var(--col1); } 
.bg-col2 { background-color: var(--col2); color: #FFF; border-color: var(--col2); } 
.bg-col3 { background-color: var(--col3); color: #FFF; border-color: var(--col3); } 
.bg-col4 { background-color: var(--col4); color: #FFF; border-color: var(--col4); } 
.bg-col5 { background-color: var(--col5); color: #FFF; border-color: var(--col5); } 
.bg-gray { background-color: var(--color-border); color: var(--color-text-secondary); border-color: var(--color-border); }

.text-col1 { color: var(--col1); } 
.text-col2 { color: var(--col2); } 
.text-col3 { color: var(--col3); } 
.text-col4 { color: var(--col4); } 
.text-col5 { color: var(--col5); }

/* Static Data Chips (Replacing heavy bordered boxes) */
.word-card { 
    padding: var(--space-sm) var(--space-md); 
    border-radius: var(--border-radius-md); 
    font-weight: bold; 
    font-size: clamp(0.85rem, 2.5dvh, 1rem); 
    text-transform: uppercase; 
    background-color: var(--color-chip-bg); /* Flat background instead of borders */
    color: var(--color-text-primary);
    border: none;
}

.obscure-word { 
    background-color: rgba(212, 175, 55, 0.15); 
    color: #B8860B !important; 
    font-style: italic; 
}

.strikethrough { text-decoration: line-through; opacity: 0.5; }

.tile.ghost-hint {
    color: var(--color-hint); 
    font-weight: normal; 
    font-style: italic; 
    animation: fade-in 0.4s ease-in-out forwards; 
}


/* ==========================================================================
   10. ANIMATIONS & EFFECTS
   ========================================================================== */
.shake { animation: shake-animation 0.4s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes shake-animation { 
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fct {
    position: absolute;
    font-weight: bold;
    z-index: var(--z-floating-text);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

.fct-error { color: var(--color-error); font-size: clamp(0.9rem, 2.5dvh, 1rem); }
.fct-base { color: var(--col3); font-size: clamp(1rem, 3dvh, 1.2rem); }
.fct-obscure { color: #B8860B; font-size: clamp(1rem, 3dvh, 1.2rem); }
.fct-streak { color: var(--col2); font-size: clamp(1rem, 3dvh, 1.2rem); }

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(1.1); }
}

@keyframes pulse-timer {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.8; transform: scale(1.05); }
}


/* ==========================================================================
   11. PLAYER MANUAL (manual.html overrides)
   ========================================================================== */
.manual-body { padding-top: var(--space-lg); overflow-y: auto; display: block; }
.manual-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.manual-container code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.8em;
    color: var(--col5);
    background-color: var(--color-border);
    padding: 2px 6px;
    border-radius: 4px;
}
.back-link { display: inline-block; margin-bottom: var(--space-md); text-decoration: none; font-weight: bold; color: var(--color-text-secondary); }
.back-link:hover { color: var(--col3); }
.manual-container h1 { color: var(--col3); margin-bottom: var(--space-md); text-align: center; }
.manual-subtitle { font-size: 0.6em; color: var(--color-text-secondary); }
.manual-container h2 { color: var(--col1); border-bottom: 2px solid var(--color-border); padding-bottom: var(--space-xs); margin: var(--space-lg) 0 var(--space-sm) 0; }
.manual-container h3 { color: var(--col2); margin: var(--space-md) 0 var(--space-xs) 0; }
.manual-container p, .manual-container li { font-size: clamp(0.95rem, 2.5dvh, 1.05rem); line-height: 1.6; margin-bottom: var(--space-sm); }
.manual-container ul { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.toc { background-color: var(--color-surface); padding: var(--space-md); border-radius: var(--border-radius-md); margin-bottom: var(--space-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-low); }
.toc h2 { margin-top: 0; border: none; padding: 0; color: var(--col3); font-size: 1.2rem; }
.toc ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.toc a { color: var(--col1); text-decoration: none; font-weight: bold; }
.toc a:hover { text-decoration: underline; }
blockquote { background-color: var(--color-surface); border-left: 4px solid var(--col2); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; font-style: italic; border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; box-shadow: var(--shadow-low); }