:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#493425;background:#e7f3d1;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#fffdf1 0,#e6f4ce 58%,#d1eab9 100%)}button{font:inherit;cursor:pointer;border:2px solid #5c4637;color:#493425;background:#fff9e9;border-radius:18px;box-shadow:0 3px 0 #b6aa87;transition:transform .12s,background .12s}button:hover:not(:disabled){transform:translateY(-2px)}button:disabled{opacity:.5;cursor:not-allowed}.app-shell{min-height:100vh;padding:14px;display:flex;flex-direction:column;gap:10px;max-width:1540px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-weight:900;font-size:clamp(18px,2vw,27px);letter-spacing:.08em}.small{font-size:12px;color:#75675d}.top-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pill{padding:7px 12px;border-radius:100px;background:#fffdf0cc;border:1px solid #bdd49b;font-weight:700;font-size:13px}.screen-card{margin:auto;width:min(960px,100%);padding:clamp(20px,4vw,42px);background:#fffdf3ee;border:3px solid #947960;border-radius:32px;box-shadow:0 16px 45px #72945f33}.intro{font-size:14px;line-height:1.7;max-width:670px}.choices{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 24px}.choice{padding:12px 18px;min-width:130px;font-weight:700}.choice.active{background:#cce9cf;border-color:#477852;box-shadow:0 3px 0 #8bad91}.role-choice{width:145px;display:flex;align-items:center;gap:4px;justify-content:flex-start}.role-choice img{width:51px;height:49px;object-fit:contain}.primary{background:#8fc989;border-color:#3e7248;color:#163821;font-weight:900;padding:13px 28px;font-size:17px}.subtle{background:#fff7e9}.board{position:relative;flex:1;min-height:590px;background:#dff0c4;border:4px solid #8eae74;border-radius:48px;box-shadow:inset 0 0 0 8px #f7f9df,inset 0 0 0 12px #aec88f,0 12px 36px #78946545;overflow:hidden;display:grid;grid-template-columns:minmax(130px,1fr) minmax(350px,3fr) minmax(130px,1fr);grid-template-rows:122px minmax(220px,1fr) 195px;padding:16px;gap:8px}.board:before{content:"✿  ·  ♧  ·  ✿  ·  ♧";position:absolute;left:20px;bottom:7px;right:20px;text-align:center;color:#8bbf7d;letter-spacing:30px;pointer-events:none}.seat{background:#fffcf0d9;border:2px solid #9cba88;border-radius:22px;padding:8px;min-width:0;display:flex;gap:8px;align-items:center}.seat.current{outline:4px solid #f5c862}.seat.top{grid-column:2;grid-row:1;justify-content:center}.seat.left{grid-column:1;grid-row:2;flex-direction:column;align-self:center}.seat.right{grid-column:3;grid-row:2;flex-direction:column;align-self:center}.seat.bottom{grid-column:1/4;grid-row:3;display:block;position:relative;padding:10px 16px}.avatar{height:63px;width:63px;object-fit:contain;flex:none}.seat.left .avatar,.seat.right .avatar{height:70px;width:70px}.seat-name{font-weight:900;font-size:15px}.seat-score{font-size:14px;font-weight:800;color:#287152}.seat-info{font-size:12px;color:#736455}.backs{display:flex;max-width:250px;overflow:hidden}.back{width:18px;height:27px;margin-right:-4px;flex:none;background:linear-gradient(120deg,#55aa9e,#22918c);border:1px solid #276e69;border-radius:4px;box-shadow:2px 2px 0 #fff8e8}.river{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center;max-width:430px}.seat.left .river,.seat.right .river{max-width:150px}.center-area{grid-column:2;grid-row:2;align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px}.center-plaque{border:3px solid #9bb77d;background:#fff9dc;border-radius:35px;padding:14px 26px;box-shadow:0 4px 0 #85a876;font-weight:900;min-width:230px}.focus-tile{font-size:14px;font-weight:700;background:#fffdf3dd;padding:5px 12px;border-radius:100px}.melds{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.meld{display:flex;gap:1px;padding:3px;background:#dcf0df;border-radius:8px}.tile{width:clamp(30px,3.7vw,52px);height:clamp(46px,5.8vw,72px);display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #5b4338;border-radius:8px;background:linear-gradient(#fffef6 0 86%,#5cb8a8 86%);box-shadow:2px 3px 0 #3b887b,0 4px 9px #59483427;line-height:1;flex:none;user-select:none}.tile .num{font-size:clamp(18px,2.2vw,30px);font-weight:900}.tile .suit{font-size:12px;font-weight:800;margin-top:5px}.tile.wan .num{color:#b13836}.tile.tong .num{color:#287768}.tile.tiao .num{color:#317c3d}.tile.mini{width:27px;height:36px;border-radius:5px;box-shadow:1px 1px 0 #317d72}.tile.mini .num{font-size:14px}.tile.mini .suit{font-size:9px;margin-top:2px}.tile.selected{transform:translateY(-11px);border-color:#ecaa38;box-shadow:2px 3px 0 #c9943c,0 0 0 3px #ffe19a}.tile.available{cursor:pointer}.tile.available:hover{transform:translateY(-8px)}.tile.restricted{opacity:.48}.hand-row{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:14px 2px 7px;scrollbar-width:thin}.hand-row .tile.drawn{margin-left:14px}.hand-top{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}.hand-top .tag{background:#fff2c8;padding:3px 9px;border-radius:50px}.bottom-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.bottom-avatar{height:60px;width:68px;object-fit:contain}.hand-holder{flex:1;min-width:0}.actionbar{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;min-height:47px}.actionbar button{padding:8px 15px;font-weight:900}.actionbar .hu{background:#ffc0c4}.actionbar .gang{background:#bef1e6}.actionbar .peng{background:#b0dca8}.actionbar .pass{background:#fffaf0}.status-strip{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}.hint-card,.event-card{background:#fffaf0e8;border:2px solid #baa387;border-radius:20px;padding:9px 14px;font-size:13px}.hint-card{min-width:290px;flex:1}.hint-title{font-weight:900;color:#32816a}.hint-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.hint-item{background:#e2f3db;border-radius:8px;padding:4px 6px}.event-card{max-width:45%;min-width:260px;color:#6a5a4b}.phase-panel{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,90%);padding:18px;background:#fffdf4f5;border:3px solid #8a7159;border-radius:27px;box-shadow:0 15px 40px #3b473c66;text-align:center}.phase-panel h2{margin:3px 0 8px;font-size:21px}.phase-panel p{margin:5px 0 12px;font-size:14px}.phase-panel .hand-row{justify-content:center;flex-wrap:wrap}.phase-panel .choice{min-width:95px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.result-person{background:#ecf6e4;padding:8px;border-radius:14px}.result-person strong{display:block}.ledger-list{max-height:140px;overflow:auto;text-align:left;font-size:12px;color:#6b5b4b}.ledger-list div{padding:3px 0;border-bottom:1px solid #eadccc}.error{color:#a92727;font-weight:700}.rules-note{font-size:12px;color:#695d4f;margin-top:15px}.desktop-tip{font-size:11px;color:#5e6854}@media(max-width:850px){.app-shell{padding:6px;gap:5px}.board{min-height:500px;border-radius:25px;grid-template-columns:120px minmax(250px,1fr) 120px;grid-template-rows:102px minmax(190px,1fr) 165px;padding:7px}.seat{padding:5px}.avatar{width:46px;height:46px}.seat.left .avatar,.seat.right .avatar{height:48px;width:48px}.seat-name{font-size:12px}.seat-info,.seat-score{font-size:10px}.seat.bottom{padding:5px}.bottom-avatar{width:43px;height:43px}.tile{width:36px;height:50px}.tile .num{font-size:19px}.tile .suit{font-size:10px}.hand-row{padding-top:10px}.actionbar button{padding:6px 9px;font-size:12px}.status-strip{display:none}}@media(max-width:690px) and (orientation:portrait){.board{min-width:680px}.app-shell{overflow-x:auto}.topbar{min-width:680px}.desktop-tip:after{content:" · 建议横屏游玩"}}@media(orientation:landscape) and (max-height:560px){.app-shell{min-height:100vh;padding:3px;gap:2px}.topbar{min-height:32px}.pill{padding:3px 8px;font-size:11px}.board{min-height:calc(100vh - 60px);grid-template-rows:62px minmax(85px,1fr) 120px;padding:5px;gap:3px;border-radius:20px}.seat{border-radius:12px;padding:3px;gap:3px}.seat.top .backs{display:none}.seat.top .river{max-height:33px;overflow:hidden}.seat.left .backs,.seat.right .backs{display:none}.avatar,.seat.left .avatar,.seat.right .avatar{width:37px;height:37px}.seat.bottom{padding:3px 6px}.bottom-avatar{width:35px;height:35px}.tile{width:31px;height:41px;border-radius:5px}.tile .num{font-size:17px}.tile .suit{font-size:9px;margin-top:2px}.tile.mini{width:20px;height:28px}.tile.mini .num{font-size:11px}.tile.mini .suit{font-size:7px}.hand-row{padding:5px 1px 3px}.actionbar{min-height:28px;gap:3px}.actionbar button{padding:3px 7px;font-size:11px}.hand-top{font-size:11px}.center-plaque{padding:5px 12px;min-width:160px;font-size:12px}.focus-tile{font-size:11px;padding:3px 8px}.phase-panel{padding:8px}.phase-panel h2{font-size:16px}.phase-panel p{font-size:11px}.phase-panel .hand-row .tile{width:29px;height:40px}.desktop-tip{display:none}}
.board-hint{position:absolute;z-index:4;left:50%;bottom:198px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);max-height:125px;overflow:auto;box-shadow:0 7px 18px #52794c44}
.board-hint:empty{display:none}
@media(max-width:850px){.board-hint{bottom:168px;max-height:95px;padding:6px 9px;font-size:11px}}
@media(orientation:landscape) and (max-height:560px){.board-hint{bottom:122px;max-height:80px}}
.tile{border:0;background:transparent;box-shadow:none;overflow:visible}
.tile svg{display:block;width:100%;height:100%;overflow:hidden;clip-path:inset(1% round 11%);filter:drop-shadow(1px 2px 1px #4f7956aa)}
.tile.selected{border:0;box-shadow:0 0 0 3px #f4bf4e,0 0 13px #f2c852;border-radius:7px}
.tile.mini{border:0;background:transparent;box-shadow:none}
.hint-item{display:flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}
.hint-item .tile{width:24px;height:33px}
.seat.bottom{border:0;background:transparent;overflow:visible}
.seat.bottom.current{outline:0}
.hand-frame{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.hand-mascot{position:absolute;z-index:3;top:-27px;left:17px;width:78px;height:78px;pointer-events:none;animation:mascot-idle 4.2s ease-in-out infinite}
.hand-mascot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hand-mascot .mascot-blink{opacity:0;animation:mascot-blink 4.2s step-end infinite}
.seat.bottom .hand-top,.seat.bottom .bottom-main{position:relative;z-index:2}
.seat.bottom .hand-top{padding-left:82px}
.seat.bottom .hand-holder{padding-left:66px}
.fx-layer{position:absolute;z-index:7;left:50%;top:44%;transform:translate(-50%,-50%);min-width:190px;max-width:80%;padding:9px 25px;text-align:center;border:3px solid #6e7453;border-radius:27px;background:#fff9e9f2;box-shadow:0 9px 25px #53664766;pointer-events:none;animation:fx-pop .85s ease-out both}
.fx-layer img{display:block;width:70px;height:70px;object-fit:contain;margin:-24px auto -4px;animation:mascot-idle .7s ease-in-out infinite}
.fx-layer strong{display:block;font-size:clamp(24px,4vw,46px);line-height:1.1;color:#346e49;text-shadow:2px 2px 0 #fff}
.fx-layer span{font-size:12px;font-weight:800}
.fx-layer .fx-burst{position:absolute;inset:-20px -35px auto;color:#e49e43;font-size:24px;letter-spacing:17px;animation:fx-spark .85s ease-out both}
.fx-layer.gang{border-color:#45aa9a;background:#e7fff9f2}.fx-layer.gang strong{color:#208b81}
.fx-layer.hu{border-color:#e4819a;background:#fff0f4f2}.fx-layer.hu strong{color:#cf5572}
.fx-layer.big{border-color:#efb94b;background:#fff1b9f5;animation:fx-big 2.3s ease-out both}
.fx-layer.big img{width:103px;height:103px}
.fx-layer.big strong{color:#b76231}
.fx-layer.big .fx-burst{font-size:38px;animation:fx-spark 2.3s ease-out both}
@keyframes mascot-idle{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-3px) rotate(2deg)}70%{transform:translateY(1px) rotate(-2deg)}}
@keyframes mascot-blink{0%,44%,49%,100%{opacity:0}45%,48%{opacity:1}}
@keyframes fx-pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.6)}22%{opacity:1;transform:translate(-50%,-52%) scale(1.08)}68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-48%) scale(.94)}}
@keyframes fx-big{0%{opacity:0;transform:translate(-50%,-42%) scale(.5)}18%{opacity:1;transform:translate(-50%,-52%) scale(1.12)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-45%) scale(1.12)}}
@keyframes fx-spark{0%{opacity:0;transform:scale(.3) rotate(-16deg)}30%,65%{opacity:1;transform:scale(1.1) rotate(8deg)}100%{opacity:0;transform:scale(1.35) rotate(20deg)}}
@media(max-width:850px){.hand-mascot{top:-20px;left:9px;width:58px;height:58px}.seat.bottom .hand-top{padding-left:62px}.seat.bottom .hand-holder{padding-left:48px}.hint-item .tile{width:19px;height:27px}.fx-layer img{width:52px;height:52px}}
@media(orientation:landscape) and (max-height:560px){.hand-mascot{top:-15px;left:6px;width:45px;height:45px}.seat.bottom .hand-top{padding-left:49px}.seat.bottom .hand-holder{padding-left:40px}.fx-layer{top:42%;padding:5px 15px}.fx-layer.big img{width:65px;height:65px}.fx-layer span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hand-mascot,.hand-mascot .mascot-blink,.fx-layer,.fx-layer img,.fx-layer .fx-burst{animation:none}.hand-mascot .mascot-blink{display:none}}
.mode-note{margin:-14px 0 16px;padding:9px 13px;background:#edf7df;border-left:4px solid #83ad72;border-radius:8px;font-size:13px;font-weight:700}
.resume-card .choices{margin-bottom:0}
.guide-step{display:inline-block;padding:5px 11px;border-radius:999px;background:#fff0c8;color:#735232;font-size:12px;font-weight:900}
.selection-count{font-weight:900;color:#357757}
.control-pill{font-size:12px;box-shadow:0 2px 0 #abc391;padding:6px 10px}
.move-card{display:flex;align-items:center;gap:8px;border:2px solid #a6c18c;border-radius:17px;background:#fffdf2;box-shadow:0 3px 0 #b7d0a7;padding:4px 8px}
.move-card.opponent-move{border-color:#e2ad55;background:#fff6dd;animation:move-flash .7s ease-out}
.move-card.reaction-focus{outline:3px solid #f6ca67}
.move-card img{width:33px;height:33px;object-fit:contain}
.move-card span{line-height:1.15;text-align:left}
.move-card .tile{width:26px;height:35px}
.event-line{margin-top:4px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5c6854;font-size:11px;font-weight:700}
.seat.last-discarder:not(.bottom){box-shadow:0 0 0 3px #efc06a}
.seat.finished{opacity:.7}
.seat.bottom .hand-row .tile.drawn{position:relative;margin-left:17px;box-shadow:0 0 0 2px #f0bf4d;border-radius:8px}
.seat.bottom .hand-row .tile.drawn:after{content:"摸";position:absolute;top:-12px;right:0;padding:1px 3px;border-radius:5px;background:#ffe394;color:#65431e;font-size:9px;font-weight:900}
.phase-panel{max-height:min(88vh,650px);overflow-y:auto}
.win-list{display:flex;flex-direction:column;gap:5px;max-height:155px;overflow:auto;text-align:left}
.win-card{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:11px;background:#eaf6e3;font-size:12px}
.win-card .tile{width:25px;height:34px}
.win-card div:nth-child(2){flex:1;min-width:0}
.win-card strong,.win-card span{display:block}
.win-card span{color:#6a6557}
.win-card b{color:#217451;white-space:nowrap}
.ledger-group{margin-top:5px;padding:5px 8px;border:1px solid #d5c5a6;border-radius:9px;background:#fffaf0;text-align:left;font-size:12px}
.ledger-group summary{cursor:pointer;font-weight:800}
@keyframes move-flash{0%{transform:scale(.84);opacity:.4}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@media(orientation:landscape) and (max-height:560px){.center-area{gap:3px}.event-line{max-width:170px;font-size:9px}.move-card{gap:4px;padding:2px 5px;font-size:10px}.move-card img{width:22px;height:22px}.move-card .tile{width:20px;height:27px}.control-pill{padding:2px 6px;font-size:10px}.phase-panel{max-height:92vh}.win-list{max-height:80px}.win-card{padding:3px 5px;font-size:10px}.win-card .tile{width:20px;height:27px}.ledger-group{margin-top:3px;padding:3px 5px}}
@media(prefers-reduced-motion:reduce){.move-card.opponent-move{animation:none}}
.center-area{align-self:stretch;min-height:0;width:100%;display:grid;grid-template-columns:minmax(60px,1fr) minmax(135px,1.7fr) minmax(60px,1fr);grid-template-rows:auto minmax(64px,1fr) auto;gap:2px}
.center-hub{grid-column:2;grid-row:2;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.center-hub .center-plaque{min-width:0;width:min(100%,270px);padding:5px 8px;border-radius:17px}
.center-hub .focus-tile{max-width:100%}
.center-hub .reaction-actions{min-height:0;justify-content:center;gap:4px;flex-wrap:nowrap;z-index:3}.center-hub .reaction-actions button{padding:4px 8px;border-radius:10px;font-size:12px;white-space:nowrap;box-shadow:0 2px 0 #a6b797}
.river-zone{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;gap:3px;color:#53765a;font-size:9px;font-weight:800}
.river-zone>span{white-space:nowrap}
.river-zone .river-tiles{display:grid;gap:1px;align-items:center;justify-content:center}
.river-zone .tile{width:20px;height:27px}
.river-north{grid-column:2;grid-row:1;flex-direction:column}.river-south{grid-column:2;grid-row:3;flex-direction:column}
.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(9,20px)}
.river-west{grid-column:1;grid-row:2;flex-direction:column}.river-east{grid-column:3;grid-row:2;flex-direction:column}
.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(3,20px)}
.river-zone .tile.latest{outline:2px solid #f3bb4c;border-radius:5px;filter:drop-shadow(0 0 5px #ffe895)}
.move-card.opponent-move.from-1{animation:move-from-left .7s ease-out}
.move-card.opponent-move.from-2{animation:move-from-top .7s ease-out}
.move-card.opponent-move.from-3{animation:move-from-right .7s ease-out}
.move-card.from-0{animation:move-from-bottom .5s ease-out}
@keyframes move-from-left{from{opacity:.3;transform:translateX(-55px) scale(.7)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes move-from-top{from{opacity:.3;transform:translateY(-42px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes move-from-right{from{opacity:.3;transform:translateX(55px) scale(.7)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes move-from-bottom{from{opacity:.3;transform:translateY(38px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
.settings-trigger{white-space:nowrap}
.turn-pill{background:#fff0c6;border-color:#e8bf73;white-space:nowrap}
.quick-panel{width:min(430px,90%)}.quick-panel .choices{justify-content:center;margin:12px 0}.quick-panel .choice{min-width:150px}
.history-panel{width:min(720px,93%);max-height:88vh;overflow:auto}.history-seat{text-align:left;margin:8px 0;padding:7px;border-radius:12px;background:#eef5e6}.history-tiles{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.history-tiles .claimed{opacity:.45}
.winner-group{border:1px solid #b9d3a9;border-radius:10px;padding:4px;background:#f4faed}.winner-group summary{cursor:pointer;font-weight:900}.winner-group .win-card{margin-top:4px}
.fx-layer{top:31%;min-width:155px;max-width:56%;padding:6px 16px}.fx-layer.big{top:29%}
.fx-layer[data-role="吉伊"]{--role-accent:#e9a7ae;border-color:var(--role-accent)}
.fx-layer[data-role="小八"]{--role-accent:#84bed6;border-color:var(--role-accent)}
.fx-layer[data-role="乌萨奇"]{--role-accent:#e9bd59;border-color:var(--role-accent)}
.fx-layer[data-role="小飞鼠"]{--role-accent:#bca2d8;border-color:var(--role-accent)}
.fx-layer[data-role] .fx-burst{color:var(--role-accent)}
.fx-layer[data-role="乌萨奇"] img{animation:role-hop .52s ease-in-out infinite alternate}
.fx-layer[data-role="小八"] img{animation:role-wiggle .65s ease-in-out infinite alternate}
.fx-layer[data-role="吉伊"] img{animation:role-bob .7s ease-in-out infinite alternate}
.fx-layer[data-role="小飞鼠"] img{animation:role-float .8s ease-in-out infinite alternate}
@keyframes role-hop{to{transform:translateY(-9px) rotate(3deg)}}@keyframes role-wiggle{to{transform:rotate(-8deg)}}@keyframes role-bob{to{transform:translateY(-4px) scale(1.05)}}@keyframes role-float{to{transform:translateY(-7px) rotate(7deg)}}
.result-person span{display:block;font-size:12px}.result-person span:first-of-type{color:#287152;font-weight:900}
.board-hint{z-index:6;max-width:min(420px,calc(100% - 18px));pointer-events:auto}
.hint-more{display:block;margin-top:5px;padding:2px 7px;border-radius:8px;font-size:11px;font-weight:800;background:#e7f6df}
.seat.bottom .tile[data-tile-index]{touch-action:pan-x}
@media(orientation:landscape) and (max-height:560px){.center-area{grid-template-columns:minmax(45px,1fr) minmax(120px,1.7fr) minmax(45px,1fr);grid-template-rows:auto minmax(50px,1fr) auto}.river-zone{font-size:7px;gap:1px}.river-zone .tile{width:14px;height:19px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(9,14px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(3,14px)}.center-hub{gap:2px}.center-hub .center-plaque{padding:2px 5px;font-size:10px}.center-hub .focus-tile{padding:2px 4px}.center-hub .reaction-actions button{padding:2px 4px;font-size:10px}.history-panel{max-height:92vh}.history-tiles .tile{width:18px;height:25px}.board-hint{max-width:min(330px,calc(100% - 12px))}}
@media(orientation:landscape) and (max-height:560px){.brand{font-size:14px;white-space:nowrap}.top-meta{flex-wrap:nowrap;gap:3px}.top-meta .pill{padding:2px 5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.move-card.opponent-move.from-1,.move-card.opponent-move.from-2,.move-card.opponent-move.from-3,.move-card.from-0,.fx-layer[data-role] img{animation:none}}
.seat.bottom .tile.lack-tile{position:relative}
.seat.bottom .tile.lack-tile svg{opacity:.53;filter:grayscale(.45) brightness(.82)}
.seat.bottom .tile.lack-tile .lack-mark{position:absolute;z-index:2;left:50%;bottom:5px;transform:translateX(-50%);padding:1px 3px;border-radius:5px;background:#596c58e8;color:#fffdf0;font-size:9px;font-weight:900;white-space:nowrap;pointer-events:none}
.seat.bottom .tile.drawn.entering{animation:tile-draw-in .56s ease-out both}
.seat{position:relative}.draw-chip{position:absolute;z-index:4;top:-8px;right:7px;display:flex;align-items:center;gap:3px;padding:2px 5px;border:1px solid #d6ad66;border-radius:10px;background:#fff7d7;box-shadow:0 3px 5px #6f815a55;color:#765222;font-size:10px;font-weight:900;pointer-events:none;animation:draw-chip-in .56s ease-out both}.draw-chip .back{margin:0;width:15px;height:21px}
@keyframes tile-draw-in{from{opacity:.45;transform:translateY(-30px) rotate(-8deg) scale(.8)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes draw-chip-in{from{opacity:.2;transform:translateY(27px) scale(.6)}55%{opacity:1;transform:translateY(-3px) scale(1.08)}to{opacity:1;transform:translateY(0) scale(1)}}
.center-area{position:relative;padding:12px 15px}.center-area>.river-zone,.center-area>.center-hub{position:relative;z-index:1}
.river-zone{overflow:hidden}.river-zone .river-tiles{min-height:0;max-height:100%;max-width:100%;overflow:auto;scrollbar-width:thin}
.river-zone .tile{width:13px;height:18px;transform:perspective(120px) rotateX(8deg);filter:drop-shadow(1px 2px 1px #58755e88)}
.river-north,.river-south{max-height:56px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(10,13px)}
.river-west,.river-east{grid-row:1/4}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(4,13px)}
.wall-ring{position:absolute;inset:0;z-index:0;pointer-events:none}.wall-side{position:absolute;display:flex;gap:1px}.wall-north{top:0;left:50%;transform:translateX(-50%)}.wall-south{bottom:0;left:50%;transform:translateX(-50%)}.wall-west{left:0;top:50%;transform:translateY(-50%);flex-direction:column}.wall-east{right:0;top:50%;transform:translateY(-50%);flex-direction:column}
.wall-tile{display:block;flex:none;width:10px;height:11px;border:1px solid #357f76;border-radius:2px;background:linear-gradient(#fffbe9 0 23%,#6dc4b4 24%,#2f9b8b 100%);box-shadow:1px 2px 0 #2a7469,0 2px 3px #557b65aa;transform:skewY(-3deg)}
.wall-west .wall-tile,.wall-east .wall-tile{width:12px;height:8px;transform:skewX(-4deg)}
.wall-count{position:absolute;right:3px;bottom:2px;padding:1px 4px;border-radius:6px;background:#f7f4dcca;color:#3d7768;font-size:9px;font-weight:900}
@media(orientation:landscape) and (max-height:560px){.center-area{padding:8px 10px;grid-template-rows:auto minmax(40px,1fr) auto}.river-zone{font-size:7px}.river-zone .tile{width:11px;height:15px}.river-north,.river-south{max-height:34px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(10,11px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(4,11px)}.wall-tile{width:8px;height:9px}.wall-west .wall-tile,.wall-east .wall-tile{width:9px;height:6px}.wall-count{font-size:7px}.draw-chip{top:-5px;right:3px;font-size:8px;padding:1px 3px}.draw-chip .back{width:10px;height:15px}.seat.bottom .tile.lack-tile .lack-mark{font-size:7px;bottom:2px}}
@media(prefers-reduced-motion:reduce){.seat.bottom .tile.drawn.entering,.draw-chip{animation:none}}
.river-zone{cursor:pointer;border-radius:8px}.river-zone:hover,.river-zone:focus-visible{background:#fff9d16b;outline:1px solid #b4cb8c}.river-zoom-panel{width:min(740px,94%)}.river-zoom-body{display:grid;grid-template-columns:minmax(0,1fr) 115px;gap:12px;align-items:center;margin:10px 0}.river-zoom-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px;max-height:42vh;overflow-y:auto;padding:5px;border-radius:12px;background:#edf6df}.river-zoom-tile{display:flex;justify-content:center;align-items:center;padding:2px;border:1px solid transparent;border-radius:7px;box-shadow:none;background:transparent}.river-zoom-tile .tile{width:31px;height:42px;pointer-events:none}.river-zoom-tile.claimed{opacity:.48}.river-zoom-tile.active{border-color:#dfaf51;background:#fff4d0}.river-zoom-detail{display:flex;align-items:center;flex-direction:column;gap:4px;font-size:12px}.river-zoom-detail .tile{width:72px;height:96px}.river-zoom-detail strong{font-size:15px}
.wall-flight{position:absolute;z-index:4;pointer-events:none;left:50%;top:50%}.wall-flight .wall-tile{width:22px;height:28px;box-shadow:2px 4px 0 #2a7469,0 5px 7px #365a4788}.wall-flight.to-0{top:calc(100% - 15px);animation:wall-draw-south .56s ease-out both}.wall-flight.to-1{left:15px;animation:wall-draw-west .56s ease-out both}.wall-flight.to-2{top:15px;animation:wall-draw-north .56s ease-out both}.wall-flight.to-3{left:calc(100% - 15px);animation:wall-draw-east .56s ease-out both}
@keyframes wall-draw-south{from{opacity:.85;transform:translate(-50%,-10px) scale(.7)}to{opacity:0;transform:translate(-50%,55px) scale(1)}}@keyframes wall-draw-west{from{opacity:.85;transform:translate(0,-50%) scale(.7)}to{opacity:0;transform:translate(-55px,-50%) scale(1)}}@keyframes wall-draw-north{from{opacity:.85;transform:translate(-50%,0) scale(.7)}to{opacity:0;transform:translate(-50%,-55px) scale(1)}}@keyframes wall-draw-east{from{opacity:.85;transform:translate(0,-50%) scale(.7)}to{opacity:0;transform:translate(55px,-50%) scale(1)}}
.seat.bottom .tile.lack-tile svg{opacity:.74;filter:grayscale(.25) brightness(.91)}.seat.bottom .tile.lack-tile .lack-mark{left:auto;right:1px;top:1px;bottom:auto;transform:none;padding:1px 2px;background:#596c58d9;font-size:8px}.event-toast{position:absolute;z-index:4;left:50%;top:21%;transform:translateX(-50%);max-width:60%;padding:3px 10px;border:1px solid #b49c6f;border-radius:100px;background:#fff9e6ed;box-shadow:0 2px 5px #78946566;color:#6a523d;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;animation:event-pop .3s ease-out}@keyframes event-pop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.result-panel{text-align:left}.result-panel h2,.result-summary{text-align:center}.result-summary{font-weight:700}.result-panel .win-list,.result-panel .ledger-list{max-height:none;overflow:visible}.result-panel .win-details{margin:8px 0;padding:6px 8px;border:1px solid #b9d3a9;border-radius:10px;background:#f6faee}.result-panel .win-details>summary{cursor:pointer;font-weight:900}.result-panel .win-list{margin-top:6px}.result-footer{position:sticky;bottom:-18px;padding:8px 0 1px;background:#fffdf4f5;text-align:center}.result-footer .primary{min-width:180px}
@media(orientation:landscape) and (max-height:560px){.river-zoom-panel{max-height:92vh}.river-zoom-body{grid-template-columns:minmax(0,1fr) 85px;margin:4px 0}.river-zoom-tiles{max-height:45vh;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:2px}.river-zoom-tile .tile{width:24px;height:32px}.river-zoom-detail .tile{width:49px;height:67px}.result-panel .result-grid{margin:6px 0}.result-footer{bottom:-8px}.event-toast{top:18%;font-size:9px}.seat.bottom .tile.lack-tile .lack-mark{top:1px;bottom:auto;font-size:6px}}
@media(prefers-reduced-motion:reduce){.wall-flight,.event-toast{animation:none}}
.center-area{grid-template-columns:minmax(72px,1fr) minmax(145px,1.45fr) minmax(72px,1fr);grid-template-rows:minmax(45px,auto) minmax(62px,1fr) minmax(45px,auto);padding:18px 20px}
.river-zone{font-size:10px}.river-zone .tile{width:21px;height:28px;transform:perspective(130px) rotateX(7deg);filter:drop-shadow(1px 3px 1px #58755e9e)}.river-zone .river-tiles{gap:2px}.river-north,.river-south{max-height:88px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(8,21px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(3,21px)}
.wall-side{gap:2px}.wall-tile{width:14px;height:16px;border-radius:3px;background:linear-gradient(155deg,#fffef3 0 24%,#9edbc8 25% 42%,#54b7a8 43% 82%,#328d83 83%);box-shadow:2px 3px 0 #286e66,3px 5px 3px #385d4b7a;transform:skewY(-6deg)}.wall-west .wall-tile,.wall-east .wall-tile{width:17px;height:11px;transform:skewX(-6deg)}.wall-flight .wall-tile{width:22px;height:28px}
.center-hub .move-card{padding:7px 10px;box-shadow:0 5px 0 #a1c594,0 8px 12px #4f7e5966}.center-hub .move-card .tile{width:42px;height:57px}.center-hub .move-card img{width:38px;height:38px}.board.dragging-discard .center-area{outline:3px dashed #e8aa55;outline-offset:-10px;background:#fff9db2e}.drag-ghost{position:fixed!important;z-index:99;pointer-events:none;transform:translate(-50%,-50%) rotate(-5deg) scale(1.14);box-shadow:5px 8px 0 #3b887b,0 12px 18px #385b4688!important;opacity:.92}
.reaction-callout{padding:4px 13px;border:3px solid #dca458;border-radius:18px;background:#fff6d7;color:#70472d;box-shadow:0 4px 0 #b99e64,0 8px 12px #617f5680;font-size:16px;font-weight:1000;white-space:nowrap;animation:reaction-arrive .42s cubic-bezier(.2,1.5,.4,1) both}.reaction-callout:before{content:'✿ ';color:#e79d89}.reaction-callout:after{content:' ✿';color:#e79d89}.center-hub .reaction-actions{padding:4px 6px;border-radius:14px;background:#fffde4c9;box-shadow:0 3px 8px #5a78594d}.center-hub .reaction-actions button,.seat.bottom .actionbar .gang{animation:reaction-button-in .4s ease-out both}.center-hub .reaction-actions button:nth-child(2){animation-delay:.07s}.center-hub .reaction-actions button:nth-child(3){animation-delay:.14s}@keyframes reaction-arrive{from{opacity:0;transform:translateY(20px) scale(.55)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes reaction-button-in{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
.seat:not(.bottom) .backs{display:flex}.seat:not(.bottom) .melds{align-self:center;max-width:44%;gap:3px}.seat.left .melds,.seat.right .melds{max-width:100%;justify-content:center}.seat.bottom .melds{flex:none;max-width:28%;flex-wrap:nowrap;overflow-x:auto;align-self:center}.meld{box-shadow:0 2px 0 #9bbf9d}.meld .tile{width:21px;height:28px}.meld .back.meld-back{width:21px;height:28px;margin-right:0}
@media(orientation:landscape) and (max-height:560px){.center-area{grid-template-columns:minmax(56px,1fr) minmax(112px,1.5fr) minmax(56px,1fr);grid-template-rows:minmax(32px,auto) minmax(40px,1fr) minmax(32px,auto);padding:9px 12px}.river-zone{font-size:8px}.river-zone .tile{width:18px;height:25px}.river-north,.river-south{max-height:55px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(8,18px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(3,18px)}.wall-tile{width:9px;height:11px}.wall-west,.wall-east{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,8px)}.wall-west .wall-tile,.wall-east .wall-tile{width:11px;height:7px}.center-hub{gap:2px}.center-hub .move-card{padding:2px 5px}.center-hub .move-card .tile{width:32px;height:44px}.center-hub .move-card img{width:23px;height:23px}.reaction-callout{font-size:11px;padding:2px 8px;border-width:2px}.center-hub .reaction-actions{padding:2px 3px}.seat:not(.bottom) .backs .back{width:11px;height:16px;margin-right:-3px}.seat.left .backs,.seat.right .backs{max-width:98px}.seat:not(.bottom) .melds{max-width:100%}.meld{padding:1px}.meld .tile,.meld .back.meld-back{width:15px;height:20px}.seat.bottom .melds{max-width:23%}}
@media(prefers-reduced-motion:reduce){.reaction-callout,.center-hub .reaction-actions button,.seat.bottom .actionbar .gang{animation:none}}
.center-area{width:min(100%,264px);justify-self:center;grid-template-columns:48px minmax(152px,1fr) 48px;grid-template-rows:minmax(60px,auto) minmax(65px,1fr) minmax(60px,auto);gap:0;padding:10px 8px}
.river-zone{overflow:visible;padding:1px;border-radius:8px;background:#edf6dd82}.river-zone .river-tiles{gap:1px;max-height:none;max-width:none;overflow:visible}.river-zone .tile{width:24px;height:29px;transform:perspective(120px) rotateX(5deg)}.river-north,.river-south{max-height:none}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,24px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,24px);grid-template-rows:repeat(6,29px);grid-auto-flow:column}.river-overflow{position:absolute;right:-8px;bottom:-7px;padding:1px 3px;border-radius:7px;background:#fff9db;color:#5c684c;border:1px solid #9db88d;font-size:9px;font-weight:900;pointer-events:none}
.center-seal{display:grid;place-items:center;width:52px;height:52px;border:2px solid #a9ca92;border-radius:50%;background:#f7fbe0a8;color:#91b882;font-size:28px;box-shadow:0 2px 0 #83a97d7a;pointer-events:none}.center-hub .move-card .tile{width:50px;height:65px}.center-hub .move-card{position:relative;padding:4px 7px}.center-hub .move-card span{font-size:11px}.move-card,.move-card.opponent-move,.move-card.opponent-move.from-1,.move-card.opponent-move.from-2,.move-card.opponent-move.from-3,.move-card.from-0{animation:none}.move-card.entering-move.from-1{animation:move-from-left .62s cubic-bezier(.18,1.2,.3,1) both}.move-card.entering-move.from-2{animation:move-from-top .62s cubic-bezier(.18,1.2,.3,1) both}.move-card.entering-move.from-3{animation:move-from-right .62s cubic-bezier(.18,1.2,.3,1) both}.move-card.entering-move.from-0{animation:move-from-bottom .62s cubic-bezier(.18,1.2,.3,1) both}.move-card.entering-move:after{content:'✦';position:absolute;right:-8px;top:-12px;color:#ffca62;font-size:24px;animation:discard-spark .62s ease-out both}@keyframes discard-spark{from{opacity:0;transform:scale(.2) rotate(-40deg)}45%{opacity:1;transform:scale(1.3) rotate(10deg)}to{opacity:0;transform:scale(.8) rotate(35deg)}}.seat.just-discarded{animation:seat-discard .65s ease-out}@keyframes seat-discard{50%{filter:drop-shadow(0 0 10px #ffd266);transform:scale(1.04)}}
.board.my-turn .seat.bottom{box-shadow:0 0 0 4px #f2c65f,0 0 22px #ffe68a;animation:turn-pulse 1.6s ease-in-out infinite alternate}.board.my-turn .hand-frame{filter:drop-shadow(0 0 7px #ffe287) brightness(1.08)}.board.my-turn .hand-mascot{filter:drop-shadow(0 0 5px #ffe287)}.board.my-turn .seat.bottom .tile.available{border-color:#8a6434}.turn-pill.mine{background:#ffe39a;border:2px solid #dfaa45;box-shadow:0 2px 7px #e9ad49a3;color:#653f1d}.hand-notice{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:8px;background:#fff2be;color:#795528;font-size:11px;font-weight:900}@keyframes turn-pulse{to{box-shadow:0 0 0 4px #ffe79a,0 0 30px #ffd667}}
@media(orientation:landscape) and (max-height:560px){.center-area{width:min(100%,190px);grid-template-columns:35px minmax(108px,1fr) 35px;grid-template-rows:minmax(43px,auto) minmax(50px,1fr) minmax(43px,auto);padding:6px}.river-zone .tile{width:17px;height:21px}.river-north,.river-south{max-height:none}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,17px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,17px);grid-template-rows:repeat(6,21px)}.center-hub .move-card .tile{width:38px;height:50px}.center-hub .move-card{padding:2px 4px}.center-hub .move-card span{display:none}.center-seal{width:40px;height:40px;font-size:22px}.river-overflow{font-size:7px;right:-6px}.hand-notice{font-size:9px;padding:1px 3px}.board.my-turn .seat.bottom{box-shadow:0 0 0 2px #f2c65f,0 0 12px #ffe68a}}
@media(prefers-reduced-motion:reduce){.move-card.entering-move.from-0,.move-card.entering-move.from-1,.move-card.entering-move.from-2,.move-card.entering-move.from-3,.move-card.entering-move:after,.seat.just-discarded,.board.my-turn .seat.bottom{animation:none}}
@media(orientation:landscape) and (max-height:390px){.board{grid-template-rows:48px minmax(129px,1fr) 94px}.center-area{width:min(100%,182px);grid-template-columns:33px minmax(108px,1fr) 33px;grid-template-rows:minmax(39px,auto) minmax(43px,1fr) minmax(39px,auto);padding:4px}.river-zone .tile{width:16px;height:19px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,16px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,16px);grid-template-rows:repeat(6,19px)}.center-hub .move-card .tile{width:31px;height:41px}.center-hub .move-card img{width:20px;height:20px}.center-seal{width:34px;height:34px;font-size:19px}.center-hub .reaction-actions button{font-size:9px;padding:2px 3px}}

/* Table layout: counterclockwise seats, readable open melds, and a square river. */
.seat.top,.seat.left,.seat.right{background:transparent;border-color:transparent;box-shadow:none}.seat:not(.bottom).current,.seat.last-discarder:not(.bottom){outline:none;box-shadow:none}.seat:not(.bottom).current .seat-identity{box-shadow:0 0 0 3px #f5c862,0 0 14px #ffd97a}.seat.last-discarder:not(.bottom) .seat-identity{box-shadow:0 0 0 2px #efc06a,0 0 10px #ffe2a0}
.seat-identity,.seat-rack{display:flex;align-items:center;gap:6px;min-width:0}.seat-identity{flex:none;padding:3px 6px;border:1px solid #a7c490;border-radius:15px;background:#fffcf0d9;box-shadow:0 2px 6px #63855a25}.seat-rack{flex:1;justify-content:center}.seat.top .backs{display:flex;max-width:none;overflow:visible}.seat.top .seat-rack .melds{max-width:none;flex-wrap:nowrap}
.seat.left,.seat.right{align-self:stretch;flex-direction:column;justify-content:flex-start}.seat.left .seat-rack,.seat.right .seat-rack{width:100%;justify-content:center;gap:5px}.seat.left .backs,.seat.right .backs{display:flex;flex-direction:column;align-items:center;max-width:none;max-height:none;overflow:visible}.seat.left .backs .back,.seat.right .backs .back{width:23px;height:17px;margin:0 0 -5px;box-shadow:2px 1px 0 #fff8e8}.seat.left .melds,.seat.right .melds{flex-direction:column;max-width:none;gap:3px}.seat.right .melds{order:-1}
.meld{align-items:center;gap:2px;padding:3px 5px;background:#f2f8e8;border:1px solid #a8c495}.meld-tile{display:grid;place-items:center;flex:none;width:24px;height:31px;pointer-events:none}.meld-tile.sideways{width:31px}.meld-tile.sideways .tile{transform:rotate(90deg)}.meld .tile,.meld .back.meld-back{width:24px;height:31px;margin:0}
.bottom-main{justify-content:flex-start;gap:12px}.seat.bottom .melds{flex:0 0 auto;max-width:none;flex-wrap:nowrap;overflow:visible;justify-content:flex-start;gap:8px;align-self:flex-end;padding-bottom:8px}.seat.bottom .meld{padding:3px 5px}.seat.bottom .meld-tile{width:clamp(30px,2.8vw,42px);height:clamp(42px,4vw,58px)}.seat.bottom .meld-tile.sideways{width:clamp(42px,4vw,58px)}.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:clamp(30px,2.8vw,42px);height:clamp(42px,4vw,58px)}
.center-area{width:min(100%,460px);grid-template-columns:80px minmax(216px,1fr) 80px;grid-template-rows:minmax(82px,auto) minmax(100px,1fr) minmax(82px,auto);padding:10px 8px}.river-zone .tile{width:35px;height:41px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,35px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,35px);grid-template-rows:repeat(6,41px)}
.center-hub{display:grid;grid-template-columns:minmax(96px,1fr) auto;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:2px}.table-status{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:78px;min-width:96px;padding:3px 5px;border:2px solid #e8d99a;border-radius:14px;background:linear-gradient(150deg,#4d8960,#326c4d);box-shadow:0 3px 0 #2c6044,0 0 0 2px #b7d4a6;color:#fff9df;font-size:12px;line-height:1.25;white-space:nowrap}.table-status strong{font-size:14px}.table-status b{font-size:18px}.center-hub .move-card,.center-hub .center-seal{grid-column:2;grid-row:1}.center-hub .move-card{gap:3px}.center-hub .move-card span{display:none}.center-hub .move-card img{width:31px;height:31px}.center-hub .move-card .tile{width:45px;height:58px}.center-hub .reaction-callout{grid-column:1/3;grid-row:2;font-size:12px;padding:1px 7px}.center-hub .reaction-actions{grid-column:1/3;grid-row:3}.center-hub .reaction-actions button{padding:2px 5px;font-size:10px}
.move-card.entering-move.from-1{animation:move-from-right .62s cubic-bezier(.18,1.2,.3,1) both}.move-card.entering-move.from-3{animation:move-from-left .62s cubic-bezier(.18,1.2,.3,1) both}.wall-flight.to-1{left:calc(100% - 15px);animation:wall-draw-east .56s ease-out both}.wall-flight.to-3{left:15px;animation:wall-draw-west .56s ease-out both}
@media(orientation:landscape) and (max-height:560px){.seat-identity{gap:3px}.seat.left .backs .back,.seat.right .backs .back{width:17px;height:12px;margin-bottom:-4px}.seat.left .melds,.seat.right .melds{gap:2px}.seat:not(.bottom) .meld-tile{width:18px;height:24px}.seat:not(.bottom) .meld-tile.sideways{width:24px}.seat:not(.bottom) .meld .tile,.seat:not(.bottom) .meld .back.meld-back{width:18px;height:24px}.seat.bottom .melds{gap:4px;padding-bottom:2px}.seat.bottom .meld{padding:2px 3px;gap:1px}.seat.bottom .meld-tile{width:28px;height:39px}.seat.bottom .meld-tile.sideways{width:39px}.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:28px;height:39px}.center-area{width:min(100%,300px);grid-template-columns:54px minmax(150px,1fr) 54px;grid-template-rows:minmax(48px,auto) minmax(84px,1fr) minmax(48px,auto);padding:5px}.river-zone .tile{width:23px;height:25px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,23px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,23px);grid-template-rows:repeat(6,25px)}.center-hub{grid-template-columns:minmax(67px,1fr) auto}.table-status{min-width:67px;min-height:49px;font-size:8px;padding:2px 3px}.table-status strong{font-size:9px}.table-status b{font-size:11px}.center-hub .move-card .tile{width:28px;height:38px}.center-hub .move-card img{width:20px;height:20px}.center-hub .reaction-callout{font-size:10px;padding:1px 5px}.center-hub .reaction-actions button{font-size:9px;padding:2px 4px}}
@media(orientation:landscape) and (max-height:390px){.seat:not(.bottom) .seat-info{display:none}.seat.left .backs .back,.seat.right .backs .back{width:15px;height:11px;margin-bottom:-4px}.seat.bottom .meld-tile{width:26px;height:35px}.seat.bottom .meld-tile.sideways{width:35px}.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:26px;height:35px}.center-area{width:min(100%,284px);grid-template-columns:49px minmax(144px,1fr) 49px;grid-template-rows:minmax(42px,auto) minmax(80px,1fr) minmax(42px,auto);padding:4px}.river-zone .tile{width:21px;height:22px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,21px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,21px);grid-template-rows:repeat(6,22px)}.center-hub .move-card .tile{width:26px;height:35px}.table-status{min-height:42px}.center-hub .reaction-callout{font-size:9px}.center-hub .reaction-actions button{font-size:8px}}

/* 2026-10-29: readable river and hand layout. */
.board{grid-template-columns:minmax(95px,.8fr) minmax(370px,4fr) minmax(95px,.8fr)}
.center-area{width:min(100%,500px);grid-template-columns:72px minmax(220px,1fr) 72px;grid-template-rows:minmax(74px,auto) minmax(78px,1fr) minmax(74px,auto);padding:7px}
.center-hub{display:flex;align-items:center;justify-content:center}.table-status{min-width:112px;min-height:76px}
.river-zone{background:transparent;overflow:visible}.river-zone .river-tiles{overflow:visible}.wall-ring{opacity:.58}
.river-item{position:relative;display:grid;place-items:center;min-width:0;min-height:0}.river-item.latest .tile{outline:2px solid #f1b446;outline-offset:1px;filter:drop-shadow(0 0 5px #ffde78)}
.river-item.entering{z-index:4}.river-north .river-item.entering{animation:move-from-top .65s ease-out both}.river-west .river-item.entering{animation:move-from-left .65s ease-out both}.river-east .river-item.entering{animation:move-from-right .65s ease-out both}.river-south .river-item.entering{animation:move-from-bottom .65s ease-out both}
.discard-badge{position:absolute;z-index:6;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:1px 4px;border:1px solid #ddad5b;border-radius:10px;background:#fff9e8;box-shadow:0 2px 5px #755f4270;font-size:10px;font-weight:900;white-space:nowrap;pointer-events:none;animation:discard-badge-in .25s ease-out both}.discard-badge img{width:18px;height:18px;object-fit:contain}@keyframes discard-badge-in{from{opacity:0;transform:translate(-50%,8px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.backs-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}.lack-badge{display:inline-block;padding:1px 6px;border:1px solid #a7bd8e;border-radius:9px;background:#fff9e3;color:#5c643f;font-size:10px;font-weight:900;line-height:1.2;white-space:nowrap}
.seat.left .seat-rack{justify-content:flex-end}.seat.right .seat-rack{justify-content:flex-start}.seat.left .backs-wrap,.seat.right .backs-wrap{flex-direction:row;align-items:flex-start}.seat.left .lack-badge,.seat.right .lack-badge{writing-mode:vertical-rl;padding:4px 1px}.seat.left .melds,.seat.right .melds{align-self:flex-start}
.reaction-dock{display:flex;align-items:center;gap:6px;position:relative;z-index:5}.reaction-dock .reaction-callout{font-size:12px;padding:2px 8px;border-width:2px}.reaction-dock .actionbar{display:flex;gap:4px}.reaction-dock .actionbar button{animation:reaction-button-in .4s ease-out both}
.board.dragging-discard .center-area{outline:none;background:transparent}.board.drop-ready:after{content:"";position:absolute;z-index:3;pointer-events:none;inset:8px 8px 122px;border:3px dashed #e9ae54;border-radius:22px;background:#fff9da1a}
.river-zoom-tiles{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.river-zoom-tile{min-width:44px;min-height:48px}.river-zoom-tile .tile{width:38px;height:48px}
@media(orientation:landscape) and (max-height:560px){.board{grid-template-columns:minmax(82px,.75fr) minmax(360px,4fr) minmax(82px,.75fr);grid-template-rows:50px minmax(148px,1fr) 108px}.center-area{width:min(100%,520px);grid-template-columns:59px minmax(180px,1fr) 59px;grid-template-rows:minmax(55px,auto) minmax(46px,1fr) minmax(55px,auto);padding:3px}.river-zone .tile{width:27px;height:30px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,27px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,27px);grid-template-rows:repeat(6,30px)}.table-status{min-width:84px;min-height:48px;font-size:9px}.table-status strong{font-size:10px}.table-status b{font-size:13px}.seat.top .backs .back{width:16px;height:22px;margin-right:-3px}.seat.left .backs .back,.seat.right .backs .back{width:20px;height:14px;margin-bottom:-5px}.seat.bottom .hand-row .tile{width:36px;height:49px}.seat.bottom .meld-tile,.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:30px;height:42px}.seat.bottom .meld-tile.sideways{width:42px}.seat.bottom .melds{gap:3px}.seat.bottom .hand-holder{padding-left:45px}.hand-mascot{width:62px;height:62px;top:-20px}.seat.bottom .hand-top{padding-left:65px}.lack-badge{font-size:8px}.discard-badge{font-size:8px}.discard-badge img{width:15px;height:15px}.reaction-dock .reaction-callout{font-size:10px}.reaction-dock .actionbar button{padding:2px 5px;font-size:10px}.board.drop-ready:after{inset:6px 6px 110px}.river-zoom-tile{min-width:44px;min-height:44px}.river-zoom-tile .tile{width:34px;height:43px}}
@media(orientation:landscape) and (max-height:390px){.board{grid-template-rows:46px minmax(144px,1fr) 100px}.center-area{width:min(100%,520px);grid-template-columns:57px minmax(176px,1fr) 57px;grid-template-rows:minmax(52px,auto) minmax(40px,1fr) minmax(52px,auto);padding:2px}.river-zone .tile{width:25px;height:27px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,25px)}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,25px);grid-template-rows:repeat(6,27px)}.seat.bottom .hand-row .tile{width:35px;height:47px}.seat.bottom .meld-tile,.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:27px;height:38px}.seat.bottom .meld-tile.sideways{width:38px}.board.drop-ready:after{bottom:102px}}
@media(prefers-reduced-motion:reduce){.river-item.entering,.discard-badge,.reaction-dock .reaction-callout,.reaction-dock .actionbar button{animation:none}}

/* 2026-10-29: four-seat table layout based on the selected reference. */
.board:before{content:"";inset:7% 9% 25%;border:1px solid #80aa7b8c;border-radius:18px;letter-spacing:normal}
.seat.top{flex-direction:row-reverse;gap:10px}.seat.top .seat-rack{flex:0 1 auto;gap:6px}.seat.top .backs-wrap{display:block}.seat.top .melds{order:-1;max-width:none;flex-wrap:nowrap}
.seat.left,.seat.right{display:grid;align-items:center;justify-items:center;gap:3px;min-width:0;overflow:visible}.seat.left{grid-template-columns:62px minmax(0,1fr)}.seat.right{grid-template-columns:minmax(0,1fr) 62px}
.seat.left .seat-identity,.seat.right .seat-identity{width:58px;flex-direction:column;gap:0;padding:2px;text-align:center}.seat.left .seat-identity{grid-column:1;grid-row:1}.seat.right .seat-identity{grid-column:2;grid-row:1}
.seat.left .seat-rack,.seat.right .seat-rack{grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:3px;width:max-content;max-width:none;height:100%;min-height:0}.seat.left .seat-rack{grid-column:2;align-items:flex-start;justify-self:start}.seat.right .seat-rack{grid-column:1;align-items:flex-end;justify-self:end}
.seat.left .backs-wrap,.seat.right .backs-wrap{display:block}.seat.left .melds,.seat.right .melds{display:flex;flex-direction:column;align-items:center;align-self:auto;gap:2px;max-width:none}.seat.right .melds{order:-1}
.seat.left .avatar,.seat.right .avatar{width:36px;height:36px}.seat.left .seat-name,.seat.right .seat-name{font-size:10px;white-space:nowrap}.seat.left .seat-score,.seat.right .seat-score{font-size:10px;white-space:nowrap}.seat-info,.lack-badge{display:none}
.back{border-color:#286f69;background:linear-gradient(100deg,#fffbea 0 18%,#8dd7c8 19% 31%,#43aa9f 32% 80%,#25877c 81%);box-shadow:inset 1px 1px 0 #fff9e9,2px 2px 0 #2c776c,3px 4px 4px #3b745e8c}
.seat.top .backs .back{width:22px;height:28px;margin-right:-4px;transform:skewY(-3deg)}.seat.left .backs .back,.seat.right .backs .back{width:22px;height:17px;margin:0 0 -5px;transform:skewX(-5deg);box-shadow:inset 2px 1px 0 #fff9e9,3px 1px 0 #2b7d70,5px 2px 3px #45725e80}
.seat:not(.bottom) .meld{padding:2px;gap:1px;box-shadow:1px 2px 0 #83ac88,2px 3px 5px #436a5880}.seat:not(.bottom) .meld-tile{width:25px;height:34px}.seat:not(.bottom) .meld-tile.sideways{width:34px}.seat:not(.bottom) .meld .tile,.seat:not(.bottom) .meld .back.meld-back{width:25px;height:34px}
.seat.left .meld,.seat.right .meld{min-height:24px}.seat.left .meld-tile,.seat.right .meld-tile{width:22px;height:22px}.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:22px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:17px;height:22px}.seat.top .meld .tile{transform:rotate(180deg)}.seat.top .meld-tile.sideways .tile{transform:rotate(90deg)}.seat.left .meld .tile{transform:rotate(-90deg)}.seat.right .meld .tile{transform:rotate(90deg)}.seat.left .meld-tile.sideways .tile,.seat.right .meld-tile.sideways .tile{transform:rotate(0deg)}
.seat.bottom .bottom-main{justify-content:center;gap:8px}.seat.bottom .hand-holder{flex:0 1 auto;max-width:calc(100% - 62px);padding-left:0}.seat.bottom .hand-row{width:max-content;max-width:100%;gap:2px}.seat.bottom .melds{flex:0 0 auto;max-width:none;gap:5px;padding-bottom:6px}.seat.bottom .meld{padding:2px 4px;gap:1px}.seat.bottom .meld-tile,.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:clamp(32px,3.5vw,50px);height:clamp(43px,4.7vw,66px)}.seat.bottom .meld-tile.sideways{width:clamp(43px,4.7vw,66px)}
.center-area{width:min(100%,470px);grid-template-columns:76px minmax(180px,1fr) 76px;grid-template-rows:minmax(69px,auto) minmax(72px,1fr) minmax(69px,auto);padding:2px}
.wall-ring{inset:0 -100px;opacity:.9}.wall-west,.wall-east{display:flex;flex-direction:column;gap:0;top:50%;height:auto;max-height:100%}.wall-west .wall-tile,.wall-east .wall-tile{width:20px;height:12px;margin-bottom:-4px;transform:skewX(-7deg);box-shadow:2px 2px 0 #286e66,4px 3px 4px #385d4b8a}
.river-zone .river-tiles{gap:1px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,32px);grid-auto-rows:34px}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,36px);grid-template-rows:repeat(6,35px);grid-auto-flow:column}.river-zone .tile{width:31px;height:33px;filter:drop-shadow(2px 3px 2px #4369589c)}.river-north .tile{transform:rotate(180deg) perspective(120px) rotateX(5deg)}.river-west .tile{width:30px;height:33px;transform:rotate(-90deg) perspective(120px) rotateX(5deg)}.river-east .tile{width:30px;height:33px;transform:rotate(90deg) perspective(120px) rotateX(5deg)}.river-south .tile{transform:perspective(120px) rotateX(5deg)}
.center-hub{overflow:visible}.table-status{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:154px;min-height:86px;padding:6px 8px;border-radius:16px}.table-round{font-size:12px;font-weight:800}.table-remaining{font-size:22px;line-height:1.1}.table-actor{font-size:11px;font-weight:900;color:#fff2c1}.table-actor.mine{color:#ffe58e;text-shadow:0 0 6px #fff3b6}.table-wind{position:absolute;display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid #d9bc71;border-radius:6px;background:#fff7d8;color:#355f49;font-size:13px;font-weight:900;box-shadow:0 2px 0 #729675}.table-wind.north{top:-12px;left:calc(50% - 10px)}.table-wind.south{bottom:-12px;left:calc(50% - 10px)}.table-wind.west{left:-12px;top:calc(50% - 10px)}.table-wind.east{right:-12px;top:calc(50% - 10px)}
@media(orientation:landscape) and (max-height:560px){.board:before{inset:6% 8% 27%;border-radius:12px}.seat.top .backs .back{width:18px;height:24px;margin-right:-3px}.seat.left .avatar,.seat.right .avatar{width:31px;height:31px}.seat.left .seat-name,.seat.right .seat-name,.seat.left .seat-score,.seat.right .seat-score{font-size:9px}.seat.left .backs .back,.seat.right .backs .back{width:20px;height:16px;margin-bottom:-5px}.seat:not(.bottom) .meld-tile{width:19px;height:25px}.seat:not(.bottom) .meld-tile.sideways{width:25px}.seat:not(.bottom) .meld .tile,.seat:not(.bottom) .meld .back.meld-back{width:19px;height:25px}.seat.left .meld-tile,.seat.right .meld-tile,.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:19px;height:19px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:15px;height:19px}.seat.bottom .meld-tile,.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:36px;height:49px}.seat.bottom .meld-tile.sideways{width:49px}.seat.bottom .hand-holder{padding-left:0}.center-area{width:min(100%,360px);grid-template-columns:60px minmax(180px,1fr) 60px;grid-template-rows:minmax(53px,auto) minmax(70px,1fr) minmax(53px,auto);padding:2px}.wall-ring{inset:0 -86px}.wall-west .wall-tile,.wall-east .wall-tile{width:18px;height:9px;margin-bottom:-3px}.river-north .river-tiles,.river-south .river-tiles{grid-template-columns:repeat(6,26px);grid-auto-rows:27px}.river-west .river-tiles,.river-east .river-tiles{grid-template-columns:repeat(2,30px);grid-template-rows:repeat(6,29px)}.river-zone .tile{width:25px;height:27px}.river-west .tile,.river-east .tile{width:25px;height:27px}.table-status{min-width:116px;min-height:64px;padding:3px 5px;gap:1px}.table-round{font-size:9px}.table-remaining{font-size:16px}.table-actor{font-size:9px}.table-wind{width:17px;height:17px;font-size:11px}.table-wind.north{top:-9px;left:calc(50% - 8px)}.table-wind.south{bottom:-9px;left:calc(50% - 8px)}.table-wind.west{left:-9px;top:calc(50% - 8px)}.table-wind.east{right:-9px;top:calc(50% - 8px)}}
@media(orientation:landscape) and (max-height:390px){.seat.bottom .hand-row .tile{width:35px;height:47px}.seat.bottom .meld-tile,.seat.bottom .meld .tile,.seat.bottom .meld .back.meld-back{width:35px;height:47px}.seat.bottom .meld-tile.sideways{width:47px}.center-area{grid-template-rows:minmax(52px,auto) minmax(70px,1fr) minmax(52px,auto)}}
@media(orientation:landscape) and (max-height:560px){.wall-ring{inset:0 -60px}}
.seat.left .meld-tile,.seat.right .meld-tile,.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:32px;height:32px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:28px;height:34px}
@media(orientation:landscape) and (max-height:560px){.wall-ring{inset:0 -30px}.seat.left .meld-tile,.seat.right .meld-tile,.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:27px;height:27px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:22px;height:27px}}
@media(orientation:landscape) and (max-height:390px){.river-west .river-tiles,.river-east .river-tiles{grid-template-rows:repeat(6,27px)}}
@media(orientation:landscape) and (max-height:390px){.board{grid-template-rows:46px minmax(144px,1fr) 92px}}

/* 2026-10-29: single discard entrance, directional turn light, upright racks. */
.table-status{padding-bottom:6px}.turn-light{position:absolute;z-index:2;width:13px;height:13px;background:#ffe68b;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 6px #ffe777);animation:turn-light-pulse 1.5s ease-in-out infinite}.turn-light.north{top:6px;left:calc(50% - 6px)}.turn-light.south{bottom:6px;left:calc(50% - 6px);transform:rotate(180deg)}.turn-light.west{left:7px;top:calc(50% - 6px);transform:rotate(-90deg)}.turn-light.east{right:7px;top:calc(50% - 6px);transform:rotate(90deg)}@keyframes turn-light-pulse{50%{opacity:.55;filter:drop-shadow(0 0 2px #ffe777)}}
.seat.top .backs{perspective:130px}.seat.top .backs .back{height:31px;border-bottom:4px solid #237b72;border-radius:3px 3px 5px 5px;transform:rotateX(-17deg) skewY(-3deg);box-shadow:inset 2px 3px 0 #fff9df,2px 4px 0 #2d7f73,3px 6px 5px #315d5680}
.seat.left .backs,.seat.right .backs{perspective:140px}.seat.left .backs .back,.seat.right .backs .back{position:relative;width:26px;height:18px;margin-bottom:-4px;border:1px solid #276e67;border-bottom:3px solid #26766d;border-radius:3px;background:linear-gradient(90deg,#fff9df 0 18%,#83d0c0 19% 30%,#43a89b 31% 82%,#257d75 83%);box-shadow:2px 2px 0 #317a70,4px 4px 5px #315d5680;transform:rotateY(-18deg) skewY(-5deg)}.seat.right .backs .back{background:linear-gradient(90deg,#257d75 0 17%,#43a89b 18% 69%,#83d0c0 70% 81%,#fff9df 82%);transform:rotateY(18deg) skewY(5deg);box-shadow:-2px 2px 0 #317a70,-4px 4px 5px #315d5680}
.seat.left .melds,.seat.right .melds{flex-direction:row;align-items:flex-end;gap:3px}.seat.left .meld,.seat.right .meld{flex-direction:column;align-items:center;gap:0;padding:1px 2px;border-radius:5px}.seat.left .meld-tile,.seat.right .meld-tile,.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:30px;height:23px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:20px;height:28px;box-shadow:2px 2px 0 #398476,2px 3px 3px #4564507a}
.seat.bottom .hand-row .tile{filter:drop-shadow(1px 4px 0 #35897b) drop-shadow(2px 5px 3px #53705b66)}
@media(orientation:landscape) and (max-height:560px){.seat.top .backs .back{height:26px}.seat.left .backs .back,.seat.right .backs .back{width:23px;height:16px;margin-bottom:-4px}.seat.left .melds,.seat.right .melds{gap:2px}.seat.left .meld-tile,.seat.right .meld-tile,.seat.left .meld-tile.sideways,.seat.right .meld-tile.sideways{width:24px;height:20px}.seat.left .meld .tile,.seat.right .meld .tile,.seat.left .meld .back.meld-back,.seat.right .meld .back.meld-back{width:17px;height:24px}.turn-light{width:10px;height:10px}.turn-light.north,.turn-light.south{left:calc(50% - 5px)}.turn-light.west,.turn-light.east{top:calc(50% - 5px)}}
@media(prefers-reduced-motion:reduce){.turn-light{animation:none}}

.turn-light{width:16px;height:16px;background:#ffdf4f;filter:drop-shadow(0 0 5px #fff4ab) drop-shadow(0 0 8px #fba53f)}.turn-light.north,.turn-light.south{left:calc(50% - 8px)}.turn-light.west,.turn-light.east{top:calc(50% - 8px)}
.seat.left .backs .back{background:linear-gradient(90deg,#fff9df 0 28%,#83d0c0 29% 38%,#43a89b 39% 84%,#257d75 85%)}.seat.right .backs .back{background:linear-gradient(90deg,#257d75 0 15%,#43a89b 16% 61%,#83d0c0 62% 71%,#fff9df 72%)}
@media(orientation:landscape) and (max-height:560px){.turn-light{width:12px;height:12px}.turn-light.north,.turn-light.south{left:calc(50% - 6px)}.turn-light.west,.turn-light.east{top:calc(50% - 6px)}}

/* 2026-10-29: seat-facing river rows and clearer concealed tile depth. */
.board{box-shadow:inset 0 0 0 7px #f7f9df,0 12px 36px #78946545}.board:before{display:none}
.meld,.seat:not(.bottom) .meld{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.seat.bottom .meld{padding:0}
.seat.top .backs{transform:perspective(200px) rotateX(-8deg)}.seat.top .backs .back{width:22px;margin-right:-2px;border-top:5px solid #fff9de;border-right:3px solid #2a786f;transform:skewY(-5deg);box-shadow:2px 5px 0 #267a70,4px 7px 5px #315d5680}
.seat.left .backs{transform:rotate(9deg);transform-origin:center}.seat.right .backs{transform:rotate(-9deg);transform-origin:center}.seat.left .backs .back,.seat.right .backs .back{height:22px;margin-bottom:-3px;border-top:5px solid #fff9df;border-bottom:3px solid #246e69;box-shadow:3px 3px 0 #287a71,5px 5px 6px #315d5680}.seat.right .backs .back{box-shadow:-3px 3px 0 #287a71,-5px 5px 6px #315d5680}
.turn-light{width:29px;height:29px;background:#ffd739;filter:drop-shadow(0 0 6px #fff8af) drop-shadow(0 0 12px #ff9c25)}.turn-light.north{top:3px;left:calc(50% - 14px)}.turn-light.south{bottom:3px;left:calc(50% - 14px)}.turn-light.west{left:3px;top:calc(50% - 14px)}.turn-light.east{right:3px;top:calc(50% - 14px)}
.river-zone .river-tiles{display:flex;gap:2px;align-items:center;justify-content:center;overflow:visible}.river-row{display:flex;gap:1px}.river-north .river-tiles{flex-direction:column}.river-north .river-row{flex-direction:row-reverse}.river-south .river-tiles{flex-direction:column-reverse}.river-south .river-row{flex-direction:row}.river-west .river-tiles{flex-direction:row}.river-west .river-row{flex-direction:column}.river-east .river-tiles{flex-direction:row-reverse}.river-east .river-row{flex-direction:column-reverse}
.exchange-reveal{inset:0;left:0;top:0;transform:none;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}.exchange-summary{position:absolute;z-index:2;left:50%;top:47%;transform:translate(-50%,-50%);padding:7px 14px;border:2px solid #d6b363;border-radius:14px;background:#fff9e8ed;box-shadow:0 4px 14px #45624d66;white-space:nowrap}.exchange-summary h2{margin:0;font-size:17px}.exchange-summary p{margin:2px 0 0;font-size:12px;font-weight:800}.exchange-transfer{position:absolute;z-index:3;left:var(--start-x);top:var(--start-y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;animation:exchange-hand-flight 5s ease-in-out both}.exchange-transfer strong{padding:1px 5px;border-radius:8px;background:#fff9e8ea;color:#604326;font-size:10px}.exchange-transfer .hand-row{display:flex;gap:2px;padding:0;overflow:visible}.exchange-transfer .tile{width:31px;height:42px;box-shadow:2px 3px 0 #318777,0 0 9px #fce584}.exchange-transfer.outgoing{--start-x:53%;--start-y:78%}.exchange-transfer.incoming{--end-x:47%;--end-y:78%}.exchange-transfer.to-1{--end-x:87%;--end-y:47%}.exchange-transfer.to-2{--end-x:53%;--end-y:18%}.exchange-transfer.to-3{--end-x:13%;--end-y:47%}.exchange-transfer.from-1{--start-x:83%;--start-y:47%}.exchange-transfer.from-2{--start-x:47%;--start-y:18%}.exchange-transfer.from-3{--start-x:17%;--start-y:47%}@keyframes exchange-hand-flight{0%{left:var(--start-x);top:var(--start-y);opacity:0;transform:translate(-50%,-50%) scale(.72)}15%{opacity:1}55%{opacity:1;transform:translate(-50%,-65%) scale(1.15)}85%{left:var(--end-x);top:var(--end-y);opacity:1}100%{left:var(--end-x);top:var(--end-y);opacity:1;transform:translate(-50%,-50%) scale(1)}}.seat.exchanging .backs,.seat.bottom.exchanging .hand-holder{animation:exchange-hand-glow 1.3s ease-in-out 4 alternate}@keyframes exchange-hand-glow{50%{filter:drop-shadow(0 0 12px #ffe164)}}
@media(orientation:landscape) and (max-height:560px){.seat.top .backs .back{width:18px;height:25px;border-top-width:4px}.seat.left .backs .back,.seat.right .backs .back{width:22px;height:17px;margin-bottom:-4px;border-top-width:4px}.turn-light{width:22px;height:22px}.turn-light.north,.turn-light.south{left:calc(50% - 11px)}.turn-light.west,.turn-light.east{top:calc(50% - 11px)}.exchange-summary h2{font-size:12px}.exchange-summary p{font-size:9px}.exchange-transfer .tile{width:24px;height:32px}.exchange-transfer strong{font-size:8px}}
@media(prefers-reduced-motion:reduce){.exchange-transfer,.seat.exchanging .backs,.seat.bottom.exchanging .hand-holder{animation:none}.exchange-transfer{left:var(--end-x);top:var(--end-y)}}
.seat.left .backs .back,.seat.right .backs .back{border-top:1px solid #2a7169;border-bottom:2px solid #225f59;transform:rotateY(-22deg);background:linear-gradient(90deg,#fff9df 0 31%,#82cfc1 32% 40%,#43a89b 41% 86%,#247c73 87%)}.seat.right .backs .back{transform:rotateY(22deg);background:linear-gradient(90deg,#247c73 0 13%,#43a89b 14% 59%,#82cfc1 60% 68%,#fff9df 69%)}
.table-wind.active{z-index:3;border-color:#e3a62a;background:#ffdf63;color:#58401a;box-shadow:0 0 0 3px #fff2a3,0 0 17px #ffbf35}.turn-light{z-index:4;width:37px;height:37px;background:#ffcf26;filter:drop-shadow(0 0 7px #fff4a1) drop-shadow(0 0 15px #ff9e1f)}.turn-light.north{top:-15px;left:calc(50% + 13px)}.turn-light.south{bottom:-15px;left:calc(50% + 13px)}.turn-light.west{left:-21px;top:calc(50% + 9px)}.turn-light.east{right:-21px;top:calc(50% + 9px)}
@media(orientation:landscape) and (max-height:560px){.turn-light{width:29px;height:29px}.turn-light.north,.turn-light.south{left:calc(50% + 9px)}.turn-light.west,.turn-light.east{top:calc(50% + 8px)}}
@media(min-width:1100px) and (min-height:650px){.board{grid-template-rows:100px minmax(220px,1fr) 180px}}
@media(orientation:landscape) and (max-height:390px){.board{grid-template-rows:46px minmax(143px,1fr) 91px}}
.seat.left .backs .back,.seat.right .backs .back{margin-bottom:-2px;border:1px solid #2a685f;border-bottom:3px solid #1f665e;border-radius:3px;box-shadow:inset 1px 1px 0 #fff9e9,3px 3px 0 #257b70,5px 5px 6px #315d5680}.seat.right .backs .back{box-shadow:inset -1px 1px 0 #fff9e9,-3px 3px 0 #257b70,-5px 5px 6px #315d5680}
@media(orientation:landscape) and (max-height:560px){.seat.left .backs .back,.seat.right .backs .back{height:14px;margin-bottom:-1px;border-bottom-width:2px}}
.exchange-transfer.from-0{--start-x:53%;--start-y:78%}.exchange-transfer.to-0{--end-x:47%;--end-y:78%}.exchange-transfer .back{width:24px;height:34px;margin:0;border-top:4px solid #fff7db;box-shadow:2px 3px 0 #287e74,0 0 9px #fce584}
@media(orientation:landscape) and (max-height:560px){.exchange-transfer .back{width:19px;height:26px}}
.seat:not(.bottom).exchanging .backs .back:nth-last-child(-n+3){animation:exchange-back-shift 5.8s ease-in-out both}.seat.bottom.exchanging .hand-row{animation:exchange-own-hand-shift 6s ease-in-out both}@keyframes exchange-back-shift{0%,15%,85%,100%{opacity:1}35%,65%{opacity:.3}}@keyframes exchange-own-hand-shift{0%,88%{opacity:1}100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.seat:not(.bottom).exchanging .backs .back:nth-last-child(-n+3),.seat.bottom.exchanging .hand-row{animation:none}}
/* 2026-10-30: fixed seat geometry, image-backed upright tiles, and one exchange flight. */
.seat:not(.bottom) .backs{overflow:visible;transform:none}
.seat:not(.bottom) .backs .back-slot{position:relative;display:block;flex:none;width:27px;height:35px;margin-right:1px}
.seat:not(.bottom) .backs .back-slot .back{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;background:transparent url('./assets/tile-back-north-v2.png') center 55%/125% 160% no-repeat;box-shadow:none;filter:drop-shadow(1px 2px 1px #356e6380);transform:none}
.seat.left,.seat.right{align-self:stretch}
.seat.left .seat-rack,.seat.right .seat-rack{width:100%;flex-direction:row;align-items:flex-start;gap:3px}
.seat.left .seat-rack{justify-content:flex-start}.seat.right .seat-rack{justify-content:flex-end}
.seat.left .backs,.seat.right .backs{flex-direction:column;align-items:center}
.seat.left .backs .back-slot,.seat.right .backs .back-slot{width:40px;height:18px;margin:0 0 2px}
.seat.left .backs .back-slot .back{background-image:url('./assets/tile-back-west-v2.png')}
.seat.right .backs .back-slot .back{background-image:url('./assets/tile-back-east-v2.png')}
.seat.left .melds,.seat.right .melds{flex-direction:column;flex:none;align-items:center;align-self:flex-start;gap:3px}
.river-zone .river-tiles{justify-content:center;align-items:center}.river-row{flex:none}
.river-item,.river-empty,.river-west .river-item,.river-west .river-empty,.river-east .river-item,.river-east .river-empty{width:32px;height:35px;flex:none}
.river-empty{display:block;visibility:hidden}
.table-wind{transition:background .18s,box-shadow .18s,transform .18s}
.table-wind.active{background:#ffe19a;border-color:#d69737;box-shadow:0 0 0 3px #fff8d7,0 0 12px #e9b754;transform:scale(1.12)}
.turn-light{display:none}
.exchange-transfer{animation-duration:2.7s}
.seat.exchanging .backs,.seat.bottom.exchanging .hand-holder{animation:exchange-hand-glow 2.7s ease-in-out 1}
.seat:not(.bottom).exchanging .backs .back-slot:nth-last-child(-n+3){animation:exchange-back-shift 2.7s ease-in-out 1}
.seat.bottom.exchanging .hand-row{animation-duration:3.2s}
@media(min-width:1100px) and (min-height:650px){.board{grid-template-columns:215px minmax(470px,1fr) 215px;grid-template-rows:98px minmax(220px,1fr) 178px}}
@media(orientation:landscape) and (max-height:560px){.board{grid-template-columns:170px minmax(360px,1fr) 170px}.seat:not(.bottom) .backs .back-slot{width:21px;height:27px;margin-right:0}.seat.left .backs .back-slot,.seat.right .backs .back-slot{width:34px;height:13px;margin:0 0 1px}.river-item,.river-empty,.river-west .river-item,.river-west .river-empty,.river-east .river-item,.river-east .river-empty{width:26px;height:27px}}
@media(orientation:landscape) and (max-height:390px){.board{grid-template-rows:46px minmax(143px,1fr) 90px}.center-area{grid-template-rows:56px minmax(64px,1fr) 56px}.river-item,.river-empty,.river-west .river-item,.river-west .river-empty,.river-east .river-item,.river-east .river-empty,.river-zone .tile{height:26px}.seat.left .backs .back-slot,.seat.right .backs .back-slot{margin-bottom:0}}

/* 2026-11-03: turn, claim, score and menu polish for the original Site. */
.river-zone:hover{background:transparent;outline:0}
.river-zone:focus-visible{outline:2px solid #a5bf83;outline-offset:2px}
.seat.bottom .bottom-main{justify-content:flex-start;padding-left:clamp(54px,8vw,118px)}
.seat.bottom .hand-holder{width:calc(14 * clamp(35px,3.7vw,52px) + 52px);max-width:calc(100% - 12px);flex:0 1 auto}
.seat.bottom .hand-row{width:100%;max-width:100%;justify-content:flex-start}
.turn-light{display:block;width:20px;height:20px;z-index:4;background:#ffcc2b;filter:drop-shadow(0 0 5px #fff8b1) drop-shadow(0 0 9px #f6a62d);animation:turn-pointer-glow 1.2s ease-in-out infinite alternate}
.turn-light.north{top:8px;left:calc(50% + 26px)}.turn-light.south{bottom:8px;left:calc(50% + 26px)}.turn-light.west{left:8px;top:calc(50% + 16px)}.turn-light.east{right:8px;top:calc(50% + 16px)}
@keyframes turn-pointer-glow{to{filter:drop-shadow(0 0 10px #fff8b1) drop-shadow(0 0 16px #ffae31);opacity:.82}}
.river-item.latest{z-index:3}.river-item.latest:before{content:"";position:absolute;inset:-7px;border:3px solid #fff6ad;border-radius:9px;background:#ffd54aa8;box-shadow:0 0 0 3px #e99d1d,0 0 16px 7px #f9c23cbb;pointer-events:none;animation:latest-tile-glow 1s ease-in-out infinite alternate}.river-item.latest:after{content:"✦";position:absolute;z-index:2;right:-12px;top:-15px;color:#ffb72d;font-size:19px;text-shadow:0 0 4px #fff,0 0 10px #ffcf5b;pointer-events:none}.river-item.latest .tile{position:relative;z-index:1;outline:0;filter:brightness(1.08) drop-shadow(0 0 8px #ffe36d)}
@keyframes latest-tile-glow{to{box-shadow:0 0 0 3px #efae28,0 0 18px 8px #f9c23ccc}}
.reaction-dock{position:absolute;top:-39px;right:16px;z-index:8;gap:8px;padding:5px 8px;border:2px solid #d8b564;border-radius:18px;background:#fff9deed;box-shadow:0 5px 0 #a38b5c,0 9px 18px #4e715a66}
.reaction-dock.from-1{left:clamp(160px,19vw,280px);right:auto}
.reaction-dock .reaction-callout{font-size:16px;padding:5px 12px;border-width:2px;animation:none}
.reaction-dock .actionbar{min-height:0;gap:6px}.reaction-dock .actionbar button{min-width:52px;min-height:43px;padding:5px 12px;font-size:18px;box-shadow:inset 0 3px 0 #ffffff80,0 4px 0 #977c60,0 6px 10px #5b725564;animation:none}.reaction-dock .actionbar .hu{background:#ff9cb1}.reaction-dock .actionbar .gang{background:#8cdac9}.reaction-dock .actionbar .peng{background:#94d694}
.reaction-dock.arriving{animation:claim-dock-enter .42s cubic-bezier(.18,1.4,.3,1) both}.reaction-dock.arriving .reaction-callout{animation:reaction-arrive .42s cubic-bezier(.2,1.5,.4,1) both}.reaction-dock.arriving .actionbar button{animation:reaction-button-in .42s ease-out both}
@keyframes claim-dock-enter{from{opacity:0;transform:translateY(20px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}
.settings-footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.settings-footer .choice{border-color:#b98d77;background:#fff1e8}
.rules-panel{max-height:calc(100% - 20px);display:flex;flex-direction:column;align-items:center}.rules-scroll{overflow-y:auto;text-align:left;line-height:1.55;padding:0 5px;margin:2px 0 12px}.rules-scroll h3{margin:10px 0 3px;color:#396a4d}.rules-scroll p{margin:0 0 8px}.rules-screen{max-height:calc(100vh - 30px);display:flex;flex-direction:column}.rules-screen .rules-scroll{max-height:calc(100vh - 170px)}
@media(orientation:landscape) and (max-height:560px){.seat.bottom .bottom-main{padding-left:54px}.seat.bottom .hand-holder{width:calc(14 * 35px + 52px)}.reaction-dock{top:-31px;right:8px;gap:4px;padding:3px 5px;border-radius:12px}.reaction-dock .reaction-callout{font-size:14px;padding:4px 7px}.reaction-dock .actionbar{gap:4px}.reaction-dock .actionbar button{min-width:43px;min-height:40px;padding:4px 8px;font-size:16px}.turn-light{width:16px;height:16px}.turn-light.north,.turn-light.south{left:calc(50% + 19px)}.turn-light.west,.turn-light.east{top:calc(50% + 12px)}.rules-panel{padding:8px}.rules-panel h2{font-size:17px}.rules-scroll{font-size:11px}.rules-scroll h3{margin:5px 0 1px}.rules-scroll p{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.turn-light,.river-item.latest:before,.reaction-dock,.reaction-dock .reaction-callout,.reaction-dock .actionbar button{animation:none}}

/* 2026-11-04: compact end-of-round display, visible lack and wall cues, and tile counter. */
.count-trigger{min-width:72px;background:#fff6d9;border:2px solid #8fb786;box-shadow:0 3px 0 #92b284}
.seat-rack,.seat:not(.bottom),.center-area{position:relative}
.lack-flag{z-index:3;display:inline-grid;place-items:center;flex:none;min-width:31px;padding:3px 6px;border:2px solid #f4b53d;border-radius:8px;background:#fff0a6;color:#6c4b17;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 0 0 2px #fff8c9,0 0 10px #eeae38;animation:lack-gleam 2.4s ease-in-out infinite}
.seat:not(.bottom) .lack-flag{position:absolute;left:-34px;top:50%;transform:translateY(-50%)}
.seat.left .lack-flag,.seat.right .lack-flag{left:50%;top:-27px;transform:translateX(-50%)}
.seat.bottom .bottom-main{position:relative}
.seat.bottom .lack-flag{position:absolute;left:clamp(54px,8vw,118px);bottom:18px;transform:translateX(-108%)}
@keyframes lack-gleam{50%{box-shadow:0 0 0 3px #fff7af,0 0 17px #ffcf65}}
.win-mark{display:inline-flex;align-items:center;gap:2px;padding:1px 3px;margin-left:2px;border-radius:7px;background:#fff5d7cc;color:#a15c35;font-size:10px;font-weight:900;white-space:nowrap}
.win-mark img{width:16px;height:16px;object-fit:contain}.win-mark i{font-style:normal}.win-mark .tile{width:16px;height:21px}.win-mark b{font-size:10px}
.seat:not(.bottom) .win-mark{position:absolute;z-index:4;right:2px;bottom:1px}
.seat.bottom .win-mark{vertical-align:middle}
.table-status.wall-low .table-remaining{color:#ffdc54;text-shadow:0 0 7px #ff9500,0 1px 2px #74490f;animation:wall-count-glow 1.2s ease-in-out infinite alternate}
@keyframes wall-count-glow{to{text-shadow:0 0 13px #fff09f,0 0 18px #ff9a1a}}
.wall-notice{position:absolute;z-index:6;left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #f5cf77;border-radius:13px;background:#fff5d9db;box-shadow:0 3px 10px #6e8d6b77;white-space:nowrap;animation:notice-in .28s ease-out both}
.wall-notice strong{font-size:14px;color:#b76719}.wall-notice button{width:20px;height:20px;padding:0;border:0;box-shadow:none;background:#fff9ed;color:#805b3d;line-height:1}
@keyframes notice-in{from{opacity:0;transform:translate(-50%,14px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.turn-light{width:27px;height:27px;clip-path:polygon(50% 3%,96% 92%,4% 92%);background:#ffcb2d;filter:drop-shadow(0 0 5px #fff8ab) drop-shadow(0 0 9px #f9aa24)}
.turn-light.north{top:-5px;left:calc(50% + 13px)}.turn-light.south{bottom:-5px;left:calc(50% + 13px)}.turn-light.west{left:-12px;top:calc(50% + 7px)}.turn-light.east{right:-12px;top:calc(50% + 7px)}
.result-panel{width:min(760px,94%);padding:10px 14px;max-height:90vh}.result-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.result-heading h2{font-size:16px;margin:0}.result-heading span{font-size:11px;color:#687652;font-weight:800}
.result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:6px 0}.result-person{min-width:0;padding:4px 5px;border:1px solid #c9ddbc;border-radius:9px;background:#f4fae9}
.result-person-head{display:flex;align-items:center;gap:4px;min-height:24px}.result-person-head img{width:25px;height:25px;object-fit:contain}.result-person-head strong{display:inline;font-size:11px;white-space:nowrap}.result-person-head b{margin-left:auto;font-size:12px;color:#376a4b}.result-person .delta{font-size:11px;font-weight:900}.result-person .delta.gain{color:#2a9b55}.result-person .delta.loss{color:#c26754}
.result-hand{display:flex;align-items:flex-end;gap:1px;overflow-x:auto;padding:2px 0 3px;min-height:29px}.result-hand .tile{width:20px;height:27px}.result-win-tile{margin-left:5px;outline:2px solid #f2bd49;border-radius:4px}
.result-fans{display:flex;align-items:center;gap:4px;overflow-x:auto;min-height:20px}.result-fans>span{display:inline-flex;align-items:center;gap:2px;border-radius:5px;background:#ffedcb;padding:1px 3px;font-size:10px;white-space:nowrap}.result-fans .tile{width:14px;height:18px}
.result-transfers{display:flex;align-items:center;gap:4px;overflow-x:auto;max-height:41px;padding:3px;margin:3px 0;border-top:1px solid #d8e5c8}.transfer{display:inline-flex;align-items:center;gap:1px;flex:none;padding:1px 4px;border-radius:8px;background:#fff4d9}.transfer img{width:20px;height:20px;object-fit:contain}.transfer i{font-style:normal;color:#ba792c}.transfer b{font-size:11px;color:#39835a}.result-footer .primary{padding:5px 18px;font-size:13px}
.counts-panel{width:min(550px,92%);padding:12px}.count-suits{display:flex;justify-content:center;gap:6px;margin:7px}.count-suits .choice{min-width:64px;padding:5px 9px}.count-tiles{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}.count-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 1px;border-radius:9px;background:#eef7e9}.count-tile .tile{width:29px;height:39px}.count-tile b{color:#348358;font-size:15px}.counts-panel p{font-size:11px}
@media(orientation:landscape) and (max-height:560px){.seat.bottom .lack-flag{left:54px;bottom:8px;font-size:10px;min-width:25px;padding:2px 3px}.seat:not(.bottom) .lack-flag{font-size:9px;min-width:23px;padding:1px 3px}.seat.top .lack-flag{left:-27px}.seat.left .lack-flag,.seat.right .lack-flag{top:-22px}.win-mark img{width:12px;height:12px}.win-mark .tile{width:13px;height:17px}.win-mark b{font-size:8px}.turn-light{width:21px;height:21px}.turn-light.north,.turn-light.south{left:calc(50% + 8px)}.turn-light.west,.turn-light.east{top:calc(50% + 5px)}.wall-notice{bottom:1px;padding:2px 6px}.wall-notice strong{font-size:10px}.result-panel{padding:5px 7px;max-height:95vh}.result-heading h2{font-size:13px}.result-grid{gap:3px;margin:3px 0}.result-person{padding:2px 3px}.result-person-head{min-height:19px}.result-person-head img{width:18px;height:18px}.result-person-head strong,.result-person .delta,.result-person-head b{font-size:9px}.result-hand{min-height:23px}.result-hand .tile{width:16px;height:21px}.result-fans .tile{width:11px;height:15px}.result-transfers{max-height:28px;padding:1px;margin:1px 0}.transfer img{width:15px;height:15px}.result-footer .primary{padding:3px 12px;font-size:11px}.count-tile .tile{width:23px;height:31px}.count-tile b{font-size:12px}}
@media(prefers-reduced-motion:reduce){.lack-flag,.table-status.wall-low .table-remaining,.wall-notice{animation:none}}
.result-person .delta.flat{color:#7d846f}
.fx-layer{position:fixed;z-index:30;max-width:min(220px,42vw)}
.fx-layer.peng,.fx-layer.gang,.fx-layer.peng .fx-burst,.fx-layer.gang .fx-burst{animation-duration:1.4s}
.result-melds{display:flex;align-items:center;gap:3px;overflow-x:auto;padding:1px 0 3px;min-height:23px}
.result-meld{display:inline-flex!important;align-items:center;gap:1px;flex:none;padding:1px 3px;border-radius:5px;background:#e5f2e7}
.result-meld>b{font-size:9px;color:#347664;margin-right:2px}
.result-meld .tile{width:15px;height:20px}
@media(orientation:landscape) and (max-height:560px){.result-melds{min-height:19px;padding:0 0 2px}.result-meld .tile{width:12px;height:16px}.result-meld>b{font-size:8px}}

/* 2026-11-04 v20: selected petal notice, diamond turn marker, and seat-side win ticket. */
.wall-notice{bottom:5px;gap:5px;min-width:138px;justify-content:center;padding:6px 13px;border:2px solid #d6e5b8;border-radius:48% 52% 47% 53% / 58% 46% 54% 42%;background:#f9ffe5ed;box-shadow:0 0 0 2px #fff9e8,0 4px 13px #7598756e}
.wall-notice .wall-petal{font-size:17px;line-height:1;color:#e6aba4;transform:rotate(-22deg)}
.wall-notice strong{font-size:13px;color:#356d4c}.wall-notice em{font-size:18px;font-style:normal;color:#2e8b5c}
.wall-notice button{margin-left:2px;border-radius:50%;background:#fff8dd;color:#795f48;font-size:15px}
.turn-light{width:20px;height:20px;clip-path:none;border:2px solid #fff8d7;border-radius:5px;background:#ffd34d;box-shadow:0 0 0 2px #eeb73e,0 0 12px #ffd460;filter:none;pointer-events:none;animation:diamond-glow 1.2s ease-in-out infinite alternate}
.turn-light.north,.turn-light.south,.turn-light.west,.turn-light.east{transform:rotate(45deg)}
.turn-light.north{top:-10px;left:calc(50% + 14px)}.turn-light.south{bottom:-10px;left:calc(50% + 14px)}.turn-light.west{left:-12px;top:calc(50% + 7px)}.turn-light.east{right:-12px;top:calc(50% + 7px)}
@keyframes diamond-glow{to{box-shadow:0 0 0 3px #fff2ae,0 0 17px #ffbf47}}
.seat.finished{opacity:1}.seat.won::before{content:"";position:absolute;z-index:2;inset:0;border-radius:18px;background:#395e4b2e;pointer-events:none}.seat.bottom.won::before{background:#395e4b20}
.win-mark{display:inline-flex;align-items:center;gap:3px;flex:none;min-height:35px;margin:0;padding:3px 6px;border:2px solid #f6d2ad;border-radius:19px 26px 20px 27px;background:#fff0e4f5;box-shadow:0 0 0 2px #fffaf3,0 4px 10px #6f806b62;color:#a35335;font-size:12px;font-weight:900;white-space:nowrap;pointer-events:none}
.win-mark .win-source{display:flex;flex-direction:column;align-items:center;gap:0;min-width:22px;font-size:10px;line-height:1}.win-mark .win-source img{width:20px;height:20px;object-fit:contain}.win-mark .win-source small{font-size:8px;color:#704c38}
.win-mark i{font-style:normal;font-size:14px;color:#a27a48}.win-mark .tile{width:24px;height:31px}.win-mark b{font-size:20px;line-height:1;color:#a64e39}
.seat.top .seat-rack .win-mark{position:absolute;z-index:5;right:0;top:calc(100% + 3px)}
.seat.left .seat-rack .win-mark,.seat.right .seat-rack .win-mark{position:relative;z-index:5;right:auto;bottom:auto;align-self:center}
.seat.bottom .bottom-main .win-mark{position:absolute;z-index:5;left:clamp(220px,27vw,310px);top:-37px}
@media(orientation:landscape) and (max-height:560px){.wall-notice{bottom:2px;padding:5px 11px}.wall-notice .wall-petal{font-size:16px}.wall-notice strong{font-size:14px}.wall-notice em{font-size:19px}.turn-light{width:16px;height:16px}.turn-light.north,.turn-light.south{left:calc(50% + 9px)}.turn-light.west,.turn-light.east{top:calc(50% + 4px)}.win-mark{min-height:33px;padding:2px 5px;gap:3px}.win-mark .win-source img{width:18px;height:18px}.win-mark .win-source small{font-size:8px}.win-mark .tile{width:23px;height:29px}.win-mark b{font-size:19px}.seat.bottom .bottom-main .win-mark{top:-34px}}
@media(prefers-reduced-motion:reduce){.turn-light{animation:none}}

/* 2026-11-04 v21: scoring options, centered turn frame, and staged round settlement. */
.setup-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 16px}.setup-score input{width:128px;padding:9px 12px;border:2px solid #8cae7e;border-radius:12px;background:#fffdf1;color:#315744;font:900 17px "Microsoft YaHei",sans-serif}.setup-score span{font-size:12px;color:#687652}.cap-choices .choice{min-width:78px}
.rules-scroll table{width:100%;border-collapse:collapse;margin:5px 0 12px;text-align:left;font-size:11px}.rules-scroll th,.rules-scroll td{padding:5px 6px;border-bottom:1px solid #dce8ce}.rules-scroll th{background:#e7f2d9;color:#315f45}.rules-scroll td:first-child{font-weight:900;white-space:nowrap}
.table-wind.active{z-index:5;border-color:#d89e23;border-radius:5px;background:#ffe27a;color:#34513c;box-shadow:0 0 0 2px #fff4b8,0 0 14px #ffc94e}
.turn-light{z-index:4;width:30px;height:30px;clip-path:none;border:3px solid #f2b62d;border-radius:9px;background:transparent;box-shadow:0 0 0 2px #fff9d0,0 0 16px #ffc747;filter:none;animation:turn-frame-glow 1.2s ease-in-out infinite alternate}
.turn-light.north,.turn-light.south,.turn-light.west,.turn-light.east{transform:none}
.turn-light.north{top:-17px;left:calc(50% - 15px)}.turn-light.south{bottom:-17px;left:calc(50% - 15px)}.turn-light.west{left:-17px;top:calc(50% - 15px)}.turn-light.east{right:-17px;top:calc(50% - 15px)}
@keyframes turn-frame-glow{to{box-shadow:0 0 0 3px #fff7b1,0 0 21px #ffb82c}}
.round-end-banner{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:260px;min-height:136px;padding:15px 25px;border:4px solid #f0c56c;border-radius:27px;background:#fff9e9f2;box-shadow:0 0 0 5px #fff5d7ad,0 18px 45px #45634d78;color:#8b5a34;pointer-events:none;animation:round-end-pop .55s ease-out both}.round-end-banner span{font-size:13px;font-weight:800}.round-end-banner strong{font-size:clamp(34px,5vw,56px);line-height:1.1;color:#ad633a;text-shadow:0 2px 0 #ffe5ad}.round-end-banner small{font-size:13px;font-weight:800;color:#4c805e}
@keyframes round-end-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.75)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.result-panel.revealing{animation:result-open .9s ease-out both}.result-panel.revealing .result-person{animation:result-card .55s ease-out both;animation-delay:calc(.15s + var(--order) * .12s)}.result-panel.revealing .score-track b{animation:score-land .5s ease-out both;animation-delay:calc(.45s + var(--order) * .12s)}.result-panel.revealing .transfer{animation:transfer-flow .4s ease-out both;animation-delay:calc(.55s + var(--order) * .07s)}
.score-track{display:inline-flex;align-items:center;gap:3px;margin-left:auto;white-space:nowrap;font-weight:900}.score-track small{font-size:10px;color:#8c9581}.score-track i{font-size:11px;font-style:normal;color:#b48b4c}.result-person-head .score-track b{margin-left:0;color:#287152}.result-transfers .transfer small{font-size:9px;font-weight:800;color:#5b634b}
@keyframes result-open{from{opacity:0;transform:translate(-50%,-45%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes result-card{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes score-land{from{opacity:0;transform:translateX(-7px);color:#bb7953}to{opacity:1;transform:translateX(0);color:#287152}}@keyframes transfer-flow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@media(orientation:landscape) and (max-height:560px){.turn-light{width:25px;height:25px;border-width:2px}.turn-light.north{top:-13px;left:calc(50% - 12px)}.turn-light.south{bottom:-13px;left:calc(50% - 12px)}.turn-light.west{left:-13px;top:calc(50% - 12px)}.turn-light.east{right:-13px;top:calc(50% - 12px)}.round-end-banner{min-width:220px;min-height:108px;padding:10px 20px}.round-end-banner strong{font-size:34px}.round-end-banner small{font-size:11px}.rules-scroll table{font-size:10px}.rules-scroll th,.rules-scroll td{padding:3px 4px}.score-track small{font-size:8px}.score-track i{font-size:9px}.result-transfers .transfer small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.turn-light,.round-end-banner,.result-panel.revealing,.result-panel.revealing .result-person,.result-panel.revealing .score-track b,.result-panel.revealing .transfer{animation:none}}

/* 2026-11-04 v22: separate mode choice and live score changes. */
.mode-screen{width:min(940px,100%)}.setup-step{display:inline-block;margin-bottom:5px;color:#458264;font-size:12px;font-weight:900}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}
.mode-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;min-height:255px;padding:12px;border:2px solid #b3caa0;border-radius:22px;background:#f8fcefff;text-align:left;box-shadow:0 5px 0 #bdd3ad,0 12px 24px #65866029;transition:transform .18s,box-shadow .18s}.mode-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 #bdd3ad,0 15px 25px #6586603d}.mode-art{display:grid;place-items:center;width:100%;height:132px;border-radius:16px;background:#f9eddd}.mode-battle .mode-art{background:#e1f3e4}.mode-river .mode-art{background:#e9ecfa}.mode-art img{max-width:100%;height:120px;object-fit:contain}.mode-card strong{font-size:21px;color:#365f47}.mode-card small{min-height:36px;color:#637257;font-size:12px;line-height:1.5}.mode-enter{margin-top:auto;color:#a46a40;font-size:12px;font-weight:900}.mode-back{margin:4px 0 11px;padding:8px 13px;font-size:12px}
.seat-score{position:relative;display:inline-block}.score-float{position:absolute;z-index:12;left:50%;bottom:calc(100% + 5px);display:flex;flex-direction:column;align-items:center;gap:0;min-width:78px;padding:3px 7px;border:2px solid #9dd0a0;border-radius:13px;background:#f2ffedee;color:#2a8751;box-shadow:0 4px 12px #45634d70;white-space:nowrap;pointer-events:none;animation:score-float-in 1.8s ease-out both}.score-float.loss{border-color:#f0b7a7;background:#fff2e9ee;color:#bd5b4b}.score-float small{font-size:9px;line-height:1.1}.score-float b{font-size:15px;line-height:1.1}.seat.bottom .score-float{bottom:calc(100% + 5px)}
@keyframes score-float-in{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}18%,70%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-18px) scale(1)}}
@media(max-width:650px){.mode-grid{grid-template-columns:1fr;gap:10px}.mode-card{display:grid;grid-template-columns:86px 1fr;grid-template-rows:auto auto auto;gap:3px 12px;min-height:100px;padding:8px}.mode-art{grid-row:1/4;height:84px}.mode-art img{height:78px}.mode-card strong{font-size:17px}.mode-card small{min-height:0}.mode-enter{margin-top:0}}
@media(orientation:landscape) and (max-height:560px){.mode-screen{padding:10px 16px}.mode-screen h1{margin:2px 0 5px;font-size:23px}.mode-screen .intro{margin:0}.mode-grid{gap:8px;margin-top:8px}.mode-card{min-height:172px;padding:7px;gap:3px}.mode-art{height:78px}.mode-art img{height:72px}.mode-card strong{font-size:16px}.mode-card small{font-size:10px;min-height:30px}.mode-enter{font-size:10px}.score-float{min-width:67px;padding:2px 5px}.score-float small{font-size:8px}.score-float b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.score-float{animation:none}}

/* 2026-11-04 v23: winner-by-winner storybook settlement. */
.winner-result{position:absolute;z-index:9;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;background:#486949a6}
.winner-sheet{width:min(1120px,100%);height:min(640px,100%);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;padding:10px 18px;background:#fff8e9;border:4px solid #d7b77e;border-radius:32px;box-shadow:inset 0 0 0 3px #fffdf2,0 12px 30px #304b377a;color:#563c2b;overflow:hidden}
.winner-heading{display:flex;align-items:center;justify-content:space-between;padding:3px 10px 6px;border-bottom:2px dashed #e6cda6}.winner-heading span{font-weight:900;font-size:clamp(16px,2.2vw,27px);color:#a94e31}.winner-heading small{font-size:clamp(10px,1.2vw,14px);font-weight:800;color:#8b765c}
.winner-content{min-height:0;display:grid;grid-template-columns:minmax(125px,29%) minmax(0,1fr);gap:12px}.winner-profile{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.winner-portrait{width:min(100%,195px);height:min(19vh,185px);min-height:75px;border:4px solid #e5b975;border-radius:50%;background:#ffebce;box-shadow:0 0 0 5px #fff8e5,0 6px 0 #e7caa4;display:flex;align-items:center;justify-content:center}.winner-portrait img{width:95%;height:95%;object-fit:contain}.winner-profile h2{margin:8px 0 0;padding:5px 12px;border:2px solid #e4a687;border-radius:100px;background:#fff2db;color:#a34230;font-size:clamp(16px,2vw,25px);line-height:1.1;white-space:nowrap}
.winner-detail{min-height:0;display:grid;grid-template-columns:minmax(160px,1fr) minmax(125px,29%);grid-template-rows:minmax(0,1fr) auto;gap:6px 10px}.winner-fans{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:auto}.winner-fan{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:4px 10px;border:2px solid #edd6ad;border-radius:12px;background:#fffdf4;font-weight:900;font-size:clamp(11px,1.45vw,16px);box-shadow:0 2px 0 #e9d6b7}.winner-fan b{color:#bc5432;white-space:nowrap}.winner-fan-total{align-self:flex-end;padding:3px 10px;border-radius:12px;background:#ffedcb;font-size:clamp(11px,1.3vw,15px);font-weight:900}.winner-fan-total b{color:#bd4c2e;font-size:1.35em}
.winner-points{align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px;padding:8px;border:3px solid #e8b25e;border-radius:24px;background:#ffe4a3;color:#af3d27;text-align:center;box-shadow:0 4px 0 #e8bc7a}.winner-points small{font-size:clamp(9px,1vw,12px);font-weight:900;white-space:nowrap}.winner-points strong{display:block;font-size:clamp(31px,5vw,68px);line-height:1;font-weight:1000;white-space:nowrap;text-shadow:1px 2px #fff6dc}.winner-points em{font-size:.48em;font-style:normal}.winner-points.burst{position:relative;z-index:0;border:0;background:transparent;box-shadow:none}.winner-points.burst:before{content:"";position:absolute;z-index:-1;width:145%;height:160%;background:#ffd869;pointer-events:none}.winner-points.burst strong{font-size:clamp(42px,6.5vw,88px)}
.winner-score{grid-column:1/3;display:flex;align-items:center;justify-content:space-around;gap:6px;padding:4px 10px;border:2px solid #e0c38f;border-radius:100px;background:#fff3d8;font-size:clamp(10px,1.25vw,15px);font-weight:900;white-space:nowrap}.winner-score>span b{font-size:1.2em;color:#248163}.winner-gain{font-size:clamp(16px,2.4vw,30px);color:#d26927;text-shadow:0 0 8px #ffcb68}
.winner-tiles{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:3px 7px;min-height:68px;padding:5px 9px;border:2px solid #e1c795;border-radius:16px;background:#fffdf4}.winner-tiles-title{font-size:clamp(10px,1.2vw,14px);font-weight:900;white-space:nowrap;color:#8d6a4a}.winner-hand{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:thin}.winner-hand>span{flex:none}.winner-hand .tile,.winner-meld .tile{width:clamp(18px,2.5vw,31px);height:clamp(25px,3.5vw,43px);border-radius:5px}.winner-hand .tile .num,.winner-meld .tile .num{font-size:clamp(11px,1.6vw,18px)}.winner-hand .tile .suit,.winner-meld .tile .suit{font-size:clamp(7px,.9vw,10px)}.winner-winning-tile{padding:2px;border:2px solid #eda844;border-radius:7px}.winner-melds{grid-column:2;display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto}.winner-meld{display:flex;align-items:center;gap:4px;flex:none}.winner-meld strong{display:inline-block;border-radius:100px;background:#ffe5b0;padding:2px 6px;color:#9f5f32;font-size:clamp(9px,1vw,12px)}.winner-meld>span{display:flex;gap:1px}.winner-no-meld{font-size:11px;color:#968670}
.winner-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}.winner-controls button{padding:5px 14px;font-size:clamp(10px,1.2vw,14px);font-weight:900;border-color:#c7a678;box-shadow:0 2px 0 #c0a378}.winner-controls .primary{background:#ffd777;border-color:#d49c46;color:#8b4a24;min-width:108px}.winner-auto{font-size:clamp(9px,1vw,12px);color:#927050;font-weight:800;text-align:center}
.winner-result.animating .winner-sheet{animation:winner-open .65s ease-out both}.winner-result.animating .winner-profile{animation:winner-appear .7s .25s both}.winner-result.animating .winner-fan{animation:winner-appear .42s both;animation-delay:calc(.65s + var(--fan-order)*.4s)}.winner-result.animating .winner-fan-total{animation:winner-appear .35s 1.85s both}.winner-result.animating .winner-points{animation:winner-pop .6s 1.95s both}.winner-result.animating .winner-points.burst:before{animation:burst-flash .7s 2.05s both}.winner-result.animating .winner-gain{animation:winner-appear .4s 2.25s both}
@keyframes winner-open{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes winner-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes winner-pop{0%{opacity:0;transform:scale(.35) rotate(-8deg)}65%{opacity:1;transform:scale(1.13) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes burst-flash{0%{opacity:0;transform:scale(.3) rotate(-22deg)}60%{opacity:1;transform:scale(1.16) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(orientation:landscape) and (max-height:560px){.winner-result{padding:4px}.winner-sheet{gap:3px;padding:4px 9px;border-width:3px;border-radius:18px}.winner-heading{padding:0 5px 2px}.winner-content{gap:6px}.winner-portrait{height:min(23vh,100px);min-height:55px;border-width:2px}.winner-profile h2{margin-top:3px;padding:3px 8px}.winner-detail{gap:2px 5px}.winner-fans{gap:2px}.winner-fan{padding:2px 6px;border-width:1px;border-radius:7px}.winner-fan-total{padding:1px 7px}.winner-points{min-height:60px;padding:3px;border-width:2px}.winner-score{padding:1px 7px;border-width:1px}.winner-tiles{min-height:56px;gap:1px 4px;padding:2px 5px}.winner-hand .tile,.winner-meld .tile{width:20px;height:27px}.winner-hand .tile .num,.winner-meld .tile .num{font-size:11px}.winner-hand .tile .suit,.winner-meld .tile .suit{font-size:7px}.winner-melds{gap:5px}.winner-controls{min-height:22px}.winner-controls button{padding:2px 10px}}
@media(max-width:690px) and (orientation:portrait){.winner-result{min-width:680px}}

/* 2026-11-05 v24: match the selected storybook settlement design. */
.winner-result{position:fixed;z-index:100;inset:0;width:100vw;height:100vh;padding:0;background:#a8c58b}
.winner-sheet{width:100%;height:100%;max-height:none;display:grid;grid-template-rows:12% 43% 30% 11%;gap:1.3%;padding:2.3% 8% 2.3%;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.winner-heading{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:0;border:0;min-width:0}.winner-heading span{display:inline-block;padding:1px 20px 3px;border:2px solid #e9b984;border-radius:100px;background:#fffaf0e8;box-shadow:0 3px 0 #efcf9d;color:#8c492a;font-size:clamp(17px,2.5vw,35px);line-height:1.15;white-space:nowrap}.winner-heading small{position:absolute;right:0;bottom:0;max-width:43%;white-space:normal;text-align:right;font-size:clamp(8px,1vw,13px);line-height:1.1;color:#79563d}
.winner-content{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:30% 26% 13% 31%;grid-template-rows:minmax(0,73%) minmax(0,27%);gap:0}
.winner-profile{grid-column:1;grid-row:1/3;display:flex;justify-content:center;align-items:center;min-width:0;min-height:0;padding-right:5%}.winner-portrait{width:min(74%,30vh,190px);height:auto;aspect-ratio:1;min-height:0;border:4px solid #d79a58;border-radius:50%;background:#fff1d9;box-shadow:inset 0 0 0 3px #fff9e9,0 3px 0 #bb7548}.winner-portrait img{width:100%;height:100%;object-fit:contain}.winner-profile h2{position:relative;z-index:1;margin:-7px 0 0;width:95%;padding:4px 5px;border:2px solid #cd8667;border-radius:20px 20px 35px 35px;background:#ffe9cc;box-shadow:0 3px 0 #e8bc9f;text-align:center;color:#a84630;font-size:clamp(15px,2.1vw,26px);line-height:1.1}
.winner-fans{grid-column:2;grid-row:1;min-height:0;display:flex;justify-content:center;gap:5px;padding:2px 4px;overflow-y:auto;scrollbar-width:thin}.winner-fan{min-height:0;flex:none;padding:4px 9px;border:1px solid #efd09a;border-radius:3px;background:#fffaf1ee;box-shadow:2px 3px 0 #e5c27d;color:#583725;font-size:clamp(11px,1.45vw,18px);line-height:1.1}.winner-fan:nth-child(odd){transform:rotate(-1deg)}.winner-fan:nth-child(even){transform:rotate(.7deg)}.winner-fan b{color:#b5442d}.winner-fans.dense{justify-content:flex-start;gap:2px}.winner-fans.dense .winner-fan{padding:2px 7px;font-size:clamp(9px,1.12vw,14px)}
.winner-fan-total{grid-column:3;grid-row:1;align-self:center;justify-self:center;min-width:75%;padding:9px 2px;border:2px solid #e6ac64;border-radius:48%;background:#fff4d9e8;box-shadow:inset 0 0 0 2px #fffdf5,0 3px 0 #d9ad79;text-align:center;color:#70482f;font-size:clamp(11px,1.4vw,18px);line-height:1.1}.winner-fan-total b{display:block;color:#b5462f;font-size:2em}
.winner-points{grid-column:4;grid-row:1;align-self:center;justify-self:stretch;min-height:0;height:98%;margin:0;padding:0;border-radius:28px;box-shadow:0 3px 0 #e7b977}.winner-points small{position:relative;z-index:1;margin-bottom:-2px;font-size:clamp(8px,1vw,12px)}.winner-points strong{position:relative;z-index:1;font-size:clamp(38px,6.4vw,92px);line-height:1;color:#b63724;text-shadow:1px 2px 0 #fff8e3,2px 4px 0 #e8a96d}.winner-points.burst{height:100%;margin:0}.winner-points.burst:before{width:125%;height:170%;background-size:contain}.winner-points.burst strong{font-size:clamp(45px,7.2vw,105px)}
.winner-score{grid-column:2/5;grid-row:2;align-self:center;display:flex;justify-content:center;gap:2.5%;height:90%;padding:0;border:0;background:transparent;border-radius:0}.winner-score>span{display:flex;align-items:center;justify-content:center;gap:3px;min-width:24%;padding:1px 6px;border:1px solid #cfa678;border-radius:100px;background:#fff7e8e8;box-shadow:0 2px 0 #d3aa79;color:#8b6647;font-size:clamp(10px,1.25vw,16px)}.winner-score>span b{color:#267757;font-size:1.3em}.winner-gain{min-width:30%;display:flex;align-items:center;justify-content:center;color:#d36c28;font-size:clamp(17px,2.8vw,36px);text-shadow:0 0 8px #fff1aa}
.winner-tiles{position:relative;display:block;min-height:0;margin:0;padding:8px 2.5% 2px;border:0;border-radius:0;background:transparent}.winner-tiles-title{position:absolute;left:2%;top:-5px;z-index:1;padding:2px 12px;border:2px solid #e4bd7e;border-radius:100px;background:#fff1d4;color:#795337;font-size:clamp(11px,1.5vw,17px);box-shadow:0 2px 0 #e3c391}.winner-tiles-title small{font-size:.65em;color:#9a8066}.winner-tile-line{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.3vw,18px);min-width:0;overflow-x:auto;scrollbar-width:thin}.winner-melds{grid-column:auto;display:flex;align-items:center;gap:clamp(4px,1.2vw,16px);overflow:visible;flex:none}.winner-meld{position:relative;display:flex;align-items:center;gap:0;padding-top:14px}.winner-meld strong{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:1px 7px;border:1px solid #e7b25e;border-radius:100px;background:#fff1d3;color:#765031;white-space:nowrap;font-size:clamp(9px,1.1vw,13px)}.winner-meld>span{gap:1px}.winner-hand{display:flex;align-items:center;gap:1px;min-width:0;overflow:visible;flex:none}.winner-hand .tile,.winner-meld .tile{width:clamp(20px,2.95vw,42px);height:clamp(29px,4.15vw,57px);border-radius:5px}.winner-hand .tile .num,.winner-meld .tile .num{font-size:clamp(11px,1.6vw,21px)}.winner-hand .tile .suit,.winner-meld .tile .suit{font-size:clamp(7px,.9vw,11px)}.winner-winning-tile{border-color:#dfa74d}.winner-no-meld{display:none}
.winner-controls{display:flex;justify-content:center;gap:4%;min-height:0}.winner-controls button{align-self:center;min-width:17%;padding:4px 11px;border-color:#b99e75;border-radius:100px;background:#fff8e9;color:#7d5338;font-size:clamp(10px,1.4vw,18px);box-shadow:0 3px 0 #cab38e}.winner-controls .primary{min-width:20%;background:#ffdb81;border-color:#d79938;color:#8b4a24;font-size:clamp(13px,1.7vw,21px)}.winner-auto{align-self:center;color:#79543a;font-size:clamp(9px,1.25vw,15px)}
.winner-draw{grid-template-rows:12% 1fr 11%}.winner-draw-body{align-self:center;justify-self:center;text-align:center}.winner-draw-body strong{font-size:clamp(28px,5vw,64px);color:#a34b31}.winner-draw-body p{color:#79563d;font-weight:800}
@media(orientation:landscape) and (max-height:560px){.winner-sheet{padding:2.3% 8%}.winner-portrait{width:min(74%,30vh,130px);height:auto}.winner-profile h2{margin:-6px 0 0;padding:2px 3px}.winner-fan{padding:2px 7px}.winner-fan-total{padding:4px 2px}.winner-points{min-height:0}.winner-tiles{padding-top:5px}.winner-tiles-title{top:-3px;padding:1px 8px}.winner-meld{padding-top:10px}.winner-meld strong{padding:0 5px}.winner-hand .tile,.winner-meld .tile{width:clamp(18px,2.9vw,26px);height:clamp(26px,4vw,37px)}.winner-controls button{padding:2px 8px}}
@media(max-width:690px) and (orientation:portrait){.winner-result{min-width:680px}}

/* 2026-11-05 v25: immediate settlement over the original table, larger low-wall notice. */
.winner-result{position:absolute;z-index:9;inset:0;width:auto;height:auto;padding:0;background:#315b4770}
.winner-sheet{width:min(1020px,95%);height:min(560px,94%);max-height:94%;grid-template-rows:16% 43% 27% 10%;gap:1.3%;padding:8px 16px;border:3px solid #d7b77e;border-radius:26px;background:#fff8e9;box-shadow:inset 0 0 0 2px #fffdf2,0 9px 22px #304b3766}
.winner-heading{justify-content:flex-start;align-items:center;border-bottom:1px dashed #e6cda6}.winner-heading span{font-size:clamp(16px,2.2vw,25px);padding:1px 14px 2px}
.winner-heading>small{position:static;margin-left:auto;max-width:52%;font-size:clamp(9px,1vw,12px)}
.winner-payer{margin-left:auto;display:flex;align-items:center;gap:6px;max-width:48%;padding:2px 9px 2px 3px;border:2px solid #e9bb7f;border-radius:100px;background:#fff1d4;box-shadow:0 2px 0 #e1bb89;white-space:nowrap}.winner-payer img{width:42px;height:42px;object-fit:contain;flex:none;border:2px solid #e5af77;border-radius:50%;background:#fffbef}.winner-payer span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}.winner-payer b{font-size:clamp(11px,1.3vw,16px);color:#9a5133}.winner-payer small{position:static;max-width:none;white-space:nowrap;text-align:left;font-size:clamp(9px,1vw,12px);color:#806449;font-weight:800}
.winner-profile{padding-right:2%}.winner-portrait{width:min(70%,27vh,150px)}.winner-profile h2{width:90%;font-size:clamp(14px,1.8vw,23px)}
.winner-content{grid-template-columns:27% 28% 14% 31%}.winner-fan{background:#fffdf4;transform:none!important}.winner-fan:nth-child(even),.winner-fan:nth-child(odd){transform:none!important}.winner-fan-total{border-radius:22px}.winner-points.burst:before{width:115%;height:145%;background:linear-gradient(135deg,#fff3a9,#ffd35e 58%,#ffad49);clip-path:polygon(50% 0,61% 20%,76% 5%,78% 28%,98% 22%,86% 43%,100% 50%,86% 58%,98% 78%,77% 72%,75% 96%,60% 80%,50% 100%,40% 80%,25% 96%,23% 72%,2% 78%,14% 58%,0 50%,14% 43%,2% 22%,22% 28%,24% 5%,39% 20%)}
.winner-tiles{padding:9px 2% 2px;border:2px solid #e0c28c;border-radius:16px;background:#fffdf4}.winner-tiles-title{top:-8px;left:2%;background:#fff2d6}.winner-tile-line{gap:clamp(4px,1vw,14px)}
.winner-controls{justify-content:space-between;padding:0 4%}.winner-controls .primary{min-width:22%}.winner-auto{font-size:clamp(9px,1.2vw,13px)}
.wall-notice{position:fixed;z-index:55;left:50%;top:46%;bottom:auto;min-width:225px;min-height:62px;gap:10px;padding:11px 24px;border:3px solid #c9dca6;border-radius:28px;background:#fffbe8;box-shadow:0 0 0 3px #fff8e8,0 9px 25px #466c4b80;animation:wall-notice-pop .28s ease-out both}.wall-notice .wall-petal{font-size:24px}.wall-notice strong{font-size:20px}.wall-notice em{font-size:30px}
@keyframes wall-notice-pop{from{opacity:0;transform:translate(-50%,-42%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(orientation:landscape) and (max-height:560px){.winner-sheet{width:96%;height:96%;max-height:96%;padding:5px 12px}.winner-heading span{font-size:17px}.winner-payer{padding:1px 7px 1px 2px}.winner-payer img{width:34px;height:34px}.winner-portrait{width:min(70%,26vh,120px)}.winner-tiles{padding:5px 2% 1px}.winner-tiles-title{top:-6px}.winner-controls .primary{padding:3px 12px}.wall-notice{min-height:58px;padding:8px 20px}.wall-notice strong{font-size:19px}.wall-notice em{font-size:28px}}
@media(prefers-reduced-motion:reduce){.wall-notice{animation:none;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.winner-result.animating .winner-sheet,.winner-result.animating .winner-profile,.winner-result.animating .winner-fan,.winner-result.animating .winner-fan-total,.winner-result.animating .winner-points,.winner-result.animating .winner-points.burst:before,.winner-result.animating .winner-gain{animation:none}}

/* 2026-11-05 v26: light page transitions and character-specific table details. */
.winner-result.turn-next .winner-sheet{animation:winner-page-next .28s ease-out both}
.winner-result.turn-previous .winner-sheet{animation:winner-page-previous .28s ease-out both}
@keyframes winner-page-next{from{opacity:.45;transform:translateX(24px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes winner-page-previous{from{opacity:.45;transform:translateX(-24px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}
.winner-nav{display:flex;align-items:center;gap:12px;min-width:0}
.winner-nav button{flex:none;padding:5px 13px}
.winner-nav .winner-auto{white-space:nowrap}
.board{background-image:radial-gradient(circle at 8% 22%,#fff8e1a8 0 5px,transparent 6px),radial-gradient(circle at 92% 22%,#fff8e1a8 0 5px,transparent 6px),radial-gradient(circle at 11% 69%,#f6dfe0a6 0 4px,transparent 5px),radial-gradient(circle at 89% 69%,#f6dfe0a6 0 4px,transparent 5px),radial-gradient(ellipse at 50% 40%,#e8f6d4 0%,#dff0c4 75%)}
.board:before{display:block;content:'✿  ✧  ✿';position:absolute;left:3%;right:auto;top:20%;bottom:auto;color:#8fbf86;font-size:20px;letter-spacing:9px;opacity:.35;transform:rotate(-26deg);pointer-events:none}
.seat[data-role="吉伊"]{--seat-accent:#a8cb9c;--seat-wash:#eaf5dc;--seat-glyph:'✿';--seat-ink:#5b8a5c}
.seat[data-role="小八"]{--seat-accent:#9fbfd8;--seat-wash:#e7f4fc;--seat-glyph:'✧';--seat-ink:#5d86af}
.seat[data-role="乌萨奇"]{--seat-accent:#e9bb78;--seat-wash:#fff0d1;--seat-glyph:'✦';--seat-ink:#b98646}
.seat[data-role="小飞鼠"]{--seat-accent:#d6acc8;--seat-wash:#fceaf1;--seat-glyph:'♡';--seat-ink:#ad769a}
.seat:not(.bottom) .seat-identity{position:relative;border:2px solid var(--seat-accent);background:linear-gradient(135deg,#fffdf3 40%,var(--seat-wash));box-shadow:inset 0 0 0 2px #fffdf8,0 3px 0 var(--seat-accent);padding-right:14px}
.seat.left .seat-identity,.seat.right .seat-identity{padding:2px}
.seat:not(.bottom) .seat-identity:after{content:var(--seat-glyph);position:absolute;right:-7px;top:-11px;display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--seat-accent);border-radius:50%;background:#fffdf3;color:var(--seat-ink);font-size:14px;line-height:1;box-shadow:0 2px 3px #708c6a3d;pointer-events:none}
.seat:not(.bottom) .seat-identity .avatar{border-radius:50%;background:radial-gradient(circle,#fffef9 32%,var(--seat-wash) 100%)}
.seat.bottom .hand-top>span:first-child{padding:1px 9px;border:1px solid var(--seat-accent);border-radius:100px;background:linear-gradient(110deg,#fffdf5,var(--seat-wash));box-shadow:0 2px 0 var(--seat-accent)}
@media(orientation:landscape) and (max-height:560px){.seat:not(.bottom) .seat-identity{padding-right:6px}.seat:not(.bottom) .seat-identity:after{width:15px;height:15px;right:-5px;top:-7px;font-size:10px}.winner-nav button{padding:2px 9px}}
@media(prefers-reduced-motion:reduce){.winner-result.turn-next .winner-sheet,.winner-result.turn-previous .winner-sheet{animation:none}}

/* 2026-11-05 v26 audio controls. */
.quick-panel{max-height:92%;overflow-y:auto}
.audio-settings{display:grid;gap:7px;margin:8px auto 12px;padding:10px 13px;border:1px solid #c9d9b1;border-radius:15px;background:#f6fbe9}
.audio-settings>strong{color:#436348;font-size:14px}
.music-choices{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.music-choices .choice{min-width:68px;padding:5px 9px}
.music-choices .selected{border-color:#5c9a68;background:#dff2cf;color:#245c35;box-shadow:inset 0 0 0 1px #5c9a68}
.audio-slider{display:grid;grid-template-columns:minmax(100px,1fr) minmax(90px,1.5fr) 36px;align-items:center;gap:8px;text-align:left;font-size:12px;color:#45614a}
.audio-slider input{width:100%;accent-color:#67a86c;touch-action:auto}
.audio-slider output{text-align:right;font-variant-numeric:tabular-nums}
@media(orientation:landscape) and (max-height:560px){.audio-settings{gap:4px;margin:5px auto 7px;padding:6px 10px}.audio-settings>strong{font-size:12px}.music-choices .choice{padding:2px 8px}.audio-slider{font-size:11px}.quick-panel .choices{margin:6px 0}}

/* v28: setup action hierarchy */
.setup-start-row{display:flex;justify-content:center;margin:20px 0 10px}
.setup-start{min-width:min(320px,100%);padding:16px 42px;border:3px solid #a45e2f;border-radius:999px;background:linear-gradient(180deg,#ffe899,#ffc45c);box-shadow:0 6px 0 #b87939,0 12px 24px #bd8b4d40;color:#713b20;font-size:clamp(20px,2.5vw,25px);font-weight:900;letter-spacing:.08em}
.setup-start span{margin-left:6px;font-size:.85em}
.setup-start:hover:not(:disabled){background:linear-gradient(180deg,#fff0b2,#ffd071)}
.setup-start:focus-visible{outline:3px solid #3d8654;outline-offset:5px}
.setup-start:active{transform:translateY(4px);box-shadow:0 2px 0 #b87939}
.setup-help-row{text-align:center}
.setup-help-row .choice{padding:7px 15px;min-width:0;font-size:13px}

/* v29: persistent player-turn cue */
.turn-reminder{position:absolute;z-index:7;left:50%;top:-16px;transform:translateX(-50%);padding:5px 16px;border:2px solid #d99f38;border-radius:100px;background:#fff1b7;box-shadow:0 3px 0 #bd8841,0 0 16px #ffe17c;color:#70431f;font-size:15px;font-weight:900;white-space:nowrap;pointer-events:none;animation:turn-reminder-glow 1s ease-in-out infinite alternate}
@keyframes turn-reminder-glow{to{box-shadow:0 3px 0 #bd8841,0 0 26px #ffc64f;background:#ffe393}}
@media(orientation:landscape) and (max-height:560px){.turn-reminder{top:-9px;padding:2px 9px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.turn-reminder{animation:none}}

/* v30: hand feedback, lack cue, and ordered settlement reveal. */
.seat.bottom .tile[data-tile-index]{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.seat.bottom .tile[data-tile-index]:hover{transform:translateY(-9px);box-shadow:2px 4px 0 #bd914c,0 0 0 3px #ffe59a,0 0 15px #ffd568;filter:brightness(1.08)}
.seat.bottom .tile[data-tile-index].selected{transform:translateY(-12px);box-shadow:2px 4px 0 #bd914c,0 0 0 4px #ffe18a,0 0 18px #ffc94f}
.lack-warning{position:absolute;z-index:8;padding:5px 13px;border:2px solid #d39135;border-radius:12px;background:#fff0b5;box-shadow:0 3px 0 #ad7840,0 0 14px #ffd26e;color:#784720;font-size:13px;font-weight:900;white-space:nowrap;pointer-events:none;animation:lack-warning-glow .8s ease-in-out infinite alternate}
.lack-warning:after{content:'';position:absolute;left:19px;bottom:-9px;width:12px;height:12px;transform:rotate(45deg);border-right:2px solid #d39135;border-bottom:2px solid #d39135;background:#fff0b5}
@keyframes lack-warning-glow{to{box-shadow:0 3px 0 #ad7840,0 0 23px #ffc547}}
.winner-result.settling .winner-fan{opacity:0;animation:fan-reveal .42s var(--fan-delay,.45s) both}
.winner-result.settling .winner-fan-total{opacity:0;animation:winner-pop .5s var(--total-delay) both}
.winner-result.settling .winner-points{opacity:0;animation:winner-pop .58s var(--points-delay) both}
.winner-result.settling .winner-points.burst:before{animation:burst-flash .7s var(--points-delay) both}
.winner-result.settling .winner-gain{opacity:0;animation:winner-appear .55s var(--gain-delay) both}
@keyframes fan-reveal{from{opacity:0;clip-path:inset(0 100% 0 0 round 10px);filter:brightness(1.5)}to{opacity:1;clip-path:inset(0 0 0 0 round 10px);filter:brightness(1)}}
@media(orientation:landscape) and (max-height:560px){.lack-warning{padding:2px 8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.lack-warning,.winner-result.settling .winner-fan,.winner-result.settling .winner-fan-total,.winner-result.settling .winner-points,.winner-result.settling .winner-points.burst:before,.winner-result.settling .winner-gain{animation:none;opacity:1}}

/* 2026-11-05 v32: soften frame hierarchy while preserving character art and colors. */
.board{border-color:#9db783;box-shadow:inset 0 0 0 6px #f7f9df,0 10px 26px #78946535}
.board.my-turn .seat.bottom{box-shadow:0 0 0 2px #f2c65f,0 0 14px #ffe68a;animation:none}
.board.my-turn .hand-frame{filter:drop-shadow(0 0 3px #ffe287) brightness(1.02)}
.quick-panel{border:2px solid #aa947d;background:#fffdf4fa;box-shadow:0 12px 28px #3b473c55}
.quick-panel .audio-settings{border:0;background:#f5f9ed;box-shadow:inset 0 0 0 1px #dce8ce}
.winner-sheet{border:2px solid #d7b77e;box-shadow:0 9px 22px #304b3755}
.winner-fan{border-color:#f1ddbb;box-shadow:0 1px 0 #e9d6b7}
.winner-score>span{border-color:#e2c7a1;box-shadow:none}
.winner-gain{padding:2px 10px;border-radius:100px;background:#fff0c7;color:#b65a24;font-size:clamp(19px,3vw,39px);text-shadow:0 1px 0 #fff9ec}
@media(orientation:landscape) and (max-height:560px){.winner-gain{padding:1px 7px;font-size:clamp(16px,2.7vw,28px)}}
@media(orientation:landscape) and (max-height:390px){.quick-panel .choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:5px 0}.quick-panel .choices .choice{min-width:0;padding:5px 3px;font-size:11px}.quick-panel .settings-footer button{padding:5px 11px;font-size:13px}}

/* 2026-11-05 v33: light storybook ornaments and full-body victory art. */
.board-flower{position:absolute;z-index:1;color:#83b686;font-size:25px;line-height:1;opacity:.38;pointer-events:none;text-shadow:0 2px 0 #fffbe6}
.flower-nw{top:13%;left:4%}.flower-ne{top:13%;right:4%}.flower-sw{bottom:31%;left:7%}.flower-se{bottom:31%;right:7%}
.seat.bottom::after{content:'✧';position:absolute;z-index:1;top:9px;right:8%;color:var(--seat-ink);font-size:23px;opacity:.5;pointer-events:none}
.phase-panel:not(.exchange-reveal)::before,.phase-panel:not(.exchange-reveal)::after{position:absolute;top:10px;color:#a6c592;font-size:18px;line-height:1;pointer-events:none}
.phase-panel:not(.exchange-reveal)::before{content:'✿';left:15px}.phase-panel:not(.exchange-reveal)::after{content:'✧';right:15px}
.winner-sheet{background:radial-gradient(circle at 16% 45%,#fffbed 0,#fff8e9 52%,#fff3dd 100%)}
.winner-profile{position:relative;isolation:isolate}
.winner-profile::before{content:'';position:absolute;z-index:-1;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6d3 28%,#fff0be88 52%,transparent 72%);pointer-events:none}
.winner-profile::after{content:'✧';position:absolute;z-index:1;top:8%;right:7%;color:#e6ad50;font-size:clamp(18px,2.8vw,32px);pointer-events:none}
.winner-celebration{display:flex;align-items:center;justify-content:center;width:100%;height:84%;min-height:0;filter:drop-shadow(0 5px 4px #8f765838)}
.winner-celebration img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.winner-profile h2{margin:-4px 0 0}
.winner-fan{border-radius:9px;background:#fffdf6}
.winner-fan-total{background:#fff1cf;box-shadow:0 2px 0 #e0ba7c}
@media(orientation:landscape) and (max-height:560px){.board-flower{font-size:16px}.seat.bottom::after{top:4px;font-size:15px}.phase-panel:not(.exchange-reveal)::before,.phase-panel:not(.exchange-reveal)::after{top:5px;font-size:13px}.winner-celebration{height:81%}.winner-profile::after{top:4%;right:0}}

/* 2026-11-05 v34: compact payer and one changing score. */
.winner-celebration{height:100%}
.winner-heading .winner-payer{gap:5px;padding:2px 10px 2px 3px}
.winner-payer strong{color:#b65838;font-size:clamp(13px,1.8vw,21px);font-variant-numeric:tabular-nums}
.winner-score{gap:2%;font-variant-numeric:tabular-nums}
.winner-score-value{min-width:3ch;color:#267757;font-size:clamp(22px,3.4vw,43px);line-height:1;text-align:right;text-shadow:0 1px 0 #fffdf3}
.winner-score-unit{color:#267757;font-size:clamp(12px,1.4vw,18px);font-weight:900}
.winner-score>span.winner-score-unit{min-width:0;padding:0;border:0;background:transparent;box-shadow:none}
.winner-score .winner-gain{min-width:24%;margin-left:4%}
@media(orientation:landscape) and (max-height:560px){.winner-heading .winner-payer{padding:1px 7px 1px 2px}.winner-payer strong{font-size:13px}.winner-score-value{font-size:clamp(18px,3.3vw,28px)}.winner-score-unit{font-size:11px}.winner-score .winner-gain{margin-left:2%}}

/* 2026-11-05 v35: quiet corner stickers, seat color washes, and brief play accents. */
.board:before{display:none}
.board-flower{display:grid;place-items:center;width:31px;height:30px;border:2px solid #ffffffa8;border-radius:47% 53% 45% 55%;background:#fffbe7a6;box-shadow:0 2px 0 #94b7866b;opacity:.68;font-size:20px;transform:rotate(-13deg)}
.flower-nw{top:13%;left:4%;color:#73a378}.flower-ne{top:13%;right:4%;color:#7ca9c8;transform:rotate(15deg) scale(.91)}.flower-sw{bottom:31%;left:7%;color:#e1b35f;transform:rotate(9deg) scale(.86)}.flower-se{bottom:31%;right:7%;color:#cf9ab5;transform:rotate(-17deg) scale(.94)}
.board-sprig{position:absolute;z-index:1;color:#8fb88b;opacity:.38;font-size:21px;line-height:1;pointer-events:none;text-shadow:0 1px #fff9e7}.sprig-n{left:26%;top:5%;transform:rotate(-8deg)}.sprig-w{left:2%;top:45%;font-size:13px;transform:rotate(25deg)}.sprig-e{right:2%;top:43%;font-size:22px;transform:rotate(-10deg)}
.seat:not(.bottom) .seat-identity:before{content:'';position:absolute;z-index:-1;inset:-8px;border-radius:24px;background:radial-gradient(ellipse,var(--seat-wash) 30%,transparent 76%);filter:blur(5px);pointer-events:none}
.seat:not(.bottom) .seat-identity{isolation:isolate}
.seat.bottom:before{content:'✿  ✧';position:absolute;z-index:1;top:8px;left:22%;color:var(--seat-ink);font-size:16px;letter-spacing:12px;opacity:.42;pointer-events:none}
.seat.bottom::after{content:'✧  ✿';right:7%;font-size:18px;letter-spacing:9px;opacity:.42}
.seat.bottom .tile[data-tile-index].selected:after{content:'';position:absolute;z-index:-1;left:-16%;right:-16%;bottom:-9px;height:16px;border-radius:50%;background:#ffe5a5c2;filter:blur(5px);pointer-events:none}
.seat.bottom .hand-row{position:relative}
.seat.bottom .lack-flag:after{content:'';position:absolute;left:20%;right:20%;bottom:-7px;height:3px;border-radius:3px;background:#fff7aa;box-shadow:0 0 7px #ffdf6e;pointer-events:none}
.river-item.entering .discard-bloom{position:absolute;z-index:4;left:50%;top:50%;color:#fff5bb;font-size:18px;text-shadow:0 0 8px #e9b85d;pointer-events:none;animation:v35-discard-bloom .8s ease-out both}
.river-item.entering:has(.discard-bloom):before{content:'';position:absolute;z-index:2;inset:-4px;border:2px solid #fff4b88c;border-radius:50%;pointer-events:none;animation:v35-discard-ring .8s ease-out both}
@keyframes v35-discard-bloom{from{opacity:1;transform:translate(-50%,-50%) scale(.45)}to{opacity:0;transform:translate(12px,-29px) scale(1.3)}}
@keyframes v35-discard-ring{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.8)}}
.seat:has(.draw-chip) .draw-chip:after{content:'✧ ✦';position:absolute;left:50%;top:-9px;color:#fff2b3;font-size:13px;white-space:nowrap;pointer-events:none;text-shadow:0 0 5px #eebd55;animation:v35-draw-stars .55s ease-out both}
@keyframes v35-draw-stars{from{opacity:0;transform:translate(-50%,9px)}30%{opacity:1}to{opacity:0;transform:translate(-50%,-14px)}}
@media(orientation:landscape) and (max-height:560px){.board-flower{width:18px;height:18px;font-size:12px;border-width:1px}.board-sprig{font-size:12px}.sprig-n{top:4%}.sprig-w{font-size:9px}.sprig-e{font-size:13px}.seat.bottom:before,.seat.bottom::after{top:3px;font-size:10px;letter-spacing:5px}.seat.bottom:before{left:19%}}
@media(prefers-reduced-motion:reduce){.river-item.entering .discard-bloom,.river-item.entering:has(.discard-bloom):before,.seat:has(.draw-chip) .draw-chip:after{animation:none;display:none}}

/* 2026-11-06 v37: guide phones into the existing landscape game layout. */
#landscape-guide{display:none}
@media(max-width:700px) and (orientation:portrait){
  body.game-active{overflow:hidden}
  body.game-active #landscape-guide{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));min-height:100dvh;background:radial-gradient(circle at 50% 35%,#f5fbe7,#d6edbe 78%);overflow:auto}
  .landscape-guide-card{width:min(100%,370px);padding:26px 22px;text-align:center;border:3px solid #a9c494;border-radius:30px;background:#fffdf1;box-shadow:0 12px 30px #6c8d6540}
  .landscape-guide-art{display:block;margin-bottom:12px;color:#76a883;font-size:44px;letter-spacing:.1em;line-height:1.2}
  .landscape-guide-card h1{margin:0 0 10px;color:#3b6950;font-size:24px}
  .landscape-guide-card p{margin:0 0 20px;color:#5d6d56;font-size:15px;line-height:1.65}
  .landscape-guide-card button{min-height:48px;padding:10px 22px}
  .landscape-guide-card small{display:block;margin-top:14px;color:#6a765e;font-size:12px;line-height:1.5}
}
@media(orientation:landscape) and (max-width:740px) and (max-height:560px){
  .board{grid-template-columns:minmax(84px,.7fr) minmax(320px,4fr) minmax(84px,.7fr)}
  .seat.bottom .hand-row .tile{width:clamp(29px,4.7vw,35px)}
  .seat.bottom .hand-holder{width:calc(14 * clamp(29px,4.7vw,35px) + 52px)}
}
@media(orientation:landscape) and (max-height:390px){
  body.game-active .app-shell{height:100dvh;min-height:0;overflow:hidden}
  body.game-active .board{min-height:0;grid-template-rows:42px minmax(120px,1fr) 80px}
  body.game-active .center-area{grid-template-rows:40px minmax(42px,1fr) 40px}
}

/* 2026-11-06 v38: mobile controls, tile labels, and one persistent wall notice. */
.topbar{padding-inline-start:max(12px,env(safe-area-inset-left));padding-inline-end:max(12px,env(safe-area-inset-right))}
.seat.bottom .hand-row .tile{position:relative;z-index:1}
.seat.bottom .hand-row .tile.drawn,.seat.bottom .hand-row .tile.selected{z-index:3}
.seat.bottom .hand-row .tile.drawn::after{top:2px;left:2px;right:auto;z-index:5;line-height:1.1}
.seat.bottom .tile.lack-tile .lack-mark{top:auto;bottom:2px;right:2px;z-index:5;line-height:1.1}
.reaction-dock,.reaction-dock.from-1{left:auto;right:12px;max-width:calc(100% - 24px)}
.reaction-dock .actionbar{flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.reaction-dock .actionbar button{flex:0 1 auto;white-space:nowrap}
#wall-notice-overlay[hidden]{display:none}
@media(orientation:landscape) and (max-height:560px){
  .reaction-dock,.reaction-dock.from-1{right:8px;max-width:calc(100% - 16px);padding:3px 4px}
  .reaction-dock .actionbar{gap:3px}
  .reaction-dock .actionbar button{min-width:40px;min-height:38px;padding:3px 5px;font-size:13px}
}

/* 2026-11-06 v39: reveal raised tiles, soften the single-listening cue, and center mobile controls. */
.seat.bottom .hand-row .tile.ting-glow{filter:drop-shadow(0 0 5px #f7d879) drop-shadow(0 0 9px #ffe6a4)}
.seat.bottom .hand-row .tile.ting-glow:not(.selected){box-shadow:0 0 0 2px #f6d57a99;border-radius:8px}
@media(orientation:landscape) and (max-height:560px){
  .seat.bottom .hand-row{padding-top:12px}
  .seat.bottom .tile[data-tile-index].selected{transform:translateY(-8px)}
  .reaction-dock,.reaction-dock.from-1{right:clamp(72px,15vw,125px);max-width:calc(100% - 100px)}
  .topbar{padding-inline-end:max(54px,env(safe-area-inset-right))}
  .settings-trigger{min-width:72px;min-height:30px;padding:3px 8px;font-size:11px;background:#fff6d9;border:2px solid #8fb786;box-shadow:0 3px 0 #92b284}
}

/* 2026-11-06 v40: breathing listening halo and storybook action controls. */
.seat.bottom .hand-row .tile.ting-glow:not(.selected){box-shadow:none;filter:none}
.seat.bottom .hand-row .tile.ting-glow:not(.selected)::before{content:'';position:absolute;z-index:-1;inset:-5px;border:2px solid #f6d274a8;border-radius:10px;background:radial-gradient(ellipse,#ffe8a138 34%,transparent 72%);box-shadow:0 0 7px 2px #f8d27983,0 0 15px 3px #ffe5a64d;pointer-events:none;animation:ting-breath 2.3s ease-in-out infinite}
@keyframes ting-breath{0%,100%{opacity:.24;transform:scale(.96)}50%{opacity:.75;transform:scale(1.025)}}
.settings-trigger{min-width:64px;padding:5px 10px;font-size:14px;font-weight:900;letter-spacing:.02em;background:linear-gradient(140deg,#fffdf2,#f2f9e5);border:2px solid #8fb786;box-shadow:inset 0 1px 0 #fff,0 3px 0 #92b284}
.reaction-dock{border:2px solid #c9b883;border-radius:19px;background:linear-gradient(145deg,#fffdf1f5,#edf7ddf2);box-shadow:inset 0 0 0 2px #ffffffaa,0 4px 0 #a8a77a,0 8px 16px #4e715a54}
.reaction-dock::before,.reaction-dock::after{position:absolute;top:50%;color:#c6a76c;font-size:17px;line-height:1;pointer-events:none;transform:translateY(-50%)}
.reaction-dock::before{content:'✿';left:-10px;text-shadow:0 0 0 #fff,1px 1px 0 #fff}
.reaction-dock::after{content:'✧';right:-9px;text-shadow:1px 1px 0 #fff}
.reaction-dock .actionbar button{border-color:#a48d70;border-radius:13px;box-shadow:inset 0 2px 0 #ffffffa8,0 3px 0 #a99174,0 5px 7px #65805c45}
.reaction-dock .actionbar .hu{background:linear-gradient(#ffe7e8,#ffacbe)}
.reaction-dock .actionbar .gang{background:linear-gradient(#e8fff3,#a8e3d1)}
.reaction-dock .actionbar .peng{background:linear-gradient(#f1ffe9,#afe1a6)}
.reaction-dock .actionbar .pass{background:linear-gradient(#fffef4,#eee8d8)}
@media(orientation:landscape) and (max-height:560px){
  .settings-trigger{min-width:64px;min-height:30px;padding:3px 7px;font-size:13px}
  .reaction-dock{padding:4px 7px}
  .reaction-dock::before,.reaction-dock::after{font-size:13px}
  .reaction-dock .actionbar button{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.seat.bottom .hand-row .tile.ting-glow:not(.selected)::before{animation:none;opacity:.55}}

/* 2026-11-06 v41: start-of-round hand reveal and broader listening glow. */
.seat.bottom .hand-row .tile.ting-glow:not(.selected)::before{inset:-8px;border:3px solid #e9b75ba8;border-radius:12px;background:radial-gradient(ellipse,#ffd47672 20%,#ffe6a44d 58%,transparent 78%);box-shadow:0 0 10px 4px #eebd6194,0 0 20px 7px #ffe3a460}
@keyframes ting-breath{0%,100%{opacity:.38;transform:scale(.95)}50%{opacity:.88;transform:scale(1.045)}}
body.opening .seat.bottom .hand-row{perspective:700px}
.opening-tile{position:relative;flex:none;width:clamp(35px,3.7vw,52px);height:clamp(49px,5.2vw,70px);transform-style:preserve-3d;animation:opening-tile-rise 1.25s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--tile-order) * 24ms)}
.opening-tile.dealer-extra{margin-left:17px}
.opening-back,.opening-face{position:absolute;inset:0;display:block;backface-visibility:hidden}
.opening-face{transform:rotateY(0)}
.opening-back{transform:rotateY(180deg);border:2px solid #4a907f;border-radius:7px;background:#74b9a9 url('./assets/tile-back-north-v2.png') center/cover;box-shadow:2px 3px 0 #3e8e7e,0 5px 8px #4f71595c}
.seat.bottom .hand-row .opening-tile .tile{width:100%;height:100%}
@keyframes opening-tile-rise{0%,23%{transform:translateY(8px) rotateX(68deg) rotateY(180deg)}68%{transform:translateY(-7px) rotateX(0) rotateY(0)}100%{transform:translateY(0) rotateX(0) rotateY(0)}}
body.opening .seat:not(.bottom) .backs{animation:opening-rack 1.4s ease-out both}
@keyframes opening-rack{from{opacity:.55;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(orientation:landscape) and (max-height:560px){.opening-tile{width:clamp(29px,4.7vw,35px);height:49px}}
@media(orientation:landscape) and (max-height:390px){.opening-tile{height:47px}}
@media(prefers-reduced-motion:reduce){.opening-tile,body.opening .seat:not(.bottom) .backs{animation:none}.opening-tile{transform:none}}