/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #e0d6b8;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start; /* Changed from 'center' so the top of your app doesn't get cut off when it gets long! */
padding: 20px;

/* Dark Mode Turing Pattern Background */
background-color: #1a1a2e;
background-image: 
    linear-gradient(to bottom, rgba(26, 26, 46, 0) 15%, rgba(26, 26, 46, 1) 85%),
    url('./ui/bg.png');
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed; /* Keeps the background pinned to the screen while the app scrolls */
}

.app {
    max-width: 960px;
    width: 100%;
    background: #16213e;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border: 1px solid #2a3a5e;
}



/* Header */
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #2a3a5e;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    color: #f0c060;
}

header p {
    color: #8a9bb5;
    margin: 4px 0 16px;
}

.button-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-random {
    background: #2a3a5e;
    color: white;
}

.btn-random:hover {
    background: #3a4a6e;
    transform: translateY(-2px);
}

.btn-create {
    background: #f0c060;
    color: #1a1a2e;
}

.btn-create:hover {
    background: #ffd070;
    transform: translateY(-2px);
}

.btn-primary {
    background: #f0c060;
    color: #1a1a2e;
}

.btn-primary:hover {
    background: #ffd070;
}

.btn-secondary {
    background: #2a3a5e;
    color: #e0d6b8;
}

.btn-secondary:hover {
    background: #3a4a6e;
}

.btn-small {
    padding: 4px 14px;
    font-size: 0.8rem;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* Progress Bar — Clickable */
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 8px;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #2a3a5e;
    transform: translateY(-50%);
    z-index: 0;
}

.step {
    position: relative;
    z-index: 1;
    background: #16213e;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    color: #5a6a82;
    border: 2px solid #2a3a5e;
    transition: all 0.3s;
    cursor: pointer;
}

.step:hover {
    border-color: #6a7a92;
}

.step.active {
    color: #f0c060;
    border-color: #f0c060;
    background: #1a2a3e;
}

.step.completed {
    color: #6bcb6b;
    border-color: #6bcb6b;
}

/* Stage Container */
#stageContainer {
    background: #0f1a2b;
    border-radius: 12px;
    padding: 24px;
    min-height: 320px;
    border: 1px solid #2a3a5e;
    margin-bottom: 16px;
}

.stage-content h2 {
    color: #f0c060;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.stage-content .subtitle {
    color: #8a9bb5;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #8a9bb5;
    font-size: 0.85rem;
    margin-bottom: 4px;
    font-weight: bold;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: #0d1725;
    color: #e0d6b8;
    border: 1px solid #2a3a5e;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: #f0c060;
}

.form-group select option {
    background: #0d1725;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Stats Edit */
.stats-edit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 20px;
    padding: 12px 0;
}

.stat-edit-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-edit-item label {
    color: #8a9bb5;
    font-weight: bold;
    font-size: 1rem;  /* Increased from 0.85rem */
    min-width: 70px;
    cursor: help;
}

.stat-edit-item label .stat-emoji {
    font-size: 1.4rem;  /* Bigger emojis */
}

.stat-edit-item select {
    flex: 1;
    padding: 6px 10px;
    background: #0d1725;
    color: #e0d6b8;
    border: 1px solid #2a3a5e;
    border-radius: 6px;
    font-size: 0.95rem;
}

.stat-edit-item .stat-preview {
    font-size: 1.1rem;
    font-weight: bold;
    min-width: 40px;
    text-align: right;
    margin-left: 8px;
}

.stat-edit-item .stat-preview.positive {
    color: #6bcb6b;
}
.stat-edit-item .stat-preview.negative {
    color: #cb6b6b;
}

/* Random button row */
.random-row {
    display: flex;
    gap: 10px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}

/* Choice Cards */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.choice-card {
    background: #0d1725;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #2a3a5e;
    cursor: pointer;
    transition: all 0.2s;
}

.choice-card:hover {
    border-color: #5a6a82;
}

.choice-card.selected {
    border-color: #f0c060;
    background: #1a2a3e;
}

.choice-card h4 {
    color: #e0d6b8;
    font-size: 1rem;
    margin-bottom: 2px;
}

.choice-card p {
    color: #8a9bb5;
    font-size: 0.8rem;
    margin: 2px 0;
}

.choice-card .perk {
    color: #6bcb6b;
    font-size: 0.75rem;
    font-style: italic;
}

.choice-card .subtype-select {
    margin-top: 8px;
}

.choice-card .subtype-select select {
    width: 100%;
    padding: 6px 10px;
    background: #0d1725;
    color: #e0d6b8;
    border: 1px solid #2a3a5e;
    border-radius: 6px;
    font-size: 0.85rem;
}

.choice-card .restriction-warning {
    color: #cb6b6b;
    font-size: 0.7rem;
    margin-top: 4px;
}

.choice-card .faction-select {
    margin-top: 6px;
}

.choice-card .faction-select select {
    width: 100%;
    padding: 4px 8px;
    background: #0d1725;
    color: #e0d6b8;
    border: 1px solid #2a3a5e;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Stunt Categories - Collapsible */
.stunt-category {
    background: #0d1725;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #1a2a42;
}

.stunt-category-header {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    border-radius: 8px;
    transition: background 0.2s;
}

.stunt-category-header:hover {
    background: #152035;
}

.stunt-category-header .arrow {
    transition: transform 0.3s;
    color: #5a6a82;
}

.stunt-category-header .arrow.open {
    transform: rotate(90deg);
}

.stunt-category-body {
    padding: 0 14px 14px 14px;
    display: none;
}

.stunt-category-body.open {
    display: block;
}

.stunt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.stunt-option {
    background: #0a1420;
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid #1a2a42;
    cursor: pointer;
    transition: all 0.2s;
}

.stunt-option:hover {
    border-color: #3a4a62;
}

.stunt-option.selected {
    border-color: #f0c060;
    background: #1a2a3e;
}

.stunt-option .stunt-name {
    color: #e0d6b8;
    font-size: 0.85rem;
    font-weight: bold;
}

.stunt-option .stunt-desc {
    color: #8a9bb5;
    font-size: 0.75rem;
}

/* Pronoun selector */
.pronoun-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.pronoun-option {
    background: #0d1725;
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid #2a3a5e;
    cursor: pointer;
    transition: all 0.2s;
}

.pronoun-option:hover {
    border-color: #5a6a82;
}

.pronoun-option.selected {
    border-color: #f0c060;
    background: #1a2a3e;
}

.pronoun-option input[type="radio"] {
    display: none;
}

/* Navigation */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;     /* Reduced from 8px + border-top */
    margin-bottom: -10px;       /* Ensure no extra bottom margin */
    border-top: 1px solid #2a3a5e;
}

/* Character Sheet (Final) */
#characterSheet {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #2a3a5e;
}

.character-card h2 {
    color: #f0c060;
    font-size: 1.8rem;
}

.character-card .subtitle {
    color: #8a9bb5;
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 20px;
    background: #0d1725;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #1a2a42;
}

.stat-item .label {
    color: #8a9bb5;
    cursor: help;
}

.stat-item .value {
    font-weight: bold;
}
.stat-item .value.positive { color: #6bcb6b; }
.stat-item .value.negative { color: #cb6b6b; }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.info-box {
    background: #0d1725;
    padding: 10px 14px;
    border-radius: 8px;
}

.info-box h3 {
    color: #8a9bb5;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-box .value {
    color: #e0d6b8;
    font-size: 1rem;
}

.info-box .sub {
    color: #6a7a92;
    font-size: 0.8rem;
    font-style: italic;
}

.list-section {
    background: #0d1725;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.list-section h3 {
    color: #8a9bb5;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.list-section ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.list-section ul li {
    color: #e0d6b8;
    font-size: 0.9rem;
}

.list-section ul li::before {
    content: "▸ ";
    color: #f0c060;
}

/* --- Achievement Gallery Button --- */
.btn-achievement {
    background: #2a3a5e;
    color: white;
}
.btn-achievement:hover {
    background: #3a4a6e;
    transform: translateY(-2px);
}

/* --- Achievement Gallery Overlay --- */
#achievementOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
}

#achievementOverlay.open {
    display: flex;
}

.achievement-gallery {
    max-width: 900px;
    width: 100%;
    background: #16213e;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #2a3a5e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    margin: auto;
    max-height: 90vh;
    overflow-y: auto;
}

.achievement-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 2px solid #2a3a5e;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.achievement-gallery-header h2 {
    color: #f0c060;
    font-size: 1.6rem;
}

.achievement-gallery-header .close-btn {
    background: #2a3a5e;
    color: #e0d6b8;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.2s;
}

.achievement-gallery-header .close-btn:hover {
    background: #3a4a6e;
}

.achievement-stats {
    background: #0d1725;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #1a2a42;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.achievement-stats .stat {
    color: #8a9bb5;
    font-size: 0.9rem;
}
.achievement-stats .stat span {
    color: #f0c060;
    font-weight: bold;
}
.achievement-stats .stat .unlocked {
    color: #6bcb6b;
}
.achievement-stats .stat .locked {
    color: #5a6a82;
}

/* Achievement Grid */
.achievement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.achievement-item {
    background: #0d1725;
    border-radius: 8px;
    padding: 12px 16px;
    border: 2px solid #1a2a42;
    transition: all 0.3s;
}

.achievement-item.unlocked {
    border-color: #f0c060;
    background: #1a2a3e;
}

.achievement-item.locked {
    opacity: 1;
    border-color: #1a2a42;
    background: #0d1725;
}

.achievement-item.locked .ach-name {
    color: #5a6a82;
}

.achievement-item.locked .ach-title {
    color: #4a5a6a;
}

.achievement-item.locked .ach-icon {
    opacity: 0.6;
}

.achievement-item.locked .ach-hint,
.achievement-item.locked .ach-criteria,
.achievement-item.locked .ach-reveal-btn {
    opacity: 1;
    color: #8a9bb5;
}

.achievement-item.locked .ach-reveal-btn {
    background: #2a3a5e;
    color: #8a9bb5;
}

.achievement-item.locked .ach-reveal-btn:hover {
    background: #3a4a6e;
    color: #e0d6b8;
}

.achievement-item.locked .ach-status.locked {
    color: #5a6a82;
    border-color: #3a4a5a;
}

.achievement-item .ach-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.achievement-item .ach-icon {
    font-size: 1.6rem;
}

.achievement-item .ach-name {
    font-weight: bold;
    color: #e0d6b8;
    font-size: 0.95rem;
}

.achievement-item .ach-title {
    color: #8a9bb5;
    font-size: 0.8rem;
}

.achievement-item .ach-status {
    font-size: 0.75rem;
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 12px;
}

.achievement-item .ach-status.unlocked {
    color: #6bcb6b;
    border: 1px solid #6bcb6b;
}

.achievement-item .ach-status.locked {
    color: #5a6a82;
    border: 1px solid #5a6a82;
}

.achievement-item .ach-bottom {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #1a2a42;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.achievement-item .ach-hint {
    color: #6a7a92;
    font-size: 0.75rem;
    font-style: italic;
    flex: 1;
    min-width: 100px;
}

.achievement-item .ach-criteria {
    color: #5a6a82;
    font-size: 0.7rem;
    width: 100%;
    display: none;
    margin-top: 4px;
    padding: 4px 8px;
    background: #0a1420;
    border-radius: 4px;
}

.achievement-item .ach-criteria.show {
    display: block;
}

.achievement-item .ach-reveal-btn {
    background: #2a3a5e;
    color: #8a9bb5;
    border: none;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.achievement-item .ach-reveal-btn:hover {
    background: #3a4a6e;
    color: #e0d6b8;
}

.achievement-item .ach-reveal-btn.showing {
    background: #5a3a2a;
    color: #f0c060;
}

/* Responsive */
@media (max-width: 700px) {
    .achievement-grid {
        grid-template-columns: 1fr;
    }
    .achievement-gallery {
        padding: 16px;
        max-height: 95vh;
    }
    .achievement-gallery-header h2 {
        font-size: 1.2rem;
    }
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 260px;
    background: #0d1725;
    color: #e0d6b8;
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #2a3a5e;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.4;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Responsive */
@media (max-width: 700px) {
    .app { padding: 16px; }
    .stats-edit { grid-template-columns: 1fr 1fr; }
    .choice-grid { grid-template-columns: 1fr 1fr; }
    .stunt-grid { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .step { font-size: 0.55rem; padding: 4px 8px; }
    .progress-bar { flex-wrap: wrap; gap: 4px; justify-content: center; }
    .progress-bar::before { display: none; }
}

@media (max-width: 500px) {
    .choice-grid { grid-template-columns: 1fr; }
    .stats-edit { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .button-group { flex-direction: column; align-items: center; }
    .btn { width: 100%; max-width: 250px; }
    .step { font-size: 0.5rem; padding: 2px 6px; }
}

/* Additional styles for equipment stage */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row .form-group {
    margin-bottom: 0;
}

#stageContainer input[type="checkbox"] {
    accent-color: #f0c060;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

#stageContainer input[type="checkbox"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 700px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* --- Export Button --- */
.btn-export {
    background: #2a3a5e;
    color: white;
}
.btn-export:hover {
    background: #3a4a6e;
    transform: translateY(-2px);
}

/* --- Reset Stats Button --- */
.btn-reset {
    background: #5a2a2a;
    color: #e0d6b8;
}
.btn-reset:hover {
    background: #6a3a3a;
}

/* --- Footer --- */
footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #2a3a5e;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #0d1725;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #1a2a42;
}

.footer-cycling {
    flex: 1;
    font-size: 0.85rem;
    color: #8a9bb5;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.footer-cycling .footer-icon {
    font-size: 1.2rem;
    margin-right: 10px;
    flex-shrink: 0;
}

.footer-cycling .footer-text {
    color: #e0d6b8;
}
.footer-cycling .footer-sub {
    color: #6a7a92;
    font-size: 0.7rem;
    margin-left: 8px;
}

#footerNextBtn {
    flex-shrink: 0;
}

.portrait-upload {
    border: 3px dashed #2a3a5e;
    background: #0a1420;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5a6a82;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.portrait-upload:hover {
    border-color: #5a6a82;
    background: #0d1725;
}

.portrait-upload input[type="file"] {
    display: none;
}

/* --- Achievements on Final Sheet --- */
.achievement-badge {
    display: inline-block;
    background: #1a2a3e;
    border: 1px solid #f0c060;
    border-radius: 20px;
    padding: 4px 12px;
    margin: 2px 4px;
    font-size: 0.75rem;
    color: #f0c060;
}

/* Responsive */
@media (max-width: 600px) {
    .portrait-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Identity Layout — Two Columns */
.identity-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.identity-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.identity-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Portrait Container */
.portrait-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 200px;
}

.portrait-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0d1725;
    border-radius: 12px;
    border: 3px solid #2a3a5e;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.portrait-frame svg,
.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Full-width navigation buttons — now compact and centered */
.portrait-nav-full {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.portrait-nav-full .btn {
    padding: 4px 20px;
    font-size: 0.9rem;
    flex: 0 0 auto;
    min-width: 95px;
    text-align: center;
    border-radius: 6px;
}

/* Upload button – smaller and clean */
#uploadPortraitBtn {
    margin-top: 8px;
    width: 100%;
    padding: 6px 0;
    font-size: 0.8rem;
    border-radius: 6px;
}

/* File format note */
.portrait-container > span {
    font-size: 0.6rem;
    color: #5a6a82;
    margin-top: 4px;
    text-align: center;
}

/* Achievement Lore on Final Sheet */
.achievement-entry {
    background: #0d1725;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 6px 0;
    border: 1px solid #1a2a42;
}

.achievement-entry .ach-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.achievement-entry .ach-icon {
    font-size: 1.4rem;
}

.achievement-entry .ach-name {
    font-weight: bold;
    color: #f0c060;
}

.achievement-entry .ach-title {
    color: #8a9bb5;
    font-size: 0.85rem;
}

.achievement-entry .ach-lore {
    color: #e0d6b8;
    font-size: 0.85rem;
    margin-top: 4px;
    font-style: italic;
    border-top: 1px solid #1a2a42;
    padding-top: 4px;
}

/* Responsive */
@media (max-width: 700px) {
    .identity-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* --- Character Sheet Grid (Health + Chits + Weapons + Portrait) --- */

.sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 155px;
    grid-template-rows: auto auto;
    gap: 10px;
    margin-bottom: 12px;
    align-items: stretch;
}

.sheet-grid-item {
    background: #0d1725;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60px;
}

.sheet-grid-item h3 {
    color: #8a9bb5;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.sheet-grid-item .value {
    color: #e0d6b8;
    font-size: 1rem;
    font-weight: 500;
}

.sheet-grid-item .sub {
    color: #6a7a92;
    font-size: 0.75rem;
    font-style: italic;
}

.sheet-grid-portrait {
    background: #0d1725;
    border-radius: 5px;
    border: 2px solid #2a3a5e;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    width: 100%;
    height: 100%;
}

.sheet-grid-portrait svg,
.sheet-grid-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sheet-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
    .sheet-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        grid-template-rows: auto auto auto;
    }

    .sheet-grid-item:nth-child(1) { grid-column: 1; grid-row: 1; }
    .sheet-grid-item:nth-child(2) { grid-column: 2; grid-row: 1; }
    .sheet-grid-item:nth-child(3) { grid-column: 1; grid-row: 2; }
    .sheet-grid-item:nth-child(4) { grid-column: 2; grid-row: 2; }

    .sheet-grid-portrait {
        grid-column: 1 / -1;
        grid-row: 3;
        max-height: 120px;
        max-width: 120px;
        margin: 4px auto;
        aspect-ratio: 1 / 1;
    }
}

/* --- Free items styling --- */
.free-option {
    color: #6bcb6b !important;
}

.free-item {
    border-color: #6bcb6b !important;
}

#stageContainer select option.free-option {
    color: #6bcb6b !important;
    background-color: #1a2a3e;
}

/* Better dropdown styling */
#stageContainer select option {
    padding: 4px 8px;
}

.step.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- Header with Logo --- */
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #2a3a5e;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

.header-logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

header p {
    color: #8a9bb5;
    margin: 4px 0 16px;
    font-style: italic;
    font-size: 1rem;
}

/* --- Theme Toggle Button --- */
.btn-theme {
    background: #2a3a5e;
    color: #f0c060;
    font-size: 1.2rem;
    padding: 8px 16px;
}

.btn-theme:hover {
    background: #3a4a6e;
    transform: translateY(-2px);
}

/* --- LIGHT MODE: E-READER / OLD MAC AESTHETIC --- */
/* h309 s36 v15 = #807070 (warm taupe gray) — logo color for light mode */

body.light-mode {
color: #3a3538;

/* Light Mode Turing Pattern Background */
background-color: #f0ece6;
background-image: 
    linear-gradient(to bottom, rgba(240, 236, 230, 0) 15%, rgba(240, 236, 230, 1) 85%),
    url('./ui/bg_light.png');
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}

body.light-mode .app {
    background: #f8f4ee;
    border-color: #d0c8c0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* --- Header --- */
body.light-mode header {
    border-bottom-color: #d8d0c8;
}

body.light-mode header p {
    color: #6a6060;
}

/* --- Buttons --- */
body.light-mode .btn-create {
    background: #d0c8c0;
    color: #3a3538;
    border: 1px solid #c0b8b0;
}

body.light-mode .btn-create:hover {
    background: #e0d8d0;
}

body.light-mode .btn-random {
    background: #d0c8c0;
    color: #3a3538;
    border: 1px solid #c0b8b0;
}

body.light-mode .btn-random:hover {
    background: #e0d8d0;
}

body.light-mode .btn-primary {
    background: #d0c8c0;
    color: #3a3538;
    border: 1px solid #c0b8b0;
}

body.light-mode .btn-primary:hover {
    background: #e0d8d0;
}

body.light-mode .btn-secondary {
    background: #e8e0d8;
    color: #3a3538;
    border: 1px solid #d0c8c0;
}

body.light-mode .btn-secondary:hover {
    background: #f0ece6;
}

body.light-mode .btn-export {
    background: #d0c8c0;
    color: #3a3538;
    border: 1px solid #c0b8b0;
}

body.light-mode .btn-export:hover {
    background: #e0d8d0;
}

body.light-mode .btn-achievement {
    background: #d0c8c0;
    color: #3a3538;
    border: 1px solid #c0b8b0;
}

body.light-mode .btn-achievement:hover {
    background: #e0d8d0;
}

body.light-mode .btn-theme {
    background: #e8e0d8;
    color: #3a3538;
    border: 1px solid #d0c8c0;
}

body.light-mode .btn-theme:hover {
    background: #f0ece6;
}

body.light-mode .btn:disabled {
    opacity: 0.4;
}

/* --- Progress Bar --- */
body.light-mode .progress-bar::before {
    background: #d0c8c0;
}

body.light-mode .step {
    background: #f8f4ee;
    border-color: #d0c8c0;
    color: #6a6060;
    font-weight: 400;
}

body.light-mode .step:hover {
    border-color: #a09890;
}

body.light-mode .step.active {
    color: #3a3538;
    border-color: #3a3538;
    background: #f0ece6;
}

body.light-mode .step.completed {
    color: #3a3538;
    border-color: #3a3538;
    background: #f0ece6;
}

/* --- Stage Container --- */
body.light-mode #stageContainer {
    background: #f8f4ee;
    border-color: #d0c8c0;
}

body.light-mode .stage-content h2 {
    color: #3a3538;
    font-weight: 500;
}

body.light-mode .stage-content .subtitle {
    color: #6a6060;
}

/* --- Stats --- */
body.light-mode .stat-edit-item label {
    color: #3a3538;
}

body.light-mode .stat-edit-item select {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

body.light-mode .stat-edit-item select:focus {
    border-color: #3a3538;
}

body.light-mode .stat-edit-item .stat-preview {
    color: #3a3538;
}

body.light-mode .stat-edit-item .stat-preview.positive {
    color: #4a6a4a;
}

body.light-mode .stat-edit-item .stat-preview.negative {
    color: #8a4a4a;
}

/* --- Choice Cards --- */
body.light-mode .choice-card {
    background: #f8f4ee;
    border-color: #d0c8c0;
    border-width: 1px;
}

body.light-mode .choice-card:hover {
    border-color: #a09890;
}

body.light-mode .choice-card.selected {
    border-color: #3a3538;
    border-width: 2px;
    background: #f5f0ea;
}

body.light-mode .choice-card h4 {
    color: #3a3538;
}

body.light-mode .choice-card p {
    color: #5a5050;
}

body.light-mode .choice-card .perk {
    color: #3a3538;
}

body.light-mode .choice-card .subtype-select select {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

body.light-mode .choice-card .restriction-warning {
    color: #8a4a4a;
}

body.light-mode .choice-card .faction-select select {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

/* --- Info Boxes --- */
body.light-mode .info-box {
    background: #f5f0ea;
    border: 1px solid #d8d0c8;
}

body.light-mode .info-box h3 {
    color: #6a6060;
    letter-spacing: 0.5px;
}

body.light-mode .info-box .value {
    color: #3a3538;
}

body.light-mode .info-box .sub {
    color: #6a6060;
}

/* --- List Sections --- */
body.light-mode .list-section {
    background: #f5f0ea;
    border: 1px solid #d8d0c8;
}

body.light-mode .list-section h3 {
    color: #6a6060;
    letter-spacing: 0.5px;
}

body.light-mode .list-section ul li {
    color: #3a3538;
}

body.light-mode .list-section ul li::before {
    color: #3a3538;
}

/* --- Stats Grid (Final Sheet) --- */
body.light-mode .stats-grid {
    background: #f5f0ea;
    border: 1px solid #d8d0c8;
}

body.light-mode .stat-item {
    border-bottom-color: #e0d8d0;
}

body.light-mode .stat-item .label {
    color: #3a3538;
}

body.light-mode .stat-item .value {
    color: #3a3538;
}

body.light-mode .stat-item .value.positive {
    color: #4a6a4a;
}

body.light-mode .stat-item .value.negative {
    color: #8a4a4a;
}

/* --- Sheet Grid --- */
body.light-mode .sheet-grid-item {
    background: #f5f0ea;
    border: 1px solid #d8d0c8;
}

body.light-mode .sheet-grid-item h3 {
    color: #6a6060;
}

body.light-mode .sheet-grid-item .value {
    color: #3a3538;
}

body.light-mode .sheet-grid-item .sub {
    color: #6a6060;
}

body.light-mode .sheet-grid-portrait {
    background: #f5f0ea;
    border-color: #d8d0c8;
}

/* --- Stunts --- */
body.light-mode .stunt-category {
    background: #f5f0ea;
    border-color: #d8d0c8;
}

body.light-mode .stunt-category-header:hover {
    background: #f0ece6;
}

body.light-mode .stunt-option {
    background: #f8f4ee;
    border-color: #d8d0c8;
}

body.light-mode .stunt-option:hover {
    border-color: #a09890;
}

body.light-mode .stunt-option.selected {
    border-color: #3a3538;
    border-width: 2px;
    background: #f0ece6;
}

body.light-mode .stunt-option .stunt-name {
    color: #3a3538;
}

body.light-mode .stunt-option .stunt-desc {
    color: #5a5050;
}

/* --- Pronoun Selector --- */
body.light-mode .pronoun-option {
    background: #f8f4ee;
    border-color: #d0c8c0;
}

body.light-mode .pronoun-option:hover {
    border-color: #a09890;
}

body.light-mode .pronoun-option.selected {
    border-color: #3a3538;
    border-width: 2px;
    background: #f0ece6;
}

/* --- Portraits --- */
body.light-mode .portrait-frame {
    background: #f8f4ee;
    border-color: #d0c8c0;
}

body.light-mode .portrait-option {
    background: #f8f4ee;
    border-color: #d0c8c0;
}

body.light-mode .portrait-option:hover {
    border-color: #a09890;
}

body.light-mode .portrait-option.selected {
    border-color: #3a3538;
    border-width: 2px;
    background: #f0ece6;
}

body.light-mode .portrait-upload {
    border-color: #d0c8c0;
    background: #f8f4ee;
}

body.light-mode .portrait-upload:hover {
    border-color: #a09890;
    background: #f5f0ea;
}

/* --- Navigation --- */
body.light-mode .nav-buttons {
    border-top-color: #d8d0c8;
}

/* --- Footer --- */
body.light-mode footer {
    border-top-color: #d8d0c8;
}

body.light-mode .footer-content {
    background: #f5f0ea;
    border-color: #d8d0c8;
}

body.light-mode .footer-cycling .footer-text {
    color: #3a3538;
}

body.light-mode .footer-cycling .footer-sub {
    color: #6a6060;
}

/* --- Achievement Gallery --- */
body.light-mode #achievementOverlay {
    background: rgba(240, 236, 230, 0.92);
}

body.light-mode .achievement-gallery {
    background: #f8f4ee;
    border-color: #d0c8c0;
}

body.light-mode .achievement-gallery-header {
    border-bottom-color: #d8d0c8;
}

body.light-mode .achievement-gallery-header h2 {
    color: #3a3538;
}

body.light-mode .achievement-gallery-header .close-btn {
    background: #e8e0d8;
    color: #3a3538;
    border: 1px solid #d0c8c0;
}

body.light-mode .achievement-gallery-header .close-btn:hover {
    background: #f0ece6;
}

body.light-mode .achievement-stats {
    background: #f5f0ea;
    border-color: #d8d0c8;
}

body.light-mode .achievement-stats .stat {
    color: #5a5050;
}

body.light-mode .achievement-stats .stat span {
    color: #3a3538;
}

body.light-mode .achievement-stats .stat .unlocked {
    color: #4a6a4a;
}

body.light-mode .achievement-stats .stat .locked {
    color: #6a6060;
}

body.light-mode .achievement-item {
    background: #f8f4ee;
    border-color: #d8d0c8;
}

body.light-mode .achievement-item.unlocked {
    border-color: #3a3538;
    border-width: 2px;
    background: #f0ece6;
}

body.light-mode .achievement-item .ach-name {
    color: #3a3538;
}

body.light-mode .achievement-item .ach-title {
    color: #5a5050;
}

body.light-mode .achievement-item .ach-hint {
    color: #6a6060;
}

body.light-mode .achievement-item .ach-status.unlocked {
    color: #4a6a4a;
    border-color: #4a6a4a;
}

body.light-mode .achievement-item .ach-status.locked {
    color: #6a6060;
    border-color: #a09890;
}

body.light-mode .achievement-item.locked .ach-name {
    color: #6a6060;
}

body.light-mode .achievement-item.locked .ach-title {
    color: #6a6060;
}

body.light-mode .achievement-item .ach-reveal-btn {
    background: #e8e0d8;
    color: #3a3538;
    border: 1px solid #d0c8c0;
}

body.light-mode .achievement-item .ach-reveal-btn:hover {
    background: #f0ece6;
}

body.light-mode .achievement-item .ach-reveal-btn.showing {
    background: #d0c8c0;
    color: #3a3538;
}

body.light-mode .achievement-item .ach-criteria {
    background: #f0ece6;
}

body.light-mode .achievement-entry {
    background: #f5f0ea;
    border-color: #d8d0c8;
}

body.light-mode .achievement-entry .ach-name {
    color: #3a3538;
}

body.light-mode .achievement-entry .ach-title {
    color: #5a5050;
}

body.light-mode .achievement-entry .ach-lore {
    color: #3a3538;
    border-top-color: #d8d0c8;
}

/* --- Character Sheet --- */
body.light-mode #characterSheet {
    border-top-color: #d8d0c8;
}

body.light-mode .character-card h2 {
    color: #3a3538;
}

body.light-mode .character-card .subtitle {
    color: #5a5050;
}

/* --- Form Elements --- */
body.light-mode .form-group label {
    color: #3a3538;
}

body.light-mode .form-group input {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

body.light-mode .form-group input:focus {
    border-color: #3a3538;
}

body.light-mode .form-group select {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

body.light-mode .form-group select:focus {
    border-color: #3a3538;
}

/* --- Equipment Stage --- */
body.light-mode #stageContainer input[type="checkbox"] {
    accent-color: #3a3538;
}

body.light-mode .free-option {
    color: #4a6a4a !important;
}

body.light-mode .free-item {
    border-color: #4a6a4a !important;
}

/* --- Tooltip --- */
body.light-mode .tooltip .tooltip-text {
    background: #f8f4ee;
    color: #3a3538;
    border-color: #d0c8c0;
}

/* --- Stage 2: Kin — Stats Preview Box --- */
body.light-mode .stage-content .current-stats-box {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .stage-content .current-stats-box p {
    color: #6a6060 !important;
}

body.light-mode .stage-content .current-stats-box div div {
    color: #5a5050 !important;
}

body.light-mode .stage-content .current-stats-box .hp-text {
    color: #3a3538 !important;
}

/* --- Stage 6: Gear — Backpack & Inventory --- */
body.light-mode .list-section {
    background: #f5f0ea !important;
    border: 1px solid #d8d0c8 !important;
}

body.light-mode .list-section ul li {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .list-section ul li .free-badge {
    color: #4a6a4a !important;
}

body.light-mode .list-section ul li .chits-cost {
    color: #6a6060 !important;
}

body.light-mode .list-section ul li .locked-badge {
    color: #6a6060 !important;
}

/* --- Stage 6: Gear — Shop Section --- */
body.light-mode .shop-container {
    background: transparent !important;
}

body.light-mode .shop-container .shop-item {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .shop-container .shop-item.owned {
    border-color: #4a6a4a !important;
}

body.light-mode .shop-container .shop-item .item-name {
    color: #3a3538 !important;
}

body.light-mode .shop-container .shop-item .item-cost {
    color: #3a3538 !important;
}

body.light-mode .shop-container .shop-item .item-desc {
    color: #5a5050 !important;
}

body.light-mode .shop-container h4 {
    color: #6a6060 !important;
}

body.light-mode .shop-toggle {
    color: #3a3538 !important;
    border-top-color: #d8d0c8 !important;
}

body.light-mode .shop-toggle span {
    color: #6a6060 !important;
}

/* --- Stage 7: Name — Suggestion Box --- */
body.light-mode .suggestion-box {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .suggestion-box p {
    color: #6a6060 !important;
}

body.light-mode .suggestion-box .suggested-name {
    background: #f0ece6 !important;
    border-color: #d8d0c8 !important;
    color: #3a3538 !important;
}

body.light-mode .suggestion-box .suggested-name:hover {
    background: #e8e0d8 !important;
    border-color: #a09890 !important;
}

/* --- Stage 6: Gear — Info Boxes in Equipment Stage --- */
body.light-mode .equipment-info-box {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .equipment-info-box h3 {
    color: #6a6060 !important;
}

body.light-mode .equipment-info-box .value {
    color: #3a3538 !important;
}

body.light-mode .equipment-info-box .sub {
    color: #6a6060 !important;
}

body.light-mode .equipment-info-box .free-tag {
    color: #4a6a4a !important;
}

/* --- Stage 6: Gear — Chits Display Box --- */
body.light-mode .chits-box {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .chits-box .chits-total {
    color: #3a3538 !important;
}

body.light-mode .chits-box .chits-spent {
    color: #8a4a4a !important;
}

body.light-mode .chits-box .chits-remaining {
    color: #4a6a4a !important;
}

body.light-mode .chits-box .chits-label {
    color: #6a6060 !important;
}

body.light-mode .chits-box .discount-badge {
    color: #4a6a4a !important;
}

/* --- Stage 6: Gear — Bestial Proxy Warning --- */
body.light-mode .bestial-warning {
    background: #f5f0ea !important;
    border-color: #8a4a4a !important;
}

body.light-mode .bestial-warning p {
    color: #8a4a4a !important;
}

body.light-mode .bestial-warning .desc {
    color: #5a5050 !important;
}

/* --- Stage 6: Gear — Buy Section --- */
body.light-mode .buy-section {
    background: transparent !important;
}

body.light-mode .buy-section .buy-item {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .buy-section .buy-item.owned {
    border-color: #4a6a4a !important;
}

body.light-mode .buy-section .buy-item .buy-name {
    color: #3a3538 !important;
}

body.light-mode .buy-section .buy-item .buy-cost {
    color: #3a3538 !important;
}

body.light-mode .buy-section .buy-item .buy-desc {
    color: #5a5050 !important;
}

body.light-mode .buy-section h4 {
    color: #6a6060 !important;
}

/* Stage 2: Kin — Stats Preview (inline background:#0d1725) */
body.light-mode #stageContainer > div > div:last-child {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode #stageContainer > div > div:last-child p {
    color: #6a6060 !important;
}

body.light-mode #stageContainer > div > div:last-child div div {
    color: #3a3538 !important;
}

body.light-mode #stageContainer > div > div:last-child p[style] {
    color: #3a3538 !important;
}

/* Stage 6: Gear — Chits Display (inline color:#f0c060) */
body.light-mode .stage-content .info-box span[style*="color:#f0c060"] {
    color: #3a3538 !important;
}

body.light-mode .stage-content .info-box strong[style*="color:#f0c060"] {
    color: #3a3538 !important;
}

/* Stage 6: Gear — "Buy Gear" Header (inline color:#f0c060) */
body.light-mode .stage-content h3[style*="color:#f0c060"] {
    color: #3a3538 !important;
}

/* Stage 6: Gear — Chits Box (inline background:#0d1725) */
body.light-mode .stage-content .info-box[style*="background:#0d1725"] {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

/* Stage 6: Gear — Shop Items (inline background:#0d1725) */
body.light-mode .stage-content div[style*="background:#0d1725"] {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"] strong {
    color: #3a3538 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"] span[style*="color:#f0c060"] {
    color: #3a3538 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"] div[style*="color:#8a9bb5"] {
    color: #5a5050 !important;
}

/* Stage 6: Gear — Shop item containers */
body.light-mode .stage-content .buy-item {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .stage-content .buy-item.owned {
    border-color: #4a6a4a !important;
}

/* Stage 6: Gear — Bestial Proxy Warning */
body.light-mode .stage-content .info-box[style*="border-left:3px solid #cb6b6b"] {
    background: #f5f0ea !important;
}

body.light-mode .stage-content .info-box[style*="border-left:3px solid #cb6b6b"] p {
    color: #8a4a4a !important;
}

/* Stage 6: Gear — Re-roll Chits button container */
body.light-mode .stage-content .info-box[style*="border-left:3px solid #f0c060"] {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

/* Stage 7: Name — Suggestion Box (inline background:#0d1725) */
body.light-mode .stage-content div[style*="background:#0d1725"]:last-child {
    background: #f5f0ea !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"]:last-child p {
    color: #6a6060 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"]:last-child span {
    background: #f0ece6 !important;
    border-color: #d8d0c8 !important;
    color: #3a3538 !important;
}

body.light-mode .stage-content div[style*="background:#0d1725"]:last-child span:hover {
    background: #e8e0d8 !important;
    border-color: #a09890 !important;
}

/* Stage 6: Gear — Backpack items (inline background:#152035) */
body.light-mode .stage-content li[style*="background:#152035"] {
    background: #f8f4ee !important;
    border-color: #d8d0c8 !important;
}

body.light-mode .stage-content li[style*="background:#152035"] strong {
    color: #3a3538 !important;
}

body.light-mode .stage-content li[style*="background:#152035"] span[style*="color:#6bcb6b"] {
    color: #4a6a4a !important;
}

body.light-mode .stage-content li[style*="background:#152035"] span[style*="color:#8a9bb5"] {
    color: #6a6060 !important;
}

/* Stage 6: Gear — Shop item descriptions */
body.light-mode .stage-content div[style*="font-size:0.7rem;color:#8a9bb5;"] {
    color: #5a5050 !important;
}

/* Stage 6: Gear — Owned button (disabled) */
body.light-mode .stage-content button[disabled] {
    background: #e8e0d8 !important;
    color: #6a6060 !important;
    border-color: #d8d0c8 !important;
}

/* --- Lore / Rulebook Tooltips --- */
.lore-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
    text-decoration: underline dotted #f0c060;
    text-underline-offset: 3px;
}
.lore-wrapper:hover .lore-text {
    visibility: visible;
    opacity: 1;
}
.lore-text {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background: #2a201a; /* Dark parchment */
    color: #e0d6b8;
    text-align: left;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #f0c060;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 0.75rem;
    line-height: 1.5;
    font-style: italic;
    font-weight: normal;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    pointer-events: none;
}
.lore-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #f0c060 transparent transparent transparent;
}
/* Light Mode Support */
body.light-mode .lore-wrapper { text-decoration: underline dotted #a08a60; }
body.light-mode .lore-text { background: #f5f0ea; color: #3a3538; border-color: #a08a60; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
body.light-mode .lore-text::after { border-color: #a08a60 transparent transparent transparent; }