:root{--felt:#0b3a2f;--felt-dark:#061f1a;--gold:#e7b85c;--ivory:#fffaf0;--ink:#17201d;--muted:#9db8af;--red:#c84f42;--shadow:0 18px 45px #00130e66}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -10%,#174c40,#061713 72%);color:var(--ivory);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;min-height:100vh;overflow-x:hidden}.app-shell{width:min(1480px,100%);margin:auto;padding:16px 26px 24px}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid #e7b85c88;border-radius:12px;color:var(--gold);font-family:serif;font-size:24px;background:#e7b85c0c}.brand h1{font-family:serif;font-size:20px;letter-spacing:.18em;margin:0}.brand p{color:var(--muted);font-size:11px;margin:2px 0 0;letter-spacing:.12em}.round-meta{display:flex;align-items:center;gap:12px;color:#c8d8d3;font-size:13px}.round-meta strong{color:#22190b;background:linear-gradient(135deg,#f1d18e,#d9a749);padding:8px 14px;border-radius:20px}.icon-btn{width:30px;height:30px;border-radius:50%;border:1px solid #ffffff25;color:#d7e5df;background:#ffffff0b;cursor:pointer}
.table-wrap{perspective:1200px}.table{height:min(76vh,760px);min-height:590px;position:relative;border-radius:52px;background:radial-gradient(circle at 50% 47%,#125846 0,#0c4235 50%,#082c25 100%);border:10px solid #142823;box-shadow:inset 0 0 0 2px #ffffff12,inset 0 0 100px #001c1580,var(--shadow);overflow:hidden}.table:after{content:"";position:absolute;inset:14px;border:1px solid #d9be7330;border-radius:38px;pointer-events:none}.ambient{position:absolute;border-radius:50%;filter:blur(50px);opacity:.16}.ambient-a{width:300px;height:300px;background:#55dcaa;left:8%;top:12%}.ambient-b{width:260px;height:260px;background:#e3ad57;right:8%;bottom:4%}
.player{position:absolute;z-index:5}.player-card{display:flex;align-items:center;gap:8px;background:#031f1aa8;border:1px solid #ffffff13;padding:6px 12px 6px 6px;border-radius:40px;box-shadow:0 8px 24px #00130e44;transition:.25s}.player-card .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#d9c195;color:#382a13;font-family:serif;font-weight:bold}.player-card .avatar.human{background:#d75848;color:white}.player-card b{font-size:13px;display:block}.player-card small{color:#a8c1b9;font-size:11px}.player.active .player-card{border-color:#e7b85c88;box-shadow:0 0 18px #e7b85c30}.player-top{top:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}.player-left{left:18px;top:49%;transform:translateY(-50%)}.player-right{right:18px;top:49%;transform:translateY(-50%)}.player-bottom{bottom:20px;left:50%;width:min(90%,940px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}.player-bottom .player-card{position:absolute;left:0;bottom:3px}
.hand-back{display:flex;gap:2px;margin-top:10px}.tile-back{width:27px;height:38px;border-radius:4px;background:linear-gradient(135deg,#d5bd82,#a98642);border:2px solid #f2dba4;box-shadow:0 3px 0 #6e552a}.vertical{position:absolute;top:54px;display:grid;grid-template-columns:repeat(2,17px);gap:1px}.player-left .vertical{left:5px}.player-right .vertical{right:5px}.vertical .tile-back{width:24px;height:31px}.melds{display:flex;gap:8px;margin-top:7px}.vertical-melds{position:absolute;top:145px;display:flex;flex-direction:column}.player-left .vertical-melds{left:1px}.player-right .vertical-melds{right:1px}.meld-group{display:flex;gap:1px;padding:3px;background:#001b1644;border-radius:5px}.meld-group .tile{width:29px;height:40px;font-size:25px}.human-melds{height:43px;margin:0 0 4px}.human-melds:empty{height:0;margin:0}.human-hand{display:flex;justify-content:center;align-items:flex-end;gap:3px;height:86px;padding:0 70px}
.tile{width:52px;height:72px;flex:0 0 auto;border:1px solid #fffdf5;border-radius:7px;background:linear-gradient(145deg,#fffef7 0%,#f3ecd9 72%,#ddd1b4 100%);color:var(--ink);box-shadow:inset 0 1px 2px #fff,0 6px 0 #a99b79,0 9px 13px #00171055;display:grid;place-items:center;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;font-weight:400;font-size:46px;line-height:1;cursor:default;position:relative;user-select:none}.tile span{display:block;transform:translateY(-1px)}.tile.suit-m,.tile.suit-h-red{color:#c93f35}.tile.suit-s,.tile.suit-h-green{color:#128154}.tile.suit-p,.tile.suit-h-white{color:#2269a7}.tile.suit-h{color:#25332f}.tile.clickable{cursor:pointer;transition:transform .14s,filter .14s}.tile.clickable:hover,.tile.selected{transform:translateY(-12px);filter:brightness(1.08)}.tile.drawn{margin-left:18px;box-shadow:inset 0 1px 2px #fff,0 6px 0 #a99b79,0 9px 18px #00171077,0 0 0 1px #e7b85c55}.tile.small{width:31px;height:42px;font-size:28px;border-radius:4px;box-shadow:inset 0 1px 1px #fff,0 3px 0 #a99b79,0 4px 7px #00171055}.river{position:absolute;z-index:3;display:grid;gap:4px}.river .tile{width:28px;height:38px;font-size:25px;border-radius:4px;box-shadow:inset 0 1px 1px #fff,0 3px 0 #a99b79,0 4px 7px #00171044}.river-bottom{bottom:140px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(10,28px)}.river-top{top:104px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(10,28px)}.river-left{left:115px;top:50%;transform:translateY(-50%);grid-template-columns:repeat(6,28px);max-width:188px}.river-right{right:115px;top:50%;transform:translateY(-50%);grid-template-columns:repeat(6,28px);max-width:188px}
.center-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:150px;height:150px;border:1px solid #d4bd7950;border-radius:20px;background:#062a23cc;box-shadow:inset 0 0 30px #0005,0 12px 30px #00150f66;display:grid;place-items:center;z-index:4}.center-panel>*{transform:rotate(-45deg);position:absolute}.wind{left:18px;top:16px;color:var(--gold);font-family:serif;font-size:18px}.wall-count{display:flex;flex-direction:column;align-items:center}.wall-count strong{font:32px Georgia,serif;color:#f2dfb3}.wall-count span{font-size:10px;color:#8faea5;letter-spacing:.16em}.turn-indicator{bottom:17px;font-size:10px;color:#b7ccc5;white-space:nowrap}
.action-bar{height:68px;margin-top:12px;border:1px solid #ffffff10;background:#071f1aaa;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 20px;box-shadow:0 12px 30px #00100d55}.message{display:flex;align-items:center;gap:10px;color:#b7cbc5;font-size:13px}.message-dot{width:7px;height:7px;border-radius:50%;background:#e7b85c;box-shadow:0 0 10px #e7b85c}.actions{display:flex;gap:8px}.btn{border:0;border-radius:11px;padding:11px 22px;font-weight:700;cursor:pointer;font-size:14px}.primary{background:linear-gradient(135deg,#f0cb7d,#d9a64b);color:#261d0d;box-shadow:0 6px 18px #d2a54a2d}.secondary{background:#ffffff0d;color:#d8e5e0;border:1px solid #ffffff18}.danger{background:#b94c42;color:#fff}.action-circle{width:48px;height:48px;border-radius:50%;border:1px solid #e8c77488;background:#0d3029;color:#edcc86;font:700 19px serif;cursor:pointer;box-shadow:0 7px 18px #00130e66}.action-circle.pass{border-color:#ffffff25;color:#9eb5ad}
.modal{position:fixed;inset:0;background:#00100cc9;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:20;padding:20px}.modal.hidden{display:none}.modal-card{position:relative;width:min(520px,100%);background:linear-gradient(145deg,#123a31,#08261f);border:1px solid #d7bd7244;border-radius:28px;padding:36px;box-shadow:0 30px 90px #0009}.modal-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#adc0ba;font-size:25px;cursor:pointer}.result-card{text-align:center}.result-icon{margin:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f1d287,#d99f3e);color:#38280f;font:35px serif;box-shadow:0 0 35px #eab95640}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:#d4b96f;margin:18px 0 7px}.modal h2{font:30px serif;margin:0 0 12px}.result-desc{color:#a9c0b8;font-size:13px;line-height:1.7}.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0}.score-item{background:#ffffff08;border-radius:10px;padding:10px 4px}.score-item b,.score-item span{display:block}.score-item b{font-size:12px}.score-item span{font:18px Georgia;margin-top:4px}.score-item .plus{color:#edc875}.score-item .minus{color:#e77c70}.next-base{background:#031e19;border:1px solid #ffffff0d;padding:11px;border-radius:10px;color:#afc4bd;font-size:12px}.modal-actions{display:flex;gap:10px;margin-top:20px}.modal-actions .btn{flex:1}.rules-card{width:min(650px,100%);text-align:left}.rules-card .eyebrow{margin-top:0}.rules-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.rules-list article{background:#ffffff07;border:1px solid #ffffff0a;border-radius:13px;padding:13px}.rules-list b{color:#e8c87e}.rules-list p{font-size:12px;color:#b1c3bd;line-height:1.65;margin:5px 0 0}.toast{position:fixed;left:50%;top:18%;transform:translate(-50%,-10px);background:#f2e0b7;color:#2a2112;padding:10px 20px;border-radius:30px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:30;box-shadow:0 10px 30px #0005}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){.app-shell{padding:8px}.topbar{height:54px}.brand p{display:none}.table{height:calc(100vh - 145px);min-height:570px;border-radius:30px;border-width:6px}.player-left{left:7px}.player-right{right:7px}.player-card{padding:4px}.player-card div{display:none}.player-bottom .player-card{left:-1px}.hand-back .tile-back:nth-child(n+9){display:none}.human-hand{gap:1px;padding:0 36px;transform:scale(.78);transform-origin:center bottom;width:125%}.river-left{left:66px}.river-right{right:66px}.river{gap:2px}.river-bottom,.river-top{grid-template-columns:repeat(8,25px)}.river .tile{width:25px;height:34px;font-size:17px}.center-panel{width:112px;height:112px}.action-bar{margin-top:6px}.message{font-size:11px}.rules-list{grid-template-columns:1fr}.modal-card{padding:28px 20px}.score-grid{gap:3px}}