:root{--felt-light: #1f7a4d;--felt: #145a37;--felt-dark: #0b3122;--wood: #5b3a1e;--wood-dark: #3a2412;--wood-light: #7d5230;--ink: #f2ece0;--ink-dim: #b9ae99;--gold: #e3c46a;--red: #c0202a;--black: #16181c;--danger: #d4574f;--card-w: 6.4rem;--card-h: 9rem;--card-lw: 6.9rem;--card-lh: 9.7rem;--caravan-w: calc(var(--card-w) * 1.75);--fan-w: 29rem;--radius: .35rem;--slide: 1s cubic-bezier(.2, .9, .3, 1);--restack: .38s cubic-bezier(.3, .8, .4, 1);font-family:Segoe UI,Roboto,ui-sans-serif,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse 120% 90% at 50% 40%,var(--felt-light),var(--felt) 45%,var(--felt-dark) 100%),var(--felt)}main{min-width:0;padding:1rem .75rem 3rem}.panel{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .85rem;max-width:var(--fan-w);padding:.55rem .8rem;background:#0000004d;border:1px solid rgba(0,0,0,.38);border-radius:.5rem;box-shadow:0 4px 14px #00000047}.panel .spacer{flex:1}.panel .error{flex-basis:100%}h1{font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;margin:0;color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.6)}.meta{display:inline-flex;align-items:baseline;gap:.4rem}.meta-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#ffffff59}.conn{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-dim)}.conn:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}.panel .audio{flex:0 0 100%;display:flex;justify-content:flex-end;align-items:center;gap:.35rem}.mute{padding:.3rem .45rem;line-height:1;font-size:.9rem}.mute[aria-pressed=true]{opacity:.6}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.conn-open{color:#6fd08c}.conn-connecting{color:var(--gold)}.conn-closed{color:var(--danger)}.conn-local{color:var(--ink-dim)}button{font:inherit;font-size:.85rem;color:var(--ink);background:linear-gradient(var(--wood-light),var(--wood));border:1px solid var(--wood-dark);border-radius:var(--radius);padding:.45rem .9rem;cursor:pointer;box-shadow:0 1px #ffffff1f inset,0 2px 4px #0000004d;transition:filter .12s ease,transform .12s ease}button:hover:not(:disabled){filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.35;cursor:default;box-shadow:none}button.danger{background:linear-gradient(#8d3b36,#6d2b27);border-color:#4a1c19}button.confirm{background:linear-gradient(var(--gold),#b6923f);border-color:#7a5f23;color:#2a1f08;font-weight:700}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}input{font:inherit;font-size:1.1rem;letter-spacing:.4em;text-align:center;text-transform:uppercase;width:9.5rem;padding:.45rem .5rem .45rem .9rem;color:var(--ink);background:#00000059;border:1px solid var(--wood-dark);border-radius:var(--radius)}.landing{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin:4rem auto;padding:2rem;max-width:34rem;background:#00000038;border:1px solid rgba(0,0,0,.35);border-radius:.6rem;box-shadow:0 8px 30px #00000059}.landing form{display:flex;gap:.5rem}.landing .or{color:var(--ink-dim);font-size:.8rem}.options{display:flex;flex-direction:column;gap:1.1rem;margin:4rem auto;padding:1.6rem 2rem 1.8rem;max-width:26rem;background:#00000038;border:1px solid rgba(0,0,0,.35);border-radius:.6rem;box-shadow:0 8px 30px #00000059}.options h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}.option-group{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.7rem .9rem .9rem;border:1px solid rgba(0,0,0,.35);border-radius:var(--radius)}.option-group legend{padding:0 .4rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}.option-group label{display:grid;grid-template-columns:auto 1fr;gap:0 .55rem;align-items:center;font-size:.9rem;cursor:pointer}.option-group input[type=radio]{width:auto;min-width:0;padding:0;margin:0;letter-spacing:normal;accent-color:var(--gold);cursor:pointer}.option-group label .dim{grid-column:2;font-size:.72rem;color:var(--ink-dim)}.option-actions{display:flex;gap:.6rem}.option-actions .ghost{background:none;box-shadow:none;color:var(--ink-dim)}.deckbuilder{margin:1.5rem auto;padding:1.2rem 1.4rem 1.6rem;max-width:64rem;background:#00000038;border:1px solid rgba(0,0,0,.35);border-radius:.6rem;box-shadow:0 8px 30px #00000059}.deck-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:.3rem}.deck-bar h2{margin:0;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.deck-count{font-size:.85rem;color:var(--ink-dim)}.deck-count strong{color:var(--ink);font-size:1rem}.deck-hint{margin:0 0 .9rem;font-size:.78rem;color:var(--ink-dim)}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));gap:.5rem}.deck-card{padding:0;background:none;border:none;box-shadow:none;border-radius:var(--radius);transition:transform .16s ease,opacity .16s ease}.deck-card:hover:not(:disabled){transform:translateY(-.2rem)}.deck-card.out{opacity:.28;filter:saturate(.3)}.deck-card.out:hover:not(:disabled){opacity:.55}.deck-card:disabled{cursor:default}.deck-waiting{margin:4rem auto;padding:1.5rem 2rem;max-width:28rem;text-align:center;color:var(--ink-dim);background:#00000038;border:1px solid rgba(0,0,0,.35);border-radius:.6rem}.code{font-size:1.05rem;font-weight:700;letter-spacing:.22em;color:var(--gold)}.seats{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}.seats li{display:flex;align-items:center;gap:.4rem;font-size:.75rem;padding:.15rem .5rem;border-radius:1rem;background:#0000004d}.seats li:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}.seats .here{color:#6fd08c}.seats .away{color:var(--ink-dim)}.status{color:var(--ink-dim);font-size:.8rem}.status.warn{color:var(--gold)}.error{margin:0;color:#ffd9d6;background:#8c28238c;border:1px solid #7a2b26;border-radius:var(--radius);padding:.45rem .6rem;font-size:.78rem}.board{display:grid;grid-template-columns:var(--fan-w) auto;grid-template-areas:"panel table" "hand  table";grid-template-rows:auto auto;justify-content:center;gap:.6rem 1.5rem;align-items:start}.board>.panel{grid-area:panel}.hand-area{grid-area:hand}.table{grid-area:table;min-width:0}.table-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}.table-head .who{color:var(--ink)}.pill{display:inline-flex;align-items:center;gap:.35rem;font-weight:400;letter-spacing:.06em;padding:.1rem .5rem;border-radius:1rem;background:#00000047}.columns{display:grid;grid-template-columns:repeat(3,var(--caravan-w));gap:.85rem}.column{display:flex;flex-direction:column;min-width:0}.caravan{position:relative;height:calc(var(--card-h) * var(--rows));border-radius:.6rem;transition:background-color .2s ease,box-shadow .2s ease}.stack{position:absolute;top:0;right:0;bottom:0;left:0}.slot{position:absolute;left:calc(50% - (var(--card-w) / 2));width:var(--card-w);z-index:var(--i);animation:deal var(--slide) both;transition:top var(--restack),bottom var(--restack)}.side-you .slot{top:calc(var(--i) * var(--step))}.side-opponent .slot{bottom:calc(var(--i) * var(--step))}.side-opponent .slot{animation-name:deal-from-top}@keyframes deal{0%{transform:translateY(3.5rem) scale(.92);opacity:0}to{transform:none;opacity:1}}@keyframes deal-from-top{0%{transform:translateY(-3.5rem) scale(.92);opacity:0}to{transform:none;opacity:1}}.slot.struck{animation:struck 1.18s ease-out both;pointer-events:none}@keyframes struck{0%,85%{transform:none}91%{transform:translateY(.2rem) scale(.965)}to{transform:none}}.slot.departing{animation:depart 1s ease-in both;pointer-events:none}@keyframes depart{0%{transform:none;opacity:1}to{transform:translate(2.5rem,-1.5rem) rotate(14deg);opacity:0}}.empty-slot{position:absolute;left:calc(50% - (var(--card-w) / 2));width:var(--card-w);height:var(--card-h);border:1px dashed rgba(255,255,255,.11);border-radius:var(--radius)}.side-you .empty-slot{top:0}.side-opponent .empty-slot{bottom:0}.caravan.open-target{cursor:pointer;background:#e3c46a0d;box-shadow:inset 0 0 0 1px #e3c46a38}.caravan.drag-over{background:#e3c46a21;box-shadow:inset 0 0 0 2px #e3c46ab3}.slot-card,.hand-card{padding:0;border:none;background:none;box-shadow:none;border-radius:var(--radius);line-height:0}.slot-card:disabled{opacity:1;pointer-events:none}.slot-card.target .card,.hand-card.selected .card{box-shadow:0 0 0 3px var(--gold),0 6px 14px #00000080}.slot-card.target .card.art,.hand-card.selected .card.art{box-shadow:none}.slot-card.target .card.art img,.hand-card.selected .card.art img{filter:drop-shadow(0 0 2px var(--gold)) drop-shadow(0 0 7px var(--gold))}.slot-card.target{cursor:pointer;animation:pulse 2.2s ease-in-out infinite}.slot.drag-over{z-index:60}.slot-card.drag-over .card{box-shadow:0 0 0 3px var(--gold),0 8px 20px #0009}.slot-card.drag-over{animation:none;transition:transform .14s ease}.side-you .slot-card.drag-over{transform:translate(-30%) scale(1.06)}.side-opponent .slot-card.drag-over{transform:translate(30%) scale(1.06)}@keyframes pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.18)}}.attachments{position:absolute;top:0;left:0;width:var(--card-w);height:var(--card-h);pointer-events:none}.attached-card{position:absolute;top:0;z-index:calc(var(--ai) + 1);line-height:0}.side-you .attached-card{left:calc((var(--ai) + 1) * var(--card-w) * .25)}.side-opponent .attached-card{right:calc((var(--ai) + 1) * var(--card-w) * .25)}.attached-card{animation:attach-land 1s ease-out both}.attached-card.settled{animation:none}@keyframes attach-land{0%{transform:translate(1rem,-2.4rem) rotate(-14deg) scale(1.18);opacity:0}to{transform:none;opacity:1}}.side-opponent .attached-card{animation-name:attach-land-far}@keyframes attach-land-far{0%{transform:translate(-1rem,2.4rem) rotate(14deg) scale(1.18);opacity:0}to{transform:none;opacity:1}}.side-opponent .attached-card.settled{animation:none}.gauge{display:flex;flex-direction:column;gap:.15rem;padding:.4rem 0}.total{display:flex;align-items:baseline;gap:.4rem;font-size:.8rem;color:var(--ink-dim)}.total .value{font-size:1.2rem;font-weight:700;color:var(--ink)}.total .dir{font-size:.8rem}.total.status-sold .value{color:#6fd08c}.total.status-outbid .value{color:var(--gold)}.total.status-tied .value{color:#9aa2e0}.total.status-overburdened .value{color:var(--danger)}.badge{font-size:.6rem;font-weight:700;letter-spacing:.1em;cursor:help}.status-sold .badge{color:#6fd08c}.status-outbid .badge{color:var(--gold)}.status-tied .badge{color:#9aa2e0}.status-overburdened .badge{color:var(--danger)}.disband{margin-left:auto;font-size:.6rem;padding:.1rem .4rem}.track{display:flex;align-items:center;gap:.4rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .5rem;border-radius:1rem;background:#00000052;color:var(--ink-dim)}.track .n{display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:#ffffff1f;font-size:.62rem}.track.won{color:#6fd08c}.track.lost{color:var(--danger)}.track.tied{color:#9aa2e0}.card{position:relative;display:inline-block;width:var(--card-w);height:var(--card-h);border-radius:var(--radius);background:linear-gradient(160deg,#fffdf8,#ece5d6);border:1px solid #b9ae99;box-shadow:0 2px 5px #00000073;font-family:Georgia,Times New Roman,serif;line-height:1;-webkit-user-select:none;user-select:none;transition:box-shadow .24s ease,transform .24s ease}.card.size-large{width:var(--card-lw);height:var(--card-lh)}.card.size-small{width:2.4rem;height:3.4rem}.card.red{color:var(--red)}.card.black{color:var(--black)}.card.joker{color:#6a3fa0}.card.art{background:none;border:none;box-shadow:none;overflow:visible}.card.art img{width:100%;height:100%;object-fit:var(--card-fit, contain);display:block;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}.card .corner{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:.62rem;font-weight:700}.card.size-large .corner{font-size:.75rem}.card .corner em{font-style:normal;font-size:.85em}.card .corner.tl{top:.15rem;left:.2rem}.card .corner.br{bottom:.15rem;right:.2rem;transform:rotate(180deg)}.card .pips{position:absolute;top:.85rem;right:.55rem;bottom:.85rem;left:.55rem}.card.size-large .pips{top:1.1rem;right:.7rem;bottom:1.1rem;left:.7rem}.card .pip{position:absolute;transform:translate(-50%,-50%);font-size:.7rem}.card.size-large .pip{font-size:.85rem}.card .pip.flipped{transform:translate(-50%,-50%) rotate(180deg)}.card .centre{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;font-size:1.5rem;font-weight:700}.card.size-large .centre{font-size:1.9rem}.card .centre em{font-style:normal;font-size:.62em}.card .centre.ace{font-size:2rem}.card.size-large .centre.ace{font-size:2.6rem}.card .joker-mark{font-size:.55rem;letter-spacing:.08em;writing-mode:vertical-rl;font-weight:700}.caravan footer{display:flex;gap:.35rem;align-items:center;margin-top:.4rem;min-height:1.6rem}.drop{flex:1;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px dashed rgba(255,255,255,.16);box-shadow:none;color:var(--gold);padding:.25rem}.drop.target{border-color:var(--gold);border-style:solid}.drop:disabled{opacity:.25}.disband{font-size:.62rem;padding:.2rem .5rem}.opp-hand{position:relative;height:calc(var(--card-lh) * 1.08)}.opp-card{position:absolute;top:.4rem;left:50%;margin-left:calc(var(--card-lw) / -2);transform-origin:50% -220%;transform:rotate(var(--a));z-index:var(--z);transition:transform .26s ease}.opp-card .card-back{display:block;width:var(--card-lw);height:var(--card-lh);object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}.opp-card .card-back.drawn{border-radius:var(--radius);border:1px solid #2b1a3a;background:repeating-linear-gradient(45deg,#6a3fa0 0,#6a3fa0 4px,#52307d 4px,#52307d 8px)}.hand-area{align-self:start;display:flex;flex-direction:column;gap:.6rem}.turn{margin:0;font-size:.78rem;color:var(--ink-dim)}.turn.yours{color:var(--gold);font-weight:600}.hand{position:relative;flex:1;min-height:15rem}.hand-card{position:absolute;top:1.5rem;left:50%;margin-left:calc(var(--card-lw) / -2);transform-origin:50% 300%;transform:rotate(var(--a));z-index:var(--z);cursor:pointer;touch-action:none;transition:transform .26s ease,opacity .26s ease}.hand-card:hover:not(:disabled){transform:rotate(var(--a)) translateY(-1rem);z-index:50}.hand-card.selected{transform:rotate(var(--a)) translateY(-1.7rem);z-index:51}.hand-card.lifted{opacity:.3}.hand-card.unplayable .card{opacity:.5;filter:saturate(.4)}.hand-card:disabled{cursor:default;opacity:1;filter:saturate(.75) brightness(.9)}.empty-hand{color:var(--ink-dim);font-size:.85rem}.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-height:2rem}.hint{color:var(--ink-dim);font-size:.78rem}.drag-ghost{position:fixed;z-index:900;pointer-events:none;transform:translate(10%,12%) rotate(-4deg) scale(1.06);filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}.drag-ghost.over .card{box-shadow:0 0 0 3px var(--gold)}.drag-ghost.over .card.art{box-shadow:none}.drag-ghost.over .card.art img{filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 9px var(--gold))}.board.dragging{cursor:grabbing}.result{position:fixed;left:50%;top:45%;z-index:500;pointer-events:none;padding:1.4rem 3rem;text-align:center;font-size:2.1rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;border-radius:.6rem;background:#08140e8c;border:1px solid rgba(227,196,106,.55);box-shadow:0 12px 40px #00000073;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.85);animation:result-in .6s ease both}.result.lose{border-color:#d4574f99;color:#f0b4b0}.result .dim{display:block;margin-top:.5rem;font-size:.72rem;font-weight:400;letter-spacing:.14em;color:inherit;opacity:.75}.result .rematch{display:block;margin:1rem auto 0;pointer-events:auto;font-size:.72rem;letter-spacing:.14em}.result .rematch:disabled{opacity:.6;cursor:default}@keyframes result-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dim{color:var(--ink-dim)}@media(max-width:68rem){.board{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "table" "hand";grid-template-rows:auto auto auto}.hand-area{align-self:stretch}}@media(max-width:46rem){:root{--card-w: 4.2rem;--card-h: 5.9rem;--card-lw: 4.5rem;--card-lh: 6.3rem;--fan-w: 18rem;--caravan-w: calc(var(--card-w) * 1.6)}main{padding:.75rem}.panel{max-width:none}.meta-label{display:none}.result{font-size:1.4rem;padding:1rem 1.6rem;letter-spacing:.16em}.columns{gap:.4rem}.hand{min-height:11rem}.track{font-size:.55rem;padding:.15rem .35rem}.total .value{font-size:1rem}.opp-hand{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
