*{box-sizing:border-box} :root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#eaf3e7;background:#0b2625;font-size:16px}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#22534a 0,#102e2c 65%,#0a2423 100%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #ffffff24;background:#ffffff09;border-radius:9px;padding:10px 17px;transition:.18s}button:hover:not(:disabled){background:#ffffff20;transform:translateY(-1px)}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:3px solid #ffd77d;outline-offset:3px}header{height:90px;display:flex;align-items:center;justify-content:space-between;margin:auto;max-width:1440px;padding:0 38px;border-bottom:1px solid #ffffff0c}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:#f7e3ac;font-size:25px;font-weight:700;letter-spacing:3px}.brand small{display:block;font-size:10px;letter-spacing:2.3px;margin-top:6px;color:#b8bfa7}.logo{display:grid;place-items:center;width:43px;height:51px;background:#f2f0dc;border-radius:7px;color:#126044;border-bottom:6px solid #b8c7a4;font-size:31px;letter-spacing:0}.mode{font-size:15px;color:#dfdfcb}.mode span{color:#91aea2}nav{display:flex;gap:10px}nav button{font-size:14px}main{max-width:1320px;margin:auto;padding:0 30px}.table-top{display:flex;justify-content:space-between;font-size:13px;color:#97b8a9;padding:18px 14px}.table{height:470px;position:relative;background:radial-gradient(ellipse,#347c60,#24654f 68%,#1d5749);border:9px solid #536250;border-radius:130px;box-shadow:0 0 0 2px #8a937344,inset 0 0 0 3px #c6bf8f26,inset 0 0 70px #082e2966,0 16px 35px #0003;isolation:isolate}.rim{position:absolute;inset:17px;border:1px solid #dfd9ad1a;border-radius:110px;pointer-events:none}.player{position:absolute;display:flex;gap:12px;align-items:center;z-index:2}.north{left:50%;top:17px;transform:translateX(-50%)}.west{left:24px;top:45%;flex-direction:column}.east{right:24px;top:45%;flex-direction:column}.avatar{display:grid;place-items:center;border:2px solid #c9d8ae88;border-radius:50%;width:50px;height:50px;background:linear-gradient(145deg,#cca965,#6f502b);color:#fff0d1;font-size:24px;font-family:serif}.player:nth-of-type(3) .avatar{background:linear-gradient(140deg,#5d87ab,#384e77)}.player:nth-of-type(4) .avatar{background:linear-gradient(140deg,#b38c97,#754958)}.player-info{text-align:center;font-size:15px}.player-info small{display:block;margin-top:6px;color:#c0d9c6;font-size:12px}.player.active .avatar{box-shadow:0 0 0 4px #fbd68750;border-color:#ffe8a6}.backs{display:flex;gap:2px;margin-top:7px}.back{width:12px;height:19px;background:linear-gradient(#ecedd5 12%,#78ac8b 15%,#326956);border:1px solid #cfdbc266;border-radius:2px}.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:28px;z-index:2}.wind{width:100px;height:100px;display:grid;grid-template-columns:20px 60px 20px;grid-template-rows:20px 60px 20px;text-align:center;align-items:center;color:#b8cbb2;font-family:serif}.wind span:first-child{grid-area:1/2}.wind span:nth-child(2){grid-area:2/1}.wind b{grid-area:2/2;font-family:Arial;font-size:28px;color:#f4dfa4;font-weight:400}.wind b small{display:block;font-size:11px;color:#b9cbb8;margin-top:4px}.wind span:nth-last-child(2){grid-area:2/3}.wind span:last-child{grid-area:3/2}.last{width:116px;text-align:center;font-size:12px;color:#cadcc9}.last .tile{margin:8px auto 0;width:49px;height:66px}.river{position:absolute;display:flex;gap:3px;flex-wrap:wrap;align-content:start;max-height:111px;overflow:auto;scrollbar-width:thin;z-index:1}.r2{width:245px;left:calc(50% - 122px);top:94px}.r0{width:245px;left:calc(50% - 122px);bottom:25px}.r3{width:133px;left:135px;top:170px;max-height:205px}.r1{width:133px;right:135px;top:170px;max-height:205px}.tile{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:66px;height:91px;padding:4px 2px 8px;border:1px solid #d8d6bd;border-bottom:6px solid #a5b6a0;border-radius:7px;background:linear-gradient(115deg,#fffff5,#e7e7d4);color:#164d37;box-shadow:0 4px 3px #0003;font-family:serif;line-height:1.05;user-select:none}.tile strong{font-size:35px;font-weight:700}.tile em{font-size:20px;font-weight:bold;font-style:normal}.tile.s0{color:#a92e2a}.tile.s1{color:#216949}.tile.s2{color:#244c85}.tile.s3{color:#305448}.tile.s3.red{color:#b73027}.tile.s3.green{color:#127743}.tile.s3 strong{font-size:41px}.tile.selected{transform:translateY(-19px);border-color:#efc573;box-shadow:0 0 0 2px #efc573,0 10px 15px #0003}.tile.drawn{margin-left:15px}.river .tile,.mini .tile,.melds .tile{width:27px;height:36px;border-radius:3px;border-bottom-width:3px;padding:2px;box-shadow:0 2px 2px #0002}.river .tile strong,.mini .tile strong,.melds .tile strong{font-size:16px}.river .tile em,.mini .tile em,.melds .tile em{font-size:10px}.last .tile strong{font-size:27px}.last .tile em{font-size:16px}.table-mark{position:absolute;left:50%;top:64%;transform:translateX(-50%);color:#d8e7b921;font-family:serif;font-size:23px;letter-spacing:5px;white-space:nowrap}.table-mark small{display:block;text-align:center;font:10px sans-serif;letter-spacing:5px;margin-top:6px}.bottom{padding:22px 20px 0}.status-line{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:15px}.me{display:flex;gap:11px;align-items:center;min-width:170px}.me .avatar{background:linear-gradient(140deg,#538d7b,#245643)}.me small{display:block;color:#9bb6a7;margin-top:6px;font-size:12px}.dealer{background:#d9b36c;color:#283d2b;border-radius:3px;padding:2px 4px;font-size:11px;margin-left:6px}#status{color:#e6d6a5;text-align:center;font-size:15px}.actions{display:flex;gap:7px}.actions button{border-color:#efc57777;color:#fbe1a5;background:#ae844528;padding:10px 18px}.hand{display:flex;justify-content:center;gap:6px;padding-top:24px;min-height:119px}.melds{display:flex;gap:12px;justify-content:flex-end}.mini{display:flex;gap:1px;margin-top:6px;max-width:140px;flex-wrap:wrap}.meldgroup{display:flex;gap:2px}.hand-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;color:#90aa9e;font-size:13px}.hand-footer>div{display:flex;gap:12px}.primary{background:linear-gradient(#f2d293,#d4aa65);border-color:#f7d99e;color:#284538;font-weight:bold;min-width:137px;font-size:18px;box-shadow:0 4px 0 #7c6544}.primary:hover:not(:disabled){background:#f5d697}footer{max-width:1260px;margin:22px auto;padding:16px 20px;border-top:1px solid #ffffff0c;display:flex;justify-content:space-between;color:#6f9587;font-size:12px}.flash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:4;font:bold 80px serif;color:#ffe9a4;text-shadow:0 4px 0 #664a20,0 0 35px #dfb460;opacity:0}.flash.show{animation:pop 1s ease forwards}@keyframes pop{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.15)}70%{opacity:1}100%{opacity:0;transform:scale(1)}}dialog{border:1px solid #a6ac7866;background:#173e35;color:#e9eddc;border-radius:22px;padding:36px;max-width:530px;width:calc(100% - 30px);box-shadow:0 30px 100px #0009}dialog::backdrop{background:#021b18b8;backdrop-filter:blur(5px)}dialog h2{font:700 30px serif;color:#f5daa0;margin-top:0}dialog p,dialog li{line-height:1.9;color:#c8d6c5;font-size:15px}dialog a{color:#e8cd8e}.close{position:absolute;right:12px;top:12px;border:0;padding:5px 10px;font-size:22px}.result-score{font:48px Arial;color:#f9d48c;margin:20px 0}.reveal{display:flex;flex-wrap:wrap;gap:3px;margin:12px 0}.reveal .tile{width:28px;height:40px}.reveal .tile strong{font-size:17px}.reveal .tile em{font-size:10px}@media(min-width:1500px){.table{height:510px}header{height:100px}.bottom{padding-top:27px}}@media(max-width:1000px){main{padding:0 12px}header{padding:0 20px}.mode{display:none}.tile{width:calc((100vw - 130px)/14);height:78px}.tile strong{font-size:29px}.tile em{font-size:17px}.r3{left:95px;width:105px}.r1{right:95px;width:105px}.table{border-radius:90px}.west{left:15px}.east{right:15px}.hand{gap:4px}.bottom{padding:15px 10px 0}.status-line{gap:7px}.me{min-width:130px}.actions button{padding:9px 12px}}
@media(max-width:620px){header{height:73px;padding:0 14px}.brand{font-size:20px;gap:7px}.brand small{font-size:8px;letter-spacing:1px}.logo{width:33px;height:42px;font-size:25px}nav{gap:4px}nav button{font-size:12px;padding:8px}.table-top{font-size:11px;padding:13px 5px}.table-top>span:first-child{max-width:50%}.table{height:418px;border-width:5px;border-radius:65px}.rim{inset:10px;border-radius:52px}.avatar{width:38px;height:38px;font-size:21px}.player-info{font-size:12px}.player-info small{font-size:11px}.north{top:14px;gap:8px}.west{left:8px;top:41%;gap:7px}.east{right:8px;top:41%;gap:7px}.back{width:7px;height:14px}.backs{gap:1px}.west .backs,.east .backs{display:none}.r3{left:62px;width:58px;top:147px;max-height:154px}.r1{right:62px;width:58px;top:147px;max-height:154px}.r2,.r0{width:184px;left:calc(50% - 92px);max-height:83px;gap:2px}.r2{top:92px}.r0{bottom:17px}.river .tile{width:21px;height:29px}.river .tile strong{font-size:13px}.river .tile em{font-size:8px}.center{gap:0;top:54%;flex-direction:column}.wind{width:78px;height:65px;grid-template-columns:15px 48px 15px;grid-template-rows:12px 41px 12px;font-size:12px}.wind b{font-size:24px}.wind b small{font-size:9px}.last{width:100px;margin-top:7px}.last .tile{width:31px;height:43px;margin-top:4px}.last .tile strong{font-size:19px}.last .tile em{font-size:12px}#lastLabel{font-size:10px}.table-mark{display:none}.bottom{padding:12px 0 0}.me{min-width:104px;font-size:13px}.me .avatar{width:32px;height:32px;font-size:17px}.me small{font-size:10px}.status-line{flex-wrap:wrap;min-height:60px}.status-line p{font-size:12px;flex:1}.actions{width:100%;justify-content:center}.actions:empty{display:none}.actions button{font-size:14px}.hand{gap:2px;padding-top:22px;min-height:88px}.hand .tile{width:calc((100vw - 64px)/14);height:56px;border-bottom-width:4px;border-radius:4px}.hand .tile strong{font-size:21px}.hand .tile em{font-size:12px}.hand .tile.s3 strong{font-size:24px}.tile.drawn{margin-left:6px}.hand-footer{margin-top:10px;gap:8px}.hand-footer>span{font-size:10px;max-width:130px}.hand-footer>div{gap:6px}.hand-footer button{font-size:13px;padding:10px}.primary{min-width:85px}footer{font-size:10px;margin:16px 12px;padding:12px 0}.mini{max-width:58px}.mini .tile{width:14px;height:22px}.mini .tile strong{font-size:10px}.mini .tile em{font-size:7px}.north .mini{max-width:140px}.flash{font-size:65px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}

/* Traditional vector tile artwork, shared by every game surface. */
.tile,.hand .tile,.river .tile,.mini .tile,.melds .tile,.last .tile,.reveal .tile{padding:0;border:0;border-radius:7px;background:transparent;box-shadow:0 4px 0 #aabca1,0 6px 5px #0005;overflow:visible}
.tile-art{display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit;pointer-events:none;user-select:none}
.tile.selected{box-shadow:0 0 0 3px #efc573,0 5px 0 #8fa787,0 12px 17px #0005}
.hand .tile:hover:not(:disabled){background:transparent;filter:brightness(1.04)}
.hand .tile.selected:hover:not(:disabled){transform:translateY(-19px)}
.river .tile,.mini .tile,.melds .tile{border-radius:3px;box-shadow:0 2px 0 #aabca1,0 3px 2px #0004}
.hand{gap:7px}
@media(max-width:1000px){.hand{gap:4px}}
@media(max-width:620px){.hand{gap:2px}.hand .tile{border-radius:4px}.river .tile,.mini .tile{border-radius:2px}}

/* Keep the hit target stationary across both clicks. */
.hand .tile,.hand .tile:hover:not(:disabled),.hand .tile.selected,.hand .tile.selected:hover:not(:disabled){transform:none;touch-action:manipulation}

#score{font-size:14px;color:#f1d38e;font-variant-numeric:tabular-nums}
@media(max-width:620px){#score{font-size:12px}}