.spider-shell { width:min(100%,68rem); height:var(--game-visible-height,100dvh); min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; }
.spider-stage { min-height:0; height:100%; grid-template-rows:auto minmax(0,1fr); align-content:stretch; overflow:hidden; }
.spider-options { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.35rem; }
.spider-options p { margin:0; color:var(--muted); font-size:.75rem; font-weight:750; text-align:right; }
.suit-toggle { display:flex; gap:.15rem; padding:.16rem; border:1px solid #c9c0b2; border-radius:.65rem; background:var(--panel); }
.suit-toggle button { min-height:1.8rem; padding:0 .55rem; border:0; border-radius:.45rem; background:transparent; color:#17324d; font-size:.7rem; font-weight:900; cursor:pointer; }
.suit-toggle button[aria-pressed="true"] { background:#17324d; color:#fff; }
.spider-board { position:relative; width:100%; height:100%; min-height:0; padding:clamp(.35rem,1vw,.7rem); overflow:hidden; border:2px solid #17324d; border-radius:1rem; background:#277565; box-shadow:inset 0 0 0 4px rgba(255,255,255,.09),5px 5px 0 rgba(23,50,77,.13); touch-action:none; }
.spider-tableau { height:100%; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:clamp(.1rem,.55vw,.4rem); }
.spider-column { position:relative; min-width:0; height:100%; }
.spider-column .playing-card { position:absolute; top:calc(var(--card-index) * var(--spider-step)); left:0; width:100%; font-size:clamp(.55rem,1.5vw,1rem); z-index:calc(var(--card-index) + 1); }
.spider-column .playing-card.selected { transform:translateY(-3px); }
.spider-column-target { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
.spider-stock { position:absolute; z-index:100; right:.7rem; bottom:.65rem; width:clamp(2.6rem,7vw,4rem); border:0; cursor:pointer; }
.spider-deal-origin { position:absolute; left:50%; top:50%; width:1px; height:1px; pointer-events:none; }
.spider-stock span { position:absolute; right:105%; top:50%; width:max-content; translate:0 -50%; color:#fff; font:800 .65rem/1 sans-serif; }
.spider-stock:disabled { opacity:.45; cursor:default; }
.game-actions button:disabled { opacity:.42; cursor:default; }
@media(max-width:620px){
  .spider-shell{padding-inline:.3rem;gap:.45rem}.spider-board{padding:.25rem;border-radius:.65rem}.spider-tableau{gap:.06rem}.spider-options p{display:none}.suit-toggle button{padding:0 .42rem}.scorebar{padding:.45rem .6rem}.metric-value{font-size:.95rem}.game-actions{gap:.3rem}.game-actions .action-button{padding:.5rem .4rem;font-size:.78rem}
  .spider-column .playing-card{font-size:clamp(.48rem,2vw,.67rem)}
}