/* Landscape stage. All seats share one perspective table coordinate system. */
:root{--app-width:100vw;--app-height:100dvh;--table-width:1440px;--table-height:720px;--table-scale:1;--physical-width:100vw;--physical-height:100dvh}
html,body{width:100%;height:100%;min-height:0;overflow:hidden;background:#12231e}
#landscape-shell{position:fixed;left:var(--viewport-x,0px);top:var(--viewport-y,0px);width:var(--app-width);height:var(--app-height);overflow:hidden;transform:translateZ(0);transform-origin:0 0;background:radial-gradient(ellipse at 35% 30%,#285a46,#112c25 75%)}
body.rotated-screen #landscape-shell{left:calc(var(--physical-width) + var(--viewport-x,0px));transform:rotate(90deg)}
#asset-loader{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 45%,#285847,#102c25);color:#e5d5a7}
.loading-emblem{font:50px/1.4 serif;border:1px solid #c6b37d88;border-radius:18px;width:82px;text-align:center;background:#142e2588;box-shadow:0 8px 40px #0003}
#asset-loader h1{font:30px/1.4 serif;letter-spacing:7px;margin:18px 0 5px}#asset-loader p{font-size:12px;letter-spacing:2px;color:#bac7ac}#asset-progress{appearance:none;width:200px;height:3px;border:0;background:#ffffff15;margin:12px}#asset-progress::-webkit-progress-bar{background:#ffffff15}#asset-progress::-webkit-progress-value{background:#d9bd7e}#asset-progress::-moz-progress-bar{background:#d9bd7e}#asset-retry{border:1px solid #ccb47788;border-radius:6px;padding:9px 20px;margin:15px}
body.game-active .app-header,body.game-active #exit-focus-button{display:none!important}
#game-screen{position:absolute;left:0;top:0;width:var(--table-width);height:var(--table-height);max-width:none;max-height:none;min-height:0;padding:0;margin:0;display:block;transform:scale(var(--table-scale));transform-origin:0 0;isolation:isolate;overflow:hidden;background:#103f32}
#game-screen .table-frame{position:absolute;inset:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#game-screen .table-watermark{left:50%;top:auto;bottom:168px;transform:translateX(-50%);font:26px/1.4 serif;letter-spacing:8px;color:#d2ddbf;opacity:.16;z-index:0}
#game-screen .table-watermark>span{font-size:12px;letter-spacing:5px;margin-top:6px}
.table-toolbar{position:absolute;z-index:8;left:25px;top:23px;display:flex;gap:12px;align-items:flex-start}
.table-icon{width:58px;height:58px;display:grid;place-items:center;padding:13px;border:1px solid #d1bc8c55;border-radius:13px;background:linear-gradient(145deg,#293b35ee,#15251fee);color:#e3d8b8;box-shadow:0 4px 12px #0004;font:27px serif;position:relative}
.table-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.table-icon:active{transform:translateY(2px)}
.table-session{display:grid;grid-template-columns:auto auto;gap:3px 13px;padding:7px 13px;background:#122d249c;border:1px solid #d1bc8c25;border-radius:10px;min-width:140px;min-height:58px;align-items:center}
#table-network{font-size:13px;color:#9bcca8}#table-clock{font:20px/1.2 system-ui;font-variant-numeric:tabular-nums;font-weight:400}.table-session small{grid-column:1/-1;font-size:12px;color:#b7c6ab;letter-spacing:1px}
.table-room-pill{height:58px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 14px;color:#e1d5b0;font-size:12px;letter-spacing:2px}.table-room-pill strong{font:22px/1.2 Georgia;letter-spacing:2px;font-weight:400}
.table-right-tools{position:absolute;z-index:8;right:25px;top:23px;display:flex;gap:10px}.table-right-tools .friend-badge{position:absolute;right:4px;top:3px;font-size:13px}
#game-screen .player,#game-screen .player-self{position:static;display:contents;transform:none;max-width:none}
#game-screen .player-head{position:absolute;display:flex;flex-direction:column;gap:0;align-items:center;width:108px;min-width:0;padding:0 0 7px;border:1px solid #cab28177;border-radius:10px;background:linear-gradient(#192c25cc,#15251df0);z-index:5;box-shadow:0 7px 18px #0005}
#game-screen .avatar{display:block;width:94px;height:90px;border:0;border-radius:7px;margin:5px 5px 0;background:linear-gradient(135deg,#526d54,#30493c);font-size:40px;color:#e4d7a7}
#game-screen .avatar:has(.table-avatar){overflow:visible}.table-avatar{object-fit:cover}
#game-screen .avatar>small{right:0;bottom:0;font:15px serif;background:#213b2e;border:1px solid #acb58c88;padding:2px 5px;border-radius:4px}
#game-screen .player-info{text-align:center;width:100%;padding:0 4px}
#game-screen .player-name{max-width:none;font-size:15px;line-height:25px;color:#e9e2ca;white-space:nowrap}
#game-screen .player-score{font:20px/1.15 Georgia,serif;color:#e7d5a2;margin-top:1px;font-variant-numeric:tabular-nums}
#game-screen .player-status{display:block;position:absolute;top:8px;left:6px;font:11px/1.5 sans-serif;color:#f2efd5;border-radius:3px;background:#18372ac7;padding:0 4px;margin:0}
#game-screen .player-tags{position:absolute;right:-21px;top:5px;display:flex;flex-direction:column;gap:5px}
#game-screen .dealer-badge,#game-screen .ready-badge{font:21px/1.2 serif;border-radius:5px;padding:4px 5px;background:linear-gradient(#e6bd6c,#b97e35);color:#fff8dc;text-shadow:0 1px 2px #593f18;box-shadow:0 2px 6px #0004;border:1px solid #e5c384}
#game-screen .ready-badge{background:linear-gradient(#378bb0,#266785);border-color:#7bb9ca}
#game-screen .player-head.active{border-color:#f1d18a;box-shadow:0 0 0 3px #d9b76955,0 0 24px #c7ad5a44}
#game-screen .player-top .player-head{top:24px;left:calc(74% - 40px);width:88px}
#game-screen .player-top .avatar{width:76px;height:70px}
#game-screen .player-top .player-name{font-size:13px;line-height:22px}
#game-screen .player-top .player-score{font-size:17px}
#game-screen .player-left .player-head{left:26px;top:37%}
#game-screen .player-right .player-head{right:26px;top:37%}
#game-screen .player-right .player-tags{right:auto;left:-21px}
#game-screen .player-self .player-head{left:26px;bottom:30px}
#game-screen .back-hand{position:absolute;display:flex;gap:1px;max-width:none;height:auto;overflow:visible;margin:0;z-index:1;transform-origin:center;filter:drop-shadow(0 6px 3px #00170c77)}
#game-screen .back-hand .tile{width:33px;height:48px;border-radius:0}
#game-screen .player-top .back-hand{left:49%;top:31px;transform:translateX(-50%) perspective(700px) rotateX(-22deg) rotate(180deg)}
#game-screen .player-left .back-hand{left:15%;top:43%;transform:translate(-50%,-50%) rotate(102deg) skewX(-9deg)}
#game-screen .player-right .back-hand{left:85%;top:43%;transform:translate(-50%,-50%) rotate(-102deg) skewX(9deg)}
#game-screen .melds{position:absolute;display:flex;gap:10px;flex-wrap:nowrap;max-width:none;margin:0;z-index:2;transform-origin:center}
#game-screen .meld-group{display:flex;gap:0;filter:drop-shadow(0 4px 2px #00170c66)}
#game-screen .meld-group .tile{width:38px;height:54px}
#game-screen .player-top .melds{left:49%;top:86px;transform:translateX(-50%) perspective(600px) rotateX(30deg) rotate(180deg)}
#game-screen .player-left .melds{left:24%;top:43%;transform:translate(-50%,-50%) rotate(102deg) skewX(-9deg)}
#game-screen .player-right .melds{left:76%;top:43%;transform:translate(-50%,-50%) rotate(-102deg) skewX(9deg)}
#game-screen .own-melds{position:absolute;bottom:174px;left:180px;right:220px;display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:13px;z-index:3;transform:perspective(700px) rotateX(26deg);transform-origin:bottom}
#game-screen .own-melds .tile{width:49px;height:70px}.meld-tag{font-size:13px!important;bottom:-15px!important}
#game-screen .river-layout{position:absolute;inset:0;pointer-events:none;z-index:2;perspective:1400px}
#game-screen .river{position:absolute;display:grid;grid-template-columns:repeat(6,40px);gap:0;width:240px;max-width:none;max-height:144px;overflow:auto;scrollbar-width:none;align-content:start;pointer-events:auto;padding:0 0 4px}
#game-screen .river::-webkit-scrollbar{display:none}
#game-screen .river .tile{width:40px;height:54px;border:0;border-radius:0;filter:drop-shadow(0 2px 1px #061e1388)}
#game-screen .river .claimed{opacity:.2;filter:saturate(.4);box-shadow:none}
#game-screen .river .recent{box-shadow:none;filter:drop-shadow(0 0 4px #ffda77)}
#game-screen .river .recent:after{content:"";position:absolute;left:40%;top:-6px;width:0;height:0;border:5px solid transparent;border-top-color:#f7d075}
#game-screen .river-top{left:50%;top:20%;bottom:auto;right:auto;transform:translateX(-50%) rotateX(32deg) rotateZ(180deg);transform-origin:center}
#game-screen .river-bottom{left:50%;top:auto;bottom:26%;right:auto;transform:translateX(-50%) rotateX(27deg);transform-origin:center bottom}
#game-screen .river-left{left:31%;top:43%;bottom:auto;right:auto;transform:translate(-50%,-50%) rotateX(28deg) rotateZ(90deg)}
#game-screen .river-right{left:69%;top:43%;bottom:auto;right:auto;transform:translate(-50%,-50%) rotateX(28deg) rotateZ(-90deg)}
#game-screen .table-center{left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;text-align:center}
#game-screen .center-hub{display:flex;align-items:center;gap:20px;padding:0;background:none;border:0;box-shadow:none;border-radius:0;transform:perspective(800px) rotateX(15deg)}
#game-screen .treasure-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;padding:0;width:60px;position:relative}
#game-screen .treasure-wrap>.tile{width:55px;height:79px;filter:drop-shadow(0 5px 3px #0006)}
#game-screen .treasure-wrap:before{content:"宝";position:absolute;right:-4px;top:-6px;z-index:2;font:15px/1.3 serif;color:#fff1bb;border:1px solid #e1b86c;border-radius:4px;padding:1px 3px;background:#8f352c;box-shadow:0 2px 4px #0005}
#game-screen .treasure-wrap small{font-size:12px;color:#d6d5ad;white-space:nowrap}
.compass{position:relative;width:150px;height:127px;flex-shrink:0;clip-path:polygon(16% 0,84% 0,100% 18%,100% 82%,84% 100%,16% 100%,0 82%,0 18%);background:linear-gradient(140deg,#45544a,#1a2f29 45%,#12251f);border:1px solid #91a88d;box-shadow:inset 0 0 25px #0006}
.compass:before{content:"";position:absolute;inset:11px 10px;border:1px solid #b7c7a155;border-radius:30px;background:radial-gradient(ellipse,#162f29 40%,#30463a);box-shadow:0 3px 8px #0005}
.compass-wind{position:absolute;z-index:2;color:#a2b3a0;font:17px/1 serif;padding:5px 12px;border-radius:3px}.compass-wind.current{color:#fff0a6;background:linear-gradient(#d7b56a55,#a1813b99);text-shadow:0 0 10px #ffdd88}
.compass-north{left:50%;top:2px;transform:translateX(-50%)}.compass-south{left:50%;bottom:2px;transform:translateX(-50%)}.compass-east{right:-3px;top:50%;transform:translateY(-50%);padding:8px}.compass-west{left:-3px;top:50%;transform:translateY(-50%);padding:8px}
.time-display{position:absolute;inset:27px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center}.time-display strong{font:italic 42px/1.1 'Arial',sans-serif;font-variant-numeric:tabular-nums;font-weight:500;color:#bce5cf;text-shadow:0 0 12px #7fdbab44}.time-display strong.urgent{color:#ffc27b}.time-display small{font-size:10px;color:#adc8b0;margin-top:4px;white-space:nowrap}
#game-screen .remaining-number{font:31px/1.1 Georgia;color:#dfdfba;width:44px;min-width:0;padding:10px 0;text-shadow:0 2px 3px #173b26}
#game-screen .remaining-number small{font-size:12px;margin-top:7px;color:#aebf9d}
#game-screen .center-turn{font-size:14px;line-height:1.5;letter-spacing:1px;color:#d4d7b9;margin:10px 0 0;text-shadow:0 2px 4px #193625}
#game-screen .event-line{left:50%;bottom:194px;width:45%;max-width:45%;font-size:13px;line-height:1.5;color:#b4ccb3;letter-spacing:1px;z-index:1;pointer-events:none}
#game-screen .action-bar{position:absolute;right:175px;bottom:179px;width:auto;max-width:calc(100% - 355px);height:auto;min-height:0;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:11px;padding:0;z-index:7}
#game-screen .action-bar>span{display:none}
#game-screen .action-button{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:3px;min-width:75px;min-height:64px;height:auto;padding:12px 18px;border:2px solid #bdc69b;border-radius:16px;background:linear-gradient(145deg,#577d58,#2c553b);box-shadow:0 5px 0 #193e2b,0 8px 15px #001c1466;color:#f4efd6;font:28px/1.2 serif;white-space:nowrap}
#game-screen .action-button.gold{background:linear-gradient(145deg,#f0d99a,#c99b50);border-color:#f8e7b8;color:#493c22;box-shadow:0 5px 0 #8a6939,0 8px 15px #001c1466}
#game-screen .action-button.hu{background:linear-gradient(145deg,#c76b4e,#963f30);border-color:#e9b187;color:#fff2c8;box-shadow:0 5px 0 #642c25,0 8px 15px #001c1466}
#game-screen .action-button small{font:12px/1.1 sans-serif;margin:0}
#game-screen .action-button:disabled{opacity:.45}
#game-screen .hand-area{position:absolute;left:170px;right:170px;bottom:18px;height:148px;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:6;pointer-events:none}
#game-screen .hand{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:1px;max-width:100%;width:auto;padding:0;pointer-events:auto;filter:drop-shadow(0 8px 6px #082a1ba0)}
#game-screen .hand .tile{width:76px;height:109px;max-width:none;border:0;border-radius:0;transform-origin:bottom;transition:transform .13s,filter .13s}
#game-screen .hand .tile.drawn{margin-left:18px}
#game-screen .hand .tile.selected{transform:translateY(-19px);box-shadow:none;filter:drop-shadow(0 0 5px #ffdc8d)}
#game-screen .hand .tile:hover:not(:disabled):not(.selected){transform:translateY(-6px)}
#game-screen .hand .tile:disabled{opacity:1}
#game-screen .wait-indicator{height:18px;margin:6px 0 0;gap:5px;max-width:100%;font-size:12px;line-height:18px;color:#b4c4aa;overflow:hidden}
#game-screen .waiting-panel{left:50%;top:44%;transform:translate(-50%,-50%);width:520px;max-width:none;padding:30px 34px;border:1px solid #bfa87588;border-radius:20px;background:linear-gradient(#183d31eb,#16332beb);box-shadow:0 20px 70px #00170d88;z-index:6}
#game-screen .waiting-panel h2{font:34px/1.4 serif;letter-spacing:3px;margin:0 0 14px;color:#eee1b8}
#game-screen .waiting-panel p{font-size:18px;line-height:1.7;margin:0 0 23px;color:#b5c9b1}
#game-screen .waiting-panel .buttons{gap:12px}#game-screen .waiting-panel .buttons button{font-size:21px;padding:14px 23px;min-height:55px}
#game-screen .waiting-links{gap:22px;margin-top:22px}#game-screen .waiting-links button{font-size:17px;color:#c7c9a5}
#game-screen.is-waiting .table-watermark{bottom:18%}#game-screen.is-waiting .event-line{bottom:13%;font-size:18px}
/* The atlas contains the whole ivory face, shaded side, and jade base. */
.tile,.tile.tile-back{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit}
.tile-art{display:block;width:100%;height:100%;background-image:url('/assets/table-v2/faces-reference-v3.webp');background-size:1000% 300%;background-repeat:no-repeat;pointer-events:none}
.tile.selected{filter:drop-shadow(0 0 3px #f0d58b)}
/* Top-layer dialogs must be rotated separately from the document canvas. */
body .sheet,body .result-dialog{position:fixed;left:calc(var(--physical-width)/2 + var(--viewport-x,0px));top:calc(var(--physical-height)/2 + var(--viewport-y,0px));right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);width:min(680px,calc(var(--app-width) - 32px));max-width:none;max-height:calc(var(--app-height) - 24px);padding:22px;border:1px solid #b7a36c88;border-radius:16px;overscroll-behavior:contain;scrollbar-width:thin}
body.rotated-screen .sheet,body.rotated-screen .result-dialog{transform:translate(-50%,-50%) rotate(90deg)}
body .sheet:has(#replay-frame){width:min(1100px,calc(var(--app-width) - 32px))}
body .replay-seats{grid-template-columns:1fr 1fr}
body .toast{max-width:calc(var(--app-width) - 50px);bottom:20px}
body.game-active .toast{bottom:22%;background:#16382eed;color:#f3e4ba;border-color:#c7ae6b77}
/* The lobby follows the same landscape orientation; forms remain scrollable. */
#home-screen{height:calc(var(--app-height) - 76px);max-width:1180px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 45px;padding:32px 35px;margin:0 auto;align-items:start;overscroll-behavior:contain}
body .app-header{height:76px;padding:0 30px}
#home-screen .welcome{padding:10px 0;min-height:0}#home-screen .entry-card{width:100%;align-self:start;padding:26px}#home-screen .hero-tiles{position:relative;right:auto;bottom:auto;transform:scale(.9);transform-origin:left top;margin:0 0 0 30px;width:300px;height:160px}
#home-screen .family-home{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;padding:15px 0;gap:15px}#home-screen .family-shortcuts{width:auto;gap:20px}
#home-screen .home-bottom{width:100%;grid-column:1/-1;gap:16px}
body.compact-screen .app-header{height:48px;padding:0 20px}body.compact-screen .brand{font-size:17px}body.compact-screen .brand-tile{height:31px;width:25px;font-size:24px}body.compact-screen .brand small{display:none}
body.compact-screen #home-screen{height:calc(var(--app-height) - 48px);padding:20px 30px;gap:20px 34px;grid-template-columns:minmax(220px,1fr) minmax(280px,1fr)}
body.compact-screen #home-screen .welcome{padding:0}body.compact-screen #home-screen h1{font-size:34px;line-height:1.35;margin:15px 0 12px}body.compact-screen #home-screen .welcome>p{font-size:12px;line-height:1.8}
body.compact-screen #home-screen .hero-tiles{transform:scale(.68);height:120px;margin-left:10px}body.compact-screen #home-screen .home-footnote{display:none}
body.compact-screen #home-screen .entry-card{padding:20px}body.compact-screen .auth-card h2{font-size:24px;margin:10px 0 14px}body.compact-screen .auth-tabs{margin-bottom:12px}body.compact-screen .auth-card label{margin:9px 0;font-size:12px}body.compact-screen input{padding:11px;font-size:16px}
body.compact-screen .sheet-top{padding-bottom:12px;margin-bottom:12px}body.compact-screen .sheet-top h2{font-size:20px}body.compact-screen .sheet .room-menu{margin:12px 0;gap:8px}body.compact-screen .sheet .room-note{font-size:12px;margin:10px 0}body.compact-screen .sheet .room-menu button{min-height:38px;font-size:12px;padding:9px}
@media(prefers-reduced-motion:reduce){.tile,.toast{transition:none!important}}
/* Concealed tiles and exposed groups form a single rack along each sloped edge. */
#game-screen .opponent-rack{position:absolute;display:flex;align-items:flex-end;gap:16px;z-index:2;transform-origin:center;filter:drop-shadow(0 5px 3px #00180d77)}
#game-screen .player-top .opponent-rack{left:49%;top:67px;transform:translateX(-50%) perspective(900px) rotateX(28deg) rotateZ(180deg)}
#game-screen .player-left .opponent-rack{left:21%;top:43%;transform:translate(-50%,-50%) rotate(106deg) skewX(-10deg)}
#game-screen .player-right .opponent-rack{left:79%;top:43%;transform:translate(-50%,-50%) rotate(-106deg) skewX(10deg)}
#game-screen .opponent-rack .back-hand,#game-screen .opponent-rack .melds{position:static;transform:none;filter:none;gap:1px;align-items:flex-end}
#game-screen .opponent-rack .melds{gap:9px}#game-screen .opponent-rack .meld-group .tile{width:33px;height:47px}
/* Keep the near hand large on very wide phones with browser bars showing. */
#game-screen{--hand-tile:min(110px,calc((var(--table-width) - 372px)/14));--hand-height:calc(var(--hand-tile)*1.4333)}
#game-screen .hand-area{height:calc(var(--hand-height) + 34px)}
#game-screen .hand .tile{width:var(--hand-tile);height:var(--hand-height)}
#game-screen .own-melds{bottom:calc(var(--hand-height) + 65px)}
#game-screen .action-bar{bottom:calc(var(--hand-height) + 70px)}
#game-screen .event-line{bottom:calc(var(--hand-height) + 45px)}
#game-screen .player-left .opponent-rack,#game-screen .player-right .opponent-rack{top:39%}
#game-screen .player-left .opponent-rack .tile,#game-screen .player-right .opponent-rack .tile{width:26px;height:43px}
#game-screen .player-top .player-head{left:calc(69% - 40px)}
.table-icon{width:max(58px,calc(40px/var(--table-scale)));height:max(58px,calc(40px/var(--table-scale)))}
#game-screen .player-name{font-size:max(15px,calc(9px/var(--table-scale)));line-height:1.6}
#game-screen .player-score{font-size:max(20px,calc(11px/var(--table-scale)))}
#game-screen .player-top .player-name{font-size:max(13px,calc(8px/var(--table-scale)))}
#game-screen .player-top .player-score{font-size:max(17px,calc(10px/var(--table-scale)))}
#game-screen .center-turn{font-size:max(14px,calc(9px/var(--table-scale)))}
#game-screen .treasure-wrap small,.time-display small,#game-screen .remaining-number small{font-size:max(11px,calc(8px/var(--table-scale)))}
#game-screen .wait-indicator{font-size:max(12px,calc(8px/var(--table-scale)));height:20px}
/* Exposed groups stay in the near-left tray, clear of the bottom discard river. */
#game-screen .own-melds{left:160px;right:auto;gap:10px}
#game-screen .own-melds .tile{width:32px;height:46px}
#game-screen .stacked-kong .tile:nth-child(4){position:absolute;left:50%;top:-12px;transform:translateX(-50%);filter:drop-shadow(0 2px 2px #183e2b88)}
/* Shared 3D table camera: far and near rails and every rack converge together. */
#game-screen{background:radial-gradient(ellipse at 50% 10%,#372c21,#17130f 90%)}
#game-screen .table-frame{transform-style:preserve-3d;pointer-events:none}
#game-screen .table-frame .player-head,#game-screen .waiting-panel{pointer-events:auto}
#game-screen .board-scene{position:absolute;left:50%;top:44%;width:72.6%;height:1100px;transform:translate(-50%,-50%) perspective(2300px) rotateX(55deg);transform-style:preserve-3d;pointer-events:none;z-index:0}
.board-surface{position:absolute;inset:0;background:url('/assets/table-v2/table-surface.webp') center/100% 100% no-repeat;transform:translateZ(-2px);border-radius:35px;box-shadow:0 20px 0 #211c13,0 30px 40px #0009}
#game-screen .table-watermark{z-index:1;bottom:165px;color:#c9d3ac;opacity:.22;font-size:21px}
#game-screen .opponent-rack{position:absolute;display:flex;align-items:flex-end;gap:18px;height:64px;filter:none;transform-style:preserve-3d;z-index:auto}
#game-screen #rack-top{left:50%;top:8%;transform:translateX(-50%)}
#game-screen #rack-left{left:8%;top:48%;transform:translate(-50%,-50%) rotateZ(-90deg)}
#game-screen #rack-right{left:92%;top:48%;transform:translate(-50%,-50%) rotateZ(90deg)}
#game-screen .opponent-rack .back-hand,#game-screen .opponent-rack .melds,#game-screen .meld-group{position:relative;inset:auto;transform:none;filter:none;overflow:visible;transform-style:preserve-3d;max-width:none;max-height:none;height:auto}
#game-screen .back-hand{gap:2px;display:flex;align-items:flex-end}
#game-screen .opponent-rack .back-hand .tile{width:34px;height:62px;--tile-depth:26px;transform-style:preserve-3d}
#game-screen .opponent-rack .back-hand .tile-cuboid{transform:rotateX(-90deg);transform-origin:center bottom}
#game-screen .opponent-rack .melds{display:flex;align-items:flex-end;gap:10px;margin-left:5px}
#game-screen .opponent-rack .meld-group .tile{width:34px;height:54px;--tile-depth:25px}
#game-screen #rack-top .melds .tile-front{transform:translateZ(var(--tile-depth)) rotateZ(180deg)}
#game-screen .river-layout{inset:0;transform-style:preserve-3d;perspective:none;z-index:auto}
#game-screen .river{display:grid;grid-template-columns:repeat(6,34px);width:204px;gap:2px;max-height:none;max-width:none;overflow:visible;padding:0;filter:none;transform-style:preserve-3d;pointer-events:none}
#game-screen .river .tile{width:34px;height:52px;--tile-depth:24px;filter:none;transform-style:preserve-3d}
#game-screen .river-top{left:50%;top:19%;bottom:auto;right:auto;transform:translateX(-50%) rotateZ(180deg)}
#game-screen .river-bottom{left:50%;top:64%;bottom:auto;right:auto;transform:translateX(-50%)}
#game-screen .river-left{left:26%;top:47%;right:auto;bottom:auto;transform:translate(-50%,-50%) rotateZ(-90deg)}
#game-screen .river-right{left:74%;top:47%;right:auto;bottom:auto;transform:translate(-50%,-50%) rotateZ(90deg)}
#game-screen .river .claimed{visibility:hidden;opacity:1}
#game-screen .river .recent{filter:none}
#game-screen .river .recent:after{transform:translateZ(26px);top:-13px;border-top-color:#ffdb47;border-width:7px;left:35%}
#game-screen .own-melds{position:absolute;left:12%;top:84%;right:auto;bottom:auto;transform:none;transform-style:preserve-3d;gap:12px;z-index:auto}
#game-screen .own-melds .tile{width:33px;height:55px;--tile-depth:26px;transform-style:preserve-3d}
#game-screen .stacked-kong .tile:nth-child(4){position:absolute;left:50%;top:0;transform:translateX(-50%) translateZ(var(--tile-depth));filter:none}
/* True cuboids: face, jade reverse, and four thick ivory/jade edges. */
.tile{--tile-depth:9px;transform-style:preserve-3d;overflow:visible}
.tile-cuboid{display:block;position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tile-front,.tile-under{position:absolute;inset:0;display:block;border-radius:5px;backface-visibility:hidden}
.tile-front{background:#fafaf5;transform:translateZ(var(--tile-depth));box-shadow:inset 0 0 0 1px #d4d9c4}
.tile-under{background:#3896c5;box-shadow:1px 4px 4px #0005}
.tile-art{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;background-image:url('/assets/table-v2/faces-reference-v3.webp');background-size:1000% 300%;background-repeat:no-repeat}
.tile-back .tile-front{background:linear-gradient(100deg,#2782b2,#439dcb 40%,#3189b8);box-shadow:inset 0 0 0 1px #83c9e9,inset 0 3px 5px #b4e4f255}
.tile-back .tile-art{display:none}
.tile-back .tile-under{background:#f4f5f2}
.tile-side{display:block;position:absolute;backface-visibility:visible;border-radius:2px}
.edge-left,.edge-right{top:0;width:var(--tile-depth);height:100%;transform-origin:left center;transform:rotateY(-90deg);background:linear-gradient(to right,#2f91c0 0 13%,#80c2df 14% 17%,#e7edee 18% 32%,#fff 60% 100%)}
.edge-left{left:0}.edge-right{left:100%}
.edge-near,.edge-far{left:0;width:100%;height:var(--tile-depth);transform-origin:center top;transform:rotateX(90deg);background:linear-gradient(to bottom,#2f91c0 0 13%,#8ccce6 14% 17%,#e1e8ea 18% 30%,#f8faf9 60% 100%)}
.edge-near{top:100%}.edge-far{top:0}
#game-screen .hand{filter:none;gap:4px;perspective:1800px;transform-style:preserve-3d}
#game-screen .hand .tile{--tile-depth:42px;filter:none}
#game-screen .hand .tile-cuboid{transform:rotateX(-9deg) rotateY(-2deg);transform-origin:center bottom}
#game-screen .hand .tile.selected{filter:none;transform:translateY(-22px)}
#game-screen .hand .tile.selected .tile-front{box-shadow:0 0 0 2px #ffe7a2,0 0 14px #fada8277}
/* Image UI for compass, directions, numerals and action orbs. */
#game-screen .table-center{left:50%;top:49%;transform:translate(-50%,-50%) translateZ(5px);transform-style:preserve-3d;z-index:auto}
#game-screen .center-hub{gap:20px;transform:none;transform-style:preserve-3d}
#game-screen .compass{width:190px;height:210px;background:url('/assets/table-v2/compass.webp') center/100% 100% no-repeat;border:0;clip-path:none;box-shadow:none;border-radius:0;transform-style:preserve-3d}
#game-screen .compass:before{display:none}
#game-screen .compass-wind{padding:0;width:31px;height:37px;transform-style:preserve-3d}
#game-screen .compass-wind.current{background:none;filter:drop-shadow(0 0 6px #ffdf68)}
#game-screen .compass-north{top:12px}#game-screen .compass-south{bottom:12px}#game-screen .compass-east{right:12px}#game-screen .compass-west{left:12px}
.ui-glyph{display:inline-block;width:100%;height:100%;background-image:url('/assets/table-v2/clock-glyphs.webp');background-size:400% 400%;background-repeat:no-repeat;flex-shrink:0}
#game-screen .time-display{inset:54px 38px;gap:0;justify-content:center;transform:translateZ(5px)}
#turn-seconds{display:flex!important;align-items:center;justify-content:center;height:76px;width:125px;gap:0}
#turn-seconds .ui-glyph{width:54px;height:76px;margin:0 -4px}
#turn-seconds.urgent{filter:hue-rotate(145deg)}
#game-screen .time-display small{font-size:15px;color:#c3d1b6;line-height:1.3;margin-top:0}
#game-screen .treasure-wrap{transform-style:preserve-3d}
#game-screen .treasure-wrap>.tile{width:48px;height:75px;--tile-depth:26px;filter:none;transform-style:preserve-3d}
#game-screen .treasure-wrap small{font-size:17px;transform:translateZ(8px)}
#game-screen .center-turn{font-size:18px;margin-top:12px;transform:translateZ(7px)}
#game-screen .remaining-number{font-size:36px}#game-screen .remaining-number small{font-size:17px}
#game-screen .action-bar{gap:13px;bottom:calc(var(--hand-height) + 65px)}
#game-screen .sprite-action{position:relative;display:flex;flex-direction:column;width:105px;height:126px;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;color:#fff1c6;font:20px/1.2 serif;gap:0;overflow:visible}
.action-art{display:block;width:105px;height:105px;background-image:url('/assets/table-v2/buttons.webp');background-size:400% 200%;background-repeat:no-repeat;pointer-events:none;flex-shrink:0}
.sprite-caption{font:17px/1.3 sans-serif;color:#f6ebc4;white-space:nowrap;text-shadow:0 2px 3px #12341c;position:relative;z-index:1;pointer-events:none}
#game-screen .sprite-action:active:not(:disabled){transform:scale(.96)}
#wait-detail-button{position:absolute;right:27px;bottom:28px;padding:0;z-index:9;width:100px;height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.art-listen{background-position:0% 100%}
#wait-details{position:absolute;right:143px;top:110px;bottom:calc(var(--hand-height) + 47px);width:385px;z-index:10;background:linear-gradient(140deg,#0c2e26eb,#123a2bbd);border:1px solid #c7cba355;border-radius:17px;padding:20px 22px;box-shadow:0 12px 35px #001f1599;backdrop-filter:blur(8px);transform:translateX(45px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .22s,opacity .22s,visibility .22s;display:flex;flex-direction:column}
#wait-details.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.wait-details-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b4c79b44;padding-bottom:12px;flex-shrink:0}.wait-details-heading h3{font:27px/1.2 serif;color:#f5e8c2;margin:4px 0 0}.wait-details-heading small{font-size:13px;letter-spacing:3px;color:#bdd1ae}.wait-details-heading button{font-size:32px;width:42px;height:42px;color:#dfddbb}
.wait-details-list{flex:1;min-height:0;overflow:auto;padding:10px 0;overscroll-behavior:contain;scrollbar-width:thin}
.wait-detail-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #c7d4ae22}
.wait-detail-row>.tile{width:37px;height:54px;--tile-depth:4px;margin:0 2px;flex-shrink:0}
.wait-detail-row>div{flex:1;min-width:0}.wait-detail-row strong{font-size:18px;color:#e9dfb9;font-weight:500}.wait-detail-row small{display:block;color:#aec7ac;font-size:14px;margin-top:7px;line-height:1.3}.wait-detail-row small b{color:#f3d27f;font-weight:500}
.wait-detail-row .wait-multipliers{flex:none;text-align:right}.wait-multipliers span{font-size:17px;color:#dbe7c8}.wait-multipliers span b{color:#f1cf83;font-weight:600}.wait-details-note{flex-shrink:0;font-size:12px;line-height:1.65;color:#a9bfa4;margin:10px 0 0}
#game-screen .table-frame{transform-style:flat}
#game-screen .own-melds{top:79%}
#game-screen .river{grid-template-columns:repeat(6,calc(34px*var(--river-factor,1)));width:calc(204px*var(--river-factor,1));gap:calc(2px*var(--river-factor,1))}
#game-screen .river .tile{width:calc(34px*var(--river-factor,1));height:calc(52px*var(--river-factor,1));--tile-depth:calc(24px*var(--river-factor,1))}
#turn-seconds .ui-glyph{width:calc(116px/var(--clock-chars,2));height:72px;margin:0}
.wait-details-heading button{min-width:calc(36px/var(--table-scale));min-height:calc(36px/var(--table-scale))}

.wait-detail-row{padding:7px 0;gap:12px}
.wait-detail-row>.tile{width:32px;height:46px}
.wait-detail-row strong{font-size:max(18px,calc(10px/var(--table-scale)))}
.wait-detail-row small{font-size:max(14px,calc(9px/var(--table-scale)));margin-top:5px}
.wait-multipliers span{font-size:max(17px,calc(10px/var(--table-scale)))}
.wait-details-note{font-size:max(12px,calc(8px/var(--table-scale)));line-height:1.5}

/* Concealed tiles face the blue reverse towards the viewer: blue is at z=depth. */
.tile-back .edge-left,.tile-back .edge-right{background:linear-gradient(to right,#fff 0 64%,#e4eaec 80%,#a3cfe3 83%,#3697c5 86% 100%)}
.tile-back .edge-near,.tile-back .edge-far{background:linear-gradient(to bottom,#fafcfc 0 64%,#e1e9ec 80%,#a3cfe3 83%,#3594c2 86% 100%)}
.tile:not(.tile-back) .tile-front:after{content:"";position:absolute;inset:0 0 auto;height:3.3%;background:linear-gradient(#286f96,#67b3d3);border-radius:5px 5px 0 0;pointer-events:none}

/* Counted rounds: dealer repeats and drawn hands do not consume the limit. */
#round-options{margin:14px 0 18px;padding:0;border:0}#round-options legend{font-size:14px;color:#cfdbcc;margin-bottom:8px}#round-options>small{display:block;font-size:12px;color:#9ab4a7;margin-top:7px}
.round-options{display:flex;gap:10px}.round-options label{flex:1;cursor:pointer;position:relative}.round-options input{position:absolute;opacity:0;width:1px;height:1px}.round-options span{display:block;text-align:center;padding:10px 0;border:1px solid #8ca18b77;border-radius:9px;color:#c9dacd;background:#173b31}.round-options input:checked+span{color:#193b31;border-color:#e3c789;background:#e3c789;font-weight:700}.round-options input:focus-visible+span{outline:2px solid white;outline-offset:3px}
.round-counter{grid-column:1/-1;display:flex;align-items:center;gap:10px;white-space:nowrap}.table-session .round-counter small{font-size:15px}
#extend-rounds{padding:4px 9px;border:1px solid #bda36a;border-radius:6px;background:#405440;color:#ffe1a1;font-size:15px;line-height:1.2}#extend-rounds.voting{background:#816b34}
.extend-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.extend-options button{font-size:20px;padding:18px}.extend-options small{display:block;font-size:13px;color:#a5bead;margin-top:5px}

.sheet[data-kind="extensionVote"] .vote-players{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.sheet[data-kind="extensionVote"] .vote-players>div{padding:8px;font-size:12px;gap:8px;min-width:0}
.sheet[data-kind="extensionVote"] .vote-players span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet[data-kind="extensionVote"] .vote-players strong{flex-shrink:0}