:root{--bg: #0f1620;--panel: #1a2330;--panel-2: #243042;--accent: #7ad97a;--accent-2: #ffd054;--text: #e8edf3;--text-dim: #8a98aa;--danger: #e76060;--red: #d63a3a;--black: #1a2330;--card-bg: #f3f0e7;--card-border: #2a3344;--table-felt: #1e5f3d;--shadow: 0 4px 18px rgba(0, 0, 0, .45);--radius: 8px;--card-scale: 1;--card-w: calc(56px * var(--card-scale));--card-h: calc(80px * var(--card-scale))}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}button{font:inherit;cursor:pointer;border:1px solid var(--card-border);background:var(--panel-2);color:var(--text);padding:8px 14px;border-radius:var(--radius)}button:hover:not(:disabled){background:#2e3c52}button:disabled{opacity:.4;cursor:not-allowed}input,select{font:inherit;padding:6px 10px;border-radius:6px;border:1px solid var(--card-border);background:var(--panel);color:var(--text)}.screen{min-height:100vh;padding:24px}.onboarding{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:15vh}.onboarding input{font-size:1.2em;width:260px;text-align:center}.onboarding .error{color:var(--danger);font-size:.9em;margin:0}.net-status{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);padding:4px 10px;border-radius:999px;font-size:.82em}.net-status .dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.net-status.net-ok .dot{background:var(--accent)}.net-status.net-busy .dot,.net-status.net-connecting .dot{background:var(--accent-2);animation:pulse 1s infinite}.net-status.net-down .dot{background:var(--danger)}.net-status.net-down{color:var(--danger)}.net-status.net-busy .label{color:var(--accent-2)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.busy-overlay{position:fixed;bottom:16px;right:16px;background:#141e2df2;border:1px solid var(--accent-2);padding:10px 14px;border-radius:var(--radius);display:flex;align-items:center;gap:10px;z-index:100;box-shadow:var(--shadow);font-size:.9em;max-width:320px}.busy-overlay .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent-2);border-radius:50%;animation:spin .8s linear infinite}.busy-overlay .busy-text{color:var(--text)}@keyframes spin{to{transform:rotate(360deg)}}.lobby header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}.lobby .toolbar{display:flex;gap:8px;margin-bottom:16px}.lobby .create-form{background:var(--panel);padding:16px;border-radius:var(--radius);display:grid;gap:10px;grid-template-columns:1fr 1fr;max-width:600px;margin-bottom:16px}.lobby .create-form label{display:flex;align-items:center;gap:6px}.lobby .rooms{list-style:none;padding:0}.lobby .room-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 16px;background:var(--panel);border-radius:var(--radius);margin-bottom:8px;align-items:center}.lobby .room-row .meta{color:var(--text-dim);font-size:.9em}.lobby .empty{color:var(--text-dim);padding:24px;text-align:center}.room header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}.room .meta{color:var(--text-dim);font-size:.9em}.room .seats{display:grid;grid-template-areas:". top ." "left . right" ". bottom .";grid-template-columns:1fr 1.5fr 1fr;gap:24px;max-width:700px;margin:0 auto 24px}.room .seat{background:var(--panel);padding:20px;border-radius:var(--radius);text-align:center;min-height:110px}.room .seat.mine{outline:2px solid var(--accent)}.room .seat-TOP{grid-area:top}.room .seat-RIGHT{grid-area:right}.room .seat-BOTTOM{grid-area:bottom}.room .seat-LEFT{grid-area:left}.room .seat .label{color:var(--text-dim);font-size:.85em;margin-bottom:6px}.room .seat .status.ready{color:var(--accent)}.room .seat .status.waiting{color:var(--text-dim)}.room .occupant{display:flex;flex-direction:column;align-items:center;gap:4px}.room .stand-up{font-size:.78em;padding:3px 10px;margin-top:4px;background:var(--panel-2)}.room .actions{display:flex;gap:12px;justify-content:center;margin:24px 0}.last-match-banner{background:var(--panel);border:1px solid var(--accent-2);border-radius:var(--radius);padding:12px 16px;margin:0 auto 16px;max-width:700px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.last-match-banner .vs{color:var(--text-dim);margin:0 4px}.last-match-banner .hint{color:var(--text-dim);font-size:.88em;margin-left:auto}.room .spectators{margin-top:24px}.room .spectators ul{list-style:none;padding:0;color:var(--text-dim)}.game{display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto 1fr auto;grid-template-areas:"header header" "main sidebar" "footer sidebar";height:100vh;gap:12px;padding:12px}.game-header{grid-area:header;display:flex;align-items:center;gap:24px;background:var(--panel);padding:8px 16px;border-radius:var(--radius)}.game-header .room-name{font-weight:700}.game-header .header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.game-main{grid-area:main;position:relative}.game-footer{grid-area:footer}.game .sidebar{grid-area:sidebar;display:flex;flex-direction:column;gap:12px;min-height:0}.table{position:relative;height:100%;min-height:520px;background:var(--table-felt);border-radius:16px;display:grid;grid-template-areas:". north ." "west center east" ". south .";grid-template-columns:1fr 2fr 1fr;grid-template-rows:1fr 2fr 1fr;box-shadow:var(--shadow);overflow:hidden}.seat-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:8px;min-width:0}.seat-area.pos-north{grid-area:north}.seat-area.pos-south{grid-area:south}.seat-area.pos-west{grid-area:west}.seat-area.pos-east{grid-area:east}.seat-area .player-info{background:#0006;padding:6px 10px;border-radius:6px;color:#fff;text-align:center;min-width:100px;max-width:100%}.seat-area.active .player-info{outline:2px solid var(--accent-2)}.seat-area .seat-name{font-size:.8em;color:var(--text-dim)}.seat-area .caller-badge{background:var(--accent-2);color:#000;font-size:.7em;padding:1px 5px;border-radius:3px;margin-top:2px}.seat-area .dc-badge,.seat-area .bot-badge{background:var(--danger);color:#fff;font-size:.7em;padding:1px 5px;border-radius:3px}.opponent-cards{display:flex}.opponent-cards .card{width:40px;height:60px;pointer-events:none}.opponent-cards.stack-north{flex-direction:row}.opponent-cards.stack-north .card{margin-left:-28px}.opponent-cards.stack-north .card:first-child{margin-left:0}.opponent-cards.stack-east{flex-direction:column}.opponent-cards.stack-east .card{margin-top:-44px}.opponent-cards.stack-east .card:first-child{margin-top:0}.opponent-cards.stack-west{flex-direction:column}.opponent-cards.stack-west .card{margin-top:-44px}.opponent-cards.stack-west .card:first-child{margin-top:0}.table-center{grid-area:center;position:relative}.center-slot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.center-slot.center-south{transform:translate(-50%,10%)}.center-slot.center-north{transform:translate(-50%,-110%)}.center-slot.center-east{transform:translate(10%,-50%)}.center-slot.center-west{transform:translate(-110%,-50%)}.center-slot .card{box-shadow:0 4px 14px #0000008c}.trump-indicator{position:absolute;top:12px;left:12px;background:#0009;padding:6px 12px;border-radius:6px;font-weight:700;z-index:2}.trump-indicator .suit-hearts,.trump-indicator .suit-diamonds{color:var(--red)}.card{width:var(--card-w);height:var(--card-h);background:var(--card-bg);border:1px solid var(--card-border);border-radius:6px;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:calc(3px * var(--card-scale)) calc(5px * var(--card-scale));font-weight:700;box-shadow:0 1px 4px #0000004d;color:var(--black);font-size:calc(1em * var(--card-scale));transition:transform .15s,box-shadow .15s}.card.red{color:var(--red)}.card.black{color:var(--black)}.card.facedown{background:repeating-linear-gradient(45deg,#25406b,#25406b 6px,#1c3257 6px,#1c3257 12px)}.card .corner{display:flex;align-items:center;gap:2px;line-height:1}.card .corner.top-left{align-self:flex-start}.card .corner.bottom-right{align-self:flex-end;transform:rotate(180deg)}.card .corner .rank{font-size:.9em}.card .corner .suit{font-size:1em}.card .center-suit{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.8em}.card.disabled{opacity:.55;filter:grayscale(.4);cursor:not-allowed}.card:not(.disabled):not(.facedown):hover{transform:translateY(-4px);box-shadow:0 4px 10px #00000073}.card.dragging{opacity:.5}.card.drag-over{box-shadow:0 0 0 3px var(--accent),0 4px 10px #0006;transform:translateY(-2px)}.card.face-card{padding:calc(2px * var(--card-scale)) calc(4px * var(--card-scale));overflow:hidden}.card.face-card .corner{position:absolute;z-index:2;background:#f3f0e7d9;padding:0 2px;border-radius:3px}.card.face-card .corner.top-left{top:3%;left:4%}.card.face-card .corner.bottom-right{bottom:3%;right:4%}.card.face-card .portrait{position:absolute;top:14%;right:8%;bottom:10%;left:8%;background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:4px;z-index:1;box-shadow:inset 0 -8px 16px #00000040}.hand-wrap{background:var(--panel);border-radius:var(--radius);padding:6px 8px}.hand-controls{display:flex;gap:6px;align-items:center;padding:0 4px 6px;font-size:.85em;color:var(--text-dim);flex-wrap:wrap}.hand-controls .label{margin-right:4px}.hand-controls .spacer{flex:1;min-width:12px}.hand-controls button{padding:3px 10px;font-size:.88em}.hand-controls button.active{background:var(--accent);color:#000;border-color:var(--accent)}.hand-controls .reset-order{background:var(--accent-2);color:#000;border-color:var(--accent-2)}.hand-controls .card-scale{min-width:40px;text-align:center;color:var(--text);font-weight:700}.hand{display:flex;gap:calc(8px * var(--card-scale));justify-content:center;padding:4px;min-height:var(--card-h)}.opponent-cards .card,.opponent-cards .card.facedown{width:calc(40px * var(--card-scale));height:calc(60px * var(--card-scale))}.scoreboard{display:flex;align-items:center;gap:16px}.scoreboard .team{text-align:center}.scoreboard .team .label{font-size:.75em;color:var(--text-dim)}.scoreboard .team .score{font-size:1.6em;font-weight:700}.scoreboard .separator{color:var(--text-dim)}.scoreboard .target{color:var(--text-dim);font-size:.85em;margin-left:6px}.bidding.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);padding:16px 20px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:5}.bidding .prompt{margin-bottom:12px}.bidding .suits{display:flex;gap:8px;justify-content:center;margin-bottom:10px}.bidding .suit-btn{font-size:1.8em;width:56px;height:56px;padding:0}.bidding .suit-btn.hearts,.bidding .suit-btn.diamonds{color:var(--red)}.bidding .passes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.9em}.bidding.banner{position:absolute;left:50%;top:14px;transform:translate(-50%);background:#00000080;padding:6px 14px;border-radius:6px;color:var(--text-dim);z-index:4}.move-timer{font-size:1.4em;font-weight:700;min-width:60px;text-align:center;padding:4px 12px;background:var(--panel-2);border-radius:var(--radius)}.move-timer.urgent{background:var(--danger)}.move-timer.paused{background:var(--accent-2);color:#000}.chat{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--radius);padding:8px}.chat .tabs{display:flex;gap:4px;margin-bottom:6px}.chat .tabs button.active{background:var(--accent);color:#000}.chat ul{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.chat ul li{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.92em;word-break:break-word}.chat ul li.log-line{color:var(--text-dim);font-style:italic;font-size:.88em}.chat .composer{display:flex;gap:4px;margin-top:6px}.chat .composer input{flex:1}.voice-panel{background:var(--panel);border-radius:var(--radius);padding:8px 10px}.voice-panel .mic-on{background:var(--accent);color:#000}.voice-panel .mic-off{background:var(--panel-2)}.voice-peers{list-style:none;padding:0;margin:6px 0 0;font-size:.88em;color:var(--text-dim)}.voice-peers li{display:flex;align-items:center;gap:6px;padding:2px 0}.voice-peers .indicator{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.voice-peers .indicator.on{background:var(--accent)}.round-modal,.match-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);padding:24px 32px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);z-index:6}.round-modal .hint,.match-modal .hint{color:var(--text-dim);margin-top:8px;font-size:.9em}.last-trick-btn{background:var(--panel-2)}.leave-game{background:var(--danger);color:#fff;border-color:var(--danger)}.leave-game:hover:not(:disabled){background:#c84040}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--panel);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);min-width:320px;max-width:90vw}.modal h3{margin:0 0 12px}.modal .close{margin-top:16px}.last-trick-modal .empty{color:var(--text-dim)}.last-trick-modal .trick-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:16px;justify-content:center}.last-trick-modal .trick-list li{display:flex;flex-direction:column;align-items:center;gap:6px}.last-trick-modal .who{text-align:center;font-size:.85em}.last-trick-modal .who .seat-label{display:block;color:var(--text-dim);font-size:.78em}.last-trick-modal .who .player-name{font-weight:600}.round-summary-modal{max-width:760px}.round-summary-modal .callout{margin-bottom:14px;color:var(--text-dim)}.round-summary-modal .callout strong{color:var(--accent-2)}.round-summary-modal .dim{color:var(--text-dim)}.round-summary-modal .totals{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0 20px}.round-summary-modal .team-total{background:var(--panel-2);padding:10px 16px;border-radius:var(--radius);text-align:center;min-width:150px;border:2px solid transparent}.round-summary-modal .team-total.caller{border-color:var(--accent-2)}.round-summary-modal .team-total .team-label{font-size:.85em;color:var(--text-dim)}.round-summary-modal .team-total .points{font-size:1.7em;font-weight:700;margin:4px 0}.round-summary-modal .team-total .balls{color:var(--accent);font-weight:600}.round-summary-modal .team-total .tricks-count{font-size:.8em;color:var(--text-dim);margin-top:4px}.round-summary-modal .totals .vs{color:var(--text-dim)}.round-summary-modal .tricks-section{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;max-height:50vh;overflow-y:auto}.round-summary-modal .tricks-section h4{margin:0 0 8px;font-size:.95em;color:var(--text-dim)}.round-summary-modal .trick-list-vertical{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.round-summary-modal .trick-list-vertical>li{background:var(--panel-2);border-radius:6px;padding:8px}.round-summary-modal .trick-meta{font-size:.82em;color:var(--text-dim);margin-bottom:6px}.round-summary-modal .trick-cards{display:flex;gap:4px;flex-wrap:wrap}.round-summary-modal .mini-played{display:flex;flex-direction:column;align-items:center;gap:2px}.round-summary-modal .mini-played .card{width:38px;height:54px;font-size:.7em;pointer-events:none}.round-summary-modal .mini-played .mini-name{font-size:.65em;color:var(--text-dim);max-width:50px;text-align:center;line-height:1}.round-summary-modal .empty{color:var(--text-dim);padding:8px}.round-summary-modal .match-line{text-align:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}.round-summary-modal .close.primary{display:block;margin:12px auto 0;background:var(--accent);color:#000;padding:8px 24px;border-color:var(--accent)}