/* Google Fonts Import - Fallback for Firefox fingerprinting protection */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');

:root {
    --bg-color: #121212;
    --sidebar-bg: #0f0f0f;
    --text-color: #e0e0e0;
    --accent-color: #c9a227;
    --card-text: #222;
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Cinzel', serif;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    height: 100%;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}

#sidebar h2 {
    border-bottom: none;
    margin-bottom: 0;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Sidebar Toggle Button */
#sidebar-toggle {
    background: transparent;
    border: 1px solid #444;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    transition: background 0.2s;
}

#sidebar-toggle:hover {
    background: #333;
}

/* Main Sidebar */
#sidebar {
    width: 300px;
    background-color: var(--sidebar-bg);
    padding: 2rem;
    border-right: 1px solid #333;
    overflow-y: auto;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.stat-item {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #1a1a1a;
    border-radius: 4px;
    border: 1px solid #333;
}

.stat-label {
    font-weight: 600;
    color: #bbb;
}

.stat-value {
    color: var(--accent-color);
    font-family: monospace;
    font-size: 1.1rem;
}

.delta {
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.delta.pos {
    color: #4caf50;
}

.delta.neg {
    color: #f44336;
}

/* Stats Specifics - Colored Labels & Values */
.stat-item[data-stat="suffer"] .stat-label,
.stat-item[data-stat="suffer"] .stat-value {
    color: #ff9800;
}

.stat-item[data-stat="love"] .stat-label,
.stat-item[data-stat="love"] .stat-value {
    color: #ff4081;
}

.stat-item[data-stat="appeal"] .stat-label,
.stat-item[data-stat="appeal"] .stat-value {
    color: #69f0ae;
}

.stat-item[data-stat="virtue"] .stat-label,
.stat-item[data-stat="virtue"] .stat-value {
    color: #40c4ff;
}

.stat-item[data-stat="exotic"] .stat-label,
.stat-item[data-stat="exotic"] .stat-value {
    color: #e040fb;
}

.stat-item[data-stat="debt"] .stat-label,
.stat-item[data-stat="debt"] .stat-value {
    color: #ff5252;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}

.stat-item[data-stat="years"] .stat-label,
.stat-item[data-stat="years"] .stat-value {
    color: #ff5252;
}

.stat-item[data-stat="incomeWeekly"] .stat-label,
.stat-item[data-stat="incomeWeekly"] .stat-value {
    color: #81c784;
}

.stat-item[data-stat="incomeYearly"] .stat-label,
.stat-item[data-stat="incomeYearly"] .stat-value {
    color: #4caf50;
}

.stat-item[data-stat="risk"] .stat-label,
.stat-item[data-stat="risk"] .stat-value {
    color: #ffeb3b;
}

.stat-item[data-stat="secrets"] .stat-label,
.stat-item[data-stat="secrets"] .stat-value {
    color: #ffffff;
}

/* Desktop Collapsed */
#sidebar.collapsed-desktop {
    width: 70px;
    padding: 2rem 0.5rem;
    overflow: visible;
    /* Allow tooltips to show */
}

#sidebar.collapsed-desktop h2 {
    display: none;
}

#sidebar.collapsed-desktop .stat-label {
    display: none;
}

#sidebar.collapsed-desktop .stat-item {
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.5rem 0;
}

#sidebar.collapsed-desktop .stat-value {
    font-size: 0.9rem;
}

#sidebar.collapsed-desktop .delta {
    display: none;
}

#sidebar.collapsed-desktop .sidebar-header {
    justify-content: center;
}

/* Sidebar compact currency */
.val-short {
    display: none;
}

.val-full {
    display: inline;
}

#sidebar.collapsed-desktop .val-short {
    display: inline;
}

#sidebar.collapsed-desktop .val-full {
    display: none;
}

/* Main Content */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    overflow-y: auto;
    background: radial-gradient(circle at center, #2e2e2e 0%, #121212 100%);
    transition: padding-bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#story-container,
.story-container {
    max-width: 900px;
    margin: 0 auto 2rem auto;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: left;
    color: #eee;
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

#story-container p,
.story-container p {
    margin-right: auto;
}

#story-container,
.story-container {
    padding: 2rem;
}

#story-container:empty,
.story-container:empty {
    display: none;
}

.page-title {
    font-family: var(--font-heading);
    color: var(--accent-color);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

/* Choice Dividers - Text separators between categories */
.choice-divider {
    grid-column: 1 / -1;
    margin: 2rem 0;
}

.choice-divider .story-container {
    margin: 0 auto;
}

/* Choices Container - Column Layout */
#choices-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1700px;
    /* Increased to allow 5 items (5*300 + 4*24 = 1596) */
    width: 100%;
    margin: 0 auto;
    padding-bottom: 6rem;
}

/* Internal Grid for Cards */
.choices-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
    margin: 0 auto 0 auto;
    /* Center the grid itself */
    max-width: 100%;
    /* transition: max-width 0.3s ease; Removed transition for smoother resize */
}

.choice-wrapper.unavailable {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
    border-color: #333;
}

/* Forced 3-column layout (e.g. for 6 items) */
.choices-grid.force-3-cols {
    max-width: 1050px;
    /* 3 * 300 + 2 * 24 = 948px. 1050 provides margins. Forces 4th item to wrap. */
}

/* Action Area for Continue Button & Instant Actions */
#action-area,
#instant-actions-area {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 1.25rem;
    /* Adjusted space between items (was 1.5rem) */
}

/* Secret Selling Buttons - Responsive Grid Layout */
.choice-button.secret-btn {
    /* Mobile First: Stacked (1 column) */
    flex: 1 1 100%;
    min-width: unset;
    /* Override default min-width: 300px */
    max-width: 100%;
    /* Allow full width on mobile */
    padding: 0.8rem;
    margin: 0;
    /* Gap handles spacing */
    font-size: 1rem;
    display: inline-flex;
    /* Override display: block */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* Include padding in width */
}

/* Tablet/Small Desktop: 2x2 Grid */
@media (min-width: 600px) {
    .choice-button.secret-btn {
        /* Calculation: (100% - 1 gap) / 2 */
        /* Gap is 1.25rem. Per item reduction: 1.25rem / 2 = 0.625rem */
        flex: 1 1 calc(50% - 0.625rem);
        max-width: calc(50% - 0.625rem);
    }
}

/* Wide Desktop: 4x1 Grid (Single Row) */
@media (min-width: 1200px) {
    .choice-button.secret-btn {
        /* Calculation: (100% - 3 gaps) / 4 */
        /* Total gap: 1.25rem * 3 = 3.75rem. Per item reduction: 3.75rem / 4 = 0.9375rem */
        flex: 1 1 calc(25% - 0.9375rem);
        max-width: calc(25% - 0.9375rem);
    }
}

/* Wrapper for the whole choice unit */
.choice-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    /* Wider envelope for text */
    flex-shrink: 0;
    max-width: 100%;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
    border-radius: 12px;
}

.choice-wrapper:hover {
    transform: translateY(-8px);
}

/* Horizontal Layout Variant */
.choice-wrapper.horizontal {
    flex-direction: row;
    width: 100%;
    max-width: 800px;
    /* Limit width for readability */
    align-items: center;
    text-align: left;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    /* Slight background to unify */
}

.choice-wrapper.horizontal .card-visual {
    margin-right: 2rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.choice-wrapper.horizontal .choice-text-block {
    text-align: left;
    flex: 1;
    padding: 0;
    /* Reset padding as we have wrapper padding */
}

.choice-wrapper.horizontal .choice-text-block h3 {
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Selected State (Unified) - Gradient Glow */
.choice-wrapper.selected {
    position: relative;
}

.choice-wrapper.selected::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(201, 162, 39, 0.3) 0%, transparent 60%);
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}

.choice-wrapper.selected .choice-text-block {
    position: relative;
    z-index: 1;
}

.choice-wrapper.selected .card-visual,
.choice-wrapper.selected:hover .card-visual {
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(201, 162, 39, 0.8));
    position: relative;
    z-index: 1;
}

/* For mobile horizontal layout, gradient comes from the right */
@media (max-width: 768px) {
    .choice-wrapper.selected::before {
        background: linear-gradient(to left, rgba(201, 162, 39, 0.3) 0%, transparent 60%);
    }
}

/* RNG Dimmed State */
.choice-wrapper.dimmed {
    opacity: 0.6;
    filter: grayscale(0.5);
    cursor: not-allowed;
    transform: none !important;
}

.choice-wrapper.dimmed:hover {
    transform: none;
    filter: grayscale(0.5);
}

/* Multi-Select States - Deprecated specific selector, use unified */

/* Random Selection Display */
.choice-wrapper.random-selected {
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    animation: randomPulse 2s ease-in-out infinite;
}

@keyframes randomPulse {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }

    50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.9);
    }
}

.random-badge {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* The Playing Card Visual - NO SHADOW */
.card-visual {
    width: 240px;
    height: 336px;
    background: url('assets/playing_card.png') no-repeat center center;
    background-size: cover;
    border-radius: 12px;
    position: relative;
    transition: filter 0.2s, transform 0.2s;
    margin: 0 auto 1.5rem auto;
    /* Centered in wrapper */
    flex-shrink: 0;
    overflow: hidden;
}

.choice-wrapper:hover .card-visual {
    filter: brightness(1.1);
}

/* Overlay Image - 100% Scale */
.card-overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
}

/* Text Block */
.choice-text-block {
    text-align: center;
    color: #ccc;
    width: 100%;
    padding: 0 1.5rem;
}

.choice-text-block h3 {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.choice-text-block p {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
    color: #aaa;
}

.stats-preview {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Generic Buttons */
.choice-button {
    background: linear-gradient(135deg, #c9a227, #8e7013);
    border: 1px solid #ffd700;
    padding: 1rem 4rem;
    color: #000;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(201, 162, 39, 0.4);
    transition: all 0.2s ease;
    margin: 2rem auto;
    text-transform: uppercase;
    display: block;
    min-width: 300px;
    text-align: center;
    letter-spacing: 1px;
}

.choice-button.small-btn {
    padding: 0.7rem 2rem;
    /* Reduced padding ~30% */
    font-size: 1.1rem;
    /* Reduced font size ~25% */
    min-width: 280px;
    /* Increased min-width to prevent text resizing jumps */
    margin: 1rem auto;
    /* Reduced margin */
}

.choice-button:hover {
    background: linear-gradient(135deg, #ffd700, #c9a227);
    box-shadow: 0 0 25px rgba(201, 162, 39, 0.6);
    transform: scale(1.05);
}

.choice-button:active {
    transform: scale(0.98);
}

/* Disabled state specifically for the continue button when requirements aren't met */
.choice-button:disabled,
button:disabled {
    background: linear-gradient(135deg, #555, #333) !important;
    border-color: #555 !important;
    color: #888 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
    /* Helps prevent hover states from triggering */
}

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

::-webkit-scrollbar-track {
    background: #121212;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

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

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sidebar History Navigation */
.sidebar-history-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.history-btn {
    background: linear-gradient(135deg, #444, #2a2a2a);
    border: 1px solid #555;
    padding: 0.3rem 0.6rem;
    color: var(--accent-color);
    font-family: var(--font-main);
    font-size: 1.1rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: unset;
    line-height: 1;
}

.history-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #555, #333);
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
    transform: scale(1.1);
}

.history-btn:active:not(:disabled) {
    transform: scale(1);
}

.history-btn:disabled {
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
    border-color: #222;
    color: #333;
    cursor: not-allowed;
    box-shadow: none;
}

/* Sidebar Toggle / Control Buttons  */
/* Replaces old #sidebar-toggle styles and applies to new .sidebar-control-btn */
/* EXACTLY match .history-btn style */
.sidebar-control-btn {
    background: linear-gradient(135deg, #444, #2a2a2a);
    border: 1px solid #555;
    padding: 0.3rem 0.6rem;
    color: var(--accent-color);
    font-family: var(--font-main);
    font-size: 1.1rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: unset;
    line-height: 1;
    /* NO width/height constraints - let padding define size */
}

.sidebar-control-btn:hover {
    background: linear-gradient(135deg, #555, #333);
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
    transform: scale(1.1);
}

/* Hide history nav in collapsed desktop */
#sidebar.collapsed-desktop .sidebar-history-nav {
    display: none;
}

/* Re-enable display for flex storage strategy if needed, but 'display: none' overrides everything */
/* If we want it hidden, we keep it hidden. */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #app {
        flex-direction: column;
        overflow: hidden;
        /* Use dvh for dynamic viewport on mobile (accounts for browser chrome) */
        height: 117.65dvh;
    }

    body {
        /* Zoom keeps mobile UI compact, dvh fixes iOS scrolling */
        zoom: 0.85;
        height: 117.65dvh;
    }

    #sidebar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        border-right: none;
        border-top: 2px solid var(--accent-color);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
        padding: 0.5rem 1rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        background-color: var(--sidebar-bg);

        /* New Layout Strategy */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-header {
        display: contents;
        /* Flattens hierarchy so History, Title, Controls become flex children of #sidebar */
    }

    /* Order 1: History Nav */
    .sidebar-history-nav {
        order: 1;
        margin-right: 0.5rem;
        display: flex;
        /* Ensure buttons are side-by-side */
    }

    /* Order 2: Title (or Stats Container in min mode) */
    .sidebar-header h2 {
        order: 2;
        margin: 0;
        font-size: 1.2rem;
        flex-grow: 1;
        text-align: center;
    }

    /* Order 3: Controls */
    .sidebar-controls {
        order: 3;
        display: flex;
        gap: 0.5rem;
        margin-left: auto;
        /* Push to right */
    }

    /* State 1: Collapsed (Min) */
    #sidebar.mobile-min {
        height: 60px;
        overflow: hidden;
        /* Flex alignment handles center vert */
    }

    /* Hide Title in Min State to make room for stats */
    #sidebar.mobile-min h2 {
        display: none;
    }

    /* Stats Container behaves differently in Min vs Expanded */
    #sidebar.mobile-min #stats-container {
        order: 2;
        /* Takes place of Title */
        display: flex;
        overflow-x: auto;
        /* Allow scroll if needed */
        padding: 0;
        /* Remove all padding */
        align-items: center;
        /* Vertically center stats */
        flex-grow: 1;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        scrollbar-width: none;
        height: 100%;
        /* Fill sidebar height */

        /* Fix Alignment: Distribute items evenly */
        justify-content: space-evenly;
    }

    #sidebar.mobile-min #stats-container::-webkit-scrollbar {
        display: none;
    }

    /* Mini Stats Styling */
    #sidebar.mobile-min .stat-item {
        margin: 0;
        /* Remove all margins to eliminate grey boxes */
        padding: 0;
        /* Remove all padding to eliminate grey boxes */
        border: none;
        /* Ensure no border */
        background: none;
        /* Ensure no background */
        flex-shrink: 0;
        display: flex;
        align-items: center;
        /* Center the value vertically */
        font-size: 0.9rem;
        height: 100%;
        /* Match sidebar height for perfect vertical centering */
    }

    #sidebar.mobile-min .stat-label {
        display: none;
    }

    #sidebar.mobile-min .stat-value {
        font-weight: bold;
        padding: 0;
        /* No padding on value */
        margin: 0;
        /* No margin on value */
        display: flex;
        align-items: center;
        /* Vertically center the actual text */
    }

    /* Hide specific stats in mini mode: Income */
    #sidebar.mobile-min .stat-item[data-stat="incomeWeekly"],
    #sidebar.mobile-min .stat-item[data-stat="incomeYearly"] {
        display: none;
    }

    /* Expanded States: Mid/Max */
    #sidebar.mobile-mid,
    #sidebar.mobile-max {
        /* When expanded, we likely want the Stats container to break to a new line */
        /* But #sidebar is flex-wrap: wrap. */
        align-content: flex-start;
    }

    #sidebar.mobile-mid #stats-container,
    #sidebar.mobile-max #stats-container {
        order: 4;
        /* Force to new line below header/controls */
        width: 100%;
        /* Use full width */
        height: calc(100% - 60px);
        /* Subtract header height approx */
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 1rem;
        padding-right: 0.5rem;
        /* Space for scrollbar */
        padding-left: 0.5rem;
        /* Left padding */
        margin: 0;
        margin-top: 1rem;
        /* Spacing from top arrows */
        display: block;
        /* Restore normal block display for vertical list */
    }

    /* Revert mini-stats styling for mid/max - FIX formatting */
    #sidebar.mobile-mid .stat-item,
    #sidebar.mobile-max .stat-item {
        margin: 0;
        margin-bottom: 0.5rem;
        /* Add spacing between items */
        padding: 0.5rem 0.5rem;
        /* Inner padding */
        display: flex;
        /* Use flex to separate label and value */
        justify-content: space-between;
        /* Label left, value right */
        align-items: center;
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        /* Slight bg for contrast if needed, or keeping plain */
        border-radius: 4px;
        /* Soften edges */
    }

    #sidebar.mobile-mid .stat-label,
    #sidebar.mobile-max .stat-label {
        display: block;
        /* Block display for proper flex layout */
        flex: 0 0 auto;
        /* Don't grow or shrink */
    }

    #sidebar.mobile-mid .stat-value,
    #sidebar.mobile-max .stat-value {
        display: block;
        /* Block display for proper flex layout */
        flex: 0 0 auto;
        /* Don't grow or shrink */
        text-align: right;
        /* Right-align values */
    }

    /* State 2: Mid */
    #sidebar.mobile-mid {
        height: 40dvh;
    }

    /* State 3: Max */
    #sidebar.mobile-max {
        height: 90dvh;
    }

    main {
        padding: 1rem;
        /* Since sidebar is position:fixed, main should fill full viewport */
        /* COMPENSATE FOR ZOOM: Use dvh for dynamic viewport on iOS */
        height: 117.65dvh;
        overflow-y: auto;
        /* Add bottom padding dynamically via JS updateMainPadding() */
        box-sizing: border-box;
    }

    /* Horizontal Layout - 50/50 Split */
    .choice-wrapper {
        flex-direction: row;
        align-items: center;
        width: 100%;
        max-width: 500px;
        background: rgba(0, 0, 0, 0.2);
        padding: 1rem;
        border-radius: 8px;
        text-align: left;
    }

    .choice-wrapper .card-visual {
        width: 45%;
        max-width: 150px;
        height: auto;
        aspect-ratio: 2.5/3.5;
        margin-bottom: 0;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .choice-wrapper .choice-text-block {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .choice-wrapper .stats-preview {
        align-items: flex-start;
    }

    /* Mobile Container */
    #choices-container {
        padding-bottom: 2rem;
    }

    #card-grid {
        gap: 1rem;
    }

    #action-area {
        position: static;
        width: 100%;
        padding: 1rem;
        background: transparent;
        border: none;
        display: flex;
        /* Ensure flex display */
        justify-content: center;
        z-index: 90;
    }

    .choice-wrapper:hover {
        transform: none;
    }

    .choice-button {
        width: 90%;
        padding: 1rem 2rem;
        margin: 2rem auto 2rem auto;
        /* Significant bottom margin to clear sidebar */
        min-width: unset;
        font-size: 1.2rem;
    }
}

/* Intro Scene Styles */
.intro-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    /* Wider for intro */
    margin: 0 auto;
}

.intro-logo {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    line-height: 1;
}

.logo-main {
    font-family: 'Cinzel', serif;
    font-size: 6rem;
    font-weight: 700;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(to bottom, #fff, #999);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

.sidebar-footer {
    border-top: 1px solid #333;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    margin-top: auto;
}

/* Hide footer in collapsed/minimized states */
#sidebar.collapsed-desktop .sidebar-footer,
#sidebar.mobile-min .sidebar-footer,
#sidebar.mobile-mid .sidebar-footer {
    display: none;
}

.logo-sub {
    font-family: 'Brush Script MT', 'Dancing Script', cursive;
    font-size: 5rem;
    color: #d50000;
    position: absolute;
    bottom: -20px;
    right: 10%;
    transform: rotate(-10deg);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.intro-metadata {
    position: absolute;
    top: 10px;
    right: -100px;
    font-family: 'Courier New', monospace;
    color: #ff5252;
    font-size: 0.8rem;
    text-align: left;
}

.intro-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    position: relative;
}

.intro-text-container {
    flex: 1;
    padding: 2rem;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    line-height: 1.6;
    transform: rotate(-2deg);
    background: rgba(0, 0, 0, 0.5);
    /* Slight backing for readability */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.intro-text-header {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.intro-image-container {
    flex: 0 0 45%;
    max-width: 500px;
}

.intro-image-container img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}

/* Warning Boxes */
.warning-box {
    width: 100%;
    max-width: 800px;
    /* Slightly narrower */
    margin: 0.5rem auto;
    /* Reduced margin */
    padding: 1rem;
    /* Reduced padding */
    border-radius: 6px;
    display: flex;
    align-items: center;
    /* Vertically center content */
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: var(--font-main);
    text-align: center;
}

/* Info Boxes */
.info-box {
    width: 100%;
    max-width: 800px;
    /* Slightly narrower */
    margin: 0.5rem auto;
    /* Reduced margin */
    padding: 1rem;
    /* Reduced padding */
    border-radius: 6px;
    display: flex;
    align-items: center;
    /* Vertically center content */
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: var(--font-main);
    text-align: left;
}

.warning-text {
    flex: 1;
    color: #ccc;
    /* Muted text color */
    font-family: var(--font-main);
}

/* Content Warning - Muted Dark Red */
.content-warning {
    background: rgba(60, 10, 10, 0.4);
    border: 1px solid #500;
    /* Thinner, darker border */
    box-shadow: none;
    /* Removed glow */
}

/* AI Policy Box - Muted Yellow/Gold */
.ai-policy-box {
    background: rgba(60, 50, 10, 0.3);
    border: 1px solid #750;
    /* Muted gold/bronze border */
    box-shadow: none;
    /* Removed glow */
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: flex-start;
    /* Content aligns left, header overrides */
    padding: 0.6rem 1rem;
    /* Reduced vertical padding significantly */
    margin-bottom: 2rem;
    /* Extra space below to separate from intro */
}

.ai-policy-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    user-select: none;
    padding: 0;
    /* Removed internal padding */
    font-family: var(--font-main);
}

.ai-policy-header:hover {
    opacity: 0.9;
}

.ai-policy-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #c9a227;
    /* Dimmed Gold */
    font-family: var(--font-main);
}

.ai-policy-toggle {
    font-size: 0.8rem;
    color: #c9a227;
    transition: transform 0.3s ease;
}

.ai-policy-content {
    padding: 1rem;
    border-top: 1px solid #444;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.4s ease;
    padding-top: 0;
    padding-bottom: 0;
    font-family: var(--font-main);
    /* Changed to Inter */
}

.ai-policy-box.expanded .ai-policy-content {
    max-height: 1000px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ai-policy-content p {
    margin-bottom: 0.8rem;
    color: #bbb;
    font-size: 0.85rem;
    font-family: var(--font-main);
    /* Changed to Inter */
}

.ai-policy-content p:last-child {
    margin-bottom: 0;
}

.ai-policy-content strong {
    color: #a88820;
    /* Muted accent */
}

@media (max-width: 768px) {
    .intro-layout {
        width: 100%;
    }

    .logo-main {
        font-size: 3.5rem;
    }

    .logo-sub {
        font-size: 3rem;
        right: 0;
        bottom: -10px;
    }

    .intro-metadata {
        position: static;
        text-align: center;
        margin-top: 10px;
        right: auto;
    }

    .intro-content {
        flex-direction: column-reverse;
        /* Image top on mobile usually better? Or text top? Ref image has text left. Let's stack Text then Image or Image then Text. User request: "next to it". Mobile standard is vertical. Let's do Image then Text for intro impact? Or Text first. The prompt has dialogue. Usually you see the speaker. Let's put image first on mobile. */
        align-items: center;
    }

    .intro-image-container {
        width: 100%;
        max-width: 300px;
        margin-bottom: 2rem;
        flex: auto;
    }

    .intro-text-container {
        transform: rotate(0deg);
        /* No rotation on mobile for readability/space */
        width: 100%;
    }
}

.intro-text-container p {
    margin-bottom: 1rem;
}

.intro-text-container p:last-child {
    margin-bottom: 0;
}

/* Summary Layout Styles - similar to intro but without tilt */
.summary-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.summary-layout .intro-text-container {
    transform: rotate(0deg);
    /* No tilt for summary */
}

.summary-text p {
    margin-bottom: 1rem;
    /* Proper paragraph spacing */
}

.summary-text p:last-child {
    margin-bottom: 0;
}

/* Meet the Family Styles */
.family-layout {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: left;
}

.family-header {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid #800000;
    padding-bottom: 1rem;
    background: linear-gradient(to right, transparent, rgba(128, 0, 0, 0.2), transparent);
}

.family-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    /* align-items: stretch; implied by default, ensuring equal height rows */
}

.family-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding-bottom: 1rem;
    border-radius: 4px;
    height: 100%;
}

.family-image-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
}

.family-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2/3;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.spade-overlay {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.spade-shape {
    font-size: 60px;
    color: white;
    position: absolute;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.spade-letter {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: black;
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -3px;
    /* Fine-tune vertical centering within spade shape */
}

.family-name {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.family-description {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #ddd;
    line-height: 1.4;
    text-align: center;
    padding: 0 1rem;
    flex-grow: 1;
    /* Pushes bottom padding down if short text */
}

.family-description p {
    margin-bottom: 0.8rem;
}

@media (max-width: 1200px) {
    .family-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .family-grid {
        grid-template-columns: 1fr;
    }
}

/* Choose Your Role Styles */
.role-layout {
    width: 100%;
    max-width: 1600px;
    /* Wider for this panoramic view */
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
}

.role-text-column {
    max-width: 500px;
    /* Increased from 350px */
    padding: 1rem;
}

.role-card-container {
    /* Slightly reduce scale/margin if needed, but widening text col should help */
    position: relative;
    width: 280px;
    /* Slight increase for better visual */
    height: 392px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.role-header {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 3rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #444;
    padding-bottom: 1rem;
    background: linear-gradient(to right, transparent, rgba(64, 0, 0, 0.5), transparent);
}

.role-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    /* Stack on mobile */
}

.role-choice {
    display: flex;
    /* Makes the choice item itself a flex container of text/card parts */
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 1 1 45%;
    min-width: 300px;
}

.role-choice:hover {
    transform: scale(1.02);
}

.role-choice.selected {
    position: relative;
}

.role-choice.selected::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(to right, rgba(201, 162, 39, 0.25), rgba(201, 162, 39, 0.05));
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
    /* box-shadow: 0 0 30px rgba(201, 162, 39, 0.3); Removed container glow per user request */
}

.role-choice.selected .role-card-container,
.role-choice.selected .role-text-column {
    position: relative;
    z-index: 1;
}

.role-choice.selected .role-card-container,
.role-choice.selected:hover .role-card-container {
    filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.8)) brightness(1.15);
}

/* Whore specific layout: Text then Card (Visual) / Card then Text (DOM) */
.role-choice[data-index="0"] {
    justify-content: flex-start;
    /* Packs to Right in row-reverse (Center) */
    text-align: right;
    flex-direction: row-reverse;
    /* [Text] [Card] */
}

/* Pimp specific layout: Card then Text */
.role-choice[data-index="1"] {
    justify-content: flex-start;
    /* Packs to Left in row (Center) */
    text-align: left;
    flex-direction: row;
    /* [Card] [Text] */
}


.role-card-container {
    position: relative;
    width: 250px;
    height: 350px;
    /* Aspect 2.5/3.5 roughly */
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.role-choice[data-index="0"] .role-card-container {
    transform: rotate(-5deg);
    margin-left: 20px;
}

.role-choice[data-index="1"] .role-card-container {
    transform: rotate(5deg);
    margin-right: 20px;
}

.role-choice:hover .role-card-container {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.2));
    z-index: 10;
}

.role-card-base,
.role-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.role-card-overlay {
    mix-blend-mode: normal;
    /* Pngs have transparency */
}


.role-text-column {
    max-width: 350px;
    padding: 1rem;
}

.role-name {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
}

.role-description {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.role-warning {
    font-family: 'Dancing Script', cursive;
    color: #ff3333;
    font-size: 1.2rem;
    transform: rotate(-2deg);
}


@media (max-width: 900px) {
    .role-content {
        flex-direction: column;
    }

    .role-choice {
        width: 100%;
        max-width: 500px;
        flex-direction: column !important;
        /* Stack vertically on mobile */
        text-align: center !important;
        margin-bottom: 3rem;
    }

    .role-card-container {
        margin: 0 0 1.5rem 0 !important;
        transform: rotate(0deg) !important;
    }
}

/* Stats Explainer Layout */
.stats-explainer-layout {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    background: rgba(0, 0, 0, 0.85);
    padding: 2rem;
    border: 1px solid #333;
    font-family: 'Courier New', monospace;
    color: #e0e0e0;
}

.stats-header-main {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #ddd;
    text-align: center;
    border-bottom: 2px solid #800000;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}

.stats-intro-text {
    margin-bottom: 2rem;
    line-height: 1.4;
    font-size: 1rem;
    color: #ccc;
    white-space: pre-wrap;
}

.vova-narration {
    font-family: 'Courier New', monospace;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
}

.vova-narration:last-child {
    margin-bottom: 0;
}

.stats-section-title {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-align: center;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    padding: 0.5rem 0;
}

.stat-item-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-visual-header {
    flex: 0 0 180px;
    text-align: right;
    font-size: 2rem;
    line-height: 1;
}

.stat-desc-text {
    flex: 1;
    font-size: 0.95rem;
}

/* Specific Stat Styles */
.stat-title-suffering {
    font-family: 'Impact', 'Charcoal', sans-serif;
    color: #ff8c00;
    text-transform: capitalize;
}

.stat-desc-suffering {
    color: #ff8c00;
}

.stat-title-love {
    font-family: 'Brush Script MT', 'Dancing Script', cursive;
    color: #ff1493;
}

.stat-desc-love {
    color: #ff69b4;
}

.stat-title-appeal {
    font-family: 'Arial Black', sans-serif;
    color: #32cd32;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.stat-desc-appeal {
    color: #90ee90;
}

.stat-title-virtue {
    font-family: 'Georgia', serif;
    font-weight: bold;
    color: #00bfff;
    font-style: italic;
}

.stat-desc-virtue {
    color: #87cefa;
}

.stat-title-exotic {
    font-family: 'Papyrus', fantasy;
    color: #8a2be2;
    font-weight: bold;
}

.stat-desc-exotic {
    color: #9370db;
}

/* Accounting Section Styles */
.stat-title-debt {
    font-family: 'Courier New', monospace;
    font-weight: 900;
    color: red;
    text-transform: uppercase;
    font-size: 2.5rem;
}

.stat-desc-debt {
    color: #ff4444;
}

.stat-title-years {
    font-family: 'Brush Script MT', 'Dancing Script', cursive;
    color: red;
    font-size: 2.5rem;
}

.stat-desc-years {
    color: #ff4444;
}

.stat-title-income {
    font-family: 'Courier New', monospace;
    font-style: italic;
    color: #32cd32;
    text-align: right;
    font-size: 1.5rem;
}

.stat-desc-income {
    color: #90ee90;
}

.stat-title-risk {
    font-family: 'Times New Roman', serif;
    color: gold;
    text-transform: uppercase;
    font-size: 2.5rem;
}

.stat-desc-risk {
    color: gold;
}

.stat-title-secrets {
    font-family: 'Courier New', monospace;
    color: #fff;
    font-size: 3rem;
    line-height: 0.8;
}

.stat-desc-secrets {
    color: #ddd;
}

@media (max-width: 600px) {
    .stat-item-row {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .stat-visual-header {
        flex: auto;
        text-align: center;
        margin-bottom: 0.5rem;
    }
}

/* Tooltips */
.tooltip-container {
    position: relative;
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    /* Position above */
    left: 50%;
    margin-left: -100px;
    /* Center */
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

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

/* Collapsed Sidebar Tooltip Override */
#sidebar.collapsed-desktop .tooltip-container:hover .tooltip-text {
    bottom: auto;
    left: 100%;
    margin-left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

#sidebar.collapsed-desktop .tooltip-container .tooltip-text::after {
    top: 50%;
    right: 100%;
    left: auto;
    margin-left: 0;
    margin-top: -5px;
    border-color: transparent #333 transparent transparent;
}


/* Flash Overlay */
#flash-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    height: 40dvh;
    background: linear-gradient(to top, rgba(255, 140, 0, 0.6), transparent);
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
}

.flash-active {
    animation: flash-animation 0.6s ease-out forwards;
}

@keyframes flash-animation {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* RNG Highlight */
/* Fix: Ensure wrapper removes dimming when highlighted */
.choice-wrapper.rng-highlight {
    opacity: 1 !important;
    filter: none !important;
}

.rng-highlight .card-visual {
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(201, 162, 39, 0.8));
    transform: scale(1.05);
}


.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    /* At bottom of tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show on Hover and Focus (Mobile Tap) */
.tooltip-container:hover .tooltip-text,
.tooltip-container:focus .tooltip-text,
.tooltip-container:active .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Unified Page Title Style */
.page-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid #800000;
    padding-bottom: 1rem;
    background: linear-gradient(to right, transparent, rgba(128, 0, 0, 0.2), transparent);
    width: 100%;
    text-align: center;
}

/* Mobile adjustments for tooltips */
@media (max-width: 768px) {
    .tooltip-text {
        bottom: auto;
        /* Unset top positioning */
        top: 100%;
        /* Move below the element */
        margin-top: 10px;
        left: 50%;
        transform: translateX(-50%);
        /* Center horizontally */
        margin-left: 0;
        right: auto;
    }

    .tooltip-text::after {
        top: auto;
        bottom: 100%;
        /* Arrow at top of tooltip pointing up */
        left: 50%;
        margin-left: -5px;
        border-color: transparent transparent #333 transparent;
        /* Point up */
        right: auto;
    }
}

/* Choice Card Text Block */
.choice-text-block {
    padding: 1rem;
    padding-bottom: 1.5rem;
    /* Increased bottom padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Disabled Choice Styles */
.choice-wrapper.disabled {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.choice-wrapper.disabled:hover {
    transform: none;
}

.choice-wrapper.disabled .card-visual {
    filter: brightness(0.6) grayscale(0.8);
}

.disabled-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    color: #ff5252;
    padding: 1rem;
    border: 1px solid #ff5252;
    border-radius: 8px;
    z-index: 100;
    text-align: center;
    width: 90%;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    pointer-events: none;
    display: block;
    /* Permanently visible */
    opacity: 1;
    /* Ensure opaque */
}

/* No longer rely on hover */
/* .choice-wrapper.disabled:hover .disabled-tooltip {
    display: block;
    animation: fadeIn 0.2s ease-out;
} */

/* RNG Flash Effect - Disco Elysium style */
.rng-flash {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Golden Yellow to match selection highlight */
    background: linear-gradient(to top, rgba(201, 162, 39, 0.8) 0%, transparent 50%);
    pointer-events: none;
    z-index: 9999;
    animation: flashFade 0.4s ease-out forwards;
    /* Snappier 0.4s */
}

@keyframes flashFade {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Card Placeholder Text */
.card-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    text-align: center;
    font-family: 'Limelight', cursive;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    line-height: 1.2;
}

/* Desktop sizing - use rem */
.card-placeholder-text.text-short {
    font-size: 2.2rem;
}

.card-placeholder-text.text-medium {
    font-size: 1.8rem;
}

.card-placeholder-text.text-long {
    font-size: 1.4rem;
}

/* Mobile sizing - use vw to scale but cap at px values matching 150px card width */
@media (max-width: 768px) {
    .card-placeholder-text.text-short {
        font-size: min(5.5vw, 19px);
    }

    .card-placeholder-text.text-medium {
        font-size: min(4.5vw, 16px);
    }

    .card-placeholder-text.text-long {
        font-size: min(3.5vw, 13px);
    }
}

/* ============================================================================
   WEEKLY PLANNER LAYOUT
   ============================================================================ */

.weekly-planner-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.planner-narration {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.weekly-planner-panel {
    background: linear-gradient(135deg, rgba(80, 20, 20, 0.95), rgba(40, 10, 10, 0.98));
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    font-size: 1.1rem;
    font-weight: bold;
}

.days-filled {
    color: var(--gold);
    font-family: 'Cinzel', serif;
}

.projected-income {
    color: #4CAF50;
    font-family: 'Cinzel', serif;
}

.planner-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.planner-slot {
    background: rgba(0, 0, 0, 0.5);
    /* border: 1px solid rgba(255, 215, 0, 0.3); Removed border */
    border-radius: 6px;
    padding: 0.5rem 0.25rem;
    /* Reduced padding */
    position: relative;
    min-height: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    width: 13%;
    /* Approx 1/7th - fit 7 in a row with gaps */
    min-width: 100px;
}

.planner-slot.filled {
    /* border-color: var(--gold); */
    background: rgba(255, 215, 0, 0.1);
    /* border-width: 2px; */
}

.planner-slot.empty:hover {
    background: rgba(255, 215, 0, 0.05);
    /* border-color: rgba(255, 215, 0, 0.5); */
    transform: translateY(-2px);
    /* Subtle lift instead of border */
}

.planner-slot.filled:hover {
    background: rgba(255, 215, 0, 0.15);
}

.slot-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

.slot-content {
    font-size: 0.85rem;
    line-height: 1.3;
    flex-grow: 1;
    font-family: 'Inter', sans-serif;
    /* Reserve space for 2 lines */
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slot-content.empty {
    color: #666;
    font-style: italic;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
    /* Don't force min-height on "Empty" text if not needed, but keep it centered */
    flex-grow: 1;
}

.slot-income {
    font-size: 0.75rem;
    color: #4CAF50;
    margin-top: 0.1rem;
    font-weight: bold;
    font-family: 'Cinzel', serif;
}

.slotwarn {
    font-size: 0.7rem;
    color: #ff6b6b;
    margin-top: 0.25rem;
}

.slot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.slot-remove:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

.slot-remove.hidden {
    display: none;
}

/* Slot Card Thumbnails */
.slot-card-preview {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    /* Don't shrink below 100px on desktop if possible */
}

.slot-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Click Flash Animation - Container Level */
@keyframes container-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        background-color: rgba(255, 215, 0, 0);
    }

    30% {
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.5);
        background-color: rgba(255, 215, 0, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        background-color: rgba(0, 0, 0, 0);
    }
}

.click-pulse {
    position: relative;
    overflow: hidden;
    /* Contain the flash */
}

.click-pulse::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 215, 0, 0.5) 100%);
    opacity: 0;
    pointer-events: none;
    animation: flash-overlay-anim 0.4s ease-out forwards;
    z-index: 10;
}

@keyframes flash-overlay-anim {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .planner-slot {
        width: 23%;
        /* Approx 1/4th */
    }
}

@media (max-width: 768px) {
    weekly-planner-panel {
        padding: 1rem;
    }

    .planner-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        font-size: 1rem;
    }

    .planner-slot {
        width: 47%;
        /* Approx 1/2 */
        min-height: unset;
        /* Let aspect ratio handle it */
        aspect-ratio: 4/5;
        padding: 0.5rem;
    }

    .slot-card-preview {
        height: auto;
        flex-grow: 1;
        /* Fill available vertical space */
        min-height: 0;
        /* Flexbox fix */
    }

    .slot-header {
        font-size: 0.7rem;
    }

    .slot-content {
        font-size: 0.8rem;
    }
}


/* Year Indicator */
.year-indicator {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--gold);
    margin: 1rem 0;
    padding: 0.5rem;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

/* Income Breakdown */
.income-breakdown {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.income-line {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    font-family: 'Cinzel', serif;
}

.income-line.income-total {
    font-weight: bold;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    margin: 0.5rem 0;
    padding: 0.75rem 0;
    font-size: 1.05rem;
    color: var(--gold);
}

.income-formula {
    font-size: 0.85rem;
    color: #888;
    font-family: 'Courier New', monospace;
}

/* Slot Card Thumbnails */
.slot-card-preview {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.slot-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.slot-label {
    font-size: 0.75rem;
    line-height: 1.1;
    text-align: center;
    font-weight: 500;
}

/* --- Stats Formatting Overrides --- */

/* Default: Show Full, Hide Short */
.val-short {
    display: none;
}

.val-full {
    display: inline;
}

/* Collapsed Desktop: Show Short, Hide Full */
#sidebar.collapsed-desktop .val-short {
    display: inline;
}

#sidebar.collapsed-desktop .val-full {
    display: none;
}

/* Mobile Min (Collapsed): Show Short, Hide Full */
#sidebar.mobile-min .val-short {
    display: inline;
}

#sidebar.mobile-min .val-full {
    display: none;
}

/* Credit/Debt Colors */
.stat-credit {
    color: #32cd32 !important;
    /* Lime Green */
    font-weight: bold;
}

.stat-debt {
    color: red !important;
}

/* Ensure years shorthand works nicely */
.stat-value {
    white-space: nowrap;
}

/* Mobile Tooltip Support */
#sidebar.mobile-min .stat-item.active-tooltip .tooltip-text {
    visibility: visible;
    opacity: 1;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    z-index: 1000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Hide Deltas when crowded in Mobile View */
#sidebar.mobile-min #stats-container.hide-deltas .stat-delta {
    display: none;
}