/* ==========================================================================
   0. UNIVERSAL RESET
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   1. VARIABLES & SETUP (from Complete Stylesheet)
   ========================================================================== */
:root {
	--font-primary: "EB Garamond", serif;
	--font-display: "Grenze", serif;
	--color-white: #fff;
	--color-black: #000;
	--color-gold-primary: #FDB931;
	--color-brown-dark: #783000;
	--color-brown-medium: #9f7928;

	--gradient-gold-animated: repeating-linear-gradient(to right, #FDB931 0%, #be8c3c 8%, #FEDB37 18%, #d3b15f 27%, #8A6E2F 35%, #9f7928 40%, #faf0a0 50%, #d3b15f 58%, #D1B464 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #5d4a1f 100%);
}


/* ==========================================================================
   2. STYLES FOR MONSTER BURNER
   ========================================================================== */
:root {
	--bg-color: #f0f2f5;
	--text-color: #333;
	--card-bg: white;
	--border-color: #ccc;
	--input-bg: white;
	--input-border: #ccc;
	--readonly-bg: #e9ecef;
	--header-border: #e2e8f0;
	--button-primary-bg: #4f46e5;
	--button-primary-hover: #4338ca;
	--button-secondary-bg: #64748b;
	--button-secondary-hover: #475569;
	--button-tertiary-bg: #16a34a;
	--button-tertiary-hover: #15803d;
}

body.dark-mode {
    --color-white: var(--color-gold-primary);
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --card-bg: #2c2c2c;
    --border-color: #555;
    --input-bg: #3a3a3a;
    --input-border: #555;
    --readonly-bg: #4b4b4b;
    --header-border: #444;
    --button-primary-bg: #5a52d6;
    --button-primary-hover: #4e46b8;
    --button-secondary-bg: #718096;
    --button-secondary-hover: #5a677a;
    --button-tertiary-bg: #22c55e;
    --button-tertiary-hover: #16a34a;
}

body {
	font-family: sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 0;
	font-size: 14px;
	transition: background-color 0.3s, color 0.3s;
    /* Removed text-align: center and padding: 8em 0 from complete stylesheet to avoid conflict */
}
.container {
	max-width: 1200px;
	margin: 0 auto;
    padding: 15px;
}
#card-form-wrapper {
	flex: 1;
	min-width: 600px;
    margin-top: 5em; /* Added margin to push content below fixed nav */
    margin-bottom: 5em; /* Added margin to push content above fixed footer */
}
.output-area {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
}
#card-form {
	background: var(--card-bg);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: background-color 0.3s;
}
.form-section {
	grid-column: 1 / -1;
}
h1 {
    font-family: var(--font-display);
    text-transform: uppercase;
    text-align: center;
    color: var(--text-color); /* Uses the page's text color variable */
    font-size: 4em; /* Adjusted from 7em to better fit the form layout */
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.5em; /* Adds some space below the title */
}
h2 { font-family: var(--font-display); border-bottom: 2px solid var(--header-border); padding-bottom: 5px; margin-top: 15px; margin-bottom: 10px; font-size: 1.5em; }
fieldset { border: 1px solid var(--border-color); border-radius: 4px; padding: 10px 15px; margin: 0 0 15px 0; }
legend { font-weight: 600; padding: 0; font-size: 1.5em; font-family: var(--font-display); }
label { display: block; margin-bottom: 4px; font-weight: 500; }
input[type="text"], input[type="number"], select, textarea {
	width: 100%; padding: 6px; box-sizing: border-box; border: 1px solid var(--input-border);
	border-radius: 4px; font-size: 1em; background-color: var(--input-bg); color: var(--text-color);
}
input[readonly] { background-color: var(--readonly-bg); cursor: not-allowed; }
input, select, textarea { margin-bottom: 8px; }
textarea { resize: vertical; min-height: 60px; }
#output-html { background-color: var(--input-bg); color: var(--text-color); }
.checkbox-group label, .question-group label { display: flex; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 5px; font-weight: normal;}
.checkbox-group input, .question-group input { width: auto; margin-bottom: 0; }
.stat-group {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 8px; border: 1px solid var(--header-border); border-radius: 4px; margin-bottom: 8px;
}
.stat-group > label { margin-bottom: 0; font-weight: bold; flex-shrink: 0; }
.stat-input { display: flex; align-items: center; gap: 5px; }
.stat-input .prefix-label { font-weight: bold; font-size: 0.9em; }
.stat-input input[type="number"], .stat-input input[type="text"] { width: 55px; margin-bottom: 0; }
.stat-input label { margin: 0; font-weight: normal; font-size: 0.8em; }
.button-group { display: flex; gap: 10px; margin-top: 15px; }
button {
	padding: 8px 12px; border: none; border-radius: 4px; font-size: 1em; cursor: pointer;
	background-color: var(--button-primary-bg); color: white;
}
button:hover { background-color: var(--button-primary-hover); }
button.secondary { background-color: var(--button-secondary-bg); }
button.secondary:hover { background-color: var(--button-secondary-hover); }
button.tertiary { background-color: var(--button-tertiary-bg); }
button.tertiary:hover { background-color: var(--button-tertiary-hover); }
button.remove-btn { font-size: 0.8em; padding: 2px 5px; background-color: #dc2626; margin-left: auto; }
#output-html { width: 100%; height: 300px; font-family: monospace; font-size: 12px; border: 1px solid var(--border-color); border-radius: 4px; white-space: pre; overflow-wrap: normal; overflow-x: scroll; }
.dynamic-entry { border: 1px solid var(--header-border); padding: 10px; border-radius: 4px; margin-bottom: 10px; }
.dynamic-item { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; }
small { color: #555; display: block; margin-top: -5px; margin-bottom: 8px; }
.weapon-range-grid-melee { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.weapon-range-grid-missile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stat-accordion-row { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 8px;}
.stat-accordion-row .stat-group { flex-shrink: 0; margin-bottom: 0; }
.stat-accordion-row details { flex-grow: 1; border: 1px solid var(--header-border); border-radius: 4px; padding: 8px; }
.stat-accordion-row summary { font-weight: bold; cursor: pointer; }
.section-header { display: flex; justify-content: space-between; align-items: center; }
.section-header h2 { margin-top: 0; margin-bottom: 10px; }
details.form-section-accordion { border: 1px solid var(--border-color); border-radius: 4px; padding: 10px 15px; margin: 0 0 15px 0; }
details.form-section-accordion summary { font-weight: bold; font-size: 1.1em; cursor: pointer; padding: 0; margin: -10px -15px; padding: 10px 15px; }
details[open].form-section-accordion summary { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.two-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
.full-width-row { grid-column: 1 / -1; }

/* Dark Mode Toggle Styles */
.dark-mode-toggle { position: fixed; bottom: 3.5rem; right: 20px; z-index: 1000; }
.dark-mode-toggle label { display: inline-block; width: 50px; height: 26px; position: relative; }
.dark-mode-toggle input { opacity: 0; width: 0; height: 0; }
.dark-mode-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 26px; transition: .4s; }
.dark-mode-toggle .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
.dark-mode-toggle input:checked + .slider { background-color: #000; }
.dark-mode-toggle input:checked + .slider:before { transform: translateX(24px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* ==========================================================================
   3. NAVIGATION & FOOTER
   ========================================================================== */
.footer {
	font-family: var(--font-display);
	text-transform: uppercase;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--color-brown-dark);
	color: var(--color-white);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.75em 0;
	z-index: 998;
}

.footer a {
	color: var(--color-white);
}

.footer a:hover {
	color: var(--color-gold-primary);
}

/* --- Base Navigation & Menu Styles --- */
.navigation-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gradient-gold-animated);
    background-size: 150%;
    animation: MoveBackgroundPosition 30s ease-in-out infinite;
    padding: 1em;
    font-family: var(--font-display);
    font-size: 2em;
    z-index: 96;
    transition: padding 0.3s ease;
}

.navigation-menu a {
    color: var(--color-white);
    text-decoration: none;
}

.navigation-menu__labels {
    list-style: none;
    display: flex;
    gap: .75em;
    margin: 0;
    padding: 0;
}

.navigation-menu__labels > li > a:hover {
    color: var(--color-brown-dark);
}

.site-identity {
    font-size: 1em;
    display: block;
    padding-right: 1em;
}

/* --- Base Mobile Menu (Hamburger) Styles --- */
#toggleMenu {
    /* Correctly hide the checkbox while keeping it functional */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hamburger, #closeIcon {
    display: none;
    cursor: pointer;
    position: absolute;
    color: var(--color-white);
}

.hamburger {
    font-family: var(--font-display);
    right: -1rem;
    top: 50%;
    transform: translateY(-33%);
    font-size: 30px;
}

.hamburger img {
    width: 6rem; /* Sets the image width */
    height: auto; /* Keeps the image from stretching */
}

#closeIcon {
    top: 20px;
    right: 20px;
    font-size: 5rem;
    font-family: var(--font-primary);
}

/* ==========================================================================
   4. DARK MODE FOR NAV/FOOTER
   ========================================================================== */
body.dark-mode .footer {
	background-color: #000000;
}
body.dark-mode a {
  color: #870c01;
}

body.dark-mode a:hover {
  color: #d31302;
}


/* ==========================================================================
   5. ANIMATIONS
   ========================================================================== */
@keyframes MoveBackgroundPosition {
	0%, 100% { background-position: 0% 50% }
	16%      { background-position: 12% 50% }
	23%      { background-position: 8% 50% }
	37%      { background-position: 45% 50% }
	42%      { background-position: 37% 50% }
	50%      { background-position: 80% 50% }
	57%      { background-position: 84% 49% }
	73%      { background-position: 62% 50% }
}

/* ==========================================================================
   6. RESPONSIVE STYLES FOR NAV
   ========================================================================== */

@media screen and (max-width: 1920px) {
    .navigation-menu {
        padding: 0.75em;
        font-size: 1.6em;
    }
}

@media screen and (max-width: 1280px) {
    .navigation-menu {
        padding: 0.5em;
        font-size: 1.4em;
    }
}

/* --- Mobile View (768px) --- */
@media screen and (max-width: 768px) {
    .navigation-menu {
        background: transparent;
        padding: 0;
    }

    .navigation-menu__labels,
    .site-identity {
        display: none;
    }

    .hamburger {
        display: block;
        top: 20px;
    }

    #toggleMenu:checked ~ .main-menu {
        font-size: 2em; /* Matches the original font size for the mobile menu */
        text-align: center; /* Ensures the text itself is centered */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
       gap: 1.25em;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: var(--gradient-gold-animated);
        background-size: 150%;
        animation: MoveBackgroundPosition 30s ease-in-out infinite;
        z-index: 100;
    }

    #toggleMenu:checked ~ .main-menu #closeIcon {
        display: block;
    }

    #toggleMenu:checked ~ .main-menu .navigation-menu__labels,
    #toggleMenu:checked ~ .main-menu .site-identity {
        display: block; /* Makes them visible inside the overlay */
    }

    /* Add this rule to stack the links vertically inside the open menu */
    #toggleMenu:checked ~ .main-menu .navigation-menu__labels {
        flex-direction: column;
        gap: 1.5em;
        font-size: 1.2em;
    }
}

@media screen and (min-width: 1921px) {
    .navigation-menu {
        font-size: 1.5rem;
        padding: 0.75em 2em;
    }
}

/* ==========================================================================
   7. MOBILE RESPONSIVE STYLES
   ========================================================================== */
@media screen and (max-width: 800px) {

    /* --- General Layout & Typography --- */

    #card-form-wrapper {
        min-width: 0;
        margin-top: 4em;
        margin-bottom: 4em;
    }

    h1 {
        font-size: 2.5em;
    }

    /* --- Grid Stacking --- */

    .two-column-grid {
        grid-template-columns: 1fr;
    }

    #card-form > fieldset:first-of-type > div {
        grid-template-columns: 1fr;
    }

    #card-form > fieldset:first-of-type > div > div:nth-child(2),
    #card-form > fieldset:first-of-type > div > div:nth-child(3) {
        display: none;
    }

    /* --- Flexbox and Input Adjustments --- */
    
    .stat-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .button-group {
        flex-direction: column;
        gap: 15px;
    }

    .button-group button {
        width: 100%;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* **NEW** Hides all speeds except for the first one (Stride) on mobile */
    .full-width-row > div > .stat-input:not(:first-child) {
        display: none;
    }

    /* --- Dark Mode Toggle Position --- */

    .dark-mode-toggle {
        bottom: 4.5rem;
    }
}

/* ==========================================================================
   8. INSTRUCTIONS CONTAINERS
   ========================================================================== */

    .rules-toggle-container {
        text-align: center;
        margin-bottom: 15px;
    }

    #rules-fieldset {
        margin-bottom: 20px;
        background-color: var(--card-bg); /* Use the card background color */
        border-color: var(--border-color); /* Use the border color */
        line-height: 1.6;
    }

    #rules-fieldset p {
        margin-bottom: 15px; /* Adjust this value as needed */
    }

    .rules-section {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px dashed var(--border-color);
    }

    .rules-section:first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .rules-section h4 {
        font-size: 1.1em;
        margin-bottom: 5px;
    }

    .rules-section ul {
        list-style-type: disc;
        padding-left: 20px;
        margin-bottom: 10px;
    }

    .rules-section li {
        margin-bottom: 5px;
    }

    .highlight {
        font-weight: bold;
        color: var(--text-color); /* Use the standard text color */
    }

    /* Add a margin to the nested fieldsets to create some visual separation */
    fieldset fieldset {
        margin: 10px 0;
        border: 1px solid var(--header-border);
    }

    @media screen and (min-width: 769px) {
        .stat-guidelines-columns ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates a three-column grid */
            gap: 20px; /* Space between the columns */
        }

        .stat-guidelines-columns ul li {
            break-inside: avoid; /* Prevents list items from breaking across columns */
            -webkit-column-break-inside: avoid; /* For older browsers */
            page-break-inside: avoid;
        }

        /* Optional: Style the nested lists to reduce spacing and fit the columns better */
        .stat-guidelines-columns ul li ul {
            display: block;
            margin-top: 5px;
            list-style-type: none; /* Remove bullet points from the sub-list */
            padding-left: 0;
        }

        /* Optional: Reduce spacing on the main list items */
        .stat-guidelines-columns ul li {
            margin-bottom: 10px;
        }
    }