/* ═══════════════════════════════════════════════════════════════════════════
   STLW HIP HOP ID — Card styles (shared)
   Used by showUserHipHopCard() in /stlw-hiphop-card.js
   Extracted from stalow-dashboard-unified.html (Pokemon trainer card style).
   ═══════════════════════════════════════════════════════════════════════════ */

.mgk-trainer-card { position:relative;width:360px;border-radius:8px;overflow:hidden;border:3px solid #1a3a5c;background:linear-gradient(180deg,#4a8ec2 0%,#6baed6 12%,#e8eef4 12%,#f0f4f8 85%,#1a3a5c 85%);box-shadow:0 4px 20px rgba(0,0,0,0.4);font-family:'Montserrat',sans-serif }
.mgk-tc-header { padding:7px 14px;background:linear-gradient(90deg,#1a3a5c,#2a5a8c);display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #0d2240 }
.mgk-tc-name { font-size:14px;font-weight:900;color:#fff;letter-spacing:2px;text-shadow:1px 1px 0 #0d2240 }
.mgk-tc-hp { font-size:11px;font-weight:700;color:#fff;background:#0d2240;padding:2px 10px;border-radius:3px;letter-spacing:1px }
.mgk-tc-portrait { position:absolute;right:14px;top:48px;width:105px;height:125px;border:2px solid #1a3a5c;border-radius:4px;background:linear-gradient(180deg,#c8ddf0 0%,#e8f0f8 100%);overflow:hidden;display:flex;align-items:flex-end;justify-content:center }
.mgk-tc-portrait-border { display:flex;align-items:flex-end;justify-content:center;width:100%;height:100% }
.mgk-tc-types { padding:6px 14px;display:flex;gap:4px;flex-wrap:wrap }
.mgk-tc-type { font-size:8px;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:3px;text-transform:uppercase }
.mgk-tc-stats { padding:0 14px 6px;color:#1a1a2e }
.mgk-tc-stat { display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:12px;font-weight:700 }
.mgk-tc-stat-label { color:#2a5a8c;min-width:90px }
.mgk-tc-stat-val { color:#1a1a2e;flex:1;letter-spacing:0.5px }
.mgk-tc-footer { padding:7px 14px;background:#1a3a5c;color:#8ab4d8;font-size:9px;font-weight:900;letter-spacing:3px;text-transform:uppercase }

@media(max-width:768px){
  .mgk-trainer-card { width:100%;max-width:360px }
}
@media(max-width:640px){
  .mgk-tc-portrait { width:75px;height:95px;right:8px;top:42px }
  .mgk-tc-stats { max-width:170px!important }
  .mgk-tc-stat { font-size:10px }
  .mgk-tc-stat-label { min-width:70px }
}
@media(max-width:480px){
  .mgk-trainer-card { border-width:2px }
  .mgk-tc-header { padding:5px 10px }
  .mgk-tc-name { font-size:12px }
  .mgk-tc-stats { max-width:140px!important }
  .mgk-tc-stat { font-size:9px;margin-bottom:2px }
  .mgk-tc-stat-label { min-width:60px }
}