/* MIKA · Card Power. Se carga después de autoclick.css. */
.cpn{display:inline-block;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:99px;font-style:normal;font-size:11px;font-weight:800;
  background:#fbbf24;color:#2a0620;box-shadow:0 0 10px rgba(251,191,36,.7)}
.cpn[hidden]{display:none}

.cpwin{padding:12px;border-radius:16px;
  border:1px solid rgba(251,191,36,.55);background:linear-gradient(180deg,rgba(40,10,44,.97),rgba(18,5,24,.98));
  backdrop-filter:blur(10px);box-shadow:0 14px 46px rgba(0,0,0,.5),0 0 30px rgba(251,191,36,.15)}
.cpwin[hidden]{display:none}
.cph{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cph b{font-family:'Fredoka','Nunito',sans-serif;font-size:16px}
.cpi{margin:0 0 10px;font-size:12px;line-height:1.4;color:var(--dim)}
.cpi b{color:#ffe29a}
.cpg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}

.cpb{position:relative;aspect-ratio:3/4;padding:0;border-radius:10px;border:2px solid var(--rc,#fff);background:#1a0518;overflow:hidden;
  cursor:pointer;color:#fff;transition:transform .12s,box-shadow .2s}
.cpb-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px}
.cpb-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.cpb-t{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.3px;
  text-shadow:0 1px 4px #000,0 0 8px #000;font-variant-numeric:tabular-nums}
.cpb-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.65)}
.cpb-bar i{display:block;height:100%;width:0;background:var(--rc)}

.cpb.nown,.cpb.lock{cursor:default}
.cpb.nown .cpb-art,.cpb.lock .cpb-art{filter:grayscale(1) brightness(.45)}
.cpb.cd{cursor:default}
.cpb.cd .cpb-art{filter:grayscale(.8) brightness(.55)}
.cpb.ready{box-shadow:0 0 14px var(--rc);animation:cpReady 1.8s ease-in-out infinite}
.cpb.ready:hover{transform:translateY(-3px) scale(1.05)}
.cpb.active{border-color:#fbbf24;box-shadow:0 0 22px #fbbf24}
.cpb.active .cpb-bar i{background:#fbbf24}
@keyframes cpReady{50%{box-shadow:0 0 24px var(--rc)}}
.cpl{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:11px;color:var(--dim)}

/* la carta potenciada también brilla en la pestaña Cards */
.ccard.boosted{outline:2px solid #fbbf24;box-shadow:0 0 22px rgba(251,191,36,.8)!important}

/* sin nada flotante sobre las cartas grandes / popups */

/* botón flotante arriba a la izquierda (debajo de la barra superior) (igual que el de Helping Hands, pero dorado) */
.cppill{position:relative;display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:99px;cursor:pointer;font-family:'Fredoka','Nunito',sans-serif;font-weight:600;font-size:14px;color:#fff6dc;
  border:1px solid rgba(251,191,36,.65);background:linear-gradient(135deg,rgba(60,30,10,.95),rgba(30,8,40,.95));
  backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(251,191,36,.3);transition:transform .15s,box-shadow .2s}
.cppill:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(251,191,36,.5)}
.cppill-ico{font-size:20px;line-height:1}
.cppill .cpn{margin-left:2px}

/* carta que puede recibir un punto de carta: ✦ violeta abajo a la izquierda (la ▲ dorada de subir nivel va abajo a la derecha).
   Va en .cname::after porque .ccard.owned::after (fx.css) ya lo usa el brillo holográfico y lo dejaba invisible.
   .cname no tiene position, así que el icono se ancla a la esquina de la carta. */
.ccard.canpt .cname::after{content:"✦";position:absolute;bottom:6px;left:8px;z-index:3;color:#c084fc;font-size:16px;line-height:1;
  text-shadow:0 0 10px #a855f7,0 0 4px #000;animation:bobPt 1.2s ease-in-out infinite;pointer-events:none}
@keyframes bobPt{50%{transform:translateY(-4px) scale(1.15)}}