:root {
    --bg: #060809;
    --bg2: #0b0e11;
    --bg3: #0f1318;
    --green: #5BC07A;
    --green-dim: #2d6a45;
    --green-glow: rgba(91,192,122,0.10);
    --orange: #E6792A;
    --orange-dim: #8a4318;
    --cyan: #4FB8CC;
    --cyan-dim: #2a6a78;
    --gray: #7a7a7a;
    --gray-dim: #3a3a3a;
    --red: #d94545;
    --yellow: #d6b13a;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: var(--bg);
    color: var(--green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    height: 100vh;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><line x1='14' y1='2' x2='14' y2='10' stroke='%235BC07A' stroke-width='1.4'/><line x1='14' y1='18' x2='14' y2='26' stroke='%235BC07A' stroke-width='1.4'/><line x1='2' y1='14' x2='10' y2='14' stroke='%235BC07A' stroke-width='1.4'/><line x1='18' y1='14' x2='26' y2='14' stroke='%235BC07A' stroke-width='1.4'/><circle cx='14' cy='14' r='1.4' fill='%235BC07A'/></svg>") 14 14, crosshair;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(91,192,122,0.012) 0 1px, transparent 1px 3px);
    pointer-events: none;
    z-index: 9999;
  }

  body::after {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 9998;
  }

  .hidden { display: none !important; }

  /* ========== BOOT ========== */
  .boot {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    overflow: hidden;
  }
  #bootRain {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.45;
  }
  .boot-line {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    color: var(--green);
    text-shadow: 0 0 10px var(--green);
    white-space: pre;
    text-align: center;
    min-height: 200px;
  }
  .boot-line::after {
    content: '_';
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink {
    50% { opacity: 0; }
  }

  /* ========== HUD ========== */
  .hud {
    height: 100vh;
    display: grid;
    grid-template-rows: 78px 1fr 36px;
    animation: fadeIn 0.6s ease-in;
    position: relative;
    z-index: 1;
  }
  .placard-nav {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .placard-nav a {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--gray);
    text-decoration: none;
    padding: 2px 6px;
    border: 1px solid var(--gray-dim);
    background: rgba(0,0,0,0.4);
    transition: all 0.15s;
  }
  .placard-nav a:hover {
    color: var(--green);
    border-color: var(--green);
    background: rgba(91,192,122,0.1);
    box-shadow: 0 0 4px var(--green-glow);
  }
  .placard-gh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--gray);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid var(--gray-dim);
    background: rgba(0,0,0,0.4);
    transition: all 0.15s;
  }
  .placard-gh:hover {
    color: var(--green);
    border-color: var(--green);
    background: rgba(91,192,122,0.1);
  }
  .placard-gh svg {
    width: 12px; height: 12px;
    fill: currentColor;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ===== Placard ===== */
  .placard {
    border-bottom: 1px solid var(--green-dim);
    background: linear-gradient(180deg, var(--bg2) 0%, transparent 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 18px;
    position: relative;
    gap: 20px;
  }
  .placard::before, .placard::after {
    content: '';
    position: absolute; bottom: -1px;
    width: 60px; height: 1px;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
  }
  .placard::before { left: 0; }
  .placard::after { right: 0; }
  .placard-l { display: flex; align-items: center; gap: 12px; }
  .placard-c { display: flex; justify-content: center; }
  .placard-r { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 11px; }
  .placard-r .lang-toggles { display: flex; gap: 5px; }
  .placard-r .lang-toggle {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2.5px;
    color: var(--cyan);
    text-decoration: none;
    border: 1px solid var(--cyan-dim);
    padding: 4px 9px;
    background: rgba(79,184,204,0.06);
    transition: all 0.15s;
  }
  .placard-r .lang-toggle:hover {
    border-color: var(--cyan);
    background: rgba(79,184,204,0.18);
    box-shadow: 0 0 6px rgba(79,184,204,0.35);
  }
  .placard-r .lang-toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
  @media (max-width: 600px) {
    .placard-r .lang-toggle { font-size: 8px; padding: 3px 6px; letter-spacing: 1.5px; }
  }
  .dot {
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--green);
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .placard-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 4px;
    color: var(--green);
    text-shadow: 0 0 4px var(--green-glow);
  }
  .placard-sub {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gray);
    line-height: 1.2;
  }
  .placard-sub small {
    display: block;
    font-size: 8px;
    color: var(--orange-dim);
    letter-spacing: 3px;
    margin-top: 1px;
  }
  .badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 2px 8px;
    border: 1px solid var(--green);
    color: var(--green);
  }
  .badge.live::before {
    content: '● ';
    color: var(--red);
    text-shadow: 0 0 6px var(--red);
    animation: pulse 1.2s ease-in-out infinite;
  }
  #liveTime {
    color: var(--gray);
    letter-spacing: 1px;
  }

  /* ===== ALERT STATUS (MGS-inspired) ===== */
  .alert-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--green-dim);
    background: rgba(0,255,65,0.04);
    padding: 4px 12px;
    position: relative;
  }
  .alert-widget::before, .alert-widget::after {
    content: ''; position: absolute;
    width: 6px; height: 6px;
    border-color: var(--green);
  }
  .alert-widget::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
  .alert-widget::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
  .alert-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gray);
  }
  .alert-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
  }
  .alert-bars {
    display: flex; gap: 2px;
  }
  .alert-bars span {
    width: 4px; height: 14px;
    background: var(--green);
    box-shadow: 0 0 4px var(--green);
    animation: barPulse 1.6s ease-in-out infinite;
  }
  .alert-bars span:nth-child(2) { animation-delay: 0.15s; }
  .alert-bars span:nth-child(3) { animation-delay: 0.3s; }
  .alert-bars span:nth-child(4) { animation-delay: 0.45s; }
  @keyframes barPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.3; transform: scaleY(0.5); }
  }
  .alert-widget.alert {
    border-color: var(--red);
    background: rgba(255,45,45,0.08);
    animation: alertFlash 0.8s steps(2) infinite;
  }
  .alert-widget.alert .alert-value { color: var(--red); text-shadow: 0 0 12px var(--red); }
  .alert-widget.alert .alert-bars span { background: var(--red); box-shadow: 0 0 6px var(--red); }
  @keyframes alertFlash {
    50% { background: rgba(255,45,45,0.18); }
  }

  /* ===== Grid ===== */
  .grid {
    display: grid;
    grid-template-columns: 130px 1fr 320px;
    gap: 0;
    overflow: hidden;
  }

  /* ===== Rain column ===== */
  .rain-col {
    border-right: 1px solid var(--green-dim);
    position: relative;
    overflow: hidden;
    background: rgba(0,255,65,0.02);
  }
  #rain {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }

  /* ===== Center ===== */
  .center {
    padding: 14px 20px 20px;
    overflow-y: auto;
  }
  .center::-webkit-scrollbar { width: 6px; }
  .center::-webkit-scrollbar-track { background: var(--bg2); }
  .center::-webkit-scrollbar-thumb { background: var(--green-dim); }

  .section-title {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 10px;
  }
  .section-title:first-child { margin-top: 0; }
  .section-title .num {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--orange);
    background: rgba(255,107,26,0.1);
    border: 1px solid var(--orange-dim);
    padding: 2px 6px;
    letter-spacing: 1px;
  }
  .section-title .lbl {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--green);
  }
  .section-title .meta {
    font-size: 10px;
    color: var(--gray);
    margin-left: 6px;
  }
  .section-title .rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--green-dim) 0%, transparent 100%);
  }

  /* ===== Squad cards ===== */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    grid-auto-rows: 1fr;
  }
  .card.vacant {
    border: 1px dashed var(--orange-dim);
    background: rgba(230,121,42,0.02);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-height: 140px;
  }
  .card.vacant::before, .card.vacant::after { display: none; }
  .card.vacant:hover {
    background: rgba(230,121,42,0.05);
    border-color: var(--orange);
    box-shadow: none;
  }
  .card.vacant .vacant-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--orange-dim);
  }
  .card.vacant .vacant-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--orange);
    text-shadow: 0 0 4px var(--orange-dim);
  }
  .card.vacant .vacant-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--gray-dim);
    letter-spacing: 1px;
    margin-top: 4px;
    font-style: italic;
  }
  .card {
    border: 1px solid var(--green-dim);
    background: linear-gradient(180deg, rgba(0,255,65,0.04) 0%, rgba(0,0,0,0.3) 100%);
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
  }
  .card::before, .card::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    border-color: var(--green);
    transition: all 0.15s;
  }
  .card::before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
  .card::after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
  .card:hover {
    border-color: var(--green);
    background: linear-gradient(180deg, rgba(0,255,65,0.1) 0%, rgba(0,0,0,0.2) 100%);
    box-shadow: 0 0 12px var(--green-glow);
  }
  .card:hover::before, .card:hover::after {
    width: 14px; height: 14px;
    box-shadow: 0 0 6px var(--green);
  }
  .card.orange { border-color: var(--orange-dim); }
  .card.orange::before, .card.orange::after { border-color: var(--orange); }
  .card.orange:hover { border-color: var(--orange); box-shadow: 0 0 12px rgba(255,107,26,0.2); }
  .card.cyan { border-color: rgba(0,217,255,0.3); }
  .card.cyan::before, .card.cyan::after { border-color: var(--cyan); }
  .card.cyan:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,217,255,0.2); }

  .card-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gray);
    margin-bottom: 2px;
  }
  .card-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
  }
  .card.orange .card-name { color: var(--orange); }
  .card.cyan .card-name { color: var(--cyan); }
  .card-id {
    font-size: 10px;
    color: var(--gray);
    margin-bottom: 6px;
  }
  .card-row {
    display: flex; justify-content: space-between;
    font-size: 11px;
    margin: 3px 0;
  }
  .card-row .k { color: var(--gray); }
  .card-row .v { color: var(--green); }
  .card.orange .card-row .v { color: var(--orange); }
  .card.cyan .card-row .v { color: var(--cyan); }

  /* mini stat bars (MGS-style) */
  .mini-bars {
    margin-top: 8px;
    border-top: 1px dashed rgba(136,136,136,0.2);
    padding-top: 6px;
    display: grid;
    gap: 3px;
  }
  .mini-bar {
    display: grid;
    grid-template-columns: 50px 1fr 36px;
    align-items: center;
    gap: 6px;
    font-size: 9px;
  }
  .mini-bar .lbl {
    font-family: 'Orbitron', sans-serif;
    color: var(--gray);
    letter-spacing: 1px;
  }
  .mini-bar .track {
    height: 4px;
    background: rgba(0,255,65,0.08);
    position: relative;
    overflow: hidden;
  }
  .mini-bar .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    transition: width 0.4s ease;
  }
  .mini-bar.life .fill { background: var(--green); box-shadow: 0 0 4px var(--green); }
  .mini-bar.psy .fill { background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }
  .mini-bar.sta .fill { background: var(--orange); box-shadow: 0 0 4px var(--orange); }
  .mini-bar .pct {
    text-align: right;
    color: var(--green);
    font-family: 'Orbitron', sans-serif;
  }
  .mini-bar.life .pct { color: var(--green); }
  .mini-bar.psy .pct { color: var(--cyan); }
  .mini-bar.sta .pct { color: var(--orange); }

  /* ===== Tachikomas ===== */
  .tachi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 6px;
  }
  .tachi-card {
    border: 1px solid var(--green-dim);
    background: rgba(0,255,65,0.03);
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }
  .tachi-card:hover {
    border-color: var(--green);
    background: rgba(0,255,65,0.08);
  }
  .tachi-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
  }
  .tachi-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--green);
  }
  .tachi-ops {
    font-size: 9px;
    color: var(--orange);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
  }
  .tachi-line {
    font-size: 10px;
    color: var(--gray);
    font-style: italic;
  }
  .tachi-card.standby .tachi-line { color: var(--gray-dim); }

  /* ===== OPS LOG (live feed) ===== */
  .ops-log {
    border: 1px solid var(--green-dim);
    background: rgba(0,0,0,0.4);
    height: 150px;
    overflow: hidden;
    position: relative;
  }
  .ops-feed {
    height: 100%;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.6;
  }
  .ops-feed::-webkit-scrollbar { width: 4px; }
  .ops-feed::-webkit-scrollbar-track { background: transparent; }
  .ops-feed::-webkit-scrollbar-thumb { background: var(--green-dim); }
  .ops-entry {
    display: grid;
    grid-template-columns: 70px 90px 1fr;
    gap: 10px;
    color: var(--gray);
    animation: fadeInRow 0.4s;
  }
  @keyframes fadeInRow {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .ops-entry .ts { color: var(--gray-dim); }
  .ops-entry .src {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .ops-entry.warn .src { color: var(--orange); }
  .ops-entry.ok .msg { color: var(--green); }
  .ops-entry.warn .msg { color: var(--orange); }
  .ops-entry .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  /* ===== Right column ===== */
  .right {
    border-left: 1px solid var(--green-dim);
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .right::-webkit-scrollbar { width: 4px; }
  .right::-webkit-scrollbar-track { background: transparent; }
  .right::-webkit-scrollbar-thumb { background: var(--green-dim); }
  .panel {
    border-bottom: 1px solid var(--green-dim);
    padding: 10px 14px;
    flex-shrink: 0;
  }
  .panel:last-child { border-bottom: none; }
  .panel-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--orange);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--orange-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel-h .ph-aux {
    font-size: 8px;
    color: var(--gray-dim);
    letter-spacing: 1px;
  }
  .panel.topology { min-height: 200px; display: flex; flex-direction: column; }
  .panel.topology svg { flex: 1; width: 100%; }
  .panel.ghost .row, .panel.barriers .brow {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px;
    padding: 3px 0;
  }
  .panel.ghost .k { color: var(--gray); }
  .panel.ghost .v { color: var(--green); }
  .panel.ghost .v.active {
    color: var(--green);
    text-shadow: 0 0 6px var(--green);
  }
  .panel.barriers .brow {
    border-bottom: 1px dotted rgba(255,107,26,0.15);
    padding: 5px 0;
  }
  .panel.barriers .brow:last-child { border-bottom: none; }
  .bnum {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    color: var(--orange);
    background: rgba(255,107,26,0.1);
    padding: 1px 5px;
    letter-spacing: 1px;
  }
  .bname { color: var(--gray); flex: 1; margin: 0 8px; font-size: 11px; }
  .bstat {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    color: var(--green);
    letter-spacing: 1px;
  }

  /* ===== CODEC PANEL (MGS) ===== */
  .panel.codec {
    background: linear-gradient(180deg, rgba(0,217,255,0.04) 0%, rgba(0,0,0,0.4) 100%);
  }
  .panel.codec .panel-h {
    color: var(--cyan);
    border-bottom-color: var(--cyan-dim);
    border-bottom-style: dashed;
  }
  .codec-display {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .codec-portrait {
    border: 1px solid var(--cyan-dim);
    background: rgba(0,217,255,0.05);
    padding: 4px;
    font-size: 8px;
    line-height: 1.05;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    white-space: pre;
    text-shadow: 0 0 4px var(--cyan-dim);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .codec-portrait::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,217,255,0.06) 0 1px, transparent 1px 2px);
    pointer-events: none;
  }
  .codec-freqs {
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .codec-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 6px;
    align-items: center;
    font-size: 10px;
    padding: 1px 0;
  }
  .codec-row .freq {
    font-family: 'Orbitron', sans-serif;
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: 1px;
  }
  .codec-row .who { color: var(--gray); }
  .codec-row .st {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--green);
  }
  .codec-row.silent .st { color: var(--gray-dim); }
  .codec-row.alert .st { color: var(--orange); }

  /* ===== MOTHER BASE STATS ===== */
  .panel.mother .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stat-cell {
    border: 1px solid var(--green-dim);
    background: rgba(0,255,65,0.03);
    padding: 6px 8px;
    text-align: left;
  }
  .stat-cell .sval {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    letter-spacing: 1px;
  }
  .stat-cell .slbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    color: var(--gray);
    letter-spacing: 2px;
    margin-top: 2px;
  }

  /* ===== Topology svg ===== */
  .node {
    fill: var(--bg2);
    stroke: var(--green);
    stroke-width: 1;
  }
  .node.kali { stroke: var(--cyan); }
  .node.dim { stroke: var(--gray-dim); }
  .node-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 6px;
    fill: var(--green);
    letter-spacing: 0.5px;
    text-anchor: middle;
  }
  .node-label.cyan { fill: var(--cyan); }
  .link {
    stroke: var(--green-dim);
    stroke-width: 0.6;
    stroke-dasharray: 2 2;
    fill: none;
  }
  .link.flow {
    stroke-dasharray: 4 3;
    animation: flow 2s linear infinite;
  }
  @keyframes flow {
    to { stroke-dashoffset: -14; }
  }
  .pulse-ring {
    fill: none;
    stroke: var(--green);
    stroke-width: 0.8;
    opacity: 0;
    animation: pulseRing 3s ease-out infinite;
  }
  @keyframes pulseRing {
    0% { r: 4; opacity: 0.8; }
    100% { r: 16; opacity: 0; }
  }

  /* ===== Quotes footer ===== */
  .quotes {
    border-top: 1px solid var(--green-dim);
    background: linear-gradient(0deg, var(--bg2) 0%, transparent 100%);
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    padding: 0 20px;
    font-size: 12px;
    overflow: hidden;
  }
  .quote-text {
    color: var(--green);
    font-style: italic;
    text-shadow: 0 0 6px var(--green-glow);
    transition: opacity 0.6s;
  }
  .quote-attr {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gray);
  }

  /* ===== Dossier ===== */
  .dossier {
    position: fixed; inset: 0;
    background: rgba(5,5,7,0.85);
    backdrop-filter: blur(2px);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s;
  }
  .dossier-card {
    background: var(--bg2);
    border: 1px solid var(--green);
    box-shadow: 0 0 30px var(--green-glow);
    width: min(680px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 24px 30px;
    position: relative;
  }
  .dossier-card::before, .dossier-card::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--green);
  }
  .dossier-card::before {
    top: -1px; left: -1px;
    border-top: 2px solid; border-left: 2px solid;
  }
  .dossier-card::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid; border-right: 2px solid;
  }
  .dossier-close {
    position: absolute;
    top: 10px; right: 14px;
    background: transparent;
    border: 1px solid var(--green-dim);
    color: var(--gray);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    letter-spacing: 1px;
  }
  .dossier-close:hover { color: var(--green); border-color: var(--green); }
  .dossier-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--orange);
  }
  .dossier-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 4px;
    color: var(--green);
    text-shadow: 0 0 12px var(--green-glow);
    margin: 4px 0 2px;
  }
  .dossier.orange .dossier-name { color: var(--orange); }
  .dossier.cyan .dossier-name { color: var(--cyan); }
  .dossier-id {
    font-size: 11px;
    color: var(--gray);
    margin-bottom: 16px;
  }
  .dossier-stats {
    display: grid;
    gap: 6px;
    margin: 14px 0;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border: 1px dashed var(--green-dim);
  }
  .stat-bar {
    display: grid;
    grid-template-columns: 70px 1fr 50px;
    align-items: center;
    gap: 10px;
    font-size: 10px;
  }
  .stat-bar .lbl {
    font-family: 'Orbitron', sans-serif;
    color: var(--gray);
    letter-spacing: 1px;
  }
  .stat-bar .track {
    height: 8px;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--gray-dim);
    position: relative;
    overflow: hidden;
  }
  .stat-bar .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    transition: width 0.6s ease;
  }
  .stat-bar.life .fill { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .stat-bar.psy .fill { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
  .stat-bar.sta .fill { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
  .stat-bar .pct {
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
  }
  .stat-bar.life .pct { color: var(--green); }
  .stat-bar.psy .pct { color: var(--cyan); }
  .stat-bar.sta .pct { color: var(--orange); }

  .dossier-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 14px;
    font-size: 12px;
    margin: 14px 0;
  }
  .dossier-grid dt {
    color: var(--gray);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .dossier-grid dd { color: var(--green); }
  .dossier.orange .dossier-grid dd { color: var(--orange); }
  .dossier.cyan .dossier-grid dd { color: var(--cyan); }
  .dossier-bio {
    border-top: 1px dashed var(--green-dim);
    padding-top: 14px;
    margin-top: 14px;
    color: var(--gray);
    line-height: 1.6;
    font-size: 12px;
  }
  .dossier-bio strong { color: var(--green); }
  .dossier-quote {
    margin-top: 14px;
    padding: 10px 14px;
    border-left: 2px solid var(--green);
    background: rgba(0,255,65,0.04);
    color: var(--green);
    font-style: italic;
    font-size: 12px;
  }

  /* ===== Easter egg overlay ===== */
  .egg {
    position: fixed;
    bottom: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    background: var(--bg2);
    border: 1px solid var(--orange);
    color: var(--orange);
    padding: 10px 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-shadow: 0 0 8px var(--orange-dim);
    box-shadow: 0 0 20px rgba(255,107,26,0.3);
    animation: eggIn 0.3s ease-out;
  }
  @keyframes eggIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  .typebuf {
    position: fixed;
    bottom: 44px; left: 12px;
    font-size: 10px;
    color: var(--gray-dim);
    font-family: 'JetBrains Mono', monospace;
    z-index: 400;
    letter-spacing: 1px;
  }

  /* ===== MGS-style alert overlay (!) ===== */
  .mgs-alert {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .mgs-alert .alert-mark {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 240px;
    color: var(--red);
    text-shadow: 0 0 40px var(--red), 0 0 80px var(--red);
    animation: alertMark 0.4s ease-out;
  }
  @keyframes alertMark {
    0% { transform: scale(0.2); opacity: 0; }
    30% { transform: scale(1.4); opacity: 1; }
    60% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
  }

  /* ===== Cardboard box easter ===== */
  .cardboard {
    position: fixed;
    bottom: 50px; right: 30px;
    z-index: 600;
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.05;
    white-space: pre;
    text-shadow: 0 0 4px var(--orange-dim);
    animation: boxIn 0.4s ease-out;
  }
  .cardboard small {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
  }
  @keyframes boxIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== Tachikoma childlike mode ===== */
  body.tachi-mode .tachi-line {
    color: var(--cyan) !important;
    font-style: normal !important;
  }
  body.tachi-mode .tachi-line::after {
    content: ' (◕‿◕)';
    color: var(--orange);
  }

  /* ===== Stand alone complex ===== */
  .sac {
    position: fixed; inset: 0;
    z-index: 700;
    background: rgba(5,5,7,0.92);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 20px;
    animation: fadeIn 0.4s;
  }
  .sac-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    letter-spacing: 6px;
    color: var(--orange);
    text-shadow: 0 0 16px var(--orange);
    text-align: center;
  }
  .sac-sub {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 2px;
    text-align: center;
    max-width: 500px;
    line-height: 1.6;
  }
  .sac-glitch {
    animation: glitch 0.3s steps(2) infinite;
  }
  @keyframes glitch {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 2px); }
  }

  /* ===== White rabbit pulse ===== */
  .rabbit-target {
    animation: rabbitFlash 0.4s ease-in-out 6;
  }
  @keyframes rabbitFlash {
    0%, 100% { fill: var(--bg2); stroke: var(--green); }
    50% { fill: #fff; stroke: #fff; r: 8; }
  }

  /* ===== Right panel buttons ===== */
  .ph-btn {
    background: rgba(91,192,122,0.05);
    border: 1px solid var(--green-dim);
    color: var(--green);
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .ph-btn:hover {
    background: rgba(91,192,122,0.16);
    border-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }
  .ph-btn:active { transform: scale(0.95); }
  .panel.codec .ph-btn { color: var(--cyan); border-color: var(--cyan-dim); }
  .panel.codec .ph-btn:hover { border-color: var(--cyan); background: rgba(79,184,204,0.15); }
  .panel.at-field .ph-btn, .panel.mother .ph-btn, .panel.magi .ph-btn { color: var(--orange); border-color: var(--orange-dim); }
  .panel.at-field .ph-btn:hover, .panel.mother .ph-btn:hover, .panel.magi .ph-btn:hover { border-color: var(--orange); background: rgba(230,121,42,0.15); }

  /* ===== MAGI trio ===== */
  .magi-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
  }
  .magi-node {
    border: 1px solid var(--orange-dim);
    background: rgba(230,121,42,0.05);
    padding: 5px 4px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--orange);
    position: relative;
    transition: all 0.3s;
  }
  .magi-node small {
    display: block;
    font-size: 7px;
    color: var(--gray-dim);
    margin-top: 1px;
    letter-spacing: 1px;
  }
  .magi-node.thinking {
    animation: magiThink 0.5s ease-in-out infinite;
  }
  @keyframes magiThink {
    0%, 100% { background: rgba(230,121,42,0.05); }
    50% { background: rgba(230,121,42,0.30); border-color: var(--orange); }
  }
  .magi-node.approve {
    background: rgba(91,192,122,0.20);
    border-color: var(--green);
    color: var(--green);
  }
  .magi-node.reject {
    background: rgba(217,69,69,0.20);
    border-color: var(--red);
    color: var(--red);
  }
  .magi-result {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 4px;
    margin: 6px 0 8px;
    border: 1px solid var(--gray-dim);
    color: var(--gray);
    transition: all 0.3s;
  }
  .magi-result.go {
    border-color: var(--green);
    color: var(--green);
    background: rgba(91,192,122,0.10);
  }
  .magi-result.no {
    border-color: var(--red);
    color: var(--red);
    background: rgba(217,69,69,0.10);
  }

  /* ===== A.T. FIELD overlay ===== */
  .atfield-overlay {
    position: fixed; inset: 0;
    z-index: 700;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, rgba(230,121,42,0.16) 0%, transparent 70%);
    animation: atfieldFade 1.6s ease-out forwards;
  }
  .atfield-svg {
    width: 80vmin; height: 80vmin;
    opacity: 0;
    animation: atfieldShow 1.6s ease-out forwards;
  }
  .atfield-svg .hex {
    fill: none;
    stroke: var(--orange);
    stroke-width: 0.4;
    filter: drop-shadow(0 0 2px var(--orange-dim));
  }
  @keyframes atfieldShow {
    0% { opacity: 0; transform: scale(0.7); }
    30% { opacity: 0.85; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.2); }
  }
  @keyframes atfieldFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
  }
  .atfield-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 8px;
    color: var(--orange);
    text-shadow: 0 0 10px var(--orange-dim);
    white-space: nowrap;
  }
  .atfield-label small {
    display: block;
    text-align: center;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gray);
    margin-top: 6px;
  }

  /* ===== CODEC INCOMING overlay ===== */
  .codec-call {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    background: var(--bg2);
    border: 1px solid var(--cyan);
    padding: 14px;
    width: min(440px, 90vw);
    box-shadow: 0 0 22px rgba(79,184,204,0.25);
    animation: callIn 0.3s ease-out;
  }
  @keyframes callIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  .codec-call-portrait {
    border: 1px solid var(--cyan-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    line-height: 1.05;
    white-space: pre;
    color: var(--cyan);
    padding: 6px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: callPortrait 0.4s steps(3) infinite;
  }
  @keyframes callPortrait {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
  }
  .codec-call-portrait::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(79,184,204,0.10) 0 1px, transparent 1px 2px);
    pointer-events: none;
  }
  .codec-call-info { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
  .codec-call-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--cyan);
    animation: blink 0.8s steps(1) infinite;
  }
  .codec-call-from {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(79,184,204,0.25);
  }
  .codec-call-freq {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: var(--gray);
  }
  .codec-call-msg {
    font-size: 11px;
    color: var(--gray);
    font-style: italic;
    margin-top: 4px;
  }

  /* ===== SEELE monoliths ===== */
  .seele {
    position: fixed; inset: 0;
    z-index: 720;
    background: rgba(0,0,0,0.94);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 18px;
    padding: 30px;
    animation: fadeIn 0.4s;
  }
  .seele-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .seele-monolith {
    width: 70px;
    height: 120px;
    background: #050505;
    border: 1px solid var(--orange);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(230,121,42,0.18);
  }
  .seele-monolith .num {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: var(--orange);
    text-shadow: 0 0 6px var(--orange-dim);
  }
  .seele-monolith .lbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 7px;
    letter-spacing: 2px;
    color: var(--orange-dim);
    margin-top: 4px;
  }
  .seele-monolith.silent { opacity: 0.35; }
  .seele-monolith.silent .num { color: var(--gray-dim); text-shadow: none; }
  .seele-text {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    color: var(--orange);
  }
  .seele-text small {
    display: block;
    font-size: 9px;
    color: var(--gray);
    letter-spacing: 2px;
    margin-top: 8px;
  }

  /* ===== Pattern Blue / Orange alert ===== */
  .pattern-alert {
    position: fixed;
    top: 70px; right: 14px;
    z-index: 700;
    background: var(--bg2);
    border: 1px solid var(--cyan);
    padding: 8px 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--cyan);
    text-shadow: 0 0 4px rgba(79,184,204,0.3);
    animation: patternIn 0.3s ease-out;
  }
  .pattern-alert small {
    display: block;
    font-size: 8px;
    color: var(--gray);
    margin-top: 2px;
    letter-spacing: 1px;
  }
  .pattern-alert.orange {
    border-color: var(--orange);
    color: var(--orange);
    text-shadow: 0 0 4px var(--orange-dim);
  }
  @keyframes patternIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* ===== NERV emblem ===== */
  .nerv {
    position: fixed;
    bottom: 44px;
    right: 14px;
    z-index: 100;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--orange-dim);
    text-align: right;
    line-height: 1.4;
    opacity: 0.55;
    pointer-events: none;
  }
  .nerv-glyph {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: var(--orange);
    letter-spacing: -1px;
  }
  .nerv-motto {
    font-style: italic;
    color: var(--gray);
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0;
  }

  /* ===== AT-field hex strip in panel ===== */
  .at-hex-strip {
    display: flex; gap: 4px;
    margin: 4px 0 10px;
    justify-content: space-around;
  }
  .at-hex-strip svg {
    width: 22px; height: 24px;
    filter: drop-shadow(0 0 2px var(--orange-dim));
    transition: filter 0.3s;
  }
  .at-hex-strip svg polygon {
    fill: rgba(230,121,42,0.08);
    stroke: var(--orange);
    stroke-width: 1.2;
    transition: fill 0.4s;
  }
  .at-hex-strip svg.deployed polygon {
    fill: rgba(230,121,42,0.45);
    animation: hexPulse 1.2s ease-in-out;
  }
  .at-hex-strip svg.deployed { filter: drop-shadow(0 0 5px var(--orange)); }
  @keyframes hexPulse {
    50% { fill: rgba(230,121,42,0.7); }
  }

  /* ===== Topology nodes interactive ===== */
  #topo .node {
    cursor: pointer;
    transition: stroke-width 0.2s, fill 0.2s;
  }
  #topo .node:hover {
    stroke-width: 2.5;
    fill: rgba(91,192,122,0.18);
  }
  #topo .node.kali:hover { fill: rgba(79,184,204,0.18); }
  .node-tooltip {
    position: fixed;
    background: var(--bg2);
    border: 1px solid var(--green);
    padding: 6px 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--green);
    pointer-events: none;
    z-index: 200;
    white-space: nowrap;
    box-shadow: 0 0 8px var(--green-glow);
  }
  .node-tooltip small {
    display: block;
    font-size: 8px;
    color: var(--gray);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0;
    margin-top: 2px;
  }

  /* ===== NERV logo SVG ===== */
  .nerv-svg {
    width: 28px; height: 28px;
    margin-left: auto;
    display: block;
    margin-bottom: 3px;
  }
  .nerv-svg .leaf {
    fill: var(--orange);
    filter: drop-shadow(0 0 3px var(--orange-dim));
  }

  /* ===== Title section buttons ===== */
  .title-btn {
    background: rgba(91,192,122,0.05);
    border: 1px solid var(--green-dim);
    color: var(--green);
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    padding: 1px 7px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
  }
  .title-btn:hover {
    background: rgba(91,192,122,0.16);
    border-color: var(--green);
  }
  .title-btn:active { transform: scale(0.95); }
  .title-btn.orange { color: var(--orange); border-color: var(--orange-dim); }
  .title-btn.orange:hover { background: rgba(230,121,42,0.15); border-color: var(--orange); }
  .title-btn.cyan { color: var(--cyan); border-color: var(--cyan-dim); }
  .title-btn.cyan:hover { background: rgba(79,184,204,0.15); border-color: var(--cyan); }

  .card.scanning {
    animation: cardScan 0.7s ease-out;
  }
  @keyframes cardScan {
    0% { box-shadow: 0 0 0 transparent; transform: translateY(0); }
    40% { box-shadow: 0 0 18px var(--green-glow); transform: translateY(-2px); border-color: var(--green); }
    100% { box-shadow: 0 0 0 transparent; transform: translateY(0); }
  }

  /* ===== ADAM embryo overlay ===== */
  .eva-overlay {
    position: fixed; inset: 0;
    z-index: 720;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn 0.5s;
  }
  .eva-overlay.adam {
    background: radial-gradient(circle at center, rgba(180,200,210,0.18) 0%, rgba(0,0,0,0.95) 60%);
  }
  .eva-art {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.05;
    white-space: pre;
  }
  .eva-overlay.adam .eva-art {
    color: #b8d4e0;
    text-shadow: 0 0 6px rgba(184,212,224,0.4);
  }
  .eva-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 6px;
    text-align: center;
  }
  .eva-overlay.adam .eva-label {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(79,184,204,0.4);
  }
  .eva-label small {
    display: block;
    font-size: 9px;
    color: var(--gray);
    letter-spacing: 2px;
    margin-top: 6px;
  }

  /* ===== LILITH overlay ===== */
  .eva-overlay.lilith {
    background: radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, rgba(20,5,5,0.96) 70%);
  }
  .eva-overlay.lilith .eva-art {
    color: #d8d8d8;
    text-shadow: 0 0 6px rgba(255,200,200,0.25);
  }
  .eva-overlay.lilith .eva-label {
    color: #d8b0b0;
    text-shadow: 0 0 8px rgba(217,69,69,0.3);
  }

  /* ===== RAMIEL octahedron ===== */
  .eva-overlay.ramiel {
    background: radial-gradient(circle at center, rgba(40,80,180,0.20) 0%, rgba(0,0,15,0.94) 60%);
  }
  .ramiel-svg {
    width: 220px; height: 260px;
    filter: drop-shadow(0 0 24px #4a6ec8);
    animation: ramielSpin 5s linear infinite;
  }
  .ramiel-svg polygon {
    fill: #2c4080;
    stroke: #7a9aff;
    stroke-width: 1.4;
    fill-opacity: 0.65;
  }
  @keyframes ramielSpin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
  }
  .eva-overlay.ramiel .eva-label {
    color: #a4bfff;
    text-shadow: 0 0 10px #6a8eff;
  }

  /* ===== LELIEL Dirac sea ===== */
  .leliel-shadow {
    position: fixed; inset: 0;
    z-index: 720;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0%, transparent 28%, rgba(0,0,0,0.97) 45%);
    animation: lelielExpand 3.2s ease-in-out forwards;
  }
  @keyframes lelielExpand {
    0% { opacity: 0; transform: scale(0.4); }
    25%, 75% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
  }
  .leliel-label {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 721;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    color: #c8c8c8;
    text-align: center;
  }
  .leliel-label small {
    display: block;
    font-size: 8px;
    color: var(--gray);
    letter-spacing: 2px;
    margin-top: 4px;
  }

  /* ===== IRUEL viral intrusion ===== */
  .iruel-overlay {
    position: fixed; inset: 0;
    z-index: 720;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(217,69,69,0.08) 0 2px, transparent 2px 4px);
    animation: iruelFlicker 2.6s steps(26) forwards;
  }
  @keyframes iruelFlicker {
    0%, 100% { opacity: 0; }
    10%, 88% { opacity: 1; }
  }
  .iruel-label {
    position: fixed;
    top: 28%; left: 50%;
    transform: translateX(-50%);
    z-index: 721;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--red);
    text-shadow: 0 0 8px var(--red);
    text-align: center;
    animation: iruelGlitch 0.4s steps(2) infinite;
  }
  .iruel-label small {
    display: block;
    font-size: 9px;
    color: var(--gray);
    letter-spacing: 2px;
    margin-top: 6px;
    text-shadow: none;
  }
  @keyframes iruelGlitch {
    0%, 100% { transform: translateX(-50%) translate(0, 0); }
    25% { transform: translateX(-50%) translate(3px, -1px); }
    50% { transform: translateX(-50%) translate(-2px, 2px); }
    75% { transform: translateX(-50%) translate(1px, 1px); }
  }

  /* ===== TABRIS / 12-WING angel ===== */
  .eva-overlay.tabris {
    background: radial-gradient(circle at center, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.94) 70%);
  }
  .tabris-svg {
    width: 380px; height: 380px;
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.4));
  }
  .tabris-svg .wing {
    stroke: #f0f0f0;
    stroke-width: 1.4;
    fill: rgba(255,255,255,0.05);
  }
  .tabris-svg .core {
    fill: #e8e8e8;
    filter: drop-shadow(0 0 6px #ffffff);
  }
  .tabris-svg .halo {
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 4px var(--orange));
  }
  .eva-overlay.tabris .eva-label {
    color: #f0f0f0;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    margin-top: 14px;
  }

  /* ===== LONGINUS lance ===== */
  .eva-overlay.longinus {
    background: radial-gradient(circle at center, rgba(40,30,10,0.5) 0%, rgba(0,0,0,0.96) 70%);
  }
  .eva-overlay.longinus .eva-art {
    color: #c8a868;
    text-shadow: 0 0 6px rgba(200,168,104,0.4);
    font-size: 10px;
  }
  .eva-overlay.longinus .eva-label {
    color: #d8b888;
    text-shadow: 0 0 8px rgba(200,168,104,0.4);
  }

  /* ===== Third Impact ===== */
  .third-impact {
    position: fixed; inset: 0;
    z-index: 730;
    background: radial-gradient(circle at center, rgba(255,80,80,0.5) 0%, rgba(180,30,30,0.85) 50%, rgba(40,0,0,0.95) 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    animation: thirdFade 5s ease-out forwards;
  }
  @keyframes thirdFade {
    0% { opacity: 0; }
    10%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }
  .third-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: 8px;
    color: #ffe0e0;
    text-shadow: 0 0 20px #ff4040, 0 0 40px #ff4040;
    text-align: center;
  }
  .third-text small {
    display: block;
    font-size: 11px;
    letter-spacing: 4px;
    color: #ffc0c0;
    margin-top: 14px;
  }

  /* ===== LEFT TELEMETRY STACK ===== */
  .rain-col {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .rain-col .left-panels {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 5px;
    flex: 1;
    overflow: hidden;
  }
  .rain-col #rain { z-index: 1; }
  .lp {
    border: 1px solid var(--green-dim);
    background: rgba(5,8,9,0.72);
    backdrop-filter: blur(2px);
    padding: 5px 6px;
    position: relative;
  }
  .lp.cyan { border-color: var(--cyan-dim); }
  .lp.orange { border-color: var(--orange-dim); }
  .lp-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: var(--gray);
    margin-bottom: 3px;
    text-transform: uppercase;
  }
  .lp.cyan .lp-h { color: var(--cyan-dim); }
  .lp.orange .lp-h { color: var(--orange-dim); }
  .lp-v {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--green);
    letter-spacing: 1px;
    line-height: 1;
  }
  .lp.cyan .lp-v { color: var(--cyan); }
  .lp.orange .lp-v { color: var(--orange); }
  .lp-row {
    display: flex; justify-content: space-between;
    font-size: 8px;
    color: var(--gray);
    margin: 1px 0;
    line-height: 1.3;
  }
  .lp-row .v { color: var(--green); }
  .lp-greeting {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--green);
    text-shadow: 0 0 3px var(--green-glow);
    line-height: 1.3;
  }
  .lp-greeting small {
    display: block;
    font-size: 7px;
    color: var(--gray);
    letter-spacing: 1px;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: none;
  }

  .heart {
    display: inline-block;
    color: var(--red);
    font-size: 11px;
    margin-right: 3px;
    animation: heartBeat 1s ease-in-out infinite;
    text-shadow: 0 0 3px var(--red);
  }
  @keyframes heartBeat {
    0%, 60%, 100% { transform: scale(1); }
    30% { transform: scale(1.25); }
    45% { transform: scale(1); }
  }

  .sparkline {
    width: 100%; height: 18px;
    display: block;
    margin-top: 3px;
  }

  .sync-wrap {
    display: flex; gap: 6px; align-items: stretch;
    height: 50px;
  }
  .sync-bar-v {
    width: 10px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--orange-dim);
    position: relative;
    flex-shrink: 0;
  }
  .sync-bar-v .fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, var(--orange) 0%, var(--orange-dim) 100%);
    transition: height 1s ease-out;
  }
  .sync-bar-v .ticks {
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,0,0,0.5) 8px 9px);
  }
  .sync-info {
    flex: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 9px;
  }

  .ticker {
    height: 54px;
    overflow: hidden;
    position: relative;
    font-size: 8px;
  }
  .ticker-content {
    position: absolute; left: 0; right: 0;
    animation: tickerScroll 24s linear infinite;
  }
  @keyframes tickerScroll {
    from { transform: translateY(100%); }
    to { transform: translateY(-260%); }
  }
  .ticker-row {
    padding: 1px 0;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  .ticker-row b {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
    margin-right: 3px;
  }

  .mini-monolith {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    background: #050505;
    border: 1px solid var(--orange);
    padding: 4px 0;
  }
  .mini-monolith .mn {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--orange);
    text-shadow: 0 0 3px var(--orange-dim);
  }
  .mini-monolith .mlbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 6px;
    letter-spacing: 2px;
    color: var(--orange-dim);
    margin-top: 2px;
  }

  .signal-strength {
    display: flex; gap: 1px; align-items: end;
    height: 12px;
  }
  .signal-strength span {
    width: 3px;
    background: var(--green-dim);
  }
  .signal-strength span.on {
    background: var(--green);
    box-shadow: 0 0 2px var(--green-glow);
  }
  .signal-strength span:nth-child(1) { height: 25%; }
  .signal-strength span:nth-child(2) { height: 50%; }
  .signal-strength span:nth-child(3) { height: 75%; }
  .signal-strength span:nth-child(4) { height: 100%; }

  /* ===== AUDIO TOGGLE ===== */
  .audio-toggle {
    position: fixed;
    bottom: 14px; left: 14px;
    z-index: 9000;
    background: var(--bg2);
    border: 1px solid var(--gray-dim);
    color: var(--gray);
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    padding: 4px 9px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .audio-toggle:hover { border-color: var(--green); color: var(--green); }
  .audio-toggle.on {
    border-color: var(--green);
    color: var(--green);
    text-shadow: 0 0 3px var(--green-glow);
  }

  /* ===== AUDIO HINT (post-boot, y-n10 inspired) ===== */
  .audio-hint {
    position: fixed;
    bottom: 48px; left: 18px;
    z-index: 8990;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    background: rgba(6,8,9,0.85);
    border: 1px dashed var(--green-dim);
    color: var(--gray);
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    max-width: 260px;
  }
  .audio-hint.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .audio-hint-arrow {
    color: var(--green);
    font-size: 14px;
    line-height: 1;
    margin-bottom: -1px;
    animation: hintPulse 1.4s ease-in-out infinite;
    text-shadow: 0 0 4px var(--green-glow);
  }
  @keyframes hintPulse {
    0%, 100% { transform: translate(0,0); opacity: 1; }
    50% { transform: translate(-3px,3px); opacity: 0.6; }
  }
  .audio-hint-text {
    color: var(--green);
    text-shadow: 0 0 3px var(--green-glow);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .audio-hint-text small {
    color: var(--gray);
    font-size: 7px;
    letter-spacing: 1px;
    text-shadow: none;
    text-transform: lowercase;
  }
  @media (max-width: 600px) {
    .audio-hint {
      bottom: 56px;
      left: 12px;
      max-width: 180px;
      font-size: 7px;
    }
    .audio-hint-arrow { display: none; }
  }

  /* ===== 3D DIVE OVERLAY ===== */
  .dive-overlay {
    position: fixed; inset: 0;
    z-index: 800;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.5s;
  }
  .dive-overlay canvas { display: block; }
  .dive-info {
    position: absolute;
    top: 20px; left: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(79,184,204,0.4);
    pointer-events: none;
  }
  .dive-info small {
    display: block;
    font-size: 8px;
    color: var(--gray);
    letter-spacing: 1px;
    margin-top: 4px;
  }
  .dive-exit {
    position: absolute;
    top: 20px; right: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gray);
    background: var(--bg2);
    border: 1px solid var(--gray-dim);
    padding: 4px 9px;
    cursor: pointer;
  }
  .dive-exit:hover { color: var(--cyan); border-color: var(--cyan); }
  .dive-loading {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    animation: pulse 1.4s infinite;
  }

  /* ===== Skip link + a11y ===== */
  .skip-link {
    position: absolute;
    top: -40px; left: 8px;
    background: var(--green);
    color: var(--bg);
    padding: 5px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    z-index: 99999;
    text-decoration: none;
    letter-spacing: 1px;
  }
  .skip-link:focus { top: 8px; outline: 2px solid var(--cyan); }

  button:focus-visible, [tabindex]:focus-visible, .card:focus-visible, .tachi-card:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }

  /* ===== Reduced motion ===== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .pulse-ring, .alert-bars span, .dot, .heart,
    .badge.live::before, .ramiel-svg, .ticker-content,
    .placard::before, .placard::after { animation: none !important; }
    body::before, body::after { display: none; }
    #rain, #bootRain { display: none; }
  }

  /* ===== BOOT REWORK ===== */
  .boot-phase {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
  }
  .boot-tw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    white-space: pre;
    text-align: center;
    min-height: 110px;
  }
  .boot-tw::after {
    content: '_';
    animation: blink 1s steps(1) infinite;
  }
  .boot-glitch-flash {
    position: absolute; inset: 0;
    background: var(--green);
    animation: glitchFlash 0.6s steps(4);
    pointer-events: none;
  }
  @keyframes glitchFlash {
    0%, 100% { opacity: 0; }
    20%, 40% { opacity: 0.3; }
    60%, 80% { opacity: 0.1; }
  }
  .boot-nerv-glitch {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 80px;
    letter-spacing: 16px;
    color: var(--orange);
    text-shadow: 0 0 16px var(--orange-dim);
    animation: nervGlitch 0.8s ease-out;
  }
  @keyframes nervGlitch {
    0% { opacity: 0; transform: scale(0.5); filter: blur(20px); }
    20% { opacity: 1; transform: scale(1.2) translate(3px, -2px); filter: blur(0); }
    30% { transform: translate(-3px, 2px); }
    50% { transform: translate(2px, 1px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
  }
  .boot-nerv-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--gray);
    animation: fadeIn 0.6s 0.5s backwards;
  }
  .boot-auth-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 5px;
    color: var(--orange);
    text-shadow: 0 0 8px var(--orange-dim);
  }
  .boot-auth-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--green);
    letter-spacing: 2px;
  }
  .boot-progress-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    width: min(440px, 82vw);
  }
  .boot-prog-row {
    display: grid;
    grid-template-columns: 140px 1fr 60px;
    align-items: center;
    gap: 10px;
  }
  .boot-prog-row .name { color: var(--gray); font-size: 11px; letter-spacing: 1px; }
  .boot-prog-row .bar {
    height: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--gray-dim);
    position: relative;
    overflow: hidden;
  }
  .boot-prog-row .bar .f {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--green);
    width: 0;
    transition: width 0.2s ease;
    box-shadow: 0 0 4px var(--green-glow);
  }
  .boot-prog-row .pct {
    font-size: 10px;
    color: var(--gray);
    font-family: 'Orbitron', sans-serif;
    text-align: right;
    letter-spacing: 1px;
  }
  .boot-prog-row.done .name { color: var(--green); }
  .boot-prog-row.done .pct { color: var(--green); }
  .boot-title-stamp {
    display: block;
    margin: 0 auto 12px auto;
    filter: drop-shadow(0 0 12px rgba(91,192,122,0.35));
  }

  /* ===== RESET CONFIRM (cmd: wipe / reset) ===== */
  .reset-confirm {
    position: fixed;
    inset: 0;
    z-index: 880;
    background: rgba(5,5,7,0.92);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.2s;
  }
  .reset-card {
    background: var(--bg2);
    border: 2px solid var(--red);
    box-shadow: 0 0 30px rgba(217,69,69,0.35);
    width: min(440px, 100%);
    padding: 26px 30px;
    position: relative;
    animation: modalIn 0.25s ease-out;
  }
  .reset-card::before, .reset-card::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-color: var(--red);
  }
  .reset-card::before { top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid; }
  .reset-card::after { bottom: -2px; right: -2px; border-bottom: 2px solid; border-right: 2px solid; }
  .reset-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--red);
    margin-bottom: 6px;
    animation: lainBlink 1s steps(2) infinite;
  }
  .reset-h {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--red);
    text-shadow: 0 0 6px rgba(217,69,69,0.5);
    margin-bottom: 14px;
  }
  .reset-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 8px;
  }
  .reset-warn {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--orange);
    margin-bottom: 18px;
    text-transform: uppercase;
  }
  .reset-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .reset-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 7px 14px;
    cursor: pointer;
    border: 1px solid;
    background: transparent;
    transition: all 0.15s;
  }
  .reset-btn.cancel {
    color: var(--gray);
    border-color: var(--gray-dim);
  }
  .reset-btn.cancel:hover {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }
  .reset-btn.confirm {
    color: var(--red);
    border-color: var(--red);
    background: rgba(217,69,69,0.08);
  }
  .reset-btn.confirm:hover {
    background: rgba(217,69,69,0.22);
    box-shadow: 0 0 8px rgba(217,69,69,0.45);
  }

  /* ===== NODE MODAL (topology click — expanded mini-dossier) ===== */
  .node-modal {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(5,5,7,0.86);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.2s;
  }
  .node-modal-card {
    background: var(--bg2);
    border: 2px solid var(--green);
    box-shadow: 0 0 24px var(--green-glow);
    width: min(560px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 26px 30px;
    position: relative;
    animation: modalIn 0.25s ease-out;
  }
  .node-modal-card.cyan {
    border-color: var(--cyan);
    box-shadow: 0 0 24px rgba(79,184,204,0.3);
  }
  .node-modal-card::before, .node-modal-card::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-color: var(--green);
  }
  .node-modal-card.cyan::before, .node-modal-card.cyan::after { border-color: var(--cyan); }
  .node-modal-card::before { top: -2px; left: -2px; border-top: 2px solid; border-left: 2px solid; }
  .node-modal-card::after { bottom: -2px; right: -2px; border-bottom: 2px solid; border-right: 2px solid; }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
  }

  .node-modal-close {
    position: absolute;
    top: 10px; right: 14px;
    background: transparent;
    border: 1px solid var(--green-dim);
    color: var(--gray);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 3px 8px;
    cursor: pointer;
    letter-spacing: 1px;
  }
  .node-modal-card.cyan .node-modal-close { border-color: var(--cyan-dim); }
  .node-modal-close:hover {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }

  .node-modal-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--gray);
    margin-bottom: 6px;
  }
  .node-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
  }
  .node-modal-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
  }
  .node-modal-card.cyan .node-modal-name {
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(79,184,204,0.4);
  }
  .node-status {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 3px 8px;
    border: 1px solid var(--green);
    color: var(--green);
    background: rgba(91,192,122,0.08);
  }
  .node-status.status-online {
    animation: statusPulse 2s ease-in-out infinite;
  }
  .node-status.status-standby {
    color: var(--orange);
    border-color: var(--orange);
    background: rgba(230,121,42,0.08);
  }
  .node-status.status-offline {
    color: var(--gray);
    border-color: var(--gray-dim);
    background: rgba(255,255,255,0.02);
  }
  @keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 4px currentColor; }
    50% { box-shadow: 0 0 10px currentColor; }
  }

  .node-modal-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gray);
    margin-bottom: 14px;
  }
  .node-modal-bio {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 16px;
  }

  .node-modal-section-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--orange);
    margin: 12px 0 6px;
    border-bottom: 1px dashed var(--orange-dim);
    padding-bottom: 4px;
  }

  .node-modal-stats {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    margin-bottom: 14px;
  }
  .node-modal-stats dt {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--gray);
  }
  .node-modal-stats dd { color: var(--green); }
  .node-modal-card.cyan .node-modal-stats dd { color: var(--cyan); }

  .node-modal-conns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
  }
  .node-conn-btn {
    background: rgba(91,192,122,0.06);
    border: 1px solid var(--green-dim);
    color: var(--green);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s;
  }
  .node-conn-btn:hover {
    background: rgba(91,192,122,0.16);
    border-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
    transform: translateX(2px);
  }
  .node-conn-btn.cyan {
    color: var(--cyan);
    border-color: var(--cyan-dim);
    background: rgba(79,184,204,0.05);
  }
  .node-conn-btn.cyan:hover {
    background: rgba(79,184,204,0.16);
    border-color: var(--cyan);
    box-shadow: 0 0 6px rgba(79,184,204,0.35);
  }
  .node-conn-btn .arrow {
    color: var(--gray);
    font-size: 14px;
  }
  .node-conn-btn:hover .arrow { color: inherit; }

  .node-modal-actions {
    display: flex;
    gap: 8px;
    border-top: 1px dashed var(--green-dim);
    padding-top: 12px;
  }
  .node-modal-card.cyan .node-modal-actions { border-top-color: var(--cyan-dim); }
  .node-modal-action {
    background: rgba(230,121,42,0.08);
    border: 1px solid var(--orange-dim);
    color: var(--orange);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .node-modal-action:hover {
    background: rgba(230,121,42,0.2);
    border-color: var(--orange);
    box-shadow: 0 0 6px rgba(230,121,42,0.35);
  }

  @media (max-width: 720px) {
    .node-modal-card { padding: 20px 18px; }
    .node-modal-name { font-size: 18px; letter-spacing: 2px; }
    .node-modal-stats { grid-template-columns: 95px 1fr; }
  }

  /* ===== LAIN ENTER OVERLAY (cmd: lain / wired / iwakura / protocol7 / eiri) ===== */
  .lain-enter {
    position: fixed; inset: 0;
    z-index: 870;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(6,8,9,0.94);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    backdrop-filter: blur(3px);
    color: var(--cyan);
    text-align: center;
  }
  .lain-enter.show { opacity: 1; }
  .lain-enter-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    color: var(--cyan-dim);
    margin-bottom: 18px;
    animation: lainBlink 1s steps(2) infinite;
  }
  @keyframes lainBlink {
    50% { opacity: 0.3; }
  }
  .lain-enter-h {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 6px;
    color: var(--cyan);
    text-shadow: 0 0 12px rgba(79,184,204,0.55);
    line-height: 1.05;
  }
  .lain-enter-h small {
    display: block;
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green-glow);
    margin-top: 8px;
    font-weight: 700;
  }
  .lain-enter-sub {
    margin-top: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gray);
  }
  @media (max-width: 720px) {
    .lain-enter-h { font-size: 32px; letter-spacing: 3px; }
    .lain-enter-h small { font-size: 14px; letter-spacing: 2px; }
  }

  /* ===== LAIN EGGS — PHANTOMa ===== */
  .ovl.phantoma-overlay { background: rgba(2,4,6,0.96); }
  .ovl.phantoma-overlay .ovl-frame::before,
  .ovl.phantoma-overlay .ovl-frame::after,
  .ovl.phantoma-overlay .ovl-frame > div { border-color: var(--cyan); }
  .phantoma-grid {
    width: min(640px, 80vw);
    height: auto;
    filter: drop-shadow(0 0 8px rgba(79,184,204,0.5));
    animation: phantomaPulse 2.4s ease-in-out infinite;
  }
  @keyframes phantomaPulse {
    0%, 100% { opacity: 0.85; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
  }
  .phantoma-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: 8px;
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(79,184,204,0.5);
    text-align: center;
  }
  .phantoma-text small {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gray);
    margin-top: 6px;
    text-transform: lowercase;
  }
  .phantoma-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--green);
    text-shadow: 0 0 3px var(--green-glow);
    animation: lainBlink 1.2s steps(2) infinite;
  }

  /* ===== LAIN EGGS — CYBERIA ===== */
  .ovl.cyberia-overlay {
    background: radial-gradient(ellipse at center, rgba(20,5,5,0.96), rgba(0,0,0,0.98));
  }
  .ovl.cyberia-overlay .ovl-frame::before,
  .ovl.cyberia-overlay .ovl-frame::after,
  .ovl.cyberia-overlay .ovl-frame > div { border-color: var(--red); }
  .cyberia-flicker {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 84px;
    letter-spacing: 12px;
    color: var(--orange);
    text-shadow: 0 0 12px var(--orange), 0 0 24px rgba(230,121,42,0.4);
    animation: cyberiaFlicker 0.8s steps(8) infinite;
  }
  @keyframes cyberiaFlicker {
    0%, 95%, 100% { opacity: 1; transform: translateX(0); }
    96% { opacity: 0.4; transform: translateX(-2px); }
    97% { opacity: 1; transform: translateX(2px); }
    98% { opacity: 0.6; }
  }
  .cyberia-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--gray);
  }
  .cyberia-stim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--red);
    background: rgba(217,69,69,0.08);
    padding: 14px 22px;
    margin-top: 8px;
  }
  .stim-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--red);
    animation: lainBlink 0.6s steps(2) infinite;
  }
  .stim-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 8px;
    color: var(--red);
    text-shadow: 0 0 8px rgba(217,69,69,0.6);
  }
  .stim-warn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--gray);
    max-width: 320px;
    text-align: center;
  }

  /* ===== LAIN EGGS — KNIGHTS ===== */
  .ovl.knights-overlay { background: rgba(2,4,6,0.97); }
  .ovl.knights-overlay .ovl-frame::before,
  .ovl.knights-overlay .ovl-frame::after,
  .ovl.knights-overlay .ovl-frame > div { border-color: var(--cyan); }
  .knights-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan-dim);
  }
  .knights-h {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--gray);
    letter-spacing: 1px;
    font-style: italic;
  }
  .knights-grid {
    display: grid;
    grid-template-columns: repeat(13, auto);
    gap: 12px;
    margin-top: 8px;
  }
  .knight-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .knight-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--gray-dim);
  }
  .knight-bracket {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    color: var(--cyan);
    line-height: 1;
    text-shadow: 0 0 4px rgba(79,184,204,0.4);
    animation: knightPulse 2.4s ease-in-out infinite;
  }
  .knight-cell:nth-child(2n) .knight-bracket { animation-delay: 0.4s; }
  .knight-cell:nth-child(3n) .knight-bracket { animation-delay: 0.8s; }
  .knight-cell:nth-child(5n) .knight-bracket { animation-delay: 1.2s; }
  @keyframes knightPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  .knight-id {
    font-family: 'Orbitron', sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
    color: var(--gray-dim);
  }
  .knights-foot {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--gray);
    letter-spacing: 1px;
    margin-top: 4px;
  }
  @media (max-width: 720px) {
    .knights-grid { grid-template-columns: repeat(7, auto); gap: 8px; }
    .knight-bracket { font-size: 22px; }
  }

  /* ===== LAIN EGGS — NAVI ===== */
  .ovl.navi-overlay { background: rgba(2,4,6,0.97); }
  .ovl.navi-overlay .ovl-frame::before,
  .ovl.navi-overlay .ovl-frame::after,
  .ovl.navi-overlay .ovl-frame > div { border-color: var(--green); }
  .navi-art {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.25;
    color: var(--green);
    text-shadow: 0 0 4px var(--green-glow);
    white-space: pre;
    margin: 0;
    animation: naviScan 3.6s linear infinite;
  }
  @keyframes naviScan {
    0%, 100% { color: #5BC07A; }
    50% { color: #88e0a0; text-shadow: 0 0 6px #5BC07A; }
  }
  .navi-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 6px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    text-align: center;
  }
  .navi-label small {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gray);
    margin-top: 6px;
    text-transform: lowercase;
  }
  @media (max-width: 720px) {
    .navi-art { font-size: 9px; }
    .navi-label { font-size: 20px; letter-spacing: 3px; }
  }

  /* ===== LAIN EGGS — SCHUMANN ===== */
  .ovl.schumann-overlay { background: rgba(2,4,6,0.97); }
  .ovl.schumann-overlay .ovl-frame::before,
  .ovl.schumann-overlay .ovl-frame::after,
  .ovl.schumann-overlay .ovl-frame > div { border-color: var(--cyan); }
  .schumann-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--cyan-dim);
  }
  .schumann-freq {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 96px;
    letter-spacing: 4px;
    color: var(--cyan);
    text-shadow: 0 0 16px rgba(79,184,204,0.6);
    line-height: 1;
  }
  .schumann-freq small {
    font-size: 28px;
    letter-spacing: 2px;
    color: var(--gray);
    margin-left: 6px;
    text-shadow: none;
  }
  .schumann-wave {
    width: min(640px, 86vw);
    height: 110px;
    animation: schumannSlide 4s linear infinite;
  }
  @keyframes schumannSlide {
    from { transform: translateX(0); }
    to { transform: translateX(-32px); }
  }
  .schumann-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 1px;
    text-align: center;
    max-width: 460px;
  }
  @media (max-width: 720px) {
    .schumann-freq { font-size: 56px; }
    .schumann-freq small { font-size: 18px; }
  }

  /* ===== BOOT REPLAY OVERLAY (cmd: replay / reboot / boot) ===== */
  .boot-replay {
    position: fixed; inset: 0;
    z-index: 850;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(6,8,9,0.92);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    backdrop-filter: blur(2px);
  }
  .boot-replay.show { opacity: 1; }
  .boot-replay .boot-subtitle,
  .boot-replay .boot-tagline {
    margin-top: 6px;
  }
  .boot-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--gray);
    animation: fadeIn 0.6s 0.5s backwards;
  }
  .boot-tagline {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 6px;
    color: var(--orange);
    text-shadow: 0 0 4px var(--orange-dim);
    animation: fadeIn 0.6s 0.9s backwards;
    margin-top: 8px;
  }
  .boot-corners {
    position: absolute;
    pointer-events: none;
    inset: 30px;
  }
  .boot-corners::before, .boot-corners::after,
  .boot-corner-tl, .boot-corner-tr, .boot-corner-bl, .boot-corner-br {
    content: '';
    position: absolute;
    width: 30px; height: 30px;
    border-color: var(--orange);
  }
  .boot-corners .boot-corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
  .boot-corners .boot-corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
  .boot-corners .boot-corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
  .boot-corners .boot-corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }
  .boot-fade-out { animation: bootFadeOut 0.7s forwards; }
  @keyframes bootFadeOut { to { opacity: 0; transform: scale(1.05); } }

  /* ===== COMMAND PANEL (right column, top) ===== */
  .panel.cmd-panel {
    background: linear-gradient(180deg, rgba(91,192,122,0.06) 0%, rgba(0,0,0,0.4) 100%);
    border-bottom: 1px solid var(--green);
  }
  .panel.cmd-panel .panel-h {
    color: var(--green);
    border-bottom-color: var(--green-dim);
  }
  .cmd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--green-dim);
    background: rgba(0,0,0,0.45);
    padding: 5px 8px;
    margin-bottom: 5px;
    position: relative;
  }
  .cmd-row::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--green);
    animation: pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
  }
  .cmd-prompt {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 3px var(--green-glow);
    font-size: 12px;
    flex-shrink: 0;
  }
  .cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    outline: none;
    caret-color: var(--green);
    padding: 0;
    min-width: 0;
    text-shadow: 0 0 3px var(--green-glow);
  }
  .cmd-input::placeholder {
    color: var(--gray-dim);
    font-style: italic;
    font-size: 10px;
  }
  .cmd-input.not-found {
    color: var(--red);
    animation: cmdShake 0.4s steps(4);
  }
  .cmd-go {
    flex-shrink: 0;
    background: rgba(91,192,122,0.08);
    color: var(--green);
    border: 1px solid var(--green-dim);
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 0 3px var(--green-glow);
  }
  .cmd-go:hover {
    background: rgba(91,192,122,0.22);
    border-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
  }
  .cmd-go:active { transform: scale(0.95); }
  .cmd-go:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
  .cmd-go-key {
    color: var(--gray);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cmd-go:hover .cmd-go-key { color: var(--green); }
  @keyframes cmdShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }
  .cmd-hint {
    color: var(--gray);
    font-size: 9px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    transition: opacity 0.4s;
    text-align: center;
  }
  .cmd-hint b {
    color: var(--orange);
    font-weight: 700;
  }
  .cmd-counter {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed var(--green-dim);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gray);
    text-align: center;
    transition: color 0.3s, text-shadow 0.3s;
  }
  .cmd-counter span {
    color: var(--green);
    font-weight: 700;
    font-size: 11px;
    text-shadow: 0 0 4px var(--green-glow);
  }
  .cmd-counter.flash {
    color: var(--green);
    animation: counterFlash 0.8s ease-out;
  }
  .cmd-counter.flash span { color: var(--cyan); text-shadow: 0 0 4px var(--cyan-dim); }
  @keyframes counterFlash {
    0% { transform: scale(1); }
    25% { transform: scale(1.08); text-shadow: 0 0 6px var(--green-glow); }
    100% { transform: scale(1); }
  }
  .cmd-counter.mastered {
    color: var(--orange);
    animation: counterMastered 2.4s ease-in-out infinite;
  }
  .cmd-counter.mastered span { color: var(--orange); text-shadow: 0 0 5px rgba(230,121,42,0.55); }
  @keyframes counterMastered {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  /* ===== Footer NERV ===== */
  .quotes {
    justify-content: space-between;
  }
  .footer-nerv {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .nerv-svg-mini {
    width: 18px; height: 18px;
  }
  .nerv-svg-mini .leaf {
    fill: var(--orange);
    filter: drop-shadow(0 0 2px var(--orange-dim));
  }
  .footer-nerv-txt {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--orange);
  }
  .footer-motto {
    font-family: 'JetBrains Mono', monospace;
    font-style: italic;
    font-size: 9px;
    color: var(--gray-dim);
    letter-spacing: 1px;
    flex-shrink: 0;
  }
  @media (max-width: 1100px) {
    .footer-motto { display: none; }
  }

  /* ===== HELP MODAL ===== */
  .help-modal {
    position: fixed; inset: 0;
    background: rgba(5,5,7,0.88);
    backdrop-filter: blur(2px);
    z-index: 600;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.3s;
  }
  .help-card {
    background: var(--bg2);
    border: 1px solid var(--green);
    box-shadow: 0 0 30px var(--green-glow);
    width: min(820px, 94vw);
    max-height: 84vh;
    overflow-y: auto;
    padding: 24px 30px;
    position: relative;
  }
  .help-card::before, .help-card::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-color: var(--green);
  }
  .help-card::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
  .help-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
  .help-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 4px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    margin-bottom: 4px;
  }
  .help-subtitle {
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 1px;
    margin-bottom: 18px;
  }
  .help-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--green-dim);
  }
  .help-section-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--orange);
    margin-bottom: 8px;
  }
  .help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 12px;
  }
  .help-cmd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--green);
    cursor: pointer;
    padding: 3px 6px;
    border-left: 2px solid var(--green-dim);
    transition: all 0.15s;
  }
  .help-cmd:hover {
    border-left-color: var(--green);
    background: rgba(91,192,122,0.06);
    padding-left: 10px;
    color: var(--green);
  }
  .help-cmd small {
    color: var(--gray);
    font-size: 9px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    display: block;
    margin-top: 1px;
  }

  /* ===== Universal full-screen overlay base ===== */
  .ovl {
    position: fixed; inset: 0;
    z-index: 720;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.4s;
    background: rgba(0,0,0,0.94);
  }
  .ovl-frame {
    position: absolute;
    inset: 30px;
    border: 1px solid rgba(255,255,255,0.04);
    pointer-events: none;
  }
  .ovl-frame::before, .ovl-frame::after,
  .ovl-frame > div {
    position: absolute;
    width: 24px; height: 24px;
    border-color: var(--orange);
  }
  .ovl-frame::before { content: ''; top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
  .ovl-frame::after { content: ''; bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
  .ovl-frame > .tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
  .ovl-frame > .bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
  .ovl-hint {
    position: absolute;
    bottom: 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gray-dim);
    pointer-events: none; /* don't trap clicks meant for the overlay background */
  }

  /* ===== KOJIMA cinematic ===== */
  .ovl.kojima { background: #000; }
  .kojima-l1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 14px;
    color: #f0f0f0;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
    animation: kojimaIn 1s 0.3s backwards;
  }
  .kojima-l2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 44px;
    letter-spacing: 12px;
    color: #f0f0f0;
    text-shadow: 0 0 12px rgba(255,255,255,0.4);
    animation: kojimaIn 1s 0.9s backwards;
  }
  .kojima-game {
    margin-top: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gray);
    animation: kojimaIn 1s 1.6s backwards;
  }
  @keyframes kojimaIn {
    from { opacity: 0; letter-spacing: 30px; filter: blur(4px); }
    to { opacity: 1; filter: blur(0); }
  }

  /* ===== FOXHOUND emblem ===== */
  .foxhound-svg {
    width: 220px; height: 220px;
    filter: drop-shadow(0 0 14px rgba(230,121,42,0.5));
    animation: foxIn 0.6s ease-out;
  }
  @keyframes foxIn {
    from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
  }
  .foxhound-svg .fox { fill: var(--orange); }
  .foxhound-svg .ring { fill: none; stroke: var(--orange); stroke-width: 3; }
  .foxhound-svg .star { fill: var(--orange); }
  .foxhound-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: 10px;
    color: var(--orange);
    text-shadow: 0 0 12px var(--orange);
    animation: fadeIn 0.5s 0.4s backwards;
  }
  .foxhound-text small {
    display: block; text-align: center;
    font-size: 11px; letter-spacing: 4px;
    color: var(--gray); margin-top: 6px;
  }

  /* ===== NANO glitch ===== */
  .nano-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 64px;
    letter-spacing: 10px;
    color: var(--red);
    text-shadow: 0 0 14px var(--red);
    animation: nanoGlitch 0.18s steps(2) infinite;
  }
  @keyframes nanoGlitch {
    0%, 100% { transform: translate(0); text-shadow: 0 0 14px var(--red); }
    25% { transform: translate(-4px, 2px); text-shadow: 4px 0 14px var(--red), -4px 0 14px var(--cyan); }
    75% { transform: translate(4px, -1px); text-shadow: -4px 0 14px var(--red), 4px 0 14px var(--cyan); }
  }
  .nano-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--gray);
    max-width: 600px;
    text-align: center;
    line-height: 1.6;
    animation: fadeIn 0.5s 0.5s backwards;
  }

  /* ===== PATRIOTS ===== */
  .patriots-row { display: flex; gap: 24px; }
  .patriot-fig {
    text-align: center;
    animation: patriotIn 0.5s ease-out backwards;
  }
  .patriot-fig:nth-child(1) { animation-delay: 0.1s; }
  .patriot-fig:nth-child(2) { animation-delay: 0.2s; }
  .patriot-fig:nth-child(3) { animation-delay: 0.3s; }
  .patriot-fig:nth-child(4) { animation-delay: 0.4s; }
  .patriot-fig:nth-child(5) { animation-delay: 0.5s; }
  @keyframes patriotIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .patriot-fig pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    line-height: 1;
    color: #888;
  }
  .patriot-fig small {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--orange);
    margin-top: 10px;
    text-shadow: 0 0 6px var(--orange-dim);
  }
  .patriots-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gray);
    margin-top: 16px;
  }

  /* ===== NEO kung fu ===== */
  .neo-overlay { background: radial-gradient(circle at center, rgba(0,40,10,0.4) 0%, rgba(0,0,0,0.96) 70%); }
  .neo-line1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 8px;
    color: #5BC07A;
    text-shadow: 0 0 14px #5BC07A;
    animation: neoStamp 0.6s ease-out;
  }
  @keyframes neoStamp {
    0% { opacity: 0; transform: scale(2); filter: blur(8px); }
    60% { opacity: 1; transform: scale(0.95); filter: blur(0); }
    100% { transform: scale(1); }
  }
  .neo-line2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    color: var(--gray);
    letter-spacing: 2px;
    animation: fadeIn 0.6s 0.5s backwards;
  }
  .neo-cta {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--cyan);
    margin-top: 14px;
    animation: blink 1.2s steps(1) infinite;
  }

  /* ===== MANTIS mind reading ===== */
  .mantis-overlay { background: radial-gradient(circle at center, rgba(40,10,80,0.4) 0%, rgba(0,0,0,0.96) 70%); }
  .mantis-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 38px;
    letter-spacing: 6px;
    color: #c8a8ff;
    text-shadow: 0 0 14px #6a4aff;
    text-align: center;
    animation: mantisFloat 3s ease-in-out infinite;
  }
  @keyframes mantisFloat {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-6px); opacity: 0.7; }
  }
  .mantis-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--gray);
    text-align: center;
    max-width: 540px;
    line-height: 1.6;
  }
  .mantis-data {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #c8a8ff;
    letter-spacing: 1px;
    text-align: center;
  }

  /* ===== SNAKE alert (full) ===== */
  .snaaake-overlay { background: rgba(40,0,0,0.92); }
  .snaaake-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 80px;
    letter-spacing: 10px;
    color: var(--red);
    text-shadow: 0 0 24px var(--red), 0 0 48px var(--red);
    animation: snaaakeShake 0.4s steps(8) infinite;
    text-align: center;
  }
  @keyframes snaaakeShake {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(4px, -2px); }
    60% { transform: translate(-2px, -3px); }
    80% { transform: translate(3px, 2px); }
  }
  .snaaake-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--orange);
    text-shadow: 0 0 6px var(--orange);
  }

  /* ===== CQC ===== */
  .cqc-overlay { background: radial-gradient(circle at center, rgba(60,40,20,0.5) 0%, rgba(0,0,0,0.96) 70%); }
  .cqc-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 96px;
    letter-spacing: 16px;
    color: var(--orange);
    text-shadow: 0 0 14px var(--orange);
    animation: cqcStamp 0.6s ease-out;
  }
  @keyframes cqcStamp {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
  }
  .cqc-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--gray);
  }

  /* ===== LCL flood ===== */
  .lcl-overlay {
    background: radial-gradient(circle at 30% 30%, rgba(255,80,80,0.6) 0%, rgba(180,30,30,0.85) 50%, rgba(80,10,10,0.95) 100%);
    animation: lclWobble 4s ease-in-out forwards;
  }
  @keyframes lclWobble {
    0% { background-position: 0 0; }
    50% { background-position: 20px 10px; }
    100% { background-position: 0 0; }
  }
  .lcl-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: 8px;
    color: #ffe0e0;
    text-shadow: 0 0 16px #ff4040;
  }
  .lcl-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #ffc0c0;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.7;
  }

  /* ===== NERV reveal ===== */
  .nerv-overlay { background: rgba(0,0,0,0.96); }
  .nerv-big-svg {
    width: 240px; height: 240px;
    filter: drop-shadow(0 0 20px rgba(230,121,42,0.6));
    animation: nervBigIn 0.8s ease-out;
  }
  @keyframes nervBigIn {
    0% { opacity: 0; transform: scale(0.4) rotate(180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }
  .nerv-big-svg .leaf { fill: var(--orange); }
  .nerv-big-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: 16px;
    color: var(--orange);
    text-shadow: 0 0 14px var(--orange-dim);
    animation: fadeIn 0.6s 0.5s backwards;
  }
  .nerv-big-motto {
    font-family: 'JetBrains Mono', monospace;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--gray);
    text-align: center;
    animation: fadeIn 0.6s 0.9s backwards;
  }

  /* ===== SHINJI get in ===== */
  .shinji-overlay { background: rgba(20,5,40,0.95); }
  .shinji-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 8px;
    color: #c8a4ff;
    text-shadow: 0 0 14px #6a4aff;
    text-align: center;
    line-height: 1.2;
    animation: cqcStamp 0.5s ease-out;
  }
  .shinji-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--gray);
    letter-spacing: 2px;
    text-align: center;
  }

  /* ===== MARKDOWN ===== */
  .markdown-overlay { background: radial-gradient(circle at center, rgba(0,40,10,0.4) 0%, rgba(0,0,0,0.96) 70%); }
  .markdown-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 4px;
    color: #5BC07A;
    text-shadow: 0 0 14px #5BC07A;
    animation: mdGlitch 0.3s steps(3) 4;
  }
  @keyframes mdGlitch {
    0%, 100% { transform: translateX(0); opacity: 1; }
    33% { transform: translateX(-3px); opacity: 0.8; }
    66% { transform: translateX(3px); }
  }
  .markdown-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.6;
    background: rgba(0,255,65,0.04);
    border: 1px dashed var(--green-dim);
    padding: 12px 16px;
    text-align: left;
    white-space: pre;
  }

  /* ===== PILL red/blue ===== */
  .pill-overlay {
    background: rgba(0,0,0,0.95);
  }
  .pill-overlay.red {
    background: radial-gradient(circle at center, rgba(180,30,30,0.5) 0%, rgba(0,0,0,0.96) 70%);
  }
  .pill-overlay.blue {
    background: radial-gradient(circle at center, rgba(30,80,180,0.5) 0%, rgba(0,0,0,0.96) 70%);
  }
  .pill-svg {
    width: 200px; height: 100px;
    animation: pillIn 0.6s ease-out;
  }
  @keyframes pillIn {
    from { opacity: 0; transform: scale(0.4) rotate(-30deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
  }
  .pill-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 6px;
  }
  .pill-overlay.red .pill-text { color: #ff8080; text-shadow: 0 0 12px #ff4040; }
  .pill-overlay.blue .pill-text { color: #8ab0ff; text-shadow: 0 0 12px #4080ff; }
  .pill-quote {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--gray);
    text-align: center;
    max-width: 540px;
    line-height: 1.6;
    font-style: italic;
  }

  /* ===== ZION mainframe ===== */
  .zion-overlay { background: rgba(0,0,0,0.96); }
  .zion-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 48px;
    letter-spacing: 12px;
    color: var(--green);
    text-shadow: 0 0 14px var(--green-glow);
  }
  .zion-list {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--green);
    letter-spacing: 1px;
    text-align: left;
    line-height: 1.7;
  }
  .zion-list small { color: var(--gray); display: block; margin-top: 8px; letter-spacing: 2px; }

  /* ===== EVA UNIT ===== */
  .eva-unit-overlay { background: radial-gradient(circle at center, rgba(80,20,80,0.5) 0%, rgba(0,0,0,0.96) 70%); }
  .eva-unit-overlay.u02 { background: radial-gradient(circle at center, rgba(140,30,30,0.5) 0%, rgba(0,0,0,0.96) 70%); }
  .eva-unit-num {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 200px;
    letter-spacing: -10px;
    color: #b88aff;
    text-shadow: 0 0 24px #6a4aff;
    line-height: 1;
    animation: cqcStamp 0.6s ease-out;
  }
  .eva-unit-overlay.u02 .eva-unit-num {
    color: #ff8a8a;
    text-shadow: 0 0 24px #ff4040;
  }
  .eva-unit-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 6px;
    color: #c8a4ff;
  }
  .eva-unit-overlay.u02 .eva-unit-tag { color: #ffa4a4; }
  .eva-unit-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 1px;
    line-height: 1.6;
    text-align: center;
  }

  /* ===== ANGEL INTEL ===== */
  .angel-intel-overlay {
    background: radial-gradient(circle at center, rgba(40,30,80,0.4) 0%, rgba(0,0,0,0.96) 70%);
  }
  .angel-intel-card {
    border: 2px solid var(--orange);
    background: rgba(0,0,0,0.6);
    padding: 24px 36px;
    text-align: center;
    box-shadow: 0 0 24px rgba(230,121,42,0.3);
    animation: cqcStamp 0.5s ease-out;
  }
  .angel-intel-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--gray);
  }
  .angel-intel-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 44px;
    letter-spacing: 8px;
    color: var(--orange);
    text-shadow: 0 0 12px var(--orange-dim);
    margin: 6px 0 14px;
  }
  .angel-intel-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 1px;
    line-height: 1.7;
    text-align: left;
  }
  .angel-intel-stats b { color: var(--green); font-weight: normal; }

  /* ===== RATION ===== */
  .ration-overlay { background: rgba(0,0,0,0.94); }
  .ration-art {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.05;
    color: #c8a868;
    white-space: pre;
    text-shadow: 0 0 4px rgba(200,168,104,0.4);
  }
  .ration-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: 4px;
    color: #c8a868;
  }
  .ration-text small {
    display: block; text-align: center;
    font-size: 10px; color: var(--gray); letter-spacing: 2px;
    margin-top: 6px;
  }

  /* ===== Clickable LEFT panels ===== */
  .lp.lp-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .lp.lp-clickable:hover {
    border-color: var(--green);
    background: rgba(91,192,122,0.10);
    box-shadow: 0 0 6px var(--green-glow);
  }
  .lp.cyan.lp-clickable:hover {
    border-color: var(--cyan);
    background: rgba(79,184,204,0.10);
    box-shadow: 0 0 6px rgba(79,184,204,0.18);
  }
  .lp.orange.lp-clickable:hover {
    border-color: var(--orange);
    background: rgba(230,121,42,0.10);
    box-shadow: 0 0 6px rgba(230,121,42,0.18);
  }
  .mini-monolith.lp-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .mini-monolith.lp-clickable:hover {
    box-shadow: 0 0 8px rgba(230,121,42,0.5);
  }
  .lp.lp-clickable:focus-visible,
  .mini-monolith.lp-clickable:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: 2px;
  }
  .lp.flash {
    animation: lpFlash 0.4s ease-out;
  }
  @keyframes lpFlash {
    0% { background: rgba(91,192,122,0.30); transform: scale(1.02); }
    100% { background: rgba(5,8,9,0.72); transform: scale(1); }
  }
  .ticker.paused .ticker-content { animation-play-state: paused !important; }

  /* ===== Codec row clickable ===== */
  .codec-row[role="button"] {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 1px;
  }
  .codec-row[role="button"]:hover {
    background: rgba(79,184,204,0.10);
  }
  .codec-row[role="button"]:hover .freq {
    text-shadow: 0 0 4px var(--cyan);
  }
  .codec-row[role="button"]:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: 1px;
  }

  /* ===== YOU DIED (Dark Souls homage) ===== */
  .you-died {
    position: fixed; inset: 0;
    z-index: 850;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 14px;
    background: radial-gradient(ellipse at center, rgba(40,0,0,0.6) 0%, rgba(0,0,0,0.95) 70%);
    pointer-events: none;
    animation: youDiedFade 3.6s ease-in-out forwards;
  }
  @keyframes youDiedFade {
    0% { opacity: 0; }
    8% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }
  .you-died-text {
    font-family: 'Press Start 2P', 'Orbitron', monospace;
    font-size: 80px;
    color: #cc0000;
    text-shadow:
      0 0 0 #500,
      4px 0 0 #aa0000,
      -4px 0 0 #aa0000,
      0 4px 0 #aa0000,
      0 -4px 0 #aa0000,
      0 0 18px #ff2020,
      0 0 50px #800;
    letter-spacing: 14px;
    text-align: center;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
    font-smooth: never;
    transform: scale(0.85);
    animation: youDiedZoom 3.6s ease-out forwards;
  }
  @keyframes youDiedZoom {
    0% { transform: scale(0.4); filter: blur(8px); letter-spacing: 40px; }
    20% { transform: scale(1); filter: blur(0); letter-spacing: 14px; }
    100% { transform: scale(1.05); }
  }
  .you-died-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #884444;
    letter-spacing: 3px;
    text-shadow: 0 0 6px #500;
    animation: youDiedFade 3.6s ease-in-out forwards;
  }
  @media (max-width: 720px) {
    .you-died-text { font-size: 42px; letter-spacing: 8px; }
  }

  /* ===== Character dossier overlay (replaces codec call for named eggs) ===== */
  .char-dossier { background: rgba(5,5,7,0.94); }
  .char-d-card {
    background: var(--bg2);
    border: 2px solid var(--green);
    box-shadow: 0 0 36px var(--green-glow);
    width: min(780px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 28px 36px;
    position: relative;
    animation: charDIn 0.4s ease-out;
  }
  @keyframes charDIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .char-d-card::before, .char-d-card::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border-color: var(--green);
  }
  .char-d-card::before { top: -2px; left: -2px; border-top: 3px solid; border-left: 3px solid; }
  .char-d-card::after { bottom: -2px; right: -2px; border-bottom: 3px solid; border-right: 3px solid; }

  .char-d-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--orange);
  }
  .char-d-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 38px;
    letter-spacing: 5px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green-glow);
    line-height: 1;
    margin: 6px 0 4px;
  }
  .char-d-work {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 1px;
    margin-bottom: 22px;
    border-bottom: 1px dashed var(--green-dim);
    padding-bottom: 14px;
  }
  .char-d-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
  }
  .char-d-portrait {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    line-height: 1.05;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(79,184,204,0.25);
    white-space: pre;
    border: 1px solid var(--cyan-dim);
    background: rgba(79,184,204,0.05);
    padding: 14px 18px;
    flex-shrink: 0;
  }
  .char-d-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .char-d-bio {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--gray);
    line-height: 1.7;
  }
  .char-d-skills {
    display: flex; flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--green);
    font-family: 'JetBrains Mono', monospace;
    border-top: 1px dashed var(--green-dim);
    padding-top: 12px;
  }
  .char-d-skills .lbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--orange);
    margin-bottom: 4px;
  }
  .char-d-skills .s { color: var(--green); }
  .char-d-quote {
    border-left: 3px solid var(--orange);
    background: rgba(230,121,42,0.05);
    padding: 12px 18px;
    color: var(--orange);
    font-style: italic;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 8px;
  }
  @media (max-width: 720px) {
    .char-d-grid { grid-template-columns: 1fr; }
    .char-d-portrait { font-size: 14px; padding: 10px 14px; }
    .char-d-name { font-size: 28px; letter-spacing: 3px; }
  }

  /* ===== Codec call → expandable on click ===== */
  .codec-call {
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  .codec-call:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 28px rgba(79,184,204,0.45);
  }
  .codec-call::after {
    content: '▶ click for full dossier';
    position: absolute;
    bottom: 4px; right: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--cyan-dim);
    opacity: 0.7;
  }
  .codec-call:hover::after { color: var(--cyan); opacity: 1; }

  /* ===== Mother Base — clickable cells ===== */
  .stat-cell.clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .stat-cell.clickable:hover {
    border-color: var(--green);
    background: rgba(91,192,122,0.10);
    box-shadow: 0 0 8px var(--green-glow);
  }
  .stat-cell.clickable .sval::after {
    content: ' →';
    color: var(--gray-dim);
    font-size: 12px;
  }
  .stat-cell.clickable:hover .sval::after { color: var(--green); }

  /* ===== CUSTOM CURSOR (target brackets on clickables) ===== */
  a, button, [role="button"], summary,
  .lp-clickable, .codec-row[data-freq], .stat-cell.clickable,
  .ph-btn, .title-btn, .cmd-go, .audio-toggle, .placard-gh,
  .tachi-card, .order-pill, .order-del, .alert-widget,
  .placard-nav a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M2 9 L2 2 L9 2' stroke='%23E6792A' stroke-width='1.5' fill='none'/><path d='M26 9 L26 2 L19 2' stroke='%23E6792A' stroke-width='1.5' fill='none'/><path d='M2 19 L2 26 L9 26' stroke='%23E6792A' stroke-width='1.5' fill='none'/><path d='M26 19 L26 26 L19 26' stroke='%23E6792A' stroke-width='1.5' fill='none'/><circle cx='14' cy='14' r='1.6' fill='%23E6792A'/></svg>") 14 14, pointer;
  }
  input, textarea, [contenteditable="true"], .cmd-input, .order-title {
    cursor: text;
  }
  @media (max-width: 900px), (pointer: coarse) {
    html, body, a, button, [role="button"], summary,
    .lp-clickable, .codec-row[data-freq], .stat-cell.clickable,
    .ph-btn, .title-btn, .cmd-go, .audio-toggle, .placard-gh,
    .tachi-card, .order-pill, .order-del, .alert-widget,
    .placard-nav a { cursor: auto; }
    input, textarea, [contenteditable="true"], .cmd-input, .order-title { cursor: text; }
  }

  /* Mother Base popup list */
  .mb-list {
    position: fixed;
    z-index: 600;
    background: var(--bg2);
    border: 1px solid var(--green);
    box-shadow: 0 0 18px var(--green-glow);
    min-width: 260px;
    max-width: 360px;
    padding: 12px 14px;
    animation: fadeIn 0.2s;
  }
  .mb-list.cyan { border-color: var(--cyan); box-shadow: 0 0 18px rgba(79,184,204,0.25); }
  .mb-list-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--orange);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--orange-dim);
  }
  .mb-list-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 4px;
    border-bottom: 1px dotted rgba(136,136,136,0.15);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .mb-list-row:last-child { border-bottom: none; }
  .mb-list-row:hover { background: rgba(91,192,122,0.10); }
  .mb-list-row .name { color: var(--green); font-weight: 700; }
  .mb-list.cyan .mb-list-row .name { color: var(--cyan); }
  .mb-list-row .desc { color: var(--gray); font-size: 9px; }
  .mb-list-row a { color: inherit; text-decoration: none; flex: 1; display: flex; justify-content: space-between; }

  /* ===== Operator detail mini-pop ===== */
  .lp-popout {
    position: fixed;
    left: 140px; top: 100px;
    z-index: 500;
    background: var(--bg2);
    border: 1px solid var(--green);
    box-shadow: 0 0 18px var(--green-glow);
    padding: 12px 16px;
    width: 260px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gray);
    line-height: 1.6;
    animation: fadeIn 0.2s;
  }
  .lp-popout.cyan { border-color: var(--cyan); box-shadow: 0 0 18px rgba(79,184,204,0.25); }
  .lp-popout.orange { border-color: var(--orange); box-shadow: 0 0 18px rgba(230,121,42,0.25); }
  .lp-popout-h {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--green);
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--green-dim);
    padding-bottom: 4px;
  }
  .lp-popout.cyan .lp-popout-h { color: var(--cyan); border-bottom-color: var(--cyan-dim); }
  .lp-popout.orange .lp-popout-h { color: var(--orange); border-bottom-color: var(--orange-dim); }
  .lp-popout-row {
    display: flex; justify-content: space-between;
    padding: 2px 0;
  }
  .lp-popout-row .v { color: var(--green); }
  .lp-popout.cyan .lp-popout-row .v { color: var(--cyan); }

  /* ===== Responsive ===== */
  @media (max-width: 1180px) {
    .grid { grid-template-columns: 90px 1fr 290px; }
  }
  @media (max-width: 940px) {
    .rain-col { display: none; }
    .grid { grid-template-columns: 1fr 280px; }
  }

  /* ===== CONFETTI BG (pixel-art bloques flotando, inspired by y-n10) ===== */
  #confettiCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
  }
  @media (max-width: 900px) {
    #confettiCanvas { display: none; }
  }

  /* ===== prefers-reduced-motion (a11y + battery) ===== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    #confettiCanvas, #rain, #bootRain { display: none !important; }
    .ticker-content { animation: none !important; transform: none !important; }
  }

  /* ===== ORDERS BOARD (replaces briefing) ===== */
  .orders-board {
    border: 1px solid var(--orange-dim);
    background: linear-gradient(180deg, rgba(255,107,26,0.06) 0%, rgba(0,0,0,0.4) 100%);
    padding: 8px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 130px;
  }
  .orders-board::before, .orders-board::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border-color: var(--orange);
  }
  .orders-board::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
  .orders-board::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

  .orders-empty {
    color: var(--gray-dim);
    font-size: 11px;
    font-style: italic;
    text-align: center;
    padding: 30px 0;
    letter-spacing: 1px;
  }

  .order-row {
    display: grid;
    grid-template-columns: 14px 56px 60px 70px 1fr 22px;
    gap: 8px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(230,121,42,0.15);
    font-size: 11px;
    animation: orderRowIn 0.3s ease-out;
    transition: opacity 0.15s, box-shadow 0.15s;
  }
  .order-handle {
    color: var(--gray-dim);
    font-family: monospace;
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    text-align: center;
    transition: color 0.15s;
  }
  .order-row:hover .order-handle { color: var(--gray); }
  .order-handle:active { cursor: grabbing; }
  .order-row.dragging {
    opacity: 0.45;
    box-shadow: 0 0 8px rgba(79,184,204,0.35);
  }
  .order-row.drag-over-top {
    box-shadow: inset 0 2px 0 var(--cyan);
  }
  .order-row.drag-over-bottom {
    box-shadow: inset 0 -2px 0 var(--cyan);
  }
  .order-row:last-child { border-bottom: none; }
  @keyframes orderRowIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .order-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--gray);
  }

  .order-pill {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 3px 4px;
    border: 1px solid;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all 0.15s;
    outline: none;
    line-height: 1;
  }
  .order-pill:hover { box-shadow: 0 0 6px currentColor; transform: translateX(1px); }
  .order-pill:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

  .order-pill.prio-alpha {
    color: var(--red);
    border-color: var(--red);
    background: rgba(217,69,69,0.08);
  }
  .order-pill.prio-bravo {
    color: var(--orange);
    border-color: var(--orange);
    background: rgba(230,121,42,0.06);
  }
  .order-pill.prio-charlie {
    color: var(--cyan);
    border-color: var(--cyan-dim);
    background: rgba(79,184,204,0.05);
  }

  .order-pill.status-active {
    color: var(--green);
    border-color: var(--green);
    background: rgba(91,192,122,0.06);
  }
  .order-pill.status-paused {
    color: var(--orange);
    border-color: var(--orange);
    background: rgba(230,121,42,0.06);
  }
  .order-pill.status-done {
    color: var(--gray);
    border-color: var(--gray-dim);
    background: rgba(255,255,255,0.02);
  }
  .order-pill.status-standby {
    color: var(--cyan);
    border-color: var(--cyan-dim);
    background: rgba(79,184,204,0.04);
    animation: orderStandby 2s ease-in-out infinite;
  }
  @keyframes orderStandby {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  .order-title {
    font-size: 12px;
    color: var(--green);
    outline: none;
    padding: 2px 4px;
    border-bottom: 1px dashed transparent;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s, background 0.15s;
  }
  .order-title:hover { border-bottom-color: var(--green-dim); }
  .order-title:focus {
    border-bottom-color: var(--cyan);
    background: rgba(79,184,204,0.06);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .order-row.is-done .order-title {
    color: var(--gray-dim);
    text-decoration: line-through;
  }

  .order-del {
    background: transparent;
    border: 1px solid var(--gray-dim);
    color: var(--gray);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    width: 22px; height: 22px;
    font-family: monospace;
    transition: all 0.15s;
  }
  .order-del:hover {
    color: var(--red);
    border-color: var(--red);
    background: rgba(217,69,69,0.1);
    box-shadow: 0 0 4px rgba(217,69,69,0.3);
  }
  .order-del:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

  .title-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  /* ===== Mobile (≤900px) — vertical stack, no HUD lock ===== */
  @media (max-width: 900px) {
    /* Allow scroll on the whole page, prevent horizontal overflow */
    html, body {
      overflow-x: hidden;
      overflow-y: auto;
      height: auto;
      min-height: 100vh;
      cursor: default;
      width: 100%;
      max-width: 100vw;
      font-size: 12px;
    }
    body::after { display: none; } /* drop the radial vignette */
    body::before { background-size: 100% 3px; } /* keep scanlines tight */
    * { max-width: 100%; }
    .hud, .grid, .center, .right, main { max-width: 100vw; box-sizing: border-box; }

    .hud {
      height: auto;
      min-height: 100vh;
      grid-template-rows: auto 1fr auto;
    }

    /* Placard becomes a vertical stack */
    .placard {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 6px;
      padding: 8px 12px 6px;
      height: auto;
    }
    .placard::before, .placard::after { display: none; }
    .placard-l { gap: 8px; }
    .placard-title { font-size: 14px; letter-spacing: 3px; }
    .placard-sub { font-size: 8px; letter-spacing: 1px; }
    .placard-sub small { display: none; }
    .placard-c { display: none; } /* hide alert widget on mobile, save vertical space */
    .placard-r { gap: 8px; flex-wrap: wrap; }
    #liveTime { font-size: 9px; }
    .placard-nav {
      overflow-x: auto;
      flex-wrap: nowrap;
      width: 100%;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
    }
    .placard-nav::-webkit-scrollbar { height: 2px; background: transparent; }
    .placard-nav::-webkit-scrollbar-thumb { background: var(--green-dim); }
    .placard-nav a { white-space: nowrap; flex-shrink: 0; }

    /* Grid: single column, right panels stack below center */
    .grid {
      grid-template-columns: 1fr;
      overflow: visible;
    }
    .right {
      border-left: none;
      border-top: 1px solid var(--green-dim);
      overflow: visible;
    }
    .center {
      padding: 12px;
      overflow: visible;
    }

    /* Cmd panel sticky to top of right column for easier reach */
    .panel.cmd-panel {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg2);
    }
    .cmd-input { font-size: 14px; } /* avoid iOS zoom on focus */
    .cmd-row { padding: 8px 10px; min-height: 44px; }
    .cmd-help-btn { min-height: 36px; padding: 6px 10px; }

    /* Squad cards: drop heavy stat bars on phones, keep on small tablets */
    .cards {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      grid-auto-rows: auto;
    }
    .card { min-height: 44px; word-break: break-word; }
    .card-id, .card-name, .card-row { overflow-wrap: break-word; word-break: break-word; }
    .tachi { grid-template-columns: 1fr 1fr; gap: 5px; }
    .tachi-card { min-height: 44px; word-break: break-word; }
    .tachi-name, .tachi-line, .tachi-ops { overflow-wrap: break-word; }

    /* Topology SVG: cap height so it doesn't dominate the column */
    .panel.topology { min-height: 240px; max-height: 320px; }
    .panel.topology svg { max-height: 280px; }

    /* Compact panels on right column */
    .panel { padding: 8px 12px; }
    .ops-log { height: 130px; }
    .panel.topology { min-height: 220px; }

    /* Orders board: stack title onto its own row, keep pills inline */
    .order-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 6px;
      padding: 7px 0;
    }
    .order-handle { display: none; }
    .order-num { flex: 0 0 auto; min-width: 50px; }
    .order-pill { flex: 0 0 auto; min-height: 28px; padding: 5px 6px; }
    .order-title {
      flex: 1 1 100%;
      order: 10;
      font-size: 12px;
      padding: 4px 2px;
      white-space: normal;
    }
    .order-del { flex: 0 0 auto; margin-left: auto; min-width: 28px; min-height: 28px; }

    /* Audio toggle smaller and out of the way */
    .audio-toggle {
      top: auto;
      bottom: 12px;
      left: 12px;
      font-size: 7px;
      padding: 4px 7px;
      min-height: 36px;
    }

    /* Hit-target minimums on interactive cards */
    .lp-clickable, .stat-cell.clickable, .codec-row[role="button"],
    .ph-btn, .title-btn {
      min-height: 36px;
    }

    /* Footer compact */
    .quotes { padding: 6px 12px; font-size: 10px; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .footer-motto { display: none; }
    .quote-text { text-align: center; }

    /* Boot scaled for phones */
    .boot-tw { font-size: 14px; min-height: 80px; }
    .boot-title-stamp { max-width: 80vw; height: auto; }
    .boot-nerv-glitch { font-size: 36px; letter-spacing: 6px; }
    .boot-subtitle { font-size: 10px; letter-spacing: 2px; padding: 0 12px; text-align: center; }
    .boot-tagline { font-size: 9px; letter-spacing: 3px; }
    .boot-progress-list { width: 92vw; font-size: 11px; }
    .boot-prog-row { grid-template-columns: 110px 1fr 44px; gap: 6px; }
    .boot-corners { inset: 12px; }

    /* Modal scale-down for phones */
    .dossier-card, .help-card, .char-d-card, .page-modal-card {
      width: 100%;
      max-width: calc(100vw - 24px);
      padding: 18px 16px;
      max-height: calc(100vh - 24px);
    }
    .char-d-grid { grid-template-columns: 1fr; gap: 14px; }
    .char-d-portrait { font-size: 13px; padding: 10px 14px; }
    .char-d-name { font-size: 26px; letter-spacing: 3px; }
    .help-grid { grid-template-columns: 1fr; }

    /* MGS alert mark smaller */
    .mgs-alert .alert-mark { font-size: 120px; }
    .you-died-text { font-size: 36px; letter-spacing: 6px; }

    /* Codec call bottom-anchored on mobile */
    .codec-call {
      bottom: 70px;
      width: calc(100vw - 24px);
    }

    /* SEELE monoliths smaller */
    .seele-monolith { width: 50px; height: 84px; }
    .seele-monolith .num { font-size: 22px; }

    /* Three.js dive overlay info compact */
    .dive-info { font-size: 9px; }
    .dive-exit { font-size: 8px; padding: 6px 8px; min-height: 36px; }
  }

  @media (max-width: 600px) {
    .placard-r { font-size: 9px; }
    .placard-gh span { display: none; } /* keep only the github icon */
    .placard-title { font-size: 13px; letter-spacing: 2px; }
    .placard-sub { display: block; }
    .cards { grid-template-columns: 1fr; }
    .tachi { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
    .stat-cell { padding: 5px 6px; }
    .stat-cell .sval { font-size: 13px; }
    .stat-cell .slbl { font-size: 7px; }
  }