/* ============================================================================
   ASKER — Unified Design System  ·  "Tactical Command Deck"
   ----------------------------------------------------------------------------
   Single source of truth for the whole front end. Loaded LAST in header.php so
   it sets the foundation (tokens, type, background, chrome) and the redesigned
   shared header. Page-specific files inherit these tokens.

   Brand DNA (from logo.svg):
     · ASKER wordmark         → brushed chrome / silver
     · wolf emblem            → primary motif (logo.svg, used as a mask)
     · orbital reticle emblem → recurring structural motif (assets/orbit-motif.svg)
     · energy core            → electric blue  #0f8ebd → #2dd4ff
   Typography (intentionally NOT Orbitron):
     · Chakra Petch  — display / headings (angular, technical, characterful)
     · Sora          — body / UI (geometric humanist, modern, legible)
     · JetBrains Mono— numerics / tags / readouts
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ----------------------------------------------------------------------------
   1 · DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* — surfaces: deep-space obsidian, cool blue-shifted — */
    --ao-void:        #05070d;
    --ao-bg:          #070a12;
    --ao-surface-1:   #0b1019;
    --ao-surface-2:   #0f1622;
    --ao-surface-3:   #141d2c;
    --ao-elevated:    #182233;

    /* — hairlines & edges — */
    --ao-line:        rgba(146, 178, 222, 0.12);
    --ao-line-strong: rgba(146, 178, 222, 0.22);
    --ao-line-bright: rgba(45, 212, 255, 0.40);

    /* — brushed chrome (the wordmark) — */
    --ao-chrome-hi:   #eef3fb;
    --ao-chrome:      #b8c5da;
    --ao-chrome-lo:   #6c7c96;
    --ao-chrome-grad: linear-gradient(180deg, #f4f7fc 0%, #c7d3e6 38%, #8493ad 62%, #5a6883 100%);

    /* — energy core: electric blue (signal / interactive / online) — */
    --ao-core:        #0f8ebd;
    --ao-core-bright: #2dd4ff;
    --ao-core-deep:   #0a5f86;
    --ao-core-glow:   rgba(45, 212, 255, 0.55);
    --ao-core-grad:   linear-gradient(135deg, #2dd4ff 0%, #0f8ebd 55%, #0a6e96 100%);

    /* — semantic accents (sparingly) — */
    --ao-warn:        #ffb347;
    --ao-danger:      #ff5a6e;
    --ao-success:     #43e0a8;
    --ao-gold:        #f4cf6a;

    /* — text — */
    --ao-text:        #e7edf6;
    --ao-text-soft:   #aab6c8;
    --ao-text-dim:    #6f7e95;
    --ao-text-faint:  #46536a;

    /* — type — */
    --ao-font-display: 'Chakra Petch', 'Sora', system-ui, sans-serif;
    --ao-font-body:    'Sora', system-ui, -apple-system, sans-serif;
    --ao-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* — radius — */
    --ao-r-sm: 6px;
    --ao-r-md: 10px;
    --ao-r-lg: 16px;
    --ao-r-xl: 22px;

    /* — depth — */
    --ao-shadow-1: 0 2px 8px rgba(0,0,0,.35);
    --ao-shadow-2: 0 12px 34px rgba(0,0,0,.45);
    --ao-shadow-3: 0 26px 70px rgba(0,0,0,.55);
    --ao-shadow-core: 0 0 0 1px rgba(45,212,255,.25), 0 8px 30px rgba(15,142,189,.35);

    /* — motion — */
    --ao-ease:    cubic-bezier(.22, 1, .36, 1);
    --ao-ease-in: cubic-bezier(.4, 0, .2, 1);
    --ao-fast: .18s;
    --ao-med:  .32s;
    --ao-slow: .6s;

    /* — layout — */
    --ao-maxw: 1320px;
    --ao-gutter: clamp(16px, 4vw, 48px);
}

/* ----------------------------------------------------------------------------
   2 · RESET / BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ao-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ao-text);
    background: var(--ao-void);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--ao-font-display);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
    margin: 0 0 .5em;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

::selection { background: rgba(45,212,255,.28); color: #fff; }

/* refined scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--ao-core-deep) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ao-core-deep), #0a3548);
    border-radius: 20px;
    border: 2px solid var(--ao-void);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ao-core); }

/* ----------------------------------------------------------------------------
   3 · GLOBAL ATMOSPHERE  — the logo motif lives in the background
   ----------------------------------------------------------------------------
   Three fixed layers behind everything:
     · gradient nebula  (depth + brand-blue light source)
     · fine tactical grid
     · giant orbital-reticle emblem watermark (masked → takes brand colors)
   The legacy .overlay element is neutralised; .ao-bg replaces it.            */

.overlay { display: none !important; }

.ao-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(1200px 700px at 78% -8%, rgba(15,142,189,.16), transparent 60%),
        radial-gradient(900px 600px at 8% 105%, rgba(45,212,255,.08), transparent 55%),
        linear-gradient(180deg, var(--ao-void) 0%, var(--ao-bg) 40%, #04060b 100%);
}

/* tactical grid */
.ao-bg::before {
    content: "";
    position: absolute;
    top: -2px; right: -2px; bottom: -2px; left: -2px;
    background-image:
        linear-gradient(rgba(146,178,222,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(146,178,222,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

/* the wolf emblem — primary background motif, drawn straight from logo.svg.
   Used as a CSS mask so the silhouette carries a soft chrome→blue gradient and
   sits as a ghostly watermark rather than a flat logo paste. */
/* real <img> (no mask / no aspect-ratio) so it renders in every engine */
.ao-bg__wolf {
    position: absolute;
    top: 50%;
    right: -6vmax;
    transform: translateY(-50%);
    width: min(760px, 70vmax);
    height: auto;
    opacity: .12;
    filter: drop-shadow(0 0 60px rgba(45,212,255,.25));
}

/* orbital reticle rings — secondary geometric motif, slowly orbiting */
.ao-bg__rings {
    position: absolute;
    top: -20vmax; left: -16vmax;
    width: min(840px, 85vmax);
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(45,212,255,.5), rgba(184,197,218,.3) 55%, rgba(15,142,189,.15));
    -webkit-mask: url('/assets/orbit-motif.svg') center / contain no-repeat;
            mask: url('/assets/orbit-motif.svg') center / contain no-repeat;
    opacity: .16;
    animation: ao-spin 260s linear infinite;
}
.ao-bg__rings--sm {
    top: auto; left: auto;
    bottom: -24vmax; right: 22%;
    width: min(440px, 50vmax);
    opacity: .1;
    animation-direction: reverse;
    animation-duration: 340s;
}
@keyframes ao-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ao-bg__rings { animation: none; }
    html { scroll-behavior: auto; }
}

/* the page content sits above the atmosphere */
.wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* Gentle, low-specificity normalization: page content that does NOT set its own
   font inherits the new type system, so every page reads as one family. Pages
   with explicit per-component styling keep winning — this only fills the gaps. */
.wrapper { font-family: var(--ao-font-body); }
.wrapper :where(h1, h2, h3, h4, h5) { font-family: var(--ao-font-display); }
.wrapper :where(input, textarea, select, button) { font-family: inherit; }

/* ----------------------------------------------------------------------------
   4 · REUSABLE PRIMITIVES  (use across every page for a unified language)
   ---------------------------------------------------------------------------- */

/* eyebrow / section kicker */
.ao-kicker {
    font-family: var(--ao-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ao-core-bright);
    display: inline-flex;
    align-items: center;
    gap: .6em;
}
.ao-kicker::before {
    content: "";
    width: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ao-core-bright));
}

.ao-title {
    font-family: var(--ao-font-display);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ao-text);
}
.ao-title--chrome {
    background: var(--ao-chrome-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* glass panel — the workhorse container */
.ao-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(20,29,44,.72), rgba(11,16,25,.82));
    border: 1px solid var(--ao-line);
    border-radius: var(--ao-r-lg);
    box-shadow: var(--ao-shadow-2), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}
/* corner-bracket accents — the HUD signature, applied to .ao-panel--hud */
.ao-panel--hud::before,
.ao-panel--hud::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border: 1.5px solid var(--ao-line-bright);
    pointer-events: none;
}
.ao-panel--hud::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.ao-panel--hud::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

.ao-card {
    background: linear-gradient(180deg, rgba(24,34,51,.55), rgba(11,16,25,.6));
    border: 1px solid var(--ao-line);
    border-radius: var(--ao-r-md);
    transition: border-color var(--ao-med) var(--ao-ease),
                transform var(--ao-med) var(--ao-ease),
                box-shadow var(--ao-med) var(--ao-ease);
}
.ao-card:hover {
    border-color: var(--ao-line-bright);
    transform: translateY(-3px);
    box-shadow: var(--ao-shadow-2);
}

/* divider with center node */
.ao-rule {
    height: 1px; border: 0; margin: 1.5rem 0;
    background: linear-gradient(90deg, transparent, var(--ao-line-strong) 18%, var(--ao-line-strong) 82%, transparent);
}

/* tag / chip */
.ao-tag {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--ao-font-mono);
    font-size: .68rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .34em .7em;
    border-radius: 100px;
    color: var(--ao-text-soft);
    background: rgba(146,178,222,.08);
    border: 1px solid var(--ao-line);
}
.ao-tag--core { color: var(--ao-core-bright); background: rgba(45,212,255,.1); border-color: var(--ao-line-bright); }
.ao-tag--live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ao-success); box-shadow: 0 0 0 3px rgba(67,224,168,.25);
    animation: ao-pulse 1.8s var(--ao-ease) infinite;
}
@keyframes ao-pulse { 50% { box-shadow: 0 0 0 6px rgba(67,224,168,0); } }

/* buttons */
.ao-btn {
    --b: var(--ao-core);
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    font-family: var(--ao-font-display);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .85em 1.6em;
    border-radius: var(--ao-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    color: #04121a;
    background: var(--ao-core-grad);
    box-shadow: var(--ao-shadow-core);
    transition: transform var(--ao-fast) var(--ao-ease), box-shadow var(--ao-med) var(--ao-ease), filter var(--ao-fast);
    -webkit-tap-highlight-color: transparent;
}
.ao-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1px var(--ao-core-bright), 0 14px 38px rgba(15,142,189,.5); }
.ao-btn:active { transform: translateY(0); }
.ao-btn--ghost {
    background: rgba(146,178,222,.04);
    color: var(--ao-text);
    border-color: var(--ao-line-strong);
    box-shadow: none;
}
.ao-btn--ghost:hover { border-color: var(--ao-core-bright); color: var(--ao-core-bright); box-shadow: none; background: rgba(45,212,255,.06); }
.ao-btn--danger { background: linear-gradient(135deg, #ff6b7e, #d63146); color: #fff; box-shadow: 0 8px 26px rgba(214,49,70,.4); }

/* a numeric stat readout */
.ao-stat { display: flex; flex-direction: column; gap: 2px; }
.ao-stat__val { font-family: var(--ao-font-mono); font-weight: 700; font-size: 1.35rem; color: var(--ao-text); letter-spacing: -.01em; }
.ao-stat__lbl { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ao-text-dim); }

/* ============================================================================
   5 · REDESIGNED SHARED HEADER  ·  command bar
   ----------------------------------------------------------------------------
   Targets the existing header.php markup classes (.cmd-head, .cmd-nav-item…)
   and fully restyles them. Higher-specificity selectors + load order win over
   the legacy header.css.
   ============================================================================ */

.wrapper > header.cmd-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        linear-gradient(180deg, rgba(9,13,21,.92), rgba(7,10,18,.86));
    border: 0;
    border-bottom: 1px solid var(--ao-line-strong);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 18px 50px -20px rgba(0,0,0,.8);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
    column-gap: clamp(16px, 3vw, 40px);
    padding: 0 var(--ao-gutter);
}
/* hairline of brand-light along the bottom edge */
.wrapper > header.cmd-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ao-core-bright) 30%, var(--ao-core) 50%, var(--ao-core-bright) 70%, transparent);
    opacity: .55;
}

/* — brand — */
.cmd-head-brand--side {
    grid-row: 1 / 3;
    display: flex; align-items: center; gap: .8rem;
    padding: 14px 0;
    border-right: 1px solid var(--ao-line);
    padding-right: clamp(16px, 3vw, 36px);
}
.cmd-head-brand--side .cmd-brand-logo--big {
    height: clamp(42px, 5vw, 60px);
    aspect-ratio: 0.74;          /* crop the wolf out of logo.svg's wide canvas */
    width: auto;
    object-fit: cover;
    object-position: center;
    filter: drop-shadow(0 3px 16px rgba(45,212,255,.45));
    transition: filter var(--ao-med) var(--ao-ease), transform var(--ao-med) var(--ao-ease);
}
.cmd-head-brand--side:hover .cmd-brand-logo--big { filter: drop-shadow(0 4px 24px rgba(45,212,255,.75)); transform: translateY(-1px); }

/* wordmark lockup beside the wolf emblem */
.cmd-brand-word {
    display: flex; flex-direction: column; line-height: .92;
    font-family: var(--ao-font-display);
}
.cmd-brand-word--single { flex-direction: row; align-items: baseline; line-height: 1; }
.cmd-brand-word__a {
    font-weight: 700; font-size: 1.6rem; letter-spacing: .22em;
    background: var(--ao-chrome-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    padding-left: .06em;
}
.cmd-brand-word__b {
    font-weight: 700; font-size: 1.6rem; letter-spacing: .22em;
    color: var(--ao-core-bright);
    text-shadow: 0 0 16px rgba(45,212,255,.5);
}

/* — main bar (row 1): resources + actions — */
.cmd-head-main {
    grid-column: 2; grid-row: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 12px 0 10px;
    flex-wrap: wrap;
}
.cmd-head-resources { display: flex; gap: 10px; flex-wrap: wrap; }
.cmd-res-tile {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .85rem;
    border-radius: var(--ao-r-sm);
    background: linear-gradient(180deg, rgba(20,29,44,.6), rgba(11,16,25,.5));
    border: 1px solid var(--ao-line);
    transition: border-color var(--ao-fast), background var(--ao-fast);
}
.cmd-res-tile:hover { border-color: var(--ao-line-bright); }
.cmd-res-tile.accent { border-color: var(--ao-line-bright); background: linear-gradient(180deg, rgba(45,212,255,.1), rgba(15,142,189,.05)); }
.cmd-res-icon img { width: 22px; height: 22px; object-fit: contain; }
.cmd-res-data { display: flex; flex-direction: column; line-height: 1.1; }
.cmd-res-val { font-family: var(--ao-font-mono); font-weight: 700; font-size: .92rem; color: var(--ao-text); }
.cmd-res-lbl { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ao-text-dim); }

.cmd-head-actions { display: flex; gap: 10px; }
.cmd-action-btn {
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--ao-font-display); font-weight: 600; font-size: .8rem;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .6rem 1.1rem; border-radius: var(--ao-r-sm);
    border: 1px solid var(--ao-line-strong);
    color: var(--ao-text); background: rgba(146,178,222,.04);
    transition: all var(--ao-fast) var(--ao-ease);
}
.cmd-action-btn .icn { font-size: .9em; }
.cmd-action-btn.launch {
    color: #04121a; border-color: transparent;
    background: var(--ao-core-grad); box-shadow: var(--ao-shadow-core);
}
.cmd-action-btn.launch:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cmd-action-btn.exit:hover { border-color: var(--ao-danger); color: var(--ao-danger); background: rgba(255,90,110,.08); }

/* — nav (row 2) — */
.cmd-head-nav {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: stretch; gap: 2px;
    flex-wrap: wrap;
    border-top: 1px solid var(--ao-line);
    padding-top: 4px;
}
.cmd-nav-item {
    position: relative;
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--ao-font-display); font-weight: 500; font-size: .84rem;
    letter-spacing: .04em;
    padding: .9rem 1.05rem;
    color: var(--ao-text-soft);
    transition: color var(--ao-fast) var(--ao-ease);
}
.cmd-nav-item .cmd-nav-icn { font-size: 1em; opacity: .8; transition: opacity var(--ao-fast); }
.cmd-nav-item::after {
    content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: 0; height: 2px;
    background: var(--ao-core-grad); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; opacity: 0;
    transition: transform var(--ao-med) var(--ao-ease), opacity var(--ao-fast);
}
.cmd-nav-item:hover { color: var(--ao-text); }
.cmd-nav-item:hover .cmd-nav-icn { opacity: 1; }
.cmd-nav-item:hover::after { transform: scaleX(1); opacity: .5; }
.cmd-nav-item.active { color: var(--ao-core-bright); }
.cmd-nav-item.active::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 14px var(--ao-core-glow); }
.cmd-nav-external { color: var(--ao-text-dim); }
.cmd-nav-external:hover { color: #5865F2; }

/* mobile nav toggle (injected by header.php) */
.cmd-nav-toggle { display: none; }

/* ----------------------------------------------------------------------------
   6 · RESPONSIVE
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .cmd-res-lbl { display: none; }
    .cmd-action-btn .lbl { display: none; }
    .cmd-action-btn { padding: .6rem .8rem; }
}

@media (max-width: 860px) {
    .wrapper > header.cmd-head {
        grid-template-columns: 1fr auto;
        column-gap: 14px;
    }
    .cmd-head-brand--side {
        grid-row: 1; grid-column: 1;
        border-right: 0; padding-right: 0;
    }
    .cmd-head-main {
        grid-column: 1 / -1; grid-row: 2;
        order: 3;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cmd-head-main::-webkit-scrollbar { display: none; }
    .cmd-head-resources { flex-wrap: nowrap; }

    /* nav collapses behind a toggle */
    .cmd-nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        grid-row: 1; grid-column: 2;
        width: 46px; height: 46px; align-self: center;
        margin-left: auto;
        border-radius: var(--ao-r-sm);
        border: 1px solid var(--ao-line-strong);
        background: rgba(146,178,222,.05);
        color: var(--ao-text);
        cursor: pointer;
        font-size: 1.3rem;
    }
    .cmd-head-nav {
        grid-column: 1 / -1; grid-row: 3;
        flex-direction: column; gap: 0;
        max-height: 0; overflow: hidden;
        border-top: 1px solid var(--ao-line);
        transition: max-height var(--ao-med) var(--ao-ease);
    }
    .cmd-head-nav.open { max-height: 70vh; padding-bottom: 10px; }
    .cmd-nav-item { width: 100%; padding: 1rem .4rem; border-bottom: 1px solid var(--ao-line); }
    .cmd-nav-item::after { display: none; }
    .cmd-nav-item.active { background: rgba(45,212,255,.06); }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .cmd-res-tile { padding: .45rem .6rem; }
    .cmd-res-icon img { width: 18px; height: 18px; }
}

/* ----------------------------------------------------------------------------
   7 · ENTRANCE — one orchestrated page-load reveal
   ---------------------------------------------------------------------------- */
@keyframes ao-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wrapper > header.cmd-head { animation: ao-rise var(--ao-slow) var(--ao-ease) both; }
.cmd-nav-item { animation: ao-rise var(--ao-med) var(--ao-ease) both; }
.cmd-head-nav .cmd-nav-item:nth-child(1){animation-delay:.05s}
.cmd-head-nav .cmd-nav-item:nth-child(2){animation-delay:.10s}
.cmd-head-nav .cmd-nav-item:nth-child(3){animation-delay:.15s}
.cmd-head-nav .cmd-nav-item:nth-child(4){animation-delay:.20s}
.cmd-head-nav .cmd-nav-item:nth-child(5){animation-delay:.25s}
.cmd-head-nav .cmd-nav-item:nth-child(6){animation-delay:.30s}
.cmd-head-nav .cmd-nav-item:nth-child(7){animation-delay:.35s}
.cmd-head-nav .cmd-nav-item:nth-child(8){animation-delay:.40s}
.cmd-head-nav .cmd-nav-item:nth-child(9){animation-delay:.45s}

/* ============================================================================
   8 · VERTICAL COMMAND RAIL + STICKY TOP HUD  (new structure, rolled out site-wide)
   Replaces the top header bar. Rail is fixed; content is offset via padding.
   ============================================================================ */
:root { --rail-w: 88px; --rail-w-open: 250px; }

.wrapper { padding-left: var(--rail-w); }

/* ---- rail ---- */
.rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: var(--rail-w);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 20px 0;
    background: linear-gradient(180deg, rgba(10,14,22,.97), rgba(6,9,16,.98));
    border-right: 1px solid var(--ao-line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: width .35s var(--ao-ease);
    overflow: hidden;
}
.rail::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--ao-core) 40%, var(--ao-core-bright) 50%, var(--ao-core) 60%, transparent); opacity: .5; }
.rail:hover { width: var(--rail-w-open); }

.rail-brand { display: flex; align-items: center; gap: 12px; padding: 0 22px 20px; min-width: var(--rail-w-open); }
.rail-brand img { width: 44px; height: 54px; flex: none; aspect-ratio: .74; object-fit: cover; object-position: center; filter: drop-shadow(0 3px 14px rgba(45,212,255,.5)); }
.rail-brand .wm { font-family: var(--ao-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .2em; white-space: nowrap; opacity: 0; transition: opacity .3s .05s; }
.rail:hover .rail-brand .wm { opacity: 1; }
.rail-brand .wm b { background: var(--ao-chrome-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rail-brand .wm i { font-style: normal; color: var(--ao-core-bright); }

.rail-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 0 14px; }
.rail-item { position: relative; display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 16px; border-radius: 12px; min-width: 222px;
    color: var(--ao-text-dim); transition: color .2s, background .2s; }
.rail-item .ic { flex: none; width: 24px; display: grid; place-items: center; font-size: 1.12rem; }
.rail-item .tx { font-family: var(--ao-font-display); font-weight: 500; font-size: .92rem; letter-spacing: .03em; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.rail:hover .rail-item .tx { opacity: 1; }
.rail-item:hover { color: var(--ao-text); background: rgba(146,178,222,.05); }
.rail-item.active { color: var(--ao-core-bright); background: rgba(45,212,255,.08); }
.rail-item.active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 3px; background: var(--ao-core-grad); box-shadow: 0 0 14px var(--ao-core-glow); }
.rail-ext:hover { color: #5865F2; }

.rail-foot { margin-top: auto; padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rail-launch { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border-radius: 12px; min-width: 222px;
    color: #04121a; background: var(--ao-core-grad); box-shadow: var(--ao-shadow-core);
    font-family: var(--ao-font-display); font-weight: 700; letter-spacing: .04em; }
.rail-launch .ic { flex: none; width: 24px; display: grid; place-items: center; }
.rail-launch .tx { white-space: nowrap; opacity: 0; transition: opacity .3s; }
.rail:hover .rail-launch .tx { opacity: 1; }
.rail-user { display: flex; align-items: center; gap: 12px; padding: 6px 14px; min-width: 222px; }
.rail-user img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ao-line-bright); flex: none; object-fit: cover; background: var(--ao-surface-2); }
.rail-user .meta { display: flex; flex-direction: column; white-space: nowrap; opacity: 0; transition: opacity .3s; min-width: 0; flex: 1; }
.rail-user .nm { font-family: var(--ao-font-display); font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.rail-user .rk { font-family: var(--ao-font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ao-text-dim); }
.rail:hover .rail-user .meta { opacity: 1; }
.rail-logout { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--ao-line); color: var(--ao-text-dim); opacity: 0; transition: opacity .3s, color .2s, border-color .2s; }
.rail:hover .rail-logout { opacity: 1; }
.rail-logout:hover { color: var(--ao-danger); border-color: var(--ao-danger); }

/* ---- sticky top HUD (resources) ---- */
.wrapper > header.deck-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 16px;
    padding: 12px clamp(18px, 3vw, 36px);
    background: linear-gradient(180deg, rgba(9,13,21,.86), rgba(7,10,18,.7));
    border: 0; border-bottom: 1px solid var(--ao-line);
    backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
    box-shadow: none;
}
.rail-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--ao-line-strong); background: rgba(146,178,222,.05); color: var(--ao-text); cursor: pointer; font-size: 1.2rem; }
.deck-res { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-res .res { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 100px; background: rgba(20,29,44,.5); border: 1px solid var(--ao-line); }
.deck-res .res img { width: 18px; height: 18px; object-fit: contain; }
.deck-res .res b { font-family: var(--ao-font-mono); font-weight: 700; font-size: .82rem; color: var(--ao-text); }
.deck-res .res i { font-style: normal; font-family: var(--ao-font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ao-text-dim); }
.deck-res .res.accent { border-color: var(--ao-line-bright); background: rgba(45,212,255,.1); }
.deck-res .res.accent b { color: var(--ao-core-bright); }
.deck-launch { margin-left: auto; display: inline-flex; align-items: center; gap: .55em; padding: .7rem 1.3rem; border-radius: 10px;
    color: #04121a; background: var(--ao-core-grad); box-shadow: var(--ao-shadow-core);
    font-family: var(--ao-font-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    transition: transform .18s var(--ao-ease), filter .18s; }
.deck-launch:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---- responsive ---- */
@media (max-width: 1100px) { .deck-res .res i { display: none; } }
@media (max-width: 860px) {
    :root { --rail-w: 0px; }
    .wrapper { padding-left: 0; }
    .rail { width: 0; border-right: 0; box-shadow: 26px 0 60px rgba(0,0,0,.6); }
    .rail.open { width: var(--rail-w-open); border-right: 1px solid var(--ao-line); padding: 20px 0; }
    .rail.open .rail-brand .wm, .rail.open .rail-item .tx, .rail.open .rail-launch .tx, .rail.open .rail-user .meta, .rail.open .rail-logout { opacity: 1; }
    .rail-toggle { display: grid; place-items: center; }
    .deck-res { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .deck-res::-webkit-scrollbar { display: none; }
    .deck-launch .lbl { display: none; }
}

/* ------------------------------------------------------------- Fokusrahmen */

/*
 * Kein Fokusrahmen vom Browser -- dieselbe Regel und derselbe Grund wie in
 * `game3d/src/ui/hud.css`, wo sie ausfuehrlich steht:
 *
 * Chrome zeichnet seit Fassung 86 einen doppelten Ring (aussen dunkel, innen
 * hell) um alles Fokussierte; auf dunklem Grund bleibt ein weisses Rechteck
 * uebrig, schon beim blossen Anklicken. `:focus` statt `:focus-visible`, weil
 * der zweite Zielbrowser (Maxthon) die feinere Unterscheidung nicht kennt.
 *
 * Wer einen eigenen Fokusrahmen gesetzt hat, behaelt ihn: ein
 * klassenqualifizierter Waehler ist spezifischer als dieses nackte `:focus`.
 *
 * Diese Datei ist der richtige Ort dafuer -- sie ist die einzige aus `cssnew/`,
 * die die Seiten heute noch laden, und sie kommt zuletzt.
 */
:focus { outline: none; }