/* Live, system-style rank and suit faces stay crisp at HUD resolution. */
.spades-table{background:radial-gradient(ellipse at 50% 20%,#294c4b,#132d34 75%);border:1px solid #a98c59;border-radius:14px;padding:16px;box-shadow:inset 0 0 40px #0004;color:#eee7d8}
.spades-meta{display:flex;justify-content:space-between;gap:8px;color:#e1c48a;font-size:15px;letter-spacing:.04em}
.spades-score{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.spades-score>div{display:grid;gap:4px;background:#0b1823b0;border:1px solid #647d7c;border-radius:7px;padding:8px;font-size:16px}
.spades-score .ours{border-color:#d1b375}.spades-score strong{float:right;font-size:1.25em;color:#f3d49b}.spades-score small{color:#d4ddd9;font-size:.85em}
.spades-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:15px}
.spades-seats>div{border:1px solid #75897c55;border-radius:5px;padding:5px;min-width:0}.spades-seats .acting{border-color:#edcf81;background:#c5a05a25;box-shadow:inset 0 -2px #edcf81}.spades-seats b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spades-seats small{display:block;font-size:.85em;color:#d0ddd7}
.spades-trick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.spades-played{text-align:center;min-width:0}.spades-played>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:13px}
.spades-played>div,.spades-card{position:relative;aspect-ratio:2/3;border-radius:7px;background:#112c35;border:1px solid #9f936d}
.spades-played>div{height:100px;width:auto;max-width:100%;margin:auto;overflow:hidden}.spades-played.won>div{outline:3px solid #a8ce94;box-shadow:0 0 15px #91b67a66}
.spades-face{position:absolute;inset:0;display:block;border-radius:inherit;background:#f6eedc;color:#142633;text-shadow:none;font-weight:800;line-height:1;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.spades-face.red{color:#ac233b}.spades-corner{position:absolute;left:7%;top:6%;font-size:clamp(14px,2.8vw,20px);display:flex;align-items:center;gap:.1em;letter-spacing:-.04em}.spades-corner>span{font-size:.85em}.spades-pip{position:absolute;left:0;right:0;top:39%;font-size:clamp(24px,5vw,36px);text-align:center}
.spades-face.gold-trump{background:linear-gradient(135deg,#fff0b8,#d9b861);color:#4a310c;box-shadow:inset 0 0 0 2px #b28b3e}.spades-trump-tag,.spades-joker-tag{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-size:8px;font-weight:800;letter-spacing:.04em}.spades-face.joker{background:#e7eaf1;color:#263853}.spades-face.joker .spades-pip{color:#9c7739}
.spades-empty{display:grid;place-items:center;color:#b99b6650;font-size:2em;height:100%}.spades-prompt{text-align:center;margin:8px 0;color:#f0d395}
.spades-hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;max-width:630px;margin:12px auto}
.spades-card{padding:0!important;min-width:0!important;min-height:0!important;height:auto;max-height:115px;width:100%;box-shadow:0 3px 6px #0005;opacity:1!important;overflow:hidden}.spades-card:disabled{cursor:default}.spades-card:disabled .spades-face{background:#b9c7c3;color:#3e504e}.spades-card:disabled .spades-face.red{color:#7d3143}.spades-card:disabled .spades-face.gold-trump{background:linear-gradient(135deg,#e5d198,#b59853);color:#4a310c}.spades-card.selected{outline:3px solid #fff0b4;outline-offset:1px;box-shadow:0 0 12px #e5c98288}.spades-card:not(:disabled):hover{transform:translateY(-2px)}
.spades-table[data-spades-phase="bid"] .spades-card:disabled .spades-face{background:#f6eedc;color:#142633}.spades-table[data-spades-phase="bid"] .spades-card:disabled .spades-face.red{color:#ac233b}
.spades-bids{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:8px auto;max-width:630px}.spades-bids button{padding:6px;min-height:36px;font-size:18px}.spades-bids .selected{outline:2px solid #edd28c;background:#615337}.spades-confirm{display:block;width:min(100%,630px);margin:8px auto;min-height:42px}.spades-last-score{display:block;text-align:center;color:#d1dcd3}
.spades-settings{border:1px solid #ad935b66;border-radius:8px;padding:10px;display:grid;gap:8px}.spades-settings legend{color:#dfc38a}.spades-settings .field{display:flex;align-items:center;justify-content:space-between;gap:8px}.spades-settings select{max-width:60%}.spades-settings small{font-size:.8em;color:#bfcbd0}
/* Played cards sit directly under their seats. Duplicate names are accessible
   but not repeated visually. Scrolling remains available as a fallback. */
.compact.spades-table{padding:.3rem;border-radius:.35rem}.compact .spades-meta{font-size:.73rem}.compact .spades-score{gap:.3rem;margin:.2rem 0}.compact .spades-score>div{padding:.2rem .3rem;font-size:.8rem;gap:.1rem}.compact .spades-score small{font-size:.72rem}.compact .spades-seats{font-size:.78rem;gap:.2rem}.compact .spades-seats>div{padding:.15rem}.compact .spades-seats small{font-size:.8em;line-height:1.15}
.compact .spades-trick{gap:.2rem;margin:.2rem 0}.compact .spades-played>div{height:2.8rem;width:1.87rem;max-height:none}.compact .spades-played>small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}.compact .spades-empty{font-size:1.25rem}.compact .spades-prompt{display:none}
.compact .spades-hand{grid-template-columns:repeat(7,2.2rem);justify-content:center;gap:.2rem;margin:.25rem auto;max-width:none}.compact .spades-card{height:3.2rem;width:2.2rem;border-radius:.18rem}.compact .spades-corner{font-size:.95rem}.compact .spades-pip{font-size:1.4rem}.compact .spades-trump-tag,.compact .spades-joker-tag{font-size:.37rem}.compact .spades-played .spades-corner{font-size:.8rem}.compact .spades-played .spades-pip{font-size:1.15rem}
.compact .spades-bids{gap:.18rem;margin:.15rem auto}.compact .spades-bids button{font-size:.86rem;min-height:1.5rem;padding:.12rem}.compact .spades-confirm{font-size:.9rem;min-height:1.8rem;margin:.2rem auto;padding:.2rem}.compact .spades-last-score{font-size:.65rem}.compact.spades-table[data-spades-phase="bid"] .spades-trick{display:none}
.moap-shell[data-game-key="spades"] .content{padding-top:.2rem}.moap-shell[data-game-key="spades"] .table-banter{height:.9rem}.moap-shell[data-game-key="spades"] .tt-board{padding:.1rem}.moap-shell .spades-settings{padding:.25rem;font-size:.85rem;gap:.25rem}.moap-shell .spades-settings .check{font-size:.8rem;margin:.1rem}.moap-shell .spades-settings legend{font-size:.8rem}.moap-shell .spades-settings select{font-size:.8rem;min-height:1.8rem;padding:.2rem}
@media(max-height:650px){.compact .spades-hand{grid-template-columns:repeat(7,2rem);gap:.15rem;margin:.15rem auto}.compact .spades-card{height:2.75rem;width:2rem}.compact .spades-trick{margin:.1rem 0}.compact .spades-played>div{height:2.3rem;width:1.55rem}.compact .spades-score>div{padding:.15rem .25rem;font-size:.76rem}.compact .spades-score small{font-size:.7rem}.compact .spades-seats{font-size:.73rem}.compact .spades-seats>div{padding:.1rem}.compact .spades-confirm{margin:.1rem auto}.compact .spades-played .spades-pip{font-size:1rem}.compact .spades-played .spades-trump-tag,.compact .spades-played .spades-joker-tag{font-size:.3rem}}
.spades-partner{margin-left:.2em;color:#f3d49b;font-weight:800}
@media(max-height:650px){.compact.spades-table[data-spades-phase="bid"] .spades-card{height:2.55rem}.compact .spades-bids{margin:.1rem auto;gap:.1rem}.compact .spades-score{margin:.1rem 0}}
/* Four-way, viewer-relative table. The felt is tilted, never the readable cards. */
.spades-table{position:relative}.spades-compass{position:relative;height:260px;margin:8px 0;isolation:isolate}
.spades-felt{position:absolute;inset:12% 13%;z-index:-1;border:5px solid #7b6646;border-radius:50%;background:radial-gradient(ellipse at 45% 35%,#35615a,#133a37 70%);transform:perspective(600px) rotateX(24deg);box-shadow:0 9px 0 #29332c,0 16px 22px #0005,inset 0 0 22px #0005}
.spades-seat{position:absolute;width:27%;padding:5px 7px;border:1px solid #72877c77;border-radius:6px;background:#102b30ed;text-align:center;min-width:0;line-height:1.12;font-size:15px}
.spades-seat.north,.spades-seat.south{width:62%;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:5px}.spades-seat.north{top:0}.spades-seat.south{bottom:0}.spades-seat.west{left:0;top:50%;transform:translateY(-50%)}.spades-seat.east{right:0;top:50%;transform:translateY(-50%)}
.spades-seat b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spades-seat.north b,.spades-seat.south b{text-align:right}.spades-seat small{font-size:.8em;color:#d4e1db;white-space:nowrap}.spades-role{display:block;grid-column:1/-1;font-size:.7em;letter-spacing:.07em;color:#c6d1d4;margin-bottom:2px}.spades-seat.allied{border-color:#e3c47d}.spades-seat.allied .spades-role{color:#ffe2a1;font-weight:800}.spades-seat.rival .spades-role{color:#dbb8b1}.spades-seat.acting{box-shadow:0 0 0 2px #f7d990,0 0 16px #f7d93440;background:#304b44}.spades-seat.book-winner{box-shadow:0 0 0 2px #bee8ad,0 0 18px #bee8ad50}
.spades-compass .spades-played{position:absolute;width:54px;height:80px}.spades-compass .spades-played>div{height:100%;width:100%;max-height:none}.spades-played.north{top:54px;left:50%;transform:translateX(-50%) rotate(5deg)}.spades-played.south{bottom:54px;left:50%;transform:translateX(-50%) rotate(-5deg)}.spades-played.west{left:calc(50% - 88px);top:50%;transform:translateY(-50%) rotate(-8deg)}.spades-played.east{right:calc(50% - 88px);top:50%;transform:translateY(-50%) rotate(8deg)}
.spades-announcement{font-size:16px;line-height:1.25;min-height:1.4em;text-align:center;color:#f1d796;margin:5px 0;font-weight:700}.spades-announcement.winner{color:#e1f8b9}.spades-table-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.08em;color:#d8c591}
.spades-watch{min-height:42px;display:flex;align-items:center;gap:6px;max-width:630px;margin:8px auto;font-size:14px}.spades-watch>span{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#d8dfd1}.spades-watch button{padding:3px 7px;min-height:30px;font-size:13px;flex:none}.spades-dealing{grid-column:1/-1;text-align:center;align-self:center;color:#dfcb9e;font-size:.8em}
.spades-collect-progress{position:absolute;bottom:0;left:0;height:3px;background:#e3f1ad;animation:spades-collect 5s linear forwards}@keyframes spades-collect{from{width:100%}to{width:0}}
.compact .spades-compass{height:6.5rem;margin:.15rem 0;font-size:.78rem}.compact .spades-felt{border-width:.14rem}.compact .spades-seat{font-size:.78rem;padding:.1rem .15rem;border-radius:.18rem}.compact .spades-seat small{font-size:.75em}.compact .spades-seat .spades-role{font-size:.68em;margin-bottom:.04rem}.compact .spades-seat.north,.compact .spades-seat.south{width:63%;column-gap:.15rem}.compact .spades-seat.west,.compact .spades-seat.east{width:27%}.compact .spades-seat.west small,.compact .spades-seat.east small{display:block}
.compact .spades-compass .spades-played{height:1.85rem;width:1.25rem}.compact .spades-played.north{top:1.4rem}.compact .spades-played.south{bottom:1.4rem}.compact .spades-played.west{left:calc(50% - 2.15rem)}.compact .spades-played.east{right:calc(50% - 2.15rem)}.compact .spades-played .spades-corner{font-size:.64rem}.compact .spades-played .spades-pip{font-size:.8rem}.compact .spades-played .spades-trump-tag,.compact .spades-played .spades-joker-tag{font-size:.24rem}
.compact .spades-announcement{font-size:.74rem;min-height:.95rem;line-height:1.2;margin:.1rem 0}.compact .spades-hand{min-height:6.6rem}.compact .spades-watch{font-size:.7rem;min-height:1.8rem;height:1.8rem;margin:.2rem auto;gap:.15rem}.compact .spades-watch button{font-size:.65rem;min-height:1.4rem;padding:.1rem .2rem}.compact .spades-table-mark{font-size:.6rem}
.compact.spades-table[data-spades-phase="bid"] .spades-compass{height:3.8rem}.compact.spades-table[data-spades-phase="bid"] .spades-announcement{display:none}.compact.spades-table[data-spades-phase="bid"] .spades-card{height:2.5rem}.compact.spades-table[data-spades-phase="bid"] .spades-hand{min-height:5.2rem}.compact.spades-table[data-spades-phase="bid"] .spades-pip{font-size:1.1rem}
.moap-shell[data-game-key="spades"] .table-banter{display:none}
@media(max-height:650px){.compact .spades-compass{height:6.1rem}.compact .spades-compass .spades-played{height:1.7rem;width:1.15rem}.compact .spades-seat{font-size:.73rem}.compact .spades-hand{min-height:5.65rem}.compact .spades-announcement{font-size:.72rem}.compact .spades-watch{margin:.1rem auto}.compact.spades-table[data-spades-phase="bid"] .spades-card{height:2.4rem}.compact.spades-table[data-spades-phase="bid"] .spades-hand{min-height:4.95rem}}
.playback-paused .spades-collect-progress{animation-play-state:paused}
.spades-seat.north,.spades-seat.south,.compact .spades-seat.north,.compact .spades-seat.south{width:46%;grid-template-columns:auto minmax(0,1fr)}
.spades-seat.north .spades-role,.spades-seat.south .spades-role{grid-column:auto;margin:0;white-space:nowrap}
.spades-seat.north b,.spades-seat.south b{text-align:center}
.spades-seat.north small,.spades-seat.south small{grid-column:1/-1;text-align:center}
.compact.spades-table[data-spades-phase="bid"] .spades-table-mark{display:none}
.compact .spades-compass{height:6.2rem;margin:.1rem 0}.compact .spades-compass .spades-played{height:1.7rem;width:1.15rem}.compact .spades-hand{margin:.1rem auto}.compact .spades-confirm{margin:.1rem auto}
.spades-score-short{display:none}
.compact .spades-watch{margin:.1rem auto}
.spades-seat.north,.spades-seat.south{padding-top:0;padding-bottom:0;line-height:1}.spades-seat.north small,.spades-seat.south small{font-size:.7em}
.spades-played.north,.spades-played.south{transform:translateX(-50%)}
@media(max-height:650px){.compact .spades-score>div{display:flex;align-items:center;gap:.3rem;padding:.15rem .2rem}.compact .spades-score b{font-size:.7rem;white-space:nowrap}.compact .spades-score strong{float:none;font-size:1.1em}.compact .spades-score small{font-size:.62rem;white-space:nowrap}.compact .spades-score-long{display:none}.compact .spades-score-short{display:inline}.compact .spades-compass{height:5.7rem;margin:0}.compact .spades-compass .spades-played{height:1.5rem;width:1.02rem}.compact .spades-played.north{top:1.35rem}.compact .spades-played.south{bottom:1.35rem}.compact.spades-table[data-spades-phase="bid"] .spades-compass{height:3.1rem}}
@media(max-height:650px){.compact.spades-table[data-spades-phase="bid"] .spades-compass{height:3.1rem}.compact.spades-table[data-spades-phase="bid"] .spades-seat.north,.compact.spades-table[data-spades-phase="bid"] .spades-seat.south{width:46%}}
/* A shallow central fan leaves room for readable public cards and every seat
   label, rather than squeezing two tiny cards into the north/south gap. */
.compact .spades-compass .spades-played{height:1.95rem;width:1.3rem;top:50%;bottom:auto}
.compact .spades-played.north{left:calc(50% - 1.8rem);transform:translateY(-1.2rem)}
.compact .spades-played.south{left:calc(50% + .4rem);transform:translateY(-.75rem)}
.compact .spades-played.west{left:calc(50% - 3.7rem);transform:translateY(-1rem) rotate(-5deg)}
.compact .spades-played.east{left:calc(50% + 2.4rem);right:auto;transform:translateY(-1rem) rotate(5deg)}
.compact .spades-played .spades-pip{font-size:1.05rem}
.moap-shell[data-game-key="spades"]:has(.spades-table)~.scroll-controls{top:.23rem;bottom:auto;right:5.1rem}
/* Existing library artwork and character crests. */
.spades-cover{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#39524d,#101e30);border-bottom:1px solid #bda16d;display:flex;align-items:center;justify-content:center}.spades-cover img{position:absolute;height:90%;width:auto!important;object-fit:contain!important;top:12%;left:27%;transform:rotate(-18deg);box-shadow:0 3px 12px #000b;border-radius:5px}.spades-cover img+img{left:45%;transform:rotate(13deg)}.game-art .spades-cover{position:absolute;inset:0;width:100%;height:100%}.moap-shell .compact-library .saved-pick{display:none}.moap-shell .compact-library .cover-wrap.spades-cover{display:flex}.moap-shell .compact-library .spades-cover img{height:90%;width:auto}.moap-shell .bot-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.moap-shell .bot-choice b{font-size:1rem}
.portrait.ledger,.portrait-slick,.portrait-frost,.portrait.slick,.portrait.frost,.portrait-ledger{display:grid;place-items:center;background:linear-gradient(140deg,#3e5755,#192b3f)!important;color:#e9cb88;border:1px solid #b19967;font-family:Georgia,serif}.portrait.ledger:before,.portrait-ledger:before{content:'L'}.portrait.slick:before,.portrait-slick:before{content:'S'}.portrait.frost:before,.portrait-frost:before{content:'F'}