:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#e8eadd;background:#102c25;font-size:14px;--gold:#e3c183;--tile:48px;--small:25px;--muted:#b5c6af;--line:#d5d8b42b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#234c3e,#102c25 70%);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #aabd9255;background:#385a43;color:#f3f1d8;border-radius:8px;padding:9px 13px;transition:transform .15s,background .15s}button:hover:not(:disabled){background:#4a7052;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--gold);color:#233d2c;border-color:#edd298;font-weight:700}.primary:hover:not(:disabled){background:#f1d7a2}a{color:#dec48d;text-decoration:none}header{max-width:1500px;margin:auto;padding:19px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;align-items:center;gap:12px;color:#eeead1;font-family:Georgia,"SimSun",serif;font-size:23px;letter-spacing:2px}.brand small{display:block;font:10px "Microsoft YaHei",sans-serif;color:var(--muted);letter-spacing:1px;margin-top:6px}.brand-tile{display:grid;place-items:center;background:#f5f0d7;color:#286046;border-radius:6px;width:35px;height:45px;font-size:26px;box-shadow:0 3px #8d9e77}.header-actions{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}main{max-width:1460px;margin:auto;padding:20px 28px 35px}.home{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;max-width:1100px;margin:30px auto}.intro{padding:50px 0}.eyebrow{letter-spacing:3px;color:#beceae;font-size:12px}h1{font:60px/1.2 Georgia,"SimSun",serif;letter-spacing:7px;color:#efdfb1;margin:27px 0}p{color:var(--muted);line-height:1.9}.hero-tiles{display:flex;gap:12px;margin:30px 0 40px;transform:rotate(-5deg);max-width:300px}.hero-tiles .tile{width:60px}.card{border:1px solid var(--line);border-radius:16px;background:#1f4035;box-shadow:0 12px 40px #061b1740;padding:24px}h2{font:25px Georgia,"SimSun",serif;letter-spacing:2px;margin:0 0 19px}h3{font-size:13px;font-weight:500;color:var(--gold);margin:18px 0 12px}.identity,.social-settings{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}.identity{margin-bottom:22px}label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c5d1b9}input,select{width:100%;border:1px solid #a7b59244;background:#14392c;color:#f2eed6;padding:9px 10px;border-radius:7px;outline:none;min-height:38px}input:focus,select:focus{border-color:var(--gold)}.section-title{display:flex;justify-content:space-between;color:#ede9cc;font-size:13px;margin:18px 0 13px}.section-title span{font-size:11px;color:var(--muted)}.setting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}details{border-top:1px solid var(--line);margin-top:18px;padding:14px 0}summary{cursor:pointer;font-size:12px;color:var(--gold)}details .setting-grid{margin-top:15px}.start-buttons{display:flex;gap:12px;margin-top:22px}.start-buttons button{flex:1;padding:12px}.join-row{display:flex;gap:12px;margin-top:12px}.join-row input{flex:1;min-width:0}.text-button{background:none;border:0;font-size:12px;color:var(--gold);padding:12px 0}.room-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:12px}.room-bar strong{font-size:18px;letter-spacing:2px}.room-bar span{display:block;color:var(--muted);font-size:11px;margin-top:6px}.room-controls{display:flex;gap:7px}.room-controls button{font-size:11px;padding:7px 10px}.lobby-players{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:26px 0}.lobby-seat{border:1px dashed #aabb9166;border-radius:12px;padding:25px 15px;text-align:center}.lobby-seat strong{display:block;font-size:17px;margin-bottom:12px}.lobby-actions{display:flex;gap:12px}.table-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px}.table{position:relative;min-height:670px;display:grid;grid-template-rows:95px minmax(280px,1fr) auto;border:8px solid #75694c;border-radius:28px;background:radial-gradient(ellipse,#356349,#214834 85%);box-shadow:inset 0 0 0 2px #a4986a55,0 18px 35px #0b221b80;overflow:hidden}.opponent{font-size:12px;text-align:center;z-index:1}.opponent.top{grid-row:1;justify-self:center;padding-top:18px;width:70%}.opponent.left,.opponent.right{position:absolute;top:39%;width:110px;transform:translateY(-50%)}.opponent.left{left:15px}.opponent.right{right:15px}.player-label{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}.player-label strong{font-size:13px}.avatar{display:inline-grid;place-items:center;width:29px;height:29px;background:#365a44;border:1px solid #cdca9866;border-radius:8px;color:#ebcd8e}.active-player .avatar{outline:2px solid var(--gold);outline-offset:2px}.badge{font-size:10px;padding:2px 5px;background:#d9be7255;border-radius:4px;color:#f8df9b}.badge.bad{color:#ffcdbb;background:#6c443a}.flowers{font-size:10px;color:#becfae;line-height:1.7}.backs{display:flex;gap:2px;justify-content:center;margin:7px 0}.back{width:13px;height:18px;background:linear-gradient(145deg,#759a62,#487347);border:1px solid #a7b38c66;border-radius:3px}.melds{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.meld{display:flex;gap:2px;align-items:center}.meld .tile{width:19px}.tile{display:inline-block;flex-shrink:0;position:relative;aspect-ratio:3/4;border:1px solid #e6e4cf;border-radius:5px;background:linear-gradient(145deg,#fffef0,#ececd6);box-shadow:0 4px 0 #d0d6b8,0 5px 0 #47634e,0 6px 7px #0d2c2355;color:#205c43;padding:0;width:var(--tile);vertical-align:middle}.tile svg{width:100%;height:100%;display:block;pointer-events:none}.tile.wild:after{content:"搭";position:absolute;right:1px;top:1px;background:#b29143;color:#fff6d6;font-size:8px;padding:1px;border-radius:2px}.tile.back{border-color:#aec591;background:linear-gradient(#7b9d65,#426b42)}.playfield{position:relative;grid-row:2;width:calc(100% - 250px);max-width:530px;min-width:280px;justify-self:center;display:grid;grid-template-columns:1fr 105px 1fr;grid-template-rows:1fr 105px 1fr;align-items:center;justify-items:center}.center{grid-area:2/2;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #c6d8a64d;border-radius:15px;background:#1b3d2fdd;width:110px;min-height:124px;padding:9px;z-index:2}.center>strong{font:30px Georgia,serif;color:#eddfb8}.center>span{font-size:8px;color:var(--muted);letter-spacing:2px}.center>div{font-size:10px;color:#d2d9b7}.center #indicator{display:flex;gap:4px;align-items:center;margin-top:6px}.center .tile{width:22px}.center #lastDiscard{margin-top:6px;color:#f0cb7f;max-width:100%}.river{display:grid;grid-template-columns:repeat(6,var(--small));gap:3px;justify-content:center}.river .tile{width:var(--small);border-radius:3px}.river.top{grid-area:1/2}.river.self{grid-area:3/2}.river.left{grid-area:2/1;transform:rotate(90deg)}.river.right{grid-area:2/3;transform:rotate(-90deg)}.river .recent{outline:2px solid #efd087;outline-offset:1px}.self-area{grid-row:3;border-top:1px solid var(--line);padding:13px 20px 20px;background:#193f2e80;z-index:2}.self-info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.self-info strong{color:#f4e2a8}.self-melds{display:flex;gap:12px;justify-content:flex-end;margin:5px 0;min-height:7px}.self-melds .tile{width:25px}.hand{display:flex;justify-content:center;align-items:flex-end;gap:4px;padding:16px 0 11px;min-height:90px;flex-wrap:wrap}.hand .tile{cursor:pointer;transition:transform .2s}.hand .tile:hover:not(:disabled){background:linear-gradient(145deg,#fffef0,#ececd6);transform:translateY(-5px)}.hand .tile.selected{transform:translateY(-12px);outline:2px solid #edca84;outline-offset:1px}.hand .tile.drawn{margin-left:9px}.hand .tile.drawn:before{content:"新摸";position:absolute;top:-18px;font-size:9px;color:#eacf95;left:0;right:0}.hand .tile:disabled{opacity:1;cursor:default}.actionbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px}.actionbar>div:first-child{font-size:11px;color:var(--muted)}#countdown{display:inline-block;margin-left:8px;color:#efd095;font-size:19px}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions button{min-width:57px}.sidebar{padding:15px}.score-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}.negative{color:#edb5a8}.history{max-height:365px;overflow:auto;line-height:1.9;font-size:11px;color:var(--muted)}.sidebar>button{width:100%;font-size:11px;margin-top:15px}.social-panel{margin-top:18px;padding:16px 22px}.social-panel .section-title{margin-top:0}.fun-buttons{display:flex;gap:7px;flex-wrap:wrap}.fun-buttons button{font-size:11px;padding:7px 11px}.record-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--muted)}.record-controls audio{height:32px;max-width:260px}.chats{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;max-height:120px;overflow:auto}.chat{font-size:11px;color:#d2d9ba;background:#16352c;padding:8px 11px;border-radius:7px}.chat button{font-size:10px;padding:3px 7px;margin-left:8px}.notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#172f27f0;color:#ffdfa5;padding:12px 22px;border:1px solid #d8ba7366;border-radius:10px;max-width:90vw;z-index:30;box-shadow:0 4px 20px #0005;font-size:12px}.notice:empty{display:none}dialog{border:1px solid #bbbc9055;border-radius:16px;max-width:min(700px,94vw);width:620px;background:#1f4035;color:#eee9d0;padding:23px;max-height:90vh}dialog::backdrop{background:#061b17a8;backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-head h2{margin:0}.modal-head button{padding:5px 9px}.choice{display:block;width:100%;text-align:left;margin:9px 0;padding:12px}.choice .tile{width:30px;margin-right:3px}.choice small{display:block;color:#f3c7a7;margin-top:7px}.result-line{margin:12px 0;font-size:12px;line-height:1.8}.result-line .tile{width:28px;margin:2px}.result-group{display:inline-flex;margin-right:9px;gap:2px}.payments{font-size:12px;line-height:2}.rule-summary{font-size:12px;line-height:2.2}.reduce-motion *{transition:none!important;animation:none!important}.tile-new{animation:tileAppear .3s ease-out}@keyframes tileAppear{from{transform:translateY(-10px);opacity:.6}to{transform:translateY(0);opacity:1}}[hidden]{display:none!important}
/* 侧栏与牌桌等高，动态列表占满剩余空间，内容不反向撑高桌面。 */
.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;contain:size;overflow:hidden}
.sidebar>h3,.sidebar>#scoreboard,.sidebar>button{flex-shrink:0}
.sidebar>.history{flex:1 1 0;min-height:0;max-height:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6d8e67 #1f4035}
/* 模型状态与响应组合选择。 */
.model-setup-notice,.ai-fallback-notice{padding:11px 14px;border:1px solid #d7ba7066;border-radius:10px;background:#493d2638;color:#f1d299;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.ai-fallback-notice{margin:0 0 14px}.ai-takeover{display:block;max-width:190px;margin-top:3px;color:#efc089;font-size:10px;line-height:1.45;overflow-wrap:anywhere;white-space:normal}.score-row>span{min-width:0}.score-row .ai-takeover{max-width:100%}
.opponent.top .ai-takeover{margin-left:auto;margin-right:auto}
@media(max-width:760px){.ai-takeover{font-size:9px}.opponent.left .ai-takeover,.opponent.right .ai-takeover{max-width:73px}.model-setup-notice,.ai-fallback-notice{font-size:11px;padding:9px 11px}}
.response-countdown{color:#ffdf95;font-size:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
.choice-timing{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#d8ddc9}.choice-timing .response-countdown{font-size:22px}
@media(min-width:1400px){:root{--tile:54px}.table{min-height:700px}}
@media(max-width:1100px){main{padding:18px}.table-layout{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.table{min-height:650px}.home{gap:30px}.intro{padding-left:15px}}
@media(max-width:760px){header{padding:13px 15px}.brand{font-size:19px}.brand small{font-size:8px}.header-actions{gap:8px}.header-actions button{font-size:10px;padding:6px}.home{grid-template-columns:1fr;margin-top:0;gap:0}.intro{padding:20px 10px}.intro h1{font-size:36px;display:inline;line-height:1.5}.intro h1 br{display:none}.intro p,.hero-tiles,.intro>a{display:none}.eyebrow{display:block;font-size:9px;letter-spacing:2px;margin-bottom:9px}.card{padding:18px}.room-bar{align-items:flex-start}.room-bar strong{font-size:15px}.room-controls{gap:4px;flex-wrap:wrap;justify-content:flex-end}.room-controls button{font-size:10px;padding:6px 8px}.lobby-players{grid-template-columns:repeat(2,1fr)}.table{min-height:640px;grid-template-rows:75px minmax(300px,1fr) auto;border-width:5px;border-radius:20px}.opponent.top{padding-top:10px;width:90%}.opponent.left,.opponent.right{width:73px;top:36%}.opponent.left{left:5px}.opponent.right{right:5px}.opponent .avatar{width:24px;height:24px;font-size:11px}.opponent .player-label{gap:3px}.opponent .player-label strong{font-size:10px;max-width:70px;overflow:hidden;text-overflow:ellipsis}.backs .back{width:8px;height:12px}.opponent .meld .tile{width:13px}.opponent .flowers{font-size:9px}.opponent .player-label>span:not(.avatar):not(.badge){font-size:9px}.playfield{width:calc(100% - 134px);min-width:175px;grid-template-columns:1fr 72px 1fr;grid-template-rows:1fr 90px 1fr;--small:18px}.center{width:78px;min-height:107px;border-radius:12px;padding:7px}.center>strong{font-size:24px}.river{grid-template-columns:repeat(4,var(--small));gap:2px}.self-area{padding:10px 10px 15px}.self-info{font-size:10px}.self-info .flowers{font-size:9px;max-width:52%}.self-melds .tile{width:21px}.hand{max-width:460px;gap:4px;padding-top:19px;min-height:86px;--tile:39px;margin:auto}.hand .tile.drawn{margin-left:0}.actionbar{align-items:flex-start}.actions{gap:5px;justify-content:flex-end}.actions button{min-width:43px;padding:8px;font-size:12px}.actionbar>div:first-child{font-size:10px;max-width:44%}.social-panel{padding:14px}.setup .setting-grid{gap:9px}.setup label{font-size:11px}}
@media(max-width:380px){main{padding:10px}.brand small{display:none}.header-actions>span{font-size:9px}.hand{--tile:35px;gap:3px}.table{min-height:590px;grid-template-rows:69px minmax(250px,1fr) auto}.setting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.playfield{--small:16px}.self-info .flowers{max-width:47%}}
@media(max-height:560px) and (min-width:600px){header{padding:7px 15px}.brand small{display:none}.brand-tile{height:32px;width:26px;font-size:22px}.brand{font-size:18px}main{padding:9px 14px}.room-bar{margin-bottom:8px}.room-bar span{display:none}.table{min-height:285px;grid-template-rows:45px minmax(108px,1fr) auto;border-width:4px;border-radius:16px}.opponent.top{padding-top:5px}.opponent.top .backs,.opponent.top .flowers{display:none}.opponent.left,.opponent.right{top:34%;width:90px}.playfield{min-height:104px;--small:15px;grid-template-rows:32px 70px 32px;grid-template-columns:1fr 77px 1fr;max-width:480px}.center{width:81px;min-height:72px;padding:4px}.center>strong{font-size:19px}.center>span,#lastDiscard{display:none}.center #indicator{margin-top:2px}.center .tile{width:16px}.river{grid-template-columns:repeat(6,var(--small));gap:2px}.self-area{padding:6px 12px 9px}.self-info{font-size:10px}.self-melds{position:absolute;right:20px;bottom:89px}.hand{--tile:32px;gap:3px;padding:14px 0 8px;min-height:65px;max-width:none;flex-wrap:nowrap}.hand .tile.drawn{margin-left:8px}.actionbar{min-height:29px}.actions button{padding:5px 9px;font-size:11px;min-width:43px}.social-panel{margin-top:10px}.table-layout{gap:0}.sidebar{display:none}.hand .tile.drawn:before{font-size:8px;top:-13px}}
@media(max-width:760px) and (orientation:portrait){.opponent.left,.opponent.right{top:18%}.room-controls{max-width:53%}}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){header{padding:9px 12px}.brand{font-size:17px}.brand small{display:none}.brand-tile{height:34px;width:26px;font-size:23px}.header-actions{gap:5px}.header-actions>span{font-size:9px}main{padding:9px 10px}.room-bar{margin-bottom:8px}.room-bar strong{font-size:12px;letter-spacing:1px}.room-bar span{font-size:9px;max-width:140px}.room-controls{gap:3px}.room-controls button{padding:5px 7px;font-size:9px}.table{min-height:0;grid-template-rows:48px minmax(150px,1fr) auto}.opponent.top{padding-top:6px}.opponent .backs{display:none}.opponent.left,.opponent.right{top:23%;width:61px}.opponent .player-label strong{font-size:9px}.opponent .avatar{width:20px;height:20px}.opponent .flowers{font-size:8px}.opponent .meld .tile{width:11px}.playfield{width:calc(100% - 123px);min-width:145px;grid-template-columns:1fr 70px 1fr;grid-template-rows:1fr 80px 1fr;--small:15px}.river{grid-template-columns:repeat(4,var(--small))}.center{width:73px;min-height:88px;padding:5px}.center>strong{font-size:21px}.center #lastDiscard{font-size:8px}.center .tile{width:18px}.self-area{padding:7px 8px 9px}.self-info{font-size:9px}.self-melds{min-height:0;margin:3px 0}.self-melds .tile{width:18px}.hand{--tile:34px;gap:3px;padding:13px 0 7px;min-height:0}.hand .tile.selected{transform:translateY(-7px)}.hand .tile.drawn:before{top:-13px;font-size:8px}.actionbar{min-height:30px;gap:5px}.actions{gap:3px}.actions button{min-width:37px;padding:5px 7px;font-size:11px}.actionbar>div:first-child{font-size:9px}#countdown{font-size:14px;margin-left:4px}}
.result-group{flex-direction:column;vertical-align:top}.result-group>span{display:flex;gap:2px}.result-group small{font-size:9px;color:#e7c689;max-width:130px;line-height:1.5}
.waiting-notice{font-size:12px;margin:0 0 10px;padding:9px 14px;border:1px solid #d5be7355;border-radius:8px;background:#3a5034;color:#eed49c}
.flying-tile{position:fixed;pointer-events:none;z-index:15}.flying-tile .tile{width:100%;height:100%}.tiles-small .hand{--tile:clamp(29px,4.5vw,42px)}.tiles-large .hand{--tile:min(61px,calc((100vw - 89px)/7))}
@media(min-width:761px){.tiles-large .hand{--tile:clamp(39px,4.3vw,61px)}}
@media(max-height:560px) and (min-width:600px){.tiles-small .hand{--tile:29px}.tiles-large .hand{--tile:36px}}
@media(min-width:761px) and (max-width:1100px) and (min-height:561px){.table{min-height:min(650px,calc(100dvh - 185px));grid-template-rows:95px minmax(225px,1fr) auto}}
@media(max-height:560px) and (min-width:600px){.table{min-height:275px;grid-template-rows:38px minmax(90px,1fr) auto}.playfield{min-height:100px;grid-template-rows:24px 58px 24px}.center{min-height:68px}.opponent.top{padding-top:4px}}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){.center #circle{font-size:8px;white-space:nowrap}.center #lastDiscard{display:none}}

.center .wild-info{font-size:8px;line-height:1.15;text-align:left}.center .wild-info small{display:block;font-size:7px;color:var(--muted)}.center .wild-info strong{color:var(--gold);font-weight:500;white-space:nowrap}

/* 三家手牌沿各自桌边排列，侧家与上家保持相同牌背比例。 */
.table{grid-template-columns:minmax(0,1fr)}
.opponent.top,.playfield,.self-area{grid-column:1}
.backs .back{flex-shrink:0}
.opponent.left,.opponent.right{position:relative;grid-area:2/1;align-self:center;top:auto;left:auto;right:auto;transform:none}
.opponent.left{justify-self:start;margin-left:15px}
.opponent.right{justify-self:end;margin-right:15px}
.opponent.left .backs,.opponent.right .backs{flex-direction:column;align-items:center}
.opponent.left .back,.opponent.right .back{width:18px;height:13px}
@media(max-width:760px){
  .opponent.left{margin-left:5px}
  .opponent.right{margin-right:5px}
  .opponent.left .back,.opponent.right .back{width:12px;height:8px}
}
@media(min-width:761px) and (max-width:1100px){
  .opponent.left .back,.opponent.right .back{width:12px;height:8px}
}
@media(max-height:560px) and (min-width:600px){
  .opponent.left .backs,.opponent.right .backs{display:none}
}

/* 花牌独立成区，牌面下逐张显示花号与台数；两侧与牌背并排。 */
.opponent-tiles{display:flex;justify-content:center;align-items:center;gap:7px;margin:5px 0}
.opponent-tiles .backs{margin:0;flex-shrink:0}
.opponent-exposed{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:180px}
.opponent.top .opponent-exposed{flex-direction:row;align-items:center;max-width:none}
.opponent.left .opponent-exposed,.opponent.right .opponent-exposed{max-width:85px;max-height:208px;overflow-y:auto;scrollbar-width:thin}
.flower-zone{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:5px;padding:4px 3px;border:1px solid #d6c28738;border-radius:6px;background:#153a2b66}
.flower-card{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.flower-card .tile{width:25px}
.flower-caption{font-size:8px;line-height:11px;white-space:nowrap;color:#becfae}
.flower-caption strong{font-weight:500;color:#dce3c3}
.own-flower .tile{outline:1px solid #e4c17b;outline-offset:1px}
.own-flower .flower-caption strong{color:#f3d58c}
.self-public{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:5px 0 0}
.self-public .flower-zone{justify-content:flex-start;max-height:80px;overflow-y:auto;scrollbar-width:thin}
.self-public .self-melds{margin:0;min-height:0;flex-wrap:wrap}
@media(min-width:761px) and (max-width:1100px) and (min-height:561px){
  .table:has(.self-public:not([hidden])){grid-template-rows:95px minmax(200px,1fr) auto}
}
@media(max-width:760px){
  .opponent-tiles{gap:4px;margin:3px 0}
  .opponent.left .opponent-exposed,.opponent.right .opponent-exposed{max-width:57px;max-height:180px}
  .opponent .flower-zone{gap:4px;padding:3px 2px}
  .opponent .flower-card .tile{width:19px}
  .opponent .flower-caption{font-size:7px;line-height:9px}
  .opponent.left .flower-caption,.opponent.right .flower-caption{font-size:6px}
  .flower-zone{gap:4px;padding:3px}
  .flower-card .tile{width:22px}
  .flower-caption{font-size:7px;line-height:10px}
  .self-public{gap:8px}
  .table{grid-template-rows:75px minmax(250px,1fr) auto}
}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){
  .table{grid-template-rows:48px minmax(110px,1fr) auto}
  .room-bar strong{letter-spacing:.4px;white-space:nowrap}
  .opponent.left,.opponent.right{min-height:0;max-height:100%}
  .opponent.top>div{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:7px}
  .opponent.top .player-label{grid-area:1/1;margin-bottom:2px}
  .opponent.top .model-label{grid-area:2/1;margin:0}
  .opponent.top .flowers{grid-area:3/1;font-size:7px}
  .opponent.top .opponent-tiles{grid-area:1/2/4/3;margin:0}
  .opponent.top .opponent-exposed{max-width:120px;max-height:47px;overflow:auto}
  .opponent.left .opponent-exposed,.opponent.right .opponent-exposed{max-width:61px;max-height:80px}
  .opponent .flower-card .tile{width:16px}
  .opponent .flower-zone{gap:3px;padding:2px}
  .flower-card{gap:3px}
  .self-public{margin-top:4px}
  .self-public .flower-card .tile{width:17px}
  .self-public .flower-zone{padding:2px 3px;max-height:42px}
  .self-area:has(.self-public:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:7px}
  .self-area:has(.self-public:not([hidden])) .self-info{grid-area:1/1;flex-direction:column;align-items:flex-start;gap:2px}
  .self-area:has(.self-public:not([hidden])) .self-info .flowers{max-width:none;font-size:8px}
  .self-public{grid-area:1/2;margin:0;max-width:155px}
  .self-area:has(.self-public:not([hidden])) .hand{grid-area:2/1/3/3}
  .self-area:has(.self-public:not([hidden])) .discard-recommendation{grid-area:3/1/4/3}
  .self-area:has(.self-public:not([hidden])) .actionbar{grid-area:4/1/5/3}
  .self-area:has(.self-public:not([hidden])) .hand{--tile:31px;padding:8px 0 6px}
}
@media(max-height:560px) and (min-width:600px){
  .self-public{grid-area:1/2/2/3;margin:0;width:max-content;max-width:65vw}
  .self-area:has(.self-public:not([hidden])) .self-info{grid-area:1/1/2/2;flex-direction:column;align-items:flex-start;gap:2px}
  .self-info .flowers{max-width:none}
  .self-public .self-melds{position:static}
  .self-public .flower-card .tile{width:16px}
  .self-public .flower-caption{font-size:7px;line-height:9px}
  .self-public .flower-zone{padding:2px 3px;max-height:39px}
  .self-public .flower-card{gap:2px}
  .opponent.top .opponent-tiles{position:absolute;top:4px;left:calc(50% + 65px);margin:0;max-width:180px}
  .opponent-exposed{max-height:82px;overflow:auto}
  .opponent.left .opponent-exposed,.opponent.right .opponent-exposed{width:85px;max-height:75px;max-width:85px;flex-shrink:0}
  .opponent.left .opponent-tiles,.opponent.right .opponent-tiles{position:absolute;top:-12px;margin-top:0}
  .opponent.left .opponent-tiles{left:calc(100% + 5px)}
  .opponent.right .opponent-tiles{right:calc(100% + 5px)}
  .opponent.left,.opponent.right{min-height:0;max-height:100%}
  .opponent .player-label{gap:3px;margin-bottom:2px}
  .opponent .player-label strong,.opponent .player-label>span:not(.avatar):not(.badge){font-size:9px}
  .opponent .avatar{width:17px;height:19px;font-size:9px}
  .opponent .flowers{font-size:7px;line-height:10px}
  .opponent .model-label{line-height:10px;margin:0 0 1px}
  .opponent-tiles{margin:2px 0}
  .opponent .flower-card .tile{width:15px}
  .opponent .flower-caption{font-size:7px;line-height:9px}
  .table:has(.self-public:not([hidden])) .playfield{min-height:82px;grid-template-rows:16px 55px 16px}
  .table:has(.self-public:not([hidden])){grid-template-rows:38px minmax(85px,1fr) auto}
}

/* 模型名称单独显示，长 LABEL 省略，悬停可看全称。 */
.model-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0d39a;font-size:10px;line-height:15px;letter-spacing:0}
.opponent .model-label{margin:-4px 0 2px}
.score-row>span{min-width:0}
.score-row>strong{flex-shrink:0}
.self-info .model-label{display:inline-block;max-width:130px;vertical-align:middle;margin-left:6px}
@media(max-width:760px){.model-label{font-size:9px;line-height:13px}.self-info .model-label{max-width:85px}}
@media(max-height:560px) and (min-width:600px){.model-label{font-size:8px;line-height:11px}}

.discard-recommendation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;margin:3px 0 9px;border:1px solid #89b6a466;border-radius:8px;background:#183c32;color:#d9e6cf}
.discard-recommendation>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.discard-recommendation strong{font-size:12px;color:#bce4d0}
.discard-recommendation span{font-size:10px;line-height:1.6;color:var(--muted)}
.discard-recommendation button{flex-shrink:0;padding:6px 9px;font-size:11px;white-space:nowrap}
.hand .tile.recommended{outline:2px solid #8ec9ad;outline-offset:1px}
.hand .tile.selected{outline-color:#edca84}
.recommend-mark{position:absolute;bottom:1px;left:1px;right:1px;border-radius:3px;background:#285e4b;color:#fff1c9;font-size:9px;line-height:14px;pointer-events:none}
@media(max-width:760px){.room-controls #hint{display:none}.discard-recommendation{gap:7px;padding:6px 8px}.discard-recommendation strong{font-size:11px}.discard-recommendation span{font-size:9px}.recommend-mark{font-size:8px;line-height:12px}}
@media(max-width:380px) and (max-height:720px) and (orientation:portrait){.discard-recommendation{padding:4px 6px;margin-bottom:6px}}
@media(max-height:560px) and (min-width:600px){
  .self-area{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .self-info{grid-area:1/1/2/3}
  .hand{grid-area:2/1/3/3;width:100%}
  .actionbar{grid-area:3/1/4/3}
  .discard-recommendation{grid-area:3/1/4/2;margin:0;padding:3px 6px;gap:7px}
  .discard-recommendation:not([hidden])+.actionbar{grid-area:3/2/4/3}
  .discard-recommendation strong{font-size:10px}
  .discard-recommendation #recommendationReason{display:none}
  .discard-recommendation button{padding:3px 6px;font-size:10px}
}

/* 掷骰定庄、开牌与常驻场次状态。 */
.table-status{display:flex;align-items:center;gap:14px;padding:9px 14px;margin:0 0 10px;border:1px solid #d9bd6e55;border-radius:10px;background:#1b3f31;color:#ecdcad;font-size:12px;line-height:18px}
.table-status strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%;color:#f5d590}
.table-status span{white-space:nowrap}.table-status span:last-child{margin-left:auto}
@media(min-width:761px) and (max-width:1100px) and (min-height:561px){.table:has(.self-public:not([hidden])){grid-template-rows:75px minmax(180px,1fr) auto;min-height:min(600px,calc(100dvh - 225px))}.table:not(:has(.self-public:not([hidden]))){min-height:min(610px,calc(100dvh - 225px))}}
@media(max-width:760px) and (min-height:721px){.table{grid-template-rows:65px minmax(210px,1fr) auto;min-height:min(600px,calc(100dvh - 235px))}}
@media(max-height:560px) and (min-width:600px){.table,.table:has(.self-public:not([hidden])){grid-template-rows:30px minmax(85px,1fr) auto;min-height:255px}.hand{padding:11px 0 6px;min-height:58px}}


@media(min-width:761px) and (max-width:1100px) and (min-height:561px){.self-area{padding:10px 20px 12px}.hand{padding:14px 0 9px}}

@media(min-width:761px) and (max-width:1100px) and (min-height:561px){.room-bar{margin-bottom:10px}.table-status{margin-bottom:6px}}


/* 掷骰直接使用同一张牌桌和四个席位；六面骰子在桌面中央落定。 */
.table.is-opening{grid-template-rows:135px minmax(260px,1fr) auto}
.is-opening .river,.is-opening .center,.is-opening .self-info{display:none}
.is-opening .playfield{overflow:visible;min-height:260px}
.is-opening .opponent.top{width:70%;padding-top:23px}
.is-opening .opponent.left,.is-opening .opponent.right{width:140px}
.is-opening .hand{padding:10px 0 16px;min-height:105px}
.table-dice-stage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;z-index:6;pointer-events:none;text-align:center}
.table-dice-heading{color:#c6d6b9;font-size:12px;letter-spacing:2px;line-height:1.6;max-width:100%}
.dice-landing{position:relative;width:174px;height:110px;perspective:800px;--dice:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:20px}
.table-die{position:absolute;left:calc(50% - 65px);top:28px;width:var(--dice);height:var(--dice);transform-origin:center;z-index:2}
.table-die[data-die="1"]{left:calc(50% + 18px)}
.dice-body{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(25deg)}
.dice-face{display:block;position:absolute;inset:0;backface-visibility:hidden;background:#eee3c6;border-radius:9px;box-shadow:inset 0 0 0 1px #bdab81}
.dice-face .die{display:block;width:100%;height:100%;filter:none;border-radius:9px}
.dice-face-front{transform:translateZ(calc(var(--dice)/2))}.dice-face-back{transform:rotateY(180deg) translateZ(calc(var(--dice)/2))}
.dice-face-right{transform:rotateY(90deg) translateZ(calc(var(--dice)/2))}.dice-face-left{transform:rotateY(-90deg) translateZ(calc(var(--dice)/2))}
.dice-face-top{transform:rotateX(90deg) translateZ(calc(var(--dice)/2))}.dice-face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--dice)/2))}
.dice-shadow{position:absolute;left:calc(50% - 75px);top:82px;width:70px;height:13px;border-radius:50%;background:#092b2070;filter:blur(5px)}
.dice-shadow:nth-of-type(3){left:calc(50% + 8px)}
.table-dice-caption{color:#f0d396;font-size:15px;min-height:24px;line-height:1.5;overflow-wrap:anywhere;max-width:100%}
.die{width:30px;height:30px;flex-shrink:0;filter:drop-shadow(0 2px 2px #061c1855);border-radius:6px}
.die-wait{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;border:1px dashed #d5c69955;font:25px Georgia,serif;color:#c5c7a8;background:#e7ddbe0d}
.dice-seat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.dice-seat .player-label{margin-bottom:0}.dice-seat .model-label{margin:0}
.seat-dice{display:flex;align-items:center;justify-content:center;gap:6px}
.seat-dice strong{font:26px Georgia,serif;color:#f9d99b;margin-left:5px;white-space:nowrap}
.seat-dice strong small{font:10px sans-serif;margin-left:4px;color:#d2d7b7}
.seat-dice-status,.seat-dice-round{color:#b8cdb1;font-size:10px;line-height:1.5}
.active-player .seat-dice-status{color:#f3d68b}.dice-winner .seat-dice strong{color:#ffe6a9}
.is-opening .actionbar{padding-top:10px;border-top:1px solid #c6d8a629}
.is-opening .actionbar #rollDice{min-width:104px}
@media(max-width:760px){
 .table-status{padding:7px 9px;gap:9px;font-size:10px}.table-status strong{max-width:40%}
 .table.is-opening{grid-template-rows:116px minmax(250px,1fr) auto;min-height:570px}
 .is-opening .opponent.top{padding-top:16px}.is-opening .opponent.left,.is-opening .opponent.right{width:78px}
 .is-opening .playfield{width:calc(100% - 170px);min-width:125px;min-height:250px}
 .dice-seat{gap:6px}.dice-seat .player-label{gap:5px}.dice-seat .player-label strong{font-size:11px}
 .seat-dice{gap:3px}.seat-dice .die{width:22px;height:22px}.seat-dice strong{font-size:22px;margin-left:2px}
 .seat-dice strong small{font-size:8px;margin-left:2px}.seat-dice-status,.seat-dice-round{font-size:9px}
 .dice-landing{--dice:36px;width:130px;height:94px;gap:15px}.table-die{left:calc(50% - 48px);top:28px}.table-die[data-die="1"]{left:calc(50% + 13px)}
 .dice-shadow{left:calc(50% - 55px);top:69px;width:50px;height:10px}.dice-shadow:nth-of-type(3){left:calc(50% + 6px)}
 .table-dice-heading{font-size:10px;letter-spacing:1px}.table-dice-caption{font-size:12px;min-height:22px}.table-dice-stage{gap:13px}
 .is-opening .hand{padding:9px 0 13px;min-height:85px}.is-opening .opponent.top>div{display:flex}
}
@media(max-width:380px){.is-opening .opponent.left,.is-opening .opponent.right{width:67px}.is-opening .playfield{width:calc(100% - 145px);min-width:120px}.dice-seat .player-label strong{font-size:10px}.dice-seat .player-label{font-size:9px}.seat-dice .die{width:19px;height:19px}.seat-dice strong{font-size:20px}}
@media(max-height:560px) and (min-width:600px){
 .table.is-opening{grid-template-rows:70px minmax(115px,1fr) auto;min-height:330px}
 .is-opening .playfield{min-height:115px;width:calc(100% - 245px)}.is-opening .opponent.top{padding-top:7px}
 .is-opening .opponent.left,.is-opening .opponent.right{width:115px}
 .dice-seat{gap:4px}.dice-seat .player-label strong{font-size:11px}.seat-dice .die{width:23px;height:23px}.seat-dice strong{font-size:22px}.seat-dice-status{font-size:9px}
 .is-opening .hand{padding:3px 0 6px;min-height:71px}.is-opening .hand .dice-seat{flex-direction:row;gap:15px}
 .dice-landing{--dice:32px;width:130px;height:60px}.table-die{top:11px;left:calc(50% - 46px)}.table-die[data-die="1"]{left:calc(50% + 14px)}
 .dice-shadow{top:49px;left:calc(50% - 51px);width:47px;height:9px}.dice-shadow:nth-of-type(3){left:calc(50% + 9px)}
 .table-dice-stage{gap:5px}.table-dice-heading{font-size:10px}.table-dice-caption{font-size:12px;min-height:18px}
 .is-opening .actionbar{padding-top:6px}.is-opening .actionbar #rollDice{min-width:90px}
}

/* 百搭在操作区旁常驻，首次开牌展开规则提醒；相公必须单独确认。 */
.wild-notice{display:flex;align-items:center;gap:12px;grid-column:1/-1;margin-top:12px;padding:7px 10px;border:1px solid #cbb77440;border-radius:9px;background:#183b2f80}
.result-next p{font-size:12px;line-height:1.5;color:#bbd2c4;margin:7px 0}.intermission-countdown{font-size:24px;color:#f2d08a;font-variant-numeric:tabular-nums}
.result-next{margin-top:20px;border-top:1px solid #bacb9f40;padding-top:18px}.result-next-buttons{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px}.result-next>small{display:block;font-size:11px;line-height:1.5;color:#a6c1b0;margin-top:12px}
.wild-notice.wild-intro{padding:12px;border-color:#d6b96d99;background:linear-gradient(110deg,#595b3170,#173b2e80)}
.self-area:has(.wild-intro:not([hidden])){display:block}
.wild-notice-copy{display:grid;gap:6px;flex:1;min-width:0;line-height:1.5}.wild-notice-copy strong{font-size:12px;color:#f5d48a;overflow-wrap:anywhere}
.wild-notice-copy>span{font-size:11px;color:#ecd3b0}.wild-notice-tiles{display:flex;gap:4px;--tile:23px;flex-shrink:0}.wild-intro .wild-notice-tiles{--tile:29px}
.wild-notice button{padding:7px 10px;font-size:11px;white-space:nowrap}.risk-mark{display:block;font-size:9px;line-height:1.2;margin-top:3px;font-weight:400}
.actions button.risk-action{border-color:#da9d7280;color:#ffe0c2;background:#6a5039}.actions button.risk-action:hover{background:#866044}
.xiang-warning{padding:15px;border:1px solid #d5966d;border-radius:10px;background:#673e3044}.xiang-warning>strong{font-size:20px;color:#ffcca6}.xiang-warning p{margin:9px 0 0;line-height:1.7;font-size:13px;color:#ecd4be}
.xiang-tiles{display:flex;justify-content:center;gap:7px;margin:23px 0;--tile:42px}.xiang-buttons{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.risk-confirm{background:#944a36;border-color:#c28a61;color:#fff2dc}.risk-confirm:hover{background:#ac583f}
@media(max-width:760px){.wild-notice{gap:8px;padding:7px}.wild-notice.wild-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:9px}.wild-intro .wild-notice-copy{grid-column:1/-1}.wild-intro .wild-notice-tiles{--tile:24px}.wild-notice-copy strong{font-size:11px}.wild-notice-copy>span{font-size:10px}.wild-notice-tiles{--tile:20px;gap:3px}.wild-notice button{justify-self:end;padding:8px 10px;min-height:34px}.xiang-warning>strong{font-size:17px}.xiang-warning p{font-size:12px}.xiang-buttons button{font-size:12px}}
@media(max-height:560px) and (min-width:600px){.wild-notice{grid-column:1/-1;margin-top:5px;padding:5px 8px}.wild-notice.wild-intro{padding:7px 9px}.wild-notice-copy{gap:2px}.wild-notice-copy>span{font-size:10px}.wild-intro .wild-notice-tiles{--tile:22px}.wild-notice-tiles{--tile:18px}.wild-notice button{padding:5px 8px}}

/* 手牌下方统一显示操作提示、响应牌面与倒计时。 */
.flower-reveal{position:absolute;z-index:8;top:38%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:15px;width:max-content;max-width:calc(100% - 24px);padding:15px 20px;border:1px solid #e8c67c;border-radius:15px;background:#183d30f5;box-shadow:0 6px 26px #0a241c70;pointer-events:none}
.flower-reveal-tile{display:flex;flex-shrink:0;--tile:53px;z-index:1}.flower-reveal-tile .tile{transform-origin:top left;box-shadow:0 3px #ced3b6,0 5px 12px #071e1955}
.flower-reveal-copy{display:grid;gap:7px;min-width:0;line-height:1.5}.flower-reveal-copy strong{font-size:17px;color:#f7daa0;overflow-wrap:anywhere}.flower-reveal-copy>span{font-size:12px;color:#d0dbc2}.flower-reveal.moving{background:transparent;border-color:transparent;box-shadow:none}.flower-reveal.moving .flower-reveal-copy{opacity:.45}.flower-pending{opacity:0}
.flower-zone:has(.flower-pending):not(:has(.flower-card:not(.flower-pending))){background:transparent;border-color:transparent}
@media(max-width:760px){.flower-reveal{top:34%;gap:10px;padding:11px 13px}.flower-reveal-tile{--tile:42px}.flower-reveal-copy strong{font-size:14px}.flower-reveal-copy>span{font-size:10px}}
@media(max-height:560px) and (min-width:600px){.flower-reveal{top:32%;padding:8px 13px;gap:10px}.flower-reveal-tile{--tile:35px}.flower-reveal-copy strong{font-size:13px}.flower-reveal-copy>span{font-size:10px}}
.actionbar{gap:14px;align-items:center;padding-top:7px;min-height:44px}
.actionbar>div.action-message{display:flex;align-items:center;gap:11px;flex:1;min-width:0;max-width:none;font-size:12px;color:#cedbc8}
.action-copy{display:grid;gap:4px;min-width:0;line-height:1.5;overflow-wrap:anywhere}
#actionTitle{font-size:15px;line-height:1.4;color:#f6d995}
.action-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0}
.actionbar #countdown{display:flex;align-items:center;gap:7px;margin:0;padding:8px 11px;border:1px solid #cfb77340;border-radius:9px;background:#102f2473;color:#f1d393;font-size:16px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.action-countdown::before{content:'◷';font-size:18px;color:#c9b880;font-weight:400}
.actionbar .actions:empty{display:none}
.actionbar .actions button{min-height:42px;min-width:58px;padding:9px 16px;border-radius:9px;font-size:14px}
.actionbar.response-mode{padding:11px 13px;border:1px solid #cdb57277;border-radius:12px;background:linear-gradient(110deg,#35554170,#143c2b90);box-shadow:inset 0 1px 0 #f6dfa00d}
.action-tile{display:flex;flex-shrink:0;--tile:29px}
.action-tile .tile{box-shadow:0 2px 4px #091e1a55}
.actionbar.response-mode.urgent{border-color:#e6a16e;background:linear-gradient(110deg,#5e47256b,#173a2d90)}
.actionbar.urgent #countdown{border-color:#f0a57588;background:#74422d55;color:#ffc39e}
.actionbar.urgent .action-countdown::before{color:#efb38b}

/* 金色标记庄家，青绿色高亮实际出牌席位；响应和补花时撤去出牌高亮。 */
.badge.dealer-badge{display:inline-block;flex-shrink:0;padding:3px 7px;border:1px solid #f8df9c;border-radius:5px;background:linear-gradient(135deg,#f6df9b,#d3ae58);color:#3a3017;font-size:11px;font-weight:800;line-height:16px;white-space:nowrap;box-shadow:0 2px 7px #10281e55;vertical-align:middle}
#dealerStatus{padding:4px 9px;border:1px solid #e5c97b99;border-radius:6px;background:#d8b9651a;color:#ffdfa0;font-size:14px;font-weight:800}
.seat-player{position:relative;padding:6px 5px 3px;border:2px solid transparent;border-radius:12px;min-width:0}
.opponent.top .seat-player{width:fit-content;max-width:100%;margin:-6px auto 0;padding-left:12px;padding-right:12px}
.seat-player.turn-player{border-color:#68e3bf;background:#163f32ba;box-shadow:0 0 0 3px #5adbb71c,0 0 18px #5bdcb733}
.turn-player .avatar{border-color:#7ff5d1;background:#2c6a53;color:#e4fff3;box-shadow:0 0 0 2px #65e7be66}
.turn-player .player-label>strong{color:#ddfff0}
.seat-player .player-label>strong{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.turn-marker,.self-turn-marker{display:inline-flex;align-items:center;gap:5px;border:1px solid #7befca;border-radius:6px;background:#67e3ba;color:#103c2d;font-size:11px;font-weight:800;line-height:18px;white-space:nowrap}
.turn-marker{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:1px 9px;z-index:2}
.turn-marker::before,.self-turn-marker::before{content:'';width:5px;height:5px;background:#164d38;border-radius:50%;flex-shrink:0}
.self-turn-marker{padding:2px 8px;margin-left:8px;vertical-align:middle}
.self-area.self-turn{border-top:2px solid #6eeac4;background:linear-gradient(180deg,#2c60444d,#193f2e80);box-shadow:inset 0 3px 15px #72dabb12}
.actionbar.turn-mode{padding:11px 13px;border:1px solid #65d8b26b;border-radius:12px;background:linear-gradient(110deg,#27544380,#143c2b90)}
.actionbar.turn-mode #actionTitle{color:#bcf5dd;font-size:17px}
.actionbar.your-turn{border-color:#7be5be;box-shadow:0 0 0 2px #7be5be14,inset 3px 0 0 #7be5be}
.actionbar.your-turn #actionTitle{color:#d4ffe9;font-size:18px}
@media(max-width:760px){
 .actionbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
 .actionbar>div.action-message{grid-column:1;gap:9px;font-size:11px}
 .actionbar.response-mode{padding:10px}
 .action-controls{display:contents}
 .actionbar #countdown{grid-column:2;grid-row:1;font-size:15px;padding:7px 9px;gap:5px}
 .actionbar .actions{grid-column:1/-1;justify-content:flex-end;gap:5px}
 .actionbar .actions button{min-height:42px;min-width:43px;padding:8px 13px;font-size:14px}
 #actionTitle{font-size:14px}
 .action-tile{--tile:26px}
 .badge.dealer-badge{font-size:10px;line-height:14px;padding:2px 5px}
 #dealerStatus{padding:3px 6px;font-size:11px}
 .seat-player{padding:6px 3px 3px;border-radius:9px}
 .opponent.top{padding-top:17px}
 .opponent.top .seat-player{padding:4px 5px 2px;margin-top:0}
 .turn-marker{font-size:10px;line-height:16px;padding:1px 6px;top:-11px}
 .self-turn-marker{font-size:10px;line-height:14px;padding:2px 6px;margin-left:5px}
 .actionbar.turn-mode{padding:10px}
 .actionbar.turn-mode #actionTitle,.actionbar.your-turn #actionTitle{font-size:15px}
}
@media(max-height:560px) and (min-width:600px){
 .actionbar{display:flex;gap:10px;padding-top:4px;min-height:36px}
 .actionbar.response-mode{padding:7px 10px}
 .actionbar.turn-mode{padding:7px 10px}
 .actionbar.turn-mode #actionTitle,.actionbar.your-turn #actionTitle{font-size:13px}
 .badge.dealer-badge{font-size:9px;line-height:13px;padding:1px 4px}
 .self-turn-marker{font-size:9px;line-height:13px;padding:1px 5px}
 .turn-marker{font-size:9px;line-height:15px;padding:1px 6px;top:-11px}
 .opponent.top .seat-player{padding:2px 5px 0;margin-top:0}
 .opponent.top{padding-top:13px}
 .seat-player{padding:4px 3px 2px}
 .actionbar>div.action-message{font-size:10px;gap:8px}
 .action-controls{display:flex;gap:8px}
 .actionbar #countdown{font-size:14px;padding:6px 8px}
 .actionbar .actions button{min-height:34px;min-width:42px;padding:6px 10px;font-size:12px}
 #actionTitle{font-size:12px}
 .action-copy{gap:2px}
 .action-tile{--tile:24px}
}

/* 四席箭头只改变自身位置，不参与排版。 */
.turn-arrow{position:absolute;display:block;width:28px;height:34px;pointer-events:none;z-index:4;--arrow-x:0px;--arrow-y:5px;animation:turnArrowBounce .85s ease-in-out infinite;filter:drop-shadow(0 3px 3px #10291a80)}
.turn-arrow svg{display:block;width:100%;height:100%;fill:#ffe19a;stroke:#b1873b;stroke-width:1.4;stroke-linejoin:round}
.opponent.top .turn-arrow{left:calc(50% - 14px);bottom:-33px;--arrow-y:-5px}
.opponent.top .turn-arrow svg{transform:rotate(180deg)}
.opponent.left .turn-arrow{right:-33px;top:calc(50% - 17px);--arrow-x:-5px;--arrow-y:0px}
.opponent.left .turn-arrow svg{transform:rotate(90deg)}
.opponent.right .turn-arrow{left:-33px;top:calc(50% - 17px);--arrow-x:5px;--arrow-y:0px}
.opponent.right .turn-arrow svg{transform:rotate(-90deg)}
#selfTurnArrow{top:-29px;left:30px}
@keyframes turnArrowBounce{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--arrow-x),var(--arrow-y))}}
.seat-player.turn-player{border-color:transparent;background:none;box-shadow:none}
.turn-player .avatar{border-color:#e8ce88;background:#385a43;box-shadow:none}

/* 同一视口内桌高和各区高度固定；所有提示状态共用相同轨道。 */
#game .table{--table-height:clamp(650px,calc(100dvh - 245px),850px);height:var(--table-height);min-height:var(--table-height);max-height:var(--table-height);grid-template-rows:112px minmax(0,1fr) 332px}
#game .playfield{min-height:0;height:100%;grid-template-rows:minmax(0,1fr) 105px minmax(0,1fr)}
#game .opponent.left,#game .opponent.right{max-height:100%;min-height:0}
#game .opponent.left .backs,#game .opponent.right .backs{gap:2px}
#game .opponent.left .back,#game .opponent.right .back{height:12px}
#game .self-area{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 56px 120px minmax(0,1fr);gap:4px;padding:10px 20px;min-height:0;border-top:1px solid var(--line);background:#193f2e80;box-shadow:none}
#game .self-info{grid-area:1/1;display:flex;flex-direction:row;align-items:center;min-width:0;min-height:0;font-size:11px;gap:8px;white-space:nowrap}
#game .self-info>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game .self-info>span:first-child>strong{display:inline-block;max-width:110px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
#game .self-info .flowers{flex-shrink:0;margin:0;max-width:none;font-size:10px}
#game .self-public{grid-area:2/1;display:flex;margin:0;max-width:none;width:auto;height:100%;min-width:0;gap:10px;align-items:center;overflow:hidden}
#game .self-public .flower-zone{max-width:45%;max-height:none;height:100%;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;padding:3px 4px;scrollbar-width:thin}
#game .self-public .self-melds{max-width:60%;height:100%;display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;min-width:0;margin:0}
#game .self-public:has(#selfMelds[hidden]) .flower-zone,#game .self-public:has(#selfFlowers[hidden]) .self-melds{max-width:100%}
#game .self-public .meld{flex-shrink:0}
#game .hand-stage{grid-area:3/1;position:relative;min-width:0;min-height:0;container-type:inline-size}
#game .hand{grid-area:auto;height:100%;width:100%;min-height:0;padding:26px 0 5px;gap:4px;align-content:center;--tile:min(54px,calc((100cqw - 65px)/14))}
.tiles-small #game .hand{--tile:min(42px,calc((100cqw - 65px)/14))}
.tiles-large #game .hand{--tile:min(61px,calc((100cqw - 65px)/14))}
#game .operation-panel{grid-area:4/1;display:grid;grid-template-rows:40px minmax(0,1fr);row-gap:4px;min-width:0;min-height:0;padding:0 2px}
#game .discard-recommendation{grid-area:1/1;min-height:0;margin:0;padding:3px 8px;border:0;border-radius:7px;background:#173e2f80;gap:8px}
#game .discard-recommendation>div{min-width:0;gap:1px}
#game .discard-recommendation strong{font-size:11px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game .discard-recommendation span{font-size:10px;line-height:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#game .discard-recommendation button{padding:5px 9px;font-size:11px}
#game .actionbar{grid-area:2/1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0;height:100%;padding:5px 8px;border:1px solid #abc5a32b;border-radius:9px;background:#13392980;box-shadow:none}
#game .actionbar>div.action-message{display:flex;min-width:0;gap:8px;font-size:11px}
#game .action-copy{gap:2px;min-width:0;line-height:1.35}
#game #actionTitle{font-size:13px;line-height:16px;color:#d7e9d3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game #actionHint{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:14px;font-size:11px}
#game .actionbar.response-mode{border-color:#dcc07977;background:#34523880}
#game .actionbar.your-turn{border-color:#aac89955}
#game .actionbar.urgent{border-color:#f0a57588}
#game .action-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0}
#game .actionbar .actions{display:flex;flex-wrap:nowrap;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:thin}
#game .actionbar .actions button{flex-shrink:0;min-width:48px;min-height:38px;padding:7px 12px;font-size:13px}
#game .actionbar #countdown{padding:6px 8px;font-size:14px;gap:5px;flex-shrink:0}
#game .action-tile{--tile:25px}
#game .wild-notice{position:absolute;z-index:7;left:18px;right:18px;bottom:calc(100% + 6px);grid-area:auto;margin:0;padding:10px 12px;box-shadow:0 8px 20px #071e1755;background:#244b38f5}

@media(max-width:760px){
 #game .table{--table-height:clamp(660px,calc(100dvh - 205px),750px);grid-template-rows:80px minmax(0,1fr) 376px}
 #game .playfield{grid-template-rows:minmax(0,1fr) 92px minmax(0,1fr)}
 #game .self-area{grid-template-rows:30px 46px 164px minmax(0,1fr);gap:4px;padding:8px 10px}
 #game .self-info{font-size:10px;gap:5px}
 #selfTurnArrow{top:-29px;left:16px}
 #game .self-info>span:first-child>strong{max-width:75px}
 #game .self-info .model-label{max-width:55px}
 #game .self-info .flowers{font-size:8px}
 #game .self-public{gap:7px}
 #game .self-public .flower-card{gap:2px}
 #game .self-public .flower-card .tile{width:20px}
 #game .self-public .flower-caption{font-size:7px;line-height:9px}
 #game .self-public .self-melds .tile{width:22px}
 #game .self-public .self-melds{gap:7px}
 #game .hand{--tile:min(42px,calc((100cqw - 30px)/7));gap:3px;padding:25px 0 4px}
 .tiles-small #game .hand{--tile:min(34px,calc((100cqw - 30px)/7))}
 .tiles-large #game .hand{--tile:min(45px,calc((100cqw - 30px)/7))}
 #game .operation-panel{grid-template-rows:38px minmax(0,1fr);row-gap:4px;padding:0}
 #game .actionbar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:22px minmax(0,1fr);gap:3px;padding:4px 7px}
 #game .actionbar>div.action-message{grid-area:1/1;font-size:10px;gap:6px}
 #game .action-controls{grid-area:2/1;justify-content:flex-end;width:100%;gap:6px}
 #game #actionTitle{font-size:11px;line-height:13px}
 #game #actionHint{font-size:10px;line-height:12px;-webkit-line-clamp:1}
 #game .action-copy{display:flex;align-items:center;gap:6px;min-width:0}
 #game .actionbar .actions button{min-width:36px;min-height:34px;padding:5px 9px;font-size:13px}
 #game .actionbar #countdown{font-size:13px;grid-area:auto;padding:5px 7px}
 #game .action-tile{--tile:16px}
 #game .opponent.left .back,#game .opponent.right .back{height:7px}
 #game .wild-notice{left:8px;right:8px;padding:9px;display:grid;grid-template-columns:minmax(0,1fr) auto}
 #game .wild-notice-copy{grid-column:1/-1}
 .opponent.left .turn-arrow{right:-24px;width:23px;height:28px}
 .opponent.right .turn-arrow{left:-24px;width:23px;height:28px}
}
@media(max-width:380px){
 #game .table{--table-height:640px;grid-template-rows:64px minmax(0,1fr) 376px}
 #game .actionbar .actions{gap:3px}
 #game .actionbar .actions button{min-width:32px;padding:5px 7px;font-size:12px}
 #game .actionbar #countdown{font-size:12px;padding:5px;gap:3px}
}
@media(min-width:761px) and (min-height:561px) and (max-height:850px){
 #game .table{--table-height:clamp(540px,calc(100dvh - 245px),660px);grid-template-rows:70px minmax(0,1fr) 268px}
 #game .self-area{grid-template-rows:22px 44px 94px minmax(0,1fr);padding:8px 14px;gap:4px}
 #selfTurnArrow{left:22px}
 #game .hand{--tile:min(46px,calc((100cqw - 65px)/14));padding:20px 0 4px}
 .tiles-small #game .hand{--tile:min(38px,calc((100cqw - 65px)/14))}
 .tiles-large #game .hand{--tile:min(50px,calc((100cqw - 65px)/14))}
 #game .self-public .flower-card .tile{width:19px}
 #game .self-public .flower-card{gap:2px}
 #game .self-public .self-melds .tile{width:23px}
 #game .operation-panel{grid-template-rows:30px minmax(0,1fr)}
 #game .discard-recommendation span{-webkit-line-clamp:1}
 #game .actionbar{padding:4px 7px}
 #game #actionHint{-webkit-line-clamp:1}
 #game .actionbar .actions button{min-height:34px;padding:5px 11px}
 #game .opponent.left .back,#game .opponent.right .back{height:8px}
 #game .opponent.left .backs,#game .opponent.right .backs{gap:1px}
 #game .opponent .flower-card .tile{width:20px}
 #game .opponent.left .opponent-exposed,#game .opponent.right .opponent-exposed{max-height:130px}
 #game .opponent.top{padding-top:9px}
}
@media(max-height:560px) and (min-width:600px){
 #game .table{--table-height:430px;grid-template-rows:60px minmax(0,1fr) 220px}
 #game .playfield{grid-template-rows:minmax(0,1fr) 72px minmax(0,1fr)}
 #game .self-area{grid-template-rows:22px 40px 72px minmax(0,1fr);padding:6px 12px;gap:3px}
 #game .self-info{grid-area:1/1;flex-direction:row;align-items:center;font-size:10px}
 #game .self-public{grid-area:2/1;width:auto;max-width:none}
 #game .hand{--tile:min(34px,calc((100cqw - 65px)/14));padding:18px 0 2px;gap:4px}
 .tiles-small #game .hand{--tile:min(29px,calc((100cqw - 65px)/14))}
 .tiles-large #game .hand{--tile:min(36px,calc((100cqw - 65px)/14))}
 #game .operation-panel{grid-template-rows:22px minmax(0,1fr);row-gap:3px}
 #game .discard-recommendation{grid-area:1/1;padding:1px 6px}
 #game .discard-recommendation #recommendationReason{display:none}
 #game .discard-recommendation button{padding:2px 7px;font-size:10px}
 #game .actionbar{grid-area:2/1;display:flex;padding:2px 7px;gap:8px}
 #game .action-controls{width:auto;gap:6px}
 #game #actionTitle{font-size:11px}
 #game .actionbar .actions button{min-height:30px;padding:4px 9px;font-size:12px}
 #game .actionbar #countdown{font-size:12px;padding:4px 6px}
 #game .action-tile{--tile:20px}
 .turn-arrow{width:22px;height:27px}
 #selfTurnArrow{left:20px;top:-23px}
}
@media(prefers-reduced-motion:reduce){.turn-arrow{animation:none}}

/* 结束局仍使用原来的四席与牌河，只把暗牌翻开。 */
#game .ended-controls{grid-area:1/1/3/2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:8px;border-top:1px solid var(--line)}
.ended-copy{display:grid;gap:5px;min-width:0}
.ended-copy>strong{font-size:12px;color:#f1d496;line-height:1.4}
.ended-copy>span{font-size:10px;color:var(--muted);line-height:1.4}
.ended-buttons{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ended-buttons button{font-size:12px;padding:8px 10px;min-height:36px}
.ended-buttons .intermission-countdown{font-size:16px;white-space:nowrap}
.winner-badge{background:#e3c183;color:#213e2b;font-weight:700}
.winning-tile{outline:2px solid #edc575;outline-offset:1px}
.external-win{position:relative;display:inline-flex;flex-shrink:0}
.external-win small{position:absolute;bottom:0;left:0;right:0;background:#ac863d;color:#fff3cb;text-align:center;font-size:8px;line-height:11px}
/* 趣味语音跟随实际播放，在发言席位旁显示；浮层不参与桌面排版。 */
.voice-bubble{position:absolute;z-index:12;display:flex;flex-direction:column;gap:6px;width:max-content;max-width:min(220px,45%);padding:10px 13px;border:1px solid #ead198;border-radius:12px;background:#fff3d7;color:#254633;box-shadow:0 5px 18px #091f1a66;pointer-events:none;animation:voiceBubbleIn .2s ease-out}
.voice-bubble-heading{display:flex;align-items:center;gap:7px;min-width:0;color:#55714d}
.voice-bubble-name{font-size:10px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:165px}
.voice-bubble-text{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.voice-bubble::after{content:'';position:absolute;width:9px;height:9px;background:#fff3d7;transform:rotate(45deg)}
.voice-bubble[data-position="self"]::after{left:calc(var(--voice-pointer-x) - 4px);bottom:-5px;border-bottom:1px solid #ead198;border-right:1px solid #ead198}
.voice-bubble[data-position="top"]::after{left:calc(var(--voice-pointer-x) - 4px);top:-5px;border-top:1px solid #ead198;border-left:1px solid #ead198}
.voice-bubble[data-position="left"]::after{top:calc(var(--voice-pointer-y) - 4px);left:-5px;border-bottom:1px solid #ead198;border-left:1px solid #ead198}
.voice-bubble[data-position="right"]::after{top:calc(var(--voice-pointer-y) - 4px);right:-5px;border-top:1px solid #ead198;border-right:1px solid #ead198}
.voice-wave{display:flex;align-items:center;gap:2px;height:13px;flex-shrink:0}
.voice-wave i{width:3px;height:10px;background:#79945b;border-radius:2px;animation:voiceWave .65s ease-in-out infinite alternate}
.voice-wave i:nth-child(2){animation-delay:-.3s}.voice-wave i:nth-child(3){animation-delay:-.5s}
@keyframes voiceBubbleIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
@keyframes voiceWave{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.reduce-motion .voice-bubble,.reduce-motion .voice-wave i{animation:none}
@media(prefers-reduced-motion:reduce){.voice-bubble,.voice-wave i{animation:none}}
.history-chat{margin:5px 0;padding:7px 8px;border:1px solid #d2be8040;border-radius:8px;background:#38553b55;line-height:1.6}
.history-chat>div{display:flex;align-items:center;gap:5px;min-width:0;margin-bottom:3px}
.history-chat strong{color:#e9d8a7;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.history-chat>span{display:block;overflow-wrap:anywhere;color:#e1e5cb}
.history-voice-icon{color:#e8cf96;flex-shrink:0}
.history-chat button{margin-left:auto;padding:2px 6px;flex-shrink:0;font-size:10px;border-radius:6px}
.history-dialog{max-height:60dvh;min-width:0;padding-right:5px}
.compact-history-button{display:none}
@media(max-width:1100px),(max-height:560px) and (min-width:600px){.compact-history-button{display:inline-block}}
@media(max-width:760px){.room-controls{flex-wrap:wrap;justify-content:flex-end}.voice-bubble{max-width:min(165px,48%);padding:7px 9px;gap:4px;border-radius:9px}.voice-bubble-text{font-size:11px;line-height:1.5}.voice-bubble-name{font-size:9px}}
#game .table.is-ended .hand .tile{cursor:default}
#game .table.is-ended .hand .tile:hover{transform:none}
#game .table.is-ended .opponent{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6d8e67 #214834;overscroll-behavior:contain}
#game .table.is-ended .opponent.top{max-height:100%;padding-top:8px}
#game .table.is-ended .opponent.top .seat-player{margin:0 auto;padding-top:0;padding-bottom:5px}
#game .table.is-ended .opponent.top .avatar{display:none}
#game .table.is-ended .opponent.top .player-label{margin-bottom:2px}
#game .table.is-ended .opponent.top .flowers{font-size:8px;line-height:10px}
#game .table.is-ended .opponent-tiles{position:static;display:flex;flex-direction:column;align-items:center;gap:5px;margin:3px 0}
#game .table.is-ended .opponent.top .opponent-tiles{flex-direction:row;gap:6px}
#game .table.is-ended .opponent-exposed{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;max-height:none;max-width:100%;width:auto;overflow:visible}
#game .table.is-ended .opponent.top .opponent-exposed{flex-shrink:0;max-width:35%}
#game .table.is-ended .opponent.top .flower-zone{padding:2px;gap:3px}
#game .table.is-ended .opponent.top .flower-card{gap:2px}
.revealed-hand{display:grid;grid-template-columns:repeat(3,24px);gap:4px 3px;justify-content:center;--tile:24px;padding:2px}
.opponent.top .revealed-hand{display:flex;flex-wrap:wrap;gap:3px;--tile:22px}
#game .table.is-ended .opponent .flower-card .tile{width:18px}
#game .table.is-ended .opponent .meld .tile{width:18px}
#game .table.is-ended .opponent .flower-caption{font-size:7px;line-height:9px}
#game .table.is-ended .playfield{align-items:stretch;justify-items:stretch}
#game .table.is-ended .center{align-self:center;justify-self:center}
#game .table.is-ended .river{width:100%;height:100%;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;grid-template-columns:repeat(auto-fit,var(--small));gap:5px 3px;padding:3px;transform:none;scrollbar-width:thin;scrollbar-color:#6d8e67 #214834;overscroll-behavior:contain}
#game .table.is-ended .river .river-caption{grid-column:1/-1;text-align:center;color:#c8d7be;font-size:9px;line-height:12px}
#game .table.is-ended .river.top,#game .table.is-ended .river.self{grid-column:1/-1;width:min(100%,360px);justify-self:center}
#game .table.is-ended .opponent::-webkit-scrollbar,#game .table.is-ended .river::-webkit-scrollbar{width:5px;height:5px;background:transparent}
#game .table.is-ended .opponent::-webkit-scrollbar-thumb,#game .table.is-ended .river::-webkit-scrollbar-thumb{border-radius:4px;background:#a6bf8e60}
.win-notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;display:flex;align-items:center;gap:16px;width:max-content;max-width:min(360px,calc(100vw - 48px));padding:19px 23px;border:1px solid #efd39b;border-radius:18px;background:linear-gradient(135deg,#344c36f5,#183c2df5);box-shadow:0 0 0 5px #e4c17e15,0 12px 38px #08241dc0;pointer-events:none}
.win-notice-symbol{display:grid;place-items:center;flex-shrink:0;width:66px;height:66px;border:1px solid #efca82;border-radius:50%;background:radial-gradient(circle,#bb543b,#823a2c);color:#ffe8af;font:bold 43px "SimSun",serif;box-shadow:inset 0 0 0 4px #edc47c28,0 0 24px #e8bd6140}
#winNoticeTitle{display:block;color:#f5d99b;font-size:19px;letter-spacing:2px;margin-bottom:8px}
.win-notice-player{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:5px 0;color:#d8e4c8;font-size:12px;line-height:1.5}
.win-notice-player strong{max-width:180px;overflow-wrap:anywhere;color:#ffedc2;font-size:16px}
.win-notice-player .tile{width:24px;margin-left:3px}
@media(max-width:760px){.win-notice{gap:10px;padding:13px 16px;border-radius:14px}.win-notice-symbol{width:47px;height:47px;font-size:32px}#winNoticeTitle{font-size:16px;margin-bottom:5px}.win-notice-player{gap:5px;font-size:10px}.win-notice-player strong{max-width:140px;font-size:13px}.win-notice-player .tile{width:20px}}
.table-discard{display:flex;position:relative;justify-content:center;padding-bottom:3px}
.table-discard.taken{opacity:.5}
.table-discard small{position:absolute;bottom:0;font-size:7px;line-height:9px;background:#183c2de0;color:#f2ddb0}
@media(max-width:760px){
 .revealed-hand{grid-template-columns:repeat(3,17px);--tile:17px;gap:4px 2px}
 .opponent.top .revealed-hand{--tile:13px;gap:2px}
 #game .table.is-ended .opponent.top .seat-player{padding-left:3px;padding-right:3px}
 #game .table.is-ended .opponent,#game .table.is-ended .river{scrollbar-width:none}
 #game .table.is-ended .opponent::-webkit-scrollbar,#game .table.is-ended .river::-webkit-scrollbar{display:none}
 #game .table.is-ended .opponent.top{padding-top:5px}
 #game .table.is-ended .opponent.top .avatar{display:none}
 #game .table.is-ended .opponent.top .flowers{font-size:7px;line-height:10px}
 #game .table.is-ended .opponent.top .player-label{margin-bottom:2px}
 #game .table.is-ended .opponent-tiles{gap:4px}
 #game .table.is-ended .opponent .flower-card .tile,#game .table.is-ended .opponent .meld .tile{width:14px}
 #game .table.is-ended .river{--small:16px;gap:4px 2px;padding:2px}
 #game .table.is-ended .river .river-caption{font-size:7px;line-height:9px}
 #game .ended-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:5px 0}
 .ended-copy>strong{font-size:11px}.ended-copy>span{font-size:9px}
 .ended-buttons{justify-content:flex-end;gap:6px}
 .ended-buttons button{font-size:11px;min-height:32px;padding:6px 9px}
}
@media(min-width:761px) and (min-height:561px) and (max-height:850px){
 .revealed-hand{grid-template-columns:repeat(3,18px);--tile:18px;gap:4px 2px}
 .opponent.top .revealed-hand{--tile:17px}
 #game .table.is-ended .opponent .avatar{display:none}
 #game .table.is-ended .opponent .flowers{font-size:8px;line-height:10px}
 #game .table.is-ended .opponent .flower-card .tile,#game .table.is-ended .opponent .meld .tile{width:14px}
}
@media(max-height:560px) and (min-width:600px){
 .revealed-hand{grid-template-columns:repeat(4,15px);--tile:15px;gap:4px 2px}
 .opponent.top .revealed-hand{--tile:14px}
 #game .table.is-ended .opponent .avatar,#game .table.is-ended .opponent.top .flowers{display:none}
 #game .table.is-ended .opponent .flower-card .tile,#game .table.is-ended .opponent .meld .tile{width:13px}
 #game .ended-controls{display:flex;gap:8px;padding:3px 0}
 .ended-copy>span{display:none}
 .ended-buttons button{min-height:30px;font-size:11px;padding:5px 8px}
}