/* ==========================================
   THE MASTER PAINT PALETTE (:root)
   ELI5: Instead of carrying 7 different buckets of paint around the house, we put them all here.
   If you ever want to change the "Hacked Edge Red" to Blue, you only change it right here,
   and the entire website updates instantly! 
   ========================================== */
:root {
    --he-bg-black: #0a0a0a;
    --he-panel-bg: #141414;
    --he-text-white: #e8e5e0;
    --he-primary-red: #b91c1c;
    --he-border-red: #dc2626;
    --he-control-grey: #1e1e1e;
    --he-terminal-green: #00ff41;
}

/* ==========================================
   THE WALLS AND FLOOR (body & container)
   ELI5: 'body' is the whole screen. We paint it black, use a typewriter font (Courier), 
   and make all text white by default. The container keeps the app from stretching too wide 
   on giant monitors, keeping the text readable.
   ========================================== */
.he-generator-container { max-width: 900px; margin: 0 auto; padding: 0 2rem; font-family: 'Courier New', Courier, monospace; color: var(--he-text-white); font-size: 18px; line-height: 1.6; }

/* ==========================================
   THE BIG SIGN OUT FRONT (.main-title)
   ELI5: We center it, make it red, force it to be UPPERCASE, and stretch the letters out 
   (letter-spacing) so it looks like a retro computer terminal.
   ========================================== */
.main-title {
    font-family: 'Cinzel', serif;
    text-align: center;
    color: var(--he-primary-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 32px;
    border-bottom: 2px solid var(--he-control-grey);
    padding-bottom: 20px;
}

.chargen-notice {
    background: var(--he-control-grey);
    border: 1px solid var(--he-border-red);
    border-left: 4px solid var(--he-border-red);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    color: var(--he-text-white);
}

.chargen-notice strong {
    color: var(--he-border-red);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chargen-notice code {
    background: #0a0a0a;
    color: var(--he-terminal-green);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 15px;
}

.chargen-notice p {
    margin: 0 0 4px;
}

.chargen-notice p:last-child {
    margin-bottom: 0;
}

.chargen-coming-soon {
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid rgba(220, 38, 38, 0.25);
    font-size: 13px;
    color: var(--he-text-grey, #9a9a9a);
}

/* ==========================================
   THE DASHBOARD & BUTTONS
   ELI5: We put the controls in a dark grey box with rounded corners. The button has a 
   'transition: 0.2s' so when you hover, it smoothly changes color instead of snapping.
   ========================================== */
.controls { background: var(--he-panel-bg); padding: 20px; border-radius: 5px; margin-bottom: 25px; text-align: center; border: 2px solid var(--he-control-grey); }
button { background-color: var(--he-primary-red); color: var(--he-text-white); border: 2px solid transparent; padding: 14px 28px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: 0.2s; font-family: 'Courier New', Courier, monospace; font-size: 18px; }
button:hover { background-color: transparent; border: 2px solid var(--he-border-red); color: var(--he-border-red); }

.level-toggle-container { margin-bottom: 18px; font-size: 18px; }
.locked-label { color: #444; }
.print-btn { background-color: var(--he-control-grey); margin-left: 10px; }

/* ==========================================
   THE CHARACTER SHEET BOX & HEADERS
   ELI5: This is the "piece of paper" sitting on the dark desk. We give it a thick red border
   and some padding so the text doesn't touch the edges. The dashed borders separate the chapters.
   ========================================== */
.character-sheet { background: var(--he-panel-bg); padding: 30px; border: 3px solid var(--he-border-red); border-radius: 5px; margin-bottom: 35px; }
h2 { text-align: center; border-bottom: 3px solid var(--he-border-red); color: var(--he-border-red); text-transform: uppercase; margin-top: 0; font-size: 26px; padding-bottom: 8px; }
.char-detail-label { color: var(--he-border-red); font-weight: bold; }

.section-header-container { margin-top: 30px; }
.section-title {
    color: var(--he-border-red); 
    margin-top: 0; 
    margin-bottom: 12px;
    text-align: center; 
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px dashed #333;
    padding-bottom: 8px;
}
.section-title.no-border { border-bottom: none; margin-bottom: 0; }

.reminder-text {
    text-align: center; font-size: 15px; color: var(--he-text-white); font-style: italic;
    margin-top: 4px; margin-bottom: 15px; letter-spacing: 1px;
}
.reminder-text.dashed-border { border-bottom: 1px dashed #333; padding-bottom: 8px; }

/* ==========================================
   THE ICE CUBE TRAY (.stats-grid)
   ELI5: 'display: grid' turns this area into a perfect grid. 
   'repeat(3, 1fr)' means: Make exactly 3 columns, and give each 1 Fraction of the space.
   ========================================== */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.stat-box { background: var(--he-control-grey); padding: 15px; border: 1px solid var(--he-primary-red); text-align: center; }
.stat-name { display: block; color: var(--he-border-red); font-weight: bold; font-size: 18px; margin-bottom: 4px; }
.stat-value { font-size: 36px; font-weight: bold; }

/* ==========================================
   THE RUBBER BAND (.detail-row)
   ELI5: 'justify-content: space-between' acts like a rubber band. It pushes the Label 
   all the way left, and the Data all the way right, keeping everything perfectly aligned.
   ========================================== */
.details-section { margin: 25px 0; border-top: 1px solid #333; padding-top: 20px; font-size: 18px; }
.detail-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid #1a1a1a; padding-bottom: 8px; }
.alignment-box { text-transform: uppercase; color: var(--he-text-white); font-weight: bold; letter-spacing: 1px; }

/* ==========================================
   CHARACTER DATA VALUES (Typography / The Label Maker)
   ELI5: These are tiny, single-purpose tools. Instead of writing CSS for every single item 
   on the sheet, we just slap class="val-danger" on anything we want to be red and bold.
   ========================================== */
.val-bold { font-weight: bold; }
.val-upper { text-transform: uppercase; }
.val-italic { font-style: italic; color: #888; }
.val-highlight { font-weight: bold; color: var(--he-text-white); }
.val-highlight-upper { font-weight: bold; color: var(--he-text-white); text-transform: uppercase; }
.val-highlight-right { font-weight: bold; color: var(--he-text-white); text-align: right; }
.val-subtext { font-size: 15px; color: #aaa; }
.val-success { font-weight: bold; color: var(--he-terminal-green); }
.val-danger { font-weight: bold; color: var(--he-border-red); }

/* ==========================================
   WEAPON SUB-ROWS
   ELI5: Indents the weapon details (like Weight and Damage Type) so they look like 
   they belong to the Weapon above them.
   ========================================== */
.weapon-sub-row { padding-left: 20px; margin-top: -4px; }
.weapon-sub-row.tight { margin-top: -8px; }
.weapon-sub-row.last-sub-row { border-bottom: 1px dashed #222; margin-bottom: 10px; padding-bottom: 6px; }

/* ==========================================
   STRUCTURED INVENTORY
   ELI5: We give the inventory area a very faint white tint (rgba background) so it stands 
   out slightly from the rest of the sheet. Flexbox makes the items hug the left and right edges.
   ========================================== */
.inventory-container {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03); 
    border-radius: 4px;
}

.inv-group {
    margin-bottom: 22px; 
}

.inv-group-header {
    color: var(--he-border-red);
    font-weight: bold;
    font-size: 18px; 
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--he-control-grey); 
    margin-bottom: 10px;
    padding-bottom: 4px;
    display: block;
}

.inv-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px; 
    margin-bottom: 10px; 
    border-bottom: 1px solid #222; 
    padding-bottom: 8px;
}

.inv-slot-label {
    color: #aaa; 
    font-size: 15px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.inv-item-name {
    text-align: right;
    color: var(--he-text-white);
    font-weight: bold; 
}

/* ==========================================
   ALPHABETIZED SKILLS GRID
   ELI5: 'grid-auto-flow: column' forces the skills to list down the left side 
   first, before spilling over to the right side, just like a phone book!
   ========================================== */
.skills-section { margin: 25px 0; border-top: 1px dashed var(--he-border-red); padding-top: 20px; }
.skills-grid { 
    display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; 
    grid-template-rows: repeat(7, auto); gap: 8px 30px; font-size: 18px; margin-top: 15px;
}
.skill-row { display: flex; justify-content: space-between; border-bottom: 1px solid #1a1a1a; padding-bottom: 8px; margin-bottom: 8px; }
.skill-name { color: var(--he-text-white); }
.skill-value { font-weight: bold; color: var(--he-border-red); }

/* ==========================================
   SAVING THROWS (A 5-column ice cube tray)
   ELI5: Same as the core stats, but we squeeze 5 columns in here to hold the 5 saving throws.
   ========================================== */
.sub-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; border-top: 1px solid var(--he-control-grey); padding-top: 20px; margin-top: 20px; }
.save-box { text-align: center; font-size: 24px; font-weight: bold; }
.save-name { color: var(--he-border-red); display: block; font-weight: bold; font-size: 16px; letter-spacing: 1px; margin-bottom: 6px; }

/* ==========================================
   THE TERMINAL LOG & THE CUSTOM ELEVATOR
   ELI5: 'overflow-y: auto' creates a scrollbar. The ::-webkit lines let us custom-paint 
   that scrollbar so it looks like a retro hacker terminal instead of a shiny Windows one.
   ========================================== */
#processLog { background: #050505; border: 1px solid #333; padding: 20px; font-size: 16px; color: var(--he-terminal-green); min-height: 200px; max-height: 300px; overflow-y: auto; border-radius: 4px; }
#processLog::-webkit-scrollbar { width: 8px; }
#processLog::-webkit-scrollbar-track { background: #000; }
#processLog::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
#processLog::-webkit-scrollbar-thumb:hover { background: var(--he-primary-red); }

.log-header { color: var(--he-border-red); font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #222; display: block; margin-bottom: 12px; letter-spacing: 2px; font-size: 18px; }
.log-entry { margin-bottom: 8px; border-left: 2px solid #111; padding-left: 10px; line-height: 1.5; }

/* ==========================================
   LOADING DOTS — animated trailing dots on the "Contacting Ravenkeep…"
   line so visitors see the system is working while the Edge Function
   spins up. Dot count cycles 1→2→3→1 in JS (engine.js _startLoadingDots).
   The min-width keeps the line from horizontally wobbling as the count
   changes; left-align so the dots grow rightward instead of jumping.
   Heath 2026-05-08.
   ========================================== */
.loading-dots {
    display: inline-block;
    min-width: 1.4em;
    text-align: left;
}

/* ==========================================
   STEP METHOD NOTES — italic dim sub-line that follows each "STEP N:"
   phase header to explain the method used (e.g. "3d6 in order, straight
   down" under STEP 1). Visually subordinate to the phase header — the
   audience reads the bold red header first, then the italic green sub-
   line clarifies the rule. ↳ arrow prefix gives the visual indent.
   See engine.js STEP_METHODS map for content + STEP detection logic.
   Heath 2026-05-08.
   ========================================== */
.log-method-note {
    color: var(--he-terminal-green);
    font-style: italic;
    font-size: 0.92em;
    opacity: 0.7;
    letter-spacing: 0.3px;
}
.log-phase-header { color: var(--he-border-red); font-weight: bold; text-transform: uppercase; margin-top: 15px; border-bottom: 1px solid #222; display: block; padding-bottom: 4px; font-size: 18px; }
.log-data { color: var(--he-text-white); font-weight: bold; }
.log-success { color: var(--he-terminal-green); font-weight: bold; text-shadow: 0 0 5px rgba(0, 255, 65, 0.5); }
#outInit { letter-spacing: 1px; text-shadow: 0 0 5px rgba(0, 255, 65, 0.3); }

/* ==========================================
   THE PRINTER SETTINGS
   ELI5: The Rule of the Cascade! CSS reads top-to-bottom. We put this at the absolute 
   bottom so it has the final say over all other colors when someone hits "Print".
   It turns the background white, text black, and hides the messy logs so it prints beautifully.
   ========================================== */
@media print {
    .controls, #processLog, .main-title, .nav {
        display: none !important;
    }

    body { 
        background-color: white !important; 
        color: black !important; 
        font-size: 14px !important;
    }

    .he-generator-container { max-width: 100% !important; }

    .character-sheet { 
        border: 2px solid black !important; 
        background: white !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    .char-detail-label, .section-title, h2, .stat-name, .skill-value, .save-name,
    .val-highlight, .val-highlight-upper, .val-highlight-right, 
    .val-success, .val-danger, .val-upper, .val-bold, .val-italic,
    .inv-group-header, .inv-slot-label, .inv-item-name { 
        color: black !important; 
    }

    #outInit { color: black !important; text-shadow: none !important; }

    .stat-box { 
        background: #f0f0f0 !important; 
        border: 1px solid black !important; 
    }
}

/* ==========================================
   UTILITY & STRUCTURAL CLASSES
   ELI5: These are Lego blocks! Because we stripped <br> tags and inline HTML styles,
   we put these tiny classes here to stick onto any element that needs space or alignment.
   ========================================== */
.section-gap { margin-bottom: 24px !important; }
.val-highlight-normal { font-weight: normal; color: var(--he-text-white); }
.top-align { align-items: flex-start; }
.spell-list-text { text-align: right; line-height: 1.4; color: #888; font-style: italic; }
.ammo-tracker { color: var(--he-terminal-green); }
.ammo-name-subtext { font-size: 14px; opacity: 0.8; margin-left: 8px; font-weight: normal; }
.saving-throws-section { margin-top: 25px; }

/* --- TERMINAL PULSE ANIMATION --- */
.pulse-terminal {
    animation: terminalPulse 1.2s infinite;
    font-weight: bold;
    color: #4ade80; 
    font-size: 1.4em;      /* <-- Makes the text 40% larger */
    margin-top: 15px;      /* <-- Gives it some breathing room */
    display: block;
}

@keyframes terminalPulse {
    0% { opacity: 1; text-shadow: 0 0 4px #4ade80; }
    50% { opacity: 0.4; text-shadow: 0 0 12px #4ade80; }
    100% { opacity: 1; text-shadow: 0 0 4px #4ade80; }
}

/* ==========================================
   MOBILE RESPONSIVE FIXES
   ELI5: When the screen gets smaller than 600px (like a phone), we change the rules.
   We force the skills grid to become 1 single column so words don't get chopped in half.
   ========================================== */
@media screen and (max-width: 600px) {
    /* Make the Skills a single column and reset the flow */
    .skills-grid {
        grid-template-columns: 1fr; 
        grid-auto-flow: row; /* <-- THIS IS THE MAGIC FIX */
        grid-template-rows: auto;   
        gap: 12px;                  
    }

    /* Force the numbers to never break onto two lines */
    .skill-value {
        white-space: nowrap; 
    }

    /* If the main stats box looks cramped, we can stack that too */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Make the saving throws slightly smaller so they fit 5-across on a phone */
    .sub-stats-grid {
        gap: 5px;
    }
    .save-box {
        font-size: 18px; 
    }
    .save-name {
        font-size: 12px;
    }
}