:root{font-family:'Noto Sans SC',system-ui,sans-serif;color:#243c35;background:#f6f5ef;font-synthesis:none;--green:#196a50;--gold:#d8c18a}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:0;border-radius:9px;padding:10px 15px;background:#e9eee7;color:#234c3b;transition:transform .15s,background .15s}button:hover{background:#dbe6d8}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d6ad53;outline-offset:3px}button.primary,.actions .primary{background:#207a59;color:#fff;box-shadow:0 4px 12px #12563820}.primary:hover{background:#156b4b}.outline{border:1px solid #cad6c7;background:transparent}.topbar{max-width:1320px;margin:auto;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:21px;font-weight:700;text-decoration:none;color:inherit}.brand-icon{background:#e4ebe0;border:1px solid #cddbc7;width:44px;height:48px;display:grid;place-items:center;font-family:serif;font-size:27px;color:#1a5f42;box-shadow:0 3px 0 #c2cdbb;border-radius:8px}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:400;color:#7c8b80;margin-top:4px}.toolbar{display:flex;gap:10px;align-items:center;font-size:12px}.toolbar label{display:flex;align-items:center;gap:7px;color:#7b877a}.toolbar select{border:1px solid #dce2d6;border-radius:8px;padding:8px;background:#fff;color:#345341}main{max-width:1260px;margin:auto;padding:0 24px}.statusbar{display:flex;align-items:center;gap:10px;font-size:12px;color:#7d8d7c;margin-bottom:12px}.statusbar #round-label{font-weight:600;color:#425746;margin-right:12px}.online-dot{width:6px;height:6px;background:#4d9270;border-radius:50%}#save-status{margin-left:auto}.table{position:relative;height:640px;border-radius:28px;border:11px solid #343c31;background:radial-gradient(ellipse at 50% 40%,#28695a,#16483e 65%,#123d35);box-shadow:0 15px 35px #1d3f3420,inset 0 0 0 2px #b59d622b,inset 0 0 90px #082c3266;overflow:hidden}.table:before{content:'';position:absolute;inset:12px;border:1px solid #ffffff12;border-radius:14px;pointer-events:none}.player{position:absolute;z-index:2;color:#dcebe1;font-size:12px;min-width:142px}.player.top{left:50%;top:18px;transform:translateX(-50%);text-align:center}.player.left{left:22px;top:170px;width:160px}.player.right{right:22px;top:170px;width:160px}.profile{display:flex;align-items:center;gap:9px}.player.top .profile{justify-content:center}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#cfc4a9;color:#304c3b;font-size:18px;font-weight:700;box-shadow:0 3px 8px #0002}.avatar.a1{background:#e4ba91}.avatar.a2{background:#b9cbb6}.avatar.a3{background:#c3bfdc}.name{font-weight:600;font-size:13px}.player small{display:block;color:#adc7b8;font-size:10px;margin-top:3px}.score{font-size:15px;font-variant-numeric:tabular-nums;margin-left:auto;color:#eed9a3}.turn .avatar{outline:2px solid #edd7a4;outline-offset:3px}.badge{font-size:9px;padding:2px 5px;border-radius:4px;background:#ffffff15;color:#e2dec4;margin-left:4px}.backs{display:flex;gap:2px;margin-top:10px;justify-content:center}.back{height:25px;width:10px;background:linear-gradient(#abd4b0,#649f83);border:1px solid #bfd8ba;border-radius:2px;box-shadow:0 2px 0 #426859}.player .melds{margin-top:8px}.melds{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.meld-group{display:flex;gap:1px}.center-panel{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);text-align:center;color:#b9d0bf}.compass{display:grid;grid-template-columns:24px 75px 24px;grid-template-rows:19px 60px 19px;gap:4px;align-items:center;justify-content:center;color:#719e8b;font-size:11px}.compass span:first-child{grid-column:2}.compass b{background:#113e35;border:1px solid #9fbfa033;border-radius:14px;display:grid;place-items:center;height:62px;font-weight:500;font-size:15px;letter-spacing:3px;color:#d3d9b5;box-shadow:0 6px 20px #092c3144}.compass span:last-child{grid-column:2}#wall-count{margin:13px 0 5px;font-size:13px;letter-spacing:1px}#stage-label{font-size:10px;color:#88b3a0}#last-discard{min-height:62px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px}.river{position:absolute;display:flex;flex-wrap:wrap;gap:3px;max-height:86px;overflow:auto;scrollbar-width:none;width:208px;justify-content:center}.top-river{top:110px;left:50%;transform:translateX(-50%)}.left-river{left:22px;top:284px;width:180px}.right-river{right:22px;top:284px;width:180px}.bottom-river{left:50%;bottom:182px;transform:translateX(-50%);width:320px}.watermark{position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);font-size:28px;letter-spacing:7px;color:#ffffff08;pointer-events:none}.own-zone{position:absolute;bottom:20px;left:18px;right:18px;z-index:3}.own-profile{display:flex;align-items:center;justify-content:center;gap:10px;color:#ecf1dc;font-size:13px;margin-bottom:8px}.own-profile .avatar{width:28px;height:28px;font-size:13px;border-radius:9px;background:#d8cc99}.own-profile .score{margin-left:5px}.own-zone>.melds{justify-content:center;min-height:30px;margin-bottom:10px}.hand{display:flex;justify-content:center;gap:5px;align-items:flex-end;min-height:82px;padding-top:12px;overflow-x:auto;scrollbar-width:thin}.tile{position:relative;flex-shrink:0;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:44px;height:62px;background:linear-gradient(110deg,#fffff4,#eeead6);color:#284732;border:1px solid #d4d4b9;border-radius:5px;box-shadow:0 5px 0 #a3aa8f,0 6px 7px #071e2530;padding:2px;vertical-align:middle}.tile.man{color:#b04437}.tile.pin{color:#3c5c90}.tile.sou{color:#327753}.tile .number{font-family:serif;font-size:25px;font-weight:700;line-height:1.1}.tile .suit{font-family:serif;font-size:20px;line-height:1.15}.tile svg{width:34px;height:49px}.tile.small{width:24px;height:33px;border-radius:3px;box-shadow:0 2px 0 #899880;padding:1px}.tile.small .number{font-size:13px}.tile.small .suit{font-size:11px}.tile.small svg{width:19px;height:28px}.tile.tiny{width:19px;height:28px;box-shadow:0 2px 0 #899880}.tile.tiny .number{font-size:11px}.tile.tiny .suit{font-size:9px}.tile.tiny svg{width:15px;height:23px}.tile.selected{transform:translateY(-11px);outline:2px solid #e9c268;outline-offset:2px;box-shadow:0 5px 0 #bdaf78,0 8px 18px #092c3244}.tile.playable:hover{transform:translateY(-6px);background:#fff9dd}.tile.selected:hover{transform:translateY(-11px)}.controls{padding:17px 2px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px}.prompt{display:flex;gap:11px;align-items:center}.prompt-dot{height:9px;width:9px;border-radius:50%;background:#398366;box-shadow:0 0 0 5px #dfeadd}.prompt strong{display:block;font-size:15px}.prompt span:last-child{display:block;font-size:12px;color:#7c897c;margin-top:4px}.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.actions button{min-width:62px;font-size:14px}.below{border-top:1px solid #dde3d5;display:flex;justify-content:space-between;gap:20px;padding:16px 0}.tips{display:flex;gap:10px;align-items:center;color:#85937e;font-size:11px;max-width:640px}.tips>span{font-size:20px;color:#96aa8e}.tips p{margin:0;line-height:1.7}.record{width:260px;color:#5b715a;font-size:12px}.record summary{cursor:pointer;display:flex;justify-content:space-between}.record ol{padding-left:18px;max-height:180px;overflow:auto;font-size:11px;color:#7a8b76;line-height:1.9}footer{max-width:1260px;padding:12px 24px 25px;margin:auto;color:#8f9b87;font-size:10px}footer a{color:inherit;margin-left:12px}dialog{border:0;border-radius:24px;padding:36px;max-width:min(460px,92vw);box-shadow:0 30px 100px #061c3450;background:#fbfcf5;color:#324937}dialog::backdrop{background:#102b275f;backdrop-filter:blur(5px)}#welcome{text-align:left;width:440px}.dialog-icon{font-size:38px}.eyebrow{font-size:11px;color:#89a17c;letter-spacing:2px;margin-bottom:10px}dialog h1{font-size:32px;line-height:1.5;margin:10px 0;font-weight:600;letter-spacing:-1px}dialog p{font-size:13px;line-height:1.8;color:#73856a}dialog .primary{width:100%;margin:15px 0;padding:14px;text-align:left;display:flex;justify-content:space-between}dialog small{color:#95a08b;font-size:10px}.dialog-close{position:absolute;top:12px;right:12px;font-size:23px;background:transparent}#rules ol{padding-left:21px;font-size:13px;line-height:2;color:#6f8067}.result-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e0e7d9}.result-row.me{font-weight:700;color:#216b4e}.result-row b{font-variant-numeric:tabular-nums}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:12px;background:#183e35;color:#fff;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}#toast.visible{opacity:1}
@media(min-width:1400px){.table{height:680px}}@media(max-width:760px){.topbar{padding:13px 14px;gap:8px;flex-wrap:wrap}.brand{font-size:17px}.brand-icon{width:32px;height:36px;font-size:23px}.toolbar{width:100%;justify-content:space-between;gap:5px;font-size:10px}.toolbar label{gap:3px}.toolbar button,.toolbar select{padding:7px;font-size:10px}.toolbar #sound{display:none}main{padding:0 10px}.statusbar{font-size:9px;gap:5px}#save-status{display:none}.table{height:570px;border-width:7px;border-radius:20px}.player{min-width:110px;font-size:10px}.player.top{top:13px}.player.left{left:11px;top:160px;width:110px}.player.right{right:11px;top:160px;width:110px}.profile{gap:6px}.avatar{height:30px;width:30px;border-radius:9px;font-size:14px}.name{font-size:10px}.score{font-size:12px}.backs{gap:1px}.back{width:6px;height:18px}.player small{font-size:8px}.center-panel{top:37%}.compass{transform:scale(.85)}#wall-count{font-size:11px;margin-top:5px}#stage-label{font-size:8px}.top-river{top:99px;width:170px}.left-river{left:10px;top:237px;width:91px;max-height:128px}.right-river{right:10px;top:237px;width:91px;max-height:128px}.bottom-river{bottom:146px;width:230px;max-height:58px}.own-zone{left:6px;right:6px;bottom:14px}.hand{gap:2px;min-height:62px;justify-content:flex-start;padding-bottom:4px}.hand .tile{width:clamp(23px,6.1vw,36px);height:44px}.hand .tile .number{font-size:19px}.hand .tile .suit{font-size:15px}.hand .tile svg{width:24px;height:34px}.own-profile{font-size:11px}.controls{align-items:flex-start;padding:15px 3px;gap:8px;flex-direction:column}.actions{width:100%;justify-content:center}.actions button{font-size:13px;padding:9px 12px}.prompt strong{font-size:13px}.prompt span:last-child{font-size:10px}.below{flex-direction:column;gap:10px}.record{width:100%}.tips{font-size:10px}.watermark{font-size:20px;letter-spacing:3px}footer{font-size:9px;padding:8px 12px 20px}}@media(max-height:600px) and (min-width:650px){.topbar{padding:8px 18px}.table{height:420px}.player.left,.player.right{top:105px}.left-river,.right-river{top:190px}.top-river{top:87px}.bottom-river{bottom:128px}.own-zone{bottom:10px}.hand{min-height:64px}.hand .tile{height:48px;width:34px}.hand .tile svg{height:36px;width:25px}.center-panel{top:39%}.controls{padding:10px 2px;min-height:60px}.below{padding:8px 0}.player .backs{display:none}}

.hand .tile.locked{opacity:.55;cursor:default}.hand .tile.playable{outline:1px solid #e9c268;outline-offset:1px}

.tile{background:#fffdf6}.tile .number{color:#143d78}.tile .suit{color:#b4252b}.tile svg.traditional-art{overflow:visible}.hand .tile.locked{opacity:.78;filter:saturate(.78)}

/* Single-screen game layout: actions belong to the table, never below it. */
html,body{height:100%;height:100dvh;overflow:hidden}
body{display:flex;flex-direction:column;background:#102e2a}
.topbar{flex:0 0 auto;padding:8px 18px;min-height:48px;background:#f5f4ed}
.toolbar{flex-wrap:nowrap;gap:8px}.toolbar #sound{display:inline-block}
main{flex:1;min-height:0;width:100%;max-width:1600px;display:flex;flex-direction:column;padding:0 12px 10px;margin:auto}
.statusbar{flex:0 0 25px;margin:0;color:#e2ecde}
.table{flex:1;min-height:0;height:auto!important;overflow:hidden;border-width:8px;border-radius:22px}
footer,.below,.watermark{display:none}
.own-zone{bottom:12px;left:12px;right:12px;z-index:5}
.own-profile{margin-bottom:3px}.own-melds{margin-bottom:2px}
.hand{justify-content:center;gap:4px;min-height:72px;padding:4px 0 0;overflow:visible}
.hand .tile{width:clamp(25px,4.4vw,48px);height:clamp(40px,6.4vw,68px);flex-shrink:0}
.hand .tile svg{width:82%;height:88%}
.controls{position:absolute;left:12px;right:12px;bottom:122px;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 8px 6px;min-height:0;pointer-events:none;background:linear-gradient(0deg,#133f36b3,transparent);border-radius:16px}
.prompt{justify-content:center;text-align:center;background:#092f2ad9;border:1px solid #bdd3a448;border-radius:12px;padding:7px 15px;max-width:100%;pointer-events:auto}
.prompt strong{color:#fff7d5;font-size:16px}.prompt span:last-child{color:#d3e8d6;font-size:12px}.prompt-dot{display:none}
.actions{justify-content:center;align-items:center;gap:12px;width:100%;pointer-events:auto;flex-wrap:wrap}
.actions:empty{display:none}
.actions button{min-width:76px;min-height:50px;padding:10px 17px;font-size:20px;font-weight:700;background:linear-gradient(#ffedaa,#dca741);color:#49300f;border:2px solid #fff1b9;box-shadow:0 4px 0 #8d682c,0 6px 12px #0005;text-shadow:0 1px #fffa}
.actions button.primary{background:linear-gradient(#ffefb1,#e8b645);color:#49300f}
.actions button.action-peng,.actions button.action-kong,.actions button.action-hu,.actions button.action-pass{border-radius:50%;min-width:64px;width:64px;height:64px;padding:4px;font-size:29px}
.actions button.action-hu{background:linear-gradient(#ffdf85,#e99126);color:#a12117;animation:action-glow 1.4s ease-in-out infinite}
.actions button.action-pass{background:linear-gradient(#f3faf7,#b2cebf);border-color:#e5f4e9;color:#365d4c;font-size:24px}
.actions button:disabled{opacity:.45;box-shadow:none;cursor:default}.actions button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-2px)}
.bottom-river{bottom:242px;max-height:80px}.center-panel{top:35%;pointer-events:none}.top-river{top:100px}
.player.left,.player.right{top:24%}.left-river,.right-river{top:43%}
#records{width:460px}#records ol{max-height:65dvh;overflow:auto;font-size:14px;line-height:1.8}
@keyframes action-glow{50%{box-shadow:0 4px 0 #8d682c,0 0 25px #ffe39c99}}
@media(max-width:760px){
 .topbar{padding:5px 9px;min-height:40px;gap:4px;flex-wrap:nowrap}.brand{font-size:14px}.brand-icon{width:26px;height:28px;font-size:19px}.brand small{display:none}
 .toolbar{width:auto;margin-left:auto;gap:4px;justify-content:flex-end}.toolbar label:first-child{display:none}.toolbar button,.toolbar select{padding:6px;font-size:11px}.toolbar label{font-size:0}.toolbar #sound{display:inline-block}
 main{padding:0 5px 5px}.statusbar{flex-basis:22px;font-size:9px}.statusbar>span:nth-child(3){display:none}
 .table{border-width:5px;border-radius:14px}.own-zone{left:3px;right:3px;bottom:10px}.hand{gap:2px;min-height:54px}.hand .tile{width:clamp(20px,6vw,38px);height:clamp(34px,8.5vw,52px)}.hand .tile svg{width:88%;height:92%}.hand .tile .number{font-size:19px}.hand .tile .suit{font-size:15px}
 .controls{left:4px;right:4px;bottom:100px;padding:4px;gap:7px}.prompt{padding:6px 10px}.prompt strong{font-size:13px}.prompt span:last-child{font-size:10px}
 .actions{gap:8px}.actions button{min-width:64px;min-height:44px;font-size:17px;padding:8px 10px}.actions button.action-peng,.actions button.action-kong,.actions button.action-hu,.actions button.action-pass{width:54px;height:54px;min-width:54px;font-size:25px}
 .bottom-river{bottom:215px;max-height:65px}.top-river{top:90px}.player.left,.player.right{top:26%;width:85px;min-width:85px}.left-river,.right-river{top:44%;width:78px;max-height:100px}.center-panel{top:35%}
}
@media(max-height:600px) and (min-width:650px){
 .topbar{min-height:34px;padding:3px 12px}.brand{font-size:15px}.brand-icon{width:26px;height:27px}.brand small{display:none}.toolbar button,.toolbar select{padding:4px 8px}.statusbar{flex-basis:19px;font-size:10px}
 .own-zone{bottom:5px}.own-profile .avatar{height:24px;width:24px;font-size:13px}.own-profile .profile{padding:0}.hand{min-height:46px;gap:3px}.hand .tile{width:30px;height:44px}.hand .tile svg{width:90%;height:93%}.hand .tile .number{font-size:19px}.hand .tile .suit{font-size:15px}
 .controls{bottom:79px;left:23%;right:23%;gap:4px;padding:2px}.prompt{padding:3px 9px}.prompt strong{font-size:12px}.prompt span:last-child{display:none}.actions{gap:8px}.actions button{min-height:36px;font-size:16px;padding:5px 11px}.actions button.action-peng,.actions button.action-kong,.actions button.action-hu,.actions button.action-pass{width:46px;height:46px;min-width:46px;font-size:23px}
 .bottom-river{bottom:173px;max-height:55px}.player.top{top:5px}.top-river{top:54px;max-height:65px}.player.left,.player.right{top:15%}.left-river,.right-river{top:40%;max-height:80px}.center-panel{top:24%}.compass{transform:scale(.62);margin-bottom:-16px}#wall-count{font-size:10px}#stage-label{font-size:9px}#last-discard{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.actions button.action-hu{animation:none}}
.own-zone>.melds:empty{display:none}
.own-zone>.melds{min-height:0;margin-bottom:4px}
.own-profile{position:absolute;left:0;bottom:calc(100% + 5px);margin:0;justify-content:flex-start}
.compass span:nth-child(1){grid-area:1/2}.compass span:nth-child(2){grid-area:2/1}.compass b{grid-area:2/2}.compass span:nth-child(4){grid-area:2/3}.compass span:nth-child(5){grid-area:3/2}
@media(max-width:760px){.brand{font-size:12px;white-space:nowrap}.toolbar button,.toolbar select{font-size:10px;white-space:nowrap;padding:5px}.controls{bottom:130px}}
@media(max-height:600px) and (min-width:650px){.controls{bottom:90px}}
.tile{padding:0!important;background:transparent!important;border:0;overflow:hidden;box-shadow:0 3px 0 #94a395}
.tile img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.tile.playable:hover{background:transparent!important;filter:brightness(1.06)}

/* Four rivers form a ring, each facing its owner. */
.river-ring{position:absolute;left:50%;top:24%;width:clamp(230px,43vw,520px);height:34%;transform:translateX(-50%);pointer-events:none}
.river-ring .river{position:absolute;display:grid;grid-template-columns:repeat(6,24px);grid-auto-rows:33px;gap:3px;width:159px;max-height:none;overflow:visible;align-content:start;justify-content:start;margin:0}
.river-ring .top-river{left:50%;right:auto;top:0;bottom:auto;transform:translate(-50%,-50%) rotate(180deg)}
.river-ring .bottom-river{left:50%;right:auto;top:100%;bottom:auto;transform:translate(-50%,-50%)}
.river-ring .left-river{left:0;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(90deg)}
.river-ring .right-river{left:100%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(-90deg)}
.river-ring .tile{margin:0}.river-ring .river .tile:last-child{outline:1px solid #ffdd8d;outline-offset:1px}
.center-panel{top:41%;left:50%;transform:translate(-50%,-50%);z-index:1}.center-panel #last-discard{display:none}
.announcement{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%) scale(.9);z-index:15;opacity:0;pointer-events:none;white-space:pre-line;text-align:center;width:max-content;max-width:85%;padding:16px 24px;border-radius:20px;background:linear-gradient(#143e35f5,#092820ed);border:2px solid #e7c478;color:#ffe4a1;font-size:25px;font-weight:800;line-height:1.65;text-shadow:0 2px #0008;box-shadow:0 8px 30px #0005;transition:opacity .12s,transform .12s}
.announcement.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.last-action{position:absolute;top:6px;left:8px;max-width:45%;color:#ffdf96;font-size:11px;line-height:1.5;background:#0c2d2599;border-radius:8px;padding:4px 8px;z-index:5;pointer-events:none}.last-action:empty{display:none}
.flying-tile{position:fixed;z-index:100;pointer-events:none}.flying-tile .tile{width:40px;height:56px;box-shadow:0 5px 16px #0008}
@media(max-width:760px){.river-ring{width:190px;top:25%;height:29%}.river-ring .river{grid-template-columns:repeat(6,19px);grid-auto-rows:27px;width:124px;gap:2px}.river-ring .tile.small{width:19px;height:27px}.announcement{font-size:18px;padding:12px 16px}.last-action{max-width:62%;font-size:9px}.center-panel{top:39.5%}}
@media(max-height:600px) and (min-width:650px){.river-ring{width:330px;top:24%;height:31%}.river-ring .river{grid-template-columns:repeat(6,17px);grid-auto-rows:24px;width:112px;gap:2px}.river-ring .tile.small{width:17px;height:24px}.announcement{font-size:17px;padding:8px 14px}.last-action{font-size:9px;max-width:34%;padding:2px 5px}.center-panel{top:39.5%}}
@media(prefers-reduced-motion:reduce){.announcement{transition:none}}

.shot-player{filter:drop-shadow(0 0 10px #ff523b)}.shot-player .profile{background:#982e25cc;border-radius:12px}

/* Anchor the outside edges: new river rows grow toward the table centre. */
.river-ring .top-river{transform:translate(-50%,0) rotate(180deg)}
.river-ring .bottom-river{transform:translate(-50%,-100%)}
.player.top{z-index:4;max-width:42%;top:8px}.player.top .melds{flex-wrap:nowrap;gap:3px;justify-content:center}.player.top .backs{max-width:100%;justify-content:center;flex-wrap:nowrap}
.player.top .tile.small{width:18px;height:25px}.player.top .tile.tiny{width:17px;height:24px}
.hand .tile.fresh-draw{margin-right:clamp(6px,1.2vw,16px);box-shadow:0 3px 0 #94a395,0 0 0 2px #ffd467}
@media(max-width:760px){.river-ring{top:28%;height:27%}.player.top .tile.small{width:15px;height:21px}.player.top .tile.tiny{width:14px;height:20px}.hand{gap:1px}.hand .tile{width:clamp(19px,5.8vw,38px)}.hand .tile.fresh-draw{margin-right:6px}}
@media(max-height:600px) and (min-width:650px){.river-ring{top:29%;height:28%}.player.top .tile.small{width:13px;height:18px}.player.top .tile.tiny{width:13px;height:18px}}
.river-ring .river.dense{grid-template-columns:repeat(8,24px);width:213px}
@media(max-width:760px){.river-ring .river.dense{grid-template-columns:repeat(8,19px);width:166px}}
@media(max-height:600px) and (min-width:650px){.river-ring .river,.river-ring .river.dense{grid-template-columns:repeat(9,14px);grid-auto-rows:19px;width:142px;gap:2px}.river-ring .tile.small{width:14px;height:19px}}


.announcement{font-size:16px;line-height:1.6}.announcement::first-line{font-size:25px;font-weight:800}@media(max-width:760px),(max-height:600px){.announcement{font-size:12px;padding:9px 14px}.announcement::first-line{font-size:19px}}
.record-tools{display:flex;gap:6px;flex-wrap:wrap}.record-tools button{font-size:12px;padding:7px 10px}#history-list{max-height:25dvh;overflow:auto;margin:10px 0}.history-row{display:flex;gap:6px;border-bottom:1px solid #d4ded1;padding:5px 0}.history-row>button:first-child{flex:1;text-align:left}.history-row small{display:block;font-size:10px;font-weight:400;color:#6e806b}#history-status{font-size:11px}#history-title{font-size:13px}#records ol{max-height:35dvh}.toolbar #record-button{display:inline-block!important;flex-shrink:0}
#wall-count-fixed{margin-left:auto;white-space:nowrap;color:#ffdf94;font-weight:700}
.wall-ring{position:absolute;left:50%;top:19%;width:74%;height:46%;transform:translateX(-50%);pointer-events:none;z-index:0}
.wall-side{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;width:max-content;min-width:20px}.wall-backs{display:flex;gap:2px}.wall-back{display:block;width:7px;height:16px;border-radius:2px;background:linear-gradient(90deg,#3d6cb4,#8bc4f0,#34649c);border:1px solid #c3e1f0;box-shadow:0 2px 0 #163459}.wall-label{font-size:9px;line-height:1;color:#b9d7d1;text-shadow:0 1px #000}
.wall-top{left:50%;top:0;transform:translate(-50%,-100%)}.wall-bottom{left:50%;top:100%;transform:translate(-50%,0)}.wall-left{left:0;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.wall-right{left:100%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
@media(max-width:760px){.wall-ring{top:22%;width:88%;height:41%}.wall-back{width:4px;height:10px}.wall-backs{gap:1px}.wall-label{font-size:7px}#wall-count-fixed{display:inline!important;font-size:10px}}
@media(max-height:600px) and (min-width:650px){.wall-ring{top:23%;width:70%;height:38%}.wall-back{width:5px;height:10px}.wall-backs{gap:1px}.wall-label{font-size:7px}}

.settlement{font-size:12px;margin:12px 0}.settlement>div{max-height:24dvh;overflow:auto;line-height:1.8}.settlement summary{cursor:pointer;font-weight:700}

.match-record{border:1px solid #748b83;border-radius:12px;padding:12px;margin:14px 0}.match-record p{line-height:1.6}.match-record>button{margin:4px}.statusbar{flex-wrap:wrap}#round-label{white-space:normal}

/* Keep all three opponent controls visible on phones. */
@media(max-width:760px){.topbar{flex-wrap:wrap}.toolbar{width:100%;margin-left:0;justify-content:flex-start;overflow-x:auto;padding-bottom:3px}.toolbar label:first-child{display:flex}.toolbar label{font-size:10px;flex-shrink:0}.toolbar select{max-width:94px;text-overflow:ellipsis}.toolbar button{flex-shrink:0}}