.shp{--k:var(--acc)}
.shp .k-event{--k:#3fbf6a}.shp .k-coins{--k:#e5a92a}.shp .k-exchange{--k:#4f8bff}.shp .k-crystal{--k:#2fc6d6}.shp .k-guild{--k:#a66bff}
.shp-kinds{margin-top:12px}
.shp-k{display:inline-block;padding:3px 10px 2px;background:var(--k);color:#0d1017;font:11.5px/1.3 var(--f-lbl);letter-spacing:1.2px;text-transform:uppercase;clip-path:var(--slant)}
.shp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;margin-top:18px}
.shc{position:relative;display:flex;flex-direction:column;background:var(--pn);border:1px solid var(--ln);border-top:3px solid var(--k);box-shadow:var(--sh);color:var(--tx);
  text-decoration:none;transition:border-color .15s,transform .15s}
.shc:hover{border-color:var(--k);color:var(--tx);transform:translateY(-2px)}
.shc-ban{display:block;background:#0b0e16;line-height:0}
.shc-ban img{width:100%;height:auto;aspect-ratio:auto}
.shc-cur{display:flex;align-items:center;justify-content:center;gap:12px;height:112px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--k) 30%,transparent),transparent 70%),var(--pn2)}
.shc-cur img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.shc-b{display:flex;flex-direction:column;gap:6px;padding:12px 14px 13px}
.shc-tags{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shc-n{color:var(--dim);font:12.5px var(--f-ui)}
.shc-name{color:var(--hi);font:18px/1.2 var(--f-lbl);font-weight:normal}
.shc-when{color:var(--dim);font:13.5px/1.35 var(--f-ui)}
.shc-when b{color:var(--hi);font:15px var(--f-num)}
.shc-s{display:flex;gap:6px;min-height:40px;margin-top:2px}
.shc-s img{width:40px;height:40px;object-fit:contain;background:var(--pn2);border:1px solid var(--ln);padding:2px}
.shp-hero{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:center;margin:0 0 16px;padding:18px;background:var(--pn);
  border:1px solid var(--ln);border-top:3px solid var(--k,var(--acc));box-shadow:var(--sh)}
.shp-hero.has-ban{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.shp-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),var(--pn2)}
.shp-hero.has-ban .shp-art{min-height:0;background:#0b0e16}
.shp-art>img{display:block;width:100%;height:auto}
.shp-cur{display:flex;gap:14px}
.shp-cur img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.shp-hero.has-ban .shp-cur{position:absolute;right:10px;bottom:10px;gap:6px}
.shp-hero.has-ban .shp-cur img{width:52px;height:52px}
.shp-info{display:flex;flex-direction:column;gap:9px;min-width:0}
.shp-info .bv-name{margin:0}
.shp-tags{display:flex;align-items:center;gap:8px;margin:0}
.shp-st{padding:3px 10px 2px;background:var(--pn3);color:var(--tx);font:11.5px/1.3 var(--f-lbl);letter-spacing:1.2px;text-transform:uppercase;clip-path:var(--slant)}
.shp-st.s-open{background:#2f9e5a;color:#fff}.shp-st.s-upcoming{background:#c99417;color:#0d1017}
.shp-when{margin:0;color:var(--tx);font:15px var(--f-ui)}
.shp-when b{margin-left:8px;color:var(--acc-tx);font:16px var(--f-num)}
.shp-pays{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;color:var(--dim);font:13px var(--f-lbl);letter-spacing:1.2px;text-transform:uppercase}
.shp-pays b{display:inline-flex;align-items:center;gap:6px;color:var(--hi);font:15px var(--f-ui);font-weight:normal;letter-spacing:0;text-transform:none}
.shp-pays img{width:26px;height:26px;object-fit:contain}
.shp-rel{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.shp-go{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;max-width:100%;padding:7px 14px 6px;text-align:left;white-space:normal}
.shp-go small{color:var(--acc-tx);font:10.5px var(--f-lbl);letter-spacing:1.4px;text-transform:uppercase}
.shp-tabs{margin-top:4px}
.shp-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;color:var(--dim);font:13px var(--f-lbl);letter-spacing:1.4px;text-transform:uppercase}
.shp-steps b{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--pn2);border:1px solid var(--ln);color:var(--hi);font:15px var(--f-num);letter-spacing:.3px;text-transform:none}
.shp-steps b small{color:var(--dim);font:11px var(--f-lbl);letter-spacing:1px;text-transform:uppercase}
.shp-steps img{width:20px;height:20px}
.shp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px;margin-top:16px}
.shl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a c" "t c";gap:6px 12px;align-items:center;padding:10px 14px;background:var(--pn);
  border:1px solid var(--ln);border-left:3px solid var(--k,var(--acc));box-shadow:var(--sh)}
.shl.gone{opacity:.55}
.shl-a{grid-area:a;display:flex;align-items:center;gap:12px;min-width:0;color:var(--hi);text-decoration:none}
a.shl-a:hover .shl-n{color:var(--link)}
.shl-ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--pn2);border:1px solid var(--ln)}
.shl-ic img{max-width:46px;max-height:46px;object-fit:contain}
.shl-n{font:16px/1.25 var(--f-lbl);font-weight:normal;overflow-wrap:anywhere}
.shl-n small{color:var(--acc-tx);font:14px var(--f-num)}
.shl-tags{grid-area:t;display:flex;flex-wrap:wrap;gap:5px;padding-left:64px}
.shl-k,.shl-t{padding:2px 8px 1px;background:var(--pn2);color:var(--dim);font:11px/1.4 var(--f-lbl);letter-spacing:.8px;text-transform:uppercase;clip-path:var(--slant)}
.shl-k{color:var(--tx)}
.shl-t.rec{background:var(--acc);color:var(--ink)}
.shl-t.sale{background:#e8554e;color:#fff}
.shl-t.win{color:var(--tx)}
.shl-cost{grid-area:c;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.shl-p{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--pn2);border:1px solid var(--ln);white-space:nowrap}
.shl-p img{width:26px;height:26px;object-fit:contain}
.shl-p b{color:var(--hi);font:17px var(--f-num)}
.shl-p s{color:var(--dim);font:13px var(--f-num)}
.shl-p.free,.shl-p.draw{color:var(--acc-tx);font:13px var(--f-lbl);letter-spacing:1px;text-transform:uppercase}
@media(max-width:820px){
  .shp-hero,.shp-hero.has-ban{grid-template-columns:minmax(0,1fr);padding:14px}
  .shp-cur img{width:96px;height:96px}
}
@media(max-width:480px){
  .shl{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "t" "c"}
  .shl-cost{align-items:flex-start;flex-direction:row;flex-wrap:wrap;padding-left:64px}
  .shl-tags{padding-left:64px}
}