:root{--felt: #1b5e3b;--felt-dark: #12472c;--ink: #e8e6df;--muted: #9db4a7;--gold: #e8b64c;--panel: #10241a;--panel-border: #234533;--red: #c62828;--black: #1a1a1a}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0b1a12;color:var(--ink)}.app{min-height:100vh;display:flex;flex-direction:column}button{font:inherit;color:var(--ink);background:#1e4632;border:1px solid #2f6b4c;border-radius:6px;padding:8px 14px;cursor:pointer}button:hover:not(:disabled){background:#27573f}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--gold);color:#20180a;border-color:#b98c2e;font-weight:600}button.primary:hover:not(:disabled){background:#f2c66d}button.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:4px}input{font:inherit;padding:8px 10px;border-radius:6px;border:1px solid #2f6b4c;background:#0d2016;color:var(--ink)}.muted{color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:20px}.conn-banner{position:fixed;top:0;left:0;right:0;background:#8a6d1d;color:#fff8e1;text-align:center;padding:4px;z-index:50}.toast{position:fixed;top:40px;left:50%;transform:translate(-50%);background:#5c1f1f;border:1px solid #a33;padding:10px 18px;border-radius:8px;z-index:60;cursor:pointer}.home{margin:auto;text-align:center;padding:24px;max-width:420px}.logo{font-size:96px;margin:0;color:var(--gold);text-shadow:0 4px 18px rgba(0,0,0,.5)}.tagline{color:var(--muted);margin-bottom:24px}.home-panel{display:flex;flex-direction:column;gap:14px;text-align:left}.home-panel label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--panel-border)}.join-row{display:flex;gap:8px}.code-input{text-transform:uppercase;letter-spacing:8px;font-size:20px;width:140px;text-align:center}.lobby{margin:auto;max-width:720px;padding:24px;text-align:center}.code-badge{font-size:26px;letter-spacing:6px;background:#0d2016;border:1px dashed #2f6b4c;padding:4px 14px;font-family:ui-monospace,monospace}.seats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.seat-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:16px;min-height:120px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}.seat-card.me{border-color:var(--gold)}.seat-card.empty{border-style:dashed}.seat-name{font-weight:600;display:flex;gap:6px;align-items:center}.seat-sub{font-size:13px;color:var(--muted);text-transform:capitalize}.seat-team{font-size:12px;color:var(--muted)}.badge{font-size:11px;padding:1px 7px;border-radius:10px;background:#2f6b4c;font-weight:400}.badge.host{background:#6b5a2f}.badge.you{background:#2f5a6b}.badge.off{background:#6b2f2f}.badge.bid{background:#6b2f5a}.badge.pass{background:#444}.badge.marriage{background:#7a3b8f}.bot-buttons{display:flex;gap:6px}.bot-buttons button{font-size:13px;padding:4px 8px;text-transform:capitalize}.lobby-actions{display:flex;gap:16px;justify-content:center;align-items:center}.game{display:grid;grid-template-columns:1fr 300px;grid-template-rows:1fr auto;gap:12px;padding:12px;height:100vh}.table{display:grid;gap:8px;grid-template-areas:". top ." "left center right" "bottom bottom bottom";grid-template-rows:auto 1fr auto;grid-template-columns:180px 1fr 180px;background:radial-gradient(ellipse at center,var(--felt) 0%,var(--felt-dark) 80%);border-radius:16px;padding:12px}.area-top{grid-area:top;display:flex;justify-content:center}.area-left{grid-area:left;display:flex;align-items:center}.area-right{grid-area:right;display:flex;align-items:center;justify-content:flex-end}.area-bottom{grid-area:bottom;display:flex;flex-direction:column;gap:8px;align-items:center}.trick-center{grid-area:center;position:relative;min-height:240px}.side{display:flex;flex-direction:column;gap:10px;overflow:hidden}.action-bar{grid-column:1 / -1;display:flex;gap:14px;align-items:center;justify-content:center;min-height:58px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:8px 16px}.ab-label{color:var(--muted);font-size:14px}.action-bar input[type=range]{width:220px;accent-color:var(--gold)}.suit-btn{font-size:22px;padding:6px 16px}.suit-btn.red{color:#ff8a80}.player-seat{background:#00000040;border:2px solid transparent;border-radius:10px;padding:8px 12px;min-width:150px;text-align:center}.player-seat.turn{border-color:var(--gold);box-shadow:0 0 12px #e8b64c66}.ps-name{font-weight:600}.ps-badges{display:flex;gap:4px;justify-content:center;min-height:18px;flex-wrap:wrap}.ps-cards{display:flex;gap:2px;justify-content:center;margin-top:4px}.mini-back{width:8px;height:12px;background:#3d6b8f;border:1px solid #24455c;border-radius:2px;display:inline-block}.trick-slot{position:absolute}.trick-slot.bottom{bottom:8px;left:50%;transform:translate(-50%)}.trick-slot.top{top:8px;left:50%;transform:translate(-50%)}.trick-slot.left{left:12px;top:50%;transform:translateY(-50%)}.trick-slot.right{right:12px;top:50%;transform:translateY(-50%)}.trick-status{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:15px;pointer-events:none}.trick-slot.won .card{border-color:var(--gold);box-shadow:0 0 16px #e8b64cd9}.trick-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0a1911eb;border:1px solid var(--gold);color:var(--ink);border-radius:999px;padding:8px 20px;font-size:16px;white-space:nowrap;box-shadow:0 4px 18px #00000080}.trick-banner b{color:var(--gold)}.card{width:62px;height:88px;background:#f8f6f0;color:var(--black);border:1px solid #b9b4a5;border-radius:8px;padding:6px;display:inline-flex;flex-direction:column;align-items:flex-start;font-weight:700;transition:transform .12s ease,box-shadow .12s ease}.card .rank{font-size:18px;line-height:1}.card .suit{font-size:22px;line-height:1.1}.card.red{color:var(--red)}.card.small{width:46px;height:64px;padding:4px}.card.small .rank{font-size:14px}.card.small .suit{font-size:16px}.card.clickable{cursor:pointer}.card:disabled{cursor:default}.hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.hand .card:not(.playable){opacity:.72}.hand .card.playable{transform:translateY(-10px);border-color:var(--gold);box-shadow:0 4px 10px #00000073}.hand .card.playable:hover{transform:translateY(-16px)}.score-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:12px 14px;font-size:14px;overflow-y:auto;flex:1}.score-row.big{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;margin-bottom:10px}.score-row.big b{font-size:26px;color:var(--gold)}.score-panel dl{margin:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.score-panel dl>div{display:flex;justify-content:space-between;gap:8px}.score-panel dt{color:var(--muted)}.score-panel dd{margin:0;text-align:right}.bid-history{font-size:12.5px;margin-bottom:8px}.last-trick{margin-bottom:8px}.last-trick-cards{display:flex;gap:4px;margin-top:4px}.log{border-top:1px solid var(--panel-border);padding-top:8px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px}.leave{align-self:center}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:40}.panel.result{text-align:center;min-width:340px}.panel.result h2{margin-top:0;color:var(--gold)}.panel.result h2.bad{color:#ef9a9a}.panel.result .good{color:var(--gold)}.panel.result .bad{color:#ef9a9a}.ab-note{font-size:12.5px}.reverse-toggle{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;white-space:nowrap}.reverse-toggle input{accent-color:var(--gold);width:16px;height:16px}.row{display:flex;gap:10px;justify-content:center}.ta{color:#7fd0c9}.tb{color:#f0a868}.player-seat.ta{border-left:3px solid #2d8f85}.player-seat.tb{border-left:3px solid #b06a28}.log .ta,.log .tb{opacity:.95}.settings{margin:0 auto 20px;max-width:560px;padding:12px 16px;text-align:left}.settings-toggle{background:none;border:none;font-weight:600;color:var(--gold);padding:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:12px}.settings-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}.settings-grid select{font:inherit;padding:6px 8px;border-radius:6px;border:1px solid #2f6b4c;background:#0d2016;color:var(--ink)}.settings-grid select:disabled{opacity:.6}.settings-grid p{grid-column:1 / -1;margin:0;font-size:12.5px}.help-button{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;font-size:20px;font-weight:700;background:var(--gold);color:#20180a;border:none;z-index:55;box-shadow:0 4px 14px #00000080}.help-button:hover{background:#f2c66d}.help-panel{position:relative;max-width:560px;max-height:82vh;overflow-y:auto;text-align:left}.help-panel h2{margin-top:0;color:var(--gold)}.help-panel h3{margin:16px 0 6px;color:var(--gold);font-size:15px}.help-panel ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45}.help-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:24px;color:var(--muted);padding:2px 8px}.panel.result{animation:pop-in .35s ease}.panel.result.lost{animation:shake .5s ease;border-color:#6b2f2f}@keyframes pop-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:45}.confetti span{position:absolute;top:-8%;color:#d8d4c8;animation-name:confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards}.confetti span.red{color:#ef9a9a}@keyframes confetti-fall{to{transform:translateY(118vh) rotate(340deg);opacity:.25}}.trump-flash{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:46}.trump-flash-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:#0a1911f0;border:2px solid var(--gold);border-radius:16px;padding:26px 44px;box-shadow:0 0 40px #e8b64c80;animation:trump-pop 1.7s ease forwards}.trump-flash-card .tf-symbol{font-size:64px;line-height:1}.trump-flash-card.red .tf-symbol{color:#ef9a9a}.trump-flash-card .tf-text{color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:13px}@keyframes trump-pop{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.06);opacity:1}25%{transform:scale(1)}80%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}.chat-box{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;display:flex;flex-direction:column;min-height:140px;max-height:220px}.chat-messages{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:13.5px}.chat-line{display:flex;gap:6px;line-height:1.35}.chat-name{font-weight:600;flex-shrink:0}.chat-name:after{content:":"}.chat-text{word-break:break-word}.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--panel-border)}.chat-input-row input{flex:1;padding:6px 8px;font-size:13.5px}.chat-input-row button{padding:6px 10px;font-size:13.5px}.lobby-chat{margin:20px auto 0;max-width:560px;text-align:left}.side-row{display:flex;justify-content:space-between;align-items:center}.sound-toggle{font-size:13px;padding:4px 10px}.trick-banner{animation:banner-in .18s ease}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}.side-tabs{display:none}.side-pane{display:block}@media (max-width: 920px){.game{display:flex;flex-direction:column;height:auto;min-height:100vh;padding:8px;gap:8px}.table{grid-template-columns:86px 1fr 86px;grid-template-rows:auto minmax(170px,1fr) auto;min-height:400px;padding:8px;border-radius:12px}.player-seat{min-width:0;width:100%;padding:6px;font-size:13px;border-radius:8px}.ps-badges .badge{font-size:10px;padding:0 5px}.mini-back{width:6px;height:9px}.trick-center{min-height:170px}.trick-banner{font-size:13.5px;padding:6px 14px}.hand{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding:12px 4px 6px;-webkit-overflow-scrolling:touch}.hand .card{width:48px;height:68px;flex-shrink:0;padding:4px}.hand .card .rank{font-size:15px}.hand .card .suit{font-size:18px}.hand .card.playable{transform:translateY(-6px)}.card.small{width:40px;height:56px}.card.small .rank{font-size:12px}.card.small .suit{font-size:14px}.action-bar{position:sticky;bottom:0;z-index:25;flex-wrap:wrap;gap:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.action-bar input[type=range]{width:140px}.side{overflow:visible}.side-tabs{display:flex;gap:6px}.side-tabs button{flex:1;padding:10px;font-size:14px}.side-tabs button.active{background:var(--gold);color:#20180a;border-color:#b98c2e;font-weight:600}.side-pane{display:none}.side-pane.show{display:block}.score-panel{font-size:13px;overflow-y:visible}.chat-box{max-height:300px}.panel.result{min-width:0;width:92vw;max-width:420px;padding:16px}.seats-grid,.settings-grid{grid-template-columns:1fr}.lobby{padding:16px 12px}.code-badge{font-size:20px;letter-spacing:4px}.help-button{right:12px;bottom:12px;width:40px;height:40px}.logo{font-size:64px}}button,.card,input,select{touch-action:manipulation}button{-webkit-tap-highlight-color:transparent}