/*
 * ============================================================
 *  TNT | Sudoku Saga — S.P.A.R.K. Edition
 *  File:    sudokuSPARKStyles.css
 *  Coder:   KLP + GitHub Copilot
 *  Created: 2026-07-15
 *
 *  Clean logic-puzzle palette — focused, cerebral, confident.
 *  Requires CSS custom properties from tnt-base-styles.css.
 *  Replaces the legacy masthead/nav rules that matched no
 *  elements after the TNT SPARK renovation.
 * ============================================================
 */


/* ── Local palette additions ── */
:root {
    --sudoku-green:      #2e7d32;
    --sudoku-green-lt:   #e8f5e9;
    --sudoku-green-mid:  #c8e6c9;
    --sudoku-ink:        #1a1a2e;
}


/* ─────────────────────────────────────────────────────────
   HERO — deep blue-to-green gradient over the Einstein image.
   Sudoku is a logic puzzle: the palette leans intellectual
   rather than festive. Deep blue (focused, analytic) slides
   toward forest green (the board's own border color), so the
   hero gradient bridges into the game below.
───────────────────────────────────────────────────────── */
#hero {
    min-height: 160px;
    background-image:
        linear-gradient(135deg,
            rgba(10, 14, 50, 0.72)  0%,
            rgba(20, 80, 30, 0.58) 100%),
        url('../images/sumoSudokuCartoon.jpeg');
    background-size: cover;
    background-position: center bottom;
    padding: 1.4rem 1rem 1.2rem;
    border-bottom: 4px solid var(--tnt-red);
}

#hero .hero-title {
    font-size: clamp(2.4rem, 5.5vw, 3.5rem);
    margin-bottom: 0.5rem;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
}

#hero .hero-eyebrow {
    color: var(--tnt-amber);
}

#hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.88rem, 2vw, 1.1rem);
}

/* Sudoku grid icon in the hero heading */
.hero-sudoku-icon {
    height: 2.6rem;
    vertical-align: middle;
    margin-right: 0.4rem;
    filter: brightness(0) invert(1);   /* white on dark overlay */
}


/* ─────────────────────────────────────────────────────────
   APP SECTION — clean off-white background.
   Sudoku is a focusing task; a patterned/festive background
   would compete with the grid's own visual information.
   Off-white keeps attention on the board.
───────────────────────────────────────────────────────── */
#appSection {
    background: #f4f6f0;
    padding: 2rem 0 4rem;
    min-height: 60vh;
}


/* ─────────────────────────────────────────────────────────
   SUDOKU PANEL — the centered game container.
   Fixed width matches the board (360px) so the digit palette
   and demo form stay perfectly aligned below it.
───────────────────────────────────────────────────────── */
#sudokuPanel {
    width: 360px;
}