@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
    --surface-0: #050a05; --surface-1: #121418; --surface-dim: rgba(0, 20, 0, 0.5);
    --terminal-green: #33ff00; --terminal-dim: #1a8000;
    --signal-cyan: #00F0FF; --signal-amber: #FFB800; --signal-emerald: #00E055; --signal-crimson: #FF2A2A; --signal-white: #e0e0e0;
    --font-main: 'Share Tech Mono', monospace;

* { box-sizing: border-box; user-select: none; }
/* PREVENT TITLE SCREEN FROM FADING */
#title-screen, #title-screen *, #title-screen *::before, #title-screen *::after { transition: none !important; opacity: 1 !important; }
/* CRITICAL: Allow pointer events to pass through to children (especially buttons) */
#title-screen { pointer-events: auto !important; }
#title-screen * { pointer-events: auto !important; }
#title-screen button, #title-screen .btn-terminal { pointer-events: auto !important; z-index: 10001 !important; position: relative !important; }

html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; overflow-x: hidden !important; position: relative !important; }
body { background-color: var(--surface-0); color: var(--terminal-green); font-family: var(--font-main); min-height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; }
/* CRITICAL: When title screen is active, ensure body doesn't cover it */
body:has(#title-screen.active) {
    background: var(--surface-0) !important; /* Keep dark background even when title screen is active */
    overflow: hidden !important;

/* UTILS */
.hidden { display: none !important; pointer-events: none !important; }
/* CRITICAL: Character Creator should be hidden by default, only show when explicitly activated */
.terminal-boot-sequence.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

/* CRITICAL: Hide Character Creator if title screen or selection screen is visible - HIGHEST PRIORITY */
body:has(#title-screen.active:not(.hidden)) .terminal-boot-sequence,
body:has(#char-select-screen.active:not(.hidden)) .terminal-boot-sequence,
#title-screen.active:not(.hidden) ~ .terminal-boot-sequence,
#char-select-screen.active:not(.hidden) ~ .terminal-boot-sequence {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

/* Only show Character Creator when it's active AND not hidden AND title/selection screens are hidden */
.terminal-boot-sequence:not(.hidden).active {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

.active:not(.hidden) { display: flex !important; }
/* Only show char-select-screen when it's active AND not hidden - hidden takes priority */
#char-select-screen.hidden { display: none !important; pointer-events: none !important; z-index: -1 !important; visibility: hidden !important; opacity: 0 !important; }
#char-select-screen:not(.hidden).active { display: flex !important; pointer-events: auto !important; }
#char-select-screen.active.hidden { display: flex !important; pointer-events: auto !important; } /* Allow active to override hidden */
#title-screen:not(.hidden) { display: flex !important; }
#title-screen.active { display: flex !important; }
/* CRITICAL: Ensure title-screen is visible by default on page load */
#title-screen { 
    display: flex !important; 
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important; 
    opacity: 1 !important; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1000 !important;
    background: radial-gradient(circle, rgba(0, 20, 0, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
    pointer-events: auto !important;
    color: var(--terminal-green, #00ff00) !important;

/* CRITICAL: Ensure title screen content is visible */
#title-screen * {
    color: #00ff00 !important;
    visibility: visible !important;
    opacity: 1 !important;

#title-screen .game-title {
    color: #00ff00 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    font-size: 5rem !important;
    text-shadow: 0 0 20px #00ff00 !important;

#title-screen .text-dim {
    color: #00aa00 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;

#title-screen .login-box {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    border: 1px solid #00ff00 !important;
    background: rgba(0,10,0,0.8) !important;

#title-screen #btn-login {
    color: #00ff00 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    border-color: #00ff00 !important;

/* Hide sidebar and navigation when title screen is active */
body:has(#title-screen.active),
html:has(#title-screen.active) {
    /* Hide sidebar when title screen is active */

#title-screen.active ~ #left-sidebar,
#title-screen.active ~ .left-sidebar,
body:has(#title-screen.active) #left-sidebar,
body:has(#title-screen.active) .left-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

.text-glow { text-shadow: 0 0 8px var(--terminal-green); } .text-dim { color: var(--terminal-dim); }
.text-cyan { color: var(--signal-cyan); } .text-amber { color: var(--signal-amber); } .text-emerald { color: var(--signal-emerald); } .text-crimson { color: var(--signal-crimson); } .text-white { color: var(--signal-white); }

button { font-family: inherit; }
.btn-terminal { background: rgba(0, 20, 0, 0.6); border: 1px solid var(--terminal-green); color: var(--terminal-green); padding: 10px 20px; cursor: pointer; text-transform: uppercase; transition: 0.2s; font-size: 1rem; }
.btn-terminal:hover:not(:disabled) { background: var(--terminal-green); color: black; box-shadow: 0 0 15px var(--terminal-green); }
.btn-terminal:disabled { border-color: var(--terminal-dim); color: var(--terminal-dim); cursor: not-allowed; opacity: 0.5; position: relative; }
.btn-terminal:disabled::after { content: " (INSUFFICIENT FUNDS)"; font-size: 0.7rem; opacity: 0; transition: opacity 0.2s; }
.btn-terminal:disabled:hover::after { opacity: 1; }
.btn-terminal:disabled[data-reason="xp"]::after { content: " (INSUFFICIENT XP)"; }
.btn-terminal:disabled[data-reason="crew"]::after { content: " (ALREADY HIRED)"; }
.btn-terminal.small { padding: 5px 10px; font-size: 0.8rem; } .btn-terminal.tiny { padding: 2px 5px; font-size: 0.7rem; }
.terminal-input { background: transparent; border: none; border-bottom: 2px solid var(--terminal-dim); color: var(--terminal-green); font-size: 1.2rem; padding: 5px; width: 100%; outline: none; font-family: inherit; }

/* ANIMATIONS */
@keyframes jack-in { 0% { transform: scale(1); filter: blur(0); } 50% { transform: scale(1.5); filter: blur(10px); opacity: 1; } 100% { opacity: 0; } }
@keyframes crt-on { 0% { transform: scaleY(1) scaleX(1); opacity: 1; } 50% { transform: scaleY(1) scaleX(1); opacity: 1; } 100% { transform: scaleY(1) scaleX(1); opacity: 1; } }
@keyframes scanline { 0% { top: -100%; } 100% { top: 100%; } }
@keyframes glitch-text { 0% { text-shadow: 2px 0 red; } 50% { text-shadow: -2px 0 blue; } 100% { text-shadow: 2px 0 red; } }
@keyframes glitch-chromatic { 0% { text-shadow: 2px 0 red, -2px 0 blue; } 25% { text-shadow: -2px 0 red, 2px 0 blue; } 50% { text-shadow: 2px 0 green, -2px 0 red; } 75% { text-shadow: -2px 0 green, 2px 0 orange; } 100% { text-shadow: 2px 0 red, -2px 0 blue; } }
@keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 60% { transform: skew(-0.5deg); } 80% { transform: skew(0.5deg); } 100% { transform: skew(0deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.jack-in-anim { animation: jack-in 1s forwards; } .crt-anim { animation: crt-on 0.5s both; }
.fade-in { animation: fade-in 0.3s; }
.loading { position: relative; pointer-events: none; opacity: 0.6; }
.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--terminal-green); border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
.loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--terminal-green); border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 10px; }

/* Stream 31: Localization & Internationalization */
/* Language Selection Button */
.language-select-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid var(--terminal-green);
    color: var(--terminal-green);
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    transition: 0.2s;
    border-radius: 4px;

.language-select-btn:hover {
    background: var(--terminal-green);
    color: black;
    box-shadow: 0 0 15px var(--terminal-green);

/* Language Modal */
.language-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;

.language-modal.hidden {
    display: none;

.language-modal-content {
    background: var(--surface-1);
    border: 2px solid var(--terminal-green);
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(51, 255, 0, 0.3);

.language-modal-content .modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--terminal-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;

.language-modal-content .modal-header h2 {
    margin: 0;
    color: var(--terminal-green);
    font-size: 1.5rem;

.language-modal-content .modal-close {
    background: transparent;
    border: 1px solid var(--terminal-green);
    color: var(--terminal-green);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    transition: 0.2s;
    border-radius: 4px;

.language-modal-content .modal-close:hover {
    background: var(--terminal-green);
    color: black;

.language-modal-content .modal-body {
    padding: 20px;

.language-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

.language-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(0, 20, 0, 0.3);
    border: 1px solid var(--terminal-dim);
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    gap: 15px;

.language-item:hover {
    background: rgba(51, 255, 0, 0.1);
    border-color: var(--terminal-green);

.language-item.current {
    background: rgba(51, 255, 0, 0.2);
    border-color: var(--terminal-green);
    box-shadow: 0 0 10px rgba(51, 255, 0, 0.3);

.language-item.loading {
    opacity: 0.6;
    pointer-events: none;

.language-flag {
    font-size: 2rem;
    min-width: 40px;
    text-align: center;

.language-info {
    flex: 1;

.language-name {
    font-size: 1.1rem;
    color: var(--terminal-green);
    font-weight: bold;

.language-native {
    font-size: 0.9rem;
    color: var(--terminal-dim);
    margin-top: 4px;

.language-check {
    color: var(--terminal-green);
    font-size: 1.5rem;
    font-weight: bold;

.rtl-indicator {
    font-size: 0.7rem;
    color: var(--signal-amber);
    padding: 2px 6px;
    background: rgba(255, 184, 0, 0.2);
    border-radius: 3px;
    margin-left: 10px;

.language-info-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--terminal-dim);

.language-hint {
    font-size: 0.9rem;
    color: var(--terminal-dim);
    margin: 0;
    line-height: 1.5;

/* RTL Support */
[dir="rtl"] {
    direction: rtl;

[dir="rtl"] .language-select-btn {
    right: auto;
    left: 20px;

[dir="rtl"] .language-item {
    text-align: right;

[dir="rtl"] .language-flag {
    order: 2;

[dir="rtl"] .language-info {
    order: 1;
    text-align: right;

[dir="rtl"] .language-check {
    order: 3;

[dir="rtl"] .rtl-indicator {
    margin-left: 0;
    margin-right: 10px;

/* SCREENS */
#title-screen { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0; 
    justify-content: center; 
    text-align: center; 
    opacity: 1 !important; 
    transition: none !important; 
    visibility: visible !important;

#title-screen, #title-screen *, #title-screen *::before, #title-screen *::after { 
    opacity: 1 !important; 
    transition: none !important; 

#title-screen:not(.hidden) { opacity: 1 !important; transition: none !important; display: flex !important; visibility: visible !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 1000 !important; margin: 0 !important; padding: 0 !important; }
#title-screen.active { opacity: 1 !important; transition: none !important; visibility: visible !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 1000 !important; margin: 0 !important; padding: 0 !important; }
#char-select-screen { 
    height: 100vh !important;
    min-height: 100vh !important; 
    max-height: 100vh !important;
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    padding: 60px 20px !important; 
    overflow-y: auto !important; 
    animation: none !important; 
    transition: none !important; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #0a0a0a !important;
    color: #00ff00 !important;
    box-sizing: border-box !important;
    /* Default: hidden and non-interactive */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

/* CRITICAL: Override default hidden state when active class is present - MUST come after base rule */
#char-select-screen.active,
#char-select-screen.active:not(.hidden),
#char-select-screen[style*="display: flex"],
#char-select-screen[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0a0a0a !important;

#char-select-screen > h2 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px auto;
    box-sizing: border-box;
    padding: 0 20px;

#char-select-screen > #save-slot-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;

#char-select-screen > #btn-create-new {
    width: auto;
    max-width: none;
    margin: 40px auto 0 auto;
    box-sizing: border-box;

/* When hidden and not active: completely hidden and non-interactive - HIGHEST PRIORITY */
#char-select-screen.hidden:not(.active),
#char-select-screen.hidden {
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;

/* When hidden but active: show it */
#char-select-screen.hidden.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 100 !important;

/* When not hidden: show it */
#char-select-screen:not(.hidden) { 
    display: flex !important; 
    animation: none !important; 
    transition: none !important; 
    opacity: 1 !important; 
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important;

/* When active: show it */
#char-select-screen.active { 
    animation: none !important; 
    transition: none !important; 
    opacity: 1 !important; 
    visibility: visible !important; 
    display: flex !important;
    pointer-events: auto !important;
    z-index: 100 !important;

#char-select-screen.fade-in { 
    animation: none !important; 
    opacity: 1 !important; 
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important;

#char-select-screen.fade-out { 
    animation: none !important; 
    opacity: 1 !important; 
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important;

/* Force visibility when active - override everything */
#char-select-screen.active:not(.hidden) { 
    display: flex !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    animation: none !important; 
    transition: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    background: var(--surface-0, #0a0a0a) !important;

.game-title { font-size: 5rem; letter-spacing: 0.5rem; animation: glitch-text 3s infinite; margin: 0; text-shadow: 0 0 20px var(--terminal-green); opacity: 1 !important; transition: none !important; visibility: visible !important; }
.game-title, .game-title * { opacity: 1 !important; transition: none !important; }
.login-box { margin-top: 40px; padding: 30px; border: 1px solid var(--terminal-green); background: rgba(0,10,0,0.8); width: 350px; position: relative; z-index: 1000 !important; }
#btn-login { position: relative; z-index: 1001 !important; pointer-events: auto !important; }
.save-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; width: 80%; max-width: 1200px; margin-top: 30px; }
.save-slot-card { border: 1px solid var(--terminal-dim); padding: 20px; background: rgba(0,20,0,0.3); transition: 0.2s; cursor: pointer; }
.save-slot-card:hover { border-color: var(--terminal-green); }

/* CREATOR */
.terminal-boot-sequence {
    /* Default: hidden - only show when explicitly activated */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: -1 !important;
    background: var(--surface-0, #0a0a0a);
    animation: none !important;
    transform: translateY(0) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: none !important;

/* CRITICAL: Only show Character Creator when it's active AND not hidden */
.terminal-boot-sequence:not(.hidden).active,
.terminal-boot-sequence:not(.hidden).tactical-dashboard {
    display: grid !important;
    grid-template-columns: 200px 1fr 320px !important; /* 3-column layout: nav, content, dossier */
    grid-template-rows: 100vh !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;

/* CRITICAL: Character Creator with hidden class should ALWAYS be hidden - no exceptions */
/* This must come AFTER other rules to ensure it takes priority */
.terminal-boot-sequence.hidden,
body:has(#title-screen.active:not(.hidden)) .terminal-boot-sequence,
body:has(#char-select-screen.active:not(.hidden)) .terminal-boot-sequence {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

/* CRITICAL: Ensure body/html don't have any offset when character creator is active */
body:has(.terminal-boot-sequence.active),
html:has(.terminal-boot-sequence.active),
body:has(.terminal-boot-sequence:not(.hidden)),
html:has(.terminal-boot-sequence:not(.hidden)),
body:has(.terminal-boot-sequence.active),
html:has(.terminal-boot-sequence.active) {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    height: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;

/* CRITICAL: Allow scrolling within character creator container */
.terminal-boot-sequence {
    overflow-y: auto !important;
    overflow-x: hidden !important;

/* CRITICAL: Ensure 3-column layout for character creator with dossier */
@media (min-width: 768px) {
    .terminal-boot-sequence.tactical-dashboard,
    .terminal-boot-sequence.active.tactical-dashboard {
        display: grid !important;
        grid-template-columns: 200px 1fr 320px !important; /* Left nav, center content, right dossier */
        grid-template-rows: 100vh !important;
        gap: 0 !important;

    /* Ensure dossier is visible in third column */
    .terminal-boot-sequence .dashboard-dossier,
    .terminal-boot-sequence .live-dossier {
        grid-column: 3 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;

.terminal-boot-sequence .dashboard-console,
.terminal-boot-sequence .boot-stage-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;

.boot-nav { width: 260px; border-right: 2px solid var(--terminal-dim); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.nav-tree { list-style: none; padding: 0; margin-top: 12px; }
.nav-item { padding: 10px 0; color: var(--terminal-dim); font-size: 0.95rem; cursor: default; }
.nav-item.active { color: var(--terminal-green); text-shadow: 0 0 5px var(--terminal-green); }
.nav-item.completed { color: var(--terminal-dim); }
.nav-item.pending { color: var(--terminal-dim); opacity: 0.6; }
.boot-stage-container { flex: 1; padding: 48px 48px 32px; overflow-y: auto; overflow-x: hidden; gap: 24px; display: flex; flex-direction: column; }
/* Stage visibility - ONE SCREEN AT A TIME - default hidden, show when active */
.boot-stage,
.terminal-card.boot-stage { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

.boot-stage.active,
.terminal-card.boot-stage.active { 
    display: flex !important; 
    flex-direction: column !important;
    visibility: visible !important; 
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 16px; 
    max-width: 820px; 
    padding: 18px 22px; 
    border: 1px solid var(--terminal-dim); 
    background: rgba(0,20,0,0.24); 
    border-radius: 6px; 

/* Ensure completed stages stay hidden */
.boot-stage.completed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

.stat-controls { display: flex; align-items: center; gap: 10px; flex: 1; }
.stat-controls .stat-input { width: 80px; text-align: center; background: #000; color: var(--terminal-green); border: 1px solid var(--terminal-dim); padding: 6px; font-size: 1rem; }
.stat-controls .btn-terminal.tiny { min-width: 32px; padding: 4px 8px; }
.slider-row, .decrypt-row, .dossier-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px dotted var(--terminal-dim); padding-bottom: 5px; }
.dossier-preview { border: 2px solid var(--terminal-green); background: rgba(0,20,0,0.3); padding: 30px; margin-bottom: 20px; position: relative; }
.dossier-preview::after { content: "CONFIDENTIAL"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-size: 4rem; color: var(--signal-crimson); opacity: 0.1; border: 4px solid var(--signal-crimson); padding: 10px 40px; pointer-events: none; }
.dossier-header { border-bottom: 2px solid var(--terminal-green); padding-bottom: 15px; margin-bottom: 20px; }
.dossier-section { margin-bottom: 20px; }
.dossier-label { color: var(--terminal-dim); font-size: 0.9rem; }
.dossier-value { color: var(--terminal-green); font-weight: bold; }
.btn-amber { border-color: var(--signal-amber); color: var(--signal-amber); }
.btn-amber:hover:not(:disabled) { background: var(--signal-amber); color: black; }
.role-card { border: 1px solid var(--terminal-dim); padding: 15px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; }
.role-card.selected { border-color: var(--signal-amber); background: rgba(255,184,0,0.1); }
.role-card:hover { border-color: var(--terminal-green); background: rgba(0,255,0,0.05); }
.onboard-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92);
    z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px;

.onboard-card {
    max-width: 960px; width: 100%; background: rgba(10,16,24,0.9);
    border: 1px solid var(--terminal-green); box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    border-radius: 10px; padding: 20px; color: #e4f4ff;

.onboard-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px; margin-top: 12px;

.onboard-step {
    border: 1px solid var(--terminal-dim); background: rgba(0,30,30,0.25);
    padding: 12px; border-radius: 8px;

.onboard-step h4 { margin: 0 0 6px 0; color: var(--signal-amber); font-size: 1rem; }
.tooltip {
    position: absolute;
    background: rgba(0,0,0,0.9);
    border: 1px solid var(--terminal-green);
    color: #e4f4ff;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    max-width: 320px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    z-index: 20050;

.tooltip h4 { margin: 0 0 6px 0; color: var(--signal-amber); font-size: 1rem; }

/* MISSION & HUB LAYOUT */
#mission-interface, #docking-bay { display: flex; flex-direction: column; min-height: 100vh; max-height: 100vh; padding: 20px; overflow: hidden; position: relative; z-index: 100; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#mission-interface.active { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#mission-interface:not(.hidden) { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#mission-interface.active:not(.hidden) { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#mission-interface.hidden { display: none !important; }
#mission-interface .hud-mini { display: none; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--terminal-dim); position: sticky; top: 0; background: var(--surface-0); z-index: 7; }
#mission-interface.hud-compact .hud-mini { display: flex; }
#docking-bay.active { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#docking-bay:not(.hidden) { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#docking-bay.active:not(.hidden) { display: flex !important; position: relative !important; z-index: 100 !important; background-color: var(--surface-0) !important; color: var(--terminal-green) !important; }
#docking-bay.hidden { display: none !important; }
    .mission-header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--terminal-dim); padding-bottom: 10px; margin-bottom: 20px; gap: 10px; align-items: center; flex-wrap: wrap; }
.mission-grid { display: grid; grid-template-columns: minmax(280px, 320px) 1fr; gap: 20px; flex: 1; overflow: hidden; min-height: 0; }
#mission-interface.hud-compact .mission-grid { display: flex; flex-direction: column; }
#mission-interface.hud-compact .hud-column { display: none; }
#mission-interface.hud-compact .feed-column { width: 100%; }
.contracts-drawer { width: 100%; max-width: 100%; margin: 0 0 10px 0; max-height: 90vh; overflow-y: auto; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease; background: #050a05; }
.contracts-drawer.collapsed { max-height: 0; opacity: 0; padding: 0 !important; margin-top: 0 !important; border: none !important; overflow: hidden !important; pointer-events: none; }
.drawer-close, .drawer-handle { display: none; }
.drawer-close { position: sticky; top: 0; padding-bottom: 10px; margin-bottom: 10px; background: #050a05; display: flex; justify-content: flex-end; }
.drawer-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; border: 1px solid var(--terminal-dim); padding: 8px 10px; background: rgba(0,20,0,0.3); }
@media (max-width: 768px) {
    .contracts-drawer { width: 100%; max-width: 100%; max-height: 92vh; }

.auth-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.auth-pill { padding: 2px 6px; border: 1px solid var(--terminal-dim); background: rgba(0,20,0,0.35); border-radius: 3px; }
.auth-pill.good { color: var(--signal-emerald); border-color: var(--signal-emerald); }
.auth-pill.warn { color: var(--signal-amber); border-color: var(--signal-amber); }
.auth-pill.bad { color: var(--signal-crimson); border-color: var(--signal-crimson); }

/* Responsive design */
@media (max-width: 768px) {
    .mission-grid { grid-template-columns: 1fr; gap: 15px; }
    .hud-column { max-height: none; overflow-y: visible; }
    #mission-interface, #docking-bay { padding: 15px; }
    .mission-header { flex-wrap: wrap; gap: 10px; font-size: 0.9rem; position: sticky; top: 0; background: var(--surface-0); padding: 12px 0; z-index: 6; }
    #docking-bay .mission-grid { display: flex; flex-direction: column; }
    #docking-bay .feed-column { order: -1; }
    #docking-bay .hud-column { order: 0; }
    .command-deck { gap: 8px; }
    .command-deck .terminal-input { min-width: 150px; font-size: 0.9rem; }
    .command-deck .btn-terminal { font-size: 0.85rem; padding: 8px 12px; }
    #title-screen, #char-select-screen { 
        padding: 20px 16px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */

    #char-select-screen > h2,
    #char-select-screen h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        font-size: 1.8rem !important;
        text-align: center !important;

    #char-select-screen > #save-slot-container,
    #char-select-screen #save-slot-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        text-align: center !important;

    #char-select-screen > #btn-create-new,
    #char-select-screen #btn-create-new {
        margin: 20px auto 0 auto !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
        display: block !important;

    .game-title { font-size: 3.5rem; letter-spacing: 0.3rem; }
    .terminal-boot-sequence { flex-direction: column; }
    .boot-nav { width: 100%; border-right: none; border-bottom: 2px solid var(--terminal-dim); flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; overflow-x: auto; }
    .boot-stage-container { padding: 24px 16px; max-height: calc(100vh - 160px); overflow-y: auto; }
    .boot-stage { max-width: 100%; }
    .slider-row { flex-direction: column; align-items: flex-start; }
    .stat-controls { width: 100%; }
    .stat-controls .stat-input { width: 100%; text-align: left; }
    .stat-controls .btn-terminal.tiny { min-width: 44px; }
    .feed-column { min-height: 0; }
    .feed-window { max-height: 60vh; }
    #job-board { max-height: 65vh; overflow-y: auto; }
    .command-deck { position: sticky; bottom: 0; background: rgba(0,0,0,0.75); padding: 10px 12px; border-top: 1px solid var(--terminal-dim); }
    .command-deck .btn-terminal { min-height: 44px; }
    #docking-bay .mission-header { position: sticky; top: 0; background: var(--surface-0); padding: 12px 0; z-index: 5; }
    .hud-column { padding-right: 0; }
    .hud-panel .btn-terminal,
    .hud-panel .btn-terminal.tiny,
    .hud-panel .btn-terminal.small { width: 100%; min-height: 40px; }
    .identity-input-group { flex-direction: column; align-items: stretch; gap: 8px; max-width: 100%; }
    .identity-input-group .btn-terminal { width: 100%; }
    .decrypt-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dossier-preview { padding: 18px; }
    #stage-4 #btn-launch { width: 100%; position: sticky; bottom: 0; }
    .save-slot-card { min-height: 64px; }
    .nav-tree { display: flex; flex-wrap: wrap; gap: 6px; }
    .nav-item { border: 1px solid var(--terminal-dim); padding: 6px 10px; border-radius: 4px; }

@media (max-width: 480px) {
    #mission-interface, #docking-bay { padding: 10px; }
    .mission-header { font-size: 0.8rem; }
    .hud-panel { padding: 10px; margin-bottom: 10px; }
    .feed-window { padding: 15px; }
    .command-deck { gap: 5px; }
    .command-deck .terminal-input { min-width: 120px; font-size: 0.85rem; padding: 8px; }
    .command-deck .btn-terminal { font-size: 0.8rem; padding: 6px 10px; }
    .game-title { font-size: 3rem; letter-spacing: 0.2rem; }
    .save-slots { grid-template-columns: 1fr; width: 100%; }
    .save-slot-card { padding: 16px; }
    #char-select-screen { 
        padding: 20px 12px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */
        will-change: auto !important; /* Prevent layout shifts */

    #char-select-screen > h2,
    #char-select-screen h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        font-size: 1.6rem !important;
        word-wrap: break-word !important;
        text-align: center !important;

    #char-select-screen > #save-slot-container,
    #char-select-screen #save-slot-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;

    #char-select-screen > #btn-create-new,
    #char-select-screen #btn-create-new {
        margin: 20px auto 0 auto !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        padding: 12px 24px !important;
        display: block !important;

    .boot-stage-container { padding: 18px 12px; }
    .boot-stage { padding: 14px 16px; }
    .terminal-input { font-size: 1rem; }
    .btn-terminal { padding: 8px 12px; }
    .command-deck { padding: 8px 10px; gap: 8px; }
    .command-deck .btn-terminal { flex: 1; min-height: 44px; }
    .feed-window { max-height: 65vh; }
    #job-board { max-height: 70vh; }
    .hud-panel .btn-terminal,
    .hud-panel .btn-terminal.tiny,
    .hud-panel .btn-terminal.small { min-height: 44px; }
    .dossier-preview { padding: 14px; }
    .boot-stage h2 { font-size: 1.1rem; }
    .nav-item { font-size: 0.9rem; }
    #stage-4 #btn-launch { padding: 10px 12px; }
    .command-deck { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    #stage-4 #btn-launch { bottom: env(safe-area-inset-bottom, 0px); }

.hud-column { overflow-y: auto; overflow-x: hidden; padding-right: 10px; max-height: 100%; }
.hud-panel { border: 1px solid var(--terminal-dim); background: rgba(0,20,0,0.3); padding: 15px; margin-bottom: 15px; }
.panel-label { color: var(--terminal-dim); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; border-bottom: 1px dotted var(--terminal-dim); padding-bottom: 5px; }
.panel-label { color: var(--terminal-dim); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; border-bottom: 1px dotted var(--terminal-dim); padding-bottom: 5px; }

.feed-column { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.feed-window { flex: 1 1 auto; border: 1px solid var(--terminal-green); background: rgba(0,10,0,0.5); padding: 20px; overflow-y: auto; overflow-x: hidden; margin-bottom: 15px; min-height: 0; }
.command-deck { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 0; align-items: center; }
.command-deck .terminal-input { flex: 1 1 auto; min-width: 200px; }
.command-deck .btn-terminal { flex: 0 0 auto; white-space: nowrap; }

/* Identity creation polish */
.boot-stage { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.boot-stage h2 { margin: 0; }
.identity-input-group { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 520px; }
.identity-input-group .terminal-input { flex: 1 1 auto; min-width: 0; }
.identity-input-group .btn-terminal { flex: 0 0 auto; white-space: nowrap; }
.save-slots { gap: 10px; }
.feed-entry { margin-bottom: 8px; line-height: 1.4; }
.feed-entry.system { color: var(--terminal-dim); } .feed-entry.alert { color: var(--signal-crimson); } .feed-entry.success { color: var(--signal-emerald); }
.feed-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* BARS & PIPS */
.bar-container { width: 100%; height: 8px; background: #000; border: 1px solid var(--terminal-dim); margin-top: 5px; }
.bar-fill { height: 100%; background: var(--signal-emerald); transition: width 0.3s; } .bar-fill.bg-crimson { background: var(--signal-crimson); }
.pips-container { display: flex; gap: 5px; margin-top: 5px; }
.pip { flex: 1; height: 8px; border: 1px solid var(--terminal-dim); }
.pip.active { background: var(--signal-amber); box-shadow: 0 0 5px var(--signal-amber); }
.pip.critical { background: var(--signal-crimson); animation: pulse 0.5s infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

.stat-btn { width: 100%; display: flex; justify-content: space-between; background: transparent; border: 1px solid var(--terminal-dim); color: var(--terminal-green); padding: 8px; margin-bottom: 5px; cursor: pointer; }
.stat-btn:hover { background: rgba(0,255,0,0.1); }

/* OVERLAYS */
.panic-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20,0,0,0.9); z-index: 10000 !important; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.5s; background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; }
.panic-overlay.active { opacity: 1; pointer-events: all; }

/* Hide panic overlay and sidebar when title screen is active */
#title-screen.active ~ .panic-overlay,
body:has(#title-screen.active) .panic-overlay,
#title-screen.active ~ #panic-overlay,
body:has(#title-screen.active) #panic-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

/* Hide panic warning overlay and session browser when title screen is active */
#title-screen.active ~ #panicMomentOverlays,
body:has(#title-screen.active) #panicMomentOverlays,
#title-screen.active ~ #panicWarning,
body:has(#title-screen.active) #panicWarning,
#title-screen.active ~ .panic-warning-overlay,
body:has(#title-screen.active) .panic-warning-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

#title-screen.active ~ #session-browser-btn,
body:has(#title-screen.active) #session-browser-btn,
#title-screen.active ~ .session-browser-btn,
body:has(#title-screen.active) .session-browser-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;

.panic-modal { border: 4px solid var(--signal-crimson); padding: 40px; background: #000; text-align: center; box-shadow: 0 0 50px var(--signal-crimson); position: relative; z-index: 10; }
.panic-overlay.active .panic-modal { animation: glitch-skew 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; box-shadow: 0 0 30px var(--signal-crimson), inset 0 0 20px var(--signal-crimson); }
.panic-title { animation: glitch-chromatic 3s infinite linear alternate-reverse; }
.panic-overlay::before { content: ""; position: absolute; inset:0; background: linear-gradient(to bottom, rgba(255, 42, 42, 0) 50%, rgba(255, 42, 42, 0.15) 50%, rgba(255, 42, 42, 0) 55%); background-size: 100% 30%; animation: scanline 6s linear infinite; pointer-events: none; z-index: 1; }

/* Contract drawer fullscreen */
body.drawer-open { overflow: hidden; }

/* Multiplayer join & status */
.mp-banner { position: fixed; top: 10px; right: 10px; z-index: 12000; background: rgba(0,20,0,0.8); border: 1px solid var(--terminal-dim); color: var(--terminal-green); padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; box-shadow: 0 6px 12px rgba(0,0,0,0.35); }
.mp-banner.connected { border-color: var(--signal-emerald); color: var(--signal-emerald); }
.mp-banner.connecting { border-color: var(--signal-amber); color: var(--signal-amber); }
.mp-banner.error, .mp-banner.disconnected { border-color: var(--signal-crimson); color: var(--signal-crimson); }
.mp-dot { font-size: 1.1rem; }
.mp-join-panel { position: fixed; bottom: 12px; right: 12px; z-index: 12000; background: rgba(0,20,0,0.9); border: 1px solid var(--terminal-dim); padding: 12px; border-radius: 8px; width: min(520px, 95vw); box-shadow: 0 10px 24px rgba(0,0,0,0.45); display: none; }
.mp-join-panel.hidden { display: none; }
.mp-join-panel h3 { margin: 0 0 8px 0; color: var(--terminal-green); font-size: 1rem; letter-spacing: 0.05em; }
.mp-join-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mp-join-row input { flex: 1 1 180px; min-width: 0; background: #000; border: 1px solid var(--terminal-dim); color: var(--terminal-green); padding: 8px; font-family: var(--font-main); letter-spacing: 0.05em; }
.mp-join-row button { flex: 1 1 120px; background: rgba(0,20,0,0.7); border: 1px solid var(--terminal-green); color: var(--terminal-green); padding: 8px 10px; cursor: pointer; font-family: var(--font-main); text-transform: uppercase; white-space: nowrap; }
.mp-join-hint { color: var(--terminal-dim); font-size: 0.85rem; margin-top: 6px; }
.mp-join-feedback { margin-top: 6px; font-size: 0.85rem; color: var(--signal-amber); min-height: 1.2rem; }
.mp-your-turn { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15000; background: rgba(0,0,0,0.92); border: 2px solid var(--signal-amber); color: var(--signal-amber); padding: 16px 24px; letter-spacing: 0.1em; font-size: 1.3rem; box-shadow: 0 0 24px rgba(255,184,0,0.4); }
.mp-your-turn.hidden { display: none; }
.mp-env { position: fixed; left: 10px; bottom: 10px; z-index: 12000; background: rgba(0,20,0,0.85); border: 1px solid var(--terminal-dim); padding: 10px; border-radius: 8px; width: min(320px, 90vw); box-shadow: 0 10px 24px rgba(0,0,0,0.45); }
.mp-env.hidden { display: none; }
.mp-env h4 { margin: 0 0 6px 0; color: var(--signal-cyan); letter-spacing: 0.05em; }
.mp-env ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-env li { border: 1px dotted var(--terminal-dim); padding: 6px; background: rgba(0,30,30,0.2); color: var(--signal-white); font-size: 0.9rem; }
.mp-close-btn { position: absolute; top: 6px; right: 8px; background: transparent; border: 1px solid var(--terminal-dim); color: var(--terminal-dim); padding: 4px 8px; cursor: pointer; font-family: var(--font-main); }
.mp-toggle-btn { position: fixed; bottom: 14px; right: 14px; z-index: 11950; background: rgba(0,20,0,0.9); border: 1px solid var(--terminal-green); color: var(--terminal-green); padding: 10px 14px; border-radius: 6px; font-family: var(--font-main); cursor: pointer; box-shadow: 0 8px 16px rgba(0,0,0,0.35); }
.mp-toggle-btn.hidden { display: none; }
.mp-roster { position: fixed; left: 10px; top: 10px; z-index: 12000; background: rgba(0,20,0,0.85); border: 1px solid var(--terminal-dim); padding: 10px; border-radius: 8px; width: min(280px, 90vw); box-shadow: 0 10px 24px rgba(0,0,0,0.45); color: var(--signal-white); }
.mp-roster.hidden { display: none; }
.mp-roster h4 { margin: 0 0 6px 0; color: var(--signal-emerald); letter-spacing: 0.05em; }
.mp-roster .mp-roster-meta { font-size: 0.8rem; color: var(--terminal-dim); margin-bottom: 6px; }
.mp-roster ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-roster li { border: 1px dotted var(--terminal-dim); padding: 6px; background: rgba(0,20,0,0.25); display: flex; justify-content: space-between; align-items: center; }
.mp-roster .badge { padding: 2px 6px; border: 1px solid var(--terminal-dim); border-radius: 4px; font-size: 0.75rem; }
.mp-roster .badge.ready { border-color: var(--signal-emerald); color: var(--signal-emerald); }
.mp-roster .badge.idle { border-color: var(--terminal-dim); color: var(--terminal-dim); }
.mp-roster .badge.gm { border-color: var(--signal-amber); color: var(--signal-amber); }
@media (max-width: 600px) {
    .mp-join-panel { right: 8px; left: 8px; width: auto; }
    .mp-join-row { flex-direction: column; }
    .mp-join-row button { width: 100%; }
    .mp-banner { left: 8px; right: 8px; justify-content: center; }
    .mp-env { left: 8px; right: 8px; width: auto; }
    .mp-roster { left: 8px; right: 8px; width: auto; top: 60px; }
    .mp-toggle-btn { right: 10px; left: auto; }

    </style>

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}