:root{--ink:#24372e;--green:#f3f0e7;--green2:#fffdf7;--mint:#53765c;--red:#bc493b;--gold:#bd9954} body{background:#f3f0e7;color:#25382d;background-image:radial-gradient(#6c56300a .7px,transparent .7px);background-size:5px 5px} .screen{max-width:1120px;color:#283a30}.topbar{border-bottom:1px solid #d9d4c5}.brand-mark{background:#bb483a;box-shadow:3px 3px 0 #e1c9a3}.compact{color:#283a30}.profile{color:#49594d}.avatar{background:#e4d8bd;color:#694c35}.card-count{background:#e8dfc8;padding:7px 11px;border-radius:20px;color:#8b6a2d}.card-count b{color:#3d493d}.icon-button,.back{color:#59675b} .hero{margin-top:22px;padding:54px 45px 48px;min-height:337px;border:1px solid #315541;border-radius:5px;background:linear-gradient(108deg,#183c2b 0%,#214e37 66%,#2b5940 100%);box-shadow:0 10px 24px #4a543315;color:#fffdf4}.hero-copy{max-width:590px}.hero .eyebrow{color:#c3b178}.hero h1{color:#fffdf5;font-size:clamp(35px,5vw,48px);letter-spacing:1px}.hero h1 em{color:#e3ca86}.hero p{color:#d4dfd2}.hero .primary{background:#bf493b;box-shadow:3px 3px 0 #80342d;border-radius:3px;padding:14px 20px}.join{border:1px solid #ffffff4b;border-radius:3px;overflow:hidden;background:#ffffff0b}.join input{background:transparent}.join button{background:#ffffff10;color:#f3ead2}.tile{border:1px solid #e2d6ba;box-shadow:5px 7px 0 #0d291d,0 4px 13px #10281844}.orbit{border-color:#efdfac3d}.hero-note{color:#cfceb7} .section-heading{padding:34px 2px 17px}.section-heading h2{color:#2e4034}.section-heading .eyebrow{color:#a27d45}.section-count{color:#98896f}.feature-grid{gap:16px}.feature{background:#fffdf7;border:1px solid #e4ddcb;border-radius:4px;min-height:142px;box-shadow:0 3px 10px #5343290b;padding:20px 21px}.feature-num{color:#a99266}.feature-icon{border:1px solid #e5decd;background:#faf7ef}.feature h3{color:#36483b}.feature p{color:#788074}footer{color:#9a9584} .auth-shell{background:radial-gradient(ellipse at 50% 35%,#e8dfca,#f5f2e9 66%);color:#25382d}.auth-shell>.brand{color:#293d30}.auth-shell .eyebrow,.auth-foot{color:#7f8e7b}.auth-card{border:1px solid #e2dbc9;border-radius:4px;background:#fffdf7;box-shadow:8px 8px 0 #d9cfb7}.auth-card input{border-radius:3px;background:#fbfaf5}.auth-card .primary{border-radius:3px} .table-felt{border:10px solid #79583a;outline:1px solid #d3bd88;background:radial-gradient(ellipse,#43805b,#286144 68%,#1c4a32);box-shadow:inset 0 0 0 2px #dec58a,inset 0 0 40px #153f28,0 10px 20px #362a1b30}.seat{background:#fffdf1;color:#354b3b;border:1px solid #e2d7bb;box-shadow:0 3px 8px #11251b35;border-radius:4px}.seat small{color:#848675}.seat.active-seat{border-color:#e0bf6c;box-shadow:0 0 0 2px #e2c77466,0 3px 8px #11251b35}.center-logo{color:#f1d276;text-shadow:0 2px 8px #173724}.turn-label{color:#fbf4dc}.table-controls button{border:1px solid #c6b894;color:#37473a;background:#fffdf1;border-radius:3px;box-shadow:0 2px 4px #13291c2b}.table-controls .action-red{background:#bc493b;border-color:#bc493b;color:#fff}.hand-tile{height:62px;background:linear-gradient(#fffef8,#e9e4d6);border:1px solid #d6d0bf;box-shadow:0 3px 0 #bcb39c,0 4px 5px #1c302318;color:#314a3b}.hand-tile:hover{transform:translateY(-6px)}.table-help{color:#767d6f}.copy{border-color:#c8beaa;color:#4d5e4e;border-radius:3px}.room-title{color:#455446} @media(max-width:680px){.hero{margin-top:12px;padding:38px 22px 43px;border-radius:4px;min-height:340px}.tiles-art{right:-75px;top:90px;opacity:.23}.hero-copy{max-width:100%}.hero h1{font-size:32px}.hero p{max-width:290px}.feature{background:#fffdf7}.table-felt{border-width:7px}} .avatar-edit{border:0;cursor:pointer;background-position:center;background-size:cover;font:700 13px 'Noto Sans SC'}.avatar-edit.has-image{color:transparent;border:1px solid #d7cdb7}.balance-pill{background:#e6eedf;color:#526d51;padding:7px 11px;border-radius:20px;font-size:11px;white-space:nowrap}.balance-pill b{color:#314c36;margin-left:3px}.stake-setting{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px;color:#e4eadf;font-size:12px}.stake-setting label{color:#f0e1b6}.stake-setting input{width:82px;padding:8px 9px;border:1px solid #ffffff42;border-radius:3px;background:#ffffff12;color:white}.stake-setting input:focus{outline:1px solid #d9c17b}.stake-setting small{flex-basis:100%;color:#b9c8b6;font-size:10px;margin-top:1px}.hero-actions{margin-top:14px}.table-meta{text-align:center;margin:14px 0 0;color:#77806f;font-size:12px}.seat small{font-size:9px}.avatar-edit{overflow:hidden} @media(max-width:680px){.profile{gap:5px}.balance-pill,.card-count{padding:6px 8px;font-size:10px}.stake-setting{max-width:300px;gap:7px}.stake-setting small{line-height:1.6}.table-meta{font-size:10px}.seat small{font-size:8px}} .history-open{border:1px solid #d8cfba;background:#fffdf7;color:#53634f;border-radius:18px;padding:7px 12px;font-size:11px}.history-overlay{position:fixed;inset:0;z-index:20;background:#14251dcc;display:grid;place-items:center;padding:18px}.history-card{width:min(560px,100%);max-height:min(82vh,720px);overflow:auto;background:#faf8f0;color:#344438;padding:22px 24px;border:1px solid #ded5c1;box-shadow:0 18px 60px #111b14aa}.history-card>header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e2dccd;padding-bottom:12px}.history-card h2{font:600 20px 'Noto Sans SC';margin:5px 0 0}.history-list{padding-top:12px}.history-empty{text-align:center;padding:42px 0;color:#898a7b;font-size:13px}.history-item{padding:14px 0;border-bottom:1px solid #e5dfd2}.history-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.history-row b{font-size:13px}.history-row small{display:block;color:#898a7b;font-size:10px;margin-top:5px}.history-row strong{font-size:16px}.positive{color:#438154}.negative{color:#b34d40}.history-summary{color:#747e70;font-size:11px;margin:9px 0}.history-item details{color:#788072;font-size:11px}.history-item summary{cursor:pointer}.history-players{margin-top:9px;border-top:1px dashed #ded7c7}.history-players>div{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #eee9de;color:#3c4b3d}.history-players small{color:#909080;flex:1}.history-players b{font-size:11px}.seat{min-width:128px;padding:9px 10px}.seat-person{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600}.seat-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#e8ddc6;border:1px solid #d1c4a7}.seat-initial{display:grid;place-items:center;color:#485b49;font-size:12px}.seat small{display:block;margin-top:5px;line-height:1.35;color:#838371}.table-meta{margin-top:14px}.table-felt{margin-top:10px} @media(max-width:680px){.history-open{padding:6px 9px;font-size:10px}.history-card{padding:17px 15px}.seat{min-width:108px;padding:7px 5px}.seat-avatar{width:21px;height:21px}.seat small{font-size:7px}.seat-person{gap:4px;font-size:9px}} .stake-setting select{padding:8px 10px;border:1px solid #ffffff42;border-radius:3px;background:#214b36;color:#fffdf4}.social-controls{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:5px 0 9px}.social-chip,.emoji-chip,.voice-button{border:1px solid #d8cfb9;background:#fffdf2;color:#455744;border-radius:18px;padding:7px 11px;font-size:11px;cursor:pointer}.emoji-chip{font-size:17px;padding:4px 8px}.social-divider{width:1px;height:21px;background:#d8d1bf;margin:0 2px}.voice-button{background:#244a35;border-color:#244a35;color:#fff;font-weight:600;min-width:100px;touch-action:none;user-select:none}.voice-button.recording{background:#bf493b;border-color:#bf493b;animation:mic-pulse .8s infinite alternate}@keyframes mic-pulse{to{box-shadow:0 0 0 5px #bf493b33}}.seat[hidden]{display:none!important} @media(max-width:680px){.social-controls{gap:5px;padding:2px 0 7px}.social-chip,.voice-button{font-size:10px;padding:7px 9px}.emoji-chip{font-size:16px;padding:3px 6px}.social-divider{display:none}} #toast.toast{z-index:10000;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));width:max-content;max-width:min(92vw,520px);min-height:48px;padding:13px 20px 13px 48px;border:1px solid #ded2b4;border-radius:24px;background:#fffaf0;color:#354638;box-shadow:0 8px 30px #0b1a1280;display:flex;align-items:center;white-space:normal;text-align:left;font-size:14px;font-weight:600;line-height:1.45;opacity:0;transform:translate(-50%,18px);transition:opacity .2s,transform .2s}#toast.toast:before{content:'✓';position:absolute;left:16px;top:50%;transform:translateY(-50%);width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#e4eedc;color:#426c49;font-size:13px}#toast.toast[data-kind="error"]{border-color:#e2bdb3;background:#fff7f3;color:#75382f}#toast.toast[data-kind="error"]:before{content:'!';background:#f5ded5;color:#a24134;font-weight:900}#toast.toast[data-kind="info"]:before{content:'♪';background:#e6e3d4;color:#7c6938}#toast.toast.show{opacity:1;transform:translate(-50%,0)} .reaction-burst{position:absolute;z-index:8;left:50%;top:47%;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;padding:10px 19px 12px;border:1px solid #fff5cf;border-radius:20px;background:linear-gradient(145deg,#fff8de,#f1d58e);box-shadow:0 8px 24px #09221588,0 0 0 5px #f4d98833;pointer-events:none;animation:reaction-pop 1.65s cubic-bezier(.18,.78,.2,1) both}.reaction-emoji{font-size:clamp(44px,10vw,68px);line-height:1.1;filter:drop-shadow(0 4px 3px #4c3c2744)}.reaction-burst b{color:#3a4d3b;font:600 11px 'Noto Sans SC',sans-serif}.reaction-burst:before,.reaction-burst:after{content:'✦';position:absolute;color:#fff4ca;font-size:20px;animation:sparkle .65s ease-in-out infinite alternate}.reaction-burst:before{left:-12px;top:4px}.reaction-burst:after{right:-14px;bottom:4px}@keyframes reaction-pop{0%{opacity:0;transform:translate(-50%,18px) scale(.2) rotate(-10deg)}15%{opacity:1;transform:translate(-50%,-7px) scale(1.15) rotate(4deg)}28%{transform:translate(-50%,0) scale(1) rotate(0)}78%{opacity:1;transform:translate(-50%,-9px) scale(1)}100%{opacity:0;transform:translate(-50%,-36px) scale(.88)}}@keyframes sparkle{to{transform:scale(1.6) rotate(30deg);opacity:.5}} @media(max-width:680px){#toast.toast{bottom:calc(14px + env(safe-area-inset-bottom));padding:12px 16px 12px 43px;font-size:13px}.reaction-burst{top:44%;padding:9px 17px 10px}} .player-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:13px auto 8px;max-width:800px}.player-roster.two-player{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-player{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid #d9cfb7;border-radius:5px;background:#fffdf6;box-shadow:0 3px 8px #3b2d1815}.roster-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;background:#e8dec8;border:1px solid #d5c8aa}.roster-initial{display:grid;place-items:center;color:#4b624c;font-weight:700}.roster-info{display:grid;gap:4px;min-width:0}.roster-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#324736;font-size:11px}.roster-info small{color:#8c8d7e;font-size:9px}.roster-info i{font-style:normal;margin-left:4px;padding:2px 5px;background:#ead8a3;color:#785c20;border-radius:8px;font-size:9px}.roster-player>strong{margin-left:auto;white-space:nowrap;color:#55704e;font-size:10px}.seat[hidden]{display:none!important}.table-felt .seat[hidden]{display:none!important} @media(max-width:680px){.player-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:9px 0}.player-roster.two-player{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-player{gap:6px;padding:7px 6px}.roster-avatar{width:28px;height:28px;flex-basis:28px}.roster-info b{font-size:10px}.roster-info small{font-size:8px}.roster-player>strong{font-size:9px}.table-felt .seat[hidden]{display:none!important}} /* Porcelain tile faces and vivid green felt, based on the supplied table reference */ .table-felt{background:radial-gradient(ellipse at 50% 36%,#16a25a 0%,#0b894a 47%,#066d3b 100%);border:11px solid #d8c9a7;outline:2px solid #876d49;box-shadow:inset 0 0 0 2px #f0e6c8,inset 0 0 42px #024724,0 15px 34px #111e16aa;} .table-felt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(115deg,#ffffff05 0 1px,transparent 1px 4px);opacity:.45} .center-info{z-index:1;width:min(52%,300px);display:flex;flex-direction:column;align-items:center;gap:5px}.center-logo{font-size:40px;color:#f8edc6;text-shadow:0 2px 1px #765e35,0 0 16px #fff4bd66}.turn-clock{--progress:1;position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#ffe28a calc(var(--progress)*1turn),#ffffff45 0);color:#fffdf5;font:800 14px/1 'DM Sans',sans-serif;text-shadow:0 1px 3px #123c24;box-shadow:0 2px 8px #023a2280}.turn-clock:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#087844;z-index:-1}.turn-clock.urgent{color:#fff;background:conic-gradient(#f28769 calc(var(--progress)*1turn),#ffffff45 0);animation:clock-pulse .55s infinite alternate}.remaining-tiles{color:#fff4cf;background:#064b2eb8;border:1px solid #cfe2bf44;border-radius:14px;padding:3px 10px;font-size:10px;letter-spacing:.3px}.remaining-tiles b{font-size:13px;color:#fff;font-variant-numeric:tabular-nums}.turn-label{padding:4px 9px;border-radius:12px;background:#075c37a6;font-size:11px}.hand{gap:4px;align-items:flex-end;padding:14px 8px 12px;min-height:96px;scrollbar-width:thin;scrollbar-color:#baa97b transparent}.hand-tile{position:relative;isolation:isolate;flex:0 0 clamp(36px,4.35vw,49px);width:clamp(36px,4.35vw,49px);height:70px;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 2px 6px;border:1px solid #f7f3e8;border-radius:5px 5px 7px 7px;background:linear-gradient(145deg,#fffef9 0%,#f5f2e8 72%,#e8e3d4 100%);box-shadow:inset 0 1px 0 #fff,0 2px 0 #d2c8ae,0 5px 0 #a39576,0 8px 11px #052a1855;color:#252a23;transition:transform .14s,box-shadow .14s;touch-action:none;user-select:none}.hand-tile:after{content:"";position:absolute;z-index:-1;left:3px;right:-3px;bottom:-7px;height:8px;border-radius:0 0 5px 3px;background:linear-gradient(90deg,#ae9f80,#766747);transform:skewX(18deg)}.hand-tile:hover{transform:translateY(-7px);box-shadow:inset 0 1px 0 #fff,0 3px 0 #d2c8ae,0 6px 0 #a39576,0 12px 14px #052a1866}.hand-tile.dragging{opacity:.55;transform:translateY(-12px) scale(1.06);z-index:5}.hand-tile.tile-red{color:#c62248}.hand-tile .tile-corner{position:absolute;top:3px;left:5px;font-size:9px;font-weight:800;color:#292923}.tile-wan-mark{font:800 29px/.98 'Noto Serif SC','Noto Sans SC',serif;color:#20231f;text-shadow:0 1px #fff}.tile-label{font:900 10px/1 'Noto Serif SC','Noto Sans SC',serif;color:#bd2944;letter-spacing:1px}.tile-red-mark{font:900 35px/.98 'Noto Serif SC','Noto Sans SC',serif;color:#c31e45;text-shadow:0 1px #fff}.tile-seal{position:absolute;right:4px;bottom:3px;color:#b99a55;font-size:8px}.tile-pips{width:28px;height:40px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:10px;place-content:center;justify-items:center;align-items:center;gap:1px}.pip{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff 0 12%,#ce2a45 35%,#8d1831 100%);box-shadow:0 1px 1px #31312655}.pip-1{background:radial-gradient(circle at 30% 28%,#fff 0 12%,#292d29 35%,#111 100%)}.pip-2{background:radial-gradient(circle at 30% 28%,#fff 0 12%,#247a49 35%,#145432 100%)}.tile-bamboos{width:27px;height:42px;display:grid;grid-template-columns:repeat(3,6px);grid-auto-rows:11px;place-content:center;justify-items:center;gap:2px}.bamboo-stick{position:relative;width:4px;height:10px;border-radius:3px;background:linear-gradient(90deg,#1d633e,#6a9a59,#1d633e);box-shadow:0 0 0 1px #f5f0dd}.bamboo-stick:after{content:"";position:absolute;left:-1px;right:-1px;top:3px;height:2px;background:#e5d7a0}.bamboo-1{background:linear-gradient(90deg,#b92749,#e65c6e,#9e1e38)}.hand-tile.tile-red .tile-label{color:#a91e39}.discard-tile{display:inline-grid;place-items:center;min-width:27px;height:36px;padding:2px 4px;border-radius:3px;background:linear-gradient(#fffef7,#e6dfcd);color:#252923;border:1px solid #e5dcc6;box-shadow:0 2px 0 #a99a79;font-size:11px;font-weight:700}.discard{background:#fffdf5;color:#2d3229;border:1px solid #e4dcc8;box-shadow:0 2px 3px #06331b22}.table-controls button{border-radius:18px;padding:9px 16px;font-weight:650;transition:transform .12s,box-shadow .12s}.table-controls button:hover{transform:translateY(-2px);box-shadow:0 5px 10px #142c1c22}.table-controls .action-red{background:linear-gradient(145deg,#d35458,#a81738);box-shadow:0 3px 0 #791b31,0 5px 10px #5b102a33}.table-help{letter-spacing:.4px}.kong-ledger{max-width:800px;margin:4px auto 8px;padding:7px 10px;border:1px solid #d4c59f;border-radius:9px;background:#fffdf0;color:#655938;font-size:10px;line-height:1.55}.kong-ledger:empty{display:none}.win-celebration{position:absolute;z-index:12;left:50%;top:50%;width:min(270px,75%);min-height:150px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #fff0b6;border-radius:18px;background:radial-gradient(circle at 50% 15%,#fff8d9,#e7c76f 74%,#b58b38);color:#8c2435;box-shadow:0 0 0 7px #f5d88038,0 14px 38px #082d1ca8;animation:win-pop .48s cubic-bezier(.15,.8,.2,1.2) both}.win-celebration b{font:900 23px 'Noto Serif SC','Noto Sans SC',serif;text-shadow:0 1px #fff8d9}.win-celebration small{font-size:12px;color:#73551c}.win-spark{font-size:23px;color:#fff}.win-celebration i{position:absolute;left:50%;top:50%;width:5px;height:9px;border-radius:2px;background:hsl(calc(var(--i)*27),75%,55%);animation:confetti 1.35s ease-out calc(var(--i)*.025s) both}.reaction-burst small{padding:3px 9px;border-radius:10px;background:#b52e48;color:#fff8e8;font-size:10px}.table-meta{font-variant-numeric:tabular-nums;background:#fffdf1;border:1px solid #e4d9bf;border-radius:14px;width:max-content;max-width:100%;padding:6px 14px;margin:12px auto 0;box-shadow:0 3px 10px #11251a14} @keyframes clock-pulse{to{transform:scale(1.08);filter:brightness(1.25)}}@keyframes win-pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes confetti{0%{opacity:1;transform:rotate(0) translateY(0)}100%{opacity:0;transform:rotate(400deg) translateY(calc((var(--i) - 9)*-9px)) translateX(calc((var(--i) - 9)*10px))}} @media(max-width:680px){.table-felt{min-height:285px;border-width:8px}.center-info{width:60%;gap:3px}.center-logo{font-size:33px}.turn-clock{width:35px;height:35px;font-size:12px}.hand{justify-content:flex-start;gap:3px;padding:12px 7px 10px;min-height:88px}.hand-tile{flex-basis:38px;width:38px;height:62px}.tile-wan-mark{font-size:25px}.tile-pips{transform:scale(.88)}.tile-bamboos{transform:scale(.88)}.tile-red-mark{font-size:30px}.table-controls button{padding:8px 12px}.table-meta{font-size:9px;padding:5px 9px}.kong-ledger{font-size:9px;margin:4px 0}.win-celebration{min-height:132px}} .history-kongs{margin:7px 0 10px;padding:8px 10px;border-radius:7px;background:#f0ede2;color:#6b624d;font-size:10px;line-height:1.7}.hand.hu-ready .hand-tile{animation:hu-ready .65s ease-in-out 2 alternate;box-shadow:0 4px 0 #d2c8ae,0 7px 0 #a39576,0 0 14px #d3ab4e88}@keyframes hu-ready{to{transform:translateY(-5px);filter:brightness(1.08)}} .discard-tile{display:inline-grid;place-items:center;flex:0 0 29px;width:29px;height:36px;padding:2px;border-radius:3px;background:linear-gradient(145deg,#fffef9,#eee9dc);color:#242821;border:1px solid #e4dac2;box-shadow:0 2px 0 #a99a79;font:800 8px/1 'Noto Sans SC',sans-serif;white-space:nowrap}.discard-tile.mini-wan{color:#bd2944}.discard-tile.mini-tong{color:#34734b}.discard-tile.mini-tiao{color:#292e27}.discard-tile.mini-red{color:#c21e45;font-size:10px}.discards{max-width:min(248px,78vw);max-height:92px;overflow:hidden;gap:3px} .settlement-summary{max-width:800px;margin:6px auto 10px;padding:10px 13px;border:1px solid #dcc99b;border-radius:10px;background:linear-gradient(120deg,#fffdf4,#f1e8d2);box-shadow:0 5px 16px #17271b13}.settlement-summary:empty{display:none}.settlement-title{display:block;margin-bottom:7px;color:#57472c;font-size:12px}.settlement-players{display:flex;flex-wrap:wrap;gap:7px}.settlement-players>span{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:112px;padding:6px 9px;border:1px solid #e4dbc5;border-radius:7px;background:#fffefa;color:#39493b;font-size:10px}.settlement-players strong{font-size:13px;font-variant-numeric:tabular-nums}.settlement-players .positive{color:#19834a}.settlement-players .negative{color:#c52b3c}.settlement-players .neutral{color:#858474}.table-controls .sort-action{background:linear-gradient(#fffdf5,#eee5cf);color:#4b603e}.hand-tile .tile-corner{display:none}.tile-seal{display:none} @media(max-width:680px){.settlement-summary{margin:6px 0 8px;padding:8px}.settlement-players{gap:5px}.settlement-players>span{min-width:calc(50% - 3px);padding:5px 7px}} @media (orientation:landscape) and (max-height:540px){ html,body,#app{height:100%;min-height:0;overflow:hidden} #table.screen:not(.hidden){display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;min-height:0;padding:0 8px;overflow:hidden} #table .topbar{height:38px;min-height:38px;flex:0 0 38px} #table .room-title{font-size:11px} #table .profile{gap:5px;font-size:10px} #table .card-count{margin-left:3px} #table .table-meta-inline{margin-left:6px;font-size:9px} #player-roster{flex:0 0 auto;width:min(100%,680px);margin:2px auto;gap:3px} #player-roster .roster-player{padding:2px 5px;gap:4px;border-radius:5px} #player-roster .roster-avatar{width:20px;height:20px;flex-basis:20px} #player-roster .roster-info{gap:1px} #player-roster .roster-info b{font-size:8px} #player-roster .roster-info small{font-size:7px} #player-roster .roster-player>strong{font-size:8px} #kong-ledger,#settlement-summary{flex:0 0 auto;width:100%;max-width:680px;margin:1px auto;padding:2px 6px;font-size:8px} #settlement-summary .settlement-title{margin:0 0 2px;font-size:8px} #settlement-summary .settlement-players{gap:2px} #settlement-summary .settlement-players>span{min-width:75px;padding:2px 5px;font-size:8px} #settlement-summary .settlement-players strong{font-size:9px} #table .table-wrap{flex:1 1 auto;min-height:0;padding:2px 0;display:flex;align-items:stretch} #table .table-felt{width:100%;height:100%;min-height:0;max-width:none;margin:0;border-width:5px;border-radius:38%/48%} #table .seat{min-width:88px;padding:3px 5px;font-size:8px} #table .seat-top{top:2px} #table .seat-bottom{bottom:2px} #table .seat-left{left:3px;top:45%} #table .seat-right{right:3px;top:45%} #table .seat-avatar{width:18px;height:18px} #table .seat small{margin-top:1px;font-size:7px} #table .center-info{gap:2px;width:40%} #table .center-logo{font-size:26px;line-height:1} #table .turn-clock{width:29px;height:29px;font-size:10px} #table .remaining-tiles{padding:2px 6px;font-size:8px} #table .remaining-tiles b{font-size:10px} #table .turn-label{padding:2px 6px;font-size:8px} #table .discards{max-width:260px;max-height:64px;gap:2px} #table .discard-tile{flex-basis:23px;width:23px;height:27px;font-size:7px} #table .table-controls{flex:0 0 auto;min-height:26px;line-height:1} #table .table-controls button{margin:1px 2px;padding:4px 9px;font-size:9px} #table .social-controls{flex:0 0 auto;min-height:28px;padding:1px 0;gap:4px;flex-wrap:nowrap} #table .social-chip,#table .emoji-chip,#table .voice-button{min-width:0;padding:3px 7px;font-size:9px} #table .emoji-chip{font-size:13px;padding:2px 5px} #table .voice-button{min-width:74px} #table .hand{flex:0 0 auto;height:61px;min-height:61px;padding:7px 5px 8px;gap:3px;justify-content:center} #table .hand-tile{flex-basis:34px;width:34px;height:46px;padding:3px 1px} #table .tile-wan-mark{font-size:21px} #table .tile-label{font-size:8px} #table .tile-red-mark{font-size:25px} #table .tile-pips{transform:scale(.72)} #table .tile-bamboos{transform:scale(.72)} #table .table-help{display:none} } /* Full-screen game table on phones and desktop, with an expandable reaction tray. */ #table.screen:not(.hidden){position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:3px;overflow:hidden;box-sizing:border-box;background:#09291c;z-index:30} #table .topbar{height:42px;min-height:36px;flex:0 0 auto;margin:0;padding:0 4px} #table .table-anchor{display:none}#table .table-meta-inline{margin-left:10px;font-size:11px;color:#bfe0c6;white-space:nowrap;vertical-align:middle} #table #kong-ledger,#table #settlement-summary{flex:0 0 auto;margin:0 auto;padding:4px 8px} #table .table-wrap{flex:1 1 0;min-height:0;width:100%;margin:0;padding:2px 0;display:flex;align-items:stretch} #table .table-felt{flex:1 1 auto;width:100%;height:100%;min-height:0;max-width:none;margin:0} #table .social-controls{position:relative;z-index:15;flex:0 0 auto;min-height:34px;padding:1px 0 2px;gap:7px} #table .reaction-group{position:relative;display:flex;align-items:center} #table .reaction-toggle{white-space:nowrap} #table .reaction-menu{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,42px);gap:5px;padding:9px;border:1px solid #e2d2a5;border-radius:16px;background:linear-gradient(145deg,#fffdf2,#e9dfc5);box-shadow:0 8px 24px #061b12a8;z-index:20} #table .reaction-menu[hidden]{display:none!important} #table .reaction-menu .emoji-chip{width:42px;height:42px;padding:0;border:1px solid #d8cba8;border-radius:12px;background:#fffef8;font-size:23px;box-shadow:0 2px 4px #263b2518} #table .table-controls{flex:0 0 auto;min-height:34px;padding:1px 0} #table .hand{flex:0 0 auto;min-height:0;max-height:17dvh;overflow-x:auto;overflow-y:visible;justify-content:center;padding:6px 5px 10px} #table .table-help{display:none} @media(max-width:680px){#table.screen:not(.hidden){gap:2px;padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}#table .topbar{height:36px;min-height:32px}#table .table-meta-inline{margin-left:6px;font-size:9px}#table .table-felt{border-width:6px;border-radius:20px}#table .table-felt .center-info{max-width:48%;padding:5px 8px}#table .social-controls{min-height:30px;gap:5px}#table .social-chip,#table .voice-button{padding:5px 8px;font-size:10px}#table .reaction-menu{grid-template-columns:repeat(4,38px);gap:4px;padding:7px}#table .reaction-menu .emoji-chip{width:38px;height:38px;font-size:21px}#table .table-controls{min-height:31px}#table .table-controls button{padding:6px 10px;font-size:10px}#table .hand{max-height:16dvh;justify-content:flex-start;gap:2px;padding:5px 4px 9px}#table .hand-tile{flex-basis:clamp(30px,8vw,42px);width:clamp(30px,8vw,42px);height:clamp(46px,10vh,62px)}} /* Put the turn timer at the true center of the felt with no center frame. */ #table .table-felt .center-info{left:0;top:0;transform:none;width:100%;height:100%;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none} #table .table-felt .center-logo{display:none} #table .table-felt #turn-clock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(54px,8vh,76px);height:clamp(54px,8vh,76px);font-size:clamp(17px,3vh,24px);z-index:3} #table .table-felt #remaining-tiles{position:absolute;left:50%;top:calc(50% + clamp(35px,5vh,48px));transform:translateX(-50%);z-index:3;white-space:nowrap} #table .table-felt .turn-label{position:absolute;left:50%;top:calc(50% - clamp(47px,6vh,57px));transform:translateX(-50%);z-index:3} #table .table-felt #discards{position:absolute;left:50%;top:calc(50% + clamp(63px,9vh,82px));transform:translateX(-50%);width:min(58%,470px);max-height:24%;overflow:hidden;z-index:2} @media(max-width:680px){#table .table-felt #turn-clock{width:54px;height:54px;font-size:17px}#table .table-felt #remaining-tiles{top:calc(50% + 34px)}#table .table-felt .turn-label{top:calc(50% - 44px)}#table .table-felt #discards{top:calc(50% + 64px);width:66%;max-height:22%}} #table .table-felt #discards{display:grid;grid-template-columns:repeat(9,29px);grid-auto-rows:32px;gap:3px;justify-content:center;align-content:start;width:min(78%,420px);max-height:38%;overflow:hidden} #table .table-felt #discards .discard-tile{width:29px;height:32px;min-width:0;box-sizing:border-box} @media(max-width:680px){#table .table-felt #discards{grid-template-columns:repeat(9,26px);grid-auto-rows:29px;gap:2px;width:min(92%,320px);max-height:38%}#table .table-felt #discards .discard-tile{width:26px;height:29px}} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{font-size:22px;line-height:1;letter-spacing:0} /* Each seat keeps its own last five discards in front of them. */ #table .table-felt #discards{display:none!important} #table .player-rivers{position:absolute;inset:0;z-index:4;pointer-events:none} #table .player-zone{position:absolute;display:flex;align-items:center;gap:3px;max-width:80%;} #table .zone-0{left:50%;bottom:15%;width:min(80%,560px);transform:translateX(-50%);justify-content:center} #table .zone-2{left:50%;top:15%;width:min(80%,560px);transform:translateX(-50%);justify-content:center} #table .zone-1{left:16%;top:50%;width:34%;transform:translateY(-50%);justify-content:flex-end} #table .zone-3{right:16%;top:50%;width:34%;transform:translateY(-50%);justify-content:flex-start} #table .discard-river{display:grid;grid-template-columns:repeat(5,27px);grid-auto-rows:32px;gap:2px;align-content:start;justify-content:center;max-height:70px;overflow:hidden} #table .discard-river .discard-tile{width:27px;height:32px;min-width:0;padding:1px} #table .discard-river .tile-art-svg{width:21px;height:27px;max-width:21px;max-height:27px} #table .opponent-melds,.hand-melds{display:flex;align-items:flex-end;gap:3px;flex:0 0 auto} #table .opponent-melds .meld-tiles,.hand-melds .meld-tiles{display:flex;align-items:flex-end;gap:1px} #table .meld-group{display:flex;align-items:flex-end;padding:1px;border-radius:4px;background:#ffffff24} #table .meld-tile{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:29px;overflow:hidden;border:1px solid #eee9dc;border-radius:3px;background:linear-gradient(145deg,#fffef9,#e9e4d8);box-shadow:0 2px 0 #a99a79;color:#252923} #table .meld-tile .tile-art-svg{width:19px;height:25px;max-width:19px;max-height:25px} #table .meld-tile .tile-wan-mark{font-size:14px;line-height:.9} #table .meld-tile .tile-label{font-size:6px;letter-spacing:0} #table .hand .hand-melds{gap:4px;margin-right:5px;padding-right:6px;border-right:1px solid #d0c19b} #table .hand .hand-melds .meld-group{padding:0;background:transparent} #table .hand .meld-tile{flex-basis:clamp(24px,3.3vw,36px);width:clamp(24px,3.3vw,36px);height:clamp(48px,8.2vh,68px);border-radius:4px 4px 5px 5px} #table .hand .meld-tile .tile-art-svg{width:94%;height:90%;max-width:34px;max-height:58px} #table .hand .meld-tile .tile-wan-mark{font-size:18px} #table .hand .meld-tile .tile-label{font-size:8px;letter-spacing:0} #table .hand-tile .tile-art-svg{max-width:48px;max-height:58px} #table .hand-tile.tile-tong .tile-art-dots{max-width:48px;max-height:58px} #table .hand-tile.tile-tiao .tile-art-bamboo{max-width:46px;max-height:58px} #table .hand-tile.tile-tong .tile-art-svg,#table .hand-tile.tile-tiao .tile-art-svg{width:112%;height:110%;max-width:54px;max-height:62px} #table .zone-1{left:2%;width:46%} #table .zone-3{right:2%;width:46%} @media (orientation:landscape) and (max-height:540px){ #table .zone-0{bottom:13%} #table .zone-2{top:13%} #table .zone-1{left:14%;width:36%} #table .zone-3{right:14%;width:36%} #table .discard-river{grid-template-columns:repeat(5,23px);grid-auto-rows:27px;gap:2px;max-height:58px} #table .discard-river .discard-tile{width:23px;height:27px} #table .discard-river .tile-art-svg{width:18px;height:23px} #table .meld-tile{flex-basis:19px;width:19px;height:24px} #table .meld-tile .tile-art-svg{width:17px;height:21px} #table .hand .meld-tile{flex-basis:clamp(24px,3.2vw,34px);width:clamp(24px,3.2vw,34px);height:clamp(43px,11vh,56px)} #table .hand .meld-tile .tile-art-svg{max-height:48px} } @media (orientation:landscape) and (max-height:540px){ #table .hand{max-height:94px;gap:2px;padding:5px 4px 9px} #table .hand-tile{flex-basis:clamp(30px,5.2vw,54px);width:clamp(30px,5.2vw,54px);height:clamp(46px,13vh,64px)} #table .hand-tile .tile-art-svg{width:92%;max-width:48px;max-height:clamp(38px,11vh,54px)} #table .tile-wan-mark,#table .tile-wan-mark+.tile-label{font-size:clamp(18px,5.5vh,24px)} } /* Compact landscape lobby: keep room setup and account actions visible, remove below-the-fold promo blocks. */ @media (orientation:landscape) and (max-height:540px){ #lobby.screen:not(.hidden){position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;padding:0 14px 6px;display:flex;flex-direction:column;gap:0;overflow:hidden;box-sizing:border-box} #lobby .topbar{height:42px;min-height:38px;flex:0 0 42px} #lobby .profile{gap:7px;font-size:11px} #lobby .hero{flex:1 1 auto;min-height:0;margin:5px 0 0;padding:9px 18px;display:flex;align-items:center;border:1px solid #315541;border-radius:6px} #lobby .hero-copy{width:100%;max-width:none} #lobby .hero-copy>.eyebrow{font-size:8px;letter-spacing:1.3px} #lobby .hero h1{font-size:clamp(22px,4.5vh,32px);margin:2px 0} #lobby .hero p{max-width:none;margin:2px 0;font-size:10px;line-height:1.5} #lobby .stake-setting{max-width:none;margin-top:7px;gap:8px;font-size:10px;flex-wrap:nowrap} #lobby .stake-setting input,#lobby .stake-setting select{padding:6px 8px;font-size:10px} #lobby .stake-setting input{width:70px} #lobby .stake-setting small{display:none} #lobby .hero-actions{width:min(100%,620px);margin-top:8px;gap:9px;align-items:center} #lobby .hero-actions>.primary{align-self:auto;margin:0;padding:8px 13px;font-size:11px;white-space:nowrap} #lobby .join{height:36px;flex:1;min-width:0} #lobby .join input{min-width:0;padding:7px 9px;font-size:10px} #lobby .join button{padding:0 10px;font-size:10px;white-space:nowrap} #lobby .tiles-art,#lobby .hero-note,#lobby .section-heading,#lobby .feature-grid,#lobby footer{display:none!important} } /* Fallback for mobile browsers that refuse orientation locking: rotate the game view itself. */ @media (orientation:portrait) and (max-width:900px){ #table.screen:not(.hidden){inset:auto;top:0;left:0;right:auto;bottom:auto;width:100dvh;height:100vw;padding:4px 8px;transform:rotate(90deg) translateY(-100%);transform-origin:top left} #table .hand{max-height:19vw;justify-content:center} #table .hand-tile{flex-basis:clamp(34px,4.5dvh,48px);width:clamp(34px,4.5dvh,48px);height:clamp(45px,13vw,62px)} #table .hand-tile .tile-art-svg{width:92%;max-height:clamp(36px,13vw,54px)} #table .table-felt #discards{max-height:31%;width:min(78%,420px)} } .hand-tile .tile-art-svg{display:block;width:100%;height:100%;max-width:44px;max-height:54px;overflow:visible;flex:none} .hand-tile.tile-tong .tile-art-dots{max-width:45px;max-height:56px} .hand-tile.tile-tiao .tile-art-bamboo{max-width:42px;max-height:55px} .hand-tile .tile-art-bird{max-width:43px;max-height:56px} .discard-tile .tile-art-svg{display:block;width:22px;height:29px;overflow:visible} .discard-tile:has(.tile-art-svg){min-width:25px;height:32px;padding:1px} @media (orientation:landscape) and (max-height:540px){#table .hand-tile .tile-art-svg{max-height:44px}} .discard-tile{position:relative;display:inline-grid;place-items:center;flex:0 0 29px;width:29px;height:36px;padding:0;overflow:hidden;border-radius:3px;background:linear-gradient(145deg,#fffef9,#eee9dc);color:#252923;border:1px solid #e4dac2;box-shadow:0 2px 0 #a99a79}.discard-tile .tile-wan-mark,.discard-tile .tile-red-mark{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:19px;line-height:1}.discard-tile .tile-pips,.discard-tile .tile-bamboos{position:absolute;top:-5px;left:50%;transform:translateX(-50%) scale(.48);transform-origin:top center}.discard-tile .tile-label{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:5px;letter-spacing:0}.discard-tile.mini-red .tile-label{color:#b6193e} /* Immersive game-table treatment inspired by the supplied full-screen layout */ #table .player-roster{display:none!important} .table-felt{border:12px solid #762f2c;outline:3px solid #d8b25d;border-radius:22px;background:radial-gradient(ellipse at 50% 42%,#e5c878 0%,#d1a953 56%,#b9823c 100%);box-shadow:inset 0 0 0 2px #f4df9e,inset 0 0 45px #71431f77,0 16px 35px #1d1d16aa;} .table-felt:before{content:"";position:absolute;inset:10% 12%;border:2px solid #7f532d66;border-radius:10px;box-shadow:inset 0 0 0 4px #f4df9c33,0 0 0 1px #f2dc9633;pointer-events:none;z-index:0} .table-felt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:repeating-linear-gradient(115deg,#fff6d505 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,#fff7d412,transparent 68%);opacity:.7} .table-felt .seat{z-index:2;border:1px solid #ebd99c;border-radius:10px;background:linear-gradient(145deg,#fbf5df,#e7d6a7);color:#303629;box-shadow:0 4px 10px #51331e55,inset 0 1px #fffdf2} .table-felt .seat.active-seat{border-color:#fff0a8;box-shadow:0 0 0 2px #f9df8290,0 5px 13px #51331e66} .table-felt .center-info{z-index:2;padding:8px 14px;border:2px solid #d7b45a;border-radius:12px;background:linear-gradient(145deg,#1c2522f5,#101715f5);box-shadow:0 0 0 3px #6a4b2477,0 8px 18px #50341455} .table-felt .center-logo{color:#f5d779;text-shadow:0 2px #725629,0 0 13px #f8dc8b7a} .table-felt .turn-label{color:#fff7dc} .tile-wall{position:absolute;z-index:1;pointer-events:none;border:2px solid #e8e0c9;border-radius:4px;background:repeating-linear-gradient(90deg,#07502c 0 18px,#8ddec166 19px 20px,#0b6a39 21px 24px),linear-gradient(#dce6d1 0 20%,#176f3d 21% 100%);box-shadow:0 4px 0 #b8a47b,0 7px 10px #51382155} .tile-wall:after{content:"";position:absolute;inset:2px 0 auto;height:4px;background:repeating-linear-gradient(90deg,#f6f4e8 0 18px,#b4bda8 19px 20px,#e8eee1 21px 24px);border-radius:2px} .tile-wall-top{left:50%;top:17%;width:48%;height:15px;transform:translateX(-50%)} .tile-wall-bottom{left:50%;bottom:17%;width:48%;height:15px;transform:translateX(-50%)} .tile-wall-left{left:17%;top:50%;width:15px;height:47%;transform:translateY(-50%);background:repeating-linear-gradient(180deg,#07502c 0 18px,#8ddec166 19px 20px,#0b6a39 21px 24px),linear-gradient(90deg,#dce6d1 0 20%,#176f3d 21% 100%)} .tile-wall-right{right:17%;top:50%;width:15px;height:47%;transform:translateY(-50%);background:repeating-linear-gradient(180deg,#07502c 0 18px,#8ddec166 19px 20px,#0b6a39 21px 24px),linear-gradient(90deg,#dce6d1 0 20%,#176f3d 21% 100%)} .table-felt.two-player .tile-wall-left,.table-felt.two-player .tile-wall-right{display:none} .table-felt.two-player .tile-wall-top,.table-felt.two-player .tile-wall-bottom{width:64%} .table-felt .discards{z-index:2;position:relative} .table-felt .seat-top{top:3%}.table-felt .seat-bottom{bottom:3%}.table-felt .seat-left{left:2%;top:45%}.table-felt .seat-right{right:2%;top:45%} .settlement-summary{margin-top:6px} /* Keep the original green table while sharpening the porcelain tile finish. */ .table-felt{background:radial-gradient(ellipse at 50% 38%,#168b50 0%,#08743f 58%,#075b34 100%);border-color:#17623c;outline-color:#d8c9a7;box-shadow:inset 0 0 0 2px #eadbb4,inset 0 0 48px #013b21,0 15px 34px #111e16aa} .table-felt:before{border-color:#c4d6a72c;box-shadow:inset 0 0 0 4px #dce9c510,0 0 0 1px #e9e9c91c} .table-felt:after{background:repeating-linear-gradient(115deg,#ffffff08 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,#c9f2d10a,transparent 68%)} .hand-tile{border:1px solid #fff;border-radius:5px 5px 7px 7px;background:linear-gradient(112deg,#fff 0%,#fffefa 30%,#f7f5ed 72%,#e4e0d4 100%);box-shadow:inset 1px 1px 0 #fff, inset -2px -2px 4px #d5d0c266,0 2px 0 #d3cbb8,0 5px 0 #9d927a,0 8px 12px #031f145c} .hand-tile:before{content:"";position:absolute;z-index:-1;inset:1px 1px 42% 1px;border-radius:4px 4px 2px 2px;background:linear-gradient(#fff8,#ffffff00);pointer-events:none} .hand-tile:after{background:linear-gradient(90deg,#a99d83,#76684c);box-shadow:inset 0 1px #e7dfcd} .tile-wan-mark,.tile-red-mark{filter:drop-shadow(0 .35px 0 currentColor)} .tile-pips .pip{width:8px;height:8px;box-shadow:inset 0 0 1px #fff,0 1px 1px #31312666} .discard-tile{background:linear-gradient(125deg,#fff,#f1eee4 75%,#ddd8ca);box-shadow:inset 0 1px #fff,0 1px 0 #c9c0ab,0 3px 0 #8c8068,0 5px 7px #09251655} .table-felt .center-info{border-color:#d8c280;background:linear-gradient(145deg,#173629f5,#10251cf5);box-shadow:0 0 0 3px #053a2780,0 8px 18px #06241855} .table-felt.two-player .tile-wall-left,.table-felt.two-player .tile-wall-right{display:none} .table-felt.two-player .tile-wall-top,.table-felt.two-player .tile-wall-bottom{width:64%} @media (orientation:landscape) and (max-height:540px){ body{overflow:hidden} #table.screen:not(.hidden){position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;margin:0;padding:5px 9px calc(4px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px;overflow:hidden;background:#0b2419;z-index:30} #table .topbar{flex:0 0 32px;min-height:32px;margin:0;padding:0 2px;border:0} #table .table-meta{flex:0 0 auto;margin:0 auto;padding:3px 9px;font-size:9px;line-height:1.15} #table #kong-ledger,#table #settlement-summary{flex:0 0 auto;margin:0 auto;padding:3px 7px;font-size:8px;line-height:1.15} #table .table-wrap{flex:1 1 0;min-height:0;width:100%;margin:0;display:flex;align-items:stretch} #table .table-felt{width:100%;height:100%;min-height:0;max-width:none;margin:0;border-width:6px;border-radius:26px;background:radial-gradient(ellipse at 50% 38%,#168b50 0%,#08743f 58%,#075b34 100%)} #table .table-felt .seat{min-width:96px;padding:4px 7px} #table .table-felt .seat-avatar{width:20px;height:20px} #table .table-felt .seat-person{font-size:9px;gap:4px} #table .table-felt .seat small{font-size:7px;margin-top:2px} #table .table-felt .seat-top{top:1%} #table .table-felt .seat-bottom{bottom:1%} #table .table-felt .center-info{width:min(34%,250px);padding:3px 8px;gap:2px} #table .center-logo{font-size:24px} #table .turn-clock{width:30px;height:30px;font-size:10px} #table .table-felt .discards{max-width:50%;max-height:55%;overflow:hidden} #table .table-felt .tile-wall-top{top:11%} #table .table-felt .tile-wall-bottom{bottom:11%} #table .table-felt .tile-wall-left,#table .table-felt .tile-wall-right{top:50%;height:65%} #table .social-controls{flex:0 0 auto;padding:0;gap:4px} #table .social-chip,#table .voice-button{padding:4px 8px;font-size:9px} #table .emoji-chip{padding:1px 5px;font-size:14px} #table .table-controls{flex:0 0 auto;min-height:27px;gap:4px;padding:0} #table .table-controls button{padding:4px 9px;font-size:9px} #table .hand{flex:0 0 auto;min-height:0;max-height:84px;overflow-x:auto;overflow-y:visible;justify-content:center;padding:6px 5px 9px;gap:2px} #table .hand-tile{flex-basis:clamp(28px,4.15vw,42px);width:clamp(28px,4.15vw,42px);height:clamp(42px,9vh,58px);padding:3px 1px} #table .tile-wan-mark{font-size:clamp(18px,3vh,24px)} #table .tile-label{font-size:8px} #table .tile-red-mark{font-size:clamp(23px,4vh,30px)} #table .tile-pips{transform:scale(.78)} #table .tile-bamboos{transform:scale(.78)} #table .table-help{display:none} } .wait-hint{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;margin:1px auto;padding:2px 7px;max-width:100%;overflow-x:auto;scrollbar-width:none;color:#42563f;font-size:10px;white-space:nowrap} .wait-hint.hidden{display:none!important} .wait-hint-label{padding:4px 8px;border-radius:12px;background:#d7bb66;color:#483c20;font-size:10px} .wait-hint-copy{color:#63715a} .wait-hint-tile{display:grid;place-items:center;flex:0 0 24px;width:24px;height:31px;border:1px solid #e1d8c4;border-radius:4px;background:linear-gradient(#fffef8,#ece7da);box-shadow:0 2px 0 #a89979;overflow:hidden} .wait-hint-tile .tile-art-svg{width:22px;height:27px;max-width:22px;max-height:27px} .wait-hint-tile .tile-wan-mark{font-size:15px;line-height:.85} .wait-hint-tile .tile-label{font-size:6px;letter-spacing:0} @media (orientation:landscape) and (max-height:540px){#table .wait-hint{min-height:27px;font-size:8px;padding:1px 5px;gap:3px}#table .wait-hint-tile{flex-basis:20px;width:20px;height:24px}#table .wait-hint-tile .tile-art-svg{width:18px;height:21px}} /* Keep the felt clear and show the wall only after a hand is dealt. */ #table .table-felt:before{display:none!important} #table .table-felt:not(.has-dealt) .tile-wall{display:none!important} /* Mahjong table restyle inspired by the supplied green-table reference. */ #table .table-felt{border-color:#263831;outline-color:#111b17;background:radial-gradient(ellipse at 50% 40%,#079750 0%,#087b43 58%,#075d36 100%);box-shadow:inset 0 0 0 1px #c9efd01c,inset 0 0 42px #01371f99,0 12px 28px #07130f99} #table .table-felt:before{display:none!important} #table .table-felt:after{background:repeating-linear-gradient(115deg,#ffffff05 0 1px,transparent 1px 5px),radial-gradient(ellipse at center,#b9f2ce09,transparent 72%);opacity:.65} #table .tile-wall{height:22px;border:2px solid #fff0bd;border-radius:4px;background:repeating-linear-gradient(90deg,#f4ca62 0 18px,#fff0ad 19px 20px,#d99b2e 21px 23px),linear-gradient(#fff2c6 0 18%,#dc9a29 19% 100%);box-shadow:0 3px 0 #866025,0 6px 10px #061c12aa} #table .tile-wall:after{inset:1px 0 auto;height:5px;background:repeating-linear-gradient(90deg,#fff8d9 0 18px,#d4b66a 19px 20px,#fff4c9 21px 23px);border-radius:2px} #table .tile-wall-top,#table .tile-wall-bottom{height:22px} #table .tile-wall-left,#table .tile-wall-right{width:22px;background:repeating-linear-gradient(180deg,#f4ca62 0 18px,#fff0ad 19px 20px,#d99b2e 21px 23px),linear-gradient(90deg,#fff2c6 0 18%,#dc9a29 19% 100%)} #table .tile-wall-left:after,#table .tile-wall-right:after{inset:0 1px auto;width:5px;height:100%;background:repeating-linear-gradient(180deg,#fff8d9 0 18px,#d4b66a 19px 20px,#fff4c9 21px 23px)} #table .table-felt #turn-clock{width:auto;height:auto;padding:0 8px;border-radius:0;background:transparent;color:#42eaff;font-size:clamp(30px,5.4vh,54px);font-weight:500;text-shadow:0 0 12px #36dfff88;box-shadow:none} #table .table-felt #turn-clock:before{display:none} #table .table-felt #turn-clock.urgent{background:transparent;color:#ff8a71} @media (orientation:landscape) and (max-height:540px){#table .tile-wall,#table .tile-wall-top,#table .tile-wall-bottom{height:18px}#table .tile-wall-left,#table .tile-wall-right{width:18px}#table .table-felt #turn-clock{font-size:clamp(25px,6vh,40px)}} /* Full-bleed table with an even-width rail on every side. */ #table .table-wrap{width:100%;min-height:0;padding:0;align-self:stretch} #table .table-felt{box-sizing:border-box;flex:1 1 auto;width:100%;height:100%;margin:0;border:8px solid #263831!important;outline:2px solid #111b17;border-radius:18px} /* Blend the even-width table edge into the green felt. */ #table .table-felt{border-color:transparent!important;outline:0!important;box-shadow:inset 0 0 0 1px #c9efd01c,inset 0 0 42px #01371f99!important} /* Compact, high-contrast player name and ID cards on the table. */ #table .table-felt .seat{width:max-content;min-width:76px!important;max-width:142px;padding:3px 5px!important;border-radius:7px} #table .table-felt .seat-person{gap:4px;font-size:9px} #table .table-felt .seat-person>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#153c2a;font-weight:800} #table .table-felt .seat-avatar{width:18px;height:18px;flex:0 0 18px} #table .table-felt .seat small{margin-top:2px;color:#245a37;font-size:8px;font-weight:800;line-height:1.15;text-shadow:0 1px #fff9} #table .table-felt .seat.active-seat{border-color:#d89024;box-shadow:0 0 0 1px #f1c254,0 2px 6px #2d220b55} /* Place the local player's ID card in the lower-left corner, clear of the hand. */ #table .table-felt .seat-bottom{left:1%;right:auto;top:auto;bottom:1%;transform:none;width:max-content;min-width:76px;max-width:118px} /* Keep game notices in the center of the table, away from the hand. */ #toast.toast.game-toast{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);max-width:min(68vw,440px);width:max-content;z-index:10001} #toast.toast.game-toast.show{transform:translate(-50%,-50%)} #table .center-info .wait-hint{position:absolute;left:50%;top:calc(50% - 96px);transform:translateX(-50%);width:max-content;max-width:78%;margin:0;z-index:6;background:#0c392cbf;border:1px solid #a6d5b644;border-radius:14px;padding:3px 7px;color:#fff} #table .wait-hint-copy{color:#f4f2df} #table .discard-tile .tile-wan-mark,#table .discard-river .discard-tile .tile-wan-mark{font-size:14px!important;line-height:.92} #table .bird-display{position:absolute;left:50%;top:calc(50% + 58px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:3px;padding:3px 7px;border-radius:12px;background:#0b392dbd;border:1px solid #b8debe66;z-index:6;white-space:nowrap} #table .bird-display[hidden]{display:none!important} #table .bird-label{color:#f3d477;font-size:9px;margin-right:2px} #table .bird-tile{display:grid;place-items:center;width:23px;height:30px;overflow:hidden;border:1px solid #eee7d5;border-radius:3px;background:linear-gradient(#fffef8,#e8e3d7);box-shadow:0 2px 0 #9b8d70} #table .bird-tile .tile-art-svg{width:20px;height:26px;max-width:20px;max-height:26px} #table .bird-tile .tile-wan-mark{font-size:14px;line-height:.9} #table .bird-tile .tile-label{font-size:5px;letter-spacing:0} #table .bird-tile .tile-red-mark{font-size:19px} #table .table-controls button.auto-ting{background:#d7ba63;color:#203c2c;border-color:#f0dc97;font-weight:800} /* Mobile landscape: keep social actions in a fixed bottom dock and center waiting status. */ @media (orientation:landscape) and (max-height:540px){ #table.screen:not(.hidden){padding-bottom:calc(38px + env(safe-area-inset-bottom))} #table>.social-controls{position:fixed;left:50%;bottom:calc(4px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;flex-wrap:nowrap;justify-content:center;width:max-content;max-width:calc(100vw - 16px);min-height:30px;padding:3px 8px;gap:6px;border:1px solid #b7d2a755;border-radius:20px;background:#092d20eF;box-shadow:0 4px 16px #06150fc2} #table>.social-controls .social-chip,#table>.social-controls .voice-button{min-height:28px;padding:4px 10px;font-size:10px;white-space:nowrap} #table>.social-controls .reaction-group{position:relative} #table>.social-controls .reaction-menu{bottom:calc(100% + 8px)} #table .turn-label{display:block;max-width:min(72vw,360px);margin:3px auto;padding:4px 9px;border:1px solid #d4e6cb44;border-radius:14px;background:#092d20b8;color:#f2f3dd;font-size:clamp(9px,2.5vh,13px);line-height:1.35;white-space:normal} } /* Align the full remaining-wall label directly under the central turn timer. */ @media (orientation:landscape) and (max-height:540px){ #table .table-felt .center-info>.remaining-tiles{position:absolute;left:50%;top:calc(50% + clamp(28px,5vh,38px));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:3px;width:max-content;z-index:4;white-space:nowrap;padding:3px 8px;border:1px solid #c9e5ce44;border-radius:12px;background:#073b29bf;color:#edf4df;font-size:clamp(8px,2vh,11px);line-height:1.25} #table .table-felt .center-info>.remaining-tiles #remaining-tiles{position:static;left:auto;top:auto;transform:none;display:inline;font-size:inherit;line-height:inherit;color:#fff;font-weight:800} } /* Compact central round indicator modeled on the supplied timer reference. */ #table .table-felt .table-clock-layout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;z-index:4;pointer-events:none} #table .table-felt .remaining-tiles{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:35px;padding:3px 4px;border:0;border-radius:0;background:transparent;color:#d9e4ce;font-size:clamp(9px,2.4vh,13px);line-height:1.05;text-shadow:0 1px 4px #071b10;white-space:nowrap} #table .table-felt .remaining-tiles b{position:static;left:auto;top:auto;transform:none;display:block;color:#f0d26f;font-size:clamp(17px,4vh,25px);font-weight:900;line-height:1.1} #table .table-felt .turn-panel{position:relative;display:block;width:clamp(64px,16vh,86px);height:clamp(64px,16vh,86px);border:2px solid #c49a47;border-radius:12px;background:linear-gradient(145deg,#30312e 0%,#161b19 65%,#101713 100%);box-shadow:inset 0 0 0 2px #0b1712,0 0 0 2px #172f26,0 4px 12px #07160f99} #table .table-felt .turn-panel:before{content:"";position:absolute;inset:5px;border:1px solid #d9bf7960;border-radius:8px;pointer-events:none} #table .table-felt .turn-panel .direction{position:absolute;z-index:2;color:#e5e0c5;font:700 clamp(8px,2vh,11px) 'Noto Serif SC','Noto Sans SC',serif;text-shadow:0 1px 3px #000} #table .table-felt .turn-panel .north{top:5px;left:50%;transform:translateX(-50%)} #table .table-felt .turn-panel .east{right:5px;top:50%;transform:translateY(-50%)} #table .table-felt .turn-panel .south{bottom:20px;left:50%;transform:translateX(-50%)} #table .table-felt .turn-panel .west{left:5px;top:50%;transform:translateY(-50%)} #table .table-felt .turn-panel #turn-clock{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(32px,7.6vh,42px);height:clamp(32px,7.6vh,42px);margin:0;padding:0;border:2px solid #856b39;border-radius:50%;background:radial-gradient(circle at 35% 28%,#494335,#211f1a 68%);color:#ffe15e;font:900 clamp(18px,3.8vh,26px)/1 'DM Sans','Noto Sans SC',sans-serif;text-shadow:0 0 8px #f6d34766;box-shadow:0 2px 6px #0009;z-index:3} #table .table-felt .turn-panel #turn-clock.urgent{color:#ff735e;text-shadow:0 0 9px #ff473b99} #table .table-felt .turn-panel .dealer-mark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:grid;place-items:end center;width:72%;height:25px;padding-bottom:2px;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);background:linear-gradient(#d6a348,#a45c1f);color:#fff0bb;font:800 12px 'Noto Serif SC','Noto Sans SC',serif;text-shadow:0 1px 2px #5b3212} #table .table-felt .turn-label{position:absolute;left:50%;top:calc(50% - clamp(69px,18vh,94px));transform:translateX(-50%);z-index:5} @media (orientation:landscape) and (max-height:540px){#table .table-felt .table-clock-layout{gap:6px}#table .table-felt .turn-label{top:calc(50% - clamp(63px,17vh,82px));max-width:min(72vw,360px)}#table .table-felt .remaining-tiles{font-size:9px}#table .table-felt .remaining-tiles b{font-size:20px}} /* Taller, centered tile faces with a uniform inset around all four edges. */ #table .hand-tile{box-sizing:border-box;padding:4px!important;border:2px solid #f8f5eb!important;border-radius:5px!important;background:linear-gradient(145deg,#fffefa 0%,#f5f2e8 72%,#e8e3d4 100%);box-shadow:inset 0 0 0 1px #e0dccf,inset 0 1px 0 #fff,0 2px 0 #d2c8ae,0 5px 0 #a39576,0 8px 11px #052a1855} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{font-size:25px!important;line-height:.98;letter-spacing:0} #table .hand-tile .tile-red-mark{font-size:clamp(32px,7vh,39px);line-height:.98} #table .hand-tile .tile-art-svg{width:94%;height:100%;max-width:50px;max-height:58px} #table .hand-tile.tile-tong .tile-art-dots,#table .hand-tile.tile-tiao .tile-art-bamboo{max-width:50px;max-height:58px} #table .hand-tile:before{inset:2px;border-radius:3px;background:linear-gradient(#ffffff40,transparent 38%)} @media (orientation:landscape) and (max-height:540px){ #table .hand-tile{padding:3px!important} #table .hand-tile .tile-art-svg{width:94%;max-height:clamp(36px,12vh,54px)} #table .hand-tile.tile-tong .tile-art-dots,#table .hand-tile.tile-tiao .tile-art-bamboo{max-height:clamp(36px,12vh,54px)} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{font-size:clamp(22px,6vh,27px)!important} #table .hand-tile .tile-red-mark{font-size:clamp(29px,7.5vh,38px)} } /* Show the exact bird tiles in the shared settlement for every seat. */ #table .settlement-birds{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px auto 6px;padding:4px 8px;width:max-content;max-width:100%;border:1px solid #d4bf85;border-radius:9px;background:#fff9e8;color:#584724;font-size:10px;font-weight:800} #table .settlement-bird-list{display:flex;align-items:center;gap:4px} #table .settlement-birds .bird-tile{width:28px;height:36px} #table .settlement-birds .bird-tile .tile-art-svg{width:24px;height:31px;max-width:24px;max-height:31px} #table .settlement-birds .bird-tile .tile-wan-mark{font-size:17px;line-height:.9} #table .settlement-birds .bird-tile .tile-label{font-size:6px;letter-spacing:0} #table .settlement-birds .bird-tile .tile-red-mark{font-size:22px} @media (orientation:landscape) and (max-height:540px){#table .settlement-birds{margin:2px auto 3px;padding:2px 6px;font-size:9px}#table .settlement-birds .bird-tile{width:23px;height:29px}#table .settlement-birds .bird-tile .tile-art-svg{width:20px;height:25px;max-width:20px;max-height:25px}} /* Keep the center timer still: urgency changes color only, never scales or pulses. */ #table .table-felt .turn-panel #turn-clock,#table .table-felt .turn-panel #turn-clock.urgent{animation:none!important;transform:translate(-50%,-50%);filter:none!important} #table .table-controls .autoplay-cancel{background:linear-gradient(145deg,#f0d379,#d2a83d);border-color:#f6df9b;color:#263b2b;font-weight:800} /* Keep the wall count together and divide the four compass seats. */ #table .table-felt .table-clock-layout .remaining-tiles #remaining-tiles{position:static!important;display:block!important;left:auto!important;top:auto!important;transform:none!important;z-index:auto!important;min-width:0;color:#f0d26f!important;font-size:clamp(19px,4vh,27px)!important;line-height:1.05;font-variant-numeric:tabular-nums} #table .table-felt .turn-panel:after{content:"";position:absolute;inset:7px;z-index:1;pointer-events:none;border-radius:6px;background:linear-gradient(90deg,transparent 49.2%,#d6bd7b6b 49.7%,#d6bd7b6b 50.3%,transparent 50.8%),linear-gradient(180deg,transparent 49.2%,#d6bd7b6b 49.7%,#d6bd7b6b 50.3%,transparent 50.8%)} #table .table-felt .turn-panel .direction{display:flex;flex-direction:column;align-items:center;gap:0;min-width:20px;min-height:18px} #table .table-felt .turn-panel .direction.dealer{color:#ffe076;text-shadow:0 0 7px #ffcf4d99} #table .table-felt .turn-panel .dealer-seat-tag{font:800 7px/1 'Noto Sans SC',sans-serif;color:#ffe076} #table .table-felt .turn-panel .dealer-mark{display:none} /* Maximize tile glyph height while keeping identical inset on every edge. */ #table .hand-tile{padding:4px!important;border-width:2px!important;border-radius:5px!important;} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{font-size:clamp(24px,6.4vh,30px)!important;line-height:.9!important;letter-spacing:0!important} #table .hand-tile .tile-red-mark{font-size:clamp(34px,10vh,48px)!important;line-height:.92!important} #table .hand-tile .tile-art-svg{width:calc(100% - 8px);height:calc(100% - 8px);max-width:52px;max-height:60px} @media (orientation:landscape) and (max-height:540px){ #table .hand-tile{height:clamp(50px,15vh,68px)!important;padding:4px!important} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{font-size:clamp(21px,6.4vh,27px)!important;line-height:.88!important} #table .hand-tile .tile-red-mark{font-size:clamp(32px,10vh,46px)!important} #table .hand-tile .tile-art-svg{width:calc(100% - 8px);height:calc(100% - 8px);max-height:clamp(36px,13vh,58px)} #table .hand-tile.tile-tong .tile-art-dots,#table .hand-tile.tile-tiao .tile-art-bamboo{max-height:clamp(36px,13vh,58px)} } /* Diagonal direction dividers stay clear of the four compass labels. */ #table .table-felt .turn-panel:after{background:linear-gradient(45deg,transparent 48.8%,#d6bd7b70 49.5%,#d6bd7b70 50.5%,transparent 51.2%),linear-gradient(-45deg,transparent 48.8%,#d6bd7b70 49.5%,#d6bd7b70 50.5%,transparent 51.2%)} #table .table-felt .turn-panel .south{bottom:5px} #table .table-felt .turn-panel .direction.dealer{z-index:4;min-width:28px;min-height:26px;padding:3px 5px;border:1px solid #ffe8a1;border-radius:7px;background:linear-gradient(145deg,#ffe889,#d79a30);color:#543512;text-shadow:0 1px 0 #fff4c2;box-shadow:0 0 0 2px #b4772655,0 0 12px #ffe15a99} #table .table-felt .turn-panel .dealer-seat-tag{color:#643b13;text-shadow:none;font-size:8px} /* Octagonal direction indicator like the supplied table-center reference. */ #table .table-felt .turn-panel{border:0;border-radius:0;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);background:linear-gradient(135deg,#dbc56d 0%,#6d6c4f 24%,#364640 58%,#36d8f1 100%);filter:drop-shadow(0 3px 5px #061b12aa);box-shadow:none} #table .table-felt .turn-panel:before{inset:6px;border:1px solid #9b9d8c;border-radius:0;clip-path:polygon(17% 0,83% 0,100% 17%,100% 83%,83% 100%,17% 100%,0 83%,0 17%);background:conic-gradient(from -45deg,#303b3c 0deg 360deg);z-index:0} #table .table-felt .turn-panel:after{inset:9px;border-radius:0;background:linear-gradient(45deg,transparent 49%,#c6c8ac99 49.6%,#c6c8ac99 50.4%,transparent 51%),linear-gradient(-45deg,transparent 49%,#c6c8ac99 49.6%,#c6c8ac99 50.4%,transparent 51%);z-index:1} #table .table-felt .turn-panel.dealer-north:before{background:conic-gradient(from -45deg,#118fb0 0deg 90deg,#303b3c 90deg 360deg)} #table .table-felt .turn-panel.dealer-east:before{background:conic-gradient(from -45deg,#303b3c 0deg 90deg,#118fb0 90deg 180deg,#303b3c 180deg 360deg)} #table .table-felt .turn-panel.dealer-south:before{background:conic-gradient(from -45deg,#303b3c 0deg 180deg,#118fb0 180deg 270deg,#303b3c 270deg 360deg)} #table .table-felt .turn-panel.dealer-west:before{background:conic-gradient(from -45deg,#303b3c 0deg 270deg,#118fb0 270deg 360deg)} #table .table-felt .turn-panel .direction{z-index:3;color:#f1f2df;text-shadow:0 1px 3px #07120d} #table .table-felt .turn-panel .direction.dealer{min-width:24px;min-height:20px;padding:2px;border:0;border-radius:5px;background:transparent;color:#fff;text-shadow:0 1px 5px #003a4d} #table .table-felt .turn-panel .dealer-seat-tag{color:#fff;font-size:8px;font-weight:900} #table .table-felt .turn-panel #turn-clock{z-index:5;width:clamp(34px,8vh,46px);height:clamp(26px,6vh,36px);border:2px solid #9fdff0;border-radius:50%;background:radial-gradient(ellipse,#172e35 0%,#101c20 74%);color:#37e6ff;font-size:clamp(19px,4vh,28px);text-shadow:0 0 9px #35dfff99;box-shadow:0 0 12px #00bfe85c,0 2px 4px #0008;font-variant-numeric:tabular-nums} #table .table-felt .turn-panel #turn-clock.urgent{color:#ff9279} /* Match bamboo and dot artwork height to the full two-line Wan face. */ #table .hand-tile.tile-tong .tile-art-dots,#table .hand-tile.tile-tiao .tile-art-bamboo,#table .hand-tile .tile-art-bird{width:100%!important;height:100%!important;max-width:52px!important;max-height:60px!important;transform:scaleY(1.08);transform-origin:center} #table .hand-tile.tile-tong .tile-art-dots{overflow:visible} @media (orientation:landscape) and (max-height:540px){#table .hand-tile.tile-tong .tile-art-dots,#table .hand-tile.tile-tiao .tile-art-bamboo,#table .hand-tile .tile-art-bird{max-height:clamp(36px,13vh,58px)!important}} /* Four square, avatar-first seats with only display name and balance. */ #table .table-felt .seat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:clamp(68px,11vh,88px);height:clamp(68px,11vh,88px);min-width:0!important;max-width:none;padding:4px!important;aspect-ratio:1/1;border:1px solid #e8d8ab;border-radius:10px;background:linear-gradient(145deg,#fffdf0ed,#e8e0cbdc);box-shadow:0 3px 12px #10291b66;color:#203d2c} #table .table-felt .seat-person{display:grid;place-items:center;width:100%;margin:0;gap:0} #table .table-felt .seat-avatar{width:40px;height:40px;flex:0 0 40px;border:2px solid #fffdf3;box-shadow:0 2px 7px #18352166} #table .table-felt .seat-initial{font-size:18px;font-weight:900} #table .table-felt .seat-card-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#254733;font-size:10px;font-weight:900;line-height:1.1} #table .table-felt .seat-card-balance{display:block;color:#a16c25;font-size:9px;font-weight:900;line-height:1.1;white-space:nowrap} #table .table-felt .seat[hidden]{display:none!important} /* Use a bold calligraphic CJK face for the red 万 and 中 markings. */ #table .tile-wan-mark,#table .tile-label,#table .tile-red-mark{font-family:'KaiTi','STKaiti','Kaiti SC','Noto Serif SC',serif!important;font-weight:900} #table .table-felt .seat-avatar-wrap{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px} #table .table-felt .seat-avatar-wrap .seat-avatar{width:40px;height:40px;flex:0 0 40px} #table .table-felt .seat-dealer-badge{position:absolute;top:-6px;right:-10px;z-index:5;display:grid;place-items:center;width:19px;height:19px;border:1px solid #fff2bf;border-radius:50%;background:linear-gradient(145deg,#ee6550,#b6263a);box-shadow:0 1px 5px #17201388;color:#fff8d8;font:900 10px/1 'Noto Sans SC',sans-serif;font-style:normal;text-shadow:0 1px 2px #74202c} #table .table-felt .seat-avatar-wrap{position:static} #table .table-felt .seat-dealer-badge{position:absolute;top:3px;right:3px;z-index:8;width:32px;height:26px;border:1px solid #fff0ad;border-radius:7px;background:linear-gradient(145deg,#f07855,#bd2639);box-shadow:0 2px 7px #17201399;color:#fff9db;font-size:14px;line-height:1;font-weight:1000;text-shadow:0 1px 2px #74202c} .nickname-edit{border:1px solid #d7c69d;border-radius:14px;background:#fff9e6;color:#865d23;padding:5px 9px;font-size:10px;font-weight:800;white-space:nowrap} .nickname-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:#071b13d9;backdrop-filter:blur(4px)} .nickname-overlay.hidden{display:none!important} .nickname-card{width:min(380px,calc(100vw - 34px));padding:25px;background:linear-gradient(145deg,#fffdf2,#eee6d1);border:1px solid #decf9f;border-radius:16px;color:#314a37;box-shadow:0 18px 60px #03160fc7;text-align:center} .nickname-card>b{font:800 20px 'Noto Sans SC',sans-serif} .nickname-card>p{margin:9px 0 18px;color:#697765;font-size:12px;line-height:1.65} .nickname-card form{display:grid;gap:10px} .nickname-card input{width:100%;padding:12px;border:1px solid #d8d0bc;border-radius:9px;background:#fffef9;color:#2b4334;text-align:center;font-size:18px;letter-spacing:3px;outline:none} .nickname-card input:focus{border-color:#8ca77f;box-shadow:0 0 0 3px #88a67a22} .nickname-card .primary{width:100%;border-radius:9px} /* Let each avatar fill its square seat tile; put identity and balance below it. */ #table .table-felt .seat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;width:60px;height:auto;min-width:0!important;max-width:none;padding:0!important;aspect-ratio:auto;border:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible} #table .table-felt .seat-person{display:block;width:54px;height:54px;margin:0;overflow:visible} #table .table-felt .seat-avatar-wrap{position:relative;display:block;width:54px;height:54px;flex:none;overflow:visible;border:2px solid #fff6dc;border-radius:9px;background:#e5dfcf;box-shadow:0 3px 10px #08211688} #table .table-felt .seat-avatar-wrap .seat-avatar{display:block;width:100%;height:100%;flex:none;border:0;border-radius:7px;object-fit:cover;box-shadow:none} #table .table-felt .seat-card-name{display:block;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 5px;border-radius:6px;background:#092b20d9;color:#fff9e6;font-size:8.5px;font-weight:900;line-height:1.25;text-shadow:0 1px 2px #07170f} #table .table-felt .seat-card-balance{display:block;color:#ffe18b;font-size:8.5px;font-weight:900;line-height:1.1;text-shadow:0 1px 3px #102019} #table .table-felt .seat-dealer-badge{position:absolute;top:-5px;right:-7px;z-index:12;width:34px;height:28px;border:1px solid #fff0ad;border-radius:7px;background:linear-gradient(145deg,#ff7958,#b91f39);box-shadow:0 2px 8px #172013cc;color:#fff9db;font-size:15px;line-height:1;font-weight:1000;text-shadow:0 1px 2px #74202c} /* Gender badges and default avatar presets. */ .gender-badge{display:inline-grid;place-items:center;box-sizing:border-box;font-style:normal;font-weight:900;line-height:1;border-radius:50%;text-shadow:none} .gender-badge.gender-male{background:#dcebff;color:#2f6fd0} .gender-badge.gender-female{background:#ffe1ee;color:#d63f84} .roster-info .gender-badge{padding:0;width:16px;height:16px;margin-left:4px;font-size:11px;vertical-align:-3px} .lobby-gender{padding:0;width:17px;height:17px;margin-left:5px;font-size:11px;vertical-align:-3px} .avatar-edit.preset-avatar{font-size:22px;line-height:1} .avatar-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 16px} .avatar-preset{width:100%;aspect-ratio:1/1;border:2px solid #e0d4b4;border-radius:12px;cursor:pointer;font-size:26px;display:grid;place-items:center;box-shadow:0 2px 6px #3b2d1815;transition:transform .12s} .avatar-preset:hover{transform:translateY(-2px)} .avatar-preset.active{border-color:#bb483a;box-shadow:0 0 0 3px #bb483a33} .avatar-picker-close{width:100%;margin-top:9px;border:1px solid #d8d0bc;border-radius:9px;background:#fffef9;color:#5c6a58;padding:11px;font-size:13px;font-weight:700;cursor:pointer} .nickname-card select{width:100%;padding:12px;border:1px solid #d8d0bc;border-radius:9px;background:#fffef9;color:#2b4334;text-align:center;font-size:15px;outline:none} .nickname-card select:focus{border-color:#8ca77f;box-shadow:0 0 0 3px #88a67a22} .roster-avatar.preset-avatar{display:grid;place-items:center;font-size:19px} #table .table-felt .seat-avatar.preset-avatar{display:grid;place-items:center;font-size:34px} #table .table-felt .seat-gender-badge{position:absolute;bottom:-6px;left:-8px;z-index:12;width:24px;height:24px;border:1px solid #fff;font-size:14px;box-shadow:0 2px 6px #172013cc} /* 中心转盘必须始终位于牌桌正中心（含手机横屏），末尾覆盖横屏媒体查询里对 center-info 的宽度/内边距限制。 */ #table .table-felt .center-info{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;min-width:0;transform:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none} #table .table-felt .table-clock-layout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} /* 牌桌桌面美化：木色金边 + 更深的绿呢底绒 + 斜纹布纹 + 内阴影立体。 */ #table .table-felt{ border:10px solid!important; border-image:linear-gradient(145deg,#f4d68a 0%,#c89b45 28%,#8a5f24 52%,#6b4418 74%,#d7ad5e 100%) 1!important; outline:3px solid #1b1410!important; border-radius:16px!important; background: radial-gradient(ellipse at 50% 36%,#1ca864 0%,#0e8a4f 42%,#086d3d 70%,#054f2c 100%), #075d36; box-shadow: inset 0 0 0 1px #c9efd01c, inset 0 0 60px #01371f99, inset 0 18px 40px #0b3a24aa, 0 18px 40px #07130f99, 0 0 0 1px #1b1410; } #table .table-felt:after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px; background: repeating-linear-gradient(120deg,#ffffff06 0 1px,transparent 1px 6px), repeating-linear-gradient(30deg,#00000006 0 1px,transparent 1px 6px), radial-gradient(ellipse at 50% 18%,#7ce3a814 0%,transparent 60%), radial-gradient(ellipse at 50% 100%,#00000040 0%,transparent 65%); mix-blend-mode:overlay;opacity:.9; } #table .table-felt .seat-gender-badge{width:20px;height:20px;font-size:12px;bottom:-5px;left:-6px} /* 麻将牌美化：温润象牙面色、金边、深色侧边阴影，万/中 书法字色更鲜明。 */ #table .hand-tile,#table .discard-tile,#table .meld-tile{ background:linear-gradient(150deg,#ffffff 0%,#fbf7ea 34%,#f2ecd8 70%,#e6ddc6 100%); border:1px solid #efe6cf; border-radius:5px 5px 8px 8px; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #ffffff80, 0 2px 0 #c9bfa6, 0 5px 0 #8a7c5e, 0 9px 14px #041c1255; } #table .hand-tile:after{background:linear-gradient(90deg,#b9a87e,#7d6c49);box-shadow:inset 0 1px #efe3c6} #table .hand-tile .tile-wan-mark{ color:#15181a; font-family:'KaiTi','STKaiti','Kaiti SC','Noto Serif SC',serif; font-weight:900; text-shadow:0 1px 0 #00000022; letter-spacing:0; } #table .hand-tile .tile-label, #table .discard-tile .tile-label, #table .meld-tile .tile-label{ color:#c0231a; font-family:'KaiTi','STKaiti','Kaiti SC','Noto Serif SC',serif; font-weight:900; text-shadow:0 1px 0 #7a1410aa; letter-spacing:0; } #table .hand-tile .tile-red-mark, #table .discard-tile .tile-red-mark, #table .meld-tile .tile-red-mark{ color:#d61f17; font-family:'KaiTi','STKaiti','Kaiti SC','Noto Serif SC',serif; font-weight:900; text-shadow:0 1px 1px #7a0f0a99,0 0 10px #ff6a5a55; letter-spacing:0; } /* 弃牌里的万/中也用同样书法色，避免默认灰黑。 */ #table .discard-tile .tile-wan-mark,#table .meld-tile .tile-wan-mark{color:#15181a;font-weight:900} #table .wait-hint-tile .tile-wan-mark{color:#15181a;font-weight:900} #table .wait-hint-tile .tile-label{color:#c0231a;font-weight:900} #table .wait-hint-tile .tile-red-mark{color:#d61f17;font-weight:900} /* 手机横屏：对手碰/杠 与 弃牌河 之间加大间距，避免挤在一起。 */ @media (orientation:landscape) and (max-height:540px){ #table .player-zone{gap:10px} #table .zone-0,#table .zone-2{gap:12px} #table .zone-1{left:8%;width:40%} #table .zone-3{right:8%;width:40%} } /* 自己的碰/杠 显示在手牌最前面：与手牌同一行，紧跟手牌左侧。 */ #table .hand{position:relative} #table .hand .hand-melds{ position:static; z-index:3; margin-right:6px; padding-right:8px; border-right:1px solid #d0c19b55; } @media (orientation:landscape) and (max-height:540px){ #table .hand .hand-melds{margin-right:4px;padding-right:6px} } /* 横屏麻将字修正：防止万字/中 溢出牌框，筒条不被垂直拉伸，弃牌万字清晰。 */ #table .hand-tile{overflow:hidden} #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-red-mark{ max-width:100%; text-align:center; white-space:nowrap; } @media (orientation:landscape) and (max-height:540px){ #table .hand-tile .tile-wan-mark,#table .hand-tile .tile-wan-mark+.tile-label{ font-size:clamp(16px,4.6vh,22px)!important; line-height:.86!important; } #table .hand-tile .tile-red-mark{ font-size:clamp(24px,6.5vh,34px)!important; line-height:.9!important; } /* 取消筒条鸟图的垂直拉伸，避免超出牌框。 */ #table .hand-tile.tile-tong .tile-art-dots, #table .hand-tile.tile-tiao .tile-art-bamboo, #table .hand-tile .tile-art-bird{ transform:none!important; height:calc(100% - 8px)!important; } } /* 弃牌河的万字放大并加粗，保证清晰。 */ #table .discard-river .discard-tile{overflow:hidden} #table .discard-river .discard-tile .tile-wan-mark{ font-size:13px!important; line-height:.86!important; font-weight:900!important; } #table .discard-river .discard-tile .tile-label{ font-size:5.5px!important; font-weight:900!important; letter-spacing:0!important; } #table .discard-river .discard-tile .tile-red-mark{ font-size:16px!important; line-height:.9!important; font-weight:900!important; } @media (orientation:landscape) and (max-height:540px){ #table .discard-river .discard-tile .tile-wan-mark{font-size:12px!important} #table .discard-river .discard-tile .tile-red-mark{font-size:14px!important} } /* 房间明细弹层 */ #history-overlay .history-card{max-width:560px;width:92vw;max-height:88vh;display:flex;flex-direction:column;padding:18px 18px 14px} #history-overlay .history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} #history-overlay .history-head b{font-size:17px} #history-overlay .avatar-picker-close{width:30px;height:30px;padding:0;font-size:20px;line-height:1} .history-summary-title{font-size:13px;color:#6b5a3a;margin:4px 0 8px;font-weight:700} .history-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px} .sum-cell{background:#faf6ea;border:1px solid #e8dcb8;border-radius:10px;padding:8px 10px;text-align:center} .sum-head{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:4px} .sum-avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:#8a7c5e;flex-shrink:0} .sum-head b{font-size:13px} .sum-total{font-size:18px;font-weight:800;font-family:'DIN Alternate','Arial Narrow',sans-serif} .sum-total.pos{color:#1a8a3a} .sum-total.neg{color:#c0231a} .sum-balance{font-size:11px;color:#8a7c5e;margin-top:2px} .history-rounds{overflow-y:auto;flex:1;padding-right:4px} .round-row{background:#fff;border:1px solid #ece3cc;border-radius:10px;padding:8px 10px;margin-bottom:8px} .round-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px} .round-no{font-weight:700;color:#3a2f1a;font-size:13px} .round-tag{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700} .round-tag.win{background:#e8f5ec;color:#1a8a3a} .round-tag.draw{background:#f1ece0;color:#8a7c5e} .round-pot{font-size:11px;color:#8a7c5e;margin-left:auto} .round-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px} .rp-cell{display:flex;align-items:center;justify-content:space-between;background:#faf6ea;border-radius:7px;padding:4px 8px} .rp-name{display:flex;align-items:center;gap:5px;min-width:0} .rp-avatar{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:#8a7c5e;flex-shrink:0} .rp-name b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px} .rp-delta{font-weight:800;font-family:'DIN Alternate','Arial Narrow',sans-serif;font-size:14px} .delta-pos{color:#1a8a3a} .delta-neg{color:#c0231a} .delta-zero{color:#8a7c5e} .round-birds{font-size:11px;color:#b5651d;margin-top:6px;padding-top:5px;border-top:1px dashed #e8dcb8} .round-kongs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px} .kong-chip{font-size:11px;background:#fdf1d8;color:#8a5a1a;border:1px solid #f0d9a3;border-radius:6px;padding:2px 7px} .kong-chip b{color:#1a8a3a} .history-empty{text-align:center;color:#8a7c5e;padding:24px 0} #history-overlay .gender-badge{width:16px;height:16px;font-size:10px} /* 横屏：麻将牌面内容强制居中 */ @media (orientation:landscape) and (max-height:540px){ #table .hand-tile{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0} #table .hand-tile .tile-wan-mark, #table .hand-tile .tile-label, #table .hand-tile .tile-red-mark{display:block;width:100%;text-align:center;margin:0 auto;padding:0;line-height:1} #table .hand-tile .tile-art-svg{display:block;margin:auto;flex:none} } /* ============================================================ 参考图重构 V2：菱形切面计时器 + 金色牌墙 + 四角头像 + 四向弃牌河 ============================================================ */ /* 隐藏旧结构残留 */ #table .player-rivers, #table .player-zone, #table .zone-0, #table .zone-1, #table .zone-2, #table .zone-3, #table .center-info, #table #discards{display:none!important} /* 中央容器：3x3 grid，计时器居中，四向弃牌河环绕 */ #table .table-center{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas: ". top ." "left timer right" ". bottom ."; align-items:center; justify-items:center; gap:clamp(4px,1.2vh,10px); z-index:3; pointer-events:none; width:min(80%,560px); } /* ===== 中央菱形切面计时器（参考图造型） ===== */ #table .center-timer{ grid-area:timer; position:relative; width:clamp(76px,13vh,108px); aspect-ratio:1/1; /* 菱形/六边形切面：上下收尖，左右切平 */ clip-path:polygon(50% 0%,100% 26%,100% 74%,50% 100%,0% 74%,0% 26%); background: radial-gradient(ellipse at 50% 38%,#2a3a33 0%,#15201c 45%,#0a0f0d 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0; box-sizing:border-box; z-index:5; } /* 金属外框：用伪元素模拟切面金属边 */ #table .center-timer:before{ content:"";position:absolute;inset:0; clip-path:polygon(50% 0%,100% 26%,100% 74%,50% 100%,0% 74%,0% 26%); background:linear-gradient(135deg,#8a8f8a 0%,#d8dcd3 18%,#5a5f5a 35%,#b8bcb2 52%,#4a4f4a 70%,#c8ccc2 88%,#6a6f6a 100%); z-index:-1; } #table .center-timer:after{ content:"";position:absolute;inset:3px; clip-path:polygon(50% 0%,100% 26%,100% 74%,50% 100%,0% 74%,0% 26%); background:radial-gradient(ellipse at 50% 35%,#1e2c26 0%,#0d1613 60%,#060a08 100%); box-shadow:inset 0 0 22px #000c; z-index:-1; } /* 顶部高光条 */ #table .center-timer .timer-gloss{ position:absolute;top:6%;left:18%;right:18%;height:14%; background:linear-gradient(180deg,#ffffff22,transparent); border-radius:50%; pointer-events:none; } /* 倒计时数字 */ #table .center-timer .timer-num{ position:static!important;left:auto!important;top:auto!important; transform:none!important;width:auto!important;height:auto!important; padding:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important; font:900 clamp(24px,5.5vh,40px)/1 'DM Sans','Noto Sans SC',sans-serif!important; color:#eaf4ff!important; text-shadow:0 0 12px #5fb8ff88,0 1px 2px #000a!important; font-variant-numeric:tabular-nums; letter-spacing:-1px; } #table .center-timer .timer-num.urgent{color:#ff6b5a!important;text-shadow:0 0 14px #ff3322cc,0 1px 2px #000a!important} #table .center-timer .timer-num.hidden{display:none!important} /* 剩余牌数 / 倍数 */ #table .center-timer .timer-multi{ color:#c8d4be;font-size:clamp(9px,2vh,12px);font-weight:800; line-height:1.1;white-space:nowrap; text-shadow:0 1px 2px #000a; margin-top:1px; } #table .center-timer .timer-multi b{ position:static!important;display:inline!important; color:#f5d77a;font-size:inherit!important;font-weight:900; } /* 底部「庄」字 */ #table .center-timer .timer-dealer{ font:900 clamp(15px,3.4vh,22px)/1 'Noto Serif SC','KaiTi',serif; color:#e23227; text-shadow:0 1px 2px #6a0c08,0 0 8px #ff5a4a66; margin-top:1px; } /* ===== 四向弃牌河 ===== */ #table .discard-river{ display:flex!important;flex-wrap:wrap;gap:2px; align-items:center;justify-content:center;max-width:100%;z-index:3; min-height:0; } #table .river-top{grid-area:top;flex-direction:row} #table .river-bottom{grid-area:bottom;flex-direction:row} #table .river-left{grid-area:left;flex-direction:column;justify-self:end} #table .river-right{grid-area:right;flex-direction:column;justify-self:start} #table .discard-river .discard-tile{ flex:0 0 auto;width:clamp(20px,3.4vh,28px);height:clamp(26px,4.4vh,34px); } /* ===== 金色牌墙（参考图牌背为金黄色） ===== */ #table .tile-wall{z-index:1} #table .wall-top{left:16%;top:5%;width:68%;height:20px;transform:none} #table .wall-left{left:4%;top:16%;width:20px;height:68%;transform:none} #table .wall-right{right:4%;top:16%;width:20px;height:68%;transform:none} /* 覆盖旧牌墙配色为金黄 */ #table .tile-wall{ border:2px solid #c9a24a!important; border-radius:4px!important; background:repeating-linear-gradient(90deg,#f4ca62 0 18px,#fff0ad 19px 20px,#d99b2e 21px 23px),linear-gradient(#fff2c6 0 18%,#dc9a29 19% 100%)!important; box-shadow:0 3px 0 #866025,0 6px 10px #061c12aa!important; } #table .tile-wall:after{ inset:1px 0 auto!important;height:5px!important; background:repeating-linear-gradient(90deg,#fff8d9 0 18px,#d4b66a 19px 20px,#fff4c9 21px 23px)!important; border-radius:2px!important; } #table .wall-left,#table .wall-right{ background:repeating-linear-gradient(180deg,#f4ca62 0 18px,#fff0ad 19px 20px,#d99b2e 21px 23px),linear-gradient(90deg,#fff2c6 0 18%,#dc9a29 19% 100%)!important; } #table .wall-left:after,#table .wall-right:after{ inset:0 1px auto!important;width:5px!important;height:100%!important; background:repeating-linear-gradient(180deg,#fff8d9 0 18px,#d4b66a 19px 20px,#fff4c9 21px 23px)!important; } /* ===== 头像定位 ===== seat-0(自己)=左下靠边（手牌正上方） seat-1(左)=左边中点 seat-2(顶)=顶边中点 seat-3(右)=右边中点 */ #table .table-felt .seat{position:absolute;z-index:4} #table .table-felt .seat-bottom{left:1.5%;bottom:1.5%;top:auto;right:auto;transform:none} #table .table-felt .seat-left{left:1.5%;right:auto;top:50%;bottom:auto;transform:translateY(-50%)} #table .table-felt .seat-top{left:50%;right:auto;top:1%;bottom:auto;transform:translateX(-50%)} #table .table-felt .seat-right{right:1.5%;left:auto;top:50%;bottom:auto;transform:translateY(-50%)} /* 顶家头像横向紧凑排布，压缩高度，避开顶部牌墙与弃牌河 */ #table .table-felt .seat-top{ display:grid;align-items:center;gap:0 6px;white-space:nowrap; grid-template-columns:auto auto;grid-template-areas:"avatar name" "avatar balance"; } #table .table-felt .seat-top .seat-person{grid-area:avatar} #table .table-felt .seat-top .seat-card-name{grid-area:name;margin-top:0} #table .table-felt .seat-top .seat-card-balance{grid-area:balance} /* 头像卡片样式 */ #table .seat .seat-person{display:flex;align-items:center;gap:6px} #table .seat .seat-avatar-wrap{position:relative;display:inline-block} #table .seat .seat-avatar{ width:clamp(40px,8vh,56px);height:clamp(40px,8vh,56px); border-radius:8px;object-fit:cover; border:2px solid #d9bf79; background:#0e251d; display:grid;place-items:center; font-size:22px; } #table .seat .seat-avatar.preset-avatar{color:#fff} #table .seat .seat-card-name{ display:block;font-size:clamp(10px,2vh,13px);font-weight:700; color:#fff;text-shadow:0 1px 2px #000a; margin-top:3px; } #table .seat .seat-card-balance{ display:block;font-size:clamp(9px,1.8vh,11px);color:#f5d77a; font-weight:700;text-shadow:0 1px 2px #000a; } #table .seat .seat-card-balance:before{ content:"";display:inline-block;width:9px;height:9px;margin-right:3px; vertical-align:-1px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b0,#f5d77a 50%,#c9a24a); box-shadow:0 0 2px #c9a24a; } /* 座位背景卡片 */ #table .seat{ background:linear-gradient(180deg,#0e2a1fcc,#0a1f16e0); border:1px solid #d9bf7955; border-radius:8px; padding:6px 8px; min-width:0; text-align:left; backdrop-filter:blur(2px); } #table .seat.active-seat{ border-color:#ffe15e; box-shadow:0 0 12px #ffe15e55; } /* 庄家「庄」角标 + 「冲」标记 */ #table .seat .seat-dealer-badge{ position:absolute;top:-4px;right:-4px; width:20px;height:20px;border-radius:4px; background:linear-gradient(135deg,#e23227,#a01510); color:#fff;font:900 12px/20px 'Noto Serif SC',serif; text-align:center; box-shadow:0 1px 3px #0008; z-index:2; } #table .seat .seat-chong-badge{ position:absolute;top:-7px;left:-7px; width:24px;height:24px; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); background:linear-gradient(180deg,#ff5a3f,#c41a10); color:#fff;font:900 13px/24px 'Noto Serif SC',serif; text-align:center; box-shadow:0 2px 5px #0008,0 0 10px #ff3322aa; z-index:3; text-shadow:0 1px 1px #6a0c08; } #table .seat .seat-gender-badge{ position:absolute;bottom:-2px;left:-2px; width:16px;height:16px;border-radius:50%; font-size:10px;line-height:16px;text-align:center; border:1px solid #fff8; } /* 空座位占位符 */ #table .seat .seat-empty{ display:flex;align-items:center;gap:6px; color:#8aa390;font-size:clamp(9px,1.8vh,11px); white-space:nowrap; } #table .seat .seat-empty-dot{ width:8px;height:8px;border-radius:50%; background:#5a7a5e;box-shadow:0 0 6px #5a7a5e88; animation:pulse 1.6s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} /* ===== 顶部提示文字（参考图：大号白色提示） ===== */ #table .table-felt .turn-label{ position:absolute;left:50%;top:1.5%;transform:translateX(-50%);z-index:6; max-width:min(70vw,520px);padding:4px 18px; border:1px solid #ffffff1a;border-radius:18px; background:linear-gradient(180deg,#0d2a1fe0,#0a1f16d0); color:#ffffff; font-size:clamp(12px,2.6vh,16px);line-height:1.4;text-align:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; font-weight:700;letter-spacing:.5px; text-shadow:0 1px 3px #000a; backdrop-filter:blur(4px); box-shadow:0 2px 8px #0006; } /* ===== 听牌提示：中央计时器上方 ===== */ #table .table-center .wait-hint{ position:absolute;left:50%;top:0;transform:translate(-50%,-100%); margin:0 0 6px;z-index:6; background:#0c392cd9;border:1px solid #a6d5b655;border-radius:12px; padding:3px 10px;color:#fff; display:flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:90%; } #table .wait-hint .wait-hint-label{color:#f5d77a;font-weight:800} #table .wait-hint .wait-hint-copy{color:#cfe0c4;font-size:11px} #table .wait-hint .wait-hint-tile{display:inline-flex} /* ===== 横屏紧凑调整 ===== */ @media (orientation:landscape) and (max-height:540px){ #table .table-center{width:min(78%,520px);gap:6px} #table .center-timer{width:clamp(64px,11.5vh,88px)} #table .wall-top{top:6%;height:16px} #table .wall-left,#table .wall-right{top:16%;width:16px;height:66%} #table .table-felt .turn-label{top:0.5%;font-size:10px;padding:2px 10px} #table .table-felt .seat-top{top:0.5%} #table .table-felt .seat-left{top:50%;bottom:auto} #table .table-felt .seat-right{top:50%;bottom:auto} #table .discard-river .discard-tile{width:clamp(18px,3vh,24px);height:clamp(22px,3.8vh,28px)} #table .seat .seat-avatar{width:clamp(34px,7vh,46px);height:clamp(34px,7vh,46px)} } /* ============================================================ V3：中央恢复八角方向转盘 + 横屏手牌完整显示 ============================================================ */ /* 转盘占位到 grid 的 timer 单元（替换原菱形切面计时器） */ #table .table-center .center-dial{ grid-area:timer; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;z-index:5;pointer-events:none; } /* 剩余牌数：显示在转盘下方 */ #table .table-center .center-dial .remaining-tiles{ position:static;left:auto;top:auto;transform:none; display:block;min-width:0;padding:2px 9px; border:1px solid #d4e6cb33;border-radius:10px; background:#0a2a1fcc; color:#e9f2df;font-size:clamp(8px,1.7vh,11px);font-weight:700;line-height:1.3; text-shadow:0 1px 2px #000a;white-space:nowrap; } #table .table-center .center-dial .remaining-tiles #remaining-tiles{ position:static;left:auto;top:auto;transform:none;z-index:auto; display:inline-block;min-width:1.6em;text-align:center; font-variant-numeric:tabular-nums; color:#f5d77a;font-size:inherit;font-weight:900;line-height:1; } /* 未开局时隐藏倒计时数字 */ #table .table-felt .center-dial .turn-panel #turn-clock.hidden{display:none!important} /* 手机横屏：手牌完整显示，避免被裁切或居中溢出 */ @media (orientation:landscape) and (max-height:540px){ #table .hand{ flex:0 0 auto;min-height:0;max-height:none; overflow-x:auto;overflow-y:hidden; justify-content:center;justify-content:safe center; padding:6px 6px 14px;gap:2px; } #table .table-center .center-dial .remaining-tiles{font-size:9px;padding:1px 7px} } /* ============================================================ V4：手机横屏——金框满屏包含全员手牌，功能按键横排一行贴底居中 ============================================================ */ @media (orientation:landscape) and (max-height:540px){ /* 不再为底部社交栏预留高度，把空间还给金框与手牌 */ #table.screen:not(.hidden){padding-bottom:max(4px,env(safe-area-inset-bottom))} #table .table-wrap{flex:1 1 auto;min-height:0;padding:0;margin:0} #table .table-felt{width:100%;height:100%;min-height:0;margin:0;border-width:5px;border-radius:14px} /* 手牌独占底部整行，完整显示不被裁切 */ #table .hand{ flex:0 0 auto;min-height:0;max-height:none; overflow-x:auto;overflow-y:visible; justify-content:center;justify-content:safe center; padding:6px 6px 10px;gap:2px; } /* 控制栏 + 社交栏：合并成一条横排工具条，水平居中，贴金框底部、位于手牌正上方 */ #table .table-controls, #table>.social-controls{ position:absolute;top:auto;bottom:calc(98px + env(safe-area-inset-bottom)); left:auto;right:auto;transform:none; display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center; gap:5px;width:auto;max-width:48vw;min-height:0;min-width:0; margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none; z-index:70; } #table .table-controls{right:calc(50% + 4px);justify-content:flex-end} #table>.social-controls{left:calc(50% + 4px);justify-content:flex-start} /* 按键紧凑化，减少对桌面内容的遮挡 */ #table .table-controls button{margin:0;padding:4px 10px;font-size:10px;white-space:nowrap} #table>.social-controls .social-chip, #table>.social-controls .voice-button{min-height:26px;padding:3px 9px;font-size:10px;white-space:nowrap} #table>.social-controls .social-divider{display:none} /* 表情面板改为向上弹出，避免超出屏幕 */ #table>.social-controls .reaction-menu{left:50%;right:auto;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)} } /* ============================================================ V5：本局结算——居中半透明弹窗，可开关查看 ============================================================ */ #table #settlement-summary{ position:fixed;left:50%;top:50%;transform:translate(-50%,-50%); z-index:80; width:min(88vw,430px);max-width:calc(100vw - 20px); max-height:min(78vh,540px);overflow:auto; margin:0;padding:16px 18px; border:1px solid #e6d6a9d0;border-radius:16px; background:rgba(8,32,23,.7); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); box-shadow:0 18px 50px #000000ab,inset 0 0 0 1px #ffffff1f; color:#eef4e7;font-size:13px; } #table #settlement-summary.hidden{display:none!important} /* 自动弹出时半透明淡显，5 秒后自动收起；手动「本局结算」打开为正常不透明 */ #table #settlement-summary.settlement-auto{opacity:.72} #table #settlement-summary .settlement-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #ffffff24} #table #settlement-summary .settlement-title{margin:0;color:#f5d77a;font-size:14px;font-weight:800;letter-spacing:.5px} #table #settlement-summary .settlement-close{flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#ffffff1a;color:#f3f6ec;font-size:16px;line-height:1;cursor:pointer} #table #settlement-summary .settlement-close:hover{background:#ffffff2e} #table #settlement-summary .settlement-birds{color:#dfe9d5} #table #settlement-summary .settlement-players{gap:8px} #table #settlement-summary .settlement-players>span{min-width:104px;padding:6px 9px;font-size:11px;background:#ffffff14;border:1px solid #ffffff29;color:#eef4e7} #table #settlement-summary .settlement-players strong{font-size:14px;color:#fff} #table #settlement-summary .settlement-players .positive{color:#7ff0a8} #table #settlement-summary .settlement-players .negative{color:#ff9a92} @media (orientation:landscape) and (max-height:540px){ #table #settlement-summary{width:min(72vw,420px);max-height:84vh;padding:10px 14px} #table #settlement-summary .settlement-head{margin:0 0 6px;padding-bottom:5px} #table #settlement-summary .settlement-players>span{min-width:92px;padding:4px 8px;font-size:10px} #table #settlement-summary .settlement-players strong{font-size:12px} } /* ============================================================ V6：胡牌后翻开其他玩家手牌（自己的不重复）+ 自摸牌光圈 左/右竖排、上横排；尺寸由 JS 按牌数与可用空间自适应缩小 ============================================================ */ #table .table-felt .seat-hand{ position:absolute;z-index:5;display:flex;gap:2px;pointer-events:none; } #table .table-felt .seat-hand[hidden]{display:none!important} #table .table-felt .seat-hand-1, #table .table-felt .seat-hand-3{flex-direction:column;flex-wrap:wrap;top:50%;transform:translateY(-50%)} #table .table-felt .seat-hand-1{left:4.5%} #table .table-felt .seat-hand-3{right:4.5%} #table .table-felt .seat-hand-2{flex-direction:row;flex-wrap:wrap;left:50%;transform:translateX(-50%);top:10%} #table .reveal-tile{ display:grid;place-items:center;flex:0 0 auto; width:2.4em;height:3.1em;overflow:hidden;border:1px solid #f0ead9;border-radius:.3em; background:linear-gradient(145deg,#fffef9,#e9e4d8); box-shadow:0 .18em 0 #8f8265;color:#252923; } #table .reveal-tile .tile-art-svg{display:block;width:2em;height:2.6em;max-width:2em;max-height:2.6em} #table .reveal-tile .tile-wan-mark{font-size:1.5em;line-height:.95} #table .reveal-tile .tile-label{font-size:.5em;letter-spacing:0} #table .reveal-tile .tile-red-mark{font-size:1.9em} #table .reveal-tile.win-halo{ box-shadow:0 0 0 .18em #ffe894,0 0 1.1em .42em #ffd75ecc,0 .18em 0 #8f8265; } /* 胡牌特效：光圈包住刚自摸的那张牌 */ .win-halo-ring{ display:grid;place-items:center;width:82px;height:82px;border-radius:50%; background:radial-gradient(circle at 50% 40%,#fffdf0,#ffe08a 62%,#dfb24b); box-shadow:0 0 0 4px #fff6cf,0 0 22px 8px #ffd75eaa; animation:halo-ring 1.05s ease-in-out infinite alternate; } .win-halo-ring .win-tile{ display:grid;place-items:center;width:46px;height:60px; border:1px solid #f7f3e8;border-radius:5px 5px 7px 7px; background:linear-gradient(145deg,#fffef9,#f0ebdd); box-shadow:0 2px 0 #cbbf9f,0 5px 9px #7c6a3a55;color:#252a23; } .win-halo-ring .win-tile .tile-art-svg{display:block;width:36px;height:48px;max-width:36px;max-height:48px} .win-halo-ring .win-tile .tile-wan-mark{font-size:26px;line-height:.96} .win-halo-ring .win-tile .tile-label{font-size:9px} .win-halo-ring .win-tile .tile-red-mark{font-size:32px} @keyframes halo-ring{ from{box-shadow:0 0 0 4px #fff6cf,0 0 16px 6px #ffd75e99} to{box-shadow:0 0 0 7px #fffbe3,0 0 32px 15px #ffe08add} } .win-celebration{min-height:178px} /* ============================================================ 桌布满屏：去掉桌面四周留白与透明边框，让金色桌面延伸到手机屏幕最边缘 ============================================================ */ #table.screen:not(.hidden){padding:0} #table .table-wrap{padding:0} #table .table-felt{border-width:0!important;border-radius:0} /* 桌布全面铺满：顶部与底部也用桌面的暗绿色填满，手牌直接显示在桌面之上 */ #table.screen:not(.hidden){background:#075d36} #table .table-controls, #table .hand{background:transparent} /* 去掉桌面四周的黑色描边：金框满屏后只看得见顶部与底部两条黑线 */ #table .table-felt{outline:0!important} /* 刚摸进手牌的那张牌用颜色高亮突出显示 */ #table .hand-tile.just-drawn{ border-color:#ffd85e!important; box-shadow:0 0 0 2px #ffd85e,0 0 14px 5px #ffd75e8c,0 2px 0 #c9bfa6,0 5px 0 #8a7c5e!important; transform:translateY(-6px); } /* 语音按钮改为麦克风图标（紧凑） */ #table .voice-button{min-width:0!important;padding:6px 13px;font-size:17px;line-height:1} /* ============================================================ 手牌行最左侧：麦克风贴边 + 自己头像紧随其右，与手牌同排对齐 ============================================================ */ /* 给手牌行左侧预留出麦克风与头像的位置；右侧对称预留，使手牌整体固定居中 */ #table .hand:has(.self-dock){padding-left:clamp(150px,26vw,200px);padding-right:clamp(150px,26vw,200px)} #table .hand .self-dock{ position:absolute;left:0;top:0;bottom:0;z-index:7; display:flex;align-items:center;gap:5px;padding:0 4px; } /* 麦克风：贴手牌行最左边缘 */ #table .hand .self-dock .voice-button{ flex:0 0 auto;width:34px;height:34px;min-width:0!important; padding:0!important;border-radius:50%; display:grid;place-items:center;font-size:18px;line-height:1; } /* 自己头像：去掉原座位卡片外框，紧挨麦克风右侧 */ #table .hand .self-dock #seat-0{ position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; transform:none!important; background:none!important;border:0!important;padding:0!important;min-width:0!important; box-shadow:none!important;backdrop-filter:none!important; } #table .hand .self-dock #seat-0 .seat-avatar{ width:clamp(32px,6.4vh,46px);height:clamp(32px,6.4vh,46px);font-size:17px; } /* 手牌行内只保留头像，隐藏名字与余额文字，避免遮挡手牌 */ #table .hand .self-dock #seat-0 .seat-card-name, #table .hand .self-dock #seat-0 .seat-card-balance, #table .hand .self-dock #seat-0 .seat-card-meta{display:none!important} /* ============================================================ 需求L：名字放头像下方；余额、房卡放头像右侧两行 ============================================================ */ #table .hand .self-dock .self-person{ flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px; } #table .hand .self-dock .self-name{ max-width:66px;font-size:11px;line-height:1.15;color:#fffdf2;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-shadow:0 1px 2px #00000066; } #table .hand .self-dock .self-stats{ flex:0 0 auto;display:flex;flex-direction:column;gap:1px; font-size:11px;line-height:1.2;color:#eaf7ec;text-shadow:0 1px 2px #00000066; } #table .hand .self-dock .self-stat{white-space:nowrap} /* 房卡：只保留文字，不再加黄色圈 */ #table .hand .self-dock .self-cards{color:#ffe08a;font-weight:700} /* ============================================================ 需求L：音效开关从底部工具条移到房间顶栏右上角（原账号名字的位置） ============================================================ */ #table #table-profile{display:flex;align-items:center;justify-content:flex-end;gap:8px} #table #table-profile .sound-toggle{ min-width:0;padding:5px 14px;font-size:13px;font-weight:700; color:#0b2a19;background:#ffe08a;border:1px solid #ffd86a;border-radius:18px; } /* ============================================================ 房间顶部信息条：桌布满屏后底色变暗，把房间号一排的文字与按键提亮并加金色突出 ============================================================ */ #table .topbar{color:#eaf7ec} #table .back{color:#fffdf2;font-weight:700;background:#ffffff1f;border:1px solid #ffffff3d;border-radius:18px;padding:5px 12px} #table .room-title{color:#cfe9d4} #table .room-title strong{color:#ffe08a;font-weight:900;text-shadow:0 1px 3px #00000066} #table .copy{color:#0b2a19;background:#ffe08a;border:1px solid #ffd86a;border-radius:18px;font-weight:700;text-shadow:none} #table .profile{color:#eaf7ec} #table .table-meta-inline{color:#dff3e2} /* ============================================================ 需求M-1：顶栏右上角，表情在音效左侧；表情面板向下弹出 ============================================================ */ #table #table-profile{display:flex;align-items:center;justify-content:flex-end;gap:8px} #table #table-profile .reaction-group{position:relative;display:flex;align-items:center} #table #table-profile .reaction-toggle{ min-width:0;padding:5px 14px;font-size:13px;font-weight:700; color:#0b2a19;background:#ffe08a;border:1px solid #ffd86a;border-radius:18px; } #table #table-profile .reaction-menu{ top:calc(100% + 8px);bottom:auto;left:auto;right:0;transform:none; } /* ============================================================ 需求M-2：本局结算/退出房间等操作按钮保持在原位置居中 ============================================================ */ #table .table-controls{display:block;text-align:center} /* ============================================================ 需求M-3/4：手牌降低牌高、牌面字形放大加粗，整体更饱满 —— 只改手牌（hand-tile）；副露/弃牌/结算不受影响 —— ============================================================ */ #table .hand{align-items:flex-end;gap:3px} #table .hand-tile{ justify-content:center!important; height:clamp(50px,9vh,62px)!important; padding:3px 3px 4px!important; } #table .hand-tile .tile-wan-mark, #table .hand-tile .tile-wan-mark+.tile-label{ font-size:clamp(19px,5.2vh,27px)!important; line-height:.86!important; letter-spacing:0!important; font-weight:900!important; max-width:100%!important; } #table .hand-tile .tile-red-mark{ font-size:clamp(26px,7.6vh,40px)!important; line-height:.88!important; font-weight:900!important; } #table .hand-tile .tile-art-svg{ max-width:52px!important; max-height:52px!important; } #table .hand-tile.tile-tong .tile-art-dots, #table .hand-tile.tile-tiao .tile-art-bamboo, #table .hand-tile .tile-art-bird{ transform:none!important; max-height:52px!important; } /* 手机竖屏：手牌更矮，字形按更小牌高重新适配 */ @media(max-width:680px){ #table .hand-tile{height:clamp(44px,8.2vh,52px)!important;padding:3px!important} #table .hand-tile .tile-wan-mark, #table .hand-tile .tile-wan-mark+.tile-label{font-size:clamp(17px,4.8vh,22px)!important;line-height:.84!important} #table .hand-tile .tile-red-mark{font-size:clamp(24px,7vh,34px)!important} #table .hand-tile .tile-art-svg, #table .hand-tile.tile-tong .tile-art-dots, #table .hand-tile.tile-tiao .tile-art-bamboo, #table .hand-tile .tile-art-bird{max-height:46px!important} } /* 手机横屏（矮屏）：手牌进一步压低 */ @media (orientation:landscape) and (max-height:540px){ #table .hand{gap:2px} #table .hand-tile{height:clamp(40px,11vh,50px)!important} #table .hand-tile .tile-wan-mark, #table .hand-tile .tile-wan-mark+.tile-label{font-size:clamp(16px,4.4vh,21px)!important;line-height:.84!important} #table .hand-tile .tile-red-mark{font-size:clamp(22px,6.4vh,30px)!important} #table .hand-tile .tile-art-svg, #table .hand-tile.tile-tong .tile-art-dots, #table .hand-tile.tile-tiao .tile-art-bamboo, #table .hand-tile .tile-art-bird{max-height:44px!important} } /* ============================================================ 需求N：杠牌叠两层（底 3 张 + 顶层叠 1 张） 明杠/补杠：4 张全翻开；暗杠：只翻开 1 张，其余 3 张扣着 ============================================================ */ #table .hand .hand-melds .meld-group.gang{ position:relative; padding-right:calc(0.55 * clamp(24px,3.3vw,36px)); } #table .hand .hand-melds .meld-group.gang .meld-stack{ position:absolute;right:0;bottom:calc(0.2 * clamp(48px,8.2vh,68px));z-index:2; } #table .hand .hand-melds .meld-group.gang .meld-stack .meld-tile{ box-shadow:0 2px 0 #a99a79,0 3px 6px #00000066; } /* 暗杠扣着的牌背面 */ #table .hand .meld-tile.meld-tile-down{ background:linear-gradient(145deg,#3f9c72,#1f6a4b); border-color:#164a34; box-shadow:0 2px 0 #103a29; } @media (orientation:landscape) and (max-height:540px){ #table .hand .hand-melds .meld-group.gang{padding-right:calc(0.55 * clamp(24px,3.2vw,34px))} #table .hand .hand-melds .meld-group.gang .meld-stack{bottom:calc(0.2 * clamp(43px,11vh,56px))} } /* ============================================================ 需求O：其他玩家头像与自己的等大；名字在头像下方、余额在名字旁； 手牌整体固定居中；房间内不显示房卡 ============================================================ */ /* 三处对手座位头像统一到与自己的（#seat-0）相同尺寸 */ #table .table-felt .seat-person{width:clamp(32px,6.4vh,46px);height:clamp(32px,6.4vh,46px);overflow:visible} #table .table-felt .seat-avatar-wrap{width:clamp(32px,6.4vh,46px);height:clamp(32px,6.4vh,46px)} #table .table-felt .seat-avatar-wrap .seat-avatar{width:100%;height:100%} #table .table-felt .seat-avatar{font-size:15px} #table .table-felt .seat-initial{font-size:16px} /* 名字在头像下方，余额紧挨名字右侧同一行 */ #table .table-felt .seat{width:auto;min-width:52px} #table .table-felt .seat-card-meta{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:2px} /* 窄屏手牌左对齐，仅左侧预留，避免溢出被裁切 */ @media(max-width:680px){ #table .hand:has(.self-dock){padding-left:clamp(96px,26vw,140px);padding-right:0} #table .table-felt .seat-person, #table .table-felt .seat-avatar-wrap{width:clamp(30px,7vw,40px);height:clamp(30px,7vw,40px)} } /* 房间内不显示房卡 */ #table .hand .self-dock .self-cards{display:none!important} /* ============================================================ 大厅「加入房间」：收紧为精致的胶囊组合，更短更好看 ============================================================ */ #lobby .join{ flex:0 0 auto;width:auto;height:46px; display:flex;align-items:center;gap:8px; padding:5px 5px 5px 16px; border:1px solid #ffffff59;border-radius:23px; background:#ffffff14; box-shadow:inset 0 1px 0 #ffffff26,0 2px 8px #07160f33; overflow:hidden; } #lobby .join input{ flex:0 1 auto;width:128px;min-width:0;margin:0;padding:0; border:0;background:transparent;color:#fffdf4; font-size:13px;letter-spacing:1.5px; } #lobby .join input::placeholder{color:#c6d1c2;font-size:12px;letter-spacing:0} #lobby .join input:focus{outline:0} #lobby .join button{ flex:0 0 auto;height:36px;padding:0 18px;border:0;border-radius:18px; background:linear-gradient(145deg,#f4e2a4,#d8bd72);color:#4a3810; font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer; box-shadow:0 2px 0 #8f7630;transition:filter .15s,transform .08s; } #lobby .join button:hover{filter:brightness(1.05)} #lobby .join button:active{transform:translateY(1px);box-shadow:0 1px 0 #8f7630} @media(max-width:680px){ #lobby .hero-actions{align-items:flex-start} #lobby .join{align-self:flex-start;max-width:100%} #lobby .join input{width:104px} } @media (orientation:landscape) and (max-height:540px){ #lobby .join{height:38px;padding:4px 4px 4px 12px;gap:6px;border-radius:19px} #lobby .join input{width:96px;font-size:11px;letter-spacing:1px} #lobby .join button{height:30px;padding:0 13px;font-size:11px;border-radius:15px} } /* ============================================================ 本局结算：下局其坐庄提示（从房间中心移入结算弹窗） ============================================================ */ #table #settlement-summary .settlement-note{ margin-top:8px;padding-top:7px; border-top:1px solid #ffffff24; text-align:center;color:#f5d77a; font-size:12px;font-weight:700;letter-spacing:.5px; } @media (orientation:landscape) and (max-height:540px){ #table #settlement-summary .settlement-note{margin-top:5px;padding-top:5px;font-size:10px} } /* ============================================================ 大厅优化：房间规则排版 + 背景图 + 手机横屏紧凑适配 ============================================================ */ /* 把原先一整段规则文字拆成「标签 + 说明」清单，更清晰易读 */ #lobby .stake-setting small{ flex-basis:100%;display:grid;gap:5px 18px;margin-top:9px; color:#cdd9c9;font-size:11px;line-height:1.5; } #lobby .stake-setting .stake-sum{grid-column:1/-1;color:#f2e3b4;font-weight:700;letter-spacing:.3px} #lobby .stake-setting .stake-rule{display:flex;align-items:baseline;gap:8px} #lobby .stake-setting .stake-rule b{ flex:0 0 auto;padding:1px 7px;border-radius:6px; background:#ffffff1a;border:1px solid #ffffff30;color:#f0d58f; font-size:10px;font-weight:700;line-height:1.5; } @media(min-width:760px){#lobby .stake-setting small{grid-template-columns:1fr 1fr}} /* 大厅背景图：麻将桌氛围图，叠加深绿渐变遮罩，保证文字对比度 */ #lobby .hero{ background-image:linear-gradient(108deg,#0e2b1ce8 0%,#163d28cc 55%,#194330b3 100%),url("/lobby-bg.jpg?v=20261111-83"); background-size:cover;background-position:center; } /* 手机横屏：紧凑排布，规则条目两列展示，不再隐藏 */ @media (orientation:landscape) and (max-height:540px){ #lobby .stake-setting{flex-wrap:wrap;gap:6px 10px;margin-top:6px} #lobby .stake-setting small{ flex-basis:100%;display:grid;grid-template-columns:1fr 1fr; gap:2px 16px;margin-top:4px;font-size:9.5px;line-height:1.4; } #lobby .stake-setting .stake-sum{grid-column:1/-1;font-size:10px;margin-bottom:1px} #lobby .stake-setting .stake-rule{gap:6px} #lobby .stake-setting .stake-rule b{padding:0 6px;font-size:8.5px;border-radius:5px} } /* ============================================================ 对手座位副露（碰/杠）展示：其他玩家碰、杠的牌显示在其座位下方 ============================================================ */ #table .table-felt .seat-melds{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center; gap:3px;margin-top:2px;max-width:104px;pointer-events:none; } #table .table-felt .seat-melds .meld-group{ position:relative;padding:1px;border-radius:4px;background:#0b2a1ecc; } #table .table-felt .seat-melds .meld-tiles{display:flex;align-items:flex-end;gap:1px} #table .table-felt .seat-melds .meld-tile{ flex:0 0 15px;width:15px;height:20px;border-radius:3px; } #table .table-felt .seat-melds .meld-tile .tile-art-svg{width:13px;height:18px;max-width:13px;max-height:18px} #table .table-felt .seat-melds .meld-tile .tile-wan-mark{font-size:11px;line-height:.9} #table .table-felt .seat-melds .meld-tile .tile-label{font-size:5px;letter-spacing:0} /* 暗杠扣着的牌背面 */ #table .table-felt .seat-melds .meld-tile.meld-tile-down{ background:linear-gradient(145deg,#3f9c72,#1f6a4b);border-color:#164a34;box-shadow:0 1px 0 #103a29; } /* 杠牌叠两层：底 3 张 + 顶层叠 1 张 */ #table .table-felt .seat-melds .meld-group.gang{padding-right:9px} #table .table-felt .seat-melds .meld-group.gang .meld-stack{position:absolute;right:0;bottom:4px;z-index:2} #table .table-felt .seat-melds .meld-group.gang .meld-stack .meld-tile{box-shadow:0 1px 0 #a99a79,0 2px 4px #00000066} /* ============================================================ 胡牌提示：黑底白字（自摸/鸟牌/鸟倍/系统费）默认展示 5 秒后自动隐藏 ============================================================ */ #table .table-felt .turn-label.win-hidden{ opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px); transition:opacity .45s ease,transform .45s ease,visibility .45s; pointer-events:none; } /* 本局结算：胡牌方式 / 鸟倍 / 系统费 概要行 */ #table #settlement-summary .settlement-meta{ margin:2px auto 6px;padding:4px 10px;width:max-content;max-width:100%; border:1px solid #ffffff24;border-radius:8px;background:#ffffff10; color:#cfd8c6;font-size:11px;font-weight:700;letter-spacing:.3px;text-align:center; } #table #settlement-summary .settlement-meta b{color:#f5d77a} /* ============================================================ 需求M： 1) 杠分暂记窗口改短，改为后台横向流动广告（走马灯） 2) 「轮到你出牌」等提示文字移到「开始下一局」上方居中 3) 其他玩家牌面/副露的红色「萬」字放大 4) 去掉轮盘东南西北字上的黄色小框 5) 做庄蓝色改金黄色 6) 手牌旁余额改为与其他玩家一致的黄色币 ============================================================ */ /* 1) 杠分暂记：单行短条 + 横向流动 */ #table #kong-ledger{ flex:0 0 auto;display:block;width:min(100%,300px);max-width:300px; margin:2px auto 0;padding:2px 10px; border:1px solid #ffffff1f;border-radius:9px; background:#04231a99;color:#d7e8cd; font-size:8.5px;line-height:1.5; overflow:hidden;white-space:nowrap;text-align:left; } #table #kong-ledger[hidden]{display:none!important} #table #kong-ledger .kong-ledger-track{display:inline-block;white-space:nowrap;will-change:transform;animation:kong-ledger-flow 18s linear infinite} #table #kong-ledger .kong-ledger-item{display:inline-block;padding-right:28px} @keyframes kong-ledger-flow{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}} /* 2) 提示文字：改为「开始下一局」按钮上方居中的整行提示 */ #table .turn-label{ position:static;left:auto;top:auto;transform:none; display:block;width:max-content;max-width:min(92vw,520px); margin:3px auto 5px;padding:4px 13px; border:1px solid #ffffff1f;border-radius:14px; background:linear-gradient(180deg,#0d2a1fe0,#0a1f16d0);color:#fff; font-size:clamp(10px,2.4vh,14px);line-height:1.35;font-weight:700; text-align:center;white-space:normal;overflow:visible;text-overflow:clip; letter-spacing:.3px;text-shadow:0 1px 3px #000a; box-shadow:0 2px 8px #0006;backdrop-filter:blur(4px); } #table .turn-label.win-hidden{ opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .45s ease,transform .45s ease,visibility .45s;pointer-events:none; } /* 4) 去掉轮盘东南西北字上的黄色小框（含做庄时的黄色边框/外发光） */ #table .table-felt .turn-panel .direction.dealer{ border:0;background:transparent;box-shadow:none;border-radius:0;padding:2px; } /* 5) 做庄标记：蓝色 → 金黄色 */ #table .table-felt .turn-panel.dealer-north:before{background:conic-gradient(from -45deg,#f1c94a 0deg 90deg,#303b3c 90deg 360deg)} #table .table-felt .turn-panel.dealer-east:before{background:conic-gradient(from -45deg,#303b3c 0deg 90deg,#f1c94a 90deg 180deg,#303b3c 180deg 360deg)} #table .table-felt .turn-panel.dealer-south:before{background:conic-gradient(from -45deg,#303b3c 0deg 180deg,#f1c94a 180deg 270deg,#303b3c 270deg 360deg)} #table .table-felt .turn-panel.dealer-west:before{background:conic-gradient(from -45deg,#303b3c 0deg 270deg,#f1c94a 270deg 360deg)} /* 3) 其他玩家副露 / 翻牌上红色「萬」字放大 */ #table .table-felt .seat-melds .meld-tile .tile-label{font-size:8px;line-height:.9} #table .reveal-tile .tile-label{font-size:1.3em;line-height:.95} /* 6) 手牌旁余额改用与其他玩家一致的黄色币 */ #table .hand .self-dock #self-balance{color:#ffe18b;font-weight:900} /* 本局结算里补充杠分明细 */ #table #settlement-summary .settlement-kongs{ display:flex;flex-direction:column;align-items:center;gap:4px; margin:8px auto 0;padding:8px 0 0;width:100%;max-width:100%; border-top:1px solid #ffffff24; } #table #settlement-summary .settlement-kongs>b{color:#f5d77a;font-size:11px;font-weight:800;letter-spacing:.3px} #table #settlement-summary .settlement-kong{ display:block;width:100%;padding:4px 8px;border-radius:7px; background:#ffffff12;border:1px solid #ffffff24; color:#dfe9d5;font-size:10.5px;line-height:1.4;text-align:center; } #table #settlement-summary .settlement-kong em{color:#ffd98a;font-style:normal;font-weight:800;margin-right:3px}