*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#040309;
  --bg-r:#08071a;
  --bg-glass:rgba(8,7,26,0.72);
  --bg-panel:rgba(10,9,22,0.94);
  --acc-rgb:139,92,246;
  --acc:rgb(var(--acc-rgb));
  --acc-dim:rgba(var(--acc-rgb),0.1);
  --acc-glow:rgba(var(--acc-rgb),0.28);
  --acc-border:rgba(var(--acc-rgb),0.18);
  --char-rgb:var(--acc-rgb);
  --char:rgb(var(--char-rgb));
  --char-dim:rgba(var(--char-rgb),0.1);
  --char-glow:rgba(var(--char-rgb),0.22);
  --char-border:rgba(var(--char-rgb),0.2);
  --text:#ece8f8;
  --sub:#8a84a8;
  --muted:#2e2a45;
  --strip-w:48px;
  --strip-w-open:200px;
  --chat-col:880px;
  --font-display:'SF Pro Display',system-ui,-apple-system,sans-serif;
  --font-mono:'SF Mono','Fira Code',monospace;
  --font-body:'SF Pro Text',system-ui,-apple-system,sans-serif;
}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--font-body);color:var(--text);display:flex;flex-direction:column}

/* bond ring fill percentage — registered so conic-gradient fills can transition */
@property --bp{syntax:'<percentage>';inherits:false;initial-value:0%}

/* ── FOCUS ── */
/* Keyboard focus ring at the active character's colour (brand violet when idle).
   :where() keeps specificity at zero so component-level outline rules still win. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid rgba(var(--char-rgb),0.75);
  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.15s !important;
  }
  #msgs-wrap{scroll-behavior:auto}
}

/* ── WORLD HEALTH STAGE OVERRIDES ── */
/* acc-rgb is shifted by JS (applyWorldHealthStage). These handle structural tone shifts. */
:root[data-health-stage="sovereign"] {
  --text:#f0edff;
  --sub:#a89ec8;
}
:root[data-health-stage="fractured"] {
  --sub:#7a7498;
  --muted:#252040;
}
:root[data-health-stage="collapse"] {
  --text:#d4cfee;
  --sub:#6e6888;
  --muted:#1e1a35;
}
:root[data-health-stage="abyss"] {
  --text:#c4b8d8;
  --sub:#5a5472;
  --muted:#180e2a;
  --bg:#03010a;
  --bg-r:#07041a;
}

/* noise=1: subtle flicker on borders */
:root[data-noise="1"] #topbar,
:root[data-noise="1"] .feed-post,
:root[data-noise="1"] .world-card-large {
  animation: borderFlicker 8s infinite;
}
/* noise=2: more visible, affects stage tint */
:root[data-noise="2"] #stage-char-tint {
  animation: tintFlicker 4s infinite;
}
:root[data-noise="2"] #topbar,
:root[data-noise="2"] .feed-post {
  animation: borderFlicker 4s infinite;
}
/* noise=3 (abyss): everything flickers */
:root[data-noise="3"] #app {
  animation: abyssFlicker 3s infinite;
}
:root[data-noise="3"] #stage-portrait {
  animation: stageGlitch 5s infinite;
}

@keyframes borderFlicker {
  0%,95%,100% { opacity:1 }
  96%          { opacity:0.85 }
  98%          { opacity:0.95 }
}
@keyframes tintFlicker {
  0%,90%,100% { opacity:1 }
  91%  { opacity:0.6 }
  93%  { opacity:0.9 }
  95%  { opacity:0.5 }
}
@keyframes abyssFlicker {
  0%,88%,100% { opacity:1; filter:none }
  89% { opacity:0.9; filter:hue-rotate(20deg) }
  92% { opacity:0.8; filter:hue-rotate(-10deg) }
  95% { opacity:0.95; filter:none }
}
@keyframes stageGlitch {
  0%,85%,100% { transform:none }
  86% { transform:translateX(2px) }
  88% { transform:translateX(-2px) }
  90% { transform:none }
}