/* ===== LA VELADA DEL AÑO — estilos compartidos ===== */

:root{
  --bg:#09090d; --bg2:#12121a; --surface:#181822; --line:#2a2a38;
  --text:#f6f3ec; --muted:#a3a1ad;
  --red:#e3262f; --red-d:#9e141b; --gold:#f6c343; --gold-d:#b98a14;
  --a:#e3262f; --b:#2f6fe0; --c:#e2a20e; --d:#1d9a55;
  --ok:#22c55e; --bad:#ef4444;
  --display:'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(246,195,67,.20), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(227,38,47,.22), transparent 60%),
    linear-gradient(180deg,#0d0d13 0%,#08080b 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* ring ropes */
.ropes{position:fixed;left:0;right:0;pointer-events:none;z-index:0}
.ropes.top{top:0}.ropes.bottom{bottom:0}
.ropes i{display:block;height:3px;margin:9px 0;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--red) 12%,var(--red) 88%,transparent)}
.ropes i:nth-child(2){background:linear-gradient(90deg,transparent,#e9e6df 12%,#e9e6df 88%,transparent);opacity:.35}
.ropes i:nth-child(3){background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);opacity:.45}

.display{font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;line-height:.95}
.gold{color:var(--gold)} .red{color:var(--red)} .muted{color:var(--muted)}

.btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;border:0;cursor:pointer;
  border-radius:14px;padding:16px 22px;font-size:22px;color:#140c00;
  background:linear-gradient(180deg,#ffd76a,var(--gold) 55%,var(--gold-d));
  box-shadow:0 6px 0 #7a5a07, 0 12px 28px rgba(246,195,67,.25);transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #7a5a07}
.btn.red{color:#fff;background:linear-gradient(180deg,#ff4d55,var(--red) 55%,var(--red-d));box-shadow:0 6px 0 #5e0a0f,0 12px 28px rgba(227,38,47,.3)}
.btn.ghost{color:var(--text);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.shape{display:inline-block;width:1em;height:1em;flex:0 0 auto}
.shape.s0{clip-path:polygon(50% 5%,95% 92%,5% 92%);background:#fff}
.shape.s1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#fff}
.shape.s2{border-radius:50%;background:#fff}
.shape.s3{border-radius:3px;background:#fff;transform:scale(.86)}
.opt0{background:var(--a)} .opt1{background:var(--b)} .opt2{background:var(--c)} .opt3{background:var(--d)}

@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes punch{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(18px) rotate(-8deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
.slide{animation:slideUp .4s ease both}