/* ============================================================
   LUMIO — screens-v2.css

   Per-screen restyles using the v2 design system (tokens.css +
   illustrations.js). Each screen gets a body class (e.g.
   .screen--v2-home) so the new styles only apply where opted in —
   the rest of the app keeps its legacy styles.css visuals until
   their respective restyle sprints land.

   Loaded AFTER styles.css so v2 rules win wherever they collide.
   ============================================================ */

/* ── Home screen v2 ───────────────────────────────────────── */

.screen.screen--v2-home {
  background: var(--c-sky-day);
}

/* Full-bleed scene backdrop layer */
.screen--v2-home .screen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.screen--v2-home .screen-bg > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Lucas character — anchored at the top, breaking out of the hero card */
.screen--v2-home .screen-character {
  position: absolute;
  top: max(var(--frame-safe-top), 28px);
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  z-index: 2;
  pointer-events: none;
}
.screen--v2-home .screen-character > svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 380px) {
  .screen--v2-home .screen-character {
    width: 140px;
    height: 140px;
    top: max(var(--frame-safe-top), 20px);
  }
}

/* Inner content sits ABOVE the scene, with room for Lucas above */
.screen--v2-home .screen-inner {
  position: relative;
  z-index: 1;
  max-width: var(--frame-max-w);
  padding: 160px var(--frame-pad-x) calc(var(--frame-safe-bot) + 32px);
  gap: var(--s-3);
}
@media (max-width: 380px) {
  .screen--v2-home .screen-inner {
    padding-top: 130px;
  }
}

/* ── Compact top bar (replaces app-header on home) ──────────── */

.screen--v2-home .app-header.app-header--compact {
  background: var(--c-cream-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  color: var(--c-ink);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--s-3);
}
.screen--v2-home .app-header.app-header--compact::before,
.screen--v2-home .app-header.app-header--compact::after {
  display: none;  /* kill the legacy sparkle + circle */
}
.screen--v2-home .profile-indicator {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-body);
}
.screen--v2-home .balance-display {
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-weight: var(--weight-body-bold);
}
.screen--v2-home .app-logo-lockup--mini { display: none; }  /* logo moves to scene */

/* ── Streak chip ───────────────────────────────────────────── */

.screen--v2-home .home-streak-chip {
  align-self: center;
  background: var(--c-cream-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-display-amber);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-body);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--s-2);
}

/* ── Primary exercise CTAs — chunky pill cards ──────────────── */

.screen--v2-home .home-cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.screen--v2-home .btn-cta {
  background: var(--c-cream);
  border: 0;
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-soft);
  position: relative;
  overflow: hidden;
}
.screen--v2-home .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 0 2px rgba(242, 163, 60, 0.25);
}
.screen--v2-home .btn-cta:active {
  transform: translateY(1px) scale(0.98);
}

/* The "primary" CTA (first visible exercise button) gets the
   amber-gradient fill. Flagged via class from JS in renderHome()
   so re-orderings of the .btn-cta children don't break it. */
.screen--v2-home .btn-cta.btn-cta--primary {
  background: var(--grad-cta);
  color: var(--c-ink);
  box-shadow: var(--shadow-cta);
}
.screen--v2-home .btn-cta.btn-cta--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-cta-hl);
  pointer-events: none;
  border-radius: inherit;
}
.screen--v2-home .btn-cta.btn-cta--primary:active {
  box-shadow: var(--shadow-cta-press);
}

.screen--v2-home .btn-cta__icon {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen--v2-home .btn-cta__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screen--v2-home .btn-cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
  color: var(--c-ink);
  line-height: var(--lh-tight);
}
.screen--v2-home .btn-cta__sub {
  font-size: var(--size-body-sm);
  color: var(--c-ink-soft);
}
.screen--v2-home .btn-cta.btn-cta--primary .btn-cta__title { color: var(--c-bark); }
.screen--v2-home .btn-cta.btn-cta--primary .btn-cta__sub   { color: rgba(107, 68, 35, 0.65); }
.screen--v2-home .btn-cta__arrow {
  font-size: 22px;
  color: var(--c-ink-soft);
  flex: 0 0 auto;
}
.screen--v2-home .btn-cta.btn-cta--primary .btn-cta__arrow {
  color: var(--c-bark);
}

/* ── Lucas hero card (the avatar+stage card) ───────────────── */

.screen--v2-home .lucas-hero {
  background: var(--c-cream);
  border: 0;
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.screen--v2-home .lucas-hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 0 2px rgba(242, 163, 60, 0.25);
}
.screen--v2-home .lucas-hero__portrait {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* renderLucasSvg(state, {size: 90}) emits an SVG with width/height
   attributes of 90 — force it down to fill the 56px container so it
   doesn't overflow and float into the cards above. */
.screen--v2-home .lucas-hero__portrait > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.screen--v2-home .lucas-hero__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screen--v2-home .lucas-hero__name {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: var(--weight-display);
  font-size: var(--size-body-lg);
}
.screen--v2-home .lucas-hero__stage,
.screen--v2-home .lucas-hero__progress {
  font-size: var(--size-body-sm);
  color: var(--c-ink-soft);
}

/* ── Shop card + boswandeling chip — same cream pill family ── */

.screen--v2-home .shop-card,
.screen--v2-home .boswandeling-card {
  background: var(--c-cream);
  border: 0;
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.screen--v2-home .shop-card:hover,
.screen--v2-home .boswandeling-card:hover { transform: translateY(-2px); }
.screen--v2-home .shop-card__title,
.screen--v2-home .boswandeling-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--c-ink);
  font-size: var(--size-body-lg);
}
.screen--v2-home .shop-card__sub,
.screen--v2-home .boswandeling-card__sub {
  font-size: var(--size-body-sm);
  color: var(--c-ink-soft);
}
.screen--v2-home .shop-card__icon,
.screen--v2-home .boswandeling-card__icon {
  font-size: 28px;
}
.screen--v2-home .shop-card__arrow,
.screen--v2-home .boswandeling-card__arrow {
  font-size: 22px;
  color: var(--c-ink-soft);
}

/* ── Bottom tertiary row — small soft circular icon buttons ── */

.screen--v2-home .home-tertiary-buttons {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-4);
}
.screen--v2-home .btn--settings,
.screen--v2-home .btn--portal {
  background: var(--c-cream-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-ink);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--size-body);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.screen--v2-home .btn--settings:hover,
.screen--v2-home .btn--portal:hover { transform: translateY(-2px); }

/* ── Shared v2 entry-screen primitives ───────────────────── */

.screen--v2-loading,
.screen--v2-signin,
.screen--v2-profile-picker {
  background: var(--c-sky-dawn);
}
.screen--v2-loading .screen-bg,
.screen--v2-signin .screen-bg,
.screen--v2-profile-picker .screen-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.screen--v2-loading .screen-bg > svg,
.screen--v2-signin .screen-bg > svg,
.screen--v2-profile-picker .screen-bg > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.screen--v2-signin .screen-character,
.screen--v2-profile-picker .screen-character {
  position: absolute;
  top: max(var(--frame-safe-top), 36px);
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  z-index: 2;
  pointer-events: none;
}
.screen--v2-signin .screen-character > svg,
.screen--v2-profile-picker .screen-character > svg {
  width: 100%; height: 100%;
}
@media (max-width: 380px) {
  .screen--v2-signin .screen-character,
  .screen--v2-profile-picker .screen-character { width: 130px; height: 130px; }
}

/* ── Loading screen ──────────────────────────────────────── */

.screen--v2-loading .loading-center {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.screen--v2-loading .loading-logo-group {
  background: var(--c-cream-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-card);
  padding: var(--s-6) var(--s-7);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.screen--v2-loading .loading-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--color-heading);
  font-size: var(--size-display-lg);
}
.screen--v2-loading .loading-subtitle {
  font-size: var(--size-body-sm);
  color: var(--c-ink-soft);
}
.screen--v2-loading .loading-dots {
  display: flex;
  gap: var(--s-2);
}
.screen--v2-loading .loading-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-amber);
  animation: lumio-loading-bounce 1.3s ease-in-out infinite both;
}
.screen--v2-loading .loading-dot:nth-child(2) { animation-delay: 0.18s; }
.screen--v2-loading .loading-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes lumio-loading-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ── Sign-in screen ──────────────────────────────────────── */

.screen--v2-signin .screen-inner {
  position: relative;
  z-index: 1;
  max-width: var(--frame-max-w);
  padding: 200px var(--frame-pad-x) calc(var(--frame-safe-bot) + 32px);
  gap: var(--s-4);
}
@media (max-width: 380px) {
  .screen--v2-signin .screen-inner { padding-top: 160px; }
}
.screen--v2-signin .signin-hero { text-align: center; }
.screen--v2-signin .signin-hero__logo { display: none; }  /* logo moved to scene */
.screen--v2-signin .signin-hero__tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--color-heading);
  font-size: var(--size-display-lg);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-4);
}
.screen--v2-signin .signin-highlights {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.screen--v2-signin .signin-highlight {
  background: var(--c-cream-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  box-shadow: var(--shadow-soft);
}
.screen--v2-signin .signin-highlight__icon { font-size: 22px; flex: 0 0 28px; }
.screen--v2-signin .signin-highlight__text {
  font-size: var(--size-body-sm);
  color: var(--c-ink);
  line-height: var(--lh-body);
}
.screen--v2-signin .signin-card {
  background: var(--c-cream);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.screen--v2-signin .signin-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--c-ink);
  font-size: var(--size-display-md);
}
.screen--v2-signin .signin-card__desc {
  font-size: var(--size-body-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-body);
}
.screen--v2-signin .btn--google {
  background: var(--grad-cta);
  color: var(--c-bark);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--size-button);
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.screen--v2-signin .btn--google:hover { transform: translateY(-2px); }
.screen--v2-signin .btn--google:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--shadow-cta-press);
}
.screen--v2-signin .signin-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-ink-faint);
  font-size: var(--size-body-sm);
  margin: var(--s-1) 0;
}
.screen--v2-signin .signin-divider::before,
.screen--v2-signin .signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-ink-faint);
  opacity: 0.4;
}
.screen--v2-signin .btn--outline {
  background: transparent;
  border: 1.5px solid var(--c-ink-soft);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--size-button);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-soft);
}
.screen--v2-signin .btn--outline:hover {
  transform: translateY(-2px);
  background: var(--c-cream-soft);
}
.screen--v2-signin .signin-guest-note {
  text-align: center;
  font-size: var(--size-body-sm);
  color: var(--c-ink-faint);
}

/* ── Profile-picker screen ───────────────────────────────── */

.screen--v2-profile-picker .screen-inner {
  position: relative;
  z-index: 1;
  max-width: var(--frame-max-w);
  padding: 200px var(--frame-pad-x) calc(var(--frame-safe-bot) + 32px);
  gap: var(--s-4);
}
@media (max-width: 380px) {
  .screen--v2-profile-picker .screen-inner { padding-top: 160px; }
}
.screen--v2-profile-picker .screen-nav {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
}
.screen--v2-profile-picker .btn--back {
  background: var(--c-cream-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--size-body);
  color: var(--c-ink);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.screen--v2-profile-picker .app-header {
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.screen--v2-profile-picker .app-header::before,
.screen--v2-profile-picker .app-header::after { display: none; }
.screen--v2-profile-picker .app-logo-group { display: none; }
.screen--v2-profile-picker .profile-picker-subtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--color-heading);
  font-size: var(--size-display-lg);
  text-align: center;
}
.screen--v2-profile-picker .profile-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.screen--v2-profile-picker .profile-list > button,
.screen--v2-profile-picker .profile-card {
  background: var(--c-cream);
  border: 0;
  border-radius: var(--r-card);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.screen--v2-profile-picker .profile-list > button:hover { transform: translateY(-2px); }
.screen--v2-profile-picker #btn-new-profile {
  background: var(--grad-cta);
  color: var(--c-bark);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--size-button);
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.screen--v2-profile-picker #btn-new-profile:hover { transform: translateY(-2px); }