:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e9f0e9;background:#064b5c;font-synthesis:none;--blue:#075d70;--ink:#123f48;--cream:#f5f0e2;--muted:#a0bfc0;--gold:#d5bd88;--line:rgba(218,231,216,.18);--red:#b9363e;--tile-w:clamp(25px,3.35vw,47px);--tile-h:calc(var(--tile-w)*1.37)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button,input,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #edcf87;outline-offset:3px}button{touch-action:manipulation}a{color:inherit}button svg{width:18px;height:18px;vertical-align:middle}button{color:inherit}h1,h2,h3,p{margin-top:0}.serif,h1,h2,.wordmark{font-family:Georgia,"Times New Roman",serif}.eyebrow{font-size:10px;letter-spacing:2.8px;font-weight:650;color:var(--gold)}.hint{color:#698185;font-size:12px;line-height:1.7}.wordmark{font-weight:bold;font-size:37px;letter-spacing:2px;line-height:1;display:inline-flex;align-items:center;gap:9px}.wordmark span{font-size:18px;color:var(--gold)}.brand-link{background:none;border:0;padding:0}.boot{height:100dvh;display:grid;align-content:center;justify-items:center;gap:24px}.boot p{font-size:13px;color:var(--muted)}.icon-button{width:34px;height:34px;display:inline-grid;place-items:center;background:#ffffff08;border:1px solid var(--line);border-radius:50%;color:#dce6dd}.text-button{border:0;background:none;font-size:12px;color:#c6d8d4}.primary,.secondary{display:flex;justify-content:center;align-items:center;gap:12px;border-radius:7px;padding:15px 20px;font-weight:600;font-size:13px;transition:background .15s,transform .15s}.primary{background:#174d54;color:#fff9ea;border:1px solid #174d54}.primary:hover:not(:disabled){background:#0c3e47;transform:translateY(-1px)}.secondary{border:1px solid #cbd1c5;color:#234e53;background:transparent}.secondary:hover:not(:disabled){background:#e7e9dd}.arrow{margin-left:auto;font-size:20px;font-weight:400}.home{min-height:100dvh;position:relative;background:radial-gradient(ellipse at 20% 50%,#13798a60,transparent 65%),url('/pattern.svg'),#075569;background-size:auto,160px 160px,auto;overflow:hidden}.home:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#003a4e30,transparent 50%,#003a4e40)}.home-header,.home-main,.home-footer{position:relative;z-index:1}.home-header{max-width:1360px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between}.home-header .strap{padding-left:26px;margin-left:27px;border-left:1px solid var(--line);font-size:10px;letter-spacing:2px;color:#c3d6d3}.home-brand{display:flex;align-items:center}.header-right{display:flex;gap:25px;align-items:center}.quiet-badge{font-size:10px;letter-spacing:1.5px;color:#b7d0cb}.quiet-badge:before{content:"";display:inline-block;background:#90bfb0;width:5px;height:5px;border-radius:50%;margin-right:8px}.home-main{max-width:1200px;margin:20px auto 0;padding:0 34px;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:70px;min-height:calc(100dvh - 190px)}.hero-copy{padding:24px 0}.hero-copy h1{font-size:clamp(44px,5.3vw,75px);font-weight:400;line-height:1.06;letter-spacing:-2.7px;color:#f7f1df;margin:22px 0}.hero-copy h1 em{color:#d5bd88;font-weight:400}.hero-copy>p{max-width:370px;color:#bdd3cf;font-size:14px;line-height:1.85;margin:23px 0}.hero-rule{width:43px;height:1px;background:#d5bd88;margin:25px 0}.mini-rack{width:350px;max-width:100%;height:94px;display:flex;align-items:end;justify-content:center;gap:4px;padding:12px 18px 19px;margin-top:30px;border-radius:7px;border:1px solid #b3815060;background:repeating-linear-gradient(2deg,#0000 0 4px,#190c0618 5px 6px),linear-gradient(#754c32,#50301f);box-shadow:0 18px 28px #002c3c66,inset 0 -10px 0 #392115,inset 0 -12px 0 #a4774a}.mini-rack .tile{--tile-w:38px;--tile-h:53px;transform:rotate(-2deg)}.mini-rack .tile:nth-child(2n){transform:rotate(2deg)}.hero-meta{display:flex;gap:22px;margin-top:28px;font-size:10px;letter-spacing:1px;color:#abc8c1}.hero-meta span+span:before{content:"✦";font-size:8px;color:#bba46b;margin-right:22px}.entry-card{background:#f5f0e3;color:#20444b;border:1px solid #e6ddc6;border-radius:14px;padding:34px;box-shadow:0 30px 80px #002d3c5c;position:relative}.entry-card:before{position:absolute;content:"✦";color:#bd9f6b;top:-14px;left:calc(50% - 14px);background:#f5f0e3;border:1px solid #e6ddc6;border-radius:50%;height:28px;width:28px;text-align:center;line-height:26px}.entry-card .eyebrow{color:#8b7b51;font-size:9px}.entry-card h2{font-weight:400;font-size:30px;margin:12px 0 8px;letter-spacing:-.8px}.entry-card .intro{font-size:12px;line-height:1.65;color:#71827f;margin-bottom:24px}.field-label{font-size:10px;letter-spacing:1.2px;font-weight:700;display:block;margin:19px 0 9px}.input{width:100%;padding:13px 14px;border:1px solid #d2d3c6;border-radius:6px;background:#fffdf6;color:#1e4249;outline:none;font-size:13px}.input:focus{border-color:#527e7c;box-shadow:0 0 0 3px #07576a12}.input::placeholder{color:#9aa39b}.entry-card .primary,.entry-card .secondary{width:100%;margin-top:12px;min-height:51px}.entry-card .primary svg,.entry-card .secondary svg{flex-shrink:0}.button-copy{text-align:left;flex:1}.button-copy b{display:block;font-weight:600;font-size:13px}.button-copy small{display:block;font-size:10px;opacity:.65;margin-top:5px;font-weight:400}.entry-divider{display:flex;align-items:center;gap:12px;font-size:10px;color:#87928a;margin:20px 0 0}.entry-divider:before,.entry-divider:after{content:"";height:1px;background:#d9ddcf;flex:1}.entry-foot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#89958b;margin:22px 0 0}.join-row{display:flex;gap:8px;margin-top:12px}.join-row .input{text-transform:uppercase;letter-spacing:3px;min-width:0}.join-row button{margin-top:0!important;width:auto!important}.back-inline{border:0;background:none;color:#627f7e;font-size:11px;padding:0;margin-top:18px}.home-footer{max-width:1260px;margin:25px auto 0;padding:0 5% 22px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d6e6db1a;padding-top:18px;color:#a9c5bf;font-size:10px;letter-spacing:.3px}.home-footer .small-mark{color:#d0b37b;margin-right:7px}
.entry-foot svg{width:13px;height:13px;flex-shrink:0}
/* Tile faces are rendered from actual game values. */
.tile{width:var(--tile-w);height:var(--tile-h);flex:0 0 var(--tile-w);border:1px solid #ddd4bd;border-bottom:4px solid #c8b99b;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(110deg,#fffdf4,#f0eadb 85%);box-shadow:1px 2px 3px #0003,inset 1px 0 0 #fff;color:#25393f;font-family:Georgia,serif;font-size:calc(var(--tile-w)*.67);font-weight:bold;line-height:1;padding:0 0 5px;user-select:none;touch-action:none;vertical-align:middle;transition:box-shadow .15s}.tile[data-color=red]{color:#b9363e}.tile[data-color=blue]{color:#187b9d}.tile[data-color=yellow]{color:#b18b27}.tile[data-color=black]{color:#28373b}.tile.selected{box-shadow:0 0 0 2px #f1d38a,0 -4px 12px #e7c97870;transform:translateY(-5px);z-index:2}.tile.playable:after{position:absolute;content:"";width:24%;height:9%;border-radius:50%;background:#9db7a4;bottom:6%;box-shadow:0 1px 0 #fff,inset 0 1px 1px #0002}.tile .clover{width:67%;height:67%;fill:#2d8a5c}.tile.real-joker{background:linear-gradient(110deg,#fffdf4,#f0eadb)}.tile.back{background:repeating-linear-gradient(45deg,#b69565 0 2px,#c8aa7d 2px 5px);border-color:#ddc49d;color:#7c5d3c}.tile.back:after{content:"✦";font-size:60%}.tile-ghost{position:absolute!important;z-index:1000;pointer-events:none;opacity:.95;transform:none!important;animation:none!important;transition:none!important;margin:0!important;box-shadow:0 12px 24px #0006}.tile:disabled{opacity:1}.tile.static{cursor:default}.tile.provisional{outline:1px dashed #edc57c;outline-offset:2px}.tile.arrive{animation:place-tile .3s ease-out both}@keyframes place-tile{from{transform:translateY(35px);opacity:.1}to{transform:translateY(0);opacity:1}}
/* Lobby */
.lobby-main{max-width:850px;margin:35px auto;padding:0 28px}.lobby-heading{text-align:center}.lobby-heading h1{font-size:40px;font-weight:400;margin:14px 0}.lobby-heading p{font-size:13px;color:#bdd3cf}.invite-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;background:#043e4d80;border:1px solid var(--line);padding:18px 24px;border-radius:10px;margin:30px 0}.invite-bar small{font-size:9px;letter-spacing:2px;color:#aac6c1;display:block;margin-bottom:7px}.room-code{font-size:25px;letter-spacing:6px;font-weight:600;color:#f0e3bf}.invite-buttons{display:flex;gap:8px}.invite-buttons button{background:#f5efdf;border:0;border-radius:5px;color:#244950;padding:11px 14px;font-size:11px}.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.seat-card{min-height:175px;padding:22px 10px;text-align:center;border:1px solid var(--line);border-radius:10px;background:#023d4c70}.avatar{border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:#d7c79d;color:#244d52;font-family:Georgia,serif;font-size:20px;border:3px solid #b7cab225}.seat-card .avatar{margin:auto auto 12px;width:48px;height:48px}.seat-card h3{font-size:13px;font-weight:500;margin:0 0 6px}.seat-card p{font-size:10px;color:#a6c4bc}.seat-card.empty{border-style:dashed;background:#033d4a30;display:grid;place-content:center;gap:12px}.seat-card button{font-size:10px;border:1px solid #d1dcce55;border-radius:4px;background:none;padding:7px 10px}.lobby-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:25px}.lobby-bottom p{font-size:11px;color:#adc9c0;margin:0}.lobby-bottom .primary{background:#d2bd8b;border-color:#d2bd8b;color:#183f47;min-width:180px}.room-note{font-size:11px;color:#9dbdb6;text-align:center;margin:22px 0}
/* Game table */
.game-shell{height:100dvh;min-height:360px;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 35%,#177c8c55,transparent 65%),url('/pattern.svg'),#07596b;background-size:auto,150px 150px,auto}.game-header{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#033c4c90;border-bottom:1px solid #d2dfcc18}.game-header .wordmark{font-size:29px}.game-header .wordmark span{font-size:13px}.game-title{display:flex;align-items:center;gap:21px}.game-title .session-code{font-size:9px;letter-spacing:2px;color:#a3c2bb;border-left:1px solid var(--line);padding-left:20px}.game-tools{display:flex;align-items:center;gap:11px}.game-tools .text-button{font-size:10px}.connection{font-size:9px;color:#b4cec0;display:flex;align-items:center;gap:6px}.connection:before{content:"";height:5px;width:5px;background:#a8cda6;border-radius:50%}.connection.offline{color:#e8bf8b}.connection.offline:before{background:#e4ad70}.game-hud{height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 30px;flex-shrink:0}.task-info{display:flex;align-items:center;gap:13px}.task-number{width:31px;height:31px;border:1px solid #c9c29d70;border-radius:6px;display:grid;place-items:center;font-size:13px;color:#e0cda4}.task-info small{display:block;font-size:8px;letter-spacing:1.8px;color:#9fbeb7;margin-bottom:3px}.task-info b{font-weight:500;font-size:13px;color:#f3ecd8}.task-progress{display:flex;gap:5px;align-items:center}.task-progress i{width:16px;height:3px;border-radius:2px;background:#b6d0c02a}.task-progress i.done{background:#bca66d}.task-progress i.current{background:#f0dca5;width:26px}.turn-status{display:flex;align-items:center;gap:10px;font-size:11px;color:#d5e2d5}.turn-status .time-value{font-family:Georgia,serif;font-size:21px;color:#eed7a6;width:28px;text-align:right}.table-area{position:relative;flex:1;min-height:120px;margin:0 18px;display:grid;grid-template-columns:140px minmax(0,1fr) 140px;grid-template-rows:66px minmax(0,1fr) 52px;gap:0 12px}.player{display:flex;align-items:center;gap:9px;position:relative}.player .name{font-size:11px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player .detail{font-size:9px;color:#a8c7bd;margin-top:5px;display:flex;gap:7px;align-items:center}.player .badge{font-size:7px;border:1px solid #b2cbb548;border-radius:3px;padding:1px 4px;color:#c9d6bc;letter-spacing:.6px}.player .avatar{width:35px;height:35px;font-size:16px;flex-shrink:0;position:relative}.player.active .avatar{box-shadow:0 0 0 2px #ebcf93,0 0 0 5px #e7cb8c1c}.player.active .name{color:#f4dca3}.player .opened-dot{width:4px;height:4px;background:#b2d6a3;border-radius:50%}.player-top{grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:6px}.player-left{grid-column:1;grid-row:2;align-self:center;justify-self:center;flex-direction:column;text-align:center}.player-right{grid-column:3;grid-row:2;align-self:center;justify-self:center;flex-direction:column;text-align:center}.player-left .detail,.player-right .detail{justify-content:center}.player-self{grid-column:2;grid-row:3;align-self:end;justify-self:center;padding:5px 18px 9px;border-radius:8px 8px 0 0;background:#043d4d6b}.player-self .avatar{width:29px;height:29px;font-size:14px}.opponent-backs{display:flex;gap:2px;margin-top:8px;justify-content:center}.opponent-backs i{display:block;width:7px;height:17px;border:1px solid #b6bda74d;border-radius:2px;background:linear-gradient(45deg,#788b7960,#c3c4a35c)}.player-top .opponent-backs{position:absolute;top:33px;left:44px}.open-board{grid-column:2;grid-row:2;min-width:0;min-height:0;background:#042e3e91;border:1px solid #96b5aa40;border-radius:8px;box-shadow:inset 0 0 60px #00253455,0 1px 0 #a9bda316;position:relative;display:flex;flex-direction:column;overflow:hidden}.board-heading{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #a3bdb119;flex-shrink:0}.board-heading span{font-size:8px;letter-spacing:1.7px;color:#8aaea9}.board-pages{display:flex;align-items:center;gap:9px}.board-pages button{border:0;background:none;font-size:13px;color:#a6c5b7;line-height:1;padding:2px 5px}.board-pages small{font-size:8px;color:#a2bcb4}.board-grid{flex:1;min-height:0;position:relative;background-image:linear-gradient(#b6d1bd08 1px,transparent 1px),linear-gradient(90deg,#b6d1bd08 1px,transparent 1px);background-size:24px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));padding:8px 10px;gap:5px 14px;align-items:center}.board-watermark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#94b9ae16}.board-watermark b{font-family:Georgia,serif;font-size:65px;letter-spacing:10px}.board-watermark span{font-size:8px;letter-spacing:3px;margin-top:10px;color:#a8c1af50}.open-group{position:relative;min-width:0;display:flex;flex-direction:column;gap:3px;z-index:1}.group-label{font-size:7px;letter-spacing:.4px;color:#9fbbaf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-label .temporary{color:#dbc88a;margin-left:5px}.group-tiles{display:flex;align-items:center;gap:1px;position:relative;width:max-content;max-width:100%;border-radius:3px;outline:1px solid transparent;outline-offset:2px}.group-tiles .tile{--tile-w:clamp(13px,1.63vw,25px);--tile-h:calc(var(--tile-w)*1.32);font-size:calc(var(--tile-w)*.75);border-bottom-width:2px;border-radius:2px;padding-bottom:2px}.open-group.targetable .group-tiles{outline:1px dashed #e2ce9290;background:#d1b77e12}.group-end{width:12px;align-self:stretch;border:1px dashed #b7c7a960;border-radius:2px;color:#d4ce9b;background:transparent;font-size:9px;padding:0;display:grid;place-items:center}.discard-zone{position:absolute;display:flex;align-items:center;gap:7px;z-index:2;--tile-w:31px;--tile-h:42px}.discard-zone .discard-slot{width:39px;height:49px;border:1px dashed #b4c9b24f;border-radius:5px;display:grid;place-items:center;background:#003f5030;cursor:pointer}.discard-zone .tile{--tile-w:30px;--tile-h:41px}.discard-zone small{font-size:7px;letter-spacing:.8px;color:#a7c2b3;white-space:nowrap;pointer-events:none}.discard-zone.self .discard-slot{border-color:#d8c58a80;background:#e2cb8710}.discard-zone.available .discard-slot{box-shadow:0 0 0 2px #e4ce8655}.discard-top{left:calc(50% + 140px);top:3px}.discard-left{left:13px;bottom:13px;flex-direction:column}.discard-right{right:12px;top:3px;flex-direction:column}.discard-self{right:162px;bottom:0}.draw-area{position:absolute;right:25px;bottom:10px;display:flex;align-items:center;gap:15px}.draw-item{display:flex;flex-direction:column;align-items:center;gap:5px}.draw-item>span{font-size:7px;letter-spacing:1px;color:#b0c5b5}.draw-item .tile{--tile-w:31px;--tile-h:42px}.draw-stack{position:relative;border:0;background:none;padding:0;color:inherit}.draw-stack .tile{box-shadow:2px 2px 0 #b1a17c,4px 4px 0 #758c7b,5px 6px 5px #001c3180}.draw-stack.ready .tile{outline:1px solid #ead598;outline-offset:4px}.draw-stack .deck-count{position:absolute;bottom:-7px;right:-12px;border-radius:10px;background:#d5c296;color:#183f47;min-width:23px;height:17px;font-size:9px;font-weight:bold;display:grid;place-items:center;border:1px solid #eef0d2}.rack-zone{flex-shrink:0;max-width:1300px;width:100%;align-self:center;padding:0 24px 15px;display:grid;grid-template-columns:minmax(0,1fr) 145px;grid-template-rows:24px auto;gap:0 15px}.rack-meta{grid-column:1;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:8px;color:#b8c8b6;letter-spacing:.6px}.rack-meta label{display:flex;align-items:center;gap:5px;font-size:9px;cursor:pointer}.rack-meta input{width:11px;height:11px;accent-color:#c6ae74;margin:0}.rack-meta .count{color:#e6d2a5;margin-left:9px}.rack{grid-column:1;grid-row:2;border-radius:7px;padding:9px 11px 4px;position:relative;background:repeating-linear-gradient(1deg,#16090000 0 4px,#1a090c18 5px 6px),linear-gradient(90deg,#53301e,#795439 30%,#65432d 75%,#4a2a1b);border:1px solid #a47b536b;box-shadow:0 12px 25px #002e3b70,inset 0 1px 0 #b9946a,inset 0 -4px 0 #3b2218}.rack-row{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;align-items:end;padding:0 0 9px;position:relative;min-height:calc(var(--tile-h) + 11px)}.rack-row:after{content:"";position:absolute;height:6px;bottom:3px;left:-8px;right:-8px;background:linear-gradient(#9f7953,#412519);border-top:1px solid #b48b5b80;box-shadow:0 3px 4px #1c0a0644;pointer-events:none}.rack-cell{height:var(--tile-h);display:flex;justify-content:center;align-items:end;min-width:0;position:relative;touch-action:none;border-radius:3px}.rack-cell.empty:after{content:"";position:absolute;width:70%;height:1px;bottom:5px;background:#c5a97a1a}.rack-cell .tile{max-width:100%;flex-shrink:1}.rack-cell.drop-target{background:#e7c98733;outline:1px dashed #dbc17f}.rack-controls{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:7px;justify-content:center}.game-button{width:100%;border:1px solid #d2c39170;background:#f0e9d4;color:#244c50;border-radius:5px;font-size:11px;padding:11px 9px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}@media(hover:hover) and (pointer:fine){.game-button:hover:not(:disabled){background:#fff8e5}}.game-button.process{background:#123d4770;color:#e4e6ce;border-color:#acc0a94d}.game-button.undo{background:transparent;color:#bcd0bc;border-color:transparent;font-size:9px;font-weight:400;padding:6px 2px}.game-button.undo svg{width:13px;height:13px}.game-button.claim{background:#d5bd86;color:#244950;border-color:#d5bd86}.game-bottom{height:24px;flex-shrink:0;padding:0 28px 8px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#95b6aa;gap:20px}.game-bottom .event-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.game-bottom .muted-mark{color:#9aaf9770;white-space:nowrap;font-size:8px;letter-spacing:1px}.game-bottom .event-dot{display:inline-block;width:4px;height:4px;background:#c2b37d;border-radius:50%;margin-right:7px}.rules-tip{font-size:8px;color:#a2bcb0;text-align:center;margin:0;padding:2px 0}
/* Results and feedback */
.overlay{position:fixed;inset:0;background:#002d3bc7;backdrop-filter:blur(5px);z-index:20;display:grid;place-items:center;padding:22px}.result-card{width:min(680px,100%);max-height:90dvh;overflow:auto;background:#f5f0e3;color:#23464d;border-radius:12px;padding:30px;box-shadow:0 30px 100px #001f3880}.result-top{display:flex;align-items:center;justify-content:space-between}.result-top .eyebrow{color:#a58b56}.result-card h2{font-size:32px;font-weight:400;margin:15px 0 8px}.result-card>p{color:#6e827b;font-size:12px;line-height:1.7}.result-card table{border-collapse:collapse;width:100%;font-size:11px;margin:22px 0}.result-card th{text-align:right;font-size:8px;letter-spacing:.4px;color:#7e8a7b;padding:10px 6px;border-bottom:1px solid #d7d6c6}.result-card td{text-align:right;padding:14px 6px;border-bottom:1px solid #dfdfd0}.result-card th:first-child,.result-card td:first-child{text-align:left}.result-card td:last-child{font-weight:700;color:#204d53}.result-card .winner-row{background:#e4e9d9}.result-card .negative{color:#42765a}.result-footer{font-size:11px;color:#6b8178;display:flex;align-items:center;justify-content:space-between;gap:10px}.result-footer .time-value{font-size:22px;color:#31574f;margin-right:5px}.result-card details{margin-top:20px;border-top:1px solid #d8dacb;padding-top:15px}.result-card summary{cursor:pointer;font-size:11px;color:#5b736b}.result-card .primary{margin-top:16px}.result-card .text-button{color:#456a62}.result-card .result-close{border:0;background:transparent;color:#4c6d65;font-size:19px}.score-list{max-height:220px;overflow:auto}dialog{border:1px solid #e0d7c2;border-radius:12px;padding:0;max-width:530px;width:calc(100% - 32px);background:#f5f0e3;color:#244950;box-shadow:0 25px 100px #001f3866}dialog::backdrop{background:#002c3bc0;backdrop-filter:blur(4px)}.dialog-body{padding:35px;position:relative}.dialog-body h2{font-weight:400;font-size:29px;margin:15px 0}.dialog-body p,.dialog-body li{font-size:12px;line-height:1.8;color:#58716d}.dialog-body ol{padding-left:18px}.dialog-body li{padding-left:4px;margin-bottom:9px}.close-dialog{position:absolute;right:13px;top:10px;border:0;background:none;color:#6f8378;font-size:24px}.help-score{display:flex;gap:10px;justify-content:space-between;border-top:1px solid #d7d8c9;padding-top:18px;font-size:9px;color:#758776}.help-score b{display:block;color:#315c55;font-size:17px;margin-top:6px}#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);z-index:100;max-width:90vw;padding:12px 20px;border:1px solid #d9c79466;border-radius:7px;background:#f7f0dc;color:#244a50;font-size:12px;box-shadow:0 8px 30px #002a3a50;pointer-events:none;opacity:0;transition:.2s;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}.rotate-notice{display:none}.reconnect-banner{background:#d0b47e;color:#294b4e;text-align:center;font-size:10px;padding:5px;flex-shrink:0}.empty-group{height:100%;min-height:0}.pending-note{color:#d7bd86;font-size:8px;letter-spacing:.5px}
@media(min-width:1600px){.table-area{grid-template-columns:180px minmax(0,1fr) 180px;max-width:1550px;align-self:center;width:calc(100% - 40px)}.discard-self{right:202px}.rack-zone{max-width:1400px}.open-group .tile{--tile-w:28px}}
@media(max-width:1050px){.home-main{gap:35px;padding:0 35px}.entry-card{padding:27px}.home-header .strap{display:none}.hero-copy h1{font-size:55px}.home-main{min-height:calc(100dvh - 180px)}.table-area{grid-template-columns:105px minmax(0,1fr) 105px;gap:0 8px;margin:0 10px}.discard-self{right:125px}.draw-area{right:8px;gap:12px}.discard-left{left:6px}.discard-right{right:6px}.task-progress{display:none}.rack-zone{padding:0 15px 8px;grid-template-columns:minmax(0,1fr) 119px;gap:0 9px}.rack-controls{gap:5px}.game-button{font-size:10px;padding:9px 5px}.game-button.undo{font-size:8px}.player .name{max-width:90px}.board-grid{padding:5px 7px;gap:3px 9px}}
@media(max-height:650px) and (orientation:landscape){:root{--tile-w:clamp(23px,3.4vw,38px);--tile-h:calc(var(--tile-w)*1.28)}.home-header{padding-top:17px;padding-bottom:17px}.home-main{min-height:calc(100dvh - 115px);margin-top:0}.hero-copy h1{font-size:43px;margin:14px 0}.hero-copy>p{font-size:12px;margin:12px 0}.mini-rack{height:75px;margin-top:18px;width:300px}.mini-rack .tile{--tile-w:32px;--tile-h:45px}.hero-rule{margin:15px 0}.hero-meta{margin-top:15px}.home-footer{margin-top:10px;padding-top:12px}.entry-card{padding:22px}.entry-card h2{font-size:25px}.entry-card .intro{margin-bottom:13px}.entry-card .primary,.entry-card .secondary{min-height:43px;padding:9px 12px;margin-top:9px}.field-label{margin-top:10px}.entry-foot{margin-top:12px}.entry-divider{margin-top:13px}.game-header{height:38px;padding:0 15px}.game-header .wordmark{font-size:23px}.game-header .session-code{font-size:8px}.game-hud{height:39px;padding:0 16px}.task-number{width:25px;height:25px;font-size:11px}.task-info small{font-size:7px}.task-info b{font-size:11px}.turn-status{font-size:10px}.turn-status .time-value{font-size:18px}.table-area{grid-template-rows:44px minmax(0,1fr) 32px;grid-template-columns:85px minmax(0,1fr) 85px;gap:0 6px}.player .avatar{width:26px;height:26px;font-size:13px;border-width:2px}.player-top{margin-top:0}.player{gap:6px}.player .name{font-size:9px;max-width:75px}.player .detail{font-size:7px;gap:4px;margin-top:3px}.player .badge{font-size:6px;padding:0 3px}.player-self{padding:1px 9px 4px}.player-self .avatar{width:24px;height:24px;font-size:12px}.opponent-backs{gap:1px;margin-top:5px}.opponent-backs i{width:5px;height:10px}.player-top .opponent-backs{top:25px;left:32px}.discard-zone .discard-slot{width:30px;height:38px}.discard-zone .tile{--tile-w:23px;--tile-h:31px}.discard-zone small{font-size:6px}.discard-top{left:calc(50% + 105px);top:0}.discard-right{top:0}.discard-left{bottom:0;gap:3px}.discard-self{right:100px;bottom:0}.draw-area{bottom:2px;right:3px;gap:9px}.draw-item{gap:3px}.draw-item .tile{--tile-w:24px;--tile-h:32px}.draw-item>span{font-size:6px;letter-spacing:.5px}.draw-stack .deck-count{font-size:7px;width:18px;min-width:18px;height:13px;right:-8px;bottom:-4px}.rack-zone{grid-template-columns:minmax(0,1fr) 103px;padding:0 12px 4px;grid-template-rows:17px auto;gap:0 8px}.rack{padding:5px 7px 2px}.rack-row{padding-bottom:7px;min-height:calc(var(--tile-h) + 7px);gap:1px}.rack-row:after{height:4px;left:-4px;right:-4px;bottom:2px}.rack-meta{font-size:7px;padding:0 4px}.rack-meta label{font-size:7px}.rack-meta input{width:9px;height:9px}.rack-controls{gap:4px}.game-button{font-size:9px;padding:7px 4px;gap:4px}.game-button svg{width:13px;height:13px}.game-button.undo{font-size:7px;padding:3px 0}.rules-tip{font-size:6px}.game-bottom{height:17px;padding:0 15px 4px;font-size:7px}.game-bottom .muted-mark{font-size:6px}.board-heading{height:19px;padding:0 7px}.board-heading span{font-size:6px;letter-spacing:1px}.board-pages small{font-size:6px}.board-pages button{font-size:10px;padding:1px 4px}.board-grid{padding:3px 5px;gap:1px 6px}.group-label{font-size:5px;line-height:1;letter-spacing:0}.open-group{gap:1px}.group-tiles .tile{--tile-w:clamp(11px,1.6vw,19px);--tile-h:calc(var(--tile-w)*1.16);font-size:calc(var(--tile-w)*.8);border-radius:2px;border-bottom-width:1px;padding-bottom:1px}.group-end{width:9px;font-size:7px}.board-watermark b{font-size:38px}.board-watermark span{font-size:6px}.lobby-main{margin-top:10px}.lobby-heading h1{font-size:28px;margin:6px 0}.lobby-heading p{font-size:11px;margin-bottom:5px}.invite-bar{margin:12px 0;padding:10px 16px}.seat-card{min-height:120px;padding:13px 8px}.seat-card .avatar{width:32px;height:32px;margin-bottom:7px;font-size:16px}.seat-card h3{font-size:11px}.seat-card p{margin-bottom:5px}.lobby-bottom{margin-top:12px}.room-note{margin:10px 0}.result-card{padding:20px}.result-card h2{font-size:25px;margin:8px 0}.result-card table{margin:12px 0}.result-card td{padding:9px 5px}}
@media(max-width:700px) and (orientation:portrait){.rotate-notice{position:fixed;inset:0;z-index:200;background:url('/pattern.svg') #07576a;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.rotate-notice h2{font-family:Georgia,serif;font-size:32px;font-weight:400;margin:30px 0 13px}.rotate-notice p{font-size:14px;line-height:1.8;color:#bed3c9}.rotate-icon{display:block;font-size:65px;transform:rotate(90deg);color:#ddc693}.small-brand{font-family:Georgia,serif;font-size:22px;letter-spacing:3px;color:#d9c38e;margin-top:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Turn ownership remains explicit even without recognizing avatar colors. */
.rack{align-self:end;display:grid;grid-template-rows:repeat(2,calc(var(--tile-h) + 11px));height:calc(2 * (var(--tile-h) + 11px) + 15px);align-content:start}
.rack-row{height:calc(var(--tile-h) + 11px);min-height:0;grid-template-rows:var(--tile-h);align-content:start}
.rack-cell .tile{transition:transform 180ms cubic-bezier(.2,.7,.2,1),box-shadow .15s}
.rack-cell .tile.drag-origin{opacity:.15}
.rack-cell.insert-before:before,.rack-cell.insert-after:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:#f6d894;z-index:4;box-shadow:0 0 6px #ebcc86}
.rack-cell.insert-before:before{left:-1px}.rack-cell.insert-after:before{right:-1px}
.turn-status{background:#063746;border:1px solid #d9c59088;border-radius:8px;padding:7px 12px;min-width:235px;box-shadow:0 3px 12px #002a3b35}
.turn-arrow{color:#edcc80;font-size:22px}
.turn-copy{display:flex;flex-direction:column;gap:3px;flex:1}
.turn-copy strong{font-size:12px;letter-spacing:.9px;color:#fff0c6}
.turn-copy small{font-size:9px;color:#c1d6cb}
.turn-status.your-turn{background:#ead7a4;border-color:#fff0c6;color:#164651}
.turn-status.your-turn .turn-arrow,.turn-status.your-turn strong,.turn-status.your-turn .time-value{color:#164651}
.turn-status.your-turn small{color:#42645e}
.player.active{background:#063746;outline:2px solid #e3c17d;outline-offset:5px;border-radius:7px}
.active-turn-tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#ead7a4;color:#174751;font-size:8px;line-height:15px;padding:0 7px;border-radius:3px;white-space:nowrap;font-weight:800;letter-spacing:.6px;z-index:3}
.player-self .active-turn-tag{left:100%;top:8px;transform:translateX(12px)}
/* Adjacent cells meet edge to edge; intentional empty cells are still available. */
.rack-zone{max-width:calc(16 * var(--tile-w) + 232px)}
.rack-row{column-gap:0}
.rack-cell .tile{width:100%;max-width:100%;flex-basis:100%}
/* Keep the draw pile opaque, labelled and distinct from discarded tiles. */
.draw-area{padding:8px 10px;background:#043747;border:1px solid #bca57299;border-radius:8px;box-shadow:0 4px 15px #002b3b55;right:10px;bottom:7px;gap:13px;z-index:3}
.draw-area.ready{background:#0a4653;border:2px solid #efd292;box-shadow:0 0 0 3px #e4c67e25,0 4px 15px #002b3b55}
.draw-item>span{font-size:8px;font-weight:700;color:#e4d8b4}
.draw-area .draw-item:first-child .tile{--tile-w:27px;--tile-h:37px}
.draw-area .draw-item:last-child .tile{--tile-w:39px;--tile-h:52px}
.draw-stack{display:flex;flex-direction:column;align-items:center;gap:6px}
.draw-stack:disabled{opacity:1}
.deck-visual{display:block;position:relative}
.draw-prompt{font-size:9px;letter-spacing:.8px;color:#f0dca4;white-space:nowrap}
.draw-stack .deck-count{right:-8px;bottom:-4px}
@media(max-width:1050px){.rack-zone{max-width:calc(16 * var(--tile-w) + 182px)}.draw-area{right:0;padding:7px;gap:8px}.draw-area .draw-item:first-child .tile{--tile-w:23px;--tile-h:32px}.draw-area .draw-item:last-child .tile{--tile-w:31px;--tile-h:43px}.draw-item>span{font-size:7px}.draw-prompt{font-size:7px}}
@media(max-height:650px) and (orientation:landscape){
  .rack{grid-template-rows:repeat(2,calc(var(--tile-h) + 7px));height:calc(2 * (var(--tile-h) + 7px) + 9px)}.rack-row{height:calc(var(--tile-h) + 7px);min-height:0}
  .turn-status{min-width:205px;padding:4px 8px;gap:7px;border-radius:5px}.turn-copy{gap:1px}.turn-copy strong{font-size:10px}.turn-copy small{font-size:8px}.turn-arrow{font-size:18px}.turn-status .time-value{font-size:20px}
  .active-turn-tag{top:-11px;font-size:6px;line-height:11px;padding:0 4px}.player.active{outline-offset:3px}.player-self .active-turn-tag{top:7px;transform:translateX(7px)}
  .rack-zone{--tile-w:clamp(24px,4.3vw,47px);--tile-h:calc(var(--tile-w)*1.28);max-width:calc(16 * var(--tile-w) + 151px)}.rack-row{column-gap:0}
  .draw-area{padding:4px;right:0;bottom:0;gap:7px;border-radius:5px}.draw-area.ready{border-width:1px}.draw-area .draw-item:first-child .tile{--tile-w:20px;--tile-h:27px}.draw-area .draw-item:last-child .tile{--tile-w:27px;--tile-h:36px}.draw-item>span{font-size:5px;letter-spacing:.3px}.draw-stack{gap:4px}.draw-prompt{font-size:6px;letter-spacing:.4px}
  .player-right{align-self:start;margin-top:7px;flex-direction:row;text-align:left;gap:4px}.player-right .avatar{width:21px;height:21px;font-size:11px}.player-right .name{font-size:8px;max-width:53px}.player-right .detail{font-size:6px;justify-content:start;gap:3px}.player-right .opponent-backs{display:none}
}

/* Open tiles use available board width instead of a tiny viewport-sized face. */
.open-board{container-type:inline-size}
.group-tiles .tile{--tile-w:min(34px,calc((100cqw - 110px)/26));--tile-h:calc(var(--tile-w)*1.34);font-size:calc(var(--tile-w)*.78)}
.group-label{font-size:9px;line-height:1.15}
.open-group{gap:4px}
@media(max-height:650px) and (orientation:landscape){
  .table-area{grid-template-rows:40px minmax(0,1fr) 28px}
  .group-tiles .tile{--tile-w:min(21px,calc((100cqw - 84px)/26));--tile-h:calc(var(--tile-w)*1.2);font-size:calc(var(--tile-w)*.82)}
  .group-label{font-size:7px;line-height:1}.open-group{gap:1px}
}

/* Equal corner anchors: bottom → right → top → left, each player's own right. */
.discard-zone{width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:0}
.discard-zone .discard-slot{width:39px;height:49px;flex-shrink:0}
.discard-zone small{width:100%;text-align:center;font-size:7px;line-height:9px;letter-spacing:.25px;overflow:hidden;text-overflow:ellipsis}
.discard-top{left:4px;right:auto;top:0;bottom:auto}
.discard-right{right:4px;left:auto;top:0;bottom:auto}
.discard-self{right:4px;left:auto;bottom:0;top:auto}
.discard-left{left:4px;right:auto;bottom:0;top:auto}
.draw-area{position:static;inset:auto;flex-shrink:0;align-self:center;display:flex;flex-direction:row;gap:12px;padding:3px 8px;box-shadow:0 2px 8px #002b3b35}
.draw-area .draw-item{flex-direction:row;align-items:center;gap:6px}
.draw-area .draw-item:first-child .tile{--tile-w:24px;--tile-h:33px}
.draw-area .draw-item:last-child .tile{--tile-w:30px;--tile-h:41px}
.draw-area .draw-item:last-child>span{display:none}
.draw-stack{flex-direction:row;gap:10px}
.draw-prompt{font-size:9px;letter-spacing:.6px;min-width:52px;text-align:center}
.draw-item>span{font-size:7px;letter-spacing:.4px}
.game-hud{gap:12px}
.turn-copy{min-width:0}.turn-copy strong{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:650px) and (orientation:landscape){
  .discard-zone{width:47px;height:39px;gap:2px}
  .discard-zone .discard-slot{width:28px;height:31px}
  .discard-zone .tile{--tile-w:22px;--tile-h:29px}
  .discard-zone small{font-size:5px;line-height:6px;letter-spacing:0}
  .discard-top,.discard-left{left:2px}.discard-right,.discard-self{right:2px}
  .draw-area{gap:7px;padding:2px 5px}
  .draw-area .draw-item{gap:4px}
  .draw-area .draw-item:first-child .tile{--tile-w:19px;--tile-h:26px}
  .draw-area .draw-item:last-child .tile{--tile-w:23px;--tile-h:31px}
  .draw-stack{gap:7px}.draw-prompt{font-size:7px;min-width:40px}.draw-item>span{font-size:6px;letter-spacing:0}
  .game-hud{gap:8px}.turn-copy strong{max-width:155px}
  .player-left,.player-right{align-self:center;margin-top:0;flex-direction:row;text-align:left;gap:4px}
  .player-left .avatar,.player-right .avatar{width:21px;height:21px;font-size:11px}
  .player-left .name,.player-right .name{font-size:8px;max-width:53px}
  .player-left .detail,.player-right .detail{font-size:6px;justify-content:start;gap:3px}
  .player-left .opponent-backs,.player-right .opponent-backs{display:none}
}

/* Compact actions and a dedicated draw station in the table's upper band. */
.rack-controls{gap:5px;align-items:center}
.rack-controls .game-button{max-width:120px;font-size:10px;padding:7px 6px;gap:5px;min-height:30px}
.rack-controls .game-button svg{width:14px;height:14px}
.rack-controls .game-button.undo{font-size:8px;padding:4px 2px;min-height:24px;white-space:normal}
.table-area>.draw-area{grid-column:2;grid-row:1;justify-self:start;align-self:start;margin-top:3px;gap:9px;padding:4px 8px;z-index:3}
.table-area>.draw-area .draw-item:first-child .tile{--tile-w:22px;--tile-h:30px}
.table-area>.draw-area .draw-item:last-child .tile{--tile-w:26px;--tile-h:35px}
@media(max-height:650px) and (orientation:landscape){
 .rack-controls{gap:3px}
 .rack-controls .game-button{max-width:96px;min-height:24px;font-size:8px;padding:4px 3px;gap:3px}
 .rack-controls .game-button svg{width:11px;height:11px}
 .rack-controls .game-button.undo{font-size:7px;min-height:20px;padding:2px}
 .table-area>.draw-area{margin-top:0;gap:6px;padding:2px 5px}
 .table-area>.draw-area .draw-item:first-child .tile{--tile-w:18px;--tile-h:25px}
 .table-area>.draw-area .draw-item:last-child .tile{--tile-w:21px;--tile-h:28px}
 .table-area>.draw-area .draw-stack{gap:6px}
 .table-area>.draw-area .draw-prompt{font-size:6px;min-width:35px}
 .table-area>.draw-area .draw-item>span{font-size:5px}
}

#leave-confirm{max-width:440px;width:calc(100% - 32px);border:1px solid #bca572;background:#063d4c;color:#f3ecd8;border-radius:12px}#leave-confirm::backdrop{background:#001e30b8}.leave-actions{display:flex;gap:12px;margin-top:24px}.leave-actions button{flex:1;padding:12px;font-size:12px}

.player{border-radius:7px}.turn-ring{display:none;position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;z-index:2}.player.active{outline:none}.player.active .turn-ring{display:block}.turn-ring rect{fill:none;stroke:#f4d18b;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}.game-button.sort{background:#123d4770;color:#e4e6ce;border-color:#acc0a94d}

@media(max-height:650px) and (orientation:landscape){.rack-controls{gap:2px}.rack-controls .game-button{min-height:20px;padding:3px;font-size:8px}.rack-controls .game-button.undo{min-height:16px;padding:1px;font-size:7px}.turn-ring{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}}

.turn-ring rect{transition:stroke-dasharray .2s linear}

/* Shared table: wide meld grid and a separate vertical pair strip. */
.open-board{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:10px;background:transparent;border:0;box-shadow:none;overflow:visible;container-type:normal}
.meld-board,.pair-board{min-width:0;min-height:0;display:flex;flex-direction:column;background:#042e3e91;border:1px solid #96b5aa40;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 40px #00253440}
.meld-board{container-type:inline-size}
.pair-board{border-color:#c9b17a65;background:#043442aa}
.pair-board .board-heading{justify-content:center;padding:0 4px}
.pair-board .board-heading span{color:#dcc48e;letter-spacing:1.5px}
.pair-grid{display:grid;flex:1;min-height:0;padding:7px 6px;gap:5px;background-image:linear-gradient(#b6d1bd0c 1px,transparent 1px),linear-gradient(90deg,#b6d1bd0c 1px,transparent 1px);background-size:22px 22px}
.pair-grid .open-group{align-items:center;justify-content:center;overflow:hidden}
.pair-grid .group-label{width:100%;text-align:center;font-size:8px}
.pair-grid .group-tiles .tile{--tile-w:28px;--tile-h:37px;font-size:22px}
.pair-board>.board-pages{justify-content:center;height:22px;flex-shrink:0;border-top:1px solid #b7c9ac20;gap:7px}
.empty-pair{border:1px dashed #abc4b21c;border-radius:3px;max-width:62px;width:100%;height:100%;max-height:42px;justify-self:center;align-self:center}
@media(max-height:650px) and (orientation:landscape){
 .open-board{grid-template-columns:minmax(0,1fr) 72px;gap:6px}
 .pair-grid{padding:2px 3px;gap:1px}
 .pair-grid .group-label{font-size:6px;line-height:6px}
 .pair-grid .group-tiles .tile{--tile-w:18px;--tile-h:22px;font-size:16px}
 .pair-grid .open-group{gap:1px}
 .pair-board>.board-pages{height:13px;gap:3px}
 .pair-board .board-heading{height:15px}
 .pair-board .board-pages button{font-size:10px;padding:0 3px}
 .pair-board .board-pages small{font-size:6px}
 .empty-pair{max-width:40px;max-height:24px}
}

/* Only the player card carries turn progress; the stroke drains continuously. */


/* Every open physical tile stays on this screen; no pages or scrolling. */
.open-board{grid-template-columns:minmax(0,1fr) minmax(0,var(--pair-share,16%))}
.board-grid,.pair-grid{display:block;position:relative;padding:0;overflow:hidden;min-height:0;flex:1}
.board-grid>.open-group,.pair-grid>.open-group{position:absolute;margin:0;padding:0 2px;display:flex;align-items:flex-start;justify-content:flex-start;gap:2px;overflow:hidden}
.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{--tile-w:var(--board-tile,20px);--tile-h:calc(var(--tile-w)*1.3);font-size:calc(var(--tile-w)*.8);flex-shrink:0}
.board-grid .group-label,.pair-grid .group-label{font-size:8px;line-height:8px;height:8px;text-align:left;max-width:100%}
.compact-groups .group-label{display:none}
.board-grid .group-end,.pair-grid .group-end{width:9px;min-width:9px;font-size:7px}
.group-tiles{flex-shrink:0}
.undo-controls{width:100%;max-width:120px;display:flex;gap:2px;align-items:center}
.undo-controls .game-button{width:50%;white-space:normal;font-size:7px;line-height:1.1}
@media(max-height:650px) and (orientation:landscape){.open-board{grid-template-columns:minmax(0,1fr) minmax(0,var(--pair-share,16%))}.undo-controls{max-width:96px}.undo-controls .game-button.undo{font-size:6px;padding:1px;min-height:18px}}

/* Reserve processing targets so selecting a rack tile cannot resize the board. */
.open-group:not(.targetable) .group-end{visibility:hidden;pointer-events:none}

/* A drag image replaces its source visually; it never adds a visible extra copy. */
.rack-cell .tile.drag-origin{visibility:hidden;opacity:0}

/* Opened table groups appear directly and never replay arrival/fade animations. */
.open-board .open-group,.open-board .group-tiles,.open-board .tile{animation:none!important;transition:none!important;transform:none!important}

/* Two equal banks of thirteen tile cells, with groups aligned down each bank. */
.board-grid{background-image:none}
.board-grid:before,.board-grid:after{content:"";position:absolute;top:3px;bottom:0;width:calc(var(--slot-pitch,16px)*13);pointer-events:none;background-image:linear-gradient(90deg,#bad3bf12 1px,transparent 1px),linear-gradient(#bad3bf12 1px,transparent 1px);background-size:var(--slot-pitch,16px) var(--row-pitch,24px)}
.board-grid:before{left:16px}.board-grid:after{left:calc(50% + 18px)}
.board-divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#a6c4b04d;pointer-events:none}
.board-grid .group-tiles{margin-left:10px;position:relative}
.board-grid .group-end{position:absolute;top:0;bottom:0;margin:0}
.board-grid .group-end[data-side="left"]{left:-10px}.board-grid .group-end[data-side="right"]{right:-10px}
.board-grid .group-label{padding-left:10px}
.board-grid>.open-group{gap:0}
.board-grid .group-tiles .tile{padding:0;border-width:1px;min-height:0;line-height:1}

/* Room around side-player names and a clear, evenly draining perimeter. */
.player-left,.player-right{padding:12px 14px;min-width:106px;max-width:100%;min-height:108px;justify-content:center;background:#06374670;border:1px solid #a6c4b02b;border-radius:10px}
.player-left.active,.player-right.active{background:#032d3d;border-color:#c5b7854d}
.player-left .name,.player-right .name{max-width:86px}
.player-left .active-turn-tag,.player-right .active-turn-tag{top:-22px}
.turn-ring rect{stroke:#ffe2a2;stroke-width:3;filter:drop-shadow(0 0 2px #f4d18b55)}
@media(max-height:650px) and (orientation:landscape){
 .player-left,.player-right{width:76px;min-width:0;min-height:64px;padding:7px 5px;flex-direction:column;text-align:center;gap:4px}
 .player-left .avatar,.player-right .avatar{width:24px;height:24px;font-size:12px}
 .player-left .name,.player-right .name{font-size:9px;max-width:64px}
 .player-left .detail,.player-right .detail{justify-content:center;font-size:7px;margin-top:3px}
 .player-left .active-turn-tag,.player-right .active-turn-tag{top:-17px}
 .turn-ring rect{stroke-width:2.5}
}

/* The three opponent cards share one compact size and layout. */
.player-top,.player-left,.player-right{width:108px;min-width:0;height:54px;min-height:54px;padding:8px;flex-direction:row;text-align:left;justify-content:center;gap:6px;background:#06374670;border:1px solid #a6c4b02b;border-radius:9px}
.player-top.active,.player-left.active,.player-right.active{background:#032d3d;border-color:#c5b7854d}
.player-top .avatar,.player-left .avatar,.player-right .avatar{width:28px;height:28px;font-size:13px}
.player-top .name,.player-left .name,.player-right .name{font-size:10px;max-width:60px}
.player-top .detail,.player-left .detail,.player-right .detail{font-size:8px;justify-content:flex-start;gap:4px;margin-top:4px}
.player-top .active-turn-tag,.player-left .active-turn-tag,.player-right .active-turn-tag{top:-20px}
@media(max-height:650px) and (orientation:landscape){
 .player-top,.player-left,.player-right{width:76px;height:36px;min-height:36px;padding:5px;gap:4px}
 .player-top .avatar,.player-left .avatar,.player-right .avatar{width:20px;height:20px;font-size:10px}
 .player-top .name,.player-left .name,.player-right .name{font-size:8px;max-width:43px}
 .player-top .detail,.player-left .detail,.player-right .detail{font-size:6px;margin-top:2px;gap:2px}
 .player-top .active-turn-tag,.player-left .active-turn-tag,.player-right .active-turn-tag{top:-16px}
}

/* Tile-sized grid lines cover both full panels at every window width. */
.open-board{grid-template-columns:minmax(0,1fr) 66px minmax(0,var(--pair-share,16%));gap:10px}
.board-grid:before,.board-grid:after{width:calc(50% - 6px);background-size:var(--slot-pitch,20px) var(--row-pitch,26px);background-image:linear-gradient(90deg,#b8d5c12e 1px,transparent 1px),linear-gradient(#b8d5c12e 1px,transparent 1px)}
.board-grid:before{left:0;background-position:14px 0}
.board-grid:after{left:calc(50% + 6px);background-position:10px 0}
.pair-grid{background-image:linear-gradient(90deg,#b8d5c12e 1px,transparent 1px),linear-gradient(#b8d5c12e 1px,transparent 1px);background-size:var(--slot-pitch,20px) var(--row-pitch,26px);background-position:4px 3px}
.board-grid>.open-group,.pair-grid>.open-group{padding:0;gap:0}
.board-grid .group-tiles,.pair-grid .group-tiles{gap:0}
.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{padding:0;min-height:0;border-width:1px;line-height:1}
.open-board>.draw-area{grid-column:2;grid-row:1;align-self:center;justify-self:stretch;margin:0;width:100%;padding:10px 4px;gap:16px;flex-direction:column}
.open-board>.draw-area .draw-item{flex-direction:column;gap:4px}
.open-board>.draw-area .draw-item>span{display:block;font-size:6px;letter-spacing:.3px}
.open-board>.draw-area .draw-item:first-child .tile{--tile-w:23px;--tile-h:31px}
.open-board>.draw-area .draw-item:last-child .tile{--tile-w:28px;--tile-h:37px}
.open-board>.draw-area .draw-stack{flex-direction:column}
.open-board>.draw-area .draw-prompt{display:none}
@media(max-height:650px) and (orientation:landscape){
 .open-board{grid-template-columns:minmax(0,1fr) 42px minmax(0,var(--pair-share,16%));gap:6px}
 .open-board>.draw-area{padding:3px 2px;gap:4px}
 .open-board>.draw-area .draw-item{gap:2px}
 .open-board>.draw-area .draw-item>span{font-size:4px;letter-spacing:0}
 .open-board>.draw-area .draw-item:first-child .tile{--tile-w:16px;--tile-h:21px}
 .open-board>.draw-area .draw-item:last-child .tile{--tile-w:19px;--tile-h:25px}
}

/* One measured grid layer: no overlapping gradients, fractional cells or pattern noise. */
.meld-board,.pair-board{background:#073847}
.board-grid,.pair-grid{background:none!important}
.board-grid:before,.board-grid:after,.board-divider,.board-watermark{display:none}
.board-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.board-lines path{fill:none;stroke:#b9d5c52e;stroke-width:1;shape-rendering:crispEdges;vector-effect:non-scaling-stroke}
.board-lines .bank-divider{stroke:#b9d5c56b}
.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{--tile-h:var(--board-tile-height,26px)}

/* Quiet branding underneath grid lines and physical tiles. */
.board-grid>.board-watermark,.pair-grid>.board-watermark{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none;user-select:none;z-index:0;overflow:hidden}
.board-grid>.board-watermark b,.pair-grid>.board-watermark b{font-family:Georgia,serif;font-size:clamp(36px,6vw,90px);font-weight:700;letter-spacing:.15em;padding-left:.15em;color:#c5ded40c;text-shadow:none}
.pair-grid>.board-watermark b{font-size:clamp(20px,3vw,48px);letter-spacing:.08em}
.board-lines{z-index:1}
.board-grid>.open-group,.pair-grid>.open-group{z-index:2}

/* A readable, scrollable player guide with examples and the complete task list. */
#help{max-width:720px;max-height:88dvh;overflow:auto;overscroll-behavior:contain}
.help-header{position:sticky;top:0;z-index:3;background:#f5f0e3;padding:24px 30px 18px;border-bottom:1px solid #d6d8c7}
.help-header .close-dialog{top:12px;right:14px;width:32px;height:32px;display:grid;place-items:center}
.help-header .eyebrow{font-size:9px;color:#8c7444}
.help-header h2{font-size:30px;font-weight:400;margin:9px 0 5px}
.help-header p{font-size:12px;color:#58716d;margin:0}
.help-content{padding:0 30px 26px;font-size:13px;line-height:1.8;color:#48635f}
.help-content section{padding:22px 0;border-bottom:1px solid #d6d8c7}
.help-content h3{font-size:19px;line-height:1.4;font-weight:600;color:#204b53;margin:0 0 12px}
.help-content h4{font-size:13px;font-weight:650;color:#31595d;margin:0 0 8px}
.help-content p{margin:10px 0}.help-content strong{color:#244950}
.help-content ul,.help-steps{padding-left:21px;margin:12px 0}.help-content li{padding-left:3px;margin:7px 0}
.help-example{margin:15px 0;padding:15px;background:#ecebdf;border:1px solid #d9dccb;border-radius:7px}
.help-example p{margin-bottom:0;font-size:12px}
.help-tiles{display:flex;gap:2px;align-items:center}
.guide-tile{width:31px;height:40px;display:inline-grid;place-items:center;border:1px solid #d7ceb7;border-bottom:3px solid #c4b794;border-radius:3px;background:#fffaf0;font-family:Georgia,serif;font-size:23px;font-weight:bold}
.guide-tile.blue{color:#147c9e}.guide-tile.red{color:#bb3044}.guide-tile.yellow{color:#ae8417}
.help-tasks{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.help-tasks li{display:flex;align-items:center;gap:9px;margin:0;padding:7px 0;border-bottom:1px solid #dedfce;font-size:12px;line-height:1.5}
.help-tasks li>span{flex-shrink:0;display:grid;place-items:center;width:23px;height:23px;background:#e2e6d5;border-radius:5px;color:#45645c;font-size:11px}.help-tasks b{font-weight:500}
.help-content .help-callout{margin:20px 0;padding:19px;border:1px solid #baa468;border-radius:8px;background:#eae7d5}
.help-content details{margin-top:14px;background:#eeece0;border-radius:6px;padding:11px 14px}
.help-content summary{cursor:pointer;font-weight:600;color:#31595d;line-height:1.6}.help-content details p{font-size:12px}
.help-content .help-score{margin:12px 0;border:0;padding:12px 0;gap:14px}
.help-ending{font-size:12px;padding-top:12px}
@media(max-height:650px) and (orientation:landscape){#help{max-width:680px;max-height:90dvh}.help-header{padding:14px 24px 11px}.help-header h2{font-size:24px;margin:5px 0}.help-content{padding:0 24px 20px}.help-content section{padding:17px 0}}
@media(max-width:520px){.help-tasks{grid-template-columns:1fr}.help-header{padding-left:20px}.help-content{padding-left:20px;padding-right:20px}}

.entry-tasks{margin:9px 0 12px;font-size:10px;color:#b8cfc4}.entry-tasks summary{cursor:pointer}.entry-tasks ol{margin:8px 0;padding-left:20px;line-height:1.7}.entry-card select.input{appearance:auto;min-height:38px;padding:8px 12px}.entry-card select option{background:#063f50;color:#f3eddb}

/* Group boundaries sit between cells and never consume rack capacity. */
.rack-separator{position:absolute;left:-12px;top:-5px;width:24px;height:24px;padding:0;border:0;background:transparent;z-index:6;cursor:pointer;touch-action:manipulation}
.rack-separator:after{content:"";position:absolute;left:11px;top:3px;width:2px;height:12px;background:#d8c18a66;pointer-events:none;border-radius:1px}
.rack-separator.marked:after{height:calc(var(--tile-h) + 3px);background:#f6d78d;box-shadow:0 0 0 1px #39281966}
.rack-separator:focus-visible{outline:2px solid #fff1b8;border-radius:3px}

/* The guide leads with task opening and the cost of claiming another discard. */
.help-content .help-task-feature{margin-top:20px;padding:19px;border:1px solid #b6c5b3;border-radius:8px;background:#e4eadd}
.help-feature-label{display:block;font-size:10px;letter-spacing:1px;font-weight:700;color:#607253;margin-bottom:9px}
.help-content .help-claim{border:2px solid #b39854;background:#f0e6c9}
.help-claim .help-feature-label{color:#80652c}
.help-claim-cost{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:16px 10px;margin:15px 0;border-radius:7px;background:#164c55;color:#fff5dd;text-align:center;line-height:1.5}
.help-claim-cost>span{font-size:12px}.help-claim-cost b{display:block;font-size:27px;color:#f2d58e;line-height:1.2}.help-claim-cost>span[aria-hidden]{font-size:22px;color:#f2d58e}

/* Slim steel caps frame the wooden rack without occupying tile cells. */
.rack::before,.rack::after{content:"";position:absolute;top:1px;bottom:1px;width:6px;z-index:5;pointer-events:none;border:1px solid #66787c;border-radius:2px;background:radial-gradient(circle at 50% 14%,#4d5e62 0 1px,#e4ecea 1.2px 1.7px,transparent 1.9px),radial-gradient(circle at 50% 86%,#4d5e62 0 1px,#e4ecea 1.2px 1.7px,transparent 1.9px),linear-gradient(90deg,#72858a,#edf3ef 33%,#b9c8c9 60%,#7b8e93);box-shadow:0 1px 2px #17282a66,inset 1px 0 #ffffff99}
.rack::before{left:0}.rack::after{right:0}
@media(max-height:650px) and (orientation:landscape){.rack::before,.rack::after{width:4px}}

/* A slightly reclined wooden face, with a solid front edge and cast shadow. */
.rack{
 transform:rotateX(7deg);transform-origin:center bottom;
 border-color:#bc916773;border-top-color:#d9ae7e99;border-bottom-color:#372015;
 background:linear-gradient(180deg,#f7cb8e17 0%,transparent 22%,#1e0c0640 49%,#e7b37a0d 51%,#1c0c0738 100%),repeating-linear-gradient(1deg,transparent 0 3px,#2b140b22 4px,#c6996520 5px,transparent 7px),linear-gradient(100deg,#51301f,#886044 28%,#704b33 68%,#48291c);
 box-shadow:0 2px 0 #b68b5d,0 5px 0 #4a2b1c,0 7px 0 #291a13,0 11px 10px #001a2599,0 18px 26px #001e2873,inset 0 2px 2px #f7d4a333,inset 0 -5px 5px #25120c99,inset 8px 0 12px #26120c33,inset -8px 0 12px #26120c33;
}
.rack-row::after{background:linear-gradient(180deg,#c09a6b 0%,#94704b 25%,#563722 62%,#352016 100%);border-top-color:#e6be8c9c;box-shadow:0 2px 1px #25140db3,0 5px 6px #1a0e0966,inset 0 1px #e9c49640}
.rack-cell .tile{box-shadow:0 2px 2px #20120b77,1px 0 1px #301e1233}
.rack::before,.rack::after{border-top-color:#edf4f0;border-bottom-color:#44565e;background:radial-gradient(circle at 50% 14%,#455860 0 1px,#eff4ef 1.2px 1.7px,transparent 1.9px),radial-gradient(circle at 50% 86%,#455860 0 1px,#eff4ef 1.2px 1.7px,transparent 1.9px),linear-gradient(90deg,#526973 0%,#d5e1de 22%,#fbfff9 40%,#b4c7c8 62%,#738e97 85%,#415c68 100%);box-shadow:1px 0 3px #1b100e99,inset 1px 0 #ffffffb3,inset -1px 0 #334b5666}
@media(max-height:650px) and (orientation:landscape){.rack{transform:rotateX(5deg);box-shadow:0 2px 0 #a27b52,0 4px 0 #48291b,0 6px 0 #291a13,0 9px 12px #001a2599,inset 0 2px 2px #f7d4a333,inset 0 -3px 4px #25120c99}}

/* A persistent task-complete badge, separate from the active-turn timer. */
.player .task-opened-mark{position:absolute;right:-5px;bottom:-4px;width:17px;height:17px;display:grid;place-items:center;border:2px solid #064353;border-radius:50%;background:#b7ddb0;color:#194b39;font-family:Arial,sans-serif;font-size:12px;font-weight:900;box-shadow:0 1px 4px #001e4077;line-height:1}
.player .task-opened-label{font-size:7px;font-weight:800;color:#c8edb8;letter-spacing:.4px}
.player.task-opened .detail{flex-wrap:wrap;gap:3px 5px}
@media(max-height:650px) and (orientation:landscape){.player .task-opened-mark{width:13px;height:13px;right:-4px;bottom:-3px;font-size:9px;border-width:1px}.player .task-opened-label{font-size:6px;letter-spacing:0}.player.task-opened .detail{gap:1px 3px}}

/* The board and rack share one responsive frame and identical side columns. */
.game-shell{--frame-width:1440px;--frame-inset:24px;--seat-width:136px;--frame-gap:12px}
.table-area,.rack-zone{width:calc(100% - var(--frame-inset));max-width:var(--frame-width);margin-left:0;margin-right:0;align-self:center;column-gap:var(--frame-gap);grid-template-columns:var(--seat-width) minmax(0,1fr) var(--seat-width)}
.rack-zone{container-type:inline-size;padding:0 0 13px;grid-template-rows:22px auto}
.rack-zone .rack{grid-column:2;grid-row:2;--tile-w:clamp(18px,calc((100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap) - 24px)/16),70px);--tile-h:calc(var(--tile-w)*1.28);min-width:0}
.rack-zone .rack-meta{grid-column:2;grid-row:1;min-width:0}
.rack-zone .rack-controls{grid-column:3;grid-row:2;min-width:0;justify-content:center}
@media(max-width:1100px){.game-shell{--seat-width:100px;--frame-gap:8px;--frame-inset:20px}}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--seat-width:82px;--frame-gap:6px;--frame-inset:20px}
 .rack-zone{padding:0 0 8px;grid-template-rows:17px auto}
 .rack-zone .rack{--tile-w:clamp(17px,calc((100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap) - 16px)/16),47px);--tile-h:calc(var(--tile-w)*1.28)}
 .rack-controls .game-button{width:100%;font-size:7px;min-height:20px;padding:3px 2px;gap:2px}
 .rack-controls .game-button.undo{min-height:18px;font-size:7px;padding:2px}
}
@media(max-width:740px) and (orientation:landscape){.game-shell{--seat-width:68px;--frame-gap:5px;--frame-inset:16px}.player-left,.player-right{width:66px;padding:4px;gap:3px}.player-left .name,.player-right .name{max-width:36px}}

@media(max-height:650px) and (orientation:landscape){
 .rack-controls .rules-tip{display:none}
 .rack-controls{gap:2px}
 .rack-controls .game-button{min-height:18px;padding:2px;font-size:7px}
 .rack-controls .game-button.undo{min-height:18px}
 .player-self{height:30px;min-height:30px;max-height:30px;padding:3px 8px;gap:5px;align-items:center}
 .player-self .avatar{width:22px;height:22px}
 .player-self .name{font-size:8px;line-height:10px}
 .player-self .detail{font-size:6px;margin-top:2px;flex-wrap:nowrap}
 .player-self .badge{font-size:5px}
}

/* Keep the local card centered on the wooden face, including its turn label. */
.player-self{justify-self:center;min-width:150px;max-width:220px;justify-content:center}
.player-self .active-turn-tag{left:50%;top:-13px;transform:translateX(-50%)}
.table-area{grid-template-rows:66px minmax(0,1fr) 66px}
.discard-top,.discard-left{left:calc((var(--seat-width) - 64px)/2)}
.discard-right,.discard-self{right:calc((var(--seat-width) - 64px)/2)}
@media(max-height:650px) and (orientation:landscape){
 .game-header{height:32px}.game-hud{height:30px}
 .table-area{grid-template-rows:30px minmax(0,1fr) 42px;min-height:100px}
 .player-top{height:28px;min-height:28px;padding:3px 5px}
 .player-top .avatar{width:18px;height:18px}
 .rack-zone .rack{--tile-h:clamp(24px,8dvh,36px);grid-template-rows:repeat(2,calc(var(--tile-h) + 6px));height:calc(2 * (var(--tile-h) + 6px) + 9px)}
 .rack-zone .rack-row{height:calc(var(--tile-h) + 6px);padding-bottom:6px}
 .rack-zone .rack-controls{gap:2px;align-self:center}
 .rack-controls .game-button,.rack-controls .game-button.undo{height:16px;min-height:16px;padding:1px 2px;font-size:6.5px;line-height:12px;white-space:nowrap}
 .rack-controls .game-button svg{width:9px;height:9px}
 .rack-controls .game-button.undo{font-size:6px;gap:1px}
 .player-self{min-width:116px;max-width:150px;height:28px;min-height:28px;max-height:28px;padding:2px 7px}
 .player-self .active-turn-tag{left:50%;top:-11px;transform:translateX(-50%)}
 .discard-zone{width:47px;height:36px;gap:1px}
 .discard-top,.discard-left{left:calc((var(--seat-width) - 47px)/2)}
 .discard-right,.discard-self{right:calc((var(--seat-width) - 47px)/2)}
 .discard-zone .discard-slot{width:25px;height:29px}
 .discard-zone .tile{--tile-w:22px;--tile-h:27px}
 .discard-zone small{font-size:5px;line-height:5px}
}

@media(max-height:650px) and (orientation:landscape){.player-top,.player-left,.player-right{width:min(76px,var(--seat-width));height:28px;min-height:28px;padding:3px 5px;gap:4px}.player-top .avatar,.player-left .avatar,.player-right .avatar{width:18px;height:18px}}

/* Reference-inspired landscape table: opponent above the board, rack below it. */
@media(max-height:650px) and (orientation:landscape){
 .game-hud{height:38px;padding-left:16px;padding-right:16px;align-items:center}
 .task-info{gap:7px}.task-info b{font-size:10px}.task-info small{font-size:6px}
 .task-progress{gap:3px}.task-progress i{width:10px}.task-progress i.current{width:17px}
 .table-area{grid-template-rows:0 minmax(0,1fr) 42px}
 .player-top{position:absolute;grid-column:auto;grid-row:auto;left:50%;top:-32px;transform:translateX(-50%);margin:0;z-index:4}
 .player-top .active-turn-tag{top:0;left:auto;right:-2px;transform:translateY(-60%);font-size:5px;line-height:9px;padding:0 3px}
 .player-left,.player-right{align-self:center}
 .open-board{border-radius:5px}
 .board-heading{height:16px;min-height:16px}
 .board-heading span{font-size:6px;letter-spacing:.7px}
 .meld-board,.pair-board{border-radius:5px}
 .rack-zone{grid-template-rows:14px auto;padding-bottom:8px}
 .rack-meta{font-size:6px}.rack-meta label{font-size:6px}
 .rack-zone .rack-controls{align-self:center}
}

/* A compact upright rack: narrower face, full tile feet above each shelf. */
.rack-zone .rack,.rack-zone .rack-meta{width:min(100%,900px);justify-self:center}
.rack-zone .rack{--tile-w:calc((min(900px,calc(100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap))) - 24px)/16);--tile-h:calc(var(--tile-w)*1.38);padding-bottom:9px;grid-template-rows:repeat(2,calc(var(--tile-h) + 10px));height:calc(2 * (var(--tile-h) + 10px) + 20px)}
.rack-zone .rack-row{height:calc(var(--tile-h) + 10px);grid-template-rows:var(--tile-h);padding-bottom:10px}
.rack-zone .rack-row::after{height:4px;bottom:1px}
.rack-zone .rack-cell .tile{height:var(--tile-h);font-size:calc(var(--tile-w)*.60);padding-bottom:2px;border-bottom-width:3px}
@media(max-height:650px) and (orientation:landscape){
 .rack-zone .rack,.rack-zone .rack-meta{width:min(88%,520px)}
 .rack-zone .rack{--tile-w:calc((min(520px,calc((100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap)) * .88)) - 16px)/16);--tile-h:calc(var(--tile-w)*1.38);padding:5px 7px 9px;grid-template-rows:repeat(2,calc(var(--tile-h) + 8px));height:calc(2 * (var(--tile-h) + 8px) + 16px)}
 .rack-zone .rack-row{height:calc(var(--tile-h) + 8px);padding-bottom:8px}
 .rack-zone .rack-cell .tile{font-size:calc(var(--tile-w)*.58);padding-bottom:2px}
}

/* One centered playing width: board edges match the rack; the rack meets the viewport. */
.game-shell{position:relative;--play-width:min(900px,calc(100vw - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap)))}
.table-area,.rack-zone{width:calc(var(--play-width) + 2 * var(--seat-width) + 2 * var(--frame-gap));max-width:calc(100% - var(--frame-inset))}
.rack-zone{padding-bottom:0}
.rack-zone .rack,.rack-zone .rack-meta{width:100%}
.rack-zone .rack{--tile-w:calc((100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap) - 24px)/16)}
.game-bottom{position:absolute;left:0;right:0;bottom:3px;height:auto;padding:0 8px;pointer-events:none;z-index:1}
.game-bottom .event-text{max-width:calc((100% - var(--play-width))/2 - 12px);font-size:7px}
.game-bottom .muted-mark{display:none}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--play-width:min(520px,calc((100vw - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap)) * .88))}
 .rack-zone{padding-bottom:0}
 .rack-zone .rack,.rack-zone .rack-meta{width:100%}
 .rack-zone .rack{--tile-w:calc((100cqw - 2 * var(--seat-width) - 2 * var(--frame-gap) - 16px)/16)}
 .game-bottom .event-text{font-size:6px}
}

/* Fluid landscape proportions, including short and tall phone viewports. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell{min-height:300px;--seat-width:clamp(60px,9vw,82px);--play-width:min(calc((100vw - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap)) * .88),calc(100dvh * 1.35))}
}

.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{font-size:calc(var(--board-tile,20px)*.8)}

/* Fixed frame proportions; responsive dimensions change as one unit. */
.game-shell{--card-width:108px;--station-width:clamp(36px,calc(var(--play-width)*.075),66px)}
.table-area .player{--card-ratio:2.4;width:var(--card-width);min-width:var(--card-width);max-width:var(--card-width);height:calc(var(--card-width)/var(--card-ratio));min-height:calc(var(--card-width)/var(--card-ratio));max-height:calc(var(--card-width)/var(--card-ratio));padding:calc(var(--card-width)*.065);gap:calc(var(--card-width)*.05);border-radius:calc(var(--card-width)*.083);box-sizing:border-box}
.table-area .player-self{--card-width:175px;--card-ratio:3.5}
.open-board{grid-template-columns:minmax(0,1fr) var(--station-width) minmax(0,var(--pair-share,16%))}
.open-board>.draw-area{width:100%;height:calc(var(--station-width)*2.05);min-height:0;padding:calc(var(--station-width)*.06);gap:calc(var(--station-width)*.14);justify-content:center;border-radius:calc(var(--station-width)*.12);box-sizing:border-box}
.open-board>.draw-area .draw-item{gap:calc(var(--station-width)*.03)}
.open-board>.draw-area .draw-item>span{font-size:clamp(4px,calc(var(--station-width)*.09),6px);line-height:1.15;letter-spacing:0;white-space:nowrap}
.open-board>.draw-area .draw-item:first-child .tile,.open-board>.draw-area .draw-item:last-child .tile{--tile-w:calc(var(--station-width)*.46);--tile-h:calc(var(--station-width)*.61);font-size:calc(var(--station-width)*.35);padding-bottom:1px;border-bottom-width:2px}
.open-board>.draw-area .draw-stack{gap:0}
.open-board>.draw-area .deck-count{width:calc(var(--station-width)*.32);min-width:0;height:calc(var(--station-width)*.22);font-size:clamp(5px,calc(var(--station-width)*.12),8px);right:calc(var(--station-width)*-.08);bottom:calc(var(--station-width)*-.04)}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--card-width:min(76px,var(--seat-width))}
 .table-area .player-self{--card-width:112px}
}

.table-area .player .avatar{width:calc(var(--card-width)*.24);height:calc(var(--card-width)*.24);flex:0 0 calc(var(--card-width)*.24)}
.table-area .player>div:not(.avatar){min-width:0}
.table-area .player .name{max-width:100%;line-height:1.1}
.table-area .player .detail{flex-wrap:nowrap;min-width:0;line-height:1.1}
.table-area .player .detail .badge{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-area .player-self{padding:calc(var(--card-width)*.035) calc(var(--card-width)*.055)}
.table-area .player-self .avatar{width:calc(var(--card-width)*.18);height:calc(var(--card-width)*.18);flex-basis:calc(var(--card-width)*.18)}
@media(max-height:650px) and (orientation:landscape){.table-area .player:not(.player-self) .name{font-size:7px}.table-area .player:not(.player-self) .detail{font-size:5.5px;margin-top:1px;gap:2px}.table-area .player:not(.player-self) .task-opened-label{font-size:5px}}

/* The local player uses the same card frame and breathing room as opponents. */
.game-shell{--card-width:112px}
.table-area .player-self{--card-width:inherit;--card-ratio:2.4;padding:calc(var(--card-width)*.065);gap:calc(var(--card-width)*.05);background:#06374670;border:1px solid #a6c4b02b}
.table-area .player-self.active{background:#032d3d;border-color:#c5b7854d}
.table-area .player-self .avatar{width:calc(var(--card-width)*.24);height:calc(var(--card-width)*.24);flex-basis:calc(var(--card-width)*.24);font-size:13px}
.table-area .player .name{font-size:10px}
.table-area .player .detail{font-size:8px;margin-top:4px;gap:4px}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--card-width:calc(min(76px,var(--seat-width)) + 4px)}
 .table-area .player-self{--card-width:inherit}
 .table-area .player .name,.table-area .player:not(.player-self) .name{font-size:7px}
 .table-area .player .detail,.table-area .player:not(.player-self) .detail{font-size:5.5px;margin-top:1px;gap:2px}
 .table-area .player-self .avatar{font-size:10px}
 .table-area .player .task-opened-label{font-size:5px}
}

@media(max-height:650px) and (orientation:landscape){.game-hud{height:40px}.player-top{top:calc(-1 * var(--card-width)/2.4 - 2px)}}

/* A column flex basis must not turn the indicator's width into its height. */
.open-board>.draw-area .draw-item:first-child .tile,.open-board>.draw-area .draw-item:last-child .tile{flex:none;--tile-h:calc(var(--station-width)*.46*1.38);height:var(--tile-h);min-height:var(--tile-h);aspect-ratio:1/1.38}

/* Scale one complete indicator component, so text, borders and insets keep their ratios. */
.open-board>.draw-area{--station-width:44px;width:44px;height:90.2px;justify-self:center;transform:scale(var(--station-scale,1));transform-origin:center center;border-width:2px}
.open-board>.draw-area .draw-item>span{font-size:5px}

/* The separator handle stays above the tile, so selecting a tile cannot toggle it. */
.rack-separator{left:-6px;top:-10px;width:12px;height:10px}
.rack-separator::after{left:5px;top:2px;height:5px}
.rack-separator.marked::after{height:calc(var(--tile-h) + 8px)}

/* A self-contained practice hand and replay settings. */
#tutorial{max-width:620px;max-height:94dvh;overflow:auto}
.tutorial-body{padding:24px;color:#244950}.tutorial-body header{display:flex;justify-content:space-between;align-items:center;gap:14px}.tutorial-body header .eyebrow{color:#8b713d;font-size:9px}.tutorial-body header .text-button{color:#456864}.tutorial-body h2{font-size:27px;margin:18px 0 10px;font-weight:500}.tutorial-body>p{font-size:13px;line-height:1.6}.tutorial-body small{display:block;font-size:10px;color:#687d70;margin-top:14px}.tutorial-board{min-height:80px;display:flex;align-items:center;justify-content:center;gap:3px;padding:12px;background:#075064;border-radius:8px;color:#d7e4d5;font-size:12px}.tutorial-board>span{margin-right:12px}.tutorial-rack{display:flex;justify-content:center;gap:3px;min-height:74px;padding:12px 6px;background:linear-gradient(#806045,#4a2e20);border-radius:6px;margin-top:14px}.tutorial-stone{flex:none;width:36px;height:50px;background:#fff9e9;border:1px solid #d5c6a7;border-bottom:4px solid #b5a383;border-radius:4px;font:bold 25px Georgia,serif;color:#25393f;padding:0}.tutorial-stone:disabled{opacity:1;cursor:default}.tutorial-stone.blue{color:#147c9e}.tutorial-stone.red{color:#bb3044}.tutorial-stone.yellow{color:#ae8417}.tutorial-stone.chosen{outline:3px solid #f0cc6c;outline-offset:1px;transform:translateY(-4px)}.tutorial-message{min-height:24px;color:#416b4a;font-weight:600}.tutorial-body footer{display:flex;justify-content:flex-end}.rematch-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:22px;padding-top:16px;border-top:1px solid #cdd1be}.rematch-settings label{font-size:11px;align-self:center;color:#385953;margin:0}.rematch-settings select{min-width:0;border:1px solid #b4c3b1;border-radius:5px;padding:8px;background:#fffbed;color:#244950}.rematch-settings .primary{grid-column:1/-1;margin-top:6px}
@media(max-height:650px) and (orientation:landscape){.tutorial-body{padding:14px 20px}.tutorial-body h2{font-size:21px;margin:10px 0 6px}.tutorial-body>p{font-size:11px;margin:7px 0}.tutorial-board{min-height:55px;padding:7px}.tutorial-rack{min-height:57px;padding:7px;margin-top:8px}.tutorial-stone{width:28px;height:40px;font-size:20px}.tutorial-body .primary{padding:8px 14px}.tutorial-body small{margin-top:8px}}

/* BEGIN reversible discard-feedback experiment: glow only, no message. */
.discard-feedback.claim-ready .discard-slot{outline:2px solid #ffe099;outline-offset:3px;border-radius:5px;box-shadow:0 0 0 6px #efd08c26,0 2px 12px #001e3b66;background:#e8c9801c}
@media(max-height:650px) and (orientation:landscape){.discard-feedback.claim-ready .discard-slot{outline-width:2px;outline-offset:2px;box-shadow:0 0 0 4px #efd08c26,0 2px 7px #001e3b66}}
/* END reversible discard-feedback experiment. */

/* Solo pause sits over the unchanged table and freezes the visible turn ring. */
.pause-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#002c3ac9;backdrop-filter:blur(3px);padding:16px}
.pause-card{width:min(340px,100%);padding:28px;border:1px solid #cfbc86;border-radius:12px;background:#f4efdf;color:#244950;text-align:center;box-shadow:0 15px 60px #001d3677}
.pause-symbol{display:block;font-size:34px;font-weight:800;color:#8f743f;line-height:1}
.pause-card h2{font-size:25px;font-weight:500;margin:15px 0 8px}.pause-card p{font-size:12px;color:#5f776e;line-height:1.6;margin-bottom:20px}.pause-card .primary{width:100%}.pause-card .text-button{color:#52716b;margin-top:15px}
@media(max-height:650px) and (orientation:landscape){.pause-card{padding:20px}.pause-card h2{font-size:22px;margin-top:10px}.game-tools [data-command="pause"]{font-size:8px}}

@media(max-height:400px) and (orientation:landscape){.pause-card{padding:14px}.pause-symbol{font-size:26px}.pause-card h2{font-size:20px;margin:10px 0 6px}.pause-card p{font-size:11px;line-height:1.4;margin:0 0 14px}.pause-card .primary{padding:9px 14px}.pause-card .text-button{margin-top:10px}}

/* Retired notice stays hidden even if an older script is cached. */
.discard-notice{display:none!important}

/* Slightly larger discarded tiles, with the whole component kept proportional. */
.discard-zone{transform:scale(1.12);transform-origin:center center}

/* Local, licensed numeral subset: identical tile lettering on every device. */
@font-face{font-family:'IBM Plex Sans Condensed Tiles';src:url('/fonts/ibm-plex-sans-condensed-digits-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0030-0039}
.tile,.guide-tile,.tutorial-stone{font-family:'IBM Plex Sans Condensed Tiles','IBM Plex Sans Condensed',Arial,sans-serif;font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-synthesis:none}

/* Current tile lettering: IBM Plex Sans Condensed Bold. */
.tile,.guide-tile,.tutorial-stone{font-family:'IBM Plex Sans Condensed Tiles','IBM Plex Sans Condensed',Arial,sans-serif;font-weight:700}

/* Narrow numerals retain breathing room without separating the tiles. */
.tile,.guide-tile,.tutorial-stone{padding-left:1px;padding-right:1px}
.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{padding-left:clamp(0px,calc((var(--board-tile,20px) - 2px)*.08),1px);padding-right:clamp(0px,calc((var(--board-tile,20px) - 2px)*.08),1px);font-size:max(1px,calc((var(--board-tile,20px) - 2px)*.75))}

/* Playable rack tiles: red circular marker. */
.rack .tile.playable::after{content:"";position:absolute;left:40.5%;width:19%;height:auto;aspect-ratio:1;bottom:5%;border-radius:50%;background:#d83b40;box-shadow:inset 0 1px 1px #ffffff55,0 1px 1px #7e172944;pointer-events:none}

#claim-coach{position:fixed;z-index:80;padding:14px 28px 10px 14px;background:#fff8e7;color:#24434a;border:2px solid #edc877;border-radius:10px;box-shadow:0 6px 24px #001e3b66;font:12px/1.45 Arial,sans-serif;pointer-events:none;animation:none}
#claim-coach b{display:block;font-size:13px}#claim-coach p{margin:7px 0 0}#claim-coach>button{pointer-events:auto;position:absolute;right:5px;top:3px;background:none;border:0;color:#24434a;font-size:22px;padding:2px 5px;cursor:pointer}#claim-coach>span{display:block;text-align:right;color:#976d22;font-size:22px;line-height:20px;animation:claim-tip-arrow 1s ease-in-out 8}
.game-button.claim-teaching{animation:claim-tip-ring 1.2s ease-in-out 8}
@keyframes claim-tip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes claim-tip-arrow{50%{transform:translateY(4px)}}
@keyframes claim-tip-ring{50%{box-shadow:0 0 0 4px #ffe09988}}
@media(prefers-reduced-motion:reduce){#claim-coach,#claim-coach>span,.game-button.claim-teaching{animation:none}}

/* More readable current-task information. */
.task-info b{font-size:15px;font-weight:600}.task-info small{font-size:9px;letter-spacing:1.3px}.task-number{font-size:15px}
@media(max-height:650px) and (orientation:landscape){.task-info b{font-size:12px}.task-info small{font-size:7px;letter-spacing:1px}.task-number{font-size:13px}}

/* Compact score panel on landscape phones. */
@media(max-height:650px) and (orientation:landscape){
 .overlay{padding:12px}
 .result-card{width:min(520px,82vw);max-height:78dvh;padding:12px 16px;border-radius:9px}
 .result-card h2{font-size:20px;margin:5px 0 3px}
 .result-card>p{font-size:10px;line-height:1.3;margin:4px 0}
 .result-top .eyebrow{font-size:8px;letter-spacing:1px}
 .result-card table{font-size:10px;margin:8px 0}
 .result-card th{font-size:7px;letter-spacing:0;padding:5px 4px}
 .result-card td{padding:6px 4px}
 .result-footer{font-size:9px;gap:8px;flex-wrap:wrap}
 .result-footer .time-value{font-size:15px}
 .result-card details{margin-top:8px;padding-top:7px}
 .result-card summary{font-size:9px}
 .score-list{max-height:100px}
 .result-card .rematch-settings{margin-top:10px;padding-top:9px;gap:5px 10px}
 .result-card .rematch-settings label{font-size:10px}
 .result-card .rematch-settings select{font-size:11px;padding:5px}
 .result-card .primary{margin-top:7px;padding:7px 12px;font-size:11px;min-height:30px}
 .result-card>.text-button{margin-top:7px!important;font-size:10px}
}

/* Larger discard tiles on desktop; landscape phone sizing stays unchanged. */
@media(min-width:1100px) and (min-height:651px){.discard-zone{transform:scale(1.4)}}

.fullscreen-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:6px;border:1px solid #c9ddcc45;border-radius:6px;background:#043f5066;color:#f0dfb0;cursor:pointer}.fullscreen-button svg{width:100%;height:100%}.fullscreen-button[aria-pressed=true]{background:#e5c77d;color:#164b54}.fullscreen-button:focus-visible{outline:2px solid #ffe099;outline-offset:2px}
@media(max-height:650px) and (orientation:landscape){.fullscreen-button{width:24px;height:24px;padding:4px}.game-tools{gap:7px}}

/* Shared visible-viewport frame: no device-model dimensions. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.game-shell{
 --safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);
 --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
 --usable-width:calc(var(--view-width,100vw) - var(--safe-left) - var(--safe-right));
 --usable-height:calc(var(--view-height,100dvh) - var(--safe-top) - var(--safe-bottom));
 position:fixed;left:var(--view-left,0px);top:var(--view-top,0px);right:auto;bottom:auto;
 width:var(--view-width,100vw);height:var(--view-height,100dvh);min-height:0;
 padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);box-sizing:border-box;
 --play-width:min(900px,calc(var(--usable-width) - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap)));
}
.game-header,.game-hud{min-height:0;flex-shrink:0}
.table-area,.rack-zone{margin-left:auto;margin-right:auto}
.game-bottom{left:var(--safe-left);right:var(--safe-right);bottom:calc(var(--safe-bottom) + 3px)}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--seat-width:clamp(60px,calc(var(--usable-width)*.09),82px);--play-width:min(calc((var(--usable-width) - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap))*.88),calc(var(--usable-height)*1.35))}
 .table-area{min-height:0}
 .game-header{padding-left:12px;padding-right:12px}
 .game-tools{gap:clamp(4px,calc(var(--usable-width)*.008),7px)}
 .game-title{gap:10px;min-width:0}.game-title .session-code{padding-left:10px;letter-spacing:1px}
}
@media(orientation:landscape){
 html[data-viewport-band=compact] .game-header{height:30px}
 html[data-viewport-band=compact] .game-hud{height:38px}
 html[data-viewport-band=compact] .table-area{grid-template-rows:0 minmax(0,1fr) 38px}
}
@media(max-width:740px) and (orientation:landscape){.game-title .session-code{display:none}}

#install-help{max-width:500px;max-height:85dvh}#install-help .dialog-body{padding:22px}#install-help h2{font-size:23px;margin:8px 20px 10px 0}#install-help p,#install-help li{font-size:12px;line-height:1.5}#install-help .primary{margin-top:8px}#install-help .install-local-note{padding:9px;background:#e9dfc6;border-radius:6px}
@media(max-height:650px) and (orientation:landscape){#install-help{max-width:580px}#install-help .dialog-body{padding:14px 22px}#install-help h2{font-size:19px}#install-help p,#install-help li{font-size:11px;margin:6px 0}}

/* Bottom anchoring applies after every screen-size variant. */
.game-shell>.rack-zone{margin-top:auto;margin-bottom:0;padding-bottom:0;align-items:end;flex-shrink:0}
.game-shell>.rack-zone>.rack{align-self:end;margin-bottom:0}

/* Give the table more room while keeping player and rack dimensions. */
.game-shell{--frame-gap:6px}
.game-shell .table-area{grid-template-rows:54px minmax(0,1fr) 52px}
.game-shell>.rack-zone{grid-template-rows:16px auto}
.discard-zone.claim-ready{gap:9px}
.discard-zone.claim-ready small{flex-shrink:0;overflow:visible;line-height:1.2;text-shadow:0 1px 2px #003442}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--frame-gap:3px}
 .game-shell .game-hud{height:36px}
 .game-shell .table-area{grid-template-rows:0 minmax(0,1fr) 36px}
 .game-shell>.rack-zone{grid-template-rows:12px auto}
 .discard-zone{height:44px}
 .discard-zone.claim-ready{gap:7px}
 .discard-zone.claim-ready small{font-size:6px;line-height:7px}
}

/* Keep the closed-pile label above its tile's outer outline. */
.open-board>.draw-area{gap:10px}
.open-board>.draw-area .draw-item:last-child{gap:7px}

/* Taller frame accommodates the increased indicator-to-pile spacing. */
.open-board>.draw-area{height:104px}

/* Bring the local card closer to the rack and extend the board downward. */
.game-shell .table-area{grid-template-rows:54px minmax(0,1fr) 50px}
.game-shell>.rack-zone{grid-template-rows:8px auto}
@media(max-height:650px) and (orientation:landscape){
 .game-shell .table-area{grid-template-rows:0 minmax(0,1fr) 34px}
 .game-shell>.rack-zone{grid-template-rows:6px auto}
}

/* Whole cells meet the panel edges; there are no inset grid gutters. */
.board-grid,.pair-grid{padding:0}
.board-grid .group-end[data-side="left"]{left:0}
.board-grid .group-end[data-side="right"]{right:0}
.board-grid .group-end{z-index:3;opacity:.8}
.board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{font-size:max(1px,min(calc((var(--board-tile) - 2px)*.75),calc(var(--board-tile-height)*.7)))}
.board-grid .group-tiles{margin-left:0}

/* Reserve room above the local card for its turn label on desktop. */
@media(min-height:651px){.game-shell .table-area{grid-template-rows:54px minmax(0,1fr) 66px}}

/* Mobile tiles and their grid cells use the same measured width and height. */
@media(max-height:650px) and (orientation:landscape){
 .board-grid .group-tiles .tile,.pair-grid .group-tiles .tile{
  --face-width:var(--board-tile);
  --face-height:var(--board-tile-height);
  width:var(--face-width);height:var(--face-height);flex:0 0 var(--face-width);
  margin-left:0;margin-right:0;
  padding-left:.5px;padding-right:.5px;
  font-size:max(1px,min(calc((var(--face-width) - 3px)*.82),calc(var(--face-height)*.75)));align-self:center;
 }
 .board-grid .group-tiles,.pair-grid .group-tiles{height:var(--board-tile-height)}
}

/* The draining card outline identifies the active player without a text tag. */
.active-turn-tag{display:none}
@media(min-height:651px){.game-shell .table-area{grid-template-rows:50px minmax(0,1fr) 52px}}

/* Match the indicator label gap without moving the closed pile itself. */
.open-board>.draw-area .draw-item:last-child>span{position:relative;top:calc(7px - var(--station-width)*.03)}

/* Smaller player cards leave more height for the nine-row table. */
.game-shell{--card-width:96px}
.game-shell .table-area{grid-template-rows:44px minmax(0,1fr) 44px}
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--card-width:calc((min(76px,var(--seat-width)) + 4px)*.85)}
 .game-shell .game-hud{height:32px}
 .game-shell .table-area{grid-template-rows:0 minmax(0,1fr) 30px}
 .table-area .player .name,.table-area .player:not(.player-self) .name{font-size:6.5px}
 .table-area .player .detail,.table-area .player:not(.player-self) .detail{font-size:5px}
}

/* Keep secondary entry actions on separate lines on mobile. */
@media(max-width:1100px){.entry-card>.back-inline{display:block;width:100%;text-align:left}}
@media(max-height:650px) and (orientation:landscape){.entry-card>.back-inline{display:block;width:100%;text-align:left}}

/* Secondary entry actions stay on separate lines on every screen. */
.entry-card>.back-inline{display:block;width:100%;text-align:left}

/* Top and local cards keep equal clearances from the table. */
.game-shell .player-top{margin-top:0;margin-bottom:0}
@media(max-height:650px) and (orientation:landscape){.game-shell .player-top{top:-30px}}

@media(orientation:landscape){html[data-viewport-band=compact] .game-shell .player-top{top:-38px}}

/* Legal manual placement cells stay visible beside the group, not over its numbers. */
.board-grid .group-end,.pair-grid .group-end{display:none!important}
.placement-target{position:absolute;z-index:6;display:grid;place-items:center;padding:0;border:1.5px dashed #f2d28b;border-radius:3px;background:#ebcd7f24;color:#ffe6aa;font:700 clamp(10px,1.4vw,20px)/1 Arial,sans-serif;cursor:pointer;touch-action:manipulation;box-sizing:border-box;box-shadow:inset 0 0 0 1px #003b4933}
.placement-target:hover,.placement-target:focus-visible{background:#ead39b;color:#174b54;outline:2px solid #fff0c4;outline-offset:-2px}
.placement-target.replacement{font-size:9px;background:#075968;color:#fff2bf;border-style:solid}

.open-group.placement-ready .group-tiles{outline:2px dashed #ffe099;outline-offset:-1px;background:#e9cd8d2b;cursor:pointer}
.placement-target.set-target{border-width:2px;background:#e5c57b38;font-size:18px;font-weight:800;color:#fff0c5}

/* Lift the whole action stack beside the rack. */
.game-shell>.rack-zone>.rack-controls{align-self:center;justify-content:center;transform:none}

.meld-board .board-heading span,.pair-board .board-heading span{color:#dcc48e}

#leave-confirm [data-leave-cancel]{color:#fff5d8;font-weight:700;background:#ffffff12;border-color:#e8d6a7}
#leave-confirm [data-leave-cancel]:hover,#leave-confirm [data-leave-cancel]:focus-visible{color:#fffbed;background:#ffffff22;border-color:#fff0bd}

.home-header .help-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid #e7c77e;border-radius:10px;background:linear-gradient(135deg,#f4dfaa,#dac18a);color:#173f49;font-size:15px;font-weight:750;white-space:nowrap;box-shadow:0 3px 12px #002c3b40,inset 0 1px 0 #fff7dc;opacity:1}
.help-cta-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#174c58;color:#fff0c6;font-size:16px;font-weight:700}
.home-header .help-cta:hover,.home-header .help-cta:focus-visible{background:#fff0c9;color:#123c48;outline:2px solid #fff2ce;outline-offset:3px}
@media(max-width:740px),(max-height:650px) and (orientation:landscape){.home-header .help-cta{font-size:13px;padding:8px 11px;gap:7px}.help-cta-icon{width:20px;height:20px;font-size:14px}}

/* Use the lower screen edge for the rack's wood, keeping tile faces above the home indicator. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell{padding-bottom:0}
 .game-shell>.rack-zone>.rack{
  --rack-safe-extra:max(0px,calc(var(--safe-bottom) - 9px));
  padding-bottom:max(9px,var(--safe-bottom));
  height:calc(2 * (var(--tile-h) + 8px) + 16px + var(--rack-safe-extra));
 }
 html[data-viewport-band=compact] .game-shell .game-hud{height:32px}
 html[data-viewport-band=compact] .game-shell .table-area{grid-template-rows:0 minmax(0,1fr) 30px}
 html[data-viewport-band=compact] .game-shell .player-top{top:-30px}
 .game-shell>.rack-zone>.rack-controls{transform:translateY(calc(var(--safe-bottom)*-.5))}
}

@media(max-height:650px) and (orientation:landscape){
 .game-shell>.rack-zone>.rack{padding-top:3px;grid-template-rows:repeat(2,calc(var(--tile-h) + 4px));height:calc(2 * (var(--tile-h) + 4px) + 14px + var(--rack-safe-extra))}
 .game-shell .rack-row{height:calc(var(--tile-h) + 4px);padding-bottom:4px}
 .game-shell .rack-row::after{height:3px;bottom:0}
 .game-shell .board-heading{height:14px;min-height:14px}
}

/* Slightly smaller mobile discards and a tighter availability outline. */
@media(max-height:650px) and (orientation:landscape){
 .discard-zone{transform:scale(1)}
 .discard-feedback.claim-ready .discard-slot{outline-offset:1px;box-shadow:0 0 0 2px #efd08c26,0 2px 5px #001e3b55}
}
@media(max-height:650px) and (orientation:landscape){.discard-top,.discard-right{top:4px}}

/* Short visible area with Safari address/tab bars expanded. */
html[data-browser-bars=expanded] .game-shell{--play-width:min(calc((var(--usable-width) - var(--frame-inset) - 2 * var(--seat-width) - 2 * var(--frame-gap))*.88),calc(var(--usable-height)*1.25))}
html[data-browser-bars=expanded] .game-shell .game-header{height:28px}
html[data-browser-bars=expanded] .game-shell .game-title .session-code{display:none}
html[data-browser-bars=expanded] .game-shell .game-hud{height:30px}
html[data-browser-bars=expanded] .game-shell .task-info b{font-size:11px}
html[data-browser-bars=expanded] .game-shell .task-info small{font-size:6px;margin-bottom:1px}
html[data-browser-bars=expanded] .game-shell .task-number{width:22px;height:22px;font-size:12px}
html[data-browser-bars=expanded] .game-shell .table-area{min-height:0;grid-template-rows:0 minmax(0,1fr) 30px}
html[data-browser-bars=expanded] .game-shell .board-heading{height:12px;min-height:12px}
@media(max-height:650px) and (orientation:landscape){.game-tools .icon-button{width:24px;height:24px;font-size:13px}}

/* Keep the pile highlight inside the tile, clear of its label. */
.draw-stack.ready .tile{outline:2px solid #ead598;outline-offset:-2px}
@media(max-height:650px) and (orientation:landscape){.game-shell .task-info{margin-left:max(0px,calc((var(--usable-width) - var(--play-width))/2 - 16px))}}

/* Finish directly below the lower tiles with a thin wooden rail. */
.game-shell>.rack-zone>.rack{
 padding-top:3px;padding-bottom:1px;
 grid-template-rows:repeat(2,calc(var(--tile-h) + 4px));
 height:calc(2 * var(--tile-h) + 14px);
}
.game-shell .rack-row{height:calc(var(--tile-h) + 4px);padding-bottom:4px}
.game-shell .rack-row:last-child{height:calc(var(--tile-h) + 4px);padding-bottom:4px}
.game-shell .rack-row::after{height:3px;bottom:0;box-shadow:0 1px 1px #25140d80,inset 0 1px #e9c49640}
@media(max-height:650px) and (orientation:landscape){.game-shell{padding-bottom:0;--usable-height:calc(var(--view-height,100dvh) - var(--safe-top))}}
html[data-browser-bars=expanded] .game-shell .rack-controls{gap:1px}html[data-browser-bars=expanded] .game-shell .rack-controls .game-button{height:12px;min-height:12px;padding:0 2px;line-height:10px;font-size:6px}html[data-browser-bars=expanded] .game-shell .rack-controls .game-button.undo{font-size:5.5px}

/* Full-width header surface, with controls still inside safe screen edges. */
.game-header{position:relative;isolation:isolate;background:transparent}
.game-header::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--safe-left));right:calc(-1 * var(--safe-right));z-index:-1;background:#033c4c90;border-bottom:1px solid #d2dfcc18;pointer-events:none}
/* Task information sits outside the grid in the left mobile margin. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell .game-hud{padding-left:8px}
 .game-shell .task-info{margin-left:0;margin-top:2px;align-self:flex-start;align-items:flex-start;flex-wrap:wrap;gap:2px 5px;width:max(24px,calc((var(--usable-width) - var(--play-width))/2 - var(--seat-width)/2 - 53px));max-width:120px}
 .game-shell .task-number{width:20px;height:20px;flex:0 0 20px;font-size:11px}
 .game-shell .task-info>div{flex:1 1 40px;min-width:0}
 .game-shell .task-info small{font-size:6px;line-height:9px;letter-spacing:.2px;white-space:normal;margin-bottom:1px}
 .game-shell .task-info b{display:block;font-size:11px;line-height:1.15;white-space:normal;overflow-wrap:normal}
}

#claim-coach.compact{padding:8px 22px 8px 9px;border-radius:7px;font-size:9px;line-height:1.35;animation:none}
#claim-coach.compact b{font-size:10px;line-height:1.3}#claim-coach.compact p{margin:5px 0 0}#claim-coach.compact>button{right:2px;top:0;font-size:18px;padding:2px 4px}

/* Mobile left alignment and rack labels anchored to the actual wooden face. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell{--mobile-left-inset:clamp(8px,calc(var(--view-width)*.013),12px)}
 .game-shell .game-header{padding-left:var(--mobile-left-inset)}
 .game-shell .game-title,.game-shell .task-info{transform:translateX(calc(-1 * var(--safe-left) + 20px))}
 .game-shell .game-hud{padding-left:var(--mobile-left-inset)}
 .game-shell>.rack-zone{position:relative;grid-template-rows:0 auto}
 .game-shell>.rack-zone>.rack-meta{position:absolute;left:calc(var(--seat-width) + var(--frame-gap));right:calc(var(--seat-width) + var(--frame-gap));bottom:calc(var(--rack-height) + 1px);height:10px;line-height:10px;width:auto;max-width:none;padding:0 3px;align-items:center;pointer-events:none;z-index:6}
 .game-shell .rack-meta label{pointer-events:auto;white-space:nowrap}
 .game-shell .player-self{position:absolute;grid-column:auto;grid-row:auto;left:50%;transform:translateX(-50%);z-index:4}
}
@media(max-height:650px) and (orientation:landscape){.game-shell>.rack-zone>.rack-meta{grid-column:auto;grid-row:auto;justify-self:stretch}}

.rack-secondary-controls{display:contents}
.game-button.undo{color:#fff0c8;font-weight:650;border-color:#d8c58c80;background:#0a40545c}
.game-button.undo:disabled{opacity:.7}
@media(max-height:650px) and (orientation:landscape){
 .game-shell .rack-secondary-controls{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%);width:var(--seat-width);flex-direction:column;align-items:center;gap:3px}
 .game-shell .rack-secondary-controls .game-button.undo{height:auto;min-height:24px;padding:3px 2px;white-space:normal;line-height:1.2;font-size:7px}
 .game-shell .rack-secondary-controls .game-button.claim{height:22px;min-height:22px;font-size:7px;padding:2px}
 .game-shell .game-bottom{right:auto;bottom:3px;padding:0;font-size:6px;line-height:8px}
 .game-shell .game-bottom .event-text{max-width:100%;font-size:6px;line-height:8px;white-space:normal;max-height:16px;overflow:hidden}
 .game-shell .game-bottom .event-dot{margin-right:3px}
}
html[data-browser-bars=expanded] .game-shell .rack-secondary-controls .game-button.undo{min-height:22px;height:auto;font-size:6.5px}
html[data-browser-bars=expanded] .game-shell .rack-secondary-controls .game-button.claim{min-height:18px;height:18px;font-size:6.5px}

@media(hover:hover) and (pointer:fine){.game-button.undo:hover:not(:disabled){color:#fff5d8;background:#195968}}

/* The undo/take pair stays on the left at every viewport size. */
.game-shell>.rack-zone{position:relative}
.game-shell .rack-secondary-controls{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%);width:var(--seat-width);flex-direction:column;align-items:center;gap:5px}
.game-shell .rack-secondary-controls .game-button.undo{height:auto;min-height:46px;padding:6px 4px;font-size:11px;line-height:1.25;white-space:normal}
.undo-label,.undo-label>span{display:block}
@media(max-height:650px) and (orientation:landscape){
 .game-shell .rack-secondary-controls{gap:3px}
 .game-shell .rack-secondary-controls .game-button.undo{min-height:30px;padding:4px 2px;font-size:8px;line-height:1.2}
}
html[data-browser-bars=expanded] .game-shell .rack-secondary-controls .game-button.undo{min-height:26px;font-size:7px}

/* Larger right-side mobile actions with clearer separation. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell>.rack-zone>.rack-controls{gap:5px}
 .game-shell>.rack-zone>.rack-controls>.game-button{height:21px;min-height:21px;font-size:7.5px;line-height:15px;padding:2px 3px}
 .game-shell>.rack-zone>.rack-controls>.game-button svg{width:11px;height:11px}
}
html[data-browser-bars=expanded] .game-shell>.rack-zone>.rack-controls{gap:4px}
html[data-browser-bars=expanded] .game-shell>.rack-zone>.rack-controls>.game-button{height:17px;min-height:17px;font-size:7px;line-height:13px;padding:1px 2px}

/* Desktop cards use the same clearance on every side of the table. */
@media(min-height:651px){
 .game-shell{--player-clearance:max(6px,calc((var(--seat-width) - var(--card-width))/2 + var(--frame-gap)))}
 .game-shell .game-hud{height:calc(var(--card-width)/2.4 + var(--player-clearance))}
 .game-shell .table-area{grid-template-rows:var(--player-clearance) minmax(0,1fr) calc(var(--card-width)/2.4 + var(--player-clearance))}
 .game-shell .player-top{position:absolute;grid-column:auto;grid-row:auto;left:50%;top:calc(-1 * var(--card-width)/2.4);transform:translateX(-50%);margin:0}
}

@media(min-height:651px){
 .game-shell>.rack-zone>.rack-controls{gap:9px}
 .game-shell>.rack-zone>.rack-controls>.game-button{height:36px;min-height:36px;font-size:11px;padding:8px 5px;gap:6px;max-width:132px}
 .game-shell>.rack-zone>.rack-controls>.game-button svg{width:15px;height:15px}
}

#claim-coach.compact{overflow-wrap:anywhere}

/* Mobile cards: readable full names, with opponents facing their side of the table. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell .table-area .player{
  width:max-content;min-width:112px;max-width:190px;
  height:calc(var(--card-width)/2.4);min-height:calc(var(--card-width)/2.4);max-height:calc(var(--card-width)/2.4);
  padding:3px 6px;gap:5px;justify-self:center;
 }
 .game-shell .table-area .player>div:not(.avatar){min-width:max-content}
 .game-shell .table-area .player .name{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
 .game-shell .table-area .player-left{transform:rotate(-90deg);transform-origin:center}
 .game-shell .table-area .player-right{transform:rotate(90deg);transform-origin:center}
}

@media(max-height:650px) and (orientation:landscape){.game-shell .table-area .player-left>div:not(.avatar),.game-shell .table-area .player-right>div:not(.avatar){min-width:0;flex:1}.game-shell .table-area .player-left .name,.game-shell .table-area .player-right .name{width:100%}}


/* Mobile horizontal seats use the same leading content alignment as the side seats. */
@media(max-height:650px) and (orientation:landscape){
 .game-shell .table-area .player-top,.game-shell .table-area .player-self{justify-content:flex-start;text-align:left}
 .game-shell .table-area .player-top>div:not(.avatar),.game-shell .table-area .player-self>div:not(.avatar){min-width:0;flex:1}
 .game-shell .table-area .player-top .name,.game-shell .table-area .player-self .name{text-align:left}
 .game-shell .table-area .player-top .detail,.game-shell .table-area .player-self .detail{justify-content:flex-start}
 .game-shell .table-area .player .avatar{font-size:10px}
}