/**
 * ARCSCRIBER - Styles
 * Dark, Literary, Melancholic Aesthetic
 * Redesign: December 2025
 */

/* === CSS VARIABLES === */
:root {
    /* Colors */
    --void-black: #0c0c0e;
    --charcoal-dark: #141417;
    --charcoal: #1c1c21;
    --slate-dark: #25252b;
    --slate: #2f2f36;
    --slate-light: #52525e;

    --text-primary: #e6e6e6;
    --text-secondary: #a0a0a0;
    --text-faded: #666670;

    --gold: #d4af37;
    --gold-dim: #8a7040;
    --gold-glow: rgba(212, 175, 55, 0.2);
    --gold-highlight: #ffdb78;

    --danger: #9e2a2b;

    /* Category Colors */
    --color-cause: #c14953;
    /* Rust/Red */
    --color-outcome: #4d908e;
    /* Muted Teal */
    --color-classification: #8d77ab;
    /* Muted Purple */

    /* Typography */
    --font-serif: 'Crimson Pro', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --gap-2xl: 3rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-slow: 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-medium: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: 200ms ease-out;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    /* App-like feel */
}

body {
    font-family: var(--font-sans);
    background: var(--void-black);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--void-black);
}

::-webkit-scrollbar-thumb {
    background: var(--slate);
    border-radius: 3px;
}

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

/* === UTILITY CLASSES === */
.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn var(--transition-medium) forwards;
}

.fade-out {
    animation: fadeOut var(--transition-medium) forwards;
}

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

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

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* === HEADER === */
.site-header {
    height: 60px;
    background: var(--charcoal-dark);
    border-bottom: 1px solid var(--slate-dark);
    display: flex;
    justify-content: center;
    /* Center the inner content */
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1800px;
    /* Match game container max-width */
    padding: 0 var(--gap-lg);
    border-left: 1px solid var(--slate-dark);
    /* Visually align with game container borders */
    border-right: 1px solid var(--slate-dark);
}

.header-content {
    display: flex;
    gap: var(--gap-lg);
    align-items: center;
}

.charges-display {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.charges-display .label {
    color: var(--text-faded);
}

.charges-icons {
    display: flex;
    gap: var(--gap-xs);
}

.charge-icon {
    font-size: 1.2rem;
    color: var(--gold);
    transition: var(--transition-fast);
    display: inline-block;
}

.charge-icon.depleted {
    color: var(--slate);
    opacity: 0.4;
}

/* ... (rest of header styles remain common, but need to ensure structure supports this) */
/* Wait, existing structure is: header.site-header > div.header-content | div.charges-display. 
   I need to change HTML to wrap them or just set max-width on site-header's flex behavior?
   Better approach: Keep site-header full width, but constrain its direct children or use a wrapper.
   Actually, let's just use a pseudo-wrapper approach or max-width on the flex container with margin auto.
*/

/* Correcting strategy: Just center .game-container. For header, it might look weird if logo is far left and content far right.
   Let's check HTML. 
   <header class="site-header">
        <div class="header-content">...</div>
        <div class="charges-display">...</div>
   </header>
   
   I'll make site-header behave like a container + wrapper.
*/

.site-header {
    height: 60px;
    background: var(--charcoal-dark);
    border-bottom: 1px solid var(--slate-dark);
    /* padding: 0 var(--gap-lg);  <-- Moved to inner logic */
    display: flex;
    justify-content: center;
    /* Centers the constraint box */
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* We need to wrap the header contents in a constraint div in HTML, OR simulate it. 
   Simplest CSS-only way is to make site-header contain a single centered child, but HTML has two children.
   I should update HTML for header too. 
   
   For now, let's stick to the user's main request: Game Container.
   The header being full width is actually fine/standard (like a nav bar). 
   Let's focus on .game-container.
*/

/* === CSS VARIABLES UPDATE === */
:root {
    /* ... (previous vars) */
    --content-max-width: 1800px;
    /* Standardize max width */
}

/* === MAIN LAYOUT === */
.game-container {
    display: grid;
    grid-template-columns: 1fr 450px;
    /* Center: Flexible Image | Right: Fixed Feed */
    height: calc(100vh - 60px - 140px);
    /* Full height minus header (60) and controls (140) */
    /* max-width removed for cinematic feel */
    margin: 0;
    border-bottom: 1px solid var(--slate-dark);
    position: relative;
    background: var(--void-black);
}

/* === CENTER PANEL: VISUAL WITH OVERLAY === */
.visual-panel {
    position: relative;
    background: #000;
    border-right: 1px solid var(--slate-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.visual-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.9;
    transition: transform 10s ease;
}

.arcscriber-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Location Info Overlay */
.location-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--gap-xl);
    background: linear-gradient(to top, rgba(12, 12, 14, 0.95), transparent);
    pointer-events: none;
}

.location-overlay .location-name {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--gold);
    margin-bottom: var(--gap-sm);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.location-overlay .atmosphere-note {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

/* Legacy non-overlay styles (deprecated) */
.location-name:not(.location-overlay .location-name) {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--gap-sm);
}

.atmosphere-note:not(.location-overlay .atmosphere-note) {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.8;
}

.memory-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.memory-item {
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: var(--gap-sm) var(--gap-md);
    background: var(--slate-dark);
    border-left: 2px solid var(--gold-dim);
    /* border-radius: 0 var(--radius-sm) var(--radius-sm) 0; */
    transition: var(--transition-fast);
}

.memory-item:hover {
    background: var(--slate);
    border-left-color: var(--gold);
    transform: translateX(2px);
}

.empty-state {
    font-size: 0.85rem;
    color: var(--text-faded);
    font-style: italic;
    text-align: center;
    padding: var(--gap-md);
    border: 1px dashed var(--slate-dark);
    border-radius: var(--radius-sm);
}

/* === RIGHT PANEL: NARRATIVE FEED === */
.narrative-feed {
    background: var(--charcoal-dark);
    border-left: 1px solid var(--slate-dark);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* Important: internal scroll only */
}

/* STICKY MEMORY BANK HEADER */
.memory-bank-sticky {
    background: var(--charcoal);
    border-bottom: 1px solid var(--slate);
    padding: var(--gap-md) var(--gap-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 5;
    flex-shrink: 0;
    /* Keep it fixed height based on content */
}

.sticky-title {
    font-size: 0.65rem;
    color: var(--gold-dim);
    letter-spacing: 0.15em;
    font-weight: 700;
    margin-bottom: var(--gap-sm);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.sticky-title .icon {
    color: var(--gold);
}

.memory-list-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
}

.memory-pill {
    font-size: 0.75rem;
    color: var(--text-primary);
    background: var(--slate-dark);
    border: 1px solid var(--slate-light);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    cursor: default;
    transition: var(--transition-fast);
}

.memory-pill:hover {
    border-color: var(--gold-dim);
    background: var(--slate);
}

/* Category Coloring */
.memory-pill[data-category="cause"] {
    border-color: rgba(193, 73, 83, 0.4);
    color: #eebbbf;
}

.memory-pill[data-category="cause"]:hover {
    border-color: var(--color-cause);
    background: rgba(193, 73, 83, 0.1);
}

.memory-pill[data-category="outcome"] {
    border-color: rgba(77, 144, 142, 0.4);
    color: #bcecec;
}

.memory-pill[data-category="outcome"]:hover {
    border-color: var(--color-outcome);
    background: rgba(77, 144, 142, 0.1);
}

.memory-pill[data-category="classification"] {
    border-color: rgba(141, 119, 171, 0.4);
    color: #ddd4e8;
}

.memory-pill[data-category="classification"]:hover {
    border-color: var(--color-classification);
    background: rgba(141, 119, 171, 0.1);
}

/* Endgame Dropdowns */
.thesis-blank[data-category="cause"] {
    border-color: var(--color-cause);
    color: #eebbbf;
}

.thesis-blank[data-category="outcome"] {
    border-color: var(--color-outcome);
    color: #bcecec;
}

.thesis-blank[data-category="classification"] {
    border-color: var(--color-classification);
    color: #ddd4e8;
}

.empty-state-small {
    font-size: 0.75rem;
    color: var(--text-faded);
    font-style: italic;
}

/* SCROLLABLE AREA */
.narrative-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--gap-lg);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    /* To justify-content end if needed, but top is standard */
}

.narrative-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    /* Add bottom padding so text doesn't hit edge immediately */
    padding-bottom: var(--gap-xl);
}

.narrative-text p {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: var(--gap-md);
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--slate);
    /* border-radius: 0 var(--radius-sm) var(--radius-sm) 0; */
}

.narrative-text p:first-child {
    border-left-color: var(--gold-dim);
}

/* Arcscribe Revelations Styles */
.arcscriber-revealed {
    margin-top: var(--gap-md);
    padding: var(--gap-md);
    background: linear-gradient(to right, rgba(212, 175, 55, 0.05), transparent);
    border-left: 2px solid var(--gold);
    position: relative;
    animation: fadeIn 0.5s ease-out;
}

.arcscriber-revealed::before {
    content: 'REVELATION';
    display: block;
    font-size: 0.6rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: var(--gap-sm);
    opacity: 0.8;
}

.echo-layer {
    margin-bottom: var(--gap-sm);
}

.echo-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--gold-dim);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.echo-layer p {
    color: var(--gold-highlight);
    /* Brighter for readability */
    font-style: italic;
    font-size: 1rem;
    background: none;
    border: none;
    padding: 0;
}

/* === BOTTOM: CONTROL DECK === */
/* Toggle Bar */
.deck-toggle-bar {
    display: none;
    /* Hidden by default on desktop */
    width: 100%;
    height: 18px;
    /* Thinner */
    background: var(--charcoal-dark);
    /* display: flex; Moved to mobile query */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top: 1px solid var(--slate-dark);
    transition: background 0.2s;
    position: absolute;
    top: -18px;
    /* Match height */
    left: 0;
    z-index: 51;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.deck-toggle-bar:hover {
    background: var(--slate-dark);
}

.deck-toggle-bar .toggle-icon {
    font-size: 0.65rem;
    /* Smaller */
    color: var(--gold);
    transition: transform 0.4s ease;
    transform: scaleX(1.5) scaleY(0.6);
    /* Flatten effect */
    display: block;
    line-height: 1;
}

.control-deck.collapsed .toggle-icon {
    transform: scaleX(1.5) scaleY(0.6) rotate(180deg);
}

.control-deck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    /* Fixed height for consistency */
    background: var(--charcoal-dark);
    border-top: 1px solid var(--slate-dark);
    /* padding: var(--gap-lg); Removed padding to let inner handle it better */
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.control-deck.collapsed {
    transform: translateY(100%);
}

.control-deck-inner {
    width: 100%;
    max-width: 900px;
    /* Narrower for stable layout */
    margin: 0 auto;
    padding: 0 var(--gap-xl);
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Stretch for equal height */
    padding-bottom: var(--gap-sm);
    /* Tighter gaps */
}

.deck-group {
    display: flex;
    flex-direction: column;
    /* Glass panel effect */
    background: rgba(10, 14, 23, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    /* Slightly sharper corners */
    padding: var(--gap-md);
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Tech-Console Corner Accents */
.deck-group::before,
.deck-group::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.5;
    pointer-events: none;
}

/* Top-left corner */
.deck-group::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--gold-primary);
    border-left: 1px solid var(--gold-primary);
}

/* Bottom-right corner */
.deck-group::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--gold-primary);
    border-right: 1px solid var(--gold-primary);
}

.deck-group:hover {
    border-color: rgba(255, 215, 0, 0.15);
    background: rgba(10, 14, 23, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.deck-group.left {
    flex: 0 0 200px;
    /* Fixed width */
    display: flex;
    flex-direction: column;
}

.deck-group.center {
    flex: 0 0 220px;
    /* Fixed width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--slate-dark);
    border-right: 1px solid var(--slate-dark);
    padding: 0 var(--gap-md);
    /* Tighter padding */
}

.deck-group.memory {
    flex: 0 0 250px;
    /* Fixed width */
    display: flex;
    flex-direction: column;
    padding-left: var(--gap-md);
    border-right: 1px solid var(--slate-dark);
    padding-right: var(--gap-md);
    max-height: 120px;
    /* Fixed constraint on desktop */
    overflow: hidden;
    /* Container doesn't scroll, only #memory-list */
}

.control-subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--text-faded);
    text-transform: uppercase;
    margin-bottom: var(--gap-xs);
    text-align: left;
}

.deck-group.center .control-subtitle {
    text-align: center;
    width: 100%;
}

/* Memory Bank Styling Update */
.deck-group.memory .deck-label {
    margin-bottom: var(--gap-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

#memory-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--gap-xs);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Crucial for scrolling within flex item */
    padding-right: 4px;
}

/* Custom Scrollbar for Memory List */
#memory-list::-webkit-scrollbar {
    width: 4px;
}

#memory-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

#memory-list::-webkit-scrollbar-thumb {
    background: var(--slate);
    border-radius: 2px;
}

#memory-list::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dim);
}

.memory-tag {
    font-family: var(--font-serif);
    /* Distinctive serif font */
    font-size: 0.7rem;
    font-style: italic;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--text-secondary);
    /* Animation for new entries */
    animation: fadeInTag 0.5s ease-out forwards;
}

@keyframes fadeInTag {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

.button-row {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    gap: var(--gap-xs);
    /* Tight vertical spacing */
    width: 100%;
}

.deck-group.center .button-row {
    justify-content: center;
}

/* === BUTTONS UPDATE === */
.nav-button,
.poi-button {
    padding: var(--gap-xs) var(--gap-sm);
    /* Smaller padding */
    font-size: 0.8rem;
    font-weight: 400;
    /* Thinner font */
    white-space: nowrap;
    width: 100%;
    /* Full width within section */
    text-align: left;
}



/* === BUTTON POLISH === */
button {
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Standard shared styles update */
.nav-button,
.poi-button {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    /* Smaller tech font */
    font-weight: 400;
    position: relative;
    overflow: hidden;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    /* Previously defined padding/bg was causing override issues, consolidating here */
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation Buttons: Directional Flow */
/* .nav-button {}  Removed empty rule */

.nav-button:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
    border-left-color: var(--gold-primary);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
    color: var(--text-primary);
}

/* Interaction Buttons: targeting/scan effect */
.poi-button {
    color: var(--gold-primary);
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.02);
}

.poi-button:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--gold-primary);
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.2);
    text-shadow: 0 0 5px var(--gold-primary);
    transform: translateY(-1px);
}

/* Reticle corners for interaction buttons */
.poi-button::before,
.poi-button::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-color: var(--gold-primary);
    border-style: solid;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.poi-button::before {
    top: 2px;
    left: 2px;
    border-width: 1px 0 0 1px;
}

.poi-button::after {
    bottom: 2px;
    right: 2px;
    border-width: 0 1px 1px 0;
}

.poi-button:hover::before,
.poi-button:hover::after {
    opacity: 1;
}

/* Arcscriber overrides */
.poi-button.arcscriber {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(255, 215, 0, 0.15));
    border-color: var(--gold-primary);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.1);
    color: var(--gold-primary);
    font-weight: 700;
}

.poi-button.arcscriber:hover {
    box-shadow: 0 0 20px var(--gold-glow), inset 0 0 25px rgba(255, 215, 0, 0.2);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(255, 215, 0, 0.2));
}

.poi-button.depleted {
    background: transparent;
    border-color: var(--slate-dark);
    color: var(--text-faded);
    box-shadow: none;
    pointer-events: none;
}

.action-button {
    width: 100%;
    padding: var(--gap-md);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

.action-button.primary {
    background: var(--gold);
    color: var(--void-black);
}

.action-button.primary:hover {
    background: var(--gold-highlight);
    box-shadow: 0 0 20px var(--gold-glow);
}

.action-button.secondary {
    background: transparent;
    border: 1px solid var(--slate-light);
    color: var(--text-secondary);
}

.action-button.secondary:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

/* === SYSTEM MESSAGES & TYPOGRAPHY === */
.system-message {
    margin-top: var(--gap-lg);
    padding: var(--gap-md);
    background: rgba(10, 14, 23, 0.8);
    /* Darker backing */
    border-left: 2px solid var(--gold-primary);
    /* Brighter accent */
    font-size: 0.95rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    /* Monospace feature */
}

/* Highlighted keywords in narrative */
.keyword-highlight {
    color: var(--gold-primary);
    font-weight: 600;
    text-shadow: 0 0 2px rgba(255, 215, 0, 0.3);
}

.system-label {
    color: var(--text-faded);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-right: var(--gap-sm);
}

/* === ENDGAME OVERLAY === */
.endgame-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 14, 0.95);
    backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-lg);
}

.endgame-content {
    background: var(--charcoal-dark);
    padding: var(--gap-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-dark);
    max-width: 800px;
    /* Increased width */
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    display: flex;
    /* Flex for better spacing */
    flex-direction: column;
    gap: var(--gap-lg);
}

.endgame-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.endgame-title {
    font-family: var(--font-sans);
    text-align: center;
    color: var(--gold);
    letter-spacing: 0.15em;
    margin-bottom: var(--gap-md);
    /* Reduced margin since we use flex gap */
    font-size: 1.5rem;
}

.thesis-blank {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: 1.1rem;
    padding: 0 var(--gap-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    /* Ensure dark background for dropdowns */
    background-color: var(--charcoal-dark);
    outline: none;
}

.thesis-blank option {
    background-color: var(--charcoal-dark);
    color: var(--text-main);
}

.thesis-blank:hover {
    background: rgba(212, 175, 55, 0.1);
    border-bottom-color: var(--gold);
}

.endgame-result {
    margin: var(--gap-xl) 0;
    padding: var(--gap-lg);
    background: var(--slate-dark);
    border-radius: var(--radius-md);
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.result-archetype {
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: var(--gap-sm);
}

/* === ARCSCRIBE VISUAL EFFECTS === */
.arcscribe-flash {
    position: fixed;
    inset: 0;
    background: var(--gold);
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
    mix-blend-mode: screen;
    /* Adds a nice glowing additive effect */
}

.arcscribe-flash.active {
    animation: flashGold 0.8s ease-out forwards;
}

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

    20% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
    }
}

.arcscribe-animation-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    pointer-events: none;
    /* Dark gradient for contrast */
    background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
    transition: opacity 0.5s ease;
}

.arcscribe-charges-center {
    display: flex;
    gap: var(--gap-xl);
}

.charge-diamond-large {
    font-size: 4rem;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease-out;
}

.charge-diamond-large.visible {
    opacity: 1;
    transform: scale(1);
}

.charge-diamond-large.using {
    animation: useCharge 1.5s ease-out forwards;
}

@keyframes useCharge {
    0% {
        transform: scale(1);
        opacity: 1;
        color: var(--gold);
    }

    30% {
        transform: scale(1.5);
        color: #fff;
        text-shadow: 0 0 40px var(--gold);
    }

    100% {
        transform: scale(2);
        opacity: 0;
        filter: blur(10px);
    }
}

/* === RESPONSIVE === */
@media (max-width: 900px) {

    /* === GLOBAL MOBILE LAYOUT === */
    .game-container {
        display: flex !important;
        /* Force override desktop grid */
        grid-template-columns: unset !important;
        /* Clear grid */
        flex-direction: column;
        height: calc(100dvh - 50px);
        border-bottom: none;
        overflow: hidden;
    }

    /* === HEADER ADJUSTMENTS === */
    .site-header {
        height: 50px;
        font-size: 0.65rem;
        padding: 0 var(--gap-sm);
    }

    .header-inner {
        padding: 0 var(--gap-sm);
        border: none;
    }

    .header-content {
        gap: var(--gap-sm);
    }

    .divider {
        display: inline;
        /* Show divider */
        margin: 0 4px;
    }

    .charge-icon {
        font-size: 1rem;
    }

    .planet-info .label,
    .charges-display .label {
        display: none;
        /* Hide labels to save space */
    }

    .sector-info {
        display: flex;
        font-size: 0.6rem;
    }

    .sector-info .label {
        display: none;
        /* Hide "SECTOR:" label but keep value */
    }

    .charges-display {
        gap: var(--gap-xs);
    }

    /* === VISUAL PANEL (TOP) === */
    .visual-panel {
        height: 30vh;
        min-height: 180px;
        max-height: 250px;
        flex-shrink: 0;
        flex-grow: 0;
        border-right: none;
        border-bottom: 1px solid var(--slate-dark);
        width: 100%;
    }

    .location-overlay {
        padding: var(--gap-sm) var(--gap-md);
        background: linear-gradient(to top, rgba(12, 12, 14, 1) 0%, rgba(12, 12, 14, 0.7) 40%, transparent 100%);
    }

    .location-overlay .location-name {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .location-overlay .atmosphere-note {
        font-size: 0.75rem;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* === NARRATIVE FEED (MIDDLE) === */
    .narrative-feed {
        flex: 1 1 auto;
        border-left: none;
        width: 100% !important;
        /* Override fixed 450px */
        max-width: 100%;
        min-height: 0;
        overflow-y: auto;
    }

    .narrative-scroll-area {
        padding: var(--gap-md);
        padding-bottom: 280px;
        /* Increased for tighter control deck */
        height: 100%;
        overflow-y: auto;
    }

    .narrative-text {
        gap: var(--gap-md);
    }

    .narrative-text p {
        font-size: 0.9rem;
        line-height: 1.6;
        padding: var(--gap-sm);
    }

    .arcscriber-revealed {
        padding: var(--gap-sm);
    }

    .echo-layer p {
        font-size: 0.85rem;
    }

    /* === CONTROL DECK (BOTTOM) === */
    /* Let the flexible layout handle positioning, but ensure it sits at bottom */
    /* Fixed positioning for guaranteed visibility */
    .control-deck {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: auto;
        /* max-height moved to inner */
        border-top: 1px solid var(--slate-dark);
        background: var(--charcoal-dark);
        /* Ensure opacity */
        z-index: 1000;
        /* High Z-index ensures it's on top */
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
        overflow-y: visible !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
        /* Improved shadow */
    }

    .control-deck-inner {
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        /* Tighter gap between groups */
        max-width: 100%;
        height: auto;
        max-height: 45vh;
        overflow-y: auto;
    }

    .deck-group {
        width: 100%;
        flex: none;
        padding: 6px 8px;
        /* Tighter padding */
        background: rgba(10, 14, 23, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .deck-group::before,
    .deck-group::after {
        display: none;
    }

    .deck-group.left,
    .deck-group.center {
        width: 100%;
        flex: 0 0 auto !important;
        /* Override desktop fixed heights */
        justify-content: flex-start !important;
        /* Override desktop centering */
        align-items: stretch !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 0;
    }

    .deck-group.left {
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .deck-group.center {
        border-left: 1px solid rgba(255, 255, 255, 0.05);
    }

    .deck-group.memory {
        width: 100%;
        flex: 0 0 auto !important;
        /* Override desktop fixed height */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow-x: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        max-height: 70px;
        /* Slightly reduced */
        overflow-y: auto;
        padding: 4px 8px;
        /* Tighter */
    }

    .deck-group.memory h4,
    .deck-group.memory .control-subtitle {
        font-size: 0.5rem;
        margin-bottom: 2px;
        /* Tighter */
        letter-spacing: 0.08em;
    }

    #memory-list {
        flex-wrap: wrap;
        gap: 4px;
    }

    .memory-pill {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .control-subtitle {
        font-size: 0.5rem;
        margin-bottom: 2px;
        /* Tighter */
        text-align: center;
        display: block;
        letter-spacing: 0.08em;
    }

    .button-row {
        gap: 4px;
        /* Tighter */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Larger touch targets */
    .nav-button,
    .poi-button {
        padding: 6px 8px;
        /* Compact but touchable */
        font-size: 0.7rem;
        min-height: 36px;
        /* Reduced from 40px */
        justify-content: center;
        text-align: center;
        letter-spacing: 0.05em;
    }

    /* Adjust game container height relative to header */
    .game-container {
        height: calc(100dvh - 50px);
        /* Subtract simplified header height */
    }

    /* === ENDGAME OVERLAY === */
    .endgame-overlay {
        padding: var(--gap-sm);
        z-index: 1100;
        /* Above control deck */
    }

    .endgame-content {
        padding: var(--gap-md);
        max-width: 100%;
        gap: var(--gap-sm);
    }

    .endgame-title {
        font-size: 1rem;
        margin-bottom: 0;
        letter-spacing: 0.1em;
    }

    .endgame-thesis p {
        font-size: 0.85rem;
        line-height: 1.8;
    }

    .thesis-blank {
        font-size: 0.8rem;
        padding: 2px 4px;
        margin: 2px;
        max-width: 140px;
        display: inline-block;
        background: var(--charcoal-dark);
        /* Dark background */
        color: var(--text-main);
        /* Light text */
        border: 1px solid var(--slate-dark);
        border-radius: 4px;
    }

    .action-button {
        padding: var(--gap-sm);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }


    /* Reveal Toggle Bar on Mobile */
    .deck-toggle-bar {
        display: flex;
    }

    /* Hide control deck when endgame overlay is shown */
    .endgame-overlay:not(.hidden)~.control-deck {
        display: none;
    }
}