/* ================================================================
 * MAD Orb — Classic CSS (restored from PR #576, commit 088dd1c9)
 * Palette: navy #033765, gold #DAB45C, white background
 * This is the PRIMARY renderer — no WebGL in classic mode.
 * ================================================================ */

:root {
  --bg1:    #ffffff;
  --bg2:    #f6f7fb;
  --ink:    #0b1220;
  --lvl:    0;
  --breath: 0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 50% 35%, var(--bg1), var(--bg2));
  overflow: hidden;
}

.stage { height: 100%; display: grid; place-items: center; position: relative; }
.orb-wrap { width: min(520px,80vw); height: min(520px,80vw); display: grid; place-items: center; position: relative; }

.orb-shadow {
  position: absolute; width: 62%; height: 14%; bottom: 12%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(0,0,0,.25), rgba(0,0,0,0));
  filter: blur(10px);
  transform: scale(calc(0.95 + var(--lvl)*0.12 + var(--breath)*0.02));
  opacity: calc(0.35 + var(--lvl)*0.25);
}

.orb {
  position: relative; width: 44%; height: 44%;
  border-radius: 50%;
  transform: translateY(calc(-2% - var(--lvl)*2%))
             scale(calc(1 + var(--lvl)*0.08 + var(--breath)*0.02));
  transition: transform 120ms linear;
}

.orb-core {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15) 45%, rgba(3,55,101,.35) 70%, rgba(3,55,101,.75)),
    radial-gradient(120% 120% at 70% 80%, rgba(218,180,92,.35), rgba(218,180,92,0) 55%);
  box-shadow: 0 30px 70px rgba(3,55,101,.22), 0 10px 25px rgba(0,0,0,.12);
}

.orb-halo {
  position: absolute; inset: -18%; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(3,55,101,.24), rgba(3,55,101,0) 60%),
    radial-gradient(closest-side, rgba(218,180,92,.20), rgba(218,180,92,0) 62%);
  filter: blur(calc(8px + var(--lvl)*6px));
  opacity: calc(0.45 + var(--lvl)*0.55);
  transform: scale(calc(1.00 + var(--lvl)*0.10));
  transition: opacity 120ms linear, transform 120ms linear, filter 120ms linear;
}

.orb-rings {
  position: absolute; inset: -35%; border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(3,55,101,0) 0deg,
      rgba(3,55,101,.22) 50deg,
      rgba(218,180,92,.20) 95deg,
      rgba(3,55,101,0) 140deg,
      rgba(218,180,92,.18) 210deg,
      rgba(3,55,101,.18) 260deg,
      rgba(3,55,101,0) 360deg);
  mask: radial-gradient(closest-side, transparent 56%, #000 58%, #000 62%, transparent 66%);
  opacity: calc(0.20 + var(--lvl)*0.55);
  filter: blur(1px);
  animation: spin 10s linear infinite;
  transform: scale(calc(1.00 + var(--lvl)*0.12));
}

@keyframes spin {
  from { transform: rotate(0deg) scale(calc(1.00 + var(--lvl)*0.12)); }
  to   { transform: rotate(360deg) scale(calc(1.00 + var(--lvl)*0.12)); }
}

/* State-based body accents */
body.orb-state-listening .orb-core {
  box-shadow: 0 0 50px rgba(21,101,192,0.25), 0 10px 25px rgba(0,0,0,0.12);
}
body.orb-state-thinking .orb-core {
  box-shadow: 0 0 50px rgba(218,180,92,0.30), 0 10px 25px rgba(0,0,0,0.12);
}
body.orb-state-thinking .orb-rings {
  animation-duration: 3s;
}
body.orb-state-speaking .orb-halo {
  opacity: calc(0.55 + var(--lvl)*0.45);
}
body.orb-state-success .orb-core {
  box-shadow: 0 0 60px rgba(39,174,96,0.25), 0 10px 25px rgba(0,0,0,0.12);
}
body.orb-state-error .orb-core {
  box-shadow: 0 0 50px rgba(192,57,43,0.25), 0 10px 25px rgba(0,0,0,0.12);
}

/* HUD (debug, hidden in kiosk via inline CSS) */
.hud {
  position: absolute; bottom: 22px; left: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  min-width: 330px;
}

.hud-title {
  font-weight: 900; letter-spacing: .12em; font-size: 12px;
  color: rgba(3,55,101,.92); margin-bottom: 10px;
}

.hud-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 900;
  border: 1px solid rgba(3,55,101,.12);
  background: rgba(3,55,101,.06);
  color: rgba(3,55,101,.92);
}

.pill-muted {
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.65);
}

.btn {
  appearance: none;
  border: 1px solid rgba(3,55,101,.16);
  background: rgba(255,255,255,.9);
  color: rgba(3,55,101,.92);
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 900; font-size: 12px;
  cursor: pointer;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }

.btn-talk { border-color: rgba(0,0,0,.10); }
.btn-talk.active { background: rgba(3,55,101,.08); }

.hud-note { font-size: 12px; color: rgba(0,0,0,.55); margin-top: 6px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; }