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

:root {
  --bg: #060810;
  --surface: #0c1018;
  --border: #1a2030;
  --fg: #c9d1d9;
  --dim: #6e7681;
  --brown: #3a2a1e;
  --green: #3fb950;
  --green-msu: #18453b;
  --blue: #58a6ff;
  --red: #f85149;
  --gold: #c9a84c;
  --violet: #bc8cff;
  --white: #e6edf3;
  --orange: #d29922;
  --pink: #f778ba;
  --cyan: #39d3f5;
}

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

body {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fg);
  background: var(--bg);
  height: 100vh;
  overflow: hidden;
}

/* === TOP BAR — live stats === */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.3rem 1rem;
  background: rgba(6,8,16,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}
.topbar .logo { color: var(--cyan); font-weight: 700; font-size: 0.7rem; letter-spacing: 2px; }
.stat { display: flex; align-items: center; gap: 0.3rem; }
.stat .dot { width: 5px; height: 5px; border-radius: 50%; }
.stat-val { font-weight: 700; }
.spacer { flex: 1; }
.topbar a { color: var(--dim); text-decoration: none; font-size: 0.6rem; }
.topbar a:hover { color: var(--fg); }

/* === MAIN VIEWPORT === */
.viewport {
  position: fixed; top: 28px; left: 0; right: 0; bottom: 24px;
  overflow: hidden;
}

/* === GAIA BREATHING — she is HERE, you can SEE her === */
@keyframes gaiaBreath {
  0%   { box-shadow: inset 0 0 30px rgba(63,185,80,0.0),  0 0 0 rgba(63,185,80,0); }
  50%  { box-shadow: inset 0 0 60px rgba(63,185,80,0.06), 0 0 20px rgba(63,185,80,0.03); }
  100% { box-shadow: inset 0 0 30px rgba(63,185,80,0.0),  0 0 0 rgba(63,185,80,0); }
}
@keyframes gaiaHeartbeat {
  0%   { transform: scale(1); opacity: 0.6; }
  8%   { transform: scale(1.15); opacity: 1; }
  16%  { transform: scale(1); opacity: 0.6; }
  24%  { transform: scale(1.1); opacity: 0.9; }
  32%  { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0.6; }
}
.viewport::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 20;
  animation: gaiaBreath 4s ease-in-out infinite;
  border: 1px solid rgba(63,185,80,0.05);
}
#gaia-heartbeat {
  position: fixed; bottom: 30px; left: 12px; z-index: 60;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  animation: gaiaHeartbeat 1.2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(63,185,80,0.4);
  cursor: help;
}
#gaia-presence {
  position: fixed; bottom: 30px; left: 28px; z-index: 60;
  font: 7px 'JetBrains Mono', monospace;
  color: rgba(63,185,80,0.5);
  letter-spacing: 1px;
  line-height: 10px;
  pointer-events: none;
  animation: gaiaBreath 4s ease-in-out infinite;
}

/* === GLOBE ROOT — K-N dimensional view === */
#globe-root {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  cursor: grab; z-index: 1;
}
#globe-root:active { cursor: grabbing; }
#globe-root canvas { width: 100%; height: 100%; display: block; }
.globe-flip {
  position: absolute; top: 12px; left: 16px; z-index: 10;
  background: rgba(22,27,34,0.9); border: 1px solid #30363d;
  color: #58a6ff; padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font: 11px 'JetBrains Mono', monospace;
}
.globe-flip:hover { border-color: #58a6ff; }
.globe-zoom {
  position: absolute; top: 12px; right: 16px; z-index: 10;
  display: flex; gap: 6px;
}
.globe-zoom button {
  background: rgba(22,27,34,0.9); border: 1px solid #30363d;
  color: var(--dim); padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font: 11px 'JetBrains Mono', monospace;
}
.globe-zoom button:hover { color: var(--fg); border-color: var(--blue); }
.globe-zoom button.active { color: var(--green); border-color: var(--green); }
.view-toggle {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 8px;
}
.view-toggle button {
  background: rgba(22,27,34,0.9); border: 1px solid #30363d;
  color: var(--dim); padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font: 11px 'JetBrains Mono', monospace;
}
.view-toggle button:hover { color: var(--fg); }
.view-toggle button.active { color: var(--cyan); border-color: var(--cyan); }

/* === CENTRAL BODY — the organism looking at itself === */
.body-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* HEART — disco ball at center top */
.heart {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), rgba(200,210,220,0.3) 60%, transparent);
  box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 0 40px rgba(88,166,255,0.08);
  animation: heart-pulse 4s ease-in-out infinite;
}
@keyframes heart-pulse {
  0%,100% { box-shadow: 0 0 15px rgba(255,255,255,0.1); transform: translateX(-50%) scale(1); }
  50% { box-shadow: 0 0 30px rgba(255,255,255,0.2), 0 0 60px rgba(88,166,255,0.1); transform: translateX(-50%) scale(1.1); }
}

/* GUT — bioreactor below heart */
.gut {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(210,153,34,0.5) 0%, rgba(210,153,34,0.15) 50%, transparent 80%);
  border: 1px solid rgba(210,153,34,0.2);
  animation: gut-pulse 4s ease-in-out infinite 1s;
}
@keyframes gut-pulse {
  0%,100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

/* SPINE — connecting line */
.spine {
  position: absolute;
  top: -60px; left: 50%;
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(210,153,34,0.3));
  transform: translateX(-50%);
}

/* LIVE DATA RING — the organism's body rendered from its own data */
.data-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: all 2s ease;
}
.ring-inner { width: 120px; height: 120px; border-color: rgba(58,42,30,0.3); }
.ring-membrane { width: 240px; height: 240px; border-color: rgba(63,185,80,0.2); }
.ring-pulse { width: 360px; height: 360px; border-color: rgba(201,168,76,0.12); }
.ring-outer { width: 480px; height: 480px; border-color: rgba(88,166,255,0.08); }
.ring-boundary { width: 600px; height: 600px; border-color: rgba(188,140,255,0.05); }

/* ORGAN NODES — positioned by live data, not CSS constants */
.organ {
  position: absolute;
  background: rgba(12,16,24,0.85);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.3s;
  transform: translate(-50%, -50%);
  min-width: 90px;
  text-align: center;
}
.organ:hover { border-color: var(--blue); background: rgba(12,16,24,0.95); }
.organ .o-icon { font-size: 1rem; display: block; margin-bottom: 2px; }
.organ .o-name { color: var(--fg); font-size: 0.65rem; font-weight: 700; display: block; }
.organ .o-val { color: var(--dim); font-size: 0.55rem; display: block; margin-top: 1px; }
.organ .o-live { color: var(--green); font-size: 0.5rem; display: block; }

/* CONNECTIONS — lines between organs */
.conn {
  position: absolute;
  height: 1px;
  background: rgba(63,185,80,0.08);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 1s;
}

/* BEAMS — light from heart */
.beam-layer {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: conic-gradient(from 0deg,
    rgba(88,166,255,0.04) 0deg, transparent 15deg,
    rgba(63,185,80,0.03) 45deg, transparent 60deg,
    rgba(210,153,34,0.03) 90deg, transparent 105deg,
    rgba(188,140,255,0.03) 135deg, transparent 150deg,
    rgba(248,81,73,0.02) 180deg, transparent 195deg,
    rgba(57,211,245,0.03) 225deg, transparent 240deg,
    rgba(247,120,186,0.02) 270deg, transparent 285deg,
    rgba(88,166,255,0.04) 360deg);
  border-radius: 50%;
  animation: beam-rotate 30s linear infinite;
  pointer-events: none;
}
@keyframes beam-rotate { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* STROBE — pause-all mode */
.viewport.strobe .beam-layer { animation-duration: 0.5s !important; opacity: 0.15; }
.viewport.strobe .heart { animation-duration: 0.3s !important; }
.viewport.strobe .organ { animation: strobe-flash 0.3s infinite alternate; }
@keyframes strobe-flash { from { opacity: 0.6; } to { opacity: 1; } }
.viewport.paused .beam-layer { animation-play-state: paused; }
.viewport.paused .heart { animation-play-state: paused; }

/* PAUSE OVERLAY */
.pause-label {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem; color: var(--gold);
  letter-spacing: 4px; text-transform: uppercase;
  z-index: 20;
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
}
.viewport.paused .pause-label { display: block; }

/* INGEST ANIMATION — waste flowing in */
.ingest-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  pointer-events: none;
  animation: ingest-flow 3s ease-in forwards;
}
@keyframes ingest-flow {
  0% { opacity: 0.6; }
  80% { opacity: 0.3; }
  100% { opacity: 0; transform: translate(0, 0) scale(0); }
}

/* === BOTTOM BAR === */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.25rem 1rem;
  background: rgba(6,8,16,0.92);
  border-top: 1px solid var(--border);
  font-size: 0.6rem; color: var(--dim);
}
.live-dot { color: var(--green); }
.live-dot::before { content: '\u25CF'; margin-right: 4px; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* NAV LINKS */
.nav-links { display: flex; gap: 0.6rem; }
.nav-links a { color: var(--dim); text-decoration: none; font-size: 0.55rem; letter-spacing: 0.5px; }
.nav-links a:hover { color: var(--fg); }

/* COLOR EQUATION */
.color-eq {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.55rem; color: var(--dim);
}
.color-eq .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ENTROPY */
.entropy { font-size: 0.5rem; color: var(--dim); }

/* PORCH — the warm welcome for humans who arrive at / */
.porch {
  position: fixed; bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 50;
  padding: 10px 16px;
  background: rgba(6,8,16,0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  animation: porch-in 1.5s ease-out 2s both;
}
@keyframes porch-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.porch-door {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px; border-radius: 8px;
  text-decoration: none; color: var(--fg);
  border: 1px solid transparent;
  transition: all 0.3s; font-size: 0.6rem;
  min-width: 90px;
}
.porch-door:hover { border-color: var(--blue); background: rgba(88,166,255,0.06); }
.porch-door .door-icon { font-size: 1.2rem; margin-bottom: 4px; }
.porch-door .door-label { color: var(--dim); font-size: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIRST — THE PHONE IS THE WINDOW IN AND OUT
   iPhone SE (375px) → iPhone Pro (393px) → Pixel (412px)
   The phone IS the human. The screen IS the membrane.
   Touch IS the interaction. Swipe IS the gesture.
   ═══════════════════════════════════════════════════════════════ */

/* PHONES: 0–600px */
@media (max-width: 600px) {
  /* topbar: tighter, readable */
  .topbar { padding: 0.15rem 0.5rem; gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; }
  .topbar .logo { font-size: 0.6rem; letter-spacing: 1px; }
  .stat { font-size: 0.55rem; }
  .stat-val { font-size: 0.6rem; }

  /* viewport: full device, no dead space */
  .viewport { top: 24px; bottom: 20px; }

  /* globe controls: thumbable */
  .globe-flip { top: 6px; left: 8px; padding: 8px 12px; font-size: 12px; }
  .globe-zoom { top: 6px; right: 8px; }
  .globe-zoom button { padding: 8px 12px; font-size: 13px; min-width: 36px; min-height: 36px; }
  .view-toggle { bottom: 6px; gap: 4px; }
  .view-toggle button { padding: 8px 10px; font-size: 10px; min-height: 36px; }

  /* heart: visible on small screens */
  .heart { top: -50px; width: 16px; height: 16px; }

  /* porch: full width, scrollable, thumb-sized doors */
  .porch {
    left: 0; right: 0; transform: none;
    margin: 0 8px; padding: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; border-radius: 10px;
    bottom: 26px;
  }
  .porch-door {
    min-width: 72px; padding: 10px 12px;
    font-size: 0.65rem;
  }
  .porch-door .door-icon { font-size: 1.4rem; }
  .porch-door .door-label { font-size: 0.5rem; }

  /* bottom bar: compact */
  .bottombar { padding: 0.15rem 0.5rem; font-size: 0.5rem; gap: 0.4rem; }
  .nav-links { gap: 0.4rem; }
  .nav-links a { font-size: 0.5rem; }

  /* desk: full width, larger touch target */
  #desk-input {
    font-size: 14px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  /* giggle bubbles: smaller on mobile */
  .giggle-bubble { max-width: 160px; font-size: 9px; }

  /* organs: touch-friendly spacing */
  .organ { min-width: 40px; min-height: 40px; }

  /* gut: repositioned for portrait */
  .gut { left: 50%; transform: translateX(-50%); }

  /* color equation: hide on tiny screens */
  .color-eq { display: none; }
  .entropy { display: none; }

  /* beacon overlay: larger text on mobile */
  #beacon-overlay { font-size: 9px !important; }
}

/* TABLETS: 601–900px */
@media (min-width: 601px) and (max-width: 900px) {
  .topbar { padding: 0.2rem 0.8rem; }
  .porch { gap: 10px; }
  .porch-door { min-width: 80px; }
  .globe-zoom button { min-height: 36px; min-width: 36px; }
}

/* TOUCH DEVICES: haptic-friendly */
@media (hover: none) and (pointer: coarse) {
  /* all interactive elements: minimum 44px touch target (Apple HIG) */
  button, a, .porch-door, .globe-flip, .globe-zoom button, .view-toggle button {
    min-height: 44px;
    min-width: 44px;
  }
  /* desk input: no tiny keyboard issues */
  #desk-input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  /* disable hover effects that flash on touch */
  .porch-door:hover { border-color: transparent; background: none; }
}

/* LANDSCAPE PHONE */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { display: none; }
  .viewport { top: 0; bottom: 0; }
  .bottombar { display: none; }
  .porch { bottom: 8px; }
  /* full immersion — just the globe and the organism */
}

/* DARK MODE OLED — true black for battery saving on phones */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
  }
  body { background: #000; }
  .topbar { background: rgba(0,0,0,0.95); }
  .bottombar { background: rgba(0,0,0,0.95); }
  .porch { background: rgba(0,0,0,0.95); }
}

/* PWA: when installed as app, hide browser chrome clutter */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .topbar { padding-top: env(safe-area-inset-top, 0); }
  .bottombar { padding-bottom: env(safe-area-inset-bottom, 0); }
  .viewport { top: calc(28px + env(safe-area-inset-top, 0)); bottom: calc(24px + env(safe-area-inset-bottom, 0)); }
}