/*
 * lbm_styles.css
 * TNT | TechNoviceTools | Light Bulb Moment — Page-Specific Styles
 *
 * ─── DEPENDENCY ─────────────────────────────────────────────────────────────
 * This file MUST be loaded AFTER ../styles/tnt-base-styles.css.
 * All CSS custom properties (--tnt-red, --tnt-amber, --tnt-dark, etc.)
 * and shared rules (navbar, footer, .btn-legacy) come from that file.
 * This file only adds styles unique to the LBM app itself.
 *
 * ─── SECTIONS ───────────────────────────────────────────────────────────────
 *   1. Hero
 *   2. Instructions Accordion
 *   3. Game Area Card
 *   4. Bit Position Labels Row
 *   5. Bulb Table
 *   6. Control Buttons  (All On / All Off / Go)
 *   7. Game Console     (timer · target · current value · click count)
 *   8. Stats Table
 *   9. Responsive Adjustments
 *
 * Created:  2026-06-11
 * Author:   kpendleton + GitHub Copilot
 * ────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO
   Compact dark banner — enough room for the eyebrow, title, and subtitle.
   Deliberately shorter than full-page heroes; this is an app, not a landing.
═══════════════════════════════════════════════════════════════════════════ */
#lbmHero {
    background: linear-gradient(135deg, var(--tnt-dark) 0%, #1a0a00 60%, #2a1000 100%);
    min-height: 280px;
    padding: 3.5rem 1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--tnt-amber);
}

/* Subtle radial glow behind the hero icon — evokes the bulb itself. */
#lbmHero::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at 50% 30%,
        rgba(230, 159, 77, 0.18) 0%,
        transparent 70%);
    pointer-events: none;
}

#lbmHero .hero-content {
    position: relative; /* sit above the ::before glow */
    z-index: 1;
    max-width: 680px;
}

/* The big lightbulb icon in the hero. */
#lbmHero .lbm-hero-icon {
    font-size: 3.5rem;
    color: var(--tnt-amber);
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 18px rgba(230,159,77,0.6));
    animation: lbm-glow-pulse 2.8s ease-in-out infinite;
    display: block;
}

/* Gentle glow pulse on the hero lightbulb icon. */
@keyframes lbm-glow-pulse {
    0%,  100% { filter: drop-shadow(0 0 14px rgba(230,159,77,0.55)); }
    50%        { filter: drop-shadow(0 0 28px rgba(230,159,77,0.9));  }
}

#lbmHero .hero-title {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    margin-bottom: 0.6rem;
}

#lbmHero .hero-subtitle {
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    max-width: 540px;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. INSTRUCTIONS ACCORDION
   Uses Bootstrap 5 accordion. Overrides only the colours so it matches
   the TNT dark theme.
═══════════════════════════════════════════════════════════════════════════ */
#lbmInstructions {
    background: var(--tnt-mid);
    padding: 2.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

#lbmInstructions .section-label { color: var(--tnt-amber); }
#lbmInstructions .section-title { color: #fff; }

/* Accordion button text and icon colours. */
#lbmInstructions .accordion-button {
    background: var(--tnt-dark);
    color: var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,0.1);
}

#lbmInstructions .accordion-button:not(.collapsed) {
    background: #1a0a00;
    color: var(--tnt-amber);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}

/* The Bootstrap default collapse arrow is white — keep it. */
#lbmInstructions .accordion-button::after {
    filter: invert(1);
}

#lbmInstructions .accordion-body {
    background: #0f1220;
    color: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
    font-size: 0.95rem;
    line-height: 1.7;
}

#lbmInstructions .accordion-body strong {
    color: var(--tnt-amber);
}

#lbmInstructions .accordion-body code {
    background: rgba(230,159,77,0.15);
    color: var(--tnt-amber);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. GAME AREA CARD
   The outer container that holds the bit table, controls, and game console.
   Dark card feel, consistent with the TNT dark-section aesthetic.
═══════════════════════════════════════════════════════════════════════════ */
#lbmGame {
    background: var(--tnt-dark);
    padding: 2.5rem 1rem 3rem;
}

/* Section headings inside the game area (labels above each sub-section). */
#lbmGame .lbm-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tnt-amber);
    margin-bottom: 0.3rem;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. BIT POSITION LABELS ROW
   Shows 2^7 through 2^0 above each bulb, plus a "SIGN" badge over bit 7.
═══════════════════════════════════════════════════════════════════════════ */
#bitsTable {
    /* Horizontally centered, auto-margins for responsive overflow scroll. */
    margin: 0 auto 1.25rem;
    border-collapse: collapse;
    table-layout: fixed;   /* equal column widths regardless of content */
}

/* All cells: tight padding, centred content. */
#bitsTable td, #bitsTable th {
    padding: 4px 2px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Header row: bit position labels (2^7 … 2^0). */
#bitsTable tr:first-child {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-family: var(--boogaloo);
    font-size: 0.85rem;
}

/* Bulb row: background slightly lighter than the header row. */
#bitsTable tr#bulbs {
    background: rgba(255,255,255,0.03);
}

/* Sign bit column (bit 7) — crimson background draws the eye.
 * This is the MSB in two's-complement encoding; it carries sign information,
 * not magnitude, which is conceptually distinct and worth highlighting. */
.signBit {
    background-color: var(--tnt-red) !important;
}

/* Sign-bit label within the header row. */
.signBit .lbm-sign-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
}

/* Bulb images: fluid size that scales with the viewport width.
 * clamp(min, preferred, max):
 *   min  = 36px (prevents tiny unusable icons on very small phones)
 *   pref = 9vw  (1/9th of viewport width — 8 bulbs + some gap)
 *   max  = 80px (hard ceiling; images degrade above this size anyway) */
#bitsTable tr#bulbs img {
    display: block;
    width: clamp(36px, 9vw, 80px);
    height: clamp(36px, 9vw, 80px);
    cursor: pointer;
    margin: 0 auto;
    transition: transform 0.1s, filter 0.1s;
}

/* Hover: tiny lift + brightness boost so the bulb feels "clickable". */
#bitsTable tr#bulbs img:hover {
    transform: scale(1.08);
    filter: brightness(1.15);
}

/* Active (mousedown): slight press-down effect. */
#bitsTable tr#bulbs img:active {
    transform: scale(0.96);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CONTROL BUTTONS  (All On / All Off / Go!)
   Centred row below the bulb table.
═══════════════════════════════════════════════════════════════════════════ */
#lbmControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}

/* "All On" and "All Off" — amber outline style. */
.btn-lbm-secondary {
    background: transparent;
    border: 2px solid var(--tnt-amber);
    color: var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size: 1rem;
    padding: 0.45rem 1.4rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    letter-spacing: 0.5px;
}

.btn-lbm-secondary:hover:not(:disabled) {
    background: var(--tnt-amber);
    color: var(--tnt-dark);
}

.btn-lbm-secondary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* "Go!" button — prominent TNT red, changes to grey while a game is active. */
#goBtn {
    background: var(--tnt-red);
    border: 2px solid var(--tnt-red);
    color: #fff;
    font-family: var(--boogaloo);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.55rem 2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    letter-spacing: 0.5px;
    min-width: 110px;
}

#goBtn:hover:not(:disabled) {
    background: var(--tnt-red-dark);
    border-color: var(--tnt-red-dark);
    transform: scale(1.03);
}

/* JS adds .active class to goBtn while a game is in progress. */
#goBtn.active {
    background: #555;
    border-color: #555;
    cursor: not-allowed;
    transform: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. GAME CONSOLE
   Hidden by JS until a game starts. Shows elapsed time, the target value,
   the current binary value + decimal sum, and the click counter.
═══════════════════════════════════════════════════════════════════════════ */
#gameConsoleDiv {
    text-align: center;
    margin-top: 1.5rem;

    /* Rounded dark panel with an amber left-border accent. */
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(230,159,77,0.25);
    border-left: 4px solid var(--tnt-amber);
    border-radius: 8px;
    padding: 1.25rem 1rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Elapsed time — monospace so the digits don't "jump" as seconds tick. */
#etimePara {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 0.5rem;
    letter-spacing: 2px;
}

/* Target value — blue-ish, italic, prominent. */
#targetValuePara {
    font-family: var(--boogaloo);
    font-size: 1.6rem;
    color: #6db3f2;
    font-style: italic;
    margin: 0 0 0.4rem;
}

/* Current binary string => decimal value. */
#sumBitsPara {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.35rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.35rem;
}

/* Colour states: amber = mismatch, green = match! */
#sumBitsPara.unequal { color: var(--tnt-amber); }
#sumBitsPara.equal   { color: #3ddc84; }          /* Android green */

/* Congrats checkmark image — shown only on win, sized and centred. */
#congrats {
    width: 40px;
    height: auto;
    display: none; /* shown by JS when the player wins */
    vertical-align: middle;
    margin-left: 10px;
}

/* Click counter — small, muted, beneath the main value. */
#clickCountPara {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    margin: 0.3rem 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. STATS TABLE
   Hidden by JS until the player wins their first game.
   Monospace font columns for clean digit alignment.
═══════════════════════════════════════════════════════════════════════════ */
#lbmStats {
    background: var(--tnt-mid);
    padding: 2.5rem 1rem 3rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

#lbmStats .section-label { color: var(--tnt-amber); }
#lbmStats .section-title { color: #fff; }

/* Scrollable wrapper — prevents the table from breaking the page layout
 * on narrow screens where 7 columns cannot possibly fit at normal size. */
.lbm-stats-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#statsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 480px; /* allows horizontal scroll below this width */
}

/* Header row: dark background, amber text. */
#statsTable thead tr {
    background: var(--tnt-dark);
    color: var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size: 0.88rem;
    letter-spacing: 0.5px;
}

#statsTable th {
    padding: 0.6rem 0.8rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}

/* Data rows: alternate between two dark shades for readability. */
#statsTable tbody tr:nth-child(odd)  { background: rgba(255,255,255,0.04); }
#statsTable tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

#statsTable td {
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.82);
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
}

/* Binary string column — left-align looks better for bit strings. */
#statsTable td:nth-child(3) {
    text-align: left;
    letter-spacing: 1.5px;
}

/* Game number column — centred, slightly muted. */
#statsTable td:first-child {
    text-align: center;
    color: rgba(255,255,255,0.45);
}

/* Click score column — highlight exceptional (≤ 1.0) scores in green. */
#statsTable td.score-optimal {
    color: #3ddc84;
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. RESPONSIVE ADJUSTMENTS
   Fine-tuning for very small screens. The bulb table shrinks via clamp()
   in Section 4, so only supplementary tweaks are needed here.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Stack the control buttons vertically on phones. */
    #lbmControls { flex-direction: column; }

    /* Slightly smaller console font on phones. */
    #sumBitsPara     { font-size: 1.1rem; }
    #targetValuePara { font-size: 1.3rem; }
}