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

:root {
    /* Backgrounds */
    --bg-primary: #08080e;
    --bg-secondary: #0f0f18;
    --bg-card: #141420;
    --bg-card-hover: #1a1a2e;
    --bg-surface: #1e1e30;

    /* Text hierarchy */
    --text-primary: #f0eee8;
    --text-secondary: #9896aa;
    --text-tertiary: #55546a;

    /* Accent — electric violet */
    --accent-primary: #7c6af5;
    --accent-glow: rgba(124, 106, 245, 0.25);
    --accent-subtle: rgba(124, 106, 245, 0.08);

    /* Keep gold for game narration */
    --text-server: #c8b060;
    --text-player: #5a8a5a;

    /* Semantic */
    --status-ok: #22c55e;
    --status-warn: #eab308;
    --status-error: #ef4444;

    /* Borders */
    --border-subtle: rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.18);

    /* Mic accent (keep) */
    --accent-mic: #6b2020;
    --accent-mic-active: #d42020;

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Spacing/Radius tokens */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* Backwards-compat aliases for game/editor screens */
    --text-muted: var(--text-secondary);
    --text-bright: var(--text-primary);
    --accent-btn: var(--bg-surface);
    --accent-btn-hover: var(--bg-card-hover);
}

html, body {
    height: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.screen {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

/* --- Start Screen --- */

#start-screen {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "main";
    min-height: 100%;
    padding: 2rem;
    position: relative;
}

/* Ambient background glow */
#start-screen::before {
    content: '';
    position: fixed;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(124, 106, 245, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#start-screen > * {
    position: relative;
    z-index: 1;
}

.start-header {
    grid-area: header;
    text-align: center;
    padding: 2rem 0 3rem;
}

#start-screen h1 {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #f0eee8 0%, #7c6af5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0;
    animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
    opacity: 0;
}

.start-main {
    grid-area: main;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.scenario-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 560px;
    width: 100%;
    align-content: start;
}

@media (min-width: 900px) {
    .scenario-list {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        max-width: 800px;
    }
}

.scenario-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    opacity: 0;
    animation: card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scenario-card:nth-child(1) { animation-delay: 0.12s; }
.scenario-card:nth-child(2) { animation-delay: 0.17s; }
.scenario-card:nth-child(3) { animation-delay: 0.22s; }
.scenario-card:nth-child(4) { animation-delay: 0.27s; }
.scenario-card:nth-child(5) { animation-delay: 0.32s; }

/* Subtle inner gradient on cards */
.scenario-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 106, 245, 0.04) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.scenario-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(124, 106, 245, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Continue/saved game card gets accent border */
.scenario-card.has-save {
    border-color: rgba(124, 106, 245, 0.25);
}

.scenario-card.has-save:hover {
    border-color: rgba(124, 106, 245, 0.5);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(124, 106, 245, 0.3),
        0 0 20px rgba(124, 106, 245, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Scenario card icon area */
.scenario-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-subtle);
    border: 1px solid rgba(124, 106, 245, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.scenario-card-content {
    flex: 1;
    min-width: 0;
}

.scenario-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.scenario-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.scenario-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    align-self: center;
}

.btn-play {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.45rem 1rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.btn-play:hover {
    background: #6b5ad4;
    box-shadow: 0 0 12px rgba(124, 106, 245, 0.3);
}

.btn-play.resume {
    background: linear-gradient(135deg, #7c6af5, #9b8afb);
}

.btn-icon-edit {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-icon-edit:hover {
    border-color: var(--border-default);
    color: var(--text-secondary);
}

.btn-icon-edit svg {
    width: 14px;
    height: 14px;
}

.loading {
    color: var(--text-secondary);
    font-style: italic;
}

.save-badge {
    display: inline-block;
    background: rgba(34, 197, 94, 0.15);
    color: var(--status-ok);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
    vertical-align: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Language Selector --- */

.lang-selector {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.btn-lang {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

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

.btn-lang.active {
    background: var(--accent-subtle);
    border-color: rgba(124, 106, 245, 0.4);
    color: var(--accent-primary);
}

/* --- Game Screen --- */

.status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.game-clock {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-server);
    background: var(--bg-primary);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.1em;
}

.sound-toggle-btn {
    background: none;
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-main);
    font-size: 0.7rem;
    transition: all 0.2s;
}

.sound-toggle-btn.active {
    border-color: var(--status-ok);
    color: var(--status-ok);
}

.sound-toggle-btn.muted {
    border-color: var(--status-error);
    color: var(--status-error);
    opacity: 0.6;
}

.slider-group:first-of-type {
    margin-left: auto;
}

.slider-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.slider-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 4px;
    background: #2a2a3a;
    border-radius: 2px;
    outline: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    cursor: pointer;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-ok);
    transition: background 0.3s;
}

.dot.warn { background: var(--status-warn); }
.dot.error { background: var(--status-error); }

/* --- Chat Log --- */

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

.msg {
    max-width: 85%;
    animation: fadeIn 0.3s ease-in;
}

.msg.server {
    color: var(--text-server);
    align-self: flex-start;
}

.msg.server p {
    margin: 0.4em 0;
}

.msg.server p:first-child { margin-top: 0; }
.msg.server p:last-child { margin-bottom: 0; }

.msg.server strong {
    color: #d8c89a;
}

.msg.server h3, .msg.server h4, .msg.server h5 {
    color: var(--text-server);
    font-size: 1.05em;
    margin: 0.6em 0 0.2em;
}

.msg.server h3:first-child,
.msg.server h4:first-child,
.msg.server h5:first-child {
    margin-top: 0;
}

.msg.server ul, .msg.server ol {
    margin: 0.3em 0;
    padding-left: 1.5em;
}

.msg.server li {
    margin: 0.15em 0;
}

.msg.server code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.msg.server hr {
    border: none;
    border-top: 1px solid #2a2a3a;
    margin: 0.5em 0;
}

.msg.player {
    color: var(--text-player);
    font-family: var(--font-mono);
    align-self: flex-end;
    font-size: 0.95rem;
}

.msg.player::before {
    content: "> ";
    opacity: 0.5;
}

.msg.npc-event {
    color: #7a7a9a;
    font-style: italic;
    font-size: 0.9rem;
    align-self: flex-start;
    border-left: 2px solid #3a3a5a;
    padding-left: 0.75rem;
}

.msg.npc-event p {
    margin: 0.3em 0;
}

.msg.npc-event p:first-child { margin-top: 0; }
.msg.npc-event p:last-child { margin-bottom: 0; }

.msg.npc-event strong {
    color: #8a8aaa;
}

.msg.system {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    align-self: center;
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* --- Input Bar --- */

.input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid #1a1a2a;
}

#text-input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    color: var(--text-bright);
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

#text-input:focus {
    border-color: rgba(124, 106, 245, 0.5);
    box-shadow: 0 0 0 3px rgba(124, 106, 245, 0.1);
}

#text-input::placeholder {
    color: var(--text-muted);
}

#text-input:disabled {
    opacity: 0.4;
}

.mic-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--accent-mic);
    background: transparent;
    color: var(--accent-mic);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mic-btn.active {
    background: var(--accent-mic-active);
    border-color: var(--accent-mic-active);
    color: white;
    animation: pulse 1s infinite;
}

.mic-btn.no-support {
    display: none;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 32, 32, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(212, 32, 32, 0); }
}

/* --- Button --- */

.btn {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5rem 1.25rem;
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
}

/* --- Game Over Overlay --- */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.overlay-content {
    text-align: center;
    max-width: 500px;
    padding: 2rem;
}

.overlay-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-server);
}

.overlay-content p {
    margin-bottom: 1.5rem;
    color: var(--text-bright);
    line-height: 1.6;
}

/* --- Thinking indicator --- */

.thinking {
    color: var(--text-muted);
    font-style: italic;
    align-self: flex-start;
}

.thinking::after {
    content: '...';
    animation: dots 1.5s infinite;
}

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

/* --- Scrollbar --- */

.chat-log::-webkit-scrollbar {
    width: 6px;
}

.chat-log::-webkit-scrollbar-track {
    background: transparent;
}

.chat-log::-webkit-scrollbar-thumb {
    background: #2a2a3a;
    border-radius: 3px;
}

/* --- Editor Screen --- */

.editor-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid #1a1a2a;
}

.editor-title-input {
    flex: 1;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: var(--font-main);
    color: var(--text-server);
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    outline: none;
    transition: border-color 0.2s;
}

.editor-title-input:hover {
    border-color: #2a2a3a;
}

.editor-title-input:focus {
    border-color: var(--text-server);
}

.editor-title-input::placeholder {
    color: var(--text-muted);
    font-weight: normal;
}

.editor-prompt-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.editor-backdrop {
    position: absolute;
    inset: 0;
    overflow: auto;
    pointer-events: none;
}

.editor-backdrop > div {
    padding: 1rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--text-bright);
}

.editor-prompt {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    caret-color: var(--text-bright);
    border: none;
    padding: 1rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    z-index: 1;
}

.editor-prompt:disabled {
    opacity: 0.5;
}

/* Markdown highlight tokens */
.editor-backdrop .md-heading { color: var(--text-server); font-weight: bold; }
.editor-backdrop .md-bold { color: #c0a0d0; font-weight: bold; }
.editor-backdrop .md-list { color: var(--text-server); }
.editor-backdrop .md-tag { color: #d4885a; }
.editor-backdrop .md-slug { color: #5ab8b8; border-bottom: 1px solid #5ab8b8; }
.editor-backdrop .md-text { color: var(--text-bright); }

/* --- Slug Autocomplete --- */

.slug-autocomplete {
    position: fixed;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    max-height: 180px;
    overflow-y: auto;
    min-width: 160px;
}

.slug-ac-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-bright);
}

.slug-ac-item:hover,
.slug-ac-item.active {
    background: #2a2a3a;
}

.slug-ac-item .slug-ac-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: #2a2a3a;
    color: var(--text-muted);
    flex-shrink: 0;
}

.slug-ac-item .slug-ac-match {
    color: #5ab8b8;
}

.slug-ac-item .slug-ac-name {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.editor-status {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-secondary);
    text-align: center;
}

.editor-input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid #1a1a2a;
}

.editor-input-bar input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    color: var(--text-bright);
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.editor-input-bar input:focus {
    border-color: var(--text-server);
}

.editor-input-bar input::placeholder {
    color: var(--text-muted);
}

.editor-input-bar input:disabled {
    opacity: 0.4;
}

/* --- Editor Tabs --- */

.editor-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid #1a1a2a;
    padding: 0 1rem;
}

.editor-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.editor-tab:hover {
    color: var(--text-bright);
}

.editor-tab.active {
    color: var(--text-server);
    border-bottom-color: var(--text-server);
}

.editor-tab span {
    font-size: 0.8rem;
    opacity: 0.7;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* --- Lore Panel --- */

.lore-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid #1a1a2a;
}

.lore-filters {
    display: flex;
    gap: 0.25rem;
}

.lore-filter {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-family: var(--font-main);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.lore-filter:hover {
    border-color: var(--text-bright);
    color: var(--text-bright);
}

.lore-filter.active {
    background: #2a2a3a;
    border-color: var(--text-server);
    color: var(--text-server);
}

.lore-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lore-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* --- Lore Card --- */

.lore-card {
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lore-card.lore-type-location { border-left: 3px solid #5a8a5a; }
.lore-card.lore-type-inventory { border-left: 3px solid #d4885a; }
.lore-card.lore-type-npc { border-left: 3px solid #5a88d4; }

.lore-card.lore-type-location .lore-card-header input { color: #5a8a5a; }
.lore-card.lore-type-inventory .lore-card-header input { color: #d4885a; }
.lore-card.lore-type-npc .lore-card-header input { color: #5a88d4; }

.lore-card.empty {
    border-color: var(--status-warn);
    border-left-width: 3px;
}

.lore-card.lore-card-highlight {
    border-color: #5ab8b8;
    box-shadow: 0 0 8px rgba(90, 184, 184, 0.4);
    animation: lore-flash 1.5s ease-out;
}

@keyframes lore-flash {
    0% { box-shadow: 0 0 12px rgba(90, 184, 184, 0.6); }
    100% { box-shadow: 0 0 0 rgba(90, 184, 184, 0); }
}

.lore-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lore-card-header select {
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    outline: none;
}

.lore-card-header select:focus {
    border-color: var(--text-server);
}

.lore-card-header input {
    flex: 1;
    background: var(--bg-primary);
    color: var(--text-server);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: bold;
    outline: none;
}

.lore-card-header input:focus {
    border-color: var(--text-server);
}

.lore-card-header input::placeholder {
    color: var(--text-muted);
    font-weight: normal;
}

.lore-name-input {
    font-family: var(--font-main) !important;
    font-weight: normal !important;
    color: var(--text-bright) !important;
}

.lore-card textarea {
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.5rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 5rem;
    overflow: hidden;
}

.lore-card textarea:focus {
    border-color: var(--text-server);
}

.lore-card textarea::placeholder {
    color: var(--text-muted);
}

/* --- Lore NPC fields --- */

.lore-npc-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid #2a2a3a;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.lore-npc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lore-npc-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.lore-npc-select {
    background: var(--bg-primary);
    color: #5a88d4;
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    outline: none;
    flex: 1;
}

.lore-npc-select:focus {
    border-color: #5a88d4;
}

.lore-npc-instructions {
    width: 100%;
    background: var(--bg-primary);
    color: #5a88d4;
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.4rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    resize: none;
    outline: none;
    overflow: hidden;
    min-height: 5rem;
}

.lore-npc-instructions:focus {
    border-color: #5a88d4;
}

.lore-npc-instructions::placeholder {
    color: var(--text-muted);
}

/* --- Lore Exits --- */

.lore-exits-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lore-exits-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lore-exit-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lore-exit-row input {
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    outline: none;
}

.lore-exit-row input:focus {
    border-color: var(--text-server);
}

.lore-exit-row input::placeholder {
    color: var(--text-muted);
}

.lore-exit-row .exit-direction {
    width: 100px;
}

.lore-exit-row .exit-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.lore-exit-row .exit-slug {
    flex: 1;
}

.lore-exit-row .btn-exit-remove {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.lore-exit-row .btn-exit-remove:hover {
    border-color: var(--status-error);
    color: var(--status-error);
}

.lore-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-lore-add-exit {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0.15rem 0.6rem;
    font-family: var(--font-main);
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-lore-add-exit:hover {
    border-color: var(--text-server);
    color: var(--text-server);
}

.btn-lore-delete {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0.2rem 0.8rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-lore-delete:hover {
    border-color: var(--status-error);
    color: var(--status-error);
}

.btn-lore-regenerate {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 0.2rem 0.8rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-lore-regenerate:hover {
    border-color: #5ab8b8;
    color: #5ab8b8;
}

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

.lore-card-regenerating {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.lore-card-regenerating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(90, 184, 184, 0.05) 10px,
        rgba(90, 184, 184, 0.05) 20px
    );
    animation: lore-regen-stripe 0.8s linear infinite;
    pointer-events: none;
    border-radius: 8px;
}

@keyframes lore-regen-stripe {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

/* --- Edit / Save buttons --- */

.btn-edit {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: var(--text-muted);
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.btn-edit:hover {
    border-color: var(--text-server);
    color: var(--text-server);
}

.btn-save {
    background: var(--status-ok);
    border-color: var(--status-ok);
}

.btn-save:hover {
    background: #37a337;
}

/* --- History Panel --- */

.history-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.history-item {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #1a1a2a;
    cursor: pointer;
}

.history-item:hover {
    background: #1e1e2a;
}

.history-item .history-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-item .history-title {
    font-size: 0.85rem;
    color: var(--text-server);
}

.history-item .history-preview {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.history-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Diff Preview Overlay --- */

.diff-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    background: rgba(10, 10, 15, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.diff-panel {
    background: var(--bg-secondary);
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.diff-summary {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid #2a2a3a;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.diff-changes {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.diff-card {
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    overflow: hidden;
}

.diff-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border-bottom: 1px solid #2a2a3a;
}

.diff-card-type {
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.diff-card-type.new { background: #2d5a2d; color: #8fbc8f; }
.diff-card-type.add { background: #2d5a2d; color: #8fbc8f; }
.diff-card-type.modified { background: #4a4a2d; color: #c8c88a; }
.diff-card-type.modify { background: #4a4a2d; color: #c8c88a; }
.diff-card-type.deleted { background: #5a2d2d; color: #bc8f8f; }
.diff-card-type.delete { background: #5a2d2d; color: #bc8f8f; }

.diff-card-slug {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-server);
    flex: 1;
}

.diff-card-actions {
    display: flex;
    gap: 0.35rem;
}

.btn-diff-card-accept,
.btn-diff-card-reject {
    background: transparent;
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-diff-card-accept {
    color: #5a8a5a;
}

.btn-diff-card-accept:hover {
    border-color: #5a8a5a;
    background: rgba(45, 90, 45, 0.2);
}

.btn-diff-card-reject {
    color: #8a5a5a;
}

.btn-diff-card-reject:hover {
    border-color: #8a5a5a;
    background: rgba(90, 45, 45, 0.2);
}

.diff-card.accepted { border-color: #2d5a2d; opacity: 0.6; }
.diff-card.rejected { border-color: #5a2d2d; opacity: 0.4; }

.diff-card-body {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
}

.diff-line-add {
    background: #2d5a2d;
    color: #c8e6c8;
    display: block;
    padding: 0 0.35rem;
    border-radius: 2px;
    margin: 1px 0;
}

.diff-line-remove {
    background: #5a2d2d;
    color: #e6c8c8;
    display: block;
    padding: 0 0.35rem;
    border-radius: 2px;
    margin: 1px 0;
}

.diff-line-context {
    color: var(--text-muted);
    display: block;
    padding: 0 0.35rem;
    margin: 1px 0;
}

.diff-lore-before-after {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.diff-lore-before-after > div {
    flex: 1;
    min-width: 0;
}

.diff-lore-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    letter-spacing: 0.04em;
}

.diff-lore-content {
    background: var(--bg-primary);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: var(--text-bright);
    max-height: 120px;
    overflow-y: auto;
}

.diff-lore-content.before {
    border-left: 2px solid #5a2d2d;
}

.diff-lore-content.after {
    border-left: 2px solid #2d5a2d;
}

.diff-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #2a2a3a;
    background: var(--bg-card);
}

.btn-diff-accept {
    background: #2d5a2d;
    border-color: #2d5a2d;
    color: #c8e6c8;
}

.btn-diff-accept:hover {
    background: #377a37;
}

.btn-diff-reject {
    background: #5a2d2d;
    border-color: #5a2d2d;
    color: #e6c8c8;
}

.btn-diff-reject:hover {
    background: #7a3737;
}

/* --- Editor dimmed state during preview --- */

.editor-dimmed .editor-prompt-wrap,
.editor-dimmed .lore-list {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Editor Toast --- */

.editor-toast {
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-bright);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 90;
    animation: toast-in 0.3s ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.btn-toast-undo {
    background: transparent;
    border: 1px solid var(--text-server);
    color: var(--text-server);
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-toast-undo:hover {
    background: rgba(200, 184, 138, 0.15);
}

/* --- Undo Counter --- */

.undo-counter {
    font-size: 0.7rem;
    color: var(--text-server);
    background: rgba(200, 184, 138, 0.15);
    border: 1px solid rgba(200, 184, 138, 0.3);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    cursor: default;
}

/* --- Diff loading spinner --- */

.diff-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

.diff-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #2a2a3a;
    border-top-color: var(--text-server);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* --- Scripts Panel --- */

.scripts-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.script-card {
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-left: 3px solid #b07acc;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.script-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.script-card-header input[type="text"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2a3a;
    color: #b07acc;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    outline: none;
    flex: 1;
    min-width: 120px;
}

.script-card-header input[type="number"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2a3a;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    outline: none;
    width: 50px;
    text-align: center;
}

.script-card-header label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.script-text-area {
    background: var(--bg-primary);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    color: var(--text-bright);
    font-family: var(--font-main);
    font-size: 0.85rem;
    padding: 0.5rem;
    resize: none;
    min-height: 5rem;
    outline: none;
    line-height: 1.5;
    overflow: hidden;
}

.script-text-area:focus {
    border-color: #b07acc;
}

.script-section {
    border-top: 1px solid #1a1a2a;
    padding-top: 0.5rem;
}

.script-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.3rem;
}

.script-condition-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.script-condition-row select {
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    outline: none;
}

.script-condition-row input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2a3a;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
    outline: none;
    flex: 1;
}

.script-condition-row .btn-exit-remove {
    flex-shrink: 0;
}

.script-kv-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.script-kv-row input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2a3a;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
    outline: none;
    flex: 1;
}

.script-fact-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.script-fact-row input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2a3a;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
    outline: none;
    flex: 1;
}

.btn-script-add-row {
    background: transparent;
    border: 1px dashed #2a2a3a;
    border-radius: 4px;
    color: var(--text-tertiary);
    font-family: var(--font-main);
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-script-add-row:hover {
    border-color: #b07acc;
    color: #b07acc;
}

.script-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.3rem;
}

/* --- Docs Panel --- */

.docs-toolbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.docs-lang-select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.8rem;
}

.docs-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 800px;
}

.docs-content h1 {
    font-size: 1.5rem;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
}

.docs-content h2 {
    font-size: 1.2rem;
    color: var(--text-bright);
    margin: 2rem 0 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-subtle);
}

.docs-content h3 {
    font-size: 1rem;
    color: var(--text-bright);
    margin: 1.5rem 0 0.4rem;
}

.docs-content p {
    margin: 0.5rem 0;
}

.docs-content code {
    background: var(--bg-tertiary);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--accent-gold);
}

.docs-content pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    overflow-x: auto;
    margin: 0.8rem 0;
}

.docs-content pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}

.docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0;
    font-size: 0.85rem;
}

.docs-content th,
.docs-content td {
    border: 1px solid var(--border-subtle);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.docs-content th {
    background: var(--bg-tertiary);
    color: var(--text-bright);
    font-weight: 600;
}

.docs-content blockquote {
    border-left: 3px solid var(--accent-gold);
    padding: 0.3rem 0.8rem;
    margin: 0.8rem 0;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 0 4px 4px 0;
}

.docs-content hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5rem 0;
}

.docs-content ul, .docs-content ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.docs-content li {
    margin: 0.2rem 0;
}

.docs-content a {
    color: var(--accent-gold);
    text-decoration: none;
}

.docs-content a:hover {
    text-decoration: underline;
}

.docs-content strong {
    color: var(--text-bright);
}

.docs-loading, .docs-error {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.docs-error {
    color: var(--accent-red, #e57373);
}

/* --- Settings Panel --- */

.settings-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-group {
    background: var(--bg-card);
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 1rem;
}

.settings-group-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2a2a3a;
}

.settings-row {
    padding: 0.5rem 0;
}

.settings-row + .settings-row {
    border-top: 1px solid #1a1a2a;
}

.settings-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-bright);
    margin-bottom: 0.15rem;
}

.settings-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.4rem;
}

.settings-control {
    max-width: 400px;
}

.settings-input {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.settings-input:focus {
    border-color: var(--text-server);
}

.settings-input::placeholder {
    color: var(--text-muted);
}

.settings-input-number {
    width: 120px;
}

/* Rules panel */
.rules-panel-inner {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
}

.rules-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 0.3rem;
}

.rules-section-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.rules-textarea {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    min-height: 6em;
    line-height: 1.5;
    overflow: hidden;
    overflow: hidden;
}

.rules-textarea:focus {
    border-color: var(--text-server);
}

.rules-textarea::placeholder {
    color: var(--text-muted);
}

.rules-checkbox-label {
    font-size: 0.9rem;
    color: var(--text-bright);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.settings-select {
    background: var(--bg-primary);
    color: var(--text-bright);
    border: 1px solid #2a2a3a;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    outline: none;
}

.settings-select:focus {
    border-color: var(--text-server);
}

.settings-control-range {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-control-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    max-width: 300px;
    height: 4px;
    background: #2a2a3a;
    border-radius: 2px;
    outline: none;
}

.settings-control-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-server);
    cursor: pointer;
}

.settings-range-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-server);
    min-width: 2.5rem;
}

/* Danger Zone */
.settings-group-danger {
    border-color: var(--status-error);
}

.settings-group-danger .settings-group-title {
    color: var(--status-error);
    border-bottom-color: rgba(139, 45, 45, 0.3);
}

.btn-danger {
    background: transparent;
    border: 1px solid var(--status-error);
    color: var(--status-error);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: rgba(139, 45, 45, 0.2);
}

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

.settings-delete-confirm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(139, 45, 45, 0.1);
    border: 1px solid rgba(139, 45, 45, 0.3);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-bright);
}

.btn-danger-confirm {
    background: var(--status-error);
    border: 1px solid var(--status-error);
    color: #fff;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-danger-confirm:hover {
    background: #a03030;
}

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

/* Settings scrollbar */
.settings-scroll::-webkit-scrollbar {
    width: 6px;
}

.settings-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.settings-scroll::-webkit-scrollbar-thumb {
    background: #2a2a3a;
    border-radius: 3px;
}

/* --- Skeleton Loading --- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    opacity: 0;
    animation: card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.skeleton-card:nth-child(1) { animation-delay: 0s; }
.skeleton-card:nth-child(2) { animation-delay: 0.08s; }
.skeleton-card:nth-child(3) { animation-delay: 0.16s; }

.skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-surface) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
}

.skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-line {
    height: 0.75rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-surface) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.long { width: 100%; }

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    opacity: 0;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    color: var(--text-tertiary);
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Accessibility Focus --- */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* --- Responsive --- */

@media (max-width: 640px) {
    html { font-size: 15px; }
    #start-screen { padding: 1.5rem 1rem; }
    .start-header { padding: 1.5rem 0 2rem; }
    #start-screen h1 { font-size: 2rem; }
    .scenario-card { padding: 1rem 1.2rem; }
    .scenario-card h3 { font-size: 0.95rem; }
    .btn-lang { padding: 0.3rem 0.7rem; } /* Larger touch target */

    .chat-log { padding: 0.75rem; }
    .msg { max-width: 95%; }

    .diff-panel { max-width: 100%; }
    .diff-lore-before-after { flex-direction: column; }
    .settings-scroll { padding: 0.75rem; }
    .settings-control { max-width: 100%; }
    .settings-input-number { width: 100%; }
    .settings-delete-confirm { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   MODE SELECTOR — Start Screen
   ============================================================ */

.mode-selector {
    display: inline-flex;
    gap: 0;
    margin-top: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 3px;
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 1.4rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.mode-btn:hover {
    color: var(--text-primary);
}

.mode-btn.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 106, 245, 0.3);
}

/* ============================================================
   MODE: TEXT (Book Style — "Text C")
   Serif font, page frame with margins, ornamental dividers,
   no mic, no sound controls, pen icon on input.
   ============================================================ */

/* Hide audio-only elements in text mode */
.mode-text .mic-orb,
.mode-text .sound-toggle-btn,
.mode-text .audio-only-el {
    display: none !important;
}

/* Show text input in text mode */
.mode-text #input-bar {
    display: flex;
}

/* Book typography */
.mode-text .chat-log {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    padding: 2rem 3rem;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    gap: 0;
}

/* Page frame effect */
.mode-text #game-screen {
    background:
        linear-gradient(to right, rgba(255,255,255,0.02) 0%, transparent 3%, transparent 97%, rgba(255,255,255,0.02) 100%),
        var(--bg-primary);
}

.mode-text .chat-log::before {
    content: '';
    display: block;
    border-top: 1px solid var(--border-subtle);
    margin-bottom: 1.5rem;
}

/* Server message: book narrative */
.mode-text .msg.server {
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 100%;
    margin-bottom: 0.5rem;
    opacity: 0.92;
}

.mode-text .msg.server p {
    margin: 0.6em 0;
    text-indent: 1.5em;
}

.mode-text .msg.server p:first-child {
    text-indent: 0;
}

.mode-text .msg.server p:first-child::first-letter {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-server);
}

.mode-text .msg.server strong {
    color: var(--text-server);
    font-weight: 600;
}

/* Player message: inline in book */
.mode-text .msg.player {
    color: var(--text-player);
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    align-self: flex-start;
    max-width: 100%;
    margin: 0.75rem 0 0.25rem;
    padding-left: 1.5em;
}

.mode-text .msg.player::before {
    content: "\276F  ";
    opacity: 0.4;
}

/* NPC events in book mode */
.mode-text .msg.npc-event {
    font-family: 'Lora', Georgia, serif;
    border-left: 2px solid var(--border-default);
    color: var(--text-secondary);
    max-width: 100%;
    margin: 0.5rem 0;
    padding-left: 1em;
}

/* Ornamental divider between turns */
.book-divider {
    text-align: center;
    margin: 1.5rem 0;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    user-select: none;
}

.book-divider::before {
    content: "\2500\2500  \2726  \2500\2500";
}

/* Text input styled as quill/pen */
.mode-text .input-bar {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    padding: 0.75rem 1rem;
}

.mode-text #text-input {
    font-family: 'Lora', Georgia, serif;
    font-size: 1rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.mode-text #text-input:focus {
    border-color: var(--text-server);
    box-shadow: 0 0 0 2px rgba(200, 176, 96, 0.1);
}

.mode-text #text-input::placeholder {
    font-style: italic;
    color: var(--text-tertiary);
}

/* Status bar: minimal in text mode */
.mode-text .status {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    border-bottom: none;
    padding-top: 0.75rem;
}

/* ============================================================
   MODE: AUDIO (Ambient — "Audio B")
   Fullscreen narrative, floating orb mic, no text input,
   audio controls in status bar, immersive feel.
   ============================================================ */

/* Hide text input in audio mode */
.mode-audio #input-bar {
    display: none !important;
}

/* Show mic orb in audio mode */
.mode-audio .mic-orb {
    display: flex;
}

/* Fullscreen narrative */
.mode-audio .chat-log {
    padding: 2rem 2.5rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    gap: 1.25rem;
}

.mode-audio .msg.server {
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 100%;
    color: var(--text-primary);
    opacity: 0.9;
}

.mode-audio .msg.player {
    display: none;
}

.mode-audio .msg.npc-event {
    max-width: 100%;
}

/* Floating mic orb */
.mic-orb {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent-mic);
    color: var(--accent-mic);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
}

.mic-orb:hover {
    transform: scale(1.08);
    border-color: var(--accent-mic-active);
    color: var(--accent-mic-active);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 32, 32, 0.15);
}

.mic-orb.active {
    background: var(--accent-mic-active);
    border-color: var(--accent-mic-active);
    color: white;
    transform: scale(1.1);
    box-shadow:
        0 0 0 6px rgba(212, 32, 32, 0.15),
        0 0 30px rgba(212, 32, 32, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.4);
    animation: orb-pulse 1.5s ease-in-out infinite;
}

@keyframes orb-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px rgba(212, 32, 32, 0.15),
            0 0 30px rgba(212, 32, 32, 0.25),
            0 4px 16px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(212, 32, 32, 0.08),
            0 0 40px rgba(212, 32, 32, 0.3),
            0 4px 16px rgba(0, 0, 0, 0.4);
    }
}

/* Ambient background gradient for audio mode */
.mode-audio #game-screen {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(124, 106, 245, 0.04) 0%, transparent 60%),
        var(--bg-primary);
}

/* Audio mode status bar */
.mode-audio .status {
    justify-content: center;
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
}

/* Thinking indicator: centered in audio mode */
.mode-audio .msg.thinking {
    text-align: center;
    align-self: center;
    font-size: 1rem;
}

/* ============================================================
   MODE: Responsive adjustments
   ============================================================ */

@media (max-width: 600px) {
    .mode-text .chat-log {
        padding: 1.25rem 1.5rem;
    }

    .mode-text .input-bar {
        max-width: 100%;
    }

    .mode-text .status {
        max-width: 100%;
    }

    .mode-audio .chat-log {
        padding: 1.25rem 1rem;
    }

    .mic-orb {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 48px;
        height: 48px;
    }

    .mic-orb svg {
        width: 20px;
        height: 20px;
    }
}