:root{--felt: #0f5132;--felt-2: #0b3d26;--gold: #e8c766;--ink: #1a1a1a;--panel: rgba(0, 0, 0, .28);--line: rgba(255, 255, 255, .14);--text: #f2f4f2;--muted: #b9c7bd;--pos: #6ee7a8;--neg: #ff8a8a;--radius: 14px;font-synthesis:none}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(120% 100% at 50% 0%,var(--felt) 0%,var(--felt-2) 100%) fixed;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:none;border-radius:10px}button:disabled{opacity:.45;cursor:not-allowed}input{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#00000040;color:var(--text);outline:none;width:100%}input:focus{border-color:var(--gold)}.primary{background:var(--gold);color:#3a2c00;font-weight:700;padding:12px 18px}.primary:hover:not(:disabled){filter:brightness(1.06)}.secondary{background:#ffffff1f;color:var(--text);padding:12px 18px}.secondary:hover:not(:disabled){background:#fff3}.danger{background:#b23b3b;color:#fff}.link{background:none;color:var(--muted);padding:6px 8px}.link:hover{color:var(--text)}.big{width:100%;font-size:1.05rem;padding:15px}.screen{max-width:900px;margin:0 auto;padding:16px;min-height:100%}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.brand{text-align:center}.brand h1{font-size:3rem;margin:0;color:var(--gold);letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.4)}.tagline{color:var(--muted);margin:6px 0 0}.card-panel{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field span{font-size:.85rem;color:var(--muted)}.divider{text-align:center;color:var(--muted);position:relative;margin:4px 0}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}.divider span{background:transparent;position:relative;padding:0 10px;font-size:.8rem}.join-row{display:flex;gap:8px}.code-input{text-transform:uppercase;letter-spacing:4px;font-weight:700;text-align:center}.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.topbar h2{margin:0;font-size:1.1rem}.room-code{background:var(--panel);color:var(--text);padding:8px 14px;border:1px solid var(--line);letter-spacing:1px}.room-code b{color:var(--gold);letter-spacing:3px}.conn{font-size:.7rem}.conn.open{color:var(--pos)}.conn.connecting,.conn.closed{color:var(--neg)}.loading,.center{text-align:center;color:var(--muted);padding:40px 0}.hint{color:var(--muted);font-size:.9rem}.toast{background:#b23b3b;color:#fff;padding:10px 14px;border-radius:10px;text-align:center;margin-bottom:10px}.lobby h2{margin:4px 0}.config{display:flex;flex-direction:column;gap:14px;margin:14px 0}.toggle-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.toggle-label{font-size:.8rem;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.segmented{display:flex;gap:6px}.seg{flex:1;padding:10px;background:#ffffff14;color:var(--text);text-transform:capitalize}.seg.active{background:var(--gold);color:#3a2c00;font-weight:700}.toggle-desc{font-size:.8rem;color:var(--muted);margin-top:8px}.players{display:flex;flex-direction:column;gap:6px;margin:14px 0}.player-row{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}.player-row.you{border-color:var(--gold)}.ptags{display:flex;align-items:center;gap:8px}.tag{font-size:.65rem;padding:2px 6px;border-radius:6px;letter-spacing:1px}.tag.bot{background:#35507a}.tag.off{background:#6a5a2a}.mini{padding:2px 8px;font-size:.8rem}.lobby-actions{display:flex;gap:10px;flex-wrap:wrap}.lobby-actions .primary,.lobby-actions .secondary{flex:1}.table{display:flex;flex-direction:column;gap:12px}.badges{display:flex;gap:8px;flex-wrap:wrap}.badge{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.78rem;text-transform:capitalize}.badge.inverse{background:#6a2ca0;border-color:#a56fd8}.opponents{display:flex;gap:10px;flex-wrap:wrap}.opp{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;transition:border-color .2s}.opp.turn{border-color:var(--gold);box-shadow:0 0 0 2px #e8c7664d}.opp-head{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:8px}.oscore{color:var(--gold);font-weight:700}.backs{display:flex;align-items:center}.back{width:16px;height:24px;border-radius:3px;margin-right:-9px;background:repeating-linear-gradient(45deg,#244,#244 3px,#366 3px,#366 6px);border:1px solid rgba(255,255,255,.25)}.backs .count{margin-left:16px;color:var(--muted);font-size:.8rem}.trick{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#0000002e;border-radius:var(--radius);border:1px dashed var(--line);padding:12px}.trick-info{color:var(--muted);font-size:.85rem;text-transform:capitalize}.play-cards{display:flex;gap:4px}.card{width:46px;height:64px;border-radius:7px;background:#fdfdf7;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 5px #00000059;border:1px solid #d8d8cc;-webkit-user-select:none;user-select:none;font-weight:700;line-height:1;transition:transform .12s}.card.small{width:34px;height:48px}.card .rank{font-size:1.1rem}.card.small .rank{font-size:.85rem}.card .suit{font-size:1rem}.card.red{color:#c02626}.card.black{color:#1a1a1a}.card.clickable:hover{transform:translateY(-4px)}.card.selected{transform:translateY(-14px);box-shadow:0 6px 12px #00000080;outline:2px solid var(--gold)}.you-area{margin-top:4px}.turn-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.9rem}.your-turn{color:var(--gold)}.you-score{color:var(--muted);font-size:.82rem}.hand{display:flex;flex-wrap:wrap;gap:6px;row-gap:12px;min-height:66px;padding:8px;background:#00000026;border-radius:var(--radius)}.controls{display:flex;gap:10px;margin-top:12px}.controls button{flex:1}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.modal{background:#123a28;border:1px solid var(--line);border-radius:var(--radius);padding:20px;width:min(520px,100%);max-height:90vh;overflow:auto}.modal h2{margin-top:0}.modal-actions{display:flex;gap:10px;margin-top:16px}.modal-actions button{flex:1}.results{width:100%;border-collapse:collapse;margin-top:8px}.results th,.results td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);font-size:.9rem}.results.small th,.results.small td{padding:5px 4px;font-size:.8rem}.results tr.you{background:#e8c7661f}.results .pos{color:var(--pos)}.results .neg{color:var(--neg)}.results small{color:var(--muted)}.match-end{text-align:center}.match-end .results{text-align:left}.match-list{display:flex;flex-direction:column;gap:8px}.match-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.match-summary{width:100%;background:none;color:var(--text);display:flex;justify-content:space-between;align-items:center;padding:12px 14px;text-align:left;gap:10px}.match-summary:hover{background:#ffffff0f}.ms-left{display:flex;flex-direction:column;gap:3px}.ms-date{font-size:.9rem}.ms-meta{font-size:.75rem;color:var(--muted);text-transform:capitalize}.ms-right{color:var(--gold);font-size:.85rem;white-space:nowrap}.match-detail{padding:0 14px 14px}.standings{display:flex;flex-direction:column;gap:4px;margin:8px 0}.standing{display:flex;justify-content:space-between;font-size:.85rem}@media(max-width:560px){.brand h1{font-size:2.4rem}.card{width:8.4vw;min-width:34px;height:12vw;min-height:48px}.opp{min-width:45%}}