/* One physical table: felt, rim, apron, legs and the player's tiles share a scene. */
.game-screen { background:radial-gradient(ellipse at 50% 37%,#5f3a6f22,transparent 65%); }
.game-layout { width:min(1200px,calc(100% - 24px)); height:calc(100svh - 76px); min-height:660px; max-height:880px; position:relative; display:block; padding:0; isolation:isolate; }
.game-layout::before { content:"";position:absolute;inset:55px 65px 0;background:url('../assets/scenery/table-v21.svg') center / 100% 100% no-repeat;z-index:-1;pointer-events:none; }
.game-table,.has-reaction .game-table { position:absolute;inset:0 0 115px;height:auto;max-height:none;min-height:0;display:grid;grid-template-columns:175px minmax(0,1fr) 175px;grid-template-rows:175px minmax(0,1fr) 30px;gap:0;padding:0;border:0;outline:0;border-radius:0;background:none;box-shadow:none;overflow:visible; }
.game-table::before,.game-table::after,.table-center::before { display:none; }
.seat,.seat.is-active,.seat--0,.seat--2 { background:none;border:0;box-shadow:none;border-radius:0; }
.anime-seat .character-figure,.anime-seat.is-active .character-figure { background:none;border:0;border-radius:0;box-shadow:none;overflow:visible; }
.anime-seat .character-figure img { filter:drop-shadow(0 10px 9px #09091266); }
.seat--2 { display:flex;flex-direction:column;position:relative;grid-area:1 / 2;align-self:start;padding:0;gap:2px; }
.seat--2 .seat-avatar,.seat--2 .character-figure { width:175px;height:146px; }
.seat--2 .seat-copy { position:absolute;left:calc(50% + 91px);bottom:50px;text-align:left;min-width:130px; }
.seat--2 .back-row { position:absolute;top:142px;left:50%;transform:translateX(-50%); }
.seat--2 .meld-row { position:absolute;top:183px;left:50%;transform:translateX(-50%); }
.seat--1,.seat--3 { grid-row:1 / 4;align-self:center;gap:5px;padding:0; }
.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { height:275px;width:190px; }
.seat-copy b { font-size:17px;text-shadow:0 2px 4px #000; }.seat-copy > span { font-size:10px;text-shadow:0 1px 3px #000; }
.seat--1 .back-row,.seat--3 .back-row { position:absolute;top:47%;width:330px; }
.seat--3 .back-row { left:100%;transform:translate(-50%,-50%) rotate(90deg); }
.seat--1 .back-row { right:100%;transform:translate(50%,-50%) rotate(-90deg); }
.back-row { display:flex;width:max-content;max-width:none;gap:1px;min-height:39px; }
.back-row > .tile-back { --tile-width:25px;margin:0;flex:0 0 auto; }
.seat--3 .meld-row { position:absolute;left:calc(100% + 36px);top:72%;width:100px;transform:rotate(90deg); }
.seat--1 .meld-row { position:absolute;right:calc(100% + 36px);top:72%;width:100px;transform:rotate(-90deg); }
.table-center { grid-area:2 / 2;position:relative;inset:12px 65px 0;width:calc(100% - 130px);height:calc(100% - 12px);z-index:2; }
.rivers { inset:10px 0 14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:10px; }
.river,.river:not(:empty),.river:empty { background:transparent;border:0;border-radius:0;padding:17px 4px 0;box-shadow:none;gap:4px;grid-auto-rows:39px;grid-template-columns:repeat(6,minmax(0,1fr)); }
.river--2 { grid-area:1 / 1 / 2 / 3;grid-template-columns:repeat(10,minmax(0,1fr)); }.river--3 { grid-area:2 / 1; }.river--1 { grid-area:2 / 2; }.river--0 { grid-area:3 / 1 / 4 / 3;grid-template-columns:repeat(10,minmax(0,1fr)); }
.river-label { color:#dbcba888;font-size:8px;letter-spacing:.08em;left:4px;top:1px; }.river-tile > .tile-art { --tile-width:27px; }
.table-seal { top:44%;width:82px;height:68px;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:8px 5px;border:1px solid #c6ad7344;border-radius:14px;background:linear-gradient(135deg,#27362c,#17352d);box-shadow:0 3px 7px #06140d99,inset 0 1px #d8c49a33;z-index:2; }
.seal-mark { grid-column:1 / 3;text-align:center;font:8px Georgia,serif;letter-spacing:2px; }.seal-wall b { font-size:17px; }.seal-wall small { font-size:7px; }.seal-wind { align-self:center;font-size:8px;white-space:normal;text-align:center; }.seal-status { grid-column:1 / 3;font-size:7px;text-align:center; }.table-message { top:calc(44% + 80px);background:none;color:#e7dfcc;font-size:9px;max-width:190px; }
.human-seat { grid-area:3 / 2;position:relative;z-index:5; }.human-seat .seat-copy b { font-size:13px; }.human-seat .seat-copy span { font-size:9px; }.human-seat .meld-row { position:absolute;bottom:31px;right:4px; }
.player-console { position:absolute;left:20%;right:20%;bottom:80px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;z-index:5; }
.hand-heading { min-height:20px;margin:0 2px; }.hand-heading .eyebrow { display:none; }.hand-heading b { font-size:10px;color:#e3d5ba; }.turn-caption { font-size:8px; }
.player-hand { min-height:90px;padding:10px 0 5px;gap:3px;align-items:end; }.tile-button { max-width:48px;min-width:0;transition:transform .15s,filter .15s;animation:none; }.tile-button.is-drawn { margin-left:9px;animation:draw-one .28s ease-out 1; }.tile-button:disabled .tile-face { filter:none; }
.tile-art { background:linear-gradient(145deg,#fffdf1,#e5dbbc);border:0;border-radius:5px;box-shadow:0 3px 0 #d3c299,0 5px 0 #7d5977,0 7px 8px #05110b55,inset 0 1px 1px #fff;overflow:visible; }
.tile-art::after { content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #f4dfb080;box-shadow:inset 1px 1px 2px #fff8;pointer-events:none; }
.tile-art-image { border-radius:inherit; }.tile-back { box-shadow:0 3px 0 #d3bc88,0 5px 0 #462749,0 6px 6px #0007; }
.console-footer { min-height:22px; }.console-footer .text-button { color:#d8c8a8;font-size:9px; }.action-hint { font-size:9px;color:#dfd6c3; }
.reaction-panel { position:absolute;left:-10%;right:-10%;bottom:calc(100% + 14px);margin:0;padding:13px;border:2px solid #e9cd82;background:linear-gradient(135deg,#513359,#252238);box-shadow:0 0 0 4px #ebbd641a,0 12px 35px #0009;animation:opportunity-in .25s ease-out 1;z-index:9; }
.reaction-panel .action-button { animation:none;min-height:50px; }.reaction-panel.is-urgent { border-color:#e1ad7c; }.reaction-panel.is-urgent .reaction-clock { box-shadow:0 0 16px #da9b762d; }
.table-dim { inset:150px 13% 0;border-radius:20px;z-index:4;background:#0d07194d; }
.action-impact { position:fixed;top:44%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:14;animation:action-impact .85s ease-out both; }
.action-impact strong { font:900 clamp(55px,7vw,96px)/1 'Microsoft YaHei',serif;color:#f5e5ce;text-shadow:0 4px 0 #633d6b,0 0 24px #db99e277; }
.impact--peng strong { color:#ecd6ff;font-size:clamp(70px,9vw,118px); }.impact--kong strong { color:#ffe19a;font-size:clamp(85px,11vw,140px);text-shadow:0 5px 0 #815030,0 0 50px #f5c765aa; }
.impact--kong::before { content:"";position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(ellipse,#e8ba6133,transparent 65%);z-index:-1; }
.banter-bubble { position:absolute;z-index:8;max-width:210px;top:220px;left:50%;transform:translateX(-50%);padding:10px 14px;border:1px solid #bf9dc5;border-radius:15px 15px 15px 3px;background:#2c203be8;box-shadow:0 7px 20px #0005;color:#f6e9db;pointer-events:none;animation:opportunity-in .18s ease-out 1; }
.banter-bubble b { display:block;font-size:10px;color:#e5bfe8;margin-bottom:3px; }.banter-bubble span { font-size:12px; }.banter-seat--1 { left:auto;right:6%;transform:none;top:38%; }.banter-seat--3 { left:6%;transform:none;top:38%; }
.result-banner { width:min(720px,calc(100% - 28px));background:radial-gradient(ellipse at 50% 0%,#805483,#34253f 65%,#221b30);border:2px solid #e4c57d;box-shadow:0 0 0 5px #d9b86b20,0 25px 100px #000a,0 0 85px #bf7cd538; }
.win-word { font-size:clamp(64px,9vw,112px);letter-spacing:.08em;text-shadow:0 5px 0 #704079,0 0 50px #ffe19b55; }.victory-line { margin:1px 0 8px;color:#f7d895;font-size:21px;font-weight:800; }
.win-petals i { animation-iteration-count:3; }.winning-hand { justify-content:center; }.winning-tile.is-winning-tile { transform:translateY(-7px); }.winning-tile.is-winning-tile > .tile-art { box-shadow:0 3px 0 #cda75a,0 0 22px #f5d27799; }.winning-hand-panel { padding:17px 12px 10px; }
.table-seal span { font:500 8px/1.15 'Microsoft YaHei',sans-serif;letter-spacing:0;min-width:0; }
.table-seal .seal-mark { font:8px/1 Georgia,serif;letter-spacing:2px; }
.table-seal .seal-status { font-size:7px;white-space:normal; }
.table-seal .seal-wall b { margin:0;font-size:17px; }.table-seal .seal-wall small { margin:0;font-size:7px; }
.winning-hand { padding:11px 3px 9px; }
html[lang="en"] .win-word { font-size:clamp(42px,6vw,85px);letter-spacing:.01em;text-align:center; }
@keyframes draw-one { from { opacity:.4;transform:translateY(-10px); } to { opacity:1;transform:translateY(0); } }
@keyframes opportunity-in { from { opacity:0;scale:.94; } to { opacity:1;scale:1; } }
@keyframes action-impact { 0% { opacity:0;scale:1.5; } 18% { opacity:1;scale:1; } 75% { opacity:1;scale:1; } 100% { opacity:0;scale:1.05; } }
@media(max-width:1100px) {
 .game-layout { min-height:620px; }.game-layout::before { inset:60px 25px 0; }.game-table,.has-reaction .game-table { grid-template-columns:135px minmax(0,1fr) 135px;grid-template-rows:170px minmax(0,1fr) 30px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:150px;height:225px; }.table-center { inset-inline:40px;width:calc(100% - 80px); }.back-row > .tile-back { --tile-width:23px; }.seat--1 .back-row,.seat--3 .back-row { width:300px; }.player-console { left:18%;right:18%;bottom:69px; }.tile-button { max-width:44px; }.player-hand { min-height:78px; }
}
@media(max-width:800px) {
 .game-layout { height:calc(100svh - 74px);min-height:670px; }.game-layout::before { inset:90px 4px 0; }.game-table,.has-reaction .game-table { grid-template-columns:100px minmax(0,1fr) 100px;grid-template-rows:190px minmax(0,1fr) 25px;inset-bottom:120px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:125px;height:195px; }.seat-copy b { font-size:13px; }.seat-copy > span { font-size:8px; }.seat--2 .seat-avatar,.seat--2 .character-figure { width:160px;height:158px; }.seat--2 .back-row { top:159px; }.back-row > .tile-back { --tile-width:21px; }.seat--1 .back-row,.seat--3 .back-row { width:280px; }.table-center { inset-inline:23px;width:calc(100% - 46px); }.rivers { gap:8px; }.river { grid-auto-rows:34px;gap:2px; }.river-tile > .tile-art { --tile-width:24px; }.player-console { left:16%;right:16%;bottom:68px; }.player-hand { min-height:71px;gap:2px; }.tile-button { max-width:36px; }.meld > .tile-art { --tile-width:17px; }.reaction-panel { left:-6%;right:-6%; }.banter-bubble { max-width:170px; }
}
@media(max-width:520px) {
 .game-layout { width:calc(100% - 8px);height:calc(100svh - 63px);min-height:670px;max-height:none; }.game-layout::before { inset:70px -5px 45px;background-size:100% 100%; }.game-table,.has-reaction .game-table { inset:0 0 167px;grid-template-columns:62px minmax(0,1fr) 62px;grid-template-rows:163px minmax(0,1fr) 22px; }.seat--1 .seat-avatar,.seat--3 .seat-avatar,.seat--1 .character-figure,.seat--3 .character-figure { width:80px;height:140px; }.seat--2 .seat-avatar,.seat--2 .character-figure { width:112px;height:135px; }.seat--2 .back-row { top:137px; }.seat--2 .seat-copy { left:calc(50% + 55px);min-width:75px;bottom:45px; }.seat-copy b { font-size:10px; }.seat--2 .seat-copy b { font-size:11px; }.seat-copy > span { font-size:7px; }.back-row > .tile-back { --tile-width:16px; }.back-row { min-height:25px;gap:0; }.seat--1 .back-row,.seat--3 .back-row { width:225px;top:43%; }.seat--1 .meld-row,.seat--3 .meld-row { width:80px;top:85%; }.seat--3 .meld-row { left:calc(100% + 12px); }.seat--1 .meld-row { right:calc(100% + 12px); }.seat--2 .meld-row { top:165px; }.meld > .tile-art { --tile-width:13px; }.table-center { inset:12px 13px 0;width:calc(100% - 26px);height:calc(100% - 12px); }.rivers { inset:2px 0 10px;gap:7px;grid-template-rows:1fr 1fr 1fr; }.river,.river:not(:empty),.river:empty { grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:28px;padding:13px 0 0;gap:3px 1px; }.river--2,.river--0 { grid-template-columns:repeat(6,minmax(0,1fr)); }.river-tile > .tile-art { --tile-width:20px; }.river-label { font-size:6px;letter-spacing:0; }.table-seal { width:61px;height:59px;padding:5px 3px;top:43%; }.seal-wall b { font-size:13px; }.seal-wall small,.seal-wind { font-size:6px; }.seal-status { font-size:6px; }.table-message { top:calc(43% + 64px);font-size:7px;max-width:115px; }.player-console { left:7%;right:7%;bottom:119px; }.player-hand { min-height:55px;gap:1px;padding:7px 0 4px; }.tile-button { max-width:27px; }.tile-button.is-drawn { margin-left:5px; }.hand-heading b { font-size:8px; }.turn-caption { font-size:7px; }.console-tools { gap:6px; }.console-footer .text-button,.action-hint { font-size:8px; }.human-seat { margin-top:-2px; }.human-seat .seat-copy b { font-size:10px; }.human-seat .seat-copy span { font-size:7px; }.human-seat .meld-row { bottom:24px;right:0; }.reaction-panel { left:-2%;right:-2%;bottom:calc(100% + 13px);padding:10px 8px;grid-template-columns:42px minmax(0,1fr);gap:8px; }.reaction-heading h2 { font-size:13px; }.reaction-heading span { font-size:7px; }.reaction-panel .action-button { min-width:48px;min-height:48px;font-size:16px; }.reaction-panel .action-button--win { min-width:57px; }.table-dim { inset:135px 8% 0; }.banter-bubble { max-width:135px;padding:7px 10px; }.banter-bubble span { font-size:10px; }.banter-seat--2 { top:170px; }.banter-seat--1,.banter-seat--3 { top:33%; }.banter-seat--1 { right:2%; }.banter-seat--3 { left:2%; }.result-banner { padding:19px 10px; }.win-word { font-size:66px; }.victory-line { font-size:18px; }.winning-tile > .tile-art { --tile-width:23px; }.winning-hand { gap:1px; }.winning-hand-panel { padding:15px 5px 8px; }
}
@media(max-width:520px) {
 .game-layout { height:calc(100svh - 63px);max-height:720px;min-height:650px; }
 .game-layout::before { inset:100px -5px 90px; }
 .seat--1 .back-row,.seat--3 .back-row { top:55%; }
 .anime-seat { z-index:3; }.seat--1,.seat--3 { overflow:visible; }
}
.seat--1[data-celebration="calm"] .character-figure img,.seat--2[data-celebration="calm"] .character-figure img,.seat--3[data-celebration="calm"] .character-figure img { animation:calm-win .75s ease-out 2; }
.anime-seat[data-celebration="confident"] .character-figure img { animation:confident-win .65s ease-out 2; }
.anime-seat[data-celebration="joyful"] .character-figure img { animation:character-happy .55s ease-in-out 3; }
@keyframes calm-win { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes confident-win { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@media(prefers-reduced-motion:reduce) { .tile-button,.action-impact,.reaction-panel,.win-petals i,.character-figure img { animation:none!important;transition:none!important; } }