/* Project 2040 Styles
   Orbital-class interface: Clean, responsive, accessible */

:root {
    /* Colors - sleek orbital terminal palette */
    --bg-dark: #0d0d12;
    --bg-panel: #1a1a22;
    --bg-input: #23232e;
    --text-primary: #e8e8f0;
    --text-secondary: #a5a5c0;
    --text-dim: #8585a0;
    --accent-cyan: #00d4ff;
    --accent-orange: #ff8800;
    --accent-red: #ff4444;
    --accent-green: #44ff88;
    --accent-gold: #ffcc44;
    --accent-magenta: #ff44aa;
    --border-dim: #35354a;
    --border-bright: #45455a;

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

    /* Typography */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Prevent text cursor on non-input elements */
body, button, a, li, div, span, td, th, label {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

a, button, .clickable, .player-card, .btn-primary, .btn-secondary {
    cursor: pointer;
}

input, textarea, select, [contenteditable="true"] {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}



html {
    font-size: 16px;
    /* Respect user preferences */
    font-size: clamp(14px, 1vw + 12px, 18px);
}

body {
    font-family: var(--font-mono);
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    /* dvh tracks the visible viewport. With plain 100vh (the large,
       toolbars-hidden viewport) iOS makes the body taller than the screen, so it
       scrolls and the narrative pane rubber-bands into that extra height —
       dragging the audio pill up off the fixed input (the "black band"). */
    min-height: 100dvh;
    overscroll-behavior: none;
}

/* Accessibility - don't block zoom */
@media screen and (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

/* Screens */
.screen {
    display: none;
    min-height: 100vh;
}

.screen.active {
    display: flex;
}

/* Title Screen */
#title-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0f0f1a 100%);
}

.title-content h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    letter-spacing: 0.2em;
    color: var(--accent-cyan);
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    margin-bottom: var(--space-md);
}

.tagline {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    font-style: italic;
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-send, .btn-roll {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    padding: var(--space-md) var(--space-xl);
    border: 1px solid var(--border-bright);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px; /* Accessibility: touch target */
    min-width: 44px;
}

.btn-primary {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border-color: var(--accent-cyan);
}

.btn-primary:hover:not(:disabled) {
    background: #00b8dd;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

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

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-panel);
    border-color: var(--accent-cyan);
}

/* Character Creation */
#chargen-screen {
    padding: var(--space-xl);
    overflow-y: auto;
}

.chargen-content {
    max-width: 800px;
    margin: 0 auto;
}

.chargen-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--accent-cyan);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.form-group {
    margin-bottom: var(--space-xl);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.form-group input[type="text"] {
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.option-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    padding: var(--space-md);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.option-btn:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-input);
}

.option-btn.selected {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.option-btn strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.option-btn span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-sm);
}

.skill-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.skill-btn:hover {
    border-color: var(--text-secondary);
}

.skill-btn.selected {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
    color: var(--accent-cyan);
}

.skill-hint {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.skill-count {
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Game Screen */
#game-screen {
    display: none;
}

#game-screen.active {
    display: block;
}

.game-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .game-layout {
        grid-template-columns: 1fr;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }

    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        max-height: 50vh;
        overflow-y: auto;
        z-index: 100;
        transform: translateY(calc(100% - 48px));
        transition: transform 0.3s ease;
        border-right: none;
        border-top: 1px solid var(--border-bright);
        padding-top: 0;
    }

    .sidebar.expanded {
        transform: translateY(0);
    }

    /* Mobile sidebar toggle tab */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        width: 100%;
        padding: var(--space-sm) var(--space-md);
        background: var(--bg-input);
        border: none;
        border-bottom: 1px solid var(--border-dim);
        color: var(--accent-cyan);
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        cursor: pointer;
        min-height: 48px;
    }

    .sidebar-toggle::after {
        content: "▲ STATUS";
    }

    .sidebar.expanded .sidebar-toggle::after {
        content: "▼ STATUS";
    }

    .main-content {
        height: 100vh;
        height: 100dvh;
        padding-bottom: 70px; /* Space for input area */
    }

    .narrative-pane {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-md);
    }

    .input-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-sm);
        gap: var(--space-xs);
        background: var(--bg-panel);
        border-top: 1px solid var(--border-dim);
        z-index: 190;
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0));
    }

    #player-input {
        font-size: 16px; /* Prevent iOS zoom on focus */
        min-height: 44px;
        flex: 1;
    }

    .btn-send {
        padding: var(--space-sm);
        min-width: 50px;
        flex-shrink: 0;
    }

    /* Hide audio button in input area on mobile - it's in the tab bar */
    .input-area .btn-audio,
    #audio-toggle {
        display: none !important;
    }

    /* Mobile HUD Bar - collapsible */
    .mobile-hud {
        display: block;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-dim);
        flex-shrink: 0;
    }

    .mobile-hud-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        cursor: pointer;
    }

    .mobile-hud-header:active {
        background: rgba(0, 212, 255, 0.05);
    }

    .mobile-hud-name {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--accent-cyan);
        font-weight: bold;
        font-size: var(--font-size-sm);
    }

    .mobile-hud-level {
        color: var(--accent-orange);
        font-size: 0.75rem;
    }

    .mobile-hud-vitals {
        display: flex;
        gap: var(--space-sm);
        font-size: 0.7rem;
    }

    .mobile-hud-vital {
        display: flex;
        gap: 2px;
    }

    .mobile-hud-vital .vital-label {
        color: var(--text-dim);
    }

    .mobile-hud-vital .vital-value {
        color: var(--text-primary);
    }

    .mobile-hud-vital .vital-value.healthy { color: var(--accent-green); }
    .mobile-hud-vital .vital-value.hurt { color: var(--accent-orange); }
    .mobile-hud-vital .vital-value.critical { color: var(--accent-red); }

    .mobile-hud-expand {
        color: var(--text-dim);
        font-size: 0.7rem;
        transition: transform 0.2s ease;
    }

    .mobile-hud.expanded .mobile-hud-expand {
        transform: rotate(180deg);
    }

    /* HUD Details - collapsed by default */
    .mobile-hud-details {
        display: none;
        padding: var(--space-sm) var(--space-md);
        border-top: 1px solid var(--border-dim);
        max-height: 40vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-hud.expanded .mobile-hud-details {
        display: block;
    }

    .mobile-hud-stats {
        display: flex;
        justify-content: space-around;
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border-dim);
    }

    .mobile-hud-stats .hud-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .mobile-hud-stats .stat-label {
        font-size: 0.6rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mobile-hud-stats .stat-value {
        font-size: var(--font-size-base);
        color: var(--text-primary);
        font-weight: bold;
    }

    .mobile-hud-skills {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .mobile-hud-skills .skill-tag {
        background: var(--bg-input);
        border: 1px solid var(--border-dim);
        color: var(--text-secondary);
        padding: 2px 6px;
        font-size: 0.65rem;
    }

    /* Smaller stats on mobile */
    .stats-grid {
        gap: var(--space-xs);
    }

    .stat {
        padding: var(--space-xs);
    }

    .stat-value {
        font-size: var(--font-size-base);
    }

    /* Narrative entry mobile adjustments */
    .narrative-entry {
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .narrative-entry.has-bg-image {
        padding-top: 180px;  /* Less space on mobile */
    }

    .narrative-entry.has-bg-image .narrative-text {
        padding: var(--space-md);
    }
}

/* Very small screens */
@media (max-width: 400px) {
    html {
        font-size: 14px;
    }

    .title-content h1 {
        letter-spacing: 0.1em;
    }

    .option-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar - HIDDEN, replaced by unified HUD */
.sidebar {
    display: none !important;
}

/* Hide mobile toggle on desktop */
.sidebar-toggle {
    display: none;
}

/* ===== ACCORDION SECTIONS ===== */
.accordion-section {
    border: 1px solid var(--border-dim);
    margin-bottom: -1px; /* Collapse borders */
}

.accordion-section:first-child {
    border-radius: 2px 2px 0 0;
}

.accordion-section:last-child {
    border-radius: 0 0 2px 2px;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: rgba(0, 212, 255, 0.05);
}

.accordion-header.active {
    background: rgba(0, 212, 255, 0.08);
    border-bottom: 1px solid var(--border-dim);
}

.accordion-title {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: bold;
}

.accordion-icon {
    color: var(--text-dim);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: var(--space-sm);
    background: var(--bg-panel);
    max-height: calc(100vh - 300px); /* Limit height to prevent overflow */
    overflow-y: auto;
}

.accordion-content.active {
    display: block;
}

/* Compact stats for accordion */
.accordion-content .stats-grid {
    gap: var(--space-xs);
}

.accordion-content .stat {
    padding: var(--space-xs);
}

.accordion-content .stat-value {
    font-size: var(--font-size-base);
}

/* ===== HUD HEADER - Always visible ===== */
.hud-header {
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(180deg, var(--bg-input) 0%, var(--bg-panel) 100%);
    border-bottom: 1px solid var(--border-bright);
    flex-shrink: 0;
}

.hud-name {
    color: var(--accent-cyan);
    font-size: var(--font-size-base);
    font-weight: bold;
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-level {
    color: var(--accent-orange);
    font-size: var(--font-size-sm);
}

.hud-vitals {
    display: flex;
    gap: var(--space-sm);
    font-size: 0.7rem;
}

.hud-vital {
    display: flex;
    gap: var(--space-xs);
}

.hud-vital-label {
    color: var(--text-dim);
}

.hud-vital-value {
    color: var(--text-primary);
}

.hud-vital-value.healthy { color: var(--accent-green); }
.hud-vital-value.hurt { color: var(--accent-orange); }
.hud-vital-value.critical { color: var(--accent-red); }

.btn-full-sheet {
    display: block;
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-full-sheet:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

/* Accordion container */
.accordion-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.player-info h3 {
    color: var(--accent-cyan);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.stat {
    background: var(--bg-input);
    padding: var(--space-sm);
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

/* Level Display */
.level-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    gap: var(--space-xs);
}

.level-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
}

.level-value {
    font-size: var(--font-size-2xl);
    color: var(--accent-cyan);
    font-weight: bold;
}

.level-progress {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
}

.level-progress span:first-child {
    color: var(--accent-orange);
}

.resources {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.resource {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--bg-input);
}

.resource-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.resource-value {
    color: var(--accent-orange);
}

.clocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.clock {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.clock-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.clock-bar {
    height: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    overflow: hidden;
}

.clock-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.clock.heat .clock-fill {
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-red));
}

.clock.inertia .clock-fill {
    background: linear-gradient(90deg, var(--text-dim), var(--text-secondary));
}

.clock-value {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: right;
}

.condition {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
}

.condition-item {
    display: flex;
    justify-content: space-between;
}

.condition-item .healthy {
    color: var(--accent-green);
}

.condition-item .scratched {
    color: var(--accent-orange);
}

.condition-item .hurt {
    color: var(--accent-red);
}

.condition-item .critical {
    color: var(--accent-red);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Main Content */
.main-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Prevent main content from scrolling */
}

.narrative-pane {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    padding-top: 60px; /* Space for fixed HUD */
    min-height: 0; /* Critical for flex child to scroll properly */
}

/* Input area is fixed at bottom - never scrolls */
.input-area {
    flex-shrink: 0; /* Don't shrink the input area */
}

.narrative-entry {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-dim);
}

.narrative-entry:last-child {
    border-bottom: none;
}

.narrative-entry.player {
    color: var(--accent-cyan);
}

.narrative-entry.player::before {
    content: "> ";
    opacity: 0.5;
}

.narrative-entry.gm {
    color: var(--text-primary);
    white-space: pre-wrap;
}

.narrative-entry.system {
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.roll-result {
    display: inline-block;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-sm) 0;
    font-size: var(--font-size-sm);
}

.roll-result.success {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.roll-result.failure {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* Roll Display */
.roll-display {
    padding: var(--space-lg);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.roll-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.roll-desc {
    color: var(--text-primary);
}

.roll-threshold {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.btn-roll {
    background: var(--accent-orange);
    color: var(--bg-dark);
    border-color: var(--accent-orange);
    padding: var(--space-md) var(--space-xl);
}

.btn-roll:hover {
    background: #ff9922;
    box-shadow: 0 0 20px rgba(255, 136, 0, 0.4);
}

/* Input Area */
.input-area {
    padding: var(--space-lg);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    display: flex;
    gap: var(--space-md);
    /* Positioned containing block for the absolute @mention popover.
       Mobile media query overrides this to position: fixed; bottom: 0. */
    position: relative;
}

/* Wraps the textarea and its mention-highlight overlay so they share
   the same flex slot and identical geometry. */
.player-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

#player-input {
    flex: 1;
    resize: none;
    padding: var(--space-md);
    /* Transparent so the .player-input-highlight overlay can render
       behind the live text. The wrapper's :has() rule below sets the
       backing color so the input area still looks like an input. */
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    line-height: 1.4;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Match the input field's background on the wrapper so removing the
   textarea's own background doesn't leave a hole. */
.player-input-wrapper {
    background: var(--bg-input);
    border-radius: 0;
}

/* Highlight overlay: mirrors the textarea text with @-mention tokens
   wrapped in styled spans. Invisible plain text, so only the
   highlighted spans show through behind the live textarea. */
.player-input-highlight {
    position: absolute;
    inset: 0;
    padding: var(--space-md);
    margin: 0;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    color: transparent;
    z-index: 1;
}
.player-input-highlight .mention-token {
    color: var(--accent-cyan);
    background: rgba(0, 200, 230, 0.18);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}

#player-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.btn-send {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border-color: var(--accent-cyan);
    padding: var(--space-md) var(--space-lg);
}

.btn-send:hover:not(:disabled) {
    background: #00b8dd;
}

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

/* @mention typeahead — popover + chip row */
.mention-popover {
    position: absolute;
    bottom: calc(100% + 4px);
    left: var(--space-lg);
    right: var(--space-lg);
    max-width: 420px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--accent-cyan);
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    z-index: 50;
    font-family: var(--font-mono);
}
.mention-item {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-dim);
    align-items: flex-start;
}
.mention-item:last-child { border-bottom: none; }
.mention-item.selected,
.mention-item:hover {
    background: rgba(0, 200, 230, 0.15);
}
.mention-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--bg-input, #111);
    border: 1px solid var(--border-dim);
}
.mention-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 18px;
}
.mention-body {
    flex: 1 1 auto;
    min-width: 0;
}
.mention-name {
    color: var(--accent-cyan);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.mention-meta {
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    margin-top: 2px;
}
.mention-desc {
    color: var(--text-primary, #ddd);
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mention-chips {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    order: -1;
}
.mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 200, 230, 0.18);
    border: 1px solid var(--accent-cyan);
    border-radius: 12px;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 11px;
}
.mention-chip-remove {
    background: none;
    border: none;
    color: var(--accent-cyan);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.mention-chip-remove:hover { color: #fff; }

/* Loading state */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: "...";
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* State change notifications */
.state-change {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs);
    font-size: var(--font-size-sm);
    border-radius: 2px;
}

.state-change.positive {
    background: rgba(68, 255, 136, 0.1);
    color: var(--accent-green);
}

.state-change.negative {
    background: rgba(255, 68, 68, 0.1);
    color: var(--accent-red);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --bg-dark: #000;
        --bg-panel: #111;
        --text-primary: #fff;
        --border-dim: #444;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
/* Prevent text cursor on non-input elements */
body, button, a, li, div, span, td, th, label {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

a, button, .clickable, .player-card, .btn-primary, .btn-secondary {
    cursor: pointer;
}

input, textarea, select, [contenteditable="true"] {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}


}

/* Audio Controls */
.btn-audio {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-audio:hover {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.btn-audio.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.btn-audio .audio-icon {
    font-size: 1.2rem;
}

/* Handsfree Voice Mode Button */
.btn-handsfree {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-handsfree:hover {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.btn-handsfree.active {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan);
    color: var(--bg-dark);
    animation: handsfree-pulse 2s ease-in-out infinite;
}

.btn-handsfree.listening {
    border-color: var(--accent-green);
    background: rgba(0, 255, 128, 0.2);
}

.btn-handsfree.processing {
    border-color: var(--accent-orange);
    background: rgba(255, 165, 0, 0.2);
}

.btn-handsfree .handsfree-icon {
    font-size: 1.2rem;
}

@keyframes handsfree-pulse {
    0%, 100% { box-shadow: 0 0 5px var(--accent-cyan); }
    50% { box-shadow: 0 0 15px var(--accent-cyan), 0 0 30px rgba(0, 212, 255, 0.3); }
}

/* Audio Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    padding: var(--space-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90dvh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 85dvh;
        padding: var(--space-md);
    }
}

.modal-content h3 {
    color: var(--accent-cyan);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-lg);
}

.audio-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.audio-status {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
}

.audio-status .status-ready {
    color: var(--accent-green);
}

.audio-status .status-fallback {
    color: var(--accent-orange);
}

.audio-option {
    display: flex;
    align-items: center;
}

.audio-option label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.audio-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-cyan);
}

#model-download {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-md);
}

#model-download p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.progress-bar {
    height: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    margin-top: var(--space-md);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-cyan);
    transition: width 0.3s ease;
}

.audio-test {
    display: flex;
    gap: var(--space-sm);
}

.btn-test {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.btn-test:hover {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

/* TTS Text Highlighting */
.narrative-entry.tts-speaking {
    position: relative;
}

.narrative-entry.tts-speaking::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tts-progress, 0%);
    background: linear-gradient(90deg,
        rgba(0, 212, 255, 0.08) 0%,
        rgba(0, 212, 255, 0.15) 90%,
        rgba(0, 212, 255, 0.3) 100%
    );
    pointer-events: none;
    transition: width 0.1s linear;
}

.narrative-entry.tts-speaking {
    border-left: 2px solid var(--accent-cyan);
    padding-left: calc(var(--space-md) - 2px);
}

.tts-highlight {
    background: rgba(0, 212, 255, 0.3);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0 2px;
}

/* Pulse animation for speaking indicator */
@keyframes speaking-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.btn-audio.speaking .audio-icon {
    animation: speaking-pulse 1s ease-in-out infinite;
}

/* Narrative Images - Background style */
.narrative-entry.has-bg-image {
    position: relative;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-dim);
    margin-bottom: var(--space-lg);
    padding: 250px 0 0 0;  /* Space for image at top */
    overflow: hidden;
}

.narrative-entry.has-bg-image .narrative-text {
    position: relative;
    z-index: 2;
    background: rgba(10, 10, 15, 0.65);
    padding: var(--space-lg);
    margin: 0;
}

/* Click anywhere to view full image */
.narrative-entry.has-bg-image {
    cursor: pointer;
}

.narrative-entry.has-bg-image:hover {
    border-color: var(--accent-cyan);
}

/* Loading state for background images */
.narrative-entry.has-bg-image.loading-image {
    background-color: var(--bg-panel);
}

.narrative-entry.has-bg-image.loading-image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-dim);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

/* Legacy inline images (for backwards compat) */
.narrative-image {
    margin: var(--space-md) 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    background: var(--bg-panel);
}

.narrative-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.narrative-image img:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Loading state for images */
.narrative-image.loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.narrative-image.loading::after {
    content: "Generating image...";
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Image Modal */
.image-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-dark);
}

.image-modal-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.image-modal-content .modal-close {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    width: auto;
    height: auto;
    font-size: 1rem;
}

.image-modal-content .modal-close:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-input);
}

/* Image generation indicator */
.generating-image {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-sm);
}

.generating-image::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--accent-cyan);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scene Choices */
.scene-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    margin-bottom: var(--space-lg);
}

.scene-choice-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 48px;
}

.scene-choice-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.scene-choice-btn.continue-btn {
    text-align: center;
    color: var(--accent-cyan);
}

/* Choice item with description */
.scene-choice-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.scene-choice-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding-left: var(--space-md);
    margin: 0;
    opacity: 0.8;
}

/* Text input scene (e.g., name collection) */
.scene-text-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.scene-input-prompt {
    color: var(--accent-cyan);
    font-size: var(--font-size-lg);
}

.scene-text-field {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    transition: all 0.2s ease;
}

.scene-text-field:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.scene-text-field::placeholder {
    color: var(--text-dim);
}

/* Skill selection scene */
.skill-select-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 800px;
}

.skill-select-prompt {
    color: var(--accent-cyan);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
}

.skill-select-count {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.skill-select-count span {
    color: var(--accent-orange);
    font-weight: bold;
}

.skill-select-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.skill-stat-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.skill-stat-label {
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
}

.skill-select-btn {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-mono);
    transition: all 0.2s ease;
}

.skill-select-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.skill-select-btn.selected {
    border-color: var(--accent-orange);
    background: rgba(255, 136, 0, 0.1);
}

.skill-select-btn strong {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.skill-select-btn span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Interface messages in scene text */
.interface-msg {
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    display: block;
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0;
    background: rgba(0, 212, 255, 0.1);
    border-left: 2px solid var(--accent-cyan);
}

/* Thoughts in scene text (italic) */
.thought {
    color: var(--text-secondary);
    font-style: italic;
}

/* Scene text paragraphs */
.narrative-text p {
    margin: 0 0 var(--space-md) 0;
}

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

/* Timeline Intro - Cinematic newspaper headlines */
.timeline-intro {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0a0f;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Cinematic letterbox bars */
.timeline-intro::before,
.timeline-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8%;
    background: #000;
    z-index: 10;
}
.timeline-intro::before { top: 0; }
.timeline-intro::after { bottom: 0; }

.timeline-slide {
    position: relative;
    width: 90%;
    max-width: 900px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.timeline-slide.visible {
    opacity: 1;
}

/* Newspaper masthead */
.timeline-masthead {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

/* Year display */
.timeline-year {
    font-family: var(--font-mono);
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--accent-orange);
    margin-bottom: var(--space-lg);
    text-shadow: 0 0 30px rgba(255, 136, 0, 0.3);
}

/* Image container */
.timeline-image-container {
    position: relative;
    margin: 0 auto var(--space-lg);
    max-width: 800px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.timeline-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: #1a1a1f;
}

/* Headline overlay */
.timeline-headline {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.timeline-subtext {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--accent-cyan);
    font-style: italic;
    opacity: 0.9;
}

/* Skip button */
.timeline-skip {
    position: absolute;
    bottom: calc(8% + var(--space-xl));
    right: var(--space-xl);
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
    z-index: 2001;
    transition: all 0.2s ease;
}

.timeline-skip:hover {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .timeline-year {
        font-size: 2.5rem;
    }
    .timeline-headline {
        font-size: 1.3rem;
    }
    .timeline-subtext {
        font-size: 0.95rem;
    }
}

/* The Tap - Diegetic Quest Log */
.tap-panel {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    margin-top: auto; /* Push to bottom of sidebar */
}

.tap-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.tap-header:hover {
    background: rgba(0, 212, 255, 0.05);
}

.tap-icon {
    color: var(--accent-cyan);
    font-size: 0.8rem;
    animation: tap-pulse 2s ease-in-out infinite;
}

@keyframes tap-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.tap-title {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.tap-expand {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
}

.tap-expand:hover {
    color: var(--accent-cyan);
}

.tap-content {
    padding: var(--space-md);
    border-top: 1px solid var(--border-dim);
}

.tap-message {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
    line-height: 1.5;
}

.tap-threads {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    max-height: 200px;
    overflow-y: auto;
}

.tap-thread {
    padding: var(--space-sm);
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tap-thread:hover {
    border-color: var(--accent-cyan);
}

.tap-thread.focused {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.tap-thread.mandated {
    border-left: 2px solid var(--accent-orange);
}

.tap-thread.urgent {
    border-left: 2px solid var(--accent-red);
}

.tap-thread-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.tap-thread-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.tap-thread-type {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tap-thread-progress {
    color: var(--text-secondary);
}

.tap-actions {
    display: flex;
    gap: var(--space-sm);
}

.tap-btn {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    color: var(--accent-cyan);
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tap-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

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

/* Tap Guidance Response */
.tap-guidance {
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid var(--accent-cyan);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-style: italic;
}

/* Skills List in sidebar */
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-dim);
}

.skill-tag {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: 2px 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.skill-tag .skill-level {
    color: var(--accent-cyan);
    margin-left: 2px;
}

/* Contacts Panel */
.contacts-panel {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    margin-top: var(--space-md);
}

.contacts-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.contacts-header:hover {
    background: rgba(255, 136, 0, 0.05);
}

.contacts-icon {
    font-size: 0.8rem;
}

.contacts-title {
    color: var(--accent-orange);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    flex: 1;
}

.contacts-expand {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0 var(--space-xs);
}

.contacts-content {
    padding: var(--space-sm);
    border-top: 1px solid var(--border-dim);
}

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.contact-item {
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-item:hover {
    border-color: var(--accent-orange);
    background: rgba(255, 136, 0, 0.05);
}

.contact-name {
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: bold;
}

.contact-role {
    color: var(--text-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.contact-trust {
    font-size: 0.6rem;
    margin-top: 2px;
}

.contact-trust.ally { color: var(--accent-green); }
.contact-trust.contact { color: var(--accent-cyan); }
.contact-trust.neutral { color: var(--text-secondary); }
.contact-trust.hostile { color: var(--accent-red); }

.contact-status {
    font-size: 0.55rem;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    display: inline-block;
}

.contact-status.romantic {
    background: rgba(255, 100, 150, 0.2);
    color: #ff6b9d;
    border: 1px solid rgba(255, 100, 150, 0.3);
}

.contact-status.unavailable {
    background: rgba(100, 100, 100, 0.2);
    color: var(--text-dim);
    border: 1px solid rgba(100, 100, 100, 0.3);
    font-style: italic;
}

.contacts-empty {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-style: italic;
    text-align: center;
    padding: var(--space-md);
}

/* Contact portraits */
.contact-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}
.contact-portrait {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-dim);
    flex-shrink: 0;
}
.contact-info {
    flex: 1;
    min-width: 0;
}

/* Contact detail modal */
.contact-modal-content {
    max-width: 500px;
    width: 90vw;
}
.contact-detail-portrait {
    text-align: center;
    margin-bottom: var(--space-md);
}
.contact-full-portrait {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    border: 2px solid var(--border-dim);
}
.contact-detail-info h2 {
    margin: 0 0 var(--space-sm) 0;
    color: var(--text-primary);
}
.contact-detail-meta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.contact-detail-meta span {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-hover);
}
.contact-disposition { color: var(--accent-cyan); }
.contact-role-tag { color: var(--text-secondary); }
.contact-romantic { color: #ff6b9d; }
.contact-detail-facts h3 {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
}
.contact-detail-facts ul {
    margin: 0;
    padding-left: 1.2em;
}
.contact-detail-facts li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* Contact demographics */
.contact-demographics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 2px solid var(--border-dim);
}
.demo-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.demo-label {
    color: var(--text-dim);
    margin-right: 4px;
}

/* Awakened status badge */
.contact-status.awakened {
    background: rgba(0, 255, 157, 0.15);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.tap-guidance.confidence-high {
    border-left-color: var(--accent-cyan);
}

.tap-guidance.confidence-medium {
    border-left-color: var(--accent-orange);
}

.tap-guidance.confidence-low {
    border-left-color: var(--text-dim);
}

.tap-guidance.confidence-none {
    border-left-color: var(--accent-red);
    color: var(--text-secondary);
}

/* Pressure indicator in sidebar */
.pressure-indicator {
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pressure-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.pressure-value {
    font-weight: bold;
}

.pressure-value.stable {
    color: var(--accent-green);
}

.pressure-value.stressed {
    color: var(--accent-orange);
}

.pressure-value.critical {
    color: var(--accent-red);
}

.pressure-value.terminal {
    color: var(--accent-red);
    animation: pulse 1s infinite;
}

.pressure-state {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.pressure-indicator.stable .pressure-value,
.pressure-indicator.stable .pressure-state {
    color: var(--accent-green);
}

.pressure-indicator.stressed .pressure-value,
.pressure-indicator.stressed .pressure-state {
    color: var(--accent-orange);
}

.pressure-indicator.critical .pressure-value,
.pressure-indicator.critical .pressure-state {
    color: var(--accent-red);
}

.pressure-indicator.terminal .pressure-value,
.pressure-indicator.terminal .pressure-state {
    color: var(--accent-red);
    animation: pulse 1s infinite;
}

/* Additional Tap thread elements */
.thread-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.thread-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.thread-warning {
    font-size: 0.65rem;
    color: var(--accent-orange);
    margin-top: var(--space-xs);
    font-style: italic;
}

.tap-empty {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    font-style: italic;
    text-align: center;
    padding: var(--space-md);
}

/* Tap guidance display in narrative */
.narrative-entry.tap-guidance {
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid var(--accent-cyan);
}

.narrative-entry.tap-guidance.success {
    border-left-color: var(--accent-cyan);
}

.narrative-entry.tap-guidance.failed {
    border-left-color: var(--accent-orange);
    background: rgba(255, 165, 0, 0.05);
}

.guidance-header {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.tap-guidance.failed .guidance-header {
    color: var(--accent-orange);
}

.guidance-text {
    font-style: italic;
    color: var(--text-primary);
}

/* Resume context styling */
.narrative-entry.resume-context {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid var(--accent-cyan);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.resume-header {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-sm);
}

.resume-text {
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.narrative-entry.pressure-warning {
    color: var(--accent-orange);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.narrative-entry.divider {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin: var(--space-md) 0;
}

/* ===== GAME OVER SCREEN ===== */

#game-over-screen {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
    /* display controlled by .screen/.active - don't override here */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#game-over-screen.active {
    display: flex;
}

.game-over-content {
    text-align: center;
    max-width: 500px;
    padding: var(--space-xl);
}

.tombstone {
    margin: 0 auto var(--space-xl);
    max-width: 300px;
}

.tombstone-top {
    width: 200px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-radius: 100px 100px 0 0;
    border: 2px solid #4a4a4a;
    border-bottom: none;
}

.tombstone-body {
    width: 200px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #4a4a4a;
    border-top: none;
    padding: var(--space-lg) var(--space-md);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epitaph {
    font-family: 'Times New Roman', serif;
    font-size: 1rem;
    color: #8a8a8a;
    line-height: 1.6;
    text-align: center;
    font-style: italic;
}

.game-over-actions {
    margin-top: var(--space-xl);
}

.game-over-message {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
    font-style: italic;
}

#new-game-after-death {
    background: var(--accent-red);
    border-color: var(--accent-red);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-md);
}

#new-game-after-death:hover {
    background: #ff4444;
    border-color: #ff4444;
}

/* Death animation for narrative */
@keyframes fadeToBlack {
    0% { opacity: 1; }
    100% { opacity: 0; filter: grayscale(100%); }
}

.dying {
    animation: fadeToBlack 3s forwards;
}

/* ===== CHARACTER SHEET MODAL ===== */

#character-modal .modal-content.character-sheet {
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0a0a0a 100%);
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.2);
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-dim);
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.05), transparent);
}

.sheet-header h2 {
    margin: 0;
    color: var(--accent-cyan);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.modal-close {
    background: none;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.sheet-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

@media (max-width: 700px) {
    .sheet-body {
        grid-template-columns: 1fr;
    }
}

.sheet-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sheet-section {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-md);
}

.sheet-section h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.15em;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
}

/* Voice interface settings */
.voice-settings-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.voice-settings-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.voice-settings-row input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    font-family: inherit;
    font-size: 0.85rem;
}

.voice-settings-row input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.btn-save-setting {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-save-setting:hover {
    background: var(--accent-green);
}

.btn-save-setting.saved {
    background: var(--accent-green);
}

.setting-hint {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin: var(--space-xs) 0 0 0;
    font-style: italic;
}

/* Stats with bars */
.sheet-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sheet-stat {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: var(--space-sm);
}

.stat-name {
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}

.stat-bar {
    height: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
    transition: width 0.3s ease;
}

.stat-num {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: right;
}

/* Condition */
.sheet-condition {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.condition-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
}

.cond-label {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.cond-status {
    font-size: 0.75rem;
    font-weight: bold;
}

.cond-status.healthy, .sheet-condition .healthy { color: var(--accent-green); }
.cond-status.bruised, .sheet-condition .bruised { color: var(--accent-yellow); }
.cond-status.wounded, .sheet-condition .wounded { color: var(--accent-orange); }
.cond-status.critical, .sheet-condition .critical { color: var(--accent-red); }

/* Resources */
.sheet-resources {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.res-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.res-icon {
    color: var(--accent-yellow);
    font-size: 1rem;
    text-align: center;
}

.res-name {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.res-val {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: bold;
    font-family: var(--font-mono);
}

/* Unspent Points Section */
.unspent-points-section {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.1), rgba(255, 100, 0, 0.1));
    border: 1px solid var(--accent-yellow);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

.unspent-points-section h3 {
    color: var(--accent-yellow);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 5px var(--accent-yellow); }
    50% { text-shadow: 0 0 15px var(--accent-yellow), 0 0 25px var(--accent-orange); }
}

.unspent-points-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.unspent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
}

.unspent-label {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.unspent-val {
    color: var(--accent-yellow);
    font-size: 1.1rem;
    font-weight: bold;
    font-family: var(--font-mono);
}

.btn-allocate-points {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    color: var(--bg-darkest);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-allocate-points:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px var(--accent-yellow);
}

/* Skills */
.sheet-skills {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.sheet-skill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-dark);
    border-left: 2px solid var(--accent-cyan);
}

.skill-info {
    display: flex;
    flex-direction: column;
}

.skill-name {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: bold;
}

.skill-desc {
    color: var(--text-dim);
    font-size: 0.65rem;
    font-style: italic;
}

.skill-bonus {
    color: var(--accent-green);
    font-size: 0.9rem;
    font-weight: bold;
    font-family: var(--font-mono);
}

/* Background */
.sheet-background {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}

.sheet-background .bg-label {
    color: var(--text-dim);
    font-size: 0.7rem;
    margin-bottom: var(--space-xs);
}

.sheet-background .bg-value {
    color: var(--accent-cyan);
    text-transform: capitalize;
}

/* Threat bars */
.sheet-threats {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.threat-row {
    display: grid;
    grid-template-columns: 60px 1fr 30px;
    align-items: center;
    gap: var(--space-sm);
}

.threat-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}

.threat-bar {
    height: 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    overflow: hidden;
}

.threat-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.threat-fill.heat {
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-red));
}

.threat-fill.inertia {
    background: linear-gradient(90deg, var(--accent-yellow), var(--accent-orange));
}

.threat-val {
    font-size: 0.8rem;
    color: var(--text-primary);
    text-align: right;
    font-family: var(--font-mono);
}

/* Contacts in sheet */
.sheet-contacts {
    border-top: 1px solid var(--border-dim);
    padding: var(--space-lg);
}

.sheet-contacts h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.15em;
}

.sheet-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.sheet-contact {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sheet-contact-name {
    color: var(--text-primary);
    font-size: 0.8rem;
}

.sheet-contact-role {
    color: var(--text-dim);
    font-size: 0.65rem;
    text-transform: capitalize;
}

.sheet-contact-trust {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 2px;
}

.sheet-contact-trust.ally { background: rgba(0, 200, 100, 0.2); color: var(--accent-green); }
.sheet-contact-trust.friendly { background: rgba(0, 150, 200, 0.2); color: var(--accent-cyan); }
.sheet-contact-trust.neutral { background: rgba(100, 100, 100, 0.2); color: var(--text-dim); }
.sheet-contact-trust.suspicious { background: rgba(200, 150, 0, 0.2); color: var(--accent-yellow); }
.sheet-contact-trust.hostile { background: rgba(200, 50, 50, 0.2); color: var(--accent-red); }

/* ===== EQUIPMENT SECTION ===== */

.sheet-equipment {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-dim);
}

.sheet-equipment h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.15em;
}

.equipment-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
}

@media (max-width: 700px) {
    .equipment-layout {
        grid-template-columns: 1fr;
    }
}

.equipment-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    max-width: 280px;
}

.equip-slot {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
}

.equip-slot:hover {
    border-color: var(--accent-cyan);
}

.equip-slot.weapon {
    grid-column: span 2;
    border-color: var(--accent-red);
    background: rgba(255, 50, 50, 0.05);
}

.equip-slot.accessory {
    grid-column: span 2;
    border-color: var(--accent-yellow);
    background: rgba(255, 200, 50, 0.05);
}

.slot-label {
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.slot-item {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.slot-item.empty {
    color: var(--text-dim);
    font-style: italic;
}

.slot-item.equipped {
    color: var(--accent-cyan);
}

.inventory-section {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: var(--space-sm);
}

.inventory-header span:first-child {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
}

.plasma-display {
    font-size: 0.75rem;
    color: var(--accent-magenta);
}

.plasma-icon {
    color: var(--accent-magenta);
}

.inventory-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
}

.inventory-item {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.inventory-item:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 200, 255, 0.05);
}

.inventory-item.body-mod {
    border-color: var(--accent-magenta);
}

.inventory-item.body-mod:hover {
    border-color: var(--accent-magenta);
    background: rgba(255, 0, 255, 0.05);
}

.item-name {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.item-type {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.item-action {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.item-action:hover {
    background: var(--accent-green);
}

.item-action.unequip {
    background: var(--accent-red);
}

.inventory-empty {
    color: var(--text-dim);
    font-size: 0.8rem;
    font-style: italic;
    padding: var(--space-md);
    text-align: center;
}

/* Clickable sidebar player info */
.player-info {
    cursor: pointer;
    transition: border-color 0.2s;
}

.player-info:hover {
    border-color: var(--accent-cyan);
}

.player-info::after {
    content: 'Click for full sheet';
    display: block;
    text-align: center;
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-top: var(--space-xs);
    opacity: 0;
    transition: opacity 0.2s;
}

.player-info:hover::after {
    opacity: 1;
}

/* ===== LEVEL UP MODAL ===== */

#level-up-modal .modal-content.level-up-sheet {
    max-width: 700px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0a0a0a 100%);
    border: 2px solid var(--accent-green);
    box-shadow: 0 0 50px rgba(0, 255, 100, 0.3);
}

.level-up-header {
    text-align: center;
    padding: var(--space-xl);
    background: linear-gradient(180deg, rgba(0, 255, 100, 0.1), transparent);
    border-bottom: 1px solid var(--accent-green);
}

.level-up-header h2 {
    margin: 0;
    font-size: 2rem;
    color: var(--accent-green);
    letter-spacing: 0.2em;
    text-shadow: 0 0 20px rgba(0, 255, 100, 0.5);
    animation: levelUpPulse 2s ease-in-out infinite;
}

@keyframes levelUpPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 100, 0.5); }
    50% { text-shadow: 0 0 40px rgba(0, 255, 100, 0.8); }
}

.level-up-subtitle {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-top: var(--space-sm);
}

.level-up-subtitle span {
    color: var(--accent-green);
    font-weight: bold;
}

.level-up-body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.level-up-section {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-md);
}

.level-up-section h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.85rem;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-up-section h3 span {
    font-size: 0.75rem;
    color: var(--accent-green);
}

.level-up-attributes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.level-up-row {
    display: grid;
    grid-template-columns: 100px 50px 1fr;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    border: 1px solid var(--border-dim);
    background: var(--bg-dark);
}

.level-up-row .attr-name,
.level-up-row .skill-name {
    color: var(--text-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.level-up-row .attr-current,
.level-up-row .skill-current {
    color: var(--accent-cyan);
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
}

.attr-controls,
.skill-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.attr-btn,
.skill-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attr-btn:hover:not(:disabled),
.skill-btn:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.attr-btn:disabled,
.skill-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.attr-add,
.skill-add {
    min-width: 30px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}

.attr-add.positive,
.skill-add.positive {
    color: var(--accent-green);
}

.attr-add.positive::before,
.skill-add.positive::before {
    content: '+';
}

/* Skills list in level-up */
.level-up-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm);
    max-height: 300px;
    overflow-y: auto;
}

.level-up-skills .level-up-row {
    grid-template-columns: 1fr 40px auto;
}

/* Highlight skills player already has */
.level-up-row.unlocked {
    border-color: var(--accent-cyan);
    background: rgba(0, 255, 255, 0.05);
}

.level-up-row .skill-current.has-level {
    color: var(--accent-green);
    text-shadow: 0 0 5px var(--accent-green);
}

.level-up-footer {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    justify-content: center;
    border-top: 1px solid var(--border-dim);
}

.level-up-footer .btn-primary {
    background: var(--accent-green);
    color: var(--bg-dark);
    border: none;
    padding: var(--space-sm) var(--space-xl);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.1em;
}

.level-up-footer .btn-primary:hover {
    background: #00ff80;
    box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
}

.level-up-footer .btn-secondary {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.level-up-footer .btn-secondary:hover {
    border-color: var(--text-dim);
    color: var(--text-primary);
}

/* ============================================
   TRANSACTION CONFIRM MODAL
   ============================================ */

#transaction-modal .transaction-modal-content {
    max-width: 400px;
    padding: var(--space-lg);
}

#transaction-modal h3 {
    margin: 0 0 var(--space-lg) 0;
    color: var(--accent-cyan);
    font-size: 1.2rem;
}

.transaction-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.transaction-recipient {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.transaction-recipient label {
    color: var(--text-secondary);
    min-width: 60px;
}

.transaction-recipient span {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 1.1rem;
}

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

.transaction-amount label {
    color: var(--text-secondary);
    min-width: 60px;
}

.transaction-amount input {
    width: 150px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    color: var(--accent-gold);
    font-size: 1.2rem;
    font-weight: bold;
    text-align: right;
}

.transaction-amount input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.transaction-amount .currency {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.transaction-balance {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-dark);
    border-radius: 4px;
    font-size: 0.9rem;
}

.transaction-balance span {
    color: var(--text-secondary);
}

.transaction-balance strong {
    color: var(--accent-gold);
}

.transaction-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
}

.transaction-actions .btn-primary {
    background: var(--accent-green);
    color: var(--bg-dark);
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.transaction-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.transaction-actions .btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    cursor: pointer;
}

.transaction-actions .btn-secondary:hover {
    border-color: var(--text-secondary);
}

/* ============================================
   SHOP MODAL
   ============================================ */

#shop-modal .modal-content.shop-modal-content {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-md);
}

.shop-vendor h2 {
    color: var(--accent-yellow);
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.vendor-greeting {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.9rem;
    max-width: 400px;
}

.shop-player-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.money-display {
    font-size: 1.2rem;
    color: var(--accent-green);
    font-weight: bold;
}

.currency-symbol {
    color: var(--accent-yellow);
}

.shop-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.shop-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    padding: var(--space-sm) var(--space-lg);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-terminal);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.shop-tab:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.shop-tab.active {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border-color: var(--accent-cyan);
}

.shop-content {
    min-height: 300px;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    padding: var(--space-sm);
}

.shop-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    cursor: pointer;
    transition: all 0.2s;
}

.shop-item:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.shop-item.selected {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}

.shop-item-name {
    color: var(--text-primary);
    font-weight: bold;
    margin-bottom: var(--space-xs);
}

.shop-item-pitch {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.shop-item-price {
    color: var(--accent-green);
    font-weight: bold;
}

.shop-item-stock {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-left: var(--space-sm);
}

.shop-item.cant-afford .shop-item-price {
    color: var(--accent-red);
}

/* Special Offers */
.shop-specials {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--accent-yellow);
}

.shop-specials h3 {
    color: var(--accent-yellow);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

#shop-specials-grid {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.special-item {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), transparent);
    border: 1px solid var(--accent-yellow);
    padding: var(--space-md);
    flex: 1;
    min-width: 150px;
}

.special-item .reason {
    font-size: 0.75rem;
    color: var(--accent-yellow);
    margin-top: var(--space-xs);
}

/* Item Details Panel */
.shop-details-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 2px solid var(--accent-cyan);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    z-index: 1001;
}

.shop-details-panel .details-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.shop-details-panel .details-header h3 {
    margin: 0;
    color: var(--accent-cyan);
}

.item-type-badge {
    background: var(--bg-dark);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-dim);
}

.item-pitch {
    flex: 1;
    color: var(--text-dim);
    font-style: italic;
    max-width: 300px;
}

.details-footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.item-price, .mod-price {
    font-size: 1.2rem;
    color: var(--accent-green);
    font-weight: bold;
}

.item-stock {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Service Refused */
.shop-refused {
    text-align: center;
    padding: var(--space-xl);
}

.shop-refused .refused-icon {
    font-size: 4rem;
    color: var(--accent-red);
    margin-bottom: var(--space-md);
}

.shop-refused h3 {
    color: var(--accent-red);
    margin-bottom: var(--space-sm);
}

/* Shop Item Tier System */
.shop-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.shop-item-stats {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
}

.shop-item-stats .stat-value {
    color: var(--accent-cyan);
    font-weight: bold;
}

.shop-item-stats .socket-count {
    color: var(--text-dim);
}

.shop-item-stats .socket-icon {
    color: var(--accent-yellow);
}

.shop-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-sm);
}

/* Tier Badges */
.tier-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Tier 1 - Street: Gritty, worn */
.tier-badge.tier-1 {
    background: rgba(128, 128, 128, 0.3);
    color: #a0a0a0;
    border: 1px solid #666;
}

.shop-item.tier-1 {
    border-left: 3px solid #666;
}

/* Tier 2 - Professional: Clean, corporate */
.tier-badge.tier-2 {
    background: rgba(0, 150, 200, 0.2);
    color: #4dd4ff;
    border: 1px solid #0096c8;
}

.shop-item.tier-2 {
    border-left: 3px solid #0096c8;
}

/* Tier 3 - Medical Research: Experimental, glowing */
.tier-badge.tier-3 {
    background: rgba(0, 255, 150, 0.15);
    color: #50fa7b;
    border: 1px solid #00ff96;
}

.shop-item.tier-3 {
    border-left: 3px solid #00ff96;
}

/* Tier 4 - Military: Dangerous, warning */
.tier-badge.tier-4 {
    background: rgba(255, 100, 50, 0.2);
    color: #ff6b35;
    border: 1px solid #ff4500;
}

.shop-item.tier-4 {
    border-left: 3px solid #ff4500;
}

/* Tier 5 - Orbital: Premium, golden */
.tier-badge.tier-5 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 180, 0, 0.2));
    color: #ffd700;
    border: 1px solid #ffc000;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

.shop-item.tier-5 {
    border-left: 3px solid #ffd700;
    background: linear-gradient(135deg, var(--bg-surface), rgba(255, 215, 0, 0.05));
}

/* Item type badge with tier colors */
.item-type-badge.tier-1 { background: rgba(128, 128, 128, 0.3); color: #a0a0a0; }
.item-type-badge.tier-2 { background: rgba(0, 150, 200, 0.2); color: #4dd4ff; }
.item-type-badge.tier-3 { background: rgba(0, 255, 150, 0.15); color: #50fa7b; }
.item-type-badge.tier-4 { background: rgba(255, 100, 50, 0.2); color: #ff6b35; }
.item-type-badge.tier-5 { background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 180, 0, 0.2)); color: #ffd700; }

/* Detail stats in panel */
.details-stats {
    display: flex;
    gap: var(--space-lg);
}

.detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.detail-stat .stat-value {
    font-size: 1.1rem;
    color: var(--accent-cyan);
    font-weight: bold;
}

.shop-refused p {
    color: var(--text-dim);
}

/* ============================================
   CLINIC MODAL (RIPPERDOC)
   ============================================ */

#clinic-modal .modal-content.clinic-modal-content {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

.clinic-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--accent-red);
    margin-bottom: var(--space-md);
}

.clinic-vendor h2 {
    color: var(--accent-red);
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.clinic-player-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.plasma-bar-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.plasma-label {
    color: var(--accent-red);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.plasma-bar {
    width: 100px;
    height: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--accent-red);
    border-radius: 2px;
    overflow: hidden;
}

.plasma-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-red), #ff6666);
    transition: width 0.3s;
}

.plasma-value {
    color: var(--accent-red);
    font-size: 0.9rem;
}

/* First Free Banner */
.first-free-banner {
    background: linear-gradient(90deg, rgba(0, 255, 100, 0.1), transparent);
    border: 1px solid var(--accent-green);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.free-badge {
    background: var(--accent-green);
    color: var(--bg-dark);
    padding: 2px 8px;
    font-weight: bold;
    font-size: 0.8rem;
    animation: pulseFree 2s infinite;
}

@keyframes pulseFree {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Clinic Layout */
.clinic-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-lg);
}

.clinic-body-diagram h3,
.clinic-catalog h3 {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Body Slots */
.body-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.body-slot {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.body-slot:hover {
    border-color: var(--accent-red);
}

.body-slot.installed {
    border-color: var(--accent-cyan);
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent);
}

.slot-label {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.slot-item {
    color: var(--accent-cyan);
    font-size: 0.85rem;
}

.slot-item:empty::after,
.body-slot:not(.installed) .slot-item {
    color: var(--text-dim);
}

/* Clinic Items */
.clinic-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.clinic-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    cursor: pointer;
    transition: all 0.2s;
}

.clinic-item:hover {
    border-color: var(--accent-red);
}

.clinic-item.selected {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}

.clinic-item-name {
    color: var(--text-primary);
    font-weight: bold;
    margin-bottom: var(--space-xs);
}

.clinic-item-slot {
    color: var(--accent-red);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.clinic-item-pitch {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.clinic-item-costs {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.clinic-item-price {
    color: var(--accent-green);
}

.clinic-item-plasma {
    color: var(--accent-red);
}

/* Clinic Details Panel */
.clinic-details-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 2px solid var(--accent-red);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    z-index: 1001;
}

.clinic-details-panel .details-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.clinic-details-panel .details-header h3 {
    margin: 0;
    color: var(--accent-red);
}

.mod-slot-badge {
    background: var(--accent-red);
    color: var(--bg-dark);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.mod-pitch {
    flex: 1;
    color: var(--text-dim);
    font-style: italic;
    max-width: 300px;
}

.plasma-cost {
    margin-top: var(--space-sm);
}

.plasma-cost .cost-label {
    color: var(--text-dim);
    margin-right: var(--space-sm);
}

.plasma-cost .cost-value {
    color: var(--accent-red);
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .clinic-layout {
        grid-template-columns: 1fr;
    }

    .shop-details-panel,
    .clinic-details-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 20px));
        max-height: 50vh;
        overflow-y: auto;
    }

    .details-footer {
        justify-content: center;
        padding: var(--space-md) 0;
    }

    .details-footer .btn-primary {
        min-height: 44px;
        min-width: 120px;
        font-size: 1rem;
        touch-action: manipulation;
    }
}

/* Auth Screen */
#auth-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0f0f1a 100%);
}

.auth-content {
    max-width: 400px;
    width: 90%;
    padding: var(--space-xl);
}

.auth-content h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    letter-spacing: 0.2em;
    color: var(--accent-cyan);
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    margin-bottom: var(--space-md);
}

.auth-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.auth-tab {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-lg);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

.auth-tab:hover {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.auth-tab.active {
    background: var(--bg-input);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.auth-form input {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
}

.auth-form input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.auth-error {
    color: var(--accent-red);
    font-size: var(--font-size-sm);
    min-height: 1.5em;
}

.auth-info {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.auth-link {
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
}

.auth-link:hover {
    text-decoration: underline;
}

.recovery-section {
    text-align: left;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.recovery-section summary {
    cursor: pointer;
    color: var(--accent-cyan);
    padding: var(--space-sm) 0;
}

.recovery-section input {
    margin-top: var(--space-sm);
}

#reset-password-form h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

#logout-btn {
    margin-top: var(--space-lg);
}

/* Recent Changes */
.recent-changes {
    width: 100%;
    max-width: 500px;
    margin: var(--space-lg) auto;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.recent-changes h4 {
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-sm) 0;
    text-align: center;
}

.recent-changes-list {
    display: flex;
    flex-direction: column;
}

.change-date {
    color: var(--accent-yellow);
    font-size: var(--font-size-xs);
    font-weight: bold;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
}

.change-date:first-child {
    margin-top: 0;
}

.change-item {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-xs) 0;
    padding-left: var(--space-sm);
    line-height: 1.4;
}

.btn-changelog {
    display: block;
    width: 100%;
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-changelog:hover {
    background: var(--bg-hover);
    border-color: var(--accent-cyan);
}

/* Changelog Modal */
.changelog-modal-content {
    width: 100%;
    max-width: 600px;
    /* dvh, not vh: on iOS vh is the large (toolbars-hidden) viewport, which made
       the modal taller than the visible screen and pushed the header — and its
       close button — off the top. dvh tracks the actual visible height. */
    max-height: 85dvh;
    margin: var(--space-md);
    display: flex;
    flex-direction: column;
}

.changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
}

.changelog-header h2 {
    margin: 0;
    color: var(--accent-cyan);
    font-size: var(--font-size-lg);
}

.changelog-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm) 0;
    -webkit-overflow-scrolling: touch;
}

.changelog-date {
    color: var(--accent-yellow);
    font-size: var(--font-size-sm);
    font-weight: bold;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.changelog-date:first-child {
    margin-top: 0;
}

.changelog-item {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-xs) 0;
    padding-left: var(--space-sm);
    line-height: 1.4;
}

.changelog-footer {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-dim);
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .recent-changes {
        margin: var(--space-md) auto;
        padding: var(--space-sm);
    }

    .changelog-modal-content {
        margin: var(--space-sm);
        max-height: 90dvh;
    }

    .changelog-header h2 {
        font-size: var(--font-size-md);
    }
}

/* Account Settings */
.account-settings {
    width: 100%;
    max-width: 400px;
    margin: var(--space-lg) auto;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.account-settings summary {
    cursor: pointer;
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    text-align: center;
}

.account-settings-content {
    margin-top: var(--space-md);
}

.settings-username {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    text-align: center;
}

.settings-username span {
    color: var(--text-primary);
    font-weight: bold;
}

.recovery-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.recovery-settings h4 {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.recovery-settings input {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

.recovery-settings input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.recovery-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.btn-small {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    cursor: pointer;
}

.btn-small:hover {
    filter: brightness(1.2);
}

.btn-small.btn-danger {
    background: var(--accent-red);
}

.settings-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.settings-message {
    font-size: var(--font-size-sm);
    min-height: 1.2em;
}

/* Player Selection Screen */
#player-select-screen {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-xl);
    background: linear-gradient(180deg, var(--bg-dark) 0%, #0f0f1a 100%);
    overflow-y: auto;
}

.player-select-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.player-select-content h1 {
    font-size: clamp(1.5rem, 6vw, 3rem);
    letter-spacing: 0.2em;
    color: var(--accent-cyan);
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xl);
}

.player-select-content .tagline {
    margin-bottom: var(--space-xl);
}

.player-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    min-height: 100px;
}

.player-list .loading,
.player-list .error,
.player-list .no-games {
    color: var(--text-secondary);
    padding: var(--space-xl);
    font-style: italic;
}

.player-list .error {
    color: var(--accent-red);
}

.player-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    padding: var(--space-lg);
    text-align: left;
    transition: all 0.2s;
}

.player-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.player-card.dead {
    opacity: 0.6;
    border-color: var(--accent-red);
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.player-name {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: bold;
}

.player-phase {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border-radius: 2px;
    color: var(--text-secondary);
}

.player-phase.opening { color: var(--accent-cyan); }
.player-phase.act1 { color: var(--accent-green); }
.player-phase.act2 { color: var(--accent-orange); }
.player-phase.act3 { color: var(--accent-red); }
.player-phase.dead { color: var(--accent-red); background: rgba(255, 68, 68, 0.2); }

.player-card-info {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.player-card-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.player-card-actions .btn-continue {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

.player-card-actions .btn-continue:hover {
    background: var(--text-primary);
}

.player-card-actions .btn-delete {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

.player-card-actions .btn-delete:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.player-select-actions {
    margin-bottom: var(--space-lg);
}

#new-game-select-btn {
    font-size: var(--font-size-lg);
    padding: var(--space-md) var(--space-xl);
}

#logout-select-btn {
    margin-top: var(--space-md);
}

/* Admin Corner Link */
.corner-link {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    color: var(--text-dim);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-dim);
    transition: all 0.2s;
    z-index: 100;
}

.corner-link:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

/* Pending badge for Admin link */
.pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

/* My Games button - fixed bottom left */
#back-to-games-link {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 250px;
    top: auto;
    right: auto;
    text-align: center;
    padding: var(--space-md);
    background: var(--bg-panel);
    border: none;
    border-top: 1px solid var(--border-dim);
    border-right: 1px solid var(--border-dim);
    font-size: var(--font-size-base);
}

#back-to-games-link:hover {
    background: var(--bg-hover);
}

@media (max-width: 768px) {
    #back-to-games-link {
        width: 100%;
        border-right: none;
    }
}


/* TTS sentence highlighting */
.tts-sentence {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    padding: 2px 0;
}

.tts-sentence.tts-speaking {
    background-color: rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
    border-radius: 3px;
}

.narrative-text {
    line-height: 1.8;
}

/* ===== MOBILE TAB BAR & PANELS ===== */

/* Hide old elements */
.mobile-panels,
.jump-to-current,
.sidebar,
.mobile-hud {
    display: none !important;
}

/* ===== UNIFIED HUD ===== */
.unified-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-dark);
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-dim);
    cursor: pointer;
    position: relative;
    z-index: 160; /* Above dropdown (150) so header is always clickable */
}

/* HUD Header hover feedback */
.hud-header:hover {
    background: rgba(0, 212, 255, 0.03);
}

.hud-header:active {
    background: rgba(0, 212, 255, 0.05);
}

.hud-name {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--accent-cyan);
    font-weight: bold;
    font-size: 1.2rem;
}

.clickable-name {
    cursor: pointer;
}

.clickable-name:hover {
    text-decoration: underline;
}

.clickable-name.copied {
    color: var(--accent-green);
}

.hud-level {
    color: var(--accent-orange);
    font-size: 1.1rem;
}

.hud-age {
    color: var(--text-dim);
    font-size: 0.9rem;
}
.hud-age:not(:empty)::before { content: "· "; }

.hud-vitals {
    display: flex;
    gap: var(--space-lg);
    font-size: 1.1rem;
}

.hud-vital {
    display: flex;
    gap: 6px;
}

.hud-vital .vital-label {
    color: var(--text-dim);
}

.hud-vital .vital-value {
    color: var(--text-primary);
    font-weight: bold;
}

.hud-vital .vital-value.healthy { color: var(--accent-green); }
.hud-vital .vital-value.hurt { color: var(--accent-orange); }
.hud-vital .vital-value.critical { color: var(--accent-red); }

.hud-expand-icon {
    color: var(--text-dim);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    margin-left: var(--space-md);
}

.unified-hud.expanded .hud-expand-icon {
    transform: rotate(180deg);
}

/* HUD Dropdown - overlays narrative, stops above input area */
.hud-dropdown {
    display: none;
    position: fixed;
    /* Meet the header exactly (measured); -1px overlap avoids a sub-pixel gap
       that lets the scene background show through at the top. */
    top: calc(var(--hud-header-h, 60px) - 1px);
    left: 0;
    right: 0;
    bottom: var(--input-area-h, 70px); /* Meet the input box (measured) */
    background: linear-gradient(to bottom, var(--bg-dark), #0f0f18);
    border-bottom: 2px solid var(--accent-cyan);
    border-top: 1px solid var(--border-bright);
    z-index: 150;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    /* Flex layout: scrollable content + fixed action buttons */
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
}

/* Scrollable accordion content area */
.hud-scroll-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Required for flex child to scroll */
    overscroll-behavior: contain; /* Prevent scroll chaining to background */
}

.unified-hud.expanded .hud-dropdown {
    display: flex;
}

/* Stats Section */
.hud-section {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), transparent);
}

.hud-stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--space-md);
}

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

.hud-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hud-stat .stat-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: bold;
}

.hud-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    max-height: 120px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.hud-skills .skill-tag {
    background: linear-gradient(135deg, var(--bg-input), rgba(0, 212, 255, 0.03));
    border: 1px solid var(--border-bright);
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* HUD Accordions */
.hud-accordion {
    border-bottom: 1px solid var(--border-dim);
}

.hud-accordion:last-child {
    border-bottom: none;
}

.hud-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(to right, var(--bg-input), var(--bg-panel));
    border-left: 2px solid var(--border-dim);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.hud-accordion-header:hover {
    background: linear-gradient(to right, rgba(0, 212, 255, 0.08), var(--bg-panel));
    border-left-color: var(--accent-cyan);
    color: var(--text-primary);
}

.hud-accordion-header:active {
    background: linear-gradient(to right, rgba(0, 212, 255, 0.12), var(--bg-panel));
}

.hud-accordion-header .accordion-arrow {
    color: var(--text-dim);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.hud-accordion.open .accordion-arrow {
    transform: rotate(180deg);
}

.hud-accordion-content {
    display: none;
    padding: var(--space-md);
    background: linear-gradient(to bottom, rgba(0, 212, 255, 0.02), var(--bg-panel));
    border-left: 2px solid rgba(0, 212, 255, 0.15);
}

.hud-accordion.open .hud-accordion-content {
    display: block;
}

/* Resources */
.hud-resources-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--space-md);
}

.hud-resource {
    text-align: center;
}

.hud-resource .resource-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

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

/* Clocks */
.hud-clocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.hud-clock .clock-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    width: 50px;
}

.hud-clock .clock-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
}

.hud-clock .clock-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.hud-clock .clock-fill.heat {
    background: var(--accent-red);
}

.hud-clock .clock-fill.inertia {
    background: var(--text-dim);
}

.hud-clock .clock-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    width: 30px;
    text-align: right;
}

/* Tap */
.hud-tap-message {
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.hud-tap-threads {
    margin-bottom: var(--space-md);
}

.hud-thread {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-thread.focused {
    border-color: var(--accent-cyan);
}

.hud-thread-title {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    flex: 1;
}

.hud-thread-progress {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-left: var(--space-sm);
}

.hud-guidance-btn {
    width: 100%;
    padding: var(--space-sm);
    background: transparent;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    cursor: pointer;
}

.hud-guidance-btn:hover {
    background: rgba(0, 212, 255, 0.1);
}

/* Subplot Tracker (inside Tap) */
.hud-subplots-section {
    margin: var(--space-sm) 0;
}

.hud-subplots-toggle {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-sm);
    background: var(--bg-dark);
    border-radius: 4px;
    padding: 2px;
}

.subplot-toggle-btn {
    flex: 1;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.subplot-toggle-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.subplot-toggle-btn.active {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    font-weight: 600;
}

.hud-subplots-header {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
}

.hud-subplots-list {
    max-height: 250px;
    overflow-y: auto;
}

/* Completed subplot styling */
.hud-subplot-item.completed {
    opacity: 0.7;
    border-left: 3px solid var(--accent-green);
}

.hud-subplot-item.completed .hud-subplot-title {
    color: var(--text-secondary);
}

.hud-subplot-outcome {
    padding: var(--space-sm);
    font-size: 0.75rem;
    color: var(--accent-green);
    font-style: italic;
    border-top: 1px solid var(--border-dim);
}

.hud-subplot-item {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    margin-bottom: var(--space-sm);
    border-radius: 4px;
    overflow: hidden;
}

.hud-subplot-item.mandated {
    border-left: 3px solid var(--accent-magenta);
}

.hud-subplot-header {
    padding: var(--space-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.hud-subplot-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.hud-subplot-title {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.hud-subplot-progress {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hud-subplot-progress-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-panel);
    border-radius: 3px;
    overflow: hidden;
}

.hud-subplot-progress-fill {
    height: 100%;
    background: var(--accent-cyan);
    transition: width 0.3s;
}

.hud-subplot-progress-text {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    min-width: 30px;
    text-align: right;
}

.hud-subplot-details {
    display: none;
    padding: var(--space-sm);
    border-top: 1px solid var(--border-dim);
    background: rgba(0, 0, 0, 0.2);
}

.hud-subplot-item.expanded .hud-subplot-details {
    display: block;
}

/* Completed subplots - dimmed, collapsed by default */
.hud-subplot-item.complete {
    opacity: 0.6;
}

.hud-subplot-item.complete .hud-subplot-progress-fill {
    background: var(--accent-green);
}

.hud-subplot-item.complete .hud-subplot-title::after {
    content: ' ✓';
    color: var(--accent-green);
}

.hud-subplot-goal {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.hud-subplot-beats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hud-subplot-beat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.hud-subplot-beat.completed {
    color: var(--accent-green);
}

.hud-subplot-beat.active {
    color: var(--accent-cyan);
}

.hud-subplot-beat.not-introduced {
    display: none; /* Hide unintroduced beats from player */
}

.hud-beat-icon {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.hud-beat-text {
    flex: 1;
}

.hud-subplot-empty {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-md);
}

/* HUD Profile Section */
.hud-profile-section {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm);
}

.profile-portrait-container {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
    padding: var(--space-sm);
}

.profile-description-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile-description-section label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.profile-description-section textarea {
    background: var(--bg-darker);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-xs);
    resize: none;
    font-family: inherit;
}

.profile-description-section textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

#hud-generate-portrait-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    align-self: flex-start;
}

.portrait-status {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.portrait-status.generating {
    color: var(--accent-cyan);
}

.portrait-status.error {
    color: var(--accent-red);
}

/* HUD Actions Row - at bottom of dropdown */
.hud-actions-row {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-top: 1px solid var(--border-dim);
    background: var(--bg-panel);
    flex-shrink: 0; /* Don't shrink - always visible at bottom */
}

.hud-actions-row .hud-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-family: var(--font-mono);
    cursor: pointer;
}

.hud-actions-row .hud-action-btn:hover,
.hud-actions-row .hud-action-btn:active {
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.hud-actions-row .hud-action-btn.audio-enabled {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.hud-actions-row .hud-action-btn.handsfree-active {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    animation: handsfree-pulse 1.5s ease-in-out infinite;
}

@keyframes handsfree-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.hud-action-icon {
    font-size: 1.2rem;
}

.hud-action-label {
    font-size: 0.65rem;
    text-transform: uppercase;
}

/* Contacts Search Bar */
.contacts-search-bar {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-darker);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.contacts-search-input {
    flex: 1;
    min-width: 80px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-size: 0.75rem;
    border-radius: 3px;
}

.contacts-search-input::placeholder {
    color: var(--text-dim);
}

.contacts-sort-select {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-size: 0.75rem;
    border-radius: 3px;
    cursor: pointer;
}

.contacts-sort-select:focus,
.contacts-search-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.contacts-gen-btn {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-size: 0.85rem;
    border-radius: 3px;
    cursor: pointer;
}

.contacts-gen-btn:hover {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.contacts-gen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Contacts */
.hud-contact {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-contact-name {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: bold;
}

.hud-contact-role {
    color: var(--text-dim);
    font-size: 0.7rem;
}

.hud-contact-location {
    color: var(--text-dimmer);
    font-style: italic;
}

.hud-contact-trust {
    font-size: 0.75rem;
}

.hud-contact-trust.ally { color: var(--accent-green); }
.hud-contact-trust.friendly { color: var(--accent-cyan); }
.hud-contact-trust.neutral { color: var(--text-dim); }
.hud-contact-trust.hostile { color: var(--accent-red); }

/* Awakened indicator */
.woke-indicator {
    color: var(--accent-green);
    font-size: 0.7rem;
}

/* Contact portraits */
.hud-contact-portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-dim);
    flex-shrink: 0;
    margin-right: var(--space-sm);
}
.hud-contact-portrait-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    flex-shrink: 0;
    margin-right: var(--space-sm);
}
.hud-contact-info {
    flex: 1;
    min-width: 0;
}
.contact-portrait-full {
    width: 100%;
    margin-bottom: var(--space-sm);
    text-align: center;
}
.contact-portrait-full img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius);
    border: 1px solid var(--border-dim);
}

.hud-empty {
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: var(--space-md);
}

/* HUD Tap Name Row */
.hud-tap-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
    margin-bottom: var(--space-sm);
}
.hud-tap-row .tap-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.tap-name-display {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.tap-name-display #hud-tap-name {
    color: var(--accent-cyan);
    font-weight: bold;
}
.tap-rename-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.tap-rename-btn:hover {
    opacity: 1;
    color: var(--accent-cyan);
}
.tap-name-edit {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.tap-name-edit input {
    background: var(--bg-dark);
    border: 1px solid var(--accent-cyan);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 0.9rem;
    border-radius: 3px;
    width: 100px;
}
.tap-name-save, .tap-name-cancel {
    background: none;
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 3px;
}
.tap-name-save:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}
.tap-name-cancel:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* HUD Stats Grid */
.hud-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}
.hud-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
}
.hud-stat-item .stat-name {
    font-size: 0.7rem;
    color: var(--text-dim);
}
.hud-stat-item .stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-cyan);
}

/* HUD Skills List */
.hud-skills-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.hud-skill-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
    gap: 2px;
}
.hud-skill-item .skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hud-skill-item .skill-name {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}
.hud-skill-item .skill-desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
}
.hud-skill-item .skill-info {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.hud-skill-item .skill-level {
    color: var(--accent-cyan);
    font-weight: bold;
}
.hud-skill-item .skill-modifier {
    color: var(--text-dim);
    font-size: 0.75rem;
}
.hud-skill-item .skill-modifier.positive {
    color: var(--accent-green);
}

/* Chrome bonus indicators */
.stat-boosted {
    color: var(--accent-cyan);
}
.skill-chrome-bonus {
    color: var(--accent-cyan);
    font-size: 0.85em;
    margin-left: 2px;
}

/* HUD Contact clickable */
.hud-contact {
    cursor: pointer;
    transition: background 0.15s;
    flex-wrap: wrap;
}
.hud-contact:hover {
    background: rgba(0, 212, 255, 0.1);
}
.hud-contact.expanded {
    background: rgba(0, 212, 255, 0.05);
}

/* Inline contact detail */
.contact-detail-inline {
    width: 100%;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-dim);
    font-size: 0.8rem;
}
.contact-detail-desc {
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: var(--space-sm);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.contact-mention-btn {
    display: block;
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-size: 0.75rem;
    cursor: pointer;
}
.contact-mention-btn:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}
.contact-detail-interactions {
    margin-top: var(--space-xs);
}
.interactions-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
}
.interaction-entry-inline {
    padding: var(--space-xs);
    margin-bottom: var(--space-xs);
    background: var(--bg-input);
    border-left: 2px solid var(--accent-cyan);
    font-size: 0.75rem;
}
.interaction-entry-inline .interaction-date {
    color: var(--text-dim);
    margin-right: var(--space-xs);
}
.interaction-entry-inline .interaction-text {
    color: var(--text-secondary);
}

/* HUD Inventory Accordion */
.hud-equipment-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.hud-equip-slot {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
    font-size: 0.75rem;
}
.hud-equip-slot .slot-label {
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 0.65rem;
}
.hud-equip-slot .slot-item {
    color: var(--text-secondary);
}
.hud-equip-slot.equipped .slot-item {
    color: var(--accent-cyan);
}
.hud-inventory-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.hud-inv-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
    font-size: 0.8rem;
}
.hud-inv-item .inv-name { color: var(--text-primary); }
.hud-inv-item .inv-type { color: var(--text-dim); font-size: 0.7rem; }
.hud-inv-item.stashed { opacity: 0.7; }
.hud-inv-item .inv-stash {
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: auto;
}
.hud-inv-item .inv-stash.accessible {
    color: var(--accent-green);
    background: rgba(0, 255, 100, 0.1);
}
.hud-inv-item .inv-stash.inaccessible {
    color: var(--text-dim);
    background: rgba(100, 100, 100, 0.2);
}
.inv-detail-location {
    font-size: 0.75rem;
    padding: var(--space-xs);
    border-radius: 3px;
    margin: var(--space-xs) 0;
}
.inv-detail-location.accessible {
    color: var(--accent-green);
    background: rgba(0, 255, 100, 0.1);
}
.inv-detail-location.inaccessible {
    color: var(--accent-yellow);
    background: rgba(255, 200, 0, 0.1);
}

/* HUD Budget Accordion */
.hud-budget-summary, .hud-budget-breakdown {
    padding: var(--space-sm);
}
.hud-budget-summary .budget-row,
.hud-budget-breakdown .budget-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 0.85rem;
}
.hud-budget-summary .budget-row.main {
    font-weight: bold;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: var(--space-xs);
}
.hud-budget-summary .budget-row.positive .budget-val { color: var(--accent-green); }
.hud-budget-summary .budget-row.negative .budget-val { color: var(--accent-red); }
.hud-budget-breakdown .budget-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.hud-budget-breakdown .budget-section:first-child .budget-header { margin-top: 0; }

/* Budget Tabs */
.budget-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: var(--space-xs);
}
.budget-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
    transition: all 0.2s;
}
.budget-tab:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}
.budget-tab.active {
    color: var(--accent-cyan);
    background: var(--bg-active);
}
.budget-tab-content {
    animation: fadeIn 0.2s ease;
}
.hud-budget-breakdown .budget-row.positive span:last-child { color: var(--accent-green); }
.hud-budget-breakdown .budget-row.negative span:last-child { color: var(--accent-red); }

/* === INLINE BUDGET ACCORDION (HUD) === */
.budget-top-summary {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--bg-hover);
    border-radius: 4px;
    margin-bottom: var(--space-sm);
}
.budget-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.budget-stat .budget-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-dim);
}
.budget-stat .budget-value {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text-main);
}
.budget-stat.positive .budget-value { color: var(--accent-green); }
.budget-stat.negative .budget-value { color: var(--accent-red); }

/* Budget Accordion (main level) */
.budget-accordion {
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    margin-bottom: var(--space-xs);
    background: var(--bg-card);
}
.budget-accordion[open] {
    border-color: var(--accent-cyan);
}
.budget-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    list-style: none;
}
.budget-acc-header::-webkit-details-marker { display: none; }
.budget-acc-header::before {
    content: '▶';
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-right: var(--space-xs);
    transition: transform 0.2s;
}
.budget-accordion[open] > .budget-acc-header::before {
    transform: rotate(90deg);
}
.budget-acc-header:hover {
    background: var(--bg-hover);
}
.budget-acc-val {
    font-size: 0.85rem;
    color: var(--text-dim);
}
.budget-acc-val.positive { color: var(--accent-green); }
.budget-acc-val.negative { color: var(--accent-red); }

.budget-acc-body {
    padding: 0 var(--space-sm) var(--space-sm);
    border-top: 1px solid var(--border-dim);
}

/* Budget line items */
.budget-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: 0.8rem;
    color: var(--text-main);
}
.budget-line.main {
    font-weight: bold;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: var(--space-xs);
}
.budget-line.total {
    font-weight: bold;
    border-top: 1px solid var(--border-dim);
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
}
.budget-line.sub {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding-left: var(--space-sm);
}
.budget-line.nested {
    padding-left: var(--space-md);
}
.budget-line.clickable {
    cursor: pointer;
}
.budget-line.clickable:hover {
    color: var(--accent-cyan);
}
.budget-line.locked {
    opacity: 0.7;
}
.budget-line.withdrawable {
    color: var(--accent-yellow);
}
.budget-line.planned {
    color: var(--text-dim);
    font-style: italic;
}
.budget-line .positive { color: var(--accent-green); }
.budget-line .negative { color: var(--accent-red); }
.budget-line .stake {
    font-size: 0.7rem;
    color: var(--text-dim);
}
.budget-line .rate {
    font-size: 0.65rem;
    color: var(--text-dim);
}
.budget-line .fund-type {
    font-size: 0.6rem;
    text-transform: uppercase;
    background: var(--bg-hover);
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}
.budget-line.desc {
    font-style: italic;
    color: var(--text-dim);
    font-size: 0.7rem;
}

/* Sub-accordion (nested within main) */
.budget-sub-accordion {
    margin: var(--space-xs) 0;
}
.budget-sub-accordion > summary {
    list-style: none;
}
.budget-sub-accordion > summary::-webkit-details-marker { display: none; }
.budget-sub-accordion > .budget-line.clickable::before {
    content: '+';
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-right: var(--space-xs);
}
.budget-sub-accordion[open] > .budget-line.clickable::before {
    content: '-';
}
.budget-sub-body {
    padding-left: var(--space-sm);
    border-left: 1px solid var(--border-dim);
    margin-left: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Budget subheaders */
.budget-subheader {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px dashed var(--border-dim);
}

/* Unallocated-asset sorter */
.budget-subheader.sort-header {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--accent-yellow, #e0b000);
}
.btn-sort-all {
    font-size: 0.7rem; padding: 2px 10px; cursor: pointer;
    background: var(--accent-cyan, #00d4ff); color: #05202a;
    border: none; border-radius: 4px; text-transform: none;
}
.btn-sort-all:disabled { opacity: 0.6; cursor: default; }
.sort-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 5px 4px; border-bottom: 1px solid var(--border-dim);
    flex-wrap: wrap;
}
/* Tapping the name expands the asset's details; open rows take the full width
   so the description isn't squeezed into the sorter's narrow name column. */
.sort-item-details { flex: 1 1 40%; min-width: 120px; }
.sort-item-details[open] { flex-basis: 100%; }
.sort-item-info { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.sort-item-info::-webkit-details-marker { display: none; }
.sort-item-name { color: var(--text-main); }
.sort-item-val { color: var(--text-dim); white-space: nowrap; }
.sort-item-actions { display: flex; gap: 4px; align-items: center; }
.sort-dest {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-dim); border-radius: 4px;
    font-size: 0.72rem; padding: 2px 4px; max-width: 150px;
}
.btn-sort-move {
    font-size: 0.72rem; padding: 2px 10px; cursor: pointer;
    background: none; border: 1px solid var(--accent-cyan, #00d4ff);
    color: var(--accent-cyan, #00d4ff); border-radius: 4px;
}
.btn-sort-move:hover { background: rgba(0,212,255,0.12); }
.btn-sort-move:disabled { opacity: 0.6; cursor: default; }

/* Stage badges */
.stage-startup { color: var(--accent-yellow); }
.stage-growth { color: var(--accent-cyan); }
.stage-established { color: var(--accent-green); }
.stage-enterprise { color: var(--accent-purple); }

/* Folder styles */
.folder-accordion {
    border-left: 2px solid var(--accent-cyan);
}
.folder-accordion.budget-accordion {
    background: rgba(0, 255, 255, 0.03);
}
.folder-header {
    color: var(--accent-cyan);
}
.folder-header .folder-icon {
    margin-right: var(--space-xs);
    font-size: 0.9rem;
}
.folder-count {
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 10px;
}
.folder-body {
    padding-left: var(--space-xs);
}
.folder-item {
    margin-left: var(--space-xs);
}
.folder-item .budget-accordion {
    border-left: 1px solid var(--border-dim);
}
.folder-instrument {
    padding-left: var(--space-sm);
    font-size: 0.75rem;
}

/* === Org nesting (sub-orgs) + officers in the Budget view === */
/* Bright light purple — legible on black (the old cyan/dim read as dark blue). */
.org-children {
    margin-left: var(--space-sm);
    padding-left: var(--space-xs);
    border-left: 2px solid #b388ff;
    opacity: 0.97;
}
.org-own {
    font-size: 0.65rem;
    color: #b388ff;
    font-weight: normal;
    margin-left: 4px;
}
.btn-org-move,
.btn-add-suborg {
    background: none;
    border: none;
    cursor: pointer;
    color: #b388ff;
    font-size: 0.75rem;
    opacity: 0.85;
    padding: 0 2px;
    transition: opacity 0.2s;
}
.btn-org-move:hover,
.btn-add-suborg:hover { opacity: 1; }
.org-officers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px var(--space-xs) 6px;
}
.org-officer {
    font-size: 0.68rem;
    color: var(--text-main);
    background: var(--bg-hover);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 1px 8px;
}
.org-officer em {
    color: #b388ff;
    font-style: normal;
    font-weight: bold;
}
.btn-officer-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.62rem;
    padding: 0 0 0 3px;
}
.btn-officer-remove:hover { color: var(--accent-red, #e66); }
.btn-add-officer {
    background: none;
    border: 1px dashed var(--border-dim);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.62rem;
    padding: 1px 8px;
}
.btn-add-officer:hover {
    color: #b388ff;
    border-color: #b388ff;
}
.budget-line.empty {
    font-style: italic;
    color: var(--text-dim);
    font-size: 0.75rem;
}
.computed {
    color: var(--accent-yellow);
    font-size: 0.6rem;
}

/* Budget Edit Controls */
.btn-budget-gear {
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 2rem;
    cursor: pointer;
    padding: 0 var(--space-xs);
    transition: all 0.2s;
    text-shadow: 0 0 8px var(--accent-cyan);
}
.btn-budget-gear:hover {
    color: var(--accent-green);
    text-shadow: 0 0 12px var(--accent-green);
    transform: scale(1.1);
}
.btn-budget-gear.active {
    color: var(--accent-yellow);
    text-shadow: 0 0 12px var(--accent-yellow);
    animation: spin-gear 2s linear infinite;
}
@keyframes spin-gear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.budget-new-folder {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs);
    background: var(--bg-hover);
    border-radius: 4px;
}
.budget-new-folder input {
    flex: 1;
    padding: var(--space-xs);
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 0.75rem;
}
.budget-new-folder input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
.btn-add-folder {
    padding: var(--space-xs) var(--space-sm);
    background: var(--accent-cyan);
    border: none;
    border-radius: 4px;
    color: var(--bg-main);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
}
.btn-add-folder:hover {
    background: var(--accent-green);
}

/* Edit-only buttons (hidden by default, shown in edit mode) */
.edit-only {
    display: none !important;
}
#hud-budget-content.edit-mode .edit-only {
    display: inline-flex !important;
}
.btn-delete-folder,
.btn-move-fund,
.btn-transfer-fund,
.btn-rename-folder {
    padding: 2px 6px;
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: var(--space-xs);
}
.btn-delete-folder:hover,
.btn-delete-item:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

/* Add/delete item buttons in fund sections */
.btn-add-item,
.btn-delete-item {
    padding: 1px 5px;
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: var(--space-xs);
    line-height: 1;
}
.btn-add-item:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--bg-main);
}

/* Inline forms for adding items */
.budget-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    margin: 4px 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
}
.budget-inline-form input,
.budget-inline-form select {
    flex: 1;
    min-width: 60px;
    padding: 3px 6px;
    background: var(--bg-main);
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    color: var(--text-main);
    font-size: 0.75rem;
}
.budget-inline-form input:focus,
.budget-inline-form select:focus {
    border-color: var(--accent-cyan);
    outline: none;
}
.budget-inline-form .btn-save-item {
    padding: 3px 8px;
    background: var(--accent-green);
    border: none;
    border-radius: 3px;
    color: var(--bg-main);
    font-size: 0.7rem;
    cursor: pointer;
    font-weight: 600;
}
.budget-inline-form .btn-cancel-form {
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
}
.btn-move-fund:hover,
.btn-transfer-fund:hover,
.btn-rename-folder:hover {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
}
.draggable-folder {
    transition: opacity 0.2s;
}
.draggable-folder.dragging {
    opacity: 0.5;
}
.folder-drop-target.drag-over {
    outline: 2px dashed var(--accent-yellow);
    outline-offset: -2px;
    background: rgba(255, 255, 0, 0.08);
}

/* Fund and folder header layout for edit buttons */
.fund-header-right,
.folder-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Drag and drop styles */
.draggable-item {
    transition: opacity 0.2s, transform 0.2s;
}
#hud-budget-content.edit-mode .draggable-item {
    cursor: grab;
}
#hud-budget-content.edit-mode .draggable-item:hover {
    background: rgba(0, 255, 255, 0.05);
}
.draggable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.drag-handle {
    color: var(--text-dim);
    font-size: 0.7rem;
    margin-left: auto;
    padding-left: var(--space-sm);
    cursor: grab;
    order: 99;
}
.drop-target.drag-over {
    outline: 2px dashed var(--accent-cyan);
    outline-offset: -2px;
    background: rgba(0, 255, 255, 0.08);
}
.drop-target.drag-over > summary {
    color: var(--accent-cyan);
}

/* === BUCKET MANAGER MODAL === */
.bucket-manager-content {
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.bucket-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}
.bucket-manager-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--accent-cyan);
}
.bucket-manager-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-hover);
}
.bucket-manager-toolbar .btn-create-bucket {
    padding: var(--space-xs) var(--space-sm);
    background: var(--accent-green);
    color: var(--bg-main);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}
.bucket-manager-toolbar .btn-create-bucket:hover {
    background: var(--accent-cyan);
}
.bucket-manager-toolbar .bm-hint {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-style: italic;
}
.bucket-manager-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}
.bucket-manager-footer {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-dim);
    text-align: center;
}

/* Bucket containers */
.bm-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}
.bm-bucket {
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.bm-bucket:hover {
    border-color: var(--accent-cyan);
}
.bm-bucket-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-dim);
}
.bm-bucket-name {
    flex: 1;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-main);
}
.bm-bucket-type {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 2px 6px;
    background: var(--bg-main);
    border-radius: 3px;
    color: var(--text-dim);
}
.bm-bucket-balance {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--accent-green);
}
.bm-rename-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.bm-rename-btn:hover {
    opacity: 1;
}

/* Org-tree nesting controls */
.bm-tree-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.8rem;
    width: 1.1rem;
    padding: 0;
}
.bm-tree-toggle:hover { color: var(--accent-cyan); }
.bm-tree-spacer {
    display: inline-block;
    width: 1.1rem;
}
.bm-bucket-own {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-left: var(--space-xs);
}
.bm-move-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.bm-move-btn:hover { opacity: 1; }
.bm-bucket-header.dragging { opacity: 0.5; }
.bm-children {
    border-left: 2px solid var(--border-dim);
}

/* Officers */
.bm-officers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px var(--space-sm);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-dim);
}
.bm-officer {
    font-size: 0.7rem;
    color: var(--text-main);
    background: var(--bg-hover);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 1px 8px;
}
.bm-officer em {
    color: var(--accent-cyan);
    font-style: normal;
}
.bm-officer-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.65rem;
    padding: 0 0 0 2px;
}
.bm-officer-remove:hover { color: var(--accent-red, #e66); }
.bm-add-officer {
    background: none;
    border: 1px dashed var(--border-dim);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.65rem;
    padding: 1px 8px;
}
.bm-add-officer:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

/* Drop zone for items */
.bm-bucket-items {
    min-height: 80px;
    padding: var(--space-xs);
    transition: background-color 0.2s;
}
.bm-bucket-items.drag-over {
    background: rgba(0, 255, 200, 0.1);
    border: 2px dashed var(--accent-cyan);
    border-radius: 0 0 6px 6px;
}
.bm-bucket-items:empty::before {
    content: 'Drop items here';
    display: block;
    text-align: center;
    padding: var(--space-md);
    color: var(--text-dim);
    font-size: 0.75rem;
    font-style: italic;
}

/* Draggable items */
.bm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    margin: var(--space-xs) 0;
    background: var(--bg-main);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    cursor: grab;
    transition: all 0.2s;
}
.bm-item:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-hover);
}
.bm-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.bm-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bm-item-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
}
.bm-item-type {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-dim);
}
.bm-item-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.bm-item-value {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-main);
}
.bm-item-monthly {
    font-size: 0.7rem;
}
.bm-item-monthly.positive { color: var(--accent-green); }
.bm-item-monthly.negative { color: var(--accent-red); }
.bm-item-stage {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--bg-hover);
}

/* Transfer Cash Button */
.bucket-manager-toolbar .btn-transfer-cash {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.bucket-manager-toolbar .btn-transfer-cash:hover {
    background: rgba(0, 255, 0, 0.15);
}

/* Cash Transfer Modal */
.cash-transfer-content {
    max-width: 400px;
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
}

.transfer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}

.transfer-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-green);
}

.transfer-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.transfer-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.transfer-field label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.transfer-select {
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.transfer-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.transfer-arrow {
    text-align: center;
    font-size: 1.5rem;
    color: var(--text-dim);
}

.transfer-amount-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.currency-prefix {
    font-size: 1rem;
    color: var(--accent-green);
}

.transfer-amount-row input {
    flex: 1;
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

.transfer-amount-row input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.btn-max {
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.btn-max:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.transfer-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.transfer-preview .preview-arrow {
    color: var(--text-dim);
}

.transfer-preview .positive {
    color: var(--accent-green);
}

.transfer-preview .negative {
    color: var(--accent-red);
}

.transfer-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--border-dim);
}

.transfer-footer .btn-secondary {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.transfer-footer .btn-primary {
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-green);
    border: none;
    color: var(--bg-main);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: bold;
}

.transfer-footer .btn-primary:hover {
    filter: brightness(1.2);
}

/* Transaction History Modal */
.transaction-history-content {
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.transaction-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}
.transaction-header h2 { margin: 0; flex: 1; }
.transaction-count { color: var(--text-dim); font-size: 0.85rem; }
.transaction-filters {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}
.filter-select {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-hover);
    border: 1px solid var(--border-dim);
    color: var(--text-main);
    border-radius: var(--radius-sm);
}
.transaction-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}
.transaction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.transaction-table th, .transaction-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-dim);
}
.transaction-table th {
    background: var(--bg-hover);
    color: var(--text-dim);
    font-weight: normal;
}
.transaction-table .amount-positive { color: var(--accent-green); }
.transaction-table .amount-negative { color: var(--accent-red); }
.transaction-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--border-dim);
}
.btn-view-transactions {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-hover);
    border: 1px solid var(--border-dim);
    color: var(--text-main);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.btn-view-transactions:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
.btn-small { font-size: 0.8rem; padding: var(--space-xs) var(--space-sm); }

/* HUD Portfolio Summary */
.hud-portfolio-summary {
    padding: var(--space-sm);
    border-top: 1px solid var(--border-dim);
    margin-top: var(--space-sm);
}

.hud-portfolio-summary .portfolio-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: bold;
}

.hud-portfolio-summary .portfolio-val {
    color: var(--accent-green);
}

.hud-portfolio-summary .portfolio-breakdown {
    font-size: 0.75rem;
    color: var(--text-dim);
    display: flex;
    gap: var(--space-sm);
    margin-top: 2px;
}

/* HUD Details Button */
.hud-btn-details {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hud-btn-details:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

/* Chrome (Body Mods) Section */
.hud-chrome-summary {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: var(--space-xs);
}
.chrome-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs) var(--space-sm);
}
.chrome-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}
.chrome-summary-item .summary-label {
    color: var(--text-dim);
}
.chrome-summary-item .summary-value {
    font-weight: 500;
}
.chrome-summary-item .summary-value.plasma {
    color: var(--accent-magenta);
}
.chrome-summary-item .summary-value.none {
    color: var(--text-dim);
    font-weight: normal;
}
.chrome-summary-item .summary-value.armor {
    color: var(--accent-cyan);
}
.chrome-summary-item .summary-value.dr {
    color: var(--accent-gold);
}
.chrome-summary-item .summary-value.stat {
    color: var(--accent-green);
}
.chrome-summary-item .summary-value.skill {
    color: var(--accent-cyan);
}

.hud-chrome-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.hud-chrome-item {
    padding: var(--space-xs);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    font-size: 0.8rem;
    border-left: 2px solid var(--accent-magenta);
}
.hud-chrome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.hud-chrome-name {
    color: var(--text-primary);
    font-weight: 500;
}
.hud-chrome-slot {
    color: var(--text-dim);
    font-size: 0.65rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 2px;
}
.hud-chrome-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.chrome-detail {
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.3);
}
.chrome-detail.plasma {
    color: var(--accent-magenta);
}
.chrome-detail.armor {
    color: var(--accent-cyan);
}
.chrome-detail.dr {
    color: var(--accent-gold);
}
.chrome-detail.stat {
    color: var(--accent-green);
}
.chrome-detail.skill {
    color: var(--accent-cyan);
}
.chrome-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.chrome-effect {
    font-size: 0.65rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: lowercase;
}
.hud-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: var(--space-xs) 0;
}

/* Contact Bio Modal */
.contact-bio-content {
    max-width: 500px;
    width: 90%;
}
.contact-bio-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}
.contact-bio-identity {
    flex: 1;
}
.contact-bio-identity h2 {
    margin: 0;
    font-size: 1.25rem;
}
.contact-bio-identity .contact-role {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.trust-badge {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.trust-badge.ally { background: rgba(68, 255, 136, 0.2); color: var(--accent-green); }
.trust-badge.friendly { background: rgba(0, 212, 255, 0.2); color: var(--accent-cyan); }
.trust-badge.neutral { background: rgba(85, 85, 102, 0.2); color: var(--text-dim); }
.trust-badge.suspicious { background: rgba(255, 136, 0, 0.2); color: var(--accent-orange); }
.trust-badge.hostile { background: rgba(255, 68, 68, 0.2); color: var(--accent-red); }
.contact-bio-body {
    padding: var(--space-md);
}
.contact-bio-section {
    margin-bottom: var(--space-md);
}
.contact-bio-section h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-sm);
}
.contact-bio-section p {
    margin: 0;
    line-height: 1.5;
}
.interactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.interaction-entry {
    padding: var(--space-sm);
    background: var(--bg-input);
    border-radius: 3px;
    border-left: 2px solid var(--accent-cyan);
}
.interaction-date {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
}
.interaction-summary {
    font-size: 0.85rem;
    line-height: 1.4;
}
.no-interactions {
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: var(--space-md);
}

/* Level Up Indicator */
#hud-level-wrapper.can-level-up {
    cursor: pointer;
}
.hud-level.can-level-up {
    color: var(--accent-orange);
}
.level-up-arrow {
    display: none;
    color: var(--accent-orange);
    margin-left: 2px;
    animation: arrow-pulse 1s ease-in-out infinite;
}
.hud-level.can-level-up .level-up-arrow {
    display: inline;
}
@keyframes arrow-pulse {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.6; transform: translateY(-2px); }
}

/* ===== LAYOUT ===== */
.game-layout {
    grid-template-columns: 1fr;
    height: 100vh;
    height: 100dvh;
}

.main-content {
    height: 100vh;
    height: 100dvh;
    padding-bottom: 70px; /* Space for input area */
    display: flex;
    flex-direction: column;
}

/* Input area - fixed above tab bar */
.input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0));
    gap: var(--space-sm);
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    z-index: 190;
}

#player-input {
    font-size: 16px;
    min-height: 44px;
    flex: 1;
}

/* Keep the highlight overlay's font metrics in lockstep with the textarea
   so highlighted tokens stay perfectly aligned with the live text. */
.player-input-highlight {
    font-size: 16px;
    line-height: 1.4;
}

.btn-send {
    padding: var(--space-sm) var(--space-md);
    min-width: 60px;
    flex-shrink: 0;
}

/* Hide old audio button */
.input-area .btn-audio,
#audio-toggle {
    display: none !important;
}

/* Tab bar */
/* Mobile tab bar - HIDDEN, replaced by unified HUD */
.mobile-tab-bar {
    display: none !important;
}

.mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-sm) var(--space-xs);
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    min-height: 50px;
    position: relative;
}

.mobile-tab .tab-icon {
    font-size: 1.1rem;
}

.mobile-tab:hover {
    background: rgba(0, 212, 255, 0.05);
}

.mobile-tab:active {
    background: rgba(0, 212, 255, 0.1);
}

.mobile-tab.active {
    color: var(--accent-cyan);
}

.mobile-audio-tab {
    /* Audio now in HUD header, hide this tab */
    display: none !important;
}

.mobile-audio-tab.audio-enabled .audio-icon {
    color: var(--accent-cyan);
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    /* Reduce base font size on mobile */
    body {
        font-size: 14px;
    }

    /* Tighter spacing variables for mobile */
    :root {
        --space-xs: 4px;
        --space-sm: 6px;
        --space-md: 10px;
        --space-lg: 14px;
    }

    /* Auth screens - tighter padding */
    .auth-content,
    .player-select-content,
    .title-content {
        padding: var(--space-md);
    }

    .auth-content h1,
    .player-select-content h1,
    .title-content h1 {
        font-size: 1.5rem;
        margin-bottom: var(--space-sm);
    }

    .auth-form input,
    .btn-primary,
    .btn-secondary {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9rem;
    }

    .player-card {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    /* Narrative pane - reduced padding */
    .narrative-pane {
        padding: var(--space-sm);
        padding-top: 44px; /* Space for fixed HUD on mobile */
    }

    .narrative-entry {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Input area - compact */
    .input-area {
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-xs);
    }

    .input-area textarea {
        padding: var(--space-sm);
        font-size: 0.9rem;
        min-height: 36px;
    }

    .btn-send {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
    }

    /* HUD dropdown - tighter */
    .hud-section {
        padding: var(--space-sm);
    }

    .hud-accordion-header {
        padding: var(--space-sm);
        font-size: 0.8rem;
    }

    .hud-accordion-content {
        padding: var(--space-sm);
    }

    .hud-full-sheet-btn {
        padding: var(--space-sm);
        margin-top: var(--space-sm);
        font-size: 0.8rem;
    }

    /* Safe area for notched devices */
    .mobile-tab-bar {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Slightly larger touch targets on mobile */
    .mobile-tab {
        min-height: 50px;
        font-size: 0.6rem;
    }

    .mobile-tab .tab-icon {
        font-size: 1.1rem;
    }

    /* HUD adjustments for small screens */
    .mobile-hud-vitals {
        gap: var(--space-sm);
        font-size: 0.7rem;
    }

    /* Back button positioning */
    #back-to-games-link {
        bottom: 100px;
        width: auto;
        left: var(--space-sm);
        right: auto;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
        border: 1px solid var(--border-dim);
        border-radius: 2px;
    }

    /* Modal adjustments */
    .modal-content {
        padding: var(--space-md);
        margin: var(--space-sm);
        max-height: calc(100vh - 20px);
    }

    .character-sheet .sheet-body {
        gap: var(--space-sm);
    }

    .sheet-section {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    .sheet-section h3 {
        font-size: 0.7rem;
        margin-bottom: var(--space-sm);
    }
}

/* Panel styles - used when Tap/Contacts tabs are active */
.mobile-panels {
    display: block;
    position: fixed;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 180;
    pointer-events: none;
}

.mobile-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

body.mobile-panel-active .main-content,
body.mobile-panel-active .input-area {
    visibility: hidden;
    pointer-events: none;
}

.mobile-panel-header {
    padding: var(--space-md);
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
}

.mobile-panel-header h3 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mobile-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

/* Jump to Current Button */
.jump-to-current {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
    z-index: 250;
    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.4);
    animation: bounce-subtle 2s ease-in-out infinite;
}

.jump-to-current:hover {
    background: #00a8cc;
}

.jump-to-current:active {
    transform: translateX(-50%) scale(0.95);
}

@keyframes bounce-subtle {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

/* Panel content styles */
.mobile-section {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}

.mobile-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mobile-section-title {
    font-size: 0.75rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.mobile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.mobile-stat {
    background: var(--bg-input);
    padding: var(--space-sm);
    text-align: center;
}

.mobile-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.mobile-stat-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: bold;
}

.mobile-condition {
    display: flex;
    justify-content: space-around;
    gap: var(--space-md);
}

.mobile-condition-item {
    text-align: center;
}

.mobile-condition-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.mobile-condition-value {
    font-size: var(--font-size-sm);
    font-weight: bold;
}

.mobile-condition-value.healthy { color: var(--accent-green); }
.mobile-condition-value.hurt { color: var(--accent-orange); }
.mobile-condition-value.critical { color: var(--accent-red); }

.mobile-resources {
    display: flex;
    justify-content: space-around;
    gap: var(--space-sm);
}

.mobile-resource {
    text-align: center;
}

.mobile-resource-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
}

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

.mobile-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.mobile-skill-tag {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 0.75rem;
}

.mobile-skill-tag .level {
    color: var(--accent-cyan);
    margin-left: 4px;
}

/* Tap Panel */
.mobile-tap-message {
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}

.mobile-thread {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.mobile-thread.focused {
    border-color: var(--accent-cyan);
}

.mobile-thread-title {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.mobile-thread-meta {
    font-size: 0.7rem;
    color: var(--text-dim);
}

/* Contacts Panel */
.mobile-contact {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-contact:hover {
    border-color: var(--accent-orange);
}

.mobile-contact:active {
    background: rgba(255, 136, 0, 0.05);
}

.mobile-contact-info {
    flex: 1;
}

.mobile-contact-name {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: bold;
}

.mobile-contact-role {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.mobile-contact-location {
    color: var(--text-secondary);
    font-size: 0.65rem;
}

.mobile-contact-trust {
    font-size: 0.75rem;
    padding: 2px 8px;
}

.mobile-contact-trust.ally { color: var(--accent-green); }
.mobile-contact-trust.friendly { color: var(--accent-cyan); }
.mobile-contact-trust.neutral { color: var(--text-dim); }
.mobile-contact-trust.hostile { color: var(--accent-red); }

.mobile-contact-desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: var(--space-xs);
}

.mobile-guidance-btn {
    width: 100%;
    padding: var(--space-md);
    font-size: var(--font-size-sm);
}

.mobile-empty {
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    padding: var(--space-lg);
}

/* ===== TOUCH FEEDBACK (all interactive elements) ===== */
@media (hover: none) and (pointer: coarse) {
    /* Buttons */
    .btn-primary:active,
    .btn-secondary:active,
    .btn-send:active,
    .btn-roll:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .btn-primary:active {
        background: #00a8cc;
    }

    .btn-secondary:active {
        background: var(--bg-input);
        border-color: var(--accent-cyan);
    }

    /* Scene choices */
    .scene-choice-btn:active {
        background: rgba(0, 212, 255, 0.15);
        border-color: var(--accent-cyan);
        transform: scale(0.98);
    }

    /* Player cards */
    .player-card:active {
        border-color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.05);
    }

    /* Option buttons */
    .option-btn:active {
        border-color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.1);
    }

    /* Skill buttons */
    .skill-btn:active {
        border-color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.1);
    }

    /* Accordion headers */
    .accordion-header:active {
        background: rgba(0, 212, 255, 0.1);
    }

    /* Tap threads */
    .tap-thread:active {
        border-color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.1);
    }

    /* Contact items */
    .contact-item:active {
        border-color: var(--accent-orange);
        background: rgba(255, 136, 0, 0.1);
    }

    /* Auth tabs */
    .auth-tab:active {
        background: var(--bg-input);
        border-color: var(--accent-cyan);
    }

    /* Full sheet button */
    .btn-full-sheet:active {
        border-color: var(--accent-cyan);
        color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.1);
    }

    /* Audio button */
    .btn-audio:active {
        border-color: var(--accent-cyan);
        background: rgba(0, 212, 255, 0.15);
    }

    /* Narrative images */
    .narrative-entry.has-bg-image:active {
        border-color: var(--accent-cyan);
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    }
}

/* ============================================
   BUDGET MODAL
   ============================================ */

#budget-modal .modal-content.budget-modal-content {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.budget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--accent-green);
    margin-bottom: var(--space-md);
}

.budget-header h2 {
    color: var(--accent-green);
    font-size: 1.4rem;
    margin: 0;
}

.budget-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.budget-section {
    background: var(--bg-dark);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.budget-section h3 {
    color: var(--accent-cyan);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.1em;
}

.budget-row {
    display: flex;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.budget-row:last-child {
    border-bottom: none;
}

.budget-row.budget-total {
    border-top: 1px solid var(--accent-green);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
}

.budget-icon {
    width: 24px;
    font-size: 1rem;
    margin-right: var(--space-sm);
}

.budget-label {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.budget-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.budget-row.budget-total .budget-label {
    color: var(--text-primary);
    font-weight: 600;
}

.budget-row.budget-total .budget-value {
    color: var(--accent-green);
    font-size: 1.1rem;
}

.budget-value.budget-gain {
    color: var(--accent-green);
}

.budget-info {
    padding: var(--space-sm);
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.budget-info p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

.budget-info p + p {
    margin-top: var(--space-xs);
}

.budget-last-update {
    color: var(--text-muted) !important;
    font-style: italic;
}

.budget-row.budget-locked {
    opacity: 0.8;
}

.budget-row.budget-locked .budget-label {
    color: var(--text-dim);
}

.budget-rate {
    color: var(--text-dim);
    font-size: 0.8em;
}

.budget-value.budget-loss {
    color: var(--accent-red);
}

.budget-row.budget-subtotal {
    border-top: 1px dashed var(--border-dim);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
}

.budget-row.budget-net .budget-value {
    font-size: 1.2rem;
}

.budget-row.budget-net .budget-value.positive {
    color: var(--accent-green);
}

.budget-row.budget-net .budget-value.negative {
    color: var(--accent-red);
}

.budget-details {
    margin-top: var(--space-sm);
}

.budget-details summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.8rem;
    padding: var(--space-xs);
}

.budget-details summary:hover {
    color: var(--text-secondary);
}

.budget-details .budget-section {
    margin-top: var(--space-xs);
}

#close-budget-modal {
    margin-top: var(--space-md);
    width: 100%;
}

/* Budget button in character sheet */
.btn-budget-link {
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 2px 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin-left: var(--space-sm);
    transition: all 0.2s ease;
}

.btn-budget-link:hover {
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* ============================================
   FINANCIAL OVERVIEW (New Budget Modal)
   ============================================ */

.fin-section {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.fin-section.fin-summary {
    background: var(--bg-surface);
    border-color: var(--accent-cyan);
}

.fin-header {
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-dim);
}

.fin-subheader {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--space-sm) 0 var(--space-xs) 0;
}

.fin-subsection {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-dim);
}

.fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: 0.85rem;
}

.fin-row.main {
    font-weight: bold;
    font-size: 1rem;
    padding: var(--space-sm) 0;
}

.fin-row.total {
    border-top: 1px solid var(--border-dim);
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    font-weight: bold;
}

.fin-row.sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 2px 0;
}

.fin-row.sub.desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-style: italic;
    display: block;
    padding: var(--space-xs) 0;
}

.fin-row.clickable {
    cursor: pointer;
}

.fin-row.clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}

.fin-row.planned {
    color: var(--text-dim);
    font-style: italic;
}

.fin-row.locked {
    opacity: 0.7;
}

.fin-val {
    font-weight: 500;
}

.fin-val.positive, .fin-row.positive .fin-val, .positive {
    color: var(--accent-green);
}

.fin-val.negative, .fin-row.negative .fin-val, .negative {
    color: var(--accent-red);
}

.fin-details {
    margin: var(--space-xs) 0;
}

.fin-details > summary {
    list-style: none;
}

.fin-details > summary::-webkit-details-marker {
    display: none;
}

.fin-details > summary::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--space-sm);
    font-size: 0.6rem;
    color: var(--text-dim);
    transition: transform 0.2s;
}

.fin-details[open] > summary::before {
    transform: rotate(90deg);
}

.fin-breakdown {
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-dim);
    margin: var(--space-xs) 0 var(--space-xs) var(--space-sm);
}

.stake {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.stage-startup { color: var(--accent-cyan); }
.stage-active { color: var(--accent-green); }
.stage-planned { color: var(--text-dim); font-style: italic; }

.fund-type {
    font-size: 0.6rem;
    padding: 2px 6px;
    background: var(--bg-darker);
    border-radius: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-left: var(--space-sm);
    font-weight: normal;
}

.fin-row.withdrawable {
    background: rgba(0, 255, 255, 0.05);
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0;
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent-cyan);
}

.fin-row .rate {
    font-size: 0.7rem;
    color: var(--text-dim);
}

/* Bucket Management */
.bucket-mgmt {
    border-color: var(--accent-yellow);
}

.bucket-list {
    margin-bottom: var(--space-sm);
}

.bucket-item {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-dim);
    gap: var(--space-sm);
}

.bucket-item.nested {
    padding-left: var(--space-lg);
    border-left: 2px solid var(--border-dim);
}

.bucket-name {
    flex: 1;
}

.bucket-type {
    font-size: 0.65rem;
    padding: 1px 4px;
    background: var(--bg-darker);
    border-radius: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.bucket-bal {
    font-weight: 500;
    color: var(--accent-green);
}

.bucket-limit {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.bucket-actions {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.btn-transfer, .btn-create-bucket {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-transfer:hover, .btn-create-bucket:hover {
    background: rgba(0, 255, 255, 0.1);
}

.transfer-form, .create-form {
    background: var(--bg-darker);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
}

.form-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.form-row label {
    width: 60px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.form-row select, .form-row input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.btn-execute-transfer, .btn-create {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
}

.btn-execute-transfer:hover, .btn-create:hover {
    background: var(--accent-green);
}

/* Inventory Item Detail Panel */
.inv-detail-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 2px solid var(--accent-cyan);
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 20px));
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 2000;
}

.inv-detail-panel .detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.inv-detail-panel .detail-header h3 {
    margin: 0;
    color: var(--accent-cyan);
    flex: 1;
}

.inv-detail-panel .detail-tier {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.inv-detail-panel .detail-tier.tier-1 { background: var(--tier-street); color: #000; }
.inv-detail-panel .detail-tier.tier-2 { background: var(--tier-professional); color: #000; }
.inv-detail-panel .detail-tier.tier-3 { background: var(--tier-military); color: #fff; }
.inv-detail-panel .detail-tier.tier-4 { background: var(--tier-experimental); color: #fff; }
.inv-detail-panel .detail-tier.tier-5 { background: var(--tier-prototype); color: #fff; }

.inv-detail-panel .detail-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 var(--space-sm);
}

.inv-detail-panel .detail-type {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.inv-detail-panel .detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.inv-detail-panel .detail-stat {
    background: var(--bg-dark);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85rem;
}

.inv-detail-panel .detail-effects {
    color: var(--accent-green);
    font-style: italic;
    font-size: 0.85rem;
}

.inv-detail-panel .detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.inv-detail-panel .detail-actions .btn-primary {
    min-height: 44px;
    min-width: 100px;
}

/* Make inventory items clickable */
.hud-inv-item {
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: 4px;
    transition: background 0.2s;
}

.hud-inv-item:hover,
.hud-inv-item:active {
    background: var(--bg-hover);
}

/* Make chrome items clickable */
.hud-chrome-item {
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: 4px;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.hud-chrome-item:hover,
.hud-chrome-item:active {
    background: var(--bg-hover);
    border-color: var(--accent-cyan);
}

/* Chrome detail panel note */
.detail-note {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.85rem;
}

.detail-stat.plasma {
    color: var(--accent-magenta);
}

/* In-HUD Item Detail View */
.inv-detail-view {
    padding: var(--space-sm);
}

.inv-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.inv-detail-header strong {
    color: var(--accent-cyan);
}

.inv-detail-type {
    color: var(--text-dim);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.inv-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.inv-detail-effects {
    color: var(--accent-green);
    font-style: italic;
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
}

.inv-detail-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.inv-detail-actions button {
    flex: 1;
    min-height: 40px;
}

.btn-dim {
    background: var(--bg-dark);
    color: var(--text-dim);
    border: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    cursor: pointer;
}

.btn-dim:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Make equipped slots clickable */
.hud-equip-slot.equipped {
    cursor: pointer;
}

.hud-equip-slot.equipped:hover {
    background: var(--bg-hover);
}

/* Mod indicator on equipment slots */
.mod-indicator {
    color: var(--accent-cyan);
    font-size: 0.75em;
    font-weight: bold;
}

/* Attached mods in item detail view */
.inv-detail-mods {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.inv-detail-mods .mods-header {
    font-size: 0.7em;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.attached-mod {
    background: var(--bg-dark);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    margin-bottom: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.attached-mod .mod-name {
    color: var(--accent-cyan);
    font-weight: 500;
}

.attached-mod .mod-stat {
    color: var(--accent-green);
    font-size: 0.85em;
}

.attached-mod .mod-effects {
    color: var(--text-dim);
    font-size: 0.8em;
    font-style: italic;
}

/* ==========================================================================
   PLANNER MODAL - Story tracking and canon verification
   ========================================================================== */

/* Planner uses HUD-like positioning instead of modal overlay */
#planner-modal {
    position: fixed;
    top: 50px; /* Below HUD header */
    left: 0;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)); /* Above input area */
    background: var(--bg-dark);
    z-index: 200;
    display: none;
    flex-direction: column;
    border-bottom: 2px solid var(--accent-cyan);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#planner-modal.active {
    display: flex;
}

.planner-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Planner header with close button on left */
.planner-modal-content .modal-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
}

.planner-modal-content .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--accent-cyan);
}

.planner-modal-content .modal-close {
    order: -1; /* Move to left */
    width: 24px;
    height: 24px;
    font-size: 1rem;
}

.planner-body {
    padding: 2px;
    flex: 1;
    overflow: hidden; /* Let accordions handle their own scroll */
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

/* Accordion Layout */
.planner-accordion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0; /* Allow flex shrinking */
    overflow: hidden;
}

.planner-accordion-item {
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Don't shrink when collapsed */
}

/* Expanded accordion takes available space */
.planner-accordion-item:not(.collapsed) {
    flex: 1;
    min-height: 0;
}

.planner-accordion-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    user-select: none;
    transition: background 0.2s;
}

.planner-accordion-header:hover {
    background: rgba(0, 0, 0, 0.5);
}

.planner-accordion-header h3 {
    margin: 0;
    flex: 1;
    color: var(--accent-cyan);
    font-size: 1rem;
}

.accordion-icon {
    color: var(--text-dim);
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.planner-accordion-item.collapsed .accordion-icon {
    transform: rotate(-90deg);
}

.planner-accordion-content {
    padding: 4px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.planner-accordion-item.collapsed .planner-accordion-content {
    display: none;
}

/* Copy Button */
.copy-btn {
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-dim);
    transition: all 0.2s;
}

.copy-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.copy-btn.copied {
    background: rgba(0, 255, 100, 0.1);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.planner-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.planner-section {
    padding: 4px;
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    margin-bottom: 2px;
}

.planner-section-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.planner-section-full .story-summary-content {
    flex: 1;
    overflow-y: auto;
}

.planner-section h3 {
    margin: 0 0 2px 0;
    color: var(--accent-cyan);
    font-size: 1rem;
}

.planner-hint {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 2px;
    font-style: italic;
}

/* Journal export buttons container */
.journal-export-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.journal-export-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.95rem;
    font-weight: 600;
    background: rgba(40, 40, 50, 0.9);
    border: 1px solid rgba(147, 51, 234, 0.4);
    border-radius: var(--radius-sm);
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.journal-export-btn:hover:not(:disabled) {
    background: rgba(147, 51, 234, 0.25);
    border-color: rgba(147, 51, 234, 0.7);
    color: #fff;
}

.journal-export-btn:active:not(:disabled) {
    background: rgba(147, 51, 234, 0.35);
    transform: scale(0.98);
}

.journal-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Different accent for EPUB button */
.journal-export-btn[data-format="epub"] {
    border-color: rgba(59, 130, 246, 0.4);
}

.journal-export-btn[data-format="epub"]:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.7);
}

.story-summary-content,
.plans-content {
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 40px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.story-summary-content em,
.plans-content em {
    color: var(--text-dim);
}

.planner-timestamp {
    display: block;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.planner-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

/* Update Request Form */
.planner-update-form {
    border-color: var(--accent-cyan);
}

.form-group {
    margin-bottom: 4px;
}

.form-group label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-select {
    width: 100%;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

.form-select:focus {
    border-color: var(--accent-cyan);
    outline: none;
}

.form-textarea {
    width: 100%;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.form-textarea:focus {
    border-color: var(--accent-cyan);
    outline: none;
}

.update-status {
    margin-top: 2px;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: none;
}

.update-status.success {
    display: block;
    background: rgba(0, 255, 100, 0.1);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
}

.update-status.error {
    display: block;
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
}

.update-status.pending {
    display: block;
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
}

.planner-footer {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px;
    border-top: 1px solid var(--border-dim);
}

/* Verification Results */
.verification-results {
    border-color: var(--accent-orange);
}

.verdict {
    font-weight: 500;
    padding: var(--space-sm);
    border-radius: 4px;
    margin-bottom: var(--space-sm);
}

.verdict-gm_drift {
    background: rgba(255, 165, 0, 0.2);
    color: var(--accent-orange);
}

.verdict-player_cheating {
    background: rgba(255, 50, 50, 0.2);
    color: var(--accent-red);
}

.verdict-both_correct {
    background: rgba(0, 255, 100, 0.2);
    color: var(--accent-green);
}

.verdict-unclear,
.verdict-error {
    background: rgba(100, 100, 100, 0.2);
    color: var(--text-dim);
}

.corrections {
    font-size: 0.9rem;
}

.corrections h4 {
    margin: var(--space-sm) 0;
    color: var(--text-secondary);
}

.corrections ul {
    margin: 0;
    padding-left: var(--space-md);
}

.corrections li {
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

/* Interactive Review Section */
.review-stats {
    background: rgba(0, 200, 255, 0.1);
    border: 1px solid var(--accent-cyan);
    border-radius: 4px;
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
    color: var(--accent-cyan);
}

.review-findings {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--space-md);
}

.review-finding {
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    transition: border-color 0.2s;
}

.review-finding.accepted {
    border-color: var(--accent-green);
    background: rgba(0, 255, 100, 0.05);
}

.review-finding.disputed {
    border-color: var(--accent-orange);
    background: rgba(255, 165, 0, 0.05);
}

.finding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.finding-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--accent-cyan);
}

.finding-status {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.finding-status.missing {
    background: rgba(255, 165, 0, 0.2);
    color: var(--accent-orange);
}

.finding-status.conflict {
    background: rgba(255, 50, 50, 0.2);
    color: var(--accent-red);
}

.finding-fact {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.finding-evidence {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--accent-cyan);
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.finding-evidence-header {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
}

.finding-planner-says {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
    margin: var(--space-sm) 0;
}

.finding-suggested {
    background: rgba(0, 255, 100, 0.1);
    border-left: 3px solid var(--accent-green);
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    font-size: 0.85rem;
    color: var(--accent-green);
}

.finding-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.finding-actions button {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid;
}

.btn-accept {
    background: rgba(0, 255, 100, 0.2);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-accept:hover {
    background: rgba(0, 255, 100, 0.3);
}

.btn-dispute {
    background: rgba(255, 165, 0, 0.2);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.btn-dispute:hover {
    background: rgba(255, 165, 0, 0.3);
}

.dispute-input {
    width: 100%;
    margin-top: var(--space-sm);
    display: none;
}

.dispute-input.active {
    display: block;
}

.dispute-input textarea {
    width: 100%;
    min-height: 60px;
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--accent-orange);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.review-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-dim);
}

/* ===== JOURNAL SECTION ===== */
.journal-section {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
}

.journal-section h4 {
    color: var(--accent-purple);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.briefing-content {
    background: var(--bg-input);
    border-radius: 4px;
    padding: var(--space-sm);
}

.briefing-date {
    color: var(--accent-cyan);
    font-size: 0.85rem;
    margin-bottom: var(--space-xs);
}

.briefing-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.briefing-headlines {
    margin-top: var(--space-sm);
    font-size: 0.85rem;
}

.briefing-headlines ul {
    margin: var(--space-xs) 0 0 var(--space-md);
    padding: 0;
}

.briefing-headlines li {
    margin-bottom: 4px;
}

.headline-category {
    color: var(--accent-orange);
    font-size: 0.75rem;
    text-transform: uppercase;
}

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

.diary-entry-preview {
    background: var(--bg-input);
    border-radius: 4px;
    padding: var(--space-sm);
    border-left: 3px solid var(--accent-purple);
}

.diary-date {
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: 500;
}

.diary-mood {
    color: var(--accent-orange);
    font-size: 0.75rem;
    font-style: italic;
}

.diary-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

.diary-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.diary-header:hover {
    opacity: 0.8;
}

.diary-expand-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}

.diary-full {
    margin-top: var(--space-sm);
}

.diary-full-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.diary-copy-btn {
    margin-top: var(--space-xs);
    padding: 4px 12px;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
}

.diary-copy-btn:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.journal-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.journal-actions button {
    flex: 1;
    min-width: 140px;
}

/* ===== ORIENTATION LOCK ===== */
#orientation-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--space-lg);
    color: var(--text-primary);
    text-align: center;
    padding: var(--space-xl);
}

#orientation-overlay .rotate-icon {
    font-size: 4rem;
    animation: rotate-phone 2s ease-in-out infinite;
}

#orientation-overlay .rotate-message {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

@keyframes rotate-phone {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

/* Show overlay on mobile landscape */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #orientation-overlay {
        display: flex;
    }
}

/* ===== MESSAGE COPY BUTTONS ===== */
.narrative-entry {
    position: relative;
}

.msg-copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.narrative-entry:hover .msg-copy-btn {
    opacity: 1;
}

.msg-copy-btn:hover {
    background: var(--border-bright);
    color: var(--text-secondary);
}

.msg-id-copy {
    font-family: var(--font-mono);
}

.msg-content-copy {
    background: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--accent-cyan);
}

/* Per-message replay button — always visible (hover-reveal is useless on touch) */
.msg-replay-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 0.7rem;
    line-height: 24px;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid #b388ff;
    color: #b388ff;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, background 0.2s, transform 0.1s;
    z-index: 2;
}
.msg-replay-btn:hover { opacity: 1; background: rgba(179, 136, 255, 0.15); }
.msg-replay-btn:active { transform: scale(0.92); }

.narrative-entry.audio-active { box-shadow: inset 3px 0 0 #b388ff; }

.audio-transport {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 6px auto;
    padding: 2px 12px;   /* hug the buttons: ~button height + a few px */
    background: rgba(20, 16, 30, 0.92);
    border: 1px solid #b388ff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}
.audio-transport.visible { display: flex; }
.at-btn {
    background: none;
    border: none;
    color: #d9c2ff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}
.at-btn:hover { color: #fff; background: rgba(179, 136, 255, 0.2); }
.at-toggle { font-size: 1.2rem; color: #b388ff; }
.at-speed {
    background: rgba(179, 136, 255, 0.12);
    border: 1px solid rgba(179, 136, 255, 0.45);
    color: #d9c2ff;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 6px;
    cursor: pointer;
    /* Keep it from stretching the pill taller than the buttons it sits with. */
    height: 22px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.at-speed:hover { color: #fff; background: rgba(179, 136, 255, 0.25); }
.at-speed:focus-visible { outline: 1px solid #b388ff; outline-offset: 1px; }
/* The list itself renders in the OS popup, which won't inherit the pill's
   dark background on every platform — set it so the text stays readable. */
.at-speed option { background: #14101e; color: #d9c2ff; }
.at-label { font-size: 0.7rem; color: var(--text-dim); margin-left: 4px; }
.audio-transport.paused .at-label::after { content: ' — paused'; color: #b388ff; }

/* ===== Schedule / calendar (HUD accordion) ===== */
.cal-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cal-tab {
    flex: 1;
    padding: 5px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
}
.cal-tab.active { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(0, 212, 255, 0.1); }
.cal-event.cal-past { opacity: 0.75; }
.cal-row.cal-recap { color: var(--accent-green); font-style: normal; }
.cal-add-btn {
    width: 100%;
    margin-bottom: 8px;
    padding: 6px;
    background: var(--bg-input);
    border: 1px dashed var(--accent-cyan);
    color: var(--accent-cyan);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.cal-add-btn:hover { background: rgba(0, 212, 255, 0.1); }
.cal-event {
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}
.cal-event-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
}
.cal-event-head:hover { background: var(--bg-hover); }
.cal-when {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.cal-title { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--text-main); }
.cal-cat {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 10px;
}
.cal-detail {
    padding: 6px 10px 8px;
    border-top: 1px solid var(--border-dim);
    background: var(--bg-main);
}
.cal-row { font-size: 0.75rem; color: var(--text-secondary); margin: 3px 0; }
.cal-row.cal-notes { color: var(--text-dim); font-style: italic; }
.cal-actions { display: flex; gap: 8px; margin-top: 6px; }
.cal-done, .cal-del, .cal-keep {
    background: none;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    cursor: pointer;
}
.cal-done:hover { color: var(--accent-green); border-color: var(--accent-green); }
.cal-del:hover { color: var(--accent-red, #e66); border-color: var(--accent-red, #e66); }
.cal-keep:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* Possible-duplicate GM schedule items: advisory highlight + badge */
.cal-event.cal-dup { border-left: 2px solid #e0b000; }
.cal-dup-badge {
    font-size: 0.6rem;
    color: #e0b000;
    border: 1px solid #e0b00066;
    background: #e0b0001a;
    border-radius: 10px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* ===== Plans (HUD accordion, read-only). Tabs and rows reuse the .cal-* styles. ===== */
.plan-slots {
    font-size: 0.7rem;
    opacity: 0.65;
    padding: 2px 2px 6px;
}
.plan-point {
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    margin: 6px 0;
    padding: 2px 0 2px 8px;
}
.plan-point-resolved { opacity: 0.55; }
.plan-point-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.plan-point-title {
    font-size: 0.8rem;
    font-weight: 600;
}
.plan-point-status {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.plan-point-summary {
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.85;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.plan-hint {
    font-size: 0.65rem;
    font-style: italic;
    opacity: 0.5;
}

/* ===== Fill the screen reliably on iOS (kills the empty band below the pill) =====
   Size main-content off a JS-measured --vh (real window.innerHeight) instead of
   dvh/100% which drift when Safari's address bar shows/hides — so it holds without
   needing to scroll. narrative-pane fills; the pill sits just above the fixed input,
   whose measured height (--input-area-h) is reserved so it never overlaps. */
.main-content {
    height: calc(var(--vh, 1vh) * 100);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--input-area-h, 96px);
}
.narrative-pane {
    flex: 1 1 auto;
    min-height: 0;
    /* Breathing room so the last message(s) clear the fixed input box when scrolled
       to the bottom — the bottom rows were tucking under the input. */
    padding-bottom: 2.5rem;
    scroll-padding-bottom: 2.5rem;
    /* Keep this pane's scroll from chaining into the document (iOS rubber-band),
       which was scrolling the whole page and opening the black band. */
    overscroll-behavior: contain;
}

/* Error with retry button */
.narrative-entry.error-retry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.3);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
}

.error-retry .error-text {
    color: var(--accent-orange);
}

.retry-btn {
    padding: 6px 16px;
    background: var(--accent-orange);
    color: var(--bg-dark);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.retry-btn:hover {
    background: var(--accent-cyan);
}

.retry-btn:active {
    transform: scale(0.95);
}

/* ===== MESSAGE REFERENCE MODAL ===== */

.btn-msg-ref {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-msg-ref:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

#message-ref-modal .modal-content.message-ref-modal-content {
    max-width: 700px;
    /* % of .modal, which is inset by the safe area; 95vw ignored that inset
       and could sit wider than the space actually available. */
    width: 95%;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-lg);
}

.message-ref-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: var(--space-md);
}

.message-ref-header h3 {
    margin: 0;
    color: var(--accent-cyan);
}

.message-ref-instructions {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.message-ref-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
}

.message-ref-search input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.message-ref-search input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.message-ref-search .search-count {
    color: var(--text-dim);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.message-ref-list-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.message-ref-jump {
    position: absolute;
    right: var(--space-sm);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-dim);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.message-ref-jump:hover,
.message-ref-jump:focus {
    opacity: 1;
    outline: none;
    border-color: var(--accent-cyan);
}

.message-ref-jump:active {
    transform: scale(0.95);
}

.message-ref-jump:disabled {
    opacity: 0.4;
    cursor: wait;
}

.message-ref-jump-top {
    top: var(--space-sm);
}

.message-ref-jump-bottom {
    /* Clear of the footer: sitting at the very bottom of the list put it right
       on top of Clear Selection / Add References. */
    bottom: var(--space-xl);
}

.message-ref-list {
    flex: 1 1 auto;
    /* overflow-y alone leaves overflow-x computing to auto, so anything too
       wide scrolled the list sideways and took the page with it. */
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.message-ref-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-dim);
    margin-top: 0;
}

.message-ref-footer .selected-count {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.message-ref-item {
    display: flex;
    /* A flex item's auto minimum is its min-content width. Without this the
       card refuses to shrink past the meta row and overflows the list. */
    min-width: 0;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.message-ref-item:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.message-ref-item.selected {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.message-ref-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--accent-cyan);
}

.message-ref-body {
    flex: 1;
    min-width: 0;
}

.message-ref-meta {
    display: flex;
    flex-wrap: wrap;              /* Expand/Copy drop to a new line before overflowing */
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    /* Leave the right-hand lane free: the jump-to-newest arrow floats there,
       and it used to land on top of Copy. */
    padding-right: 44px;
    margin-bottom: var(--space-xs);
}

.message-ref-id {
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
}

.message-ref-date {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.message-ref-role-player {
    font-size: var(--font-size-xs);
    color: var(--accent-cyan);
    font-weight: 500;
}

.message-ref-role-gm {
    font-size: var(--font-size-xs);
    color: var(--accent-magenta);
    font-weight: 500;
}

.message-ref-expand {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    margin-left: auto;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.message-ref-expand:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    border-color: var(--accent-cyan);
}

.message-ref-copy {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    margin-left: 4px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.message-ref-copy:hover {
    background: var(--accent-green, #4caf50);
    color: var(--bg-primary);
    border-color: var(--accent-green, #4caf50);
}

.message-ref-item.expanded .message-ref-content {
    max-height: none;
    overflow: visible;
}

.message-ref-item.message-ref-gm {
    border-left: 2px solid var(--accent-magenta);
}

.message-ref-item.message-ref-player {
    border-left: 2px solid var(--accent-cyan);
}

.message-ref-content {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-ref-list .loading-spinner,
.message-ref-list .no-messages,
.message-ref-list .error-message {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-xl);
}

.message-ref-list .error-message {
    color: var(--accent-orange);
}

@media (max-width: 768px) {
    #message-ref-modal .modal-content.message-ref-modal-content {
        width: calc(100% - var(--space-md));   /* a hair of inset so it still reads as a dialog */
        padding: var(--space-md);
    }
    .message-ref-jump {
        width: 34px;
        height: 34px;
        font-size: var(--font-size-sm);
    }
    .message-ref-meta {
        padding-right: 38px;      /* matches the smaller arrow */
    }
    .message-ref-footer {
        gap: var(--space-sm);
    }
}

.message-ref-list .loading-more {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

/* Mobile adjustments for message reference modal */
@media (max-width: 768px) {
    #message-ref-modal .modal-content.message-ref-modal-content {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
        padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom));
    }

    .message-ref-header {
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    .message-ref-header h3 {
        font-size: 1rem;
    }

    .message-ref-instructions {
        font-size: 0.75rem;
        margin-bottom: var(--space-xs);
    }

    .message-ref-search {
        margin-bottom: var(--space-sm);
    }

    .message-ref-list {
        margin-bottom: var(--space-sm);
    }

    .message-ref-item {
        padding: var(--space-sm);
    }

    .message-ref-content {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .message-ref-footer {
        padding-top: var(--space-sm);
        padding-bottom: 0;
        gap: var(--space-sm);
        margin-top: 0;
        flex-wrap: wrap;
    }

    .message-ref-footer button {
        padding: 10px 16px;
        font-size: var(--font-size-sm);
        min-height: 44px;
        flex: 1;
        min-width: 100px;
    }

    .message-ref-footer .selected-count {
        flex-basis: 100%;
        order: -1;
        margin-bottom: var(--space-xs);
    }
}

/* ===== FUNDING SOURCE BAR ===== */

.funding-source-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-dim);
    font-size: var(--font-size-sm);
}

.funding-source-bar label {
    color: var(--text-secondary);
    white-space: nowrap;
}

.funding-source-bar select {
    flex: 1;
    max-width: 250px;
    padding: 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.funding-source-bar select:hover {
    border-color: var(--accent-cyan);
}

.funding-source-bar select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

/* Music Catalog Styles */
.chart-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
}

.chart-badge.itunes {
    background: linear-gradient(135deg, #fc3c44, #d93a41);
    color: #fff;
}

.vault-badge {
    display: inline-block;
    background: rgba(255, 136, 0, 0.15);
    color: var(--accent-orange);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    border: 1px solid rgba(255, 136, 0, 0.3);
    font-weight: 600;
}

.song-line {
    font-size: var(--font-size-sm);
}

.song-line.vault-song {
    opacity: 0.7;
}

.release-btn {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    font-weight: 600;
}

.release-btn:hover {
    background: var(--accent-secondary);
}

.album-stats {
    font-size: 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.vault-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.album-select {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-dim);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

.album-select:hover {
    border-color: var(--accent-primary);
}

/* === MUSIC STUDIO === */

.music-studio-header {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.music-section-header {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.music-album-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 0;
}

.music-album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    font-weight: 500;
}

.music-album-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.music-album-actions {
    display: flex;
    gap: 5px;
}

.music-album-body {
    padding: 0 12px 12px 12px;
}

.music-album-stats {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 10px;
}

.music-track-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.music-track-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background 0.2s;
}

.music-track-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.track-number {
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 20px;
}

.track-title {
    flex: 1;
    cursor: pointer;
    color: var(--text-primary);
}

.track-title:hover {
    text-decoration: underline;
}

.track-actions {
    display: flex;
    gap: 5px;
}

.music-song-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    margin-bottom: 8px;
}

.music-song-item.vault-song {
    border-left: 3px solid var(--accent-color);
}

.song-title {
    cursor: pointer;
    flex: 1;
}

.song-title:hover {
    text-decoration: underline;
}

.song-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chart-badge {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.vault-badge {
    background: rgba(255, 136, 0, 0.15);
    color: var(--accent-orange);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 136, 0, 0.3);
}

.music-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.btn-icon {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-icon:hover {
    opacity: 1;
}

.btn-icon-sm {
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-icon-sm:hover {
    opacity: 1;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

/* Music Modals */

.music-modal-content {
    background: var(--bg-secondary);
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
}

.music-modal-content .modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.music-modal-content .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.music-modal-content .modal-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .music-modal-content {
        width: 95%;
        max-width: none;
        max-height: 90dvh;
    }

    .music-modal-content .modal-header,
    .music-modal-content .modal-body,
    .music-modal-content .modal-footer {
        padding: 15px;
    }

    .music-modal-content .modal-footer {
        gap: 8px;
    }
}

.music-modal-content label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 13px;
}

.music-modal-content input[type="text"],
.music-modal-content textarea,
.music-modal-content select {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-family: inherit;
}

.music-modal-content textarea {
    resize: vertical;
}

.song-albums-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.album-tag {
    display: inline-block;
    background: var(--accent-color);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.no-albums {
    color: var(--text-secondary);
    font-style: italic;
}

/* Song Detail Modal */

.song-detail-modal-content {
    background: var(--bg-secondary);
    border-radius: 8px;
    max-width: 700px;
    width: 90%;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 30px;
}

@media (max-width: 768px) {
    .song-detail-modal-content {
        width: 95%;
        max-width: none;
        max-height: 90dvh;
        padding: 20px 15px;
    }
}

.song-detail-modal-content h2 {
    margin-bottom: 10px;
}

.chart-position {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #000;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    margin-bottom: 20px;
}

.song-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

@media (max-width: 480px) {
    .song-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
}

.song-stats .stat {
    display: flex;
    justify-content: space-between;
}

.song-stats .stat span:first-child {
    color: var(--text-secondary);
    font-weight: 500;
}

.song-albums {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.song-lyrics {
    margin-bottom: 20px;
}

.song-lyrics h3 {
    margin-bottom: 10px;
}

.song-lyrics pre {
    white-space: pre-wrap;
    font-family: inherit;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 6px;
    line-height: 1.6;
}

.song-notes {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

/* Drag and Drop */

.music-track-item.dragging {
    opacity: 0.5;
}

/* =================================
   Financial Audit Styles
   ================================= */

.audit-loading,
.audit-empty,
.audit-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.audit-error {
    color: var(--danger);
}

.audit-history {
    padding: 10px;
}

.audit-filters {
    margin-bottom: 20px;
}

.audit-filters h3 {
    margin-bottom: 5px;
}

.audit-hint {
    color: var(--text-muted);
    font-size: 0.9em;
    margin: 0;
}

.audit-date-group {
    margin-bottom: 30px;
}

.audit-date-header {
    background: var(--bg-tertiary);
    padding: 10px 15px;
    border-left: 3px solid var(--primary);
    margin-bottom: 10px;
    font-size: 0.95em;
    font-weight: 600;
}

.audit-entry {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.audit-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.audit-entry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.audit-time {
    font-size: 0.85em;
    color: var(--text-muted);
    min-width: 70px;
}

.audit-category-badge {
    font-size: 0.75em;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    white-space: nowrap;
}

.audit-amount {
    margin-left: auto;
    font-weight: 600;
    font-size: 1.1em;
}

.audit-amount.income {
    color: var(--success);
}

.audit-amount.expense {
    color: var(--warning);
}

.audit-entry-desc {
    margin-bottom: 8px;
    font-size: 0.95em;
}

.audit-entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: var(--text-muted);
}

.audit-balance {
    font-family: 'Courier New', monospace;
}

.audit-msg-link {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.audit-msg-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.audit-no-ref {
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
}

.audit-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.audit-page-info {
    color: var(--text-muted);
    font-size: 0.9em;
}

.message-highlight {
    animation: highlightPulse 1.5s ease-out;
}

@keyframes highlightPulse {
    0% { background: rgba(255, 215, 0, 0.3); }
    50% { background: rgba(255, 215, 0, 0.1); }
    100% { background: transparent; }
}

@media (max-width: 768px) {
    .audit-entry-header {
        flex-wrap: wrap;
    }

    .audit-amount {
        margin-left: 0;
        width: 100%;
        margin-top: 5px;
    }

    .audit-entry-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}


/* ── The spoken text, under the story ──────────────────────────────────────
   Never replaces the prose — sits beneath it, indented and monospaced, so it
   reads as apparatus rather than as part of the book. */
.audio-panel {
    margin: 10px 0 6px 0;
    padding: 8px 12px;
    border-left: 2px solid rgba(179, 136, 255, 0.35);
    background: rgba(179, 136, 255, 0.05);
    border-radius: 0 6px 6px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.55;
}
.audio-panel-head {
    color: #a9b3c7;               /* was #6f7890 — 4.31:1, under AA */
    font-size: 0.85em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.audio-panel .audio-line {
    padding: 0;
    margin-bottom: calc(0.7em * var(--narrative-scale));
}
.audio-panel .audio-line:first-child { border-top: none; }
.audio-panel .audio-voice {
    /* On its own line, and it scales with the prose. Left at a fixed size it
       shrank to nothing beside pinched-up text, and inline it collided with
       the first words of the line it labels. */
    display: block;
    margin: 0 0 2px 0;
    padding: 0;
    background: none;
    /* Same size as the prose, heavier, and light enough to actually read.
       It was the dimmest, smallest, thinnest thing on the page — which is a
       strange thing to do to the label that tells you who is talking. */
    color: #ddd0ff;
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.02em;
    vertical-align: baseline;
}
.audio-panel .audio-missing {
    color: #8a94a6;
    font-style: italic;
}


/* The one-line explanation under the audio-text toggle. */
.audio-option-note {
    margin: 4px 0 0 24px;
    color: #8a94a6;
    font-size: 0.74rem;
    line-height: 1.45;
}

/* ── Read / Audio switch ───────────────────────────────────────────────────
   Directly above the narrative, because its whole purpose is comparing the
   two: buried in a settings modal you cannot see what changed. */
.view-switch {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: #12141c;
    /* A real border around the whole control, in the same purple the prose
       accents use, so it reads as part of this page rather than dropped on. */
    border: 2px solid #b388ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 2px 8px rgba(0, 0, 0, 0.5);
}
.view-switch .view-seg {
    appearance: none;
    border: none;
    background: transparent;
    color: #d5dced;
    font: inherit;
    /* Filling the pill it already occupies — the padding was doing the work
       the letters should. */
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 9px 18px;
    min-height: 40px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, color 120ms ease;
}
.view-switch .view-seg.active {
    /* Deeper purple, white on it — the label carries rather than sits. */
    background: #5b2fd6;      /* deeper, so white on it clears AAA */
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 1px 3px rgba(0, 0, 0, 0.5);
}
.view-switch .view-seg:active { transform: translateY(1px); }

/* Reader-controlled text size. Pinch on the narrative sets --narrative-scale;
   everything that is prose scales with it, while the HUD and controls do not. */
:root { --narrative-scale: 1; }
.narrative-text,
.narrative-entry.player {
    font-size: calc(1rem * var(--narrative-scale));
    /* Leading has to scale with the type or the letters collide, but the
       RATIO should not stay constant: 1.55 is right at 16px and absurd at
       64px, where three words fill the screen and most of it is air.
       Shrinks as the text grows, floored at 1.15 so lines never touch.
       Gaps BETWEEN entries are deliberately left fixed — they are
       structural, and at large text they are the main thing telling you
       where one message ends. */
    line-height: clamp(1.15, calc(1.55 - (var(--narrative-scale) - 1) * 0.13), 1.55);
}
.audio-panel {
    font-size: calc(0.92rem * var(--narrative-scale));
}

/* The Piper voice behind each speaker — hidden until asked for. The name is
   the useful thing; the slot is diagnostics. */
.audio-panel .audio-voice-id { display: none; }
body.show-voice-ids .audio-panel .audio-voice-id {
    display: inline;
    margin-right: 6px;
    color: #7f8798;
    font-size: 0.8em;
}
.audio-panel-head { cursor: pointer; }