*{box-sizing:border-box}body{margin:0;background:#0c1d29;color:#f5f8fb;font:15px system-ui,Microsoft YaHei,sans-serif}main{max-width:1100px;margin:auto;padding:24px}h1{font-size:27px}section{background:#1a3343;border-radius:15px;padding:20px;margin:20px 0}section>div{margin-top:12px}input{background:#0b1926;color:#fff;padding:12px;border:1px solid #547181;border-radius:9px;margin:5px;max-width:220px}button{border:0;border-radius:8px;background:#edbc68;color:#152431;padding:10px 16px;margin:4px;cursor:pointer;font-weight:700}button:disabled{opacity:.4;cursor:not-allowed}.table{min-height:330px;background:radial-gradient(ellipse,#27805e,#115344);border:10px solid #61472b;border-radius:65px;padding:24px}.seats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px}.seat{background:#18483f;border:1px solid #7db79a;padding:10px;border-radius:10px;min-width:125px;text-align:center}.seat p{margin:5px}.seat.active{outline:3px solid #ffd26c}.center{text-align:center;margin-top:55px}.hand{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:25px}.card{background:#fff9ef;color:#202b32;border:1px solid #ccc1ac;border-radius:7px;min-width:38px;height:63px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.card.selected{transform:translateY(-13px);background:#ffe4a4}.actions{text-align:center;margin:20px}.error{background:#853c43;padding:12px;border-radius:9px}footer{color:#a9bbc5;font-size:12px;line-height:1.7;margin-top:35px}.scoreboard{overflow-x:auto}.scoreboard table{width:100%;border-collapse:collapse;text-align:left}.scoreboard th,.scoreboard td{padding:9px;border-bottom:1px solid #ffffff33}.positive{color:#86efac}.negative{color:#fca5a5}.round-record{padding:10px;border-bottom:1px solid #ffffff33}.round-record small{display:block;opacity:.7}details{margin:12px 0}:root{color-scheme:dark}html{-webkit-text-size-adjust:100%}body{overscroll-behavior-y:contain}main{width:100%;max-width:1280px;padding:clamp(10px,2vw,24px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar h1{margin:6px 0;font-size:clamp(19px,3vw,27px)}.topbar p{margin:4px 0 12px;color:#b4c9d3}.mobile-hint{font-size:12px;color:#ffda91}button{min-height:42px;touch-action:manipulation}input{min-height:44px;font-size:16px}.table{position:relative;min-height:clamp(210px,38vw,360px);border-width:clamp(5px,1vw,10px);padding:clamp(8px,2vw,24px)}.seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(3px,1vw,10px)}.seat{min-width:0;overflow:hidden;padding:clamp(5px,1vw,10px)}.seat b{font-size:clamp(10px,1.5vw,15px);overflow-wrap:anywhere}.seat p,.seat small{font-size:clamp(9px,1.2vw,13px)}.center{margin-top:clamp(14px,4vw,55px)}.center h2{font-size:clamp(15px,2.6vw,24px)}.hand{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;gap:0;padding:18px 16px 10px;margin:8px 0 0;min-height:102px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;touch-action:pan-x;user-select:none;-webkit-user-select:none}.touch-hand{touch-action:none}.hand .card{flex:0 0 auto;width:clamp(37px,6vw,60px);min-width:0;height:clamp(65px,10vw,88px);padding:6px 2px;margin:0 0 0 -13px;border:1px solid #c4b7a0;box-shadow:0 2px 5px #0004;position:relative}.hand .card:first-child{margin-left:0}.hand .card.selected{transform:translateY(-15px);z-index:2;border:2px solid #e7a432}.actions{position:sticky;bottom:0;z-index:4;background:#0c1d29ef;padding:8px 2px;margin:6px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px}.actions button{min-width:72px}section{margin:12px 0;padding:clamp(12px,2vw,20px)}.scoreboard{max-width:100%}@media (max-width:720px){.topbar p{font-size:11px}.table{border-radius:35px}.seats{grid-template-columns:repeat(3,minmax(0,1fr))}.center{margin-top:12px}.hand{justify-content:flex-start}.mobile-hint{white-space:nowrap}.actions button{padding:8px 10px}}@media (max-height:500px) and (orientation:landscape){main{padding:6px 12px}.topbar h1{font-size:17px}.topbar p{display:none}.table{min-height:160px;border-radius:45px;padding:8px}.seats{grid-template-columns:repeat(5,minmax(0,1fr))}.seat p{margin:2px}.center{margin-top:8px}.center h2{margin:4px}.hand{min-height:78px;padding-top:14px}.hand .card{height:62px;width:41px}.actions{padding:3px;margin:3px 0}.actions button{min-height:36px}}.hand .card{touch-action:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;cursor:pointer}.hand .card.selected{transform:translateY(-17px);background:#ffe4a4;outline:2px solid #ffcc55;outline-offset:-2px}.selection-status{text-align:center;color:#ffe0a0;margin:3px 0;font-size:13px}.played-hand{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:10px 0}.played-card{display:inline-flex;flex-shrink:0;width:45px;padding:5px;margin:0;font-weight:700;font-size:17px}.card.red-card{color:#c52835}.played-card span{font-size:23px}.invitation-controls{margin:8px 0}.invitation-controls p{margin:6px 4px;color:#ffe0a0}.invitation-controls label{display:block}.invitation-controls input{width:min(100%,560px);max-width:100%}.sound-settings{background:#152d3b;border:1px solid #547181;border-radius:10px;padding:10px 14px;margin:8px 0 14px}.sound-settings summary{cursor:pointer;font-weight:700}.sound-settings small{display:block;color:#b4c9d3;margin:5px}.sound-settings [aria-checked=false]{background:#526b79;color:#fff}.hand .card{transition:transform .15s ease,background-color .15s ease,border-color .15s ease}.hand .card:focus-visible{outline:3px solid #ffcf66;outline-offset:2px}.current-play .card{animation:card-deal .3s cubic-bezier(.2,.8,.2,1) both}.current-play .card:nth-child(2n){animation-delay:35ms}.current-play .card:nth-child(3n){animation-delay:.07s}.action-feedback{position:absolute;z-index:6;inset:38% 8% auto;text-align:center;pointer-events:none;animation:feedback-pop 1.1s ease both}.action-feedback span{display:inline-block;border:1px solid #ffe3a3;background:#112a39ed;color:#ffe3a3;border-radius:16px;padding:12px 24px;font-size:clamp(19px,3.5vw,34px);font-weight:900;box-shadow:0 8px 32px #0006}.feedback-bomb{animation:bomb-pop 1.6s ease both}.feedback-bomb span{color:#fff0c2;background:radial-gradient(ellipse,#a83e10,#402415);border:2px solid #ffc85e;text-shadow:0 0 14px #ff9b35;font-size:clamp(30px,6vw,60px)}.feedback-pass span{font-size:clamp(16px,2.5vw,24px);color:#d4dce2;border-color:#90a7b3}.feedback-bid span{background:#704d17}.feedback-win span{background:#285239}.fx-seat{animation:seat-flash 1s ease}.fx-bomb{animation:table-shake .45s ease}@keyframes card-deal{0%{opacity:0;transform:translateY(25px) rotate(-8deg) scale(.85)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes feedback-pop{0%{opacity:0;transform:translateY(15px) scale(.85)}18%,72%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-18px) scale(1.02)}}@keyframes bomb-pop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}15%{opacity:1;transform:scale(1.18) rotate(3deg)}27%,78%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(1.25)}}@keyframes seat-flash{0%,45%{box-shadow:0 0 22px #ffce6e;filter:brightness(1.3)}to{box-shadow:none;filter:brightness(1)}}@keyframes table-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@media (prefers-reduced-motion:reduce){.hand .card{transition:none}.current-play .card,.action-feedback,.feedback-bomb,.fx-seat,.fx-bomb{animation:none}.action-feedback{opacity:1}}
