.sp-wrap { display:flex; justify-content:center; margin:40px 0 50px; padding:0 20px; }
.sp-card {
  background: linear-gradient(135deg, #111, #1a1a2e, #000);
  border:3px solid #333;
  border-radius:20px;
  width:100%;
  max-width:650px;
  box-shadow:0 20px 50px rgba(0,0,0,0.8), inset 0 0 50px rgba(48,159,106,.1);
  overflow:hidden;
  position:relative;
}

.sp-card.tier-gold { border-color:#D4AF37; box-shadow:0 0 40px rgba(212,175,55,.3); }
.sp-card.tier-green { border-color:var(--dart-green); box-shadow:0 0 40px rgba(48,159,106,.3); }
.sp-card.tier-red { border-color:var(--dart-red); box-shadow:0 0 40px rgba(227,41,46,.3); }

.sp-header {
  background: rgba(0,0,0,.5);
  padding:40px 20px 30px;
  text-align:center;
  border-bottom:2px solid rgba(255,255,255,.1);
  position:relative;
}
.sp-rank {
  position:absolute; top:20px; left:20px;
  background:linear-gradient(45deg,#D4AF37,#FFA500);
  color:#000; font-weight:900; font-size:1.5rem;
  width:50px; height:50px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  box-shadow:0 5px 15px rgba(0,0,0,.5);
  z-index:10;
}
.sp-elo {
  position:absolute; top:20px; right:20px;
  font-weight:900; font-size:2rem; z-index:10;
  text-shadow:0 0 10px rgba(48,159,106,.8);
}
.sp-card.tier-gold .sp-elo { color:#D4AF37; text-shadow:0 0 10px rgba(212,175,55,.7); }
.sp-card.tier-green .sp-elo { color:var(--dart-green); }
.sp-card.tier-red .sp-elo { color:var(--dart-red); text-shadow:0 0 10px rgba(227,41,46,.7); }

.sp-avatar-wrap{
  width:140px; height:140px; margin:0 auto 15px; border-radius:50%; padding:5px;
  background: linear-gradient(135deg, #333, #111);
  box-shadow:0 10px 25px rgba(0,0,0,.8);
  position:relative; z-index:5;
}
.sp-card.tier-gold .sp-avatar-wrap { background:linear-gradient(135deg,#D4AF37,#8a701e); box-shadow:0 0 25px rgba(212,175,55,.5); }
.sp-card.tier-green .sp-avatar-wrap { background:linear-gradient(135deg,var(--dart-green),#1b6641); box-shadow:0 0 25px rgba(48,159,106,.5); }
.sp-card.tier-red .sp-avatar-wrap { background:linear-gradient(135deg,var(--dart-red),#8c1619); box-shadow:0 0 25px rgba(227,41,46,.5); }

.sp-avatar-wrap img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:#000; }

.sp-name{ font-size:2.8rem; font-weight:900; color:#fff; text-transform:uppercase; margin:0; letter-spacing:2px; text-shadow:0 5px 15px rgba(0,0,0,.8); }
.sp-full{ color:#888; font-size:1rem; text-transform:uppercase; letter-spacing:5px; margin-top:5px; }
.sp-motto{ margin-top:15px; font-style:italic; color:#ccc; font-size:1.1rem; padding:10px; border-radius:8px; background:rgba(255,255,255,.02); display:inline-block; border-left:3px solid var(--dart-green); }

.sp-trophies{ margin-top:15px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.sp-trophy{
  background:linear-gradient(135deg,#D4AF37,#b8962e);
  color:#000; padding:4px 10px; border-radius:20px; font-weight:bold; font-size:.8rem;
  box-shadow:0 2px 10px rgba(212,175,55,.4);
}

.sp-badges-wrap{ background:rgba(0,0,0,.4); padding:15px 20px; border-bottom:1px solid #333; text-align:center; }
.sp-badges-title{ color:#888; font-size:.8rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.sp-badges{ display:flex; justify-content:center; gap:15px; flex-wrap:wrap; }
.sp-badge{
  background:#111; border:1px solid #444; border-radius:8px; padding:10px 15px; text-align:center;
  display:flex; flex-direction:column; align-items:center; width:80px; transition:transform .2s; position:relative;
}
.sp-badge:hover{ transform:scale(1.08); border-color:var(--dart-green); }
.sp-badge-icon{ font-size:2rem; margin-bottom:5px; }
.sp-badge-name{ font-size:.6rem; color:#aaa; text-transform:uppercase; font-weight:bold; }
.sp-badge-count{
  background:var(--dart-red); color:#fff; font-size:.7rem; padding:2px 6px; border-radius:10px;
  position:absolute; top:-5px; right:-5px; font-weight:bold;
}

.sp-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:20px;
}
.sp-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  padding:15px; border-radius:10px; text-align:center;
}
.sp-box.full{ grid-column:span 2; }
.sp-val{ font-size:1.8rem; font-weight:900; color:#fff; margin-bottom:5px; }
.sp-label{ color:#aaa; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; }

.sp-form{
  display:flex; justify-content:center; gap:10px; margin-top:10px;
  background:rgba(0,0,0,.3); padding:10px; border-radius:30px;
}

.sp-chart{ position:relative; height:250px; width:100%; margin-top:15px; }

.sp-vs{ display:flex; justify-content:space-between; gap:15px; margin-top:15px; }
.sp-vs-box{ flex:1; background:#000; padding:15px; border-radius:8px; border:1px solid #333; }
.sp-vs-box.green{ border-bottom:3px solid var(--dart-green); }
.sp-vs-box.red{ border-bottom:3px solid var(--dart-red); }
.sp-vs-title{ font-size:.7rem; color:#888; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.sp-vs-name{ font-size:1.1rem; font-weight:bold; color:#fff; }

.sp-actions{
  text-align:center; padding:20px; background:rgba(0,0,0,.5); border-top:1px solid rgba(255,255,255,.1);
}
.sp-actions-row{ display:flex; gap:15px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 700px){
  .sp-name{ font-size:2.1rem; }
}
@media (max-width: 500px){
  .sp-wrap{ padding:0 12px; }
  .sp-stats{ gap:10px; padding:15px; }
  .sp-val{ font-size:1.5rem; }
  .sp-rank{ width:40px; height:40px; font-size:1.2rem; top:10px; left:10px; }
  .sp-elo{ font-size:1.5rem; top:10px; right:10px; }
  .sp-name{ font-size:2rem; }
  .sp-avatar-wrap{ width:100px; height:100px; }
  .sp-vs{ flex-direction:column; }
}

/* Light mode */
html[data-theme="light"] .sp-card{
  background:#fff;
  border-color:#d6e1ef;
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}
html[data-theme="light"] .sp-header{
  background:#f8fbff;
  border-bottom-color:#d6e1ef;
}
html[data-theme="light"] .sp-name{ color:#0f172a; text-shadow:none; }
html[data-theme="light"] .sp-full{ color:#64748b; }
html[data-theme="light"] .sp-motto{
  color:#334155; background:#fff; border-left-color:#22c55e;
}
html[data-theme="light"] .sp-box{
  background:#fff;
  border-color:#d6e1ef;
}
html[data-theme="light"] .sp-val{ color:#0f172a; }
html[data-theme="light"] .sp-label{ color:#64748b; }
html[data-theme="light"] .sp-form{ background:#f8fbff; }
html[data-theme="light"] .sp-vs-box{
  background:#fff;
  border-color:#d6e1ef;
}
html[data-theme="light"] .sp-vs-title{ color:#64748b; }
html[data-theme="light"] .sp-vs-name{ color:#0f172a; }
html[data-theme="light"] .sp-badges-wrap{
  background:#f8fbff;
  border-bottom-color:#d6e1ef;
}
html[data-theme="light"] .sp-badge{
  background:#fff;
  border-color:#d6e1ef;
}
html[data-theme="light"] .sp-badge-name{ color:#64748b; }
html[data-theme="light"] .sp-actions{
  background:#f8fbff;
  border-top-color:#d6e1ef;
}