:root {
    --mordheim-gold: #c99f35;
    --mordheim-brown: #2C3E50;
    --terracotta-red: #c1440e;
    --sage-green: #6b8454;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #1e293b; /* Slate 800 */
}
/* Hide browser default number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}
/* Custom scrollbar for better look */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: var(--mordheim-gold);
    border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: #334155; /* Slate 700 */
}
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity));
    font-size: 0.875rem;
    line-height: 1.25rem;
    height: 3.5rem;
    transition: all 0.2s;
    text-align: center;
}
.stat-box-value {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    text-align: center;
}
.stat-box-label {
    display: block;
    margin-top: -0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity));
}
.header-bg {
    background-color: var(--mordheim-brown);
    border-bottom: 4px solid var(--mordheim-gold);
}
/* CRITICAL FIX: Ensure the input elements fit perfectly inside the flex box, */
.stat-box input {
    max-width: 100%;
    height: 1.5rem; /* Fixed height to control spacing */
    line-height: 1.5rem;
}
/* XP Bar Styling */
#xp-bar-track {
    height: 16px;
    background-color: #334155;
    border-radius: 8px;
    position: relative;
}
#xp-bar-fill {
    height: 100%;
    background-color: #10b981; /* Emerald 500 */
    border-radius: 8px;
    transition: width 0.5s ease-out;
}
.xp-marker {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--mordheim-gold);
    transform: translateX(-50%);
    z-index: 10;
}
.xp-marker-label {
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
}
.xp-marker.current {
    background-color: #f59e0b; /* Amber 500 */
    height: 140%;
    top: -3px;
    width: 4px;
    border-radius: 2px;
    z-index: 20;
}
.xp-marker.current .xp-marker-label {
    color: #f59e0b;
    font-weight: bold;
}

[data-rule] {
    text-decoration: underline;
    cursor: pointer;
    color: #f59e0b; /* Amber 500 */
}

[data-rule]:hover {
    color: #fcd34d; /* Amber 300 */
}

/* Add to Storage Modal Specific Styles */
#add-to-storage-modal .bg-slate-700 {
    border-top: 4px solid var(--mordheim-gold);
}

#storage-equipment-options-list .hover\:bg-slate-700:hover {
    background-color: #475569; /* A slightly lighter slate for hover effect */
}

/* Changelog list item hanging indent fix */
.changelog-entry ul li {
    text-indent: -1em;
    padding-left: 1em;
}

/* Hamburger Menu Styles */
#mobile-menu {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#mobile-menu.hidden {
    opacity: 0;
    visibility: hidden;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Hamburger button animation */
#mobile-menu-btn.active i::before {
    content: "\f00d"; /* Times icon */
}

/* Mobile menu slide animation */
#mobile-menu .flex-col {
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
}

#mobile-menu:not(.hidden) .flex-col {
    transform: translateX(0);
}

/* Character submenu animation */
#mobile-character-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, margin 0.3s ease-out;
}

#mobile-character-submenu:not(.hidden) {
    max-height: 200px;
    margin-top: 0.5rem;
}

/* Ensure hamburger menu stays above all content */
#mobile-menu-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
}

/* Adjust header padding to account for fixed hamburger button */
@media (max-width: 767px) {
    header {
        position: relative;
    }
    
    /* Prevent body scroll when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* Blog Styles */
.blog-category-btn {
    @apply px-3 py-2 bg-slate-600 text-white text-sm rounded-lg hover:bg-slate-500 transition-all flex items-center gap-2;
}

.blog-category-btn.active {
    @apply bg-mordheim-gold text-slate-900 font-semibold;
}

.blog-post-item {
    transition: all 0.2s ease;
}

.blog-post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.blog-post-content h2 {
    @apply text-2xl font-bold text-mordheim-gold mb-4 mt-6;
}

.blog-post-content h3,
.blog-post-content .prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mordheim-gold);
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}

.blog-post-content h4,
.blog-post-content .prose h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.blog-post-content p,
.blog-post-content .prose p {
    margin-bottom: 1rem;
    color: #cbd5e1;
    line-height: 1.625;
}

.blog-post-content ul,
.blog-post-content .prose ul {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    list-style-type: disc;
    color: #cbd5e1;
}

.blog-post-content li,
.blog-post-content .prose li {
    margin-bottom: 0.5rem;
}

.blog-post-content strong,
.blog-post-content .prose strong {
    color: var(--mordheim-gold);
    font-weight: 600;
}

.blog-post-content code {
    background-color: #1e293b;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--mordheim-gold);
}

.blog-post-content .prose {
    max-width: none;
}

/* Alpha Build Styling */
.alpha-build {
    color: #ef4444; /* Red 500 */
    font-size: 1.25rem; /* 20px - bigger than default */
    font-weight: 700; /* Bold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}