:root{
  --bg:#141414; --ink:#f4f2ee; --muted:rgba(244,242,238,.72);
  --glass:rgba(20,20,20,.55); --glass2:rgba(255,255,255,.12); --line:rgba(255,255,255,.22);
  --accent:#6E1F38;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --word:"Anton",Impact,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none !important}

#stage{position:fixed;inset:0;overflow:hidden;background:#000}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
#gl,#debug{position:absolute;inset:0;width:100%;height:100%;display:block}
#debug{pointer-events:none}

.word{font-family:var(--word);letter-spacing:.14em;font-size:14px;color:var(--ink);opacity:.92}

#top{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0));z-index:5;pointer-events:none}
#top>*{pointer-events:auto}
#brand{display:flex;flex-direction:column;align-items:center;gap:2px}
#brand .ring{font-size:12px;color:var(--muted);letter-spacing:.02em}
.icon{width:42px;height:42px;border-radius:50%;background:var(--glass);backdrop-filter:blur(10px);display:grid;place-items:center}
.icon svg{width:22px;height:22px}

#bottom{position:absolute;left:0;right:0;bottom:0;padding:12px 14px calc(env(safe-area-inset-bottom) + 16px);z-index:5;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));display:flex;flex-direction:column;gap:14px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{padding:9px 14px;border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid transparent;font-size:13px;white-space:nowrap;color:var(--muted);transition:all .2s}
.chip.on{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.16)}
.chip.talla{border-color:var(--line);color:var(--ink)}
.chip.talla small{opacity:.7;margin-right:4px;font-size:11px}
#tallas .chip{min-width:44px;text-align:center;padding:9px 10px}
#row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#metals{display:flex;gap:10px;justify-content:flex-start;align-items:center}
.metal{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:2px;background-clip:content-box;transition:transform .2s,border-color .2s}
.metal.on{border-color:#fff;transform:scale(1.08)}
#shutter{width:72px;height:72px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;justify-self:center}
#shutter span{width:56px;height:56px;border-radius:50%;background:#fff;transition:transform .12s}
#shutter:active span{transform:scale(.88)}

#coach{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:4;pointer-events:none;transition:opacity .5s}
#coach svg{width:min(52vw,230px);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));animation:float 3s ease-in-out infinite}
#coach p{margin:0;text-align:center;font-size:15px;line-height:1.45;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
#coach.fade{opacity:0}
.pulse{transform-origin:118px 118px;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

#intro,#loading,#result{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#intro .card{max-width:420px;padding:32px 28px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
#intro h1{font-weight:500;font-size:28px;margin:4px 0 0;line-height:1.2}
#intro h1 em{font-style:normal;font-family:var(--word);letter-spacing:.04em;font-weight:400}
#intro p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.primary{background:var(--ink);color:#111;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .15s}
.primary:active{transform:scale(.97)}
.ghost{padding:14px 18px;border-radius:999px;border:1px solid var(--line);font-weight:500;font-size:15px;background:var(--glass2)}
.fine{font-size:12px !important;opacity:.7}
#qrWrap{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px}
#qr{background:#fff;padding:10px;border-radius:12px;line-height:0}
#qr svg,#qr img{width:150px;height:150px}

#loading{flex-direction:column;gap:16px;background:rgba(20,20,20,.86)}
.spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{margin:0;color:var(--muted)}

#result{flex-direction:column;gap:16px;padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 20px)}
#shot{display:block;width:auto;height:auto;min-width:0;max-width:calc(100vw - 36px);max-height:70vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#result .actions{display:flex;gap:10px}
.buy{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px}

#toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 150px);transform:translateX(-50%);background:rgba(255,255,255,.92);color:#111;padding:10px 16px;border-radius:999px;font-size:13px;z-index:20;box-shadow:0 6px 24px rgba(0,0,0,.4)}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}

@media (min-width:900px){
  #intro .card{padding:40px}
}