/*
 * ============================================================
 *  TNT | Bingo — S.P.A.R.K. Edition
 *  File:    bingoSPARKStyles.css
 *  Coder:   KLP + GitHub Copilot
 *  Created: 2026-07-13
    Updated: 2026-07-16
 *
 *  Festive game palette — colorful, energetic, fun.
 *  Requires CSS custom properties from tnt-base-styles.css.
 *  Replaces and supersedes the legacy bingo-styles.css.
 * ============================================================
 */


/* ── Local palette additions ── */
:root {
    --bingo-red:   #D32F2F;
    --bingo-blue:  #0177AA;
    --bingo-gold:  #F5A623;
}


/* ─────────────────────────────────────────────────────────
   HERO — dark festive overlay on the bingo-balls image.
   Games benefit from drama; a dark overlay keeps the neon
   ball colors from competing with the text while adding
   an energetic, casino-night feel.
───────────────────────────────────────────────────────── */
#hero {
    min-height: 140px;
    background-image:
        linear-gradient(135deg,
            rgba(0, 10, 60, 0.58)  0%,
            rgba(180, 0, 30, 0.38) 100%),
        url('../images/bingo-balls.jpg');
    background-size: cover;
    background-position: center;
    padding: 1.2rem 1rem 1rem;
    border-bottom: 4px solid var(--tnt-red);
}

#hero .hero-title {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    margin-bottom: 0.5rem;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85);
}

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

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

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


/* ─────────────────────────────────────────────────────────
   APP SECTION — preserves the festive tiled background
   the original game used, but scoped to the app section
   rather than the entire page body.
───────────────────────────────────────────────────────── */
#appSection {
    background-image: url('../images/Festive-Background.webp');
    background-repeat: repeat;
    padding: 1.5rem 0 4rem;
    min-height: 60vh;
}


/* ─────────────────────────────────────────────────────────
   BINGO CARD CONTAINER
───────────────────────────────────────────────────────── */
div#introDiv {
    max-width: 800px;
    margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────
   CAGE OPERATOR PANEL
   Lives inside div#intro alongside the card table.
   Container styling (background, border-radius, shadow)
   removed — the white intro frame provides the enclosure.
   Amber right border acts as the visual separator.
───────────────────────────────────────────────────────── */
#bingoCageDiv {
    padding: 0.5rem 0.75rem 0.75rem;
    border-right: 2px solid var(--tnt-amber);
    margin-right: 0.5rem;
    text-align: center;
}

#ballDrawnHeading {
    color: var(--tnt-red);
    font-family: var(--boogaloo);
    font-size: 3rem;
    min-height: 3.5rem;
    display: block;
    text-align: center;
}

.cage-img {
    width: 90px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}

.cage-img:hover {
    transform: scale(1.08) rotate(-5deg);
}


/* ─────────────────────────────────────────────────────────
   CONTROLS BAR
───────────────────────────────────────────────────────── */
div#controls {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;
}


/* ─────────────────────────────────────────────────────────
   TABLE HEADER COLOR
   Bootstrap 5.3 applies background-color via --bs-table-bg
   directly to each <td>/<th> cell (not the <thead> parent),
   so the fix must target the cells themselves.
───────────────────────────────────────────────────────── */
.bg-custom-color1,
.bg-custom-color1 td,
.bg-custom-color1 th    { background-color: #E22200 !important; color: #fff !important; }
.text-custom-color1     { color: #E22200; }


/* ─────────────────────────────────────────────────────────
   MEDIA QUERIES
───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    p, figcaption { font-size: 0.8em; }

    table#bingoCard { width: 100% !important; }
}

@media (min-width: 992px) {
    #hero {
        background-position: center -20px;   /* reduced from -60px to suit shorter hero */
    }
}