:root{
  color-scheme:dark;--ink:#f7ecd3;--muted:#a9b8ae;--gold:#e8bd67;--gold-2:#a76b21;
  --red:#cf5143;--green:#0c4d3d;--green-2:#0a3028;--deep:#061512;--line:#d9b86b36;
  --tile-w:clamp(28px,3.05vw,44px);--tile-h:calc(var(--tile-w)*1.42);--safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--deep);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
body{min-height:100svh;overflow-x:hidden}
button,input,select{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffd87a;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.45;filter:saturate(.4)}
.skip-link{position:fixed;z-index:9999;top:8px;left:8px;transform:translateY(-150%);padding:10px 14px;border-radius:8px;background:#fff;color:#111}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% -10%,#1e685088,transparent 42%),linear-gradient(145deg,#071d18,#04110f 70%)}
.ambient:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(120deg,transparent 48%,#fff2 49%,transparent 50%);background-size:70px 70px}
.ambient i{position:absolute;border-radius:50%;filter:blur(1px);opacity:.18;background:#d6aa59}
.ambient i:nth-child(1){width:330px;height:330px;right:-160px;top:8%}.ambient i:nth-child(2){width:180px;height:180px;left:-60px;bottom:9%}.ambient i:nth-child(3){width:5px;height:5px;left:21%;top:24%;box-shadow:240px 90px #fff,580px -50px #e8bd67,790px 260px #fff}.ambient i:nth-child(4){inset:0;border-radius:0;opacity:.03;background:repeating-radial-gradient(circle,#fff 0 1px,transparent 1px 4px)}
main{position:relative;z-index:1}
.eyebrow,.section-kicker{margin:0 0 8px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}

/* Lobby */
.lobby{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(350px,470px);align-items:center;gap:clamp(40px,7vw,110px);padding:max(38px,6vh) max(28px,8vw)}
.lobby-hero{max-width:700px}.brand-lockup{display:flex;align-items:center;gap:24px}.brand-seal{display:grid;place-items:center;width:98px;height:98px;flex:0 0 auto;border:1px solid #ffd48499;border-radius:25px 25px 25px 8px;background:linear-gradient(145deg,#c94b3b,#7c201b);box-shadow:0 18px 50px #0008,inset 0 0 0 5px #fff1;color:#fff6e2;font:900 58px Georgia,"STKaiti",serif;transform:rotate(-3deg)}
.brand-lockup h1{margin:0;font:800 clamp(48px,6vw,78px)/.95 Georgia,"Songti SC",serif;letter-spacing:.12em;text-shadow:0 10px 34px #000}.brand-lockup h1 em{display:inline-block;margin-left:4px;color:var(--gold);font:800 15px system-ui;letter-spacing:.08em;vertical-align:top}.tagline{margin:15px 0 0;color:#cfdbd4;font-size:clamp(15px,1.5vw,19px);letter-spacing:.14em}
.feature-strip{display:flex;flex-wrap:wrap;gap:10px;margin:42px 0 34px}.feature-strip span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#0c2c2488;color:#dce6df;font-size:13px}.feature-strip b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d1a7541c;color:var(--gold);font-family:serif}
.rules-glance{padding-top:28px;border-top:1px solid var(--line)}.rules-glance h2{margin:0 0 22px;font:700 clamp(22px,2.3vw,30px) Georgia,"Songti SC",serif}.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.rules-grid article{min-height:110px;padding:17px;border:1px solid #d9b86b24;border-radius:14px;background:linear-gradient(145deg,#0d3027a8,#071b17cc);box-shadow:0 14px 28px #0002}.rules-grid strong{display:block;margin-bottom:12px;color:#d4ad63;font:700 17px Georgia}.rules-grid span{color:#b9c7bf;font-size:13px;line-height:1.7}
.lobby-card{width:100%;padding:clamp(24px,3vw,36px);border:1px solid #e4c27655;border-radius:25px;background:linear-gradient(150deg,#0b2822f2,#071814f4);box-shadow:0 30px 90px #0009,inset 0 1px #fff1;backdrop-filter:blur(18px)}.card-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:24px}.card-heading h2{margin:0;font:800 32px Georgia,"Songti SC",serif}.live-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #6fce9e44;border-radius:999px;background:#49ae7920;color:#91d6b2;font-size:12px}.live-pill i,.online-dot{width:7px;height:7px;border-radius:50%;background:#6ed69e;box-shadow:0 0 10px #6ed69e}
.field{display:block;color:#b8c5bd;font-size:12px;font-weight:700;letter-spacing:.06em}.field input,.field select{width:100%;height:50px;margin-top:8px;padding:0 15px;border:1px solid #cfb06d45;border-radius:11px;background:#f8f4e8;color:#15231f;font-size:16px;letter-spacing:normal}.field input::placeholder{color:#7f8984}.field select{appearance:auto}.settings-row{display:grid;grid-template-columns:1.35fr .8fr;align-items:end;gap:14px;margin:18px 0}fieldset{min-width:0;margin:0;padding:0;border:0}legend{margin-bottom:8px;color:#b8c5bd;font-size:12px;font-weight:700;letter-spacing:.06em}.segmented{display:grid;grid-template-columns:repeat(3,1fr);height:50px;padding:4px;border:1px solid #cfb06d33;border-radius:11px;background:#05130f}.segmented label{position:relative;display:grid;place-items:center;cursor:pointer}.segmented input{position:absolute;opacity:0}.segmented span{display:grid;place-items:center;width:100%;height:100%;border-radius:8px;color:#9caaa2;font-size:13px;font-weight:800}.segmented input:checked+span{background:#cfaa5b;color:#241807;box-shadow:0 4px 12px #0005}.segmented input:focus-visible+span{outline:2px solid #fff}
.primary-button,.secondary-button,.icon-button,.quiet-button,.gold-action,.claim-action,.hu-action,.pass-action,.que-action,.confirm-action,.quiet-action{border:0;border-radius:11px;cursor:pointer;font-weight:800;transition:transform .15s,filter .15s,background .15s}.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 19px;background:linear-gradient(135deg,#f0cd7c,#b97c26);box-shadow:0 12px 24px #a2642733;color:#241708}.primary-button small{font-size:11px;font-weight:600;opacity:.68}.primary-button:hover,.secondary-button:hover,.gold-action:hover,.claim-action:hover,.hu-action:hover,.que-action:hover{transform:translateY(-2px);filter:brightness(1.08)}.secondary-button{height:50px;padding:0 20px;border:1px solid #dab96855;background:#12382f;color:#f7e6c4}.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#768b80;font-size:11px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#fff1}.join-row{display:grid;grid-template-columns:1fr auto;gap:10px}.room-field input{margin:0;text-transform:uppercase;letter-spacing:.2em}.resume-box{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;margin-top:14px;padding:11px;border:1px solid #dcb86733;border-radius:11px;background:#c19b4810}.resume-box div{display:grid;gap:2px}.resume-box span{color:#8ea198;font-size:11px}.resume-box b{color:#e6c579;letter-spacing:.12em}.resume-box button{padding:8px 11px;border:0;border-radius:8px;background:#b78636;color:#fff;font-size:12px;font-weight:800;cursor:pointer}.resume-box .quiet-button{background:transparent;color:#9dafa6}.form-error{min-height:18px;margin:12px 0 0;color:#ff968c;font-size:13px}.privacy-note{margin:2px 0 0;color:#71847a;text-align:center;font-size:11px}

/* Game frame */
.at-table{overflow:hidden}.game{height:100svh;min-height:590px;padding-top:58px;background:radial-gradient(circle at 45% 45%,#123b30,#061511 68%)}.topbar{position:fixed;z-index:100;top:0;left:0;right:0;height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(14px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#061512ec;backdrop-filter:blur(15px)}.topbar-brand{display:flex;align-items:center;gap:8px}.topbar-brand span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#a9352d;color:#fff;font-family:serif}.topbar-brand b{font-family:Georgia,"Songti SC",serif;letter-spacing:.15em}.topbar-brand small{padding:2px 5px;border-radius:4px;background:#e3bb6730;color:var(--gold);font-size:9px}.room-meta{display:flex;align-items:center;gap:8px;color:#8fa198;font-size:12px}.room-meta b{color:#f0d18d;font-size:14px;letter-spacing:.18em}.topbar-actions{display:flex;justify-content:flex-end;gap:6px}.icon-button{min-width:42px;min-height:36px;padding:0 10px;border:1px solid #dbc07830;background:#0c2a23;color:#c8d4cd;font-size:12px}.danger-quiet{color:#d9968f}.mobile-only{display:none}
.game-shell{height:calc(100svh - 58px);display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;padding:12px}.table-wrap{min-width:0;min-height:0;display:grid;place-items:center}.mahjong-table{position:relative;width:min(100%,calc((100svh - 82px)*1.38));max-height:calc(100svh - 82px);aspect-ratio:1.38;border:8px solid #765035;border-radius:38px;background:#173f34;box-shadow:0 35px 70px #000b,inset 0 0 0 3px #aa8054;overflow:hidden;isolation:isolate}.table-felt{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#25705a 0,#15503f 55%,#0d382e 100%)}.table-felt:before{content:"";position:absolute;inset:0;opacity:.09;background:repeating-linear-gradient(43deg,transparent 0 3px,#fff 3px 4px)}.table-line{position:absolute;inset:22%;border:1px solid #d4b36322;border-radius:22px;transform:rotate(45deg)}
.side-panel{min-height:0;padding:18px;border:1px solid var(--line);border-radius:18px;background:#071a16df;box-shadow:0 20px 50px #0005;overflow:auto;scrollbar-width:thin;scrollbar-color:#8f7240 #071a16}.side-head{display:flex;justify-content:space-between;align-items:start}.side-head h2{margin:0;font:800 22px Georgia,"Songti SC",serif}.scoreboard,.feed{margin-top:20px}.side-panel h3{margin:0 0 10px;color:#91a49a;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.score-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #fff1}.rank{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff1;color:#aebbb4;font-size:10px}.score-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.score-row strong{font-size:14px}.positive{color:#f1c96e!important}.negative{color:#ed8278!important}.feed-item{position:relative;display:grid;grid-template-columns:12px 1fr;gap:7px;padding:9px 0;border-bottom:1px solid #fff1}.feed-dot{width:6px;height:6px;margin-top:6px;border-radius:50%;background:#536a5f}.feed-item.latest .feed-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}.feed-item p{margin:0;color:#bdc9c2;font-size:12px;line-height:1.55}.empty-copy{color:#758a80;font-size:12px}.rules-detail{margin-top:22px;border-top:1px solid #fff1;padding-top:14px;color:#91a39a;font-size:12px;line-height:1.6}.rules-detail summary{cursor:pointer;color:#d9c391;font-weight:700}.rule-tags{display:flex;flex-wrap:wrap;gap:5px}.rule-tags span{padding:4px 7px;border-radius:999px;background:#fff1;color:#bac7c0;font-size:10px}

/* Table seats */
.seats{position:absolute;inset:0}.seat{position:absolute;z-index:5}.player-card{position:relative;display:flex;align-items:center;gap:7px;min-width:140px;max-width:175px;padding:7px 9px;border:1px solid #d5b36230;border-radius:12px;background:#061915e8;box-shadow:0 7px 18px #0006;transition:.2s}.player-avatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:2px solid #d5b86f;border-radius:50%;background:linear-gradient(135deg,#e5c77d,#81502c);color:#21170d;font:900 13px Georgia}.player-copy{display:grid;min-width:0;gap:2px}.player-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.you-tag{margin-left:4px;color:var(--gold);font-size:9px;font-style:normal}.player-status{display:flex;align-items:center;gap:5px;color:#91a59b;font-size:9px}.online-dot,.offline-dot{width:5px;height:5px;flex:0 0 auto}.offline-dot{border-radius:50%;background:#8c5d58}.player-badges{position:absolute;display:flex;gap:3px;right:5px;top:-8px}.player-badges i{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:6px;box-shadow:0 2px 6px #0005;font-size:9px;font-style:normal;font-weight:900}.dealer-badge{background:#d6ac54;color:#241909}.que-badge{background:#122c26;color:#e2d2aa;border:1px solid #b99c5e55}.win-badge{background:#c63e35;color:#fff}.seat.is-turn .player-card{border-color:#f0c76c;box-shadow:0 0 0 3px #edc26328,0 0 26px #eec26033}.seat.is-offline .player-card{filter:grayscale(.7);opacity:.72}.seat.has-won .player-card{border-color:#d45c52}.seat-score{position:absolute;display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:7px;background:#05130fc9;font-size:11px}.seat-score small{font-size:9px}.river{position:absolute;display:grid;gap:2px;z-index:3}.meld-area{position:absolute;display:flex;gap:5px}.meld{display:flex;gap:1px;padding:2px;border-radius:5px;background:#081c17aa}.concealed-count{position:absolute;display:flex}.concealed-count i{display:block;width:7px;height:24px;margin-left:-3px;border:1px solid #c9c1a7;border-radius:2px;background:linear-gradient(90deg,#164b40,#2a8069);box-shadow:0 2px 3px #0005}
.seat-0{left:50%;bottom:5px;transform:translateX(-50%)}.seat-0 .player-card{margin:auto}.seat-0 .seat-score{right:-48px;top:10px}.seat-0 .river{width:210px;grid-template-columns:repeat(9,1fr);left:50%;bottom:clamp(135px,17vh,172px);transform:translateX(-50%)}.seat-0 .meld-area{left:calc(50% - min(39vw,390px));bottom:76px}.seat-0 .concealed-count{display:none}
.seat-2{left:50%;top:6px;transform:translateX(-50%)}.seat-2 .player-card{margin:auto}.seat-2 .seat-score{right:-48px;top:10px}.seat-2 .river{width:210px;grid-template-columns:repeat(9,1fr);left:50%;top:72px;transform:translateX(-50%)}.seat-2 .meld-area{right:calc(50% + 80px);top:10px}.seat-2 .concealed-count{left:50%;top:53px;transform:translateX(-50%)}
.seat-1{right:7px;top:50%;transform:translateY(-50%)}.seat-1 .player-card{transform:translateY(-70px)}.seat-1 .seat-score{right:8px;top:-18px}.seat-1 .river{width:112px;grid-template-columns:repeat(6,1fr);right:157px;top:50%;transform:translateY(-50%)}.seat-1 .meld-area{right:8px;top:48px;flex-direction:column}.seat-1 .concealed-count{right:88px;top:-18px;transform:rotate(90deg);transform-origin:right center}
.seat-3{left:7px;top:50%;transform:translateY(-50%)}.seat-3 .player-card{transform:translateY(-70px)}.seat-3 .seat-score{left:8px;top:-18px}.seat-3 .river{width:112px;grid-template-columns:repeat(6,1fr);left:157px;top:50%;transform:translateY(-50%)}.seat-3 .meld-area{left:8px;top:48px;flex-direction:column}.seat-3 .concealed-count{left:88px;top:-18px;transform:rotate(90deg);transform-origin:left center}
.empty-seat{display:grid;place-items:center;gap:4px;color:#8aa096;font-size:10px}.empty-mark{display:grid;place-items:center;width:36px;height:36px;border:1px dashed #b69c664d;border-radius:50%;color:#b69c66;font-size:20px}.empty-seat.seat-0{bottom:24px}.empty-seat.seat-2{top:24px}.empty-seat.seat-1{right:25px}.empty-seat.seat-3{left:25px}

/* Tiles */
.tile{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:var(--tile-w);height:var(--tile-h);padding:1px;border:1px solid #aaa38d;border-bottom-color:#716c5d;border-radius:5px;background:linear-gradient(115deg,#fffef2,#e8e2c9 70%,#c4bca0);box-shadow:inset 1px 1px #fff,0 3px 0 #827c69,0 5px 7px #0005;color:#19251f;line-height:.85;user-select:none}.tile-num{font:900 clamp(15px,1.65vw,23px)/.85 Georgia,"STKaiti",serif}.tile-suit{margin-top:3px;font:800 clamp(8px,.9vw,12px)/1 "Songti SC",serif}.tile-m .tile-num,.tile-w .tile-num{color:#bf312d}.tile-m .tile-suit,.tile-w .tile-suit{color:#202b26}.tile-p .tile-num,.tile-t .tile-num{color:#1b6290}.tile-p .tile-suit,.tile-t .tile-suit{color:#a82c2b}.tile-s .tile-num,.tile-b .tile-num{color:#19704a}.tile-s .tile-suit,.tile-b .tile-suit{color:#16633f}.small-tile{--tile-w:22px;border-radius:3px;box-shadow:inset 1px 1px #fff,0 2px 0 #827c69,0 3px 4px #0005}.small-tile .tile-num{font-size:12px}.small-tile .tile-suit{font-size:7px;margin-top:1px}.tile-back{background:linear-gradient(135deg,#1a6654,#0d4438);border-color:#81a99a;box-shadow:inset 0 0 0 2px #235e50,0 2px 0 #092e27}.hand-area{position:absolute;z-index:20;left:50%;bottom:54px;transform:translateX(-50%);width:min(92%,760px);display:grid;justify-items:center}.hand{display:flex;justify-content:center;gap:2px;width:100%}.hand .tile{border:1px solid #a69f88;cursor:pointer;transition:transform .13s,filter .13s,box-shadow .13s;touch-action:manipulation}.hand .tile:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-5px)}.hand .tile.selected{transform:translateY(-13px);box-shadow:inset 1px 1px #fff,0 3px 0 #827c69,0 0 0 3px #ffd16c,0 10px 18px #0008}.hand .tile.forced-suit:not(.selected):not(:disabled){box-shadow:inset 0 -4px #d64e43,0 3px 0 #827c69,0 5px 7px #0005}.discard-confirm{position:absolute;bottom:calc(var(--tile-h) + 16px);display:flex;align-items:center;gap:7px;padding:6px 7px 6px 12px;border:1px solid #e2c17344;border-radius:12px;background:#061713ed;box-shadow:0 10px 25px #0008}.discard-confirm span{margin-right:3px;color:#cabf9e;font-size:11px}.confirm-action,.quiet-action{min-height:38px;padding:0 13px}.confirm-action{background:linear-gradient(135deg,#e9c56f,#ae7023);color:#281907}.quiet-action{background:#17372f;color:#b8c8bf}

/* Center and controls */
.center-hub{position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%);width:clamp(125px,17vw,176px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;border:1px solid #ddb96855;border-radius:22px;background:linear-gradient(145deg,#071c18e8,#0d3027e8);box-shadow:0 16px 38px #0008,inset 0 1px #fff1;text-align:center}.round-chip{position:absolute;top:8px;padding:3px 8px;border-radius:999px;background:#d2a8531d;color:#e5c77f;font-size:9px;font-weight:800}.timer-ring{--progress:0deg;display:grid;place-items:center;width:45px;height:45px;margin-top:8px;border-radius:50%;background:conic-gradient(var(--gold) var(--progress),#fff1 0);transition:background .25s}.timer-ring:after{content:"";position:absolute;width:37px;height:37px;border-radius:50%;background:#0a241e}.timer-ring span{position:relative;z-index:1;font:800 14px Georgia}.timer-ring.urgent{color:#ff8175;animation:pulse .7s infinite}.center-hub>strong{margin-top:6px;font:800 clamp(14px,1.7vw,19px) Georgia,"Songti SC",serif}.center-hub>span{margin-top:3px;color:#96aaa0;font-size:9px}.hub-stats{display:flex;gap:12px;margin-top:8px}.hub-stats span{display:grid}.hub-stats small{color:#758d82;font-size:7px}.hub-stats b{color:#e6c374;font:700 11px Georgia}.last-tile{position:absolute;right:-34px;bottom:-9px}.exchange-direction{position:absolute;bottom:-22px!important;padding:4px 8px;border-radius:999px;background:#bf9242;color:#191108!important;font-weight:800;white-space:nowrap}.phase-panel{position:absolute;z-index:15;left:50%;bottom:calc(54px + var(--tile-h) + 12px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:13px;max-width:80%;padding:8px 10px;border:1px solid #d7b66833;border-radius:13px;background:#061612dd;box-shadow:0 8px 25px #0006;backdrop-filter:blur(8px)}.phase-copy{display:grid;min-width:130px}.phase-copy strong{font-size:12px}.phase-copy span{color:#93a79d;font-size:9px}.phase-controls{display:flex;align-items:center;justify-content:center;gap:6px}.gold-action,.claim-action,.hu-action,.pass-action,.que-action{min-height:42px;min-width:50px;padding:0 14px}.gold-action{background:linear-gradient(135deg,#edc974,#ad6f20);color:#241608}.claim-action{border:1px solid #e2bc6955;background:#875728;color:#fff1db}.hu-action{min-width:62px;background:linear-gradient(135deg,#e25749,#9d2923);box-shadow:0 5px 15px #ac2d2955;color:#fff}.pass-action{background:#17372f;color:#b7c7bf}.que-action{background:#173a31;color:#f0dfbd}.que-action.suit-m{border-bottom:3px solid #d94d43}.que-action.suit-p{border-bottom:3px solid #428cc2}.que-action.suit-s{border-bottom:3px solid #49a773}.moment-cue{position:absolute;z-index:80;left:50%;top:47%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:128px;height:128px;border:2px solid #ffd687;border-radius:50%;background:#b3362de8;box-shadow:0 0 60px #e85c4a99;color:#fff5da;font:900 48px Georgia,"STKaiti",serif;animation:moment .9s both}.moment-cue-name{font:800 15px/1.1 "Songti SC",sans-serif;letter-spacing:.02em;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moment-cue-word{font-size:48px;line-height:1}.cue-gang{background:#98702d}.cue-peng{background:#296b58}

/* Overlays */
.connection-overlay,.result-modal{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:20px;background:#020b09c9;backdrop-filter:blur(10px)}.connection-card,.result-card{width:min(92vw,510px);padding:30px;border:1px solid #e0bd6e55;border-radius:23px;background:linear-gradient(150deg,#0d3028,#071814);box-shadow:0 28px 80px #000b;text-align:center}.connection-card h2,.result-card h2{margin:13px 0 6px;font:800 30px Georgia,"Songti SC",serif}.connection-card p,.result-reason{margin:0 0 20px;color:#a8bbb1}.connection-mark{display:flex;align-items:end;justify-content:center;gap:5px;height:30px}.connection-mark i{width:7px;border-radius:5px;background:var(--gold);animation:signal 1s infinite}.connection-mark i:nth-child(1){height:10px}.connection-mark i:nth-child(2){height:18px;animation-delay:.12s}.connection-mark i:nth-child(3){height:27px;animation-delay:.24s}.result-card{position:relative;overflow:hidden;text-align:left}.result-card h2{text-align:center}.result-card>.section-kicker,.result-reason{text-align:center}.result-glow{position:absolute;z-index:-1;width:240px;height:240px;top:-180px;left:50%;transform:translateX(-50%);border-radius:50%;background:#e1b659;filter:blur(50px);opacity:.35}.result-list{display:grid;gap:7px}.result-row{display:grid;grid-template-columns:1fr 1.2fr auto;align-items:center;gap:8px;padding:11px;border:1px solid #fff1;border-radius:11px;background:#06171399}.result-row.winner{border-color:#e0b96755;background:#c3983b12}.result-person{display:flex;align-items:center;gap:8px;min-width:0}.result-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.result-rank{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#fff1;color:#c4d0c9;font-size:10px}.result-patterns{color:#9fb2a8;font-size:10px}.result-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:18px}.compact-button{min-height:50px}.toast-region{position:fixed;z-index:1000;left:50%;top:72px;display:grid;gap:7px;transform:translateX(-50%);pointer-events:none}.toast{max-width:min(88vw,420px);padding:10px 15px;border:1px solid #dbc07444;border-radius:10px;background:#0a2922f2;box-shadow:0 8px 25px #0008;color:#e8eee9;font-size:12px;opacity:0;transform:translateY(-8px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{border-color:#da6d6555;color:#ffb0a8}.toast.success{border-color:#71c99b55;color:#a8e2c4}

@keyframes moment{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-12deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(4deg)}70%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes pulse{50%{filter:brightness(1.6)}}@keyframes signal{50%{opacity:.25}} 

@media(max-width:980px){
  .lobby{grid-template-columns:1fr;justify-items:center;padding:50px max(22px,6vw)}.lobby-hero{max-width:760px}.lobby-card{max-width:600px}.rules-grid article{min-height:90px}
  .game-shell{grid-template-columns:1fr}.side-panel{position:fixed;z-index:180;right:0;top:58px;bottom:0;width:min(88vw,330px);border-radius:18px 0 0 18px;transform:translateX(105%);transition:transform .22s}.panel-open .side-panel{transform:none}.panel-open:after{content:"";position:fixed;z-index:170;inset:58px 0 0;background:#0008}.mobile-only{display:inline-grid;place-items:center}.mahjong-table{width:min(100%,calc((100svh - 82px)*1.38))}
}

@media(max-width:700px){
  :root{--tile-w:clamp(24px,7.05vw,32px)}body.at-table{position:fixed;inset:0}.game{min-height:0}.topbar{grid-template-columns:auto 1fr auto;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.topbar-brand b{display:none}.room-meta{justify-content:center}.room-meta>span{display:none}.topbar-actions{gap:3px}.icon-button{min-width:39px;padding:0 7px}.danger-quiet{display:none}
  .game-shell{height:calc(100svh - 58px);padding:4px}.table-wrap{display:block}.mahjong-table{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-width:5px;border-radius:19px}.table-line{inset:29% 18%}
  .player-card{min-width:95px;max-width:118px;padding:5px 6px;gap:5px;border-radius:9px}.player-avatar{width:28px;height:28px;font-size:10px}.player-name{max-width:60px;font-size:10px}.player-status{font-size:7px}.player-badges i{height:17px;min-width:17px;font-size:8px}.seat-score{font-size:9px}
  .seat-0{bottom:max(4px,var(--safe-bottom))}.seat-0 .seat-score,.seat-2 .seat-score{right:-39px}.seat-2{top:3px}.seat-1{right:2px;top:45%}.seat-3{left:2px;top:45%}.seat-1 .player-card,.seat-3 .player-card{transform:translateY(-62px)}
  .small-tile{--tile-w:17px}.small-tile .tile-num{font-size:9px}.small-tile .tile-suit{font-size:6px}.seat-0 .river,.seat-2 .river{width:150px;grid-template-columns:repeat(9,1fr)}.seat-0 .river{bottom:145px}.seat-2 .river{top:57px}.seat-1 .river,.seat-3 .river{width:76px;grid-template-columns:repeat(6,1fr)}.seat-1 .river{right:100px}.seat-3 .river{left:100px}.seat-0 .meld-area{left:4px;bottom:82px}.seat-2 .meld-area{right:99px;top:3px}.seat-1 .meld-area,.seat-3 .meld-area{top:32px}.concealed-count{display:none!important}
  .center-hub{top:43%;width:116px;border-radius:17px}.timer-ring{width:39px;height:39px}.timer-ring:after{width:32px;height:32px}.center-hub>strong{font-size:13px}.hub-stats{margin-top:5px}.last-tile{right:-24px}.phase-panel{bottom:calc(max(50px,var(--safe-bottom)) + var(--tile-h) + 12px);max-width:96%;width:max-content;flex-direction:column;gap:5px;padding:6px 8px}.phase-copy{text-align:center}.phase-copy span{display:none}.phase-controls{flex-wrap:wrap}.gold-action,.claim-action,.hu-action,.pass-action,.que-action{min-height:44px;padding:0 14px}.hand-area{bottom:max(44px,calc(var(--safe-bottom) + 32px));width:99%}.hand{gap:1px}.hand .tile.selected{transform:translateY(-10px)}.discard-confirm{bottom:calc(var(--tile-h) + 12px);white-space:nowrap}.discard-confirm span{display:none}.confirm-action,.quiet-action{min-height:44px}.moment-cue{width:104px;height:104px}.moment-cue-word{font-size:38px}.moment-cue-name{font-size:12px;max-width:76px}
}

@media(max-width:520px){
  .lobby{padding:34px 17px}.brand-lockup{gap:15px}.brand-seal{width:69px;height:69px;border-radius:18px;font-size:40px}.brand-lockup h1{font-size:43px}.tagline{font-size:13px;letter-spacing:.06em}.feature-strip{margin:28px 0 24px}.feature-strip span{font-size:11px}.rules-grid{grid-template-columns:1fr}.rules-grid article{min-height:0}.lobby-card{padding:22px 18px;border-radius:19px}.settings-row{grid-template-columns:1fr}.join-row{grid-template-columns:1fr 104px}.primary-button small{display:none}.resume-box{grid-template-columns:1fr auto}.resume-box .quiet-button{display:none}
}

@media(max-height:680px) and (orientation:landscape){
  :root{--tile-w:clamp(24px,3vw,34px)}.game{padding-top:48px}.topbar{height:48px}.game-shell{height:calc(100svh - 48px);padding:4px}.side-panel{top:48px}.mahjong-table{max-height:calc(100svh - 56px)}.seat-0 .river{bottom:116px}.seat-2 .river{top:58px}.hand-area{bottom:40px}.phase-panel{bottom:calc(40px + var(--tile-h) + 8px)}.player-card{padding:4px 6px}.player-avatar{width:27px;height:27px}.side-panel{padding:12px}.feed-item{padding:5px 0}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Low-height dialogs stay operable; mobile always retains a compact table exit. */
.connection-card,.result-card{max-height:calc(100dvh - 32px);overflow-y:auto}
@media(max-width:700px){
  .danger-quiet{display:inline-grid;place-items:center;font-size:0}
  .danger-quiet:after{content:"退";font-size:12px}
}
@media(max-height:680px) and (orientation:landscape){
  .connection-card,.result-card{padding:18px}
  .result-card h2{margin-top:5px;font-size:24px}
  .result-row{padding:7px}.result-actions{margin-top:10px}
}

/* Traditional tile faces: Chinese characters, circle pips and bamboo motifs. */
.tile{padding:3px 2px 2px;overflow:hidden;contain:layout paint}.tile-face{width:100%;height:100%;pointer-events:none;user-select:none}.face-m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.wan-number{color:#162c43;font:900 clamp(16px,1.7vw,23px)/.82 "STKaiti","KaiTi","Songti SC",serif;text-shadow:0 1px #fff}.wan-mark{color:#b52c28;font:900 clamp(10px,1vw,14px)/.8 "STKaiti","KaiTi",serif}.dot-face,.bamboo-face{display:grid;align-items:center;justify-items:center;gap:4%;padding:7%}.tile-pip{display:block;width:62%;max-width:10px;min-width:3px;aspect-ratio:1;border-radius:50%;color:#175d8b;background:radial-gradient(circle,#f8eac0 0 20%,currentColor 22% 52%,#f8eac0 54% 65%,currentColor 67%);box-shadow:0 0 0 1px #17372f44,inset 0 0 0 1px #fff8}.pip-red{color:#b52c28}.pip-green{color:#176b47}.pip-blue{color:#175d8b}.pip-special{width:82%;max-width:21px;background:radial-gradient(circle,#c72d29 0 15%,#f6df99 17% 27%,#176b47 29% 47%,#f6df99 49% 58%,#175d8b 60% 75%,#123f31 77%);box-shadow:0 0 0 1px #17403255}
.dot-face.count-1{display:grid;place-items:center;padding:12%}.dot-face.count-2{grid-template:repeat(2,1fr)/1fr}.dot-face.count-3,.dot-face.count-5,.dot-face.count-7,.dot-face.count-9{grid-template:repeat(3,1fr)/repeat(3,1fr)}.dot-face.count-4{grid-template:repeat(2,1fr)/repeat(2,1fr)}.dot-face.count-6{grid-template:repeat(3,1fr)/repeat(2,1fr)}.dot-face.count-8{grid-template:repeat(4,1fr)/repeat(2,1fr)}.dot-face.count-3 .tile-pip:nth-child(1){grid-area:1/1}.dot-face.count-3 .tile-pip:nth-child(2){grid-area:2/2}.dot-face.count-3 .tile-pip:nth-child(3){grid-area:3/3}.dot-face.count-5 .tile-pip:nth-child(1){grid-area:1/1}.dot-face.count-5 .tile-pip:nth-child(2){grid-area:1/3}.dot-face.count-5 .tile-pip:nth-child(3){grid-area:2/2}.dot-face.count-5 .tile-pip:nth-child(4){grid-area:3/1}.dot-face.count-5 .tile-pip:nth-child(5){grid-area:3/3}.dot-face.count-7 .tile-pip:nth-child(1){grid-area:1/1}.dot-face.count-7 .tile-pip:nth-child(2){grid-area:1/2}.dot-face.count-7 .tile-pip:nth-child(3){grid-area:1/3}.dot-face.count-7 .tile-pip:nth-child(4){grid-area:2/1}.dot-face.count-7 .tile-pip:nth-child(5){grid-area:2/3}.dot-face.count-7 .tile-pip:nth-child(6){grid-area:3/1}.dot-face.count-7 .tile-pip:nth-child(7){grid-area:3/3}
.bamboo-face.count-2{grid-template:1fr/repeat(2,1fr)}.bamboo-face.count-3{grid-template:1fr/repeat(3,1fr)}.bamboo-face.count-4{grid-template:repeat(2,1fr)/repeat(2,1fr)}.bamboo-face.count-5,.bamboo-face.count-7,.bamboo-face.count-9{grid-template:repeat(3,1fr)/repeat(3,1fr)}.bamboo-face.count-6{grid-template:repeat(2,1fr)/repeat(3,1fr)}.bamboo-face.count-8{grid-template:repeat(4,1fr)/repeat(2,1fr)}.bamboo-face.count-5 .bamboo-stick:nth-child(1){grid-area:1/1}.bamboo-face.count-5 .bamboo-stick:nth-child(2){grid-area:1/3}.bamboo-face.count-5 .bamboo-stick:nth-child(3){grid-area:2/2}.bamboo-face.count-5 .bamboo-stick:nth-child(4){grid-area:3/1}.bamboo-face.count-5 .bamboo-stick:nth-child(5){grid-area:3/3}.bamboo-face.count-7 .bamboo-stick:nth-child(1){grid-area:1/1}.bamboo-face.count-7 .bamboo-stick:nth-child(2){grid-area:1/2}.bamboo-face.count-7 .bamboo-stick:nth-child(3){grid-area:1/3}.bamboo-face.count-7 .bamboo-stick:nth-child(4){grid-area:2/1}.bamboo-face.count-7 .bamboo-stick:nth-child(5){grid-area:2/3}.bamboo-face.count-7 .bamboo-stick:nth-child(6){grid-area:3/1}.bamboo-face.count-7 .bamboo-stick:nth-child(7){grid-area:3/3}.bamboo-face{column-gap:9%;row-gap:3%;padding:5% 8%}.bamboo-stick{--stem-dark:#07472f;--stem:#238b5b;--stem-light:#72c893;position:relative;display:block;width:68%;min-width:3px;max-width:6px;height:94%;min-height:5px;border-radius:0;clip-path:polygon(50% 0,100% 12%,82% 43%,100% 50%,82% 88%,50% 100%,18% 88%,0 50%,18% 43%,0 12%);background:linear-gradient(90deg,var(--stem-dark) 0 18%,var(--stem) 25% 60%,var(--stem-light) 62% 72%,var(--stem-dark) 82% 100%);filter:drop-shadow(0 0 1px #173b2c88)}.bamboo-stick:before{content:"";position:absolute;inset:8% 9%;background:linear-gradient(to bottom,transparent 0 26%,#eed879 27% 33%,transparent 34% 61%,#eed879 62% 68%,transparent 69% 100%);opacity:.95}.bamboo-stick:after{content:"";position:absolute;left:42%;top:5%;width:12%;height:90%;border-radius:50%;background:#d9f1c766;transform:rotate(2deg)}.stick-red{--stem-dark:#701a19;--stem:#c93c35;--stem-light:#ef8b72}.stick-blue{--stem-dark:#123d65;--stem:#2a76a1;--stem-light:#78b6d1}
.bamboo-one{position:relative;display:block;padding:0}.bamboo-one i{position:absolute;display:block}.bird-body{left:34%;top:23%;width:38%;height:43%;border-radius:55% 45% 52% 48%;background:linear-gradient(135deg,#207454,#0d4d35);transform:rotate(-13deg);box-shadow:inset -2px -2px #092e22}.bird-wing{left:39%;top:36%;width:30%;height:22%;border-radius:60% 12% 55% 20%;background:linear-gradient(135deg,#2a85a8,#194b86);transform:rotate(14deg)}.bird-eye{left:63%;top:27%;width:8%;aspect-ratio:1;border-radius:50%;background:#c42d29;box-shadow:0 0 0 1px #f4d36f}.tail{left:23%;top:54%;width:17%;height:38%;border-radius:50%;transform-origin:top;background:linear-gradient(#1d7853,#1c5791 70%,#be332e)}.tail-a{transform:rotate(25deg)}.tail-b{left:34%;transform:rotate(3deg)}.tail-c{left:44%;transform:rotate(-20deg)}
.small-tile{padding:2px 1px 1px}.small-tile .wan-number{font-size:12px}.small-tile .wan-mark{font-size:8px}.small-tile .dot-face,.small-tile .bamboo-face{gap:2%;padding:5%}.small-tile .tile-pip{min-width:2px;box-shadow:none}.small-tile .bamboo-stick{min-width:1.5px}.tile-back:after{content:"";position:absolute;inset:5px;border:1px solid #83b4a244;border-radius:3px;background:repeating-linear-gradient(45deg,#fff0 0 3px,#9ac3b014 3px 4px)}
@media(max-width:700px){.small-tile{--tile-w:18px}.small-tile .wan-number{font-size:10px}.small-tile .wan-mark{font-size:7px}.seat-1 .river,.seat-3 .river{width:84px}}

/* Zaozhuang tiles, exposed hands and flower trays */
.audio-toggle{min-width:54px;font-size:11px}
.ting-badge{background:#27705a;color:#efffd7;border:1px solid #9ad39a66}.drift-badge{background:#743f89;color:#ffe8ff;border:1px solid #e5a6ff66}
.honor-face,.flower-face{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:100%;font-family:"STKaiti","KaiTi","Songti SC",serif}.honor-glyph{font-size:clamp(21px,2.2vw,31px);font-weight:900;line-height:1}.honor-5 .honor-glyph{color:#c3262d}.honor-6 .honor-glyph{color:#147142}.honor-1 .honor-glyph,.honor-2 .honor-glyph,.honor-3 .honor-glyph,.honor-4 .honor-glyph{color:#182d43}.white-board{display:block;width:62%;height:68%;border:3px double #2174a6;border-radius:3px;box-shadow:inset 0 0 0 1px #dceef5}
.flower-face{flex-direction:column;overflow:hidden;color:#a7252e}.flower-frame{position:absolute;inset:4px;border:1px solid #438a67;border-radius:2px}.flower-glyph{position:relative;font-size:clamp(16px,1.7vw,23px);font-weight:900;line-height:1}.flower-face small{position:relative;margin-top:3px;color:#1b6545;font-size:7px;font-weight:800;line-height:1}.flower-2,.flower-4,.flower-6,.flower-8{color:#73449a}
.small-tile .honor-glyph{font-size:13px}.small-tile .white-board{border-width:2px}.small-tile .flower-frame{inset:2px}.small-tile .flower-glyph{font-size:11px}.small-tile .flower-face small{display:none}
.flower-area,.revealed-area{position:absolute;z-index:6;display:flex;gap:1px;padding:2px;border:1px solid #e9ce8740;border-radius:6px;background:#061713cf;box-shadow:0 4px 10px #0005}.flower-area:before,.revealed-area:before{position:absolute;left:4px;top:-11px;color:#e3cb8e;font-size:7px;font-weight:900;letter-spacing:.12em}.flower-area:before{content:"花"}.revealed-area:before{content:"明牌"}.seat-0 .flower-area{right:auto;left:calc(50% - min(45vw,440px));bottom:125px}.seat-0 .revealed-area{left:50%;bottom:74px;transform:translateX(-50%)}.seat-2 .flower-area{left:8px;top:58px}.seat-2 .revealed-area{left:50%;top:55px;transform:translateX(-50%)}.seat-1 .flower-area{right:8px;bottom:-12px}.seat-1 .revealed-area{right:73px;top:38px;flex-direction:column;max-height:130px;flex-wrap:wrap}.seat-3 .flower-area{left:8px;bottom:-12px}.seat-3 .revealed-area{left:73px;top:38px;flex-direction:column;max-height:130px;flex-wrap:wrap}
.hand .tile.ting-ready{box-shadow:inset 0 -4px #4ebf8e,0 3px 0 #827c69,0 0 0 2px #b8f0d255}.hand .tile.drawn-tile{margin-left:10px;border-color:#efce7a;box-shadow:inset 0 -4px #d99d35,0 3px 0 #827c69,0 0 0 2px #ffe59c88,0 5px 9px #0006}.hand .tile.drawn-tile:before{content:"摸";position:absolute;z-index:3;left:50%;top:-18px;transform:translateX(-50%);display:grid;place-items:center;min-width:22px;height:15px;padding:0 3px;border:1px solid #f5d47788;border-radius:6px;background:#6b4215;color:#fff4ca;font:900 9px/1 sans-serif;box-shadow:0 3px 7px #0007;pointer-events:none}.ting-choices{display:flex;max-width:min(58vw,520px);gap:6px;overflow-x:auto;padding:2px}.ting-action,.drift-action{min-height:44px;padding:7px 13px;border-radius:11px;color:#fff;cursor:pointer;font-weight:800;transition:transform .15s,filter .15s}.ting-action:hover,.drift-action:hover{filter:brightness(1.08);transform:translateY(-1px)}.ting-action{border:1px solid #86d5ad66;background:linear-gradient(135deg,#28765e,#174936);white-space:nowrap;font-size:11px}.drift-action{border:1px solid #d4a6e755;background:linear-gradient(135deg,#77438d,#492553)}

@media(max-width:700px){.hand .tile.drawn-tile{margin-left:4px}.hand .tile.drawn-tile:before{top:-15px;min-width:18px;height:13px;font-size:8px}}
.result-breakdown{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;padding:12px;border:1px solid #d6b66844;border-radius:11px;background:#d4ac4f0c}.result-breakdown strong{color:#f0d38c;font-size:13px}.result-breakdown span{color:#9fb2a8;font-size:10px}.result-breakdown .multiplier{color:#ffb884}
.result-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;padding:8px 11px;border-radius:9px;background:#071713aa}.result-ledger span{overflow:hidden;color:#8fa69a;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.result-card{max-height:calc(100svh - 24px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}

@media(max-width:700px){
  .audio-toggle{min-width:44px;padding:0 5px;font-size:9px}.topbar-actions{max-width:190px}
  .flower-area .small-tile,.revealed-area .small-tile{--tile-w:18px}.seat-0 .flower-area{right:auto;left:calc(50% - 45vw);bottom:126px}.seat-0 .revealed-area{bottom:72px}.seat-2 .flower-area{left:3px;top:56px}.seat-2 .revealed-area{top:55px}.seat-1 .flower-area{right:2px;bottom:-5px}.seat-3 .flower-area{left:2px;bottom:-5px}.seat-1 .revealed-area{right:97px;top:22px;max-height:108px}.seat-3 .revealed-area{left:97px;top:22px;max-height:108px}
  .ting-choices{max-width:92vw}.ting-action,.drift-action,.gold-action,.claim-action,.hu-action,.pass-action{min-height:44px}.phase-panel:has(.ting-choices){max-width:99%;bottom:calc(max(47px,var(--safe-bottom)) + var(--tile-h) + 7px)}
  .result-breakdown{grid-template-columns:1fr}.result-breakdown span{font-size:9px}
}

@media(max-width:380px){
  .topbar-brand small{display:none}.room-meta b{font-size:12px}.audio-toggle{min-width:42px;font-size:0}#musicToggle:after{content:"乐";font-size:11px}#soundToggle:after{content:"声";font-size:11px}
  .seat-1 .revealed-area,.seat-3 .revealed-area{display:grid;grid-template-columns:repeat(7,18px);max-width:132px;max-height:none;flex-direction:row}.seat-1 .revealed-area{right:94px}.seat-3 .revealed-area{left:94px}
}

@media(max-height:680px) and (orientation:landscape){
  .result-card{padding:14px 18px}.result-card h2{margin:3px 0;font-size:22px}.result-reason{margin-bottom:8px}.result-list{gap:4px}.result-row{padding:6px 8px}.result-actions{margin-top:8px}
  .flower-area .small-tile,.revealed-area .small-tile{--tile-w:18px}.seat-0 .flower-area{bottom:110px}.seat-0 .revealed-area{bottom:64px}.seat-2 .flower-area{top:50px}.seat-2 .revealed-area{top:49px}.seat-1 .revealed-area,.seat-3 .revealed-area{top:24px;max-height:96px}.phase-panel:has(.ting-choices){bottom:calc(36px + var(--tile-h) + 4px)}
}

/* Original liumengniu table skin: use its raster tiles and avatars while the
   server remains the tested Zaozhuang rules engine. */
.original-tile-art{display:block;width:100%;height:100%;object-fit:fill;image-rendering:auto}
.tile.original-tile{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.tile.original-tile:after{display:none}
.tile.original-tile .tile-face{display:block;width:100%;height:100%}
.tile.original-tile.small-tile{--tile-w:29px;--tile-h:35px}
.tile.original-tile.small-tile .tile-face{transform-origin:center}
.player-avatar{overflow:hidden;padding:0;background:#f6e7cc}
.player-avatar-image{display:block;width:100%;height:100%;object-fit:cover}
.player-card{background:linear-gradient(135deg,#173c31e8,#082019ee);border-color:#d9b86b66}
.seat-0 .player-avatar,.seat-2 .player-avatar{border-radius:4px}
.seat-1 .player-avatar,.seat-3 .player-avatar{border-radius:4px}
.action-image-button{display:grid;place-items:center;min-width:72px;min-height:56px;padding:0 9px;border:0;border-radius:12px;background:#0b2a22aa;cursor:pointer;transition:transform .15s,filter .15s}
.action-image-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.14)}
.action-image-button img{display:block;max-width:74px;max-height:58px;object-fit:contain;pointer-events:none}
.action-image-button:disabled{opacity:.45;filter:grayscale(.5)}
@media(max-width:700px){
  .tile.original-tile.small-tile{--tile-w:22px;--tile-h:29px}
  .player-avatar-image{object-fit:cover}
  .action-image-button{min-width:58px;min-height:46px;padding:0 5px}.action-image-button img{max-width:58px;max-height:45px}
}

/* Phone play is landscape-first. Keep every one of the 14 tiles inside the
   safe area and reserve a visible, tappable slot for the newly drawn tile. */
@media(orientation:landscape) and (max-height:680px) and (max-width:1000px){
  :root{--tile-w:clamp(25px,4.15vw,38px)}
  .game{padding-top:44px}.topbar{height:44px;padding-left:max(7px,env(safe-area-inset-left));padding-right:max(7px,env(safe-area-inset-right))}.game-shell{height:calc(100svh - 44px);padding:3px}.side-panel{top:44px}
  .mahjong-table{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-width:4px;border-radius:16px}
  .center-hub{top:43%;width:86px;height:80px;aspect-ratio:auto;padding:8px 6px;border-radius:13px}.round-chip{top:4px;padding:2px 6px;font-size:7px}.timer-ring{width:31px;height:31px;margin-top:7px}.timer-ring:after{width:25px;height:25px}.timer-ring span{font-size:11px}.center-hub>strong{margin-top:3px;font-size:10px;line-height:1}.center-hub>span{display:none}.hub-stats{gap:8px;margin-top:4px}.hub-stats small{font-size:6px}.hub-stats b{font-size:9px}.last-tile{right:-22px;bottom:-5px}
  .hand-area{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(27px,calc(env(safe-area-inset-bottom) + 20px));width:auto;transform:none}.hand{width:100%;gap:1px;overflow:visible}.hand .tile{flex:0 0 var(--tile-w);min-width:var(--tile-w)}.hand .tile.drawn-tile{margin-left:5px}.hand .tile.selected{transform:translateY(-8px)}
  .phase-panel{bottom:calc(max(27px,calc(env(safe-area-inset-bottom) + 20px)) + var(--tile-h) + 7px);max-width:calc(100% - 24px);width:max-content;min-height:44px;gap:5px;padding:4px 6px}.phase-copy{display:none}.phase-controls{gap:5px;flex-wrap:nowrap}.gold-action,.claim-action,.hu-action,.pass-action,.que-action,.ting-action,.drift-action{min-height:44px;min-width:48px;padding:0 11px}.ting-choices{max-width:calc(100vw - 42px)}
  .phase-panel:has(.phase-controls:empty){display:none}
  .seat-0 .flower-area{left:max(7px,env(safe-area-inset-left));bottom:99px}.seat-0 .meld-area{left:max(7px,env(safe-area-inset-left));bottom:62px}.seat-0 .river{bottom:105px}.seat-0 .revealed-area{bottom:58px}.seat-2 .river{top:52px}.seat-1 .river{right:105px}.seat-3 .river{left:105px}
}

/* Browsers that refuse Screen Orientation lock (notably iPhone Safari) still
   receive the same landscape table immediately, without an interstitial. */
@media(orientation:portrait) and (max-width:700px){
  body.at-table.landscape-requested .game{position:fixed;z-index:2;left:100vw;top:0;width:100svh;height:100vw;min-height:0;padding-top:44px;transform:rotate(90deg);transform-origin:top left}
  body.at-table.landscape-requested .topbar{width:100%;height:44px;padding-left:7px;padding-right:7px}
  body.at-table.landscape-requested .game-shell{width:100%;height:calc(100% - 44px);padding:3px}
  body.at-table.landscape-requested .mahjong-table{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-width:4px;border-radius:16px}
  body.at-table.landscape-requested{--tile-w:clamp(25px,4.15vh,38px)}
  body.at-table.landscape-requested .center-hub{top:43%;width:86px;height:80px;aspect-ratio:auto;padding:8px 6px;border-radius:13px}
  body.at-table.landscape-requested .round-chip{top:4px;padding:2px 6px;font-size:7px}
  body.at-table.landscape-requested .timer-ring{width:31px;height:31px;margin-top:7px}
  body.at-table.landscape-requested .timer-ring:after{width:25px;height:25px}
  body.at-table.landscape-requested .timer-ring span{font-size:11px}
  body.at-table.landscape-requested .center-hub>strong{margin-top:3px;font-size:10px;line-height:1}
  body.at-table.landscape-requested .center-hub>span{display:none}
  body.at-table.landscape-requested .hub-stats{gap:8px;margin-top:4px}
  body.at-table.landscape-requested .hub-stats small{font-size:6px}
  body.at-table.landscape-requested .hub-stats b{font-size:9px}
  body.at-table.landscape-requested .hand-area{left:8px;right:8px;bottom:27px;width:auto;transform:none}
  body.at-table.landscape-requested .hand{width:100%;gap:1px;overflow:visible}
  body.at-table.landscape-requested .hand .tile{flex:0 0 var(--tile-w);min-width:var(--tile-w)}
  body.at-table.landscape-requested .hand .tile.drawn-tile{margin-left:5px}
  body.at-table.landscape-requested .phase-panel{bottom:calc(27px + var(--tile-h) + 7px);max-width:calc(100% - 24px);width:max-content;min-height:44px;gap:5px;padding:4px 6px}
  body.at-table.landscape-requested .phase-copy{display:none}
  body.at-table.landscape-requested .phase-controls{gap:5px;flex-wrap:nowrap}
  body.at-table.landscape-requested .phase-panel:has(.phase-controls:empty){display:none}
  body.at-table.landscape-requested .ting-choices{max-width:calc(100svh - 42px)}
}

/* Premium traditional tile set. The faces stay bold at hand size and simplify
   progressively in rivers, melds and flower trays. */
:root{--tile-w:clamp(31px,3.4vw,48px);--tile-h:calc(var(--tile-w)*1.42)}
.tile{
  padding:3px 2px 2px;border:1px solid #b8af96;border-bottom-color:#756d5c;border-radius:6px;
  background:linear-gradient(105deg,#fffef7 0 16%,#f7f2dd 48%,#e3dcc2 82%,#c8bea0 100%);
  box-shadow:inset 1px 1px 0 #fff,inset -2px 0 0 #d3cbb3,inset 0 -2px 0 #c0b69d,0 4px 0 #817864,0 7px 11px #0007;
  color:#17231e;isolation:isolate
}
.tile-face{filter:drop-shadow(0 1px 0 #fff8)}
.hand{gap:2px}.hand .tile{border-color:#c8bfa5;box-shadow:inset 1px 1px 0 #fff,inset -2px 0 #d3cbb3,inset 0 -2px #bbb097,0 5px 0 #756d5c,0 9px 13px #0009}
.hand .tile:hover:not(:disabled){filter:brightness(1.03);transform:translateY(-6px)}
.hand .tile.selected{transform:translateY(-14px);box-shadow:inset 1px 1px #fff,inset -2px 0 #d3cbb3,0 5px 0 #756d5c,0 0 0 3px #ffcf61,0 15px 22px #000a}
.hand .tile:disabled{opacity:.72;filter:saturate(.78)}

/* 万子：粗书法黑字配朱红萬。 */
.face-m{gap:1px;padding-top:2%}.wan-number{color:#131e1a;font:900 calc(var(--tile-w)*.53)/.82 "STKaiti","KaiTi","Noto Serif CJK SC","Songti SC",serif;letter-spacing:-.08em;text-shadow:.4px 0 #111,0 1px #fff}.wan-mark{color:#c42c28;font:900 calc(var(--tile-w)*.31)/.9 "STKaiti","KaiTi","Noto Serif CJK SC",serif;text-shadow:.3px 0 #9d211f}

/* 筒子：传统黑、绿、红三色大圆纹，避免和条子混淆。 */
.dot-face{column-gap:5%;row-gap:3%;padding:7% 8%}.tile-pip{width:78%;max-width:12px;min-width:4px;background:radial-gradient(circle,#fff7dc 0 17%,currentColor 19% 47%,#f6e9be 49% 61%,currentColor 63% 78%,#17372f 80% 84%,transparent 86%);box-shadow:0 0 0 1px #0f241d55}.pip-blue{color:#17231f}.pip-green{color:#137447}.pip-red{color:#c72e2a}.pip-special{width:88%;max-width:24px;background:radial-gradient(circle,#c72e2a 0 14%,#f7df91 16% 27%,#137447 29% 47%,#f7df91 49% 58%,#17231f 60% 75%,#0d4b34 77% 84%,transparent 86%);box-shadow:0 0 0 1px #14392c66}

/* 条子：粗竹节和明确节点，形状与筒子完全不同。 */
.bamboo-face{column-gap:7%;row-gap:3%;padding:6% 7%}.bamboo-stick{--stem-dark:#06482d;--stem:#168455;--stem-light:#65c18b;width:82%;min-width:4px;max-width:8px;height:96%;clip-path:polygon(50% 0,92% 9%,76% 42%,98% 50%,76% 91%,50% 100%,24% 91%,2% 50%,24% 42%,8% 9%);background:linear-gradient(90deg,var(--stem-dark) 0 20%,var(--stem) 28% 62%,var(--stem-light) 64% 75%,var(--stem-dark) 84%);filter:drop-shadow(0 1px 0 #092b1f66)}.bamboo-stick:before{inset:5% 5%;background:linear-gradient(to bottom,transparent 0 28%,#f1d06b 29% 35%,transparent 36% 62%,#f1d06b 63% 69%,transparent 70%);opacity:1}.bamboo-stick:after{left:45%;top:6%;width:11%;height:87%;background:#e8f6db77}.stick-red{--stem-dark:#751b19;--stem:#c53a32;--stem-light:#ef8971}.stick-blue{--stem-dark:#063c2b;--stem:#126e49;--stem-light:#58b783}
.bird-body{left:31%;top:18%;width:43%;height:47%;background:linear-gradient(135deg,#238b60,#0b4c35);box-shadow:inset -3px -2px #072f23,0 1px #fff}.bird-wing{left:37%;top:33%;width:34%;height:25%;background:linear-gradient(135deg,#258fa9,#193f7d)}.bird-eye{left:64%;top:23%;width:9%;background:#d02d28}.tail{top:53%;height:43%;background:linear-gradient(#238356,#176293 68%,#c6322d)}

/* 风箭牌和花牌保持传统书法，白板用蓝色双框。 */
.honor-glyph{color:#111d19;font-size:calc(var(--tile-w)*.66);font-weight:900;line-height:.9;text-shadow:.5px 0 currentColor,0 1px #fff}.honor-5 .honor-glyph{color:#c42727}.honor-6 .honor-glyph{color:#087443}.honor-1 .honor-glyph,.honor-2 .honor-glyph,.honor-3 .honor-glyph,.honor-4 .honor-glyph{color:#111d19}.white-board{width:65%;height:70%;border:3px double #1773a5;border-radius:3px;background:linear-gradient(135deg,#fffdf1,#e8f2ee);box-shadow:inset 0 0 0 1px #fff,0 1px #fff}
.flower-face{background:radial-gradient(circle at 26% 24%,#d84a48 0 5%,transparent 6%),radial-gradient(circle at 74% 72%,#397f5b 0 5%,transparent 6%);color:#b5262d}.flower-frame{inset:3px;border:1.5px solid #23764f;box-shadow:inset 0 0 0 1px #d5b35f66}.flower-glyph{font-size:calc(var(--tile-w)*.5);text-shadow:.5px 0 currentColor,0 1px #fff}.flower-face small{margin-top:2px;color:#17653f;font-size:calc(var(--tile-w)*.16)}.flower-2,.flower-4,.flower-6,.flower-8{color:#713f91}

/* Green lacquer backs with a light ivory lip. */
.tile-back{border-color:#8cb7a2;border-top-color:#e8e1ca;background:linear-gradient(135deg,#2d9b63 0,#17714e 45%,#0b4b38 100%);box-shadow:inset 0 3px 0 #64b482,inset 0 0 0 2px #176847,0 3px 0 #e1d9c1,0 6px 8px #0007}.tile-back:after{inset:5px;border-color:#c2e0d044;background:repeating-linear-gradient(45deg,transparent 0 3px,#c8ead516 3px 4px)}

/* Smaller faces retain the same visual language without hairline details. */
.small-tile{--tile-w:24px;padding:2px 1px 1px;border-radius:4px;box-shadow:inset 1px 1px #fff,inset -1px 0 #c9c0a8,0 2px 0 #817864,0 4px 6px #0006}.small-tile .wan-number{font-size:calc(var(--tile-w)*.52)}.small-tile .wan-mark{font-size:calc(var(--tile-w)*.3)}.small-tile .honor-glyph{font-size:calc(var(--tile-w)*.64)}.small-tile .tile-pip{min-width:2.5px;box-shadow:none}.small-tile .bamboo-stick{min-width:2px}.small-tile .flower-glyph{font-size:calc(var(--tile-w)*.48)}

.hand .tile.ting-ready{box-shadow:inset 0 -5px #31a875,inset 1px 1px #fff,0 5px 0 #756d5c,0 0 0 2px #b8f0d2,0 9px 13px #0009}.hand .tile.drawn-tile{margin-left:9px;border-color:#e8bd54;box-shadow:inset 0 -5px #d89625,inset 1px 1px #fff,0 5px 0 #756d5c,0 0 0 2px #ffe398,0 10px 15px #0009}

@media(orientation:landscape) and (max-height:680px) and (max-width:1000px){
  :root{--tile-w:clamp(34px,5.2vw,48px)}
  .small-tile{--tile-w:clamp(19px,2.65vw,24px)}.meld .small-tile{--tile-w:clamp(21px,2.9vw,26px)}.flower-area .small-tile,.revealed-area .small-tile{--tile-w:clamp(18px,2.5vw,22px)}
  .hand{gap:2px}.hand .tile.drawn-tile{margin-left:8px}.hand .tile.selected{transform:translateY(-10px)}
  .seat-0 .river,.seat-2 .river{width:min(46vw,216px)}.seat-1 .river,.seat-3 .river{width:126px}.seat-1 .river{right:112px}.seat-3 .river{left:112px}
}

@media(orientation:portrait) and (max-width:700px){
  body.at-table.landscape-requested{--tile-w:clamp(34px,5.2vh,48px)}
  body.at-table.landscape-requested .small-tile{--tile-w:clamp(19px,2.65vh,24px)}
  body.at-table.landscape-requested .meld .small-tile{--tile-w:clamp(21px,2.9vh,26px)}
  body.at-table.landscape-requested .flower-area .small-tile,body.at-table.landscape-requested .revealed-area .small-tile{--tile-w:clamp(18px,2.5vh,22px)}
  body.at-table.landscape-requested .hand{gap:2px}
  body.at-table.landscape-requested .hand .tile.drawn-tile{margin-left:8px}
}

/* FluffyStuff CC0 faces + a compact four-wall landscape table. */
.tile-face:has(.tile-art){display:grid;place-items:center;padding:3% 4%}
.tile-art{display:block;width:94%;height:94%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 1px 0 #fff)}
.small-tile .tile-face:has(.tile-art){padding:2%}
.small-tile .tile-art{width:96%;height:96%}

.mahjong-table{
  border:9px solid #5c3827;
  border-radius:28px;
  background:#0e493b;
  box-shadow:0 30px 65px #000c,inset 0 0 0 2px #bd8a4c,inset 0 0 0 8px #2a160f;
}
.mahjong-table:before{content:"";position:absolute;z-index:1;inset:7px;border:1px solid #e2b86a66;border-radius:18px;pointer-events:none}
.table-felt{
  inset:9px;
  border-radius:17px;
  background:
    radial-gradient(ellipse at 50% 44%,#18745e 0,#0f5c49 48%,#093e32 100%);
  box-shadow:inset 0 0 48px #001a14b8,inset 0 0 0 1px #46a18333;
}
.table-felt:before{opacity:.16;background:repeating-linear-gradient(67deg,transparent 0 4px,#d8f3e70a 4px 5px),repeating-linear-gradient(-18deg,transparent 0 7px,#001c1530 7px 8px)}
.table-felt:after{content:"枣庄麻将";position:absolute;left:50%;top:67%;transform:translate(-50%,-50%);color:#073a2e72;font:900 clamp(20px,3.2vw,42px)/1 "STKaiti","KaiTi",serif;letter-spacing:.32em;white-space:nowrap;text-shadow:0 1px #69aa8b18}
.table-line{inset:18% 16%;border:1px solid #b9e2cb14;border-radius:28px;transform:none;box-shadow:inset 0 0 22px #001c1526}

.wall{position:absolute;z-index:2;border:1px solid #b7cfb966;border-radius:3px;background:repeating-linear-gradient(90deg,#2b9b54 0 13px,#0f6035 13px 15px,#48b66d 15px 16px);box-shadow:inset 0 3px #82d38f88,inset 0 -3px #073a27aa,0 4px 0 #e2ddc8,0 7px 7px #0008;opacity:.9;pointer-events:none}
.wall-top,.wall-bottom{left:50%;width:42%;height:15px;transform:translateX(-50%) skewX(-5deg)}
.wall-top{top:7.5%}.wall-bottom{bottom:18%;opacity:.6}
.wall-left,.wall-right{top:50%;width:15px;height:38%;background:repeating-linear-gradient(180deg,#2b9b54 0 13px,#0f6035 13px 15px,#48b66d 15px 16px);transform:translateY(-50%) skewY(-5deg)}
.wall-left{left:8%}.wall-right{right:8%}

.center-hub{z-index:9;width:112px;aspect-ratio:1.1;padding:10px 8px 8px;border:1px solid #87613f;border-radius:17px;background:linear-gradient(145deg,#263836,#081918 62%,#16322e);clip-path:polygon(18% 0,82% 0,100% 22%,100% 78%,82% 100%,18% 100%,0 78%,0 22%);box-shadow:inset 0 0 0 3px #4f3829,0 11px 20px #0009}
.timer-ring{border-color:#153e45;background:#071819;box-shadow:0 0 14px #2ec2dd55,inset 0 0 9px #000}
.timer-ring span{color:#6be4ff;text-shadow:0 0 8px #30c9ee}
.round-chip{background:#7b5a2c;color:#ffe9ad}

.player-card{border-color:#c49f5b55;border-radius:8px;background:linear-gradient(145deg,#142521ee,#06120fee);box-shadow:inset 0 0 0 1px #fff08,0 7px 18px #0008}
.player-avatar{border-radius:7px;background:linear-gradient(145deg,#f0d697,#865d31);box-shadow:inset 0 0 0 1px #fff9,0 2px 7px #0008}
.seat.is-turn .player-card{border-color:#f0bd55;box-shadow:0 0 0 2px #f0bd5533,0 0 24px #f0bd5552}
.river{padding:3px;border-radius:7px;background:#062d242e}
.meld{border:1px solid #e6ce8f2b;background:#04251dc7;box-shadow:0 4px 8px #0005}
.flower-area,.revealed-area{background:#041b16e8;border-color:#e6c47455}

@media(orientation:landscape) and (max-height:680px) and (max-width:1000px){
  .mahjong-table{border-width:5px;border-radius:17px}
  .mahjong-table:before{inset:4px;border-radius:11px}
  .table-felt{inset:5px;border-radius:10px}
  .wall-top,.wall-bottom{height:11px}.wall-left,.wall-right{width:11px}
  .wall-top{top:6.5%}.wall-bottom{bottom:19%}.wall-left{left:6.5%}.wall-right{right:6.5%}
  .center-hub{width:84px;padding:7px 5px 5px;border-radius:12px}
  .table-felt:after{top:64%;font-size:24px}
}

@media(orientation:portrait) and (max-width:700px){
  body.at-table.landscape-requested .mahjong-table{border-width:5px;border-radius:17px}
  body.at-table.landscape-requested .mahjong-table:before{inset:4px;border-radius:11px}
  body.at-table.landscape-requested .table-felt{inset:5px;border-radius:10px}
  body.at-table.landscape-requested .wall-top,body.at-table.landscape-requested .wall-bottom{height:11px}
  body.at-table.landscape-requested .wall-left,body.at-table.landscape-requested .wall-right{width:11px}
  body.at-table.landscape-requested .wall-top{top:6.5%}
  body.at-table.landscape-requested .wall-bottom{bottom:19%}
  body.at-table.landscape-requested .wall-left{left:6.5%}
  body.at-table.landscape-requested .wall-right{right:6.5%}
  body.at-table.landscape-requested .table-felt:after{top:64%;font-size:24px}
}

/* Autotable-inspired table frame: deep lacquer rails, a broad felt field,
   four stacked walls and a compact centre console.  The game rules and tile
   faces remain our own Zaozhuang implementation. */
body.at-table .game-shell{grid-template-columns:minmax(0,1fr) 236px;gap:14px;padding:14px 16px 18px}
body.at-table .game{background:radial-gradient(ellipse at 50% 42%,#164b3b 0,#092b23 58%,#03100e 100%)}
body.at-table .table-wrap{filter:drop-shadow(0 24px 36px #0008)}
body.at-table .mahjong-table{
  border:12px solid #61462d;border-radius:34px;
  aspect-ratio:16/9;width:min(100%,calc((100svh - 82px)*1.72));
  background:linear-gradient(145deg,#b99258 0 4%,#4c3626 4% 8%,#271f18 8% 100%);
  box-shadow:0 0 0 2px #d2a766,0 0 0 5px #332419,0 32px 70px #000d,inset 0 0 0 2px #e3bf7b66;
}
body.at-table .mahjong-table:before{inset:7px;border:1px solid #ebca8066;border-radius:22px;box-shadow:inset 0 0 30px #0006}
body.at-table .table-felt{
  inset:10px;border-radius:22px;
  background-image:linear-gradient(#0b644e44,#0b644e44),url("assets/table-reference.png");
  background-size:cover;background-position:center;
}
body.at-table .table-felt:before{
  opacity:.13;background-image:linear-gradient(115deg,transparent 0 48%,#e5f4d318 49% 50%,transparent 51%),linear-gradient(25deg,transparent 0 48%,#041e1830 49% 50%,transparent 51%);background-size:38px 38px,47px 47px;
}
body.at-table .table-felt:after{content:"";position:absolute;left:17%;right:17%;top:17%;bottom:19%;border:1px solid #d6c07a26;border-radius:24px;box-shadow:inset 0 0 22px #06271e88}
body.at-table .table-line{inset:22% 17% 23%;z-index:1;border:1px solid #e2c67c24;border-radius:18px;transform:none;box-shadow:0 0 0 10px #0b443722}
body.at-table .table-line:before{content:"枣庄麻将";position:absolute;left:50%;top:-8%;transform:translateX(-50%);padding:4px 20px;border:1px solid #d3b36b55;border-radius:999px;background:#12634edb;color:#d8bc79;font:800 13px/1 "STKaiti","KaiTi",serif;letter-spacing:.3em;white-space:nowrap;box-shadow:0 3px 10px #001c1566}
body.at-table .wall{z-index:4;border:1px solid #b6c7a7;border-radius:4px;background:linear-gradient(180deg,#fffdf0 0 15%,#2ea659 15% 76%,#15703e 76% 91%,#ede9d9 91%);box-shadow:inset 0 2px #fff,inset 0 -3px #064229,0 5px 0 #d2cebc,0 9px 9px #0009;opacity:1}
body.at-table .wall:after{content:"";position:absolute;inset:3px 2px;border:1px solid #b7e1bd55;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 12px,#cbf1c322 12px 13px)}
body.at-table .wall-top,body.at-table .wall-bottom{left:50%;width:47%;height:23px;transform:translateX(-50%) skewX(-4deg)}
body.at-table .wall-top{top:7.2%}.at-table .wall-bottom{bottom:16.8%;opacity:.9}
body.at-table .wall-left,body.at-table .wall-right{top:50%;width:23px;height:43%;transform:translateY(-50%) skewY(-4deg);background:linear-gradient(90deg,#fffdf0 0 15%,#2ea659 15% 76%,#15703e 76% 91%,#ede9d9 91%)}
body.at-table .wall-left{left:7.2%}.at-table .wall-right{right:7.2%}
body.at-table .center-hub{z-index:10;width:145px;aspect-ratio:1.18;border:2px solid #6c4b2c;border-radius:0;clip-path:polygon(16% 0,84% 0,100% 18%,100% 82%,84% 100%,16% 100%,0 82%,0 18%);background:linear-gradient(145deg,#253a36,#071915 58%,#123a31);box-shadow:inset 0 0 0 3px #4a3728,0 14px 30px #000b}
body.at-table .center-hub:after{content:"";position:absolute;inset:8px;border:1px solid #a1c4b052;clip-path:inherit;pointer-events:none}
body.at-table .round-chip{background:#0c6b5a;color:#e6d28e;border:1px solid #c8aa5c66}
body.at-table .timer-ring{width:50px;height:50px;background:conic-gradient(#35d2dc var(--progress),#fff1 0)}
body.at-table .timer-ring:after{background:#071b1a}
body.at-table .timer-ring span{color:#56e5eb;text-shadow:0 0 12px #27cfd6;font-family:ui-monospace,monospace;font-size:16px}
body.at-table .hub-stats b{color:#7ce4cf}
body.at-table .player-card{border-color:#d8b66d66;background:linear-gradient(135deg,#071c18ef,#0a2a21e8);box-shadow:0 8px 18px #0008,inset 0 1px #fff1}
body.at-table .player-card{min-width:116px;max-width:142px;padding:4px 6px;gap:5px}
body.at-table .player-avatar{width:26px;height:26px;border-color:#ebce83;background:linear-gradient(145deg,#f5dda0,#966734);box-shadow:0 0 0 2px #3c291c,0 3px 8px #0008;font-size:9px}
body.at-table .player-name{max-width:70px;font-size:11px}
body.at-table .player-status{font-size:8px}
body.at-table .river{padding:4px;border:1px solid #c6a96722;border-radius:8px;background:#05291f55}
body.at-table .meld-area,body.at-table .flower-area,body.at-table .revealed-area{background:#04251ce8;border-color:#dfc17b66;box-shadow:0 5px 12px #0008}
body.at-table .flower-area{width:78px;max-height:52px;flex-wrap:wrap;align-content:center;gap:1px;overflow:visible;pointer-events:none}
body.at-table .flower-area .small-tile{--tile-w:18px}
body.at-table .seat-0 .flower-area{left:calc(100% + 6px);bottom:7px}
body.at-table .seat-2 .flower-area{left:calc(100% + 6px);top:7px}
body.at-table .seat-1 .flower-area{right:calc(100% + 6px);top:38px;bottom:auto}
body.at-table .seat-3 .flower-area{left:calc(100% + 6px);top:38px;bottom:auto}
body.at-table .hand-area{bottom:47px;width:min(94%,820px)}
body.at-table .hand .tile{box-shadow:inset 1px 1px 0 #fff,inset -2px 0 #d3cbb3,inset 0 -2px #b8ad94,0 5px 0 #615744,0 10px 15px #000a}
body.at-table .phase-panel{background:#061713e8;border-color:#e0bd6b66;box-shadow:0 10px 28px #000a}
body.at-table .side-panel{border-color:#cda95b55;background:linear-gradient(160deg,#071c17ec,#04100de8);box-shadow:0 18px 40px #0009}

@media(max-width:980px){body.at-table .game-shell{grid-template-columns:1fr;padding:4px}.at-table .side-panel{border-color:#cda95b66}}
@media(max-width:700px){
  body.at-table .player-card{min-width:90px;max-width:112px;padding:3px 4px;gap:4px}
  body.at-table .player-avatar{width:22px;height:22px;font-size:8px}
  body.at-table .player-name{max-width:58px;font-size:9px}
  body.at-table .player-status{font-size:7px}
  body.at-table .flower-area{width:60px;max-height:40px}
  body.at-table .flower-area .small-tile{--tile-w:16px}
  body.at-table .seat-0 .flower-area{left:calc(100% + 4px);bottom:4px}
  body.at-table .seat-2 .flower-area{left:calc(100% + 4px);top:4px}
  body.at-table .seat-1 .flower-area{right:calc(100% + 4px);top:30px}
  body.at-table .seat-3 .flower-area{left:calc(100% + 4px);top:30px}
}

/* Desktop table pass: make the table the focal point instead of a small card
   beside the feed.  The phone landscape rules above remain unchanged. */
@media(min-width:981px){
  body.at-table .game{padding-top:52px;min-height:100svh;background:radial-gradient(ellipse at 48% 44%,#15513f 0,#082b23 57%,#020c0a 100%)}
  body.at-table .topbar{height:52px;padding:0 20px;background:linear-gradient(180deg,#061713f5,#04100df0);border-bottom-color:#c9a45b55}
  body.at-table .topbar-brand span{width:30px;height:30px}
  body.at-table .game-shell{height:calc(100svh - 52px);grid-template-columns:minmax(720px,1fr) 222px;gap:12px;padding:10px 14px 14px}
  body.at-table .table-wrap{place-items:center;min-width:0}
  body.at-table .mahjong-table{width:min(100%,calc((100svh - 72px)*1.72));max-height:calc(100svh - 72px);aspect-ratio:16/9;border-width:12px;border-radius:32px}
  body.at-table .table-felt{inset:10px;border-radius:20px;background-image:linear-gradient(#0b644e30,#0b644e30),url("assets/table-reference.png");background-size:cover;background-position:center}
  body.at-table .table-line{inset:20% 15% 21%;border-color:#e4c9783c;box-shadow:0 0 0 12px #0b443722,inset 0 0 24px #06271e66}
  body.at-table .table-line:before{top:-7%;padding:5px 20px;font-size:12px;background:#0b5d4ad9}
  body.at-table .wall-top,body.at-table .wall-bottom{width:48%;height:24px}
  body.at-table .wall-top{top:6.7%} body.at-table .wall-bottom{bottom:15.8%}
  body.at-table .wall-left,body.at-table .wall-right{width:24px;height:45%}
  body.at-table .wall-left{left:6.7%} body.at-table .wall-right{right:6.7%}
  body.at-table .center-hub{width:124px;aspect-ratio:1.18}
  body.at-table .timer-ring{width:44px;height:44px}
  body.at-table .timer-ring:after{width:36px;height:36px}
  body.at-table .player-card{min-width:128px;max-width:154px;padding:5px 7px;gap:6px}
  body.at-table .player-avatar{width:30px;height:30px}
  body.at-table .player-name{max-width:78px;font-size:11px}
  body.at-table .player-status{font-size:8px}
  body.at-table .seat-0 .river,body.at-table .seat-2 .river{width:244px}
  body.at-table .seat-0 .river{bottom:clamp(145px,17vh,190px)}
  body.at-table .seat-2 .river{top:72px}
  body.at-table .seat-1 .river,body.at-table .seat-3 .river{width:132px}
  body.at-table .seat-1 .river{right:174px} body.at-table .seat-3 .river{left:174px}
  body.at-table .seat-0 .meld-area{left:calc(50% - min(40vw,430px));bottom:72px}
  body.at-table .seat-2 .meld-area{right:calc(50% + 96px);top:8px}
  body.at-table .seat-1 .meld-area{right:7px;top:44px} body.at-table .seat-3 .meld-area{left:7px;top:44px}
  body.at-table .hand-area{bottom:31px;width:min(88%,860px)}
  body.at-table .phase-panel{bottom:calc(31px + var(--tile-h) + 12px);padding:8px 12px}
  body.at-table .side-panel{padding:14px 15px;border-radius:14px;overflow:auto;background:linear-gradient(160deg,#071e18f5,#03100de8)}
  body.at-table .side-head h2{font-size:19px}
  body.at-table .scoreboard,body.at-table .feed{margin-top:14px}
  body.at-table .feed-item{padding:7px 0}
  body.at-table .rules-detail{margin-top:14px}
}
@media(orientation:landscape) and (max-height:680px) and (max-width:1000px){
  body.at-table .mahjong-table{border-width:7px;border-radius:20px}
  body.at-table .mahjong-table:before{inset:4px;border-radius:13px}
  body.at-table .table-felt{inset:6px;border-radius:13px}
  body.at-table .wall-top,body.at-table .wall-bottom{height:16px}
  body.at-table .wall-left,body.at-table .wall-right{width:16px}
  body.at-table .center-hub{width:100px}
}

/* 修正：.small-tile 只覆盖了 --tile-w，--tile-h 沿用了 :root 大尺寸的计算值，
   导致河牌/副露/花牌等小尺寸牌位变形拉长。这里让 --tile-h 始终按当前生效的
   --tile-w 重新计算，跟牌面素材的原始比例保持一致。*/
.tile.small-tile{--tile-h:calc(var(--tile-w) * 1.42)}

/* UI hotfix 20260824: keep opponent information visible and prevent table overlays. */
.flower-area[hidden], .revealed-area[hidden], .meld-area[hidden] { display: none !important; }
.seats { z-index: 8; pointer-events: none; }
.seat { z-index: 8; pointer-events: none; }
.player-card, .seat-score, .meld-area, .flower-area, .revealed-area, .concealed-count { pointer-events: none; }
.meld-area, .flower-area, .revealed-area { z-index: 12; }
.river { z-index: 9; }
.wall { z-index: 4; }
.center-hub { z-index: 2 !important; }
.phase-panel { z-index: 30; }
body.at-table .center-hub { z-index: 2 !important; width: 108px; }
body.at-table .meld-area, body.at-table .flower-area, body.at-table .revealed-area { z-index: 12; }
body.at-table .seat-0 .meld-area { left: calc(50% - min(40vw, 430px)); bottom: 92px; }
body.at-table .seat-2 .meld-area { right: auto; left: calc(50% - 280px); top: 280px; flex-direction: row; flex-wrap: nowrap; }
body.at-table .seat-1 .meld-area { right: 18px; top: 150px; flex-direction: row; flex-wrap: nowrap; }
body.at-table .seat-3 .meld-area { left: 18px; top: 150px; flex-direction: row; flex-wrap: nowrap; }
body.at-table .seat-0 .flower-area { left: calc(50% - min(40vw, 430px)); bottom: 140px; }
body.at-table .seat-2 .flower-area { left: calc(50% + 200px); right: auto; top: 280px; bottom: auto; transform: none; }
body.at-table .seat-1 .flower-area { right: 18px; bottom: auto; top: -108px; }
body.at-table .seat-3 .flower-area { left: 18px; bottom: auto; top: -108px; }
body.at-table .seat-1 .revealed-area { right: 8px; top: 195px; flex-direction: row; flex-wrap: wrap; max-width: 110px; max-height: none; }
body.at-table .seat-3 .revealed-area { left: 8px; top: 195px; flex-direction: row; flex-wrap: wrap; max-width: 110px; max-height: none; }
body.at-table .seat-2 .revealed-area { left: 50%; right: auto; top: 280px; transform: translateX(-50%); flex-direction: row; flex-wrap: wrap; width: max-content; max-width: 340px; max-height: none; }
body.at-table .wall-left, body.at-table .wall-right { height: 26%; }
body.at-table .hand-area { z-index: 20; }
/* UI hotfix 2: separate cards from walls and hand. */
body.at-table .hand-area{bottom:80px;}
body.at-table .seat-0 .player-card{transform:translateY(-18px);}
body.at-table .seat-1 .player-card{transform:translateY(-140px);}
body.at-table .seat-2 .player-card{transform:translateY(-4px);}
body.at-table .seat-3 .player-card{transform:translateY(-140px);}
/* UI hotfix 3: portrait auto-rotate mode needs a smaller offset since seat-1/seat-3 sit along the rotated table's short edge. */
body.at-table.landscape-requested .seat-1 .player-card{transform:translateY(-100px);}
body.at-table.landscape-requested .seat-3 .player-card{transform:translateY(-100px);}
/* UI hotfix 4: phase-panel bottom offset still referenced the pre-hotfix-2 hand-area position (54px), so it dropped onto the hand tiles once hand-area moved to bottom:80px. */
body.at-table .phase-panel{bottom:calc(80px + var(--tile-h) + 76px);}
/* UI hotfix 5: on short landscape viewports (phone landscape, height<=680px) the table is short enough that meld-area's top:220px pushes melds completely off the bottom of the table. Use a smaller offset and lay melds out in a single non-wrapping row so they stay compact. */
@media(max-height:680px) and (orientation:landscape){
  body.at-table .seat-1 .meld-area{top:130px;flex-direction:row;flex-wrap:nowrap;}
  body.at-table .seat-3 .meld-area{top:130px;flex-direction:row;flex-wrap:nowrap;}
  body.at-table .seat-2 .meld-area{right:calc(50% + 40px);top:100px;flex-direction:row;flex-wrap:nowrap;}
}

/* ============================================================
   TABLE LAYOUT REWRITE — replaces the old absolute-positioning
   "hotfix" stack for .seats/.seat-0..3 and their children with a
   CSS Grid (macro layout) + Flexbox (per-seat stacking) system.

   Why: every previous fix pinned each element (card/river/meld/
   flower/revealed) with independent top/left/right/bottom pixel
   offsets measured against a shrink-wrapped seat box. Any new
   content (more discards, more melds, a revealed hand) changed
   a sibling's real size without the hand-tuned offsets knowing,
   so siblings kept sliding back into each other or into the
   wall art. Flexbox column/row stacking makes that class of
   overlap structurally impossible: items in the same flex
   container are laid out in sequence and cannot occupy the same
   space, regardless of how tall any one of them grows.
   ============================================================ */

body.at-table .seats{
  position:absolute!important;inset:0!important;
  display:grid!important;
  grid-template-columns:1fr minmax(170px,230px) 1fr!important;
  grid-template-rows:minmax(120px,24%) 1fr minmax(190px,35%)!important;
  grid-template-areas:". top ." "left . right" ". bottom ."!important;
  z-index:8!important;pointer-events:none!important;
}
body.at-table .seat{
  position:relative!important;inset:auto!important;
  transform:none!important;
  display:flex!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
  pointer-events:none!important;
}
body.at-table .seat-2{grid-area:top!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;padding-top:2px!important;}
body.at-table .seat-0{grid-area:bottom!important;flex-direction:column-reverse!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;padding-bottom:calc(54px + var(--tile-h) + 32px)!important;}
body.at-table .seat-1{grid-area:right!important;flex-direction:column!important;align-items:flex-end!important;justify-content:safe center!important;overflow:visible!important;gap:4px!important;padding-right:4px!important;}
body.at-table .seat-3{grid-area:left!important;flex-direction:column!important;align-items:flex-start!important;justify-content:safe center!important;overflow:visible!important;gap:4px!important;padding-left:4px!important;}
body.at-table .seat-2{overflow:visible!important;}
body.at-table .seat-0{overflow:visible!important;}

/* Every direct child of a seat becomes a normal flex item: no more
   position:absolute, no more per-element top/left/right/bottom. */
body.at-table .seat>*{
  position:relative!important;inset:auto!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  pointer-events:auto!important;
  flex:0 0 auto!important;
  max-width:none!important;max-height:none!important;
}
body.at-table .seat .player-card{order:1!important;}
body.at-table .seat .meld-area{order:2!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;max-width:min(80vw,420px)!important;}
body.at-table .seat .flower-area{order:3!important;flex-direction:row!important;flex-wrap:wrap!important;max-width:min(50vw,260px)!important;}
body.at-table .seat .revealed-area{order:4!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;max-width:min(80vw,440px)!important;}
body.at-table .seat .river{order:5!important;position:relative!important;width:auto!important;max-width:min(80vw,420px)!important;}
body.at-table .seat .concealed-count{order:6!important;position:relative!important;display:flex!important;flex-direction:row!important;transform:none!important;}

/* seat-score stays a small absolute badge pinned to the card's own
   corner — the card is its containing block now that .seat itself
   is position:relative, so this alone can never collide with a
   sibling stack item. */
body.at-table .seat .player-card{position:relative!important;}
body.at-table .seat .seat-score{position:absolute!important;order:initial!important;top:-10px!important;right:-10px!important;left:auto!important;bottom:auto!important;}
body.at-table .seat-3 .seat-score{right:auto!important;left:-10px!important;}

/* Left/right seats: river reads better as a compact vertical grid
   instead of the wide horizontal strip used for top/bottom seats. */
body.at-table .seat-1 .river,body.at-table .seat-3 .river{
  display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:2px!important;width:max-content!important;
}
body.at-table .seat-2 .river,body.at-table .seat-0 .river{
  display:grid!important;grid-template-columns:repeat(12,1fr)!important;gap:2px!important;width:max-content!important;max-width:min(80vw,480px)!important;
}
body.at-table .seat .meld-area .meld{margin:1px!important;}

/* Concealed-count (opponent's face-down hand) also reads as a
   compact wrapped row rather than the old rotated strip hack. */
body.at-table .seat .concealed-count{flex-wrap:wrap!important;max-width:120px!important;}
body.at-table .seat .concealed-count i{transform:none!important;margin:0 1px!important;}

/* seat-0 is the current player: keep the stack anchored toward the
   table centre (card nearest the hand-area at the bottom edge) via
   column-reverse, already set above. */

@media(max-width:700px){
  body.at-table .seats{grid-template-columns:minmax(96px,20%) 1fr minmax(96px,20%)!important;grid-template-rows:minmax(84px,18%) 1fr minmax(150px,30%)!important;}
  body.at-table .seat .meld-area{max-width:min(50vw,170px)!important;}
  body.at-table .seat .revealed-area{max-width:min(50vw,190px)!important;}
  body.at-table .seat-2 .river,body.at-table .seat-0 .river{max-width:min(60vw,240px)!important;}
}

/* Wide-but-short landscape phones: the middle row (seat-1/seat-3) has very
   little vertical room, so let their stacked items spread wider instead of
   wrapping into many short rows — trades width for height. */
@media(max-height:460px) and (orientation:landscape){
  body.at-table .seat-1 .meld-area,body.at-table .seat-3 .meld-area{max-width:min(30vw,260px)!important;}
  body.at-table .seat-1 .revealed-area,body.at-table .seat-3 .revealed-area{max-width:min(34vw,300px)!important;}
  body.at-table .seat-1 .river,body.at-table .seat-3 .river{grid-template-columns:repeat(7,1fr)!important;}
  body.at-table .seat-1,body.at-table .seat-3{gap:2px!important;}
}

/* Portrait auto-rotate mode: the whole .game element is rotated 90deg,
   so the grid still applies correctly to the (visually rotated) table —
   no separate rules needed here beyond ensuring rows/columns still fit
   the rotated aspect ratio, which the percentage-based tracks already
   handle since they're relative to the table box, not the viewport. */

/* 副露叠牌：参考欢乐麻将，三张错叠，被碰的那张横放，补杠压在中间上面 */
.meld{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:0!important;
  padding:0 4px 2px 0;
  background:transparent;
  min-height:calc(var(--tile-h) + 6px);
}
.meld .meld-tile{
  position:relative;
  z-index:1;
  margin-left:-12px;
  flex:0 0 auto;
}
.meld .meld-tile:first-child{margin-left:0}
.meld .meld-tile.is-claimed{
  z-index:2;
  margin-left:3px;
  margin-right:3px;
  transform:rotate(-90deg);
  transform-origin:center 68%;
}
.meld.meld-gang.meld-added .meld-tile.is-stacked{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:5;
  margin:0;
  transform:translateX(-50%);
}
.tile.original-tile.small-tile.meld-tile{
  --tile-w:26px;
  --tile-h:40px;
}
@media(max-width:700px){
  .meld .meld-tile{margin-left:-9px}
  .tile.original-tile.small-tile.meld-tile{--tile-w:20px;--tile-h:31px}
}

/* 左右立牌填满、花牌放大、副露贴手牌 */
body.at-table .seats{
  grid-template-columns:minmax(88px,18%) 1fr minmax(88px,18%)!important;
  grid-template-rows:minmax(110px,22%) 1fr minmax(150px,28%)!important;
  grid-template-areas:"left top right" "left . right" "left bottom right"!important;
}
body.at-table .seat-1,
body.at-table .seat-3{
  justify-content:flex-start!important;
  gap:8px!important;
  padding-top:8px!important;
  padding-bottom:24px!important;
  overflow:hidden!important;
}
body.at-table .seat-1 .player-card,
body.at-table .seat-3 .player-card{order:1!important}
body.at-table .seat-1 .flower-area,
body.at-table .seat-3 .flower-area{order:2!important}
body.at-table .seat-1 .meld-area,
body.at-table .seat-3 .meld-area{order:3!important}
body.at-table .seat-1 .concealed-count,
body.at-table .seat-3 .concealed-count{order:4!important}
body.at-table .seat-1 .river,
body.at-table .seat-3 .river{order:5!important}
body.at-table .seat-2 .player-card{order:1!important}
body.at-table .seat-2 .flower-area{order:2!important}
body.at-table .seat-2 .meld-area{order:3!important}
body.at-table .seat-2 .concealed-count{order:4!important}
body.at-table .seat-2 .river{order:5!important}

body.at-table .flower-area[hidden],
body.at-table .meld-area[hidden],
body.at-table .revealed-area[hidden],
body.at-table .concealed-count[hidden],
body.at-table .river[hidden]{display:none!important}

body.at-table .flower-area{
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  padding:4px 6px!important;
  gap:3px!important;
  flex-wrap:wrap!important;
  background:#04251ce8!important;
  border:1px solid #e6c47488!important;
}
body.at-table .flower-area .small-tile{
  --tile-w:30px!important;
  --tile-h:42px!important;
}
body.at-table .flower-area:before{
  position:static!important;
  display:block!important;
  margin:0 0 2px!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
}

body.at-table .seat .concealed-count{
  display:flex!important;
  flex-wrap:nowrap!important;
  max-width:none!important;
  width:auto!important;
  height:auto!important;
  gap:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.at-table .seat .concealed-count i{display:none!important}
body.at-table .seat .concealed-count .concealed-tile{
  display:block;
  width:44px;
  height:72px;
  margin-left:-18px;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px #0008);
  pointer-events:none;
}
body.at-table .seat .concealed-count .concealed-tile:first-child{margin-left:0}
body.at-table .seat-2 .concealed-count .concealed-tile{
  width:44px;
  height:72px;
  margin-left:-20px;
}
body.at-table .seat-1 .concealed-count,
body.at-table .seat-3 .concealed-count{
  flex-direction:column!important;
  justify-content:flex-start!important;
  flex:1 1 auto!important;
  width:40px!important;
}
body.at-table .seat-1 .concealed-count .concealed-tile,
body.at-table .seat-3 .concealed-count .concealed-tile{
  width:36px;
  height:78px;
  margin: -52px 0 0!important;
}
body.at-table .seat-1 .concealed-count .concealed-tile:first-child,
body.at-table .seat-3 .concealed-count .concealed-tile:first-child{margin-top:0!important}

body.at-table .seat-1 .meld-area,
body.at-table .seat-3 .meld-area{
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  max-width:none!important;
  align-items:inherit!important;
}
body.at-table .seat .meld-area{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}

@media(max-width:700px){
  body.at-table .seats{grid-template-columns:minmax(72px,16%) 1fr minmax(72px,16%)!important}
  body.at-table .flower-area .small-tile{--tile-w:24px!important;--tile-h:34px!important}
  body.at-table .seat-1 .concealed-count .concealed-tile,
  body.at-table .seat-3 .concealed-count .concealed-tile{width:28px;height:60px;margin-top:-40px!important}
  body.at-table .seat-2 .concealed-count .concealed-tile{width:34px;height:56px;margin-left:-16px}
}