/* ── Fonts ── */
.font-score { font-family: 'Jeju Gothic', sans-serif; line-height: 0.75; letter-spacing: 0; }
body { font-family: 'Jeju Gothic', sans-serif; }

/* ── Background ── */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1a1020;
  margin: 0;
}

/* ── Header ── */
.Vantage-Header {
  background: linear-gradient(135deg, #1e0545 0%, #3a1278 45%, #4d189a 55%, #1e0545 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 3px 16px rgba(0,0,0,0.45);
}

/* ── Brand Texture Overlay ── */
.brand-texture {
  position: relative !important;
  isolation: isolate;
}
.brand-texture::before {
  content: '';
  position: absolute !important;
  inset: 0 !important;
  background-image: url('./assets/Gemini_Generated_Image_tnu9w7tnu9w7tnu9.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.42 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.brand-texture > * {
  position: relative;
  z-index: 1;
}

/* ── Etched content ── */
.etched-content {
  color: #FFFFFF;
  font-weight: 800;
  text-shadow:
    0 -1.2px 1px rgba(0,0,0,0.6),
    0 1px 0.5px rgba(255,255,255,0.18);
}


/* ── Deep-Etch Card — Stone Tablet ──────────────────────
   Each tile looks like a slab of stone: warm off-white
   ground, texture overlay, crisp beveled frame.
──────────────────────────────────────────────────────── */
.deep-etch {
  position: relative;
  overflow: hidden;
  background: #ece8df;
  border-radius: 20px;
  border: 1px solid rgba(140,128,118,0.28);
  box-shadow:
    inset 2px 2px 5px rgba(42,8,94,0.05),
    inset 8px 12px 20px rgba(42,8,94,0.20),
    0 1px 0 rgba(255,255,255,0.7);
}

/* Stone texture on every tile */
.deep-etch::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./assets/whitish-gray-abstract-rough-texture.webp');
  background-size: 320px;
  background-repeat: repeat;
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Keep all inner content above the texture */
.deep-etch > * {
  position: relative;
  z-index: 1;
}

/* Chiseled rim — lip catching light */
.etch-rim-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 -1px 0.5px rgba(255,255,255,0.9),
    inset -0.5px 0 0.5px rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 2;
}

/* ── Data Tile — score view ─────────────────────────── */
.data-tile {
  position: relative;
  overflow: hidden;
}
.data-tile > span {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4), 0 1px 0.5px rgba(255,255,255,0.2);
}
.data-tile .section-eyebrow {
  color: #3d352e;
  font-size: 16px;
}
.data-tile .material-symbols-outlined {
  color: #2A085E;
  filter: drop-shadow(0 1px 0.5px rgba(255,255,255,0.8));
  opacity: 1;
}

/* ── Gauge pedestal (inner raised island) ── */
.pedestal-lift {
  background: #ece8df;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.15), inset 0 1.5px 0 rgba(255,255,255,1);
}

/* ── Gauge basin ── */
.gauge-basin {
  border-radius: 20px !important;
  box-shadow:
    inset 1.5px 1.5px 0px rgba(80,255,120,0.5),
    inset 8px 16px 32px rgba(80,200,120,0.35),
    inset 12px 20px 40px rgba(0,0,0,0.20),
    0 2px 2px rgba(255,255,255,0.9) !important;
}


/* ── Hero goal bar ── */
.goal-bar-fill {
  width: 77.1%;
  background: linear-gradient(90deg, #ba1a1a 0%, #f59e0b 35%, #facc15 65%, #00c47a 100%);
  box-shadow: 0 0 8px rgba(0,0,0,0.06);
  animation: goalBarDraw 1.4s cubic-bezier(0.34,1.56,0.64,1) 0.55s both;
}
@keyframes goalBarDraw { from { width: 0% } to { width: 77.1% } }

/* ── Score arc ── */
.score-arc {
  stroke-width: 8;
  animation: arcDraw 1.6s cubic-bezier(0.4,0,0.2,1) 0.3s both;
}
@keyframes arcDraw {
  from { stroke-dasharray: 0 830; }
  to   { stroke-dasharray: 600 230; }
}

/* ── Fade-up stagger ── */
.fu { animation: fadeUp 0.52s cubic-bezier(0.4,0,0.2,1) both; }
.d1 { animation-delay: 0.06s; }
.d2 { animation-delay: 0.13s; }
.d3 { animation-delay: 0.20s; }
.d4 { animation-delay: 0.27s; }
.d5 { animation-delay: 0.34s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }

/* ── Bottom Nav ── */
nav {
  background: linear-gradient(to bottom, #e6e2d8, #d9d4cb) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 2px solid rgba(0,0,0,0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.tab-icon { font-size: 26px !important; margin-top: 8px !important; }
.tab-label {
  font-size: 16px !important;
  letter-spacing: 0.10em !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

/* ── Tab views ── */
.view { display: none; }
.view.active {
  display: flex;
  flex-direction: column;
  padding: 90px 20px 108px;
  min-height: 100%;
}

/* Score view overrides */
#view-score.active {
  display: flex;
  flex-direction: column;
  min-height: calc(932px - 88px - 88px);
  padding: 24px 20px;
  justify-content: flex-start;
}

/* Insights view overrides */
#view-insights.active {
  padding-top: 24px;
}

/* Actions view overrides */
#view-actions.active {
  padding-top: 24px;
}

/* Profile view overrides */
#view-profile.active {
  padding-top: 58px;
}

/* ── Material icons ── */
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; }
.icon-fill { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* ── Range slider ── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 12px; border-radius: 9999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #00c47a 0%, #facc15 35%, #f59e0b 65%, #ba1a1a 100%);
  box-shadow: inset 2px 4px 8px rgba(0,0,0,0.20), inset 4px 8px 16px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.7);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ece8df; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ── Precision Inlay CTA ── */
.cta-bevel {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 1px 0 rgba(255,255,255,0.9);
  transform: none;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.cta-bevel:active {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(0,0,0,0.3);
}

/* ── Profile avatar ── */
.avatar-stone {
  background: linear-gradient(145deg, #2a0a5e 0%, #1a0535 100%);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── Safe area ── */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ── Hide scrollbar ── */
#view-scroller { -ms-overflow-style: none; scrollbar-width: none; }
#view-scroller::-webkit-scrollbar { display: none; }

/* ── Icon badge in rows ── */
.icon-badge-neutral {
  background: #e4ddd5;
  border: 1px solid rgba(140,128,118,0.3);
}
.icon-badge-red {
  background: #fde8e8;
  border: 1px solid rgba(186,26,26,0.15);
}
.icon-badge-amber {
  background: #fef3e2;
  border: 1px solid rgba(245,158,11,0.2);
}
.icon-badge-emerald {
  background: #e2f5ec;
  border: 1px solid rgba(0,108,74,0.18);
}
.icon-badge-blue {
  background: #e8f0fe;
  border: 1px solid rgba(37,99,235,0.15);
}
.icon-badge-purple {
  background: #ede9fe;
  border: 1px solid rgba(124,58,237,0.2);
}

/* ── Section sub-label ── */
.section-eyebrow {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: #3d352e;
  text-shadow: 0 -0.5px 0 rgba(0,0,0,0.5), 0 1px 0.5px rgba(255,255,255,0.3);
}

/* ── Tile contextual glow — History (purple) ── */
.tile-history {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(168,85,247,0.4),
    inset 8px 16px 32px rgba(147,51,234,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}

/* ── Tile contextual glow — Age (amber) ── */
.tile-age {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(245,158,11,0.4),
    inset 8px 12px 20px rgba(217,119,6,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}

/* ── Insights factor row glows ── */
.insight-row-red {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(220,38,38,0.4),
    inset 8px 12px 20px rgba(185,28,28,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}

.insight-row-amber {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(245,158,11,0.4),
    inset 8px 12px 20px rgba(217,119,6,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}

.insight-row-green {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(80,255,120,0.4),
    inset 8px 12px 20px rgba(80,200,120,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}

.insight-row-blue {
  box-shadow:
    inset 1.5px 1.5px 0px rgba(37,99,235,0.4),
    inset 8px 12px 20px rgba(29,78,216,0.25),
    inset 12px 20px 40px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.7);
}