/* CAPY PARTY — estilos compartidos (pantalla + cel) */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:radial-gradient(120% 80% at 50% 15%, #3c5f58 0%, #27443f 50%, #16292b 100%);
  color:#fff7ec; overscroll-behavior:none; }
h1,h2,h3 { margin:0; }
.logo { font-weight:900; letter-spacing:.5px; text-shadow:0 4px 14px rgba(0,0,0,.45); }
.logo .o { color:#ffb84d; }
.card { background:rgba(255,247,236,.07); border:1px solid rgba(255,247,236,.12);
  border-radius:18px; padding:18px; box-shadow:0 8px 28px rgba(0,0,0,.35); }
button { cursor:pointer; border:none; border-radius:14px; font-weight:800; color:#3a2410;
  background:linear-gradient(135deg,#ffc76b,#ff9a45); padding:14px 22px; font-size:17px;
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .08s; }
button:active { transform:scale(.96); }
button.sec { background:rgba(255,247,236,.14); color:#fff7ec; font-weight:600; }
button:disabled { opacity:.45; cursor:default; }
input[type=text] { width:100%; padding:13px; border-radius:12px; border:1.5px solid rgba(255,247,236,.25);
  background:rgba(0,0,0,.25); color:#fff7ec; font-size:16px; outline:none; }
input[type=text]:focus { border-color:#ffc76b; }
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pill { background:rgba(0,0,0,.3); border-radius:999px; padding:6px 14px; font-size:13px; }
.avatar { width:52px; height:52px; border-radius:50%; background:#fff3e0; border:3px solid #ffc76b;
  object-fit:contain; padding:3px; }
.timerbar { height:10px; border-radius:5px; background:rgba(0,0,0,.35); overflow:hidden; width:100%; }
.timerbar > div { height:100%; background:linear-gradient(90deg,#6fd0bf,#ffc76b); transition:width .45s linear; }
.big { font-size:clamp(22px,4.5vw,40px); font-weight:900; }
.fade-in { animation:fi .4s ease both; } @keyframes fi { from{opacity:0; transform:translateY(10px);} to{opacity:1;} }
.pop { animation:pp .35s cubic-bezier(.2,1.6,.4,1) both; } @keyframes pp { from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;} }
.shake { animation:sk .5s ease; } @keyframes sk { 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.gold { color:#ffd76a; }
.memeimg { max-width:100%; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45); background:#22403b; }

/* ---- fondo tierno ANIMADO (con <img> real = pinta en TODOS los navegadores) ---- */
.bgwrap { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bgwrap .bgimg { position:absolute; left:-5%; top:-5%; width:110%; height:110%; object-fit:cover;
  animation:kb 30s ease-in-out infinite alternate; }
@keyframes kb { from { transform:scale(1) translateY(0); } to { transform:scale(1.06) translateY(-1.2%); } }
.bgwrap .bgshade { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,24,24,.5) 0%, rgba(10,20,20,.62) 60%, rgba(8,16,16,.78) 100%); }
.bgwrap.portrait .bgshade { background:linear-gradient(180deg, rgba(13,24,24,.28) 0%, rgba(10,20,20,.4) 55%, rgba(8,16,16,.6) 100%); }
/* el contenido SIEMPRE encima del fondo */
#stage, #app, .wrap { position:relative; z-index:1; }
.float-p { position:fixed; bottom:-40px; z-index:2; pointer-events:none; opacity:.85;
  animation:rise linear forwards; }
@keyframes rise { from { transform:translateY(0) rotate(0deg); opacity:.85; }
  to { transform:translateY(-115vh) rotate(38deg); opacity:0; } }

/* botón INSTALAR app — grande, llamativo, pulso suave para que NADIE se pierda */
.installbtn.install-big { width:100%; padding:15px; border:none; border-radius:16px; cursor:pointer;
  font-size:18px; font-weight:900; color:#3a2410; background:linear-gradient(135deg,#ffd76a,#ff9a45);
  box-shadow:0 8px 22px rgba(255,150,60,.45); animation:installpulse 2.2s ease-in-out infinite; }
.installbtn.install-big:active { transform:scale(.97); }
@keyframes installpulse { 0%,100% { box-shadow:0 8px 22px rgba(255,150,60,.4); }
  50% { box-shadow:0 8px 30px rgba(255,190,90,.8); } }