.g-spades{--cw:56px;--ch:78px;--fs:16px;--card-face:#fbfaf6;--card-ink:#1d2320;--card-red:#c0392b;padding:6px 4px 8px;border-radius:8px;background:var(--accent-soft);outline-offset:2px;touch-action:manipulation}.g-spades .sp-top{display:flex;justify-content:center;margin-bottom:4px}.g-spades .sp-mid{display:grid;grid-template-columns:minmax(58px,1fr)auto minmax(58px,1fr);align-items:center;gap:4px}.g-spades .sp-mid .sp-seat--1{justify-self:start}.g-spades .sp-mid .sp-seat--3{justify-self:end}.g-spades .sp-seat,.g-spades .sp-you{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 6px;min-width:58px;border-radius:8px;background:var(--surface);color:var(--ink);border:2px solid transparent;font-size:.82rem;line-height:1.25;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.12)}.g-spades .sp-top .sp-seat{flex-direction:row;gap:10px;padding:3px 12px;flex-wrap:wrap;justify-content:center}.g-spades .sp-seat.is-turn,.g-spades .sp-you.is-turn{border-color:var(--focus)}.g-spades .sp-name{font-weight:700;font-size:.9rem}.g-spades .sp-dealer{display:inline-grid;place-items:center;width:1.3em;height:1.3em;margin-left:.4em;border-radius:50%;background:var(--gold);color:#1d2320;font-size:.72rem;font-weight:700}.g-spades .sp-line b{font-family:var(--mono)}.g-spades .sp-back{display:inline-grid;place-items:center;min-width:26px;height:36px;margin-top:3px;padding:0 4px;border-radius:4px;border:2px solid #f3f1ea;color:#fff;font-size:.78rem;font-weight:700;background:repeating-linear-gradient(45deg,#2c6b8c 0 3px,#245a76 3px 6px);text-shadow:0 1px 1px rgba(0,0,0,.5)}.g-spades .sp-top .sp-back{height:26px;margin-top:0}.g-spades .sp-you{flex-direction:row;justify-content:center;gap:12px;margin:4px auto 6px;width:fit-content;max-width:100%;padding:3px 14px}.g-spades .sp-trick{position:relative;justify-self:center}.g-spades .sp-trick .sp-card{position:absolute}.g-spades .sp-trick .slot-2{left:50%;top:0;margin-left:calc(var(--cw)/-2)}.g-spades .sp-trick .slot-0{left:50%;bottom:0;margin-left:calc(var(--cw)/-2)}.g-spades .sp-trick .slot-1{left:0;top:50%;margin-top:calc(var(--ch)/-2)}.g-spades .sp-trick .slot-3{right:0;top:50%;margin-top:calc(var(--ch)/-2)}.g-spades .sp-trick .slot-0,.g-spades .sp-trick .slot-3{z-index:2}.g-spades .sp-trick.is-last .sp-card{opacity:.8}.g-spades .sp-trick .sp-card.is-winner{opacity:1;box-shadow:0 0 0 3px var(--gold),0 1px 1px rgba(0,0,0,.25);z-index:5}.g-spades .sp-lasttag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;max-width:92%;padding:2px 8px;border-radius:999px;background:rgba(20,24,22,.78);color:#fff;font-size:.7rem;text-align:center;pointer-events:none}.g-spades .sp-actions{min-height:44px;margin:8px 0 2px;text-align:center}.g-spades .sp-actions p{margin:0}.g-spades .sp-prompt{font-weight:600;color:var(--ink);font-size:.95rem}.g-spades .sp-sub{color:var(--ink-2);font-size:.82rem;margin:2px 0 0}.g-spades .sp-brk{display:inline-block;margin-left:.3em;padding:0 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.78rem;font-weight:600}.g-spades .sp-brk.is-on{background:var(--ink);color:var(--surface)}.g-spades .sp-bids{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:460px;margin:6px auto 2px}.g-spades .sp-bid{font:inherit;font-weight:700;min-height:42px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}.g-spades .sp-bid:hover{background:var(--surface-2)}.g-spades .sp-bid--nil{background:var(--ink);color:var(--surface);border-color:var(--ink)}.g-spades .sp-bid.is-cursor{outline:3px solid var(--focus);outline-offset:1px}.g-spades .sp-bid.is-hint{box-shadow:0 0 0 3px var(--gold)}.g-spades .sp-endbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.g-spades .sp-card{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .1);border:1px solid #8e9791;font-size:var(--fs);font-weight:700;line-height:1;color:var(--card-ink);background:var(--card-face);box-shadow:0 1px 1px rgba(0,0,0,.25);padding:0;font-family:inherit;overflow:hidden;display:block;text-align:left}.g-spades .sp-card.red{color:var(--card-red)}.g-spades .sp-ix{position:absolute;left:.18em;top:.16em;white-space:nowrap;letter-spacing:-.04em}.g-spades .sp-ix i{font-style:normal;margin-left:.04em}.g-spades .sp-card .sp-pip{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:calc(var(--cw) * .62);line-height:1;display:block}.g-spades .sp-hand{position:relative}.g-spades .sp-row{position:relative;height:var(--ch)}.g-spades .sp-row+.sp-row{margin-top:calc(var(--ch) * -.3)}.g-spades .sp-hand .sp-card{position:absolute;top:0;cursor:pointer;transition:transform .1s}.g-spades .sp-hand .sp-card.is-legal{box-shadow:0 0 0 2px var(--focus),0 1px 1px rgba(0,0,0,.25);transform:translateY(-5px)}.g-spades .sp-hand .sp-card.is-dim{filter:brightness(.68)saturate(.55);cursor:not-allowed}.g-spades .sp-hand .sp-card.is-cursor{outline:3px solid var(--gold);outline-offset:1px;z-index:30!important}.g-spades .sp-hand .sp-card.is-hint{box-shadow:0 0 0 3px var(--gold);transform:translateY(-9px);z-index:31!important}.g-spades .is-shake{animation:sp-shake .35s}@keyframes sp-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}.g-spades .sp-scorewrap{margin-top:10px;padding:8px;border-radius:8px;background:var(--surface);color:var(--ink)}.g-spades .sp-scorewrap h3{margin:0 0 4px;font-size:.9rem}.g-spades .sp-tablescroll{max-height:11.5em;overflow:auto}.g-spades .sp-table{width:100%;border-collapse:collapse;font-size:.82rem}.g-spades .sp-table th,.g-spades .sp-table td{border:1px solid var(--line);padding:3px 6px;text-align:center;vertical-align:top}.g-spades .sp-table thead th{background:var(--surface-2);position:sticky;top:0}.g-spades .sp-table td b{display:block;font-family:var(--mono)}.g-spades .sp-table td small{display:block;color:var(--muted);font-size:.72rem;line-height:1.25}.g-spades .sp-table tfoot th,.g-spades .sp-table tfoot td{background:var(--surface-2)}@media(prefers-reduced-motion:reduce){.g-spades .sp-hand .sp-card,.g-spades .is-shake{transition:none;animation:none}}