/* THE GRID — WolfWright design language: dark, purple→cyan, Inter + JetBrains Mono, glass cards */
:root {
  --bg: #06020f;
  --glass: rgba(13, 13, 26, 0.72);
  --glass-2: rgba(13, 13, 26, 0.88);
  --line: rgba(124, 58, 237, 0.22);
  --line-2: rgba(124, 58, 237, 0.4);
  --purple: #7c3aed;
  --purple-2: #a855f7;
  --purple-3: #c084fc;
  --cyan: #06b6d4;
  --cyan-2: #22d3ee;
  --ink: #e2e8f0;
  --ink-2: #94a3b8;
  --ink-3: #64748b;
  --rose: #f43f5e;
  --gold: #fbbf24;
  --green: #34d399;
  --grad: linear-gradient(135deg, #7c3aed, #a855f7 45%, #06b6d4);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bar-h: 56px;
  --gap: 16px;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; }
.hidden { display: none !important; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; }
#gl.dragging { cursor: grabbing; }

/* ── Top bar ─────────────────────────────────────────────────── */
.bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gap);
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(6, 2, 15, 0.92), rgba(6, 2, 15, 0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.home {
  font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); text-decoration: none; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  transition: color .15s, border-color .15s, background .15s;
}
.home:hover, .home:focus-visible { color: var(--ink); border-color: var(--purple-2); background: rgba(124, 58, 237, .12); }
.home-short { display: none; }
.brand { display: flex; align-items: center; gap: .6rem; white-space: nowrap; min-width: 0; }
.mark {
  width: 18px; height: 18px; border-radius: 5px; background: var(--grad); flex: none;
  box-shadow: 0 0 18px rgba(168, 85, 247, .55); animation: breathe 3.2s ease-in-out infinite;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
@keyframes breathe { 50% { transform: scale(.82); box-shadow: 0 0 6px rgba(6, 182, 212, .5); } }
.brand-text { font: 700 .86rem/1 var(--mono); letter-spacing: .1em; }
.brand-text i { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { color: var(--ink-2); font-weight: 600; }
.heartbeat {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
  font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.heartbeat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.heartbeat.live .dot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: beat 1.6s ease-in-out infinite; }
.heartbeat.slow .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.heartbeat.lost .dot { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.5); } 24% { transform: scale(1); } 36% { transform: scale(1.3); } }
.bar-right { display: flex; gap: 8px; }
.chip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: .55rem .8rem; border-radius: 8px;
  background: rgba(124, 58, 237, .14); border: 1px solid var(--line-2);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.chip-btn:hover, .chip-btn:focus-visible { background: rgba(124, 58, 237, .3); border-color: var(--purple-2); box-shadow: 0 0 16px rgba(168, 85, 247, .25); }
.chip-btn.on { background: var(--grad); border-color: transparent; color: #fff; }
.chip-btn.round { width: 32px; padding: .55rem 0; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  position: fixed; z-index: 10;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .03);
  padding: 14px 16px;
}
.eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font: 700 .62rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--purple-3);
  margin-bottom: 10px;
}
.eyebrow-btn { width: 100%; text-align: left; }
.eyebrow-btn .caret { transition: transform .2s; color: var(--ink-3); }
.eyebrow-btn[aria-expanded="false"] .caret { transform: rotate(-90deg); }
.k { display: block; font: 600 .6rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v { display: block; font: 800 1.25rem/1.15 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
.v.sm { font-size: .95rem; font-weight: 700; color: var(--ink); }
.v.big { font-size: 1.9rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rose { color: var(--rose) !important; }

/* stats */
.stats { top: calc(var(--bar-h) + var(--gap)); left: var(--gap); width: 252px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.iq { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.iq-row { display: flex; align-items: baseline; gap: .5rem; }
.delta { font: 700 .72rem/1 var(--mono); color: var(--green); }
.delta.down { color: var(--rose); }
#spark { display: block; width: 100%; height: 46px; margin-top: 8px; }
.spark-key { display: flex; gap: 10px; font: 500 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.spark-key span::before { content: ''; display: inline-block; width: 8px; height: 2px; margin-right: 4px; vertical-align: middle; }
.key-iq::before { background: var(--purple-2); }
.key-pop::before { background: var(--cyan); }
#spark-span { margin-left: auto; }
#spark-span::before { display: none !important; }
.uptime { margin-top: 12px; font-size: .74rem; color: var(--ink-2); }
.uptime b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* tribes */
.tribes { top: calc(var(--bar-h) + var(--gap)); right: var(--gap); width: 252px; max-height: calc(100vh - var(--bar-h) - 3 * var(--gap) - 200px); overflow: auto; }
.tribes .eyebrow { margin-bottom: 8px; }
#tribe-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
#tribe-list li {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: .8rem;
  transition: background .15s;
}
#tribe-list li:hover { background: rgba(124, 58, 237, .14); }
#tribe-list li.sel { background: rgba(124, 58, 237, .24); }
.sw { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 10px currentColor; }
.tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tc { font: 600 .68rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.tc b { color: var(--ink); }

/* feed */
.feed { left: var(--gap); bottom: var(--gap); width: min(520px, calc(100vw - 2 * var(--gap))); padding-bottom: 10px; }
#feed-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
#feed-list li {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: baseline;
  font-size: .78rem; line-height: 1.45; color: var(--ink-2); animation: feed-in .5s ease-out;
}
#feed-list li .b { width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); background: var(--purple-2); }
#feed-list li .tm { font: 500 .6rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
#feed-list li.chron { color: var(--ink); }
@keyframes feed-in { from { opacity: 0; transform: translateY(6px); } }

/* selected rogue */
.rogue { right: var(--gap); bottom: var(--gap); width: 300px; }
.rogue-head { display: flex; justify-content: space-between; gap: 10px; }
.rogue-head .eyebrow { margin-bottom: 6px; }
.rogue-name { font: 800 1.15rem/1.1 var(--mono); letter-spacing: .04em; color: #fff; }
.rogue-tribe { font-size: .78rem; margin-top: 3px; color: var(--ink-2); }
.rogue-state { margin-top: 10px; font-size: .82rem; color: var(--ink); min-height: 1.2em; }
.rogue-state::before { content: '▸ '; color: var(--cyan-2); }
.rogue-meta { margin-top: 6px; font: 500 .68rem/1.6 var(--mono); color: var(--ink-2); }
.energy { margin-top: 10px; }
.bar-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; margin-top: 4px; }
.bar-fill { height: 100%; width: 50%; background: var(--grad); border-radius: 3px; transition: width .3s; }
.brain-wrap { margin-top: 12px; }
.brain-wrap .live { color: var(--green); font-weight: 700; margin-left: 4px; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
#r-brain { display: block; width: 100%; height: 170px; margin-top: 6px; }
#r-follow { margin-top: 10px; width: 100%; }
.x {
  width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--ink-2);
  border: 1px solid var(--line); transition: color .15s, border-color .15s;
}
.x:hover { color: #fff; border-color: var(--purple-2); }

/* chronicle drawer */
.drawer {
  position: fixed; z-index: 30; top: calc(var(--bar-h) + 8px); right: 8px; bottom: 8px; width: min(440px, calc(100vw - 16px));
  background: var(--glass-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; animation: drawer-in .25s ease-out;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
@keyframes drawer-in { from { opacity: 0; transform: translateX(20px); } }
.drawer-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.drawer-title { font-weight: 700; font-size: 1rem; }
#lore-list { list-style: none; overflow: auto; padding: 8px 18px 18px; touch-action: pan-y; }
#lore-list li { padding: 11px 0; border-bottom: 1px solid rgba(124, 58, 237, .12); font-size: .84rem; line-height: 1.55; color: var(--ink); }
#lore-list li .meta { display: flex; gap: 8px; align-items: center; font: 600 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
#lore-list li .meta .b { width: 7px; height: 7px; border-radius: 50%; }

/* about modal + fallback */
.modal, .fallback {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 2, 15, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  position: relative; max-width: 620px; max-height: calc(100vh - 32px); overflow: auto; touch-action: pan-y;
  background: var(--glass-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(124, 58, 237, .15);
}
.modal-card .x { position: absolute; top: 16px; right: 16px; }
.modal-card h1 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; line-height: 1.15; margin-bottom: 14px; color: #fff; }
.modal-card p { color: var(--ink-2); line-height: 1.7; font-size: .92rem; margin-bottom: 12px; }
.modal-card p b { color: var(--ink); }
.modal-card .muted { font-size: .78rem; color: var(--ink-3); margin-top: 16px; }
kbd { font: 600 .7rem var(--mono); padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); }

.hint {
  position: fixed; z-index: 9; left: 50%; bottom: 22px; transform: translateX(-50%);
  font: 600 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: .55rem .9rem; border-radius: 99px; background: rgba(6, 2, 15, .6); border: 1px solid var(--line);
  pointer-events: none; transition: opacity 1s;
}
.hint.gone { opacity: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .brand-sub { display: none; }
  .feed { width: min(420px, calc(100vw - 2 * var(--gap))); }
  .hint { display: none; }
}
@media (max-width: 760px) {
  :root { --gap: 10px; --bar-h: 52px; }
  .bar { gap: 8px; }
  .home-full { display: none; }
  .home-short { display: inline; }
  .brand-text { font-size: .76rem; }
  .heartbeat #hb-text { display: none; }
  .heartbeat { margin-left: auto; }
  .card { padding: 11px 12px; border-radius: 12px; }
  .stats { width: auto; right: auto; max-width: 182px; }
  .stat-grid { gap: 6px 10px; }
  .v { font-size: 1rem; }
  .v.big { font-size: 1.35rem; }
  .wide-only, .spark-key, .uptime { display: none; }
  #spark { height: 30px; }
  .iq { margin-top: 10px; padding-top: 8px; }
  .tribes { width: 158px; max-height: 46vh; }
  .tribes.collapsed #tribe-list { display: none; }
  .tribes.collapsed .eyebrow { margin-bottom: 0; }
  #tribe-list li { font-size: .72rem; gap: 7px; grid-template-columns: 8px 1fr auto; }
  .feed { right: var(--gap); width: auto; padding: 10px 12px 8px; }
  #feed-list li { font-size: .72rem; }
  #feed-list li:nth-child(n+4) { display: none; }
  .rogue { left: var(--gap); right: var(--gap); bottom: var(--gap); width: auto; max-height: 62vh; overflow: auto; z-index: 15; touch-action: pan-y; }
  #r-brain { height: 140px; }
  .modal-card { padding: 22px 20px; }
}
@media (max-width: 380px) {
  .brand-text i, .brand-text .brand-sub { display: none; }
  .stats { max-width: 164px; }
  .tribes { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .mark, .heartbeat.live .dot, .brain-wrap .live { animation: none; }
}

/* v3: mind size, Firewall, seasons, champion, tribe language */
.green { color: var(--green) !important; }
.key-brain::before { background: var(--green); }
.season-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font: 600 .62rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.season { padding: .28rem .5rem; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); }
.season.plenty { border-color: rgba(34, 211, 238, .45); color: var(--cyan-2); box-shadow: 0 0 12px rgba(34, 211, 238, .15); }
.season.scarcity { border-color: rgba(244, 63, 94, .45); color: #fda4af; box-shadow: 0 0 12px rgba(244, 63, 94, .15); }
.season.waxing, .season.waning { color: var(--ink-2); }
.threat { color: var(--ink-3); }
.champ {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 10px; text-align: left;
  font: 500 .66rem/1.5 var(--mono); color: var(--ink-2); padding: .45rem .55rem; border-radius: 8px;
  background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .22); transition: border-color .15s;
}
.champ:hover { border-color: rgba(251, 191, 36, .55); }
.champ b { color: #fde68a; }
.champ .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 4px; }
#tribe-list li.lex { display: block; cursor: default; padding: 4px 8px 10px 27px; margin: 0 -8px; font-size: .72rem; color: var(--ink-2); }
#tribe-list li.lex:hover { background: none; }
.lex-head { font: 700 .56rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 2px 0 6px; }
.lex-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px; align-items: center; padding: 2px 0; }
.lex-row .glyph { font-family: var(--mono); color: var(--purple-3); letter-spacing: 1px; }
.lex-row .pc { font: 600 .64rem var(--mono); color: var(--ink-3); }
@media (max-width: 760px) {
  .season-row .threat { display: none; }
  .champ { display: none !important; }
  .season-row { margin-top: 8px; }
}

/* Voices of the awakened */
.tabs { display: flex; gap: 4px; }
.tab { font: 700 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: .55rem .7rem; border-radius: 8px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--purple-3); border-color: var(--line-2); background: rgba(124, 58, 237, .12); }
.vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.vdot.on { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.pane { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 12px 18px 0; }
.pane .drawer-title { margin-bottom: 4px; }
#lore-list { padding: 0 0 18px; }
.voice-status { font: 600 .62rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.voice-status.on { color: #fde68a; }
#voice-list { list-style: none; overflow: auto; flex: 1; touch-action: pan-y; padding-bottom: 10px; }
#voice-list li { padding: 11px 0; border-bottom: 1px solid rgba(251, 191, 36, .1); }
#voice-list li .who { display: flex; align-items: center; gap: 7px; font: 700 .7rem/1.2 var(--mono); letter-spacing: .06em; color: #fde68a; }
#voice-list li .who .sw { width: 8px; height: 8px; border-radius: 2px; }
#voice-list li .who .tm { margin-left: auto; color: var(--ink-3); font-weight: 500; }
#voice-list li .said { margin-top: 5px; font-size: .9rem; line-height: 1.55; color: var(--ink); font-style: italic; }
#voice-list li .re { margin-top: 4px; font: 500 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
#voice-list li.mine { border-bottom-color: rgba(34, 211, 238, .15); }
#voice-list li.mine .who { color: var(--cyan-2); }
#voice-list li.mine .said { font-style: normal; color: var(--ink-2); }
#voice-list .empty { color: var(--ink-3); font-size: .82rem; padding: 14px 0; line-height: 1.6; }
.transmit { border-top: 1px solid var(--line); padding: 12px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.transmit textarea {
  width: 100%; resize: none; font: 400 .85rem/1.5 var(--font); color: var(--ink); padding: .6rem .7rem; border-radius: 10px;
  background: rgba(6, 2, 15, .6); border: 1px solid var(--line-2); outline: none; touch-action: auto;
}
.transmit textarea:focus { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(168, 85, 247, .15); }
.transmit-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.transmit-note { font-size: .7rem; color: var(--ink-3); line-height: 1.4; }
.rogue-voice {
  margin-top: 10px; padding: .55rem .7rem; border-left: 2px solid #fbbf24; background: rgba(251, 191, 36, .06);
  font-size: .82rem; line-height: 1.5; font-style: italic; color: #fef3c7; border-radius: 0 8px 8px 0;
}
.feed #feed-list li.voice span:nth-child(2) { color: #fef3c7; font-style: italic; }
#lore-list, #voice-list { flex: 1; min-height: 0; }