:root{--ink:#f7fbf8;--gold:#f6c768;--focus:#ffe26d;--card-w:clamp(42px,6.1vw,72px);--card-h:calc(var(--card-w)*1.42)}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 0,#293758,#070b16 65%);font-family:Poppins,system-ui,sans-serif;color:var(--ink)}button{font:inherit}.skip-link{position:fixed;left:1rem;top:-80px;z-index:10000;background:#fff;color:#111;padding:.8rem;border-radius:.5rem}.skip-link:focus{top:1rem}.spades-app{height:calc(100vh - 66px);padding:16px;display:grid;place-items:center}.game-shell{isolation:isolate;position:relative;width:min(1180px,100%);height:min(790px,100%);min-height:580px;border:10px solid #141920;border-radius:72px;background:radial-gradient(ellipse at 50% 25%,#25845b,#0c5b3d 48%,#043321);box-shadow:0 0 0 5px #a86430,0 0 0 9px #352010,0 18px 0 #080b10,0 30px 55px #000b,inset 0 0 0 5px #e4aa64,inset 0 0 0 12px #26302e,inset 0 0 75px #001b12;overflow:hidden}.game-shell:before{content:"MIRRAH";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:italic 900 clamp(45px,10vw,125px) 'Playfair Display',serif;color:#ffffff0c;pointer-events:none}.game-shell:after{content:"";position:absolute;inset:22px;border:2px solid #ffffff1c;border-radius:48px;pointer-events:none}.match-strip{position:absolute;z-index:5;left:25px;top:20px;display:flex;align-items:center;gap:1rem;background:#061b17df;border:1px solid #ffffff32;border-radius:16px;padding:.45rem .65rem;box-shadow:0 6px 16px #0004}.match-strip>div{display:grid}.eyebrow{font-size:.62rem;letter-spacing:.12em;font-weight:900;color:#c8ddcf}.hand-label{font-size:.75rem;color:#d8e9df}.icon-button{border:0;border-radius:12px;background:#fff;color:#14211b;min-height:44px;padding:.45rem .7rem;font-weight:900;cursor:pointer}.icon-button:focus-visible,.playing-card:focus-visible,.bid-button:focus-visible,.dialog button:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.scoreboard{position:absolute;z-index:4;right:28px;top:20px;display:flex;gap:.45rem}.score-team{min-width:118px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 .55rem;background:#071e19ed;border:2px solid #ffffff29;border-radius:16px;padding:.45rem .65rem}.score-team.us{border-color:#72e6aa99}.score-team.them{border-color:#8fb9ff88}.score-team strong{grid-row:1/3;grid-column:2;font-size:1.55rem}.score-team small{font-size:.65rem;color:#c8ded2}.team-name{font-size:.7rem;font-weight:900}.seat{position:absolute;z-index:3;text-align:center}.seat.north{left:50%;top:7%;transform:translateX(-50%)}.seat.west{left:3%;top:37%}.seat.east{right:3%;top:37%}.seat-name{display:inline-flex;align-items:center;gap:.28rem;background:#071e19eb;border:2px solid #ffffff2d;border-radius:999px;padding:.35rem .65rem;font-size:.8rem}.seat-name span{font-size:.55rem;color:#9ff1bd}.seat-stats{margin:.25rem auto 0;color:#d5eadf;font-size:.68rem;font-weight:800}.seat.active .seat-name{outline:4px solid var(--gold);box-shadow:0 0 20px #ffd86b99}.card-stack{width:38px;height:72px;margin:.25rem auto;position:relative}.card-stack i{position:absolute;left:4px;width:30px;height:44px;border:1px solid #fff;border-radius:5px;background:repeating-linear-gradient(45deg,#143e78 0 5px,#3472bd 5px 10px);transform:translateY(calc(var(--i)*2px))}.table-center{position:absolute;z-index:3;left:50%;top:28%;transform:translateX(-50%);display:grid;justify-items:center}.turn-banner{min-height:30px;background:#071e19dc;border-radius:999px;padding:.35rem .8rem;font-size:.78rem;font-weight:900}.broken-badge{margin-top:.3rem;color:#fff;background:#573490;border-radius:999px;padding:.2rem .55rem;font-size:.65rem;font-weight:900}.trick{margin-top:.45rem;width:184px;height:212px;display:grid;grid-template-columns:repeat(2,86px);gap:5px 12px}.trick-slot{display:grid;justify-items:center;align-content:start;font-size:.58rem;font-weight:900;color:#dbeee4}.table-card,.empty-card{width:62px;height:88px;border-radius:8px}.table-card{position:relative;background:#fff;color:#151515;border:2px solid #fff;box-shadow:0 5px 12px #0007}.table-card.red{color:#c71938}.table-card.winner{outline:5px solid var(--gold);transform:translateY(-5px)}.empty-card{border:2px dashed #ffffff55;background:#ffffff09}.corner{position:absolute;left:5px;top:4px;font-weight:900;line-height:.95;text-align:center}.suit-big{position:absolute;inset:30% 0 auto;text-align:center;font-size:1.75rem}.bid-panel{position:absolute;z-index:8;left:50%;top:24%;transform:translateX(-50%);width:min(650px,80%);text-align:center;background:#071e19f5;border:2px solid #ffffff36;border-radius:22px;padding:1rem;box-shadow:0 18px 40px #0009}.bid-panel h1{font:900 clamp(1.05rem,2.6vw,1.55rem) 'Playfair Display',serif;margin:.2rem}.bid-hint{font-size:.72rem;margin:.25rem;color:#d6eadf}.bid-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.65rem}.bid-button{min-width:46px;height:46px;border-radius:14px;border:2px solid #fff;background:#2467d4;color:#fff;font-weight:900;cursor:pointer}.bid-button.nil{background:#793bc2}.bid-button:hover{transform:translateY(-2px)}.player-zone{position:absolute;z-index:6;left:3%;right:3%;bottom:2.5%;display:grid;justify-items:center}.player-summary{background:#071e19ef;border:2px solid #ffffff31;border-radius:999px;padding:.3rem .75rem;display:flex;gap:.35rem;align-items:center;font-size:.72rem}.player-summary span:last-child{color:#c6dfd2}.hand{display:flex;justify-content:center;align-items:end;width:100%;height:calc(var(--card-h) + 15px);margin-top:.25rem;padding:4px 10px}.playing-card{position:relative;flex:0 0 var(--card-w);width:var(--card-w);height:var(--card-h);margin-left:clamp(-19px,-1.2vw,-5px);border:2px solid #fff;border-radius:8px;background:#fff;color:#111;box-shadow:0 4px 10px #0006;cursor:pointer;transition:transform .15s,opacity .15s}.playing-card:first-child{margin-left:0}.playing-card.red{color:#c71938}.playing-card:hover:not(:disabled),.playing-card:focus-visible:not(:disabled){transform:translateY(-12px);z-index:5}.playing-card:disabled{opacity:.48;cursor:not-allowed}.playing-card .suit-big{font-size:clamp(1.35rem,3vw,2rem)}.sr-live{position:fixed;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.dialog-layer{position:fixed;z-index:10020;inset:0;background:#030713c9;display:grid;place-items:center;padding:1rem}.dialog-layer[hidden]{display:none}.dialog{width:min(620px,100%);max-height:92vh;overflow:auto;background:#fff;color:#132119;border-radius:24px;padding:1.4rem;box-shadow:0 25px 80px #000a}.dialog h2{font:900 1.8rem 'Playfair Display',serif;margin:.2rem 0}.dialog p{color:#435148}.dialog-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.dialog button{border:0;border-radius:12px;padding:.75rem 1rem;min-height:46px;background:#126a48;color:#fff;font-weight:900;cursor:pointer}.dialog button.secondary{background:#e7eee9;color:#173d2c}.dialog button.danger{background:#a92e42}.score-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:.8rem 0}.score-table th,.score-table td{padding:.45rem;border-bottom:1px solid #d8e2dc;text-align:center}.score-table th:first-child,.score-table td:first-child{text-align:left}.rules-list{padding-left:1.2rem}.rules-list li{margin:.45rem 0}
@media(max-width:700px){:root{--card-w:calc((100vw - 42px)/8);--card-h:calc(var(--card-w)*1.5)}body{overflow:auto}.spades-app{padding:8px;height:calc(100dvh - 62px);min-height:650px}.game-shell{height:100%;min-height:640px;border-width:7px;border-radius:42px}.game-shell:after{inset:12px;border-radius:29px}.match-strip{left:14px;top:13px}.match-strip .hand-label{display:none}.scoreboard{right:14px;top:72px;display:grid;gap:.25rem}.score-team{min-width:100px;padding:.3rem .45rem}.score-team strong{font-size:1.15rem}.seat.north{top:9%}.seat.west,.seat.east{top:35%}.seat.west{left:2%}.seat.east{right:2%}.seat-name{font-size:.68rem;padding:.28rem .42rem}.card-stack{transform:scale(.8);transform-origin:top}.table-center{top:26%}.trick{width:140px;height:188px;grid-template-columns:repeat(2,65px);gap:4px 8px}.table-card,.empty-card{width:50px;height:71px}.suit-big{font-size:1.35rem}.bid-panel{top:21%;width:74%;padding:.7rem}.bid-buttons{gap:.3rem}.bid-button{min-width:40px;height:40px}.player-zone{left:0;right:0;bottom:2%}.hand{padding:3px 8px;overflow:visible}.playing-card{margin-left:calc(var(--card-w)*-.38);border-radius:6px}.playing-card:first-child{margin-left:0}.corner{font-size:.68rem}.player-summary{font-size:.65rem}}
@media(max-width:430px){.match-strip .eyebrow,.match-strip>div:first-child{display:none}.match-strip{padding:.3rem}.scoreboard{top:13px;right:12px;display:flex}.score-team{min-width:91px}.score-team small{display:none}.seat.north{top:12%}.table-center{top:28%}.bid-panel{top:22%;width:82%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.button-link{border-radius:12px;padding:.75rem 1rem;min-height:46px;background:#126a48;color:#fff;font-weight:900;text-decoration:none;display:inline-flex;align-items:center}.setup{display:grid;gap:.8rem;margin:1rem 0}.setup label{display:grid;gap:.25rem;font-weight:800}.setup select{font:inherit;padding:.65rem;border:2px solid #9db2a6;border-radius:10px}
#arcInstructions{display:none!important}

/* Bold casino-room treatment: layered rails, raised controls, and real depth. */
body{background:radial-gradient(ellipse at 50% -10%,#465683 0,#141b31 38%,#05070d 78%)}
.spades-app{padding:22px 18px 36px;perspective:1500px}
.game-shell{border-width:14px;border-radius:86px;background:radial-gradient(ellipse at 48% 12%,rgba(126,255,191,.32),transparent 34%),linear-gradient(112deg,transparent 12%,rgba(255,255,255,.09) 28%,transparent 44%),repeating-linear-gradient(100deg,transparent 0 8px,rgba(255,255,255,.018) 9px 10px),radial-gradient(ellipse at 50% 43%,#178557 0,#0b603f 48%,#03301e 100%);box-shadow:0 0 0 5px #f2b563,0 0 0 11px #9c5426,0 0 0 17px #3b1d0d,0 20px 0 #090c12,0 31px 0 #030408,0 48px 70px #000d,inset 0 0 0 5px #ffd99b,inset 0 0 0 12px #39413d,inset 0 0 0 18px #101711,inset 0 18px 30px rgba(255,255,255,.16),inset 0 -45px 75px #00150dcc;transform:rotateX(1.2deg)}
.game-shell:before{top:51%;font-size:clamp(52px,11vw,135px);letter-spacing:-.06em;color:rgba(226,255,237,.07);text-shadow:0 3px 0 #001d13,0 -1px 0 #ffffff20}
.game-shell:after{inset:25px;border-width:3px;border-color:#ffffff20;border-radius:55px;box-shadow:inset 0 0 35px #001c12aa,0 0 12px #fff1}
.match-strip{left:31px;top:26px;background:linear-gradient(180deg,#173f35f5,#041a14f5);border:2px solid #ffffff3d;border-radius:18px;padding:.5rem .7rem;box-shadow:0 8px 0 #020b08,0 13px 24px #0008,inset 0 1px 0 #ffffff38}
.score-team{min-width:124px;background:linear-gradient(155deg,#173d33,#031712);border-color:#ffffff35;border-radius:18px;padding:.5rem .7rem;box-shadow:0 7px 0 #020a08,0 12px 23px #0008,inset 0 1px 0 #ffffff3b}.score-team.us{border-color:#65f0abbb}.score-team.them{border-color:#70aaffbb}
.seat-name{background:linear-gradient(180deg,#183f34,#031812);border-color:#ffffff42;padding:.4rem .72rem;box-shadow:0 5px 0 #020b08,0 9px 18px #0008,inset 0 1px 0 #ffffff2e}
.seat.active .seat-name{outline-color:#ffd15c;box-shadow:0 5px 0 #8f5b00,0 0 30px #ffd45cbf,inset 0 1px 0 #fff8}
.turn-banner{min-height:32px;background:linear-gradient(180deg,#173e34,#031711);border:2px solid #ffffff2f;box-shadow:0 5px 0 #020906,0 10px 18px #0007}
.table-card{background:linear-gradient(145deg,#fff,#edf0ec);box-shadow:0 7px 0 #b9beb9,0 12px 18px #0009;transform:rotate(-1deg)}
.bid-panel{background:linear-gradient(155deg,#123a31fa,#020f0bfa);border:3px solid #e0b35e;box-shadow:0 9px 0 #4b2c0d,0 18px 0 #07100c,0 28px 48px #000c,inset 0 1px 0 #fff5}
.playing-card{background:linear-gradient(145deg,#fff,#e7ebe7);box-shadow:0 6px 0 #aeb5af,0 11px 18px #0009}
.playing-card:hover:not(:disabled),.playing-card:focus-visible:not(:disabled){transform:translateY(-16px) rotate(-1deg) scale(1.05);box-shadow:0 7px 0 #c18a35,0 16px 26px #000b,0 0 0 4px #ffd15c}
@media(max-width:700px){.spades-app{padding:10px 8px 23px}.game-shell{border-width:9px;border-radius:48px;transform:none;box-shadow:0 0 0 3px #f2b563,0 0 0 7px #8d4b23,0 0 0 11px #2d160b,0 13px 0 #080b10,0 22px 32px #000c,inset 0 0 0 3px #ffd99b,inset 0 0 0 8px #303a35,inset 0 0 0 12px #0e1611,inset 0 12px 22px #ffffff1c,inset 0 -35px 55px #00150dcc}.game-shell:after{inset:14px;border-radius:32px}.match-strip{left:17px;top:16px;box-shadow:0 5px 0 #020b08,0 9px 15px #0008}}

/* Reserve the complete top row for match controls and scores. */
.seat.north{top:16%}

/* One unmistakable seat for every played card. */
.trick{position:relative;display:block;width:270px;height:225px;margin-top:.35rem}.trick-slot{position:absolute;width:72px;display:grid;justify-items:center;gap:3px;font-size:.6rem}.trick-slot.player-0{left:99px;bottom:0}.trick-slot.player-1{left:0;top:72px}.trick-slot.player-2{left:99px;top:0}.trick-slot.player-3{right:0;top:72px}.trick-slot span:last-child{display:block;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#061a15e8;border:1px solid #ffffff38;border-radius:999px;padding:2px 6px;color:#fff;box-shadow:0 3px 7px #0008}.trick-slot .table-card,.trick-slot .empty-card{grid-row:1}.trick-slot span:last-child{grid-row:2}
/* Clean card faces: no fake second card under every card. */
.hand{gap:3px}.playing-card{margin-left:0;box-shadow:0 7px 15px #0009}.playing-card:first-child{margin-left:0}.playing-card .suit-big{display:none}.playing-card.card-back{background:repeating-linear-gradient(45deg,#12396e 0 6px,#2e68ad 6px 12px);border:3px solid #fff;box-shadow:0 7px 15px #0009}.back-pattern{position:absolute;inset:5px;border:1px solid #ffffff80;border-radius:5px}.score-team small b{color:#fff;font-size:.78rem}.player-summary{padding:.3rem .8rem}.player-summary span:last-child{color:inherit}
@media(max-width:700px){.seat.north{top:19%}.table-center{top:32%}.trick{width:214px;height:195px}.trick-slot{width:58px}.trick-slot.player-0{left:78px}.trick-slot.player-1{top:58px}.trick-slot.player-2{left:78px}.trick-slot.player-3{top:58px}.hand{gap:1px;overflow:visible;justify-content:center;padding:4px 8px}.playing-card{flex-basis:calc((100vw - 38px)/13);width:calc((100vw - 38px)/13);height:clamp(57px,18vw,70px);margin-left:0}.score-team small{display:block!important}.score-team{min-width:104px}}
.table-center{top:34%}
@media(max-width:700px){.table-center{top:35%}}