.spider-main {
  max-width: 860px;
}

.spider-main .header {
  margin-bottom: 0.25rem;
}

.title-spider {
  font-size: 2.1rem;
  line-height: 1;
  display: inline-block;
  animation: wiggle 3.2s ease-in-out infinite;
}

/* ---------- HUD ---------- */

.spider-hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
}
.spider-hud.second { margin-bottom: 0.9rem; }

.spider-hud .stat {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.92rem;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.spider-hud .stat.best {
  border-color: var(--pick-border);
  background: var(--pick-bg);
}

.stat-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.15rem;
}

#new-game, #undo-btn, #hint-btn {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
}
#undo-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Suit segmented control */
.seg {
  display: inline-flex;
  border: 2px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.seg-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.8rem;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.seg-btn:not(:last-child) { border-right: 2px solid var(--border); }
.seg-btn.picked { background: var(--primary); color: #fff; }

#sound-pill { margin-left: auto; }
#sound-pill input { display: none; }
#sound-pill.off { background: #fff; border-color: var(--border); color: var(--muted); }
/* Which icon shows is CSS, not markup surgery: the handler used to rewrite the whole
   label's text, which threw away the painted speaker for good. Only the word changes
   in JS now, and it lives in its own span. */
#sound-pill .snd-off { display: none; }
#sound-pill.off .snd-on { display: none; }
#sound-pill.off .snd-off { display: inline; }

/* ---------- Board ---------- */

.play-area { position: relative; }

.spider-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.45rem;
  background: radial-gradient(circle at 50% 0%, #2f9e6b 0%, #1f8055 80%);
  border: 3px solid #15633f;
  border-radius: 20px;
  padding: 0.7rem 0.6rem 1.2rem;
  box-shadow: var(--shadow);
  min-height: 460px;
  align-items: start;
  user-select: none;
  -webkit-user-select: none;
}

.col {
  position: relative;
  min-height: 96px;
  border-radius: 8px;
}

/* empty-column drop hint */
.col.empty {
  outline: 2px dashed rgba(255, 255, 255, 0.35);
  outline-offset: -3px;
}
.col.drop-ok {
  outline: 2px solid #fff;
  outline-offset: -3px;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Cards ---------- */

:root {
  --sp-card-w: 100%;
  --sp-card-h: 86px;
  --sp-face-gap: 22px;
  --sp-down-gap: 9px;
}

.spider-board .card {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--sp-card-h);
  border-radius: 7px;
  background: #fff;
  border: 1px solid #d8d8e0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: #2e2d4d;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.spider-board .card.red { color: #e23b5a; }

.spider-board .card .corner {
  position: absolute;
  font-size: 0.8rem;
  line-height: 0.9;
  text-align: center;
  font-weight: 700;
}
.spider-board .card .corner.tl { top: 3px; left: 5px; }
.spider-board .card .corner.br { bottom: 3px; right: 5px; transform: rotate(180deg); }

.spider-board .card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  opacity: 0.92;
}

/* face-down card — soft pink→lavender with polka dots and a cherry blossom */
.spider-board .card.down {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 1.5px, transparent 2px) 0 0 / 13px 13px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 1.5px, transparent 2px) 6.5px 6.5px / 13px 13px,
    linear-gradient(145deg, #ffb3d4 0%, #c7a4f0 100%);
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.22);
}
.spider-board .card.down .corner, .spider-board .card.down .pip { display: none; }

/* interaction states */
.spider-board .card.movable { cursor: grab; touch-action: none; }
.spider-board .card.movable:active { cursor: grabbing; }

/* card(s) being dragged — a floating stack that follows the pointer */
.drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  top: 0;
  left: 0;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}
.drag-ghost .card { position: absolute; height: var(--sp-card-h); }
.spider-board .card.movable:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 3px 8px rgba(0,0,0,0.3); }
.spider-board .card.sel {
  box-shadow: 0 0 0 3px var(--primary), 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateX(3px);
  z-index: 50;
}
.spider-board .card.hint {
  animation: hintPulse 0.6s ease-in-out 2;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.22); }
  50% { box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,0.3); }
}

.col.empty:hover { background: rgba(255, 255, 255, 0.06); }

/* completed-set fly-off */
@keyframes setFly {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-40px) scale(0.4); opacity: 0; }
}
.spider-board .card.clearing { animation: setFly 0.45s ease-in both; z-index: 60; }

/* ---------- Tray (foundations + stock) ---------- */

.tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.foundations {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  min-height: 38px;
  align-items: center;
}
.foundation {
  width: 30px;
  height: 40px;
  border-radius: 6px;
  background: var(--card);
  border: 2px solid var(--pick-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow);
  animation: cardPop 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.275);
}
.foundation.red { color: #e23b5a; }
@keyframes cardPop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.stock-wrap { display: flex; align-items: center; gap: 0.6rem; }
.tray-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stock {
  position: relative;
  width: 58px;
  height: 44px;
  cursor: pointer;
}
.stock .pile-card {
  position: absolute;
  top: 0;
  width: 38px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffa9c4 0%, #ff6b9d 100%);
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.stock.empty { cursor: default; }
.stock.empty::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38px;
  border: 2px dashed var(--border);
  border-radius: 6px;
}
.stock:not(.empty):hover .pile-card { filter: brightness(1.05); }
.stock.nope { animation: shake 0.3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- Status ---------- */

.status {
  text-align: center;
  font-weight: 700;
  color: var(--primary-dark);
  min-height: 1.4em;
  margin: 0.7rem 0 0;
}

/* ---------- Overlay ---------- */

.spider-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(3px);
  border-radius: 20px;
  z-index: 80;
}
.spider-overlay.hidden { display: none; }
.spider-overlay h2 {
  margin: 0;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: var(--ink);
}
.spider-overlay #overlay-body { color: var(--muted); max-width: 40ch; }
.spider-overlay button {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.6rem 1.8rem;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  margin-top: 0.4rem;
}
.spider-overlay button:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ---------- How to play ---------- */

.how-to {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem 1.4rem 1.1rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow);
}
.how-to h2 {
  margin: 0 0 0.6rem;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.how-to ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.how-to li { margin-bottom: 0.35rem; }
.how-to b { color: var(--ink); }

/* ---------- Keyboard + screen reader ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The board is the focus surface, so it has to say so clearly -- it is a big green
   rectangle and a thin default outline disappears against it. */
.spider-board:focus { outline: none; }
.spider-board:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
}

/* Where the keyboard cursor is. Distinct from .sel (cards actually picked up) and
   from .drop-ok (legal targets), since all three can be on screen at once. */
.spider-board .card.cursor {
  box-shadow: 0 0 0 3px #ffd166, 0 6px 14px rgba(0, 0, 0, 0.3);
  z-index: 5;
}
.col.cursor-empty {
  box-shadow: inset 0 0 0 3px #ffd166;
}

/* The stock is a real button now; strip the browser's chrome so it still looks like
   a pile of cards. */
button.stock {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ---------- Responsive ---------- */

/* The face gap is the tap target for every covered card, so it is sized for a
   fingertip rather than for compactness. */
@media (max-width: 720px) {
  :root { --sp-card-h: 72px; --sp-face-gap: 26px; --sp-down-gap: 9px; }
  .spider-board { gap: 0.28rem; padding: 0.5rem 0.4rem 1rem; min-height: 360px; }
  .spider-board .card .corner { font-size: 0.62rem; }
  .spider-board .card .pip { font-size: 1.05rem; }
  .col { min-height: 74px; }
}

@media (max-width: 480px) {
  :root { --sp-card-h: 58px; --sp-face-gap: 26px; --sp-down-gap: 7px; }
  .spider-board { gap: 0.18rem; padding: 0.4rem 0.28rem 0.8rem; }
  .spider-board .card .corner { font-size: 0.58rem; left: 2px; }
  .spider-board .card .corner.tl { left: 2px; top: 2px; }
  .spider-board .card .pip { display: none; }
}