/* Complete ANSI Color Support for Knell of Bluebells Web Interface */
/* Generated by utilities/generate_ansi_css.py */
/* 
 * This file provides:
 * - CSS custom properties (:root variables) for theming
 * - KOB-namespaced .kob-color-XXX classes (000-555 RGB cube)
 * - Named color classes (.kob-color-red, .kob-color-green, etc.)
 * - Background color classes (.kob-bgcolor-XXX)
 * 
 * NAMESPACE: All classes use "kob-" prefix to avoid conflicts with Evennia's
 * webclient.css which uses .color-XXX for xterm256 colors (0-255).
 * 
 * USE THIS FILE FOR: BeipMU dashboard, webclient dashboard, website pages
 * The webclient message window uses Evennia's xterm256 colors (no conflict).
 */

/* CSS Custom Properties (Variables) - Game Color Constants
 * Generated by utilities/generate_ansi_css.py
 * 
 * These variables are safe to use anywhere - no class conflicts.
 * Used for theming and consistent color references.
 */
:root {
    /* Core UI Colors - Bootstrap Semantic Alignment
     * Primary = Dusty Blue (main UI color)
     * Secondary = Minty Green (accents)
     * Tertiary = Sandy Yellow (highlights)
     */

    /* PRIMARY = Dusty Blue */
    --color-primary: #a4bcdb;
    --color-primary-dark: #142137;
    --color-primary-medium: #29426d;
    --color-primary-light: #a4bcdb;
    --color-primary-accent: #ccffee;

    /* SECONDARY = Minty Green */
    --color-secondary: #99ffcc;
    --color-secondary-dark: #1e5259;
    --color-secondary-medium: #66ccaa;
    --color-secondary-light: #99ffcc;
    --color-secondary-accent: #ccffee;

    /* TERTIARY = Sandy Yellow */
    --color-tertiary: #ffe4b3;
    --color-tertiary-dark: #734b00;
    --color-tertiary-medium: #ffcc80;
    --color-tertiary-light: #fff0d6;
    --color-tertiary-accent: #fff8e6;

    /* Legacy Game Color Variables */
    --color-glittershower: #66ffff;
    --color-lavendercandy: #ff99cc;
    --color-mintastic: #99ffcc;
    --color-deliciousmelon: #ffe4b3;

    /* Background Colors */
    --color-background: #0c0719;

    /* Layout Constants */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
}


/* ANSI Color Classes (000-555 RGB Cube)
 * Generated by utilities/generate_ansi_css.py
 * Custom RGB system: each digit 0-5 for R, G, B
 */

.kob-color-000 {
    color: #000000;
}

.kob-color-001 {
    color: #000033;
}

.kob-color-002 {
    color: #000066;
}

.kob-color-003 {
    color: #000099;
}

.kob-color-004 {
    color: #0000cc;
}

.kob-color-005 {
    color: #0000ff;
}

.kob-color-010 {
    color: #003300;
}

.kob-color-011 {
    color: #003333;
}

.kob-color-012 {
    color: #003366;
}

.kob-color-013 {
    color: #003399;
}

.kob-color-014 {
    color: #0033cc;
}

.kob-color-015 {
    color: #0033ff;
}

.kob-color-020 {
    color: #006600;
}

.kob-color-021 {
    color: #006633;
}

.kob-color-022 {
    color: #006666;
}

.kob-color-023 {
    color: #006699;
}

.kob-color-024 {
    color: #0066cc;
}

.kob-color-025 {
    color: #0066ff;
}

.kob-color-030 {
    color: #009900;
}

.kob-color-031 {
    color: #009933;
}

.kob-color-032 {
    color: #009966;
}

.kob-color-033 {
    color: #009999;
}

.kob-color-034 {
    color: #0099cc;
}

.kob-color-035 {
    color: #0099ff;
}

.kob-color-040 {
    color: #00cc00;
}

.kob-color-041 {
    color: #00cc33;
}

.kob-color-042 {
    color: #00cc66;
}

.kob-color-043 {
    color: #00cc99;
}

.kob-color-044 {
    color: #00cccc;
}

.kob-color-045 {
    color: #00ccff;
}

.kob-color-050 {
    color: #00ff00;
}

.kob-color-051 {
    color: #00ff33;
}

.kob-color-052 {
    color: #00ff66;
}

.kob-color-053 {
    color: #00ff99;
}

.kob-color-054 {
    color: #00ffcc;
}

.kob-color-055 {
    color: #00ffff;
}

.kob-color-100 {
    color: #330000;
}

.kob-color-101 {
    color: #330033;
}

.kob-color-102 {
    color: #330066;
}

.kob-color-103 {
    color: #330099;
}

.kob-color-104 {
    color: #3300cc;
}

.kob-color-105 {
    color: #3300ff;
}

.kob-color-110 {
    color: #333300;
}

.kob-color-111 {
    color: #333333;
}

.kob-color-112 {
    color: #333366;
}

.kob-color-113 {
    color: #333399;
}

.kob-color-114 {
    color: #3333cc;
}

.kob-color-115 {
    color: #3333ff;
}

.kob-color-120 {
    color: #336600;
}

.kob-color-121 {
    color: #336633;
}

.kob-color-122 {
    color: #336666;
}

.kob-color-123 {
    color: #336699;
}

.kob-color-124 {
    color: #3366cc;
}

.kob-color-125 {
    color: #3366ff;
}

.kob-color-130 {
    color: #339900;
}

.kob-color-131 {
    color: #339933;
}

.kob-color-132 {
    color: #339966;
}

.kob-color-133 {
    color: #339999;
}

.kob-color-134 {
    color: #3399cc;
}

.kob-color-135 {
    color: #3399ff;
}

.kob-color-140 {
    color: #33cc00;
}

.kob-color-141 {
    color: #33cc33;
}

.kob-color-142 {
    color: #33cc66;
}

.kob-color-143 {
    color: #33cc99;
}

.kob-color-144 {
    color: #33cccc;
}

.kob-color-145 {
    color: #33ccff;
}

.kob-color-150 {
    color: #33ff00;
}

.kob-color-151 {
    color: #33ff33;
}

.kob-color-152 {
    color: #33ff66;
}

.kob-color-153 {
    color: #33ff99;
}

.kob-color-154 {
    color: #33ffcc;
}

.kob-color-155 {
    color: #33ffff;
}

.kob-color-200 {
    color: #660000;
}

.kob-color-201 {
    color: #660033;
}

.kob-color-202 {
    color: #660066;
}

.kob-color-203 {
    color: #660099;
}

.kob-color-204 {
    color: #6600cc;
}

.kob-color-205 {
    color: #6600ff;
}

.kob-color-210 {
    color: #663300;
}

.kob-color-211 {
    color: #663333;
}

.kob-color-212 {
    color: #663366;
}

.kob-color-213 {
    color: #663399;
}

.kob-color-214 {
    color: #6633cc;
}

.kob-color-215 {
    color: #6633ff;
}

.kob-color-220 {
    color: #666600;
}

.kob-color-221 {
    color: #666633;
}

.kob-color-222 {
    color: #666666;
}

.kob-color-223 {
    color: #666699;
}

.kob-color-224 {
    color: #6666cc;
}

.kob-color-225 {
    color: #6666ff;
}

.kob-color-230 {
    color: #669900;
}

.kob-color-231 {
    color: #669933;
}

.kob-color-232 {
    color: #669966;
}

.kob-color-233 {
    color: #669999;
}

.kob-color-234 {
    color: #6699cc;
}

.kob-color-235 {
    color: #6699ff;
}

.kob-color-240 {
    color: #66cc00;
}

.kob-color-241 {
    color: #66cc33;
}

.kob-color-242 {
    color: #66cc66;
}

.kob-color-243 {
    color: #66cc99;
}

.kob-color-244 {
    color: #66cccc;
}

.kob-color-245 {
    color: #66ccff;
}

.kob-color-250 {
    color: #66ff00;
}

.kob-color-251 {
    color: #66ff33;
}

.kob-color-252 {
    color: #66ff66;
}

.kob-color-253 {
    color: #66ff99;
}

.kob-color-254 {
    color: #66ffcc;
}

.kob-color-255 {
    color: #66ffff;
}

.kob-color-300 {
    color: #990000;
}

.kob-color-301 {
    color: #990033;
}

.kob-color-302 {
    color: #990066;
}

.kob-color-303 {
    color: #990099;
}

.kob-color-304 {
    color: #9900cc;
}

.kob-color-305 {
    color: #9900ff;
}

.kob-color-310 {
    color: #993300;
}

.kob-color-311 {
    color: #993333;
}

.kob-color-312 {
    color: #993366;
}

.kob-color-313 {
    color: #993399;
}

.kob-color-314 {
    color: #9933cc;
}

.kob-color-315 {
    color: #9933ff;
}

.kob-color-320 {
    color: #996600;
}

.kob-color-321 {
    color: #996633;
}

.kob-color-322 {
    color: #996666;
}

.kob-color-323 {
    color: #996699;
}

.kob-color-324 {
    color: #9966cc;
}

.kob-color-325 {
    color: #9966ff;
}

.kob-color-330 {
    color: #999900;
}

.kob-color-331 {
    color: #999933;
}

.kob-color-332 {
    color: #999966;
}

.kob-color-333 {
    color: #999999;
}

.kob-color-334 {
    color: #9999cc;
}

.kob-color-335 {
    color: #9999ff;
}

.kob-color-340 {
    color: #99cc00;
}

.kob-color-341 {
    color: #99cc33;
}

.kob-color-342 {
    color: #99cc66;
}

.kob-color-343 {
    color: #99cc99;
}

.kob-color-344 {
    color: #99cccc;
}

.kob-color-345 {
    color: #99ccff;
}

.kob-color-350 {
    color: #99ff00;
}

.kob-color-351 {
    color: #99ff33;
}

.kob-color-352 {
    color: #99ff66;
}

.kob-color-353 {
    color: #99ff99;
}

.kob-color-354 {
    color: #99ffcc;
}

.kob-color-355 {
    color: #99ffff;
}

.kob-color-400 {
    color: #cc0000;
}

.kob-color-401 {
    color: #cc0033;
}

.kob-color-402 {
    color: #cc0066;
}

.kob-color-403 {
    color: #cc0099;
}

.kob-color-404 {
    color: #cc00cc;
}

.kob-color-405 {
    color: #cc00ff;
}

.kob-color-410 {
    color: #cc3300;
}

.kob-color-411 {
    color: #cc3333;
}

.kob-color-412 {
    color: #cc3366;
}

.kob-color-413 {
    color: #cc3399;
}

.kob-color-414 {
    color: #cc33cc;
}

.kob-color-415 {
    color: #cc33ff;
}

.kob-color-420 {
    color: #cc6600;
}

.kob-color-421 {
    color: #cc6633;
}

.kob-color-422 {
    color: #cc6666;
}

.kob-color-423 {
    color: #cc6699;
}

.kob-color-424 {
    color: #cc66cc;
}

.kob-color-425 {
    color: #cc66ff;
}

.kob-color-430 {
    color: #cc9900;
}

.kob-color-431 {
    color: #cc9933;
}

.kob-color-432 {
    color: #cc9966;
}

.kob-color-433 {
    color: #cc9999;
}

.kob-color-434 {
    color: #cc99cc;
}

.kob-color-435 {
    color: #cc99ff;
}

.kob-color-440 {
    color: #cccc00;
}

.kob-color-441 {
    color: #cccc33;
}

.kob-color-442 {
    color: #cccc66;
}

.kob-color-443 {
    color: #cccc99;
}

.kob-color-444 {
    color: #cccccc;
}

.kob-color-445 {
    color: #ccccff;
}

.kob-color-450 {
    color: #ccff00;
}

.kob-color-451 {
    color: #ccff33;
}

.kob-color-452 {
    color: #ccff66;
}

.kob-color-453 {
    color: #ccff99;
}

.kob-color-454 {
    color: #ccffcc;
}

.kob-color-455 {
    color: #ccffff;
}

.kob-color-500 {
    color: #ff0000;
}

.kob-color-501 {
    color: #ff0033;
}

.kob-color-502 {
    color: #ff0066;
}

.kob-color-503 {
    color: #ff0099;
}

.kob-color-504 {
    color: #ff00cc;
}

.kob-color-505 {
    color: #ff00ff;
}

.kob-color-510 {
    color: #ff3300;
}

.kob-color-511 {
    color: #ff3333;
}

.kob-color-512 {
    color: #ff3366;
}

.kob-color-513 {
    color: #ff3399;
}

.kob-color-514 {
    color: #ff33cc;
}

.kob-color-515 {
    color: #ff33ff;
}

.kob-color-520 {
    color: #ff6600;
}

.kob-color-521 {
    color: #ff6633;
}

.kob-color-522 {
    color: #ff6666;
}

.kob-color-523 {
    color: #ff6699;
}

.kob-color-524 {
    color: #ff66cc;
}

.kob-color-525 {
    color: #ff66ff;
}

.kob-color-530 {
    color: #ff9900;
}

.kob-color-531 {
    color: #ff9933;
}

.kob-color-532 {
    color: #ff9966;
}

.kob-color-533 {
    color: #ff9999;
}

.kob-color-534 {
    color: #ff99cc;
}

.kob-color-535 {
    color: #ff99ff;
}

.kob-color-540 {
    color: #ffcc00;
}

.kob-color-541 {
    color: #ffcc33;
}

.kob-color-542 {
    color: #ffcc66;
}

.kob-color-543 {
    color: #ffcc99;
}

.kob-color-544 {
    color: #ffcccc;
}

.kob-color-545 {
    color: #ffccff;
}

.kob-color-550 {
    color: #ffff00;
}

.kob-color-551 {
    color: #ffff33;
}

.kob-color-552 {
    color: #ffff66;
}

.kob-color-553 {
    color: #ffff99;
}

.kob-color-554 {
    color: #ffffcc;
}

.kob-color-555 {
    color: #ffffff;
}

/* Named Color Classes */
.kob-color-red {
    color: #ff0000;
}

.kob-color-green {
    color: #00ff00;
}

.kob-color-blue {
    color: #0000ff;
}

.kob-color-yellow {
    color: #ffff00;
}

.kob-color-magenta {
    color: #ff00ff;
}

.kob-color-cyan {
    color: #00ffff;
}

.kob-color-white {
    color: #ffffff;
}

.kob-color-black {
    color: #000000;
}

/* Semantic Color Classes */
.kob-color-success {
    color: #00ff00;
}

.kob-color-warning {
    color: #ffff00;
}

.kob-color-danger {
    color: #ff0000;
}

.kob-color-info {
    color: #00ffff;
}

/* Text Formatting Classes */
.kob-color-n {
    color: inherit;
}

.kob-color-H {
    font-weight: bold;
}

.kob-color-I {
    font-style: italic;
}

.kob-color-U {
    text-decoration: underline;
}


/* Background Color Classes (000-555 RGB Cube) */
.kob-bgcolor-000 {
    background-color: #000000;
}

.kob-bgcolor-001 {
    background-color: #000033;
}

.kob-bgcolor-002 {
    background-color: #000066;
}

.kob-bgcolor-003 {
    background-color: #000099;
}

.kob-bgcolor-004 {
    background-color: #0000cc;
}

.kob-bgcolor-005 {
    background-color: #0000ff;
}

.kob-bgcolor-010 {
    background-color: #003300;
}

.kob-bgcolor-011 {
    background-color: #003333;
}

.kob-bgcolor-012 {
    background-color: #003366;
}

.kob-bgcolor-013 {
    background-color: #003399;
}

.kob-bgcolor-014 {
    background-color: #0033cc;
}

.kob-bgcolor-015 {
    background-color: #0033ff;
}

.kob-bgcolor-020 {
    background-color: #006600;
}

.kob-bgcolor-021 {
    background-color: #006633;
}

.kob-bgcolor-022 {
    background-color: #006666;
}

.kob-bgcolor-023 {
    background-color: #006699;
}

.kob-bgcolor-024 {
    background-color: #0066cc;
}

.kob-bgcolor-025 {
    background-color: #0066ff;
}

.kob-bgcolor-030 {
    background-color: #009900;
}

.kob-bgcolor-031 {
    background-color: #009933;
}

.kob-bgcolor-032 {
    background-color: #009966;
}

.kob-bgcolor-033 {
    background-color: #009999;
}

.kob-bgcolor-034 {
    background-color: #0099cc;
}

.kob-bgcolor-035 {
    background-color: #0099ff;
}

.kob-bgcolor-040 {
    background-color: #00cc00;
}

.kob-bgcolor-041 {
    background-color: #00cc33;
}

.kob-bgcolor-042 {
    background-color: #00cc66;
}

.kob-bgcolor-043 {
    background-color: #00cc99;
}

.kob-bgcolor-044 {
    background-color: #00cccc;
}

.kob-bgcolor-045 {
    background-color: #00ccff;
}

.kob-bgcolor-050 {
    background-color: #00ff00;
}

.kob-bgcolor-051 {
    background-color: #00ff33;
}

.kob-bgcolor-052 {
    background-color: #00ff66;
}

.kob-bgcolor-053 {
    background-color: #00ff99;
}

.kob-bgcolor-054 {
    background-color: #00ffcc;
}

.kob-bgcolor-055 {
    background-color: #00ffff;
}

.kob-bgcolor-100 {
    background-color: #330000;
}

.kob-bgcolor-101 {
    background-color: #330033;
}

.kob-bgcolor-102 {
    background-color: #330066;
}

.kob-bgcolor-103 {
    background-color: #330099;
}

.kob-bgcolor-104 {
    background-color: #3300cc;
}

.kob-bgcolor-105 {
    background-color: #3300ff;
}

.kob-bgcolor-110 {
    background-color: #333300;
}

.kob-bgcolor-111 {
    background-color: #333333;
}

.kob-bgcolor-112 {
    background-color: #333366;
}

.kob-bgcolor-113 {
    background-color: #333399;
}

.kob-bgcolor-114 {
    background-color: #3333cc;
}

.kob-bgcolor-115 {
    background-color: #3333ff;
}

.kob-bgcolor-120 {
    background-color: #336600;
}

.kob-bgcolor-121 {
    background-color: #336633;
}

.kob-bgcolor-122 {
    background-color: #336666;
}

.kob-bgcolor-123 {
    background-color: #336699;
}

.kob-bgcolor-124 {
    background-color: #3366cc;
}

.kob-bgcolor-125 {
    background-color: #3366ff;
}

.kob-bgcolor-130 {
    background-color: #339900;
}

.kob-bgcolor-131 {
    background-color: #339933;
}

.kob-bgcolor-132 {
    background-color: #339966;
}

.kob-bgcolor-133 {
    background-color: #339999;
}

.kob-bgcolor-134 {
    background-color: #3399cc;
}

.kob-bgcolor-135 {
    background-color: #3399ff;
}

.kob-bgcolor-140 {
    background-color: #33cc00;
}

.kob-bgcolor-141 {
    background-color: #33cc33;
}

.kob-bgcolor-142 {
    background-color: #33cc66;
}

.kob-bgcolor-143 {
    background-color: #33cc99;
}

.kob-bgcolor-144 {
    background-color: #33cccc;
}

.kob-bgcolor-145 {
    background-color: #33ccff;
}

.kob-bgcolor-150 {
    background-color: #33ff00;
}

.kob-bgcolor-151 {
    background-color: #33ff33;
}

.kob-bgcolor-152 {
    background-color: #33ff66;
}

.kob-bgcolor-153 {
    background-color: #33ff99;
}

.kob-bgcolor-154 {
    background-color: #33ffcc;
}

.kob-bgcolor-155 {
    background-color: #33ffff;
}

.kob-bgcolor-200 {
    background-color: #660000;
}

.kob-bgcolor-201 {
    background-color: #660033;
}

.kob-bgcolor-202 {
    background-color: #660066;
}

.kob-bgcolor-203 {
    background-color: #660099;
}

.kob-bgcolor-204 {
    background-color: #6600cc;
}

.kob-bgcolor-205 {
    background-color: #6600ff;
}

.kob-bgcolor-210 {
    background-color: #663300;
}

.kob-bgcolor-211 {
    background-color: #663333;
}

.kob-bgcolor-212 {
    background-color: #663366;
}

.kob-bgcolor-213 {
    background-color: #663399;
}

.kob-bgcolor-214 {
    background-color: #6633cc;
}

.kob-bgcolor-215 {
    background-color: #6633ff;
}

.kob-bgcolor-220 {
    background-color: #666600;
}

.kob-bgcolor-221 {
    background-color: #666633;
}

.kob-bgcolor-222 {
    background-color: #666666;
}

.kob-bgcolor-223 {
    background-color: #666699;
}

.kob-bgcolor-224 {
    background-color: #6666cc;
}

.kob-bgcolor-225 {
    background-color: #6666ff;
}

.kob-bgcolor-230 {
    background-color: #669900;
}

.kob-bgcolor-231 {
    background-color: #669933;
}

.kob-bgcolor-232 {
    background-color: #669966;
}

.kob-bgcolor-233 {
    background-color: #669999;
}

.kob-bgcolor-234 {
    background-color: #6699cc;
}

.kob-bgcolor-235 {
    background-color: #6699ff;
}

.kob-bgcolor-240 {
    background-color: #66cc00;
}

.kob-bgcolor-241 {
    background-color: #66cc33;
}

.kob-bgcolor-242 {
    background-color: #66cc66;
}

.kob-bgcolor-243 {
    background-color: #66cc99;
}

.kob-bgcolor-244 {
    background-color: #66cccc;
}

.kob-bgcolor-245 {
    background-color: #66ccff;
}

.kob-bgcolor-250 {
    background-color: #66ff00;
}

.kob-bgcolor-251 {
    background-color: #66ff33;
}

.kob-bgcolor-252 {
    background-color: #66ff66;
}

.kob-bgcolor-253 {
    background-color: #66ff99;
}

.kob-bgcolor-254 {
    background-color: #66ffcc;
}

.kob-bgcolor-255 {
    background-color: #66ffff;
}

.kob-bgcolor-300 {
    background-color: #990000;
}

.kob-bgcolor-301 {
    background-color: #990033;
}

.kob-bgcolor-302 {
    background-color: #990066;
}

.kob-bgcolor-303 {
    background-color: #990099;
}

.kob-bgcolor-304 {
    background-color: #9900cc;
}

.kob-bgcolor-305 {
    background-color: #9900ff;
}

.kob-bgcolor-310 {
    background-color: #993300;
}

.kob-bgcolor-311 {
    background-color: #993333;
}

.kob-bgcolor-312 {
    background-color: #993366;
}

.kob-bgcolor-313 {
    background-color: #993399;
}

.kob-bgcolor-314 {
    background-color: #9933cc;
}

.kob-bgcolor-315 {
    background-color: #9933ff;
}

.kob-bgcolor-320 {
    background-color: #996600;
}

.kob-bgcolor-321 {
    background-color: #996633;
}

.kob-bgcolor-322 {
    background-color: #996666;
}

.kob-bgcolor-323 {
    background-color: #996699;
}

.kob-bgcolor-324 {
    background-color: #9966cc;
}

.kob-bgcolor-325 {
    background-color: #9966ff;
}

.kob-bgcolor-330 {
    background-color: #999900;
}

.kob-bgcolor-331 {
    background-color: #999933;
}

.kob-bgcolor-332 {
    background-color: #999966;
}

.kob-bgcolor-333 {
    background-color: #999999;
}

.kob-bgcolor-334 {
    background-color: #9999cc;
}

.kob-bgcolor-335 {
    background-color: #9999ff;
}

.kob-bgcolor-340 {
    background-color: #99cc00;
}

.kob-bgcolor-341 {
    background-color: #99cc33;
}

.kob-bgcolor-342 {
    background-color: #99cc66;
}

.kob-bgcolor-343 {
    background-color: #99cc99;
}

.kob-bgcolor-344 {
    background-color: #99cccc;
}

.kob-bgcolor-345 {
    background-color: #99ccff;
}

.kob-bgcolor-350 {
    background-color: #99ff00;
}

.kob-bgcolor-351 {
    background-color: #99ff33;
}

.kob-bgcolor-352 {
    background-color: #99ff66;
}

.kob-bgcolor-353 {
    background-color: #99ff99;
}

.kob-bgcolor-354 {
    background-color: #99ffcc;
}

.kob-bgcolor-355 {
    background-color: #99ffff;
}

.kob-bgcolor-400 {
    background-color: #cc0000;
}

.kob-bgcolor-401 {
    background-color: #cc0033;
}

.kob-bgcolor-402 {
    background-color: #cc0066;
}

.kob-bgcolor-403 {
    background-color: #cc0099;
}

.kob-bgcolor-404 {
    background-color: #cc00cc;
}

.kob-bgcolor-405 {
    background-color: #cc00ff;
}

.kob-bgcolor-410 {
    background-color: #cc3300;
}

.kob-bgcolor-411 {
    background-color: #cc3333;
}

.kob-bgcolor-412 {
    background-color: #cc3366;
}

.kob-bgcolor-413 {
    background-color: #cc3399;
}

.kob-bgcolor-414 {
    background-color: #cc33cc;
}

.kob-bgcolor-415 {
    background-color: #cc33ff;
}

.kob-bgcolor-420 {
    background-color: #cc6600;
}

.kob-bgcolor-421 {
    background-color: #cc6633;
}

.kob-bgcolor-422 {
    background-color: #cc6666;
}

.kob-bgcolor-423 {
    background-color: #cc6699;
}

.kob-bgcolor-424 {
    background-color: #cc66cc;
}

.kob-bgcolor-425 {
    background-color: #cc66ff;
}

.kob-bgcolor-430 {
    background-color: #cc9900;
}

.kob-bgcolor-431 {
    background-color: #cc9933;
}

.kob-bgcolor-432 {
    background-color: #cc9966;
}

.kob-bgcolor-433 {
    background-color: #cc9999;
}

.kob-bgcolor-434 {
    background-color: #cc99cc;
}

.kob-bgcolor-435 {
    background-color: #cc99ff;
}

.kob-bgcolor-440 {
    background-color: #cccc00;
}

.kob-bgcolor-441 {
    background-color: #cccc33;
}

.kob-bgcolor-442 {
    background-color: #cccc66;
}

.kob-bgcolor-443 {
    background-color: #cccc99;
}

.kob-bgcolor-444 {
    background-color: #cccccc;
}

.kob-bgcolor-445 {
    background-color: #ccccff;
}

.kob-bgcolor-450 {
    background-color: #ccff00;
}

.kob-bgcolor-451 {
    background-color: #ccff33;
}

.kob-bgcolor-452 {
    background-color: #ccff66;
}

.kob-bgcolor-453 {
    background-color: #ccff99;
}

.kob-bgcolor-454 {
    background-color: #ccffcc;
}

.kob-bgcolor-455 {
    background-color: #ccffff;
}

.kob-bgcolor-500 {
    background-color: #ff0000;
}

.kob-bgcolor-501 {
    background-color: #ff0033;
}

.kob-bgcolor-502 {
    background-color: #ff0066;
}

.kob-bgcolor-503 {
    background-color: #ff0099;
}

.kob-bgcolor-504 {
    background-color: #ff00cc;
}

.kob-bgcolor-505 {
    background-color: #ff00ff;
}

.kob-bgcolor-510 {
    background-color: #ff3300;
}

.kob-bgcolor-511 {
    background-color: #ff3333;
}

.kob-bgcolor-512 {
    background-color: #ff3366;
}

.kob-bgcolor-513 {
    background-color: #ff3399;
}

.kob-bgcolor-514 {
    background-color: #ff33cc;
}

.kob-bgcolor-515 {
    background-color: #ff33ff;
}

.kob-bgcolor-520 {
    background-color: #ff6600;
}

.kob-bgcolor-521 {
    background-color: #ff6633;
}

.kob-bgcolor-522 {
    background-color: #ff6666;
}

.kob-bgcolor-523 {
    background-color: #ff6699;
}

.kob-bgcolor-524 {
    background-color: #ff66cc;
}

.kob-bgcolor-525 {
    background-color: #ff66ff;
}

.kob-bgcolor-530 {
    background-color: #ff9900;
}

.kob-bgcolor-531 {
    background-color: #ff9933;
}

.kob-bgcolor-532 {
    background-color: #ff9966;
}

.kob-bgcolor-533 {
    background-color: #ff9999;
}

.kob-bgcolor-534 {
    background-color: #ff99cc;
}

.kob-bgcolor-535 {
    background-color: #ff99ff;
}

.kob-bgcolor-540 {
    background-color: #ffcc00;
}

.kob-bgcolor-541 {
    background-color: #ffcc33;
}

.kob-bgcolor-542 {
    background-color: #ffcc66;
}

.kob-bgcolor-543 {
    background-color: #ffcc99;
}

.kob-bgcolor-544 {
    background-color: #ffcccc;
}

.kob-bgcolor-545 {
    background-color: #ffccff;
}

.kob-bgcolor-550 {
    background-color: #ffff00;
}

.kob-bgcolor-551 {
    background-color: #ffff33;
}

.kob-bgcolor-552 {
    background-color: #ffff66;
}

.kob-bgcolor-553 {
    background-color: #ffff99;
}

.kob-bgcolor-554 {
    background-color: #ffffcc;
}

.kob-bgcolor-555 {
    background-color: #ffffff;
}

/* ===================================================================
 * Element Badges
 * Dark-themed Bootstrap-style badges for damage element display.
 * Follows the chargen ability badge pattern: compact pill with a
 * slightly darker tinted background and a brighter text color.
 *
 * The text / background colors are set via inline styles generated
 * by format_element_badge_html() so they stay in sync with the
 * element color_code fields — the class below provides shared
 * sizing, shape, and spacing only.
 * =================================================================== */

.badge-element {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    line-height: 1.4;
}