/* ---------- botones (iconos) en la tarjeta de otro jugador ---------- */
.card-actions.pc-row { gap: 12px; flex-wrap: nowrap; }
.pc-ico { position: relative; display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .15s cubic-bezier(.3,1.6,.5,1); }
#cardFriend.pc-ico { width: 64px; height: 64px; padding: 0; font-size: 32px; justify-self: auto; }
.pc-ico.off { opacity: .6; }
.pc-ico.warn { border-color: #b8323c; background: linear-gradient(#ffffff, #ffe1dc); }
/* cartel que explica cada botón al pasar el ratón (o al enfocarlo con el teclado) */
.pc-ico[data-tip]::after, .pc-ico[data-tip]::before { position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 20; }
.pc-ico[data-tip]::after { content: attr(data-tip); bottom: calc(100% + 14px); transform: translate(-50%, 6px); white-space: nowrap;
  padding: 8px 14px; border-radius: 12px; background: #183a63; color: #fff; font: 700 20px var(--font); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.pc-ico[data-tip]::before { content: ''; bottom: calc(100% + 4px); transform: translate(-50%, 6px); border: 9px solid transparent; border-top-color: #183a63; border-bottom: 0; }
.pc-ico[data-tip]:hover::after, .pc-ico[data-tip]:hover::before, .pc-ico[data-tip]:focus-visible::after, .pc-ico[data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.pc-ico.warn[data-tip]::after { background: #a0202a; }
.pc-ico.warn[data-tip]::before { border-top-color: #a0202a; }
/* ---------- reportar ---------- */
.rep-box h2 { color: #a0202a; }
.rep-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.rep-r { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 3px solid #d7c4c4; border-radius: 16px; background: #fff;
  font: 700 20px var(--font); color: #5a2a2a; cursor: pointer; text-align: left; }
.rep-r span { font-size: 26px; }
.rep-r.on { border-color: #b8323c; background: #ffe6e2; box-shadow: 0 0 0 3px rgba(184,50,60,.25); }

/* ---------- reportes en el buzón de Silver ---------- */
.mail-item.report { border-color: #d0505a; background: #fff6f5; }
.mail-item.report .mail-head > b { color: #a0202a; }
.mail-who { font-weight: 600; }
.mail-reason { font-weight: 700; color: #7a2a2a; }
.mail-chat { margin: 6px 0; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px dashed #e3b6b6; display: grid; gap: 4px; }
.mail-chat small { color: #8a6a6a; }