/* Custom style sheet to override the retro black theme and align the simulator with the main site theme */

.charsim-container {
    margin: 30px auto;
    font-family: 'Outfit', 'Microsoft YaHei', sans-serif;
    color: var(--text-bright);
}

.charsim-container a {
    color: var(--text-bright);
    text-decoration: none;
}

/* Tabs Navigation styling */
.charsim-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 25px auto;
    padding: 0;
    max-width: 900px;
}

.charsim-tabs .cats, .charsim-tabs .catsActive {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid var(--border-normal);
    background: var(--bg-card);
    color: var(--text-muted) !important;
    transition: all 0.3s ease;
    text-shadow: none !important;
    cursor: pointer;
    border-bottom: 1px solid var(--border-normal) !important;
}

.charsim-tabs .catsActive, .charsim-tabs .cats:hover {
    border-color: var(--accent-gold) !important;
    background: var(--accent-gold) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--accent-gold-glow);
}

/* Board Table Styling */
.charsim-board-table {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    margin: 0 auto;
    width: 100% !important;
    max-width: 900px;
    overflow: hidden;
    border-collapse: separate;
}

.charsim-container .chartitle {
    font-family: 'Outfit', sans-serif;
    color: var(--text-bright);
    text-shadow: none !important;
    font-size: 22px;
    font-weight: 700;
}

.charsim-container #leono {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-normal);
    background: rgba(255, 255, 255, 0.02);
}

.charsim-container #leono a {
    color: var(--accent-gold);
    font-weight: 600;
}

/* Stats panel overrides */
.charsim-container #charstats {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border-normal) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--text-bright) !important;
    padding: 12px 15px; /* Removed !important to respect inline padding:0 and padding:4px 2px */
    height: auto !important; /* Force auto height to prevent content overflow and overlapping */
}

.charsim-container .charsim-checkbox-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-bright) !important;
    padding: 4px 2px !important;
    display: flex;
    align-items: center;
}

.charsim-container #charstats .statname {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-normal) !important;
    color: var(--text-bright) !important;
    font-family: 'Outfit', 'Microsoft YaHei', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-left: 10px !important;
}

.charsim-container #charstats .statval {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-normal) !important;
    color: var(--accent-gold) !important;
    text-shadow: none !important;
    font-family: 'Outfit', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Active Points should stand out */
.charsim-container #charstats #POINTS {
    color: var(--accent-gold) !important;
}

/* Up/Down buttons */
.charsim-container #charstats .valup {
    background: rgba(255, 255, 255, 0.05) url(../_gfx/bnt_up.gif) no-repeat center !important;
    border: 1px solid var(--border-normal) !important;
    border-bottom: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

.charsim-container #charstats .valup:hover {
    background-color: var(--accent-gold-glow) !important;
}

.charsim-container #charstats .valdown {
    background: rgba(255, 255, 255, 0.05) url(../_gfx/bnt_down.gif) no-repeat center !important;
    border: 1px solid var(--border-normal) !important;
    border-top: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

.charsim-container #charstats .valdown:hover {
    background-color: var(--accent-gold-glow) !important;
}

/* Bonus values */
.charsim-container .bonusval {
    color: var(--accent-gold) !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif;
}

/* Rows alternate colors inside simulator */
.charsim-container #charstats tr[style*="background:#1a1a1a"] {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Control buttons style */
.charsim-container .csbnt {
    border: 1px solid var(--border-normal) !important;
    background: var(--bg-card) !important;
    color: var(--text-bright) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-family: 'Outfit', 'Microsoft YaHei', sans-serif !important;
    text-shadow: none !important;
}

.charsim-container .csbnt:hover {
    border-color: var(--accent-gold) !important;
    background: var(--accent-gold) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px var(--accent-gold-glow) !important;
}

.charsim-container .csbnt:active {
    background: hsl(35, 75%, 35%) !important;
    border-color: hsl(35, 75%, 35%) !important;
}

/* Bottom Class Reference Table */
.charsim-container #charview {
    border: 1px solid var(--border-normal) !important;
    background: var(--bg-card) !important;
    width: 100%;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: collapse;
}

.charsim-container #charview thead tr {
    background: var(--accent-gold) !important;
}

.charsim-container #charview th {
    color: #fff !important;
    font-weight: 700;
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-normal);
}

.charsim-container #charview td {
    border-right: 1px solid var(--border-normal) !important;
    border-bottom: 1px solid var(--border-normal) !important;
    padding: 10px;
    font-size: 13px;
    color: var(--text-bright) !important;
}

.charsim-container #charview tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01) !important;
}

.charsim-container #charview tr:hover {
    background: var(--accent-gold-glow) !important;
}

.charsim-container #charview tr[style*="background:#024"] {
    background: rgba(35, 75, 45, 0.08) !important;
    font-weight: 600;
}

/* Responsive container to allow scrolling on mobile */
.charsim-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.charsim-responsive-wrapper::-webkit-scrollbar {
    height: 6px;
}