/* ============================================
   StreamSprite — Main Layout & Base Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Base sizing */
  --sprite-size: 128px;
  --bar-width: 200px;
  --bar-height: 22px;
  --bar-gap: 8px;
  --bar-radius: 11px;
  --container-padding: 16px;

  /* Colors */
  --bg-bar: rgba(20, 20, 30, 0.7);
  --bg-bar-label: rgba(0, 0, 0, 0.45);
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.7);

  /* Stat bar gradient stops */
  --bar-high: #4ade80;
  --bar-mid: #facc15;
  --bar-low: #f87171;

  /* Glass effect */
  --glass-bg: rgba(15, 15, 25, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;
}

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

body {
  background: transparent;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Pet container — JS-driven positioning via transform */
#pet-container {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sprite-size);
  height: var(--sprite-size);
  z-index: 10;
  will-change: transform;
}

/* Stats container — JS-driven positioning, follows pet */
#stats-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--bar-gap);
  z-index: 5;
  will-change: transform;
}

/* Connection status indicator */
.status-dot {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 100;
  transition: background-color 0.3s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.status-dot[data-status="connected"] {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.status-dot[data-status="disconnected"] {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

.status-dot[data-status="reconnecting"] {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
  animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}