/**
 * GateWars — Main Stylesheet
 * Dark sci-fi theme. Race-specific accents via body class.
 * BEM-inspired naming. CSS custom properties throughout.
 */

/* ── Custom Properties ──────────────────────────────────────────────────────── */
:root {
    --bg-base:        #0a0c10;
    --bg-surface:     #121620;
    --bg-elevated:    #1c2130;
    --border:         #2a3040;
    --text-primary:   #d8e0f0;
    --text-secondary: #7888a0;
    --text-muted:     #485060;
    --accent:         #00c8ff;
    --accent-dim:     rgba(0, 200, 255, 0.15);
    --danger:         #e84040;
    --success:        #38c060;
    --warning:        #e8a030;
    --radius:         4px;
    --radius-lg:      8px;
    --font-ui:        'Segoe UI', system-ui, sans-serif;
    --font-mono:      'Cascadia Code', 'Fira Code', monospace;
    --transition:     0.18s ease;
}

/* ── Race Theme Overrides ───────────────────────────────────────────────────── */
.theme-human      { --accent: #00c8ff; --accent-dim: rgba(0, 200, 255, 0.12); }
.theme-goauld     { --accent: #c8960c; --accent-dim: rgba(200, 150,  12, 0.12); }
.theme-replicator { --accent: #8a9ba8; --accent-dim: rgba(138, 155, 168, 0.12); }
.theme-ori        { --accent: #ff6a1a; --accent-dim: rgba(255, 106,  26, 0.12); }
.theme-asgard     { --accent: #7ab4e8; --accent-dim: rgba(122, 180, 232, 0.12); }
.theme-wraith     { --accent: #3a9e5a; --accent-dim: rgba( 58, 158,  90, 0.12); }

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

html { font-size: 16px; }

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.8; }

/* ── Site Header ────────────────────────────────────────────────────────────── */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 1.25rem; }

.site-nav__link {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color var(--transition);
}
.site-nav__link:hover { color: var(--accent); opacity: 1; }
.site-nav__link--logout { color: var(--danger); }

.site-nav__commander {
    font-size: 0.875rem;
    color: var(--text-primary);
}
.site-nav__race {
    color: var(--accent);
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

/* ── Global Toast ───────────────────────────────────────────────────────────── */
.ui-toast {
    position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(0.75rem);
    background: rgba(13,17,23,0.97); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.5rem; padding: 0.6rem 1.2rem; font-size: 0.875rem;
    color: var(--c-text, #e6edf3); opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s; z-index: 9999;
    white-space: pre-line; max-width: min(90vw, 420px); text-align: center;
}
.ui-toast--visible  { opacity: 1; transform: translateX(-50%) translateY(0); }
.ui-toast--error    { border-color: rgba(248,81,73,0.55);  color: #f87171; }
.ui-toast--success  { border-color: rgba(63,185,80,0.55);  color: #4ade80; }
.ui-toast--warning  { border-color: rgba(210,153,34,0.55); color: #f0b429; }

/* ── Notification Bell ──────────────────────────────────────────────────────── */
.notif-wrap { position: relative; }

.notif-bell {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.35rem;
    border-radius: 6px;
    position: relative;
    transition: background 0.15s;
    color: var(--text-secondary);
}
.notif-bell:hover { background: var(--color-surface-2); color: var(--text-primary); }

.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    flex-direction: column;
}
.notif-dropdown[hidden] { display: none; }

.notif-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.notif-dropdown__title { font-size: 0.85rem; font-weight: 600; }

.notif-mark-all {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    transition: border-color 0.15s, color 0.15s;
}
.notif-mark-all:hover { color: var(--accent); border-color: var(--accent); }

.notif-list { flex: 1; }

.notif-empty {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-3); }
.notif-item--unread { background: rgba(var(--accent-rgb, 139,92,246), 0.07); }
.notif-item--unread:hover { background: rgba(var(--accent-rgb, 139,92,246), 0.12); }

.notif-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.notif-item__title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}
.notif-item--unread .notif-item__title { color: #fff; }
.notif-item__desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item__time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 0.1rem;
}
.notif-item__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.notif-item__dismiss:hover { opacity: 1; }

/* ── Site Main ──────────────────────────────────────────────────────────────── */
.site-main {
    flex: 1;
    padding: 2rem 1.5rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

/* ── Site Footer ────────────────────────────────────────────────────────────── */
.site-footer {
    padding: 1rem 1.5rem;
    text-align: center;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
}
.site-footer__copy { font-size: 0.75rem; color: var(--text-muted); }

/* ── Flash Messages ─────────────────────────────────────────────────────────── */
.flash-messages { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}
.flash--success { background: rgba(56, 192, 96, 0.1);  border-color: var(--success); color: var(--success); }
.flash--error   { background: rgba(232, 64, 64, 0.1);  border-color: var(--danger);  color: var(--danger); }
.flash--info    { background: var(--accent-dim);        border-color: var(--accent);  color: var(--accent); }

/* ── Form Errors ────────────────────────────────────────────────────────────── */
.form-errors {
    list-style: none;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(232, 64, 64, 0.08);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
}
.form-errors__item { color: var(--danger); font-size: 0.875rem; padding: 0.15rem 0; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), opacity var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.btn--primary {
    background: var(--accent);
    color: var(--bg-base);
    border-color: var(--accent);
}
.btn--primary:hover { opacity: 0.85; }
.btn--full { width: 100%; }

/* ── Auth Box ───────────────────────────────────────────────────────────────── */
.auth-box {
    max-width: 420px;
    margin: 2rem auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.auth-box__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 0.04em;
}

.auth-box__alt {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-box__alt--small {
    font-size: 0.775rem;
    margin-top: 0.5rem;
    opacity: 0.75;
}

.auth-box__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-align: center;
}

.auth-box__notice {
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
}

.auth-box__notice--success {
    background: rgba(35, 134, 54, 0.15);
    border: 1px solid rgba(35, 134, 54, 0.4);
    color: #56d364;
}

.auth-box__notice--error {
    background: rgba(180, 40, 40, 0.15);
    border: 1px solid rgba(180, 40, 40, 0.4);
    color: #f07070;
}

/* ── Auth Form ──────────────────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group--centered { align-items: center; }

.form-group__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.form-group__input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-ui);
    padding: 0.55rem 0.75rem;
    width: 100%;
    transition: border-color var(--transition);
}
.form-group__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.form-group__input::placeholder { color: var(--text-muted); }

.form-group__hint { font-size: 0.78rem; color: var(--text-muted); }

/* ── Create Commander ───────────────────────────────────────────────────────── */
.create-commander {
    max-width: 860px;
    margin: 0 auto;
}
.create-commander__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.create-commander__intro {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.commander-form { display: flex; flex-direction: column; gap: 1.75rem; }

/* Race Picker */
.race-picker { border: none; }
.race-picker__legend {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.race-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.race-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
}
.race-card:has(.race-card__radio:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.race-card:hover { border-color: var(--accent); }

.race-card__radio { position: absolute; opacity: 0; width: 0; height: 0; }

.race-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}
.race-card__desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.dashboard { display: flex; flex-direction: column; gap: 1.5rem; }

/* Commander Bar */
.commander-bar {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.commander-bar__portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 2px solid var(--accent);
    flex-shrink: 0;
}
.commander-bar__info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.commander-bar__name { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.commander-bar__race { font-size: 0.8rem; color: var(--text-secondary); }
.commander-bar__level, .commander-bar__xp { font-size: 0.85rem; color: var(--text-primary); }

.stat-list {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
}
.stat-list dt { color: var(--text-muted); text-transform: uppercase; font-size: 0.7rem; }
.stat-list dd { color: var(--text-primary); font-weight: 700; }

/* Game Nav */
.game-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}
.game-nav__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: border-color var(--transition), background var(--transition);
    position: relative;
    text-align: center;
}
.game-nav__panel--active:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.game-nav__panel--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.game-nav__icon { font-size: 1.5rem; }
.game-nav__label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.game-nav__badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    font-size: 0.6rem;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Game Content */
.game-content {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.placeholder-panel {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 2;
}
.placeholder-panel a { color: var(--accent); }

/* ── Phase 2: Panel titles ──────────────────────────────────────────────────── */
.panel-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.25rem;
}
.panel-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

/* ── Commander bar location ─────────────────────────────────────────────────── */
.commander-bar__location {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    opacity: 0.85;
}
.commander-bar__location:hover { opacity: 1; text-decoration: underline; }

/* ── Nav panel current state ────────────────────────────────────────────────── */
.game-nav__panel--current {
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Galaxy Map ─────────────────────────────────────────────────────────────── */
.galaxy-map { display: flex; flex-direction: column; gap: 0.75rem; }
.galaxy-map__empty { color: var(--text-muted); font-size: 0.9rem; }

.galaxy-list { display: flex; flex-direction: column; gap: 0.5rem; }

.galaxy-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.galaxy-card__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-elevated);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    transition: background var(--transition);
}
.galaxy-card__header:hover { background: var(--accent-dim); }
.galaxy-card__header[aria-expanded="true"] { background: var(--accent-dim); border-bottom: 1px solid var(--border); }
.galaxy-card__name { flex: 1; }
.galaxy-card__chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.galaxy-card__header[aria-expanded="true"] .galaxy-card__chevron { transform: rotate(90deg); }

.galaxy-card__body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--bg-surface);
}
.galaxy-card__body[hidden] { display: none; }
.galaxy-card__desc { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.75rem; line-height: 1.5; }

.cluster-block { display: flex; flex-direction: column; gap: 0.5rem; }
.cluster-block__name {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0;
}

.system-row { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 0.75rem; border-left: 2px solid var(--border); }
.system-row__name { font-size: 0.8rem; color: var(--text-secondary); }

.planet-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 0.5rem; }

.planet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.8rem;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.planet-chip:hover { border-color: var(--accent); background: var(--accent-dim); }
.planet-chip--current { border-color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.planet-chip__level { font-size: 0.65rem; color: var(--text-muted); }
.planet-chip__you {
    font-size: 0.65rem;
    background: var(--accent);
    color: var(--bg-base);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-weight: 700;
}
.planet-chip-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.planet-chip__travel-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    white-space: nowrap;
}
.planet-chip__travel-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

/* ── Planet Detail ──────────────────────────────────────────────────────────── */
.planet-detail { display: flex; flex-direction: column; gap: 1.25rem; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.breadcrumb__link { color: var(--accent); text-decoration: none; }
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--text-muted); }
.breadcrumb__current--active { color: var(--text-primary); font-weight: 600; }

.planet-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.planet-header__name { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin: 0; }
.planet-header__badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.planet-header__badge--here { border-color: var(--accent); color: var(--accent); }

.planet-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

.planet-stats-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.planet-stat-card {
    flex: 1;
    min-width: 160px;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.planet-stat-card--rare { border-color: #8b5cf6; }
.planet-stat-card__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.planet-stat-card__value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.planet-stat-card__bar { display: flex; gap: 3px; }
.richness-pip {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--border);
}
.richness-pip--filled { background: var(--accent); }

/* Stargate Info */
.stargate-info {
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stargate-info__title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.75rem; }
.stargate-info__address { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.gate-symbol {
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--accent);
    letter-spacing: 0.05em;
}
.stargate-info__status { font-size: 0.82rem; color: var(--text-secondary); margin: 0; }
.stargate-info__none { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-pill--active { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.status-pill--inactive { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3 — Base System
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base panel layout */
.base-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.base-header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.base-location { color: var(--color-muted); font-size: 0.85rem; }
.base-cloak-badge { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.base-cloak-badge--off { background: rgba(255,255,255,0.06); color: var(--color-muted); border-color: rgba(255,255,255,0.12); }

/* Power balance */
.power-balance { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.power-balance__label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.power-balance__icon { font-size: 1rem; }
.power-balance__numbers { color: var(--color-muted); margin-left: auto; }
.power--ok      { color: #4ade80; }
.power--deficit { color: #f87171; }
.power-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.power-bar__fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 3px; transition: width 0.4s ease; }
.power-bar__fill--deficit { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Construction queue status */
.construction-queue { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.5rem 0.75rem; border-radius: 0.4rem; }
.construction-queue--active { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.construction-queue--idle   { background: rgba(34,197,94,0.08); color: #86efac; border: 1px solid rgba(34,197,94,0.2); }
.queue-icon { font-size: 1rem; }

/* Building groups */
.building-group { display: flex; flex-direction: column; gap: 0.75rem; }
.building-group__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.35rem; margin: 0; }
.building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }

/* Building cards */
.building-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.6rem; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 0.2s; }
.building-card:hover { border-color: rgba(255,255,255,0.16); }
.building-card--built { border-color: rgba(74,222,128,0.2); }
.building-card--unbuilt { opacity: 0.8; }
.building-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.building-card__name  { font-weight: 600; font-size: 0.95rem; }
.building-card__level { font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; }
.building-card__desc  { font-size: 0.78rem; color: var(--color-muted); line-height: 1.5; margin: 0; }
.building-card__power { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.building-card__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; }

/* Power tags */
.power-tag { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; }
.power-tag--produces { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.power-tag--consumes { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }

/* HP bar */
.building-card__hp { display: flex; flex-direction: column; gap: 0.2rem; }
.hp-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.hp-bar__fill { height: 100%; background: #4ade80; border-radius: 3px; transition: width 0.4s; }
.hp-bar__fill--damaged  { background: #fbbf24; }
.hp-bar__fill--critical { background: #f87171; }
.hp-label { font-size: 0.72rem; color: var(--color-muted); }

/* Construction timer */
.construction-timer { font-size: 0.8rem; color: #fbbf24; display: flex; align-items: center; gap: 0.2rem; }
.timer-label { opacity: 0.8; }
.timer-countdown { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Build action area */
.btn--build { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); padding: 0.3rem 0.8rem; border-radius: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn--build:hover { background: rgba(74,222,128,0.25); border-color: rgba(74,222,128,0.5); }
.btn--disabled { background: rgba(255,255,255,0.05); color: var(--color-muted); border: 1px solid rgba(255,255,255,0.1); padding: 0.3rem 0.8rem; border-radius: 0.35rem; font-size: 0.8rem; cursor: not-allowed; }
.build-info { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--color-muted); gap: 0.05rem; }
.build-cost { color: #c4b5fd; }
.build-cost--ok           { color: #4ade80; }
.build-cost--insufficient { color: #f87171; }
.btn--cant-afford         { border-color: rgba(239,68,68,0.2) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4 — Resource System
   ═══════════════════════════════════════════════════════════════════════════ */

/* Resource HUD in commander bar */
.resource-hud { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; min-width: 160px; }
.resource-hud__row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.resource-hud__icon   { font-size: 1rem; }
.resource-hud__label  { font-weight: 600; flex: 1; }
.resource-hud__amount { font-variant-numeric: tabular-nums; }
.resource-hud__cap    { color: var(--color-muted); font-size: 0.75rem; }
.resource-hud__rate   { font-size: 0.72rem; color: #4ade80; padding-left: 1.5rem; }
.resource-hud__banked { font-size: 0.72rem; color: #a78bfa; padding-left: 1.5rem; }

/* Resource bar in base panel */
.base-resources { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.resource-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.resource-row__icon   { font-size: 1rem; }
.resource-row__name   { font-weight: 600; min-width: 80px; }
.resource-row__bar-wrap { flex: 1; }
.resource-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.resource-bar__fill { height: 100%; background: linear-gradient(90deg, #a78bfa, #c4b5fd); border-radius: 3px; transition: width 0.4s; }
.resource-bar__fill--full { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.resource-row__amount { font-variant-numeric: tabular-nums; font-size: 0.82rem; white-space: nowrap; }
.resource-row__rate { font-size: 0.72rem; color: #4ade80; white-space: nowrap; margin-left: 0.2rem; }
.resource-row__rate--zero { color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5 — Military & Mothership
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Military panel ──────────────────────────────────────────────────────── */
.military-panel { display: flex; flex-direction: column; gap: 1.25rem; }

.military-header { display: flex; flex-direction: column; gap: 0.4rem; }
.military-header__title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.military-header__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--color-muted); }
.military-header__meta strong { color: var(--color-text); }
.military-header__wounded strong { color: #f87171; }

/* Panel notice */
.panel-notice { font-size: 0.85rem; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid; }
.panel-notice--warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: #fbbf24; }
.panel-notice--info { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #93c5fd; }

/* Training queue banner */
.training-queue { padding: 0.7rem 1rem; border-radius: 0.5rem; border: 1px solid; font-size: 0.85rem; }
.training-queue--active { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.training-queue--empty  { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); color: var(--color-muted); }
.training-queue__title { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fbbf24; }
.training-queue__entry { display: flex; align-items: center; gap: 0.75rem; }
.training-queue__name  { font-weight: 600; }
.training-queue__qty   { background: rgba(245,158,11,0.15); color: #fbbf24; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.78rem; }
.training-queue__timer { color: #fbbf24; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Soldier section */
.soldier-section { display: flex; flex-direction: column; gap: 0.75rem; }
.soldier-section__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.35rem; margin: 0; }
.soldier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.85rem; }

/* Soldier cards */
.soldier-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.6rem; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 0.2s; }
.soldier-card:hover { border-color: rgba(255,255,255,0.16); }
.soldier-card--basic  { border-left: 3px solid rgba(96,165,250,0.4); }
.soldier-card--elite  { border-left: 3px solid rgba(167,139,250,0.6); }
.soldier-card--locked { opacity: 0.55; }
.soldier-card__header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.soldier-card__name   { font-weight: 600; font-size: 0.95rem; }
.soldier-card__desc   { font-size: 0.78rem; color: var(--color-muted); line-height: 1.5; margin: 0; }
.soldier-card__stats  { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--color-muted); }
.soldier-card__counts { display: flex; gap: 0.6rem; font-size: 0.82rem; }
.count-available { color: #4ade80; font-weight: 600; }
.count-wounded   { color: #f87171; font-size: 0.8rem; }
.soldier-card__locked-msg { font-size: 0.78rem; color: #fbbf24; background: rgba(245,158,11,0.08); border-radius: 0.3rem; padding: 0.3rem 0.5rem; }

/* Tier badge */
.tier-badge { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.07em; }
.tier-badge--basic { background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.25); }
.tier-badge--elite { background: rgba(167,139,250,0.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.3); }

/* Train sub-form */
.soldier-card__train { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.2rem; }
.train-label { font-size: 0.75rem; color: var(--color-muted); }
.train-qty-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--color-text); border-radius: 0.35rem; padding: 0.25rem 0.5rem; font-size: 0.85rem; width: 80px; }
.train-qty-input:focus { outline: none; border-color: rgba(96,165,250,0.4); }
.train-cost { font-size: 0.78rem; }
.train-cost--ok           { color: #4ade80; }
.train-cost--insufficient { color: #f87171; }
.train-cost-short { opacity: 0.8; }
.train-time { font-size: 0.75rem; color: var(--color-muted); }
.race-bonus-note { color: #fbbf24; font-size: 0.7rem; }
.btn--train { background: rgba(96,165,250,0.15); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); padding: 0.3rem 0.9rem; border-radius: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s; align-self: flex-start; }
.btn--train:hover:not(:disabled) { background: rgba(96,165,250,0.25); border-color: rgba(96,165,250,0.5); }
.btn--train:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Mothership panel ────────────────────────────────────────────────────── */
.mothership-panel { display: flex; flex-direction: column; gap: 1.25rem; }

.ship-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.ship-header__name { margin: 0; font-size: 1.35rem; font-weight: 700; }
.ship-header__status { font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.ship-header__status--docked   { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.ship-header__status--traveling { background: rgba(96,165,250,0.1); color: #93c5fd; border: 1px solid rgba(96,165,250,0.25); }

/* Ship stats row */
.ship-stats { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.ship-stat-block { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.65rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 180px; flex: 1; }
.ship-stat-block__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.ship-stat-block__value { font-size: 0.85rem; }
.ship-hp-bar .hp-bar__fill    { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ship-shield-bar .hp-bar__fill--shield { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.power-ok     { color: #4ade80; }
.power-deficit { color: #f87171; }

/* Module groups */
.module-group { display: flex; flex-direction: column; gap: 0.75rem; }
.module-group__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.35rem; margin: 0; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }

/* Module cards */
.module-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.6rem; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; transition: border-color 0.2s; }
.module-card:hover { border-color: rgba(255,255,255,0.16); }
.module-card--uninstalled { opacity: 0.75; border-style: dashed; }
.module-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.module-card__name  { font-weight: 600; font-size: 0.92rem; }
.module-card__level { font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; }
.module-card__desc  { font-size: 0.78rem; color: var(--color-muted); line-height: 1.5; margin: 0; }
.module-card__tags  { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.module-card__timer { font-size: 0.8rem; color: #fbbf24; }
.module-card__build-info { font-size: 0.75rem; }
.module-effect-tag { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(167,139,250,0.1); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.2); }
.module-hp-bar { margin-top: 0.1rem; }
.max-badge { font-size: 0.65rem; font-weight: 700; background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); padding: 0.05rem 0.35rem; border-radius: 999px; margin-left: 0.2rem; vertical-align: middle; }
.insufficient-note { opacity: 0.7; }

/* ─── Phase 7: Combat ──────────────────────────────────────────────────────── */
.combat-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.combat-section { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.combat-section__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin: 0 0 1rem; }

/* Battle cards (active battle list) */
.battle-list { display: flex; flex-direction: column; gap: 0.75rem; }
.battle-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: rgba(255,255,255,0.03); text-decoration: none; color: var(--color-text); transition: border-color 0.15s; }
.battle-card:hover { border-color: rgba(139,92,246,0.4); }
.battle-card--active { border-color: rgba(239,68,68,0.3); }
.battle-card__header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.battle-card__role { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.role--attacker { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.role--defender { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.battle-card__opponent { font-weight: 600; font-size: 0.9rem; flex: 1; }
.battle-card__tick { font-size: 0.75rem; color: var(--color-muted); }
.battle-card__hp-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.battle-card__hp-fill { height: 100%; background: linear-gradient(90deg,#f87171,#ef4444); border-radius: 999px; transition: width 0.5s; }
.battle-card__meta { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--color-muted); flex-wrap: wrap; align-items: center; }
.battle-card__view { margin-left: auto; color: var(--color-accent); }

/* Battle history */
.battle-history { display: flex; flex-direction: column; gap: 0.5rem; }
.battle-history-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm, 6px); background: rgba(255,255,255,0.02); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font-size: 0.82rem; flex-wrap: wrap; }
.battle-history-row:hover { background: rgba(255,255,255,0.05); }
.outcome-badge { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.outcome--win    { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.outcome--loss   { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.outcome--draw   { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.outcome--retreat{ background: rgba(156,163,175,0.15); color: #9ca3af; border: 1px solid rgba(156,163,175,0.3); }
.bhr__vs { flex: 1; }
.bhr__ticks, .bhr__naq, .bhr__date { color: var(--color-muted); }

/* Attack form */
.attack-form { display: flex; flex-direction: column; gap: 1rem; max-width: 520px; }
.attack-form__preview { padding: 0.75rem; background: rgba(139,92,246,0.07); border-radius: var(--radius-sm, 6px); border: 1px solid rgba(139,92,246,0.2); }
.attack-preview__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.preview-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.preview-stat__label { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.preview-stat__value { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.combat-info { color: var(--color-muted); font-size: 0.85rem; }

/* Battle view */
.battle-view { display: flex; flex-direction: column; gap: 1.25rem; }
.battle-view__header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.battle-view__back { font-size: 0.8rem; color: var(--color-muted); text-decoration: none; }
.battle-view__back:hover { color: var(--color-text); }
.vs-label { color: var(--color-muted); margin: 0 0.3rem; }
.battle-view__type { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); margin-left: auto; }

/* HP bars */
.battle-hpbars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .battle-hpbars { grid-template-columns: 1fr; } }
.hp-side { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem 1rem; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hp-side__label { font-size: 0.82rem; font-weight: 600; }
.hp-bar { height: 10px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; }
.hp-bar__fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.hp-bar__fill--attacker { background: linear-gradient(90deg,#f87171,#dc2626); }
.hp-bar__fill--defender { background: linear-gradient(90deg,#60a5fa,#2563eb); }
.hp-side__pct { font-size: 1.1rem; font-weight: 700; }
.hp-side__pwr { font-size: 0.72rem; color: var(--color-muted); }

/* Status bar */
.battle-status-bar { display: flex; gap: 1.25rem; flex-wrap: wrap; padding: 0.65rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.82rem; align-items: center; }
.bsb__countdown { margin-left: auto; color: #fbbf24; font-weight: 600; }

/* Outcome banner */
.battle-outcome { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid; }
.battle-outcome.outcome--win  { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.3); }
.battle-outcome.outcome--loss { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); }
.battle-outcome__label { font-size: 1.05rem; font-weight: 700; flex: 1; }
.battle-outcome__xp { font-size: 0.82rem; color: var(--color-muted); }

/* Event log */
.battle-log { display: flex; flex-direction: column; gap: 0.3rem; max-height: 380px; overflow-y: auto; padding: 0.75rem; background: rgba(0,0,0,0.2); border: 1px solid var(--color-border); border-radius: var(--radius); scroll-behavior: smooth; }
.battle-event { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.5; }
.battle-event:nth-child(even) { background: rgba(255,255,255,0.02); }
.battle-event__tick { font-size: 0.68rem; font-weight: 700; color: var(--color-muted); min-width: 2rem; }
.battle-event__icon { min-width: 1.2rem; }
.battle-event__desc { flex: 1; }
.event--weapon-fire   .battle-event__desc { color: #f87171; }

/* ─── Phase 8: Alliance ────────────────────────────────────────────────────── */

/* Panel wrapper */
.alliance-panel { display: flex; flex-direction: column; gap: 1.5rem; }

/* Alliance header */
.alliance-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); }
.alliance-header__tag { font-size: 1.5rem; font-weight: 800; color: var(--color-accent); min-width: 4rem; }
.alliance-header__info { flex: 1; }
.alliance-header__name { margin: 0 0 0.25rem; font-size: 1.25rem; color: var(--color-text); }
.alliance-header__desc { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
.alliance-header__meta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.alliance-meta-item { font-size: 0.8rem; color: var(--color-muted); }
.alliance-rank { padding: 0.15rem 0.55rem; border-radius: 3px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.alliance-rank--leader  { background: #92400e; color: #fcd34d; }
.alliance-rank--officer { background: #1e3a8a; color: #93c5fd; }
.alliance-rank--member  { background: rgba(255,255,255,0.07); color: var(--color-muted); }

/* Sections */
.alliance-section { padding: 1rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); }
.alliance-section__title { margin: 0 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); }
.alliance-section--danger { border-color: rgba(239,68,68,0.3); }
.alliance-empty { color: var(--color-muted); font-size: 0.85rem; }

/* Member list */
.member-list { display: flex; flex-direction: column; gap: 0.5rem; }
.member-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03); border-radius: 4px; }
.member-row__name { font-weight: 600; min-width: 8rem; }
.member-row__race { font-size: 0.8rem; color: var(--color-muted); min-width: 7rem; }
.member-row__joined { font-size: 0.75rem; color: var(--color-muted); margin-left: auto; }
.member-row__actions { display: flex; gap: 0.35rem; }
.member-rank { padding: 0.12rem 0.45rem; border-radius: 3px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.member-rank--leader  { background: #92400e; color: #fcd34d; }
.member-rank--officer { background: #1e3a8a; color: #93c5fd; }
.member-rank--member  { background: rgba(255,255,255,0.07); color: var(--color-muted); }

/* War list */
.war-list { display: flex; flex-direction: column; gap: 0.5rem; }
.war-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.5rem 0.75rem; border-radius: 4px; }
.war-row--active  { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); }
.war-row--ended, .war-row--stalemate { background: rgba(255,255,255,0.03); border: 1px solid var(--color-border); }
.war-row__role { font-size: 0.75rem; min-width: 7rem; }
.war-row__enemy { font-weight: 600; flex: 1; min-width: 8rem; }
.war-row__score { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.war-status { padding: 0.12rem 0.45rem; border-radius: 3px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.war-status--active   { background: rgba(239,68,68,0.25); color: #fca5a5; }
.war-status--ended    { background: rgba(255,255,255,0.07); color: var(--color-muted); }
.war-status--stalemate { background: rgba(245,158,11,0.15); color: #fbbf24; }

/* Declare war form */
.alliance-war-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.alliance-war-form__select { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); padding: 0.4rem 0.7rem; font-size: 0.85rem; flex: 1; min-width: 12rem; }

/* Create/browse forms */
.alliance-create { padding: 1.25rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); }
.alliance-create__title { margin: 0 0 1rem; font-size: 1.1rem; }
.alliance-create__form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 440px; }
.alliance-browse { padding: 1.25rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); }
.alliance-browse__title { margin: 0 0 0.75rem; font-size: 1.1rem; }
.alliance-list { display: flex; flex-direction: column; gap: 0.5rem; }
.alliance-list__row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03); border-radius: 4px; }
.alliance-list__tag { font-weight: 800; color: var(--color-accent); min-width: 3rem; }
.alliance-list__name { font-weight: 600; flex: 1; }
.alliance-list__members { font-size: 0.8rem; color: var(--color-muted); }
.alliance-list__desc { font-size: 0.8rem; color: var(--color-muted); width: 100%; padding-left: 3rem; }
.event--defence-fire  .battle-event__desc { color: #60a5fa; }
.event--resource-stolen .battle-event__desc { color: #fbbf24; }
.event--abduction     .battle-event__desc { color: #a78bfa; }
.event--battle-start  .battle-event__desc { color: #4ade80; font-style: italic; }
.event--battle-end    .battle-event__desc { color: #4ade80; font-weight: 700; }
.event--retreat       .battle-event__desc { color: #9ca3af; font-style: italic; }

/* Controls */
.battle-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.battle-controls__hint { font-size: 0.78rem; color: var(--color-muted); }

/* Travel section */
.travel-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 0.6rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.travel-section__title { margin: 0; font-size: 1rem; font-weight: 700; }
.travel-form { display: flex; flex-direction: column; gap: 0.5rem; }
.travel-label { font-size: 0.8rem; color: var(--color-muted); }
.travel-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--color-text); border-radius: 0.35rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; max-width: 400px; }
.travel-select:focus { outline: none; border-color: rgba(96,165,250,0.4); }
.travel-cost-note { font-size: 0.78rem; color: var(--color-muted); }
.btn--travel { background: rgba(96,165,250,0.15); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); padding: 0.35rem 1rem; border-radius: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; align-self: flex-start; transition: background 0.15s; }
.btn--travel:hover { background: rgba(96,165,250,0.25); }

/* Orbital Strike */
.strike-section { background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.15); border-radius: 0.6rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.strike-section__title { margin: 0; font-size: 1rem; font-weight: 700; color: #f87171; }
.strike-section__sub { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.strike-target-list { display: flex; flex-direction: column; gap: 0.5rem; }
.strike-target-card { display: flex; align-items: center; gap: 0.75rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 0.5rem; padding: 0.55rem 0.8rem; flex-wrap: wrap; }
.strike-target-card__info { display: flex; gap: 0.6rem; align-items: center; flex: 1; min-width: 0; }
.strike-target-card__name { font-weight: 600; font-size: 0.85rem; }
.strike-target-card__owner { color: var(--color-muted); font-size: 0.8rem; }
.strike-target-card__race  { color: var(--color-accent); font-size: 0.75rem; }
.btn--strike { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); padding: 0.3rem 0.8rem; border-radius: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.btn--strike:hover { background: rgba(239,68,68,0.28); }
.btn--strike:disabled { opacity: 0.5; cursor: not-allowed; }
.strike-result { width: 100%; padding: 0.4rem 0.6rem; border-radius: 0.35rem; font-size: 0.8rem; }
.strike-result--win   { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.strike-result--loss  { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.strike-result--error { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Phase 6 — Commander Persona
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Panel wrapper */
.persona-panel { display: flex; flex-direction: column; gap: 1.5rem; }

/* Header */
.persona-header { display: flex; gap: 1.25rem; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 1.25rem; }
.persona-portrait { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.15); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.persona-portrait__level { position: absolute; bottom: -6px; right: -6px; background: var(--accent); color: #000; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 9999px; }
.persona-header__info { flex: 1; min-width: 0; }
.persona-header__name { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.15rem; }
.persona-header__race { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.1rem; }
.persona-header__title { font-size: 0.8rem; color: var(--accent); font-style: italic; margin: 0 0 0.75rem; }

/* XP bar */
.xp-section { margin-top: 0.6rem; }
.xp-section__labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.xp-section__next { color: var(--accent); }
.xp-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.xp-bar__fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, rgba(96,165,250,0.9) 100%); border-radius: 4px; transition: width 0.4s ease; }
.xp-section__numbers { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.xp-section__pct { color: var(--accent); }

/* Section container */
.persona-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 1rem 1.25rem; }
.persona-section__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 1rem; }

/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
.stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 0.4rem; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.stat-card__short { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.stat-card__label { font-size: 0.7rem; color: var(--text-muted); }

/* ── Phase 10: Missions ─────────────────────────────────────────────────── */
.missions-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.missions-header__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.25rem; }
.missions-header__sub { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.missions-section__title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 0.75rem; }
.missions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.missions-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 0.6rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.missions-card--diff-easy   { border-left: 3px solid #3fb950; }
.missions-card--diff-medium { border-left: 3px solid #e3b341; }
.missions-card--diff-hard   { border-left: 3px solid #f85149; }
.missions-card--diff-elite  { border-left: 3px solid #bc8cff; }
.missions-card--locked { opacity: 0.55; }
.missions-card__header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.missions-card__diff { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.missions-card__name { font-size: 0.95rem; font-weight: 600; margin: 0; flex: 1; }
.missions-card__type-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 999px; }
.missions-card__type-badge--boss     { background: rgba(248,81,73,0.18); color: #f85149; }
.missions-card__type-badge--alliance { background: rgba(88,166,255,0.15); color: #58a6ff; }
.missions-card__desc { font-size: 0.82rem; color: var(--text-muted); margin: 0; flex: 1; }
.missions-card__meta { display: flex; gap: 0.75rem; font-size: 0.78rem; color: var(--text-muted); }
.missions-card__req--locked { color: #f85149; }
.missions-card__rewards { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.missions-reward { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; }
.missions-reward--naq { background: rgba(88,166,255,0.12); color: #58a6ff; }
.missions-reward--cr  { background: rgba(63,185,80,0.12);  color: #3fb950; }
.missions-reward--xp  { background: rgba(227,179,65,0.15); color: #e3b341; }
.missions-card__footer { margin-top: auto; }
.missions-card__status { font-size: 0.8rem; color: var(--text-muted); }
.missions-card__status--progress { color: #e3b341; }
.missions-card__status--cooldown { color: var(--text-muted); }
.missions-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #161b22; border: 1px solid #30363d; border-radius: 0.5rem; padding: 0.7rem 1.1rem; font-size: 0.85rem; max-width: 340px; transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 500; }
.missions-toast--visible { opacity: 1; transform: none; pointer-events: auto; }
.missions-toast--success { border-color: #3fb950; color: #3fb950; }
.missions-toast--error   { border-color: #f85149; color: #f85149; }

/* ── Phase 10: Chat ──────────────────────────────────────────────────────── */
.chat-panel { display: flex; flex-direction: column; height: 520px; }
.chat-tabs { display: flex; gap: 0.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.5rem; }
.chat-tab { background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.4rem; padding: 0.35rem 0.85rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.chat-tab:hover { background: rgba(255,255,255,0.05); color: var(--text-base); }
.chat-tab--active { background: rgba(88,166,255,0.12); border-color: #58a6ff; color: #58a6ff; }
.chat-window { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-window--hidden { display: none; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0; min-height: 0; }
.chat-msg { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.6rem; align-items: baseline; padding: 0.3rem 0.5rem; border-radius: 0.35rem; font-size: 0.85rem; }
.chat-msg--mine { background: rgba(88,166,255,0.06); }
.chat-msg__name { font-weight: 700; font-size: 0.78rem; color: #58a6ff; white-space: nowrap; }
.chat-msg__text { word-break: break-word; }
.chat-msg__time { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.chat-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.chat-form--disabled { opacity: 0.5; pointer-events: none; }
.chat-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.4rem; padding: 0.45rem 0.75rem; font-size: 0.85rem; color: var(--text-base); }
.chat-input:focus { outline: none; border-color: #58a6ff; }
.chat-send-btn { white-space: nowrap; }
.chat-dm-sidebar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.chat-dm-label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.chat-dm-select { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.4rem; padding: 0.35rem 0.6rem; font-size: 0.82rem; color: var(--text-base); flex: 1; }
.chat-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: 2rem; }

/* ── Phase 10: Rankings ─────────────────────────────────────────────────── */
.rankings-panel { display: flex; flex-direction: column; gap: 1rem; }
.rankings-header { display: flex; align-items: baseline; gap: 1rem; }
.rankings-header__title { font-size: 1.3rem; font-weight: 700; margin: 0; }
.rankings-header__my-rank { font-size: 0.9rem; color: #e3b341; margin: 0; }

.season-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.season-header__name  { font-size: 1.05rem; font-weight: 700; margin: 0; color: #fbbf24; }
.season-header__dates { font-size: 0.78rem; color: var(--color-muted); }
.season-my-standing {
  font-size: 0.85rem; padding: 0.5rem 0.75rem;
  background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--radius); margin-bottom: 0.75rem; color: #fde68a;
}
.rankings-tabs { display: flex; gap: 0.25rem; }
.rankings-tab { background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.4rem; padding: 0.35rem 0.9rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.rankings-tab:hover { background: rgba(255,255,255,0.05); color: var(--text-base); }
.rankings-tab--active { background: rgba(227,179,65,0.12); border-color: #e3b341; color: #e3b341; }
.rankings-table-wrap { overflow-x: auto; }
.rankings-table-wrap--hidden { display: none; }
.rankings-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rankings-table th { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.1); }
.rankings-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rankings-row--me td { background: rgba(227,179,65,0.07); }
.rankings-rank { font-weight: 700; font-size: 1rem; width: 2.5rem; }
.rankings-name { font-weight: 600; }
.rankings-you { font-size: 0.72rem; color: var(--text-muted); }
.rankings-race { color: var(--text-muted); font-size: 0.8rem; }
.rankings-tag { font-size: 0.78rem; color: #58a6ff; font-weight: 600; }
.rankings-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2rem; }
.stat-card__value { font-size: 1.1rem; font-weight: 700; }
.stat-card__bonus { font-size: 0.7rem; color: #4ade80; font-weight: 600; }

/* Equipment grid */
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; }
.equip-slot { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 0.4rem; padding: 0.6rem; min-height: 90px; display: flex; flex-direction: column; gap: 0.3rem; }
.equip-slot--filled { border-color: rgba(255,255,255,0.15); }
.equip-slot__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.equip-slot__item { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.equip-slot__item-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.equip-slot__item-stats { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.equip-slot__empty-label { font-size: 0.75rem; color: rgba(255,255,255,0.2); font-style: italic; flex: 1; display: flex; align-items: center; }

/* Durability bar */
.dur-bar { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; margin: 0.15rem 0; }
.dur-bar__fill { height: 100%; background: #4ade80; border-radius: 2px; transition: width 0.3s; }

/* Rarity colours */
.rarity--common    .equip-slot__item-name,
.rarity--common    .inventory-item__rarity  { color: #d1d5db; }
.rarity--uncommon  .equip-slot__item-name,
.rarity--uncommon  .inventory-item__rarity  { color: #4ade80; }
.rarity--rare      .equip-slot__item-name,
.rarity--rare      .inventory-item__rarity  { color: #60a5fa; }
.rarity--epic      .equip-slot__item-name,
.rarity--epic      .inventory-item__rarity  { color: #c084fc; }
.rarity--legendary .equip-slot__item-name,
.rarity--legendary .inventory-item__rarity  { color: #fbbf24; }

/* Item stat tags */
.item-stat { font-size: 0.68rem; background: rgba(255,255,255,0.06); color: #93c5fd; padding: 0.1rem 0.3rem; border-radius: 0.25rem; }
.item-stat--req { color: #f87171; background: rgba(248,113,113,0.08); }

/* Inventory list */
.inventory-count { font-weight: 400; font-size: 0.75rem; color: var(--text-muted); margin-left: 0.4rem; text-transform: none; letter-spacing: 0; }
.inventory-list { display: flex; flex-direction: column; gap: 0.5rem; }
.inventory-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 0.4rem; padding: 0.65rem 0.75rem; }
.inventory-item__main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.inventory-item__name { font-size: 0.88rem; font-weight: 600; }
.inventory-item__rarity { font-size: 0.7rem; text-transform: capitalize; }
.inventory-item__slot { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
.inventory-item__desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.35rem; line-height: 1.4; }
.inventory-item__stats { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.4rem; }

/* Equip / unequip buttons */
.btn--equip   { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); padding: 0.25rem 0.65rem; border-radius: 0.3rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn--equip:hover:not(:disabled)   { background: rgba(74,222,128,0.22); }
.btn--equip:disabled { opacity: 0.35; cursor: not-allowed; }
.btn--unequip { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.2); padding: 0.25rem 0.65rem; border-radius: 0.3rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn--unequip:hover { background: rgba(248,113,113,0.2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 9 — Store & Economy
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Panel layout */
.store-panel { display: flex; flex-direction: column; gap: 1.5rem; }

/* Header */
.store-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.store-header__title h2 { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--c-accent); }
.store-header__subtitle { margin: 0; font-size: 0.85rem; color: var(--c-text-muted); }
.store-header__balances { display: flex; gap: 1rem; flex-wrap: wrap; }
.store-balance { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.store-balance--credits { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.1); }
.store-balance--naq     { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
.store-balance__icon    { font-size: 1rem; }
.store-balance__amount  { font-size: 1rem; font-weight: 700; color: var(--c-text); }
.store-balance__label   { font-size: 0.75rem; color: var(--c-text-muted); }

/* Tabs */
.store-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.store-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--c-text-muted); padding: 0.5rem 1rem; cursor: pointer; font-size: 0.88rem; font-weight: 500; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 0.35rem; }
.store-tab:hover { color: var(--c-text); }
.store-tab--active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* Tab content */
.store-tab-content--hidden { display: none; }
.store-tab-intro { margin: 0 0 1rem; font-size: 0.88rem; color: var(--c-text-muted); }
.store-tab-intro--danger { color: #f87171; }

/* Store grid */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.store-grid--commercial { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Store card */
.store-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.15s; }
.store-card:hover { border-color: rgba(255,255,255,0.22); }
.store-card--black-market { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.04); }
.store-card--black-market:hover { border-color: rgba(248,113,113,0.45); }
.store-card--commercial { border-color: rgba(99,102,241,0.25); background: rgba(99,102,241,0.06); text-align: center; }
.store-card--commercial:hover { border-color: rgba(99,102,241,0.5); }
.store-card__name { font-size: 0.95rem; font-weight: 600; color: var(--c-text); }
.store-card__desc { font-size: 0.8rem; color: var(--c-text-muted); flex: 1; }
.store-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.store-card__price { font-size: 0.85rem; font-weight: 600; }
.store-card__price--credits { color: #a78bfa; }
.store-card__price--naq     { color: #fbbf24; }
.store-card__limit { font-size: 0.73rem; color: var(--c-text-muted); }

/* Black market risk badge */
.store-card__risk { margin-top: 0.2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tutorial Overlay
   ═══════════════════════════════════════════════════════════════════════════ */
#gw-tutorial { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.tut__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(3px); }
.tut__panel {
  position: relative;
  width: min(480px, 92vw);
  background: var(--c-surface, #1a1a2e);
  border: 1px solid var(--c-border, #2e2e4e);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  animation: tutIn .25s ease;
}
@keyframes tutIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.tut__icon  { font-size: 2.5rem; margin-bottom: .75rem; }
.tut__title { font-size: 1.25rem; font-weight: 700; color: var(--c-accent, #7c6fe0); margin: 0 0 .75rem; }
.tut__body  { font-size: .9rem; line-height: 1.6; color: var(--c-text, #ccc); margin: 0 0 1.25rem; }
.tut__progress { height: 4px; background: var(--c-border, #2e2e4e); border-radius: 2px; margin-bottom: 1.25rem; overflow: hidden; }
.tut__progress-bar { height: 100%; background: var(--c-accent, #7c6fe0); border-radius: 2px; transition: width .3s ease; }
.tut__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.tut__btn { padding: .5rem 1.25rem; border-radius: 6px; border: none; cursor: pointer; font-size: .875rem; font-weight: 600; transition: opacity .15s; }
.tut__btn:hover { opacity: .85; }
.tut__btn--next { background: var(--c-accent, #7c6fe0); color: #fff; }
.tut__btn--skip { background: transparent; color: var(--c-text-muted, #888); border: 1px solid var(--c-border, #2e2e4e); }
.tut__counter { font-size: .75rem; color: var(--c-text-muted, #888); margin: .75rem 0 0; }
.risk-badge { display: inline-block; font-size: 0.75rem; color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); border-radius: 0.25rem; padding: 0.1rem 0.4rem; }

/* Commercial card extras */
.store-card__credits-reward { font-size: 1.5rem; font-weight: 800; color: #a78bfa; }
.store-card__usd-price { font-size: 1rem; font-weight: 700; color: var(--c-text); }
.paypal-btn-container { min-height: 48px; }

/* Notice */
.store-notice { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.4rem; padding: 1rem; text-align: center; }
.store-notice--inline { padding: 0.5rem; margin-top: 0.5rem; }
.store-notice p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--c-text-muted); }
.store-empty { color: var(--c-text-muted); font-size: 0.88rem; font-style: italic; padding: 1.5rem; text-align: center; }

/* Crypto button */
.btn--crypto { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); padding: 0.35rem 0.8rem; border-radius: 0.35rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s; width: 100%; margin-top: 0.35rem; }
.btn--crypto:hover { background: rgba(251,191,36,0.22); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOCATION & PRESENCE SYSTEM — PHASE 13
   ═══════════════════════════════════════════════════════════════════════════ */

/* Commander status bar */
.combat-status-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius); font-size: 0.82rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.combat-status-bar__icon { font-size: 1rem; }
.combat-status-bar__label { color: var(--color-muted); }
.combat-status-bar__value { font-weight: 600; color: var(--color-text); }
.combat-status-bar__eta { margin-left: auto; font-size: 0.75rem; color: #fbbf24; }

/* Target tab bar */
.target-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0; flex-wrap: wrap; }
.target-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.45rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--color-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 0.4rem; }
.target-tab:hover { color: var(--color-text); }
.target-tab--active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.target-tab__count { background: rgba(139,92,246,0.15); color: var(--color-accent); border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.68rem; font-weight: 700; min-width: 1.5rem; text-align: center; }

/* Target panels */
.target-panel { display: flex; flex-direction: column; gap: 0; }
.target-panel--hidden { display: none !important; }

/* Target list */
.target-list { display: flex; flex-direction: column; gap: 0.5rem; }
.target-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; background: rgba(255,255,255,0.02); border: 1px solid var(--color-border); border-radius: var(--radius); flex-wrap: wrap; transition: border-color 0.15s; }
.target-row:hover { border-color: rgba(139,92,246,0.3); }
.target-row--undefended { border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.03); }
.target-row--urgent { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.04); animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0%,100% { border-color: rgba(239,68,68,0.3); } 50% { border-color: rgba(239,68,68,0.65); } }

.target-row__info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1 1 180px; }
.target-row__name { font-weight: 600; font-size: 0.88rem; }
.target-row__race { font-size: 0.72rem; color: var(--color-muted); }
.target-row__location { font-size: 0.78rem; color: var(--color-muted); flex: 1 1 140px; }
.target-row__tip { font-size: 0.7rem; color: #fbbf24; margin-left: 0.4rem; }
.target-row__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }

/* Target tags */
.target-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.target-tag--away    { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.target-tag--transit { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.target-tag--orbit   { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.target-tag--travel  { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.target-tag--present { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }

/* Hint text */
.combat-hint { font-size: 0.78rem; color: var(--color-muted); padding: 0.4rem 0; margin-bottom: 0.4rem; }

/* Small buttons */
.btn--sm { padding: 0.25rem 0.65rem; font-size: 0.78rem; }
.btn--warning { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.btn--warning:hover { background: rgba(251,191,36,0.22); }

/* ── Gate Travel Panel ─────────────────────────────────────────────────────── */
.gate-travel-panel { display: flex; flex-direction: column; gap: 1.5rem; }

.gate-status__card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--card-bg); }
.gate-status__card--ready    { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.06); }
.gate-status__card--traveling { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.08); animation: gate-pulse 2s ease-in-out infinite; }
.gate-status__card--mission  { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.06); }
.gate-status__card--away     { border-color: var(--border); }
.gate-status__icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.gate-status__body { flex: 1; font-size: 0.95rem; }
.gate-status__hint { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.35rem; }
.gate-status__eta  { font-size: 0.82rem; color: #a78bfa; margin-left: 0.4rem; }

@keyframes gate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
  50%       { box-shadow: 0 0 12px 2px rgba(139,92,246,0.18); }
}

.gate-destinations__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 0.75rem; }

.gate-dest-list { display: flex; flex-direction: column; gap: 0.4rem; }
.gate-dest-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; border-radius: 0.4rem; border: 1px solid var(--border); background: var(--card-bg); transition: background 0.15s; }
.gate-dest-row:hover { background: var(--card-bg-hover, rgba(255,255,255,0.04)); }
.gate-dest-row--self { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.05); }
.gate-dest-row__planet { font-weight: 600; font-size: 0.92rem; }
.gate-dest-row__system { font-size: 0.77rem; color: var(--color-muted); margin-top: 0.1rem; display: block; }
.gate-dest-row__tags { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.gate-dest-row__actions { min-width: 6rem; text-align: right; }
.gate-dest-row__tip { font-size: 0.76rem; color: var(--color-muted); }

.gate-tag { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid transparent; }
.gate-tag--self    { background: rgba(99,102,241,0.18); color: #818cf8; border-color: rgba(99,102,241,0.3); }
.gate-tag--open    { background: rgba(74,222,128,0.12); color: #4ade80; border-color: rgba(74,222,128,0.25); }
.gate-tag--closed  { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.25); }
.gate-tag--locked  { background: rgba(248,113,113,0.12); color: #f87171; border-color: rgba(248,113,113,0.25); }
.gate-tag--iris    { background: rgba(139,92,246,0.12); color: #c4b5fd; border-color: rgba(139,92,246,0.25); }
.gate-tag--shield  { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.25); }
.gate-tag--owned   { background: rgba(251,191,36,0.1); color: #fde68a; border-color: rgba(251,191,36,0.2); }

/* ── Gate Site Management Panel ─────────────────────────────────────────────── */
.gate-sites-panel { display: flex; flex-direction: column; gap: 1.75rem; }

.gate-site-claim { display: flex; flex-direction: column; gap: 0.75rem; }
.gate-site-claim__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 0.25rem; }

.gate-owned-list__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.gate-owned-list__tag   { color: #fbbf24; }
.gate-owned-list__count { background: rgba(255,255,255,0.08); color: var(--c-text); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.78rem; }

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

.gate-site-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.6rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.gate-site-card__header { display: flex; align-items: baseline; gap: 0.6rem; }
.gate-site-card__planet { font-weight: 700; font-size: 1rem; }
.gate-site-card__system { font-size: 0.78rem; color: var(--color-muted); }

/* Toggle switches */
.gate-site-card__controls { display: flex; gap: 1rem; flex-wrap: wrap; }
.toggle-switch { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; user-select: none; font-size: 0.82rem; }
.toggle-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch__track { width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid var(--border); transition: background 0.2s; flex-shrink: 0; position: relative; }
.toggle-switch__track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: left 0.2s, background 0.2s; }
.toggle-switch__input:checked + .toggle-switch__track { background: rgba(99,102,241,0.55); border-color: rgba(99,102,241,0.6); }
.toggle-switch__input:checked + .toggle-switch__track::after { left: 19px; background: #fff; }
.toggle-switch__label { color: var(--c-text); }

/* Structure grid */
.gate-site-card__structs-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 0.4rem; }
.gate-struct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.gate-struct-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 0.35rem; padding: 0.5rem 0.5rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; font-size: 0.76rem; }
.gate-struct-item--built { border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.05); }
.gate-struct-item__icon  { font-size: 1.1rem; }
.gate-struct-item__label { font-weight: 600; line-height: 1.2; }
.gate-struct-item__hp    { color: var(--color-muted); font-size: 0.7rem; }
.gate-struct-item__badge--built { color: #4ade80; font-size: 0.68rem; }
.gate-struct-item__badge--empty { color: var(--color-muted); }
.gate-struct-item__desc  { color: var(--color-muted); font-size: 0.65rem; line-height: 1.2; }
.gate-struct-item__cost  { color: #fbbf24; font-size: 0.68rem; }
.gate-struct-item__maxed { color: #a78bfa; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; }
.btn--upgrade { background: rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.5); color: #c4b5fd; }
.btn--upgrade:hover { background: rgba(99,102,241,0.5); }

/* ── Alliance Rallies ──────────────────────────────────────────────────────── */
.rally-section { margin-top: 1.5rem; }
.rally-section__count { font-size: 0.7rem; color: #f97316; background: rgba(249,115,22,0.15); padding: 0.1rem 0.4rem; border-radius: 999px; margin-left: 0.5rem; }
.rally-section__hint { color: var(--color-muted); font-size: 0.8rem; margin-bottom: 0.75rem; }
.rally-create-details summary { cursor: pointer; display: inline-block; margin-bottom: 0.5rem; }
.rally-create-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; padding: 0.75rem; background: var(--color-surface); border-radius: 6px; margin-bottom: 1rem; }
.rally-list { display: flex; flex-direction: column; gap: 0.75rem; }
.rally-card { background: var(--color-surface); border: 1px solid rgba(249,115,22,0.25); border-radius: 8px; padding: 0.75rem 1rem; }
.rally-card__header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.rally-card__target { font-weight: 600; }
.rally-card__initiator { font-size: 0.75rem; color: var(--color-muted); }
.rally-card__stats { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.rally-card__timer { color: #fbbf24; font-weight: 600; }
.rally-card__partlist { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.rally-part-badge { font-size: 0.7rem; background: rgba(255,255,255,0.05); border-radius: 999px; padding: 0.1rem 0.5rem; border: 1px solid rgba(255,255,255,0.1); }
.rally-part-badge--me { border-color: #4ade80; color: #4ade80; }
.rally-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rally-joined-badge { font-size: 0.75rem; color: #4ade80; }
.rally-msg { font-size: 0.8rem; margin-top: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 4px; }
.rally-msg--ok  { color: #4ade80; background: rgba(74,222,128,0.1); }
.rally-msg--err { color: #f87171; background: rgba(248,113,113,0.1); }
.rally-history-details { margin-top: 1rem; }
.rally-history-toggle { cursor: pointer; font-size: 0.8rem; color: var(--color-muted); }
.rally-history-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.rally-history-row { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; padding: 0.25rem 0.5rem; border-radius: 4px; }
.rally-history-row--win       { background: rgba(74,222,128,0.08); }
.rally-history-row--loss      { background: rgba(248,113,113,0.08); }
.rally-history-row--cancelled { background: rgba(255,255,255,0.03); color: var(--color-muted); }
.rally-history-row__result { font-weight: 600; }
.rally-history-row--win  .rally-history-row__result { color: #4ade80; }
.rally-history-row--loss .rally-history-row__result { color: #f87171; }
.rally-history-row__naq { color: #fbbf24; }
.btn--xs { padding: 0.15rem 0.45rem; font-size: 0.7rem; margin-top: 0.15rem; }

.gate-site-card__feedback { font-size: 0.8rem; min-height: 1.2em; }
.gate-site-card__feedback--ok  { color: #4ade80; }
.gate-site-card__feedback--err { color: #f87171; }

/* Gate incoming travellers (intercept) */
.gate-incoming { margin-top: 1.5rem; }
.gate-incoming__title {
  font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: #fbbf24;
  display: flex; align-items: center; gap: .5rem;
}
.gate-incoming__count {
  font-size: .75rem; background: rgba(251,191,36,0.2); color: #fde68a;
  border-radius: 999px; padding: .1rem .45rem; font-weight: 700;
}
.gate-incoming__hint { font-size: .8rem; color: var(--text-muted); margin: 0 0 .75rem; }
.gate-incoming-list { display: flex; flex-direction: column; gap: .5rem; }
.gate-incoming-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; background: rgba(251,191,36,0.05);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: var(--radius); padding: .55rem .85rem;
  flex-wrap: wrap;
}
.gate-incoming-item__info { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.gate-incoming-item__name { font-weight: 700; color: var(--text); }
.gate-incoming-item__race { color: var(--text-muted); font-size: .78rem; }
.gate-incoming-item__dest { color: var(--accent); font-size: .85rem; }
.gate-incoming-item__eta  { font-size: .78rem; color: var(--text-muted); }
.gate-incoming-item__eta--now { color: #fbbf24; font-weight: 700; }
.gate-incoming-item__nopos { font-size: .75rem; color: var(--text-muted); font-style: italic; }
.gate-intercept-result {
  margin-top: .75rem; padding: .55rem .85rem; border-radius: var(--radius); font-size: .88rem;
}
.gate-intercept-result--ok   { background: color-mix(in srgb,var(--clr-success) 12%,transparent); color: var(--clr-success); border: 1px solid var(--clr-success); }
.gate-intercept-result--fail { background: color-mix(in srgb,var(--clr-danger)  12%,transparent); color: var(--clr-danger);  border: 1px solid var(--clr-danger); }

.panel-notice { padding: 0.8rem 1rem; border-radius: 0.5rem; font-size: 0.88rem; }
.panel-notice--warn { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); color: #fde68a; }

/* ── Modal overlay ──────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 800; }
.modal[hidden] { display: none; }
.modal__box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem 2rem; max-width: 420px; width: 90%; }
.modal__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }
.modal__body  { font-size: 0.92rem; margin-bottom: 0.75rem; }
.modal__warn  { font-size: 0.85rem; color: #fbbf24; margin-bottom: 0.9rem; }
.modal__warn[hidden] { display: none; }
.modal__actions { display: flex; gap: 0.75rem; justify-content: flex-end; }

/* Toast feedback */
.store-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(2rem); background: rgba(15,20,40,0.97); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.5rem; padding: 0.65rem 1.2rem; font-size: 0.88rem; color: var(--c-text); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 9999; white-space: nowrap; max-width: 90vw; }
.store-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.store-toast--success { border-color: rgba(74,222,128,0.4); color: #4ade80; }
.store-toast--warning { border-color: rgba(251,191,36,0.4); color: #fbbf24; }
.store-toast--error   { border-color: rgba(248,113,113,0.4); color: #f87171; }
.store-toast--info    { border-color: rgba(99,102,241,0.4); color: #a78bfa; }


/* ═══════════════════════════════════════════════════════════════════════════
   DUEL SESSIONS (v2 turn-based)
   ═══════════════════════════════════════════════════════════════════════════ */

.duel-sessions-section { margin-top: 1.25rem; }

.duel-card {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.duel-card__header {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.duel-card__vs { font-size: 0.95rem; font-weight: 600; }

.duel-tag {
  font-size: 0.7rem; font-weight: 700; border-radius: 999px;
  padding: 0.1rem 0.5rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.duel-tag--pending   { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.duel-tag--challenge { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.4); }
.duel-tag--active    { background: rgba(99,102,241,0.15); color: #a78bfa; border: 1px solid rgba(99,102,241,0.4); }

.duel-card__exp { font-size: 0.75rem; color: var(--color-muted); margin-left: auto; }

/* HP bars */
.duel-card__hp-bars { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }

.duel-hp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.duel-hp__label { min-width: 6rem; color: var(--color-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-hp__track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.duel-hp__fill       { height: 100%; background: #4ade80; border-radius: 4px; transition: width 0.3s; }
.duel-hp__fill--opp  { background: #f87171; }
.duel-hp__val { min-width: 4rem; text-align: right; font-size: 0.75rem; color: var(--color-muted); }

/* Action submission */
.duel-card__action { margin-top: 0.4rem; }
.duel-token-label { display: block; font-size: 0.82rem; margin-bottom: 0.4rem; color: var(--color-muted); }
.duel-token-slider {
  width: 100%; max-width: 220px; accent-color: #ef4444; cursor: pointer;
  margin-bottom: 0.6rem; display: block;
}
.duel-card__btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }

.duel-card__waiting {
  font-size: 0.82rem; color: var(--color-muted); font-style: italic; margin: 0.3rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUNTY PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.bounties-panel { display: flex; flex-direction: column; gap: 1.5rem; }

.bounty-alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  color: #fca5a5;
  font-size: 0.88rem;
}

/* Tabs */
.bounty-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bounty-tab {
  padding: 0.4rem 0.9rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center; gap: 0.4rem;
}
.bounty-tab:hover { background: rgba(255,255,255,0.06); color: var(--c-text); }
.bounty-tab--active { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.4); color: #fde68a; }

.bounty-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 0.72rem;
  padding: 0 0.3rem;
}
.bounty-tab__count--warn { background: rgba(248,113,113,0.25); color: #fca5a5; }

/* Pane visibility */
.bounty-pane--hidden { display: none; }
.bounty-pane { padding: 0.25rem 0; }
.bounty-pane__intro { font-size: 0.88rem; color: var(--color-muted); margin-bottom: 0.75rem; }

/* Bounty list & rows */
.bounty-list { display: flex; flex-direction: column; gap: 0.6rem; }
.bounty-list--dim { opacity: 0.65; }
.bounty-subsection { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0.75rem 0 0.4rem; }

.bounty-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.bounty-row--on-me { border-color: rgba(248,113,113,0.3); }

.bounty-row__reward {
  display: flex; flex-direction: column; align-items: center;
  min-width: 5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.2);
  flex-shrink: 0;
}
.bounty-row__naq { font-size: 1.1rem; font-weight: 700; color: #fde68a; line-height: 1.1; }
.bounty-row__naq--dim { color: var(--color-muted); }
.bounty-row__naq-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }

.bounty-row__info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.bounty-row__target { font-weight: 700; font-size: 0.92rem; }
.bounty-row__race   { font-size: 0.78rem; color: var(--color-muted); }
.bounty-row__reason { font-size: 0.8rem; color: var(--color-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bounty-row__by     { font-size: 0.78rem; color: var(--color-muted); }
.bounty-row__age    { font-size: 0.75rem; color: var(--color-muted); }

.bounty-row__meta { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-end; flex-shrink: 0; }
.bounty-row__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.bounty-status--active    { color: #4ade80; font-size: 0.78rem; font-weight: 600; }
.bounty-status--claimed   { color: #fbbf24; font-size: 0.78rem; font-weight: 600; }
.bounty-status--cancelled { color: var(--color-muted); font-size: 0.78rem; }

/* Place bounty form */
.bounty-form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.bounty-form__footer { display: flex; flex-direction: column; gap: 0.75rem; }
.bounty-form__note {
  font-size: 0.82rem; color: var(--color-muted);
  padding: 0.65rem 0.85rem;
  border-radius: 0.4rem;
  background: rgba(251,191,36,0.05);
  border: 1px solid rgba(251,191,36,0.15);
}
.bounty-form__feedback { min-height: 1.2em; font-size: 0.88rem; }
.bounty-form__feedback--ok  { color: #4ade80; }
.bounty-form__feedback--err { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAQUADAH BANK WIDGET
   ═══════════════════════════════════════════════════════════════════════════ */
.bank-widget {
  background: rgba(167,139,250,0.06);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}
.bank-widget--locked {
  opacity: 0.6;
  border-style: dashed;
  text-align: center;
  padding: 0.9rem;
  font-size: 0.88rem;
  color: var(--color-muted);
}
.bank-widget__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.bank-widget__icon   { font-size: 1.2rem; }
.bank-widget__title  { font-weight: 700; font-size: 0.95rem; flex: 1; }
.bank-widget__level  { font-size: 0.75rem; color: #a78bfa; font-weight: 600; }

.bank-widget__status { display: flex; gap: 1.25rem; margin-bottom: 0.65rem; }
.bank-stat           { display: flex; flex-direction: column; gap: 0.1rem; }
.bank-stat__label    { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.bank-stat__val      { font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bank-stat--safe .bank-stat__val { color: #a78bfa; }

.bank-vault-bar      { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 0.85rem; }
.bank-vault-bar__fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 3px; transition: width 0.4s ease; }

.bank-widget__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bank-action-group    { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 180px; }
.bank-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.35rem;
  color: var(--c-text);
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
  min-width: 0;
}
.bank-input:focus { outline: none; border-color: rgba(167,139,250,0.45); }

.bank-widget__feedback { min-height: 1.2em; font-size: 0.85rem; margin-top: 0.55rem; }
.bank-widget__feedback--ok  { color: #4ade80; }
.bank-widget__feedback--err { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARENA PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.arena-panel { display: flex; flex-direction: column; gap: 1.25rem; }

/* Record bar */
.arena-record { display: flex; gap: 1rem; flex-wrap: wrap; }
.arena-record__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600;
  padding: 0.3rem 0.7rem; border-radius: 9999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.arena-record__item--win  { border-color: rgba(74,222,128,0.35); color: #4ade80; }
.arena-record__item--loss { border-color: rgba(248,113,113,0.35); color: #f87171; }
.arena-record__item--active { border-color: rgba(251,191,36,0.4); color: #fde68a; }

/* Section headings */
.arena-section__title { font-size: 0.88rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-muted); margin: 0 0 0.6rem; }

/* Active fight cards */
.arena-fight-list { display: flex; flex-direction: column; gap: 0.6rem; }
.arena-fight-card--active {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(251,191,36,0.25);
  border-radius: 0.55rem; padding: 0.7rem 0.9rem; text-decoration: none; color: var(--c-text);
  transition: border-color 0.15s;
}
.arena-fight-card--active:hover { border-color: rgba(251,191,36,0.5); }
.arena-fight-card__header { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.arena-fight-card__vs    { font-weight: 600; }
.arena-fight-card__tick  { font-size: 0.8rem; color: var(--color-muted); }
.arena-fight-card__pot   { font-size: 0.82rem; color: #fde68a; margin-left: auto; }
.arena-fight-card__meta  { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-muted); }
.arena-fight-card__view  { color: #a78bfa; }

/* HP bar */
.arena-hp-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.arena-hp-bar__fill { height: 100%; background: linear-gradient(90deg, #f87171, #fbbf24); border-radius: 3px; transition: width 0.4s ease; }

/* Tabs */
.arena-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.arena-tab {
  padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 0.4rem;
  color: var(--color-muted); cursor: pointer; font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.35rem;
}
.arena-tab:hover { background: rgba(255,255,255,0.07); color: var(--c-text); }
.arena-tab--active { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.4); color: #f9a8d4; }
.arena-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  background: rgba(255,255,255,0.1); border-radius: 9999px; font-size: 0.72rem; font-weight: 700;
}
.arena-tab__count--warn { background: rgba(248,113,113,0.25); color: #fca5a5; }

/* Panes */
.arena-pane--hidden { display: none; }
.arena-pane { padding: 0.25rem 0; }
.arena-pane__empty { font-size: 0.9rem; color: var(--color-muted); padding: 1rem 0; }

/* Challenge rows */
.arena-challenge-list { display: flex; flex-direction: column; gap: 0.65rem; }
.arena-challenge-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem; padding: 0.65rem 0.9rem;
}
.arena-challenge-row__info { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; font-size: 0.85rem; }
.arena-challenge-row__name    { font-weight: 700; }
.arena-challenge-row__level   { font-size: 0.78rem; color: var(--color-muted); }
.arena-challenge-row__stake   { color: #fde68a; font-weight: 600; }
.arena-challenge-row__pot     { font-size: 0.78rem; color: var(--color-muted); }
.arena-challenge-row__expires { font-size: 0.75rem; color: var(--color-muted); font-style: italic; }
.arena-challenge-row__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* History rows */
.arena-history-list { display: flex; flex-direction: column; gap: 0.5rem; }
.arena-history-row {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  text-decoration: none; color: var(--c-text);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.45rem; padding: 0.5rem 0.85rem; font-size: 0.85rem;
  transition: border-color 0.15s;
}
.arena-history-row:hover { border-color: rgba(255,255,255,0.2); }
.arena-history-row--win  { border-color: rgba(74,222,128,0.25); }
.arena-history-row--loss { border-color: rgba(248,113,113,0.2); }
.arena-history-row--draw { border-color: rgba(148,163,184,0.2); }
.arena-history-row__result { font-weight: 700; min-width: 4.5rem; }
.arena-history-row__opp  { flex: 1; }
.arena-history-row__pot  { font-size: 0.78rem; color: var(--color-muted); }
.arena-history-row__gain { font-weight: 700; font-variant-numeric: tabular-nums; }
.arena-history-row__date { font-size: 0.75rem; color: var(--color-muted); margin-left: auto; }
.gain--pos { color: #4ade80; }
.gain--neg { color: #f87171; }

/* Challenge form */
.arena-form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }

/* Feedback */
.arena-feedback { min-height: 1.2em; font-size: 0.85rem; margin-top: 0.4rem; }
.arena-feedback--ok  { color: #4ade80; }
.arena-feedback--err { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOURNAMENT PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.tourn-panel { display: flex; flex-direction: column; gap: 1.5rem; }

.tourn-section { }
.tourn-section__title { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); margin: 0 0 0.75rem; }

.tourn-fight-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tourn-fight-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 0.75rem 1rem; min-width: 220px; flex: 1;
  transition: border-color 0.15s, background 0.15s;
}
.tourn-fight-card:hover { border-color: var(--color-accent); background: var(--color-surface-3); }
.tourn-fight-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.tourn-fight-card__vs    { font-size: 0.9rem; }
.tourn-fight-card__tick  { font-size: 0.75rem; color: var(--color-text-muted); }
.tourn-fight-card__meta  { display: flex; justify-content: space-between; font-size: 0.8rem; margin-top: 0.4rem; color: var(--color-text-muted); }
.tourn-fight-card__view  { color: var(--color-accent); }

.tourn-hp-bar { height: 6px; background: var(--color-surface-3); border-radius: 3px; overflow: hidden; }
.tourn-hp-bar__fill { height: 100%; background: #facc15; border-radius: 3px; transition: width 0.4s ease; }

.tourn-empty { color: var(--color-text-muted); font-style: italic; }

.tourn-list { display: flex; flex-direction: column; gap: 1.25rem; }

/* Status badge */
.tourn-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.15em 0.55em; border-radius: 12px; }
.tourn-badge--upcoming      { background: #374151; color: #9ca3af; }
.tourn-badge--registration  { background: #1e3a5f; color: #60a5fa; }
.tourn-badge--active        { background: #3f3000; color: #facc15; }
.tourn-badge--completed     { background: #052e16; color: #4ade80; }
.tourn-badge--cancelled     { background: #2d1515; color: #f87171; }

/* Card */
.tourn-card { background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tourn-card--active   { border-color: rgba(250,204,21,0.35); }
.tourn-card--completed { border-color: rgba(74,222,128,0.25); }
.tourn-card__header { display: flex; justify-content: space-between; align-items: center; }
.tourn-card__title  { font-size: 1.05rem; font-weight: 600; }
.tourn-card__desc   { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.tourn-card__meta   { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.82rem; color: var(--color-text-muted); }
.tourn-meta-item--reg { color: #4ade80; }
.tourn-card__actions { display: flex; flex-direction: column; gap: 0.4rem; }

/* Tabs */
.tourn-card__tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--color-border); }
.tourn-tab { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 0.4rem 0.8rem; font-size: 0.85rem; color: var(--color-text-muted);
  transition: color 0.15s, border-color 0.15s; }
.tourn-tab:hover { color: var(--color-text); }
.tourn-tab--active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.tourn-pane { padding-top: 0.5rem; }
.tourn-pane--hidden { display: none; }
.tourn-pane__intro  { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 0.6rem; }

/* Leaderboard */
.tourn-lb { display: flex; flex-direction: column; gap: 0.25rem; }
.tourn-lb-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem;
  border-radius: 6px; font-size: 0.85rem; transition: background 0.1s; }
.tourn-lb-row:hover { background: var(--color-surface-3); }
.tourn-lb-row--me   { background: rgba(250,204,21,0.08); font-weight: 600; }
.tourn-lb-row__rank { min-width: 2.2rem; font-size: 1rem; text-align: center; }
.tourn-lb-row__name { flex: 1; }
.tourn-lb-row__race { min-width: 5rem; color: var(--color-text-muted); font-size: 0.78rem; }
.tourn-lb-row__score { min-width: 4rem; text-align: right; font-weight: 600; color: var(--color-accent); }
.tourn-lb-row__record { min-width: 7rem; text-align: right; font-size: 0.78rem; display: flex; gap: 0.4rem; justify-content: flex-end; }
.record--win  { color: #4ade80; }
.record--draw { color: #facc15; }
.record--loss { color: #f87171; }

/* Opponents list */
.tourn-opponents { display: flex; flex-direction: column; gap: 0.3rem; }
.tourn-opp-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem;
  border-radius: 6px; font-size: 0.85rem; }
.tourn-opp-row:hover { background: var(--color-surface-3); }
.tourn-opp-row__name  { flex: 1; font-weight: 500; }
.tourn-opp-row__level { min-width: 2.5rem; color: var(--color-text-muted); font-size: 0.78rem; }
.tourn-opp-row__race  { min-width: 5rem; color: var(--color-text-muted); font-size: 0.78rem; }
.tourn-opp-row__score { min-width: 3rem; text-align: right; font-size: 0.8rem; color: var(--color-accent); }

.tourn-feedback { min-height: 1.2em; font-size: 0.85rem; margin-top: 0.4rem; }
.tourn-feedback--ok  { color: #4ade80; }
.tourn-feedback--err { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════
   DAILY LOGIN REWARD PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.reward-panel { display: flex; flex-direction: column; gap: 1.5rem; }

/* Panel header re-use */
.panel-header { }
.panel-header__title { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.25rem; }
.panel-header__sub   { font-size: 0.85rem; color: var(--text-secondary, #7888a0); margin: 0; }

/* Summary bar */
.reward-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: rgba(255, 120, 0, 0.06);
    border: 1px solid rgba(255, 120, 0, 0.2);
    border-radius: var(--radius-lg, 8px);
}
.reward-summary__stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.reward-summary__val  { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.reward-summary__lbl  { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary, #7888a0); }
.reward-summary__flame { font-size: 2.5rem; flex: 1; text-align: center; }

/* Claim card */
.reward-claim__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border, #2a3040);
    background: var(--bg-elevated, #1c2130);
    transition: border-color 0.2s;
}
.reward-claim__card--ready {
    border-color: rgba(255, 165, 0, 0.45);
    background: rgba(255, 140, 0, 0.07);
    animation: reward-glow 2.5s ease-in-out infinite;
}
@keyframes reward-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
    50%       { box-shadow: 0 0 14px 2px rgba(255, 140, 0, 0.15); }
}
.reward-claim__card--claimed { border-color: rgba(74, 222, 128, 0.3); }

.reward-claim__icon    { font-size: 3rem; line-height: 1; flex-shrink: 0; }
.reward-claim__details { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.reward-claim__label   { font-size: 1.1rem; font-weight: 700; margin: 0; color: #fbbf24; }
.reward-claim__loot    { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; }
.reward-claim__loot li { display: flex; align-items: center; gap: 0.35rem; }
.reward-claim__next    { font-size: 0.88rem; color: var(--text-secondary, #7888a0); margin: 0; }

.reward-claim__btn { flex-shrink: 0; }

/* Toast shown after claiming */
.reward-claim__result { margin-top: 0.75rem; }
.reward-claimed-toast {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-lg, 8px);
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    font-size: 0.9rem;
    animation: toast-in 0.35s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reward-claimed-toast__icon { font-size: 1.5rem; }
.reward-claimed-toast__body { line-height: 1.5; }
.reward-claimed-toast__body strong { color: #4ade80; }

/* 7-day track */
.reward-track-section { }
.reward-track-section__title {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-secondary, #7888a0);
    margin: 0 0 0.85rem;
}
.reward-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}
@media (max-width: 640px) { .reward-track { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 400px) { .reward-track { grid-template-columns: repeat(2, 1fr); } }

.reward-day {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.4rem;
    background: var(--bg-elevated, #1c2130);
    border: 1px solid var(--border, #2a3040);
    border-radius: var(--radius-lg, 8px);
    font-size: 0.75rem; text-align: center;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.reward-day--next {
    border-color: rgba(255, 165, 0, 0.55);
    background: rgba(255, 140, 0, 0.08);
}
.reward-day--milestone {
    border-color: rgba(255, 50, 50, 0.45);
    background: rgba(255, 50, 50, 0.07);
}
.reward-day__icon  { font-size: 1.4rem; }
.reward-day__name  { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.reward-day__loot  { list-style: none; padding: 0; margin: 0; font-size: 0.7rem; color: var(--text-secondary, #7888a0); }
.reward-day__badge {
    position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%);
    background: #f59e0b; color: #000;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.reward-day__badge--wait {
    background: var(--bg-elevated, #1c2130);
    color: var(--text-secondary, #7888a0);
    border: 1px solid var(--border, #2a3040);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PANEL (full page)
   ═══════════════════════════════════════════════════════════════════════════ */

.notif-panel {
  max-width: 720px;
  margin: 0 auto;
}

.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notif-panel__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notif-panel__count {
  font-size: 0.75rem;
  font-weight: 600;
  background: #ef4444;
  color: #fff;
  border-radius: 12px;
  padding: 0.1rem 0.5rem;
  line-height: 1.4;
}

.notif-panel__group {
  margin-bottom: 1.5rem;
}

.notif-panel__day {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.notif-panel__items {
  display: flex;
  flex-direction: column;
}

.notif-panel__item {
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.notif-panel__item:first-child { border-radius: 8px 8px 0 0; }
.notif-panel__item:last-child  { border-radius: 0 0 8px 8px; border-bottom: none; }
.notif-panel__item:only-child  { border-radius: 8px; }

.notif-panel__icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  padding-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHIEVEMENTS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.achievements-panel {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Summary header ────────────────────────────────────────────────────────── */
.achievements-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.achievements-summary__points,
.achievements-summary__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.achievements-summary__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.achievements-summary__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.achievements-summary__bar-wrap {
  flex: 1;
  min-width: 160px;
}

.achievements-summary__bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.achievements-summary__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover, var(--color-accent)));
  border-radius: 4px;
  transition: width 0.4s ease;
}

.achievements-summary__bar-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
  display: block;
}

/* ── Category tabs ─────────────────────────────────────────────────────────── */
.ach-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.ach-tab {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ach-tab:hover {
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text);
  border-color: var(--color-accent);
}

.ach-tab--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

/* ── Achievement grid ──────────────────────────────────────────────────────── */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

/* ── Achievement card ──────────────────────────────────────────────────────── */
.ach-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.ach-card--earned {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.ach-card--locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.ach-card__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2.2rem;
  text-align: center;
}

.ach-card__body {
  flex: 1;
  min-width: 0;
}

.ach-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.ach-card__desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.ach-card__date {
  font-size: 0.72rem;
  color: var(--color-accent);
  margin-top: 0.3rem;
}

.ach-card__points {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .ach-grid { grid-template-columns: 1fr; }
  .achievements-summary { gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMANDER PROFILE PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.profile-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.profile-header__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-header__info {
  flex: 1;
  min-width: 0;
}

.profile-header__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 .4rem;
}

.profile-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .35rem;
}

.profile-header__sub {
  font-size: .8rem;
  color: var(--color-text-muted);
}

.profile-race-badge {
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-dim, rgba(0,200,150,.15));
  color: var(--color-accent);
  font-weight: 600;
}

.profile-alliance-badge {
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-sm);
  background: rgba(120,120,200,.15);
  color: #aab;
}

.profile-alliance-rank {
  opacity: .7;
  text-transform: capitalize;
}

.profile-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Level / XP bar ──────────────────────────────────────────────────────── */
.profile-level-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.profile-level-card__label {
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: .4rem;
  font-size: .95rem;
}

.profile-level-card__bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: .35rem;
}

.profile-level-card__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width .4s ease;
}

.profile-level-card__xp {
  font-size: .8rem;
  color: var(--color-text-secondary);
}

.profile-level-card__pct {
  color: var(--color-text-muted);
  margin-left: .25rem;
}

/* ── Stats grid ──────────────────────────────────────────────────────────── */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.profile-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-align: center;
}

.profile-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: .3rem;
}

.profile-stat__label {
  font-size: .75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Section (achievements) ─────────────────────────────────────────────── */
.profile-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.profile-section__head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.profile-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.profile-section__sub {
  font-size: .8rem;
  color: var(--color-text-muted);
}

.profile-section__link {
  margin-left: auto;
  font-size: .8rem;
  color: var(--color-accent);
  text-decoration: none;
}

.profile-section__link:hover { text-decoration: underline; }

.profile-empty {
  font-size: .85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Achievement badges ─────────────────────────────────────────────────── */
.profile-ach-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.profile-ach-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  background: var(--color-surface-alt, rgba(255,255,255,.04));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .4rem .55rem;
  cursor: default;
}

.profile-ach-badge__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.profile-ach-badge__pts {
  font-size: .65rem;
  color: var(--color-accent);
  font-weight: 600;
}

.profile-ach-more {
  font-size: .8rem;
  color: var(--color-text-muted);
  padding: .4rem .55rem;
}

/* ── Rankings name link ──────────────────────────────────────────────────── */
.rankings-name__link {
  color: var(--color-text-primary);
  text-decoration: none;
}

.rankings-name__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE LOG PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Header + summary ────────────────────────────────────────────────────── */
.blog-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.blog-header__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.blog-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.blog-summary__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .4rem .8rem;
  min-width: 54px;
}

.blog-summary__val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.blog-summary__lbl {
  font-size: .65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.blog-summary__stat--win  .blog-summary__val { color: var(--color-success, #4caf50); }
.blog-summary__stat--loss .blog-summary__val { color: var(--color-danger,  #f44336); }
.blog-summary__stat--rate .blog-summary__val { color: var(--color-accent); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.blog-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.blog-tab {
  padding: .4rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.blog-tab:hover,
.blog-tab--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}

/* ── Row list ────────────────────────────────────────────────────────────── */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.blog-row {
  display: grid;
  grid-template-columns: 90px 120px 1fr 100px 90px 70px 130px;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .82rem;
  transition: border-color .15s;
}

.blog-row--win  { border-left: 3px solid var(--color-success, #4caf50); }
.blog-row--loss { border-left: 3px solid var(--color-danger,  #f44336); }
.blog-row--draw,
.blog-row--retreat { border-left: 3px solid var(--color-border); }

/* Outcome badge */
.blog-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .45rem;
  border-radius: var(--radius-sm);
}

.blog-outcome-badge--win     { background: rgba(76,175,80,.15); color: #4caf50; }
.blog-outcome-badge--loss    { background: rgba(244,67,54,.15);  color: #f44336; }
.blog-outcome-badge--draw    { background: rgba(150,150,150,.12); color: var(--color-text-muted); }
.blog-outcome-badge--retreat { background: rgba(255,193,7,.12);  color: #ffc107; }

/* Type column */
.blog-row__type {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Opponent */
.blog-opp-link {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 600;
}

.blog-opp-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.blog-opp-race {
  display: block;
  font-size: .72rem;
  color: var(--color-text-muted);
}

.blog-opp-unknown {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Naquadah delta */
.blog-naq--pos  { color: var(--color-success, #4caf50); font-weight: 600; }
.blog-naq--neg  { color: var(--color-danger,  #f44336); font-weight: 600; }
.blog-naq--zero { color: var(--color-text-muted); }

/* Soldiers / XP */
.blog-row__soldiers,
.blog-row__xp {
  color: var(--color-text-secondary);
}

.blog-xp--zero { color: var(--color-text-muted); }

/* Timestamp */
.blog-row__when {
  color: var(--color-text-muted);
  font-size: .75rem;
  white-space: nowrap;
}

.blog-empty {
  font-size: .85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 1rem 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .blog-row {
    grid-template-columns: 90px 110px 1fr 100px;
  }
  .blog-row__soldiers,
  .blog-row__xp,
  .blog-row__when { display: none; }
}

@media (max-width: 540px) {
  .blog-row {
    grid-template-columns: 80px 1fr 90px;
  }
  .blog-row__type,
  .blog-row__naq { display: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .profile-header { flex-wrap: wrap; }
  .profile-stats  { grid-template-columns: repeat(2, 1fr); }
  .profile-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — PHASE 12
   Breakpoints: 768px (tablet) · 640px (mobile-wide) · 480px (mobile-narrow)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-main    { padding: 1.5rem 1rem; }
    .site-header  { padding: 0 1rem; }

    /* Hide the full "Name (Race)" label in header — it's visible in commander bar */
    .site-nav__commander { display: none; }

    /* Commander bar: allow wrapping so stats / HUD fall below portrait+info */
    .commander-bar { flex-wrap: wrap; }
    .commander-bar__stats { width: 100%; border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.25rem; }
    .commander-bar__portrait { width: 48px; height: 48px; }
    .stat-list { grid-template-columns: repeat(3, auto); gap: 0.2rem 1rem; }
    .resource-hud { min-width: unset; flex: 1 1 100%; border-top: 1px solid var(--border); margin-top: 0.25rem; }

    /* Game content panel */
    .game-content { padding: 1.5rem 1.25rem; }

    /* Auth box */
    .auth-box { margin: 1rem auto; }

    /* Alliance header wraps tighter */
    .alliance-header { gap: 0.75rem; }

    /* Persona stats grid - 3 cols on tablet */
    .stats-grid { grid-template-columns: repeat(3, 1fr); }

    /* Building / soldier / module grids: two-column on tablet */
    .building-grid  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .soldier-grid   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .module-grid    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .missions-grid  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .store-grid     { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

    /* Rankings header: wrap tabs below title */
    .rankings-header { flex-wrap: wrap; }
    .rankings-tabs   { flex-wrap: wrap; }
}

/* ── Mobile wide (≤ 640px) ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .site-main   { padding: 1rem 0.75rem; }
    .site-header { height: 50px; }

    /* Tighten logo */
    .site-header__logo { font-size: 1.1rem; }

    /* Nav links smaller */
    .site-nav { gap: 0.75rem; }
    .site-nav__link { font-size: 0.8rem; }

    /* Commander bar tighter */
    .commander-bar { padding: 0.85rem 0.9rem; gap: 0.75rem; }
    .commander-bar__name { font-size: 1.05rem; }

    /* Game nav: smaller tiles */
    .game-nav { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; }
    .game-nav__panel { padding: 0.75rem 0.5rem; gap: 0.25rem; }
    .game-nav__icon  { font-size: 1.25rem; }
    .game-nav__label { font-size: 0.7rem; letter-spacing: 0.02em; }

    /* Game content */
    .game-content { padding: 1.1rem 0.9rem; }
    .panel-title  { font-size: 1.15rem; }

    /* Force single-column for the wider grids */
    .building-grid  { grid-template-columns: 1fr; }
    .soldier-grid   { grid-template-columns: 1fr; }
    .module-grid    { grid-template-columns: 1fr; }
    .missions-grid  { grid-template-columns: 1fr; }

    /* Store: 1 column */
    .store-grid { grid-template-columns: 1fr; }

    /* Chat: reduce font */
    .chat-msg { font-size: 0.82rem; }

    /* Battle view header wraps */
    .battle-view__header { gap: 0.5rem; }

    /* Alliance war form wraps */
    .alliance-war-form { flex-direction: column; }
    .alliance-war-form__select { min-width: 0; }

    /* Member rows stack */
    .member-row { gap: 0.35rem; }
    .member-row__joined { margin-left: 0; }

    /* Auth box padding */
    .auth-box { padding: 1.5rem 1rem; }
}

/* ── Mobile narrow (≤ 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .site-main   { padding: 0.75rem 0.6rem; }
    .site-header { padding: 0 0.75rem; }

    /* Very small screens: game nav goes to 4-column fixed grid */
    .game-nav { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
    .game-nav__panel { padding: 0.6rem 0.25rem; }
    .game-nav__icon  { font-size: 1.1rem; }
    .game-nav__label { font-size: 0.62rem; }

    /* Commander bar: portrait + info side by side, stats below */
    .commander-bar { padding: 0.75rem; gap: 0.6rem; }
    .commander-bar__portrait { width: 40px; height: 40px; }
    .commander-bar__name { font-size: 0.95rem; }
    .stat-list { grid-template-columns: repeat(3, auto); gap: 0.15rem 0.75rem; }
    .stat-list dt, .stat-list dd { font-size: 0.72rem; }

    /* Game content tight */
    .game-content { padding: 0.9rem 0.75rem; border-radius: 0; border-left: none; border-right: none; }
    .panel-title  { font-size: 1rem; }
    .panel-subtitle { font-size: 0.8rem; margin-bottom: 1rem; }

    /* Galaxy map cards - tighter */
    .galaxy-card__header { padding: 0.65rem 0.85rem; font-size: 0.9rem; }
    .galaxy-card__body   { padding: 0.75rem; }

    /* Auth box - edge-to-edge on very small screens */
    .auth-box { max-width: 100%; margin: 0.5rem auto; border-radius: 0; padding: 1.25rem 0.9rem; }

    /* Equipment grid: 2 columns on narrow */
    .equipment-grid { grid-template-columns: repeat(2, 1fr); }

    /* Rankings tabs wrap */
    .rankings-tabs { gap: 0.2rem; }
    .rankings-tab  { padding: 0.3rem 0.6rem; font-size: 0.75rem; }

    /* Battle log smaller */
    .battle-log   { max-height: 280px; }
    .battle-event { font-size: 0.75rem; }

    /* Flash messages */
    .flash-messages { margin-bottom: 0.75rem; }
    .flash { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESEARCH PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.research-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Lab status bar */
.research-lab-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}
.research-lab-bar__icon { font-size: 1.2rem; }
.research-lab-bar__text--warn { color: var(--color-warning, #ffc107); }

/* Active research banner */
.research-active {
  background: linear-gradient(135deg, rgba(0,188,212,.08), rgba(0,150,136,.06));
  border: 1px solid rgba(0,188,212,.3);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.research-active__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.research-active__icon { font-size: 1.5rem; }
.research-active__info { flex: 1; min-width: 0; }
.research-active__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.research-active__sublabel {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}
.research-active__cancel { margin-left: auto; flex-shrink: 0; }
.research-active__progress-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.research-active__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), #00bcd4);
  border-radius: 99px;
  transition: width 0.8s linear;
}
.research-active__footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.research-active__time { font-weight: 600; color: var(--color-text-secondary); }

/* Bonuses summary */
.research-bonuses {
  background: rgba(76,175,80,.06);
  border: 1px solid rgba(76,175,80,.2);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.research-bonuses__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.research-bonuses__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.research-bonuses__chip {
  background: rgba(76,175,80,.12);
  color: #4caf50;
  border: 1px solid rgba(76,175,80,.25);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Category tabs */
.research-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.research-tab {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.research-tab:hover {
  background: rgba(255,255,255,.08);
  color: var(--color-text-primary);
}
.research-tab--active {
  background: rgba(var(--color-accent-rgb, 0,188,212), .15);
  border-color: var(--color-accent, #00bcd4);
  color: var(--color-accent, #00bcd4);
  font-weight: 600;
}

/* Research grid */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Research card */
.research-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.research-card:hover {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.research-card--maxed  { border-color: rgba(76,175,80,.35); }
.research-card--active { border-color: rgba(0,188,212,.4); box-shadow: 0 0 0 1px rgba(0,188,212,.2); }
.research-card--locked { opacity: 0.58; }

.research-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.research-card__icon { font-size: 1.6rem; flex-shrink: 0; }
.research-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.research-card__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.research-card__level-badge {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Level pips */
.research-card__pips {
  display: flex;
  gap: 5px;
}
.research-pip {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
}
.research-pip--filled {
  background: var(--color-accent, #00bcd4);
  border-color: var(--color-accent, #00bcd4);
}

.research-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.research-badge--max { background: rgba(76,175,80,.18); color: #4caf50; border: 1px solid rgba(76,175,80,.3); }

.research-card__desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

.research-card__bonus-line {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.research-card__next-bonus { color: var(--color-text-secondary); }

.research-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.research-card__state {
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
}
.research-card__state--maxed  { color: #4caf50; }
.research-card__state--busy   { color: #00bcd4; }
.research-card__state--locked { color: var(--color-text-muted); }

.research-card__cost-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.research-card__cost-item {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.research-card__btn { width: 100%; }

/* Responsive */
@media (max-width: 680px) {
  .research-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .research-grid { grid-template-columns: 1fr; }
  .research-tabs { gap: 0.25rem; }
  .research-tab  { padding: 0.35rem 0.65rem; font-size: 0.78rem; }
}

/* ============================================================
   NAQUADAH MARKETPLACE
   ============================================================ */
.mkt-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
}

/* Stats bar */
.mkt-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mkt-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 160px;
}
.mkt-stat__label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mkt-stat__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

/* Cards */
.mkt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.mkt-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.mkt-card__desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* Post form */
.mkt-post-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.mkt-post-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.mkt-post-form__preview {
  font-size: 0.82rem;
  color: var(--accent);
  font-style: italic;
  align-self: center;
}
.mkt-input {
  background: var(--bg-input, var(--bg-panel));
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  width: 160px;
}
.mkt-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Tables */
.mkt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.mkt-table th {
  text-align: left;
  padding: 0.45rem 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
.mkt-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  color: var(--text-primary);
  vertical-align: middle;
}
.mkt-table--compact td,
.mkt-table--compact th {
  padding: 0.35rem 0.5rem;
}
.mkt-seller-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.mkt-seller-link:hover { text-decoration: underline; }
.mkt-race-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
}
.mkt-expires {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Buttons */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
}
.mkt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mkt-btn:not(:disabled):hover { opacity: 0.88; transform: translateY(-1px); }
.mkt-btn--primary {
  background: var(--accent);
  color: #fff;
}
.mkt-btn--buy {
  background: color-mix(in srgb, var(--accent) 80%, #0a0);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
}
.mkt-btn--danger {
  background: #c0392b;
  color: #fff;
}
.mkt-btn--sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }

/* Messages */
.mkt-msg {
  min-height: 1.2rem;
  font-size: 0.87rem;
  margin-top: 0.5rem;
  transition: color 0.2s;
}
.mkt-msg--ok  { color: #2ecc71; }
.mkt-msg--err { color: #e74c3c; }

.mkt-empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

/* Responsive */
@media (max-width: 680px) {
  .mkt-stats-bar { gap: 0.5rem; }
  .mkt-stat { min-width: 130px; }
  .mkt-post-form__row { flex-direction: column; }
  .mkt-input { width: 100%; }
  .mkt-table th:nth-child(4),
  .mkt-table td:nth-child(4) { display: none; } /* hide Rate column */
}
@media (max-width: 480px) {
  .mkt-card { padding: 0.9rem 1rem; }
  .mkt-table { font-size: 0.8rem; }
}

/* ============================================================
   HOME PANEL & ANNOUNCEMENTS
   ============================================================ */
.home-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 860px;
}

/* Quick stats row */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.home-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 170px;
}
.home-stat--research { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.home-stat__icon { font-size: 1.3rem; flex-shrink: 0; }
.home-stat__label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-stat__value { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }

/* Quick links */
.home-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.home-ql {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.home-ql:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  color: var(--accent);
}

/* Announcements section */
.home-ann-section { display: flex; flex-direction: column; gap: 1rem; }
.home-ann-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Announcement cards */
.ann-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  transition: border-color 0.2s;
}
.ann-card--pinned {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}
.ann-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.ann-pin { font-size: 0.9rem; }
.ann-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.ann-card__date {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.ann-card__body {
  font-size: 0.9rem;
  color: var(--text-secondary, var(--text-primary));
  line-height: 1.55;
}
.ann-card__footer {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Type badge */
.ann-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.ann-badge--news        { background: color-mix(in srgb,#4a90d9 18%,transparent); color:#4a90d9; }
.ann-badge--event       { background: color-mix(in srgb,#2ecc71 18%,transparent); color:#2ecc71; }
.ann-badge--maintenance { background: color-mix(in srgb,#e67e22 18%,transparent); color:#e67e22; }
.ann-badge--update      { background: color-mix(in srgb,#9b59b6 18%,transparent); color:#a06ed0; }

.ann-empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 1rem 0;
}

/* Admin alert messages */
.adm-alert {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: .875rem;
  margin-bottom: 16px;
}
.adm-alert--error   { background: #2a0a0a; border: 1px solid #c0392b; color: #f08080; }
.adm-alert--success { background: #0a2a14; border: 1px solid #27ae60; color: #70d090; }

/* Responsive */
@media (max-width: 600px) {
  .home-stats { gap: 0.5rem; }
  .home-stat { min-width: 130px; padding: 0.55rem 0.8rem; }
  .ann-card { padding: 0.85rem 1rem; }
  .ann-card__header { gap: 0.35rem; }
}

/* ============================================================
   MAIL PANEL
   ============================================================ */
.mail-panel { max-width: 820px; }

/* Header */
.mail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mail-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mail-unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
  min-width: 1.2rem;
  text-align: center;
}
.mail-compose-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mail-compose-btn:hover { opacity: 0.85; }

/* Nav badge (unread count on Mail nav item) */
.game-nav__badge--mail {
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.05rem 0.35rem;
  line-height: 1.4;
}

/* Tabs */
.mail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.25rem;
}
.mail-tab {
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mail-tab:hover { color: var(--text-primary); }
.mail-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.mail-tab-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  border-radius: 8px;
  padding: 0.05rem 0.35rem;
}

/* Message list */
.mail-list { display: flex; flex-direction: column; gap: 2px; }
.mail-empty { color: var(--text-muted); font-size: 0.88rem; padding: 1rem 0; }

.mail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 0.7rem 1rem;
  transition: border-color 0.15s;
}
.mail-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.mail-row--unread { border-left: 3px solid var(--accent); }
.mail-row__meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
}
.mail-row__from { font-weight: 600; color: var(--text-primary); }
.mail-row__from a { color: inherit; text-decoration: none; }
.mail-row__from a:hover { text-decoration: underline; }
.mail-row__system { color: var(--text-muted); font-style: italic; }
.mail-row__date { color: var(--text-muted); }
.mail-row__subject {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.92rem;
}
.mail-row__subject a { color: var(--text-primary); text-decoration: none; }
.mail-row__subject a:hover { color: var(--accent); text-decoration: underline; }
.mail-row--unread .mail-row__subject a { font-weight: 700; }
.mail-row__actions {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
}

/* Read view */
.mail-read {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.5rem;
}
.mail-read__header { margin-bottom: 1.25rem; }
.mail-read__subject {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}
.mail-read__meta { font-size: 0.82rem; color: var(--text-muted); }
.mail-read__meta a { color: var(--text-muted); text-decoration: underline; }
.mail-read__body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}
.mail-read__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Compose */
.mail-compose { max-width: 600px; }
.mail-compose__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem;
}
.mail-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.mail-field--actions { flex-direction: row; margin-top: 0.25rem; }
.mail-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.mail-input {
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  width: 100%;
  transition: border-color 0.15s;
}
.mail-input:focus { outline: none; border-color: var(--accent); }
.mail-textarea { resize: vertical; font-family: inherit; min-height: 140px; }
.mail-charcount { font-size: 0.74rem; color: var(--text-muted); text-align: right; }

.mail-compose-feedback {
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  font-size: 0.87rem;
  margin-bottom: 1rem;
}
.mail-compose-feedback--ok  { background: #0a2a14; border: 1px solid #27ae60; color: #70d090; }
.mail-compose-feedback--err { background: #2a0a0a; border: 1px solid #c0392b; color: #f08080; }

/* Shared buttons */
.mail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mail-btn:hover { opacity: 0.8; }
.mail-btn--send   { background: var(--accent); color: #fff; }
.mail-btn--reply  { background: color-mix(in srgb, var(--accent) 18%, var(--bg-card)); color: var(--accent); border: 1px solid var(--accent); }
.mail-btn--delete { background: color-mix(in srgb,#c0392b 18%,var(--bg-card)); color: #e07070; border: 1px solid #c0392b; font-size: 0.8rem; padding: 0.35rem 0.65rem; }
.mail-btn--back   { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); }

@media (max-width: 600px) {
  .mail-row { grid-template-columns: 1fr; }
  .mail-row__actions { grid-column: 1; grid-row: auto; justify-content: flex-end; margin-top: 0.25rem; }
  .mail-read { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   SKILLS PANEL
   ═══════════════════════════════════════════════════════════ */
.skills-panel { max-width: 900px; }
.skills-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.skills-title { font-size: 1.4rem; font-weight: 700; color: var(--accent); margin: 0; }
.skills-points-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}
.skills-points-label { color: var(--text-muted); }
.skills-points-available { font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.skills-points-sep { color: var(--text-muted); }
.skills-points-total { color: var(--text-muted); }
.skills-intro { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 1.25rem; }

.skills-feedback {
  padding: 0.65rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.skills-feedback--ok  { background: color-mix(in srgb,var(--clr-success) 15%,var(--bg-card)); color: var(--clr-success); border: 1px solid var(--clr-success); }
.skills-feedback--err { background: color-mix(in srgb,var(--clr-danger)  15%,var(--bg-card)); color: var(--clr-danger);  border: 1px solid var(--clr-danger); }

/* Category grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.skill-category { display: flex; flex-direction: column; gap: 0.6rem; }
.skill-category__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 35%, transparent);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cat-color, var(--accent));
}
.skill-category__icon { font-size: 1rem; }
.skill-category__label {}

/* Skill cards */
.skill-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.7rem 0.75rem;
  position: relative;
  transition: border-color 0.15s;
}
.skill-card--locked { opacity: 0.55; }
.skill-card--tier2 {
  border-style: dashed;
  margin-left: 0.5rem;
}
.skill-card__connector {
  position: absolute;
  top: -0.6rem;
  left: 0.9rem;
  width: 2px;
  height: 0.6rem;
  background: var(--border-color);
}
.skill-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.skill-card__name  { font-weight: 600; font-size: 0.88rem; }
.skill-card__lock  { font-size: 0.8rem; cursor: help; }
.skill-card__desc  { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 0.35rem; }
.skill-card__effect {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
  min-height: 1rem;
}

/* Rank row */
.skill-card__rank-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.skill-rank-pips { display: flex; gap: 3px; flex: 1; }
.skill-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  transition: background 0.15s;
}
.skill-pip--filled { background: var(--accent); border-color: var(--accent); }
.skill-rank-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

.skill-invest-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.skill-invest-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 30%, var(--bg-card)); }
.skill-invest-btn--disabled,
.skill-invest-btn:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--border-color); color: var(--text-muted); background: var(--bg-panel); }

@media (max-width: 640px) {
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* === Covert Operations panel ============================================== */
.covert-panel { max-width: 860px; }

.covert-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
}
.covert-stats__item { display: flex; align-items: center; gap: .4rem; }
.covert-stats__label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; }
.covert-stats__value { font-weight: 700; color: var(--accent); font-size: 1rem; }
.covert-stats__hint  { font-size: .78rem; color: var(--text-muted); flex: 1 1 100%; margin: 0; }

.covert-launch { margin-bottom: 2rem; }
.covert-launch__title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; color: var(--accent); }
.covert-launch__form { display: flex; flex-direction: column; gap: .75rem; }

.covert-odds {
  display: flex;
  gap: .5rem 1rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .85rem;
}
.covert-odds__label { color: var(--text-muted); }
.covert-odds__value { font-weight: 700; color: var(--accent); }

.covert-op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.covert-op-btn {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.covert-op-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}
.covert-op-btn:disabled { opacity: .4; cursor: not-allowed; }
.covert-op-btn__icon  { font-size: 1.3rem; }
.covert-op-btn__label { font-weight: 700; font-size: .9rem; color: var(--text); }
.covert-op-btn__desc  { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }

.covert-result {
  padding: .65rem .9rem;
  border-radius: var(--radius);
  font-size: .9rem;
}
.covert-result--ok   { background: color-mix(in srgb,var(--clr-success) 15%,var(--bg-card)); color: var(--clr-success); border: 1px solid var(--clr-success); }
.covert-result--fail { background: color-mix(in srgb,var(--clr-danger)  15%,var(--bg-card)); color: var(--clr-danger);  border: 1px solid var(--clr-danger); }

.covert-history { margin-top: 2rem; }
.covert-history__title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; color: var(--accent); }

/* Intel DL in modal */
.intel-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: .75rem 0 1.25rem; font-size: .9rem; }
.intel-dl dt { color: var(--text-muted); font-weight: 600; }
.intel-dl dd { margin: 0; color: var(--text); }

@media (max-width: 600px) {
  .covert-op-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Alliance Planet Structures
══════════════════════════════════════════════════════════════════════════════ */
.aps-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.aps-planet-group__header { font-size: 0.9rem; font-weight: 700; color: var(--color-accent, #38bdf8); margin-bottom: 0.4rem; }
.aps-planet-group__header a { color: inherit; text-decoration: none; }
.aps-planet-group__header a:hover { text-decoration: underline; }
.aps-structs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aps-struct-card { background: var(--card-bg, rgba(255,255,255,.05)); border: 1px solid var(--color-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 0.5rem 0.75rem; min-width: 160px; display: flex; flex-direction: column; gap: 0.35rem; }
.aps-struct-card__type { font-size: 0.85rem; font-weight: 600; }
.aps-struct-card__hp { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }
.aps-struct-hp-track { flex: 1; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.aps-struct-hp-fill { height: 100%; background: #22c55e; border-radius: 3px; }
.aps-struct-card__maxed { font-size: 0.72rem; color: #fbbf24; font-style: italic; }
.aps-build-details { border: 1px solid var(--color-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 0.5rem 0.75rem; }
.aps-build-summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--color-accent, #38bdf8); }
.aps-build-form { display: flex; flex-direction: column; gap: 0.5rem; }

/* Planet detail — alliance structure display */
.planet-structures { margin-top: 1.25rem; }
.planet-structures__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.planet-struct-list { display: flex; flex-direction: column; gap: 0.5rem; }
.planet-struct-item { background: var(--card-bg, rgba(255,255,255,.05)); border: 1px solid var(--color-border, rgba(255,255,255,.12)); border-radius: 6px; padding: 0.6rem 0.8rem; }
.planet-struct-item--ours { border-color: var(--color-accent, #38bdf8); }
.planet-struct-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-bottom: 0.3rem; }
.planet-struct-item__type { font-size: 0.88rem; font-weight: 700; }
.planet-struct-item__level { font-size: 0.78rem; color: var(--text-muted); }
.planet-struct-item__owner { font-size: 0.78rem; color: var(--color-accent, #38bdf8); }
.planet-struct-item__badge { font-size: 0.7rem; background: rgba(56,189,248,.18); color: #38bdf8; border-radius: 3px; padding: 0 0.35rem; }
.planet-struct-item__desc { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.35rem; }
.planet-struct-item__hp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.planet-struct-item__hp-track { flex: 1; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.planet-struct-item__hp-fill { height: 100%; background: #22c55e; border-radius: 3px; }
.planet-struct-item__hp-val { color: var(--text-muted); white-space: nowrap; }