/* Shared desktop/mobile composition, measured from the supplied 2048 × 945 reference. */
body:not(.at-lobby){background:#000;overflow:hidden;min-height:100dvh}
body:not(.at-lobby) #app{position:relative;width:min(1440px,100%);padding:0}
body:not(.at-lobby) .topbar{position:absolute;z-index:8;left:6%;top:15%;width:auto;height:auto;gap:.7vw;padding:0;border:0;background:none;border-radius:0}
body:not(.at-lobby) .topbar .brand{display:none}
body:not(.at-lobby) .room-name{flex:none;display:block}
body:not(.at-lobby) .room-name>small{display:none}
body:not(.at-lobby) .room-badge{font-size:clamp(8px,1.2vw,16px);padding:.3vw .7vw;background:#416b0c;color:#e5f69a;border:1px solid #a4ba43}
body:not(.at-lobby) .topbar nav{gap:.4vw}
body:not(.at-lobby) .icon-btn{width:clamp(20px,2.5vw,32px);height:clamp(20px,2.5vw,32px);font-size:clamp(12px,1.6vw,21px);background:#446b10bb;border-color:#819c34;box-shadow:none;border-radius:5px}
body:not(.at-lobby) .bottom-bar,body:not(.at-lobby) .outside-note{display:none}
.game{position:relative;container-type:size;aspect-ratio:2.167;height:auto;min-height:0;border:0;border-radius:0;--cw:6.8cqw;--ch:calc(var(--cw)*1.51);background:radial-gradient(ellipse at 44% 40%,#92bf35,#83b02c 40%,#6a9521 75%,#456717);box-shadow:inset 0 0 0 3px #4d6826,inset 0 0 40px #45602055}
.game .table-grain{opacity:.12}
.game .felt-wave.wave-one{background:#274c0e;opacity:.17;bottom:23%;height:19%;transform:none;border-radius:50% 50% 0 0/18% 25% 0 0}
.game .felt-wave.wave-two{background:#ccdf7c;opacity:.10;bottom:31%;height:13%;transform:none}
.game .table-brand{left:10%;top:48%;font-size:3.4cqw;color:#d5eaa342;transform:translate(-50%,-50%);text-shadow:none}
.game .players{position:absolute;inset:.5% 5.5% auto auto;width:18.3%;height:74.5%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:25% 41% 31%;gap:1.5%;pointer-events:none;z-index:5}
.game .players>.player,.game .players>.info-rail{width:100%;min-width:0;max-width:none;justify-self:stretch;margin:0}
.game .players .player{height:auto;min-height:0;position:relative;padding:1% 33% 5% 4%;border:1px solid #a0b34c;border-radius:8px;overflow:visible;background:repeating-linear-gradient(120deg,#5a7b2422 0 3px,#73923722 3px 6px),linear-gradient(#64852c,#486c1a);box-shadow:inset 0 0 0 2px #3b591e99;pointer-events:auto;text-align:left}
.game .players .player.active{border-color:#cddc70;box-shadow:inset 0 0 0 2px #98b43766}
.game .players .player-top{display:block;height:auto;margin:4% 0 2%}
.game .players .player-top .status{display:none}
.game .players .level{display:inline-block;background:linear-gradient(#62c6ee,#168bc8);border:1px solid #b3e8ff;border-radius:5px;font:700 1cqw Arial;color:#fff;padding:2% 5%}
.game .players .player.me .level{background:linear-gradient(#d0b37c,#9c804e);border-color:#e4ca93}
.game .players .avatar,.game .players .player.me .avatar{position:absolute;right:4%;top:8%;width:29%;height:auto;aspect-ratio:1;margin:0;border:2px solid #e8e0a0;border-radius:8px;background:#fff2c9;overflow:hidden}
.game .players .avatar img{position:absolute;width:264%;height:auto;left:-62%;top:-11%;max-width:none}
.game .players .avatar .opponent-mascot{left:-138%;top:-15%}
.game .players .turn-mark{bottom:0;left:0;width:100%;transform:none;font-size:.75cqw;line-height:1;padding:3%;border:0;border-radius:0}
.game .players .player h2{font-size:1.5cqw;line-height:1.15;margin:6% 0 8%;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px #304209}
.game .players .player-money{font:800 1.6cqw/1.15 Arial;color:#ffe32b;white-space:nowrap;background:#36550999;border-radius:9px;padding:2% 4%;width:150%;margin-top:4%}
.game .players .player-money small{font-size:.85cqw;color:#e4eaa9}
.game .players .player-flags{position:absolute;left:5%;bottom:4%;font-size:1cqw;color:#eef5c4;margin:0}
.game .players .player-score,.game .players .player.me .player-score{position:absolute;display:flex;left:auto;right:calc(100% + .7cqw);top:auto;bottom:0;width:6.5cqw;height:6cqh;min-height:0;padding:0 .4cqw;gap:.2cqw;justify-content:center;align-items:center;background:#365b0dbb;border:1px solid #9fbb4f;border-radius:7px;box-shadow:none;overflow:visible}
.game .players .player-score>b,.game .players .player.me .player-score>b{font:900 3cqw/1 Arial;color:#ffe73b;text-shadow:0 2px #415615}
.game .players .player-score>em,.game .players .player.me .player-score>em{font-size:1.4cqw;color:#fff4b0}
.game .players .player-score>span,.game .players .score-multiplier{display:none!important}
.game .players .info-rail{position:static;inset:auto;display:flex;flex-direction:column;gap:3%;height:100%;min-height:0;pointer-events:auto}
.game .players .mission{flex:1;position:relative;display:block;min-height:0;width:100%;padding:4% 3%;border:2px solid #c99b51;border-radius:7px;background:linear-gradient(#854b29,#4f2d1b);box-shadow:inset 0 0 0 3px #3c251588;overflow:hidden}
.game .players .mission-label{position:relative;display:block;margin-top:-5%;font-size:2.1cqw;line-height:1.1;color:#ffd84c;text-shadow:0 2px #67300d;text-align:center;z-index:1}
.game .players .mission>b{position:absolute;left:5%;right:28%;top:37%;font-size:1.8cqw;line-height:1.1;color:#b0f9cb;margin:0;text-align:center;text-shadow:0 2px #1e3f24;z-index:2}
.game .players .mission>strong{position:absolute;right:3%;bottom:9%;margin:0;font:900 3.9cqw/1 Arial;color:#ce9cf7;text-shadow:0 3px #3e195f;-webkit-text-stroke:.08cqw #edc8ff}
.game .players .mission-cards{position:absolute;left:8%;right:35%;bottom:8%;display:flex;justify-content:center;gap:4%;padding:0;opacity:.3}
.game .players .mission-cards .mission-hwatu{width:2.4cqw;height:3.6cqw;box-shadow:none}
.game .rail-tools{display:grid;grid-template-columns:1fr 1fr;gap:3%;width:100%;height:24%;min-height:0}
.game .players .rail-tools button{margin:0;padding:0;width:100%;height:100%;min-height:0;font-size:1.5cqw;color:#f0ffc3;background:linear-gradient(#a5bc25 0 45%,#789514 46%);border:1px solid #c5d54a;border-radius:6px;box-shadow:inset 0 0 0 2px #88a422}
.game .players .player.me{padding:0 33% 7% 4%}
.game .players .player.me h2{margin:9% 0 6%}
.game .players .player.me .player-score{bottom:26%}
.game .bottom-actions{position:absolute;right:9.5%;bottom:2%;width:6%;height:22%;display:flex;flex-direction:column;gap:4%;z-index:6}
.game .bottom-actions #again{position:absolute;right:-90%;top:-35%;width:90%;height:28%;padding:0;min-height:0;font-size:1cqw;color:#edf5be;background:#597818;border:1px solid #8fa63b;border-radius:5px;box-shadow:none}
.game .bottom-actions #auto{width:100%;min-width:0;height:100%;padding:6%;border:2px solid #adba69;border-radius:9px;color:#e2e9ab;background:linear-gradient(#698334,#44651b);font-size:1.5cqw;white-space:normal;line-height:1.2;box-shadow:inset 0 0 0 3px #425f1c}
.game .bottom-actions #auto:before{content:'⟳';display:block;font:900 4.4cqw/1 Arial;color:#ccd78c;margin:0 auto 8%}
.game .bottom-actions #auto>i{display:none}
.game .bottom-actions #auto[aria-pressed=true]{background:linear-gradient(#b5cd32,#829f16);color:#243d05;border-color:#f0ef79}
.game .opponent-zone{position:absolute;left:10%;right:25%;top:1%;height:12%;display:block}
.game .opponent-zone>.taken-row{width:86%;height:100%;gap:3%;max-width:none;margin:0}
.game .hidden-hand{position:absolute;left:auto;right:-3%;top:0;width:12%;height:6cqh;min-width:0;display:flex;justify-content:flex-end;padding:0}
.game .mini-back{width:1.7cqw;height:2.5cqw;margin-left:-.8cqw;border-width:1px}
.game .my-zone{position:absolute;left:9.5%;right:18%;bottom:1.5%;height:24%;container-type:normal;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible}
.game .my-zone>.taken-row{position:absolute;left:0;bottom:calc(100% + 2cqh);width:87%;height:12cqh;max-width:none;margin:0;padding:0;gap:3%}
.game .taken-row{display:flex;align-items:flex-start}
.game .pile,.game .my-zone .pile{flex:1;min-width:0;max-width:none;height:100%;padding:0;position:relative}
.game .pile-label,.game .my-zone .pile-label{position:absolute;left:auto;right:0;top:auto;bottom:0;font-size:0;color:transparent;text-shadow:none;z-index:9}
.game .pile-label b,.game .my-zone .pile-label b{font:700 1.1cqw/1 Arial;padding:.2cqw;background:#fff;color:#364515;border-radius:3px}
.game .pile:not(:has(.card)) .pile-label{display:none}
.game .pile .card,.game .my-zone .pile .card{top:0;width:3.45cqw;height:5.2cqw;border-radius:2px}
.game .hand-tray{position:relative;align-self:flex-start;width:fit-content;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.game .hand{display:flex;grid-template-columns:none;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;width:max-content;min-height:0;gap:.55cqw;--hand-card-width:6.7cqw}
.game .hand .card{flex:none;width:var(--hand-card-width);max-width:none;height:auto;aspect-ratio:1/1.51;border:2px solid #d7b478;border-bottom:3px solid #72501f;border-radius:4px;box-shadow:0 0 0 1px #7e5727;overflow:visible;margin:0!important}
.game .hand .card.matchable:after{content:'▼';position:absolute;left:50%;right:auto;top:-.2cqw;transform:translate(-50%,-100%);font:900 3.3cqw/.8 Arial;color:#078bca;-webkit-text-stroke:.12cqw #c0ecff;text-shadow:0 2px #163f45;z-index:8;pointer-events:none}
.game .hand .card:hover{transform:translateY(-5px)}
.game .hand-actions{top:-4.4cqh;left:0;right:0;z-index:10}
.game .hand-actions button{min-height:0;font-size:1.2cqw;padding:.5cqw .8cqw}
.game .floor-zone{left:22%;right:30%;top:15%;bottom:42%;display:block}
.game .floor .card{width:4.5cqw;height:6.8cqw;border:1px solid #cfb990;border-bottom:2px solid #835b26;border-radius:2px}
.game>.deck-area{position:absolute;left:50%;top:50%;width:4.5cqw;transform:translate(-50%,-50%);margin:0;z-index:4}
.game .deck{width:4.5cqw;height:6.8cqw;border:1px solid #dbb27a;background:repeating-linear-gradient(45deg,#d6ae75 0 2px,#caa166 2px 4px);box-shadow:1px 2px #a1753f,2px 3px #deb77d}
.game .deck-count{display:none}
.game .first-pick{padding:0 20% 0 0}
.game .network-status{font-size:1.3cqw}
@media(orientation:landscape) and (max-height:550px){body:not(.at-lobby){display:block}body:not(.at-lobby) #app{width:100%;height:100dvh;min-height:0;padding:0}.game{width:100%;height:100dvh;aspect-ratio:auto;min-height:0;border-radius:0}.game .my-zone>.taken-row{bottom:calc(100% + 2cqh)}body:not(.at-lobby) .topbar{top:15%}}
@media(max-width:600px) and (orientation:portrait){body:not(.at-lobby) #app{padding:0;min-height:0}.game{width:100%;height:auto;aspect-ratio:2.167;min-height:0}.game .hand .card:hover{transform:none}}
/* Purple marks hierarchy and selection, leaving ordinary content neutral. */
.at-lobby .channel-lobby{color:#f2f0f4}.at-lobby .lobby-profile b,.at-lobby .lobby-account b{color:#fff}.at-lobby .lobby-profile small,.at-lobby .lobby-account span,.at-lobby .channel-card>span,.at-lobby .channel-card>small,.at-lobby .channel-tabs>span,.at-lobby .channel-policy-note{color:#bcbcc4}.at-lobby .channel-lobby .channel-card{background:linear-gradient(155deg,#202027,#111116);border-color:#50505b}.at-lobby .channel-card>strong{background:#292730;color:#fff}.at-lobby .friend-channel>strong,.at-lobby .quick-channel>strong{background:none;color:#fff}.at-lobby .channel-lobby .friend-channel,.at-lobby .channel-lobby .quick-channel{border-color:#a64de2}.at-lobby .channel-lobby .lobby-beach{background:radial-gradient(ellipse at 68% 76%,#202027,#111116 43%,#09090b 85%)}.at-lobby .channel-lobby .lobby-sand{background:#121217}.at-lobby .channel-lobby .lobby-welcome{color:#dedee4}.at-lobby .channel-lobby .lobby-dock button span{color:#4e2805}.at-lobby dialog{background:linear-gradient(#202027,#101015);color:#f3f3f6}.at-lobby dialog p,.at-lobby .friend-label,.at-lobby .friend-row{color:#dfdfe5}.at-lobby .stake-option{background:linear-gradient(#27272f,#15151b);color:#dfdfe5}.at-lobby .stake-option strong{background:#33303a;color:#fff}
.table-menu{display:none}
body:not(.at-lobby) .topbar{left:6%;top:24%;display:flex;flex-direction:column;align-items:flex-start;gap:.6vw}
body:not(.at-lobby) .topbar .table-menu{display:block;width:2.5cqw;min-width:20px;height:4.2cqw;min-height:29px;padding:0;border:0;border-radius:8px;background:#355a0dbb;color:#f4f580;font:900 clamp(20px,3vw,36px)/1 Arial}
body:not(.at-lobby) .topbar nav,body:not(.at-lobby) .topbar .room-name{display:none}
body:not(.at-lobby) .topbar.menu-open nav{display:flex;background:#3a591cdd;padding:4px;border-radius:6px}
.game .point-stake{position:absolute;top:15%;left:6%;z-index:6;padding:.25cqw .8cqw;border-radius:20px;background:#43680e;color:#e8ef9b;font-size:1.5cqw;line-height:1.2;white-space:nowrap}
.game .point-stake:before{content:'⚙';color:#c6de34;margin-right:.4cqw}
.game .players .dealer-mark{position:absolute;left:-.4cqw;top:0;transform:translateX(-100%);padding:.15cqw .35cqw;border-radius:4px;background:linear-gradient(#ef301a,#b21a09);border:1px solid #7c240a;color:#fff2c9;font-size:2cqw;line-height:1.2;text-shadow:0 1px #731d0b}
.game .players .player-flags{position:absolute;left:auto;right:calc(100% + .7cqw);bottom:-2.5cqh;width:7.2cqw;display:flex;align-items:center;justify-content:flex-end;gap:.35cqw;white-space:nowrap;font-size:.9cqw;line-height:1;color:#87a62d;pointer-events:none}
.game .players .player-flags span{opacity:.7}
.game .players .player-flags span.on{color:#ffd53b;opacity:1;text-shadow:0 1px #536615}
.game .players .opponent .player-flags{bottom:calc(6cqh + 1.8cqh)}
.game .players .player.me .player-flags{bottom:6%;font-size:.9cqw}
.game .hidden-hand{right:0;top:0;width:7cqw;height:5cqh;display:grid;grid-template-columns:repeat(5,1.25cqw);grid-template-rows:repeat(2,2.3cqh);gap:.12cqw;justify-content:start;background:#32580b77;padding:.15cqw;border-radius:3px}
.game .mini-back{width:1.25cqw;height:2.3cqh;margin:0;box-shadow:none}
.game .bottom-actions #auto{font-size:1.4cqw}
.game .players .player.me .avatar img{width:280%;left:-61%;top:-10%}
/* Keep round actions in the collapsible menu and restore the reference deck back. */
.game .deck{background:repeating-linear-gradient(45deg,#d91416 0 2px,#c60b12 2px 4px);border:1px solid #a60b12;box-shadow:1px 2px #981019,2px 3px #ea3530}
body:not(.at-lobby) .topbar #again{font-size:clamp(10px,1.1vw,16px);padding:3px 8px;border:1px solid #91aa43;border-radius:5px;color:#f3f7d8;background:#54761e}
.game .players .player-flags,.game .players .player.me .player-flags{width:9cqw;font-size:1.05cqw;color:#d3df96;text-shadow:0 1px #46600c;gap:.35cqw}
.game .players .player-flags span{opacity:1}
.game .players .player-flags span.on{color:#fff04b;text-shadow:0 1px #536615}
.game .players .player.me .avatar img{width:350%;left:-71%;top:-23%}
/* Center on the active play field, excluding the HUD and hand strip. */
.game>.deck-area{left:41.5%;top:37%}
/* One shared inset for the board edges and one gap for HUD panels. */
.game{--edge:1.4cqw;--hud-gap:.55cqw}
.game .players{top:var(--edge);right:var(--edge);height:calc(74% - var(--edge));grid-template-rows:25% 41% 1fr;gap:var(--hud-gap)}
.game .players .info-rail{gap:var(--hud-gap)}
.game .players>.player,.game .players>.info-rail,.game .players .mission,.game .players .rail-tools{width:100%;margin-left:0;margin-right:0}
.game .rail-tools{gap:var(--hud-gap)}
.game .opponent-zone{left:var(--edge);right:calc(19.7% + var(--hud-gap));top:var(--edge)}
.game .my-zone{left:var(--edge);right:calc(8.2cqw + 2*var(--edge));bottom:var(--edge)}
.game .bottom-actions{right:var(--edge);bottom:var(--edge);height:22%;width:6.8cqw}
.game .hand{--hand-card-width:6.7cqw;gap:.55cqw}
.game .point-stake{left:var(--edge)}
body:not(.at-lobby) .topbar{left:1.4%}
.game .hand{--hand-card-width:8.4cqw}
.game .bottom-actions{height:calc(8.4cqw * 1.51)}
.game .players{height:calc(67% - var(--edge))}
.game .my-zone>.taken-row{bottom:calc(8.4cqw * 1.51 + 2cqh);height:12cqh}
/* Profile contents share fixed rows; portraits no longer push the text or balance. */
.game .players .player.opponent{display:grid;grid-template-columns:minmax(0,1fr) 4.6cqw;grid-template-rows:1.5cqw 1.9cqw 1.8cqw;column-gap:.4cqw;align-content:center;align-items:center;padding:.55cqw .65cqw;min-height:6.3cqw}
.game .players .opponent .player-top{grid-column:1;grid-row:1;margin:0;height:auto}
.game .players .opponent .level{font-size:1cqw;line-height:1;padding:.15cqw .4cqw}
.game .players .opponent .avatar{position:relative;grid-column:2;grid-row:1/4;inset:auto;width:4.6cqw;height:4.6cqw;aspect-ratio:1;align-self:start;margin:0}
.game .players .opponent h2{grid-column:1;grid-row:2;margin:0;font-size:1.5cqw;min-width:0;max-width:100%;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.game .players .opponent .player-money{grid-column:1/-1;grid-row:3;margin:0;width:100%;font-size:1.55cqw;line-height:1.1;padding:.15cqw .4cqw;align-self:end}
.game .players .opponent .avatar img{width:300%;left:-163%;top:-16%}
.game .players{grid-template-rows:minmax(6.3cqw,25%) 41% 1fr}
/* A fixed hand rail preserves card size and shows each vacated slot. */
.game .hand-tray{width:100%;max-width:100%;padding:0;background:none;align-self:stretch}
.game .hand{width:100%;height:calc(8.4cqw * 1.51);min-height:0;align-items:stretch;background:repeating-linear-gradient(90deg,#34581855 0 8.4cqw,transparent 8.4cqw 8.95cqw);border-radius:5px}
.game .hand .card{align-self:stretch;border:2px solid #ff2422;border-bottom:3px solid #c20d0d;border-radius:4px;box-shadow:0 0 0 1px #527025}
.game .hand .card.matchable:after{content:'';width:3.25cqw;height:3.2cqw;left:50%;top:-1.2cqw;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#62d8fa 0%,#008fce 27%,#006e99 72%,#034d69 100%);filter:drop-shadow(0 1px 1px #073b47);border:2px solid #c4eff9;border-radius:5px;-webkit-text-stroke:0;text-shadow:none;z-index:9}
.game .hand-actions{top:-5.2cqh}
.game .pile .card:nth-of-type(n){display:block;overflow:visible}
.game .pile .card .hwatu-face,.game .pile .card .bonus-face{overflow:hidden}
.game .taken-count{position:absolute;right:-.15cqw;bottom:-.1cqw;z-index:10;min-width:1.35cqw;padding:.08cqw .2cqw;border:1px solid #bcc4a4;border-radius:3px;background:#fff;color:#354123;font:800 1.15cqw/1.1 Arial;text-align:center;box-shadow:0 1px #35531455}
/* Reference marker: 48 × 46 units, rounded rim and a beveled inset. */
.game .hand .card.matchable:after{width:3.65cqw;height:3.65cqw;left:50%;top:-1cqw;transform:translateX(-50%);clip-path:none;border:0;border-radius:0;background:none;filter:drop-shadow(0 .12cqw .10cqw #092e3988);background-size:100% 100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cdefs%3E%3ClinearGradient id='r' x2='0' y2='1'%3E%3Cstop stop-color='%23e9fcff'/%3E%3Cstop offset='.5' stop-color='%23a0c8d6'/%3E%3Cstop offset='1' stop-color='%23416b7a'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x2='0' y2='1'%3E%3Cstop stop-color='%2336cbf4'/%3E%3Cstop offset='.2' stop-color='%23009cd1'/%3E%3Cstop offset='1' stop-color='%23003e5c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 2H43Q48 2 45 8L28 40Q24 47 20 40L3 8Q0 2 5 2Z' fill='url(%23r)' stroke='%233b6674'/%3E%3Cpath d='M6 5H42Q44 5 42 9L26 38Q24 41 22 38L6 9Q4 5 6 5Z' fill='url(%23f)'/%3E%3Cpath d='M7 5H41' stroke='%2397eaff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}