:root{--felt-1: #0b6b3a;--felt-2: #094d2a;--felt-edge: #05331c;--gold: #e9c46a;--gold-bright: #ffd97a;--ink: #12212b;--card-face: #fbfaf5;--red: #d62828;--black: #1a1a1a;--panel: rgba(6, 26, 18, .82);--panel-border: rgba(233, 196, 106, .35);--text: #f2efe6;--muted: #a9c2b3}*{box-sizing:border-box}html,body,#root,.app{margin:0;height:100%;min-height:100vh}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 30%,#10432a,#05231490 80%),#041a10}.screen{min-height:100vh;padding:20px}.center{display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column}.btn-primary{width:100%;padding:14px;margin-top:18px;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;letter-spacing:.3px;color:var(--ink);background:linear-gradient(180deg,var(--gold-bright),var(--gold));cursor:pointer;box-shadow:0 6px 18px #00000059;transition:transform .08s ease,filter .15s ease}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{filter:grayscale(.5) brightness(.8);cursor:not-allowed}.home-screen{display:flex;align-items:center;justify-content:center}.home-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:30px;box-shadow:0 24px 60px #00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.logo{text-align:center;font-size:2.6rem;margin:0;letter-spacing:4px;color:var(--gold-bright);text-shadow:0 2px 10px rgba(0,0,0,.5);position:relative}.logo-suits{display:block;font-size:1.3rem;letter-spacing:8px;margin-top:4px}.info-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-bright);background:transparent;color:var(--gold-bright);font-size:.85rem;font-weight:800;font-style:italic;font-family:Georgia,serif;cursor:pointer;margin-left:8px;vertical-align:middle;transition:background .12s ease}.info-btn:hover{background:#e9c46a33}.rules-popup{background:#0000004d;border:1px solid var(--panel-border);border-radius:12px;padding:14px 18px;margin:8px 0 18px}.rules-list{margin:0;padding-left:18px;color:var(--text);font-size:.82rem;line-height:1.6}.rules-list li{margin-bottom:4px}.tagline{text-align:center;color:var(--muted);margin:6px 0 22px;font-size:.9rem}.segmented{display:flex;background:#0000004d;border-radius:12px;padding:4px;margin-bottom:20px}.seg{flex:1;padding:10px;border:none;background:transparent;color:var(--muted);font-weight:600;border-radius:9px;cursor:pointer}.seg.active{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink)}.field{display:block;margin-bottom:16px}.field>span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.field input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:var(--text);font-size:1rem}.field input:focus{outline:none;border-color:var(--gold)}.code-input{letter-spacing:6px;text-transform:uppercase;font-weight:700;text-align:center}.chip-row{display:flex;gap:10px}.chip{flex:1;padding:12px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:var(--text);font-weight:700;font-size:1.15rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}.chip.wide{font-size:1rem}.chip small{font-size:.68rem;font-weight:500;color:var(--muted)}.chip.active{border-color:var(--gold);background:#e9c46a2e;box-shadow:0 0 0 1px var(--gold) inset}.chip.active small{color:var(--gold-bright)}.chip:disabled{opacity:.4;cursor:not-allowed}.field-note{display:block;margin-top:6px;font-size:.72rem;color:var(--muted)}.field-toggle{display:flex;align-items:center;gap:10px;cursor:pointer}.field-toggle input{width:auto;accent-color:var(--gold)}.field-toggle span{margin:0;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--text)}.inline-error{color:#ffb4b4;background:#d6282826;border:1px solid rgba(214,40,40,.4);padding:10px;border-radius:9px;font-size:.88rem;margin-top:4px}.lobby-screen{display:flex;align-items:center;justify-content:center}.lobby-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:26px}.room-code-badge{text-align:center;margin-bottom:6px}.room-code-badge span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.room-code-badge strong{font-size:2.6rem;letter-spacing:10px;color:var(--gold-bright)}.lobby-meta{text-align:center;color:var(--muted);font-size:.88rem;margin:2px 0 14px}.dot-ok{color:#7fe0a3}.dot-bad{color:#ff9a9a}.lobby-hint{font-size:.8rem;color:var(--muted);background:#00000038;padding:10px 12px;border-radius:9px;border-left:3px solid var(--gold);margin-bottom:16px}.invite{margin-bottom:14px}.invite-label{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.invite-local{font-size:.82rem;color:var(--muted);background:#00000038;padding:10px 12px;border-radius:9px;margin:0}.invite-local code{color:var(--gold-bright);font-size:.8rem}.invite-local strong{color:var(--gold-bright);letter-spacing:2px}.invite-row{display:flex;gap:8px}.invite-url{flex:1;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:#0000004d;color:var(--text);font-size:.82rem;min-width:0}.copy-btn{padding:0 16px;border-radius:9px;border:none;font-weight:700;cursor:pointer;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);white-space:nowrap}.seat-list{list-style:none;padding:0;margin:0 0 18px}.seat{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;margin-bottom:8px;border:1px solid rgba(255,255,255,.08)}.seat.filled{background:#e9c46a1a}.seat.empty{background:#0003;border-style:dashed}.seat-num{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}.seat-name{font-weight:600}.seat-name em{color:var(--gold-bright);font-style:normal;font-size:.85rem}.host-tag{margin-left:auto;font-size:.65rem;font-weight:800;letter-spacing:1px;background:var(--gold);color:var(--ink);padding:3px 7px;border-radius:6px}.seat-waiting{color:var(--muted);font-style:italic}.waiting-text{text-align:center;color:var(--muted)}.card{position:relative;border-radius:6px;box-shadow:0 3px 8px #00000073;-webkit-user-select:none;user-select:none;flex-shrink:0;overflow:hidden;background:#fff;line-height:0}.card-sm{width:34px;height:48px}.card-md{width:72px;height:100px}.card-lg{width:90px;height:126px}.card-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}.card-playable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 0 0 2px var(--gold-bright),0 6px 14px #00000080}.card-playable:hover{transform:translateY(-16px)}.card-disabled{opacity:.5;filter:grayscale(.4)}.card-highlight{box-shadow:0 0 0 3px var(--gold-bright),0 0 22px #e9c46abf}.table-screen{display:flex;flex-direction:column;min-height:100vh;padding:14px}.status-bar{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.status-left,.status-right{display:flex;align-items:center;gap:10px;flex:1 1 0}.status-right{justify-content:flex-end}.status-center{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.status-chip{background:var(--panel);border:1px solid var(--panel-border);padding:8px 14px;border-radius:20px;font-size:.9rem}.status-chip strong{color:var(--gold-bright)}.trump-chip{display:flex;align-items:center;gap:6px;background:var(--card-face);color:var(--ink);padding:6px 14px;border-radius:20px;font-weight:700;box-shadow:0 4px 12px #0006}.trump-chip.red .trump-symbol{color:var(--red)}.trump-chip.black .trump-symbol{color:var(--black)}.trump-symbol{font-size:1.5rem}.trump-chip small{color:#556;font-weight:600}.opponents{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}.seat-tile{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;min-width:130px;transition:box-shadow .2s ease,border-color .2s ease}.seat-tile.current{border-color:var(--gold-bright);box-shadow:0 0 18px #e9c46a80}.seat-tile.winner{border-color:#7fe0a3;box-shadow:0 0 22px #7fe0a399}.seat-head{display:flex;align-items:center;gap:8px}.seat-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center}.seat-label{font-weight:600;font-size:.92rem}.starter-star{color:var(--gold-bright);margin-left:4px}.seat-stats{font-size:.82rem;color:var(--muted);margin:6px 0}.bid-locked{color:var(--gold-bright);font-weight:700}.tricks strong{color:var(--text)}.felt{flex:1;margin:10px auto;width:min(760px,96%);border-radius:140px;background:radial-gradient(ellipse at center,var(--felt-1),var(--felt-2));border:10px solid var(--felt-edge);box-shadow:inset 0 0 60px #00000080,0 10px 40px #00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;min-height:240px}.felt-hint{color:var(--gold-bright);font-weight:600;letter-spacing:.4px}.winner-banner{color:#b8f5cf;font-size:1.15rem;font-weight:800;animation:popIn .25s ease}@keyframes popIn{0%{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}.trick-area{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.trick-slot{display:flex;flex-direction:column;align-items:center;gap:4px;animation:dealIn .2s ease}@keyframes dealIn{0%{transform:translateY(-14px) scale(.9);opacity:0}to{transform:none;opacity:1}}.trick-owner{font-size:.75rem;color:var(--muted)}.your-area{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 14px 16px;margin-top:6px}.your-area.active{border-color:var(--gold-bright);box-shadow:0 0 22px #e9c46a66}.your-tag{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:10px;color:var(--gold-bright)}.your-stats{color:var(--muted);font-weight:500;font-size:.85rem}.hand{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:106px}.bid-panel{background:#0000004d;border:1px solid var(--panel-border);border-radius:14px;padding:10px 16px;margin-bottom:12px;text-align:center}.bid-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.bid-stepper{display:flex;align-items:center;gap:14px}.step-btn{width:46px;height:46px;border-radius:12px;border:1px solid var(--panel-border);background:#00000040;color:var(--gold-bright);font-size:1.6rem;font-weight:800;line-height:1;cursor:pointer;transition:transform .08s ease,background .12s ease}.step-btn:hover:not(:disabled){background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);transform:translateY(-2px)}.step-btn:disabled{opacity:.35;cursor:not-allowed}.step-value{min-width:70px;display:flex;flex-direction:column;align-items:center}.step-num{font-size:2rem;font-weight:800;color:var(--text);line-height:1}.step-value small{color:var(--muted);font-size:.72rem;margin-top:2px}.bid-confirm{width:auto;min-width:150px;margin:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal{background:linear-gradient(180deg,#0d3a24,#072616);border:1px solid var(--panel-border);border-radius:18px;padding:26px 28px;width:min(460px,100%);box-shadow:0 30px 70px #0009}.modal h2{margin:0 0 6px;text-align:center;color:var(--gold-bright)}.modal-sub{text-align:center;color:var(--muted);margin:0 0 16px}.trump-inline{font-size:1.3rem;vertical-align:middle}.result-table{width:100%;border-collapse:collapse;margin-bottom:18px}.result-table th,.result-table td{padding:10px 8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}.result-table th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.result-table td:nth-child(2),.result-table th:nth-child(2){text-align:left}.you-row{background:#e9c46a1f}.pts-hit{color:#7fe0a3;font-weight:800}.pts-miss{color:#ff9a9a;font-weight:700}.gameover .winner-line{text-align:center;font-size:1.3rem;font-weight:800;color:var(--gold-bright);margin:4px 0 18px}.scoreboard h3{text-align:center;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.total-score{font-weight:800;color:var(--gold-bright)}.scorecard-wrap{position:relative}.score-toggle{cursor:pointer}.score-toggle.active{border-color:var(--gold);background:#e9c46a2e}.scorecard-pop{position:absolute;top:calc(100% + 8px);left:0;width:min(260px,80vw);background:linear-gradient(180deg,#0d3a24,#072616);border:1px solid var(--panel-border);border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px #0009;z-index:40}.scorecard-head{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.scorecard-empty{text-transform:none;letter-spacing:0;color:var(--muted);font-style:italic}.scorecard-table{margin-bottom:0}.score-hi{color:#7fe0a3;font-weight:800}.score-lo{color:#ff9a9a;font-weight:700}.detailed-modal{width:min(680px,100%)}.detailed-scroll{overflow-x:auto;margin-bottom:14px}.detailed-table th,.detailed-table td{min-width:56px}.detailed-table td.round-cell{text-align:left;font-weight:700;color:var(--muted);white-space:nowrap}.detailed-table .total-row td{border-top:2px solid rgba(255,255,255,.2);font-size:1rem}.detailed-standings{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:.85rem;color:var(--muted);margin-bottom:8px}.detailed-standings .you-row{background:#e9c46a1f;border-radius:6px;padding:2px 6px}.toast{position:fixed;top:18px;left:50%;transform:translate(-50%);background:#d62828f2;color:#fff;padding:12px 20px;border-radius:10px;font-weight:600;box-shadow:0 8px 24px #0006;z-index:100;cursor:pointer}.spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--gold-bright);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.reconnecting-screen{background:radial-gradient(ellipse at center,var(--felt-1),var(--felt-2))}.reconnecting-screen .spinner{width:40px;height:40px;margin-bottom:8px}.reconnecting-title{font-size:1.2rem;font-weight:700;color:var(--text);margin:0}.reconnecting-sub{font-size:.85rem;color:var(--muted);margin:4px 0 0}.reconnecting-screen .btn-primary{width:auto;padding:12px 28px}.leave-btn{background:#d6282826;border:1px solid rgba(255,107,107,.4);color:#ff6b6b;border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s ease,border-color .12s ease;white-space:nowrap}.leave-btn:hover{background:#d628284d;border-color:#ff6b6bb3}.chat-fab{position:fixed;right:16px;bottom:16px;z-index:60;padding:12px 18px;border-radius:26px;border:1px solid var(--panel-border);background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);font-weight:800;cursor:pointer;box-shadow:0 8px 22px #00000073}.chat-unread{margin-left:6px;background:var(--red);color:#fff;border-radius:12px;padding:1px 7px;font-size:.75rem}.chat-window{position:fixed;right:16px;bottom:16px;z-index:60;width:min(330px,calc(100vw - 32px));height:min(460px,70vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 18px 44px #0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#00000040;font-weight:700;color:var(--gold-bright)}.chat-min{background:none;border:none;color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 6px}.chat-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.chat-empty{color:var(--muted);text-align:center;font-size:.85rem;margin:auto 0}.chat-msg{max-width:82%;padding:7px 11px;border-radius:12px;background:#ffffff14;align-self:flex-start;display:flex;flex-direction:column;gap:2px;word-break:break-word}.chat-msg.mine{align-self:flex-end;background:#e9c46a38}.chat-name{font-size:.7rem;font-weight:700;color:var(--gold-bright)}.chat-text{font-size:.9rem;color:var(--text)}.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}.chat-input input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0000004d;color:var(--text)}.chat-input input:focus{outline:none;border-color:var(--gold)}.chat-input button{padding:0 14px;border:none;border-radius:10px;font-weight:700;cursor:pointer;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink)}.chat-input button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:640px){.felt{border-radius:80px;min-height:200px}.card-lg{width:72px;height:100px}.opponents{gap:8px}.seat-tile{min-width:104px}}