/* ══════════════════════════════════════════════════════
   COLUMBUS REACH — UI System
   Dark space theme: deep navy, cyan accents, Orbitron headers
   ══════════════════════════════════════════════════════ */

/* ── RESET & ROOT ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; }

:root {
    --bg-void:      #020810;
    --bg-deep:      #060f1e;
    --bg-dark:      #0a1628;
    --bg-panel:     #0d1e35;
    --bg-panel-alt: #0f2240;
    --bg-input:     #081525;

    --border-dim:   rgba(0, 180, 255, 0.12);
    --border-med:   rgba(0, 200, 255, 0.25);
    --border-glow:  rgba(0, 212, 255, 0.55);

    --cyan:         #00d4ff;
    --cyan-dim:     #007a9a;
    --blue:         #4a9eff;
    --gold:         #ffb800;
    --gold-dim:     #7a5800;
    --red:          #ff3860;
    --green:        #00e676;
    --orange:       #ff8c00;
    --purple:       #9c27b0;

    --text-bright:  #ffffff;
    --text-primary: #c0d4e8;
    --text-sec:     #5a7a9a;
    --text-muted:   #2a4a6a;

    --hp-green:     #00e676;
    --ftg-orange:   #ff8c00;

    --font-head:  'Orbitron', sans-serif;
    --font-body:  'Exo 2', sans-serif;
    --font-mono:  'Space Mono', monospace;

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;

    --shadow-panel: 0 0 30px rgba(0, 100, 200, 0.08), inset 0 1px 0 rgba(0, 212, 255, 0.06);
    --glow-cyan:    0 0 20px rgba(0, 212, 255, 0.3);
    --glow-gold:    0 0 20px rgba(255, 184, 0, 0.3);
}

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

/* Game page needs overflow:hidden — the columns manage their own scroll areas */
body:has(.game-root) {
    overflow: hidden;
}

/* ── STAR FIELD ───────────────────────────────────────── */
#starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── SCROLLBARS ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ══════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════ */
.auth-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-panel);
    border: 1px solid var(--border-med);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-panel), 0 0 60px rgba(0, 100, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.7;
}

.auth-card--wide { max-width: 500px; }

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-mark {
    font-size: 2.5rem;
    color: var(--cyan);
    text-shadow: var(--glow-cyan);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.logo-title {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-bright);
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

.logo-sub {
    font-size: 0.75rem;
    color: var(--text-sec);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.form-group label {
    font-size: 0.7rem;
    font-family: var(--font-head);
    letter-spacing: 0.12em;
    color: var(--cyan);
    text-transform: uppercase;
}

.form-group input, .form-group textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.6rem 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-sec);
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-sec);
}

.auth-footer a {
    color: var(--cyan);
    text-decoration: none;
    margin-left: 0.4rem;
}

.auth-footer a:hover { text-shadow: var(--glow-cyan); }

.alert {
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.alert--error {
    background: rgba(255, 56, 96, 0.1);
    border: 1px solid rgba(255, 56, 96, 0.3);
    color: #ff6b8a;
}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

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

.btn--primary {
    background: linear-gradient(135deg, #004d7a, #006fa8);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}

.btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #006fa8, #0090d0);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.35);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-med);
    color: var(--text-sec);
}

.btn--ghost:hover:not(:disabled) {
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn--warning {
    background: rgba(255, 184, 0, 0.08);
    border-color: var(--gold-dim);
    color: var(--gold);
}

.btn--warning:hover:not(:disabled) {
    background: rgba(255, 184, 0, 0.15);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(255, 184, 0, 0.2);
}

.btn--danger {
    background: rgba(255, 56, 96, 0.08);
    border-color: rgba(255, 56, 96, 0.3);
    color: var(--red);
}

.btn--danger:hover:not(:disabled) {
    background: rgba(255, 56, 96, 0.18);
    border-color: var(--red);
}

.btn--dev-active {
    background: rgba(156, 39, 176, 0.15);
    border-color: var(--purple);
    color: #ce93d8;
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.2);
}

.btn--sm { padding: 0.35rem 0.8rem; font-size: 0.65rem; }
.btn--full { width: 100%; justify-content: center; padding: 0.75rem; }

/* ══════════════════════════════════════════════════════
   CAMPAIGN LOBBY
   ══════════════════════════════════════════════════════ */
.lobby-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-dim);
    background: rgba(6, 15, 30, 0.8);
    backdrop-filter: blur(10px);
}

.lobby-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-head);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    color: var(--text-bright);
}

.logo-hex { color: var(--cyan); font-size: 1.3rem; }

.lobby-user {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-sec);
    font-size: 0.85rem;
}

.user-name {
    color: var(--cyan);
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
}

.lobby-user-sep {
    width: 1px;
    height: 1.2rem;
    background: var(--border-med);
    flex-shrink: 0;
}

.lobby-main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.lobby-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.section-title {
    font-family: var(--font-head);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--cyan);
}

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

.campaign-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
}

.campaign-card:hover {
    border-color: var(--border-med);
    box-shadow: 0 0 20px rgba(0, 100, 200, 0.1);
}

.campaign-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.campaign-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
}

.dot--dev { background: var(--purple); box-shadow: 0 0 6px var(--purple); }

.campaign-status-label {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-sec);
}

.campaign-name {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 0.6rem;
}

.campaign-char {
    font-size: 0.85rem;
    color: var(--text-sec);
    margin-bottom: 0.4rem;
}

.char-name { color: var(--cyan); }
.char-species { color: var(--text-sec); }

.campaign-char--new { font-style: italic; color: var(--text-muted); }

.campaign-stats-mini {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.mini-stat {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.mini-stat.hp { background: rgba(0, 230, 118, 0.08); color: var(--hp-green); border: 1px solid rgba(0, 230, 118, 0.2); }
.mini-stat.cr { background: rgba(255, 184, 0, 0.08); color: var(--gold); border: 1px solid rgba(255, 184, 0, 0.2); }

.campaign-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.campaign-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.campaign-card__link:hover {
    text-decoration: none;
}

.campaign-card__actions {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-sec);
}

.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state p { margin-bottom: 1.5rem; }

/* ══════════════════════════════════════════════════════
   GAME LAYOUT
   ══════════════════════════════════════════════════════ */
.game-root {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* GAME HEADER */
.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.2rem;
    height: 52px;
    flex-shrink: 0;
    background: rgba(6, 15, 30, 0.95);
    border-bottom: 1px solid var(--border-dim);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 10;
}

.game-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
    opacity: 0.4;
}

.game-header__left, .game-header__right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.header-back {
    color: var(--text-sec);
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s;
}

.header-back:hover { color: var(--cyan); }

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--text-bright);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s, letter-spacing 0.3s, color 0.2s;
}
.header-logo:hover {
    opacity: 1;
    color: var(--cyan);
    letter-spacing: 0.22em;
}
.header-logo:hover .logo-hex,
.logo-hex.hex-spin-auto {
    animation: hex-spin 0.6s ease-in-out;
}
@keyframes hex-spin {
    0%   { transform: rotate(0deg) scale(1); }
    40%  { transform: rotate(180deg) scale(1.3); color: var(--cyan); }
    100% { transform: rotate(360deg) scale(1); }
}
.header-logo:hover .logo-text,
.logo-text.logo-glitch {
    animation: logo-glitch 0.6s steps(1) forwards;
}
@keyframes logo-glitch {
    0%   { opacity: 1; transform: translateX(0);    color: var(--text-bright); }
    10%  { opacity: 0.6; transform: translateX(-2px); color: var(--cyan); clip-path: inset(20% 0 40% 0); }
    20%  { opacity: 1; transform: translateX(2px);  color: var(--text-bright); clip-path: inset(0); }
    30%  { opacity: 0.7; transform: translateX(-1px); color: var(--cyan); clip-path: inset(50% 0 10% 0); }
    50%  { opacity: 1; transform: translateX(0);    color: var(--cyan); clip-path: inset(0); }
    70%  { opacity: 0.8; transform: translateX(1px);  color: var(--text-bright); }
    100% { opacity: 1; transform: translateX(0);    color: inherit; }
}

.header-campaign {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--border-dim);
}

.campaign-label {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

.campaign-title {
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--gold);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3-COLUMN GRID */
.game-columns {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 360px 380px;
    min-height: 0;
    overflow: hidden;
}

/* Column panels */
.col-chat, .col-character, .col-encyclopedia {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-panel);
    position: relative;
}

.col-chat        { border-right: 1px solid var(--border-dim); }
.col-character   { border-right: 1px solid var(--border-dim); }

/* Panel headers */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--bg-panel-alt);
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
}

.panel-title {
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--cyan);
}

.panel-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-dot--idle { background: var(--text-muted); }
.status-dot--thinking {
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
    animation: pulse 1s ease-in-out infinite;
}
.status-dot--error { background: var(--red); }

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

.status-text {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--text-sec);
}

.panel-badge {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    color: var(--hp-green);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    animation: flash-badge 2s ease-out forwards;
}

@keyframes flash-badge {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════
   CHAT COLUMN
   ══════════════════════════════════════════════════════ */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

.message {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    animation: msg-appear 0.25s ease-out;
}

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

.message__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.msg-role {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    font-weight: 700;
}

.message--user   .msg-role { color: var(--blue); }
.message--assistant .msg-role { color: var(--cyan); }
.message--system .msg-role { color: var(--gold); }

.msg-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.message__content {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.message--user .message__content {
    background: rgba(74, 158, 255, 0.07);
    border: 1px solid rgba(74, 158, 255, 0.15);
    color: var(--text-primary);
    font-family: var(--font-body);
}

.message--assistant .message__content {
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--border-dim);
    border-left: 2px solid var(--cyan-dim);
    color: var(--text-primary);
    font-family: var(--font-body);
}

.message--system .message__content {
    background: rgba(255, 184, 0, 0.04);
    border: 1px solid rgba(255, 184, 0, 0.15);
    color: var(--text-sec);
    font-style: italic;
    font-size: 0.85rem;
}

.message--streaming .message__content::after {
    content: '▋';
    color: var(--cyan);
    animation: blink-cursor 0.8s step-start infinite;
}

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

/* CHAT INPUT */
.chat-input-area {
    padding: 0.8rem;
    border-top: 1px solid var(--border-dim);
    background: var(--bg-panel-alt);
    flex-shrink: 0;
}

.chat-input-wrapper { display: flex; flex-direction: column; gap: 0.5rem; }

.chat-input {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.6rem 0.8rem;
    resize: none;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.08);
}

.chat-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Dice roller */
.dice-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 0.4rem;
    animation: dice-in 0.2s ease-out;
}

@keyframes dice-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dice-faces {
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    line-height: 1;
}

.dice-total {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--cyan);
    font-weight: 700;
    min-width: 2rem;
}

.dice-label {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    flex: 1;
}

.dice-label.mastery { color: var(--gold); }
.dice-label.disaster { color: #ff4444; }

.dice-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    line-height: 1;
}
.dice-clear:hover { color: var(--text-primary); }

.char-count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Suggestions bar */
.suggestions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem 0.6rem;
}

.suggestion-btn {
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid var(--border-dim);
    color: var(--text-sec);
    font-family: var(--font-body);
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-align: left;
    line-height: 1.3;
}

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

/* ══════════════════════════════════════════════════════
   CHARACTER SHEET COLUMN
   ══════════════════════════════════════════════════════ */
#character-sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem;
}

.sheet-body { display: flex; flex-direction: column; gap: 1rem; }

/* Identity block */
.sheet-identity {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-dim);
}

.sheet-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.avatar-hex {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #00394d, #004d6b);
    border: 1px solid var(--cyan-dim);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--cyan);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

.sheet-name {
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-bright);
}

.sheet-species {
    font-size: 0.75rem;
    color: var(--text-sec);
    margin-top: 0.1rem;
}

.sheet-location {
    font-size: 0.7rem;
    color: var(--cyan-dim);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.loc-icon { font-size: 0.75rem; }

/* Sheet sections */
.sheet-section { display: flex; flex-direction: column; gap: 0.5rem; }

.section-label {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

/* Vitals */
.vitals-grid { display: flex; flex-direction: column; gap: 0.5rem; }

.vital-item { display: flex; flex-direction: column; gap: 0.3rem; }

.vital-label {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--text-sec);
}

.vital-bar-wrap {
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.vital-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.vital-bar--hp  { background: linear-gradient(90deg, #00a855, var(--hp-green)); box-shadow: 0 0 6px rgba(0, 230, 118, 0.4); }
.vital-bar--ftg { background: linear-gradient(90deg, #7a4400, var(--ftg-orange)); box-shadow: 0 0 6px rgba(255, 140, 0, 0.4); }

.vital-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vital-value--unknown { color: var(--text-muted); }

.ftg-penalty {
    font-size: 0.65rem;
    color: var(--ftg-orange);
    background: rgba(255, 140, 0, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
}

.credits-display {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 184, 0, 0.05);
    border: 1px solid rgba(255, 184, 0, 0.12);
    border-radius: var(--radius-sm);
}

.credits-icon { font-size: 0.85rem; color: var(--gold); }
.credits-value {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 700;
}
.credits-label { font-size: 0.7rem; color: var(--gold-dim); }

.credits--gain {
    animation: credits-gain 1.2s ease-out forwards;
}
.credits--loss {
    animation: credits-loss 1.2s ease-out forwards;
}

@keyframes credits-gain {
    0%   { text-shadow: 0 0 0px rgba(0, 230, 118, 0); }
    20%  { text-shadow: 0 0 12px rgba(0, 230, 118, 0.9), 0 0 24px rgba(0, 230, 118, 0.4); }
    100% { text-shadow: 0 0 0px rgba(0, 230, 118, 0); }
}
@keyframes credits-loss {
    0%   { text-shadow: 0 0 0px rgba(255, 56, 96, 0); }
    20%  { text-shadow: 0 0 12px rgba(255, 56, 96, 0.9), 0 0 24px rgba(255, 56, 96, 0.4); }
    100% { text-shadow: 0 0 0px rgba(255, 56, 96, 0); }
}

.credits-floater {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    animation: floater-up 1.4s ease-out forwards;
}
.credits-floater--gain { color: var(--green); }
.credits-floater--loss { color: var(--red); }

@keyframes floater-up {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

/* Attributes */
.attrs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}

.attr-cell {
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 0.4rem;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.attr-cell.updated {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}

/* Tooltip — rendered via JS into <body> to escape overflow clipping */
.ui-tooltip {
    position: fixed;
    background: #0d1e35;
    border: 1px solid rgba(0, 200, 255, 0.25);
    color: #c0d4e8;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    border-radius: 3px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.15s;
}

.attr-name {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.attr-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
}

/* Skills */
.skills-list { display: flex; flex-direction: column; gap: 0.3rem; }

.skill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.skill-name { color: var(--text-primary); text-transform: capitalize; }

.skill-level {
    display: flex;
    gap: 2px;
}

.skill-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 1px solid var(--border-med);
}

.skill-pip.pip--filled {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 4px rgba(0, 212, 255, 0.5);
}

/* Gear */
.gear-list { display: flex; flex-direction: column; gap: 0.25rem; }

.gear-item {
    font-size: 0.8rem;
    color: var(--text-sec);
    padding: 0.25rem 0.5rem;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid var(--border-dim);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.genetic-flag {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--purple);
    background: rgba(156, 39, 176, 0.08);
    border: 1px solid rgba(156, 39, 176, 0.2);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
}

.sheet-notes {
    font-size: 0.8rem;
    color: var(--text-sec);
    line-height: 1.6;
    font-style: italic;
}

/* Empty state */
.sheet-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.sheet-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.8rem;
    color: var(--border-med);
}

.sheet-empty-text {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-sec);
    margin-bottom: 0.5rem;
}

.sheet-empty-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   ENCYCLOPEDIA COLUMN
   ══════════════════════════════════════════════════════ */
.enc-search-area {
    padding: 0.7rem;
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.enc-search-input {
    background: var(--bg-input);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.enc-search-input:focus { border-color: var(--cyan); }

.enc-tier-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tier-btn {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.tier-btn:hover, .tier-btn--active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 212, 255, 0.06);
}

.enc-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.enc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    gap: 0.5rem;
}

.enc-icon {
    font-size: 1.5rem;
    color: var(--border-med);
}

.enc-placeholder p { font-size: 0.8rem; line-height: 1.5; }

/* Encyclopedia entry cards */
.enc-entry {
    background: var(--bg-dark);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.15s;
}

.enc-entry:hover { border-color: var(--border-med); }

.enc-entry__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.enc-entry__header::-webkit-details-marker { display: none; }
.enc-entry__header::marker { display: none; }

.enc-entry__title {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.enc-tier-badge {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-left: 0.4rem;
}

.tier-T1     { background: rgba(0, 212, 255, 0.08); color: var(--cyan); border: 1px solid rgba(0, 212, 255, 0.2); }
.tier-T2A    { background: rgba(74, 158, 255, 0.08); color: var(--blue); border: 1px solid rgba(74, 158, 255, 0.2); }
.tier-T2B    { background: rgba(156, 39, 176, 0.08); color: #ce93d8; border: 1px solid rgba(156, 39, 176, 0.2); }
.tier-T2C    { background: rgba(0, 230, 118, 0.08); color: var(--hp-green); border: 1px solid rgba(0, 230, 118, 0.2); }
.tier-T2D    { background: rgba(255, 184, 0, 0.08); color: var(--gold); border: 1px solid rgba(255, 184, 0, 0.2); }
.tier-T3     { background: rgba(255, 140, 0, 0.08); color: var(--orange); border: 1px solid rgba(255, 140, 0, 0.2); }
.tier-SUPPORT { background: rgba(90, 120, 154, 0.08); color: var(--text-sec); border: 1px solid var(--border-dim); }

.enc-entry__body {
    padding: 0 0.7rem 0.6rem;
    border-top: 1px solid var(--border-dim);
}

.enc-entry__text {
    font-size: 0.75rem;
    color: var(--text-sec);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 40vh;
    padding-top: 0.4rem;
}

.enc-source {
    font-family: var(--font-head);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

/* ══════════════════════════════════════════════════════
   SESSION TOAST
   ══════════════════════════════════════════════════════ */
.session-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    animation: toast-in 0.3s ease-out;
}

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

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-cyan);
    color: var(--text-bright);
    font-size: 0.85rem;
}

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

/* ══════════════════════════════════════════════════════
   RATE LIMIT WIDGET
   ══════════════════════════════════════════════════════ */
.rate-limit-widget {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rl-pips {
    display: flex;
    gap: 2px;
}

.rl-pip {
    font-size: 0.65rem;
    line-height: 1;
    transition: color 0.3s;
}
.rl-pip--filled { color: var(--cyan); }
.rl-pip--empty  { color: var(--text-muted); }

.rl-count {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-sec);
}

.rl-timer {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--red);
    letter-spacing: 0.04em;
    animation: rl-pulse 1.5s ease-in-out infinite;
}

@keyframes rl-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .game-columns {
        grid-template-columns: 1fr 260px;
    }
    .col-encyclopedia { display: none; }
}

@media (max-width: 768px) {
    .game-columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .col-character, .col-encyclopedia { display: none; }
    .game-header__left .header-campaign { display: none; }
    .campaign-grid { grid-template-columns: 1fr; }
}

.danger-zone {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,60,60,0.15);
    display: flex;
    justify-content: flex-end;
}

/* ── Forum ───────────────────────────────────────────── */
.forum-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}
.forum-thread-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    background: var(--bg-panel);
    transition: border-color 0.2s, background 0.2s;
}
.forum-thread-row:hover {
    border-color: var(--cyan);
    background: rgba(0,212,255,0.04);
}
.forum-thread-title {
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: var(--text-bright);
    letter-spacing: 0.05em;
}
.forum-thread-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.forum-author { color: var(--cyan); }
.forum-sep { opacity: 0.4; }
.forum-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 2rem;
    text-align: center;
}
.forum-posts {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.forum-post {
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    background: var(--bg-panel);
    padding: 0.8rem 1rem;
}
.forum-post--op {
    border-color: var(--border-med);
    background: rgba(0,212,255,0.03);
    border-left: 3px solid var(--cyan);
}
.forum-post--reply {
    margin-left: 1.5rem;
    border-left: 2px solid var(--border-dim);
}
.forum-post-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
    align-items: center;
}
.forum-action-btn {
    font-family: var(--font-head);
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--border-med);
    color: var(--text-muted);
    border-radius: 2px;
    letter-spacing: 0.08em;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.forum-action-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.forum-action-btn--danger:hover { border-color: var(--red); color: var(--red); }

.forum-op-badge {
    font-family: var(--font-head);
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--cyan);
    color: var(--cyan);
    border-radius: 2px;
    letter-spacing: 0.08em;
}
.forum-post-meta {
    display: flex;
    gap: 0.8rem;
    font-size: 0.72rem;
    margin-bottom: 0.5rem;
}
.forum-post-meta .forum-author { color: var(--cyan); }
.forum-post-meta .forum-date { color: var(--text-muted); }
.forum-post-content {
    font-size: 0.85rem;
    color: var(--text-sec);
    line-height: 1.6;
}
.forum-form-wrap {
    margin-top: 1.5rem;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    padding: 1rem;
    background: var(--bg-panel);
}
.forum-form { display: flex; flex-direction: column; gap: 0.8rem; }
.forum-field { display: flex; flex-direction: column; gap: 0.3rem; }
.forum-label {
    font-family: var(--font-head);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.forum-input, .forum-textarea {
    background: var(--bg-deep);
    border: 1px solid var(--border-med);
    color: var(--text-bright);
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    outline: none;
    font-family: var(--font-body);
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}
.forum-input:focus, .forum-textarea:focus { border-color: var(--cyan); }
.forum-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}