/* Spades screens: the four-seat table, the trick, the bidding gate, the hand.
   Shared chrome (table browser, seats, HUD, banners, result stats) is in style.css. */
/* home */
.sp-rules{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#A9BFAF;line-height:1.45}
.sp-rules li{padding-left:15px;position:relative}
.sp-rules li::before{content:"♠";position:absolute;left:0;top:1px;font-size:10px;color:#4C7A61}
.sp-rules b{color:var(--cream);font-weight:700}
/* the table: you at the bottom, play running clockwise */
.sp-table{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  background:var(--felt-700);border:1px solid var(--felt-line);border-radius:18px;padding:12px}
.sp-top{grid-area:1/2}.sp-left{grid-area:2/1}.sp-trick{grid-area:2/2}.sp-right{grid-area:2/3}.sp-bottom{grid-area:3/2}
.sp-chip{position:relative;display:flex;align-items:center;gap:8px;background:var(--felt-800);
  border:1px solid var(--felt-line);border-radius:14px;padding:7px 10px}
.sp-chip.on{border-color:var(--brass);box-shadow:0 0 0 1px rgba(217,164,65,.45)}
.sp-chip.open{border-style:dashed;opacity:.65}
.sp-left .sp-chip,.sp-right .sp-chip{flex-direction:column;gap:3px;width:84px;padding:9px 6px;text-align:center}
.sp-who{min-width:0;flex:1}
.sp-who b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-who span{font-size:10.5px;color:#8FA898}
.sp-sc{font:800 15px 'Bricolage Grotesque';text-align:right;flex:none}
.sp-sc i{display:block;font:600 9px 'Instrument Sans';font-style:normal;color:#8FA898;letter-spacing:.04em}
.sp-left .sp-sc,.sp-right .sp-sc{text-align:center}
.sp-d{position:absolute;top:-7px;right:-6px;background:var(--brass);color:#241A04;border-radius:999px;
  font:800 9px 'Instrument Sans';letter-spacing:.06em;padding:2px 6px}
/* the trick: one slot per seat, laid out the same way as the chips */
.sp-trick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;justify-items:center;align-items:center;min-height:200px}
.s-top{grid-area:1/2}.s-left{grid-area:2/1}.s-mid{grid-area:2/2}.s-right{grid-area:2/3}.s-bottom{grid-area:3/2}
.sp-slot{min-height:63px;display:flex;align-items:center;justify-content:center}
/* the played card is the real face; the slot only sizes it and holds the shadow */
.sp-play{width:42px;aspect-ratio:2/3;border-radius:7px;box-shadow:0 3px 9px rgba(0,0,0,.42)}
.sp-play.won{box-shadow:0 0 0 2px var(--brass),0 3px 11px rgba(0,0,0,.5)}
.sp-empty{font-size:26px;color:#2A4C3B}
.sp-took{font-size:11px;color:#8FA898;text-align:center;line-height:1.3}
/* bidding: the face-down gate, then the pad */
.sp-gate{gap:10px}
.sp-facedown{display:flex;justify-content:center;padding:2px 0}
.sp-facedown i{display:block;width:34px;height:48px;border-radius:7px;border:1px solid #3C5F4C;
  background:repeating-linear-gradient(45deg,#24402F,#24402F 4px,#1A2E23 4px,#1A2E23 8px)}
.sp-facedown i+i{margin-left:-14px}
.sp-bidpad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sp-bidpad button{background:#0E1B15;border:1.5px solid #335846;border-radius:12px;color:var(--cream);
  font:700 15px 'Instrument Sans';padding:11px 0;cursor:pointer}
.sp-bidpad button:hover{border-color:var(--brass)}
.sp-bidpad button.nil{grid-column:span 2;color:var(--brass);border-color:#5C4A1E}
/* an armed card: the play button sits under the hand, where the thumb already is */
.sp-confirm{gap:10px;padding:14px}
.sp-armed{display:flex;align-items:center;gap:10px;font-size:14px}
.sp-armedcard{width:34px;flex:none;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
/* correcting a misclicked bid: the ask, and the host's answer */
.sp-fixrow{align-items:center;gap:8px;margin:6px 0 2px}
.sp-fixrow .hint{text-align:left;margin:0;flex:1}
.sp-fix{gap:10px;margin-bottom:8px}
.sp-fix .sp-bidpad button[disabled]{opacity:.35;cursor:default}
.sp-fix .btn{margin:0}
/* scoresheet rows — used on the gate and on the result screen */
.sp-sheet{display:flex;flex-direction:column;gap:5px}
.sp-srow{display:flex;align-items:center;gap:8px;background:var(--felt-800);border:1px solid var(--felt-line);
  border-radius:12px;padding:8px 10px;font-size:12.5px}
.sp-srow .dot{width:8px;height:8px;border-radius:50%;flex:none}
.sp-srow.t0 .dot{background:#2F63D8}.sp-srow.t1 .dot{background:#D96F23}
.sp-srow.t2 .dot{background:#7C50E0}.sp-srow.t3 .dot{background:#2E9E6B}
.sp-srow b{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-srow .meta{font-size:11px;color:#8FA898}
.sp-delta{font-weight:700}
.sp-delta.up{color:#7FE0A8}.sp-delta.down{color:#E89880}
.sp-tot{font:800 14px 'Bricolage Grotesque';min-width:44px;text-align:right}
/* the hand: thirteen cards have to overlap to fit a phone */
.sp-cards{display:flex;justify-content:center;padding:10px 0 4px}
/* the sliver a shingled card shows is its index corner — the same 26px a real
   fanned hand leaves you, and the same 26px the deck prints rank and suit in */
/* every card carries a transform, even at rest: a transformed element paints in
   the positioned layer, so if only the hovered one had it, it would jump above
   the cards to its right and swallow their tap strips */
.sp-card{flex:none;width:52px;height:78px;background:none;border:none;border-radius:9px;padding:0;cursor:pointer;
  box-shadow:-2px 3px 8px rgba(0,0,0,.45);transform:translateY(0);transition:transform .12s}
.sp-card+.sp-card{margin-left:-26px}
/* no z-index games: paint order is DOM order, so the strip you can see of a card
   is always the card you hit. Raising the hovered/selected one would bury the
   next card's strip underneath it and make it untappable. */
.sp-card:hover{transform:translateY(-6px)}
.sp-card.sel{transform:translateY(-14px);box-shadow:0 0 0 2.5px #7FE0A8,0 8px 16px rgba(0,0,0,.45)}
.sp-card.no{filter:grayscale(.6);opacity:.5}
.sp-card.no:hover{transform:none}
/* narrow phones: shingle harder so thirteen cards still fit inside #app */
@media (max-width:400px){ .sp-card+.sp-card{margin-left:-32px} }