/* 台山麻将 · 简洁高端牌桌视觉 V2 */
:root{--cream:#fbf5e2;--gold:#d5b873;--ink:#122f26;--glow:#f7d574;--wood:#472b1d;--felt:#0e5942;color:#f5ead0;background:#091913}
html,body{min-width:1024px}body{font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:radial-gradient(ellipse at 45% -30%,#24513d 0%,#091b16 68%);color:#f1e9d2}
.topbar{height:69px;background:linear-gradient(180deg,#102d22,#081711);border-bottom:1px solid #ae91546b;padding:0 3vw;box-shadow:0 4px 18px #06110dbb}
.brand{font-family:Georgia,"Noto Serif CJK SC",serif;color:#f0d5a0;letter-spacing:3px;font-weight:700}.brand b{font-size:23px}.brand span{color:#b6a585;font-family:Georgia,serif;font-size:10px}.pill{border:1px solid #9e90624f;background:#193b2d;color:#efdfb0;border-radius:9px;padding:8px 16px}
button{background:linear-gradient(#234a39,#173a2d);border:1px solid #927f52;color:#f8e8c2;border-radius:10px;padding:11px 18px;font-weight:600;box-shadow:0 3px 8px #0002}
button:hover:not(:disabled){background:linear-gradient(#315c49,#204434);filter:none;border-color:#e4c57a}
button.primary{background:linear-gradient(#eed49c,#cca866);border-color:#f9e4b3;color:#1f3929;box-shadow:inset 0 1px #fff8,0 3px 10px #0005}
button.danger{background:linear-gradient(#9a4e42,#6c342e);border-color:#c58a75}
.container{max-width:1160px}.heading{font-family:Georgia,"Noto Serif CJK SC",serif;font-size:38px;color:#f4ddaf}.panel{background:linear-gradient(155deg,#174334fa,#0b2c22fa);border:1px solid #9a87556d;box-shadow:inset 0 1px #b0c6a422,0 18px 50px #0004}.roomRow{border-color:#ae9b6c44}.seat{background:#0c3226;border-color:#a18d626e}.seat.active{border-color:#f2d498}
.deskWrap{max-width:1600px;margin:8px auto 12px;padding:0 clamp(8px,1.4vw,22px)}.deskWrap> .row.space{padding:3px 16px 0;min-height:44px}.deskWrap h2{font-family:Georgia,"Noto Serif CJK SC",serif;font-size:18px;letter-spacing:.5px;color:#e9d3a0;margin:0}.status{font-size:14px;letter-spacing:1px;color:#e8d29a;margin:2px 0 9px}.desk{aspect-ratio:1.97;min-height:690px;max-height:835px;width:100%;border:19px solid #533824;border-radius:31px;background:radial-gradient(ellipse at 48% 41%,#156b50 0%,#0d563f 56%,#063d30 100%);box-shadow:inset 0 0 0 2px #b98d55a3,inset 0 0 90px #062d24b0,0 3px 0 #7e5031,0 15px 45px #000b;overflow:hidden}
.desk::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:-20px;border:7px double #a47543;border-radius:25px;box-shadow:inset 0 0 5px #0007}.desk::after{content:"";position:absolute;z-index:0;pointer-events:none;inset:8px;border:1px solid #cfba8442;border-radius:14px}
.tablePattern{pointer-events:none;position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle at center,#95dfbd0a 0 1px,transparent 1.5px),radial-gradient(circle at 50% 50%,transparent 0 28%,#c7ad5920 28.1%,transparent 28.3%);background-size:9px 9px,100% 100%;opacity:.76}
.playerBox{z-index:4;background:linear-gradient(90deg,#052b23db,#0b342acd);border:1px solid #d2b5777b;border-radius:11px;padding:8px 13px;min-width:158px;text-align:center;box-shadow:0 6px 16px #00211582}
.playerBox strong{font-size:14px;letter-spacing:.6px;color:#f7e6c2}.playerBox small{font-size:13px;color:#d7b875}.playerBox.me{border-color:#f7d78e;box-shadow:0 0 0 1px #f2d08c55,0 5px 18px #0007}
.playerBox.north{top:1.5%;left:50%;transform:translateX(-50%)}.playerBox.south{bottom:15%;left:3%;top:auto;transform:none}.playerBox.west{left:1.3%;top:40%;transform:none}.playerBox.east{right:1.3%;top:40%;transform:none}
.otherHand{display:flex;gap:1px;justify-content:center;margin-top:5px}.otherHand .tinyTile{width:11px;height:19px;border:0;border-radius:2px;box-shadow:none;padding:0;background:#145a43}.otherHand .tinyTile .tileFace{height:100%;width:100%;object-fit:cover}.playerBox.west .otherHand,.playerBox.east .otherHand,.playerBox.south .otherHand{display:none}
.meld{display:flex;justify-content:center;gap:3px;margin-top:5px}.meld .tinyTile{width:22px;height:30px}
.wall{position:absolute;z-index:2;display:flex;gap:2px;justify-content:center;align-items:center}.wall.n{top:15%;left:25%;right:25%;transform:none}.wall.s{bottom:26%;left:25%;right:25%;transform:none}.wall.w{top:27%;left:17%;flex-direction:column}.wall.e{top:27%;right:17%;flex-direction:column}
.wallUnit{width:19px;height:31px;position:relative;flex:none;filter:drop-shadow(1px 2px 2px #00170ba8)}.wallUnit.empty{opacity:.05}.wallTop,.wallBottom{display:block;position:absolute;left:0;width:100%;height:14px;border-radius:3px 3px 2px 2px;border:1px solid #cfd8b7;background:linear-gradient(160deg,#f4ecd4 0%,#d6d8bf 42%,#217a59 44%,#18533e 100%);box-shadow:0 2px 0 #104331}.wallTop{top:0}.wallBottom{bottom:0;filter:brightness(.84)}.wall.w .wallUnit,.wall.e .wallUnit{width:31px;height:19px}.wall.w .wallTop,.wall.e .wallTop{width:14px;height:19px;top:0;left:0}.wall.w .wallBottom,.wall.e .wallBottom{width:14px;height:19px;bottom:0;left:auto;right:0}
.discard{z-index:3;position:absolute;display:grid;grid-template-columns:repeat(6,32px);grid-auto-rows:42px;gap:3px;max-width:217px;min-height:0;padding:0}.discard.n{top:26%;left:50%;transform:translateX(-50%)}.discard.s{bottom:38%;left:50%;transform:translateX(-50%)}.discard.w{top:37%;left:27%;transform:none}.discard.e{top:37%;right:27%;transform:none}
.tinyTile,.markerCard{display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e9dfc6;background:linear-gradient(140deg,#fffdf3,#e7deca);box-shadow:inset 0 1px 1px #fff9,0 4px 0 #5f9580,0 6px 8px #001d125f;border-radius:4px}.tinyTile{width:32px;height:42px}.tileFace{object-fit:contain;width:94%;height:94%;display:block;user-select:none;pointer-events:none}.tinyTile.highlight{border:2px solid #ffdc65;box-shadow:0 0 0 2px #d6a947,0 0 22px #fada3e,0 4px 0 #5f9580}
.centerBoard{z-index:2;top:50%;left:50%;padding:16px 19px;min-width:180px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #d4b877ba;border-radius:14px;background:linear-gradient(145deg,#0a4133ef,#082a25f2);box-shadow:inset 0 0 0 5px #113e3177,0 13px 28px #001f1bac}
.centerBoard small{font-size:11px;letter-spacing:1.2px;color:#d8c292}.centerBoard .centerLabel{font-size:10px;color:#b7b99e}.centerBoard b.centerWind{font-family:"Noto Serif CJK SC",serif;font-size:37px;color:#f5dd9f;line-height:1.2;background:#1b5540;border-radius:50%;border:2px solid #c2a46a;width:60px;height:60px;display:grid;place-items:center}.centerRule{height:1px;width:90%;background:linear-gradient(90deg,transparent,#bda16d,transparent);margin:4px}.centerBoard .remaining{font-size:23px;color:#b2e0b5}.centerBoard .remaining span{font-size:12px}
.myHand{z-index:6;position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;gap:3px;padding:0;background:transparent;border-radius:0;min-height:0;max-width:96%}.tile{flex:0 0 clamp(48px,4.25vw,67px);width:clamp(48px,4.25vw,67px);min-width:0;height:clamp(71px,6vw,98px);border:1px solid #ece1bd;border-radius:7px 7px 5px 5px;background:linear-gradient(155deg,#fffdf4,#f5ebd8 68%,#d6c8aa);box-shadow:inset 1px 1px #fff,0 5px 0 #177451,0 8px 0 #0d553a,1px 12px 12px #001b13b4;transition:transform .15s,box-shadow .15s;cursor:pointer;padding:4px}.tile:hover{transform:translateY(-5px);border-color:#e6bf68}.tile.selected{transform:translateY(-19px);border-color:#edc865;box-shadow:0 0 0 2px #fff2b4,0 5px 0 #177451,0 10px 20px #fada3e70}.tile.drawn{margin-left:15px}.tile .tileFace{height:100%;width:100%}.tile:focus-visible{outline:3px solid #f4d278;outline-offset:2px}
.controlBar{position:relative;margin:14px auto;gap:12px}.controlBar button{min-width:116px;min-height:47px}.scores{margin:12px auto;grid-template-columns:repeat(4,1fr);gap:10px}.score{background:#112c23;border:1px solid #756d4678;box-shadow:inset 0 1px #e8cc9d16;border-radius:10px;padding:10px 16px}.score b{font-family:Georgia,serif;font-size:22px;color:#f1d8a3}.journal{color:#a7c3af;border-left:2px solid #b69b60}
.markerCard{width:62px;height:86px;padding:4px}.markerCard.back{background:#18583f}.markerCard .tileFace{width:100%;height:100%}
.modal{background:linear-gradient(135deg,#153d30,#0c2921);border-color:#d5b876;box-shadow:0 0 0 3px #09261a,0 30px 75px #000b}.modal h2{font-family:Georgia,"Noto Serif CJK SC",serif}.modalShade{background:#000b}
.previewMode .status:before{content:'视觉预览 · ';color:#b7dbb2}
@media(min-width:1600px){.myHand .tile{flex-basis:68px;width:68px;height:99px}.wallUnit{width:20px}.wall.w .wallUnit,.wall.e .wallUnit{height:20px}}
@media(max-width:1200px){.desk{min-height:620px}.wallUnit{width:15px}.wall.w .wallUnit,.wall.e .wallUnit{height:15px}.wall.w .wallTop,.wall.e .wallTop,.wall.w .wallBottom,.wall.e .wallBottom{height:15px}.wall.n{top:16%}.wall.s{bottom:26%}.discard.w{left:23%}.discard.e{right:23%}.tile{flex-basis:49px;width:49px;height:73px}}

/* Override shared directional player classes for discard zones. */
.discard.north{top:26%;left:50%;bottom:auto;right:auto;transform:translateX(-50%)}
.discard.south{bottom:31%;left:50%;top:auto;right:auto;transform:translateX(-50%)}
.discard.west{top:37%;left:27%;bottom:auto;right:auto;transform:none}
.discard.east{top:37%;right:27%;bottom:auto;left:auto;transform:none}

/* V3 traditional, high contrast mahjong faces. Larger sculpted tiles echo real engraved sets. */
.tile{border-radius:8px 8px 6px 6px; background:linear-gradient(130deg,#fffef6 0%,#fff9e9 35%,#f2e5ca 85%,#d9c8a8 100%);border:1px solid #f8eed8;box-shadow:inset 2px 2px 1px #ffffff, inset -2px -2px 2px #bdaa82,0 6px 0 #16784e,0 9px 0 #075538,1px 13px 13px #00170eba; padding:2px;}
.tile .tileFace{width:100%;height:100%;filter:drop-shadow(0 .25px .15px #382f2280)}
.tinyTile,.markerCard{background:linear-gradient(135deg,#fffef6 0%,#f3e8d0 100%);border:1px solid #efe3c9;box-shadow:inset 1px 1px 1px #fff,0 4px 0 #427e62,0 6px 6px #001d1273;}
.tinyTile .tileFace,.markerCard .tileFace{width:100%;height:100%;}
.tile.selected{transform:translateY(-19px);border-color:#edc865;box-shadow:0 0 0 2px #ffe7a2,0 6px 0 #13754b,0 9px 0 #075538,0 9px 27px #fada3eaa}
.tile.drawn{margin-left:16px}
@media (min-width:1400px){.myHand .tile{flex-basis:clamp(65px,4.55vw,74px);width:clamp(65px,4.55vw,74px);height:clamp(93px,6.45vw,108px)}}