/**
 * Open Dungeons Character Generator Styles
 */

/* Validation Alert Modal Styles */
.od-alert-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10000 !important;
    animation: fadeIn 0.2s ease;
}

.od-alert-modal {
    background: #1a1d26;
    border: 2px solid #f2a23b;
    border-radius: 8px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.3s ease;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10001 !important;
}

.od-alert-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.od-alert-icon {
    font-size: 32px;
    color: #f2a23b;
}

.od-alert-title {
    font-size: 20px;
    font-weight: bold;
    color: #d6cbb0;
    margin: 0;
}

.od-alert-content {
    color: #d6cbb0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.od-alert-footer {
    display: flex;
    justify-content: flex-end;
}

.od-alert-button {
    background: #f2a23b;
    color: #11141b;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-alert-button:hover {
    background: #d6cbb0;
    transform: translateY(-1px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reset and Base Styles */
.od-character-generator {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Site Navigation */
.od-site-navigation {
    background: #333;
    padding: 0;
    margin: 0 0 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.od-site-navigation .menu-container {
    max-width: 1200px;
    margin: 0 auto;
}

.od-site-navigation .primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.od-site-navigation .primary-menu > li {
    position: relative;
}

.od-site-navigation .primary-menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease;
}

.od-site-navigation .primary-menu > li > a:hover,
.od-site-navigation .primary-menu > li.current-menu-item > a {
    background: #555;
}

/* Dropdown menus */
.od-site-navigation .primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #444;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

.od-site-navigation .primary-menu li:hover > .sub-menu {
    display: block;
}

.od-site-navigation .primary-menu .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease;
}

.od-site-navigation .primary-menu .sub-menu li a:hover {
    background: #555;
}

#od-generator-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/*
 * Hide the theme footer on the generator page only. This stylesheet is
 * enqueued solely when the od_char_generator query var is set, so the rule
 * can't leak to the rest of the site. get_footer() still runs, so wp_footer()
 * and the scripts it prints are unaffected.
 */
.od-site-footer {
    display: none;
}

/* Header */
.od-generator-header {
    background: linear-gradient(to bottom, #05060a 0%, transparent 20%, transparent 80%, #05060a 100%), radial-gradient(circle at center, rgba(60, 120, 255, 0.35), transparent 60%), #05060a;
    color: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.od-generator-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5em;
    font-weight: bold;
}

.od-subtitle {
    margin: 0;
    font-size: 1.2em;
    opacity: 0.9;
}

/* Wizard Tabs Navigation */
.od-wizard-tabs {
    background: #1a1d26;
    padding: 0;
    margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.od-wizard-tab {
    flex: 1;
    min-width: 120px;
    padding: 16px 20px;
    background: #11141b;
    color: #fff;
    border: none;
    border-right: 1px solid #2a3140;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

/* Steps 1-4 default to dark green */
.od-wizard-tab[data-step="1"],
.od-wizard-tab[data-step="2"],
.od-wizard-tab[data-step="3"],
.od-wizard-tab[data-step="4"] {
    background: #1f4a32;
    border-right-color: #275b3e;
}

.od-wizard-tab:last-child {
    border-right: none;
}

.od-wizard-tab:hover {
    background: #1a1d26;
    color: #d6cbb0;
}

.od-wizard-tab[data-step="1"]:hover,
.od-wizard-tab[data-step="2"]:hover,
.od-wizard-tab[data-step="3"]:hover,
.od-wizard-tab[data-step="4"]:hover {
    background: #275b3e;
    color: #d6f0de;
}

.od-wizard-tab.active {
    background: #2a3140;
    color: #f2a23b;
    border-bottom: 3px solid #f2a23b;
}

.od-wizard-tab.completed {
    color: #4a9d7a;
}

/* Steps 1-4 switch to black once marked complete */
.od-wizard-tab.completed[data-step="1"],
.od-wizard-tab.completed[data-step="2"],
.od-wizard-tab.completed[data-step="3"],
.od-wizard-tab.completed[data-step="4"] {
    background: #11141b;
    border-right-color: #2a3140;
    color: #4a9d7a;
}

.od-wizard-tab.completed .od-tab-label::after {
    content: ' ✓';
    margin-left: 5px;
}

#od-generator-wrapper .od-wizard-tab.od-needs-attention {
    z-index: 1;
    -webkit-animation: od-tab-attention-pulse 4s ease-in-out infinite;
    animation: od-tab-attention-pulse 4s ease-in-out infinite;
}

@-webkit-keyframes od-tab-attention-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 198, 64, .45), 0 0 3px 1px rgba(255, 198, 64, .35); }
    50% { box-shadow: inset 0 0 0 2px rgba(255, 198, 64, 1), 0 0 18px 6px rgba(255, 198, 64, .9); }
}

@keyframes od-tab-attention-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 198, 64, .45), 0 0 3px 1px rgba(255, 198, 64, .35); }
    50% { box-shadow: inset 0 0 0 2px rgba(255, 198, 64, 1), 0 0 18px 6px rgba(255, 198, 64, .9); }
}

@media (prefers-reduced-motion: reduce) {
    #od-generator-wrapper .od-wizard-tab.od-needs-attention {
        -webkit-animation: od-tab-attention-pulse 4s ease-in-out infinite !important;
        animation: od-tab-attention-pulse 4s ease-in-out infinite !important;
    }
}

/* Wizard Navigation Buttons */
.od-wizard-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0px;
    padding: 20px 0;
    border-top: 0px solid #2a3140;
}

.od-wizard-navigation .od-btn {
    min-width: 120px;
    font-size: 16px;
    font-weight: 600;
}

.od-wizard-navigation .od-btn[data-action="previous"] {
    margin-right: auto;
}

.od-wizard-navigation .od-btn[data-action="next"] {
    margin-left: auto;
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
}

.od-wizard-navigation .od-btn[data-action="next"]:hover {
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
}

.od-wizard-navigation .od-btn[data-action="next"].od-save-state {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 130px;
    letter-spacing: 0.01em;
}

/* Step Sections */
.od-wizard-step[data-step] {
    display: none;
}

.od-wizard-step[data-step].active {
    display: block;
}

/*
 * Step swaps change the document height, which used to make the browser
 * clamp the scroll position and throw the view down to the footer.
 * ODWizard.goToStep() now anchors the viewport itself, so switch off the
 * browser's competing scroll anchoring and keep a sane floor height.
 */
.od-character-form {
    overflow-anchor: none;
    min-height: 60vh;
}

.od-wizard-tabs {
    scroll-margin-top: 12px;
}

/* Equipment section - expand to right only (40% expansion for pseudo scrollbar space) */
.od-equipment.od-form-section {
    margin-right: calc(-20vw + 20%);
    padding-right: max(25px, calc(20vw - 240px));
}

/* Responsive Wizard Tabs */
@media (max-width: 768px) {
    .od-wizard-tabs {
        flex-direction: column;
    }
    
    .od-wizard-tab {
        border-right: none;
        border-bottom: 1px solid #2a3140;
        min-width: 100%;
    }
    
    .od-wizard-tab:last-child {
        border-bottom: none;
    }
}

/* Control Panel */
.od-control-panel {
    background: transparent;
    padding: 0px 20px 0px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.od-character-summary-box {
    border-radius: 8px;
    padding: 0px 20px 15px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.od-summary-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ecf0f1;
    white-space: nowrap;
}

.od-summary-row strong {
    color: #bdc3c7;
    margin-right: 8px;
    font-weight: 600;
}

.od-summary-row span {
    color: #fff;
    font-weight: bold;
}

/* GP Available row - gold to match the Remaining Gold bar */
.od-summary-row-gp,
.od-summary-row-gp strong,
.od-summary-row-gp span,
#od-summary-gp {
    color: #ffcf10;
}

.od-mode-toggle {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.od-save-load-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Buttons - Muted and Square */
.od-btn {
    padding: 10px 20px;
    border: 1px solid #2a3140;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #11141b;
    color: #d6cbb0;
}

.od-btn:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
    color: #f3e8d0;
}

.od-btn-primary {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-primary:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
}

.od-btn-secondary {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-secondary:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
}

.od-btn-success {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-success:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
}

.od-btn-info {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-info:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
}

.od-btn-warning {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-warning:hover {
    background: #1a1f2e;
    border-color: #f2a23b;
}
button#od-save-character-btn,button#od-load-character-btn {
    font-weight: unset
}
button#od-export-pdf-btn {
    border: 1px solid #2d5016;
}
button#od-export-pdf-btn:hover,
button#od-export-pdf-btn:active,
button#od-export-pdf-btn:focus {
    border-color: #00ff00;
}
#od-generator-wrapper #od-export-pdf-btn.od-export-ready {
    -webkit-animation: od-export-ready-pulse 4s ease-in-out infinite;
    animation: od-export-ready-pulse 4s ease-in-out infinite;
}
@-webkit-keyframes od-export-ready-pulse {
    0%, 100% { box-shadow: 0 0 3px 1px rgba(255, 198, 64, .35); }
    50% { box-shadow: 0 0 18px 6px rgba(255, 198, 64, .9); }
}
@keyframes od-export-ready-pulse {
    0%, 100% { box-shadow: 0 0 3px 1px rgba(255, 198, 64, .35); }
    50% { box-shadow: 0 0 18px 6px rgba(255, 198, 64, .9); }
}
@media (prefers-reduced-motion: reduce) {
    #od-generator-wrapper #od-export-pdf-btn.od-export-ready {
        -webkit-animation: od-export-ready-pulse 4s ease-in-out infinite !important;
        animation: od-export-ready-pulse 4s ease-in-out infinite !important;
    }
}
button#od-new-character-btn {
    border: 1px solid #5c1a1a;
}
button#od-new-character-btn:hover,
button#od-new-character-btn:active,
button#od-new-character-btn:focus {
    border-color: #ff0000;
}
.od-btn-danger {
    background: #11141b;
    color: #d6cbb0;
    border-color: #2a3140;
}

.od-btn-danger:hover {
    background: #1a1f2e;
    border-color: #cc7622;
}

.od-btn-small {
    padding: 5px 10px;
    font-size: 0.85em;
}

/* Form Sections */
.od-form-section {
    background-color: #ffffffed;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 15px 3px #6e6e6c;
    -moz-box-shadow: 0px 0px 15px 3px #6e6e6c;
    box-shadow: 0px 0px 15px 3px #6e6e6c;
}

.od-form-section h2 {
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 0px solid #a6aab9;
    color: #000;
    font-size: 1.5em;
    text-align: center;
}

.od-form-section h3 {
    color: #000;
}

/* Section Completion Checkbox */
.od-section-complete-wrapper {
    margin-top: 20px;
    padding-top: 5px;
    border-top: 0px solid #e0e0e0;
    text-align: right;
}

.od-section-complete-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #0f0f0f;
}

.od-section-complete-label:hover {
    color: #000;
}

.od-section-complete-checkbox {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.od-section-complete-label span {
    user-select: none;
}

.od-optional-note {
    margin-right: 8px;
}

/* Form Elements */
.od-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Sticky form row for desktop only */
@media (min-width: 769px) {
    .od-form-row {
        position: sticky;
        top: 10px;
        z-index: 100;
        background-color: #ffffffed;
        background-image: url('../images/background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 20px 20px 0 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

.od-form-group {
    margin-bottom: 15px;
}

/* .od-gear-group-heading is included here because it replaced a <label>
   that named nothing: the gear list is a group of controls, not a single
   field. It is a paragraph now, and needs the same appearance the label
   had. */
.od-form-group label,
.od-form-group .od-gear-group-heading {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #201f1f;
}

/* Paragraphs inherit a browser margin that labels do not, which would
   otherwise push the gear list down. */
.od-form-group .od-gear-group-heading {
    margin-top: 0;
}

/* Name input wrapper with generate button */
.od-name-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.od-name-input-wrapper .od-input {
    flex: 1;
}

.od-name-input-wrapper .od-btn-small {
    white-space: nowrap;
    padding: 10px 15px;
    font-size: 0.9em;
}

/* Modern styling for Generate Name button */
#od-generate-name-btn {
    cursor: pointer;
    background: #5a67d8;
    border: none;
    color: white;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#od-generate-name-btn:hover {
    background: #4c51bf;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#od-generate-name-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#od-roll-abilities-btn {
    cursor: pointer;
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#od-roll-abilities-btn:hover,
#od-roll-abilities-btn:focus-visible,
#od-roll-abilities-btn:active {
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#od-auto-generate-btn {
    cursor: pointer;
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#od-auto-generate-btn-nav {
    cursor: pointer;
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
    margin: 6px;
    align-self: center;
}

#od-auto-generate-btn:hover,
#od-auto-generate-btn:focus-visible,
#od-auto-generate-btn:active {
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#od-auto-generate-btn-nav:hover,
#od-auto-generate-btn-nav:focus-visible,
#od-auto-generate-btn-nav:active {
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.od-tab1-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.od-tab1-title {
    margin: 0;
    padding-bottom: 0;
    line-height: 1.2;
    text-align: center;
}

.od-tab1-subtitle {
    margin: -28px 0 0 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #5b6475;
    text-transform: none;
    text-align: center;
    padding-bottom: 20px;
}

.od-tab1-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.od-tab1-auto-generate-btn {
    margin: 0;
    white-space: nowrap;
}

.od-input,
.od-select,
.od-textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.od-input:focus,
.od-select:focus,
.od-textarea:focus {
    outline: none;
    border-color: #667eea;
}



/* Required select fields with red border when empty */
#od-char-race:invalid,
#od-char-class:invalid {
    border-color: #dc3545;
}

#od-char-race:valid,
#od-char-class:valid {
    border-color: #ddd;
}

.od-textarea {
    resize: vertical;
    font-family: inherit;
}

/* Ability Scores Grid */
.od-ability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.od-ability-item {
    text-align: center;
    font-size: 16px;
}

.od-ability-item > label {
    display: block;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 400;
    color: #000;
}

.od-ability-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.od-ability-input {
    width: 80px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 auto;
}

.od-versatile-checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

.od-versatile-checkbox-label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.od-versatile-checkbox-label span {
    user-select: none;
}

.od-ability-bonus {
    display: block;
    margin-top: 5px;
    font-size: 1.1em;
    font-weight: bold;
    color: #667eea;
}

/* Combat Stats Grid */
.od-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.od-stat-item {
    text-align: center;
}

.od-stat-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #000;
}

.od-stat-input {
    width: 100px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #f8f9fa;
}

/* Saves Grid */
.od-saves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.od-save-item {
    display: flex;
    flex-direction: column;
}

/* The saving-throw group heading used to be a bare <label> that named
   nothing, because the row contains two separate fields. It is now a
   fieldset with a legend so the shared heading is announced once and each
   field carries its own label.

   These rules strip the browser's default fieldset border, padding and
   legend positioning so the layout is byte-for-byte what it was. The
   original label selector is kept alongside the legend so nothing else
   that still uses it loses its styling. */
.od-save-fieldset {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.od-save-item > label,
.od-save-fieldset > legend {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.od-save-values {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding-top: 28px;
}

.od-save-field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.od-save-label {
    font-size: 0.75em;
    color: #000;
    margin-bottom: 3px;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.od-save-input {
    width: 60px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #f8f9fa;
}

.od-save-bonus {
    width: 60px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #fff3cd;
    border-color: #ffc107;
}

.od-save-separator {
    font-size: 1.3em;
    font-weight: bold;
    color: #666;
    padding: 0 5px;
    margin-bottom: 4px;
}

/* Abilities Display */
.od-abilities-display {
    margin-top: 15px;
}

.od-abilities-box {
    /* background: #f8f9fa; */
    padding: 15px;
    border-radius: 5px;
    border-left: 0px solid #667eea;
}

.od-abilities-box h3 {
    margin: 0 0 10px 0;
    color: #000;
    font-size: 1.2em;
    font-weight: 700;
}

.od-abilities-box ul {
    margin: 0;
    padding-left: 20px;
}

.od-abilities-box li {
    margin-bottom: 8px;
    color: #000000;
    font-size: 0.95em;
    line-height: 1.6;
}

.od-abilities-box li strong {
    color: #000;
    font-weight: 700;
}

/* Race Ability Selection */
.od-race-ability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.od-race-ability-header h3 {
    margin: 0;
}

.od-race-ability-reset {
    background: #000;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.3s ease;
}

.od-race-ability-reset:hover {
    background: #333;
}

.od-race-ability-reset:disabled {
    background: #cbd3da;
    cursor: not-allowed;
}

.od-race-ability-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    margin: 5px 0;
    background: white;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.od-race-ability-item.selected {
    border-color: #28a745;
    background: #f0f9f4;
}

.od-class-abilities-header {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.od-class-abilities-header h3 {
    margin: 0;
}

.od-class-abilities-toggle {
    white-space: nowrap;
    background: #1fff06;
    color: #000;
    border: 1px solid #000;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.od-class-abilities-toggle:hover,
.od-class-abilities-toggle:focus-visible,
.od-class-abilities-toggle:active {
    background: #1fff06;
    border-color: #000;
    color: #000;
}

.od-class-abilities-toggle[aria-expanded="true"] {
    background: #ff2d2d;
    border-color: #d81f1f;
    color: #fff;
}

.od-class-abilities-toggle[aria-expanded="true"]:hover,
.od-class-abilities-toggle[aria-expanded="true"]:focus-visible,
.od-class-abilities-toggle[aria-expanded="true"]:active {
    background: #ff4444;
    border-color: #e03232;
    color: #fff;
}

.od-class-abilities-content.collapsed {
    display: none;
}

.od-class-abilities-content.expanded {
    display: block;
}

.od-race-ability-item.disabled:not(.selected) {
    display: none;
}

.od-race-ability-checkbox {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.od-race-ability-content {
    flex: 1;
}

.od-race-ability-content strong {
    display: block;
    margin-bottom: 4px;
    color: #000;
    font-size: 1.05em;
}

.od-race-ability-content label {
    cursor: pointer;
}

.od-race-ability-effect {
    color: #000000;
    line-height: 1.4;
}

.od-race-ability-instruction {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    padding: 10px;
    margin-bottom: 10px;
    color: #000;
    font-size: 0.9em;
    border-radius: 3px;
}

/* Currency Grid */
.od-currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.od-currency-item {
    text-align: center;
}

.od-currency-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #262525;
}

.od-remaining-gold {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    text-align: center;
    padding: 15px;
    background: #10131b;
    color: #ffcf10;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
}

/* Live character counters under the free-text areas */
.od-char-counter {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #6b7280;
    text-align: right;
}

.od-char-counter-low {
    color: #b45309;
}

.od-char-counter-empty {
    color: #b91c1c;
    font-weight: 600;
}

/* Spells */
.od-spell-list {
    max-height: none;
    overflow-y: visible;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
}

.od-spell-list p {
    color: #000;
    font-weight: 500;
}

.od-spell-list-display {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.od-spell-list-display p {
    color: #000;
    font-weight: 100;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 15px;
}

.od-spell-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.od-spell-items li {
    padding: 10px 15px;
    background: #f8f9fa;
    border-left: 1px solid #18181c;
    border-radius: 4px;
    color: #333;
}

.od-spell-item {
    display: block;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.od-spell-item:hover {
    border-color: #667eea;
    background: #f0f3ff;
}

.od-spell-checkbox {
    margin-right: 10px;
    cursor: pointer;
}

/* Gear List */
.od-gear-list {
    margin-bottom: 15px;
}

/* Form Actions */
.od-form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Old Modal System (Save/Load Character) */
.od-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.od-modal[style*="display: block"],
.od-modal[style*="display:block"],
.od-modal[style*="display: flex"],
.od-modal[style*="display:flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.od-modal-content {
    background: #1a1d26;
    border: 2px solid #f2a23b;
    border-radius: 8px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    margin: 0 auto;
    color: #d6cbb0;
}

.od-modal-content h2 {
    color: #f2a23b;
    margin-top: 0;
}

/* Was a <span>, which is not focusable and announces nothing, so the modals
   could not be closed by keyboard. Now a real <button>; these rules strip
   the default button chrome so it looks exactly as it did.

   The minimum size satisfies the 24 by 24 CSS pixel target requirement
   (WCAG 2.5.8); the glyph alone was smaller than its clickable area
   suggested. */
.od-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 2em;
    font-weight: bold;
    color: #d6cbb0;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}

.od-modal-close:hover {
    color: #f2a23b;
}

/* Alert Modal */
.od-alert-modal-content {
    max-width: 500px;
}

.od-alert-modal-content h2 {
    color: #f39c12;
    margin-bottom: 15px;
}

.od-alert-modal-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

#od-alert-message {
    white-space: pre-line;
}

.od-alert-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.od-alert-buttons .od-btn {
    min-width: 120px;
}

/* Confirmation Modal Buttons */
.od-confirm-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

.od-confirm-buttons .od-btn {
    min-width: 120px;
}

/* Green Yes button for confirmation */
#od-confirm-yes {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

#od-confirm-yes:hover {
    background: #218838;
    border-color: #1e7e34;
}

/* Validation */
.od-validation-msg {
    display: block;
    color: #dc3545;
    font-size: 0.85em;
    margin-top: 5px;
}

.od-validation-panel {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: none;
}

.od-validation-panel h3 {
    margin: 0 0 15px 0;
    color: #000;
}

.od-success {
    color: #28a745;
    font-weight: bold;
}

.od-error {
    color: #dc3545;
    font-weight: bold;
}

.od-validation-results ul {
    padding-left: 20px;
}

/* Saved Characters List (old modal styles removed - using new wizard modal) */
.od-character-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.od-character-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: #2c3e50;
    border-radius: 5px;
    border: 2px solid #34495e;
    color: #ecf0f1;
}

.od-character-item:hover {
    border-color: #667eea;
    background: #34495e;
}

.od-character-info {
    flex: 1;
}

.od-character-info strong {
    color: #fff;
    font-size: 1.1em;
}

.od-character-info small {
    color: #bdc3c7;
}

.od-character-actions {
    display: flex;
    gap: 10px;
}

/* Footer */
.od-generator-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #777;
    border-top: 1px solid #ddd;
}

/* Responsive Design */
@media (max-width: 768px) {
    #od-generator-wrapper {
        padding: 10px;
    }
    
    .od-generator-header h1 {
        font-size: 1.8em;
    }
    
    .od-subtitle {
        font-size: 1em;
    }
    
    .od-form-section {
        padding: 15px;
    }
    
    .od-ability-grid,
    .od-stats-grid,
    .od-saves-grid,
    .od-currency-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .od-mode-toggle,
    .od-save-load-controls,
    .od-form-actions {
        flex-direction: column;
    }
    
    .od-btn {
        width: 100%;
    }
    
    .od-character-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .od-character-actions {
        width: 100%;
    }
    
    .od-character-actions .od-btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .od-ability-grid,
    .od-stats-grid,
    .od-currency-grid {
        grid-template-columns: 1fr;
    }
}

/* Notification Toast System */
.od-notification-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
    width: 90%;
}

.od-notification {
    background: #2c3e50;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInUp 0.3s ease-out;
    border: 2px solid #34495e;
    position: relative;
    overflow: hidden;
}

.od-notification::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0,0,0,0.1);
    animation: shrinkWidth 3s linear;
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100px);
        opacity: 0;
    }
}

@keyframes shrinkWidth {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.od-notification.removing {
    animation: slideOutDown 0.3s ease-out forwards;
}

.od-notification-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.od-notification-content {
    flex: 1;
}

.od-notification-title {
    font-weight: 700;
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #fff;
}

.od-notification-message {
    margin: 0;
    font-size: 14px;
    color: #ecf0f1;
    line-height: 1.5;
}

.od-notification-close {
    cursor: pointer;
    font-size: 22px;
    color: #95a5a6;
    flex-shrink: 0;
    transition: color 0.2s ease;
    padding: 0;
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Info Message */
.od-info-message {
    /* background: #2a3140; */
    color: #000;
    padding: 15px 20px;
    border-radius: 4px;
    border-left: 4px solid #0a0a0a;
    margin-bottom: 20px;
    font-size: 18px;
}

.od-notification-close:hover {
    color: #fff;
}

/* Success Notification */
.od-notification.success {
    border-color: #27ae60;
    background: #27ae60;
}

.od-notification.success .od-notification-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Error Notification */
.od-notification.error {
    border-color: #e74c3c;
    background: #e74c3c;
}

.od-notification.error .od-notification-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Warning Notification */
.od-notification.warning {
    border-color: #f39c12;
    background: #f39c12;
}

.od-notification.warning .od-notification-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.od-notification.warning .od-notification-title,
.od-notification.warning .od-notification-message {
    color: #fff;
}

/* Info Notification */
.od-notification.info {
    border-color: #3498db;
    background: #3498db;
}

.od-notification.info .od-notification-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Print Styles */
@media print {
    .od-control-panel,
    .od-form-actions,
    .od-generator-footer,
    .od-notification-container {
        display: none;
    }
    
    .od-form-section {
        page-break-inside: avoid;
    }
}

@media (max-width: 480px) {
    .od-notification-container {
        left: 10px;
        right: 10px;
        max-width: none;
        transform: none;
    }
    
    .od-notification {
        padding: 12px 16px;
    }
}

/* Weapons Multi-Select */
.od-weapons-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 10px;
}

#od-weapons-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.od-weapons-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.od-weapons-filter-select {
    flex: 1;
    min-width: 150px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9em;
    cursor: pointer;
}

.od-weapons-filter-select:hover {
    border-color: #999;
}

.od-weapons-reset-btn {
    padding: 6px 12px;
    background: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.od-weapons-reset-btn:hover {
    background: #333;
}

.od-weapons-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
    
    /* Blue scrollbar */
    scrollbar-width: auto;
    scrollbar-color: #667eea #e8e8e8;
}

/* Webkit scrollbar for weapons list */
.od-weapons-list::-webkit-scrollbar {
    width: 16px;
}

.od-weapons-list::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 8px;
}

.od-weapons-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    border: 2px solid #e8e8e8;
}

.od-weapons-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.od-weapon-item {
    padding: 8px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
}

.od-weapon-item:hover {
    background: #f0f0f0;
}

.od-weapon-item.selected {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.od-weapon-item input[type="checkbox"] {
    margin-right: 8px;
}

.od-weapon-name {
    font-weight: 600;
    margin-right: 10px;
    color: #000;
}

.od-weapon-cost {
    color: #000;
    margin-right: 10px;
}

.od-weapon-damage {
    color: #000;
}

.od-selected-weapons {
    margin-top: 16px;
    padding: 16px;
    background: #eef2f7;
    border: 1px solid #c8d1df;
    border-radius: 14px;
    box-shadow: none;
}

.od-selected-weapons.od-empty,
.od-selected-gear.od-empty {
    background: #faeee8;
    border-color: #e2b5a2;
}

.od-selected-weapons.od-has-selection,
.od-selected-gear.od-has-selection {
    background: #e9f4e8;
    border-color: #aac7a7;
}

.od-selected-weapons strong {
    display: block;
    line-height: 1.25;
    color: #1d2738;
    font-size: 0.82em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.od-selected-weapons-items,
#od-selected-weapons-items {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #000;
}

#od-selected-weapons-items em {
    color: #586378 !important;
    font-style: normal;
    font-weight: 500;
    padding: 7px 12px;
    border: 1px dashed #b9c4d6;
    border-radius: 10px;
    background: #f7f9fc;
}

.od-inline-empty-state {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.od-empty-autoselect-btn {
    cursor: pointer;
    background: #1fff06;
    border: 1px solid #000;
    color: #000;
    font-weight: 500;
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.od-empty-autoselect-btn:hover,
.od-empty-autoselect-btn:focus-visible,
.od-empty-autoselect-btn:active {
    background: #1fff06;
    border-color: #000;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.od-selected-weapon-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #223047;
    padding: 8px 8px 8px 14px;
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: 600;
    border: 1px solid #bcc9dc;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    margin: 4px 4px 0 0;
}

.od-selected-weapon-tag:hover {
    transform: translateY(-1px);
    border-color: #95a7c2;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
}

.od-selected-weapon-tag .od-remove-weapon {
    margin-left: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.45em;
    opacity: 1;
    transition: transform 0.15s ease, color 0.15s ease;
    line-height: 0.9;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #394a66;
}

.od-selected-weapon-tag .od-remove-weapon:hover {
    background: transparent;
    color: #000;
    transform: scale(1.12);
}

/* ========================================
   GEAR STYLES (Similar to Weapons)
   ======================================== */

.od-gear-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 10px;
}

#od-gear-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.od-gear-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.od-gear-filter-select {
    flex: 1;
    min-width: 150px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9em;
    cursor: pointer;
}

.od-gear-filter-select:hover {
    border-color: #999;
}

.od-gear-reset-btn {
    padding: 6px 12px;
    background: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.od-gear-reset-btn:hover {
    background: #333;
}

.od-gear-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
    
    /* Blue scrollbar */
    scrollbar-width: auto;
    scrollbar-color: #667eea #e8e8e8;
}

/* Webkit scrollbar for gear list */
.od-gear-list::-webkit-scrollbar {
    width: 16px;
}

.od-gear-list::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 8px;
}

.od-gear-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    border: 2px solid #e8e8e8;
}

.od-gear-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.od-gear-item {
    padding: 8px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.od-gear-item:hover {
    background: #f0f0f0;
}

.od-gear-item.selected {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.od-gear-item input[type="checkbox"] {
    margin-right: 8px;
}

.od-gear-item-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.od-gear-name {
    font-weight: 600;
    margin-right: 10px;
    color: #000;
}

.od-gear-category {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-right: 10px;
}

.od-gear-cost {
    color: #000;
    margin-left: auto;
}

.od-selected-gear {
    margin-top: 16px;
    padding: 16px;
    background: #eef2f7;
    border: 1px solid #c8d1df;
    border-radius: 14px;
    box-shadow: none;
}

.od-selected-gear strong {
    display: block;
    line-height: 1.25;
    color: #1d2738;
    font-size: 0.82em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.od-selected-gear-items,
#od-selected-gear-items {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #000;
}

#od-selected-gear-items em {
    color: #586378 !important;
    font-style: normal;
    font-weight: 500;
    padding: 7px 12px;
    border: 1px dashed #b9c4d6;
    border-radius: 10px;
    background: #f7f9fc;
}

.od-selected-gear-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #223047;
    padding: 8px 8px 8px 14px;
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: 600;
    border: 1px solid #bcc9dc;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    margin: 4px 4px 0 0;
}

.od-selected-gear-tag:hover {
    transform: translateY(-1px);
    border-color: #95a7c2;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
}

.od-selected-gear-tag .od-remove-gear {
    margin-left: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.45em;
    opacity: 1;
    transition: transform 0.15s ease, color 0.15s ease;
    line-height: 0.9;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #394a66;
}

.od-selected-gear-tag .od-remove-gear:hover {
    background: transparent;
    color: #000;
    transform: scale(1.12);
}

/* Disabled Ability Scores Section */
.od-ability-scores.od-section-disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.od-ability-scores.od-section-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(200, 200, 200, 0.3);
    z-index: 1;
}

.od-ability-scores.od-section-disabled .od-input,
.od-ability-scores.od-section-disabled .od-btn,
.od-ability-scores.od-section-disabled .od-section-complete-checkbox {
    cursor: not-allowed !important;
}

/* Armor/Helmet/Shield Row - Responsive Grid */
.od-armor-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .od-armor-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Adventurer's folio. Presentation only: retain all visibility/state classes. */
#od-generator-wrapper {
    --od-paper: #f5efe2;
    --od-ink: #29251e;
    --od-muted: #6e6251;
    --od-line: #cbbb9c;
    --od-gold: #92651e;
    --od-dark: #171918;
    max-width: 1200px;
    padding: 26px 28px 80px;
    color: var(--od-ink);
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.5;
}
#od-generator-wrapper *,
#od-generator-wrapper *::before,
#od-generator-wrapper *::after { box-sizing: border-box; }
#od-generator-wrapper .od-control-panel { padding: 0; margin-bottom: 22px; }
#od-generator-wrapper .od-save-load-controls { justify-content: flex-end; gap: 10px; }
#od-generator-wrapper .od-character-summary-box {
    padding: 22px 26px;
    gap: 20px 28px;
    justify-content: space-between;
    background: linear-gradient(120deg, #20221e, #131614);
    border: 1px solid #756343;
    border-radius: 6px;
    box-shadow: inset 0 0 0 5px #191c18, 0 8px 24px #0003;
}
#od-generator-wrapper .od-summary-row { white-space: normal; flex-wrap: wrap; gap: 3px; }
#od-generator-wrapper .od-summary-row strong { color: #cabea9; font-size: 12px; font-weight: 500; }
#od-generator-wrapper .od-summary-row span { color: #f7efde; font-size: 19px; font-weight: 500; }
#od-generator-wrapper .od-summary-row:first-child { flex-direction: column; align-items: flex-start; }
#od-generator-wrapper #od-summary-race-class { font: 25px Georgia, serif; }
#od-generator-wrapper #od-summary-gp { color: #e7bf73; }
#od-generator-wrapper .od-wizard-tabs {
    border: 1px solid var(--od-line);
    background: var(--od-paper);
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    box-shadow: none;
    gap: 0;
}
#od-generator-wrapper .od-wizard-tab {
    min-width: 105px;
    padding: 18px 12px;
    background: transparent;
    color: #4f4535;
    border-right: 1px solid #d4c8b0;
    border-bottom: 3px solid transparent;
    font-family: Georgia, serif;
    font-size: 16px;
    border-radius: 0;
}
#od-generator-wrapper .od-wizard-tab:hover { background: #e9dfcb; color: #33291b; }
#od-generator-wrapper .od-wizard-tab.active { background: #fffbf2; color: #000; border-bottom-color: #00c341; }
#od-generator-wrapper .od-wizard-tab.completed { color: #285a3c; }
#od-generator-wrapper .od-wizard-tab.completed:not(.active) { background: #e6eadf; }
#od-generator-wrapper .od-btn,
#od-generator-wrapper .od-btn-small {
    min-height: 44px;
    padding: 10px 16px;
    background: var(--od-dark);
    color: #eee4d0;
    border: 1px solid #7d6b4d;
    border-radius: 4px;
    font: 500 14px/1.4 'Segoe UI', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
#od-generator-wrapper .od-btn:hover,
#od-generator-wrapper .od-btn-small:hover { background: #35372d; border-color: #b89b64; color: #fff7e7; }
#od-generator-wrapper :is(#od-auto-generate-btn, #od-auto-generate-btn-nav, #od-roll-abilities-btn),
#od-generator-wrapper .od-wizard-navigation .od-btn[data-action="next"] {
    background: linear-gradient(#a7792e, #865a18);
    border: 1px solid #79521b;
    color: #fff;
    box-shadow: inset 0 0 0 2px #ffffff24;
    font-weight: 600;
}
#od-generator-wrapper :is(#od-auto-generate-btn, #od-auto-generate-btn-nav, #od-roll-abilities-btn):hover,
#od-generator-wrapper .od-wizard-navigation .od-btn[data-action="next"]:hover { background: #765016; }
#od-generator-wrapper #od-auto-generate-btn-nav { margin: 8px; white-space: normal; width: auto; min-width: 0; }
#od-generator-wrapper .od-form-section {
    background: linear-gradient(110deg, #faf6edee, #f2eadbdd), url('../images/background.jpg') center / cover;
    color: var(--od-ink);
    border: 1px solid var(--od-line);
    border-top: 0;
    padding: 30px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 30px #0003;
    margin-bottom: 18px;
}
#od-generator-wrapper .od-equipment.od-form-section { margin-right: 0; padding-right: 30px; }
#od-generator-wrapper .od-form-section h2 {
    font: 500 clamp(28px, 3vw, 42px)/1.15 Georgia, serif;
    color: var(--od-ink);
    text-align: left;
    border-bottom: 1px solid var(--od-line);
    padding-bottom: 18px;
    margin-bottom: 24px;
}
#od-generator-wrapper .od-form-section h3 { font-family: Georgia, serif; color: var(--od-ink); }
#od-generator-wrapper .od-tab1-header-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    align-items: center;
    border-bottom: 1px solid var(--od-line);
    padding-bottom: 24px;
    margin-bottom: 24px;
}
#od-generator-wrapper .od-form-section .od-tab1-title { grid-column: 1; border: 0; margin: 0; padding: 0; }
#od-generator-wrapper .od-tab1-subtitle { grid-column: 1; margin: 0; padding: 0; text-align: left; color: var(--od-muted); font-size: 14px; }
#od-generator-wrapper .od-tab1-action-row { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; }
#od-generator-wrapper .od-form-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 20px;
    background: var(--od-paper);
    background-image: none;
    padding: 16px 0;
    border-radius: 0;
    box-shadow: none;
}
#od-generator-wrapper .od-form-group { min-width: 0; }
#od-generator-wrapper .od-form-group label,
#od-generator-wrapper .od-gear-group-heading { color: #443b2d; }
#od-generator-wrapper :is(.od-input, .od-select, .od-textarea, .od-weapons-filter-select, .od-gear-filter-select) {
    min-height: 44px;
    max-width: 100%;
    background-color: #fffdf7;
    border: 1px solid #ae9b7d;
    color: #30291f;
    border-radius: 4px;
    font-size: 16px;
    padding: 10px 12px;
}
#od-generator-wrapper :is(input, select, textarea, button):focus-visible,
#od-generator-wrapper [tabindex]:focus-visible {
    outline: 3px solid #bb872e;
    outline-offset: 3px;
}
#od-generator-wrapper input[type="checkbox"],
#od-generator-wrapper input[type="radio"] { accent-color: #88601f; }
#od-generator-wrapper #od-char-race:invalid,
#od-generator-wrapper #od-char-class:invalid { border-color: #a5473b; }
#od-generator-wrapper #od-char-race:valid,
#od-generator-wrapper #od-char-class:valid { border-color: #ae9b7d; }
#od-generator-wrapper .od-name-input-wrapper .od-input { min-width: 0; }
#od-generator-wrapper #od-generate-name-btn { background: #eee4d0; color: #49371d; border-color: #b5a17d; }
#od-generator-wrapper .od-abilities-box {
    border: 1px solid var(--od-line);
    background: #fffcf580;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 18px;
}
#od-generator-wrapper .od-abilities-box h3 { font-size: 23px; font-weight: 500; }
#od-generator-wrapper .od-race-ability-item { background: #fffdf78c; border-width: 1px; padding: 14px; }
#od-generator-wrapper .od-race-ability-item.selected { background: #eee4cd; border-color: #977336; }
#od-generator-wrapper .od-race-ability-instruction { background: #ede2ca; border-left-color: #9b773d; }
#od-generator-wrapper :is(.od-class-abilities-toggle, .od-race-ability-reset, .od-weapons-reset-btn, .od-gear-reset-btn, .od-empty-autoselect-btn) {
    background: #eee4d0;
    color: #49371d;
    border: 1px solid #ad956a;
    min-height: 44px;
    border-radius: 4px;
    white-space: normal;
}
#od-generator-wrapper .od-class-abilities-toggle[aria-expanded="true"] { background: #d9c8a6; }
#od-generator-wrapper .od-ability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#od-generator-wrapper :is(.od-ability-item, .od-stat-item, .od-save-item) {
    padding: 18px;
    border: 1px solid var(--od-line);
    background: #fffaf0b3;
    border-radius: 4px;
}
#od-generator-wrapper .od-ability-item > label { color: var(--od-muted); }
#od-generator-wrapper :is(.od-ability-input, .od-stat-input) { font-family: Georgia, serif; font-size: 30px; }
#od-generator-wrapper .od-combat-stats #od-hp { background-color: #e3f2fd; }
#od-generator-wrapper .od-combat-stats :is(#od-ac, #od-dr) { background-color: #fff4c2; }
#od-generator-wrapper .od-combat-stats :is(#od-hp, #od-ac, #od-dr) { appearance: textfield; -moz-appearance: textfield; }
#od-generator-wrapper .od-combat-stats :is(#od-hp, #od-ac, #od-dr)::-webkit-inner-spin-button,
#od-generator-wrapper .od-combat-stats :is(#od-hp, #od-ac, #od-dr)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#od-generator-wrapper .od-ability-bonus { color: #725020; font: 22px Georgia, serif; }
#od-generator-wrapper :is(.od-selected-weapons, .od-selected-gear, .od-spell-list, .od-spell-list-display) {
    background: #eee5d3;
    border: 1px solid var(--od-line);
    border-radius: 4px;
    box-shadow: none;
}
#od-generator-wrapper :is(.od-selected-weapons, .od-selected-gear) strong { color: #58482d; }
#od-generator-wrapper :is(.od-selected-weapon-tag, .od-selected-gear-tag) { background: #fffaf0; border-color: #bca47a; color: #49391f; box-shadow: none; }
#od-generator-wrapper :is(.od-weapons-list, .od-gear-list) { border-color: var(--od-line); background: #fffdf6; scrollbar-color: #9b8050 #e8dfcc; }
#od-generator-wrapper :is(.od-weapons-list, .od-gear-list)::-webkit-scrollbar-thumb { background: #9b8050; border-color: #e8dfcc; }
#od-generator-wrapper :is(.od-weapons-list, .od-gear-list)::-webkit-scrollbar-track { background: #e8dfcc; }
#od-generator-wrapper :is(.od-weapon-item, .od-gear-item, .od-spell-item):hover { background: #efe5cf; }
#od-generator-wrapper :is(.od-weapon-item, .od-gear-item).selected { background: #e8e8d7; border-left-color: #657348; }
#od-generator-wrapper .od-remaining-gold { background: #26291f; color: #f2d28c; border: 1px solid #88734b; border-radius: 4px; }
#od-generator-wrapper .od-section-complete-wrapper { border-top: 1px solid var(--od-line); padding-top: 20px; }
#od-generator-wrapper .od-section-complete-label { min-height: 44px; flex-wrap: wrap; gap: 5px; text-align: left; }
#od-generator-wrapper .od-optional-note { font-size: 12px; color: var(--od-muted); font-style: italic; }
#od-generator-wrapper .od-wizard-navigation { padding: 6px 0 20px; }
#od-generator-wrapper .od-modal-content { background: var(--od-paper); color: var(--od-ink); border-color: var(--od-line); }
#od-generator-wrapper .od-modal-content h2 { color: var(--od-ink); font-family: Georgia, serif; }
#od-generator-wrapper .od-modal-close { color: var(--od-ink); }

/* Portrait stays in the page flow; missing artwork occupies the same space. */
#od-generator-wrapper .od-calling-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
#od-generator-wrapper .od-calling-layout > .od-form-row,
#od-generator-wrapper :is(.od-calling-layout, .od-race-portrait-column) > .od-abilities-display { grid-column: 1; min-width: 0; }
#od-generator-wrapper .od-calling-layout > .od-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#od-generator-wrapper .od-calling-layout .od-form-group:first-child { grid-column: 1 / -1; }
#od-generator-wrapper .od-portrait-panel { grid-column: 2; grid-row: 1 / 4; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--od-line); background: #ede4d3; border-radius: 4px; }
#od-generator-wrapper .od-portrait-frame { aspect-ratio: 1696 / 2528; position: relative; background: radial-gradient(ellipse at 50% 35%, #373b32, #171b18); border: 1px solid #8e7850; overflow: hidden; }
#od-generator-wrapper .od-portrait-frame::after { content: none; }
#od-generator-wrapper .od-portrait-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
#od-generator-wrapper .od-portrait-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; color: #dfcfaa; }
#od-generator-wrapper .od-portrait-placeholder svg { width: 60px; height: 76px; opacity: .8; }
#od-generator-wrapper .od-portrait-placeholder strong { font: 23px/1.3 Georgia, serif; font-weight: 400; }
#od-generator-wrapper .od-portrait-placeholder span { font-size: 13px; color: #bdb49f; }
#od-generator-wrapper .od-portrait-caption { text-align: center; margin: 12px 0; font: 18px Georgia, serif; color: #4e402c; }
#od-generator-wrapper .od-portrait-panel label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
#od-generator-wrapper .od-portrait-frame [hidden] { display: none; }
@media (max-width: 1050px) {
    #od-generator-wrapper .od-character-summary-box { justify-content: flex-start; }
    #od-generator-wrapper .od-calling-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
    #od-generator-wrapper .od-tab1-header-row { grid-template-columns: 1fr; }
    #od-generator-wrapper .od-tab1-action-row { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 12px; }
}
@media (max-width: 768px) {
    #od-generator-wrapper { padding: 18px 16px 100px; }
    #od-generator-wrapper .od-save-load-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #od-generator-wrapper .od-character-summary-box { padding: 20px; gap: 14px 20px; }
    #od-generator-wrapper .od-summary-row:first-child { width: 100%; }
    #od-generator-wrapper .od-wizard-tabs { flex-direction: row; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #od-generator-wrapper .od-wizard-tab { min-width: 0; padding: 14px 6px; font-size: 14px; border-bottom-width: 3px; }
    #od-generator-wrapper #od-auto-generate-btn-nav { grid-column: 1 / -1; }
    #od-generator-wrapper .od-form-section,
    #od-generator-wrapper .od-equipment.od-form-section { padding: 22px 18px; }
    #od-generator-wrapper .od-calling-layout { grid-template-columns: minmax(0, 1fr); }
    #od-generator-wrapper .od-portrait-panel { grid-column: 1; grid-row: 2; width: min(100%, 300px); justify-self: center; }
    #od-generator-wrapper .od-form-row,
    #od-generator-wrapper .od-calling-layout > .od-form-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    #od-generator-wrapper .od-ability-grid,
    #od-generator-wrapper .od-stats-grid,
    #od-generator-wrapper .od-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #od-generator-wrapper .od-saves-grid { grid-template-columns: minmax(0, 1fr); }
    #od-generator-wrapper .od-class-abilities-header,
    #od-generator-wrapper .od-race-ability-header { flex-wrap: wrap; gap: 12px; }
    #od-generator-wrapper .od-abilities-box { padding: 14px; }
    #od-generator-wrapper .od-weapon-item,
    #od-generator-wrapper .od-gear-item { flex-wrap: wrap; gap: 5px; }
    #od-generator-wrapper .od-gear-item-left { flex-wrap: wrap; min-width: 0; }
    #od-generator-wrapper .od-modal-content { width: calc(100% - 24px); padding: 24px 18px; }
}
@media (max-width: 380px) {
    #od-generator-wrapper { padding-right: 10px; padding-left: 10px; }
    #od-generator-wrapper .od-form-section,
    #od-generator-wrapper .od-equipment.od-form-section { padding: 20px 12px; }
    #od-generator-wrapper .od-tab1-action-row { align-items: stretch; flex-direction: column; }
    #od-generator-wrapper .od-name-input-wrapper { flex-wrap: wrap; }
    #od-generator-wrapper .od-name-input-wrapper .od-input { flex-basis: 100%; }
    #od-generator-wrapper .od-ability-item { padding: 12px 8px; }
    #od-generator-wrapper .od-wizard-navigation { gap: 8px; }
    #od-generator-wrapper .od-wizard-navigation .od-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #od-generator-wrapper *, #od-generator-wrapper *::before, #od-generator-wrapper *::after { animation: none !important; transition: none !important; }
}

/* Match the approved folio reference: masthead, identity, ruled statistics,
   six equal tabs, serif controls, fine ornament, and paired ability cards. */
#main-content:has(#od-generator-wrapper) {
    background: url('../images/folio-grain.svg'), radial-gradient(ellipse at 50% 0, #22231f, #121413 75%);
}
#od-generator-wrapper {
    max-width: 1536px;
    padding: 24px 64px 80px;
    --od-paper: #f6f0e4;
    --od-ink: #24241f;
    --od-line: #c7b58e;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
}
#od-generator-wrapper .od-folio-masthead {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
#od-generator-wrapper .od-folio-brand { display: flex; align-items: center; justify-self: start; gap: 16px; width: auto; margin: 0; padding: 0; border: 0; border-radius: 4px; appearance: none; background: transparent; color: #f4eee1; text-align: left; text-transform: none; cursor: pointer; }
#od-generator-wrapper .od-folio-brand:hover { filter: brightness(1.08); }
#od-generator-wrapper .od-folio-brand:focus-visible { outline: 3px solid #00c341; outline-offset: 5px; }
#od-generator-wrapper .od-folio-brand img { flex: 0 0 60px; width: 60px; height: 72px; }
#od-generator-wrapper .od-folio-brand-copy { display: block; }
#od-generator-wrapper .od-folio-brand span { font: small-caps 34px/1.1 Georgia, serif; white-space: nowrap; }
#od-generator-wrapper .od-folio-brand small { display: block; color: #dabb7d; font: 19px/1.7 Georgia, serif; text-align: center; letter-spacing: .03em; }
#od-generator-wrapper .od-folio-brand small::before,
#od-generator-wrapper .od-folio-brand small::after { content: ''; display: inline-block; width: 22px; height: 1px; background: #a58c57; vertical-align: middle; margin: 0 8px; }
#od-generator-wrapper .od-save-load-controls { gap: 10px; flex-wrap: nowrap; }
#od-generator-wrapper .od-btn,
#od-generator-wrapper .od-btn-small { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 400; padding: 10px 16px; }
#od-generator-wrapper .od-save-load-controls .od-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #17191780; color: #f5efe1; border-color: #746a54; padding: 10px 12px; white-space: nowrap; }
#od-generator-wrapper .od-save-load-controls .od-btn::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; background: url('../images/folio-tools.svg') 0 0 / 80px 20px; }
#od-generator-wrapper #od-load-character-btn::before { background-position: -20px 0; }
#od-generator-wrapper #od-new-character-btn::before { background-position: -40px 0; }
#od-generator-wrapper #od-export-pdf-btn::before { background-position: -60px 0; }
#od-generator-wrapper .od-character-summary-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 2.8fr) minmax(100px, 1.1fr) repeat(6, minmax(62px, .8fr));
    padding: 22px 24px;
    gap: 0;
    border: 0;
    background: url('../images/folio-grain.svg'), linear-gradient(110deg, #1b1e1a, #121513);
    box-shadow: none;
    border-radius: 3px;
}
#od-generator-wrapper .od-form-section::after,
#od-generator-wrapper :is(.od-calling-layout, .od-race-portrait-column) > .od-abilities-display::after {
    content: ''; position: absolute; inset: 5px; pointer-events: none;
    border: 20px solid transparent;
    border-image: url('../images/folio-border.svg') 20% / 20px / 0 stretch;
}
#od-generator-wrapper .od-summary-identity { min-width: 0; display: flex; align-items: center; gap: 22px; padding-right: 16px; }
#od-generator-wrapper .od-summary-crest { width: 70px; height: 84px; padding: 6px; flex: 0 0 70px; border: 1px solid #a58a53; border-radius: 50%; }
#od-generator-wrapper .od-summary-identity > div { min-width: 0; }
#od-generator-wrapper #od-summary-name { display: block; font: 46px/1.05 Georgia, serif; color: #fff9eb; overflow-wrap: anywhere; }
#od-generator-wrapper #od-summary-race-class { display: block; color: #d6b97f; font: 19px/1.5 Georgia, serif; margin-top: 7px; }
#od-generator-wrapper .od-summary-row { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-left: 1px solid #73644770; padding: 4px 8px; text-align: center; }
#od-generator-wrapper .od-summary-row strong { color: #e4dbc9; font: 16px/1.2 Georgia, serif; margin: 0; }
#od-generator-wrapper .od-summary-row span { color: #f5f0e4; font: 36px/1.2 Georgia, serif; font-variant-numeric: tabular-nums; }
#od-generator-wrapper #od-summary-gp { color: #d9b775; font-size: 32px; }
#od-generator-wrapper .od-control-panel:has(.od-character-summary-box) { margin-bottom: 12px; }
#od-generator-wrapper .od-wizard-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: url('../images/folio-grain.svg'), var(--od-paper); }
#od-generator-wrapper .od-wizard-tab { padding: 17px 10px; font-size: 20px; min-width: 0; color: #332f27; }
#od-generator-wrapper .od-wizard-tab.active { background: #fffaf085; }
#od-generator-wrapper #od-auto-generate-btn-nav { grid-column: 1 / -1; justify-self: end; }
#od-generator-wrapper .od-generator-container:has(.od-basic-info.active) #od-auto-generate-btn-nav { display: none; }
#od-generator-wrapper .od-form-section {
    position: relative;
    padding: 28px 40px;
    background: url('../images/folio-grain.svg'), linear-gradient(105deg, #faf6ed, #f0e8d8);
    box-shadow: 0 16px 40px #0002;
}
#od-generator-wrapper .od-equipment.od-form-section { padding-right: 40px; }
#od-generator-wrapper .od-form-section h2 { font-size: 42px; font-weight: 400; }
#od-generator-wrapper .od-form-section .od-tab1-title { font-size: 52px; line-height: 1.08; }
#od-generator-wrapper .od-tab1-header-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 24px; border: 0; padding: 0; margin-bottom: 24px; }
#od-generator-wrapper .od-tab1-subtitle { font: 20px/1.4 Georgia, serif; color: #39362f; }
#od-generator-wrapper .od-tab1-subtitle::after { content: ''; display: block; width: 190px; height: 7px; border-top: 1px solid #b59b6a; margin-top: 10px; background: linear-gradient(45deg, transparent 45%, #a58a53 46% 54%, transparent 55%) center -4px / 8px 8px no-repeat; }
#od-generator-wrapper .od-tab1-action-row { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
#od-generator-wrapper :is(#od-auto-generate-btn, #od-roll-abilities-btn) { font-size: 20px; font-weight: 400; padding: 13px 24px; background: linear-gradient(#4cd239, #1b8c22); }
#od-generator-wrapper #od-auto-reset-btn,
#od-generator-wrapper #od-generate-name-btn { background: transparent; color: #403626; border: 1px solid #ab9163; font-weight: 400; box-shadow: none; }
#od-generator-wrapper #od-auto-reset-btn { font-size: 19px; padding: 13px 24px; }
#od-generator-wrapper .od-calling-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 230px; gap: 24px; }
#od-generator-wrapper .od-calling-layout > .od-form-row { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr 1fr; gap: 28px; border: 0; padding: 0 0 22px; margin: 0; background: transparent; position: static; }
#od-generator-wrapper .od-calling-layout .od-form-group:first-child { grid-column: auto; }
#od-generator-wrapper .od-form-group { margin-bottom: 0; }
#od-generator-wrapper .od-form-group label,
#od-generator-wrapper .od-gear-group-heading { font: 19px/1.4 Georgia, serif; margin-bottom: 8px; color: #292820; }
#od-generator-wrapper :is(.od-input, .od-select, .od-textarea) { font-family: Georgia, serif; font-size: 18px; background: #fffdf640; border-color: #b5a182; min-height: 48px; }
#od-generator-wrapper :is(.od-calling-layout, .od-race-portrait-column) > .od-abilities-display { position: relative; min-width: 0; margin: 0; padding: 22px; border: 1px solid #bda77e; border-radius: 2px; background: #fffaf040; }
#od-generator-wrapper #od-race-abilities { grid-column: 1; grid-row: 2; }
#od-generator-wrapper #od-class-abilities { grid-column: 2; grid-row: 2; }
#od-generator-wrapper .od-calling-layout .od-abilities-box { border: 0; padding: 0; margin: 0; background: transparent; }
#od-generator-wrapper .od-calling-layout .od-abilities-box + .od-abilities-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--od-line); }
#od-generator-wrapper .od-calling-layout .od-abilities-box h3 { font: 25px/1.2 Georgia, serif; }
#od-generator-wrapper .od-race-ability-header,
#od-generator-wrapper .od-class-abilities-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--od-line); margin-bottom: 18px; }
#od-generator-wrapper #od-race-abilities .od-race-ability-header h3,
#od-generator-wrapper .od-class-abilities-header h3 { display: flex; align-items: center; gap: 12px; }
#od-generator-wrapper #od-race-abilities .od-race-ability-header h3::before,
#od-generator-wrapper .od-class-abilities-header h3::before { content: ''; display: block; width: 52px; height: 52px; flex: 0 0 52px; background: url('../images/folio-tree.svg') center / contain no-repeat; }
#od-generator-wrapper #od-class-abilities .od-race-ability-header h3 { display: block; font-size: 20px; line-height: 1.4; }
#od-generator-wrapper .od-class-abilities-header h3::before { background-image: url('../images/folio-swords.svg'); }
#od-generator-wrapper .od-race-ability-instruction { background: transparent; border: 0; padding: 0 0 12px; font-size: 16px; }
#od-generator-wrapper .od-race-ability-item { background: transparent; padding: 10px 0; border: 0; border-bottom: 1px solid #c7b58e66; border-radius: 0; }
#od-generator-wrapper .od-race-ability-item.selected { background: #e8dcc255; border: 0; padding: 10px; border-radius: 3px; }
#od-generator-wrapper .od-race-ability-content strong { font-size: 17px; font-weight: 600; }
#od-generator-wrapper .od-race-ability-effect,
#od-generator-wrapper .od-abilities-box li { font-size: 16px; line-height: 1.5; }
#od-generator-wrapper .od-race-ability-reset,
#od-generator-wrapper .od-class-abilities-toggle { font: 14px Georgia, serif; background: transparent; }
#od-generator-wrapper .od-portrait-panel { grid-column: 3; grid-row: 2; padding: 9px; background: #ede3cf; }
#od-generator-wrapper .od-portrait-caption { font-size: 17px; }
#od-generator-wrapper .od-section-complete-wrapper { text-align: left; border: 0; padding-top: 14px; }
#od-generator-wrapper .od-section-complete-label { font: 16px Georgia, serif; }
#od-generator-wrapper .od-optional-note { order: 3; margin-left: 12px; }
#od-generator-wrapper .od-notification { background: #24291f; border: 1px solid #a18b58; color: #f5efdf; }
#od-generator-wrapper .od-notification-title,
#od-generator-wrapper .od-notification-message { color: #f5efdf; }
#od-generator-wrapper .od-notification.success .od-notification-icon { color: #cee0b5; background: #ffffff12; }
#od-generator-wrapper .od-notification-close { color: #f5efdf; min-width: 44px; min-height: 44px; }
#od-generator-wrapper .od-notification.error { border-color: #c98372; }
#od-generator-wrapper .od-notification.warning { border-color: #dec07c; }
#od-generator-wrapper :is(.od-calling-layout, .od-race-portrait-column) > .od-abilities-display:empty::before { display: block; color: #6f624e; font: 19px/1.5 Georgia, serif; padding: 16px 0; }
#od-generator-wrapper #od-race-abilities:empty::before { content: 'Choose a race to discover your racial abilities.'; }
#od-generator-wrapper #od-class-abilities:empty::before { content: 'Choose a class to discover your class abilities.'; }
@media (max-width: 1250px) {
    #od-generator-wrapper { padding-right: 48px; padding-left: 48px; }
    #od-generator-wrapper .od-folio-brand span { font-size: 29px; }
    #od-generator-wrapper .od-folio-brand img { width: 48px; flex-basis: 48px; }
    #od-generator-wrapper .od-save-load-controls .od-btn { font-size: 15px; padding: 10px; }
    #od-generator-wrapper .od-summary-crest { display: none; }
    #od-generator-wrapper #od-summary-name { font-size: 36px; }
    #od-generator-wrapper .od-character-summary-box { grid-template-columns: minmax(170px, 2fr) minmax(100px, 1.2fr) repeat(6, minmax(58px, .8fr)); }
    #od-generator-wrapper .od-form-section { padding: 26px; }
    #od-generator-wrapper .od-calling-layout { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px; }
    #od-generator-wrapper :is(.od-calling-layout, .od-race-portrait-column) > .od-abilities-display { padding: 16px; }
}
@media (max-width: 1000px) {
    #od-generator-wrapper .od-folio-masthead { grid-template-columns: 1fr; }
    #od-generator-wrapper .od-save-load-controls { justify-content: flex-start; }
    #od-generator-wrapper .od-calling-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #od-generator-wrapper .od-portrait-panel { grid-column: 1 / -1; grid-row: 3; width: 260px; justify-self: center; }
    #od-generator-wrapper .od-calling-layout > .od-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #od-generator-wrapper .od-calling-layout .od-form-group:first-child { grid-column: 1 / -1; }
    #od-generator-wrapper .od-character-summary-box { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    #od-generator-wrapper .od-summary-identity { grid-column: 1 / -1; padding-bottom: 20px; }
    #od-generator-wrapper .od-summary-crest { display: block; }
    #od-generator-wrapper .od-summary-row { padding-top: 16px; border-top: 1px solid #73644770; }
    #od-generator-wrapper .od-summary-row span { font-size: 30px; }
    #od-generator-wrapper #od-summary-gp { font-size: 26px; }
    #od-generator-wrapper .od-wizard-tab { font-size: 17px; }
}
@media (max-width: 768px) {
    #od-generator-wrapper { padding: 20px 16px 100px; }
    #od-generator-wrapper .od-folio-brand span { font-size: 29px; }
    #od-generator-wrapper .od-save-load-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #od-generator-wrapper .od-character-summary-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 16px; row-gap: 14px; }
    #od-generator-wrapper .od-summary-identity { gap: 14px; padding-bottom: 4px; }
    #od-generator-wrapper #od-summary-name { font-size: 34px; }
    #od-generator-wrapper .od-summary-row strong { font-size: 14px; }
    #od-generator-wrapper .od-wizard-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #od-generator-wrapper .od-wizard-tab { padding: 14px 5px; font-size: 16px; }
    #od-generator-wrapper .od-form-section,
    #od-generator-wrapper .od-equipment.od-form-section { padding: 24px 18px; }
    #od-generator-wrapper .od-tab1-header-row { grid-template-columns: 1fr; }
    #od-generator-wrapper .od-tab1-action-row { grid-column: 1; grid-row: 3; margin-top: 12px; flex-direction: row; flex-wrap: wrap; }
    #od-generator-wrapper .od-tab1-action-row .od-btn { flex: 1 1 auto; width: auto; }
    #od-generator-wrapper .od-form-section .od-tab1-title { font-size: 44px; }
    #od-generator-wrapper :is(#od-auto-generate-btn, #od-roll-abilities-btn) { font-size: 18px; padding: 12px 16px; }
    #od-generator-wrapper #od-auto-reset-btn { padding: 12px 16px; font-size: 17px; }
    #od-generator-wrapper .od-calling-layout,
    #od-generator-wrapper .od-calling-layout > .od-form-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #od-generator-wrapper .od-calling-layout .od-form-group:first-child { grid-column: 1; }
    #od-generator-wrapper .od-portrait-panel { grid-column: 1; grid-row: 2; width: min(100%, 300px); }
    #od-generator-wrapper #od-race-abilities { grid-column: 1; grid-row: 3; }
    #od-generator-wrapper #od-class-abilities { grid-column: 1; grid-row: 4; }
}
@media (max-width: 380px) {
    #od-generator-wrapper { padding-left: 10px; padding-right: 10px; }
    #od-generator-wrapper .od-folio-brand { gap: 8px; }
    #od-generator-wrapper .od-folio-brand span { font-size: 25px; }
    #od-generator-wrapper .od-folio-brand small { font-size: 16px; }
    #od-generator-wrapper .od-folio-brand small::before,
    #od-generator-wrapper .od-folio-brand small::after { width: 12px; margin: 0 5px; }
    #od-generator-wrapper .od-summary-crest { width: 52px; height: 64px; flex-basis: 52px; }
    #od-generator-wrapper #od-summary-name { font-size: 29px; }
    #od-generator-wrapper .od-save-load-controls .od-btn { font-size: 14px; padding: 8px 6px; }
    #od-generator-wrapper .od-form-section { padding: 22px 14px; }
}
@media (max-width: 300px) {
    #od-generator-wrapper .od-folio-brand { gap: 6px; }
    #od-generator-wrapper .od-folio-brand img { width: 40px; flex-basis: 40px; }
    #od-generator-wrapper .od-folio-brand span { font-size: 21px; }
    #od-generator-wrapper .od-folio-brand small { font-size: 14px; }
    #od-generator-wrapper .od-folio-brand small::before,
    #od-generator-wrapper .od-folio-brand small::after { width: 8px; margin: 0 3px; }
}

/* Tab contrast: selected, available, and awaiting Race/Class selections. */
#od-generator-wrapper .od-wizard-tabs .od-wizard-tab {
    color: #000;
    opacity: 1;
}

#od-generator-wrapper .od-wizard-tabs .od-wizard-tab:not(.active):hover {
    background: #d5ccb9;
}
#od-generator-wrapper .od-wizard-tabs .od-wizard-tab.active {
    border-bottom-color: #00c341;
}
#od-generator-wrapper .od-generator-container:has(#od-char-race:invalid) .od-wizard-tab:not([data-step="1"]),
#od-generator-wrapper .od-generator-container:has(#od-char-class:invalid) .od-wizard-tab:not([data-step="1"]) {
    background: #918d82;
    cursor: not-allowed;
}

/* Parchment validation and accessible reference overlays. */
#od-generator-wrapper #od-validation-panel {
    background: #eee5d2 url('../images/folio-grain.svg');
    border: 1px solid #a18b58;
    border-radius: 3px;
    box-shadow: inset 0 0 0 4px #d8c9a966, 0 5px 18px #0003;
    padding: 24px;
    color: #30291e;
}
#od-generator-wrapper #od-validation-panel h3 { color: #30291e; font: 26px Georgia, serif; margin: 0 0 16px; }
#od-generator-wrapper #od-validation-panel .od-success { color: #1c9100; }
#od-generator-wrapper #od-validation-panel .od-error,
#od-generator-wrapper #od-validation-panel a { color: #8a3028; }
#od-generator-wrapper button.od-portrait-frame { display: block; width: 100%; padding: 0; text-transform: none; cursor: zoom-in; }
#od-generator-wrapper button.od-portrait-frame:disabled { opacity: 1; cursor: default; }
#od-generator-wrapper .od-spell-items > li { padding: 0; background: transparent; border: 0; }
#od-generator-wrapper .od-spell-detail-button {
    display: block; width: 100%; min-height: 44px; padding: 12px 16px; text-align: left;
    border: 1px solid #b5a17b; border-radius: 3px; background: #e7dcc5;
    color: #30291e; font: 18px Georgia, serif; text-transform: none; cursor: pointer;
}
#od-generator-wrapper .od-spell-detail-button:hover { background: #d8c7a5; }
#od-generator-wrapper .od-spell-detail-button::after { content: '↗'; float: right; margin-left: 12px; color: #725c32; }
#od-generator-wrapper .od-detail-dialog {
    box-sizing: border-box; color: #30291e; background: #eee5d2 url('../images/folio-grain.svg');
    border: 1px solid #a18b58; border-radius: 4px; box-shadow: 0 18px 70px #0008;
    font: 16px/1.6 Georgia, serif; overflow-wrap: anywhere;
}
#od-generator-wrapper .od-detail-dialog { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: 90vh; max-height: 90dvh; padding: 0; margin: auto; overflow: auto; }
#od-generator-wrapper .od-detail-dialog::backdrop { background: #10130fde; backdrop-filter: blur(3px); }
#od-generator-wrapper .od-detail-dialog.od-detail-portrait { width: min(1000px, calc(100vw - 24px)); height: 90vh; height: 90dvh; overflow: hidden; }
#od-generator-wrapper .od-detail-dialog.od-detail-image { width: min(1000px, calc(100vw - 24px)); height: fit-content; max-height: 90vh; max-height: 90dvh; overflow: auto; }
#od-generator-wrapper .od-detail-dialog.od-detail-image[open],
#od-generator-wrapper .od-detail-dialog.od-detail-portrait[open] { display: flex; flex-direction: column; }
#od-generator-wrapper .od-detail-image .od-detail-header,
#od-generator-wrapper .od-detail-portrait .od-detail-header { flex: 0 0 auto; }
#od-generator-wrapper .od-detail-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; z-index: 1; padding: 14px 22px;
    background: #25291f; border-bottom: 2px solid #a18b58; color: #f5efdf;
}
#od-generator-wrapper .od-detail-header h2 { margin: 0; color: inherit; font: 28px/1.2 Georgia, serif; }
#od-generator-wrapper .od-detail-close { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 1px solid #a18b58; border-radius: 3px; background: transparent; color: #f5efdf; font: 30px/1 Georgia, serif; cursor: pointer; }
#od-generator-wrapper .od-detail-body { padding: 24px; }
#od-generator-wrapper .od-detail-source { color: #6b5a3b; font-size: 13px; margin: 0 0 18px; }
#od-generator-wrapper .od-spell-description h2,
#od-generator-wrapper .od-spell-description h3 { font: 22px/1.3 Georgia, serif; color: #4e4028; margin: 24px 0 10px; }
#od-generator-wrapper .od-spell-description p { margin: 0 0 16px; }
#od-generator-wrapper .od-rh-statblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 16px; margin: 0 0 22px; background: #d8c9a966; border: 1px solid #b5a17b; }
#od-generator-wrapper .od-rh-stat dt { color: #725c32; font: bold 12px/1.5 Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
#od-generator-wrapper .od-rh-stat dd { margin: 3px 0 0; }
#od-generator-wrapper .od-detail-full-portrait { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
#od-generator-wrapper .od-detail-portrait .od-detail-body { padding: 8px; flex: 1 1 0; min-height: 0; overflow: hidden; }
#od-generator-wrapper .od-detail-image .od-detail-body { padding: 8px; }
#od-generator-wrapper .od-detail-guide-image { display: block; width: 100%; height: auto; }
#od-generator-wrapper .od-spell-detail-button:focus-visible,
#od-generator-wrapper .od-portrait-frame:focus-visible,
#od-generator-wrapper .od-detail-close:focus-visible { outline: 3px solid #00c341; outline-offset: 3px; }
@media (max-width: 480px) {
    #od-generator-wrapper .od-detail-header { padding: 10px 14px; gap: 8px; }
    #od-generator-wrapper .od-detail-header h2 { font-size: 23px; }
    #od-generator-wrapper .od-detail-body { padding: 16px; }
    #od-generator-wrapper .od-rh-statblock { grid-template-columns: 1fr; padding: 12px; }
    #od-generator-wrapper #od-validation-panel { padding: 20px 16px; }
}

/* Interaction glow: gold utility actions, white tabs and other buttons. */
#od-generator-wrapper :is(button, .od-btn, .od-btn-small) {
    --od-glow: 255, 255, 255;
    transition: box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
#od-generator-wrapper .od-save-load-controls :is(button, .od-btn),
#od-generator-wrapper .od-folio-brand { --od-glow: 255, 198, 64; }
#od-generator-wrapper .od-wizard-tabs .od-wizard-tab { --od-glow: 255, 255, 255; }
#od-generator-wrapper :is(button, .od-btn, .od-btn-small):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, :active) {
    box-shadow: 0 0 5px 2px rgba(var(--od-glow), .95), 0 0 18px 5px rgba(var(--od-glow), .65), inset 0 0 12px 2px rgba(var(--od-glow), .4);
}
#od-generator-wrapper :is(button, .od-btn, .od-btn-small):not(:disabled):not([aria-disabled="true"]):active {
    box-shadow: 0 0 7px 3px rgba(var(--od-glow), 1), 0 0 24px 7px rgba(var(--od-glow), .8), inset 0 0 17px 3px rgba(var(--od-glow), .55);
}
#od-generator-wrapper .od-generator-container:has(#od-char-race:invalid) .od-wizard-tab:not([data-step="1"]),
#od-generator-wrapper .od-generator-container:has(#od-char-class:invalid) .od-wizard-tab:not([data-step="1"]) { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    #od-generator-wrapper :is(button, .od-btn, .od-btn-small) { transition: none; }
}

/* Compact character check note; error links remain on their own lines. */
#od-generator-wrapper #od-validation-panel {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    margin-top: 16px;
    font: 14px/1.5 Georgia, serif;
    box-shadow: inset 0 0 0 2px #d8c9a966;
}
#od-generator-wrapper #od-validation-panel h3 {
    display: inline;
    font: inherit;
    font-weight: bold;
    margin: 0;
}
#od-generator-wrapper #od-validation-panel h3::after { content: ' - '; font-weight: normal; }
#od-generator-wrapper #od-validation-results { display: inline; }
#od-generator-wrapper #od-validation-results p { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
#od-generator-wrapper #od-validation-results ul { margin: 6px 0 0; padding-left: 20px; }
#od-generator-wrapper #od-validation-results li { margin: 3px 0; font-size: inherit; }

/* Popup alignment and consistent tab heading sizes. */
#od-generator-wrapper :is(.od-modal, .od-alert-modal) button { text-align: center; justify-content: center; align-items: center; }
#od-generator-wrapper .od-modal.od-class-minimum-alert { background: rgba(20, 0, 0, .88) !important; }
#od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content {
    max-width: 540px;
    border: 3px solid #ff3b3b;
    background: linear-gradient(145deg, #260b0b, #120606);
    color: #fff;
    box-shadow: 0 0 0 2px #7d0000, 0 0 24px 8px rgba(255, 32, 32, .8), 0 0 64px 18px rgba(255, 0, 0, .42), inset 0 0 28px rgba(255, 35, 35, .2);
    animation: none !important;
    transform: none !important;
    text-align: center;
}
#od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ff6565;
    font-size: 28px;
    font-weight: 700;
}
#od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content h2::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 2px solid #ff8585;
    border-radius: 50%;
    background: #a20d0d;
    color: #fff;
    font: 700 24px/1 Arial, sans-serif;
    box-shadow: 0 0 14px rgba(255, 45, 45, .9);
}
#od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content p { color: #fff; font-size: 18px; font-weight: 600; }
#od-generator-wrapper .od-class-minimum-alert .od-modal-close { color: #ffaaaa; }
#od-generator-wrapper .od-class-minimum-alert #od-alert-ok {
    --od-glow: 255, 40, 40;
    border-color: #ff5b5b;
    background: #9d1010;
    color: #fff;
}
#od-generator-wrapper .od-class-minimum-alert .od-alert-buttons { justify-content: center; }
@media (max-width: 480px) {
    #od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content { padding-top: 54px; }
    #od-generator-wrapper .od-class-minimum-alert .od-alert-modal-content h2 { flex-direction: column; gap: 8px; font-size: 25px; }
}
#od-generator-wrapper .od-wizard-step h2,
#od-generator-wrapper .od-form-section .od-tab1-title { font-size: 22px; }

/* EQUIPMENT PRESENTATION PREVIEW START - remove this block to revert only the redesign. */
#od-generator-wrapper .od-equipment.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px; }
#od-generator-wrapper .od-equipment > :is(h2, .od-armor-row, .od-remaining-gold, .od-section-complete-wrapper) { grid-column: 1 / -1; margin: 0; }
#od-generator-wrapper .od-equipment > .od-form-group { margin: 0; padding: 14px; border: 1px solid #b5a17b; border-radius: 5px; background: #fffaf080; min-width: 0; }
#od-generator-wrapper .od-equipment .od-armor-row { padding: 18px; background: #d8c9a966; border: 1px solid #b5a17b; border-radius: 5px; gap: 18px; }
#od-generator-wrapper .od-equipment .od-armor-row .od-form-group { margin: 0; }
#od-generator-wrapper .od-equipment .od-armor-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#od-generator-wrapper .od-equipment .od-armor-row .od-armor-label-row label { margin: 0; }
#od-generator-wrapper .od-equipment .od-armor-guide-button { min-height: 40px; padding: 8px 14px; border: 1px solid #777b7e; border-radius: 4px; background: linear-gradient(#f7f8f8, #c7cbcd 52%, #aeb3b6); color: #282b2d; box-shadow: inset 0 1px 0 #fff, 0 1px 2px #0003; font: 600 16px/1.2 'Segoe UI', Tahoma, sans-serif; text-decoration: none; text-transform: none; text-shadow: 0 1px #fff9; cursor: pointer; }
#od-generator-wrapper .od-equipment .od-armor-guide-button:hover { color: #151718; border-color: #5d6265; background: linear-gradient(#fff, #d6d9da 52%, #b9bec1); }
#od-generator-wrapper .od-equipment .od-armor-guide-button:active { background: linear-gradient(#aeb3b6, #d4d7d8); box-shadow: inset 0 2px 4px #0003; }
#od-generator-wrapper .od-equipment .od-armor-guide-button:focus-visible { outline: 3px solid #00c341; outline-offset: 2px; }
@media (max-width: 480px) {
    #od-generator-wrapper .od-equipment .od-armor-guide-button { flex: 0 0 auto; min-height: 40px; padding: 7px 9px; font-size: 15px; white-space: nowrap; }
}
#od-generator-wrapper .od-equipment > .od-form-group > label { font: bold 19px Georgia, serif; margin-bottom: 14px; }
#od-generator-wrapper .od-equipment .od-gear-group-heading { font: 15px/1.5 Georgia, serif; min-height: 23px; margin-bottom: 14px; }
#od-generator-wrapper .od-equipment :is(.od-weapons-container, .od-gear-container) { border: 0; padding: 0; background: transparent; }
#od-generator-wrapper .od-equipment :is(.od-weapons-filters, .od-gear-filters) { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
#od-generator-wrapper .od-equipment :is(.od-weapons-filter-select, .od-gear-filter-select) { flex: 1 1 140px; min-width: 0; font-size: 14px; padding: 8px; }
#od-generator-wrapper .od-equipment .od-equipment-reset-row { flex: 0 0 100%; }
#od-generator-wrapper .od-equipment :is(.od-weapons-reset-btn, .od-gear-reset-btn) { width: auto; min-height: 36px; padding: 5px 10px; }
#od-generator-wrapper .od-equipment :is(.od-weapons-list, .od-gear-list) { height: 340px; max-height: 340px; padding: 6px; border: 1px solid #c2b18e; border-radius: 3px; background: #fffdf7; scrollbar-color: #a18b58 #eee5d2; }
#od-generator-wrapper .od-equipment :is(.od-weapon-item, .od-gear-item) { min-height: 52px; padding: 10px; margin: 0; border-radius: 0; border-bottom: 1px solid #e5dbc8; gap: 8px; flex-wrap: wrap; font-size: 14px; }
#od-generator-wrapper .od-equipment :is(.od-weapon-item, .od-gear-item):hover { background: #eee4ce; }
#od-generator-wrapper .od-equipment :is(.od-weapon-item, .od-gear-item).selected { background: #e1dcc4; border-left: 3px solid #897238; }
#od-generator-wrapper .od-equipment .od-gear-item-left { min-width: 0; flex-wrap: wrap; gap: 4px; }
#od-generator-wrapper .od-equipment :is(.od-weapon-name, .od-gear-name) { color: #30291e; }
#od-generator-wrapper .od-equipment :is(.od-weapon-cost, .od-gear-cost) { color: #72551b; font-weight: bold; white-space: nowrap; }
#od-generator-wrapper .od-equipment .od-weapon-damage { color: #6b6252; font-size: 13px; }
#od-generator-wrapper .od-equipment :is(.od-selected-weapons, .od-selected-gear) { margin-top: 16px; padding: 14px; background: #e9dec6; border: 1px solid #b5a17b; border-radius: 3px; }
#od-generator-wrapper .od-equipment :is(#od-selected-weapons-items, #od-selected-gear-items) { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; letter-spacing: 0; }
#od-generator-wrapper .od-equipment :is(.od-selected-weapon-tag, .od-selected-gear-tag) { background: #33372c; color: #fff7e4; border: 1px solid #85744e; border-radius: 3px; font-size: 14px; font-weight: 600; }
#od-generator-wrapper .od-equipment :is(button.od-selected-weapon-tag, button.od-selected-gear-tag) { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; }
#od-generator-wrapper .od-equipment :is(button.od-selected-weapon-tag, button.od-selected-gear-tag):focus-visible { outline: 3px solid #00c341; outline-offset: 2px; }
#od-generator-wrapper .od-equipment :is(.od-remove-weapon, .od-remove-gear) { color: #fff7e4; }
#od-generator-wrapper .od-equipment .od-remaining-gold { position: static; max-width: none; width: auto; box-shadow: none; padding: 14px 18px; background: #272c23; color: #f1ddb0; border: 1px solid #a18b58; border-radius: 4px; text-align: right; font: 18px Georgia, serif; }
@media (max-width: 1100px) { #od-generator-wrapper .od-equipment.active { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
    #od-generator-wrapper .od-equipment.active { gap: 16px; }
    #od-generator-wrapper .od-equipment > .od-form-group,
    #od-generator-wrapper .od-equipment .od-armor-row { padding: 12px; }
    #od-generator-wrapper .od-equipment :is(.od-weapons-list, .od-gear-list) { height: 300px; max-height: 300px; }
}
@media (min-width: 1101px) {
    #od-generator-wrapper .od-equipment > .od-form-group > label,
    #od-generator-wrapper .od-equipment .od-gear-group-heading { min-height: 46px; }
    #od-generator-wrapper .od-equipment :is(.od-weapons-filters, .od-gear-filters) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44px; min-height: 96px; }
}
/* EQUIPMENT PRESENTATION PREVIEW END */

/* Equipment item names. */
#od-generator-wrapper .od-equipment :is(.od-weapon-name, .od-gear-name) {
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

/* Defenses and Spells become black once Race and Class are selected. */
#od-generator-wrapper .od-generator-container:has(#od-char-race:valid):has(#od-char-class:valid) .od-wizard-tabs .od-wizard-tab:is([data-step="5"], [data-step="6"]) {
    background: #000 !important;
    color: #fff !important;
}

/* Character journal: presentation only. */
#od-generator-wrapper .od-currency.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#od-generator-wrapper .od-currency > :is(h2, .od-money-treasure-row, .od-section-complete-wrapper) { grid-column: 1 / -1; margin: 0; }
#od-generator-wrapper .od-currency .od-currency-panel > h3,
#od-generator-wrapper .od-currency #od-treasure-list > h3 { font: small-caps 18px Georgia, serif; color: #685334; letter-spacing: .06em; margin: 0 0 14px; }
#od-generator-wrapper .od-currency .od-money-treasure-row:has(#od-treasure-list:not([hidden])) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: 22px; padding-bottom: 24px; border-bottom: 1px solid #bba67f; }
#od-generator-wrapper .od-currency .od-currency-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 0 24px; border-bottom: 1px solid #bba67f; }
#od-generator-wrapper .od-currency .od-money-treasure-row:has(#od-treasure-list:not([hidden])) .od-currency-grid { gap: 10px; padding-bottom: 0; border-bottom: 0; }
#od-generator-wrapper .od-currency #od-treasure-list { min-width: 0; padding: 4px 0 0; }
#od-generator-wrapper .od-currency #od-treasure-list ul { margin: 12px 0 18px; padding-left: 0; list-style: none; }
#od-generator-wrapper .od-currency #od-treasure-list :is(ul, p) { font: 14px/1.6 'Segoe UI', Tahoma, sans-serif; color: #30291f; letter-spacing: 0; }
#od-generator-wrapper .od-currency #od-treasure-list li + li { margin-top: 4px; }
#od-generator-wrapper .od-currency #od-treasure-list p { margin: 0; padding-top: 12px; border-top: 1px solid #d2c19f; font-weight: 600; }
#od-generator-wrapper .od-currency .od-currency-item { position: relative; padding: 18px 14px 14px; border: 1px solid #bba67f; border-radius: 4px; background: #f5ecda; box-shadow: inset 0 0 0 4px #fff9ed80; text-align: center; }
#od-generator-wrapper .od-currency .od-money-treasure-row:has(#od-treasure-list:not([hidden])) .od-currency-item { padding: 14px 10px 10px; }
#od-generator-wrapper .od-currency .od-currency-item::before {
    content: ''; display: block; width: 34px; height: 34px; margin: 0 auto 12px; border: 4px double #7c522a; border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #f3c79b, #b47846 65%, #89522f); box-shadow: 0 2px 4px #59412130;
}
#od-generator-wrapper .od-currency .od-currency-item:nth-child(2)::before { border-color: #727778; background: radial-gradient(circle at 35% 25%, #fff, #b8bec0 65%, #8d9598); }
#od-generator-wrapper .od-currency .od-currency-item:nth-child(3)::before { border-color: #987029; background: radial-gradient(circle at 35% 25%, #fff0a8, #d4a745 65%, #a87624); }
#od-generator-wrapper .od-currency .od-currency-item:nth-child(4)::before { border-color: #798787; background: radial-gradient(circle at 35% 25%, #f6ffff, #cfdddb 65%, #99acaa); }
#od-generator-wrapper .od-currency .od-currency-item label { display: block; margin-bottom: 15px; font: 18px Georgia, serif; color: var(--od-ink); }
#od-generator-wrapper .od-currency .od-currency-item input { text-align: center; font: 24px Georgia, serif; background: #fffcf4; }
#od-generator-wrapper .od-currency > .od-form-group { padding: 22px; border: 1px solid #bca47a; border-top: 3px double #b49a64; border-radius: 3px; background: url('../images/folio-grain.svg'), #fcf7ec; box-shadow: 0 4px 10px #6c50200c; }
#od-generator-wrapper .od-currency :is(.od-currency-panel > h3, .od-form-group > label) { color: var(--od-ink); }
#od-generator-wrapper .od-currency > .od-form-group > label { margin-bottom: 16px; font: 20px Georgia, serif; }
#od-generator-wrapper .od-currency .od-textarea {
    min-height: 180px; padding: 8px 12px; line-height: 32px; color: #30291e;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #b6a08040 31px, #b6a08040 32px) 0 8px / 100% 32px, #fffdf680;
    border: 1px solid #c8b898; border-radius: 2px; font-size: 16px;
}
#od-generator-wrapper .od-currency .od-textarea::placeholder { color: #80725c; font-style: italic; opacity: 1; }
#od-generator-wrapper .od-currency .od-char-counter { font: 12px/1.5 Georgia, serif; color: #756348; margin-top: 10px; text-align: right; }
#od-generator-wrapper .od-currency .od-char-counter-low { color: #9a5700; }
#od-generator-wrapper .od-currency .od-char-counter-empty { color: #a12820; }
@media (max-width: 850px) {
    #od-generator-wrapper .od-currency.active { grid-template-columns: minmax(0, 1fr); }
    #od-generator-wrapper .od-currency .od-money-treasure-row:has(#od-treasure-list:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
    #od-generator-wrapper .od-currency .od-money-treasure-row:has(#od-treasure-list:not([hidden])) .od-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    #od-generator-wrapper .od-currency .od-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #od-generator-wrapper .od-currency > .od-form-group { padding: 16px 12px; }
    #od-generator-wrapper .od-currency .od-currency-item { padding: 14px 10px 10px; }
}

/* Stamped coin faces and matching fixed-size journal fields. */
#od-generator-wrapper .od-currency .od-currency-item::before {
    content: 'CP'; width: 42px; height: 42px; box-sizing: border-box;
    font: bold 12px/34px Georgia, serif; color: #684020;
    text-shadow: 0 1px 0 #fff9;
    outline: 1px dashed #976036; outline-offset: -7px;
    box-shadow: inset 0 0 0 2px #fff5, inset 0 -3px 5px #62381740, 0 3px 0 #81582f, 0 5px 5px #59412130;
}
#od-generator-wrapper .od-currency .od-currency-item:nth-child(2)::before { content: 'SP'; color: #495052; outline-color: #737b7e; box-shadow: inset 0 0 0 2px #fff8, inset 0 -3px 5px #48525440, 0 3px 0 #7b8588, 0 5px 5px #59412130; }
#od-generator-wrapper .od-currency .od-currency-item:nth-child(3)::before { content: 'GP'; color: #735019; outline-color: #a78026; box-shadow: inset 0 0 0 2px #fff7, inset 0 -3px 5px #84601340, 0 3px 0 #9b7527, 0 5px 5px #59412130; }
#od-generator-wrapper .od-currency .od-currency-item:nth-child(4)::before { content: 'PP'; color: #4b6260; outline-color: #809795; box-shadow: inset 0 0 0 2px #fff9, inset 0 -3px 5px #46656140, 0 3px 0 #839895, 0 5px 5px #59412130; }
#od-generator-wrapper .od-currency :is(#od-appearance, #od-background) { resize: none; height: 180px; min-height: 180px; max-height: 180px; box-sizing: border-box; }
#od-generator-wrapper .od-equipment .od-gear-group-heading { font: bold 19px Georgia, serif; margin-bottom: 14px; }
#od-generator-wrapper .od-equipment .od-gear-guidance { color: #756348; font: 13px/1.5 Georgia, serif; margin: 0 0 12px; }

/* Clear text and illustrated armor choices. */
#od-generator-wrapper .od-ability-item > label,
#od-generator-wrapper .od-ability-bonus,
#od-generator-wrapper :is(.od-input, .od-select, .od-textarea) { color: #000; }
#od-generator-wrapper .od-equipment .od-armor-row { padding: 0; border: 0; background: transparent; gap: 16px; }
#od-generator-wrapper .od-equipment .od-armor-row > .od-form-group {
    position: relative; padding: 18px; border: 1px solid #bca478; border-top: 3px double #ad9058;
    border-radius: 4px; background: url('../images/folio-grain.svg'), linear-gradient(135deg, #fffdf5, #f1e6ce);
    box-shadow: inset 0 0 0 4px #fffdf680, 0 3px 8px #755b2010;
}
#od-generator-wrapper .od-equipment .od-armor-row label { min-height: 36px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #000; }
#od-generator-wrapper .od-equipment .od-armor-row label::before { content: ''; display: inline-block; flex: 0 0 36px; height: 36px; background: url('../images/armor-emblems.svg') 0 0 / 108px 36px no-repeat; }
#od-generator-wrapper .od-equipment .od-armor-row label[for="od-helmet"]::before { background-position: -36px 0; }
#od-generator-wrapper .od-equipment .od-armor-row label[for="od-shield"]::before { background-position: -72px 0; }
#od-generator-wrapper .od-equipment .od-armor-row .od-select { background-color: #fffdf7; border-color: #b6a17c; }
@media (max-width: 480px) { #od-generator-wrapper .od-equipment .od-armor-row > .od-form-group { padding: 14px; } }

@media (max-width: 768px) {
    #od-generator-wrapper .od-character-summary-box .od-summary-row-gp { grid-column: 1 / -1; }
}

#od-generator-wrapper #od-class-abilities .od-bonus-book-note {
    margin: 4px 0 16px;
    color: #6f624e;
    font: 13px/1.5 Georgia, serif;
}
#od-generator-wrapper #od-class-abilities h3:has(+ .od-bonus-book-note) { margin-bottom: 0; }

/* Keep Apply +1 labels in sync with the currently selected bonus. */
.od-ability-scores .od-versatile-checkbox-label span {
    color: #667eea;
}
.od-ability-scores:has(.od-versatile-apply-checkbox:checked)
.od-versatile-apply-checkbox:not(:checked) + span {
    color: #6b7280;
}
.od-ability-scores .od-versatile-apply-checkbox:checked + span {
    color: #667eea;
}

/* Character progression fits the existing folio without widening mobile pages. */
#od-character-generator .od-progression-panel, .od-progression-panel { padding: 18px; margin: 16px 0; border: 1px solid #b9a57d; border-radius: 6px; background: #f5f2e9; color: #283b36; }
.od-progression-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.od-progression-grid label, .od-progression-grid small { display: block; }
.od-progression-panel p { font-size: .9rem; line-height: 1.5; }
.od-level-note { color: #000; }
.od-spell-level { margin: 12px 0; padding: 12px; border: 0; border-radius: 5px; }
.od-spell-level summary { cursor: pointer; font: 600 16px/1.5 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; }
.od-spell-level[open] > summary { margin-bottom: 12px; }
.od-progression-choices { display: grid; gap: 8px; margin: 14px 0; }
#od-generator-wrapper .od-progression-choices .od-specialization { cursor: pointer; }
@media (max-width: 600px) { .od-progression-grid { grid-template-columns: 1fr; } }

/* Race | Class header: title, level controls, and creation actions. */
#od-generator-wrapper .od-tab1-header-row { grid-template-columns: minmax(240px, .8fr) minmax(240px, 1fr) auto; gap: 4px 32px; }
#od-generator-wrapper .od-calling-heading { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-width: 0; }
#od-generator-wrapper .od-header-levels { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
#od-generator-wrapper .od-header-levels .od-progression-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#od-generator-wrapper .od-header-actions { grid-column: 3; grid-row: 1 / 3; display: flex; align-items: center; }
#od-generator-wrapper .od-level-toggle {
 margin: 0;
}
#od-generator-wrapper .od-tab1-action-row { margin: 0; }
#od-generator-wrapper .od-autogen-lock { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#od-generator-wrapper .od-autogen-lock input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; cursor: pointer; accent-color: #45635a; }
#od-generator-wrapper .od-autogen-lock label { margin: 0; font: 14px/1.3 "Segoe UI", sans-serif; color: #463c29; cursor: pointer; }
#od-generator-wrapper #od-higher-level-settings[hidden], #od-generator-wrapper #od-apex-details[hidden] { display: none !important; }
#od-generator-wrapper .od-apex-columns { column-count: 2; column-gap: 32px; }
#od-generator-wrapper .od-apex-columns p, #od-generator-wrapper .od-apex-capstone { break-inside: avoid; }
#od-generator-wrapper .od-apex-columns p { margin-top: 0; margin-bottom: 14px; }
#od-generator-wrapper #od-char-xp[readonly] { cursor: default; }
@media (max-width: 1100px) {
 #od-generator-wrapper .od-tab1-header-row { grid-template-columns: 1fr auto; }
 #od-generator-wrapper .od-calling-heading { grid-column: 1; grid-row: 1; }
 #od-generator-wrapper .od-header-actions { grid-column: 2; }
 #od-generator-wrapper .od-header-levels { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
}
@media (max-width: 600px) {
 #od-generator-wrapper .od-tab1-header-row { grid-template-columns: 1fr; }
 #od-generator-wrapper .od-calling-heading { grid-column: 1; grid-row: 1; }
 #od-generator-wrapper .od-header-actions { grid-column: 1; grid-row: 2; margin-top: 12px; }
 #od-generator-wrapper .od-header-levels { grid-row: 3; }
 #od-generator-wrapper .od-apex-columns { column-count: 1; }
}

/* Apex rules use the site's sans-serif reading font. */
#od-generator-wrapper #od-apex-details {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Class ability descriptions match the Apex reading font. */
#od-generator-wrapper #od-class-abilities,
#od-generator-wrapper #od-class-abilities label,
#od-generator-wrapper #od-class-abilities .od-bonus-book-note {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#od-generator-wrapper #od-default-class-abilities .od-default-abilities-title {
    text-align: center;
    margin: 24px 0 18px;
    padding-top: 18px;
    border-top: 1px solid var(--od-line);
}
#od-generator-wrapper #od-race-abilities,
#od-generator-wrapper #od-race-abilities label {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#od-generator-wrapper #od-default-class-abilities .od-default-abilities-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', serif;
    text-align: left;
}
#od-generator-wrapper #od-default-class-abilities .od-default-abilities-title::before {
    content: '';
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    background: url('../images/folio-book.svg') center / contain no-repeat;
}
/* Auto Create explosions adapted from Magic Item Generator. */
.odcg-burst__atmosphere {
	--odcg-burst-explosion-x: 50vw;
	--odcg-burst-explosion-y: 40vh;
	position: fixed;
	inset: 0;
	z-index: 2147482500;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	will-change: opacity;
	animation: odcg-burst-atmosphere-life 2s ease-out both !important;
}

@keyframes odcg-burst-atmosphere-life {
	0% { opacity: 0; }
	8%, 72% { opacity: 1; }
	100% { opacity: 0; }
}

/* Additional colored explosion deck */
.odcg-burst__atmosphere--azure-nova {
	--odcg-burst-explosion-a: #f1feff;
	--odcg-burst-explosion-b: #52d7ff;
	--odcg-burst-explosion-c: #2764ff;
	--odcg-burst-explosion-shadow: rgba(38, 128, 255, .82);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(226, 252, 255, .58), rgba(55, 173, 255, .34) 18%, rgba(30, 72, 177, .22) 40%, transparent 70%);
}

.odcg-burst__atmosphere--emerald-burst {
	--odcg-burst-explosion-a: #f0ffe1;
	--odcg-burst-explosion-b: #61f29b;
	--odcg-burst-explosion-c: #05895f;
	--odcg-burst-explosion-shadow: rgba(25, 205, 122, .78);
	background: radial-gradient(ellipse at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(226, 255, 203, .52), rgba(43, 204, 119, .34) 21%, rgba(3, 91, 78, .24) 46%, transparent 73%);
}

.odcg-burst__atmosphere--violet-starburst {
	--odcg-burst-explosion-a: #fff1ff;
	--odcg-burst-explosion-b: #e271ff;
	--odcg-burst-explosion-c: #6839ff;
	--odcg-burst-explosion-shadow: rgba(156, 60, 255, .84);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 222, 255, .58), rgba(196, 78, 255, .32) 18%, rgba(74, 39, 169, .24) 43%, transparent 72%);
}

.odcg-burst__atmosphere--crimson-gold-detonation {
	--odcg-burst-explosion-a: #fff9d7;
	--odcg-burst-explosion-b: #ffbd37;
	--odcg-burst-explosion-c: #e73d25;
	--odcg-burst-explosion-shadow: rgba(255, 96, 29, .84);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 247, 198, .62), rgba(255, 166, 29, .38) 17%, rgba(190, 30, 24, .26) 43%, transparent 73%);
}

.odcg-burst__atmosphere--prismatic-nova {
	--odcg-burst-explosion-a: #fff;
	--odcg-burst-explosion-b: #54e7ff;
	--odcg-burst-explosion-c: #ff62c7;
	--odcg-burst-explosion-shadow: rgba(119, 92, 255, .85);
	background:
		radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 255, 255, .64), transparent 13%),
		conic-gradient(from 15deg at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 76, 90, .2), rgba(255, 202, 61, .2), rgba(68, 232, 135, .2), rgba(67, 202, 255, .2), rgba(128, 92, 255, .2), rgba(255, 98, 199, .2), rgba(255, 76, 90, .2));
}

.odcg-burst__color-explosion-core,
.odcg-burst__color-explosion-ring,
.odcg-burst__color-explosion-ray,
.odcg-burst__color-explosion-spark {
	position: absolute;
	left: var(--odcg-burst-explosion-x);
	top: var(--odcg-burst-explosion-y);
}

.odcg-burst__color-explosion-core {
	width: 12vmin;
	height: 12vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 3%, var(--odcg-burst-explosion-a) 9%, var(--odcg-burst-explosion-b) 28%, var(--odcg-burst-explosion-c) 52%, transparent 73%);
	box-shadow: 0 0 33.6px var(--odcg-burst-explosion-a), 0 0 73.6px var(--odcg-burst-explosion-shadow), 0 0 120px var(--odcg-burst-explosion-shadow);
	animation: odcg-burst-color-core 1.35s cubic-bezier(.1, .72, .25, 1) both !important;
}

.odcg-burst__color-explosion-ring {
	width: 11vmin;
	height: 11vmin;
	margin: -5.5vmin;
	border: calc(2px + var(--odcg-burst-color-ring) * 1px) solid var(--odcg-burst-explosion-b);
	border-left-color: var(--odcg-burst-explosion-a);
	border-bottom-color: var(--odcg-burst-explosion-c);
	border-radius: 50%;
	box-shadow: 0 0 14.4px var(--odcg-burst-explosion-shadow), inset 0 0 9.6px var(--odcg-burst-explosion-shadow);
	animation: odcg-burst-color-ring 1.45s cubic-bezier(.08, .65, .2, 1) calc(var(--odcg-burst-color-ring) * .09s) both !important;
}

.odcg-burst__color-explosion-ray {
	width: 30vmax;
	height: 3px;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--odcg-burst-explosion-a), var(--odcg-burst-explosion-b) 24%, var(--odcg-burst-explosion-c) 55%, transparent 92%);
	animation: odcg-burst-color-ray 1.2s ease-out .08s both !important;
}

.odcg-burst__color-explosion-spark {
	width: var(--odcg-burst-color-size);
	height: var(--odcg-burst-color-size);
	border-radius: 50%;
	background: var(--odcg-burst-explosion-a);
	box-shadow: 0 0 6.4px var(--odcg-burst-explosion-b), 0 0 12px var(--odcg-burst-explosion-shadow);
	animation: odcg-burst-color-spark 1.32s cubic-bezier(.12, .65, .26, 1) var(--odcg-burst-color-delay) both !important;
}

.odcg-burst__atmosphere--emerald-burst .odcg-burst__color-explosion-ring {
	border-radius: 50%;
}
.odcg-burst__atmosphere--emerald-burst .odcg-burst__color-explosion-ray { height: 5px; }

.odcg-burst__atmosphere--violet-starburst .odcg-burst__color-explosion-ray:nth-of-type(odd) {
	height: 6px;
	width: 36vmax;
}

.odcg-burst__atmosphere--crimson-gold-detonation .odcg-burst__color-explosion-ring {
	border-width: 5px;
}
.odcg-burst__atmosphere--crimson-gold-detonation .odcg-burst__color-explosion-core {
	width: 17vmin;
	height: 17vmin;
}

.odcg-burst__atmosphere--prismatic-nova .odcg-burst__color-explosion-ring {
	border-top-color: #ff596f;
	border-right-color: #ffd452;
	border-bottom-color: #55e59d;
	border-left-color: #62bfff;
}
.odcg-burst__atmosphere--prismatic-nova .odcg-burst__color-explosion-ray:nth-of-type(3n) { --odcg-burst-explosion-b: #ffd452; --odcg-burst-explosion-c: #ff596f; }
.odcg-burst__atmosphere--prismatic-nova .odcg-burst__color-explosion-ray:nth-of-type(3n + 1) { --odcg-burst-explosion-b: #55e59d; --odcg-burst-explosion-c: #62bfff; }

@keyframes odcg-burst-color-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.65); }
	55% { opacity: .92; transform: translate(-50%, -50%) scale(2.25); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
}

@keyframes odcg-burst-color-ring {
	0% { opacity: 0; transform: rotate(-25deg) scale(.04); }
	16% { opacity: 1; }
	100% { opacity: 0; transform: rotate(95deg) scale(13); }
}

@keyframes odcg-burst-color-ray {
	0% { opacity: 0; transform: rotate(var(--odcg-burst-color-ray)) scaleX(.01); }
	19% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--odcg-burst-color-ray)) scaleX(1); }
}

@keyframes odcg-burst-color-spark {
	0% { opacity: 0; transform: rotate(var(--odcg-burst-color-spark)) translateX(0) scale(.2); }
	20%, 67% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--odcg-burst-color-spark)) translateX(var(--odcg-burst-color-distance)) scale(.05); }
}

/* Ray-and-spark explosion family: deliberately no circular shock rings. */
.odcg-burst__atmosphere--solar-starburst {
	--odcg-burst-light-a: #fffde2;
	--odcg-burst-light-b: #ffd65a;
	--odcg-burst-light-c: #ff7a24;
	--odcg-burst-light-shadow: rgba(255, 172, 36, .9);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 252, 219, .7), rgba(255, 190, 49, .34) 13%, rgba(255, 103, 26, .18) 31%, transparent 63%);
}

.odcg-burst__atmosphere--sapphire-shatter {
	--odcg-burst-light-a: #f4ffff;
	--odcg-burst-light-b: #72ddff;
	--odcg-burst-light-c: #2858ff;
	--odcg-burst-light-shadow: rgba(52, 130, 255, .92);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(232, 253, 255, .68), rgba(61, 173, 255, .31) 13%, rgba(32, 69, 181, .2) 32%, transparent 64%);
}

.odcg-burst__atmosphere--emerald-sparkstorm {
	--odcg-burst-light-a: #f4ffe5;
	--odcg-burst-light-b: #6dffa3;
	--odcg-burst-light-c: #00a66f;
	--odcg-burst-light-shadow: rgba(31, 224, 125, .88);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(239, 255, 216, .67), rgba(65, 231, 125, .32) 14%, rgba(0, 117, 83, .2) 34%, transparent 65%);
}

.odcg-burst__atmosphere--rosefire-burst {
	--odcg-burst-light-a: #fff0f4;
	--odcg-burst-light-b: #ff79ae;
	--odcg-burst-light-c: #ff4f48;
	--odcg-burst-light-shadow: rgba(255, 71, 120, .88);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 236, 241, .68), rgba(255, 91, 147, .32) 14%, rgba(220, 44, 51, .2) 34%, transparent 65%);
}

.odcg-burst__atmosphere--white-star-detonation {
	--odcg-burst-light-a: #fff;
	--odcg-burst-light-b: #d9fbff;
	--odcg-burst-light-c: #75baff;
	--odcg-burst-light-shadow: rgba(201, 245, 255, .95);
	background: radial-gradient(circle at var(--odcg-burst-explosion-x) var(--odcg-burst-explosion-y), rgba(255, 255, 255, .78), rgba(198, 244, 255, .34) 13%, rgba(88, 151, 255, .18) 32%, transparent 63%);
}

.odcg-burst__spark-explosion-core,
.odcg-burst__spark-explosion-flare,
.odcg-burst__spark-explosion-particle,
.odcg-burst__spark-explosion-shard {
	position: absolute;
	left: var(--odcg-burst-explosion-x);
	top: var(--odcg-burst-explosion-y);
}

.odcg-burst__spark-explosion-core {
	width: 8vmin;
	height: 8vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 7%, var(--odcg-burst-light-a) 15%, var(--odcg-burst-light-b) 37%, var(--odcg-burst-light-c) 62%, transparent 75%);
	box-shadow: 0 0 30.4px #fff, 0 0 65.6px var(--odcg-burst-light-shadow), 0 0 116px var(--odcg-burst-light-shadow);
	animation: odcg-burst-light-core 1.25s cubic-bezier(.09, .72, .22, 1) both !important;
}

.odcg-burst__spark-explosion-flare {
	width: var(--odcg-burst-light-length);
	height: 2px;
	transform-origin: left center;
	background: linear-gradient(90deg, #fff, var(--odcg-burst-light-a) 12%, var(--odcg-burst-light-b) 38%, var(--odcg-burst-light-c) 68%, transparent 96%);
	box-shadow: 0 0 5.6px var(--odcg-burst-light-shadow);
	animation: odcg-burst-light-flare 1.08s cubic-bezier(.08, .65, .22, 1) var(--odcg-burst-light-delay) both !important;
}

.odcg-burst__spark-explosion-particle {
	width: var(--odcg-burst-light-size);
	height: var(--odcg-burst-light-size);
	border-radius: 50%;
	background: var(--odcg-burst-light-a);
	box-shadow: 0 0 6.4px var(--odcg-burst-light-b), 0 0 12px var(--odcg-burst-light-shadow);
	animation: odcg-burst-light-particle 1.24s cubic-bezier(.12, .67, .24, 1) var(--odcg-burst-light-delay) both !important;
}

.odcg-burst__spark-explosion-shard {
	width: 4px;
	height: 22px;
	border-radius: 50% 50% 10% 10%;
	background: linear-gradient(var(--odcg-burst-light-a), var(--odcg-burst-light-b), var(--odcg-burst-light-c));
	box-shadow: 0 0 7.2px var(--odcg-burst-light-shadow);
	transform-origin: 50% 0;
	animation: odcg-burst-light-shard 1.32s cubic-bezier(.1, .65, .25, 1) var(--odcg-burst-light-delay) both !important;
}

.odcg-burst__atmosphere--solar-starburst .odcg-burst__spark-explosion-flare:nth-of-type(3n),
.odcg-burst__atmosphere--white-star-detonation .odcg-burst__spark-explosion-flare:nth-of-type(2n) {
	height: 5px;
}

.odcg-burst__atmosphere--sapphire-shatter .odcg-burst__spark-explosion-shard,
.odcg-burst__atmosphere--rosefire-burst .odcg-burst__spark-explosion-shard {
	width: 7px;
	height: 29px;
}

@keyframes odcg-burst-light-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	16% { opacity: 1; transform: translate(-50%, -50%) scale(1.9); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(2.7); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

@keyframes odcg-burst-light-flare {
	0% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) scaleX(.01); }
	17%, 47% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) scaleX(1); }
}

@keyframes odcg-burst-light-particle {
	0% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) translateX(0) scale(.2); }
	17%, 72% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) translateX(var(--odcg-burst-light-distance)) scale(.05); }
}

@keyframes odcg-burst-light-shard {
	0% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) translateY(0) scale(.15); }
	20%, 68% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--odcg-burst-light-angle)) translateY(var(--odcg-burst-light-distance)) scale(.8); }
}




/* Concussion waves: variable thickness, oscillation, color and radiance. */
.odcg-wave { position: absolute; left: var(--odcg-burst-explosion-x); top: var(--odcg-burst-explosion-y);
    width: 0; height: 0; --wave-light: #f4ffff; --wave-color: #64d8fc; --wave-shadow: #4095d975; --wave-duration: 1.65s; }
.odcg-wave-core { position: absolute; width: 18vmin; height: 18vmin; margin: -9vmin; border-radius: 50%;
    background: radial-gradient(circle, var(--wave-light), var(--wave-color) 12%, transparent 68%);
    animation: odcg-wave-core 2.1s ease-out both; }
.odcg-wave-ring { position: absolute; width: 20vmin; height: 20vmin; margin: -10vmin; box-sizing: border-box;
    border: var(--wave-weight) solid var(--wave-color); border-top-color: var(--wave-light); border-radius: 50%;
    box-shadow: 0 0 10.4px var(--wave-shadow), inset 0 0 8px var(--wave-shadow);
    animation: odcg-wave-expand var(--wave-duration) cubic-bezier(.12,.55,.25,1) var(--wave-lag) both; }
@keyframes odcg-wave-core { 0% { opacity: 0; transform: scale(.08); } 12% { opacity: .85; } 100% { opacity: 0; transform: scale(3.8); } }
@keyframes odcg-wave-expand { 0% { opacity: 0; transform: scale(.04); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(4.6); } }
.odcg-burst__atmosphere:has(.odcg-wave) { animation-duration: 2.8s !important; }

/* Few thick blue walls, with a broad pale pressure front. */
.odcg-wave--tidal-impact { --wave-color: #65cfff; --wave-light: #e8fdff; --wave-shadow: #498bff80; }
.odcg-wave--tidal-impact .odcg-wave-ring { background: radial-gradient(circle, transparent 58%, #b1ecff24 66%, transparent 73%); }

/* A rapid sequence of very fine, pearlescent ripples. */
.odcg-wave--pearl-ripples { --wave-color: #b4dbe7; --wave-light: #fff9e8; --wave-shadow: #dffbff65; }
.odcg-wave--pearl-ripples .odcg-wave-ring { border-bottom-color: #e9bfd5; --wave-duration: 1.5s; }

/* Elliptical fronts expand continuously along fixed axes. */
.odcg-wave--aurora-oscillation { --wave-color: #60f6c0; --wave-light: #eeffb3; --wave-shadow: #4ccbbc70; }
.odcg-wave--aurora-oscillation .odcg-wave-ring { border-right-color: #849bff; animation-name: odcg-wave-oscillate; }
@keyframes odcg-wave-oscillate {
    0% { opacity: 0; transform: rotate(var(--wave-angle)) scale(.04,.02); }
    12% { opacity: .9; }
    100% { opacity: 0; transform: rotate(var(--wave-angle)) scale(4.6,3.8); }
}

/* Amber fronts expand continuously with red outer edges. */
.odcg-wave--molten-pulse { --wave-color: #ff9c42; --wave-light: #fff2a5; --wave-shadow: #f2704375; }
.odcg-wave--molten-pulse .odcg-wave-ring { border-bottom-color: #ed6461; animation-name: odcg-wave-surge; }
@keyframes odcg-wave-surge {
    0% { opacity: 0; transform: scale(.04); }
    12% { opacity: .9; }
    100% { opacity: 0; transform: scale(4.5); }
}

/* Every concentric front refracts into another spectral color. */
.odcg-wave--prism-refraction { --wave-light: #fff4ff; --wave-color: #dbbaff; }
.odcg-wave--prism-refraction .odcg-wave-ring { border-color: hsl(var(--wave-hue) 90% 76%); border-top-color: #fff2da; box-shadow: 0 0 7.2px hsl(var(--wave-hue) 90% 68% / .35); }

/* Two offset wave sources move apart, creating interference bands. */
.odcg-wave--twin-resonance { --wave-color: #7fe3ed; --wave-light: #fff2d5; --wave-shadow: #b998e575; }
.odcg-wave--twin-resonance .odcg-wave-ring { animation-name: odcg-wave-twins; }
.odcg-wave--twin-resonance .odcg-wave-ring:nth-child(even) { --wave-color: #d6b3ff; }
@keyframes odcg-wave-twins {
    0% { opacity: 0; transform: translateX(0) scale(.04); }
    20% { opacity: .9; }
    100% { opacity: 0; transform: translateX(calc(var(--wave-sign) * 12vmin)) scale(3.8); }
}

/* Broad and narrow pressure fronts expand and fade continuously. */
.odcg-wave--heartbeat-shock { --wave-color: #ff91b6; --wave-light: #ffe1b5; --wave-shadow: #e563c575; }
.odcg-wave--heartbeat-shock .odcg-wave-ring { animation-name: odcg-wave-surge; }
.odcg-wave--heartbeat-shock .odcg-wave-ring:nth-child(even) { border-width: 2px; border-color: #ffe7ba; }

/* Fine blue rings spread smoothly outward from the origin. */
.odcg-wave--sapphire-tremor { --wave-color: #78adff; --wave-light: #defbff; --wave-shadow: #557deb80; }
.odcg-wave--sapphire-tremor .odcg-wave-ring { animation-name: odcg-wave-wobble; }
@keyframes odcg-wave-wobble {
    0% { opacity: 0; transform: scale(.05); }
    12% { opacity: .9; }
    100% { opacity: 0; transform: scale(4.4); }
}

/* Bright golden concussion bands launch from a luminous center. */
.odcg-wave--solar-pressure { --wave-color: #ffce6d; --wave-light: #fff8df; --wave-shadow: #eeb64185; }
.odcg-wave--solar-pressure .odcg-wave-core { width: 26vmin; height: 26vmin; margin: -13vmin; }
.odcg-wave--solar-pressure .odcg-wave-ring { border-left-color: #ffe9a8; background: radial-gradient(circle, transparent 50%, #ffd37420 63%, transparent 72%); }

/* Many thin violet ellipses cross through a slower rose wave. */
.odcg-wave--violet-interference { --wave-color: #c5a0ff; --wave-light: #ffceec; --wave-shadow: #a379e575; }
.odcg-wave--violet-interference .odcg-wave-ring { animation-name: odcg-wave-oscillate; border-bottom-color: #91cff5; }
.odcg-wave--violet-interference .odcg-wave-ring:nth-child(3n) { border-width: 4px; --wave-color: #eea8d2; }
@media (max-width: 900px), (pointer: coarse) {
    .odcg-wave-ring { box-shadow: 0 0 5.6px var(--wave-shadow); }
}

/* Preserve the requested click-triggered waves under the theme motion reset. */
.odcg-burst__atmosphere .odcg-wave-core { animation-duration: 2.1s !important; }
.odcg-burst__atmosphere .odcg-wave-ring { animation-duration: var(--wave-duration) !important; }
/* Apex Mortal: a dedicated level-ten finale, isolated from page motion. */
.odcg-burst__atmosphere:has(.odcg-apex) { animation-duration: 4.4s !important; }
.odcg-apex { position: absolute; left: var(--odcg-burst-explosion-x); top: var(--odcg-burst-explosion-y); width: 0; height: 0;
    --apex-white: #fff8df; --apex-color: #ffd27b; --apex-edge: #b58cf5; --apex-glow: #eeb85366; }
.odcg-apex-aura { position: absolute; width: 80vmin; height: 80vmin; margin: -40vmin; border-radius: 50%;
    background: radial-gradient(circle, var(--apex-glow), transparent 67%); animation: odcg-apex-aura 4s ease-out both !important; }
.odcg-apex-heart { position: absolute; width: 12vmin; height: 12vmin; margin: -6vmin; border-radius: 50%;
    background: radial-gradient(circle, var(--apex-white), var(--apex-color) 20%, transparent 70%);
    animation: odcg-apex-heart 3.6s ease-out both !important; }
.odcg-apex-ring { position: absolute; width: 20vmin; height: 20vmin; margin: -10vmin; box-sizing: border-box;
    border: var(--apex-weight) solid var(--apex-color); border-top-color: var(--apex-white); border-bottom-color: var(--apex-edge); border-radius: 50%;
    box-shadow: 0 0 12.8px var(--apex-glow), inset 0 0 6.4px var(--apex-glow);
    animation: odcg-apex-wave 3.3s cubic-bezier(.1,.5,.24,1) var(--apex-delay) both !important; }
.odcg-apex-ray { position: absolute; width: 48vmin; height: 3px; transform-origin: left center;
    background: linear-gradient(90deg, var(--apex-white), var(--apex-color) 25%, transparent 90%);
    animation: odcg-apex-ray 3.2s ease-out var(--apex-delay) both !important; }
.odcg-apex-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--apex-white);
    box-shadow: 0 0 4.8px var(--apex-color); animation: odcg-apex-mote 3.3s ease-out var(--apex-delay) both !important; }
@keyframes odcg-apex-aura { 0% { opacity: 0; transform: scale(.1); } 24% { opacity: .7; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes odcg-apex-heart { 0% { opacity: 0; transform: scale(.03); } 15% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(4); } }
@keyframes odcg-apex-wave { 0% { opacity: 0; transform: scale(.05); } 18% { opacity: .9; } 100% { opacity: 0; transform: scale(5.4); } }
@keyframes odcg-apex-ray { 0% { opacity: 0; transform: rotate(var(--apex-angle)) scaleX(.03); } 22% { opacity: .85; } 100% { opacity: 0; transform: rotate(var(--apex-angle)) scaleX(1.9); } }
@keyframes odcg-apex-mote { 0% { opacity: 0; transform: translate(0,0) scale(.1); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--apex-x),var(--apex-y)) scale(.15); } }

/* Coronation: stately gold shockwaves, ivory rays and a widening crown. */
.odcg-apex--apex-coronation .odcg-apex-ring:nth-child(even) { border-style: double; border-width: 9px; }
.odcg-apex--apex-coronation .odcg-apex-ray:nth-child(3n) { height: 7px; }

/* Worldheart: emerald waves expand smoothly along fixed crossing axes. */
.odcg-apex--apex-worldheart { --apex-color: #8aefb5; --apex-white: #f4ffcd; --apex-edge: #67c8e0; --apex-glow: #67dab54d; }
.odcg-apex--apex-worldheart .odcg-apex-ring { animation-name: odcg-apex-breathe !important; }
@keyframes odcg-apex-breathe {
    0% { opacity: 0; transform: rotate(var(--apex-angle)) scale(.1); }
    12% { opacity: .9; }
    100% { opacity: 0; transform: rotate(var(--apex-angle)) scale(5.2,4.3); }
}

/* Eternal eclipse: a dark sun surrounded by a lilac-white corona. */
.odcg-apex--apex-eternal-eclipse { --apex-color: #c2a1f8; --apex-white: #fff4ef; --apex-edge: #7ca8f1; --apex-glow: #a480df55; }
.odcg-apex--apex-eternal-eclipse .odcg-apex-heart { z-index: 1; background: #211e35; border: 2px solid #fff1cf; box-shadow: 0 0 16px #dbbeff; animation-name: odcg-apex-eclipse !important; }
.odcg-apex--apex-eternal-eclipse .odcg-apex-ray { height: 5vmin; clip-path: polygon(0 35%,100% 50%,0 65%); }
@keyframes odcg-apex-eclipse { 0% { opacity: 0; transform: scale(.1); } 25%,55% { opacity: .9; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.3); } }

/* Stairway of light: stacked halos rise through a vertical radiance. */
.odcg-apex--apex-stairway { --apex-color: #a8d8ff; --apex-white: #fffce4; --apex-edge: #dbb8ed; --apex-glow: #b8daec55; }
.odcg-apex--apex-stairway .odcg-apex-ring { animation-name: odcg-apex-ascend !important; }
.odcg-apex--apex-stairway .odcg-apex-ray { width: 80vmin; height: 8px; --apex-angle: -90deg !important; animation-name: odcg-apex-ray !important; }
@keyframes odcg-apex-ascend { 0% { opacity: 0; transform: scale(.05,.03); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(calc(-12vmin - var(--apex-phase) * 30vmin)) scale(4,.8); } }

/* Convergence: successive fronts expand continuously from the center. */
.odcg-apex--apex-convergence { --apex-color: #87e5ee; --apex-white: #fff0d0; --apex-edge: #cbaaf9; --apex-glow: #82cce755; }
.odcg-apex--apex-convergence .odcg-apex-ring { animation-name: odcg-apex-converge !important; }
.odcg-apex--apex-convergence .odcg-apex-ray { animation-delay: .9s !important; }
@keyframes odcg-apex-converge {
    0% { opacity: 0; transform: scale(.05); }
    12% { opacity: .9; }
    100% { opacity: 0; transform: scale(5.7); }
}

/* Apotheosis: a spectrum of delicate, turning wave fronts. */
.odcg-apex--apex-apotheosis { --apex-color: #cfb7ff; --apex-white: #fff7df; --apex-glow: #b7cbea55; }
.odcg-apex--apex-apotheosis .odcg-apex-ring { border-color: hsl(var(--apex-hue) 85% 78%); border-top-color: #fffae3; animation-name: odcg-apex-breathe !important; }
.odcg-apex--apex-apotheosis .odcg-apex-ray:nth-child(even) { height: 5px; background: linear-gradient(90deg,#fffbd8,#dfb5f0,#85dcd7,transparent); }

/* Last sun: a few immense amber fronts roll out beneath a broad corona. */
.odcg-apex--apex-last-sun { --apex-color: #ffc176; --apex-white: #fff5cc; --apex-edge: #ec8b78; --apex-glow: #eaaa625c; }
.odcg-apex--apex-last-sun .odcg-apex-heart { width: 24vmin; height: 24vmin; margin: -12vmin; }
.odcg-apex--apex-last-sun .odcg-apex-ray { height: 10px; }

/* Silver sanctum: pale overlapping rings form a shimmering sanctuary. */
.odcg-apex--apex-silver-sanctum { --apex-color: #dbe8f5; --apex-white: #fffef0; --apex-edge: #a5c5e4; --apex-glow: #d3e5ee50; }
.odcg-apex--apex-silver-sanctum .odcg-apex-ring { animation-name: odcg-apex-sanctum !important; }
@keyframes odcg-apex-sanctum { 0% { opacity: 0; transform: scale(.1); } 22% { opacity: .85; } 100% { opacity: 0; transform: translateX(calc(var(--apex-side) * 15vmin)) scale(4.5,3.6); } }

/* Crown of stars: inclined orbital halos cross beneath scattered starlight. */
.odcg-apex--apex-crown-of-stars { --apex-color: #b7a9f5; --apex-white: #fff1bf; --apex-edge: #9cd6f0; --apex-glow: #aea0e85c; }
.odcg-apex--apex-crown-of-stars .odcg-apex-ring { animation-name: odcg-apex-orbit !important; }
.odcg-apex--apex-crown-of-stars .odcg-apex-mote { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
@keyframes odcg-apex-orbit { 0% { opacity: 0; transform: rotate(var(--apex-angle)) scale(.05,.02); } 25% { opacity: .9; } 100% { opacity: 0; transform: rotate(calc(var(--apex-angle) + 90deg)) scale(5,1.7); } }

/* Journey's end: warm farewell waves with embers ascending into stillness. */
.odcg-apex--apex-journeys-end { --apex-color: #eac696; --apex-white: #fff4dc; --apex-edge: #d6b6dc; --apex-glow: #dfc19550; }
.odcg-apex--apex-journeys-end .odcg-apex-ring { border-width: 2px; border-top-width: var(--apex-weight); animation-name: odcg-apex-farewell !important; }
.odcg-apex--apex-journeys-end .odcg-apex-mote { animation-name: odcg-apex-rise !important; }
.odcg-apex--apex-journeys-end .odcg-apex-ray { opacity: .4; height: 1px; }
@keyframes odcg-apex-farewell { 0% { opacity: 0; transform: scale(.1); } 25% { opacity: .7; } 100% { opacity: 0; transform: scale(5.5,2); } }
@keyframes odcg-apex-rise { 0% { opacity: 0; transform: translate(0,0); } 22% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--apex-x),calc(var(--apex-y) - 30vmin)); } }
@media (max-width: 900px), (pointer: coarse) {
    .odcg-apex-ring { box-shadow: 0 0 6.4px var(--apex-glow); }
    .odcg-apex-mote { box-shadow: none; }
}

/* Apex brilliance: viewport-reaching radiance without additional particles. */
.odcg-apex-aura {
    width: 110vmax; height: 110vmax; margin: -55vmax;
    background: radial-gradient(circle, var(--apex-white) 0%, var(--apex-glow) 16%, transparent 62%);
}
.odcg-apex-heart {
    width: 23vmin; height: 23vmin; margin: -11.5vmin;
    background: radial-gradient(circle, #fff 0 10%, var(--apex-white) 19%, var(--apex-color) 36%, transparent 72%);
    box-shadow: 0 0 28px var(--apex-white), 0 0 64px var(--apex-glow);
}
.odcg-apex-ring {
    width: 32vmin; height: 32vmin; margin: -16vmin;
    box-shadow: 0 0 7.2px var(--apex-white), 0 0 22.4px var(--apex-color), inset 0 0 9.6px var(--apex-glow);
}
.odcg-apex-ray {
    width: 80vmax; height: 6px;
    background: linear-gradient(90deg, #fff 0%, var(--apex-white) 12%, var(--apex-color) 40%, transparent 94%);
}
.odcg-apex-mote { width: 6px; height: 6px; box-shadow: 0 0 7.2px var(--apex-white), 0 0 14.4px var(--apex-color); }
.odcg-apex--apex-last-sun .odcg-apex-heart { width: 34vmin; height: 34vmin; margin: -17vmin; }
.odcg-apex--apex-last-sun .odcg-apex-ray { height: 16px; }
.odcg-apex--apex-stairway .odcg-apex-ray { width: 110vmax; height: 16px; }
@keyframes odcg-apex-aura {
    0% { opacity: 0; transform: scale(.03); }
    15% { opacity: .85; transform: scale(.55); }
    42% { opacity: .55; }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes odcg-apex-heart {
    0% { opacity: 0; transform: scale(.03); }
    15% { opacity: 1; transform: scale(1.6); }
    38% { opacity: .85; }
    100% { opacity: 0; transform: scale(4.5); }
}
@keyframes odcg-apex-wave {
    0% { opacity: 0; transform: scale(.05); }
    16% { opacity: 1; }
    45% { opacity: .85; }
    100% { opacity: 0; transform: scale(5.8); }
}
@keyframes odcg-apex-ray {
    0% { opacity: 0; transform: rotate(var(--apex-angle)) scaleX(.03); }
    18%, 40% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--apex-angle)) scaleX(1.5); }
}
@media (max-width: 900px), (pointer: coarse) {
    .odcg-apex-ring { box-shadow: 0 0 8px var(--apex-color); }
    .odcg-apex-heart { box-shadow: 0 0 20px var(--apex-glow); }
    .odcg-apex-mote { box-shadow: none; }
}
/* Conjuration: translucent winds and ascending spiritual light. */
.odcg-apex-wind {
    position: absolute; width: 85vmin; height: 24vmin; margin: -12vmin -42.5vmin;
    box-sizing: border-box; border-radius: 50%; border: 0 solid transparent;
    border-top: 3px solid var(--apex-white); border-bottom: 1px solid var(--apex-color);
    background: radial-gradient(ellipse, transparent 48%, var(--apex-glow) 63%, transparent 71%);
    animation: odcg-apex-spiritwind 3.8s ease-in-out var(--wind-delay) both !important;
}
.odcg-apex-spirit {
    position: absolute; width: 2vmin; height: 23vmin; margin: -2vmin -1vmin;
    border-radius: 80% 20% 65% 35%;
    background: radial-gradient(ellipse at 50% 5%, var(--apex-white), transparent 32%), linear-gradient(180deg, var(--apex-white), var(--apex-glow) 35%, transparent 94%);
    animation: odcg-apex-spiritrise 3.65s ease-in-out var(--spirit-delay) both !important;
}
@keyframes odcg-apex-spiritwind {
    0% { opacity: 0; transform: rotate(var(--wind-angle)) translateX(calc(var(--wind-side) * -20vmin)) scale(.3,.5); }
    22% { opacity: .5; }
    52% { opacity: .35; transform: rotate(calc(var(--wind-angle) + 55deg)) translateX(calc(var(--wind-side) * 8vmin)) scale(1.2,.85); }
    100% { opacity: 0; transform: rotate(calc(var(--wind-angle) + 100deg)) translateX(calc(var(--wind-side) * 28vmin)) scale(1.7,1.1); }
}
@keyframes odcg-apex-spiritrise {
    0% { opacity: 0; transform: translate(calc(var(--spirit-x) * .2), 15vmin) scale(.3,.5) rotate(0deg); }
    25% { opacity: .65; }
    55% { opacity: .45; transform: translate(var(--spirit-x), -12vmin) scale(.8,1.2) rotate(calc(var(--spirit-side) * 20deg)); }
    100% { opacity: 0; transform: translate(calc(var(--spirit-x) + var(--spirit-side) * 10vmin), -65vmin) scale(.15,1.7) rotate(calc(var(--spirit-side) * -15deg)); }
}
/* Keep Apex guidance available after generation without occupying the page. */
#od-generator-wrapper #od-apex-rules[hidden] { display: none !important; }
#od-generator-wrapper #od-apex-details.od-apex-collapsed { padding: 0; border: 0; background: transparent; }
#od-generator-wrapper #od-apex-details .od-apex-toggle-heading { margin: 0 0 16px; }
#od-generator-wrapper #od-apex-details.od-apex-collapsed .od-apex-toggle-heading { margin: 0; }
#od-generator-wrapper #od-apex-toggle {
 display: inline-flex; align-items: center; gap: 16px; padding: 10px 16px;
 border: 1px solid #aa874b; border-radius: 4px; background: #eee1c6; color: #302c24;
 font: bold 20px/1.3 Georgia, serif; cursor: pointer;
}
#od-generator-wrapper #od-apex-toggle::after { content: '▾'; }
#od-generator-wrapper #od-apex-toggle[aria-expanded="false"]::after { content: '▸'; }
#od-generator-wrapper #od-apex-toggle:focus-visible { outline: 2px solid #8e6525; outline-offset: 3px; }

/* Slightly softer light; explosion dimensions remain unchanged. */
@keyframes odcg-burst-atmosphere-life { 0% { opacity: 0; } 8%, 72% { opacity: .88; } 100% { opacity: 0; } }

/* A spectral title appears only during the Apex conjuration. */
.odcg-apex-title {
    position: absolute; left: 50%; top: 43%; width: 90%; text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(36px, 6vw, 88px); font-weight: 400; line-height: 1.2;
    letter-spacing: .09em; color: #fff8e7;
    text-shadow: 0 0 6px #fff7e3, 0 0 18px #b7c6e699;
    animation: odcg-apex-title-reveal 4.1s ease-out .1s both !important;
}
@keyframes odcg-apex-title-reveal {
    0% { opacity: 0; transform: translate(-50%, 16px) scale(.96); }
    24% { opacity: .85; }
    65% { opacity: .78; }
    100% { opacity: 0; transform: translate(-50%, -20px) scale(1.04); }
}
/* Alternate surfaces retain the original ghostly color, typography and motion. */
.odcg-apex-title--silver-whisper {
    -webkit-text-stroke: .35px #fff8e7;
    text-shadow: 0 0 3px #fff7e3, 0 0 13px #b7c6e699;
}
/* A faint mirrored impression dissolves beneath the original lettering. */
.odcg-apex-title--golden-awakening::after {
    content: attr(data-title); position: absolute; left: 0; top: 100%; width: 100%;
    color: inherit; transform: scaleY(-1); opacity: .16;
    text-shadow: none; pointer-events: none;
    mask-image: linear-gradient(to top, #000, transparent 75%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
}
/* Fine embossed edges sit inside the same soft spectral glow. */
.odcg-apex-title--astral-echo {
    text-shadow: -1px -1px 0 #fff8e755, 1px 1px 0 #30374544,
        0 0 6px #fff7e3, 0 0 18px #b7c6e699;
}
/* Subtle translucent striations give the lettering a weathered spirit texture. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .odcg-apex-title--celestial-inscription {
        color: transparent;
        background: repeating-linear-gradient(172deg, #fff8e7 0 2px, #fff8e7c9 2px 3px, #fff8e7 3px 6px);
        -webkit-background-clip: text; background-clip: text;
    }
}
/* Apex control shares the level/XP row; the rules keep their own heading. */
#od-generator-wrapper .od-header-levels.od-has-apex .od-progression-grid { grid-template-columns: minmax(0, 1.5fr) minmax(70px, .6fr) auto; align-items: end; gap: 10px; }
#od-generator-wrapper .od-header-levels .od-progression-grid > div { min-width: 0; }
#od-generator-wrapper .od-header-levels #od-apex-toggle { font-size: 16px; gap: 8px; padding: 10px; min-height: 48px; white-space: nowrap; }
#od-generator-wrapper #od-apex-toggle[hidden] { display: none !important; }
@media (max-width: 600px) {
 #od-generator-wrapper .od-header-levels.od-has-apex .od-progression-grid { grid-template-columns: minmax(0, 1.5fr) minmax(70px, .6fr); }
 #od-generator-wrapper .od-header-levels #od-apex-toggle { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 600px) {
 #od-generator-wrapper .od-header-levels .od-progression-grid,
 #od-generator-wrapper .od-header-levels.od-has-apex .od-progression-grid { grid-template-columns: minmax(0, 1fr) auto; }
 #od-generator-wrapper .od-header-levels .od-progression-grid > div:first-child { grid-column: 1 / -1; }
 #od-generator-wrapper .od-header-levels .od-progression-grid > div:nth-child(2) { grid-column: 1; }
 #od-generator-wrapper .od-header-levels #od-apex-toggle { grid-column: 2; align-self: end; }
}
/* Compact character summary at every screen size. */
#od-generator-wrapper #od-summary-name { font-size: 30px; }
#od-generator-wrapper .od-character-summary-box { padding: 2px; }
#od-generator-wrapper .od-folio-masthead { margin-bottom: 3px; }

#od-generator-wrapper .od-summary-identity { padding-left: 16px; padding-right: 16px; justify-content: center; text-align: center; box-sizing: border-box; }

#od-generator-wrapper { padding-top: 4px; }

/* Calling columns follow the reading order: defaults, choices, race and portrait. */
#od-generator-wrapper .od-calling-layout { grid-template-columns: minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.85fr); align-items: start; }
#od-generator-wrapper #od-default-class-abilities { grid-column: 1; grid-row: 2; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#od-generator-wrapper #od-class-abilities { grid-column: 2; grid-row: 2; }
#od-generator-wrapper .od-race-portrait-column { grid-column: 3; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#od-generator-wrapper .od-race-portrait-column #od-race-abilities { width: 100%; box-sizing: border-box; }
#od-generator-wrapper .od-race-portrait-column .od-portrait-panel { width: 100%; max-width: 360px; margin: 0; box-sizing: border-box; align-self: center; }
#od-generator-wrapper #od-default-class-abilities .od-default-abilities-title { margin: 0 0 18px; padding: 0 0 16px; border-top: 0; border-bottom: 1px solid var(--od-line); }
#od-generator-wrapper #od-default-class-abilities:empty::before { content: 'Choose a class to discover your default abilities.'; }
@media (max-width: 1000px) {
 #od-generator-wrapper .od-calling-layout { grid-template-columns: minmax(0,1fr); }
 #od-generator-wrapper #od-default-class-abilities { grid-column: 1; grid-row: 2; }
 #od-generator-wrapper #od-class-abilities { grid-column: 1; grid-row: 3; }
 #od-generator-wrapper .od-race-portrait-column { grid-column: 1; grid-row: 4; }
}

#od-generator-wrapper #od-auto-reset-btn,
#od-generator-wrapper .od-race-ability-reset {
    font-size: 20px;
    font-weight: 400;
    padding: 13px 24px;
    background: linear-gradient(#e64b45, #a62121);
    color: #fff;
    border-color: #8e2424;
}
#od-generator-wrapper #od-auto-reset-btn:hover,
#od-generator-wrapper #od-auto-reset-btn:active,
#od-generator-wrapper .od-race-ability-reset:hover,
#od-generator-wrapper .od-race-ability-reset:active {
    background: #765016;
    border-color: #79521b;
    color: #fff;
}
/* Explicit high-level creation cue; overlays never intercept controls. */
#od-level-prompt {
    position: fixed; z-index: 2147483000; pointer-events: none;
    left: 50%; top: 32%; width: max-content; max-width: calc(100vw - 32px);
    box-sizing: border-box; padding: 14px 22px; text-align: center;
    font: 400 clamp(25px, 5vw, 48px)/1.2 Georgia, serif;
    color: #fff8e7; background: rgba(25, 32, 27, .92); border-radius: 12px;
    text-shadow: 0 0 8px #e6d399, 0 2px 3px #000;
    animation: od-level-prompt-float 4s ease-out both !important;
}
@keyframes od-level-prompt-float {
    0% { opacity: 0; transform: translate(-50%, 24px); }
    15%, 70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -28px); }
}
#od-generator-wrapper #od-char-level.od-level-attention {
    animation: od-level-selector-glow 1.5s ease-in-out 4 !important;
}
@keyframes od-level-selector-glow {
    0%, 100% { box-shadow: 0 0 2px 1px #b89546; border-color: #b89546; }
    50% { box-shadow: 0 0 15px 4px #e3b844; border-color: #ffda72; }
}

#od-generator-wrapper #od-class-abilities .od-race-ability-item[hidden] { display: none !important; }

#od-generator-wrapper #od-race-abilities .od-race-ability-header,
#od-generator-wrapper .od-class-abilities-header { justify-content: flex-start; }
#od-generator-wrapper #od-race-abilities .od-race-ability-header h3,
#od-generator-wrapper .od-class-abilities-header h3 { flex: 0 1 auto; margin: 0; }
#od-generator-wrapper .od-race-ability-reset { margin: 0; flex: 0 0 auto; font-size: 14px; padding: 10px 12px; }

#od-generator-wrapper :is(.od-weapons-reset-btn, .od-gear-reset-btn, #od-reroll-magic-items) {
    background: linear-gradient(#e64b45, #a62121);
    color: #fff;
    border-color: #8e2424;
}
#od-generator-wrapper #od-reroll-magic-items {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    padding: 5px 10px;
    margin: 0 0 12px;
}
#od-generator-wrapper :is(.od-weapons-reset-btn, .od-gear-reset-btn, #od-reroll-magic-items):is(:hover, :active) {
    background: #765016;
    color: #fff;
    border-color: #79521b;
}
/* Keep the racial reset beside its heading even in the narrow third column. */
#od-generator-wrapper #od-race-abilities { container-type: inline-size; }
#od-generator-wrapper #od-race-abilities .od-race-ability-header {
    flex-wrap: nowrap;
    gap: 16px;
}
#od-generator-wrapper #od-race-abilities .od-race-ability-header h3 {
    min-width: 0;
    gap: 7px;
    font: 25px/1.2 Georgia, serif;
    white-space: nowrap;
}
#od-generator-wrapper #od-race-abilities .od-race-ability-header h3::before {
    width: clamp(24px, 9cqi, 36px);
    height: clamp(24px, 9cqi, 36px);
    flex-basis: clamp(24px, 9cqi, 36px);
}
#od-generator-wrapper #od-reset-race-ability {
    padding: 10px 8px;
    font-size: 13px;
}
#od-generator-wrapper #od-reset-race-ability,
#od-generator-wrapper #od-reset-class-bonuses { font-size: 15px; padding: 7px 11px; min-height: 36px; height: auto; line-height: 1.2; }
#od-generator-wrapper #od-reset-race-ability { font-size: 14px; padding-inline: 8px; }

#od-generator-wrapper #od-race-abilities .od-race-ability-header h3::before { content: none; display: none; }

/* Full-size score controls replace native number spinners. */
#od-generator-wrapper .od-score-stepper { display: inline-grid; grid-template-columns: 44px 56px 44px; align-items: stretch; border: 0; border-radius: 6px; overflow: hidden; }
#od-generator-wrapper .od-score-stepper .od-ability-input { width: 56px; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 4px; border: 0; border-radius: 0; text-align: center; appearance: textfield; -moz-appearance: textfield; }
#od-generator-wrapper .od-score-stepper input::-webkit-inner-spin-button,
#od-generator-wrapper .od-score-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#od-generator-wrapper .od-score-adjust { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; font: 400 26px/1 Georgia, serif; color: #fff8e7; background: linear-gradient(#edca85, #000000); cursor: pointer; }
#od-generator-wrapper .od-score-adjust:hover { background: #765016; }
#od-generator-wrapper .od-score-adjust:active { background: #54370e; }
#od-generator-wrapper .od-score-adjust:focus-visible { outline: 3px solid #234f36; outline-offset: -3px; }

#od-generator-wrapper .od-score-stepper .od-ability-input { border-top: 1px solid #a18550; border-bottom: 1px solid #a18550; box-sizing: border-box; }

#od-generator-wrapper .od-ability-item:has(.od-class-required-score) { background: #dcefd8; }

/* Character and equipment dropdowns show a hand pointer when available. */
#od-generator-wrapper select:is(#od-armor, #od-helmet, #od-shield, #od-char-race, #od-char-class, #od-portrait-gender):not(:disabled) {
    cursor: pointer !important;
}




/* Briefly reveal the changed score in place of its bonus, without shifting layout. */
#od-generator-wrapper .od-ability-bonus-slot { display: grid; position: relative; padding-top: 5px; }
#od-generator-wrapper .od-ability-bonus-slot > .od-ability-bonus { grid-area: 1 / 1; margin-top: 0; }
#od-generator-wrapper .od-ability-bonus-slot.od-showing-score > .od-ability-bonus { visibility: hidden; }
#od-generator-wrapper .od-ability-score-float {
    position: absolute; z-index: 20; left: 50%; top: calc(50% + 2.5px);
    pointer-events: none; user-select: none;
    font: 700 32px/1 Georgia, 'Times New Roman', serif;
    color: #fff8e7; white-space: nowrap;
    text-shadow: -1px -1px 1px #534025, 1px 1px 2px #30271c, 0 0 5px #a27932;
    transform: translate(-50%, -50%);
    animation: od-ability-score-float 1s ease-out both;
}
@keyframes od-ability-score-float {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #od-generator-wrapper .od-ability-score-float { animation: none !important; }
}

/* Defenses typography. Use the device's system font when Segoe UI is absent. */
#od-generator-wrapper .od-combat-stats,
#od-generator-wrapper .od-combat-stats :is(h2, h3, label, legend, input, button) {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}
#od-generator-wrapper .od-combat-stats > h2,
#od-generator-wrapper .od-combat-stats .od-stat-item > label,
#od-generator-wrapper .od-combat-stats .od-save-fieldset > legend {
    font-size: 19px !important;
    line-height: 1.35;
}
#od-generator-wrapper .od-combat-stats :is(.od-stat-item > label, .od-save-fieldset > legend) { font-weight: 400; }
/* Consistent UI type across every generator tab and its contents. */
#od-generator-wrapper {
    --od-ui-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
#od-generator-wrapper .od-wizard-tabs,
#od-generator-wrapper .od-wizard-tabs *,
#od-generator-wrapper .od-wizard-step,
#od-generator-wrapper .od-wizard-step *:not(.od-ability-score-float),
#od-generator-wrapper .od-wizard-navigation,
#od-generator-wrapper .od-wizard-navigation * {
    font-family: var(--od-ui-font) !important;
}
/* Treasure exchanges and a coin total that fits its summary cell. */
#od-generator-wrapper .od-summary-row-gp { min-width: 0; }
#od-generator-wrapper #od-summary-gp { display: block; width: 100%; min-width: 0; max-width: 100%; white-space: nowrap; box-sizing: border-box; }
#od-generator-wrapper .od-currency #od-treasure-list .od-treasure-convert { display: block; max-width: 100%; margin-top: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
#od-generator-wrapper .od-treasure-exchange-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; }

/* Currency controls use the same full-size buttons as ability scores. */
#od-generator-wrapper .od-score-stepper.od-coin-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; width: 100%; min-width: 0; }
#od-generator-wrapper .od-coin-stepper input { width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 4px; border: 0; border-top: 1px solid #a18550; border-bottom: 1px solid #a18550; border-radius: 0; text-align: center; appearance: textfield; -moz-appearance: textfield; box-sizing: border-box; }

#od-generator-wrapper .od-weapon-rules { flex: 0 0 100%; min-width: 0; font-size: 13px; }
#od-generator-wrapper .od-weapon-rules summary { cursor: pointer; }
#od-generator-wrapper .od-weapon-rules p { margin: 8px 0 0; line-height: 1.5; overflow-wrap: anywhere; }

/* Character Check sits beside identity fields, then stacks on smaller screens. */
#od-generator-wrapper .od-calling-layout > .od-identity-check-row { grid-template-columns: minmax(180px, .9fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#od-generator-wrapper .od-identity-check-row > .od-form-group { min-width: 0; grid-column: auto; }
#od-generator-wrapper .od-identity-check-row #od-validation-panel { width: 100%; min-width: 0; margin: 0; padding: 10px 12px; font: 13px/1.45 var(--od-ui-font); overflow-wrap: anywhere; }
#od-generator-wrapper .od-identity-check-row #od-validation-heading { display: block; margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
#od-generator-wrapper .od-identity-check-row #od-validation-heading::after { content: none; }
@media (max-width: 1100px) {
 #od-generator-wrapper .od-calling-layout > .od-identity-check-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
 #od-generator-wrapper .od-identity-check-row #od-validation-panel { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
 #od-generator-wrapper .od-calling-layout > .od-identity-check-row { grid-template-columns: minmax(0, 1fr); }
}

#od-generator-wrapper .od-currency-guide { margin-top: 22px; padding: 14px 16px; border-left: 3px solid #bba67f; background: #fffaf040; min-width: 0; }
#od-generator-wrapper .od-currency-guide h4 { margin: 0 0 10px; font-size: 17px; line-height: 1.35; color: #292820; }
#od-generator-wrapper .od-currency-guide-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
#od-generator-wrapper .od-currency-guide-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: #292820; overflow-wrap: anywhere; }
@media (max-width: 700px) {
 #od-generator-wrapper .od-currency-guide { padding: 12px; }
 #od-generator-wrapper .od-currency-guide-copy { grid-template-columns: minmax(0, 1fr); }
}

/* Character Check uses regular weight for its title and every message. */
#od-generator-wrapper #od-validation-panel,
#od-generator-wrapper #od-validation-panel * { font-weight: 400 !important; }
#od-generator-wrapper .od-identity-check-row #od-validation-heading { font-size: 16px; }
/* Match the input border beneath the adjacent 19px label and its spacing. */
@media (min-width: 1101px) {
 #od-generator-wrapper .od-identity-check-row #od-validation-panel { margin-top: calc(19px * 1.4 + 8px); }
}
/* Character Check has an external label matching the other identity fields. */
#od-generator-wrapper .od-identity-check-row #od-validation-heading { display: block; font-size: 19px; font-weight: 400 !important; line-height: 1.4; margin: 0 0 8px; padding: 0; color: #292820; }
#od-generator-wrapper .od-identity-check-row #od-validation-panel { margin-top: 0; min-height: 48px; }
@media (max-width: 1100px) {
 #od-generator-wrapper .od-identity-check-row > .od-character-check-group { grid-column: 1 / -1; }
}

/* Four visible red glow pulses when export is blocked. No movement or layout shift. */
#od-generator-wrapper .od-identity-check-row .od-check-export-error #od-validation-heading { color: #b32222; }
#od-generator-wrapper .od-check-export-error #od-validation-panel { border-color: #b32222; position: relative; }
#od-generator-wrapper .od-check-pulse #od-validation-panel::after {
 content: "";
 position: absolute;
 inset: -2px;
 border: 2px solid #dc2626;
 border-radius: inherit;
 background: rgba(220, 38, 38, .14);
 box-shadow: 0 0 22px 7px rgba(220, 38, 38, .7), inset 0 0 12px rgba(220, 38, 38, .2);
 pointer-events: none;
 opacity: 0;
 animation: od-check-export-pulse 1100ms ease-in-out 4;
}
@keyframes od-check-export-pulse {
 0%, 100% { opacity: 0; }
 50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
 #od-generator-wrapper .od-check-pulse #od-validation-panel::after {
  box-shadow: 0 0 10px 3px rgba(220, 38, 38, .55);
  animation: od-check-export-pulse 1400ms ease-in-out 4 !important;
 }
}

/* High-level magic collection: ready-to-hand items and stored inventory. */
#od-generator-wrapper #od-magic-items-tab[hidden], #od-generator-wrapper #od-magic-items-section[hidden] { display: none !important; }
#od-generator-wrapper .od-wizard-tabs.od-has-magic-tab { grid-template-columns: repeat(7,minmax(0,1fr)); }
#od-generator-wrapper .od-magic-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid #bba67f; padding-bottom:16px; }
#od-generator-wrapper .od-magic-header h2 { margin:0; }
#od-generator-wrapper .od-magic-intro { margin:18px 0 24px; font-size:14px; line-height:1.5; }
#od-generator-wrapper .od-magic-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
#od-generator-wrapper .od-magic-collection { min-width:0; padding:20px; border:1px solid #bba67f; border-top:3px solid #987125; background:#fffaf070; border-radius:4px; }
#od-generator-wrapper .od-magic-inventoried { border-top-color:#45635a; }
#od-generator-wrapper .od-magic-collection h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; font-size:23px; font-weight:400; }
#od-generator-wrapper .od-magic-count { background:#e4d7b7; padding:3px 10px; border-radius:20px; font-size:14px; }
#od-generator-wrapper .od-magic-caption, #od-generator-wrapper .od-magic-empty { font-size:14px; line-height:1.5; color:#524b3d; }
#od-generator-wrapper .od-magic-card { margin-top:12px; border:1px solid #cabc9c; background:#fffdf8; border-radius:3px; overflow-wrap:anywhere; }
#od-generator-wrapper .od-magic-card summary { cursor:pointer; padding:14px; font-size:17px; color:#292820; }
#od-generator-wrapper .od-magic-card summary small { display:block; margin:5px 0 0 18px; font-size:12px; color:#76664b; }
#od-generator-wrapper .od-magic-card-body { padding:0 14px 14px; font-size:14px; line-height:1.55; }
#od-generator-wrapper .od-magic-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#od-generator-wrapper .od-magic-actions button { min-height:44px; padding:8px 12px; font-size:13px; white-space:normal; cursor:pointer; border:1px solid #a58a56; border-radius:3px; background:#eee3cb; color:#292820; }
#od-generator-wrapper .od-magic-header #od-reroll-magic-items { padding:12px 18px; font-size:15px; color:white; background:linear-gradient(#ef4b44,#a91f1f); border:1px solid #a52b25; cursor:pointer; }
#od-generator-wrapper .od-magic-header #od-reroll-magic-items:hover { background:#765016; }
@media(max-width:1000px){#od-generator-wrapper .od-wizard-tabs.od-has-magic-tab{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){#od-generator-wrapper .od-magic-columns{grid-template-columns:minmax(0,1fr);}#od-generator-wrapper .od-magic-collection{padding:14px;}#od-generator-wrapper .od-magic-collection h3{font-size:21px;}}

/* Active magic effects */
#od-generator-wrapper .od-magic-effective {display:block;color:#245334;margin-top:6px;font:16px "Segoe UI",sans-serif;}
#od-generator-wrapper .od-magic-effective[hidden] {display:none;}
#od-generator-wrapper .od-magic-toggle {display:flex;align-items:center;gap:8px;margin:12px 0;}
#od-generator-wrapper .od-magic-toggle input {width:20px;height:20px;flex-shrink:0;}
#od-generator-wrapper .od-magic-card-body select {max-width:100%;min-height:44px;cursor:pointer;}
#od-generator-wrapper .od-magic-effect-list {padding-left:20px;line-height:1.6;}
#od-generator-wrapper .od-active-magic-summary {padding:16px;border:1px solid #bca878;margin-top:20px;overflow-wrap:anywhere;}

/* An illuminated collection: parchment, dark evergreen and restrained brass. */
#od-generator-wrapper .od-magic-header{padding:22px;border:1px solid #a98b52;border-radius:8px;background:radial-gradient(ellipse at top right,#52645855,transparent 65%),linear-gradient(120deg,#202c28,#101917);box-shadow:inset 0 0 0 4px #e8ce8930;}
#od-generator-wrapper .od-magic-header h2{color:#f2dfb4!important;font-size:28px;letter-spacing:.02em;}
#od-generator-wrapper .od-magic-header h2:after{display:none;}
#od-generator-wrapper .od-magic-header-actions{display:flex;flex-wrap:wrap;gap:10px;}
#od-generator-wrapper #od-open-magic-forge,#od-generator-wrapper #od-choose-magic-items,#od-generator-wrapper #od-enable-levels{color:#201c13;background:linear-gradient(#f1dcaa,#c4a364);border:1px solid #dfc994;border-radius:4px;font:16px "Segoe UI",sans-serif;padding:12px 18px;min-height:46px;cursor:pointer;}
#od-generator-wrapper #od-open-magic-forge:hover,#od-generator-wrapper #od-choose-magic-items:hover,#od-generator-wrapper #od-enable-levels:hover{background:#f5e2b9;}
#od-generator-wrapper .od-magic-collection{border-radius:8px;background:linear-gradient(145deg,#fffdf7,#efe7d6);box-shadow:0 4px 12px #43351d0b;}
#od-generator-wrapper .od-magic-inventoried{background:linear-gradient(145deg,#f5f8f1,#e5ece0);}
#od-generator-wrapper .od-magic-collection h3{font-size:23px;color:#263d32;}
#od-generator-wrapper .od-magic-count{background:#263d32;color:#fff1cc;min-width:30px;text-align:center;}
#od-generator-wrapper .od-magic-card{border-radius:6px;background:#fffdf8;border-color:#c5b897;box-shadow:0 2px 5px #33290e08;}
#od-generator-wrapper .od-magic-card[open]{border-color:#9e7b36;}
#od-generator-wrapper .od-magic-card summary:hover{background:#ead8ad35;}
#od-generator-wrapper .od-magic-picker{margin:0 0 26px;padding:22px;border:1px solid #bca573;border-radius:8px;background:linear-gradient(135deg,#f7f0df,#fbfaf5);}
#od-generator-wrapper .od-magic-picker[hidden],#od-generator-wrapper .od-magic-more[hidden]{display:none!important;}
#od-generator-wrapper .od-magic-picker h3{margin:0;color:#2b4135;font-size:23px;font-weight:400;}
#od-generator-wrapper .od-magic-picker>p{font-size:14px;line-height:1.65;color:#504738;}
#od-generator-wrapper .od-magic-filters{display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 10px;}
#od-generator-wrapper .od-magic-filters label{min-width:0;font:14px "Segoe UI",sans-serif;color:#463c29;}
#od-generator-wrapper .od-magic-filters input,#od-generator-wrapper .od-magic-filters select{width:100%;min-width:0;min-height:46px;margin-top:7px;font:15px "Segoe UI",sans-serif;border:1px solid #bfae87;background:#fffdf8;color:#202820;border-radius:4px;padding:9px;box-sizing:border-box;}
#od-generator-wrapper .od-magic-filters select{cursor:pointer;}
#od-generator-wrapper .od-magic-results-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin:6px 0 16px;}
#od-generator-wrapper .od-magic-clear{padding:8px 12px;min-height:44px;border:1px solid #b5a17a;border-radius:4px;background:transparent;color:#50412b;cursor:pointer;font:13px "Segoe UI",sans-serif;}
#od-generator-wrapper .od-magic-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;}
#od-generator-wrapper .od-magic-catalog-card{min-width:0;overflow-wrap:anywhere;border:1px solid #c5b68f;border-top:3px solid #aa853f;border-radius:6px;background:#fffdf7;padding:17px;box-shadow:0 3px 9px #4a3b2010;}
#od-generator-wrapper .od-magic-catalog-meta{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#77633c;margin:0 0 9px;}
#od-generator-wrapper .od-magic-catalog-card h4{font:20px/1.3 "Segoe UI",sans-serif;color:#273e32;margin:0 0 12px;}
#od-generator-wrapper .od-magic-catalog-bonus{font-size:14px;line-height:1.5;color:#493d26;min-height:42px;}
#od-generator-wrapper .od-magic-catalog-card details{font-size:13px;line-height:1.6;color:#37352c;margin:14px 0;}
#od-generator-wrapper .od-magic-catalog-card summary{cursor:pointer;min-height:32px;color:#365d48;}
#od-generator-wrapper .od-magic-add,#od-generator-wrapper .od-magic-more{font:14px "Segoe UI",sans-serif;min-height:44px;padding:10px 14px;white-space:normal;border:1px solid #465f47;border-radius:4px;background:linear-gradient(#3b5745,#233e2e);color:#fff8e5;cursor:pointer;}
#od-generator-wrapper .od-magic-add{width:100%;}
#od-generator-wrapper .od-magic-catalog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;margin-top:14px;}
#od-generator-wrapper .od-magic-catalog-actions .od-magic-read-button{height:100%;margin:0;}
#od-generator-wrapper .od-magic-add:hover,#od-generator-wrapper .od-magic-more:hover{background:#47614d;}
#od-generator-wrapper .od-magic-add:disabled{background:#e9eadf;color:#636751;border-color:#c4c8b7;cursor:default;}
#od-generator-wrapper .od-magic-more{display:block;margin:20px auto 0;}
#od-generator-wrapper .od-magic-catalog-empty{grid-column:1/-1;padding:20px;text-align:center;}
#od-generator-wrapper .od-magic-picker :focus-visible,#od-generator-wrapper #od-choose-magic-items:focus-visible,#od-generator-wrapper #od-enable-levels:focus-visible{outline:3px solid #8b6b28;outline-offset:3px;}
@media(max-width:1000px){#od-generator-wrapper .od-magic-filters{grid-template-columns:repeat(2,minmax(0,1fr));}#od-generator-wrapper .od-magic-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){#od-generator-wrapper .od-magic-picker,#od-generator-wrapper .od-magic-header{padding:16px;}#od-generator-wrapper .od-magic-filters,#od-generator-wrapper .od-magic-catalog-grid{grid-template-columns:minmax(0,1fr);}#od-generator-wrapper .od-magic-header-actions{width:100%;}#od-generator-wrapper .od-magic-header-actions button{width:100%;}#od-generator-wrapper .od-magic-catalog-bonus{min-height:0;}#od-generator-wrapper .od-magic-results-toolbar{align-items:flex-start;}}

#od-generator-wrapper .od-magic-picker-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:20px;}
#od-generator-wrapper .od-magic-picker-footer .od-magic-more{margin:0;}
#od-generator-wrapper .od-magic-picker-footer .od-magic-clear{font-size:14px;min-height:44px;}
@media(max-width:400px){#od-generator-wrapper .od-magic-picker-footer button{width:100%;}}

/* The generator shares the collection's visual language and wraps on phones. */
#od-generator-wrapper .od-magic-forge { border-top: 3px solid #b69650; }
#od-generator-wrapper .od-magic-forge-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
#od-generator-wrapper .od-magic-forge-controls label { display:flex; flex:1 1 180px; flex-direction:column; gap:6px; min-width:0; }
#od-generator-wrapper .od-magic-forge-controls select { width:100%; min-width:0; cursor:pointer; }
#od-generator-wrapper #od-forge-preview { margin-top:18px; overflow-wrap:anywhere; }
#od-generator-wrapper .od-forge-preview-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
#od-generator-wrapper .od-forge-preview-actions p { flex:1 1 auto; margin:0; }
#od-generator-wrapper .od-forge-preview-actions #od-forge-add { flex:0 0 auto; width:auto; min-width:190px; }
#od-generator-wrapper .od-magic-header-actions { flex-wrap:wrap; }
@media(max-width:480px){
 #od-generator-wrapper .od-magic-forge-controls > * { flex-basis:100%; width:100%; }
 #od-generator-wrapper .od-forge-preview-actions { align-items:stretch; flex-direction:column; }
 #od-generator-wrapper .od-forge-preview-actions #od-forge-add { width:100%; min-width:0; }
 #od-generator-wrapper .od-magic-header-actions button { white-space:normal; }
}
@media(max-width:340px){#od-generator-wrapper .od-magic-catalog-actions{grid-template-columns:minmax(0,1fr);}}

#od-generator-wrapper .od-magic-forge-controls select { min-height:46px; font:15px "Segoe UI",sans-serif; border:1px solid #bfae87; background:#fffdf8; color:#202820; border-radius:4px; padding:9px; box-sizing:border-box; }
#od-generator-wrapper #od-forge-roll { width:auto; flex:1 1 180px; margin:0; }

/* Keep all three collection actions aligned and equally comfortable to tap. */
#od-generator-wrapper .od-magic-header-actions :is(#od-choose-magic-items, #od-open-magic-forge, #od-reroll-magic-items) {
    font: 16px/1.4 "Segoe UI", sans-serif;
    min-height: 48px;
    padding: 12px 18px;
    margin: 0;
    box-sizing: border-box;
}
@media (max-width:600px) {
    #od-generator-wrapper .od-magic-header-actions #od-reroll-magic-items { width:100%; }
}

/* Lead with the selected class's Apex gift, framed like an illuminated folio. */
#od-generator-wrapper .od-apex-layout { display:grid; grid-template-columns:minmax(240px, .8fr) minmax(0, 1.7fr); align-items:start; gap:28px; margin:20px 0; }
#od-generator-wrapper .od-apex-capstone { position:relative; min-width:0; padding:26px 24px; border:1px solid #b99b58; border-radius:10px; background:radial-gradient(ellipse at top,#48665a66,transparent 70%),linear-gradient(145deg,#253c33,#111c19); box-shadow:inset 0 0 0 5px #18251f,inset 0 0 0 6px #b99b5860,0 6px 18px #17261d1c; color:#f0eada; }
#od-generator-wrapper .od-apex-capstone::before,#od-generator-wrapper .od-apex-capstone::after { content:""; position:absolute; width:16px; height:16px; border-color:#d4b977; border-style:solid; pointer-events:none; }
#od-generator-wrapper .od-apex-capstone::before { top:11px; left:11px; border-width:1px 0 0 1px; }
#od-generator-wrapper .od-apex-capstone::after { bottom:11px; right:11px; border-width:0 1px 1px 0; }
#od-generator-wrapper .od-apex-capstone p { color:#f0eada; margin:0 0 14px; font-family:"Segoe UI",sans-serif; line-height:1.6; }
#od-generator-wrapper .od-apex-capstone .od-apex-card-label { color:#d7bf87; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
#od-generator-wrapper .od-apex-capstone .od-apex-card-class { color:#d7bf87; font-size:18px; margin:0 0 3px; }
#od-generator-wrapper .od-apex-capstone h4 { color:#f6f2df; font:400 28px/1.2 "Segoe UI",sans-serif; margin:0 0 14px; text-shadow:0 1px 6px #bfe5d333; }
#od-generator-wrapper .od-apex-capstone .od-apex-card-timing { color:#dfce9f; font-size:12px; padding:9px 0; border-top:1px solid #b99b5855; border-bottom:1px solid #b99b5855; }
#od-generator-wrapper .od-apex-capstone .od-apex-card-description { font-size:15px; margin-bottom:0; }
#od-generator-wrapper .od-apex-mastery { border-top:1px solid #b99b5855; margin-top:18px; padding-top:14px; }
#od-generator-wrapper .od-apex-mastery h5 { color:#dfce9f; font:400 17px "Segoe UI",sans-serif; margin:0 0 8px; }
#od-generator-wrapper .od-apex-mastery p { font-size:14px; margin:0; }
#od-generator-wrapper .od-apex-layout .od-apex-columns { min-width:0; }
@media(max-width:1000px){ #od-generator-wrapper .od-apex-layout { grid-template-columns:minmax(0,1fr); gap:22px; } }
@media(max-width:600px){ #od-generator-wrapper .od-apex-capstone { padding:24px 20px; } #od-generator-wrapper .od-apex-capstone h4 { font-size:25px; } }

/* Keep the existing hover halo, tinted green, while a magic panel is open. */
#od-generator-wrapper #od-choose-magic-items[aria-expanded="true"],
#od-generator-wrapper #od-open-magic-forge[aria-expanded="true"],
#od-generator-wrapper #od-enable-levels[aria-pressed="true"],
#od-generator-wrapper #od-magic-close-bottom {
    background-image: none !important;
    color: #102b13;
    border-color: #6eec78 !important;
    box-shadow: 0 0 5px 2px rgba(76, 255, 102, .95), 0 0 18px 5px rgba(76, 255, 102, .65), inset 0 0 12px 2px rgba(76, 255, 102, .4) !important;
}

/* Stable action widths prevent label changes from shifting the header. */
#od-generator-wrapper #od-choose-magic-items { width:190px; flex-shrink:0; }
#od-generator-wrapper #od-open-magic-forge { width:180px; flex-shrink:0; }
#od-generator-wrapper #od-choose-magic-items[aria-expanded="true"],
#od-generator-wrapper #od-open-magic-forge[aria-expanded="true"],
#od-generator-wrapper #od-enable-levels[aria-pressed="true"],
#od-generator-wrapper #od-magic-close-bottom {
    animation: od-magic-open-pulse 2.6s ease-in-out infinite !important;
}
@keyframes od-magic-open-pulse {
    0%, 100% { background-color:#9df58b; color:#102b13; }
    50% { background-color:#145b2b; color:#f2fff1; }
}
@media (max-width:600px) {
    #od-generator-wrapper #od-choose-magic-items,
    #od-generator-wrapper #od-open-magic-forge { width:100%; }
}

/* Collapsed item actions stay accessible without opening the description. */
#od-generator-wrapper .od-magic-card > summary { display:flex; align-items:center; flex-wrap:wrap; gap:10px; list-style:none; }
#od-generator-wrapper .od-magic-card > summary::-webkit-details-marker { display:none; }
#od-generator-wrapper .od-magic-card > summary::before { content:'▸'; flex:0 0 auto; }
#od-generator-wrapper .od-magic-card[open] > summary::before { content:'▾'; }
#od-generator-wrapper .od-magic-card-title { flex:1 1 130px; min-width:0; }
#od-generator-wrapper .od-magic-card summary small { margin:5px 0 0; }
#od-generator-wrapper .od-magic-card > summary button { flex:0 1 auto; margin:0 0 0 auto; max-width:100%; min-height:36px; padding:7px 10px; border:1px solid #b89b60; border-radius:4px; background:linear-gradient(#f1dcaa,#c4a364); color:#201c13; font:400 13px/1.35 "Segoe UI",sans-serif; white-space:normal; cursor:pointer; }
#od-generator-wrapper .od-magic-card[open] .od-magic-quick-move,
#od-generator-wrapper .od-magic-card:not([open]) .od-magic-card-close { display:none; }
@media(max-width:600px) {
    #od-generator-wrapper .od-magic-card > summary button { min-height:44px; }
}

/* Two-handed weapons share a dark-orange visual cue in both inventories. */
#od-generator-wrapper .od-equipment .od-selected-weapon-tag.od-two-handed,
#od-generator-wrapper .od-magic-card.od-two-handed,
#od-generator-wrapper .od-magic-catalog-card.od-two-handed {
    background:#93430b; border-color:#c56820; color:#fff6e5;
}
#od-generator-wrapper .od-equipment .od-selected-weapon-tag.od-two-handed:hover { background:#a84d0e; }
#od-generator-wrapper .od-selected-weapon-tag.od-two-handed .od-remove-weapon,
#od-generator-wrapper .od-magic-card.od-two-handed :is(summary, small, p, strong, li, label),
#od-generator-wrapper .od-magic-catalog-card.od-two-handed :is(h4, p, details, summary, strong) { color:#fff6e5; }
#od-generator-wrapper .od-magic-card.od-two-handed > summary:hover { background:#a84d0e; }

/* Class-incompatible magic takes priority over the two-handed orange cue. */
#od-generator-wrapper .od-magic-card.od-class-restricted,
#od-generator-wrapper .od-magic-catalog-card.od-class-restricted { background:#6e0303; border-color:#c66a61; color:#fff6e5; }
#od-generator-wrapper .od-magic-card.od-class-restricted :is(summary, small, p, strong, li, label),
#od-generator-wrapper .od-magic-catalog-card.od-class-restricted :is(h4, p, details, summary, strong) { color:#fff6e5; }
#od-generator-wrapper .od-magic-card.od-class-restricted > summary:hover { background:#a13d3d; }

#od-generator-wrapper .od-magic-read-button { display:block; width:100%; min-height:44px; padding:10px 14px; margin:0 0 12px; border:1px solid #b89b60; border-radius:4px; background:linear-gradient(#f1dcaa,#c4a364); color:#201c13; font:400 14px/1.4 "Segoe UI",sans-serif; cursor:pointer; white-space:normal; }
#od-generator-wrapper .od-magic-catalog-details { font-size:13px; line-height:1.6; margin:14px 0; }
#od-generator-wrapper .od-magic-catalog-details[hidden] { display:none!important; }

/* Embedded Magic Item Generator presentation; effect artwork from the generator plugin. */
.od-mig__atmosphere {
	--mig-explosion-x: 50vw;
	--mig-explosion-y: 40vh;
	position: fixed;
	inset: 0;
	z-index: 2147482500;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	will-change: opacity;
	animation: mig-atmosphere-life 2s ease-out both !important;
}

@keyframes mig-atmosphere-life {
	0% { opacity: 0; }
	8%, 72% { opacity: 1; }
	100% { opacity: 0; }
}

/* Expanding magical blast */
.od-mig__atmosphere-blast-core,
.od-mig__atmosphere-blast-ring,
.od-mig__atmosphere-ray {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.od-mig__atmosphere-blast-core {
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fffde8 0 3%, #f0c46f 12%, #49ad78 32%, #3f99c4 53%, transparent 72%);
	box-shadow: 0 0 38px #3f99c4, 0 0 78px rgba(73, 173, 120, .7);
	animation: mig-blast-core 1.15s ease-out both !important;
}

.od-mig__atmosphere-blast-ring {
	width: 12vmin;
	height: 12vmin;
	margin: -6vmin;
	border: 3px solid rgba(240, 196, 111, .9);
	border-radius: 50%;
	box-shadow: 0 0 17px rgba(63, 153, 196, .85), inset 0 0 12px rgba(73, 173, 120, .55);
	animation: mig-blast-ring 1.3s cubic-bezier(.08, .66, .25, 1) both !important;
}
.od-mig__atmosphere-blast-ring--2 { animation-delay: .12s !important; border-color: #3f99c4; }
.od-mig__atmosphere-blast-ring--3 { animation-delay: .24s !important; border-color: #49ad78; }

.od-mig__atmosphere-ray {
	width: 22vmax;
	height: 2px;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(255, 247, 200, .95), rgba(63, 153, 196, .45), transparent);
	transform: rotate(var(--mig-ray)) scaleX(0);
	animation: mig-blast-ray 1.1s ease-out .12s both !important;
}

@keyframes mig-blast-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
	24% { opacity: 1; transform: translate(-50%, -50%) scale(1.55); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes mig-blast-ring {
	0% { opacity: 0; transform: scale(.05); }
	18% { opacity: 1; }
	100% { opacity: 0; transform: scale(12); }
}
@keyframes mig-blast-ray {
	0% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(0); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(1); }
}

/* Gold-white flash */
.od-mig__atmosphere--flash {
	--mig-flash-core: #fffde7;
	--mig-flash-a: #fff;
	--mig-flash-b: #f0c46f;
	--mig-flash-c: #3f99c4;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 252, 222, .82), rgba(240, 196, 111, .46) 18%, rgba(63, 153, 196, .26) 40%, transparent 73%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.od-mig__atmosphere--brilliant-white-flash {
	--mig-flash-core: #fff;
	--mig-flash-a: #fff;
	--mig-flash-b: #fffde8;
	--mig-flash-c: #d5f6ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .98), rgba(255, 254, 229, .78) 18%, rgba(206, 244, 255, .48) 42%, transparent 76%);
	animation: mig-atmosphere-brilliant-flash-life 2s ease-out both !important;
}

.od-mig__atmosphere--azure-flash {
	--mig-flash-core: #f4ffff;
	--mig-flash-a: #fff;
	--mig-flash-b: #6fe3ff;
	--mig-flash-c: #2868ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(239, 255, 255, .9), rgba(78, 203, 255, .57) 18%, rgba(39, 89, 220, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.od-mig__atmosphere--emerald-flash {
	--mig-flash-core: #f5ffe7;
	--mig-flash-a: #fff;
	--mig-flash-b: #69f49c;
	--mig-flash-c: #079263;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(244, 255, 225, .9), rgba(74, 230, 131, .55) 18%, rgba(5, 127, 91, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.od-mig__atmosphere--violet-flash {
	--mig-flash-core: #fff2ff;
	--mig-flash-a: #fff;
	--mig-flash-b: #df78ff;
	--mig-flash-c: #6f42ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 238, 255, .9), rgba(207, 93, 255, .54) 18%, rgba(97, 56, 219, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.od-mig__atmosphere--crimson-flash {
	--mig-flash-core: #fff3e5;
	--mig-flash-a: #fff;
	--mig-flash-b: #ff875d;
	--mig-flash-c: #e82d43;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 244, 224, .91), rgba(255, 105, 75, .56) 18%, rgba(205, 35, 65, .35) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}
.od-mig__atmosphere-flash-core,
.od-mig__atmosphere-flash-halo,
.od-mig__atmosphere-flash-ray { position: absolute; left: var(--mig-explosion-x); top: var(--mig-explosion-y); }
.od-mig__atmosphere-flash-core {
	width: 9vmin; height: 9vmin; border-radius: 50%;
	background: var(--mig-flash-core);
	box-shadow: 0 0 35px var(--mig-flash-a), 0 0 95px var(--mig-flash-b), 0 0 150px var(--mig-flash-c);
	animation: mig-flash-core 1.3s ease-out both !important;
}
.od-mig__atmosphere-flash-halo {
	width: 15vmin; height: 15vmin; margin: -7.5vmin;
	border: 3px solid var(--mig-flash-b); border-radius: 50%;
	animation: mig-flash-halo 1.5s ease-out both !important;
}
.od-mig__atmosphere-flash-ray {
	width: 33vmax; height: 3px;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--mig-flash-a), var(--mig-flash-b), var(--mig-flash-c) 58%, transparent 88%);
	animation: mig-flash-ray 1.2s ease-out both !important;
}
@keyframes mig-atmosphere-flash-life {
	0% { opacity: 0; }
	10% { opacity: .78; }
	20% { opacity: .18; }
	32% { opacity: .58; }
	100% { opacity: 0; }
}
@keyframes mig-atmosphere-brilliant-flash-life {
	0% { opacity: 0; }
	8% { opacity: 1; }
	18% { opacity: .42; }
	29% { opacity: .94; }
	45% { opacity: .68; }
	100% { opacity: 0; }
}
@keyframes mig-flash-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes mig-flash-halo { from { opacity: 1; transform: scale(.1); } to { opacity: 0; transform: scale(10); } }
@keyframes mig-flash-ray {
	0% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(.02); }
	20% { opacity: .9; }
	100% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(1); }
}

/* Additional colored explosion deck */
.od-mig__atmosphere--azure-nova {
	--mig-explosion-a: #f1feff;
	--mig-explosion-b: #52d7ff;
	--mig-explosion-c: #2764ff;
	--mig-explosion-shadow: rgba(38, 128, 255, .82);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(226, 252, 255, .58), rgba(55, 173, 255, .34) 18%, rgba(30, 72, 177, .22) 40%, transparent 70%);
}

.od-mig__atmosphere--emerald-burst {
	--mig-explosion-a: #f0ffe1;
	--mig-explosion-b: #61f29b;
	--mig-explosion-c: #05895f;
	--mig-explosion-shadow: rgba(25, 205, 122, .78);
	background: radial-gradient(ellipse at var(--mig-explosion-x) var(--mig-explosion-y), rgba(226, 255, 203, .52), rgba(43, 204, 119, .34) 21%, rgba(3, 91, 78, .24) 46%, transparent 73%);
}

.od-mig__atmosphere--violet-starburst {
	--mig-explosion-a: #fff1ff;
	--mig-explosion-b: #e271ff;
	--mig-explosion-c: #6839ff;
	--mig-explosion-shadow: rgba(156, 60, 255, .84);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 222, 255, .58), rgba(196, 78, 255, .32) 18%, rgba(74, 39, 169, .24) 43%, transparent 72%);
}

.od-mig__atmosphere--crimson-gold-detonation {
	--mig-explosion-a: #fff9d7;
	--mig-explosion-b: #ffbd37;
	--mig-explosion-c: #e73d25;
	--mig-explosion-shadow: rgba(255, 96, 29, .84);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 247, 198, .62), rgba(255, 166, 29, .38) 17%, rgba(190, 30, 24, .26) 43%, transparent 73%);
}

.od-mig__atmosphere--prismatic-nova {
	--mig-explosion-a: #fff;
	--mig-explosion-b: #54e7ff;
	--mig-explosion-c: #ff62c7;
	--mig-explosion-shadow: rgba(119, 92, 255, .85);
	background:
		radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .64), transparent 13%),
		conic-gradient(from 15deg at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 76, 90, .2), rgba(255, 202, 61, .2), rgba(68, 232, 135, .2), rgba(67, 202, 255, .2), rgba(128, 92, 255, .2), rgba(255, 98, 199, .2), rgba(255, 76, 90, .2));
}

.od-mig__color-explosion-core,
.od-mig__color-explosion-ring,
.od-mig__color-explosion-ray,
.od-mig__color-explosion-spark {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.od-mig__color-explosion-core {
	width: 12vmin;
	height: 12vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 3%, var(--mig-explosion-a) 9%, var(--mig-explosion-b) 28%, var(--mig-explosion-c) 52%, transparent 73%);
	box-shadow: 0 0 42px var(--mig-explosion-a), 0 0 92px var(--mig-explosion-shadow), 0 0 150px var(--mig-explosion-shadow);
	animation: mig-color-core 1.35s cubic-bezier(.1, .72, .25, 1) both !important;
}

.od-mig__color-explosion-ring {
	width: 11vmin;
	height: 11vmin;
	margin: -5.5vmin;
	border: calc(2px + var(--mig-color-ring) * 1px) solid var(--mig-explosion-b);
	border-left-color: var(--mig-explosion-a);
	border-bottom-color: var(--mig-explosion-c);
	border-radius: 50%;
	box-shadow: 0 0 18px var(--mig-explosion-shadow), inset 0 0 12px var(--mig-explosion-shadow);
	animation: mig-color-ring 1.45s cubic-bezier(.08, .65, .2, 1) calc(var(--mig-color-ring) * .09s) both !important;
}

.od-mig__color-explosion-ray {
	width: 30vmax;
	height: 3px;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--mig-explosion-a), var(--mig-explosion-b) 24%, var(--mig-explosion-c) 55%, transparent 92%);
	animation: mig-color-ray 1.2s ease-out .08s both !important;
}

.od-mig__color-explosion-spark {
	width: var(--mig-color-size);
	height: var(--mig-color-size);
	border-radius: 50%;
	background: var(--mig-explosion-a);
	box-shadow: 0 0 8px var(--mig-explosion-b), 0 0 15px var(--mig-explosion-shadow);
	animation: mig-color-spark 1.32s cubic-bezier(.12, .65, .26, 1) var(--mig-color-delay) both !important;
}

.od-mig__atmosphere--emerald-burst .od-mig__color-explosion-ring {
	border-radius: 50% 18% 50% 18%;
}
.od-mig__atmosphere--emerald-burst .od-mig__color-explosion-ray { height: 5px; }

.od-mig__atmosphere--violet-starburst .od-mig__color-explosion-ray:nth-of-type(odd) {
	height: 6px;
	width: 36vmax;
}

.od-mig__atmosphere--crimson-gold-detonation .od-mig__color-explosion-ring {
	border-width: 5px;
}
.od-mig__atmosphere--crimson-gold-detonation .od-mig__color-explosion-core {
	width: 17vmin;
	height: 17vmin;
}

.od-mig__atmosphere--prismatic-nova .od-mig__color-explosion-ring {
	border-top-color: #ff596f;
	border-right-color: #ffd452;
	border-bottom-color: #55e59d;
	border-left-color: #62bfff;
}
.od-mig__atmosphere--prismatic-nova .od-mig__color-explosion-ray:nth-of-type(3n) { --mig-explosion-b: #ffd452; --mig-explosion-c: #ff596f; }
.od-mig__atmosphere--prismatic-nova .od-mig__color-explosion-ray:nth-of-type(3n + 1) { --mig-explosion-b: #55e59d; --mig-explosion-c: #62bfff; }

@keyframes mig-color-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.65); }
	55% { opacity: .92; transform: translate(-50%, -50%) scale(2.25); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
}

@keyframes mig-color-ring {
	0% { opacity: 0; transform: rotate(-25deg) scale(.04); }
	16% { opacity: 1; }
	100% { opacity: 0; transform: rotate(95deg) scale(13); }
}

@keyframes mig-color-ray {
	0% { opacity: 0; transform: rotate(var(--mig-color-ray)) scaleX(.01); }
	19% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-color-ray)) scaleX(1); }
}

@keyframes mig-color-spark {
	0% { opacity: 0; transform: rotate(var(--mig-color-spark)) translateX(0) scale(.2); }
	20%, 67% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-color-spark)) translateX(var(--mig-color-distance)) scale(.05); }
}

/* Ray-and-spark explosion family: deliberately no circular shock rings. */
.od-mig__atmosphere--solar-starburst {
	--mig-light-a: #fffde2;
	--mig-light-b: #ffd65a;
	--mig-light-c: #ff7a24;
	--mig-light-shadow: rgba(255, 172, 36, .9);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 252, 219, .7), rgba(255, 190, 49, .34) 13%, rgba(255, 103, 26, .18) 31%, transparent 63%);
}

.od-mig__atmosphere--sapphire-shatter {
	--mig-light-a: #f4ffff;
	--mig-light-b: #72ddff;
	--mig-light-c: #2858ff;
	--mig-light-shadow: rgba(52, 130, 255, .92);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(232, 253, 255, .68), rgba(61, 173, 255, .31) 13%, rgba(32, 69, 181, .2) 32%, transparent 64%);
}

.od-mig__atmosphere--emerald-sparkstorm {
	--mig-light-a: #f4ffe5;
	--mig-light-b: #6dffa3;
	--mig-light-c: #00a66f;
	--mig-light-shadow: rgba(31, 224, 125, .88);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(239, 255, 216, .67), rgba(65, 231, 125, .32) 14%, rgba(0, 117, 83, .2) 34%, transparent 65%);
}

.od-mig__atmosphere--rosefire-burst {
	--mig-light-a: #fff0f4;
	--mig-light-b: #ff79ae;
	--mig-light-c: #ff4f48;
	--mig-light-shadow: rgba(255, 71, 120, .88);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 236, 241, .68), rgba(255, 91, 147, .32) 14%, rgba(220, 44, 51, .2) 34%, transparent 65%);
}

.od-mig__atmosphere--white-star-detonation {
	--mig-light-a: #fff;
	--mig-light-b: #d9fbff;
	--mig-light-c: #75baff;
	--mig-light-shadow: rgba(201, 245, 255, .95);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .78), rgba(198, 244, 255, .34) 13%, rgba(88, 151, 255, .18) 32%, transparent 63%);
}

.od-mig__spark-explosion-core,
.od-mig__spark-explosion-flare,
.od-mig__spark-explosion-particle,
.od-mig__spark-explosion-shard {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.od-mig__spark-explosion-core {
	width: 8vmin;
	height: 8vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 7%, var(--mig-light-a) 15%, var(--mig-light-b) 37%, var(--mig-light-c) 62%, transparent 75%);
	box-shadow: 0 0 38px #fff, 0 0 82px var(--mig-light-shadow), 0 0 145px var(--mig-light-shadow);
	animation: mig-light-core 1.25s cubic-bezier(.09, .72, .22, 1) both !important;
}

.od-mig__spark-explosion-flare {
	width: var(--mig-light-length);
	height: 2px;
	transform-origin: left center;
	background: linear-gradient(90deg, #fff, var(--mig-light-a) 12%, var(--mig-light-b) 38%, var(--mig-light-c) 68%, transparent 96%);
	box-shadow: 0 0 7px var(--mig-light-shadow);
	animation: mig-light-flare 1.08s cubic-bezier(.08, .65, .22, 1) var(--mig-light-delay) both !important;
}

.od-mig__spark-explosion-particle {
	width: var(--mig-light-size);
	height: var(--mig-light-size);
	border-radius: 50%;
	background: var(--mig-light-a);
	box-shadow: 0 0 8px var(--mig-light-b), 0 0 15px var(--mig-light-shadow);
	animation: mig-light-particle 1.24s cubic-bezier(.12, .67, .24, 1) var(--mig-light-delay) both !important;
}

.od-mig__spark-explosion-shard {
	width: 4px;
	height: 22px;
	border-radius: 50% 50% 10% 10%;
	background: linear-gradient(var(--mig-light-a), var(--mig-light-b), var(--mig-light-c));
	box-shadow: 0 0 9px var(--mig-light-shadow);
	transform-origin: 50% 0;
	animation: mig-light-shard 1.32s cubic-bezier(.1, .65, .25, 1) var(--mig-light-delay) both !important;
}

.od-mig__atmosphere--solar-starburst .od-mig__spark-explosion-flare:nth-of-type(3n),
.od-mig__atmosphere--white-star-detonation .od-mig__spark-explosion-flare:nth-of-type(2n) {
	height: 5px;
}

.od-mig__atmosphere--sapphire-shatter .od-mig__spark-explosion-shard,
.od-mig__atmosphere--rosefire-burst .od-mig__spark-explosion-shard {
	width: 7px;
	height: 29px;
}

@keyframes mig-light-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	16% { opacity: 1; transform: translate(-50%, -50%) scale(1.9); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(2.7); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

@keyframes mig-light-flare {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) scaleX(.01); }
	17%, 47% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) scaleX(1); }
}

@keyframes mig-light-particle {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateX(0) scale(.2); }
	17%, 72% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateX(var(--mig-light-distance)) scale(.05); }
}

@keyframes mig-light-shard {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateY(0) scale(.15); }
	20%, 68% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateY(var(--mig-light-distance)) scale(.8); }
}

/* Phones and lower-power touch devices keep the same timing and colors while
   using fewer painted glow layers. Element counts are reduced in app.js. */
@media (max-width: 900px), (pointer: coarse) {
	.od-mig__atmosphere-flash-core {
		box-shadow: 0 0 24px var(--mig-flash-a), 0 0 70px var(--mig-flash-b);
	}

	.od-mig__atmosphere-blast-core {
		box-shadow: 0 0 28px #3f99c4, 0 0 58px rgba(73, 173, 120, .62);
	}

	.od-mig__atmosphere-blast-ring,
	.od-mig__color-explosion-ring {
		box-shadow: 0 0 10px var(--mig-explosion-shadow, rgba(63, 153, 196, .58));
	}

	.od-mig__color-explosion-core {
		box-shadow: 0 0 28px var(--mig-explosion-a), 0 0 68px var(--mig-explosion-shadow);
	}

	.od-mig__color-explosion-spark {
		box-shadow: 0 0 6px var(--mig-explosion-shadow);
	}

	.od-mig__spark-explosion-core {
		box-shadow: 0 0 26px #fff, 0 0 68px var(--mig-light-shadow);
	}

	.od-mig__spark-explosion-flare,
	.od-mig__spark-explosion-particle,
	.od-mig__spark-explosion-shard {
		box-shadow: 0 0 6px var(--mig-light-shadow);
	}
}

/* --- full-page Roll Item prototype: earthquake and falling controls --- */



#od-generator-wrapper .od-magic-forge.od-mig-page-quake {
	transform-origin: 50% 45%;
	animation: mig-page-earthquake 1.18s cubic-bezier(.36, .07, .19, .97) both !important;
}

.od-mig__quake-button {
	position: fixed !important;
	z-index: 2147483001 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	pointer-events: none !important;
	transform-origin: 50% 40%;
	will-change: transform, opacity;
	animation: mig-quake-button-fall var(--mig-fall-duration, 1.5s) cubic-bezier(.38, .02, .72, .3) var(--mig-fall-delay) both !important;
}

#od-generator-wrapper .od-mig__quake-source {
	animation: mig-quake-real-button 1.95s linear both !important;
}

.od-mig__quake-word-overlay {
	position: fixed;
	z-index: 2147483001;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	pointer-events: none;
	white-space: normal;
}

.od-mig__quake-word {
	display: inline-block;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	animation: mig-quake-button-fall var(--mig-fall-duration, 1.5s) cubic-bezier(.38, .02, .72, .3) var(--mig-fall-delay) both !important;
}

@keyframes mig-page-earthquake {
	0%, 12%, 78%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	15% { transform: translate3d(-5px, 3px, 0) rotate(-.18deg); }
	19% { transform: translate3d(9px, -5px, 0) rotate(.24deg); }
	23% { transform: translate3d(-12px, 7px, 0) rotate(-.3deg); }
	28% { transform: translate3d(11px, 4px, 0) rotate(.28deg); }
	33% { transform: translate3d(-8px, -8px, 0) rotate(-.22deg); }
	39% { transform: translate3d(13px, 6px, 0) rotate(.32deg); }
	46% { transform: translate3d(-11px, 3px, 0) rotate(-.28deg); }
	54% { transform: translate3d(8px, -6px, 0) rotate(.2deg); }
	63% { transform: translate3d(-5px, 4px, 0) rotate(-.12deg); }
	71% { transform: translate3d(3px, -2px, 0) rotate(.08deg); }
}

@keyframes mig-quake-button-fall {
	0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
	12% { transform: translate3d(0, -7px, 0) rotate(-3deg); }
	25% { opacity: 1; transform: translate3d(var(--mig-fall-nudge), 7px, 0) rotate(8deg); }
	100% { opacity: .96; transform: translate3d(var(--mig-fall-x), 108vh, 0) rotate(var(--mig-fall-turn)); }
}

@keyframes mig-quake-real-button {
	0%, 20% { opacity: 1; }
	24%, 82% { opacity: 0; }
	100% { opacity: 0; }
}

/* --- magical loading state --- */

.od-mig__result { position: relative; }

#od-generator-wrapper .od-mig__magic-loading {
	position: absolute;
	inset: 20px 0 0;
	z-index: 5;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background:
		radial-gradient(circle at 39% 53%, rgba(18, 72, 124, .15), transparent 25%),
		radial-gradient(circle at 61% 48%, rgba(11, 95, 60, .15), transparent 26%),
		radial-gradient(circle at 18% 24%, rgba(91, 58, 4, .22) 0 1px, transparent 2px),
		radial-gradient(circle at 78% 32%, rgba(112, 74, 8, .24) 0 1px, transparent 2px),
		radial-gradient(circle at 64% 76%, rgba(91, 58, 4, .2) 0 1px, transparent 2px),
		radial-gradient(circle at center, rgba(88, 66, 20, .16), transparent 43%);
	background-size: auto, auto, 110px 95px, 145px 125px, 175px 150px, auto;
	border-radius: 3px;
	pointer-events: none;
	animation:
		mig-magic-shimmer 2s ease-in-out infinite,
		mig-magic-veil 2s ease-in-out both !important;
}

#od-generator-wrapper .od-mig__magic-loading p {
	margin: 0;
	color: #0b5f3c;
	font-weight: 600;
	letter-spacing: .08em;
	text-shadow: 0 0 7px rgba(11, 95, 60, .32);
	animation: mig-magic-words 1.45s ease-in-out both !important;
}

.mig[data-state="generating"] .mig-sb__body,
.mig[data-state="generating"] .mig-sb__art {
	animation: mig-magic-item-reveal 1.15s ease-out .65s both !important;
}

#od-generator-wrapper .od-mig__magic-stage {
	position: relative;
	display: block;
	width: 122px;
	height: 108px;
}

#od-generator-wrapper .od-mig__magic-swirl {
	position: absolute;
	border-radius: 50%;
	-webkit-mask: radial-gradient(ellipse, transparent 54%, #000 57% 67%, transparent 70%);
	mask: radial-gradient(ellipse, transparent 54%, #000 57% 67%, transparent 70%);
}

#od-generator-wrapper .od-mig__magic-swirl::before,
#od-generator-wrapper .od-mig__magic-swirl::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

#od-generator-wrapper .od-mig__magic-swirl--blue {
	inset: 1px -5px 1px -5px;
	background: conic-gradient(
		from 20deg,
		transparent 0 8%,
		rgba(21, 67, 126, .32) 13%,
		#174f8a 20%,
		rgba(24, 58, 120, .9) 27%,
		transparent 35% 57%,
		rgba(18, 72, 124, .42) 64%,
		#246b9a 72%,
		transparent 82%
	);
	animation: mig-magic-swirl-blue 1.25s linear infinite !important;
}

#od-generator-wrapper .od-mig__magic-swirl--blue::before {
	width: 9px;
	height: 9px;
	top: 9px;
	right: 18px;
	background: #1c5c88;
	box-shadow: 0 0 7px #174f8a, 0 0 14px rgba(18, 72, 124, .55);
}

#od-generator-wrapper .od-mig__magic-swirl--blue::after {
	width: 5px;
	height: 5px;
	left: 10px;
	bottom: 23px;
	background: #273f8f;
	box-shadow: 0 0 7px #174f8a;
}

#od-generator-wrapper .od-mig__magic-swirl--green {
	inset: 10px 4px 9px 4px;
	background: conic-gradient(
		from -35deg,
		transparent 0 18%,
		rgba(11, 95, 60, .32) 24%,
		#0b5f3c 32%,
		rgba(31, 117, 74, .9) 38%,
		transparent 47% 69%,
		#0f6b45 77%,
		rgba(20, 122, 76, .45) 85%,
		transparent 92%
	);
	animation: mig-magic-swirl-green 1.55s linear infinite !important;
}

#od-generator-wrapper .od-mig__magic-swirl--green::before {
	width: 8px;
	height: 8px;
	left: 19px;
	top: 6px;
	background: #1f754a;
	box-shadow: 0 0 7px #0b5f3c, 0 0 14px rgba(11, 95, 60, .55);
}

#od-generator-wrapper .od-mig__magic-swirl--green::after {
	width: 5px;
	height: 5px;
	right: 11px;
	bottom: 17px;
	background: #174e35;
	box-shadow: 0 0 7px #0b5f3c;
}

#od-generator-wrapper .od-mig__magic-orbit {
	position: relative;
	display: grid;
	left: 23px;
	top: 14px;
	width: 76px;
	height: 76px;
	place-items: center;
	border: 2px solid rgba(112, 74, 8, .28);
	border-top-color: #8a5a00;
	border-right-color: #8a5a00;
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(112, 74, 8, .25), inset 0 0 13px rgba(112, 74, 8, .1);
	animation: mig-magic-spin 1.15s linear infinite !important;
}

#od-generator-wrapper .od-mig__magic-orbit::before,
#od-generator-wrapper .od-mig__magic-orbit::after {
	position: absolute;
	color: #6f4a0b;
	line-height: 1;
}

#od-generator-wrapper .od-mig__magic-orbit::before { content: '\2726'; top: -9px; left: 8px; font-size: 18px; text-shadow: 0 0 8px currentColor; }
#od-generator-wrapper .od-mig__magic-orbit::after { content: '\2727'; right: -7px; bottom: 8px; font-size: 15px; text-shadow: 0 0 8px currentColor; }

#od-generator-wrapper .od-mig__magic-ring {
	position: absolute;
	inset: 9px;
	border: 1px solid rgba(112, 74, 8, .55);
	border-top-color: transparent;
	border-bottom-color: #8a5a00;
	border-radius: 50%;
	animation: mig-magic-counterspin .8s linear infinite !important;
}

#od-generator-wrapper .od-mig__magic-core {
	color: #7a4d00;
	font-size: 35px;
	text-shadow: 0 0 8px rgba(112, 74, 8, .5);
	animation: mig-magic-counterspin 1.15s linear infinite !important;
}

#od-generator-wrapper .od-mig__magic-dust {
	position: absolute;
	left: 59px;
	top: 51px;
	width: 3px;
	height: 3px;
	background: #6f4a0b;
	border-radius: 50%;
	box-shadow:
		-46px -25px 0 #8a5a00,
		42px -30px 0 #6f4a0b,
		52px 13px 0 #8a5a00,
		-50px 24px 0 #6f4a0b,
		29px 44px 0 #8a5a00,
		-24px 47px 0 #6f4a0b;
	animation: mig-magic-drift 1.8s ease-in-out infinite alternate !important;
}

#od-generator-wrapper .od-mig__magic-spark {
	position: absolute;
	color: #6f4a0b;
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 0 6px rgba(112, 74, 8, .45);
}
#od-generator-wrapper .od-mig__magic-spark--1 { left: 4px; top: 14px; animation: mig-magic-twinkle .72s ease-in-out 0s infinite alternate !important; }
#od-generator-wrapper .od-mig__magic-spark--2 { right: 3px; top: 6px; animation: mig-magic-twinkle .9s ease-in-out .12s infinite alternate !important; }
#od-generator-wrapper .od-mig__magic-spark--3 { right: 0; top: 67px; animation: mig-magic-twinkle .68s ease-in-out .25s infinite alternate !important; }
#od-generator-wrapper .od-mig__magic-spark--4 { left: 9px; top: 77px; animation: mig-magic-twinkle .84s ease-in-out .38s infinite alternate !important; }
#od-generator-wrapper .od-mig__magic-spark--5 { left: 39px; bottom: 0; animation: mig-magic-twinkle .76s ease-in-out .18s infinite alternate !important; }
#od-generator-wrapper .od-mig__magic-spark--6 { right: 35px; bottom: 3px; animation: mig-magic-twinkle .95s ease-in-out .3s infinite alternate !important; }

@keyframes mig-magic-spin { to { transform: rotate(360deg); } }
@keyframes mig-magic-counterspin { to { transform: rotate(-360deg); } }
@keyframes mig-magic-swirl-blue {
	from { transform: rotate(0deg) scaleX(1.04); opacity: .72; }
	50% { opacity: 1; }
	to { transform: rotate(360deg) scaleX(1.04); opacity: .72; }
}
@keyframes mig-magic-swirl-green {
	from { transform: rotate(360deg) scaleY(.92); opacity: .68; }
	50% { opacity: 1; }
	to { transform: rotate(0deg) scaleY(.92); opacity: .68; }
}
@keyframes mig-magic-drift {
	from { opacity: .4; transform: rotate(-8deg) scale(.82); }
	to { opacity: 1; transform: rotate(12deg) scale(1.15); }
}
@keyframes mig-magic-twinkle {
	from { opacity: .18; transform: translateY(4px) scale(.55) rotate(0deg); }
	to { opacity: 1; transform: translateY(-4px) scale(1.18) rotate(35deg); }
}
@keyframes mig-magic-words {
	0% { opacity: 0; text-shadow: 0 0 2px rgba(11, 95, 60, .18); }
	28%, 68% { opacity: 1; text-shadow: 0 0 9px rgba(11, 95, 60, .42); }
	100% { opacity: 0; text-shadow: 0 0 4px rgba(11, 95, 60, .22); }
}
@keyframes mig-magic-shimmer {
	0%, 100% { background-position: center, center, 0 0, 0 0, 0 0, center; }
	50% { background-position: 44% 48%, 56% 53%, 18px -12px, -15px 10px, 12px 14px, center; }
}
@keyframes mig-magic-veil {
	0%, 68% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes mig-magic-item-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.od-mig__initial-loader-sigil,
	.od-mig__initial-loader-glyph { animation-duration: 2.8s !important; }
	.od-mig__initial-loader-sigil::before { animation-duration: 2.4s !important; }
	.od-mig__initial-loader-sigil::after { animation-duration: 6s !important; }
	#od-generator-wrapper .od-mig__magic-orbit,
	#od-generator-wrapper .od-mig__magic-ring,
	#od-generator-wrapper .od-mig__magic-core { animation-duration: 3s !important; }
	#od-generator-wrapper .od-mig__magic-swirl { animation-duration: 2s !important; }
	#od-generator-wrapper .od-mig__magic-spark,
	#od-generator-wrapper .od-mig__magic-dust,
	#od-generator-wrapper .od-mig__magic-loading,
	#od-generator-wrapper .od-mig__magic-loading p { animation-duration: 2s !important; }
	.mig[data-state="generating"] .mig-sb__body,
	.mig[data-state="generating"] .mig-sb__art { animation-duration: 1.3s !important; }
}


#od-generator-wrapper .od-forge-progress { position: relative; min-height: 260px; border: 1px solid #b99a61; border-radius: 6px; overflow: hidden; margin-top: 18px; background: #faf5e9; }
#od-generator-wrapper .od-forge-progress .od-mig__magic-loading { inset: 0; }
#od-generator-wrapper .od-forge-progress .od-mig__magic-loading p { font-size: 18px; text-align: center; padding: 0 12px; }
@media (max-width: 600px) { #od-generator-wrapper .od-forge-progress { min-height: 230px; } }


/* Compact card-color key next to the Magic Items heading. */
#od-generator-wrapper .od-magic-heading-group { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; min-width:0; }
#od-generator-wrapper .od-magic-heading-group h2 { flex:0 0 auto; }
#od-generator-wrapper .od-magic-color-key { display:grid; gap:5px; width:226px; max-width:100%; }
#od-generator-wrapper .od-magic-color-key-row { display:flex; align-items:flex-start; gap:8px; }
#od-generator-wrapper .od-magic-color-swatch { display:block; flex:0 0 14px; width:14px; height:14px; margin-top:1px; border:1px solid; border-radius:2px; }
#od-generator-wrapper .od-magic-color-meaning { color:#fff!important; font-family:"Segoe UI",sans-serif; font-size:12px; font-weight:400; line-height:1.35; min-width:0; overflow-wrap:anywhere; }
#od-generator-wrapper .od-magic-color-key-red { background:#6e0303; border-color:#c66a61!important; }
#od-generator-wrapper .od-magic-color-key-orange { background:#93430b; border-color:#c56820!important; }
@media(max-width:600px) {
 #od-generator-wrapper .od-magic-heading-group { width:100%; }
 #od-generator-wrapper .od-magic-color-key { width:100%; }
}