/*
 * ============================================================
 *  TNT | Sudoku Saga — Custom Puzzle Player
 *  File:    playCustomSudokuStyles.css
 *  Coder:   KLP + GitHub Copilot
 *  Created: 2026-07-16
 *
 *  Einstein hero background — "now it's time to solve."
 *  Requires CSS custom properties from tnt-base-styles.css.
 * ============================================================
 */


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


/* ─────────────────────────────────────────────────────────
   HERO — Einstein with a slightly darker overlay than the
   generator, signalling "this is the real challenge now."
───────────────────────────────────────────────────────── */
#hero {
    min-height: 160px;
    background-image:
        linear-gradient(135deg,
            rgba(10, 14, 50, 0.78)  0%,
            rgba(20, 80, 30, 0.62) 100%),
        url('../images/einsteinSudoku.jpg');
    background-size: cover;
    background-position: center 30%;
    padding: 1.4rem 1rem 1.2rem;
    border-bottom: 4px solid var(--tnt-red);
}

#hero .hero-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    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);
}

.hero-sudoku-icon {
    height: 2.6rem;
    vertical-align: middle;
    margin-right: 0.4rem;
    filter: brightness(0) invert(1);
}


/* ─────────────────────────────────────────────────────────
   APP SECTION
───────────────────────────────────────────────────────── */
#appSection {
    background: #f4f6f0;
    padding: 1rem 0 4rem;
    min-height: 60vh;
}

#sudokuPanel { width: 360px; }


/* ─────────────────────────────────────────────────────────
   PUZZLE INFO BAR
───────────────────────────────────────────────────────── */
#puzzleInfoBar {
    background: #fff;
    border-bottom: 1px solid #c8e6c9;
    padding: 0.45rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: #546e7a;
}