/* 蜘蛛纸牌 */
.sp-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.sp-opt{display:flex;align-items:center;gap:.4rem}
.sp-opt label{margin:0;color:#8a9199;font-size:.8125rem}
.sp-opt .form-select{width:auto}
.sp-switch{margin:0;padding-left:2.4rem}
.sp-switch .form-check-label{font-size:.8125rem;color:#5b6675}

.sp-stage{position:relative;margin-top:.9rem}
.sp-top{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-bottom:.6rem}
.sp-stock{position:relative;width:3.2rem;height:4.5rem;border:0;border-radius:.45rem;cursor:pointer;
  background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 6px,#2563eb 6px,#2563eb 12px);
  box-shadow:0 2px 6px rgba(15,23,42,.25),inset 0 0 0 2px #fff}
.sp-stock:disabled{opacity:.35;cursor:default}
.sp-stock-count{position:absolute;left:50%;bottom:-.2rem;transform:translateX(-50%);padding:0 .35rem;border-radius:.6rem;
  background:#0f172a;color:#fff;font-size:.7rem;line-height:1.1rem}
.sp-meta{display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 auto}
.sp-meta-item{flex:1 1 4.5rem;padding:.35rem .5rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd;text-align:center}
.sp-meta-item b{display:block;color:var(--site-primary,#0e7490);font-size:1rem;font-variant-numeric:tabular-nums}
.sp-meta-item span{display:block;color:#8a9199;font-size:.6875rem}

.sp-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:.3rem}
.sp-board{position:relative;margin:0 auto}
.sp-card{position:absolute;left:0;top:0;border-radius:.42rem;background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.28),inset 0 0 0 1px rgba(148,163,184,.55);
  transition:transform .16s ease-out;cursor:pointer;user-select:none;-webkit-user-select:none;
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;touch-action:none}
.sp-card.is-red{color:#dc2626}
.sp-card.is-black{color:#1f2937}
.sp-card .sp-rank{position:absolute;left:.18em;top:.1em;font-weight:700;font-size:1em;line-height:1.05}
.sp-card .sp-suit-top{position:absolute;left:.26em;top:1.15em;font-size:.8em;line-height:1}
.sp-card .sp-suit-big{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:1.7em;opacity:.9}
.sp-card.is-down{background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 5px,#2563eb 5px,#2563eb 10px);
  box-shadow:0 1px 2px rgba(15,23,42,.3),inset 0 0 0 2px #fff;cursor:default}
.sp-card.is-down .sp-rank,.sp-card.is-down .sp-suit-top,.sp-card.is-down .sp-suit-big{display:none}
.sp-card.is-sel{box-shadow:0 0 0 3px var(--site-primary,#0e7490),0 2px 6px rgba(15,23,42,.3)}
.sp-card.is-hint{box-shadow:0 0 0 3px #f59e0b,0 2px 6px rgba(15,23,42,.3)}
.sp-card.is-drag{z-index:999;transition:none;box-shadow:0 8px 18px rgba(15,23,42,.35)}
.sp-col.is-drop{background:rgba(14,116,144,.09);border-radius:.5rem}
.sp-col{position:absolute;top:0;border-radius:.5rem}

.sp-overlay{position:absolute;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;padding:1rem;text-align:center;color:#fff;background:rgba(15,23,42,.72);border-radius:.6rem}
.sp-overlay.is-off{display:none}
.sp-overlay-title{font-size:1.3rem;font-weight:700}
.sp-overlay-sub{max-width:19rem;font-size:.8125rem;line-height:1.65;color:rgba(255,255,255,.82)}

.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:.9rem}
.sp-stat{padding:.5rem .35rem;border:1px solid #eef1f5;border-radius:.6rem;background:#fafbfd;text-align:center}
.sp-stat b{display:block;color:var(--site-primary,#0e7490);font-size:1rem;line-height:1.35;font-variant-numeric:tabular-nums;word-break:break-all}
.sp-stat span{display:block;margin-top:.1rem;color:#8a9199;font-size:.6875rem}