:root{
  --pink:#ff5fa2;
  --pink-deep:#e0357f;
  --pink-soft:#ffd6e8;
  --purple:#9b5cff;
  --yellow:#ffd23f;
  --ink:#3a2240;
  --bg:#1c0f24;
  --radius:22px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);overscroll-behavior:none;}
body{
  font-family:"Fredoka","Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff;user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
.hidden{display:none !important;}

#app{position:fixed;inset:0;overflow:hidden;}

/* ---------- Pantalla de inicio ---------- */
#startScreen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#ff8fc1 0%,#ff5fa2 35%,#9b5cff 100%);
  text-align:center;padding:24px;z-index:30;
}
.start-inner{max-width:420px;width:100%;}
.start-emoji{font-size:54px;line-height:1.2;margin-bottom:8px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));}
.start-title{font-size:clamp(34px,9vw,52px);font-weight:700;margin:6px 0;text-shadow:0 3px 0 rgba(0,0,0,.12);}
.start-sub{font-size:clamp(16px,4.5vw,20px);font-weight:500;margin:0 0 28px;opacity:.95;}
.big-start{
  font-family:inherit;font-size:26px;font-weight:700;color:var(--pink);
  background:#fff;border:none;border-radius:999px;padding:18px 46px;cursor:pointer;
  box-shadow:0 10px 0 rgba(0,0,0,.18),0 14px 24px rgba(0,0,0,.25);
  transition:transform .08s ease, box-shadow .08s ease;
}
.big-start:active{transform:translateY(6px);box-shadow:0 4px 0 rgba(0,0,0,.18),0 6px 12px rgba(0,0,0,.25);}
.start-note{margin-top:22px;font-size:14px;opacity:.9;}

/* ---------- Escenario ---------- */
#stage{position:absolute;inset:0;background:#000;}
#video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
#view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Barra superior */
#topbar{
  position:absolute;top:calc(var(--safe-top) + 10px);left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;padding:0 14px;z-index:10;
}
.round-btn{
  font-family:inherit;font-size:24px;width:54px;height:54px;border-radius:50%;border:none;
  background:rgba(0,0,0,.38);color:#fff;cursor:pointer;backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:transform .08s;
}
.round-btn:active{transform:scale(.9);}
.top-right{display:flex;gap:10px;}
.rec-indicator{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.45);
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:18px;backdrop-filter:blur(6px);
}
.rec-dot{width:14px;height:14px;border-radius:50%;background:#ff3b30;animation:blink 1s steps(2,start) infinite;}
@keyframes blink{50%{opacity:.2;}}

/* Controles inferiores */
#bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding-bottom:calc(var(--safe-bottom) + 8px);
  background:linear-gradient(to top,rgba(0,0,0,.55) 60%,transparent);
}
#cats{
  display:flex;gap:8px;overflow-x:auto;padding:10px 14px 4px;scrollbar-width:none;
}
#cats::-webkit-scrollbar{display:none;}
.cat-pill{
  flex:0 0 auto;font-family:inherit;font-size:15px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.16);border:2px solid transparent;border-radius:999px;
  padding:7px 16px;cursor:pointer;white-space:nowrap;transition:all .12s;
}
.cat-pill.active{background:#fff;color:var(--pink);border-color:#fff;}

#filters{
  display:flex;gap:10px;overflow-x:auto;padding:8px 14px 10px;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
#filters::-webkit-scrollbar{display:none;}
.filter-chip{
  flex:0 0 auto;scroll-snap-align:center;width:78px;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  background:none;border:none;font-family:inherit;color:#fff;padding:0;
}
.filter-chip .bubble{
  width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:34px;background:rgba(255,255,255,.14);border:3px solid transparent;transition:all .12s;
}
.filter-chip.active .bubble{
  border-color:#fff;background:rgba(255,255,255,.28);transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.filter-chip .label{font-size:12px;font-weight:500;line-height:1.1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;opacity:.95;}
.filter-chip.active .label{font-weight:700;}

/* Botonera de captura */
#shutterbar{
  display:flex;align-items:center;justify-content:center;gap:40px;padding:6px 0 12px;
}
.action-btn{
  font-family:inherit;font-size:26px;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .08s;backdrop-filter:blur(4px);
}
.action-btn:active{transform:scale(.9);}
.action-btn.record{color:#ff5b5b;font-size:30px;}
.action-btn.record.recording{background:#ff3b30;color:#fff;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.shutter{
  width:84px;height:84px;border-radius:50%;border:6px solid #fff;cursor:pointer;
  background:linear-gradient(135deg,#ff8fc1,#ff5fa2);font-size:38px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .08s;
}
.shutter:active{transform:scale(.92);}

/* ---------- Panel de ajustes ---------- */
#settings{position:absolute;inset:0;z-index:35;display:flex;align-items:flex-end;
  background:rgba(20,8,28,.45);backdrop-filter:blur(2px);}
.settings-sheet{width:100%;background:linear-gradient(180deg,#2a1633,#3a1f47);
  border-radius:26px 26px 0 0;padding:18px 20px calc(var(--safe-bottom) + 22px);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);animation:sheetUp .22s ease;}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
#settingsTitle{font-size:19px;font-weight:700;}
.settings-x{background:rgba(255,255,255,.16);border:none;color:#fff;font-size:18px;
  width:38px;height:38px;border-radius:50%;cursor:pointer;}
.set-row{margin:16px 0;}
.set-row label{display:block;font-size:15px;font-weight:600;margin-bottom:8px;opacity:.95;}
.set-row input[type=range]{width:100%;height:34px;accent-color:var(--pink);cursor:pointer;}
.set-reset{margin-top:6px;background:rgba(255,255,255,.14);border:none;color:#fff;font-family:inherit;
  font-size:15px;font-weight:600;padding:11px 18px;border-radius:999px;cursor:pointer;width:100%;}

/* ---------- Resultado ---------- */
#result{position:absolute;inset:0;z-index:40;background:rgba(20,8,28,.95);
  display:flex;align-items:center;justify-content:center;padding:18px;}
.result-inner{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:18px;}
#resultImg,#resultVid{max-width:100%;max-height:64vh;border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);background:#000;}
.result-buttons{display:flex;gap:14px;width:100%;justify-content:center;}
.result-btn{font-family:inherit;font-size:20px;font-weight:700;border:none;border-radius:999px;
  padding:16px 30px;cursor:pointer;transition:transform .08s;}
.result-btn:active{transform:scale(.95);}
.result-btn.primary{background:#fff;color:var(--pink);box-shadow:0 6px 0 rgba(0,0,0,.18);}
.result-btn.secondary{background:rgba(255,255,255,.18);color:#fff;}

/* ---------- Avisos ---------- */
#toast{
  position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:50;
  background:rgba(0,0,0,.82);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:16px;font-weight:500;max-width:88%;text-align:center;
}
#loader{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;background:rgba(20,8,28,.85);}
#loader p{font-size:18px;font-weight:600;}
.spinner{width:54px;height:54px;border-radius:50%;border:6px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (max-height:560px){
  .filter-chip .bubble{width:54px;height:54px;font-size:28px;}
  .shutter{width:72px;height:72px;font-size:32px;}
}