body.spades-screen{background:#278137;color:white;background-image:radial-gradient(ellipse at 50% 40%,#4aab4a55,transparent 80%),linear-gradient(45deg,#ffffff02 25%,transparent 25%,transparent 75%,#ffffff02 75%);background-size:100% 100%,12px 12px}
.sp-table{--cw:clamp(60px,16vw,90px);--ch:calc(var(--cw)*1.65);max-width:680px;margin:auto;min-height:100svh;display:flex;flex-direction:column;font-family:Arial,sans-serif;overflow:hidden;padding-bottom:env(safe-area-inset-bottom);touch-action:manipulation}
.sp-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(28px,5svh,48px) 10px 10px}
.sp-round{background:#fff;color:#c985a6;border-radius:50%;width:clamp(50px,13vw,78px);height:clamp(50px,13vw,78px);font-size:56px;line-height:.8;display:grid;place-items:center;padding:0;flex-shrink:0}.sp-stats{font-size:34px}
.sp-score{flex:1;text-align:center;font-weight:900;max-width:280px}.sp-score>small{display:block;margin:0 20%;background:#103b1c;border-radius:4px 4px 0 0;font-size:10px;padding:3px}.sp-score>div{display:flex;align-items:center;justify-content:space-around;background:#124321;border-radius:9px;height:40px}.sp-score b{font-size:24px}.sp-score strong{font-size:23px;line-height:.95}.sp-score strong small{display:block;font-size:10px}.sp-team-ink{color:#ff655f}.sp-rival-ink{color:#00d6ed}
.sp-arena{position:relative;flex:1;min-height:440px;height:calc(100svh - 270px);max-height:660px}.sp-top-bids{position:absolute;left:12px;right:12px;top:26px;display:flex;justify-content:space-between;z-index:2}.sp-bidbox{width:76px;text-align:center;border-radius:12px;background:#184d32dd;overflow:hidden}.sp-bidbox b{display:block;background:var(--team);padding:4px 2px;font-size:13px}.sp-bidbox strong{font-size:24px;line-height:1.3}.sp-team{--team:#ff655f}.sp-rival{--team:#00cde9}
.sp-felt{position:absolute;inset:126px 11% 20px;background:#4fac4960;border:6px solid #6ac85630;border-radius:45px;display:grid;place-items:center}.sp-watermark{font-size:clamp(170px,50vw,300px);color:#23773360;line-height:1}
.sp-deck{position:absolute;pointer-events:none}.sp-back{position:absolute;width:64px;height:88px;background:repeating-linear-gradient(45deg,#193a54,#193a54 3px,#1b3e56 3px,#1b3e56 6px);border:2px solid #091c2d;border-radius:9px;box-shadow:inset 0 0 0 3px #44869c,0 1px 2px #183729}
.sp-deck-top{top:0;left:50%;width:136px;height:88px;transform:translateX(-50%)}.sp-deck-top .sp-back{left:calc(var(--i)*6px);z-index:calc(20 - var(--i))}.sp-deck-left,.sp-deck-right{top:48%;width:64px;height:152px;transform:translateY(-30%)}.sp-deck-left{left:-35px}.sp-deck-right{right:-35px}.sp-deck-left .sp-back,.sp-deck-right .sp-back{top:calc(var(--i)*5px)}
.sp-seat{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:3;font-weight:900}.sp-seat small{background:#405a70;color:white;border-radius:9px;padding:2px 5px;font-size:16px;line-height:1}.sp-seat b{background:var(--team);border-radius:20px;padding:5px 12px;font-size:18px;line-height:1}.sp-seat-top{top:98px;left:50%;transform:translateX(-50%)}.sp-seat-bottom{bottom:5px;left:50%;transform:translateX(-50%)}.sp-seat-left{left:34px;top:57%}.sp-seat-right{right:34px;top:57%}.sp-seat-left b,.sp-seat-right b{writing-mode:vertical-rl;padding:9px 5px}.sp-seat-left b{transform:rotate(180deg)}.sp-active b{box-shadow:0 0 0 3px #fff7,0 0 16px #fff4}
.sp-trick{position:absolute;left:50%;top:58%;width:210px;height:190px;transform:translate(-50%,-50%);z-index:2}.sp-played{position:absolute;width:var(--cw);height:var(--ch)}.sp-played-0{bottom:0;left:50%;transform:translateX(-50%)}.sp-played-2{top:0;left:50%;transform:translateX(-50%)}.sp-played-1{left:0;top:40px}.sp-played-3{right:0;top:40px}
.sp-card{position:absolute;width:var(--cw);height:var(--ch);background:#fff;border:2px solid #091c2d;border-radius:9px;padding:0;color:#001d31;overflow:hidden;box-shadow:0 1px 3px #132a20;user-select:none}.sp-red{color:#b8000c}.sp-corner{position:absolute;left:3px;top:1px;display:flex;flex-direction:column;align-items:flex-start;line-height:1;font-size:calc(var(--cw)*.42);font-weight:900;z-index:1}.sp-corner b{font-weight:900}.sp-corner>span{font-family:Arial,'Segoe UI Symbol',sans-serif;font-size:calc(var(--cw)*.40)}.sp-pip{position:absolute;bottom:8px;left:10%;right:0;text-align:center;font-family:Arial,'Segoe UI Symbol',sans-serif;font-size:calc(var(--cw)*1.05);line-height:1}.sp-court{position:absolute;top:calc(var(--cw)*.8);bottom:4px;left:3px;width:calc(100% - 6px);height:calc(var(--ch) - var(--cw)*.8 - 6px)}
.sp-status{text-align:center;min-height:24px;font-size:13px;font-weight:bold;padding:3px 10px}.sp-hand{position:relative;height:calc(var(--ch) + 12px);margin:12px 0 0;width:100%;flex-shrink:0}.sp-hand .sp-card{top:0;left:calc(var(--i)*(100% - var(--cw))/max(1,var(--count) - 1));border-radius:10px}.sp-hand .sp-card:disabled{opacity:1;filter:brightness(.58)}.sp-hand .sp-card[data-hint]{outline:3px solid #ffdc47;outline-offset:-3px}.sp-card:active{transform:translateY(-8px)}.sp-played .sp-card:disabled{opacity:1}
.sp-footer{height:45px;display:flex;justify-content:center;align-items:center;flex-shrink:0}.sp-hint{color:#def0d2;background:#1b632c;padding:7px 22px;border-radius:15px;font-size:12px}.sp-next,.sp-place-bid{background:#25b837;color:white;border-radius:12px;padding:12px 24px;font-weight:900;font-size:19px}
.sp-bid-shade{position:absolute;inset:-8px 0 -24px;background:#081311c9;z-index:10;display:grid;place-items:center}.sp-bid-sheet{background:#fff0c9;border-radius:28px;color:#233d2e;width:calc(100% - 64px);max-width:420px;padding:18px 14px;text-align:center;box-shadow:0 6px 25px #092d2933}.sp-bid-sheet h1{font-family:Arial,sans-serif;font-size:30px;font-weight:900;margin:0 0 18px}.sp-bid-sheet h2{font-family:Arial,sans-serif;font-size:21px;font-weight:900;margin:0 0 9px}.sp-bid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#285039;padding:10px;border-radius:10px}.sp-bid-grid button{background:#fff;color:#292e2b;border-radius:8px;height:45px;box-shadow:0 3px 0 #c1d1c8;font-size:27px;font-weight:900;padding:0}.sp-bid-grid button:nth-last-child(2){grid-column:2}.sp-bid-grid button.chosen{background:#24b93a;color:#fff;box-shadow:0 3px 0 #179a2b}.sp-place-bid{margin-top:18px;min-height:52px;font-size:23px}.sp-place-bid:disabled{opacity:.55}.spades-screen #toast{background:#133e24;color:white}
@media(min-width:750px){.sp-arena{min-height:500px}.sp-top-bids{left:35px;right:35px}.sp-bidbox{width:100px}.sp-bid-sheet{padding:22px}.sp-bid-grid button{height:55px}.sp-hand{margin-top:12px}}

.sp-stats svg{width:32px;height:32px}
.sp-hand .sp-corner{font-size:min(calc(var(--cw)*.4),calc((min(100vw,680px) - var(--cw))/max(1,var(--count) - 1)*.66))}
.sp-hand .sp-corner>span{font-size:inherit}
.sp-table[data-stage="bid"] .sp-hand .sp-card:disabled{filter:none}

.sp-hand .sp-corner b{font-size:min(calc(var(--cw)*.4),calc((min(100vw,680px) - var(--cw))/max(1,var(--count) - 1)*.58))}

.sp-trick{width:calc(var(--cw)*3 + 16px);height:calc(var(--ch)*2 + 12px)}
.sp-played-1,.sp-played-3{top:50%;transform:translateY(-50%)}

/* Keep each suit clear of the rank and give the main symbol more white space. */
.sp-pip{font-size:calc(var(--cw)*.64);left:0;right:0;bottom:10px}.sp-corner>span{font-size:calc(var(--cw)*.25)}.sp-hand .sp-corner>span{font-size:min(calc(var(--cw)*.25),calc((min(100vw,680px) - var(--cw))/max(1,var(--count) - 1)*.55))}.sp-auto{font-size:12px;font-weight:700;color:#cce9c7}