:root {
    --bg: #0b0d12;
    --bg-gradient: radial-gradient(circle at 20% 20%, #141825 0%, #0b0d12 50%, #080a0f 100%);
    --panel: #151920;
    --panel-hover: #1d222b;
    --border: #2a3140;
    --border-glow: rgba(0, 188, 212, 0.25);
    --text: #e1e6ed;
    --muted: #8b94a7;
    --accent: #00d4f0;
    --accent-hover: #00bcd4;
    --warning: #ffb300;
    --error: #ff5252;
    --success: #69f0ae;
    --entropy: #ff9800;
    --entropy-dim: #e65100;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --radius: 12px;
}

/* Light mode (the fleet nav's switch sets data-theme on <html>): panels, HUD and menus. */
:root[data-theme="light"] {
    --bg: #eef1f5;
    --bg-gradient: linear-gradient(180deg, #f4f6f9 0%, #e9edf2 100%);
    --panel: #ffffff;
    --panel-hover: #f1f4f8;
    --border: #cfd5de;
    --border-glow: rgba(0, 127, 145, 0.25);
    --text: #1b2230;
    --muted: #5b6577;
    --accent: #00798a;
    --accent-hover: #006574;
    --warning: #a86b00;
    --error: #c62828;
    --success: #1e7d4a;
    --entropy: #c25e00;
    --entropy-dim: #9a4a00;
    --shadow: 0 8px 24px rgba(20, 30, 50, 0.12);
}

:root[data-theme="light"] .chrome {
    background: rgba(255, 255, 255, 0.88);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:not(.tn-nav-btn):hover {
    text-decoration: underline;
}

.chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.5rem;
    background: rgba(21, 25, 32, 0.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 100;
}

@media (max-width: 640px) {
    .chrome {
        padding: 0.6rem 1rem;
        gap: 0.4rem 0.8rem;
    }
    .chrome > a {
        font-size: 0.9rem;
    }
}

.chrome > a:first-child {
    font-weight: 700;
    color: var(--text);
}

.chrome .spacer {
    flex: 1;
}

.chrome-help {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.chrome-help:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: scale(1.1);
}

main {
    margin: 0 auto;
    padding: 2rem 3rem;
    max-width: 1600px;
}

@media (max-width: 1200px) {
    main {
        padding: 2rem 1.5rem;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn:hover {
    background: var(--panel-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border-color: transparent;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #33ddff, var(--accent));
    box-shadow: 0 4px 20px var(--border-glow);
}

/* Landing */
.hero {
    text-align: center;
    padding: 4rem 1rem;
    position: relative;
}

.hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(rgba(11, 13, 18, 0.65), rgba(11, 13, 18, 0.92)), url('/static/images/hero.png') center/cover no-repeat;
    border-radius: var(--radius);
    margin: 0 1.5rem;
    image-rendering: pixelated;
}

.hero h1 {
    font-size: 3.5rem;
    margin: 0;
    color: var(--accent);
    text-shadow: 0 0 40px rgba(0, 212, 240, 0.25);
    animation: titleGlow 4s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.hero .tagline, .hero-actions {
    position: relative;
    z-index: 1;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 40px rgba(0, 212, 240, 0.2); }
    50% { text-shadow: 0 0 60px rgba(0, 212, 240, 0.4); }
}

.tagline {
    font-size: 1.35rem;
    color: var(--muted);
    max-width: 650px;
    margin: 1.25rem auto;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
}

section {
    margin-bottom: 3.5rem;
}

section h2 {
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.card h3 {
    margin-top: 0;
    color: var(--entropy);
}

.locked-case {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.lock-icon {
    font-size: 1.25rem;
    filter: grayscale(0.5);
}

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
}

.steps li {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    animation: stepIn 0.5s ease-out both;
}

.steps li:nth-child(1) { animation-delay: 0.1s; }
.steps li:nth-child(2) { animation-delay: 0.2s; }
.steps li:nth-child(3) { animation-delay: 0.3s; }
.steps li:nth-child(4) { animation-delay: 0.4s; }
.steps li:nth-child(5) { animation-delay: 0.5s; }
.steps li:nth-child(6) { animation-delay: 0.6s; }
.steps li:nth-child(7) { animation-delay: 0.7s; }

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

.steps li span {
    color: var(--accent);
    font-weight: 700;
}

.learn ul {
    columns: 2;
    list-style: none;
    padding: 0;
}

.learn li {
    padding: 0.35rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.learn li::before {
    content: '◆';
    color: var(--accent);
    position: absolute;
    left: 0;
}

footer {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* Hub */
.hub {
    max-width: none;
}

.hub-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.hub-header h1 {
    margin: 0;
    font-size: 2.25rem;
}

.entropy-pixi {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    opacity: 0.95;
    filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.25));
}

.status-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    transition: border-color 0.2s;
}

.stat:hover {
    border-color: var(--accent);
}

.stat .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
}

.stat .label {
    color: var(--muted);
    font-size: 0.875rem;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.scenario-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.scenario-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--entropy));
    opacity: 0;
    transition: opacity 0.2s;
}

.scenario-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.scenario-card:hover::before {
    opacity: 1;
}

.scenario-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.scenario-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.scenario-card h3 {
    margin-top: 0;
    font-size: 1.35rem;
}

.scenario-card .difficulty {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.scenario-card .scenario-desc {
    color: var(--text);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.45;
}

.scenario-image {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scenario-image img,
.scenario-image .sprite {
    width: 128px;
    height: 128px;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform 0.3s ease;
    image-rendering: pixelated;
}

.scenario-card:hover .scenario-image img,
.scenario-card:hover .scenario-image .sprite {
    transform: scale(1.06);
}

.scenario-card.locked .scenario-image {
    filter: grayscale(0.7);
    opacity: 0.6;
}

.scenario-card .concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.concept-chip {
    background: rgba(0, 212, 240, 0.1);
    border: 1px solid rgba(0, 212, 240, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: var(--accent);
}

.scenario-card .concept-chip {
    background: rgba(0, 212, 240, 0.1);
    border: 1px solid rgba(0, 212, 240, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: var(--accent);
}

.scenario-card.completed {
    border-color: var(--success);
}

.scenario-card.completed::before {
    background: linear-gradient(90deg, var(--success), transparent);
}

.case-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 0.5rem;
    background: var(--success);
    color: #000;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Campaign / chapter layout on hub */
.campaign-bar {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2rem;
}

.rank-badge {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.rank-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.rank-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.next-rank {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
}

.campaign-intro {
    color: var(--text);
    line-height: 1.6;
    font-size: 1rem;
}

.chapter {
    margin-bottom: 2.5rem;
}

.chapter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.chapter h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    color: var(--entropy);
}

.chapter-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.chapter-progress {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
}

.chapter-description {
    color: var(--text);
    line-height: 1.5;
    margin: 0 0 1rem 0;
    max-width: 900px;
}

/* Case-file narrative panels in mission */
.case-file-narrative {
    background: rgba(0, 212, 240, 0.06);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.case-file-narrative h3 {
    margin: 0 0 0.5rem 0;
    color: var(--accent);
    font-size: 1.1rem;
}

.case-file-narrative p {
    margin: 0;
}

@media (max-width: 900px) {
    .campaign-bar {
        grid-template-columns: 1fr;
    }
}

.mission-body {
    overflow: hidden;
}

.mission-layout {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 0.75rem;
    height: calc(100vh - 53px);
    padding: 0.75rem;
    box-sizing: border-box;
}

@media (min-width: 1600px) {
    .mission-layout {
        grid-template-columns: 240px 1fr 280px;
        gap: 1rem;
        padding: 1rem;
    }
}

.sidebar, .workspace, .right-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    overflow-y: auto;
    box-shadow: var(--shadow);
}

.sidebar h2 {
    margin-top: 0;
    color: var(--accent);
    font-size: 1.4rem;
}

/* Timeline */
#mission-timeline {
    margin-bottom: 1.25rem;
}

.timeline-bar {
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.timeline-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.timeline-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: right;
}

/* Phase list */
.phase-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    position: relative;
}

.phase-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.phase-list li {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    color: var(--muted);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.2s, background 0.2s;
}

.phase-list li .phase-icon {
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: grayscale(0.6);
    transition: filter 0.2s;
}

.phase-list li.active {
    background: rgba(0, 212, 240, 0.12);
    color: var(--accent);
    font-weight: 600;
}

.phase-list li.active .phase-icon {
    filter: grayscale(0);
}

.phase-list li.done {
    color: var(--success);
}

.phase-list li.done .phase-icon {
    filter: grayscale(0);
}

/* Meters */
.meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.meter-track {
    height: 8px;
    background: var(--bg);
    border-radius: 999px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.meter-fill.entropy-fill {
    background: linear-gradient(90deg, var(--entropy), var(--entropy-dim));
}

.budget-meter {
    margin-top: 1rem;
}

/* Workspace */
.workspace {
    padding: 1.25rem 1.5rem;
    position: relative;
}

.workspace::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 240, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 240, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: var(--radius);
    pointer-events: none;
    animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 40px 40px, 40px 40px; }
}

.workspace::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 212, 240, 0.04) 50%, transparent 100%);
    background-size: 100% 120px;
    border-radius: var(--radius);
    pointer-events: none;
    animation: scanMove 5s linear infinite;
}

@keyframes scanMove {
    from { background-position: 0 -120px; }
    to { background-position: 0 calc(100% + 120px); }
}

.workspace > * {
    position: relative;
    z-index: 1;
}

.workspace.animating {
    animation: fadeIn 0.35s ease forwards;
}

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

.workspace h2 {
    margin-top: 0;
    color: var(--accent);
    font-size: 1.6rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.workspace h3 {
    color: var(--entropy);
    margin-top: 1.5rem;
}

/* Crunch overlay */
.crunch-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    overflow: hidden;
    pointer-events: none;
}

.crunch-overlay.active {
    pointer-events: all;
}

.crunch-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(11, 13, 18, 0.78), rgba(11, 13, 18, 0.92)), url('/static/images/hero.png') center/cover no-repeat;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crunch-overlay.active .crunch-backdrop {
    opacity: 1;
}

.crunch-content {
    position: relative;
    text-align: center;
    max-width: 520px;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.crunch-overlay.active .crunch-content {
    opacity: 1;
    transform: scale(1);
}

.crunch-avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 152, 0, 0.45);
    animation: crunchPulse 1.4s ease-in-out infinite;
    position: relative;
}

.crunch-avatar .sprite {
    margin: 6px auto 0;
    image-rendering: pixelated;
}

.crunch-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.crunch-avatar::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 152, 0, 0.4);
    animation: spin 8s linear infinite;
}

.crunch-desk {
    margin: 0 auto 1rem;
    opacity: 0.9;
}

.crunch-desk .data-bar {
    animation: dataBar 1.2s ease-in-out infinite alternate;
}

.crunch-desk .data-dot {
    animation: dataDot 0.9s ease-in-out infinite alternate;
}

@keyframes dataBar {
    0% { opacity: 0.5; transform: scaleX(0.85); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes dataDot {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes crunchPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(255, 152, 0, 0.45); }
    50% { transform: scale(1.06); box-shadow: 0 0 64px rgba(255, 152, 0, 0.65); }
}

.crunch-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1rem;
}

.crunch-title::after {
    content: '';
    display: inline-block;
    width: 0;
    animation: thinkingDots 1.2s steps(4, end) infinite;
}

@keyframes thinkingDots {
    0% { width: 0; }
    100% { width: 2.2em; }
}

.crunch-terminal {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-height: 100px;
    max-height: 140px;
    overflow: hidden;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.crunch-terminal .line {
    display: block;
    animation: terminalIn 0.25s ease forwards;
}

@keyframes terminalIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.crunch-progress {
    width: 240px;
    height: 6px;
    background: var(--bg);
    border-radius: 999px;
    margin: 0 auto;
    overflow: hidden;
}

.crunch-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 999px;
    transition: width 0.2s linear;
}

/* Phase hero banner */
.phase-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: -1.25rem -1.5rem 1.25rem;
    background: linear-gradient(90deg, rgba(0, 212, 240, 0.12), transparent);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.phase-hero svg,
.phase-hero .sprite.phase-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    color: var(--accent);
    filter: drop-shadow(0 0 12px rgba(0, 212, 240, 0.35));
    image-rendering: pixelated;
}

.phase-hero .hero-text h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.5rem;
}

.phase-hero .hero-text p {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Right panel */
.right-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.entropy-panel {
    text-align: center;
}

.entropy-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.75rem;
    position: relative;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.entropy-avatar.sprite {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: drop-shadow(0 0 16px rgba(255, 152, 0, 0.35));
    transition: filter 0.3s;
    image-rendering: pixelated;
}

.entropy-avatar.thinking {
    animation: float 1.5s ease-in-out infinite, pulse 1.2s ease-in-out infinite;
}

.entropy-avatar.concerned.sprite {
    filter: drop-shadow(0 0 20px rgba(255, 82, 82, 0.5));
}

.entropy-avatar.happy.sprite {
    filter: drop-shadow(0 0 24px rgba(105, 240, 174, 0.45));
}

.entropy-avatar.calm.sprite {
    filter: drop-shadow(0 0 16px rgba(255, 152, 0, 0.35));
}

@keyframes pulse {
    0%, 100% { transform: scale(1) translateY(-8px); }
    50% { transform: scale(1.04) translateY(-8px); }
}

.entropy-panel h3,
.entropy-panel h4 {
    margin: 0 0 0.5rem 0;
    color: var(--entropy);
    font-size: 1.1rem;
}

.entropy-panel .message {
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    min-height: 3.5rem;
}

.stakeholder-panel h4,
.mini-log h4 {
    margin: 0 0 0.75rem 0;
    color: var(--accent);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stakeholder-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.stakeholder-row:last-child {
    border-bottom: none;
}

.stakeholder-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #000;
    flex-shrink: 0;
    overflow: hidden;
}

.stakeholder-avatar svg {
    width: 60%;
    height: 60%;
}

.stakeholder-avatar.sprite {
    background: var(--panel);
    border: 2px solid;
    overflow: hidden;
}

.stakeholder-avatar.sprite .sprite {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    image-rendering: pixelated;
}

.stakeholder-info {
    flex: 1;
    min-width: 0;
}

.stakeholder-info .name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stakeholder-info .role {
    font-size: 0.75rem;
    color: var(--muted);
}

.stakeholder-pressure {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mini-log #log-entries {
    max-height: 180px;
    overflow-y: auto;
    font-size: 0.8rem;
    color: var(--muted);
}

.log-entry {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(42, 49, 64, 0.5);
    line-height: 1.4;
}

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

.log-entry .source {
    font-weight: 600;
    color: var(--accent);
}

.log-entry .source.entropy {
    color: var(--entropy);
}

.log-entry .source.system {
    color: var(--muted);
}

/* Field collection */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.source-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.source-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.source-card.collected {
    border-color: var(--success);
    background: rgba(105, 240, 174, 0.05);
    animation: collectedPulse 2.5s ease-in-out infinite;
}

.source-card.collecting {
    border-color: var(--accent);
    background: rgba(0, 212, 240, 0.06);
    animation: collectingPulse 1.2s ease-in-out infinite;
}

@keyframes collectingPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 212, 240, 0); }
    50% { box-shadow: 0 0 22px rgba(0, 212, 240, 0.25); }
}

@keyframes collectedPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(105, 240, 174, 0); }
    50% { box-shadow: 0 0 18px rgba(105, 240, 174, 0.15); }
}

.source-card.collected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 12px;
    color: var(--success);
    font-size: 1.25rem;
    font-weight: 700;
}

.source-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.75rem;
    color: var(--accent);
    background: rgba(0, 212, 240, 0.08);
    border-radius: 50%;
    padding: 14px;
    border: 1px solid rgba(0, 212, 240, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.source-card:hover .source-icon {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(0, 212, 240, 0.2);
}

.source-card.collected .source-icon {
    background: rgba(105, 240, 174, 0.1);
    border-color: rgba(105, 240, 174, 0.35);
    color: var(--success);
}

.source-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text);
}

.source-meta {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.source-status {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Quality panel */
.quality-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.quality-card:hover {
    border-color: var(--accent);
}

.quality-card h4 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.severity {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
}

.severity.critical { background: rgba(255, 82, 82, 0.15); color: var(--error); }
.severity.medium { background: rgba(255, 179, 0, 0.15); color: var(--warning); }
.severity.low { background: rgba(105, 240, 174, 0.15); color: var(--success); }

.option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    margin: 0.6rem 0;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.option::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 240, 0.08), transparent);
    transform: skewX(-20deg);
    transition: left 0s;
}

.option:hover {
    border-color: var(--accent);
    background: var(--panel-hover);
    transform: translateX(4px);
}

.option:hover::after {
    left: 150%;
    transition: left 0.7s ease;
}

.option-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.option-content {
    flex: 1;
}

.option-content strong {
    display: block;
    margin-bottom: 0.25rem;
}

.option-content small {
    display: block;
    color: var(--entropy);
    font-size: 0.8rem;
}

.option-content .entropy-prefers {
    display: inline-block;
    background: rgba(255, 152, 0, 0.15);
    color: var(--entropy);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reveal {
    background: rgba(105, 240, 174, 0.08);
    border-left: 4px solid var(--success);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
    animation: slideIn 0.4s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Aggregation flow */
.aggregate-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.flow-source {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1.5rem;
    transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.flow-source.active {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 16px var(--border-glow);
}

.flow-arrow {
    color: var(--muted);
    font-size: 1.5rem;
}

.flow-core {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 2rem;
    position: relative;
}

.flow-core.active::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed var(--accent);
    animation: spin 8s linear infinite;
}

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

/* Charts */
.chart-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.chart-title {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.chart-line {
    filter: drop-shadow(0 0 4px var(--accent));
    animation: linePulse 2.2s ease-in-out infinite;
}

.chart-point {
    transform-origin: center;
    animation: pointPulse 2.2s ease-in-out infinite;
}

.chart-point:nth-child(odd) { animation-delay: 0.2s; }
.chart-point:nth-child(even) { animation-delay: 0.5s; }

@keyframes linePulse {
    0%, 100% { filter: drop-shadow(0 0 4px var(--accent)); }
    50% { filter: drop-shadow(0 0 10px var(--accent)); }
}

.skill-chart svg {
    display: block;
    max-width: 100%;
}

.skill-chart .chart-bar {
    transition: fill 0.2s, opacity 0.2s;
}

.skill-chart .chart-bar:hover {
    fill: var(--accent-hover);
    opacity: 0.9;
}

.skill-chart polyline,
.skill-chart circle[fill="var(--accent)"] {
    transition: stroke 0.2s, fill 0.2s;
}

.skill-chart path:hover {
    opacity: 0.85;
}

#csv-viewer .chart-container {
    background: var(--panel);
    margin-top: 1rem;
}

@keyframes pointPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.85; }
}

.chart-bar {
    transform-origin: bottom;
    transition: transform 0.2s, filter 0.2s;
}

.chart-bar:hover {
    transform: scaleY(1.04);
    filter: brightness(1.15);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    text-align: left;
    padding: 0.6rem;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Report */
.report-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.report-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 212, 240, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0s, height 0s;
}

.report-option:hover {
    border-color: var(--accent);
    transform: translateX(6px);
    box-shadow: var(--shadow);
}

.report-option:active::after {
    width: 300px;
    height: 300px;
    transition: width 0.5s ease, height 0.5s ease;
}

/* Entropy's one opinion on the report, before and after it is judged: its voice, not a verdict. */
.entropy-lean {
    margin: 0 0 1rem;
    color: var(--accent);
    font-style: italic;
}

/* Entropy's lean: marked, not endorsed. A dashed edge reads as a suggestion. */
.report-option.entropy-leaned {
    border-style: dashed;
    border-color: var(--accent);
}

.report-option .letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.report-option .body {
    flex: 1;
}

.report-option .body strong {
    display: block;
    margin-bottom: 0.25rem;
}

.report-option .body small {
    color: var(--entropy);
    font-size: 0.8rem;
}

.score-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.score {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: border-color 0.3s, transform 0.3s;
}

.score.pop {
    border-color: var(--accent);
    transform: scale(1.05);
}

.score .number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}

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

.reaction-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: slideIn 0.4s ease both;
}

.reaction-card:nth-child(1) { animation-delay: 0.1s; }
.reaction-card:nth-child(2) { animation-delay: 0.2s; }
.reaction-card:nth-child(3) { animation-delay: 0.3s; }

.reaction-card.pleased {
    border-left: 4px solid var(--success);
}

.reaction-card.angry {
    border-left: 4px solid var(--error);
}

/* Confetti */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 200;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    top: -10px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Live embed */
.live-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.live-orb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--entropy), var(--entropy-dim));
    animation: livePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes livePulse {
    0%, 100% { opacity: 0.85; transform: scale(1); box-shadow: 0 0 12px rgba(255, 152, 0, 0.3); }
    50% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 24px rgba(255, 152, 0, 0.55); }
}

.live-info h3 {
    margin: 0;
    color: var(--accent);
}

.live-info p {
    margin: 0.25rem 0 0;
    color: var(--text);
}

.phase-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: var(--bg);
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .mission-layout {
        grid-template-columns: 220px 1fr;
        grid-template-rows: 1fr auto;
        height: auto;
        min-height: calc(100vh - 53px);
    }

    .right-panel {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .right-panel > * {
        flex: 1;
        min-width: 220px;
    }
}

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

    .sidebar, .right-panel {
        order: 2;
    }

    .workspace {
        order: 1;
    }

    .cards,
    .status-bar,
    .score-board,
    .field-grid {
        grid-template-columns: 1fr;
    }

    .learn ul {
        columns: 1;
    }

    .hero h1 {
        font-size: 2.25rem;
    }
}

/* FX layer */
#fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
}

.fx-packet {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    z-index: 1000;
}

/* Media buzz feed */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.media-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.media-card:hover,
.media-card:focus {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    outline: none;
}

.media-thumb {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, #141825, #0b0d12);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}

.media-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 212, 240, 0.9);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding-left: 4px;
    box-shadow: 0 0 20px rgba(0, 212, 240, 0.4);
}

.media-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.media-doc {
    font-size: 3rem;
    opacity: 0.7;
}

.media-meta {
    padding: 1rem;
}

.media-source {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.media-date {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    margin-left: 0.5rem;
}

.media-headline {
    margin: 0.35rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text);
}

.media-summary {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

.media-views {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Media modal */
#media-modal-root {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.media-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.media-modal {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
    padding: 1.5rem;
    animation: modalIn 0.25s ease-out;
}

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

.media-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-hover);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.media-modal-close:hover {
    background: var(--error);
    border-color: var(--error);
}

.media-modal-header {
    margin-bottom: 1rem;
}

.media-modal-header h2 {
    margin: 0.25rem 0 0;
    color: var(--text);
}

.media-modal-body p {
    color: var(--muted);
    margin: 0.75rem 0;
}

.media-lead {
    font-size: 1.05rem;
    color: var(--text) !important;
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
}

.media-video-player {
    background: #05060a;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
}

.media-video-screen {
    position: relative;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #1a2332 0%, #05060a 70%);
}

.media-video-pulse {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    animation: pulseRing 2s ease-in-out infinite;
    box-shadow: 0 0 30px var(--accent);
}

@keyframes pulseRing {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.6; }
}

.media-video-title {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.media-video-watermark {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.media-video-controls {
    padding: 0.75rem 1rem;
    background: #0b0d12;
}

.media-progress {
    height: 6px;
    background: #2a3140;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

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

.media-controls-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.media-control-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-control-btn:hover {
    background: var(--accent);
    color: #000;
}

.media-time {
    flex: 1;
}

.media-transcript {
    max-height: 220px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid var(--border);
}

.media-transcript-line {
    color: var(--muted);
    padding: 0.35rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: color 0.2s, border-color 0.2s;
}

.media-transcript-line.active {
    color: var(--text);
    border-left-color: var(--accent);
}

/* Reading-contest step-by-step tutorial */
#tutorial-root,
#skill-tutorial-root {
    position: fixed;
    inset: 0;
    z-index: 2001;
    pointer-events: none;
}

#tutorial-root > *,
#skill-tutorial-root > * {
    pointer-events: auto;
}

.tutorial-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.tutorial-spotlight {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.tutorial-highlight {
    position: relative;
    z-index: 2002;
}

.tutorial-card {
    position: absolute;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem;
    max-width: 360px;
    box-shadow: var(--shadow), 0 0 24px rgba(0, 212, 240, 0.15);
    z-index: 2003;
    animation: tutorialPop 0.25s ease-out;
}

.tutorial-center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

.tutorial-step-count {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.tutorial-text {
    margin: 0 0 1rem 0;
    color: var(--text);
    line-height: 1.5;
    font-size: 1rem;
}

.tutorial-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tutorial-hint {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

@media (max-width: 640px) {
    .media-grid {
        grid-template-columns: 1fr;
    }
    .media-video-screen {
        height: 200px;
    }
}

.fx-scanner {
    border: 1px solid rgba(0, 212, 240, 0.5);
    box-shadow: inset 0 0 20px rgba(0, 212, 240, 0.25);
    background: linear-gradient(90deg, transparent 40%, rgba(0, 212, 240, 0.25) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: scannerSweep 0.55s ease-in-out;
}

@keyframes scannerSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.fx-correct {
    animation: correctFlash 0.6s ease;
}

.fx-wrong {
    animation: wrongShake 0.5s ease;
}

@keyframes correctFlash {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(105, 240, 174, 0); }
    50% { box-shadow: inset 0 0 30px 4px rgba(105, 240, 174, 0.35); }
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.fx-core-burst {
    animation: coreBurst 0.6s ease;
}

@keyframes coreBurst {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 240, 0.5); }
    50% { transform: scale(1.15); box-shadow: 0 0 30px 10px rgba(0, 212, 240, 0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 240, 0); }
}

.fx-train-pulse {
    animation: trainPulse 1.4s ease-in-out;
}

@keyframes trainPulse {
    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 0.45; transform: translate(-50%, -50%) scale(1.1); }
}

.fx-flash {
    animation: avatarFlash 0.4s ease;
}

@keyframes avatarFlash {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 152, 0, 0.35)); }
    50% { filter: drop-shadow(0 0 40px rgba(255, 152, 0, 0.9)); }
}

.fx-particle {
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 6px currentColor;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.fx-hub-confetti {
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 8px currentColor;
    transition: transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.4s ease-out;
    z-index: 1001;
}

.fx-glitch {
    animation: glitchShake 0.5s steps(4) both;
}

@keyframes glitchShake {
    0%, 100% { transform: translate(0); filter: none; }
    20% { transform: translate(-3px, 2px); filter: drop-shadow(2px 0 var(--error)); }
    40% { transform: translate(3px, -2px); filter: drop-shadow(-2px 0 var(--accent)); }
    60% { transform: translate(-2px, -1px); filter: drop-shadow(2px 0 var(--error)); }
    80% { transform: translate(2px, 1px); filter: drop-shadow(-2px 0 var(--accent)); }
}

.fx-phase-flash {
    animation: phaseFlash 0.5s ease;
}

@keyframes phaseFlash {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(0, 212, 240, 0); }
    50% { box-shadow: inset 0 0 60px 10px rgba(0, 212, 240, 0.08); }
}

.fx-phase-pulse {
    animation: phasePulse 0.8s ease;
}

@keyframes phasePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); background: rgba(0, 212, 240, 0.2); }
}

.fx-reaction-pop {
    animation: reactionPop 0.5s ease;
}

@keyframes reactionPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Mood ring around Entropy */
.entropy-avatar::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 152, 0, 0.4);
    animation: moodSpin 8s linear infinite;
    pointer-events: none;
}

.entropy-avatar.happy::before { border-color: rgba(105, 240, 174, 0.55); }
.entropy-avatar.concerned::before { border-color: rgba(255, 82, 82, 0.55); }
.entropy-avatar.thinking::before { border-color: rgba(255, 179, 0, 0.55); animation-duration: 2s; }
.entropy-avatar.confused::before { border-color: rgba(255, 152, 0, 0.4); animation-direction: reverse; }

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

/* Typing cursor for Entropy message */
.entropy-panel .message.typing::after {
    content: '|';
    color: var(--accent);
    animation: blink 0.8s infinite;
}

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

/* Entrance animations */
.field-grid .source-card,
.quality-card,
.chart-container,
.report-option,
.reaction-card {
    animation: cardIn 0.4s ease both;
}

.field-grid .source-card:nth-child(1) { animation-delay: 0.05s; }
.field-grid .source-card:nth-child(2) { animation-delay: 0.1s; }
.field-grid .source-card:nth-child(3) { animation-delay: 0.15s; }
.field-grid .source-card:nth-child(4) { animation-delay: 0.2s; }

.quality-card:nth-of-type(1) { animation-delay: 0.05s; }
.quality-card:nth-of-type(2) { animation-delay: 0.1s; }
.quality-card:nth-of-type(3) { animation-delay: 0.15s; }

.report-option:nth-child(1) { animation-delay: 0.05s; }
.report-option:nth-child(2) { animation-delay: 0.1s; }
.report-option:nth-child(3) { animation-delay: 0.15s; }

.reaction-card:nth-child(1) { animation-delay: 0.1s; }
.reaction-card:nth-child(2) { animation-delay: 0.2s; }
.reaction-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes cardIn {
    from { opacity: 0.92; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Active phase icon glow */
.phase-list li.active .phase-icon {
    animation: iconGlow 2s ease-in-out infinite;
}

.reaction-card:nth-child(1) { animation-delay: 0.1s; }
.reaction-card:nth-child(2) { animation-delay: 0.2s; }
.reaction-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes cardIn {
    from { opacity: 0.92; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Active phase icon glow */
.phase-list li.active .phase-icon {
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 212, 240, 0.4)); }
    50% { filter: drop-shadow(0 0 8px rgba(0, 212, 240, 0.8)); }
}

/* Onboarding tour */
#onboarding-root {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}

#onboarding-root > * {
    pointer-events: auto;
}

.onboard-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: fadeIn 0.3s ease;
}

.onboard-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    animation: spotlightIn 0.3s ease;
    pointer-events: none;
}

@keyframes spotlightIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.onboard-highlight {
    position: relative;
    z-index: 201;
}

.onboard-card {
    position: absolute;
    width: 320px;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 240, 0.15);
    animation: cardPop 0.3s ease;
    z-index: 202;
}

@keyframes cardPop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.onboard-step-count {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.onboard-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--accent);
    font-size: 1.25rem;
}

.onboard-card p {
    margin: 0 0 1rem 0;
    color: var(--text);
    line-height: 1.55;
}

.onboard-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.onboard-spacer {
    flex: 1;
}

/* Help modal */
.help-modal-root {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.help-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.help-modal {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 84vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
    animation: cardPop 0.25s ease;
    z-index: 1;
}

.help-modal h2 {
    margin-top: 0;
    color: var(--accent);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.help-modal h3 {
    color: var(--entropy);
    margin-top: 1.25rem;
}

.help-modal ul {
    padding-left: 1.25rem;
    line-height: 1.6;
}

.help-modal li {
    margin-bottom: 0.35rem;
}

.help-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.help-close:hover {
    color: var(--text);
    border-color: var(--accent);
}

.help-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .onboard-card {
        width: calc(100vw - 2rem);
        left: 1rem !important;
        right: 1rem;
        top: 50% !important;
        transform: translateY(-50%);
    }
}


/* Field Notebook */
.notebook-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notebook-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--entropy);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.notebook-panel {
    position: fixed;
    top: 56px;
    right: 0;
    width: 340px;
    max-width: 90vw;
    height: calc(100vh - 56px);
    background: rgba(21, 25, 32, 0.96);
    border-left: 1px solid var(--border);
    backdrop-filter: blur(10px);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.notebook-panel.open {
    transform: translateX(0);
}

.notebook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.notebook-header h4 {
    margin: 0;
    color: var(--accent);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notebook-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.notebook-close:hover {
    color: var(--text);
    border-color: var(--accent);
}

.notebook-intro {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.notebook-entries {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notebook-empty {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
    margin-top: 2rem;
}

.notebook-entry {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 0.75rem;
    font-size: 0.85rem;
    animation: slideIn 0.3s ease;
}

.notebook-entry.success {
    border-left-color: var(--success);
    background: rgba(105, 240, 174, 0.05);
}

.notebook-entry.warning {
    border-left-color: var(--warning);
    background: rgba(255, 179, 0, 0.05);
}

.notebook-entry.neutral {
    border-left-color: var(--muted);
}

.notebook-entry p {
    margin: 0;
    line-height: 1.5;
    color: var(--text);
}

.notebook-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notebook-source {
    color: var(--accent);
    font-weight: 700;
}

.notebook-time {
    color: var(--muted);
}


/* Unlock toast */
.unlock-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--panel);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(105, 240, 174, 0.15);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.unlock-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.unlock-toast strong {
    color: var(--success);
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.unlock-toast p {
    margin: 0.15rem 0 0 0;
    color: var(--text);
    font-size: 0.95rem;
}

.unlock-icon {
    font-size: 1.75rem;
    animation: unlockPulse 1.2s ease-in-out infinite;
}

@keyframes unlockPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px var(--success)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 12px var(--success)); }
}


/* Story intro modal */
.story-modal-root {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.story-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.story-modal {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    animation: modalIn 0.35s ease;
    z-index: 1;
}

.story-scene {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    box-shadow: 0 0 30px rgba(0, 212, 240, 0.1);
}

.story-scene img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
}

.story-scene-glow {
    position: absolute;
    top: 28%;
    right: 17%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.45) 0%, transparent 70%);
    animation: entropyAura 3s ease-in-out infinite;
    pointer-events: none;
}

.story-modal h2 {
    margin-top: 0;
    color: var(--accent);
    font-size: 1.5rem;
}

.story-modal .tagline {
    color: var(--muted);
    margin-bottom: 1rem;
    line-height: 1.45;
    font-size: 0.95rem;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.story-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.story-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.story-card .icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    image-rendering: pixelated;
    background-color: rgba(0, 212, 240, 0.12);
}

.story-card.entropy .icon { background-color: rgba(255, 152, 0, 0.12); }
.story-card.ray .icon { background-color: rgba(105, 240, 174, 0.12); }
.story-card.frame .icon { background-color: rgba(255, 82, 82, 0.12); }

.story-card h4 {
    margin: 0 0 0.35rem 0;
    color: var(--text);
    font-size: 0.95rem;
}

.story-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.story-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.start-here-ribbon {
    position: absolute;
    top: 12px;
    right: -28px;
    width: 110px;
    text-align: center;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 1;
    animation: badgePulse 2s infinite;
}

.scenario-card.start-here {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 212, 240, 0.25), var(--shadow);
    animation: cardGlow 2.5s infinite;
}

@keyframes cardGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 212, 240, 0.2), var(--shadow); }
    50% { box-shadow: 0 0 0 4px rgba(0, 212, 240, 0.4), var(--shadow); }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}


/* Lore unlock modal and gallery */
.lore-modal-root {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lore-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.lore-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(145deg, #1a1f27, #13161c);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow), 0 0 40px rgba(0, 212, 240, 0.15);
    animation: cardPop 0.4s ease;
    z-index: 1;
    overflow: hidden;
}

.lore-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--entropy));
}

.lore-card .stamp {
    display: inline-block;
    background: rgba(0, 212, 240, 0.12);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.lore-card h3 {
    margin: 0 0 0.75rem 0;
    color: var(--accent);
    font-size: 1.35rem;
}

.lore-card p {
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
}

.lore-card .actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 2rem 1.5rem;
    background: linear-gradient(145deg, #1a1f27, #13161c);
    border-top: 1px dashed var(--border);
}

.lore-folder-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: linear-gradient(90deg, #232a36, #1a2029);
    border-bottom: 1px solid var(--border);
}

.lore-folder-tab .stamp {
    margin: 0;
    background: rgba(255, 152, 0, 0.15);
    color: var(--entropy);
}

.lore-id {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: monospace;
    letter-spacing: 0.05em;
}

.lore-paper {
    position: relative;
    background: linear-gradient(135deg, #f4f1ea 0%, #e8e4db 100%);
    color: #1a1a1a;
    margin: 1.5rem 2rem;
    padding: 1.5rem;
    border-radius: 2px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.06);
    min-height: 160px;
}

.lore-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    bottom: 0;
    width: 2px;
    background: rgba(255, 0, 0, 0.08);
}

.lore-paper h3 {
    color: #1a1a1a;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.3rem;
    margin: 0 0 0.75rem 0;
    position: relative;
    z-index: 1;
}

.lore-paper p {
    color: #2d2d2d;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

.lore-watermark {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 2rem;
    font-weight: 900;
    color: rgba(139, 0, 0, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(-12deg);
    pointer-events: none;
    user-select: none;
}

.lore-gallery {
    margin-top: 2rem;
}

.lore-gallery h2 {
    color: var(--accent);
    margin-bottom: 1rem;
}

.lore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

/* Hint modal */
.hint-modal-root {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hint-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.hint-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow), 0 0 24px rgba(0, 212, 240, 0.15);
    animation: cardPop 0.25s ease;
    z-index: 1;
}

.hint-modal h3 {
    margin-top: 0;
    color: var(--accent);
}

.hint-modal p {
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
}

.hint-actions {
    display: flex;
    justify-content: flex-end;
}


/* Budo — masked helper messenger */
.budo-panel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 360px;
    max-width: calc(100vw - 2rem);
    max-height: 460px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1800;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.budo-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.budo-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(0, 212, 240, 0.08), rgba(255, 152, 0, 0.08));
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
}

.budo-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.budo-avatar-small svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.budo-title {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.budo-title strong {
    color: var(--accent);
    font-size: 0.95rem;
}

.budo-title span {
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.budo-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.budo-close:hover {
    color: var(--text);
    border-color: var(--accent);
}

.budo-tab-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.budo-tab-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.budo-tab-btn.active {
    background: rgba(0, 212, 240, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.budo-body {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.budo-body.active {
    display: flex;
}

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

.budo-dossier-intro {
    padding: 0.75rem;
    background: rgba(0, 212, 240, 0.06);
    border: 1px solid rgba(0, 212, 240, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.budo-dossier-intro strong {
    color: var(--accent);
    display: block;
    margin-bottom: 0.35rem;
}

.budo-dossier-intro p {
    margin: 0;
    color: var(--muted);
}

.budo-dossier-entry {
    padding: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}

.budo-dossier-title {
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.budo-dossier-text {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.budo-dossier-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.budo-dossier-empty .muted {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.budo-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
}

.budo-log .budo-line,
.budo-log .player-line {
    max-width: 90%;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    animation: messagePop 0.25s ease;
}

.budo-log .budo-line {
    align-self: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.budo-log .budo-line strong {
    display: block;
    color: var(--accent);
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.budo-log .player-line {
    align-self: flex-end;
    background: rgba(0, 212, 240, 0.12);
    border: 1px solid rgba(0, 212, 240, 0.25);
    color: var(--text);
}

.budo-log .player-line strong {
    display: none;
}

.budo-choices {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.budo-choices .btn {
    text-align: left;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

.budo-badge {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    z-index: 1801;
    padding: 4px;
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.budo-badge:hover {
    transform: scale(1.08);
}

.budo-badge.has-message {
    animation: budoPulse 1.5s ease-in-out infinite;
    border-color: var(--accent);
}

.budo-panel.open + .budo-badge,
.budo-panel.open ~ .budo-badge {
    display: none;
}

@keyframes budoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 240, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(0, 212, 240, 0); }
}

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

@media (max-width: 480px) {
    .budo-panel {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        bottom: 0.5rem;
    }
}

/* Budo intrusion cinematic */
.budo-intrusion {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: intrusionFadeIn 0.4s ease;
}

@keyframes intrusionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.budo-intrusion-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 212, 240, 0.03) 2px,
        rgba(0, 212, 240, 0.03) 4px
    );
    pointer-events: none;
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    from { background-position: 0 0; }
    to { background-position: 0 100px; }
}

.budo-intrusion-terminal {
    width: min(720px, calc(100vw - 2rem));
    background: rgba(11, 13, 18, 0.98);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 0 40px rgba(0, 212, 240, 0.2), inset 0 0 60px rgba(0, 212, 240, 0.05);
    overflow: hidden;
    animation: intrusionTerminalIn 0.5s ease 0.2s both;
}

@keyframes intrusionTerminalIn {
    from { opacity: 0; transform: scale(0.96) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.budo-intrusion-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 212, 240, 0.1);
    border-bottom: 1px solid var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.budo-intrusion-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error);
    animation: intrusionPulse 1s ease-in-out infinite;
}

@keyframes intrusionPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(255, 82, 82, 0); }
}

.budo-intrusion-body {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    min-height: 320px;
}

.budo-intrusion-avatar {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: intrusionAvatarGlitch 3s ease-in-out infinite;
}

.budo-ascii-avatar {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 0.95;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0, 212, 240, 0.6), 0 0 16px rgba(0, 212, 240, 0.25);
    white-space: pre;
    user-select: none;
}

.budo-ascii-row {
    display: block;
    height: 1em;
}

.budo-ascii-flicker {
    display: inline-block;
    min-width: 0.6em;
    text-align: center;
}

@keyframes intrusionAvatarGlitch {
    0%, 90%, 100% { transform: translate(0); filter: none; }
    91% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 var(--error)) drop-shadow(-2px 0 var(--accent)); }
    92% { transform: translate(2px, -1px); filter: drop-shadow(-2px 0 var(--error)) drop-shadow(2px 0 var(--accent)); }
    93% { transform: translate(0); filter: none; }
}

.budo-intrusion-log {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
}

.budo-intrusion-system {
    color: var(--accent);
    opacity: 0.8;
    margin-bottom: 0.35rem;
}

.budo-intrusion-line {
    color: var(--text);
    margin-bottom: 0.6rem;
}

.budo-intrusion-line:last-child::after {
    content: '▌';
    display: inline-block;
    color: var(--accent);
    animation: cursorBlink 0.8s step-end infinite;
    margin-left: 0.25rem;
}

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

/* Full-page glitch triggered at the start of Budo's intrusion. */
.budo-page-glitch {
    animation: budoPageGlitch 0.25s ease-out;
}

@keyframes budoPageGlitch {
    0% { transform: translate(0); filter: none; }
    20% { transform: translate(-4px, 2px); filter: invert(0.15) hue-rotate(90deg); }
    40% { transform: translate(4px, -2px); filter: invert(0.1) hue-rotate(-90deg); }
    60% { transform: translate(-2px, -1px); filter: invert(0.05); }
    80% { transform: translate(2px, 1px); filter: none; }
    100% { transform: translate(0); }
}

.budo-intrusion-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 150px;
    flex-shrink: 0;
}

.budo-intrusion-avatar-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-align: center;
    opacity: 0.9;
    animation: labelPulse 1.5s ease-in-out infinite;
}

@keyframes labelPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.4; }
}

.budo-intrusion-choices {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    animation: intrusionFadeIn 0.4s ease;
}

.budo-intrusion-choices .btn {
    font-size: 0.85rem;
}

.budo-watching {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 212, 240, 0.08);
    border: 1px solid rgba(0, 212, 240, 0.2);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.budo-watching::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

/* Case dossier header in mission briefing */
.case-dossier {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(0, 212, 240, 0.12), rgba(255, 152, 0, 0.08));
    border: 1px solid rgba(0, 212, 240, 0.25);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1rem 0 1.5rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    animation: dossierIn 0.5s ease-out both;
}

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

.dossier-image {
    flex: 0 0 256px;
    height: 256px;
    position: relative;
    border-radius: 10px;
    border: 1px solid rgba(0, 212, 240, 0.35);
    overflow: hidden;
    box-shadow: 0 0 24px rgba(0, 212, 240, 0.12);
}

.dossier-image .sprite {
    image-rendering: pixelated;
}

/* Establishing shot: vignette, scanlines and a slow lamp flicker over the scene. */
.dossier-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(5, 7, 12, 0.6) 100%);
    animation: lampFlicker 7s infinite;
}

@keyframes lampFlicker {
    0%, 100% { opacity: 1; }
    47% { opacity: 1; }
    48% { opacity: 0.75; }
    49% { opacity: 1; }
    51% { opacity: 0.85; }
    52% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dossier-image::after { animation: none; }
}

@media (max-width: 640px) {
    .case-dossier { flex-wrap: wrap; justify-content: center; }
}

.dossier-meta h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.5rem;
    color: var(--text);
    border-bottom: none;
}

.dossier-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.dossier-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* News ticker on the hub */
.news-ticker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.ticker-label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--entropy);
    border: 1px solid var(--entropy);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}

.ticker-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-track {
    animation: tickerSlide 0.4s ease-out;
}

.ticker-item {
    color: var(--text);
    font-size: 0.95rem;
}

.ticker-item em {
    color: var(--muted);
    font-style: normal;
    margin-left: 0.5rem;
}

@keyframes tickerSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Press clipping modal shown after case completion */
.press-modal-root {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: rootIn 0.3s ease-out;
}

.press-modal-root.fade-out {
    animation: rootOut 0.3s ease-out forwards;
}

.press-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.press-card {
    position: relative;
    background: linear-gradient(135deg, #1a1f29, #151920);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow);
    animation: cardIn 0.4s ease-out;
}

.press-card .stamp {
    display: inline-block;
    background: var(--entropy);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.press-source {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.press-date {
    margin-left: 0.5rem;
}

.press-card h3 {
    margin: 0 0 1rem 0;
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1.3;
}

.press-summary {
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.press-card .actions {
    text-align: right;
}

.press-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.press-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.press-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 212, 240, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.press-icon svg {
    width: 22px;
    height: 22px;
}

.press-brand-name {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text);
}

.press-brand-sub {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.press-source-line {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.press-source-line strong {
    color: var(--text);
    font-weight: 600;
}

.press-meta-dot {
    color: var(--border);
}

.press-duration {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.typewriter-headline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 1rem 0;
    min-height: 2.6rem;
}

.press-article .typewriter-headline {
    color: #f0f4f8;
}

.press-video .typewriter-headline {
    color: var(--entropy);
}

.press-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 0 0 1rem 0;
}

.press-card.press-article {
    background: linear-gradient(135deg, #1c212b, #161a22);
    border-left: 4px solid var(--accent);
}

.press-card.press-video {
    background: linear-gradient(135deg, #251d18, #1a1612);
    border-left: 4px solid var(--entropy);
}

.press-card.press-video .stamp {
    background: var(--entropy);
    color: #000;
}

.press-card.press-article .stamp {
    background: rgba(0, 212, 240, 0.15);
    color: var(--accent);
}

/* Live page Entropy panel enhancements */
.live-entropy-panel {
    text-align: center;
}

.live-entropy-panel .entropy-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
}

.live-entropy-panel .entropy-avatar.sprite {
    position: relative;
    z-index: 2;
    border-radius: 50%;
    animation: entropyFloat 3s ease-in-out infinite;
}

.entropy-aura {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.25) 0%, transparent 70%);
    z-index: 1;
    animation: entropyAura 2.5s ease-in-out infinite;
}

.entropy-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 152, 0, 0.4);
    z-index: 1;
    animation: entropyRing 2s linear infinite;
}

.live-entropy-panel.warning .entropy-aura {
    background: radial-gradient(circle, rgba(255, 82, 82, 0.35) 0%, transparent 70%);
}

.live-entropy-panel.warning .entropy-ring {
    border-color: rgba(255, 82, 82, 0.6);
    animation-duration: 0.6s;
}

.entropy-avatar.thinking-active .entropy-aura {
    background: radial-gradient(circle, rgba(0, 212, 240, 0.45) 0%, transparent 70%);
    animation-duration: 0.7s;
}

.entropy-avatar.thinking-active .entropy-ring {
    border-color: rgba(0, 212, 240, 0.7);
    animation-duration: 0.9s;
}

.entropy-avatar.thinking-active.sprite {
    filter: drop-shadow(0 0 24px rgba(0, 212, 240, 0.55));
}

.live-entropy-panel.warning .entropy-avatar.sprite {
    animation: entropyShake 0.4s ease-in-out infinite;
}

.live-dot {
    color: var(--error);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.5rem;
    animation: liveBlink 1.5s infinite;
}

.live-status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: rgba(0, 212, 240, 0.08);
    border: 1px solid rgba(0, 212, 240, 0.2);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.live-status-bar.warning {
    background: rgba(255, 82, 82, 0.08);
    border-color: rgba(255, 82, 82, 0.3);
    color: var(--error);
}

.live-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    box-shadow: 0 0 8px var(--error);
    animation: liveBlink 1.2s infinite;
}

.live-status-bar.warning .live-status-dot {
    background: var(--error);
}

.live-status-text {
    flex: 1;
}

.live-status-scenario {
    color: var(--muted);
    text-align: right;
}

#btn-needs-epoch {
    width: 100%;
    margin-top: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.live-hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0.75rem 0 0;
    line-height: 1.45;
}

@keyframes entropyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes entropyAura {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes entropyRing {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(180deg) scale(1.05); opacity: 0.6; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes entropyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-2deg); }
    75% { transform: translateX(3px) rotate(2deg); }
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Spreadsheet / CSV viewer */
.spreadsheet-view {
    padding: 0;
    overflow: hidden;
}

.csv-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.csv-toolbar label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.csv-toolbar select,
.csv-toolbar input {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.csv-toolbar input {
    width: 3rem;
    text-align: center;
}

.csv-meta {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted);
}

.csv-toggle {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

.csv-raw {
    margin: 0;
    padding: 1rem;
    background: #0d1016;
    color: var(--text);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    max-height: 320px;
}

.csv-table-wrap {
    overflow-x: auto;
    max-height: 360px;
}

.csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.csv-table th,
.csv-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.csv-table th {
    background: rgba(0, 212, 240, 0.08);
    color: var(--accent);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.csv-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.csv-table tr.duplicate-row {
    background: rgba(255, 82, 82, 0.12);
}

.csv-table tr.duplicate-row td:first-child {
    border-left: 3px solid var(--error);
}

.csv-table th {
    cursor: pointer;
    user-select: none;
}

.csv-table th:hover {
    background: rgba(0, 212, 240, 0.18);
}

.csv-sort-icon {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

.csv-filter-row {
    background: rgba(0, 0, 0, 0.2);
}

.csv-filter-row td {
    padding: 0.25rem 0.5rem;
    border-top: none;
}

.csv-filter {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
}

.csv-filter:focus {
    outline: none;
    border-color: var(--accent);
}

.csv-chart-btn {
    margin-left: auto;
}

.csv-mini-chart {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--border);
}

.csv-mini-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text);
}

.csv-mini-chart-header select {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.csv-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 160px;
    padding: 0.5rem 0;
    overflow-x: auto;
}

.csv-bar {
    flex: 1;
    min-width: 24px;
    max-width: 48px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(0, 212, 240, 0.6) 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.csv-bar:hover {
    opacity: 0.85;
    transform: scaleY(1.02);
    transform-origin: bottom;
}

.csv-bar-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--text);
    white-space: nowrap;
}

.csv-mini-chart-empty {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 1rem;
    text-align: center;
}

/* Skill workspace */
.skill-description {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.skill-progress {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--muted);
}

.skill-intro {
    margin-bottom: 1.5rem;
}

.skill-intro .phase-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.skill-intro .phase-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(0, 212, 240, 0.1);
    border-radius: 12px;
}

.skill-intro h2 {
    margin: 0 0 0.25rem;
    font-size: 1.4rem;
}

.skill-intro p {
    margin: 0;
    color: var(--muted);
}

.skill-check {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.skill-check h4 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.skill-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.skill-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.skill-option:hover {
    border-color: var(--accent);
    background: rgba(0, 212, 240, 0.05);
}

.skill-option input {
    accent-color: var(--accent);
}

.skill-answer-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.skill-feedback {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.skill-feedback.success {
    background: rgba(105, 240, 174, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
}

.skill-feedback.error {
    background: rgba(255, 82, 82, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
}

.skill-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#csv-viewer {
    min-height: 200px;
}

/* Hub tabs and skill lanes */
.hub-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.hub-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

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

.hub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.hub-panel {
    display: none;
}

.hub-panel.active {
    display: block;
}

.skill-lane {
    margin-bottom: 2rem;
}

.skill-lane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skill-lane h3 {
    margin: 0;
    color: var(--accent);
}

.skill-lane-progress {
    position: relative;
    width: 160px;
    height: 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.skill-lane-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 999px;
    transition: width 0.5s ease;
}

.skill-lane-progress-text {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.skill-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.skill-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(0, 212, 240, 0.08);
    text-decoration: none;
}

.skill-card.completed {
    border-color: var(--success);
    opacity: 0.85;
}

.skill-card.completed .skill-number {
    background: rgba(105, 240, 174, 0.15);
    color: var(--success);
}

.skill-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 240, 0.1);
    border-radius: 10px;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.skill-info h4 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.skill-info p {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.skill-story-beat {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 152, 0, 0.06);
    border-left: 3px solid var(--entropy);
    border-radius: 0 8px 8px 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.skill-chart {
    margin-top: 1rem;
}

.skill-chart .chart-bar {
    animation: barGrow 0.6s ease-out;
}

@keyframes barGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.skill-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(105, 240, 174, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* SQL workbench */
.sql-workbench {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.sql-schema {
    flex: 0 0 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.sql-schema h5 {
    margin: 0 0 0.75rem;
    color: var(--accent);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sql-schema-table {
    margin-bottom: 1rem;
}

.sql-schema-table strong {
    color: var(--text);
    font-size: 0.95rem;
}

.sql-schema-columns {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.sql-editor-area {
    flex: 1 1 auto;
    min-width: 0;
}

.sql-editor-area label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
}

.sql-query-input {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95rem;
    resize: vertical;
    outline: none;
}

.sql-query-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--border-glow);
}

.sql-hint {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.sql-results {
    margin-top: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
}

.sql-results .csv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sql-results .csv-table th,
.sql-results .csv-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.sql-results .csv-table th {
    color: var(--accent);
    font-weight: 600;
}

.sql-chart {
    margin-top: 1rem;
}

.sql-chart .chart-container {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

@media (max-width: 900px) {
    .sql-workbench {
        flex-direction: column;
    }
    .sql-schema {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
    }
}

.code-block {
    background: #0f1115;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: #c8d1db;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    padding: 0.75rem 1rem;
    white-space: pre;
}

.skill-question .code-block {
    margin: 0.75rem 0;
}

/* Dr. Ray in-mission messages */
.ray-message-card {
    position: fixed;
    top: 5rem;
    right: 1.5rem;
    width: 340px;
    max-width: calc(100vw - 3rem);
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 30px rgba(0, 0, 0, 0.4);
    z-index: 1700;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: all;
}

.ray-message-card.show {
    transform: translateX(0);
    opacity: 1;
}

.ray-message-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 179, 0, 0.08);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.ray-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
}

.ray-avatar-small svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.ray-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ray-meta strong {
    color: var(--warning);
    font-size: 0.95rem;
}

.ray-meta span {
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ray-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ray-close:hover {
    color: var(--text);
    border-color: var(--warning);
}

.ray-message-body {
    padding: 1rem;
}

.ray-message-body h4 {
    margin: 0 0 0.5rem;
    color: var(--text);
    font-size: 0.95rem;
}

.ray-message-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .ray-message-card {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: 4.5rem;
    }
}

/* ==========================================================================
   Meridian Data Systems — enemy threat layer
   ========================================================================== */

.meridian-threat-wrap {
    background: rgba(20, 0, 0, 0.6);
    border: 1px solid #3a1a1a;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.meridian-threat-wrap.high {
    border-color: #ff5252;
    box-shadow: 0 0 20px rgba(255, 82, 82, 0.2);
}

.meridian-threat-wrap.critical {
    border-color: #ff1744;
    box-shadow: 0 0 30px rgba(255, 23, 68, 0.35);
    animation: meridian-pulse-red 1.2s infinite;
}

@keyframes meridian-pulse-red {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 23, 68, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 23, 68, 0.6); }
}

.meridian-threat-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff8a80;
    margin-bottom: 0.4rem;
}

.meridian-threat-bar {
    height: 6px;
    background: #2a0a0a;
    border-radius: 3px;
    overflow: hidden;
}

.meridian-threat-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #ff5252, #ff1744);
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.meridian-taunt-card {
    position: fixed;
    top: 5rem;
    right: 1.5rem;
    width: 380px;
    max-width: calc(100vw - 3rem);
    background: linear-gradient(135deg, #1a0a0a 0%, #0f0505 100%);
    border: 1px solid #5a1a1a;
    border-left: 4px solid #ff1744;
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 23, 68, 0.15);
    color: #ffd8d8;
    z-index: 1000;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
    overflow: hidden;
}

.meridian-taunt-card.show {
    transform: translateX(0);
    opacity: 1;
}

.meridian-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 23, 68, 0.08);
    border-bottom: 1px solid #3a1a1a;
}

.meridian-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #ff1744;
    color: #1a0505;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 0 12px rgba(255, 23, 68, 0.5);
    flex-shrink: 0;
}

.meridian-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.meridian-meta strong {
    color: #ff5252;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.meridian-meta span {
    color: #b97171;
    font-size: 0.75rem;
}

.meridian-close {
    background: transparent;
    border: none;
    color: #b97171;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.meridian-close:hover {
    color: #ff5252;
}

.meridian-body {
    padding: 1rem;
}

.meridian-body h4 {
    margin: 0 0 0.5rem;
    color: #ff8a80;
    font-size: 1rem;
}

.meridian-body p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #ffd8d8;
}

.meridian-signature {
    text-align: right;
    font-style: italic;
    color: #ff5252 !important;
    margin-bottom: 0 !important;
}

.meridian-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 23, 68, 0.4), transparent);
    animation: meridian-scan 2.5s linear infinite;
    pointer-events: none;
}

@keyframes meridian-scan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

.meridian-flash-overlay {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 23, 68, 0.04) 2px,
        rgba(255, 23, 68, 0.04) 4px
    );
    pointer-events: none;
    z-index: 9999;
    animation: meridian-flash-fade 0.6s ease-out forwards;
}

@keyframes meridian-flash-fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.meridian-glitch-frame {
    animation: meridian-glitch-anim 0.4s steps(2) forwards;
}

@keyframes meridian-glitch-anim {
    0% { transform: translate(0); filter: none; }
    20% { transform: translate(-3px, 2px); filter: hue-rotate(90deg) saturate(1.5); }
    40% { transform: translate(3px, -2px); filter: hue-rotate(-90deg); }
    60% { transform: translate(-2px, 0); filter: contrast(1.3); }
    80% { transform: translate(2px, 1px); filter: brightness(1.2); }
    100% { transform: translate(0); filter: none; }
}

.meridian-glitch-mode {
    animation: meridian-subtle-glitch 3s infinite;
}

@keyframes meridian-subtle-glitch {
    0%, 90%, 100% { transform: translate(0); }
    91% { transform: translate(1px, 0); }
    92% { transform: translate(-1px, 0); }
    93% { transform: translate(0, 1px); }
    94% { transform: translate(0, -1px); }
    95% { transform: translate(1px, 1px); }
    96% { transform: translate(-1px, -1px); }
    97%, 99% { transform: translate(0); }
}

.meridian-red-entropy .entropy-avatar {
    filter: drop-shadow(0 0 20px #ff1744) hue-rotate(140deg) saturate(1.8);
    animation: meridian-red-pulse 1s infinite;
}

.meridian-red-entropy .entropy-avatar circle:first-of-type {
    fill: #ff1744 !important;
}

@keyframes meridian-red-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.trust-drain-pulse {
    animation: trust-drain 0.5s ease-in-out 3;
}

@keyframes trust-drain {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Meridian hack active: Entropy avatar flicker and subtle panel corruption. */
.meridian-hack-active .entropy-avatar.sprite {
    animation: meridian-eye-flicker 0.15s infinite;
}

@keyframes meridian-eye-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.meridian-hack-active .right-panel {
    animation: meridian-panel-flicker 2s infinite;
}

@keyframes meridian-panel-flicker {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    10% { box-shadow: inset 0 0 30px rgba(255, 23, 68, 0.08); }
    20% { box-shadow: inset 0 0 0 0 transparent; }
    30% { box-shadow: inset 0 0 40px rgba(255, 23, 68, 0.12); }
    40% { box-shadow: inset 0 0 0 0 transparent; }
}

/* Terminal-style intrusion modal. */
.meridian-intrusion {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.meridian-intrusion.show {
    opacity: 1;
    pointer-events: auto;
}

.meridian-intrusion.fade-out {
    opacity: 0;
}

.meridian-intrusion-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

.meridian-intrusion-terminal {
    position: relative;
    width: min(560px, 92vw);
    background: #0a0d12;
    border: 1px solid rgba(255, 23, 68, 0.5);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(255, 23, 68, 0.25), inset 0 0 60px rgba(255, 23, 68, 0.05);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.3s ease;
}

.meridian-intrusion.show .meridian-intrusion-terminal {
    transform: scale(1);
}

.meridian-terminal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 23, 68, 0.12);
    border-bottom: 1px solid rgba(255, 23, 68, 0.25);
}

.meridian-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.meridian-terminal-dot.red { background: #ff5252; }
.meridian-terminal-dot.yellow { background: #ffb300; }
.meridian-terminal-dot.green { background: #69f0ae; }

.meridian-terminal-title {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.meridian-terminal-body {
    margin: 0;
    padding: 1.25rem;
    min-height: 180px;
    max-height: 320px;
    overflow-y: auto;
    color: #ff5252;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    text-shadow: 0 0 6px rgba(255, 82, 82, 0.4);
}

.meridian-terminal-body div {
    animation: meridian-terminal-line 0.2s ease-out;
}

@keyframes meridian-terminal-line {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.meridian-terminal-body div:last-child::after {
    content: '█';
    margin-left: 0.3rem;
    animation: meridian-cursor-blink 0.8s infinite;
}

@keyframes meridian-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (max-width: 480px) {
    .meridian-taunt-card {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: 4.5rem;
    }
}

/* ==========================================================================
   Evidence Board (conspiracy wall)
   ========================================================================== */

.evidence-board {
    position: relative;
    width: 100%;
    min-height: 520px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 20%),
        repeating-linear-gradient(90deg, #151920 0, #151920 39px, #1a2029 40px),
        repeating-linear-gradient(0deg, #151920 0, #151920 39px, #1a2029 40px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.6);
}

.evidence-threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.evidence-nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.evidence-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 180px;
    transition: transform 0.2s;
    cursor: pointer;
}

.evidence-node:hover {
    transform: translate(-50%, -50%) scale(1.03);
    z-index: 10;
}

.evidence-pin {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 auto -6px;
    position: relative;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.evidence-card {
    background: rgba(21, 25, 32, 0.92);
    border: 1px solid var(--border);
    border-top-width: 3px;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(4px);
}

.evidence-card h4 {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.3;
}

.evidence-card p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evidence-icon {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
    opacity: 0.85;
}

.evidence-sprite {
    margin-bottom: 0.35rem;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.evidence-node:nth-child(odd) .evidence-card {
    transform: rotate(-1deg);
}

.evidence-node:nth-child(even) .evidence-card {
    transform: rotate(1deg);
}

.evidence-node:hover .evidence-card {
    transform: rotate(0deg);
}

@media (max-width: 768px) {
    .evidence-board {
        min-height: 700px;
    }
    .evidence-node {
        width: 140px;
    }
}

/* Python notebook UI for Phase 4 skills */

.notebook-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #161b22;
    border-bottom: 1px solid var(--border);
}


















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

/* Live page boot animation */
.live-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    text-align: center;
    padding: 2rem;
    gap: 1.25rem;
}

.live-boot h2 {
    margin: 0;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.live-boot .boot-entropy {
    position: relative;
    width: 120px;
    height: 120px;
}

.live-boot .boot-entropy.sprite {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: entropyPulse 2s ease-in-out infinite;
}

.live-boot .boot-entropy .entropy-aura {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 240, 0.25) 0%, transparent 70%);
    animation: auraPulse 2.4s ease-in-out infinite;
}

.live-boot .boot-entropy .entropy-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0.6;
    animation: ringSpin 3s linear infinite;
}

.live-boot-terminal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--accent);
    text-align: left;
    min-width: 280px;
    box-shadow: var(--shadow);
}

.boot-line {
    opacity: 0;
    animation: bootLineIn 0.4s ease forwards;
}

.boot-line:nth-child(1) { animation-delay: 0.1s; }
.boot-line:nth-child(2) { animation-delay: 0.5s; }
.boot-line:nth-child(3) { animation-delay: 0.9s; }
.boot-line:nth-child(4) { animation-delay: 1.3s; }

.live-boot-hint {
    color: var(--muted);
    max-width: 420px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

@keyframes entropyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 240, 0.35); }
    50% { transform: scale(1.04); box-shadow: 0 0 20px 6px rgba(0, 212, 240, 0.15); }
}

@keyframes auraPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes ringSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bootLineIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Live spectate source-collection pulse */
.source-card {
    position: relative;
    overflow: hidden;
}

.live-collection-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--accent);
    opacity: 0;
    animation: liveCollectPulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes liveCollectPulse {
    0% { opacity: 0; transform: scale(0.96); }
    50% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.04); }
}

/* Live status bar transition */
.live-status-bar {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Live entropy warning state */
.live-entropy-panel.warning {
    animation: liveEntropyWarning 0.8s ease-in-out;
}

@keyframes liveEntropyWarning {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0); }
    50% { box-shadow: inset 0 0 24px 4px rgba(255, 82, 82, 0.25); }
}

/* Live quality decision states */
.quality-card.correct {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success);
}

.quality-card.wrong {
    border-color: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

/* Live report score reveal */
#live-report .score-board {
    animation: scoreBoardReveal 0.5s ease-out;
}

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

/* Field Journal */
.journal-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

.journal-header {
    margin-bottom: 1.5rem;
}

.journal-header h1 {
    margin: 0 0 0.25rem;
    font-size: 2rem;
}

.journal-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.journal-progress-bar {
    width: 200px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.journal-progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--accent);
    transition: width 0.4s ease;
}

.journal-progress-text {
    color: var(--muted);
    font-size: 0.9rem;
}

.journal-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.journal-search {
    flex: 1 1 240px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-size: 1rem;
}

.journal-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--border-glow);
}

.journal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.journal-filter {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.journal-filter:hover,
.journal-filter.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 212, 240, 0.08);
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.journal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.journal-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.journal-card.locked {
    opacity: 0.55;
    border-style: dashed;
}

.journal-card.locked:hover {
    border-color: var(--border);
    transform: none;
}

.journal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.journal-domain {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.journal-status {
    font-size: 0.8rem;
    color: var(--muted);
}

.journal-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.journal-teaser {
    color: var(--muted);
    font-style: italic;
}

.journal-section {
    margin-top: 0.75rem;
}

.journal-section h4 {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warning);
}

.journal-section p {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
}

.hub-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Formula helper =========================================================== */

.formula-helper {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: var(--shadow);
}

.formula-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.formula-label {
    font-weight: 700;
    color: var(--accent);
}

.formula-hint {
    font-size: 0.85rem;
    color: var(--muted);
}

.formula-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.formula-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
}

.formula-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--border-glow);
}

.formula-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.formula-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.formula-chip:hover {
    border-color: var(--accent);
    background: var(--panel-hover);
}

.formula-preview {
    overflow-x: auto;
}

.formula-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.formula-preview-table th,
.formula-preview-table td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.formula-preview-table th {
    background: var(--bg);
    color: var(--accent);
    font-weight: 600;
}

.formula-error {
    color: var(--error);
    background: rgba(255, 82, 82, 0.08);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Cinematic dialogue panel */
.dialogue-root {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dialogue-root.active {
    opacity: 1;
    pointer-events: auto;
}

.dialogue-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 15, 0.78);
    backdrop-filter: blur(2px);
}

.dialogue-panel {
    position: relative;
    display: flex;
    gap: 1.25rem;
    width: 100%;
    max-width: 900px;
    background: linear-gradient(135deg, rgba(21, 25, 32, 0.96), rgba(11, 13, 18, 0.98));
    border: 1px solid rgba(0, 212, 240, 0.35);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(0, 212, 240, 0.08);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    animation: dialogueIn 0.35s ease forwards;
}

.dialogue-root.active .dialogue-panel {
    transform: translateY(0);
}

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

.dialogue-portrait-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.dialogue-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    image-rendering: pixelated;
    box-shadow: 0 0 24px rgba(0, 212, 240, 0.25);
    border: 2px solid rgba(0, 212, 240, 0.35);
}

.dialogue-portrait-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 1.5rem;
}

.dialogue-body {
    flex: 1;
    min-width: 0;
}

.dialogue-meta {
    margin-bottom: 0.35rem;
}

.dialogue-name {
    font-weight: 700;
    color: var(--accent);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dialogue-text {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--text);
    min-height: 3.5rem;
}

.dialogue-text.typing::after {
    content: '|';
    color: var(--accent);
    animation: blink 0.8s infinite;
}

.dialogue-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.dialogue-choice {
    animation: choiceIn 0.3s ease both;
}

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

.dialogue-hint {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.7;
}

.dialogue-skip {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    z-index: 1;
}

.dialogue-skip:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
}

@media (max-width: 640px) {
    .dialogue-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
    }
    .dialogue-portrait {
        width: 64px;
        height: 64px;
    }
    .dialogue-text {
        font-size: 1rem;
    }
}

/* Module 0 lessons: the idea, a worked example that stays on screen, and a real Python editor. */
.lesson {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 212, 240, 0.04);
}

.lesson h3 {
    margin: 0.75rem 0 0.4rem;
    font-size: 1rem;
    color: var(--accent);
}

.lesson-idea {
    line-height: 1.6;
}

.lesson-idea code,
.py-files code {
    background: #0f1115;
    border-radius: 4px;
    padding: 0 0.3rem;
}

.lesson-file {
    margin-bottom: 0.5rem;
}

.lesson-file-name {
    font-size: 0.8rem;
    color: var(--muted);
}

.py-editor {
    width: 100%;
    box-sizing: border-box;
    background: #0f1115;
    color: #c8d1db;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    tab-size: 4;
    resize: vertical;
}

.py-editor:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.py-output {
    background: #07090c;
    color: var(--success);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    max-height: 16rem;
    overflow: auto;
}

.py-error {
    border: 1px solid var(--error);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    margin: 0.5rem 0;
    color: var(--text);
    background: rgba(255, 82, 82, 0.08);
}

.py-files {
    color: var(--muted);
    font-size: 0.9rem;
}

.py-answer-label {
    display: block;
    margin-top: 0.75rem;
    font-weight: 600;
}

.lesson-next {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lesson-next p {
    margin: 0;
    width: 100%;
}

/* Sheet coordinates in the CSV grid: column letters above, row numbers down the side. */
.csv-letters td,
.csv-rownum {
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    user-select: none;
}

.csv-rownum {
    width: 2.5rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Spreadsheets From Zero: the lesson page and its sheet ---------- */
.lesson-track {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: lesson;
}

.lesson-track li {
    counter-increment: lesson;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.lesson-track li::before {
    content: counter(lesson) ".";
    color: var(--muted);
    min-width: 1.5rem;
}

.lesson-track li a {
    flex: 1;
    color: var(--text);
    text-decoration: none;
}

.lesson-track li.current {
    background: rgba(0, 212, 240, 0.12);
    outline: 1px solid var(--accent);
}

.lesson-track li.complete a {
    color: var(--success);
}

.lesson-track-meta {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lesson-intro {
    color: var(--text);
    line-height: 1.6;
}

.lesson-step {
    background: var(--panel-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.lesson-step-count {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.lesson-say {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.lesson-answer {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lesson-answer input {
    flex: 1;
    max-width: 14rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
}

.lesson-feedback {
    min-height: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lesson-controls {
    display: flex;
    gap: 0.5rem;
}

/* The sheet itself looks like a spreadsheet: light cells, dark ink, grey headings. */
.sheet {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #f7f8fa;
    color: #1b1f24;
}

.sheet-tabs {
    display: flex;
    gap: 2px;
    background: #e3e6ea;
    padding: 4px 4px 0;
}

.sheet-tab {
    border: 1px solid #c4c9d0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #eef0f3;
    color: #1b1f24;
    padding: 0.25rem 0.9rem;
    font: inherit;
    cursor: pointer;
}

.sheet-tab.active {
    background: #ffffff;
    font-weight: 600;
}

.sheet-tab.lit {
    outline: 2px solid #b26a00;
}

.sheet-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-bottom: 1px solid #c4c9d0;
    background: #ffffff;
}

.sheet-address {
    width: 5.5rem;
    font: 600 0.95rem ui-monospace, Consolas, monospace;
    text-align: center;
    border: 1px solid #c4c9d0;
    border-radius: 4px;
    padding: 0.3rem;
    color: #1b1f24;
    background: #f7f8fa;
}

.sheet-fx {
    font-style: italic;
    color: #555d68;
}

.sheet-formula {
    flex: 1;
    font: 0.95rem ui-monospace, Consolas, monospace;
    border: 1px solid #c4c9d0;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    color: #1b1f24;
    background: #ffffff;
}

.sheet-formula:focus,
.sheet-grid:focus {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
}

.sheet-grid-wrap {
    overflow: auto;
    max-height: 26rem;
}

.sheet-grid {
    border-collapse: collapse;
    font: 0.95rem system-ui, sans-serif;
    user-select: none;
}

.sheet-grid th {
    background: #e9ecef;
    color: #3c434d;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid #c4c9d0;
    padding: 0.2rem 0.4rem;
    min-width: 2.2rem;
}

.sheet-grid th.lit {
    background: #ffd27a;
    color: #1b1f24;
}

.sheet-corner {
    background: #dde1e6;
}

.sheet-cell {
    border: 1px solid #d5d9df;
    min-width: 6.5rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    white-space: nowrap;
    background: #ffffff;
    cursor: cell;
}

.sheet-cell.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sheet-cell.err {
    color: #b3261e;
}

.sheet-cell.lit {
    background: #fff1cc;
}

.sheet-cell.sel {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
    background: #e8f0fe;
}

@media (max-width: 640px) {
    .sheet-cell { min-width: 4.5rem; }
}

/* The data-analytics lifecycle, shown on every lesson with its stage lit. */
.lifecycle-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin: 0.75rem 0 0;
}

.lifecycle-strip li {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
}

.lifecycle-strip li + li::before {
    content: "→ ";
    color: var(--muted);
}

.lifecycle-strip li.lit {
    border-color: var(--warning);
    color: var(--text);
    background: rgba(255, 179, 0, 0.14);
    font-weight: 600;
}

.lesson-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Each mission phase names its lifecycle stage, in the same words the lessons use. */
.phase-stage {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The lesson track on the Board. */
.lesson-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    margin: 1rem 0 0;
}

.lesson-pills li a {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
}

.lesson-pills li.complete a {
    border-color: var(--success);
    color: var(--success);
}

.lesson-track-panel .btn-primary {
    display: inline-block;
    margin-top: 0.5rem;
}

.lesson-link {
    color: var(--accent);
    font-weight: 600;
}

.sheet-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
    background: #f1f3f5;
    border-bottom: 1px solid #c4c9d0;
}

.sheet-tools button {
    font: 0.85rem system-ui, sans-serif;
    color: #1b1f24;
    background: #ffffff;
    border: 1px solid #c4c9d0;
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.sheet-tools button:hover {
    background: #e8f0fe;
}

.case-gate {
    color: var(--text);
    font-size: 0.9rem;
}

.case-gate a {
    color: var(--accent);
    font-weight: 600;
}

.lesson-stage {
    margin: 0 0 0.5rem;
    color: var(--text);
}

.lesson-bridge {
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.flag-btn {
    margin-top: 0.5rem;
}

.flag-note {
    margin: 0.5rem 0 0;
    color: var(--warning);
}

/* ---- The case workspace (static/js/workspace.js; docs/specs/2026-10-18-case-workspace.html) ---- */
.ws-mode .phase-list li { cursor: default; }
.ws-board { margin-bottom: 1rem; }
.ws-question { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
.ws-how { color: var(--muted); margin: 0 0 1rem; max-width: 70ch; }
.ws-claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ws-claim { border: 1px solid var(--border); border-radius: 8px; padding: .75rem .9rem; }
.ws-by { color: var(--muted); font-size: .8rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.ws-claim-text { font-weight: 600; margin: .2rem 0 .5rem; }
.ws-pins { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.ws-pins li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; padding: .25rem 0; border-top: 1px solid var(--border); }
.ws-stance { color: var(--muted); }
.ws-unpin { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.ws-unpin:hover { color: var(--error); }
.ws-empty { color: var(--muted); font-size: .9rem; margin: 0; }
.ws-truth { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; }
.ws-truth.ok, .ws-say.ok { color: var(--success); }
.ws-truth.miss, .ws-say.miss { color: var(--warning); }
.ws-actions { border: 1px solid var(--border); border-radius: 8px; padding: .75rem .9rem; margin-bottom: .75rem; }
.ws-sel { font-family: ui-monospace, Consolas, monospace; margin: 0 0 .5rem; }
.ws-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ws-row select { max-width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .4rem; }
.ws-say { min-height: 1.4em; margin: 0; }
.ws-sheet { margin-bottom: 1rem; }
.ws-report { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.ws-verdict { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 .75rem; padding: .5rem .75rem; }
.ws-verdict legend { font-weight: 600; padding: 0 .25rem; }
.ws-verdict label { display: block; padding: .15rem 0; }
.ws-report-act { display: flex; gap: .5rem; }
.ws-scores { border-collapse: collapse; margin: .5rem 0 1rem; }
.ws-scores th, .ws-scores td { text-align: left; padding: .25rem .75rem .25rem 0; border-bottom: 1px solid var(--border); }
.ws-reaction { margin: .3rem 0; }
.ws-reaction.pleased b { color: var(--success); }
.ws-reaction.angry b { color: var(--error); }
.ws-epilogue { color: var(--muted); margin: 1rem 0; }
.ws-sources h4, .ws-entropy h4 { margin: 1rem 0 .5rem; }
.ws-source { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .6rem; margin-bottom: .5rem; font-size: .85rem; }
.ws-source.collected { border-color: var(--success); }
.ws-source-head { display: flex; justify-content: space-between; gap: .5rem; }
.ws-source p { color: var(--muted); margin: .25rem 0 .4rem; }
.ws-have { color: var(--success); font-size: .85rem; }
.ws-collect { padding: .2rem .7rem; }
.ws-entropy-pin { border: 1px solid var(--border); border-left: 3px solid var(--entropy); border-radius: 6px; padding: .5rem .6rem; margin-bottom: .5rem; font-size: .85rem; }
.ws-entropy-pin p { margin: 0 0 .3rem; }
.ws-method { color: var(--muted); }
.ws-entropy-act { display: flex; gap: .4rem; }