.spades-app{--bg:#0b1020;--felt:#123b2b;--felt-2:#0d2c20;--rail:#4a2f1a;--ink:#e8ecf4;--muted:#93a0b8;--sp-gold:#f2c14e;--t0:#4fc3f7;--t1:#ef7d7d;--card-bg:#fbfbfd;--card-red:#d13a3a;--card-black:#1c2230;--line:#ffffff1a;color:var(--ink);background:var(--bg);min-height:100vh;font:15px/1.4 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}.spades-app *,.spades-app :before,.spades-app :after{box-sizing:border-box}.spades-app .app{flex-direction:column;max-width:1000px;min-height:100vh;margin:0 auto;display:flex}.spades-app .topbar{border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:10px 16px;display:flex}.spades-app .brand{letter-spacing:-.02em;font-size:20px;font-weight:800}.spades-app .brand span{color:var(--sp-gold)}.spades-app .brand .ver{color:var(--muted);margin-left:6px;font-size:11px;font-style:normal;font-weight:500}.spades-app .topbar__actions{align-items:center;gap:12px;margin-left:auto;display:flex}.spades-app .topbar__new{color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;padding:6px 12px}.spades-app .topbar__new:hover{color:var(--ink);border-color:var(--sp-gold)}.spades-app .ruletoggle{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.spades-app .ruletoggle:hover{color:var(--ink)}.spades-app .ruletoggle input{accent-color:var(--sp-gold);cursor:pointer;width:15px;height:15px}.spades-app .scoreboard{align-items:center;gap:14px;margin:0 auto;display:flex}.spades-app .score{text-align:center;min-width:96px}.spades-app .score__team{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.spades-app .score__pts{font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}.spades-app .score--t0 .score__pts{color:var(--t0)}.spades-app .score--t1 .score__pts{color:var(--t1)}.spades-app .score__bags{color:var(--muted);font-size:11px}.spades-app .score__target{color:var(--muted);font-size:12px}.spades-app .table{background:radial-gradient(120% 120% at 50% 40%,var(--felt)0%,var(--felt-2)100%);border:10px solid var(--rail);border-radius:200px/130px;flex:1;min-height:440px;margin:14px;position:relative;box-shadow:inset 0 0 60px #00000080,0 20px 50px #0006}.spades-app .table__n,.spades-app .table__s,.spades-app .table__w,.spades-app .table__e{z-index:2;position:absolute}.spades-app .table__n{top:10px;left:50%;transform:translate(-50%)}.spades-app .table__s{bottom:10px;left:50%;transform:translate(-50%)}.spades-app .table__w{top:50%;left:12px;transform:translateY(-50%)}.spades-app .table__e{top:50%;right:12px;transform:translateY(-50%)}.spades-app .seat{border:1px solid var(--line);text-align:center;background:#00000059;border-radius:10px;min-width:92px;padding:6px 10px;transition:border-color .2s,box-shadow .2s}.spades-app .seat--active{border-color:var(--sp-gold);box-shadow:0 0 0 2px #f2c14e40}.spades-app .seat__name{font-weight:700}.spades-app .seat--t0 .seat__name{color:var(--t0)}.spades-app .seat--t1 .seat__name{color:var(--t1)}.spades-app .seat__won{color:var(--muted);font-size:11px}.spades-app .seat__bidpill{color:var(--sp-gold);background:#f2c14e29;border:1px solid #f2c14e66;border-radius:999px;margin:3px 0;padding:1px 10px;font-size:14px;font-weight:800;display:inline-block}.spades-app .seat__bidpill--empty{color:var(--muted);border-color:var(--line);background:0 0;font-size:11px;font-weight:400}.spades-app .seat__bidpill--nil,.spades-app .seat__bidpill--blindnil{color:#ff9b9b;background:#ef7d7d2e;border-color:#ef7d7d80}.spades-app .seat__bidpill--blindnil{box-shadow:0 0 0 2px #ef7d7d40}.spades-app .seat__bidpill--busted{color:#fff;background:#ef7d7d59;border-color:#ef7d7d}.spades-app .seat__bidpill--made{color:#7be0a8;background:#5ac88c33;border-color:#5ac88c80}.spades-app .oppcards{position:absolute}.spades-app .oppcards--n{top:54px;left:50%;transform:translate(-50%)}.spades-app .oppcards--w{top:50%;left:40px;transform:translateY(-50%)}.spades-app .oppcards--e{top:50%;right:40px;transform:translateY(-50%)}.spades-app .backs{display:flex}.spades-app .backs .card{margin-left:-22px}.spades-app .backs .card:first-child{margin-left:0}.spades-app .backs--side{flex-direction:column}.spades-app .backs--side .card{margin-top:-40px;margin-left:0}.spades-app .backs--side .card:first-child{margin-top:0}.spades-app .trick{place-items:center;display:grid;position:absolute;inset:0}.spades-app .trick__slot{transition:transform .15s;position:absolute}.spades-app .trick__n{transform:translateY(-46px)}.spades-app .trick__s{transform:translateY(46px)}.spades-app .trick__w{transform:translate(-52px)}.spades-app .trick__e{transform:translate(52px)}.spades-app .trick__slot--win{filter:drop-shadow(0 0 10px var(--sp-gold))}.spades-app .trick__slot--win.trick__n{transform:scale(1.08)translateY(-46px)}.spades-app .trick__slot--win.trick__s{transform:scale(1.08)translateY(46px)}.spades-app .trick__slot--win.trick__w{transform:scale(1.08)translate(-52px)}.spades-app .trick__slot--win.trick__e{transform:scale(1.08)translate(52px)}.spades-app .trick__msg{color:var(--sp-gold);font-size:13px;font-weight:600;position:absolute;bottom:40px}.spades-app .trick__hint{color:var(--muted);letter-spacing:.05em;font-size:11px;position:absolute;top:46%}.spades-app .card{background:var(--card-bg);-webkit-user-select:none;user-select:none;border:1px solid #00000026;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:58px;height:82px;font-weight:800;display:flex;box-shadow:0 2px 6px #0006}.spades-app .card--sm{width:44px;height:62px}.spades-app .card__rank{font-size:20px;line-height:1}.spades-app .card--sm .card__rank{font-size:15px}.spades-app .card__suit{font-size:20px;line-height:1}.spades-app .card--sm .card__suit{font-size:15px}.spades-app .card--red{color:var(--card-red)}.spades-app .card--black{color:var(--card-black)}.spades-app .card--joker{color:var(--sp-gold);background:linear-gradient(160deg,#fffdf5,#fbeec2)}.spades-app .card__jokerglyph{font-size:22px;line-height:1}.spades-app .card--sm .card__jokerglyph{font-size:16px}.spades-app .card__jokerlabel{letter-spacing:.08em;font-size:9px;font-weight:800}.spades-app .card--sm .card__jokerlabel{font-size:7px}.spades-app .card--back{background:repeating-linear-gradient(45deg,#2b3a67,#2b3a67 6px,#24325a 6px 12px);border:1px solid #3b4b7a}.spades-app .card--btn{cursor:pointer;padding:0;transition:transform .12s,box-shadow .12s}.spades-app .card--playable{outline:2px solid var(--sp-gold)}.spades-app .card--trump{box-shadow:0 0 0 2px var(--sp-gold),0 2px 6px #0006;position:relative}.spades-app .card__trump{color:var(--card-black);font-size:11px;line-height:1;position:absolute;top:3px;right:4px}.spades-app .card--sm .card__trump{font-size:9px;top:2px;right:3px}.spades-app .card--btn:hover:not(:disabled){transform:translateY(-10px);box-shadow:0 8px 16px #00000080}.spades-app .card--dim{opacity:.5}.spades-app .card:disabled{cursor:default}.spades-app .myhand{flex-wrap:wrap;justify-content:center;gap:4px;min-height:96px;padding:12px 14px 6px;display:flex}.spades-app .bidpanel{border:1px solid var(--line);z-index:30;background:#131a30;border-radius:14px;width:calc(100% - 28px);max-width:460px;padding:14px 16px;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 20px 50px #0009}.spades-app .bidpanel__title{text-align:center;margin-bottom:10px;font-weight:700}.spades-app .bidpanel__drag{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;text-align:center;border-bottom:1px solid var(--line);margin-bottom:10px;padding:4px 4px 8px;font-weight:700}.spades-app .bidpanel__drag:active{cursor:grabbing}.spades-app .bidpanel__grip{color:var(--sp-gold);letter-spacing:2px}.spades-app .bidpanel__draghint{color:var(--muted);opacity:.75;margin-left:6px;font-size:10px;font-weight:500}.spades-app .bidpanel__row{justify-content:center;gap:8px;margin-bottom:8px;display:flex}.spades-app .bidpanel__grid{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.spades-app .bidbtn{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#1e2947;border-radius:8px;padding:8px 0;font-weight:700}.spades-app .bidbtn:hover{border-color:var(--sp-gold);background:#26335a}.spades-app .bidbtn--nil{background:#2a1e47}.spades-app .bidbtn--blind{background:#3a1e2a}.spades-app .bidpanel__hint{color:var(--muted);text-align:center;margin:10px 0 0;font-size:11px}.spades-app .modal{z-index:40;background:#040812b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.spades-app .modal__card{border:1px solid var(--line);background:#131a30;border-radius:16px;width:100%;max-width:520px;padding:22px;box-shadow:0 30px 70px #000000b3}.spades-app .modal__title{text-align:center;margin:0 0 16px;font-size:22px}.spades-app .resultgrid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;display:grid}.spades-app .resultcol{text-align:center;background:#0000004d;border-radius:12px;padding:12px}.spades-app .resultcol--t0{border:1px solid #4fc3f766}.spades-app .resultcol--t1{border:1px solid #ef7d7d66}.spades-app .resultcol__team{margin-bottom:6px;font-weight:700}.spades-app .resultcol__line{color:var(--muted);font-size:13px}.spades-app .resultcol__nil{margin-top:4px;font-size:12px}.spades-app .resultcol__nil.ok,.spades-app .resultcol__pts.ok,.spades-app .resultcol__nil.bad,.spades-app .resultcol__pts.bad{font-weight:700}.spades-app .ok{color:#6ee7a8}.spades-app .bad{color:var(--t1)}.spades-app .resultcol__bag{color:var(--sp-gold);margin-top:4px;font-size:12px}.spades-app .resultcol__pts{margin-top:8px;font-size:22px}.spades-app .resultcol__total{color:var(--muted);margin-top:2px;font-size:12px}.spades-app .bigbtn{background:var(--sp-gold);color:#1a1300;cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px;font-size:15px;font-weight:800;display:block}.spades-app .bigbtn:hover{filter:brightness(1.05)}.spades-app .foot{text-align:center;color:var(--muted);padding:10px;font-size:12px}.spades-app .foot a{color:var(--sp-gold)}@media (max-width:560px){.spades-app .card{width:46px;height:66px}.spades-app .card__rank,.spades-app .card__suit{font-size:16px}.spades-app .table{min-height:380px}.spades-app .scoreboard{gap:8px}.spades-app .score{min-width:72px}.spades-app .score__pts{font-size:20px}}