.center{top:20%}.river{top:48%;bottom:205px}.self-discard-area{position:absolute;z-index:1;bottom:130px;left:17%;right:17%;height:62px;display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #e2ca8b45;border-radius:10px;background:linear-gradient(110deg,#123d2d44,#1e54393b);box-shadow:inset 0 1px 6px #052f2222}.self-discard-label{font-size:8px;line-height:1.6;text-align:center;flex-shrink:0;color:#dbc58c;letter-spacing:1px}.self-discard-tiles{min-width:0;flex:1;max-height:53px;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:0 2px 4px;scrollbar-width:thin;scrollbar-color:#a6b37b transparent}.self-discard-tiles .tile{width:20px;height:27px;border-radius:3px;border-right-width:1px;border-left-width:1px;border-bottom-width:3px;box-shadow:1px 2px 0 #33753a,1px 3px 0 #245b2f,2px 4px 4px #06271c40}.self-discard-tiles .tile:last-child{outline:1px solid #ecd093;outline-offset:1px}.self-discard-tiles:empty:after{content:'你打出的牌放在这里';font-size:8px;color:#afbf9566;align-self:center;line-height:32px;white-space:nowrap}.has-melds .self-discard-area{bottom:156px}.has-melds .river{bottom:231px;top:45%}@media(max-height:650px) and (orientation:portrait){.center{top:19%}.compass{height:46px}.self-discard-area{bottom:114px;height:52px;left:17%;right:17%;padding:4px 5px;gap:5px}.self-discard-tiles{max-height:44px}.self-discard-tiles .tile{height:25px;width:18px}.river{top:47%;bottom:174px}.has-melds .self-discard-area{bottom:140px}.has-melds .river{bottom:200px;top:42%}.has-melds .center{top:18%}.has-melds .compass{height:31px}.has-melds .compass>span{display:none}}@media(max-height:560px) and (orientation:portrait){.table{min-height:380px}.has-melds .river{top:42%;bottom:200px}}@media(min-width:600px) and (min-height:600px){.self-discard-area{bottom:161px;height:69px;left:20%;right:20%;padding:7px 10px;gap:13px}.self-discard-label{font-size:10px}.self-discard-tiles{max-height:56px;gap:5px}.self-discard-tiles .tile{width:26px;height:36px}.river{bottom:242px;top:46%}.has-melds .self-discard-area{bottom:190px}.has-melds .river{bottom:271px;top:44%}}@media(orientation:landscape) and (max-height:599px){.center{top:17%}.compass{display:none}.river{top:34%;bottom:120px}.self-discard-area{bottom:76px;height:32px;left:17%;right:17%;gap:5px;padding:3px 6px}.self-discard-label{font-size:7px;line-height:1.3}.self-discard-tiles{max-height:25px;padding-bottom:3px;gap:3px}.self-discard-tiles .tile{width:17px;height:23px}.self-discard-tiles:empty:after{line-height:22px;font-size:8px}.has-melds .self-discard-area{bottom:99px}.has-melds .river{bottom:143px;top:31%}}

/* Each opponent retains their unclaimed discards on the table. */
.compass b{font-size:23px;white-space:nowrap;letter-spacing:1px}.compass>div{gap:8px}
#river{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:5px;overflow:hidden;padding:0;background:transparent}.opponent-discard{min-width:0;min-height:0;border:1px solid #e2ca8b30;border-radius:7px;background:#123d2d33;padding:4px;display:flex;flex-direction:column;gap:4px}.opponent-discard small{font-size:8px;color:#cbb986;text-align:center}.opponent-discard-tiles{display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;overflow:auto;min-height:0;scrollbar-width:thin}.opponent-discard-tiles:empty:after{content:'待出牌';font-size:8px;color:#a7b69588;margin:auto}#river .tile{width:18px;height:25px;flex-shrink:0}.opponent-discard-tiles .tile:last-child{outline:1px solid #d8bf7d;outline-offset:1px}@media(min-width:600px) and (min-height:600px){.compass b{font-size:28px}#river .tile{width:24px;height:33px}.opponent-discard small{font-size:10px}}@media(orientation:landscape) and (max-height:599px){.opponent-discard{padding:3px;gap:2px}.opponent-discard small{font-size:7px}#river .tile{width:17px;height:23px}}

#river{top:auto;bottom:205px;height:76px}@media(max-height:650px) and (orientation:portrait){#river{top:auto;bottom:174px;height:66px}.has-melds #river{bottom:200px}}@media(min-width:600px) and (min-height:600px){#river{top:auto;bottom:242px;height:100px}.has-melds #river{bottom:271px}}@media(orientation:landscape) and (max-height:599px){#river{top:auto;bottom:120px;height:66px}.has-melds #river{bottom:143px}}

.center{top:16%}#latest-play{display:none}

#result{max-height:88%;overflow:auto;overscroll-behavior:contain}.hu-detail{text-align:left;margin-top:15px;border-top:1px solid #cfb67855;padding-top:12px;font-size:12px;line-height:1.7}.hu-detail h3{color:#ecd099;font-size:16px;margin:0 0 8px}.hu-detail p{margin:8px 0}.hu-groups{display:grid;grid-template-columns:1fr;gap:5px}.hu-groups>div{padding:5px 8px;border-radius:7px;background:#0a2b2244}.hu-groups b{color:#ecd099}.hu-groups em{font-size:10px;font-style:normal;color:#d0bf91}.hu-score{padding:9px;border:1px solid #cbb47c55;border-radius:8px}.hu-detail small{color:#a6baab;font-size:10px}@media(orientation:landscape) and (max-height:599px){#result{max-height:90%;top:4%}.hu-detail{font-size:10px}.hu-groups{grid-template-columns:1fr 1fr}.hu-detail h3{font-size:14px}}

#result .hu-detail{color:#344d3b;border-color:#a7b298}#result .hu-detail h3,#result .hu-groups b{color:#28543e}#result .hu-groups>div{background:#d9e1ce}#result .hu-groups em,#result .hu-detail small{color:#656642}#result .hu-score{border-color:#a8b292;background:#e0e5d3}

.hu-forbidden{display:block;margin:3px auto 0;padding:2px 4px;border:1px solid #e4bb6b66;border-radius:4px;color:#ffe0a0;background:#543b1b99;font-size:8px;line-height:1.4;text-align:center}.player .hu-forbidden{font-size:9px}@media(orientation:landscape) and (max-height:599px){.hu-forbidden{font-size:7px;padding:1px 3px}}

.winning-complete{padding:10px 0;text-align:left;border-top:1px solid #aeb69b;border-bottom:1px solid #aeb69b}.winning-complete h3{font-size:15px;color:#28543e;margin:3px 0}.winning-tags{font-size:12px;color:#436346;margin:5px 0 10px}.winning-group{margin:8px 0}.winning-group>small{display:block;font-size:11px;color:#49674a;margin-bottom:5px}.winning-group .result-tiles{justify-content:flex-start;gap:4px;display:flex;flex-wrap:wrap}.winning-group .tile{width:29px;height:41px;flex-shrink:0}.winning-group .tile .joker-badge{font-size:8px}@media(min-width:600px){.winning-group .tile{width:36px;height:51px}}

.winning-all{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px}.winning-all .tile{width:29px;height:41px;flex-shrink:0}@media(min-width:600px){.winning-all .tile{width:36px;height:51px}}

/* Each seat keeps its own discards in front of that seat. */
.table-directions{position:absolute;right:14px;top:14px;width:54px;height:54px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center;z-index:3;border:1px solid #cdb57644;border-radius:12px;background:#143c2d66;color:#c8bd8d;font-size:10px}.direction-north{grid-area:1/2}.direction-west{grid-area:2/1}.direction-east{grid-area:2/3}.direction-south{grid-area:3/2}.table-directions .direction-active{color:#fff0bc;text-shadow:0 0 8px #d2bd68}#river{inset:0!important;height:auto!important;display:block;pointer-events:none;overflow:hidden;border:0!important;background:none!important}#river .opponent-discard{position:absolute;pointer-events:auto;display:flex;min-height:0;z-index:1;background:#174b3833;border:1px solid #cbb37533;gap:4px;padding:5px}.opponent-discard-2{top:24%;left:29%;right:29%;height:74px}.opponent-discard-3{left:17%;top:41%;width:23%;height:24%}.opponent-discard-1{right:17%;top:41%;width:23%;height:24%}.opponent-discard-tiles{flex:1;min-height:0;overflow:auto}.center{top:18%}#river .opponent-discard small{font-size:8px}.self-discard-area{z-index:2}@media(min-width:600px) and (min-height:600px){.opponent-discard-2{height:94px;top:24%;left:31%;right:31%}.opponent-discard-1,.opponent-discard-3{top:42%;height:23%;width:20%}.opponent-discard-1{right:20%}.opponent-discard-3{left:20%}.table-directions{width:65px;height:65px;font-size:12px}}@media(max-height:650px) and (orientation:portrait){.opponent-discard-2{top:25%;height:65px}.opponent-discard-1,.opponent-discard-3{top:43%;height:20%}#river .tile{width:16px;height:23px}}@media(orientation:landscape) and (max-height:599px){.table-directions{width:38px;height:38px;top:8px;right:10px;font-size:8px;border-radius:8px}.center{top:19%}.opponent-discard-2{top:29%;height:48px;left:32%;right:32%}.opponent-discard-1,.opponent-discard-3{top:43%;height:23%;width:23%}.opponent-discard-1{right:17%}.opponent-discard-3{left:17%}#river .opponent-discard{padding:3px;gap:2px}#river .opponent-discard small{font-size:7px}#river .tile{height:21px;width:15px}}

.opponent-melds{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:4px}.opponent-meld{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px;border:1px solid #c4b27344;border-radius:4px;background:#123d2d77}.opponent-meld>small{font-size:7px;color:#d5c48d;line-height:1}.opponent-meld-tiles{display:flex;gap:1px}.opponent-meld-tiles .tile{width:12px;height:17px;min-width:0;border-radius:2px;border-width:1px 1px 2px;box-shadow:1px 2px 0 #245b2f}.opponent-meld-tiles .back{width:10px;height:15px;margin:0}.west .opponent-melds,.east .opponent-melds{flex-direction:column;align-items:center}.west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:10px;height:15px}@media(min-width:600px) and (min-height:600px){.opponent-meld-tiles .tile{width:18px;height:25px}.west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:15px;height:21px}.opponent-meld>small{font-size:9px}}@media(orientation:landscape) and (max-height:599px){.opponent-melds{margin-top:2px;gap:2px}.opponent-meld>small{font-size:6px}.opponent-meld-tiles .tile{width:10px;height:14px}.west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:8px;height:12px}}

.center{top:46%;left:50%;width:54px;transform:translateX(-50%);z-index:1;pointer-events:none}.center p{margin:0;padding:7px 2px;font-size:8px;line-height:1.4;border:1px solid #a9ad6e44;border-radius:18px;background:#153b2b66;color:#bdc58f}@media(min-width:600px) and (min-height:600px){.center{width:65px}.center p{font-size:10px}}@media(orientation:landscape) and (max-height:599px){.center{top:40%;width:53px}.center p{font-size:7px;padding:4px 2px}}