/* Comfy Backpack CYOA - Warm outdoor/scout aesthetic */

:root {
    --color-bg: #f5f0e6;
    --color-bg-dark: #e8e0d0;
    --color-text: #3d3529;
    --color-text-muted: #6b6052;
    --color-accent: #5d7a3d;
    --color-accent-light: #7a9d52;
    --color-accent-warm: #c17f3a;
    --color-border: #d4c9b5;
    --color-selected: #e8f0dc;
    --color-selected-border: #7a9d52;
    --color-canvas: #c9b896;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    /* Subtle canvas texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c9b896' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Header styling */
.cyoa-header {
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg) 100%);
    border-bottom: 2px solid var(--color-accent);
}

.cyoa-header h1 {
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Navigation */
.nav-menu {
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
}

.nav-menu a {
    color: var(--color-text);
}

.nav-menu a:hover {
    background-color: var(--color-selected);
    color: var(--color-accent);
}

/* Sections */
.section {
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-title {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1.6rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.section-description {
    color: var(--color-text);
    font-size: 1rem;
}

/* Section header image */
.section-image {
    margin-bottom: 1rem;
}

.section-image img {
    border-radius: 8px;
    max-height: 300px;
    object-fit: cover;
}

/* Element groups */
.element-group {
    margin-bottom: 1.5rem;
}

.element-group-title {
    color: var(--color-accent-warm);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--color-border);
}

/* Options container - default grid */
.choices-container.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Entry cards - warm outdoor feel */
.choice-item,
.option-item {
    background-color: rgba(255, 255, 255, 0.85);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.2s ease;
    padding: 0.75rem;
}

.choice-item:hover,
.option-item:hover {
    border-color: var(--color-accent-light);
    box-shadow: 0 3px 10px rgba(93, 122, 61, 0.15);
    transform: translateY(-1px);
}

.choice-item.selected,
.option-item.selected {
    background-color: var(--color-selected);
    border-color: var(--color-selected-border);
    box-shadow: 0 0 0 3px rgba(122, 157, 82, 0.2);
}

.choice-item h3,
.option-item h3 {
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.choice-item.selected h3,
.option-item.selected h3 {
    color: var(--color-accent);
}

.choice-item p,
.option-item p {
    color: var(--color-text);
    font-size: 0.9rem;
}

/* Entry images */
.entry-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Disabled state */
.choice-item.disabled-choice,
.option-item.disabled-choice {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid layout for upgrade groups */
.grid-container {
    display: grid;
    gap: 0.75rem;
}

.grid-container .option-item {
    padding: 0.5rem;
}

.grid-container .option-item h3 {
    font-size: 0.95rem;
}

.grid-container .option-item p {
    font-size: 0.85rem;
}

/* Upgrade entries - smaller, subtle */
.upgrade-entry {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px dashed var(--color-border);
    font-size: 0.9rem;
}

.upgrade-entry.selected {
    background-color: var(--color-selected);
    border-style: solid;
    border-color: var(--color-accent-light);
}

/* Base item entries - slightly larger/emphasized */
.base-item {
    border-width: 2px;
}

.base-item h3 {
    font-size: 1.1rem;
}

/* Resource display */
.resource-display {
    background-color: var(--color-bg-dark);
    border: 2px solid var(--color-accent);
    border-radius: 6px;
    color: var(--color-text);
    padding: 0.5rem 1rem;
}

.resource-value {
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Character sheet */
.character-sheet {
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.character-sheet h3 {
    color: var(--color-accent);
}

/* Footer */
.cyoa-footer {
    background-color: var(--color-bg-dark);
    border-top: 2px solid var(--color-accent);
    color: var(--color-text-muted);
}

/* Links */
a {
    color: var(--color-accent);
}

a:hover {
    color: var(--color-accent-light);
}

/* Buttons */
button, .btn {
    background-color: var(--color-bg-dark);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

button:hover, .btn:hover {
    background-color: var(--color-accent);
    color: white;
}

/* Backpack style choices - single row */
.group-choose-your-pack .choices-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
}

.group-choose-your-pack .choice-item {
    flex: 1;
    max-width: 200px;
    text-align: center;
}

.group-choose-your-pack .entry-image img {
    height: 120px;
    object-fit: cover;
}

/* Generic upgrades - 2 column grid */
.group-bag-upgrades .choices-container.options-container {
    grid-template-columns: repeat(4, 1fr);
}

/* Item grids - tighter layout */
.group-food-drink .grid-container,
.group-rest-shelter .grid-container,
.group-light-reading .grid-container,
.group-hygiene-health .grid-container,
.group-tools-records .grid-container {
    gap: 0.5rem;
}

/* Colored text utilities */
.t-cozy {
    color: var(--color-accent-warm);
}

.t-scout {
    color: var(--color-accent);
}

.t-muted {
    color: var(--color-text-muted);
    font-style: italic;
}

.t-emphasis {
    font-weight: 600;
}

.t-positive {
    color: #4a8c3f;
}

.t-number {
    color: var(--color-accent-warm);
    font-weight: 600;
}

/* Dark mode text colors */
body.dark-mode .t-positive {
    color: #6db35f;
}

/* Scout badge style for costs */
.entry-effects {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Hide minimize toggles for cleaner look */
.section-minimize-toggle,
.section-bottom-controls {
    display: none !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-light);
}

/* Introduction section - narrator image floats right */
.section:first-of-type .section-image {
    float: right;
    width: 500px;
    margin: 0 0 1rem 1.5rem;
}

.section:first-of-type .section-content .info-box {
    overflow: visible;
}

.section:first-of-type .element-group {
    clear: both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .group-choose-your-pack .choices-container {
        flex-wrap: wrap;
    }

    .group-choose-your-pack .choice-item {
        max-width: 45%;
    }

    .group-bag-upgrades .choices-container.options-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DARK MODE - Warm outdoor aesthetic in darker tones
   ============================================================ */
body.dark-mode {
    --color-bg: #1a1815;
    --color-bg-dark: #12100e;
    --color-text: #e8e4dc;
    --color-text-muted: #9a9488;
    --color-accent: #7a9d52;
    --color-accent-light: #8fb366;
    --color-accent-warm: #d49245;
    --color-border: #3d3830;
    --color-selected: #2a3320;
    --color-selected-border: #7a9d52;
    --color-canvas: #2a2520;

    background-color: var(--color-bg);
    color: var(--color-text);
    /* Dark canvas texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232a2520' fill-opacity='0.3'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Dark mode header */
body.dark-mode .cyoa-header {
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg) 100%);
}

/* Dark mode sections */
body.dark-mode .section {
    background-color: rgba(30, 28, 24, 0.9);
    border-color: var(--color-border);
}

/* Dark mode entries */
body.dark-mode .choice-item,
body.dark-mode .option-item {
    background-color: rgba(30, 28, 24, 0.95);
    border-color: var(--color-border);
}

body.dark-mode .choice-item:hover,
body.dark-mode .option-item:hover {
    border-color: var(--color-accent-light);
}

body.dark-mode .choice-item.selected,
body.dark-mode .option-item.selected {
    background-color: var(--color-selected);
    border-color: var(--color-selected-border);
}

/* Dark mode images - warm background for transparent edges */
body.dark-mode .entry-image img,
body.dark-mode .section-image img {
    background-color: #FEFDF1;
}

/* Dark mode upgrade entries */
body.dark-mode .upgrade-entry {
    background-color: rgba(25, 23, 20, 0.9);
}

body.dark-mode .upgrade-entry.selected {
    background-color: var(--color-selected);
}

/* Dark mode navigation */
body.dark-mode .nav-menu {
    background-color: var(--color-bg-dark);
    border-color: var(--color-border);
}

body.dark-mode .nav-menu a:hover {
    background-color: var(--color-selected);
}

/* Dark mode resource display */
body.dark-mode .resource-display {
    background-color: var(--color-bg-dark);
    border-color: var(--color-accent);
}

/* Dark mode character sheet */
body.dark-mode .character-sheet {
    background-color: var(--color-bg-dark);
    border-color: var(--color-border);
}

/* Dark mode footer */
body.dark-mode .cyoa-footer {
    background-color: var(--color-bg-dark);
}

/* Dark mode buttons */
body.dark-mode button,
body.dark-mode .btn {
    background-color: var(--color-bg-dark);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

body.dark-mode button:hover,
body.dark-mode .btn:hover {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

/* Dark mode scrollbar */
body.dark-mode::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-light);
}

/* Dark mode modals */
body.dark-mode .export-popup-overlay {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .export-popup-content,
body.dark-mode .save-load-modal-body {
    background: var(--color-bg-dark);
    color: var(--color-text);
    border-color: var(--color-border);
}

body.dark-mode .save-slot {
    background: var(--color-bg);
    border-color: var(--color-border);
}

body.dark-mode .navigation-menu {
    background: var(--color-bg-dark);
    border-color: var(--color-border);
}

body.dark-mode .nav-header {
    background: var(--color-bg);
    border-color: var(--color-border);
}

/* Dark mode grid */
body.dark-mode .grid-group-container {
    background: rgba(20, 18, 15, 0.95);
}