/* Eternal Respite CYOA - void and aurora aesthetic */

:root {
    --color-bg: #0d1525;
    --color-bg-soft: #131c30;
    --color-bg-elevated: #1a2540;
    --color-text: #e6e3da;
    --color-text-muted: #95a0b6;
    --color-accent: #d4b06a;
    --color-accent-soft: #b8985a;
    --color-accent-deep: #8d7240;
    --color-aurora-purple: #7a4eb5;
    --color-aurora-blue: #4a8fb5;
    --color-aurora-green: #5fb59a;
    --color-aurora-pink: #b56a8e;
    --color-border: #2c3a5a;
    --color-border-soft: #1f2a45;
    --color-selected: #243454;
    --color-selected-border: #d4b06a;
}

/* Page background: deep void with a tiled starfield (no big aurora gradients —
   that's a tell of vibe-coded design). The starfield gives texture without
   the "gradient everything" look. */
body {
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><circle cx='30' cy='42' r='0.75' fill='%23e6e3da' opacity='0.55'/><circle cx='86' cy='26' r='0.4' fill='%23e6e3da' opacity='0.4'/><circle cx='148' cy='62' r='0.65' fill='%23d4b06a' opacity='0.5'/><circle cx='192' cy='37' r='0.5' fill='%23e6e3da' opacity='0.45'/><circle cx='52' cy='114' r='0.5' fill='%23e6e3da' opacity='0.5'/><circle cx='118' cy='94' r='0.75' fill='%23e6e3da' opacity='0.55'/><circle cx='180' cy='130' r='0.4' fill='%23d4b06a' opacity='0.4'/><circle cx='30' cy='168' r='0.6' fill='%23e6e3da' opacity='0.5'/><circle cx='100' cy='190' r='0.4' fill='%23e6e3da' opacity='0.4'/><circle cx='162' cy='200' r='0.5' fill='%23e6e3da' opacity='0.45'/><circle cx='208' cy='160' r='0.55' fill='%23e6e3da' opacity='0.4'/><circle cx='8' cy='100' r='0.45' fill='%23e6e3da' opacity='0.35'/></svg>");
    background-attachment: fixed;
    background-repeat: repeat;
    color: var(--color-text);
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.7;
}

/* Floating navigation menu — override the default white background */
.navigation-menu {
    background: var(--color-bg-soft) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

.navigation-menu .nav-header {
    background: rgba(212, 176, 106, 0.05);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-accent);
}

.navigation-menu .nav-section-title,
.navigation-menu .nav-content {
    color: var(--color-text);
}

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

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

/* Header — solid, no blur (avoids glassmorphism AI pattern) */
.cyoa-header {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
}

.cyoa-header h1 {
    color: var(--color-accent);
    font-weight: normal;
    letter-spacing: 0.05em;
    font-variant: small-caps;
}

/* Navigation */
.nav-menu {
    background-color: var(--color-bg-soft);
    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 — solid background, sharp corners (rounded corners are an
   AI design tell). Decorated with corner flourishes instead of radius. */
.section {
    background-color: rgba(19, 28, 48, 0.85);
    border: 1px solid var(--color-border);
    border-radius: 0;
    margin-bottom: 2rem;
    position: relative;
}

/* Decorative classical corner marks at top-left and top-right of each
   section. Avoids the AI "card with colored top stripe" pattern by using a
   small, asymmetric flourish instead of a uniform border treatment. */
.section::before,
.section::after {
    content: '';
    position: absolute;
    top: -1px;
    width: 24px;
    height: 16px;
    pointer-events: none;
    opacity: 0.5;
}
.section::before {
    left: -1px;
    border-top: 2px solid var(--color-accent-soft);
    border-left: 2px solid var(--color-accent-soft);
}
.section::after {
    right: -1px;
    border-top: 2px solid var(--color-accent-soft);
    border-right: 2px solid var(--color-accent-soft);
}

/* Section titles use small-caps as a classical Athena nod — kept here
   intentionally as a single distinctive element, NOT applied uniformly to
   every heading (which would read as the AI "all-caps section labels"
   pattern). */
.section-title {
    color: var(--color-accent);
    font-weight: normal;
    font-size: 1.7rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-variant: small-caps;
    letter-spacing: 0.04em;
}

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

.info-box {
    color: var(--color-text);
}

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

.section-image img {
    border-radius: 0;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Element group default */
.element-group {
    margin: 1.25rem 0;
}

.element-group h3 {
    color: var(--color-accent-soft);
    font-weight: normal;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.group-description {
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 0.75rem;
}

/* Entry cards — no border, no rounded corners. The border on the
   surrounding section/group provides the visual frame; cards inside
   distinguish themselves by background color and spacing. Avoids the
   AI "card with rounded corners and colored border" pattern. */
.choice-item,
.option-item {
    background-color: rgba(26, 37, 64, 0.55);
    border: none;
    border-radius: 0;
    transition: background-color 0.15s;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    flex: 0 1 320px;
    min-width: 280px;
    max-width: 380px;
}

/* Tag-cluster cards override to a tighter width — the spec explicitly
   allows tags to be different. See tag-cluster section below. */

.choice-item:hover,
.option-item:hover {
    background-color: rgba(36, 52, 84, 0.75);
}

/* Selected state uses a left-edge accent stripe (legitimate use — this is
   selection feedback on a stateful element, not a structural decoration on
   every card). Plus a slightly stronger background. */
.choice-item.selected,
.option-item.selected {
    background-color: var(--color-selected);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

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

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

.choice-item.disabled-choice,
.option-item.disabled-choice {
    opacity: 0.45;
    cursor: not-allowed;
}

.choice-item.disabled-choice:hover,
.option-item.disabled-choice:hover {
    background-color: rgba(26, 37, 64, 0.55);
}

/* Entry images */
.entry-image img {
    border-radius: 0;
    border: 1px solid var(--color-border-soft);
}

/* Tier-set / tag-cluster color overrides.
 * Structural defaults live in shared/cyoa-base-styles.css. Respite just
 * recolors them to match the void-and-gold theme. */
.element-group.tier-set {
    border-color: var(--color-border);
    background: rgba(20, 30, 50, 0.35);
}

.element-group.tier-set .option-item:not(:first-of-type)::before,
.element-group.tier-set .choice-item:not(:first-of-type)::before {
    color: var(--color-accent-soft);
    opacity: 1;
}

.element-group.tag-cluster {
    border-color: var(--color-accent-soft);
    background: rgba(20, 30, 50, 0.35);
}

.element-group.tag-cluster .group-image img {
    border: 1px solid var(--color-border);
}

/* ============================================
   PER-GROUP TUNING
   ============================================ */

/* All non-tag, non-tier groups use the standard flex layout from the base
   .option-item / .choice-item rule above (320px width). Room style, amenities,
   single-entry misc groups, and the basic 2-card portal/walk groups all
   render at the same size. Layout consistency across the CYOA. */

/* Resource display in header */
.resource-display {
    background-color: rgba(19, 28, 48, 0.7);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
}

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

/* Effect indicators */
.destiny-indicator {
    background-color: rgba(20, 30, 50, 0.6);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 3px;
}

.destiny-indicator.effect-positive {
    color: var(--color-aurora-green);
    border-color: rgba(95, 181, 154, 0.4);
}

.destiny-indicator.effect-negative {
    color: var(--color-aurora-pink);
    border-color: rgba(181, 106, 142, 0.4);
}

.destiny-indicator.effect-special {
    color: var(--color-accent);
    border-color: var(--color-accent-deep);
}

.requirements-indicator {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Footer */
.cyoa-footer {
    background-color: rgba(13, 21, 37, 0.6);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.cyoa-footer a {
    color: var(--color-accent);
}

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

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

.back-link {
    color: var(--color-text-muted);
}

.back-link:hover {
    color: var(--color-accent);
}

/* Buttons */
button, .btn {
    background-color: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 3px;
    transition: all 0.2s ease;
}

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

/* Section minimize toggles */
.section-minimize-toggle {
    color: var(--color-text-muted);
}

.section-minimize-toggle:hover {
    color: var(--color-accent);
}

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

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

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

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

/* Bottom character-sheet bar — for this CYOA the user only ever sees a
   Respite Points counter, nothing to expand. Lock it to the minimized
   resource-bar form, hide the expand button, and give it a background
   so the bar text doesn't float on the page background. */
.character-sheet {
    background-color: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

.character-sheet .character-sheet-toggle,
.character-sheet .character-sheet-header h3,
.character-sheet .character-stats {
    display: none !important;
}

.character-sheet .meta-resources-summary {
    display: flex !important;
    gap: 1.5rem;
    padding: 0.4rem 0;
    color: var(--color-text);
}

.character-sheet .meta-resource-label {
    color: var(--color-text-muted);
    margin-right: 0.4rem;
}

.character-sheet .meta-resource-value {
    color: var(--color-accent);
    font-weight: bold;
}

/* Inline colored text classes for descriptions */
.t-aurora { color: var(--color-aurora-purple); }
.t-spring { color: var(--color-aurora-blue); }
.t-portal { color: var(--color-aurora-green); }
.t-time { color: var(--color-aurora-pink); }
.t-warning { color: var(--color-accent); }
.t-divine { color: var(--color-accent); font-style: italic; }