/* ============================================================
   troontraits — "aurora" dark theme
   ============================================================ */
:root {
  --bg: #08070d;
  --bg-2: #0d0b18;
  --text: #f4f3fb;
  --text-dim: #9b9ab5;

  --violet: #8b5cf6;
  --fuchsia: #ec4899;
  --cyan: #22d3ee;
  --grad-aurora: linear-gradient(120deg, #8b5cf6, #ec4899, #22d3ee);

  --good: #34d399;
  --watch: #fbbf24;
  --off: #fb7185;

  --glass: rgba(8, 7, 16, 0.66);
  --glass-strong: rgba(6, 5, 12, 0.8);
  --glass-brd: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  --radius: 18px;

  /* safe-area shorthands (fall back to 0 on non-notched devices) */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

/* genuine text fields stay selectable even though the page disables selection */
input, textarea { user-select: text; -webkit-user-select: text; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  /* no text/UI is selectable — stops a wheel/hairline drag from highlighting
     surrounding text on desktop (real inputs re-enable it below) */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  /* dynamic viewport height so the mobile URL bar can't crop the scene */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  position: relative;
  /* aurora depth behind/around the camera */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(255, 255, 255, 0.06), transparent 55%),
    var(--bg);
}

/* ---------- camera + stage ---------- */
/* The live <video> sits full-screen BEHIND the canvas (which paints over it
   completely). It only needs to keep decoding frames — and iOS Safari is far
   happier decoding an on-page, properly-sized video than an off-screen 1px one. */
#cam {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  touch-action: none;           /* no pinch/double-tap zoom on the scene */
  background: transparent;
}

/* dark vignette so glass UI stays legible over any feed */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(4, 3, 8, 0.55) 100%);
  z-index: 2;
}

/* ---------- floating glass ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

.hidden { display: none !important; }

/* ---------- floating age / gender tiles ----------
   JS positions these every frame via `transform` (spring physics), so the
   only CSS transition is opacity. pointer-events:none so they never
   intercept stage / hairline drags. */
.agtile {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 8px 13px 9px;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}
.agtile.is-shown { opacity: 1; }
.agtile__gender,
.agtile__age {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 0.8rem + 1.4vw, 1.35rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.agtile__gender { text-transform: capitalize; }

/* ---------- back-to-start button (camera / photo viewer) — matches .bonepill__back ---------- */
.cam-back {
  position: fixed;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 18px);
  min-height: 0;
  height: 36px;
  padding: 0 14px;
  font-size: 0.84rem;
}

/* floating Back buttons sit over busy backgrounds (camera feed / 3D scene),
   so give them the page's dark glass fill (darkens what's behind) instead of
   the near-transparent ghost bg. `.btn.` raises specificity above .btn--ghost,
   which is defined later in the sheet and would otherwise win the cascade. */
.btn.cam-back,
.btn.bonepill__back {
  background: var(--glass);
  border-color: var(--glass-brd);
  color: var(--text);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.btn.cam-back:hover,
.btn.bonepill__back:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
  background: var(--glass-strong);
}

/* ---------- readout ---------- */
.readout {
  position: fixed;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  padding: 14px 18px 16px;
  min-width: 168px;
  text-align: right;
  transition: opacity 0.45s ease;
}
/* fade the readout out during a morph */
.readout--out { opacity: 0; pointer-events: none; }
.readout__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.readout__num {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 6vw, 3.8rem);
  line-height: 1;
  margin: 4px 0 8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pill--good    { color: var(--good);  border-color: rgba(52, 211, 153, 0.5);  background: rgba(52, 211, 153, 0.12); }
.pill--watch   { color: var(--watch); border-color: rgba(251, 191, 36, 0.5);  background: rgba(251, 191, 36, 0.12); }
.pill--off     { color: #fff;         border-color: rgba(251, 113, 133, 0.85); background: rgba(214, 45, 68, 0.62); }
.pill--neutral { color: var(--cyan);  border-color: rgba(34, 211, 238, 0.5);  background: rgba(34, 211, 238, 0.12); }

.readout__metrics {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  font-size: 0.74rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.readout__metrics b { color: var(--text); font-weight: 600; }

/* "All" mode: per-measurement breakdown under the overall score.
   Collapses by default — a capped window whose last rows fade out under a
   chevron; tapping the readout tile expands/collapses it. */
.breakdown {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-brd);
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  overflow: hidden;
  /* max-height is set inline by JS to the exact content height (expanded) or the
     collapsed px, so the transition has no dead zone and tracks the chevron */
  transition: max-height 0.32s ease;
}
.breakdown.is-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* chevron affordance under the (faded) list */
.bd-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  margin-bottom: -6px; /* trim the gap to the tile's bottom padding */
  color: var(--text-dim);
  transition: transform 0.3s ease, color 0.2s;
}
.bd-toggle:hover { color: var(--text); }
.bd-toggle svg { width: 18px; height: auto; display: block; }
.bd-toggle.is-open { transform: rotate(180deg); }
.readout.is-expandable { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .breakdown, .bd-toggle { transition: none; }
}
.bd__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.72rem;
}
.bd__name { color: var(--text-dim); white-space: nowrap; }
.bd__val {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd__val[data-state="good"]    { color: var(--good); }
.bd__val[data-state="watch"]   { color: var(--watch); }
.bd__val[data-state="off"]     { color: var(--off); }
.bd__val[data-state="neutral"] { color: var(--cyan); }

/* ---------- controls ---------- */
.controls {
  position: fixed;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  gap: 8px;
  padding: 8px;
}

/* ---------- measurement mode switcher (iOS-camera-style wheel) ---------- */
/* The visible glass "pill" is a centered band drawn by #modeSwitch::before,
   while #modeSwitch itself is a TALLER, transparent box that's purely the
   grab/scroll area (easier to grab on mobile). It grows upward, away from the
   controls below, so it never overlaps them. The .glass class is overridden
   here because the glass look now lives on ::before. */
#modeSwitch {
  position: fixed;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
  width: min(96vw, 500px);
  padding: 0;
  overflow: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  /* horizontal edge-fade applies to the pill (::before) + the track text */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
/* the visible glass pill — a center band, narrower than the grab box */
#modeSwitch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-radius: var(--radius);
  /* faded white wash peaking in the centre — marks the "selected" middle slot,
     dissolving toward the left/right edges */
  background:
    linear-gradient(to right, transparent 8%, rgba(255, 255, 255, 0.13) 50%, transparent 92%),
    var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-brd);
  /* no box-shadow: the parent's overflow:hidden clips it into a hard-edged
     box (the blur gets sliced at the grab-box bounds), so it can't render */
  pointer-events: none;
  z-index: 0;
}
.modeswitch__track {
  position: relative;        /* so .mode offsetLeft is measured from here */
  z-index: 1;                /* sit above the press-FX layer */
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: 50%;       /* lets the first/last mode reach the centre */
  padding-block: 16px;       /* transparent vertical grab extension */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* fade both edges so off-centre modes dissolve — the "wheel" look */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
}
.modeswitch__track::-webkit-scrollbar { display: none; }
.modeswitch__track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }

.mode {
  scroll-snap-align: center;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  white-space: nowrap;
  padding: 6px 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s, transform 0.18s;
}
.mode:hover { color: var(--text); }
.mode.is-active {
  color: var(--text);
  font-weight: 700;
  transform: scale(1.08);
}

/* press/drag brightness wash on the wheel tile — brightens while held, then
   fades back to the resting glass colour on release (JS toggles .is-pressed) */
.modeswitch__fx {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;                /* match the visible pill band (#modeSwitch::before) */
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.55s ease; /* slow fade-out by default */
}
#modeSwitch.is-pressed .modeswitch__fx {
  opacity: 1;
  transition: opacity 0.12s ease; /* quick brighten on press */
}
@media (prefers-reduced-motion: reduce) {
  .modeswitch__fx { transition: none; }
}

/* ---------- frontality (pose) warning ---------- */
/* fades in just above the mode wheel when the face is turned / tilted */
.alignwarn {
  position: fixed;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  /* sit the same visible gap above the wheel as the buttons sit below it */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 178px);
  padding: 7px 15px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ffd9df;
  background: rgba(96, 14, 26, 0.85);
  border: 1px solid rgba(251, 113, 133, 0.6);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.alignwarn.is-shown { opacity: 1; }
/* glowing bead riding the pill's stroke — JS positions it (transform) opposite
   the head's aim, as a "move toward here" cue. Fades in with misalignment. */
.alignwarn__aim {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 113, 133, 0.8), rgba(251, 113, 133, 0.3) 45%, transparent 72%);
  box-shadow: 0 0 16px 6px rgba(251, 113, 133, 0.5);
  filter: blur(5px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform, opacity;
}

/* ---------- morph-to-ideal ---------- */
.morphtitle {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  transform: translateX(-50%);
  padding: 10px 20px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text);
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--glass-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.morphtitle.is-shown { opacity: 1; }

.morphback {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.morphback.is-shown { opacity: 1; pointer-events: auto; }

.btn {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 18px;
  min-height: 48px;             /* comfortable touch target */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn__icon { font-size: 1.05rem; line-height: 1; }
.btn__svg { width: 1.15em; height: 1.15em; flex: none; display: block; overflow: visible; }
/* right-aligned arrow on the homepage Start buttons (label stays centered) */
.btn__arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3em;
  height: 1.3em;
  flex: none;
  display: block;
  overflow: visible;
}
.btn:has(.btn__arrow) { position: relative; }

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-brd);
  color: var(--text-dim);
}
.btn--ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.btn--ghost.is-on {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

.btn--primary {
  color: #fff;
  background-image: var(--grad-aurora);
  background-size: 160% 160%;
  border: none;
  font-weight: 600;
  padding: 14px 26px;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.35);
  animation: auroraShift 8s ease infinite;
}
.btn--primary:hover { box-shadow: 0 10px 36px rgba(139, 92, 246, 0.5); }

/* white feature buttons (start / bonecube / use-camera / retry) — black text + white glow */
#startBtn.btn--primary,
#bonepillBtn.btn--primary,
#useCameraBtn.btn--primary,
#retryBtn.btn--primary {
  background-image: none;
  background-color: #fff;
  color: #08070d;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.4);
  animation: none;
}
#startBtn.btn--primary:hover,
#bonepillBtn.btn--primary:hover,
#useCameraBtn.btn--primary:hover,
#retryBtn.btn--primary:hover { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); }

@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- center overlay (start / loading / error) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  /* darken + blur whatever is behind (e.g. the camera warming up) */
  background: rgba(6, 5, 12, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  transition: opacity 0.5s ease;
}
.overlay.hidden { display: none; }
/* fade the whole overlay (blur + loading bar) out when ready */
.overlay--out { opacity: 0; }

/* ---------- night-sky starfield (homepage only) ----------
   three parallax layers of dots, each drifting subtly downward; only shown
   while the start card is up (.overlay--start, toggled in showCard()). */
.starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  /* pointer parallax offset, updated by JS on the homepage (px from center) */
  --mx: 0px;
  --my: 0px;
}
.overlay--start .starfield { opacity: 1; }
.overlay__card { position: relative; z-index: 1; } /* cards sit above the stars */

.starfield__layer {
  position: absolute;
  inset: -90px;                 /* oversized so pointer parallax never bares an edge */
  background-repeat: repeat;
  will-change: background-position, transform;
  animation: starfall linear infinite;
  /* per-layer depth × pointer offset = parallax; deeper layers shift more */
  transform: translate3d(
    calc(var(--mx) * var(--sf-depth, 1)),
    calc(var(--my) * var(--sf-depth, 1)),
    0);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* far layer — tiny, dim, slow, least pointer travel */
.starfield__layer:nth-child(1) {
  --sf-depth: 0.35;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70px 160px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 180px 200px, rgba(255,255,255,0.45), transparent);
  background-size: 220px 220px;
  animation-duration: 110s;
}
@keyframes starfall-1 { to { background-position: 0 220px; } }
.starfield__layer:nth-child(1) { animation-name: starfall-1; }
/* mid layer */
.starfield__layer:nth-child(2) {
  --sf-depth: 0.85;
  background-image:
    radial-gradient(1.4px 1.4px at 60px 50px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.4px 1.4px at 220px 130px, rgba(190,210,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 140px 260px, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.4px 1.4px at 300px 300px, rgba(255,255,255,0.6), transparent);
  background-size: 340px 340px;
  animation-duration: 70s;
}
@keyframes starfall-2 { to { background-position: 0 340px; } }
.starfield__layer:nth-child(2) { animation-name: starfall-2; }
/* near layer — larger, brighter, faster, most pointer travel */
.starfield__layer:nth-child(3) {
  --sf-depth: 1.7;
  background-image:
    radial-gradient(2px 2px at 90px 70px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 380px 220px, rgba(210,225,255,0.85), transparent),
    radial-gradient(1.8px 1.8px at 250px 400px, rgba(255,255,255,0.9), transparent);
  background-size: 460px 460px;
  animation-duration: 45s;
}
@keyframes starfall-3 { to { background-position: 0 460px; } }
.starfield__layer:nth-child(3) { animation-name: starfall-3; }

@media (prefers-reduced-motion: reduce) {
  .starfield__layer { animation: none; transform: none; }
}

.overlay__card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  padding: 30px 26px 26px;
}
.overlay__title {
  font-family: "Zalando Sans", "Inter", sans-serif;
  font-weight: 600;
  font-stretch: 125%;
  font-size: clamp(2rem, 1.6rem + 4vw, 2.8rem);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overlay__title--sm { font-size: 1.5rem; }
/* flat (non-gradient) white title — homepage + error card */
#startCard .overlay__title,
#errorCard .overlay__title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text);
  margin-bottom: 24px; /* a bit more breathing room above the Begin Scan button */
}
/* homepage section icon (camera / bonecube), centered above its heading */
.overlay__icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  color: var(--text);
  overflow: visible;
}
/* homepage tile — wraps each section's icon + title + Start button */
.overlay__tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  padding: 26px 22px 22px;
}
.overlay__tile + .overlay__tile { margin-top: 16px; }
.overlay__tile .btn { justify-content: center; margin-top: auto; }

/* homepage start card: narrower tiles, side-by-side on wider screens */
#startCard { max-width: 380px; }
@media (min-width: 700px) {
  #startCard {
    max-width: 720px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
  }
  #startCard .overlay__tile { flex: 1 1 0; }
  #startCard .overlay__tile + .overlay__tile { margin-top: 0; }
}

/* homepage section headings ("Face Scan" / "Bonecube") */
.overlay__section {
  font-family: "Zalando Sans", "Inter", sans-serif;
  font-weight: 600;
  font-stretch: 125%;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 14px;
}
.overlay__more .overlay__section { margin-bottom: 14px; }
/* casual lowercase blurb under each homepage tile title */
.overlay__tile .overlay__section { margin-bottom: 6px; }
.overlay__desc {
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 16px;
}
.overlay__sub {
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 22px;
}
.overlay__sub strong { color: var(--text); font-weight: 600; }
.overlay__fine {
  margin: 18px 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.85;
}

/* spinner */
.spinner {
  width: 42px; height: 42px;
  margin: 6px auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #fff;
  border-right-color: rgba(255, 255, 255, 0.7);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* loading progress bar (camera start) */
.loadbar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: 2px 0 12px;
}
.loadbar__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}
.loadbar__pct {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- start-card buttons (stacked, equal width) ---------- */
.overlay__btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* both buttons span the column width */
  width: fit-content;       /* column is as wide as the wider "Start camera" button */
  min-width: 280px;         /* …but at least this wide, so the buttons feel substantial */
  max-width: 100%;
  margin: 0 auto;           /* keep the stack centered */
  gap: 10px;
}
.overlay__btns .btn { justify-content: center; } /* centre label+icon in the stretched button */
/* homepage feature buttons: taller + larger label so the two areas read clearly */
#startCard .overlay__tile .btn,
#chooseCard .overlay__btns .btn { min-height: 56px; font-size: 1rem; }
#startCard .overlay__tile .btn__svg,
#chooseCard .overlay__btns .btn__svg { width: 1.3em; height: 1.3em; }
/* chooser "Back" — a small, quiet link below the two options */
.overlay__backlink { margin-top: 16px; font-size: 0.9rem; }

/* ---------- crop screen ---------- */
.crop {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
    var(--bg);
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    calc(env(safe-area-inset-right, 0px) + 14px)
    calc(env(safe-area-inset-bottom, 0px) + 16px)
    calc(env(safe-area-inset-left, 0px) + 14px);
}
.crop.hidden { display: none; }
.crop__head { text-align: center; margin-bottom: 12px; }
.crop__title {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.crop__hint {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.crop__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  background: #000;
}
#cropImg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.crop__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
/* tint Cropper's chrome toward the aurora accent */
.crop .cropper-view-box { outline-color: var(--violet); }
.crop .cropper-point,
.crop .cropper-line { background-color: var(--violet); }

/* ---------- responsive: phones / portrait ---------- */
@media (max-width: 600px) {
  .readout {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    padding: 11px 14px 12px;
    min-width: 138px;
  }
  .readout__metrics { gap: 10px; font-size: 0.7rem; }
  .controls {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    gap: 8px;
    padding: 8px;
  }
  .controls .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.8rem;
    min-height: 46px;
    gap: 6px;
    white-space: nowrap;
  }
  .btn { padding: 11px 16px; }
  .agtile { padding: 7px 11px 8px; }
  #modeSwitch {
    width: calc(100vw - 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  }
  .mode { font-size: 0.88rem; padding: 6px 12px; }
  .alignwarn { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }
}

/* very short landscape (phones rotated): tuck the readout up a touch */
@media (max-height: 430px) {
  .readout__num { font-size: clamp(2rem, 1.4rem + 5vw, 2.6rem); }
  .controls { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  #modeSwitch { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .alignwarn { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); }
  .morphback { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary { animation: none; }
  .btn:hover { transform: none; }
}

/* ============================================================
   Bonepill — 3D ANSUR scatter (full-screen view + start-card entry)
   ============================================================ */

/* start-card Bonecube section, under the two main buttons */

/* full-screen view — mirrors .crop */
.bonepill {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(236, 72, 153, 0.12), transparent 55%),
    var(--bg);
  padding: var(--sat) var(--sar) var(--sab) var(--sal); /* full-bleed within the safe area */
}
.bonepill.hidden { display: none; }

/* in-view top bar: Back (left) + sex legend (right), matched height for a clean line */
.bonepill__topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 3;
  pointer-events: none; /* children re-enable below */
}
.bonepill__back {
  min-height: 0;
  align-self: stretch; /* match the dataset pill's height exactly */
  padding: 0 14px;
  font-size: 0.84rem;
  pointer-events: auto;
}

.bonepill__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #05040a;
  touch-action: none; /* JS owns rotate/zoom gestures */
}
#bonepillCanvas { display: block; width: 100%; height: 100%; }

/* sexual-dimorphism slider — bottom-middle, spans the cube width */
.bonepill__dim {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 420px; /* don't stretch edge-to-edge on wide desktop screens */
  z-index: 4;
  padding: 11px 16px;
  border-radius: 14px;
  pointer-events: none;
}
.bonepill__dim.hidden { display: none; }

/* dataset selector floating at the top-right of the cube */
.bp-overlay-field { pointer-events: auto; min-width: 0; }
.bp-select--overlay {
  background-color: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  max-width: 220px;
}

.bonepill__tip {
  position: absolute;
  max-width: 250px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  z-index: 2;
}
.bonepill__tip .tip__row { display: flex; justify-content: space-between; gap: 16px; }
.bonepill__tip .tip__name { color: var(--text-dim); }
.bonepill__tip .tip__val { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* your percentile + sexual-dimorphism readout, top-middle of the cube */
.bonepill__stats {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(340px, 78vw);
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
  text-align: center;
}
.bonepill__stats.hidden { display: none; }
.bpstats__list { display: flex; flex-direction: column; gap: 3px; }
.bpstats__row { font-size: 0.8rem; color: var(--text); }
.bpstats__pct { color: var(--violet); font-weight: 700; }
.bpstats__scale { display: flex; align-items: center; gap: 10px; }
.bpstats__pole { font-size: 0.74rem; font-weight: 600; flex: none; }
.bpstats__pole--m { color: var(--cyan); }
.bpstats__pole--f { color: var(--fuchsia); }
.bpstats__track {
  position: relative; flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--fuchsia));
}
.bpstats__dot {
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.55); transition: left 0.18s ease;
}

.bonepill__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  background: rgba(6, 5, 12, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bonepill__loading.is-error .spinner { display: none; }

.bonepill__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  align-items: flex-start; /* axis columns are taller (input below) — align tops */
  padding: 14px 12px;
  background: var(--bg); /* solid — no gradient bleeding through from .bonepill */
  border-top: 1px solid var(--glass-brd); /* the divider between the cube + options areas */
}
.bp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bp-field--axis { width: 210px; max-width: 42vw; }
.bp-field--axis .bp-select { max-width: none; width: 100%; }
.bp-field__lbl {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* themed <select> (no native select existed in the app before this) */
.bp-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 9px 30px 9px 12px;
  max-width: 220px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ab5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.bp-select:hover { border-color: rgba(255, 255, 255, 0.25); }
.bp-select:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}
/* the native option list can't be glass-themed cross-browser — keep it dark, not white */
.bp-select option { background: var(--bg-2); color: var(--text); }

/* per-axis "you" input, stacked directly under each axis <select> (red marker) */
.bp-you__input {
  width: 100%;
  appearance: textfield;
  -moz-appearance: textfield;
  font: inherit;
  font-size: 0.9rem; /* match the select above */
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-brd);
  border-radius: 12px; /* match the select above */
  padding: 9px 12px; /* match the select's vertical padding → same height */
}
.bp-you__input::-webkit-outer-spin-button,
.bp-you__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-you__input::placeholder { color: var(--text-dim); opacity: 0.55; }
.bp-you__input:focus-visible {
  outline: none;
  border-color: #ff5a76; /* ties the input to its red marker */
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
}

@media (max-width: 600px) {
  .bp-select { max-width: 44vw; font-size: 0.82rem; padding: 8px 26px 8px 10px; }
  .bp-field--axis .bp-select { max-width: none; }
  .bp-you__input { font-size: 0.82rem; padding: 8px 10px; } /* keep matching the select */
  .bonepill__bar { gap: 8px 10px; padding: 10px; }
  .bonepill__back { padding: 0 12px; font-size: 0.8rem; }
  .cam-back { height: 32px; padding: 0 12px; font-size: 0.8rem; }
  .bonepill__dim { bottom: 8px; width: calc(100% - 16px); padding: 9px 12px; }
  .bonepill__stats { top: 60px; width: min(300px, 88vw); padding: 8px 12px; gap: 7px; }
  .bpstats__row { font-size: 0.74rem; }
  .bp-select--overlay { max-width: 46vw; }
}