:root{--felt:#0f3d2e;--felt-2:#145a43;--felt-3:#1c6d52;--ink:#f4f1e8;--muted:#b9c8bf;--gold:#e3c766;--danger:#e05a4f;--ok:#58c27d;--card-w:clamp(46px, 11.5vw, 88px);--card-h:calc(var(--card-w) * 1.4);--red:#c8102e;--black:#1a1a1a;--panel:#00000059;--radius:14px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 30%, var(--felt-3), var(--felt) 70%);color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{min-height:100dvh}button{font:inherit;color:inherit;background:var(--felt-2);cursor:pointer;border:1px solid #ffffff2e;border-radius:10px;padding:10px 16px;transition:transform 80ms,background .15s,opacity .15s}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--gold);color:#2a220a;border-color:#0000;font-weight:700}button.ghost{background:0 0}button.danger{background:var(--danger);border-color:#0000}button.small{border-radius:8px;padding:6px 10px;font-size:.85rem}input{font:inherit;color:var(--ink);background:#00000040;border:1px solid #ffffff40;border-radius:10px;outline:none;width:100%;padding:12px 14px}input:focus{border-color:var(--gold)}input.code{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-size:1.4rem;font-weight:700}h1,h2,h3{margin:0}.muted{color:var(--muted)}.row{align-items:center;gap:10px;display:flex}.col{flex-direction:column;gap:10px;display:flex}.grow{flex:1}.center{text-align:center}.page{max-width:520px;padding:calc(16px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));flex-direction:column;gap:18px;min-height:100dvh;margin:0 auto;display:flex}.logo{letter-spacing:-.02em;font-size:2rem;font-weight:800}.logo small{color:var(--muted);letter-spacing:0;font-size:.9rem;font-weight:400;display:block}.panel{background:var(--panel);border-radius:var(--radius);flex-direction:column;gap:12px;padding:16px;display:flex}.error{color:#ffb4ad;font-size:.9rem}.roomcode{letter-spacing:.35em;text-align:center;padding-left:.35em;font-size:2.4rem;font-weight:800}.seats{grid-template-columns:1fr 1fr;gap:10px;display:grid}.seat{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;gap:6px;min-height:78px;padding:10px 12px;display:flex}.seat.team0{border-left:4px solid var(--gold)}.seat.team1{border-left:4px solid #7fb3ff}.seat .who{align-items:center;gap:6px;font-weight:600;display:flex}.seat .who .dot{background:var(--danger);border-radius:50%;width:8px;height:8px}.seat .who .dot.on{background:var(--ok)}.seat .actions{flex-wrap:wrap;gap:6px;display:flex}.games{flex-wrap:wrap;gap:8px;display:flex}.games button.sel{background:var(--gold);color:#2a220a;font-weight:700}.opt{justify-content:space-between;align-items:center;gap:10px;display:flex}.opt select{font:inherit;background:var(--felt-2);color:var(--ink);border:1px solid #fff3;border-radius:8px;padding:6px 8px}.decks{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;display:grid}.decks.compact{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}.deck{background:#ffffff0f;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;display:flex}.deck.sel{border-color:var(--gold);background:#e3c7661f}.deck .thumbs{display:flex}.deck .thumbs img{background:#fff;border-radius:4px;width:44px;box-shadow:0 2px 5px #0006}.deck .thumbs img+img{margin-left:-14px;transform:rotate(8deg)translateY(3px)}.decks.compact .thumbs img{width:34px}.deck .nm{font-size:.85rem;font-weight:600}.deck .desc{color:var(--muted);text-align:center;font-size:.72rem}.table{height:100dvh;padding:var(--safe-top) 0 var(--safe-bottom);grid-template-rows:auto 1fr auto auto;width:100%;display:grid;position:relative;overflow:hidden}.table>*{min-width:0}.hud{background:#00000040;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:.85rem;display:flex}.hud .score{gap:10px;display:flex}.hud .score b{font-size:1rem}.hud .contract{white-space:nowrap;background:#ffffff1a;border-radius:8px;padding:3px 8px}.arena{grid-template:"top top top""left mid right"1fr"bot bot bot"/auto 1fr auto;min-height:0;padding:6px 8px;display:grid;position:relative}.pos-top{grid-area:top;justify-self:center}.pos-left{grid-area:left;align-self:center}.pos-right{grid-area:right;align-self:center}.pos-bot{grid-area:bot;justify-self:center}.mid{min-height:calc(var(--card-h) * 2.3);grid-area:mid;position:relative}.player{border-radius:12px;flex-direction:column;align-items:center;gap:4px;min-width:72px;padding:6px 8px;display:flex;position:relative}.player .nm{text-overflow:ellipsis;white-space:nowrap;max-width:30vw;font-size:.85rem;font-weight:600;overflow:hidden}.player.turn .nm:after{content:"";background:var(--gold);width:8px;height:8px;box-shadow:0 0 8px var(--gold);border-radius:50%;margin-left:6px;animation:1s infinite pulse;display:inline-block}.player.off .nm{opacity:.5;text-decoration:line-through}.player .cnt{color:var(--muted);font-size:.72rem}.player.team0 .nm{color:var(--gold)}.player.team1 .nm{color:#9cc4ff}.bubble{color:#222;white-space:nowrap;z-index:3;background:#fff;border-radius:12px;padding:4px 9px;font-size:.8rem;font-weight:700;animation:.2s ease-out pop;position:absolute;box-shadow:0 2px 8px #00000059}.pos-top .bubble{margin-top:2px;top:100%;left:50%;transform:translate(-50%)}.pos-left .bubble{margin-top:2px;top:100%;left:0}.pos-right .bubble{margin-top:2px;top:100%;right:0}.pos-bot .bubble{margin-bottom:2px;bottom:100%;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:scale(.6)}}@keyframes pulse{50%{opacity:.4}}.trick{position:absolute;inset:0}.trick .slot{transition:transform .25s ease-out,opacity .25s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.trick .slot.t{transform:translate(-50%, calc(-50% - var(--card-h) * .55))}.trick .slot.b{transform:translate(-50%, calc(-50% + var(--card-h) * .55))}.trick .slot.l{transform:translate(calc(-50% - var(--card-w) * .9), -50%)}.trick .slot.r{transform:translate(calc(-50% + var(--card-w) * .9), -50%)}.trick .slot.win .card{box-shadow:0 0 0 3px var(--gold), 0 4px 12px #0006}.trick .slot.enter{animation:.3s ease-out fly}@keyframes fly{0%{opacity:0}}.trick .empty{color:#ffffff59;text-align:center;justify-content:center;align-items:center;padding:0 30px;font-size:.9rem;display:flex;position:absolute;inset:0}.card{--card-h:calc(var(--card-w) * 1.4);width:var(--card-w);height:var(--card-h);border-radius:calc(var(--card-w) * .05);background:#fff;flex:none;line-height:0;position:relative;overflow:hidden;box-shadow:0 2px 6px #00000059}.card img{pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.card.small{--card-w:clamp(34px, 8vw, 60px)}.card.mini{--card-w:30px}.hand{--card-w:clamp(52px, 16vw, 100px);--card-h:calc(var(--card-w) * 1.4);min-height:calc(var(--card-h) + 22px);justify-content:center;align-items:flex-end;gap:0;padding:6px 10px 8px;display:flex}.hand .card{margin-left:calc(var(--card-w) * -.32);cursor:pointer;transition:transform .15s,opacity .15s,filter .15s}.hand .card:first-child{margin-left:0}.hand .card.dim{filter:brightness(.55)}.hand .card.ok{transform:translateY(-10px)}.hand .card.ok:active{transform:translateY(-18px)}.hand.wide .card{margin-left:calc(var(--card-w) * -.15)}.sheet{z-index:5;background:#163f31;border-top-left-radius:18px;border-top-right-radius:18px;flex-direction:column;gap:8px;padding:10px 12px 8px;animation:.25s ease-out up;display:flex;box-shadow:0 -6px 24px #00000073}@keyframes up{0%{transform:translateY(100%)}}.chips{scrollbar-width:none;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{text-align:center;background:#ffffff1a;border:1px solid #0000;border-radius:999px;flex:none;min-width:48px;padding:7px 11px;font-weight:600}.chip.sel{background:var(--gold);color:#2a220a;border-color:#0000}.chip.suit{padding:4px 12px;font-family:Georgia,serif;font-size:1.25rem}.chip.red{color:#ff8a80}.chip.sel.red{color:var(--red)}.sheet .btns{gap:8px;display:flex}.sheet .btns button{flex:1}.modal-bg{z-index:10;background:#0000008c;justify-content:center;align-items:center;padding:20px;animation:.2s fly;display:flex;position:absolute;inset:0}.modal{background:#163f31;border-radius:16px;flex-direction:column;gap:12px;width:min(420px,100%);max-height:85dvh;padding:18px;display:flex;overflow:auto;box-shadow:0 10px 40px #00000080}.modal h2{font-size:1.2rem}.result{grid-template-columns:1fr auto auto;gap:4px 14px;font-size:.95rem;display:grid}.result .h{color:var(--muted);font-size:.8rem}.result b{font-size:1.1rem}.made{color:var(--ok);font-weight:700}.failed{color:#ff8a80;font-weight:700}.log{flex-direction:column;gap:4px;max-height:50dvh;font-size:.85rem;display:flex;overflow:auto}.log .sys{color:var(--muted)}.toasts{top:calc(10px + var(--safe-top));z-index:50;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;left:0;right:0}.toast{color:#fff;background:#222;border-radius:999px;padding:8px 14px;font-size:.9rem;animation:.2s pop;box-shadow:0 4px 12px #0006}.banner{top:var(--safe-top);background:var(--danger);color:#fff;text-align:center;z-index:40;padding:4px;font-size:.85rem;position:fixed;left:0;right:0}.iconbtn{background:0 0;border:none;padding:4px 8px;font-size:1.2rem}.tag{background:#ffffff26;border-radius:6px;padding:2px 6px;font-size:.7rem}@media (min-width:700px){:root{--card-w:clamp(60px, 7vw, 96px)}.player .nm{max-width:160px;font-size:.95rem}.hud{font-size:.95rem}.arena,.sheet,.hand{justify-self:center;width:min(100%,880px)}.sheet{border-radius:18px}}