:root{--gold:#d8ae55;--green:#0b4c3e;--panel:#081b18e8;--scene-scale:1;--scene-height:auto}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050908;color:#f7edcf;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif}body{overflow-x:hidden}.app{min-height:100vh;background:radial-gradient(circle at 50% 15%,#183229 0,#07110e 55%,#030605 100%)}header{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #b9934d66;background:#06110fec;position:relative;z-index:100}.brand{font-family:serif;font-size:21px;font-weight:800;color:#f3d99b;text-shadow:0 2px 4px #000}.brand span{font:700 14px monospace;color:#65ddc1}.round{margin-left:auto;padding:7px 13px;border:1px solid #b8954b;border-radius:4px;background:#102b25}.icon{height:39px;padding:0 14px;border:1px solid #c8a85d80;border-radius:20px;background:linear-gradient(#214b42,#102b26);color:#fff;font-size:16px}.mobile{display:none}main{display:grid;grid-template-columns:minmax(720px,1fr) 320px;min-height:calc(100vh - 58px)}.stage{min-width:0;padding:14px 14px 0}.table-wrap{position:relative;margin:auto;width:min(100%,1120px);aspect-ratio:16/10;perspective:1500px;filter:drop-shadow(0 18px 24px #000c)}.table-wrap:before{content:"";position:absolute;inset:0;background:url("assets/real-table-v2.png") center/100% 100% no-repeat;z-index:0}.table{position:absolute;left:6.5%;right:6.5%;top:9.5%;bottom:10%;transform-style:preserve-3d;transform:perspective(1450px) rotateX(3deg);transform-origin:center 58%;isolation:isolate}.table:before{content:"";position:absolute;inset:3% 2%;border-radius:22px;background:radial-gradient(ellipse at center,#1d644fa8,#0a3d32b8 69%,#051d18e8);box-shadow:inset 0 0 45px #00140fac;z-index:-1}.tile{position:relative;flex:none;overflow:visible;user-select:none}.tile img{pointer-events:none}.tile-base{position:absolute;inset:0;width:100%;height:100%}.tile-face{position:absolute;left:12%;top:9%;width:76%;height:72%;object-fit:contain}.wall{position:absolute;display:flex;transform-style:preserve-3d;z-index:10}.wall-stack{position:relative;flex:none;transform-style:preserve-3d}.wall-stack .tile{position:absolute;background:linear-gradient(135deg,#72d482,#3c9d61 58%,#185944);border:1px solid #164d3d;border-radius:3px;box-shadow:inset 1px 1px 2px #d5ffd0a8,inset -2px -3px 3px #0a3d3199,0 5px 5px #001c16a8}.wall-stack .tile:after{content:"";position:absolute;left:2px;right:2px;bottom:-5px;height:5px;border-radius:0 0 2px 2px;background:linear-gradient(#236d50,#0d392f);border:1px solid #082d25;border-top:0}.wall-stack .tile:first-child{z-index:1;filter:brightness(.67);transform:translate3d(0,6px,0)}.wall-stack .tile:last-child{z-index:2;transform:translate3d(0,0,8px);filter:brightness(1.08)}.north-wall,.south-wall{left:50%;width:442px;height:34px;transform:translateX(-50%);gap:0}.north-wall{top:19%}.south-wall{bottom:18%}.north-wall .wall-stack,.south-wall .wall-stack{width:26px;height:34px}.north-wall .tile,.south-wall .tile{width:26px;height:29px}.vertical.wall{top:50%;height:374px;width:35px;flex-direction:column;transform:translateY(-50%);gap:0}.west-wall{left:6.5%;transform:translateY(-50%) rotate(3.5deg) skewY(-2deg)}.east-wall{right:6.5%;transform:translateY(-50%) rotate(-3.5deg) skewY(2deg)}.vertical .wall-stack{width:35px;height:22px}.vertical .tile{width:29px;height:42px}.west-wall .tile:first-child{transform:translate3d(-7px,5px,0)}.west-wall .tile:last-child{transform:translate3d(0,0,8px)}.east-wall .tile:first-child{right:0;transform:translate3d(7px,5px,0)}.east-wall .tile:last-child{right:0;transform:translate3d(0,0,8px)}.opponent-hand{position:absolute;display:flex;z-index:18;transform-style:preserve-3d}.opponent-hand .tile{width:25px;height:38px;background:linear-gradient(135deg,#5dbd74,#247552);border:1px solid #133f34;border-radius:3px;box-shadow:inset 1px 1px #caffc57d,0 4px 4px #001a15a8;animation:dealIn .2s ease-out both}.opponent-n{left:50%;top:29%;transform:translateX(-50%) perspective(750px) rotateX(-13deg);gap:1px}.opponent-w,.opponent-e{top:50%;flex-direction:column}.opponent-w{left:16.5%;transform:translateY(-50%) rotate(7deg) perspective(750px) rotateY(10deg)}.opponent-e{right:16.5%;transform:translateY(-50%) rotate(-7deg) perspective(750px) rotateY(-10deg)}.opponent-w .tile,.opponent-e .tile{width:39px;height:25px;margin-top:-4px}.river{position:absolute;display:grid;grid-template-columns:repeat(6,30px);grid-auto-rows:44px;gap:2px;z-index:22;transform-style:preserve-3d}.river .tile{width:30px;height:44px;filter:drop-shadow(0 3px 2px #0008)}.river-n{left:50%;top:37%;transform:translateX(-50%) scale(.72)}.river-s{left:50%;bottom:27%;transform:translateX(-50%) scale(.72) rotate(180deg)}.river-w,.river-e{top:51%;grid-template-columns:repeat(6,27px);grid-auto-rows:40px}.river-w{left:28%;transform:translateY(-50%) rotate(90deg) scale(.68)}.river-e{right:28%;transform:translateY(-50%) rotate(-90deg) scale(.68)}.center{position:absolute;left:50%;top:52%;width:105px;height:105px;transform:translate(-50%,-50%) translateZ(18px);z-index:30;display:grid;place-items:center;filter:drop-shadow(0 8px 8px #0009)}.center img{position:absolute;width:100%;height:100%}.center .pointer-arrow{width:76%;height:76%;animation:glow 2s ease-in-out infinite}.center strong{font:700 31px serif;z-index:2;color:#f5e7be}.center span{position:absolute;top:65%;z-index:2;text-align:center;font-size:9px;color:#e6f4e8}.center em{position:absolute;bottom:2px;z-index:3;font:700 19px serif;color:#ffd34e}.player{position:absolute;z-index:44;min-width:108px;padding:7px 10px;border:1px solid #d0a64d;border-radius:8px;background:linear-gradient(110deg,#16362fe8,#061915f2);box-shadow:0 7px 14px #0009;color:#f3dfaa;font-size:12px}.player span{display:block;color:#c8f4df;font-size:10px}.player.north{left:50%;top:2%;transform:translateX(-50%)}.player.west{left:-2%;top:30%}.player.east{right:-2%;top:30%}.player.south{left:50%;bottom:-1%;transform:translateX(-50%)}.hand{position:absolute;left:50%;bottom:2%;height:76px;display:flex;transform:translateX(-50%) translateZ(28px);z-index:40;filter:drop-shadow(0 8px 4px #000b)}.hand .tile{width:50px;height:76px;margin-left:-2px;cursor:pointer;transition:transform .12s}.hand .tile:hover,.hand .tile.selected{transform:translateY(-14px)}.hand .tile.awaiting-deal{visibility:hidden}.flowers{position:absolute;left:1%;bottom:3%;height:67px;display:flex;gap:2px;z-index:41}.flowers .tile{width:43px;height:67px;filter:drop-shadow(0 5px 3px #0009)}.flower-art{left:11%;top:10%;width:78%;height:73%}.actions{height:104px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#0b211c,#06110f);border-top:1px solid #b9954d66}.actions button{position:relative;width:82px;height:72px;border:1px solid #c3a35c;border-radius:12px;background:linear-gradient(#305346,#101f1b);color:#f8e8bd;box-shadow:inset 0 1px #fff3,0 5px 8px #0008;font-size:25px;font-weight:800}.actions button[style]{border:0;background:var(--button-art) center/contain no-repeat;box-shadow:none}.actions button[style] span{opacity:0}.actions small{position:absolute;left:0;right:0;bottom:5px;font-size:8px;color:#d8ebdd}.actions button[style] small{opacity:0}.actions button:hover{transform:translateY(-3px);filter:brightness(1.12)}aside{position:relative;background:linear-gradient(180deg,#10251f,#07110f);border-left:1px solid #a6814166;padding:14px;z-index:90}aside section{margin-bottom:12px;padding:13px;border:1px solid #9b7d4255;border-radius:10px;background:#0d221de6}aside h2{margin:0 0 10px;color:#e8cb87;font-size:16px}.code{display:block;margin:5px 0 10px;font-size:24px;letter-spacing:4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.stats span{padding:6px;background:#061713;border-radius:5px;text-align:center;font-size:10px}.players .player-row{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid #ffffff12;font-size:12px}.messages{height:220px;overflow:auto}.msg{margin:6px 0;padding:8px;border-radius:7px;background:#17342d;font-size:12px}.msg small{display:block;color:#9fbea9}.chat form{display:flex;gap:4px}.chat input{min-width:0;flex:1;padding:9px;border:1px solid #6b8c7c;border-radius:6px;background:#06130f;color:#fff}.chat button,#collapse{border:1px solid #b18e49;border-radius:6px;background:#173d33;color:#f0d89c}#collapse{position:absolute;left:-28px;top:12px;width:28px;height:42px}aside.collapsed{display:none}@keyframes dealIn{from{opacity:0;transform:translate3d(0,-18px,25px) scale(.75)}to{opacity:1;transform:none}}@keyframes glow{50%{filter:brightness(1.35) drop-shadow(0 0 8px #50ffd0)}}
@media(max-width:900px){body{min-width:0}.app{width:1024px;transform:scale(var(--scene-scale));transform-origin:top left;min-height:1536px}header{height:64px}main{display:block;min-height:1472px}.stage{padding:12px 0 0}.table-wrap{width:1024px;height:720px;aspect-ratio:auto}.actions{height:126px}.actions button{width:90px;height:78px}aside{position:fixed;right:0;top:64px;width:340px;height:calc(100vh / var(--scene-scale) - 64px);box-shadow:-18px 0 35px #000c}aside.closed{display:none}.mobile{display:block}.round{display:none}}

/* 2.5D side walls follow the converging wooden rails. */
.west-wall{left:7.5%!important;transform:translateY(-50%) rotate(10deg) skewY(-2deg)!important;transform-origin:center center!important}
.east-wall{right:7.5%!important;transform:translateY(-50%) rotate(-10deg) skewY(2deg)!important;transform-origin:center center!important}

/* Re-laid concealed hands: one independent tile per seat direction. */
.opponent-n{top:30%!important;gap:2px!important}
.opponent-w{left:18%!important;transform:translateY(-50%) rotate(10deg) perspective(750px) rotateY(10deg)!important;transform-origin:center center!important}
.opponent-e{right:18%!important;transform:translateY(-50%) rotate(-10deg) perspective(750px) rotateY(-10deg)!important;transform-origin:center center!important}
.opponent-w .tile,.opponent-e .tile{width:39px!important;height:25px!important;margin-top:-1px!important;border-radius:3px!important}
.opponent-hand .tile:after{content:"";position:absolute;left:2px;right:2px;bottom:-4px;height:4px;border-radius:0 0 2px 2px;background:#103f34;border:1px solid #082c25;border-top:0;pointer-events:none}

/* Side players' tiles lie face-up on the felt, as in the reference table. */
.opponent-hand .tile:not(.back){background:none!important;border:0!important;box-shadow:none!important;filter:drop-shadow(2px 4px 2px #001b15aa)!important}
.opponent-hand .tile:not(.back):after{display:none!important}
.opponent-w .tile,.opponent-e .tile{width:27px!important;height:41px!important;margin-top:-2px!important}
.opponent-w{left:18.5%!important}.opponent-e{right:18.5%!important}

/* Seat-specific renderers: each seat faces its own player edge. */
.opponent-n .tile:not(.back){transform:rotate(180deg);transform-origin:center}
.opponent-w .tile:not(.back){transform:rotate(90deg);transform-origin:center}
.opponent-e .tile:not(.back){transform:rotate(-90deg);transform-origin:center}
.opponent-n .tile:not(.back) .tile-face{left:12%;top:9%;width:76%;height:72%}
.opponent-w .tile:not(.back) .tile-face,.opponent-e .tile:not(.back) .tile-face{left:11%;top:9%;width:78%;height:73%}
.river-n .tile{transform:rotate(180deg)}
.river-w .tile{transform:rotate(90deg)}
.river-e .tile{transform:rotate(-90deg)}
.river-s .tile{transform:rotate(180deg)}
.player.north{text-align:center;border-radius:7px 7px 10px 10px}
.player.south{text-align:center;border-radius:10px 10px 7px 7px}
.player.west{text-align:left;border-radius:7px 11px 11px 7px}
.player.east{text-align:right;border-radius:11px 7px 7px 11px}
.north-wall .wall-stack .tile:last-child{transform:translate3d(0,0,8px)}
.south-wall .wall-stack .tile:last-child{transform:translate3d(0,-5px,8px)}
.west-wall .wall-stack .tile:last-child{transform:translate3d(0,0,8px)}
.east-wall .wall-stack .tile:last-child{transform:translate3d(0,0,8px)}

/* Side-seat boxes advance by tile width, then rotate the artwork toward the seat. */
.opponent-w .tile,.opponent-e .tile{width:35px!important;height:23px!important;margin-top:-1px!important}
.opponent-w,.opponent-e{top:50%!important}

/* Original illustrated arcade-room art and its shared 2.5D felt coordinate plane. */
.table-wrap{aspect-ratio:16/9!important;filter:drop-shadow(0 20px 28px #000d)!important}
.table-wrap:before{background-image:url("assets/mahjong-room-empty-25d-v2.png")!important;background-size:100% 100%!important}
.table{left:4.5%!important;right:4.5%!important;top:25%!important;bottom:8%!important;transform:perspective(1450px) rotateX(2deg)!important}
.table:before{inset:0!important;background:radial-gradient(ellipse at 50% 45%,#1c684c22,#062b2355 78%,#03171288)!important;box-shadow:inset 0 0 36px #00120c66!important}
.north-wall{top:8%!important}.opponent-n{top:19%!important}.river-n{top:31%!important}
.west-wall,.east-wall{top:48%!important}.opponent-w,.opponent-e{top:49%!important}.river-w,.river-e{top:53%!important}
.south-wall{bottom:21%!important}.river-s{bottom:31%!important}.hand{bottom:1%!important}.flowers{bottom:2%!important}
@media(max-width:900px){.table-wrap{width:1024px!important;height:576px!important}.actions{height:126px!important}}

/* Dynamic player seats are separate from the room background. */
.player{display:flex!important;align-items:center!important;gap:8px!important;min-width:132px!important;padding:6px 9px!important}.player .avatar{--avatar-color:#58766e;display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffe8bd 0 14%,var(--avatar-color) 56%,#172a25 100%);border:2px solid #e7c273;box-shadow:0 3px 8px #000b,inset 0 0 0 2px #ffffff24;color:#fff;font-style:normal;font-weight:900;text-shadow:0 1px 2px #000}.player.empty{opacity:.55;filter:saturate(.45)}.player.empty .avatar{background:linear-gradient(#56635e,#27332f)}.player>div{min-width:0}.player b,.player span{white-space:nowrap}.player.east{flex-direction:row-reverse}.player.east>div{text-align:right}

.player .avatar{--avatar-image:none;width:42px!important;height:42px!important;background-image:var(--avatar-image),radial-gradient(circle at 35% 28%,#ffe8bd,#315f52 62%,#172a25)!important;background-position:center 20%,center!important;background-size:145% auto,cover!important;background-repeat:no-repeat!important}.player.empty .avatar{background-image:linear-gradient(#56635e,#27332f)!important}

/* Unified production layout pass: spacing, hierarchy, material and controls. */
.table{left:5.5%!important;right:5.5%!important;top:23%!important;bottom:7%!important}
.wall-stack .tile{background:linear-gradient(135deg,#5fd7c2 0%,#269b82 52%,#0b5648 100%)!important;border-color:#0b463a!important;box-shadow:inset 2px 1px 2px #d6fff0aa,inset -3px -3px 3px #063c3299,0 5px 5px #001b16b8!important}
.wall-stack .tile:after{background:linear-gradient(#146b5b,#073c33)!important}
.opponent-hand .tile.back{background:linear-gradient(135deg,#416d60,#234c42 55%,#102f29)!important;border:1px solid #9ab4a050!important;box-shadow:inset 1px 1px 2px #d8e7d34d,inset -2px -2px 2px #071f1a99,0 4px 4px #00130fc0!important}
.opponent-hand .tile.back:before{content:"";position:absolute;inset:4px;border:1px solid #d6c27b45;border-radius:2px}
.north-wall{top:7%!important}.opponent-n{top:18%!important}.river-n{top:31%!important;transform:translateX(-50%) scale(.64)!important}
.south-wall{bottom:18%!important}.river-s{bottom:31%!important;transform:translateX(-50%) scale(.64) rotate(180deg)!important}
.west-wall{left:5%!important;top:49%!important}.east-wall{right:5%!important;top:49%!important}
.opponent-w{left:16%!important;top:49%!important}.opponent-e{right:16%!important;top:49%!important}
.river-w{left:30%!important;top:51%!important;transform:translateY(-50%) rotate(90deg) scale(.62)!important}.river-e{right:30%!important;top:51%!important;transform:translateY(-50%) rotate(-90deg) scale(.62)!important}
.center{top:51%!important;width:112px!important;height:112px!important}
.player.north{top:-4%!important}.player.west{left:-4%!important;top:24%!important}.player.east{right:-4%!important;top:24%!important}.player.south{bottom:-5%!important}
.hand{bottom:0!important}.hand .tile{width:47px!important;height:72px!important;margin-left:-1px!important}.flowers{left:0!important;bottom:1%!important}
.actions{gap:10px!important;padding:12px!important;background:linear-gradient(180deg,#102a23,#06130f)!important}.actions button,.actions button[style]{width:82px!important;height:64px!important;border:1px solid #d1ad60!important;border-radius:12px!important;background:linear-gradient(145deg,#315f50,#122b24 62%,#071713)!important;box-shadow:inset 0 1px 1px #fff5,0 5px 9px #000a!important;color:#f6df9f!important}.actions button span,.actions button[style] span{opacity:1!important;font-size:23px!important;text-shadow:0 2px 3px #000}.actions button small,.actions button[style] small{opacity:.75!important;color:#9fd8c5!important}
@media(max-width:900px){.table-wrap{height:820px!important}.table-wrap:before{background-size:cover!important;background-position:center!important}.table{top:21%!important;bottom:6%!important}.actions{height:132px!important}.app{min-height:1536px!important}main{min-height:1472px!important}}

/* Depth pass: far-seat scale, side convergence and felt contact. */
.north-wall{transform:translateX(-50%) scale(.76)!important;transform-origin:center top!important;filter:brightness(.78) saturate(.72) drop-shadow(0 7px 5px #00150fb8)!important}
.opponent-n{transform:translateX(-50%) perspective(750px) rotateX(-13deg) scale(.78)!important;transform-origin:center top!important;filter:brightness(.78) drop-shadow(0 7px 5px #00150fb0)!important}
.river-n{transform:translateX(-50%) perspective(700px) rotateX(-9deg) scale(.56)!important;filter:brightness(.82) drop-shadow(0 5px 3px #00150fa0)!important}
.west-wall{transform:translateY(-50%) rotate(10deg) skewY(-2deg) scale(.88)!important;filter:brightness(.88) saturate(.78) drop-shadow(7px 8px 6px #00150fc0)!important}
.east-wall{transform:translateY(-50%) rotate(-10deg) skewY(2deg) scale(.88)!important;filter:brightness(.88) saturate(.78) drop-shadow(-7px 8px 6px #00150fc0)!important}
.opponent-w{transform:translateY(-50%) rotate(10deg) perspective(750px) rotateY(10deg) scale(.86)!important;filter:drop-shadow(6px 7px 5px #00150fb8)!important}
.opponent-e{transform:translateY(-50%) rotate(-10deg) perspective(750px) rotateY(-10deg) scale(.86)!important;filter:drop-shadow(-6px 7px 5px #00150fb8)!important}
.south-wall{filter:brightness(.96) saturate(.78) drop-shadow(0 9px 6px #00150fc8)!important}
.hand{filter:drop-shadow(0 10px 5px #00130fd8)!important}
.wall-stack .tile{background:linear-gradient(135deg,#56bda9 0%,#288f79 52%,#0b4d41 100%)!important}
.center{filter:brightness(.88) saturate(.8) drop-shadow(0 9px 7px #00130fc0)!important}

/* Concealed hands are upright single tiles, never wall-like blocks. */
.opponent-hand{gap:2px!important}
.opponent-hand .tile.back{width:24px!important;height:36px!important;margin:0!important;background:url("assets/whmj/img/MahjongTile_0_2_@2x.png") center/100% 100% no-repeat!important;border:0!important;border-radius:3px!important;box-shadow:none!important;filter:brightness(.72) saturate(.68) drop-shadow(0 5px 3px #00140fc0)!important}
.opponent-hand .tile.back:before{inset:3px!important;border:1px solid #d8c98438!important;border-radius:2px!important}
.opponent-hand .tile.back:after{left:3px!important;right:3px!important;bottom:-4px!important;height:4px!important;background:linear-gradient(#d8d1a8,#77715c)!important;border-color:#413f35!important}
.opponent-w,.opponent-e{gap:0!important}
.opponent-w .tile.back,.opponent-e .tile.back{width:24px!important;height:36px!important;margin-top:-14px!important}
.opponent-w .tile.back:first-child,.opponent-e .tile.back:first-child{margin-top:0!important}
.opponent-n{gap:2px!important}

/* West/east concealed tiles use their own sideways boxes and mirrored faces. */
.opponent-w .tile.back,.opponent-e .tile.back{width:36px!important;height:24px!important;margin:0!important;transform-origin:center center!important}
.opponent-w .tile.back{transform:rotate(90deg)!important}
.opponent-e .tile.back{transform:rotate(-90deg)!important}
.opponent-w,.opponent-e{gap:1px!important}

/* Seat order: player -> concealed hand -> live wall -> river -> center. */
.opponent-n{top:7%!important}.north-wall{top:18%!important}
.opponent-w{left:5%!important}.west-wall{left:16%!important}
.opponent-e{right:5%!important}.east-wall{right:16%!important}

/* Flowers use a dedicated exposed bonus zone above the south hand. */
.flowers{left:2.5%!important;bottom:14%!important;height:58px!important;gap:3px!important;transform:perspective(700px) rotateX(-7deg) scale(.86)!important;transform-origin:left bottom!important}
.flowers .tile{width:38px!important;height:58px!important;margin:0!important}
.flowers .flower-art{left:11%!important;top:9%!important;width:78%!important;height:72%!important;object-fit:contain!important}

.flowers{left:0!important;bottom:1%!important;width:66px!important;height:100px!important;display:grid!important;grid-template-columns:repeat(2,32px)!important;grid-template-rows:repeat(2,49px)!important;gap:2px!important;transform:perspective(700px) rotateX(-6deg)!important}
.flowers .tile{width:32px!important;height:49px!important}

/* Every opponent owns a separate, seat-oriented exposed flower zone. */
.seat-flowers{position:absolute;z-index:32;display:flex;gap:2px;filter:drop-shadow(0 5px 3px #00130fb8)}.seat-flowers .tile{width:25px;height:38px}.seat-flowers .flower-art{left:11%;top:9%;width:78%;height:72%;object-fit:contain}.flowers-n{right:17%;top:7%;transform:rotate(180deg) scale(.78);transform-origin:right top}.flowers-w{left:5%;bottom:19%;flex-direction:column;transform:rotate(90deg) scale(.78);transform-origin:left bottom}.flowers-e{right:5%;bottom:19%;flex-direction:column;transform:rotate(-90deg) scale(.78);transform-origin:right bottom}

/* Keep the south flower block completely outside the first hand tile. */
.flowers{left:-5%!important;bottom:1%!important}
.flowers-w{left:3%!important;bottom:22%!important}.flowers-e{right:3%!important;bottom:22%!important}

/* Shell UI matched to the current walnut, jade and antique-gold table skin. */
header{height:64px!important;padding:0 20px!important;background:linear-gradient(180deg,#14251feF,#07130fff)!important;border-bottom:1px solid #d0a65b88!important;box-shadow:0 5px 16px #000a!important}.brand{font-size:22px!important;letter-spacing:2px!important;color:#f3dda5!important}.brand span{color:#73cdb5!important;letter-spacing:0!important}.round{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;background:linear-gradient(#244b3e,#10281f)!important;border-color:#d2ad62!important;color:#f7e5b6!important;box-shadow:inset 0 1px #fff3,0 3px 8px #0008!important}.icon{background:linear-gradient(#315c4d,#112b23)!important;border-color:#d2ad6288!important;box-shadow:inset 0 1px #fff3,0 3px 7px #0008!important}.player{border-color:#d8b364!important;background:linear-gradient(120deg,#173a30f2,#071b16f7)!important;box-shadow:inset 0 1px #ffffff20,0 7px 15px #000b!important}.player b{color:#f4d991!important}.player span{color:#a9ddcb!important}.player .avatar{border-color:#e4bf6d!important}aside{background:linear-gradient(180deg,#142b24f7,#07130fff)!important;border-left-color:#c9a25788!important;box-shadow:-12px 0 28px #0009!important}aside section{border-color:#bd995655!important;background:linear-gradient(145deg,#143128e8,#0a1d18ee)!important;box-shadow:inset 0 1px #ffffff12!important}aside h2{color:#efd797!important}.stats span,.msg{background:#071a15!important;border:1px solid #c49d3b22!important}.player-row{border-bottom-color:#d2b36522!important}.chat input{background:#061510!important;border-color:#897642!important}.chat button,#collapse{background:linear-gradient(#315846,#122920)!important;color:#f1d89b!important}.actions{border-top:1px solid #d0aa5d66!important;box-shadow:inset 0 9px 18px #0005!important}.actions button:hover{border-color:#ffe39a!important;filter:brightness(1.14)!important}.actions button:active{transform:translateY(2px)!important;box-shadow:inset 0 3px 7px #0008!important}

/* Keep the illustrated table and the UI coordinate plane at the same aspect ratio. */
.table:before{background:transparent!important;box-shadow:none!important}
@media(max-width:900px){.table-wrap{height:576px!important;aspect-ratio:16/9!important}.table-wrap:before{background-size:100% 100%!important;background-position:center!important}.table{top:25%!important;bottom:8%!important}}

/* Coordinate-native table: the table is generated from the same plane as the tiles. */
.table-wrap{background:radial-gradient(ellipse at 50% 12%,#5b381f55 0 9%,transparent 31%),linear-gradient(180deg,#15130f 0 22%,#080c0a 62%,#030504 100%)!important;border-radius:4px!important;overflow:visible!important}
.table-wrap:before{background:none!important}
.table{left:7%!important;right:7%!important;top:13%!important;bottom:10%!important;isolation:isolate!important}
.table:after{content:"";position:absolute;z-index:-2;inset:-4.5% -3.5%;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:linear-gradient(90deg,#2a1007,#8b4e23 8%,#3a170b 16%,#663317 50%,#321307 84%,#8a4c22 92%,#281006);box-shadow:0 20px 28px #000d;filter:drop-shadow(0 5px 2px #d28b3a42)}
.table:before{content:""!important;position:absolute!important;z-index:-1!important;inset:0!important;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:radial-gradient(ellipse at 50% 44%,#17604b 0,#0c4538 55%,#05291f 100%)!important;box-shadow:inset 0 0 70px #001a12d6,inset 0 0 0 3px #c38a403d!important}
@media(max-width:900px){.table{top:13%!important;bottom:10%!important}}

/* Clean side geometry: one mirrored rail angle, no compound skew. */
.west-wall{transform:translateY(-50%) rotate(9deg) scale(.88)!important;transform-origin:center center!important}
.east-wall{transform:translateY(-50%) rotate(-9deg) scale(.88)!important;transform-origin:center center!important}
.opponent-w{transform:translateY(-50%) rotate(9deg) scale(.86)!important;transform-origin:center center!important}
.opponent-e{transform:translateY(-50%) rotate(-9deg) scale(.86)!important;transform-origin:center center!important}
.river-w{transform:translateY(-50%) rotate(90deg) scale(.62)!important}.river-e{transform:translateY(-50%) rotate(-90deg) scale(.62)!important}

/* Four independent rivers with a clear center well. */
.center{width:90px!important;height:90px!important;top:51%!important}
.river-n{top:25%!important;transform:translateX(-50%) perspective(700px) rotateX(-9deg) scale(.52)!important}
.river-s{bottom:24%!important;transform:translateX(-50%) scale(.54) rotate(180deg)!important}

/* Discards are public information: larger faces, stronger contrast, clear latest tile. */
.river{grid-template-columns:repeat(6,36px)!important;grid-auto-rows:52px!important;gap:3px!important}
.river .tile{width:36px!important;height:52px!important;filter:brightness(1.08) contrast(1.08) drop-shadow(0 4px 3px #00130fc0)!important}
.river-n{top:21%!important;transform:translateX(-50%) perspective(700px) rotateX(-8deg) scale(.60)!important}
.river-s{bottom:19%!important;transform:translateX(-50%) scale(.62) rotate(180deg)!important}
.river-w{left:21%!important;transform:translateY(-50%) rotate(90deg) scale(.60)!important}
.river-e{right:21%!important;transform:translateY(-50%) rotate(-90deg) scale(.60)!important}
.river .tile:last-child:after{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #ffd54e;filter:drop-shadow(0 2px 2px #000b)}
.river .tile.just-discarded{animation:discardLand .24s ease-out both;filter:brightness(1.15) contrast(1.1) drop-shadow(0 0 7px #ffd54ecc)!important}
@keyframes discardLand{from{opacity:.3;transform:translateY(-28px) scale(1.25)}to{opacity:1;transform:none}}

/* Side-seat flowers are public and stay in one readable horizontal row. */
.flowers-w,.flowers-e{display:flex!important;flex-direction:row!important;gap:2px!important;bottom:22%!important;transform:scale(.78)!important;transform-origin:center bottom!important}
.flowers-w{left:2%!important}.flowers-e{right:2%!important}
.flowers-w .tile,.flowers-e .tile{width:25px!important;height:38px!important;transform:none!important}

/* Exposed chi/pong/kong groups are also horizontal and face-up. */
.seat-melds{position:absolute;z-index:31;display:flex;flex-direction:row;gap:2px;filter:drop-shadow(0 5px 3px #00130fb8)}.seat-melds .tile{width:27px;height:41px;transform:none!important}.meld-w{left:2%!important;bottom:31%!important}.meld-e{right:2%!important;bottom:31%!important}.meld-n{right:17%!important;top:14%!important;transform:scale(.78);transform-origin:right top}

.seat-flowers:empty,.seat-melds:empty{display:none!important}

/* Public groups are horizontal from each seated player's viewpoint. */
.flowers-w,.meld-w{flex-direction:row!important;transform:rotate(90deg) scale(.78)!important;transform-origin:center center!important}
.flowers-e,.meld-e{flex-direction:row!important;transform:rotate(-90deg) scale(.78)!important;transform-origin:center center!important}
.flowers-n,.meld-n{flex-direction:row!important;transform:rotate(180deg) scale(.78)!important;transform-origin:center center!important}
.flowers-w .tile,.meld-w .tile{transform:none!important}.flowers-e .tile,.meld-e .tile{transform:none!important}

/* Premium walnut-and-felt material pass; geometry remains unchanged. */
.table-wrap{background:
  radial-gradient(circle at 18% 16%,#d5944550 0 1.2%,transparent 5%),
  radial-gradient(circle at 82% 16%,#d5944550 0 1.2%,transparent 5%),
  linear-gradient(180deg,#19130e 0 26%,#090b09 58%,#030504 100%)!important}
.table:after{background:
  linear-gradient(180deg,#ffffff16 0 2%,transparent 5% 91%,#0008 96%),
  repeating-linear-gradient(7deg,#2b1007 0 8px,#713815 9px 15px,#3d190b 16px 23px,#8b4d21 24px 29px,#361308 30px 38px)!important;
  filter:drop-shadow(0 4px 1px #cf873e55) drop-shadow(0 18px 14px #000d)!important}
.table:before{background:
  radial-gradient(ellipse at 50% 42%,#23705a 0,#12513f 42%,#08392e 72%,#03251d 100%),
  repeating-radial-gradient(circle at 50% 50%,#ffffff08 0 1px,transparent 1px 4px)!important;
  box-shadow:inset 0 0 80px #00170fd9,inset 0 0 0 3px #d6a85766,inset 0 0 0 7px #092b23!important}
.table{filter:drop-shadow(0 22px 20px #000c)}
.table-wrap:after{content:"";position:absolute;left:8%;right:8%;bottom:4%;height:5%;border-radius:50%;background:#000b;filter:blur(14px);z-index:-1}

.table:after{background:linear-gradient(180deg,#fff2 0 2%,transparent 6% 90%,#0007 96%),repeating-linear-gradient(7deg,#35180d 0 13px,#482312 14px 25px,#5b301a 26px 35px,#422010 36px 49px,#62361e 50px 59px)!important;filter:saturate(.82) drop-shadow(0 4px 1px #b8733550) drop-shadow(0 18px 14px #000d)!important}

/* Generated premium table skin; the HTML plane is aligned to its inner felt. */
.table-wrap{background:linear-gradient(180deg,#111713,#030605)!important}
.table-wrap:before{content:""!important;position:absolute!important;inset:0!important;background:url("assets/table-skin-25d-v1.png") center/100% 100% no-repeat!important;z-index:0!important}
.table{left:8.5%!important;right:8.5%!important;top:10%!important;bottom:28%!important;filter:none!important}
.table:before,.table:after{background:transparent!important;box-shadow:none!important;filter:none!important}
@media(max-width:900px){.table{left:8.5%!important;right:8.5%!important;top:10%!important;bottom:28%!important}}

.opponent-w{left:10%!important}.west-wall{left:20%!important}.opponent-e{right:10%!important}.east-wall{right:20%!important}

/* Match the generated table skin's steeper side rails. */
.west-wall{transform:translateY(-50%) rotate(18deg) scale(.88)!important}.east-wall{transform:translateY(-50%) rotate(-18deg) scale(.88)!important}
.opponent-w{transform:translateY(-50%) rotate(18deg) scale(.86)!important}.opponent-e{transform:translateY(-50%) rotate(-18deg) scale(.86)!important}

/* Final rail calibration and unobstructed seat badges. */
.west-wall{transform:translateY(-50%) rotate(23deg) scale(.88)!important}.east-wall{transform:translateY(-50%) rotate(-23deg) scale(.88)!important}
.opponent-w{transform:translateY(-50%) rotate(23deg) scale(.86)!important}.opponent-e{transform:translateY(-50%) rotate(-23deg) scale(.86)!important}
.player.north{top:-12%!important}.player.south{bottom:-14%!important}.player.west{left:-10%!important;top:24%!important}.player.east{right:-10%!important;top:24%!important}

.player.west{left:-7%!important}.player.east{right:-7%!important}

/* Readable discard scale on phone-sized canvases. */
.river{grid-template-columns:repeat(6,42px)!important;grid-auto-rows:60px!important;gap:4px!important}
.river .tile{width:42px!important;height:60px!important}
.river-n{top:15%!important;transform:translateX(-50%) perspective(700px) rotateX(-8deg) scale(.72)!important}
.river-s{bottom:13%!important;transform:translateX(-50%) scale(.74) rotate(180deg)!important}
.river-w{left:16%!important;transform:translateY(-50%) rotate(90deg) scale(.72)!important}
.river-e{right:16%!important;transform:translateY(-50%) rotate(-90deg) scale(.72)!important}
.river .tile:last-child{z-index:4;transform:scale(1.12)!important;filter:brightness(1.18) contrast(1.12) drop-shadow(0 0 8px #ffd75cbb)!important}

.center{width:80px!important;height:80px!important}
.river-n{top:9%!important}.river-s{bottom:7%!important}

/* High-visibility turn countdown. */
.center em{left:50%!important;bottom:-18px!important;transform:translateX(-50%)!important;min-width:42px!important;height:34px!important;display:grid!important;place-items:center!important;padding:0 8px!important;border:2px solid #e3bb58!important;border-radius:18px!important;background:radial-gradient(circle at 50% 30%,#365f4d,#071b16 72%)!important;box-shadow:0 5px 9px #000c,inset 0 1px #fff4!important;color:#ffe064!important;font:900 25px/1 Georgia,serif!important;text-shadow:0 2px 3px #000,0 0 8px #ffc83d99!important}
.center em.urgent{border-color:#ff775f!important;background:radial-gradient(circle,#7c251b,#260805 74%)!important;color:#fff0c8!important;animation:timerUrgent .7s ease-in-out infinite alternate!important}
@keyframes timerUrgent{to{transform:translateX(-50%) scale(1.13);box-shadow:0 0 16px #ff4b32dd,0 5px 9px #000c}}

/* Brief enlarged reveal whenever a tile is discarded. */
.discard-preview{position:absolute!important;left:50%!important;top:49%!important;width:70px!important;height:102px!important;margin:0!important;z-index:120!important;pointer-events:none!important;transform-origin:center center!important;filter:brightness(1.12) contrast(1.1) drop-shadow(0 13px 10px #000d) drop-shadow(0 0 11px #ffd75c88)!important;animation:discardPreview .82s cubic-bezier(.2,.8,.25,1) both!important}
@keyframes discardPreview{0%{opacity:0;transform:translate(-50%,35px) scale(.42) rotate(-4deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(0)}68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-22%) scale(.72)}}

.demo-play{margin-left:auto!important;min-width:88px!important;color:#f2d78d!important}.demo-play.active{border-color:#ff8066!important;background:linear-gradient(#7b3025,#32110d)!important;color:#fff0d0!important}.demo-play+.icon{margin-left:0!important}header .round~.demo-play{margin-left:auto!important}
@media(max-width:900px){.demo-play{display:block!important;min-width:104px!important}.brand{margin-right:auto!important}}

.voice-pack{display:inline-flex;align-items:center;height:32px;padding:0 11px;border:1px solid #b9934d66;border-radius:16px;background:#0b201a;color:#d9c58e;font-size:12px;white-space:nowrap;box-shadow:inset 0 1px #fff2}.voice-pack:before{content:"♪";margin-right:5px;color:#69cbb1}@media(max-width:900px){.voice-pack{height:34px;padding:0 10px;font-size:13px}}

/* Clear table-state HUD and active-seat spotlight. */
.turn-notice{position:absolute;left:50%;top:35%;z-index:95;transform:translateX(-50%);min-width:178px;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 13px;border:1px solid #e2bd64;border-radius:18px;background:linear-gradient(180deg,#183d32f5,#071b16f5);box-shadow:0 6px 12px #000b,inset 0 1px #fff3;color:#f8e8ba;pointer-events:none}.turn-notice b{color:#ffd968;font-size:14px}.turn-notice span{font-size:13px;white-space:nowrap}.turn-notice.flash{animation:noticeFlash .42s ease-out}.player.active-turn{border-color:#ffe278!important;filter:brightness(1.18)!important;box-shadow:0 0 0 2px #e6b94f55,0 0 18px #ffd55b99,0 7px 15px #000b!important}.player.active-turn .avatar{box-shadow:0 0 14px #ffd65fcc,0 3px 8px #000b!important}@keyframes noticeFlash{from{opacity:.35;transform:translateX(-50%) scale(.86)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.river-w{left:24%!important;top:51%!important;transform:translateY(-50%) rotate(90deg) scale(.54)!important}
.river-e{right:24%!important;top:51%!important;transform:translateY(-50%) rotate(-90deg) scale(.54)!important}

/* Real-room entry: player identity and room are established before the table opens. */
.join-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 25%,#1b5c4cdd,#03110eea 58%,#010605f7),url("assets/table-skin-25d-v1.png") center/cover}.join-overlay.hidden{display:none}.join-card{width:min(390px,100%);padding:30px;border:1px solid #d4ad5b88;border-radius:22px;background:linear-gradient(155deg,#173d33f5,#061b16f8);box-shadow:0 24px 70px #000e,inset 0 1px #fff3;color:#f5e7bd}.join-mark{width:68px;height:68px;margin:-2px auto 14px;display:grid;place-items:center;border:3px double #e6c36f;border-radius:13px;background:linear-gradient(145deg,#38b99b,#0b5949);box-shadow:0 8px 18px #0009,inset 0 0 15px #fff3;font:900 38px/1 serif;color:#fff1bc}.join-card h1{margin:0;text-align:center;font-size:25px}.join-card p{margin:8px 0 22px;text-align:center;color:#a9c9bf;font-size:14px}.join-card label{display:grid;gap:7px;margin:14px 0;color:#e7d29a;font-size:13px}.join-card input{height:46px;padding:0 14px;border:1px solid #87b9aa66;border-radius:10px;outline:0;background:#061813;color:white;font-size:17px}.join-card input:focus{border-color:#e3c15f;box-shadow:0 0 0 3px #dcb75122}.join-card button{width:100%;height:48px;margin-top:8px;border:1px solid #ffe5a0;border-radius:12px;background:linear-gradient(#d8aa49,#8f5d17);box-shadow:0 6px 15px #0008;color:#1f1304;font-weight:900;font-size:17px}.join-error{min-height:18px;color:#ff9f8c;font-size:13px;text-align:center}

/* Chat dock under the action controls, using the previously empty lower area. */
.table-chat{width:min(980px,calc(100% - 28px));margin:12px auto 22px;display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(280px,.75fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid #b8944e66;border-radius:14px;background:linear-gradient(180deg,#10271ff5,#061510f8);box-shadow:0 9px 24px #0008,inset 0 1px #fff2;color:#ead9a8}.table-chat-title{padding:0 10px;border-right:1px solid #b8944e42}.table-chat-title h2{margin:0;font-size:14px;color:#ffe195;white-space:nowrap}.table-chat-title span{display:block;margin-top:2px;color:#79aa9d;font-size:11px}.table-chat .messages{height:48px;min-height:48px;overflow-y:auto;padding:4px 8px;border-radius:8px;background:#03100c99;font-size:12px}.table-chat .msg{margin:0;padding:2px 0;border:0!important;background:transparent!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-chat .msg small{display:inline;margin-right:7px;color:#c7ab69}.table-chat form{display:flex;gap:7px}.table-chat input{min-width:0;flex:1;height:38px;padding:0 11px;border:1px solid #6b9f9066;border-radius:9px;background:#061914;color:#fff;outline:0}.table-chat input:focus{border-color:#e1bd61}.table-chat button{height:38px;padding:0 16px;border:1px solid #e7c46f;border-radius:9px;background:linear-gradient(#bd913c,#755116);color:#fff1c8;font-weight:800}
@media(max-width:900px){.table-chat{width:calc(100% - 22px);grid-template-columns:auto 1fr;margin-top:6px;padding:9px}.table-chat-title{grid-row:1 / span 2}.table-chat .messages{height:38px;min-height:38px}.table-chat form{grid-column:2}.table-chat input,.table-chat button{height:36px}}
@media(max-width:900px){html,body{width:100%;max-width:100%;overflow-x:hidden}.app{will-change:transform;backface-visibility:hidden;contain:layout paint style}body{min-height:var(--scene-height)}}
.join-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.join-actions button{margin-top:8px!important}.join-actions #createRoom{background:linear-gradient(#318a72,#145341);color:#effff9;border-color:#87d6bd}.room-need{margin:-2px 0 12px;padding:8px 9px;border:1px solid #d5ab5355;border-radius:8px;background:#071914;color:#ffd978;text-align:center;font-size:12px;font-weight:800}.room-need.ready{border-color:#5ed1ae77;color:#8ff0d2;background:#09251d}