:root {
  --chrome: #e8e8e8;
  --cool-blue: #a9c9e2;
  --warm-amber: #d4a76a;
  --warm-orange: #ff8c42;
  --bg-dark: #12121a;
  --bg-panel: #1e1e2a;
  --card: #252535;
  --text: #f2f2f5;
  --muted: #9494a8;
  --success: #5ecf8a;
  --danger: #e85d5d;
}

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

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  position: relative;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  flex-direction: column;
  animation: fadeIn 0.35s ease;
}

.screen.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== INTRO ===== */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.intro-overlay.hidden { display: none; }

.intro-video {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.intro-logo-wrap {
  --intro-cycle: 9s;
  position: relative;
  z-index: 10;
  padding: 2rem;
  pointer-events: none;
}

.intro-logo-stage {
  position: relative;
  display: inline-block;
}

.intro-logo {
  position: relative;
  z-index: 1;
  width: min(360px, 88vw);
  max-height: 40vh;
  height: auto;
  display: block;
  background: transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.14));
}

.intro-logo-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.intro-logo-wrap.intro-animate .intro-logo {
  animation: logo-glow-cycle var(--intro-cycle) linear infinite;
}

.intro-logo-wrap.intro-animate .intro-sweep--gold {
  animation: sweep-gold var(--intro-cycle) ease-in-out infinite;
}

.intro-logo-wrap.intro-animate .intro-flare {
  animation: intro-flare var(--intro-cycle) ease-in-out infinite;
}

.intro-logo-wrap.intro-animate .intro-sparkle {
  animation: sparkle-burst var(--intro-cycle) ease-in-out infinite;
}

@keyframes logo-glow-cycle {
  0% {
    filter: brightness(0.92) drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    transform: scale(0.94);
  }
  16% {
    filter: brightness(1.04) drop-shadow(0 0 10px rgba(212,167,106,0.25));
    transform: scale(0.962);
  }
  30% {
    filter: brightness(1.3)
      drop-shadow(0 0 42px rgba(255,255,255,0.6))
      drop-shadow(0 0 30px rgba(255,200,120,0.55))
      drop-shadow(0 8px 22px rgba(212,167,106,0.45));
    transform: scale(0.978);
  }
  50% {
    filter: brightness(1.06) drop-shadow(0 6px 18px rgba(0,0,0,0.1));
    transform: scale(0.995);
  }
  66% {
    filter: brightness(1.04) drop-shadow(0 0 12px rgba(212,167,106,0.2));
    transform: scale(1.012);
  }
  77% {
    filter: brightness(1.16)
      drop-shadow(0 10px 28px rgba(212,167,106,0.6))
      drop-shadow(0 4px 18px rgba(255,200,120,0.45));
    transform: scale(1.028);
  }
  94% {
    filter: brightness(1.06) drop-shadow(0 6px 16px rgba(212,167,106,0.28));
    transform: scale(1.038);
  }
  100% {
    filter: brightness(1.05) drop-shadow(0 8px 20px rgba(0,0,0,0.12));
    transform: scale(1.04);
  }
}

.intro-sweep {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.intro-sweep--gold {
  left: -5%;
  right: -5%;
  top: 52%;
  height: 48%;
  background: linear-gradient(
    90deg,
    transparent 15%,
    rgba(212,167,106,0.35) 38%,
    rgba(255,220,150,0.85) 50%,
    rgba(212,167,106,0.4) 62%,
    transparent 85%
  );
  background-size: 280% 100%;
  opacity: 0;
}

@keyframes sweep-gold {
  0%, 65%, 95%, 100% { opacity: 0; background-position: 200% 0; }
  66% { opacity: 0; background-position: 180% 0; }
  72% { opacity: 0.65; background-position: 110% 0; }
  77% { opacity: 1; background-position: 50% 0; }
  85% { opacity: 0.45; background-position: -20% 0; }
  94% { opacity: 0; background-position: -80% 0; }
}

.intro-flare {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 28%;
  bottom: 38%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.9) 0%,
    rgba(255,230,170,0.55) 22%,
    rgba(212,167,106,0.28) 42%,
    transparent 72%
  );
  opacity: 0;
  mix-blend-mode: screen;
  transform: scale(0.85);
}

@keyframes intro-flare {
  0%, 15%, 51%, 100% { opacity: 0; transform: scale(0.82); }
  16% { opacity: 0.35; transform: scale(0.92); }
  30% { opacity: 1; transform: scale(1.08); }
  45% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0; transform: scale(0.95); }
}

.intro-sparkle {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle, #fff 0%, rgba(255,240,200,0.85) 25%, rgba(255,200,120,0.5) 45%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.intro-sparkle::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(0deg, transparent 46%, rgba(255,255,255,0.9) 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,0.9) 50%, transparent 54%);
}

.intro-sparkle:nth-child(3) { top: 8%; left: 38%; width: 16px; height: 16px; animation-delay: 0s; }
.intro-sparkle:nth-child(4) { top: 14%; right: 32%; width: 10px; height: 10px; animation-delay: 0.35s; }
.intro-sparkle:nth-child(5) { top: 22%; left: 48%; width: 14px; height: 14px; animation-delay: 0.7s; }
.intro-sparkle:nth-child(6) { top: 18%; right: 22%; width: 11px; height: 11px; animation-delay: 1.05s; }
.intro-sparkle:nth-child(7) { top: 12%; left: 58%; width: 9px; height: 9px; animation-delay: 1.4s; }
.intro-sparkle:nth-child(8) { top: 26%; left: 35%; width: 13px; height: 13px; animation-delay: 1.75s; }

@keyframes sparkle-burst {
  0%, 21%, 56%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  22% { opacity: 0; transform: scale(0) rotate(0deg); }
  24% { opacity: 1; transform: scale(1.35) rotate(18deg); }
  27% { opacity: 0.15; transform: scale(0.5) rotate(30deg); }
  32% { opacity: 0.95; transform: scale(1.2) rotate(8deg); }
  36% { opacity: 0.1; transform: scale(0.4) rotate(22deg); }
  40% { opacity: 1; transform: scale(1.45) rotate(12deg); }
  44% { opacity: 0.2; transform: scale(0.55) rotate(28deg); }
  48% { opacity: 0.85; transform: scale(1.15) rotate(6deg); }
  52% { opacity: 0.12; transform: scale(0.45) rotate(20deg); }
  55% { opacity: 0.5; transform: scale(0.8) rotate(10deg); }
}

.intro-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #777;
  pointer-events: none;
  animation: intro-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes intro-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.brand-logo {
  display: block;
  margin: 0 auto;
  width: 100px;
  background: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
  transition: filter 0.3s;
}

.brand-logo.on-white,
.brand-logo.on-black {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  opacity: 1;
}

.screen-header {
  background: #ffffff;
}