/**
 * Time/LifeOS — Mobile-Ready Responsive Design System
 * OLED Deep Black + Glassmorphism + Gold & Teal Accents
 */

:root {
  --bg: #07090e;
  --bg-surface: rgba(16, 22, 34, 0.75);
  --bg-card: rgba(22, 30, 46, 0.65);
  --border: rgba(232, 184, 109, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --text: #f0f4fc;
  --text-muted: #8c98ad;
  --gold: #e8b86d;
  --gold-glow: rgba(232, 184, 109, 0.25);
  --life-teal: #2dd4bf;
  --life-cyan: #38bdf8;
  --spent-red: #f87171;
  --purple-accent: #a855f7;
  --emerald-accent: #10b981;
  --bottom-bar-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: 
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(232, 184, 109, 0.08), transparent 60%),
    radial-gradient(circle 400px at 100% 100%, rgba(45, 212, 191, 0.05), transparent);
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-bottom) + 16px);
}

/* Glassmorphism Card Primitives */
.glass-panel {
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
}

.glass-card:hover {
  border-color: rgba(232, 184, 109, 0.3);
}

/* Typography Helpers */
.font-serif-luxury {
  font-family: 'Instrument Serif', Georgia, serif;
}

.font-mono-num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Gold Gradient Text */
.gold-text-gradient {
  background: linear-gradient(135deg, #fef08a 0%, #e8b86d 50%, #b48135 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.teal-text-gradient {
  background: linear-gradient(135deg, #a7f3d0 0%, #2dd4bf 50%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pinned Clocks Bar */
.trio-clock-badge {
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.trio-clock-badge:active {
  transform: scale(0.97);
}

/* Analog Age Clock Dial */
.age-dial-container {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

.age-dial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.age-dial-needle {
  transform-origin: 110px 110px;
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Concentric Canvas Wheel */
.wheel-canvas-wrapper {
  position: relative;
  width: min(92vw, 440px);
  height: min(92vw, 440px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#timeWheelCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.wheel-center-hud {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a2233 40%, #0d121c 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 24px var(--gold-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Heatmap Grid */
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3.5px;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: thin;
}

.heatmap-cell {
  width: 13px;
  height: 13px;
  border-radius: 2.5px;
  background-color: rgba(255, 255, 255, 0.05);
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.heatmap-cell:hover {
  transform: scale(1.3);
  z-index: 10;
}

.heatmap-cell[data-score="0"] { background-color: rgba(239, 68, 68, 0.2); }
.heatmap-cell[data-score="1"] { background-color: rgba(245, 158, 11, 0.4); }
.heatmap-cell[data-score="2"] { background-color: rgba(16, 185, 129, 0.35); }
.heatmap-cell[data-score="3"] { background-color: rgba(16, 185, 129, 0.7); }
.heatmap-cell[data-score="4"] { background-color: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }

/* Strict Bottom Navigation Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-bar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(232, 184, 109, 0.2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 999;
}

@media (min-width: 1024px) {
  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    width: min(840px, 90vw);
    border-radius: 1.25rem 1.25rem 0 0;
    border-left: 1px solid rgba(232, 184, 109, 0.25);
    border-right: 1px solid rgba(232, 184, 109, 0.25);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item.active {
  color: var(--gold);
}

.nav-item.active .nav-icon {
  transform: translateY(-2px) scale(1.1);
  color: var(--gold);
  filter: drop-shadow(0 0 8px var(--gold-glow));
}

.nav-active-pill {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* Form Inputs */
.modern-input {
  background: rgba(10, 14, 24, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  width: 100%;
}

.modern-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Animations */
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.pulse-glow {
  animation: pulseSubtle 3s infinite ease-in-out;
}

/* Hide tab sections */
.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.tab-content.active {
  display: block;
  opacity: 1;
}

/* Rolling Counter Animation Styles */
.rolling-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.rolling-active {
  color: #fef08a !important;
  text-shadow: 0 0 12px rgba(254, 240, 138, 0.4);
}

/* Radar Pulse Rings for Present Card */
.radar-ring {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Elevated Opportunity Slice Glow */
.opportunity-slice-glow {
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}

.donut-slice {
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
  cursor: pointer;
}

.donut-slice:hover {
  filter: brightness(1.2);
}