:root{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f5ef;background:#102522;font-size:16px;--gold:#ffce6b;--muted:#adc4b9;--line:#355148;--panel:#18382f;--tile-w:clamp(36px,5.2vw,62px)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#234f42 0,transparent 65%),#102522}button,input,textarea,select{font:inherit}button,a,select{touch-action:manipulation}button{min-height:44px;border:1px solid #526950;border-radius:12px;padding:11px 18px;color:inherit;background:#274a3c;font-weight:650;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}button:hover:not(:disabled){background:#355e48;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.upload-button:focus-within{outline:3px solid var(--gold);outline-offset:4px}a{color:var(--gold)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}main{max-width:1160px;margin:auto;padding:20px 30px}h1,h2,p{margin:0}h1{font-size:21px;line-height:1.3}h2{font-size:26px}.topbar,.header-actions,.session-bar,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar{margin-bottom:20px}.brand{font-size:30px;line-height:1;text-decoration:none;letter-spacing:-1.2px;font-weight:850;color:#f4f7ee}.brand span{color:var(--gold)}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:8px;color:#a1b6a3}.header-actions{gap:10px}.language-switch select{background:#193c30;color:#eff6ed;border:1px solid var(--line);border-radius:10px;padding:11px 9px;min-height:44px;max-width:135px;font-size:14px}.icon-button{font-size:22px;width:44px;min-width:44px;padding:4px;background:transparent;border-color:var(--line)}.profile-chip{display:flex;align-items:center;gap:9px;background:#1e4435;padding:4px 13px 4px 4px;border-radius:24px;font-size:14px;max-width:185px}.profile-chip img{width:34px;height:34px;object-fit:cover;border-radius:50%}.profile-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-bar{margin:0 4px 12px}.mode-pill{font-size:11px;letter-spacing:1.7px;color:#bdcdb7;font-weight:750}.mode-pill span{color:#769881;margin:0 5px}.quiet{font-size:14px;background:transparent;border-color:var(--line);padding:8px 13px}.session-bar .quiet{border:0;color:#e1c999;min-height:36px;padding:5px 2px}.table{height:360px;position:relative;border:7px solid #36593d;border-bottom-width:10px;border-radius:160px 160px 95px 95px;background:radial-gradient(ellipse at 50% 30%,#3b8862 0,#246947 45%,#19503b 100%);box-shadow:0 0 0 2px #203d2e,inset 0 0 0 2px #a3b47744,inset 0 0 65px #0b3329,0 14px 32px #0003;margin:15px 24px 0}.table-brand{position:absolute;top:110px;left:50%;transform:translateX(-50%);font-size:23px;font-weight:850;letter-spacing:6px;color:#bce0ae17;white-space:nowrap;pointer-events:none}.table-brand span{font-weight:300}.opponents{position:absolute;inset:0;pointer-events:none}.opponent{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:160px;text-align:center}.opponent.seat-1{left:30px;top:112px}.opponent.seat-2{left:50%;top:-23px;transform:translateX(-50%)}.opponent.seat-3{right:30px;top:112px}.avatar-ring{display:block;width:74px;height:74px;border:3px solid #c4a86c;border-radius:50%;padding:3px;background:#223e2c;box-shadow:0 4px 10px #062c2c99}.avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.opponent .player-name{font-size:14px;font-weight:750;background:#193c2f;border:1px solid #658063;border-radius:7px;min-width:78px;padding:4px 10px;margin-top:-12px;z-index:1}.opponent small{font-size:11px;color:#c7d9c6}.opponent .opponent-discard{position:absolute;top:25px}.seat-1 .opponent-discard{left:94px}.seat-2 .opponent-discard{left:94px}.seat-3 .opponent-discard{right:94px}.opponent-discard .tile{width:29px;height:40px;font-size:20px;border-radius:4px;box-shadow:0 2px 0 #b9ae8b;opacity:.9}.opponent-discard .tile small{font-size:6px;margin-top:4px}.table-center{position:absolute;top:143px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:24px;text-align:center}.indicator-group{width:90px;padding-top:1px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:750;color:#becfbb;text-transform:uppercase}.indicator-slot{margin:8px auto 0;min-height:65px}.indicator-slot .tile{width:42px;height:58px;font-size:28px}.indicator-group p{font-size:11px;white-space:nowrap;color:#d0debc;margin-top:6px}.draw-control{display:flex;flex-direction:column;align-items:center;border:0;padding:0;gap:6px;min-width:83px;background:transparent!important;box-shadow:none;color:#e9f2dd}.draw-control strong{font-size:12px}.draw-control>span:last-child{font-size:10px;color:#bfd6bd}.stock-pile{width:45px;height:61px;background:linear-gradient(145deg,#f7eccb,#c7b990);border:2px solid #f8eccc;border-radius:5px;box-shadow:3px 3px 0 #978761,6px 6px 0 #c5b68e,7px 9px 8px #0b3528;display:grid;place-items:center;margin:4px 6px 4px 0;color:#768268}.stock-pile b{border:1px solid #999d76;border-radius:50%;padding:8px 4px;font-size:11px}.draw-control.action-ready .stock-pile,.draw-control.action-ready .discard-slot{box-shadow:0 0 0 3px #ffd273,0 0 24px #ffdb8755;animation:breathe 2.2s ease-in-out infinite}.discard-slot{display:grid;place-items:center;width:45px;height:61px;border:1px dashed #9bb799;border-radius:6px;margin:4px 0;color:#acc8aa;font-size:22px}.discard-slot .tile{width:43px;height:59px;font-size:28px}.self-seat{position:absolute;bottom:-29px;left:50%;transform:translateX(-50%)!important;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;background:transparent!important;border:0;z-index:2;font-size:13px;max-width:160px}.self-seat .avatar-ring{width:66px;height:66px}.self-seat>span:nth-child(2){padding:3px 12px;background:#1c402f;border:1px solid #728863;border-radius:6px;margin-top:-13px;z-index:1;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.self-seat small{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--gold);background:#18372a;border-radius:5px;padding:3px 8px}.self-seat.active .avatar-ring{border-color:var(--gold);box-shadow:0 0 0 3px #f4c15e33,0 0 22px #eebd5e44}.welcome{position:absolute;inset:100px 15% 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#205c40;text-align:center;border-radius:24px;z-index:3;box-shadow:0 0 40px #205c40}.welcome h1{font-size:30px}.welcome p{font-size:14px;color:#cadbc5}.welcome a{font-size:14px}.primary{color:#302616;border:1px solid #f7d987;background:linear-gradient(#ffe299,#efbc59);box-shadow:0 4px 0 #967333,0 5px 12px #0002;font-weight:800}.primary:hover:not(:disabled){background:linear-gradient(#ffe8ac,#fbd076)}.rack-section{position:relative;margin:35px auto 0;max-width:890px}.turn-strip{display:flex;align-items:center;gap:12px;margin:0 4px 15px}.step-badge{display:grid;place-items:center;background:#d6b86e;color:#2c3c29;min-width:34px;height:34px;border-radius:50%;font-size:17px;font-weight:800}.turn-copy{flex:1;min-width:0}.turn-copy p{font-size:12px;margin-top:4px;color:#afc6b6}.turn-strip .quiet{font-size:12px;max-width:145px}.rack{display:grid;grid-template-columns:repeat(8,var(--tile-w));grid-template-rows:repeat(2,calc(var(--tile-w)*1.38));justify-content:center;align-content:center;gap:10px 8px;min-height:205px;padding:15px 16px 22px;border-radius:13px;background:linear-gradient(180deg,#755332,#9a7044 48%,#5b3c23 49%,#795533 54%,#97683d);border:4px solid #b28a50;border-bottom:9px solid #b18a50;box-shadow:0 6px 0 #553d29,0 12px 24px #0004,inset 0 1px 0 #edc18477;position:relative}.tile{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle;width:var(--tile-w);height:calc(var(--tile-w)*1.38);min-height:0;padding:4px 2px;border:1px solid #e0d7b6;border-radius:6px;background:linear-gradient(120deg,#ffffff,#fff8e7);box-shadow:0 4px 0 #b5a988,2px 5px 7px #35281266;color:#252a29;font-size:calc(var(--tile-w)*.57);font-weight:850;line-height:1}.tile:hover:not(:disabled){background:linear-gradient(120deg,#fffef6,#f4ead0);transform:translateY(-3px)}.tile small{font-size:10px;line-height:1;letter-spacing:0;margin-top:8px;color:inherit}.tile.c0{color:#c41432}.tile.c1{color:#005cdb}.tile.c2{color:#936000}.tile.c3{color:#101820}.tile:disabled{opacity:1;cursor:default}.tile.selected{transform:translateY(-8px)!important;outline:3px solid #ffe07e;outline-offset:2px;box-shadow:0 4px 0 #b5a988,0 0 22px #ffdc7770}.tile.suggested:not(.selected){outline:3px solid #80e5bd;outline-offset:2px}.tile.joker{background:linear-gradient(#fff9d7,#f2d992)}.tile.new-tile{animation:deal .35s ease-out}.rack-placeholder{opacity:.16;pointer-events:none}.rack-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:15px 4px 18px}.rack-actions #message{font-size:12px;color:#a9c5ad;line-height:1.4;max-width:65%}.discard-button{min-width:162px;min-height:46px}.discard-button span{font-size:21px;margin-left:12px}.coach{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;border:1px solid #44624d;background:#1d3f31;margin:0 auto;max-width:890px}.coach-avatar{color:var(--gold);font-size:27px;display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:50%;background:#345541}.coach-copy{flex:1;min-width:0}.coach-heading{display:flex;align-items:center;gap:12px}.coach-heading strong{font-size:14px;color:#f7dda5}.coach-heading span{font-size:11px;color:#9eb5a0}.coach p{font-size:13px;line-height:1.5;color:#d7e4d1;margin-top:5px}.hint-button{border:1px solid #829263;background:#344f36;color:#f8e1a9;font-size:13px;white-space:nowrap}.history{max-width:880px;margin:20px auto 0;font-size:13px;color:#a5bca9}.history summary{cursor:pointer;padding:10px 0}.history li{line-height:1.8}footer{max-width:880px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#91aa93;margin:20px auto 0;padding:12px 0}footer a{color:#b8c7ad}dialog{background:#183a2d;color:#eff6e8;border:1px solid #688061;border-radius:24px;padding:26px;max-width:520px;width:calc(100% - 28px);max-height:90dvh;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#061b16c9;backdrop-filter:blur(7px)}.dialog-heading{margin-bottom:20px}.dialog-heading h2{margin-top:5px}.profile-preview{display:flex;align-items:center;gap:20px;margin:6px 0 22px}.profile-preview img{width:90px;height:90px;object-fit:cover;border-radius:50%;border:3px solid var(--gold);padding:3px;background:#1b402c}.profile-preview strong{font-size:22px;word-break:break-word}.profile-preview p{font-size:13px;color:#b9cdb6;margin-top:6px}fieldset{border:0;margin:0;padding:0;min-width:0}.field{display:block;font-size:14px;font-weight:650;margin-bottom:17px}.field input,.field textarea{display:block;width:100%;margin-top:8px;background:#102d23;border:1px solid #537353;color:#f1f5e9;border-radius:10px;padding:12px;font-size:16px;resize:vertical}.field textarea::placeholder{color:#879e87}.optional{font-size:12px;font-weight:400;color:#a7bea4}.field-label{display:block;font-size:14px;font-weight:650}.avatar-options{display:flex;gap:13px;margin:12px 0 18px}.avatar-option{padding:3px;border:2px solid transparent;background:transparent;border-radius:50%;width:62px;height:62px;min-height:0}.avatar-option img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-option[aria-pressed=true]{border-color:var(--gold);background:#756539}.upload-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.upload-button{position:relative;overflow:hidden;border:1px solid #718461;border-radius:10px;padding:11px 15px;cursor:pointer;font-size:14px;background:#31503a}.upload-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.caption{font-size:12px;line-height:1.6;color:#abc1a6;margin-top:12px}.profile-stats{display:flex;justify-content:space-around;gap:14px;margin:23px 0;border-top:1px solid #426045;padding-top:20px;text-align:center}.profile-stats strong{display:block;font-size:25px;color:#f9d586}.profile-stats span{font-size:11px;color:#b5c7ae}.profile-dialog .primary{width:100%;margin-bottom:16px}.profile-dialog #signout{display:block;text-align:center;color:#b0c3a7;font-size:12px}.profile-dialog #profile-status{font-size:13px;color:#ffdc97;margin:10px 0;line-height:1.5}#profile-signin{display:block;text-align:center;padding:15px}.rules-list{padding-left:25px}.rules-list li{padding:7px}.rules-list p, #rules-dialog>p{font-size:14px;line-height:1.6;margin:9px 0;color:#c9d9c3}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{padding:20px;background:#1b402e;border-radius:12px}.card strong{display:block;font-size:28px}table{width:100%;border-collapse:collapse}td,th{padding:12px;border-bottom:1px solid var(--line);text-align:left}.bar{display:block;height:10px;background:var(--gold)}@keyframes breathe{50%{filter:brightness(1.15)}}@keyframes deal{from{transform:translateY(-16px);opacity:.3}to{transform:translateY(0);opacity:1}}@media(min-width:1150px){.table{height:375px}.table-center{top:150px}.rack-section{margin-top:37px}}@media(max-width:700px){main{padding:14px 14px 20px}.topbar{margin-bottom:14px}.brand{font-size:25px}.brand small{font-size:8px;letter-spacing:2.1px}.header-actions{gap:7px}.language-switch select{max-width:102px;font-size:12px;padding:9px 5px}.profile-chip{padding:3px;border-radius:50%;min-height:42px}.profile-chip img{width:32px;height:32px}.profile-chip span{display:none}.icon-button{width:38px;min-width:38px;min-height:42px}.mode-pill{font-size:9px;letter-spacing:1px}.table{height:300px;margin:17px 0 0;border-width:5px;border-radius:100px 100px 65px 65px}.opponent.seat-1{left:14px;top:100px}.opponent.seat-3{right:14px;top:100px}.opponent.seat-2{top:-16px}.avatar-ring{width:57px;height:57px;padding:2px}.opponent .player-name{font-size:12px;min-width:65px;padding:3px 6px;margin-top:-10px}.opponent small{font-size:9px}.opponent-discard{display:none}.table-brand{top:83px;font-size:18px;letter-spacing:3px}.table-center{top:133px;gap:14px}.indicator-group{position:absolute;top:-66px;left:50%;transform:translateX(-50%);width:150px;display:flex;align-items:center;gap:6px;justify-content:center}.indicator-group .eyebrow{font-size:8px;letter-spacing:.5px;max-width:49px}.indicator-slot{margin:0;min-height:0}.indicator-slot .tile{width:26px;height:36px;font-size:20px;box-shadow:0 2px 0 #b5a988}.indicator-slot .tile small{font-size:6px;margin-top:4px}.indicator-group p{font-size:9px;max-width:65px;white-space:normal;text-align:left}.stock-pile{width:38px;height:52px}.draw-control{min-width:64px}.draw-control strong{font-size:10px}.draw-control>span:last-child{font-size:9px}.discard-slot{width:38px;height:52px}.discard-slot .tile{width:37px;height:51px;font-size:26px}.self-seat{bottom:-22px}.self-seat .avatar-ring{width:57px;height:57px}.self-seat small{font-size:8px}.self-seat>span:nth-child(2){font-size:11px}.welcome{inset:75px 16% 55px;padding:8px;gap:10px}.welcome h1{font-size:23px}.welcome p{font-size:12px}.welcome .eyebrow{font-size:8px}.welcome .primary{font-size:14px}.rack-section{margin-top:31px}.turn-strip{gap:8px;margin-bottom:13px}.step-badge{min-width:28px;height:28px;font-size:14px}h1{font-size:15px}.turn-copy p{font-size:10px}.turn-strip .quiet{font-size:10px;max-width:105px;padding:7px 9px}.rack{--tile-w:clamp(29px,8.6vw,48px);grid-template-columns:repeat(8,var(--tile-w));gap:10px 5px;min-height:140px;padding:13px 7px 17px;border-width:3px;border-bottom-width:7px}.tile small{font-size:7px;margin-top:6px}.rack-actions{margin:14px 3px 16px;gap:9px}.rack-actions #message{font-size:10px;max-width:57%}.discard-button{min-width:125px;font-size:14px;padding:9px 13px}.coach{padding:12px;gap:9px;flex-wrap:wrap}.coach-avatar{width:31px;height:31px;font-size:22px}.coach-copy{flex-basis:calc(100% - 45px)}.coach-heading strong{font-size:12px}.coach-heading span{font-size:9px}.coach p{font-size:12px}.hint-button{margin-left:40px;min-height:39px;padding:8px 14px;font-size:12px}.history{font-size:12px;margin-top:12px}footer{font-size:10px;margin-top:10px}footer>span:nth-child(2){display:none}dialog{padding:21px}}@media(max-width:360px){main{padding:12px 9px}.brand{font-size:22px}.table-center{gap:8px}.opponent.seat-1{left:7px}.opponent.seat-3{right:7px}.avatar-ring{width:50px;height:50px}.opponent .player-name{min-width:57px}.rack{--tile-w:8.2vw}.header-actions{gap:5px}}@media(orientation:landscape) and (max-height:550px) and (min-width:700px){main{max-width:1050px;padding:9px 20px}.topbar{margin-bottom:3px}.session-bar{margin-bottom:0}.table{height:236px;margin:5px 170px 0}.table-center{top:93px;gap:14px}.table-brand{top:76px}.opponent.seat-1,.opponent.seat-3{top:85px}.opponent.seat-1{left:-95px}.opponent.seat-3{right:-95px}.opponent.seat-2{top:-10px}.opponent .avatar-ring{width:56px;height:56px}.self-seat{bottom:-14px}.self-seat .avatar-ring{width:48px;height:48px}.self-seat small{display:none}.rack-section{margin-top:22px;max-width:680px}.rack{--tile-w:44px;min-height:155px;padding:10px;gap:9px}.turn-strip{margin-bottom:9px}.turn-copy h1{font-size:16px}.coach{margin-top:15px}.opponent-discard{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.welcome.celebrate{background:radial-gradient(ellipse,#497b45,#245b3c);border:1px solid #ebd08766}.welcome.celebrate h1{color:#ffe19b}.welcome.celebrate .eyebrow{color:#eeda9a}.turn-copy h1{font-size:20px}.hint-button,.turn-strip .quiet,.draw-control strong{font-size:14px}.coach p{font-size:14px}.coach-heading strong{font-size:15px}@media(max-width:700px){.turn-copy h1{font-size:16px}.turn-strip .quiet{font-size:12px}.draw-control strong{font-size:12px}.coach p{font-size:14px}.hint-button{font-size:14px}.rack-actions #message{font-size:12px}.language-switch select{font-size:14px}.welcome h1{font-size:24px}.welcome p{font-size:14px}}

.sort-controls{display:flex;gap:7px;align-items:center}.sort-controls #auto-sort[aria-pressed=true]{color:#ffe2a2;border-color:#c4a964;background:#425337}.tile.arranged::after{content:"";position:absolute;bottom:2px;left:4px;right:4px;height:3px;background:var(--group-color);border-radius:2px}.tile.potential::after{height:2px;background:repeating-linear-gradient(90deg,var(--group-color) 0 3px,transparent 3px 5px)}@media(max-width:700px){.sort-controls{flex-direction:column;gap:4px;align-items:stretch;flex-shrink:0}.turn-strip .sort-controls .quiet{font-size:12px;min-height:34px;padding:6px 8px;max-width:113px}.turn-copy{align-self:center}.tile.arranged::after{left:3px;right:3px;height:2px}}
/* Wide two-shelf istaka: a full tile-width separates complete combinations. */
.rack-scroll{overflow-x:auto;padding:9px 3px 12px;overscroll-behavior-x:contain;border-radius:14px;scrollbar-color:#a78550 #294032}.rack{--tile-w:clamp(32px,4.5vw,52px);display:flex;flex-direction:column;gap:12px;min-width:calc(15 * (var(--tile-w) + 2px) + 32px);min-height:0;padding:15px 12px 21px;align-items:stretch}.rack-row{display:grid;grid-template-columns:repeat(15,var(--tile-w));column-gap:2px;min-height:calc(var(--tile-w)*1.38);justify-content:start}.rack-group{display:flex;gap:2px;align-items:flex-start}.rack-group>.tile{flex-shrink:0}.rack-section{max-width:960px}.rack-actions{margin-top:3px}.opponent.seat-1{left:auto;right:30px}.opponent.seat-3{right:auto;left:30px}.table-center{top:137px;gap:24px}.discard-piles{position:absolute;inset:0;pointer-events:none}.table-pile{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent!important;padding:0;min-width:86px;min-height:0;text-align:center;box-shadow:none}.table-pile strong,.table-pile>span:not(.pile-top){font-size:11px;color:#e3edd6;font-weight:650}.table-pile small{font-size:10px;color:#b5cbae}.pile-0{right:23%;bottom:19px}.pile-1{right:23%;top:28px}.pile-2{left:23%;top:28px}.pile-3{left:23%;bottom:19px}.pile-top{position:relative;display:grid;place-items:center;width:37px;height:51px;border:1px dashed #b6c6a46b;border-radius:5px;background:#123b282b;font-size:20px;color:#a0b496;margin-bottom:4px;isolation:isolate}.pile-top>.tile{width:36px;height:50px;font-size:26px;box-shadow:0 2px 0 #9b9277}.pile-top>.tile small{font-size:7px;margin-top:5px}.pile-top.stacked::before,.pile-top.deep-stack::after{content:"";position:absolute;inset:1px -3px -3px 3px;background:#b7ac89;border:1px solid #d6c9a0;border-radius:4px;z-index:-1;box-shadow:0 2px 3px #0003}.pile-top.deep-stack::after{inset:4px -6px -6px 6px;z-index:-2;background:#9c956f}.table-pile.action-ready .pile-top{outline:2px solid #ffda78;outline-offset:5px}.table-pile:disabled{opacity:.7}.table-pile:hover:not(:disabled) .pile-top{filter:brightness(1.1)}@media(max-width:700px){.rack{--tile-w:32px;min-width:542px;padding:13px 12px 20px;gap:12px}.rack-scroll{margin:0 -3px}.opponent.seat-1{right:10px;left:auto;top:111px}.opponent.seat-3{left:10px;right:auto;top:111px}.table{height:335px}.table-center{top:132px;gap:8px;flex-direction:column;align-items:center}.indicator-group{position:static;transform:none;display:flex;justify-content:center;width:120px;margin-top:-41px;margin-bottom:2px}.indicator-group .eyebrow{display:none}.indicator-group p{font-size:10px}.table-pile{min-width:67px}.pile-0{right:15%;bottom:27px}.pile-3{left:15%;bottom:27px}.pile-1{right:15%;top:27px}.pile-2{left:15%;top:27px}.table-pile strong,.table-pile>span:not(.pile-top){font-size:10px}.table-pile small{font-size:9px}.pile-top{width:31px;height:43px}.pile-top>.tile{width:30px;height:42px;font-size:22px}.self-seat{bottom:-22px}.table-brand{display:none}}@media(orientation:landscape) and (max-height:550px) and (min-width:700px){.rack{--tile-w:36px;min-width:602px}.table-center{top:93px}.opponent.seat-1{right:-95px;left:auto;top:85px}.opponent.seat-3{left:-95px;right:auto;top:85px}.pile-0,.pile-1{right:11%}.pile-2,.pile-3{left:11%}.pile-0,.pile-3{bottom:12px}.pile-1,.pile-2{top:15px}}

.rack-swipe-hint{display:none}@media(max-width:600px){.rack-swipe-hint{display:block;font-size:11px;color:var(--muted);margin:0 4px 8px;text-align:right}}

#rack .tile,#stock,#take{touch-action:none;-webkit-user-select:none;user-select:none}#rack .tile:not(:disabled),#stock:not(:disabled),#take:not(:disabled){cursor:grab}.drag-origin{opacity:.3!important}.drag-ghost{position:fixed!important;z-index:9999!important;pointer-events:none!important;transform:translate(-50%,-65%) rotate(-5deg)!important;width:48px!important;height:66px!important;min-width:48px!important;opacity:.95!important;box-shadow:0 12px 24px #0008!important}.drop-ready{outline:2px dashed #f5ce7188!important;outline-offset:4px}.drop-hover{outline:3px solid #ffe49a!important;background-color:#f3cf5522!important}.rack-row{transition:outline-color .12s} 

.drag-tip{font-size:12px;color:var(--muted);margin:0 4px 8px}

/* Fit the complete 15-slot rack to the available width, including portrait phones. */
.rack-scroll{overflow:visible;margin:0;padding:9px 0 12px}.rack{min-width:0;width:100%;padding:12px 8px 18px;container-type:inline-size}.rack-row{grid-template-columns:repeat(15,minmax(0,1fr));min-height:0;column-gap:2px}.rack-group{min-width:0;gap:2px}.rack-group>.tile{flex:1 1 0;min-width:0;width:0;height:auto;min-height:0;aspect-ratio:1 / 1.38;padding:2px 0;font-size:clamp(12px,3cqw,36px);border-radius:4px}.rack-group>.tile small{font-size:clamp(5px,1cqw,9px);margin-top:3px}.rack-swipe-hint{display:none!important}.rack-row:empty{min-height:40px}@media(max-width:700px){.rack{padding:10px 6px 15px;gap:10px}.rack-row{column-gap:1px}.rack-group{gap:1px}.rack-group>.tile{font-size:clamp(11px,3.7cqw,22px)}.rack-group>.tile small{font-size:5px;margin-top:2px}.rack-section{width:100%;max-width:100%}}

.chat-launch{position:fixed;right:18px;bottom:18px;z-index:30;background:#efc56e;color:#172b24;box-shadow:0 6px 22px #0006}.chat-panel{position:fixed;right:18px;bottom:18px;z-index:40;width:min(420px,calc(100vw - 24px));height:min(660px,calc(100dvh - 24px));display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid #7b8b65;border-radius:20px;background:#14382d;box-shadow:0 16px 70px #0009}.chat-panel h2{font-size:22px}.chat-toolbar{display:flex;gap:8px}.chat-toolbar select{min-width:0;flex:1;background:#214c3b;color:#fff;border:1px solid #647b5c;border-radius:8px;padding:8px;font-size:14px}.chat-identities{font-size:13px;max-height:180px;overflow:auto;flex-shrink:0}.chat-person{display:flex;gap:10px;margin:10px 0}.chat-person img{width:36px;height:36px;border-radius:50%}.chat-person strong,.chat-person small{display:block}.chat-person small{color:#b4c8bc;margin-top:3px}.chat-messages{flex:1;min-height:70px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px}.chat-message{border-radius:12px;padding:10px 12px;background:#26513d;max-width:94%;font-size:15px;line-height:1.45}.chat-message.ai{background:#324d3b;border-left:2px solid #dcb764}.chat-message strong{font-size:12px;color:#f5d38e}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}.chat-empty{color:#abc3b3;font-size:14px}.chat-panel form{display:flex;gap:8px;align-items:stretch}.chat-panel textarea{min-width:0;width:100%;resize:none;background:#0e281f;border:1px solid #668363;border-radius:10px;padding:10px;color:#fff;font-size:16px}.chat-panel #chat-status{font-size:12px;color:#d8d7b5;min-height:30px}.chat-panel #chat-link{width:100%}@media(max-width:600px){.chat-panel{right:12px;bottom:12px;padding:14px}.chat-launch{right:12px;bottom:12px}.rack-actions{padding-right:0}footer{padding-bottom:75px}}

.inline-coach{flex-basis:100%;width:100%;margin-top:14px;border-top:1px solid #52735a;padding-top:14px}.coach{flex-wrap:wrap}.inline-coach form{display:flex;gap:8px}.inline-coach textarea{flex:1;min-width:0;background:#122d24;border:1px solid #52735a;border-radius:10px;color:#fff;font-size:16px;padding:10px}.inline-coach #coach-messages{max-height:230px;overflow:auto;display:grid;gap:8px;margin:10px 0}.inline-coach #coach-chat-status,.realtime-coach p{font-size:12px;color:#b9cbbd;margin:6px 0}.realtime-coach button{font-size:14px}.session-bar{flex-wrap:wrap}.session-bar .mode-pill{margin-right:auto}.inline-coach .chat-message{max-width:100%}

aside:has(.inline-coach){flex-wrap:wrap}.inline-coach{grid-column:1 / -1}

.rack-row{min-height:max(32px,3.5cqw)}.rack-drop-marker{position:fixed;pointer-events:none;z-index:9998;border:2px solid #ffe49a;border-radius:4px;background:#ffe49a44;box-shadow:0 0 12px #ffe49a88}.rack-scroll{touch-action:pan-y}#rack .tile{touch-action:none;-webkit-touch-callout:none}.rack-group>.tile.selected{box-shadow:0 0 0 2px #ffe49a,0 3px 6px #0007}

.chat-launch{overflow:visible;display:flex;align-items:center;gap:8px}.unread-badge{position:absolute;right:-7px;top:-9px;min-width:24px;height:24px;padding:0 6px;display:grid;place-items:center;background:#ff3b30;color:white;border:2px solid #102522;border-radius:99px;font-size:13px;font-weight:800;box-shadow:0 2px 8px #0005}.chat-notice{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%)!important;z-index:60;width:min(380px,calc(100vw - 24px));text-align:left;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:20px;background:#ecf4eefa;backdrop-filter:blur(18px);color:#18372b;box-shadow:0 8px 32px #0005;border:1px solid #ffffffaa}.chat-notice strong{font-size:14px}.chat-notice span{font-size:13px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.unread-threads{display:flex;gap:6px;flex-wrap:wrap;max-height:95px;overflow:auto}.unread-thread{border-radius:20px;background:#a82e33;padding:6px 11px;font-size:12px;min-height:32px}.emoji-tools{position:relative;flex-shrink:0}.emoji-tools>button{padding:4px 10px;font-size:23px;min-height:40px}.emoji-picker{max-height:205px;overflow:auto;border:1px solid #698266;border-radius:14px;padding:10px;background:#214733;margin-top:6px}.emoji-picker strong{display:block;font-size:12px;color:#d9dcbd;margin:4px}.emoji-picker button{font-size:25px;min-width:40px;min-height:40px;padding:4px;border:0;background:transparent}.emoji-picker button:hover{background:#ffffff22}.chat-panel{gap:8px}
/* Timed social table: shared seats, unobtrusive AI disclosure, clear active turn. */
.turn-clock{margin-left:auto;order:3;min-width:64px;font:700 22px/1.3 ui-monospace,monospace;color:#f9d99a;border:1px solid #cda66080;border-radius:14px;padding:8px;text-align:center;background:#183b33}.turn-clock.urgent{color:#fff;background:#a43635;border-color:#ff8273}.opponent.thinking .avatar-ring{box-shadow:0 0 0 4px #ffd981,0 0 25px #ffd98166}.opponent.thinking small{color:#ffe1a0}.learning-guide{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}.learning-guide>div{padding:12px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff12}.learning-guide strong{font-size:14px;color:#f5d594}.learning-guide p{font-size:14px;line-height:1.5;margin:6px 0 0}.learning-guide>button{grid-column:1/-1;justify-self:start}.avatar-options{max-height:190px;overflow:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.avatar-option{width:100%;padding:3px}.avatar-option img{width:100%;aspect-ratio:1;object-fit:cover}.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.field select{width:100%;padding:12px;background:#17372f;color:#fff;border:1px solid #ffffff30;border-radius:10px}.profile-stats span{font-size:12px}#self-flag{font-size:16px}#tactic-sources{padding-left:20px;font-size:14px}#tactic-sources a{color:#e5bf7c}@media(max-width:600px){.learning-guide{grid-template-columns:1fr}.turn-clock{font-size:18px;min-width:52px;padding:5px}.avatar-options{grid-template-columns:repeat(5,minmax(0,1fr))}}
button.opponent{background:transparent;border:0;padding:0;color:inherit;font:inherit;text-align:center;cursor:pointer}button.opponent:focus-visible{outline:2px solid #ffe29a;outline-offset:6px;border-radius:12px}.chat-person[role=button]{cursor:pointer}.chat-person[role=button]:focus-visible{outline:2px solid #ffe29a}#opponent-profile-status{font-size:14px;line-height:1.5}#opponent-profile-bio{font-size:14px;line-height:1.5}
button.opponent{pointer-events:auto}button.opponent.seat-2{transform:translateX(-50%)!important}
.coach-feedback{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;font-size:15px;font-weight:800;margin-bottom:7px;border:1px solid #6fa992;background:#244b3a;color:#c2f6d4}.coach-feedback.improve{background:#543d1d;color:#ffe0a0;border-color:#bd9250}.coach-feedback.info{background:#24445a;color:#c4e7ff}.coach-visual{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;width:100%}.visual-advice{padding:10px;border:1px solid #74997d55;border-radius:12px;background:#153d2c}.visual-advice.improve,.visual-advice.hint{border-color:#e5b865}.visual-advice>strong{display:block;font-size:13px;margin-bottom:8px}.visual-tiles{display:flex;gap:4px}.visual-tiles .tile{width:32px!important;height:44px!important;min-width:32px!important;font-size:22px!important}.visual-tiles .tile small{font-size:7px!important;margin-top:3px!important}.tile.suggested{outline:3px solid #ffd366;outline-offset:2px}.chat-media-tools{display:flex;gap:6px;flex-wrap:wrap}.chat-media-tools button{font-size:13px;padding:7px;min-height:38px}.chat-image{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:12px;margin:8px 0}.chat-message audio,.attachment-preview audio{max-width:100%;width:100%;margin-top:6px}.attachment-preview{padding:10px;background:#ffffff0b;border-radius:12px;display:grid;gap:6px}.attachment-preview>span{overflow-wrap:anywhere;font-size:12px}.relationship-actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.friend-row{padding:12px 0;border-bottom:1px solid #ffffff20}.friend-row>strong{font-size:15px}.chat-person{flex-wrap:wrap}.chat-message.coach-praise{border-left:3px solid #76cba0}.chat-message.coach-improve{border-left:3px solid #efbc68}#friends-open{font-size:20px}#chat-guests{font-size:14px}@media(max-width:600px){.header-actions{gap:5px}.language-switch select{max-width:97px}.topbar{gap:7px}.brand{font-size:25px}.chat-panel{max-height:88dvh;overflow:auto}.visual-tiles .tile{width:28px!important;min-width:28px!important;height:39px!important;font-size:19px!important}}

.google-signin{display:block;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:20px;padding:11px 24px;margin:12px auto;font:500 14px system-ui;min-height:44px}.google-signin[hidden]{display:none}#login-notice{max-width:360px;margin:12px auto}#google-account-note{font-size:14px;text-align:center}

#match-wait{border:1px solid #65dfb2;border-radius:16px;padding:16px;margin:14px 0;background:#123e38;color:#fff}#match-wait[hidden]{display:none}#match-wait strong{font-size:1.1rem}#match-wait p{font-size:.9rem;line-height:1.5}

.friend-chat-dialog{width:min(560px,94vw);max-height:90dvh}.friend-messages{height:min(45dvh,420px);overflow:auto;overscroll-behavior:contain;padding:8px}.friend-messages .own{margin-left:24px;background:#225c4b}#friend-form{display:flex;gap:8px}#friend-input{min-width:0;flex:1}#friend-messages audio{max-width:100%}#friends-open{position:relative}#friend-badge{position:absolute;top:-4px;right:-4px}.friend-row button{white-space:normal}

/* Keep suit cues legible on narrow racks and inactive discard piles. */
.rack-group>.tile small{font-size:clamp(8px,1.4cqw,12px);font-weight:900;margin-top:3px}.pile-top>.tile small,.opponent-discard .tile small{font-size:9px;font-weight:900}.table-pile:disabled,.opponent-discard .tile{opacity:1}.tile.joker{background:linear-gradient(#fffef5,#fff0c2)}

/* Live turn progress follows the server deadline; only the active seat gets a ring. */
.avatar-ring{position:relative}.avatar-ring.turn-progress{border-color:transparent!important;box-shadow:0 0 18px #72edbb44!important;--timer-color:#7cf0bd}.avatar-ring.turn-progress::after{content:"";position:absolute;inset:-5px;border-radius:50%;padding:4px;background:conic-gradient(var(--timer-color) var(--turn-angle),#ffffff20 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.avatar-ring.turn-warning{--timer-color:#ffd16b}.avatar-ring.turn-urgent{--timer-color:#ff6c70}.match-search-orbit{display:block;position:relative;width:44px;height:44px;margin:0 auto 12px;border:2px solid #ffffff20;border-radius:50%;animation:match-orbit 2.8s linear infinite}.match-search-orbit i{position:absolute;width:10px;height:10px;border-radius:50%;background:#7cf0bd;box-shadow:0 0 12px #7cf0bd80;left:15px;top:-6px}.match-search-orbit i:nth-child(2){left:32px;top:25px;background:#ffce6b}.match-search-orbit i:nth-child(3){left:-3px;top:25px;background:#d5e9ff}@keyframes match-orbit{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.match-search-orbit{animation:none}}

@property --turn-angle{syntax:"<angle>";inherits:true;initial-value:360deg}.avatar-ring.turn-progress{transition:--turn-angle .25s linear}

.friend-row>button{margin:5px 6px 0 0}.friend-presence{font-size:14px;color:#b4e7ce;margin:5px 0}.social-notice{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:12px;width:min(92vw,550px);padding:14px;background:#163e32;border:1px solid #91e4b4;border-radius:18px;box-shadow:0 8px 30px #0007}.social-notice span{flex:1}.watch-table{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.watch-seat{display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid #ffffff20;border-radius:18px;padding:14px;text-align:center;background:#21593f}.watch-seat img{width:56px;height:56px;border-radius:50%}.watch-seat p{font-size:14px}.watching-turn{border-color:#ffce6b}.watch-seat .tile{width:34px;height:47px;font-size:25px}#friends-dialog{max-height:90dvh;overflow:auto}#friends-search{width:100%;margin-bottom:12px}

.watch-hand{grid-column:1/-1;background:#805a34;border:2px solid #c9a669;border-radius:14px;padding:12px;display:flex;flex-wrap:wrap;gap:5px}.watch-hand h3{width:100%;margin:0 0 8px;font-size:16px}.watch-hand .tile{width:32px;height:45px;font-size:24px}.watch-hand .tile small{font-size:9px;margin-top:4px}

#watch-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:max(14px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom));border:0;border-radius:0;overflow:auto;background:radial-gradient(ellipse at top,#24563f,#102522);color:#f0f5ef}#watch-dialog>.dialog-heading,#watch-dialog>.caption,#watch-status,.spectator-surface{max-width:960px;margin-left:auto;margin-right:auto}#watch-dialog>.dialog-heading{position:sticky;top:0;z-index:5;background:#173e32;padding-bottom:8px}#watch-dialog h2{font-size:20px}.spectator-board{margin:42px 0 38px;height:355px;border-radius:140px 140px 95px 95px}.spectator-seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:130px;text-align:center;z-index:2}.spectator-seat strong{max-width:125px;background:#163d2e;border:1px solid #77956b;border-radius:6px;padding:3px 7px;font-size:14px;overflow-wrap:anywhere}.spectator-seat small{font-size:12px;color:#c3ddc7}.spectator-seat .avatar-ring{width:62px;height:62px}.spectator-seat-0{bottom:-25px;left:50%;transform:translateX(-50%)}.spectator-seat-1{right:7px;top:115px}.spectator-seat-2{top:-24px;left:50%;transform:translateX(-50%)}.spectator-seat-3{left:7px;top:115px}.spectator-center{position:absolute;left:50%;top:125px;transform:translateX(-50%);display:flex;gap:16px;align-items:center;text-align:center}.spectator-center small{font-size:12px;display:block;margin:5px 0}.spectator-indicator .tile{width:34px;height:48px;font-size:25px}.spectator-stock .stock-pile{font-weight:850;color:#334335;font-size:20px;width:36px;height:50px;margin:auto}.spectator-pile{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}.spectator-pile .tile{width:30px;height:42px;font-size:24px}.spectator-pile .tile small{font-size:8px;margin-top:3px}.spectator-pile>small{font-size:11px;color:#c8dcc8}.spectator-pile-0{right:22%;bottom:18px}.spectator-pile-1{right:22%;top:22px}.spectator-pile-2{left:22%;top:22px}.spectator-pile-3{left:22%;bottom:18px}.spectator-phase{font-size:17px;font-weight:750;margin:12px 0}.spectator-rack{margin:8px 0 16px}.spectator-audience,.table-audience{font-size:14px;color:#d5e7d1;background:#143c2c;border:1px solid #608f72;border-radius:10px;padding:10px;overflow-wrap:anywhere}.table-audience{margin:40px 0 0}.spectator-events,.spectator-chat{margin:14px 0;padding:12px;border:1px solid #466453;border-radius:12px;font-size:14px}.spectator-events ol{padding-left:24px}.spectator-events li{margin:7px 0}.spectator-chat p{margin:9px 0}.watch-action{animation:watch-tile .65s ease-out}@keyframes watch-tile{from{transform:translateY(-13px) scale(1.12);filter:brightness(1.3);box-shadow:0 0 16px #ffda7b}to{transform:none}}@media(max-width:400px){.spectator-seat{max-width:92px}.spectator-seat strong{max-width:92px;font-size:12px}.spectator-seat .avatar-ring{width:53px;height:53px}.spectator-center{gap:10px}.spectator-seat-1{right:0}.spectator-seat-3{left:0}}@media(prefers-reduced-motion:reduce){.watch-action{animation:none}}

.session-bar{flex-wrap:wrap}.result-dialog{position:relative;width:min(94vw,760px);max-height:92dvh;overflow:auto;text-align:center;padding:30px 18px;border:2px solid #edc36e;border-radius:26px;background:radial-gradient(ellipse at top,#347354,#102b25 75%);color:#fff9de;box-shadow:0 0 80px #ffca6633}.result-dialog::backdrop{background:#041b16bb;backdrop-filter:blur(6px)}.result-close{position:absolute;right:10px;top:10px;z-index:3}.result-trophy{font-size:58px;margin:6px;animation:trophy-arrive .7s cubic-bezier(.2,1.5,.5,1)}.result-dialog h2{font-size:clamp(24px,6vw,38px);margin:12px 0}.winning-hand{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 12px;padding:24px 6px;margin:18px 0;background:linear-gradient(#966e42,#694627);border:2px solid #caa368;border-radius:16px;position:relative}.winning-group{display:flex;gap:3px;border-bottom:3px solid #f2cd79;padding-bottom:8px}.winning-tile{width:clamp(27px,6vw,45px);height:clamp(39px,8vw,62px);font-size:clamp(23px,5vw,32px);animation:win-deal .65s both;animation-delay:calc(var(--deal-order)*.065s)}.winning-tile small{font-size:8px;margin-top:5px}#result-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:24px}#result-confetti i{position:absolute;left:var(--x);top:-20px;width:8px;height:15px;background:hsl(var(--hue) 85% 65%);animation:win-confetti 2.5s var(--delay) ease-out both}.leaderboard-scroll{overflow:auto}.leaderboard-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}.leaderboard-table th,.leaderboard-table td{padding:12px 7px;text-align:left;border-bottom:1px solid #ffffff20}.leaderboard-table tr:nth-child(-n+3) td:first-child{color:#ffd06c;font-weight:900}.leaderboard-you{background:#ffffff12;color:#ffe29a}@keyframes win-deal{from{opacity:0;transform:translateY(55px) rotate(-12deg) scale(.6)}to{opacity:1;transform:none}}@keyframes trophy-arrive{from{transform:scale(.2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}@keyframes win-confetti{to{transform:translateY(65vh) rotate(560deg);opacity:0}}@media(prefers-reduced-motion:reduce){.winning-tile,.result-trophy,#result-confetti i{animation:none}#result-confetti{display:none}}
.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.65rem}.result-actions button{min-width:140px}#result-rematch-status{color:#ffcfb8}

.chat-audio-player{padding:10px;border:1px solid #ffffff25;border-radius:12px;background:#102b2580;margin-top:8px}.chat-audio-actions{display:flex;flex-wrap:wrap;gap:7px}.chat-audio-actions button{font-size:13px;min-height:44px;padding:8px 10px}.audio-filename{display:block;font-size:13px;overflow-wrap:anywhere}.chat-image{min-height:40px}
/* Attachment composer must fit above the iPhone browser chrome/keyboard. */
#friend-chat-dialog[open]{display:flex;flex-direction:column;gap:8px;height:min(820px,90dvh);height:min(820px,90dvh,var(--chat-available,90dvh));max-height:var(--chat-available,90dvh);overflow:auto;padding:16px}
#friend-chat-dialog>.dialog-heading{flex:none;margin:0;gap:10px}#friend-chat-title{font-size:22px;overflow-wrap:anywhere;margin:0}#friend-chat-close{flex-shrink:0}
#friend-chat-dialog>.caption{font-size:12px;flex:none;margin:0}#friend-messages{flex:1 1 220px;height:auto;min-height:70px;overflow:auto;padding:5px}#friend-chat-dialog>.emoji-tools,#friend-chat-dialog>.friend-media-tools{flex:none;display:flex;gap:6px;flex-wrap:wrap}#friend-chat-dialog>.emoji-tools{position:relative}#friend-chat-dialog .emoji-picker{position:absolute;bottom:100%;z-index:3;max-height:160px;overflow:auto}
#friend-chat-dialog .friend-media-tools button,#friend-emoji{min-height:40px;padding:7px 10px;font-size:14px}#friend-attachment-preview{flex:none;max-height:170px;overflow:auto;padding:8px;gap:4px}#friend-attachment-preview .chat-image{max-height:100px;max-width:100%;width:auto;object-fit:contain;margin:0 auto}#friend-attachment-preview>a{display:block;max-height:100px}#friend-attachment-preview>span{font-size:12px}#friend-attachment-preview>button{justify-self:start;min-height:32px;padding:4px 8px;font-size:12px}#chat-attachment-preview .chat-image{max-height:120px}
#friend-form{flex:none;align-items:stretch;margin:0}#friend-form #friend-send{width:auto;flex:0 0 auto;margin:0;min-height:44px;padding:10px 14px}#friend-input{resize:vertical;min-height:44px;max-height:100px;font-size:16px}#friend-status{flex:none;font-size:12px;line-height:1.35;margin:0;overflow-wrap:anywhere}#friend-attachment-preview .chat-audio-player{margin:0;padding:4px}#friend-attachment-preview audio{margin:0}
.notification-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid #ffffff20;font-size:1rem}.notification-option input[type=checkbox]{width:24px;height:24px;accent-color:#ebc76e}.notification-option input[type=range]{max-width:48%;accent-color:#ebc76e}#notification-test{margin-top:18px}#activity-notice{z-index:1100}#notification-dialog{max-width:440px}
.chat-notice[popover]{margin:0;bottom:auto;right:auto}.chat-notice::backdrop{background:transparent;pointer-events:none}.notification-option select{max-width:48%;background:#193c30;color:#fff;border:1px solid #526950;border-radius:10px;padding:10px;min-height:44px}
.push-settings{margin-top:20px;border-top:1px solid #ffffff30;padding-top:12px}.push-settings button{margin:12px 6px 0 0}.push-settings .caption{font-size:14px}
.guest-start{background:#ffce6b;color:#17382c;border:0}.guest-banner{display:flex;align-items:center;gap:12px;border:1px solid #b69b5c;padding:12px;border-radius:14px;margin:10px 0 25px;background:#244839}.guest-banner p{font-size:14px;line-height:1.4;flex:1}.guest-banner strong{color:#ffce6b}.guest-banner button{flex-shrink:0}[data-guest=true] #friends-open,[data-guest=true] #chat-open,[data-guest=true] .inline-coach,[data-guest=true] .realtime-coach,[data-guest=true] #leaderboard-open,[data-guest=true] #profile-fields,[data-guest=true] #notifications-open{display:none!important}[data-guest=true] .opponent{pointer-events:none}@media(max-width:600px){.guest-banner{flex-wrap:wrap}.guest-banner p{flex-basis:100%}.welcome:has(#guest-start:not([hidden])){inset:40px 10% 12px;overflow-y:auto;padding:12px;gap:8px}.welcome:has(#guest-start:not([hidden])) button{min-height:44px;margin:0;font-size:15px;padding:10px}.welcome:has(#guest-start:not([hidden])) p{font-size:13px}}
.admin-table{overflow-x:auto;margin:14px 0}#auth-stats{margin:18px 0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}#auth-methods,#auth-days{font-size:14px}

.whatsapp-signin{background:#e7fff0;color:#075e3c;border-color:#75cc98}#whatsapp-form{display:grid;gap:16px}#whatsapp-form[hidden]{display:none}#whatsapp-code{letter-spacing:.25em;font-size:1.5rem}#whatsapp-status:empty{display:none}.welcome:has(#whatsapp-welcome:not([hidden])){overflow-y:auto}.welcome .google-signin{margin-top:8px;margin-bottom:8px}

/* Separate chat and profile actions at each seat. */
.opponent>.avatar-ring{padding:0;background:transparent;border:0;min-width:0;min-height:0;cursor:pointer}
.opponent>.player-name{display:block;padding:4px 6px;margin:auto;background:transparent;border:0;min-height:32px;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;cursor:pointer}
.opponent>.player-name:focus-visible,.opponent>.avatar-ring:focus-visible{outline:2px solid #ffe49a;outline-offset:3px}
.give-up{border:1px solid #dba58d;background:#56352c;color:#fff3eb;font-weight:700}
#rack .rack-group{grid-row:1}#rack .rack-row{position:relative;min-height:max(44px,4.5cqw)}

#opponents .opponent{pointer-events:auto;text-align:center}#opponents .opponent.seat-2{transform:translateX(-50%)}

/* Redundant suit coding: vivid edge, tinted face, dark ink and shape. */
.tile.c0{--suit-edge:#e51b38;--suit-face:#ffe5e8;--suit-ink:#b00024}
.tile.c1{--suit-edge:#0879ff;--suit-face:#dcedff;--suit-ink:#004db3}
.tile.c2{--suit-edge:#ffc400;--suit-face:#fff0a3;--suit-ink:#704600}
.tile.c3{--suit-edge:#141c27;--suit-face:#e4e8ee;--suit-ink:#10151d}
.tile:is(.c0,.c1,.c2,.c3),.tile:is(.c0,.c1,.c2,.c3):hover:not(:disabled){color:var(--suit-ink);background:linear-gradient(120deg,#fff 0%,var(--suit-face) 75%);border-top:4px solid var(--suit-edge);font-weight:900;text-shadow:none}
#rack .tile small{font-size:clamp(9px,1.6cqw,13px);font-weight:900;margin-top:3px}
.tile:disabled{opacity:1}

.coach-feedback.best{background:#174c34;color:#d7ffe5;border:2px solid #5ddb9b}.coach-feedback.small{background:#514523;color:#ffedb8}.coach-feedback.mistake{background:#653914;color:#ffe1b6;border:2px solid #ffac59}.coach-feedback.blunder,.move-alert{background:#681f2b;color:#fff1f2;border:2px solid #ff7786;font-weight:850}.move-alert{padding:12px 14px;margin:8px 0;border-radius:12px;font-size:16px;line-height:1.4}.move-alert.attention{animation:blunder-attention .7s ease-in-out 3}.evaluation-note{font-size:14px;color:#adc4b9;grid-column:1/-1;margin:4px 0}.coach-feedback.blunder{font-size:18px;padding:12px}.visual-advice.improve{border-width:2px}@keyframes blunder-attention{50%{box-shadow:0 0 0 5px #ff778655}}@media(prefers-reduced-motion:reduce){.move-alert.attention{animation:none}}

#match-progress{display:block;width:min(100%,280px);height:10px;margin:14px auto;border:0;border-radius:999px;overflow:hidden;background:#ffffff20;accent-color:#ffce6b}#match-progress::-webkit-progress-bar{background:#ffffff20;border-radius:999px}#match-progress::-webkit-progress-value{background:linear-gradient(90deg,#64d9ae,#ffce6b);border-radius:999px;transition:width .25s linear}#match-progress::-moz-progress-bar{background:#ffce6b;border-radius:999px}@media(prefers-reduced-motion:reduce){#match-progress::-webkit-progress-value{transition:none}}

/* Compact social and finishing controls */
#friends-open{font-size:22px;line-height:1}.header-actions #leaderboard-open{font-size:21px;line-height:1}.draw-control.finish-ready{outline:3px solid #f6d584;outline-offset:4px;box-shadow:0 0 22px #f6d58455}.draw-control.finish-ready .stock-pile{filter:brightness(1.25)}.rack-section .drag-tip{font-size:12px;color:#d7c992}.profile-dialog #notifications-open{width:100%;margin:12px 0}.notification-option input[type=checkbox]{min-width:24px}

.message-reactions{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:4px;position:relative;width:max-content;max-width:100%}.reaction-chip{display:inline-flex;align-items:center;min-height:23px;padding:1px 7px;border:1px solid #ffffff25;border-radius:18px;background:#ffffff0b;color:#dce9dc;font-size:12px;font-weight:500;white-space:nowrap}.reaction-chip.selected{border-color:#e8c67788;background:#ac85482e}.message-reactions button.reaction-chip{min-height:23px}.message-reactions .reaction-add{min-height:25px;min-width:25px;padding:0 4px;border:0;background:transparent;color:#a2b8ac;font-size:19px;line-height:1}.message-reactions .reaction-add:hover{color:#ffce6b;background:#ffffff12}.reaction-picker{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;gap:2px;padding:4px;border:1px solid #7f99867a;border-radius:24px;background:#193a31;box-shadow:0 8px 24px #0008;z-index:5}.reaction-picker button{min-height:32px;min-width:33px;padding:2px;border:0;border-radius:50%;background:transparent;font-size:19px;line-height:1}.reaction-picker button[aria-pressed=true]{background:#d3a94c69}.reaction-picker button:hover{background:#ffffff2a}.reaction-chip:focus-visible,.reaction-add:focus-visible,.reaction-picker button:focus-visible{outline:2px solid #f3cd72;outline-offset:2px}
.game-sound-control{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 9px;font-size:14px}.game-sound-control input{width:20px;height:20px;accent-color:#ebc76e}
.tutorial-entry{display:grid;gap:.65rem;margin:1rem 0;padding:1rem;border-radius:1rem;background:#153e37}.tutorial-entry button{min-height:46px}.tutorial-dialog{width:min(94vw,540px);max-height:min(86dvh,780px);border:1px solid #b39350;border-radius:20px;background:#102f2a;color:#f7edcf;padding:1.1rem;box-shadow:0 20px 65px #061a18b8}.tutorial-dialog::backdrop{background:#071c1bc9}.tutorial-dialog .tutorial-body{overflow:auto}.tutorial-progress{font-size:.9rem;color:#e0bd76;margin:.6rem 0}.tutorial-dialog progress{width:100%;accent-color:#e8be6c;height:10px}.tutorial-dialog h3{font-size:1.35rem;margin:1.1rem 0 .4rem}.tutorial-dialog p{line-height:1.5}.tutorial-options{display:grid;gap:.65rem;margin:1rem 0}.tutorial-choice{width:100%;min-height:50px;padding:.7rem 1rem;border:1px solid #709788;border-radius:12px;background:#20463d;color:#fff;text-align:left;font:inherit}.tutorial-choice:disabled{opacity:1}.tutorial-choice.correct{border-color:#9dde9c;background:#225a35}.tutorial-choice.incorrect{border-color:#e89b8d;background:#683e39}.tutorial-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem}.tutorial-actions button{min-height:44px}.tutorial-dialog [disabled]{cursor:default}#tutorial-feedback{min-height:3em;color:#dceba9}
.tutorial-stage{min-height:210px;padding:1rem;margin:1rem 0;border-radius:18px;background:radial-gradient(circle at 50% 25%,#257451,#104936);border:1px solid #84ad7f;display:grid;align-content:center;gap:1rem}.tutorial-table{display:flex;justify-content:space-around;align-items:center;gap:1rem}.tutorial-target{border:2px dashed #d6bc73;background:#19443b;min-width:90px;min-height:68px}.tutorial-stock{width:64px;min-width:64px;background:#d9b76d;color:#20342b;border:5px double #34452e;font-weight:900}.tutorial-rack,.tutorial-slots{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}.tutorial-rack{padding:.6rem;background:#3b2923;border-radius:12px;border-bottom:6px solid #bd9660}.tutorial-tile{width:48px;min-width:48px;height:66px;padding:0;border-radius:6px;border:2px solid #d8c7a0;background:#f9f1df;color:#1a1714;font-size:26px;font-weight:850;touch-action:manipulation}.tutorial-tile.red{color:#ba3450}.tutorial-tile.blue{color:#1874b9}.tutorial-tile.gold{color:#b88420}.tutorial-tile.selected{outline:3px solid #ffdc7b}.tutorial-slots .tutorial-slot{width:60px;min-width:60px;height:75px}.tutorial-slot.filled{padding:2px;border-style:solid}.tutorial-slot .tutorial-tile{pointer-events:auto}.tutorial-table+.tutorial-rack{margin-top:.3rem}.tutorial-stage .tutorial-table{min-height:90px}.tutorial-stage .tutorial-table button{font-size:15px}.tutorial-table .tutorial-stock{font-size:19px!important}.tutorial-stage .tutorial-table+.tutorial-rack+.tutorial-target{min-height:45px}.tutorial-table+.tutorial-rack .tutorial-slot{height:66px;min-width:48px}

.tutorial-rack>.tutorial-tile{touch-action:none;user-select:none;-webkit-user-select:none}.tutorial-rack>.tutorial-tile.is-dragging{position:relative;z-index:10;transform:translate(var(--drag-x),var(--drag-y));pointer-events:none;box-shadow:0 10px 24px #0009}.tutorial-slot,.tutorial-discard,.tutorial-stock{touch-action:none}

#tutorial-stage .is-dragging{position:relative;z-index:10;transform:translate(var(--drag-x),var(--drag-y))!important;pointer-events:none;box-shadow:0 10px 24px #0009}#tutorial-stage .tutorial-stock,#tutorial-stage .tutorial-tile{-webkit-touch-callout:none;user-select:none;touch-action:none}

/* OkeyJoy brand lockup */
.topbar .brand{display:flex;align-items:center;gap:7px;flex-shrink:0;letter-spacing:-.7px}.brand .brand-mark{width:30px;height:30px;object-fit:contain;flex:none}.brand .brand-wordmark{color:#f6f6ed;white-space:nowrap;line-height:1.1}.brand .brand-wordmark b{color:var(--gold);font-weight:inherit}.brand small{display:none}

.joy-feedback{display:grid;gap:.45rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(127,158,143,.3);font-size:.85rem}.joy-feedback-controls,.joy-stars{display:flex;gap:.4rem;align-items:center}.joy-feedback button{min-width:2.4rem;min-height:2.4rem;border-radius:.65rem;border:1px solid rgba(127,158,143,.5);background:transparent;color:inherit;cursor:pointer}.joy-feedback button.selected,.joy-feedback button[aria-pressed="true"]{background:#a8efce;color:#0d3830}.joy-stars button{font-size:1.45rem;line-height:1;color:#e8ab32}.joy-stars button[aria-pressed="true"]{color:#0d3830}
/* Account coach control is shared by both frontends. */
html[data-coach-enabled="false"] .coach-drawer,html[data-coach-enabled="false"] .native-coach-bar,html[data-coach-enabled="false"] .native-nav button[aria-label="Coach"],html[data-coach-enabled="false"] #coach-feedback,html[data-coach-enabled="false"] #move-alert{display:none!important}
/* Move grades remain visible between paid tip openings; disabling Coach still hides them. */
html:not([data-coach-tip-open="true"]) #native-coach-tip{display:none!important}
#player-settings-dialog textarea{width:100%;min-height:90px;font:inherit}#coach-consent-dialog p{font-size:1rem;line-height:1.6}#coach-consent-dialog button{margin:8px 8px 0 0}


/* Chat notification: tap the message to open it or use the compact × to dismiss it. */
.chat-notice{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:start;gap:4px 8px;padding:8px 8px 8px 16px}
.chat-notice-open{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:4px;padding:5px 0;border:0;background:transparent;color:inherit;text-align:left;box-shadow:none}
.chat-notice-open:hover,.chat-notice-open:focus-visible{background:transparent;outline:0}
.chat-notice-dismiss{display:grid;place-items:center;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:#18372b12;color:#355648;font-size:22px;line-height:1;box-shadow:none}
.chat-notice-dismiss:hover,.chat-notice-dismiss:focus-visible{background:#18372b20;color:#18372b;outline:2px solid #18372b35;outline-offset:1px}