@font-face {
  font-family: Fredoka;
  src: url("Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1a1040;
  --bg-2: #2b1466;
  --pink: #ff4d9a;
  --pink-d: #d01870;
  --yellow: #ffe566;
  --cyan: #5ce1ff;
  --lime: #7dff7a;
  --orange: #ff9f43;
  --white: #fffdf7;
  --ink: #1a1040;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: Fredoka, "Baloo 2", "Comic Neue", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#cam {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(1200px 600px at 10% -10%, #5b2dff 0%, transparent 55%),
    radial-gradient(900px 500px at 110% 110%, #ff4d9a 0%, transparent 50%),
    var(--bg);
  overflow: hidden;
}

.screen.hidden, .hidden { display: none !important; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.55;
  pointer-events: none;
}
.b1 { width: 220px; height: 220px; background: #ff9f43; top: -40px; right: -50px; }
.b2 { width: 180px; height: 180px; background: #5ce1ff; bottom: 8%; left: -60px; }
.b3 { width: 140px; height: 140px; background: #7dff7a; bottom: -30px; right: 18%; }

.start-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: rgba(255, 253, 247, 0.96);
  color: var(--ink);
  border-radius: 32px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.start-card.slim { padding: 36px 22px; }

.mascot-svg { width: 230px; height: 108px; }

h1 {
  margin: 4px 0 10px;
  font-size: clamp(1.8rem, 7vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.tagline, .ask {
  margin: 0 0 12px;
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 500;
}
.ask { font-size: 1.22rem; font-weight: 650; }

.btn-start, .btn-secondary {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  border: 0;
  border-radius: 999px;
  padding: 18px 20px;
  font: 700 1.45rem/1 Fredoka, system-ui, sans-serif;
  cursor: pointer;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 0 6px 0 var(--pink-d);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-start:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-d); }
.btn-secondary {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 6px 0 #c9c3e6;
  border: 3px solid var(--ink);
  font-size: 1.15rem;
  margin-top: 12px;
}
.btn-secondary:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9c3e6; }

.privacy {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #4a3d73;
  font-weight: 500;
}
.privacy.tiny {
  color: rgba(255,253,247,0.85);
  text-align: center;
  margin: 6px 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  font-size: 0.72rem;
}

.spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border: 7px solid #efe8ff;
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#app-ui {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#app-ui.hidden { display: none !important; }

.top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + var(--safe-t)) 12px 0;
  pointer-events: none;
}

.title-pill {
  pointer-events: none;
  background: rgba(26, 16, 64, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 14px;
  border-radius: 999px;
  max-width: 62%;
  line-height: 1.15;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.top-actions { display: flex; gap: 10px; pointer-events: auto; }

.round-btn, .shutter {
  pointer-events: auto;
  font-family: inherit;
  cursor: pointer;
  border: 3px solid #fff;
}

.round-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(26, 16, 64, 0.72);
  color: #fff;
  font-size: 1.45rem;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.round-btn:active { transform: scale(0.94); }
.round-btn.muted { background: #5a1640; }
.round-btn .ico { width: 28px; height: 28px; display: block; }
.round-btn .ico-off { display: none; }
.round-btn.muted .ico-on { display: none; }
.round-btn.muted .ico-off { display: block; }

.toast, .hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 16, 64, 0.82);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  pointer-events: none;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast { top: calc(78px + var(--safe-t)); font-size: 1.2rem; }
.hint { top: 46%; font-size: 1.15rem; }

.bottom-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 calc(8px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  background: linear-gradient(to top, rgba(16, 8, 40, 0.72) 0%, rgba(16, 8, 40, 0.28) 55%, transparent 100%);
}

.shutter {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  margin-bottom: 2px;
}
.shutter-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid #fff;
}
.shutter-core {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 -3px 0 #ffd1e8;
}
.shutter:active .shutter-core { background: var(--yellow); transform: scale(0.92); }

.save-label {
  margin: 4px 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

.filters {
  pointer-events: auto;
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px 4px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter-chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 78px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 700 0.72rem/1.1 Fredoka, system-ui, sans-serif;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.filter-chip .icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.7);
  background: #3a2a6e;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.filter-chip .icon canvas, .filter-chip .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.filter-chip.active .icon {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--pink), 0 3px 10px rgba(0,0,0,0.35);
  transform: scale(1.08);
}
.filter-chip:active .icon { transform: scale(0.96); }

@media (min-width: 700px) {
  .title-pill { font-size: 1.05rem; }
  .filter-chip { width: 88px; }
  .filter-chip .icon { width: 76px; height: 76px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .start-card { max-height: 100%; overflow: auto; padding: 16px; }
  h1 { font-size: 1.5rem; }
  .mascots { display: none; }
  .shutter { width: 60px; height: 60px; }
  .filter-chip .icon { width: 52px; height: 52px; }
  .save-label { display: none; }
}