*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green-felt: #2d6a4f;--green-dark: #1b4332;--green-light: #40916c;--card-bg: #fff;--card-red: #c0392b;--card-black: #1a1a2e;--gold: #f4b942;--text-light: #f0f0f0;--text-muted: #aaa;--sidebar-bg: rgba(0,0,0,.35);--overlay-bg: rgba(0,0,0,.7);--radius: 8px;--card-radius: 6px}html,body,#root{height:100%;font-family:Segoe UI,system-ui,sans-serif;background:var(--green-dark);color:var(--text-light)}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius);padding:.5rem 1.25rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s}.btn:hover:not(:disabled){filter:brightness(1.12)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--gold);color:#1a1a1a}.btn--large{padding:.75rem 2rem;font-size:1.05rem}.error-banner{position:fixed;top:0;left:0;right:0;background:#c0392b;color:#fff;padding:.6rem 1rem;display:flex;align-items:center;gap:1rem;z-index:9999}.error-banner button{margin-left:auto;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:4px;padding:.2rem .6rem;cursor:pointer}.lobby{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--green-felt) 0%,var(--green-dark) 100%)}.lobby-card{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:440px;box-shadow:0 8px 40px #00000080}.lobby-title{font-size:2.4rem;font-weight:800;color:var(--gold);text-align:center;letter-spacing:1px}.lobby-subtitle{text-align:center;color:var(--text-muted);margin:.3rem 0 1.5rem;font-size:.9rem}.status{padding:.4rem .8rem;border-radius:4px;font-size:.85rem;margin-bottom:1rem;text-align:center}.status--connecting{background:rgba(255,200,0,.15);color:#f4b942}.status--connected{background:rgba(0,200,0,.15);color:#52c41a}.lobby-info{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.05);border-radius:var(--radius);padding:.6rem 1rem;margin-bottom:1rem}.room-label{color:var(--text-muted);font-size:.85rem;margin-right:.4rem}.room-code-display{font-size:1.5rem;font-weight:800;color:var(--gold);letter-spacing:4px}.player-list{background:rgba(255,255,255,.04);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:1rem}.player-list h3{font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem}.player-list ul{list-style:none}.player-list li{padding:.2rem 0;font-size:.95rem}.player-item--me{color:var(--gold);font-weight:600}.empty-list{color:var(--text-muted);font-size:.85rem}.lobby-hint{margin-bottom:1rem;font-size:.85rem;color:var(--text-muted);text-align:center}.ready-hint{color:#52c41a}.join-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.3rem}.form-group label{font-size:.85rem;color:var(--text-muted)}.form-group input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);color:#fff;padding:.55rem .8rem;font-size:1rem;outline:none}.form-group input:focus{border-color:var(--gold)}.mode-tabs{display:flex;gap:.5rem}.tab{flex:1;padding:.45rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text-muted);cursor:pointer;font-size:.9rem;transition:all .15s}.tab--active{background:var(--green-felt);color:#fff;border-color:var(--green-light)}.game-room{display:flex;flex-direction:column;height:100vh;background:radial-gradient(ellipse at center,var(--green-felt) 0%,var(--green-dark) 100%)}.game-header{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.room-code{font-size:.8rem;color:var(--text-muted)}.player-name{font-weight:700;color:var(--gold);margin-left:auto}.player-score{font-weight:600}.game-body{display:flex;flex:1;overflow:hidden}.game-sidebar{width:260px;flex-shrink:0;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.75rem;background:var(--sidebar-bg);border-right:1px solid rgba(255,255,255,.07)}.game-main{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.hand-rule-display{background:rgba(255,255,255,.06);border-radius:var(--radius);padding:.75rem}.hand-rule-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}.hand-number{font-size:.75rem;color:var(--text-muted)}.hand-trump{font-size:1.1rem;font-weight:700}.hand-description{font-size:.82rem;color:#ddd;line-height:1.4}.hand-special{margin-top:.4rem;font-size:.8rem;color:#f4b942;background:rgba(244,185,66,.08);border-radius:4px;padding:.3rem .5rem}.scoreboard{background:rgba(255,255,255,.06);border-radius:var(--radius);padding:.75rem}.scoreboard-title{font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}.score-table{width:100%;border-collapse:collapse;font-size:.82rem}.score-table th{color:var(--text-muted);font-weight:500;text-align:left;padding:.2rem .3rem;border-bottom:1px solid rgba(255,255,255,.08)}.score-row td{padding:.25rem .3rem}.score-row--me td{color:var(--gold);font-weight:600}.score-value{font-weight:700;text-align:right}.you-badge{font-size:.7rem;opacity:.7}.table-players{display:flex;gap:1.5rem;font-size:.85rem;background:rgba(0,0,0,.2);border-radius:var(--radius);padding:.5rem .75rem;flex-wrap:wrap}.partner-label{color:#52c41a;font-weight:600}.opponent-label{color:#e74c3c;font-weight:600}.trick-area{background:rgba(0,0,0,.25);border-radius:var(--radius);padding:.75rem}.trick-meta{display:flex;gap:1.5rem;font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem}.trick-count strong{color:var(--text-light)}.trick-table{position:relative;display:grid;grid-template-areas:".    top   ." "left center right" ".    bottom .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:.4rem;max-width:380px;margin:0 auto}.trick-seat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.trick-seat--top{grid-area:top}.trick-seat--bottom{grid-area:bottom}.trick-seat--left{grid-area:left}.trick-seat--right{grid-area:right}.trick-center{grid-area:center;display:flex;align-items:center;justify-content:center;font-size:2rem;opacity:.4}.trick-player-name{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}.trick-seat--active .trick-player-name{color:var(--gold);font-weight:700}.trick-card{width:52px;height:72px;border-radius:var(--card-radius);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;background:var(--card-bg);color:var(--card-black)}.trick-card--red{color:var(--card-red)}.trick-card--empty{background:rgba(255,255,255,.06);color:#fff3;border-style:dashed}.last-trick{margin-top:.6rem;font-size:.78rem;color:var(--text-muted);text-align:center}.last-trick strong{color:#fff}.player-hand{background:rgba(0,0,0,.3);border-radius:var(--radius);padding:.75rem}.player-hand--empty{color:var(--text-muted);text-align:center;font-size:.9rem}.hand-label{font-size:.82rem;color:var(--text-muted);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.your-turn-badge{background:var(--gold);color:#1a1a1a;font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;letter-spacing:.5px}.cards-row{display:flex;flex-wrap:wrap;gap:.35rem}.card{width:56px;height:80px;border-radius:var(--card-radius);border:2px solid #ccc;background:var(--card-bg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}.card--red{color:var(--card-red);border-color:#e8b4b8}.card--black{color:var(--card-black);border-color:#ccc}.card--playable{border-color:var(--gold)!important;box-shadow:0 0 8px #f4b94280}.card--playable:hover{transform:translateY(-6px);box-shadow:0 6px 16px #f4b94299}.card--illegal{opacity:.5;cursor:not-allowed}.card--facedown{background:#1a3c5e;border-color:#2a5f8c;font-size:2rem;color:#aaa}.card-rank{font-size:.95rem;font-weight:700;line-height:1}.card-suit{font-size:1.1rem;line-height:1}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:100}.overlay-card{background:#1b2838;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:2rem;max-width:480px;width:90%;box-shadow:0 8px 40px #0009;display:flex;flex-direction:column;gap:1rem}.overlay-title{font-size:1.6rem;font-weight:800;text-align:center}.hand-results{display:flex;flex-direction:column;gap:.5rem}.table-result{background:rgba(255,255,255,.05);border-radius:var(--radius);padding:.5rem .75rem;font-size:.85rem;display:flex;flex-direction:column;gap:.15rem}.game-end{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;background:radial-gradient(ellipse at center,var(--green-felt),var(--green-dark))}.game-end h1{font-size:3rem;color:var(--gold)}.winner-line{font-size:1.3rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}@media (max-width: 700px){.game-sidebar{display:none}.game-body{flex-direction:column}.trick-table{max-width:280px}.card{width:44px;height:64px}.card-rank{font-size:.8rem}}