/* ===== Apoya a Club Bear (botón abajo a la derecha y su ventana) ===== */
#btnPass, .hud-pass { display: none !important; }
#stage > .hud-mail { right: 160px !important; }   /* el buzón de Silver deja la esquina al botón de apoyo */

#btnSupport { position: absolute; right: 26px; bottom: 22px; z-index: 2050; width: 116px; height: 116px; border-radius: 32px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 5px solid #4a1a6a;
  background: radial-gradient(circle at 50% 30%, #ffd6f4, #c46aff 60%, #7a2ad8); color: #fff; font-family: var(--font);
  box-shadow: 0 7px 0 #3a0e5a, 0 0 30px rgba(220,120,255,.85); transition: transform .15s; }
#btnSupport:hover { transform: translateY(-3px) scale(1.05); }
#btnSupport .sup-heart { font-size: 52px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(60,10,90,.5)); animation: supBeat 1.4s ease-in-out infinite; }
#btnSupport b { font: 700 21px var(--font); text-shadow: 0 2px 0 #3a0e5a; }
/* destello que cruza el botón: se mueve con transform (barato) */
#btnSupport .sup-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; will-change: transform;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%); animation: supSlide 3s ease-in-out infinite; }
@keyframes supSlide { 0%, 40% { transform: translateX(-120%); } 80%, 100% { transform: translateX(220%); } }
@keyframes supPulse { 50% { box-shadow: 0 7px 0 #3a0e5a, 0 0 42px rgba(255,140,240,1); } }
@keyframes supBeat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.95); } }
@keyframes supSweep { 0%, 40% { background-position: -150% 0; } 80%, 100% { background-position: 250% 0; } }
@keyframes supSpin { to { transform: rotate(360deg); } }
@keyframes supFloat { 50% { transform: translateY(-10px); } }

#supportPanel .sup-box { position: relative; width: 1500px; padding: 34px 44px 30px; border-radius: 36px; overflow: hidden; text-align: center; color: #fff; font-family: var(--font);
  border: 6px solid #c46aff; background: radial-gradient(circle at 50% 0%, #5a2a8a, transparent 60%), linear-gradient(170deg, #2a1240, #140826 70%);
  box-shadow: 0 22px 0 rgba(0,0,0,.3), 0 0 70px rgba(196,106,255,.5); }
#supportPanel .x-btn { right: 18px; top: 18px; z-index: 3; }
.sup-rays { position: absolute; left: 50%; top: 52%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; pointer-events: none;
  background: repeating-conic-gradient(rgba(220,160,255,.12) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); mask: radial-gradient(circle, #000 8%, transparent 55%); animation: supSpin 45s linear infinite; }
.sup-head { position: relative; }
.sup-big { display: block; font-size: 84px; line-height: 1; filter: drop-shadow(0 0 22px rgba(220,140,255,.9)); animation: supBeat 1.5s ease-in-out infinite; }
.sup-head h2 { margin: 6px 0 4px; font: 700 54px var(--font); color: #ffd6f4; text-shadow: 0 5px 0 #4a1a6a, 0 0 26px rgba(255,140,240,.6); }
.sup-head p { margin: 0 auto; max-width: 1080px; font: 600 26px/1.35 var(--font); color: #f2e6ff; }
.sup-skins { position: relative; display: flex; justify-content: center; gap: 22px; margin: 22px 0 12px; }
.sup-skin { width: 240px; padding: 10px 6px 12px; border-radius: 26px; border: 4px solid transparent;
  background: linear-gradient(170deg, #3a1a5a, #1a0a2e) padding-box, conic-gradient(from var(--spa, 0deg), #ffd23a, #ff7ad8, #8a6aff, #6ad8ff, #ffd23a) border-box;
  box-shadow: 0 0 22px rgba(196,106,255,.45); animation: supFloat 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.sup-bear { height: 290px; }
.sup-bear svg { width: 100%; height: 100%; overflow: visible; }
.sup-bear .shadow { display: none; }
.sup-skin b { display: block; margin-top: 6px; font: 700 22px var(--font); color: #fff3c4; }
.sup-monthly { position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 24px; border-radius: 22px;
  background: linear-gradient(90deg, rgba(255,210,60,.22), rgba(255,122,216,.22)); border: 3px solid rgba(255,214,120,.8); }
.sup-monthly span { font-size: 40px; line-height: 1; }
.sup-monthly p { margin: 0; font: 600 23px/1.3 var(--font); color: #fff3d0; text-align: left; }
.sup-monthly b { color: #ffd23f; }
.sup-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sup-patreon { display: flex; align-items: center; gap: 16px; padding: 18px 40px; border-radius: 28px; border: 5px solid #fff; text-decoration: none; color: #fff; text-align: left; position: relative; overflow: hidden;
  background: linear-gradient(#ff7178, #ff424d 55%, #d62f3a); box-shadow: 0 8px 0 #8a1a22, 0 0 34px rgba(255,66,77,.6); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.sup-patreon:hover { transform: translateY(-4px) scale(1.04); }
.sup-patreon::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: supSweep 2.8s ease-in-out infinite; }
.sup-patreon > span:first-child { font-size: 56px; line-height: 1; }
.sup-patreon b { display: block; font: 700 36px/1.1 var(--font); }
.sup-patreon small { display: block; margin-top: 4px; font: 700 22px var(--font); }
.sup-how { font: 600 19px var(--font); color: #d9c6ff; }
.sup-how a { color: #c8d0ff; }
.sup-code summary { cursor: pointer; font: 700 20px var(--font); color: #ffd27a; list-style: none; }
.sup-code summary::-webkit-details-marker { display: none; }
.sup-redeem { display: flex; gap: 10px; margin-top: 10px; }
.sup-redeem input { width: 420px; padding: 12px 16px; border-radius: 14px; border: 3px solid #c46aff; font: 600 20px var(--font); background: #fff; color: #2b1640; }
.sup-box.is-sup { border-color: #ffd23a; box-shadow: 0 22px 0 rgba(0,0,0,.3), 0 0 70px rgba(255,210,60,.5); }

@media (prefers-reduced-motion: reduce) { #btnSupport, #btnSupport *, .sup-rays, .sup-big, .sup-skin, .sup-patreon::after { animation: none !important; } }

/* ---------- Silver: 💜 Dar apoyo (js/support.js, SupGm) ---------- */
#btnSupGm { position: absolute; right: 26px; bottom: 150px; z-index: 2050; display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 16px; border: 3px solid #8a4ad8; background: #fff; cursor: pointer; font: 700 17px var(--font); color: #4a1a7a; box-shadow: 0 4px 0 #5a2a9a; }
#btnSupGm:hover { transform: translateY(-2px); }
#btnSupGm span { font-size: 22px; }

/* ---------- 💜 distintivo de quien apoya: el FONDO de su nombre es morado (en el juego y en su tarjeta) ---------- */
.label.sup .nametag { background: linear-gradient(#d9b8ff, #8a4ad8) !important; color: #fff !important; box-shadow: 0 0 0 3px #5a2a9a, 0 0 12px rgba(150,90,255,.7) !important; font-weight: 800; }
#cardName.sup { background: linear-gradient(#d9b8ff, #8a4ad8); color: #fff; border-radius: 14px; padding: 0 12px; box-shadow: 0 0 0 3px #5a2a9a, 0 0 12px rgba(150,90,255,.7); }