/* Estate Spades — dark green baize, gold trim, the Estate crown under the trick. Mobile-first: fits a 375×548 iPhone SE. */
#gs-spades small{color:#e7c37a}
.shero{background:radial-gradient(600px 260px at 85% 10%,rgba(242,196,92,.18),transparent 60%),linear-gradient(135deg,#1c2b25,#141c19 60%,#2b2218);border-color:#3e4d3c}
.shero .kicker{color:#e7c37a}
.sdeco{position:relative;width:200px;height:150px;flex:none;--cw:62px;--ch:87px}
.sdeco .c{position:absolute;top:24px}.sdeco .d1{left:20px;transform:rotate(-14deg)}.sdeco .d2{left:66px;top:12px;transform:rotate(-2deg)}.sdeco .d3{left:112px;transform:rotate(12deg)}
@media (max-width:640px){.sdeco{position:absolute;right:-16px;top:10px;transform:scale(.6);transform-origin:top right;opacity:.85}}
.srules{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px}.srules b{color:var(--amber2)}

body.at-spades main{max-width:none;padding:0}
.spv{display:flex;flex-direction:column;height:calc(100dvh - 62px);min-height:480px;max-width:620px;margin:0 auto;width:100%;position:relative;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 42%,#1f5a3f 0%,#163f2d 45%,#0d241a 100%);border-left:1px solid #2c4a3a;border-right:1px solid #2c4a3a}
@media (max-width:899px){body.at-spades header{display:none}.spv{height:100dvh;min-height:0;border:0}}
.spv.offline .stable{filter:grayscale(.6) brightness(.8)}
.sbar{padding:max(4px,env(safe-area-inset-top)) 6px 2px;background:rgba(8,14,11,.7);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:6px}
.sbar .tt{flex:1;min-width:0}.sbar h2{font-size:16px;margin:0}.sbar #sinfo{font-size:12px}
.sbar .iconbtn{min-width:44px;min-height:44px}
.sscore{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 6px}
.steam{display:flex;align-items:baseline;gap:6px;padding:4px 8px;border-radius:10px;background:rgba(6,12,9,.55);border:1px solid rgba(231,195,122,.25);min-width:0;font-size:12px}
.steam.t0{border-color:rgba(242,163,58,.6)}.steam.t1{border-color:rgba(120,190,200,.45)}
.steam .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.steam .tsc{font-size:17px;color:#fff}.steam.t0 .tsc{color:var(--amber2)}.steam .tb{color:var(--muted);white-space:nowrap}.steam .tk{font-weight:800;color:#d8f0e2}
.steam.won{box-shadow:0 0 0 2px var(--amber2)}

.stable{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;justify-items:center;padding:4px 4px 0}
.scrown{position:absolute;left:50%;top:56%;width:120px;transform:translate(-50%,-50%);opacity:.09;pointer-events:none}
.sseat{position:relative;display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:14px;background:rgba(6,12,9,.6);border:1px solid rgba(255,255,255,.08);min-height:44px;max-width:100%;cursor:default}
.sseat.us{border-color:rgba(242,163,58,.35)}.sseat.them{border-color:rgba(120,190,200,.3)}
.sseat.turn{box-shadow:0 0 0 2px var(--amber2),0 0 18px rgba(255,198,107,.35)}
.sseat.n{grid-column:1/-1;grid-row:1}.sseat.w{grid-column:1;grid-row:2;justify-self:start}.sseat.e{grid-column:3;grid-row:2;justify-self:end}
.sseat.w,.sseat.e{flex-direction:column;text-align:center;padding:6px 4px;gap:3px;width:min(96px,100%)}
.sava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:#11161a;border:2px solid #3a4651;display:grid;place-items:center}
.sava img,.sava svg{width:100%;height:100%}
.smeta{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.smeta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stags{display:flex;gap:3px;flex-wrap:wrap;justify-content:inherit}.sseat.w .stags,.sseat.e .stags{justify-content:center}
.stags i{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.05em;padding:1px 4px;border-radius:5px}
.tagpart{background:#f2a33a;color:#1a1208}.tagdeal{background:#fff;color:#111;border-radius:50%!important;width:15px;text-align:center;padding:1px 0!important}
.sbk{font-size:11.5px;color:#d8e6dc;white-space:nowrap}.sbk .bk{color:#fff;font-weight:800}
.nilm{font-style:normal;font-weight:900;color:#1a1208;background:linear-gradient(#ffd98a,#e7b851);padding:0 5px;border-radius:5px;font-size:10.5px}.nilm.broke{background:#7e221b;color:#ffd6d0}
.sseat .lbubble{left:50%;transform:translateX(-50%);white-space:nowrap;max-width:200px;white-space:normal;width:max-content}
.sseat.n .lbubble{bottom:auto;top:calc(100% + 4px)}

.strick{grid-column:2;grid-row:2;position:relative;width:150px;height:min(170px,100%);min-height:140px;--cw:44px;--ch:62px}
.strick .c{position:absolute;transition:transform .35s ease,opacity .35s}
.strick .ps{left:53px;bottom:0}.strick .pn{left:53px;top:0}.strick .pw{left:0;top:calc(50% - 31px)}.strick .pe{right:0;top:calc(50% - 31px)}
.strick .c.win{box-shadow:0 0 0 3px var(--amber2),0 6px 14px rgba(0,0,0,.5);z-index:3}
.strick.won .c{opacity:.75}.strick.won .c.win{opacity:1}
.sdealer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:11.5px;color:#cfe3d6}
.sdealer .mini-ava{width:40px;height:40px;border-color:#c9a24a}

.sme{display:flex;align-items:center;gap:6px;padding:4px 6px 2px;min-height:48px}
.sme .sseat{flex:none;max-width:56%}.shint{flex:1;min-width:0;font-size:13px;color:#e8f2ec;text-align:right}.shint b{color:var(--amber2)}

.shand{padding:2px 4px calc(6px + var(--safe-b));--cw:var(--hcw,52px);--ch:calc(var(--cw)*1.4);touch-action:manipulation}
.shrow{display:flex;justify-content:center}
.shrow .hc+.hc{margin-left:var(--ov,0px)}
.shand.r2 .shrow+.shrow{margin-top:calc(var(--ch)*-.36)}
.hc{all:unset;position:relative;display:block;transform:translateY(var(--y)) rotate(var(--a));transform-origin:50% 120%;transition:transform .15s;cursor:pointer;min-width:24px}
.hc .c{pointer-events:none}
.hc.dim .c{filter:brightness(.55) saturate(.6)}
.hc.can .c{box-shadow:0 0 0 2px var(--amber2),0 6px 14px rgba(0,0,0,.45)}
.hc.can:active,.hc.played{transform:translateY(calc(var(--y) - 10px)) rotate(var(--a))}
.hc:focus-visible .c{outline:3px solid #fff;outline-offset:2px}

.sbid{position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow:auto;z-index:8;display:flex;justify-content:center;padding:0 6px 4px}
.sbid[hidden]{display:none}
.sbidc{width:100%;max-width:420px;background:rgba(10,16,13,.96);border:1px solid #6b5428;border-radius:16px;padding:8px;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.sbh{display:flex;flex-direction:column;margin:0 2px 6px}.sbh b{font-size:15px}
.sbgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.sbgrid button{min-height:44px;border-radius:10px;font-weight:900;font-size:17px;padding:0;background:#18211c;border:1px solid #2f4238;color:#fff}
.sbgrid button.on{background:var(--amber);color:#1a1208;border-color:var(--amber2)}
.sbgrid .nilb{background:linear-gradient(#3b2d12,#2a210e);border-color:#c9a24a;color:#ffd98a;font-size:15px}
.sbgrid .nilb.on{background:linear-gradient(#ffd98a,#e7b851);color:#1a1208}
.sbgo{width:100%;min-height:46px;font-size:16px}

.sover{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));background:rgba(5,9,7,.72);overflow:auto}
.sover[hidden]{display:none}
.scard{width:100%;max-width:420px;background:linear-gradient(160deg,#1b241f,#121815);border:1px solid #6b5428;border-radius:18px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.scard h2{margin:0 0 6px;font-size:21px}.scard .kicker{margin:0;color:#e7c37a;font-size:12px}
.scard .fin{font-size:26px;margin:0 0 6px;text-align:center}.scard .fin b:first-child{color:var(--amber2)}
.hsum{margin:6px 0;padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07)}
.hsum.t0{border-color:rgba(242,163,58,.4)}.hsum h4{margin:0 0 2px;font-size:13px;color:var(--muted)}
.hsum table{width:100%;border-collapse:collapse;font-size:13px}.hsum td{padding:1px 0}.hsum td:last-child{text-align:right;font-weight:800}
.hsum .neg{color:#ff9a8f}.hsum .tot td{border-top:1px solid rgba(255,255,255,.12);padding-top:3px}.hsum .sc td{color:var(--muted)}.hsum .sc b{color:#fff;font-size:15px}
.scard .row{display:flex;gap:8px;align-items:center;margin-top:8px}.scard .row .grow{flex:1;min-height:46px}
.sside{z-index:40}
@media (min-width:900px){.sside{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:62vh;transform:translateY(105%);border-radius:18px 18px 0 0;border-top:1px solid var(--line);background:#12171b;max-width:620px;margin:0 auto}.sside.open{transform:none}}
/* short phones (iPhone SE 375×548 in Safari): tighter everything so nothing falls below the fold */
@media (max-height:600px){
  .sbar h2{font-size:14.5px}.sbar #sinfo{font-size:11px}
  .sscore{padding:2px 6px}.steam{padding:2px 7px}.steam .tsc{font-size:15px}
  .sava{width:30px;height:30px}.sseat{min-height:40px;padding:2px 6px 2px 3px}
  .strick{min-height:130px;--cw:40px;--ch:56px;width:136px}.strick .ps,.strick .pn{left:48px}.strick .pw,.strick .pe{top:calc(50% - 28px)}
  .sme{min-height:44px;padding:2px 6px 0}
  .sbgrid button{min-height:44px}.sbh{margin-bottom:4px}.sbidc{padding:6px}
}
@media (prefers-reduced-motion:reduce){.hc,.strick .c{transition:none}}
.sseat.e .lbubble{left:auto;right:0;transform:none}.sseat.w .lbubble{left:0;transform:none}.sseat.s .lbubble{left:0;transform:none}
.tagowner,.ownerpill{background:linear-gradient(#ffe7a8,#c9a24a);color:#1a1208}
.ownerpill{display:inline-block;font-size:9px;font-weight:900;letter-spacing:.06em;padding:1px 4px;border-radius:5px;margin-right:4px;vertical-align:middle}