@charset "UTF-8";

:root{--felt:#123e36;--felt-dark:#0c2b26;--felt-light:#1d5146;--ivory:#fcf8ee;--paper:#f5f0e5;--ink:#173c33;--muted:#768177;--gold:#e8c985;--pistachio:#d2e5b7;--red:#b84f49;--line:#dfded2;--radius:19px;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Arial,"Segoe UI",sans-serif;color:var(--ink);background:var(--felt-dark);font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{font-size:14px;overscroll-behavior:none}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer;touch-action:manipulation}button,input{outline:none}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d4a34d;outline-offset:3px}button:disabled{cursor:default;opacity:.42}button:active:not(:disabled){transform:translateY(1px)}input{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;min-height:48px;padding:12px 14px;background:#fffcf5;color:var(--ink);font-size:16px}input::placeholder{color:#9a9f91}input:focus{border-color:#96b9a5;box-shadow:0 0 0 3px #b5d5bf33}input[dir=ltr]{text-align:left}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{height:22px;width:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.icon-button{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:50%;background:transparent;color:inherit}.button{min-height:48px;padding:12px 17px;border-radius:13px;font-weight:700;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:background .18s,opacity .18s,transform .18s;line-height:1.2}.button-primary{background:var(--pistachio);color:#173d30;box-shadow:0 3px 0 #a6bf8738}.button-primary:hover:not(:disabled){background:#dcecc5}.button-ink{background:var(--felt);color:var(--ivory)}.button-soft{background:#eeeade;color:#52604c}.button-outline{background:transparent;border:1px solid #cdd0c2;color:var(--ink)}.muted{color:var(--muted);line-height:1.65}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gold);margin:0}.field-label{display:block;margin:18px 0 7px;font-size:12px;font-weight:700}.wordmark{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:-.025em}.wordmark-suit{font-size:24px;line-height:1;color:var(--gold)}

/* An inviting, quiet lobby. */
.home-screen{position:relative;max-width:720px;min-height:100dvh;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 45% 20%,#265b4b 0%,#123e36 52%,#0d302a 100%);color:var(--ivory);padding-bottom:max(18px,var(--safe-bottom))}.home-screen::before,.game-screen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.33' filter='url(%23n)'/%3E%3C/svg%3E")}.home-top{position:relative;padding:max(23px,env(safe-area-inset-top)) 24px 0;display:flex;align-items:center;justify-content:space-between}.home-edition{font-size:11px;color:#b4c8b7;padding:6px 10px;border:1px solid #8da99240;border-radius:99px}.home-content{position:relative;width:min(100%,440px);margin:auto;padding:0 23px}.hero{text-align:center;padding-top:25px}.hero-cards{position:relative;height:161px;width:235px;margin:0 auto 16px;isolation:isolate}.hero-cards::after{content:"";position:absolute;width:200px;height:29px;border-radius:50%;bottom:-5px;left:15px;background:#051d1563;filter:blur(10px);z-index:-1}.hero-card{position:absolute;left:74px;top:4px;width:94px;height:136px;background:linear-gradient(135deg,#fffdf7,#eee7d7);color:var(--ink);border:1px solid #dacfbc;border-radius:11px;box-shadow:0 8px 20px #061a1757;transform-origin:50% 90%;direction:ltr;text-align:left;overflow:hidden}.hero-card-left{transform:rotate(-20deg) translate(-42px,3px);z-index:1}.hero-card-right{transform:rotate(21deg) translate(41px,4px);z-index:2;color:var(--red)}.hero-card-front{transform:rotate(-3deg) translate(0,10px);z-index:3;color:var(--red)}.hero-rank{position:absolute;top:9px;left:9px;font-family:Georgia,serif;font-size:24px;font-weight:700;line-height:.85}.hero-rank span{display:block;font-family:Arial,sans-serif;font-size:20px;margin-top:4px}.hero-pip{position:absolute;inset:35px 0 0;display:grid;place-items:center;font-size:64px;line-height:1}.hero-corner{position:absolute;right:7px;bottom:9px;transform:rotate(180deg);font-size:15px;font-family:Georgia,serif;font-weight:700}.hero-orbit{position:absolute;color:var(--gold);font-size:23px}.orbit-one{right:0;top:28px}.orbit-two{left:3px;bottom:36px;font-size:30px;color:#c6d8b5}.hero h1{font-size:47px;letter-spacing:-.07em;font-weight:800;line-height:1.08;margin:11px 0 12px}.title-dot{color:var(--gold)}.hero-description{color:#c8d8c9;font-size:15px;line-height:1.6;margin:0 0 25px}.start-card{background:var(--ivory);border:1px solid #fff8e967;border-radius:24px;padding:18px;color:var(--ink);box-shadow:0 15px 40px #0620183b}.name-field{display:flex;align-items:center;gap:13px;margin-bottom:15px}.name-field label{font-size:12px;font-weight:700;white-space:nowrap;color:#737d6b}.name-field input{min-height:42px;padding:10px 12px;background:#efecdf;border:1px solid #e3dfd1;font-size:15px}.start-main{width:100%;min-height:66px;text-align:right;justify-content:flex-start;background:var(--felt);color:var(--ivory);border-radius:15px;box-shadow:none}.start-main:hover:not(:disabled){background:var(--felt-light)}.start-main>.icon{color:var(--gold);margin-inline-end:3px}.start-main>span{display:flex;flex-direction:column;gap:5px}.start-main strong{font-size:17px}.start-main small{font-size:11px;font-weight:400;color:#c4d4bf}.start-main .arrow-icon{margin-inline-start:auto;color:var(--pistachio)}.start-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}.start-option{display:flex;align-items:center;flex-direction:column;min-height:93px;padding:12px 8px;border:1px solid #dedecf;border-radius:15px;background:#faf7ec;color:var(--ink);transition:background .15s}.start-option:hover{background:#eeeddf}.start-option>.icon{height:23px;width:23px;margin-bottom:8px;color:#667b61}.start-option strong{font-size:13px}.start-option small{color:#939885;font-size:10px;margin-top:5px}.resume-button{width:100%;min-height:43px;background:#e7edda;margin-top:12px;font-size:12px}.resume-button span{margin-inline-start:auto}.home-primer{margin:16px 2px 0;font-size:12px;color:#bfcec2;border-block:1px solid #adc4ac23}.home-primer summary{list-style:none;padding:16px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.home-primer summary::-webkit-details-marker{display:none}.home-primer summary>span{font-size:17px;color:var(--gold);transition:transform .2s}.home-primer[open] summary>span{transform:rotate(45deg)}.home-primer>div{color:#c5d5c5;font-size:12px;line-height:1.85;padding-bottom:10px}.home-primer p{margin:0 0 8px}.home-footer{font-size:10px;color:#8ea991;text-align:center;padding-top:12px}.home-footer>span{display:block;letter-spacing:7px;margin-bottom:7px;color:#bfc4a6}.home-footer i{font-style:normal;color:#cb9b85}.online-panel{background:var(--ivory);border-radius:21px;padding:19px;color:var(--ink);margin-top:15px}.section-kicker{display:flex;align-items:center;gap:8px}.section-kicker .icon{color:#7e9765}.section-kicker h2{font-size:16px;margin:0;line-height:1.45}.online-panel>.muted{font-size:12px;margin:9px 0}.online-panel>.button{width:100%;margin-top:12px}.or-divider{position:relative;text-align:center;border-top:1px solid var(--line);margin:24px 0 20px}.or-divider span{position:relative;top:-9px;background:var(--ivory);padding:0 10px;color:#8c9482;font-size:11px}.join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:-8px}.join-row input{text-align:center;letter-spacing:.1em}.online-status{font-size:12px;line-height:1.8;margin:12px 0 0;overflow-wrap:anywhere}.room-info{border-radius:14px;background:#edf0e1;padding:17px;text-align:center;margin-top:14px}.room-info>.muted{display:block;font-size:12px}.room-info>strong{display:block;font-size:30px;letter-spacing:.16em;margin:10px 0 16px}.room-share{display:grid;grid-template-columns:1fr 1fr;gap:8px}.room-share .button{font-size:12px}

/* The table owns the free space. The entire hand stays within thumb reach. */
.game-screen{position:relative;max-width:720px;height:100dvh;min-height:560px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#28584a 0,#153e35 65%,#12362f 100%);color:var(--ivory);isolation:isolate}.game-screen>*{position:relative}.topbar{padding:max(11px,env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#0b302962;border-bottom:1px solid #e5efde12;flex-wrap:wrap;row-gap:2px}.opponent-profile{display:flex;align-items:center;gap:10px;min-width:0}.avatar{width:43px;height:43px;border-radius:15px;background:linear-gradient(150deg,#d1dcc5,#9bb493);color:#315644;display:grid;place-items:center;font-size:22px;font-weight:700;box-shadow:inset 0 0 0 1px #e4ead14d}.opponent-copy{min-width:0}.opponent-name-row{display:flex;align-items:center;gap:8px}.opponent-name-row>strong{font-size:15px;max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count-pill{background:#eef4dc15;color:#b9cebc;border-radius:7px;padding:4px 6px;font-size:10px;white-space:nowrap}.opponent-score-row{display:flex;gap:7px;align-items:center;font-size:10px;color:#91b29b;margin-top:6px}.opponent-score-row b{color:var(--gold);font-weight:700}.score-separator{opacity:.5}.topbar-actions{display:flex;gap:0;margin-inline-end:-5px;color:#c9d9c4}.topbar-actions .icon-button{border:1px solid #d8e7c520;border-radius:13px}.opponent-comment{width:100%;max-height:30px;overflow:hidden;color:#c4d4b9;font-size:11px;padding-inline-start:53px;line-height:1.6}.opponent-comment:empty{display:none}.turn-strip{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 17px 8px}.turn-label{font-size:10px;font-weight:700;padding:5px 9px;border-radius:99px;background:#d8e8be16;border:1px solid #b3d7a22b;color:#d4e2c5;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.turn-label.is-my-turn{color:var(--ink);background:var(--pistachio);border-color:transparent}.stepper{display:flex;gap:8px;align-items:center;direction:rtl}.step{display:flex;align-items:center;gap:4px;font-size:10px;color:#779d85;white-space:nowrap}.step i{display:grid;place-items:center;font-style:normal;font-size:8px;width:14px;height:14px;border:1px solid #72907955;border-radius:50%;color:#71947c}.step.active{color:var(--gold);font-weight:700}.step.active i{background:var(--gold);color:var(--felt);border-color:var(--gold)}.step.done{color:#b5cca9}.step.done i{color:#c9deb7;border-color:#b5cca9}.table-scroll{flex:1 1 auto;min-height:80px;padding:0 17px 8px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#86a38744 transparent}.table-zone{padding:9px 0 4px}.opponent-zone{min-height:72px}.own-zone{min-height:87px}.zone-heading{display:flex;align-items:center;gap:11px;font-size:10px;color:#82a58a;margin-bottom:11px;user-select:none}.own-zone .zone-heading{color:#c3d5b7}.zone-line{height:1px;background:#bfd3b31c;flex:1}.zone-suit{color:var(--gold);font-size:14px}.meld-area{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;min-height:48px}.meld-empty{padding:8px 0;margin:0;color:#779b80;font-size:11px}.own-zone .meld-empty{color:#99b298}.meld{position:relative;border:1px solid #d7e6c322;background:#071e1924;border-radius:11px;padding:7px;max-width:100%;cursor:pointer;transition:border-color .18s,background .18s}.meld:hover{border-color:#c6dbaa77}.meld.is-target,.meld.target,.meld.highlight{border-color:var(--gold);background:#d5d2a515;box-shadow:0 0 0 2px #e8c9851a}.meld-header{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#b7cbb0;line-height:1.4;margin-bottom:4px}.meld-meta{font-size:9px;color:var(--gold)}.meld-cards{display:flex;direction:ltr;align-items:center;max-width:100%;overflow:hidden;padding:1px 0 2px}.meld-cards>.card{height:58px;width:42px;min-width:42px;margin-inline-start:-19px;border-radius:6px;cursor:inherit;flex-shrink:0;box-shadow:1px 1px 3px #061d1b40}.meld-cards>.card:first-child{margin-inline-start:0}.meld-cards .card-rank{font-size:14px;top:5px;inset-inline-start:5px}.meld-cards .card-suit{font-size:12px}.meld-cards .card-center{font-size:24px}.meld-cards .card-bottom{font-size:9px}.meld-cards .wild-role{display:none}.meld-cards>.card:nth-last-child(1){margin-inline-end:0}.pile-dock{flex-shrink:0;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;padding:8px 25px 7px;gap:10px;max-width:470px;width:100%;margin-inline:auto}.pile-button{display:flex;align-items:center;flex-direction:column;background:transparent;padding:0;min-height:88px;color:var(--ivory);border-radius:12px}.pile-button:hover:not(:disabled)>.deck-stack,.pile-button:hover:not(:disabled)>.discard-top{transform:translateY(-2px)}.deck-stack{display:block;position:relative;width:44px;height:60px;margin-bottom:6px;transform:rotate(-5deg);transition:transform .18s;isolation:isolate}.deck-stack::before,.deck-stack::after{content:"";position:absolute;inset:0;border-radius:7px;background:#afbbb0;border:1px solid #243e31;z-index:-1}.deck-stack::before{transform:translate(-3px,2px) rotate(-3deg)}.deck-stack::after{transform:translate(2px,1px) rotate(3deg)}.deck-back{position:absolute;inset:0;border-radius:7px;background:#a8b09a;border:2px solid #dcd9be;box-shadow:1px 3px 7px #031d1d60;overflow:hidden}.deck-back::before,.mini-deck::before{content:"";position:absolute;inset:3px;border:1px solid #e4ddbf91;border-radius:3px;background:repeating-linear-gradient(45deg,transparent,transparent 4px,#62786940 4px,#62786940 5px),repeating-linear-gradient(-45deg,transparent,transparent 4px,#e1daba30 4px,#e1daba30 5px)}.deck-mark{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;color:#e8e5ce;text-shadow:0 1px 2px #385444}.pile-copy{text-align:center;display:flex;flex-direction:column;gap:3px}.pile-copy strong{font-size:10px;font-weight:700;color:#d8e1c9}.pile-copy small{font-size:8px;color:#82a48d}.discard-top{display:grid;place-items:center;width:44px;height:60px;border-radius:7px;border:1px dashed #9eb8a261;background:#bfd5b505;margin-bottom:6px;transform:rotate(4deg);transition:transform .18s}.empty-discard{font-size:25px;color:#93ad9280;font-weight:400}.discard-top>.card{height:60px;width:44px;min-width:44px;cursor:inherit}.discard-top .card-rank{font-size:15px}.discard-top .card-center{font-size:27px}.discard-top .card-bottom{font-size:10px}.side-pile-area{display:flex;align-items:center;flex-direction:column;padding-bottom:1px}.side-piles{display:flex;position:relative;justify-content:center;align-items:end;gap:5px;height:58px;margin-bottom:9px}.mini-deck{position:relative;height:41px;width:29px;border:2px solid #b4bda1;background:#6d8976;border-radius:5px;transform:rotate(-8deg);box-shadow:0 2px 0 #243f31,0 4px 0 #9aa48c}.mini-deck:nth-child(2){transform:rotate(9deg)}.mini-deck>span{position:absolute;inset:0;display:grid;place-items:center;color:#e3e9ce;font-size:10px;font-weight:700}.mini-deck.taken,.mini-deck.used{opacity:.18;box-shadow:none}.side-empty{font-size:10px;color:#86a68b}.game-notice{margin:0;padding:5px 18px 9px;flex-shrink:0;text-align:center;color:#c7d8bd;font-size:11px;line-height:1.55;min-height:29px}.game-notice.error{color:#f6c2ab}.game-notice.success{color:var(--gold)}

/* Cards retain readable size, even after taking a large discard pile. */
.hand-panel{flex-shrink:0;color:var(--ink);background:var(--ivory);border-radius:22px 22px 0 0;border-top:1px solid #ffffffc9;box-shadow:0 -8px 25px #051f1e22;padding:11px 14px max(11px,var(--safe-bottom));overflow:hidden}.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;padding:0 3px}.hand-title{display:flex;align-items:center;gap:9px}.hand-title>strong{font-size:14px;font-weight:700}.hand-count{font-size:10px;color:#919885;padding:4px 7px;background:#eeeddf;border-radius:6px}.my-score-wrap{display:flex;gap:4px;align-items:baseline;color:#839178;font-size:10px}.my-score-wrap>b{font-family:Georgia,serif;font-size:23px;line-height:1;color:#506843}.hand-toolbar{display:flex;justify-content:space-between;gap:6px;min-height:43px;margin:0 -2px 2px;align-items:center}.sort-group{display:flex;gap:0;padding:3px;background:#eeeddf;border-radius:10px}.tool-button{min-height:32px;padding:7px 9px;border-radius:8px;background:transparent;color:#889080;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;position:relative}.tool-button::after{content:"";position:absolute;inset:-6px 0}.tool-button .icon{height:15px;width:15px;flex-basis:15px}.tool-button.active{color:#395440;background:#fffdf5;box-shadow:0 1px 3px #5967460c}.selection-tools{display:flex;align-items:center;gap:0}.hint-button{color:#7e8c59;padding-inline:7px}.hint-button .icon{color:#9da167}.clear-button{height:36px;width:36px;min-width:36px;color:#a1a795}.clear-button .icon{width:17px;height:17px}.hand{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,74px);grid-auto-columns:48px;align-content:start;justify-content:start;gap:6px;padding:8px 3px 4px;margin:0 -2px;min-height:162px;max-height:172px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#d1d6c0 transparent;overscroll-behavior-x:contain;scroll-padding:5px}.hand::-webkit-scrollbar{height:3px}.hand::-webkit-scrollbar-thumb{background:#cfd3bb;border-radius:4px}.card{appearance:none;position:relative;display:block;flex-shrink:0;width:48px;min-width:48px;height:74px;background:linear-gradient(135deg,#fffef9,#f4eee0);color:#244036;border:1px solid #d8d2c1;border-radius:8px;padding:0;box-shadow:0 2px 2px #2a4c2520;overflow:hidden;font-family:Georgia,"Times New Roman",serif;user-select:none;text-align:start;transition:transform .16s,border-color .16s,box-shadow .16s;direction:ltr;line-height:1}.card.red{color:var(--red)}.card.black{color:#244036}.card.wild{color:#826751;background:linear-gradient(145deg,#fffae8,#ede4cf);border-color:#cbb782}.card.selected,.card.is-selected,[aria-pressed=true].card{border:2px solid #99b865;transform:translateY(-5px);box-shadow:0 4px 0 #afc78650,0 6px 10px #34452920;background:#fffef4}.card.selected::after,.card.is-selected::after{content:"";position:absolute;inset:0;border:1px solid #fefffaa6;border-radius:5px;pointer-events:none}.card.disabled{opacity:.4}.card-rank{position:absolute;top:6px;left:6px;inset-inline-start:6px;font-size:18px;font-weight:700;z-index:1;display:flex;align-items:center;flex-direction:column;gap:3px;line-height:1}.card-suit{font-family:Arial,sans-serif;font-size:15px;line-height:.8}.card-center{position:absolute;inset:17px 0 6px;display:grid;place-items:center;font-size:32px;font-family:Arial,sans-serif;pointer-events:none}.card-bottom{position:absolute;bottom:6px;right:5px;font-weight:700;font-size:11px;transform:rotate(180deg);line-height:1}.card.wild .card-center{font-size:28px}.wild-role{position:absolute;bottom:3px;inset-inline:3px;border-radius:3px;background:#ecd8a1;color:#785d38;font-size:8px;line-height:1.35;text-align:center;padding:1px;font-family:Arial,sans-serif;font-weight:700;z-index:2}.card-joker-label{font-family:Arial,sans-serif;font-size:8px;letter-spacing:.01em;writing-mode:vertical-rl;position:absolute;left:4px;top:5px;font-weight:700}.dragging{opacity:.35}.drag-ghost{position:fixed;pointer-events:none;z-index:1000;transform:rotate(-8deg);filter:drop-shadow(0 8px 12px #0004)}.action-bar{padding:5px 3px 0}.selection-status{display:flex;align-items:center;justify-content:space-between;min-height:20px;margin-bottom:5px;color:#909883;font-size:10px}.hand-scroll-hint{font-size:15px;color:#a6ae90}.action-buttons{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}.action-buttons>.button{min-height:47px;font-size:13px}.action-buttons .button-outline{background:#f8f6ec}.stage-area{flex-shrink:0;background:#f5f1e3;color:var(--ink);margin:3px 14px 10px;padding:11px 12px;border:1px solid #d4ddbd;border-radius:15px;box-shadow:0 5px 15px #09261e20;max-height:185px;overflow:auto}.stage-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px}.stage-heading>span{font-size:10px;font-weight:700;color:#708457}.stage-items{display:flex;align-items:center;gap:8px;overflow-x:auto;margin:8px 0}.stage-item{position:relative;flex-shrink:0;padding:6px;border:1px solid #d2d6bd;border-radius:9px;background:#fffdf5}.stage-item .meld-header{color:#617354}.stage-item .meld-meta{color:#8c793d}.stage-item .meld-cards>.card{height:47px;width:34px;min-width:34px;margin-inline-start:-14px}.stage-item .meld-cards>.card:first-child{margin-inline-start:0}.stage-actions{display:grid;grid-template-columns:1fr auto;gap:7px}.stage-actions>.button{min-height:38px;font-size:11px;padding:9px 13px}

/* Bottom-sheet dialogs keep complex decisions close to the hand. */
.game-dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,720px);max-width:720px;max-height:88dvh;padding:9px 22px max(20px,var(--safe-bottom));border:1px solid #fffcf3;border-radius:25px 25px 0 0;background:var(--ivory);color:var(--ink);box-shadow:0 -8px 45px #06171042;overflow:auto;animation:sheet-in .22s ease-out}.game-dialog::backdrop{background:#041b17b3;backdrop-filter:blur(3px)}.dialog-handle{height:4px;width:33px;background:#d2d6c3;border-radius:10px;margin:3px auto 19px}.game-dialog h2{font-size:23px;font-weight:700;letter-spacing:-.035em;line-height:1.3;margin:0 0 15px}.dialog-body{font-size:13px;line-height:1.75;color:#69775f}.dialog-body p{margin:0 0 12px}.dialog-body h3{font-size:14px;color:var(--ink);margin:17px 0 7px}.dialog-body strong{color:var(--ink)}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.dialog-actions>.button{flex:1;min-width:90px}.dialog-actions>button:not(.button){min-height:46px;border-radius:12px;background:var(--pistachio);color:var(--ink);padding:12px 16px;font-weight:700;flex:1}.dialog-actions>button.secondary{background:#e9e7db;color:#77816b}.dialog-option{display:block;text-align:right;padding:13px;margin:7px 0;width:100%;border:1px solid #d8ddc8;border-radius:13px;background:#fffdf5;color:var(--ink)}.dialog-option:hover{background:#f0f3e4}.dialog-option.selected{border-color:#8cab6d;background:#edf2df}.dialog-option .meld-cards{justify-content:center;margin-top:8px}.dialog-option .meld-cards>.card{margin-inline-start:4px;height:68px;width:46px;min-width:46px}.dialog-option .meld-cards>.card:first-child{margin-inline-start:0}.dialog-body .card{color:var(--ink)}.dialog-body .card.red{color:var(--red)}.dialog-body .card.wild{color:#826751}.cards-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:45dvh;overflow:auto;padding:7px 1px}.cards-grid>.card{cursor:default}.score-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12px;line-height:1.6}.score-table th{text-align:right;color:#8c987a;font-size:10px;font-weight:700;padding:8px;border-bottom:1px solid #daddc9}.score-table td{padding:9px 8px;border-bottom:1px solid #e6e7d9}.score-table th:not(:first-child),.score-table td:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}.score-table tr:last-child td{background:#e8efd8;color:var(--ink);font-weight:700;border:0}.score-total{font-size:30px;font-family:Georgia,serif;color:#60834b}.score-winner{text-align:center;font-size:17px;color:var(--ink);padding:12px;background:#e7efdc;border-radius:13px;margin-bottom:15px}.setup-deck{position:relative;display:flex;justify-content:center;align-items:center;min-height:110px;gap:8px;margin:12px 0}.setup-deck .deck-stack{transform:scale(1.4);margin:0 20px}.setup-deck.shuffling .deck-stack{animation:deck-shuffle .45s ease-in-out infinite}.setup-caption{text-align:center;font-size:12px}.dialog-body input[type=range]{appearance:none;width:100%;height:7px;min-height:7px;padding:0;border-radius:7px;background:#d6ddc7;box-shadow:none;margin:24px 0 12px;cursor:pointer;direction:ltr}.dialog-body input[type=range]::-webkit-slider-thumb{appearance:none;height:28px;width:28px;border-radius:50%;background:var(--felt);border:4px solid #f2f2df;box-shadow:0 1px 5px #314f4433}.dialog-body input[type=range]::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:var(--felt);border:4px solid #f2f2df}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e1e3d3}.setting-row select{min-height:40px;border:1px solid #d5dac5;border-radius:9px;background:#fffdf6;padding:7px;color:var(--ink)}.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 16px}.help-step{padding:12px 7px;text-align:center;background:#eef1e1;border-radius:12px;font-size:11px}.help-step b{display:block;font-size:18px;color:#7e9b5b;margin-bottom:5px}.toast{position:fixed;z-index:200;bottom:calc(294px + var(--safe-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);padding:13px 16px;color:var(--ivory);background:#0d2925ed;border:1px solid #b8d19d45;border-radius:13px;font-size:12px;text-align:center;line-height:1.6;box-shadow:0 4px 15px #001b2240;pointer-events:none;animation:toast-in .2s ease-out}.privacy-screen{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 27px;background:radial-gradient(ellipse at 50% 30%,#28594b,#10382f 65%);color:var(--ivory);text-align:center}.privacy-orbit{display:grid;place-items:center;width:102px;height:102px;border-radius:32px;background:#d0deb515;border:1px solid #cce2b525;box-shadow:0 0 0 14px #bacda905;margin-bottom:40px;transform:rotate(-8deg)}.privacy-orbit .icon{width:42px;height:42px;stroke-width:1.3;color:var(--gold);transform:rotate(8deg)}.privacy-screen h2{font-size:30px;letter-spacing:-.035em;line-height:1.35;margin:14px 0}.privacy-screen>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#b6cdb5;margin:0 0 31px}.privacy-screen>.button{width:min(100%,330px);min-height:55px}.privacy-note{display:flex;gap:5px;align-items:center;color:#8ea98d;font-size:10px;margin-top:18px}.privacy-note .icon{height:13px;width:13px;flex-basis:13px}.chat-panel{position:absolute;z-index:20;inset:70px 12px auto;max-height:50dvh;background:var(--ivory);color:var(--ink);border:1px solid #dde1cd;border-radius:19px;box-shadow:0 8px 30px #0419145c;padding:15px}.chat-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px}.chat-heading .muted{font-size:10px}.chat-messages{max-height:28dvh;overflow:auto;margin:12px 0;font-size:12px;line-height:1.65}.chat-message{background:#edf0e2;border-radius:10px;padding:9px 11px;margin:6px 0;overflow-wrap:anywhere}.chat-message strong{display:block;font-size:10px;color:#8c9a78;margin-bottom:3px}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.chat-compose input{min-height:43px;font-size:14px}.chat-compose .button{font-size:12px;min-height:43px;padding:10px 14px}

@keyframes sheet-in{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}@keyframes toast-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@keyframes deck-shuffle{0%,100%{rotate:-5deg;translate:0 0}25%{rotate:8deg;translate:8px -5px}75%{rotate:-10deg;translate:-8px 4px}}
@media(min-width:540px){.home-top{padding-inline:35px}.home-content{padding-top:9px}.hero{padding-top:40px}.hero-cards{transform:scale(1.1);margin-bottom:30px}.hero h1{font-size:56px}.start-card{padding:23px}.home-screen{box-shadow:0 0 70px #0004}.game-screen{box-shadow:0 0 70px #0004}.topbar{padding-inline:24px}.turn-strip{padding-inline:25px}.table-scroll{padding-inline:26px}.hand-panel{padding-inline:24px}.hand{grid-auto-columns:58px;grid-template-rows:repeat(2,80px);gap:8px;min-height:176px;max-height:178px}.hand>.card{width:58px;height:80px}.hand .card-rank{font-size:20px}.hand .card-center{font-size:38px}.hand-heading{min-height:29px}.hand-title>strong{font-size:16px}.game-dialog{padding-inline:30px;border-radius:25px 25px 0 0}.meld-cards>.card{height:64px;width:46px;min-width:46px;margin-inline-start:-20px}.action-buttons>.button{min-height:50px;font-size:14px}}
@media(max-width:359px){.home-content{padding-inline:17px}.home-top{padding-inline:18px}.hero h1{font-size:43px}.hero-cards{height:149px;transform:scale(.94);margin-bottom:12px}.hero{padding-top:23px}.hero-description{font-size:14px;margin-bottom:20px}.start-card{padding:14px}.name-field{gap:8px}.name-field label{font-size:11px}.topbar{padding-inline:12px}.opponent-name-row>strong{max-width:100px}.turn-strip{padding-inline:12px}.stepper{gap:6px}.step{font-size:9px}.table-scroll{padding-inline:13px}.pile-dock{padding-inline:20px}.hand-panel{padding-inline:11px}.sort-group .tool-button{padding-inline:7px;font-size:9px}.hint-button{font-size:9px}.action-buttons>.button{font-size:12px}.game-dialog{padding-inline:17px}}
@media(max-height:720px) and (max-width:539px){.hero{padding-top:15px}.hero-cards{height:133px;transform:scale(.85);margin-bottom:0}.hero h1{font-size:43px;margin-top:8px}.hero-description{font-size:13px;margin-bottom:17px}.hero .eyebrow{font-size:10px}.start-card{padding:15px}.start-option{min-height:82px;padding-top:10px}.home-footer{padding-top:4px}.topbar{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:7px}.avatar{height:38px;width:38px;border-radius:13px}.turn-strip{padding-block:6px}.pile-dock{padding-top:3px;padding-bottom:3px}.pile-button{min-height:81px}.hand-panel{padding-top:8px}.hand-toolbar{min-height:39px}.hand{grid-template-rows:repeat(2,67px);min-height:150px;max-height:152px}.hand>.card{height:67px}.hand .card-center{font-size:28px}.game-notice{padding-bottom:7px}.action-buttons>.button{min-height:44px}.table-zone{padding-top:5px}.opponent-zone{min-height:67px}.own-zone{min-height:75px}.zone-heading{margin-bottom:7px}}
@media(orientation:landscape) and (max-height:540px){.game-screen{min-height:390px}.topbar{padding-block:7px}.avatar{height:34px;width:34px;border-radius:10px}.turn-strip{padding-block:5px}.table-scroll{padding-bottom:3px}.pile-dock{position:absolute;right:15px;top:110px;width:145px;display:flex;justify-content:space-between;padding:0;gap:4px}.pile-copy small{display:none}.pile-button{min-height:75px}.side-pile-area{display:none}.table-scroll{padding-inline-start:177px}.table-zone{padding-block:4px}.zone-heading{margin-bottom:5px}.game-notice{padding-block:3px;font-size:10px}.hand-panel{padding-top:7px}.hand-heading{min-height:21px}.hand-toolbar{position:absolute;left:14px;top:3px;min-height:30px}.my-score-wrap{display:none}.hand{grid-template-rows:74px;grid-auto-columns:48px;min-height:85px;max-height:85px;padding-top:7px}.hand>.card{height:74px;width:48px}.hand-scroll-hint{display:none}.action-bar{padding-top:0}.selection-status{position:absolute;left:20px;bottom:62px;min-height:0;font-size:9px;margin:0}.action-buttons>.button{min-height:40px}.game-dialog{max-height:93dvh}.toast{bottom:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* App integration: preview decisions never hide cards or wildcard roles. */
.button.primary{background:var(--pistachio);color:var(--ink);box-shadow:0 3px 0 #a6bf8738}
.button.secondary{background:#eae8dc;color:#65715c;box-shadow:none}
.button.ghost{background:transparent;border:1px solid #aebd8e6b;color:#687b55;box-shadow:none}
#resume-online{width:100%;margin-top:12px;font-size:12px;min-height:44px}
.text-input{margin:6px 0 4px;background:#fffdf6}
.preview-cards{display:flex;flex-wrap:wrap;gap:7px;direction:ltr;justify-content:flex-start;align-items:center;padding:8px 0;margin:4px 0;max-width:100%}
.preview-cards>.card{width:48px;min-width:48px;height:74px;cursor:inherit}
.preview-cards .wild-role{display:block;font-size:9px;padding:2px}
.layout-options{display:flex;flex-direction:column;gap:10px;padding:4px 0;max-width:100%}
.layout-option{display:block;width:100%;text-align:right;border:1px solid #d8ddc8;border-radius:15px;padding:13px;background:#fffdf5;color:var(--ink);box-shadow:0 2px 5px #5b715309;transition:background .18s,border-color .18s}
.layout-option:hover{background:#eef3e2;border-color:#98b57a}
.layout-option>strong{display:block;font-size:13px;line-height:1.6}
.layout-option>small{display:block;color:#8d8060;font-size:11px;line-height:1.7}
.layout-option .preview-cards{padding:8px 0;margin:4px 0;gap:7px}
.meld.can-add{border-color:var(--gold);background:#cfce9a12;box-shadow:0 0 0 2px #e8c98517}
.meld.staged-meld{border-style:dashed;border-color:#d4dc9c}
.meld>.meld-meta{display:block;margin-top:5px;font-size:9px;line-height:1.4}
.card.joker{color:#8c7243;background:linear-gradient(145deg,#fff9e3,#ede3c9);border-color:#cbb782}
.card.joker .card-rank{font-size:13px;letter-spacing:-.04em}
.card.joker .card-center{font-size:30px;color:#ac8c46}
.card.hinted:not(.selected){border-color:#b29d44;box-shadow:0 0 0 2px #d7c77e80,0 3px 5px #34452920}
.card.fresh:not(.selected){border-color:#c8ae71;background:linear-gradient(135deg,#fffef5,#f8f0d9);box-shadow:0 0 0 1px #ddc89790,0 2px 3px #2a4c2520}
.card.forced{border-color:#c1a06b}
.card.forced::before{content:"לזריקה";position:absolute;z-index:2;bottom:2px;left:2px;right:2px;padding:2px 0;border-radius:3px;background:#ece0c6;color:#916f46;font:700 8px Arial,sans-serif;text-align:center}
.card.forced .card-bottom{visibility:hidden}
.game-notice.warning{color:#f4c5aa;background:#af72402a;border:1px solid #deb07d28;border-radius:10px;margin:0 15px 8px;padding:7px 10px}
.stage-area{max-height:130px;padding:9px 11px;margin-bottom:9px;scrollbar-width:thin;scrollbar-color:#c0cbaa transparent}
.stage-heading{gap:8px;align-items:flex-start;line-height:1.45}
.stage-heading>strong{white-space:nowrap;padding-top:1px}
.stage-heading>#stage-total{max-width:74%;font-size:9px;line-height:1.45;text-align:left}
#stage-total.insufficient{color:#ad7959}
.stage-items{margin:6px 0;gap:7px;scrollbar-width:thin;scrollbar-color:#c9d0b4 transparent;min-height:36px}
.stage-item{display:flex;align-items:center;gap:0;min-height:37px;padding:0;border-radius:10px;background:#fffdf5}
.stage-item-name{min-height:36px;padding:10px 11px;background:transparent;color:#5e7452;font-size:10px;font-weight:700;white-space:nowrap;max-width:245px;overflow:hidden;text-overflow:ellipsis}
.stage-remove{display:grid;place-items:center;min-width:36px;min-height:36px;font-size:21px;color:#a1a287;background:#f0f0e4;border-radius:8px;margin:2px;line-height:1}
.stage-remove:hover{background:#e9e5d7;color:#926849}
.stage-actions{position:sticky;bottom:0;padding-top:2px;background:#f5f1e3}
.stage-actions>.button{min-height:36px;padding:8px 13px;font-size:11px}
.table-scroll{min-height:0}
.first-card-option{flex-shrink:0;align-self:center;min-height:35px;max-width:calc(100% - 36px);padding:7px 15px;margin:-4px 0 7px;border:1px solid #d1d69a44;border-radius:99px;background:#d1d69a12;color:#d5dbb7;font-size:10px;line-height:1.4}
.first-card-option:hover{background:#d1d69a24}
.mini-deck.taken{opacity:.22;box-shadow:none}
.mini-deck>small{display:none}
.empty-pile{font-size:10px;color:#89aa8d}

/* Actual shuffle/cut controls live on the felt rather than in a dialog. */
.setup-panel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:7px 9px 15px;max-width:345px;margin:0 auto;color:var(--ivory)}
.setup-panel h2{font-size:23px;letter-spacing:-.045em;margin:7px 0 8px;line-height:1.25}
.setup-panel p{font-size:12px;color:#bed0b5;line-height:1.7;margin:0 0 9px;max-width:295px}
.setup-panel>small{font-size:10px;color:#8faf8f;line-height:1.5}
.setup-panel .setup-deck{position:relative;min-height:93px;width:92px;display:block;margin:7px 0 8px;isolation:isolate}
.setup-panel .setup-deck>i{position:absolute;inset:4px 16px 5px;width:58px;display:block;border:2px solid #d6d8b9;border-radius:9px;background:repeating-linear-gradient(45deg,transparent,transparent 5px,#d9dbc242 5px,#d9dbc242 6px),repeating-linear-gradient(-45deg,#7d927b,#7d927b 5px,#abbba152 5px,#abbba152 6px);box-shadow:2px 5px 9px #06231d55;transform:rotate(-4deg);z-index:3}
.setup-panel .setup-deck>i:first-child{transform:translate(-7px,1px) rotate(-13deg);z-index:1}
.setup-panel .setup-deck>i:nth-child(2){transform:translate(6px,2px) rotate(8deg);z-index:2}
.setup-panel .setup-deck>i::after{content:"";position:absolute;inset:5px;border:1px solid #e7e5bf81;border-radius:4px}
.setup-panel .setup-deck>span{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-size:35px;color:#ede4bd;text-shadow:0 2px 2px #456144;pointer-events:none}
input#cut-slider{appearance:none;width:100%;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;margin:5px 0 0;direction:ltr;cursor:pointer}
input#cut-slider::-webkit-slider-runnable-track{height:7px;border-radius:5px;background:linear-gradient(to right,#d4d5a2 0 var(--cut,50%),#54765d var(--cut,50%) 100%);border:1px solid #c6d9ad26}
input#cut-slider::-webkit-slider-thumb{appearance:none;height:29px;width:29px;border-radius:50%;background:var(--gold);border:4px solid #f1edce;box-shadow:0 2px 8px #071d1855;margin-top:-12px}
input#cut-slider::-moz-range-track{height:7px;border-radius:5px;background:#6e8d65}
input#cut-slider::-moz-range-progress{height:7px;border-radius:5px;background:#d4d5a2}
input#cut-slider::-moz-range-thumb{height:22px;width:22px;border-radius:50%;background:var(--gold);border:4px solid #f1edce;box-shadow:0 2px 8px #071d1855}
.cut-value{font-size:10px;color:#c6d4ad;font-variant-numeric:tabular-nums;direction:ltr;margin:0 0 3px}
.game-screen:has(.setup-panel:not([hidden])) .table-zone{display:none}
.game-screen:has(.setup-panel:not([hidden])) .hand,.game-screen:has(.setup-panel:not([hidden])) .hand-heading,.game-screen:has(.setup-panel:not([hidden])) .hand-toolbar{display:none}
.game-screen:has(.setup-panel:not([hidden])) .hand-panel{padding-top:10px}
.game-screen:has(.setup-panel:not([hidden])) .selection-status{min-height:16px;font-size:10px;margin-bottom:7px}
.game-screen>.room-info{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 15px 7px;padding:4px 9px;border-radius:11px;background:#d5e6b810;border:1px solid #bdd0a729;text-align:right;min-height:46px}
.game-screen>.room-info>.muted{font-size:9px;color:#a5bea2;white-space:nowrap}
.game-screen>.room-info>strong{font-size:16px;color:var(--gold);letter-spacing:.08em;margin:0}
.game-screen>.room-info>.room-share{display:flex;gap:4px;margin-inline-start:auto}
.game-screen>.room-info .button{font-size:9px;min-height:36px;padding:8px 9px;background:#d5e6b817;color:#d1dfbd;border-radius:8px}
.chat-messages>p{padding:9px 11px;background:#edf0e2;border-radius:10px;overflow-wrap:anywhere}
.chat-messages>p>strong{font-size:11px;color:#75885c}
.help-content p{padding-bottom:10px;border-bottom:1px solid #e6e7d9}
.help-content p:last-child{border-bottom:0;padding-bottom:0}
.menu-options>.dialog-option{min-height:44px;font-size:13px}
.ai-level-picker{margin:14px 0 13px;min-width:0}
.ai-level-picker>h3{margin:0 0 8px;color:var(--ink);font-size:12px;font-weight:700;line-height:1.4}
.ai-level-options{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px;padding:4px;border:1px solid #dfe2d3;border-radius:13px;background:#efeee2}
.ai-level-option{min-width:0;min-height:44px;padding:8px 4px;border-radius:9px;background:transparent;color:#6b7867;font-size:12px;font-weight:700;line-height:1.35;transition:background .15s,color .15s,box-shadow .15s}
.ai-level-option.is-selected{background:var(--felt);color:var(--ivory);box-shadow:0 2px 4px #143b3221}
.ai-level-option:hover:not(.is-selected){background:#fffdf4;color:var(--ink)}
.ai-level-picker>.ai-level-description{min-height:20px;margin:8px 1px 0;color:#69775f;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
.ai-level-change-note{display:block;margin:4px 1px 0;color:#849078;font-size:10px;line-height:1.55}
.opponent-level{padding:2px 6px;border-radius:5px;border:1px solid #c5d4af30;background:#d2e5b710;color:#d2e5b7;font-size:9px;line-height:1.2;white-space:nowrap}
.shuffling .setup-deck>i{animation:deck-shuffle .24s ease-in-out both}
.shuffling .setup-deck>i:nth-child(2){animation-delay:25ms}
.shuffling .setup-deck>i:nth-child(3){animation-delay:45ms}
.dealing .hand>.card{animation:deal-in .2s ease-out both}
.dealing .hand>.card:nth-child(2n){animation-delay:35ms}
.dealing .hand>.card:nth-child(3n){animation-delay:65ms}
.action-flash .card.fresh{animation:card-in .18s ease-out both}
.action-flash .own-zone .meld{animation:meld-in .18s ease-out both}
@keyframes deal-in{from{opacity:.25;translate:0 -13px;rotate:-4deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes card-in{from{opacity:.4;translate:0 -9px}to{opacity:1;translate:0 0}}
@keyframes meld-in{from{opacity:.55;translate:0 3px}to{opacity:1;translate:0 0}}
@media(max-width:419px){.game-screen>.room-info>.muted{display:none}}
@media(max-height:740px) and (orientation:portrait){.game-screen:has(#stage-area:not([hidden])) .hand{grid-template-rows:67px;grid-auto-columns:48px;min-height:80px;max-height:82px;padding-block:8px 5px}.game-screen:has(#stage-area:not([hidden])) .hand>.card{height:67px;width:48px}.game-screen:has(#stage-area:not([hidden])) .hand-panel{padding-top:7px}.stage-area{max-height:118px;padding:7px 9px;margin-top:0;margin-bottom:7px}.stage-heading>#stage-total{font-size:8px;line-height:1.35}.stage-items{margin:4px 0;min-height:33px}.stage-item-name{min-height:33px;padding-block:8px}.stage-remove{min-height:30px;min-width:31px}.stage-actions>.button{min-height:33px;padding-block:7px}.game-screen:has(#stage-area:not([hidden])) .opponent-zone .zone-heading{display:none}.game-screen:has(#stage-area:not([hidden])) .table-zone{padding-top:3px}.game-screen:has(#stage-area:not([hidden])) .pile-dock{padding-block:1px}.game-screen:has(#stage-area:not([hidden])) .pile-button{min-height:77px}.game-screen:has(#stage-area:not([hidden])) .game-notice{padding-block:3px 5px;font-size:10px}.game-screen:has(#stage-area:not([hidden])) .first-card-option{min-height:29px;margin-block:-2px 5px}.setup-panel{padding-block:5px}.setup-panel h2{font-size:21px}.setup-panel p{font-size:11px}.setup-panel .setup-deck{min-height:86px;margin-top:3px;margin-bottom:3px}}
@media(max-height:590px) and (orientation:portrait){.topbar{padding-block:6px}.avatar{width:34px;height:34px}.opponent-comment{font-size:10px;max-height:18px}.turn-strip{padding-block:5px}.game-screen:has(#stage-area:not([hidden])) .hand-toolbar{min-height:35px}.game-screen:has(#stage-area:not([hidden])) .selection-status{min-height:16px;margin-bottom:3px}.game-screen:has(#stage-area:not([hidden])) .stage-area{max-height:105px}.game-screen>.room-info{min-height:40px;margin-bottom:4px;padding-block:2px}}
.phone-panel{border:1px solid #c6d2b5}
.phone-open-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.65;color:#69775f;margin:14px 0 0}
.phone-open-note>.icon{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.phone-connection-settings{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:11px}
.phone-connection-settings>summary{cursor:pointer;min-height:30px;line-height:1.8;color:#69775f}
.phone-connection-settings .field-label{display:block;margin:9px 0 7px}
.phone-connection-settings>input{width:100%}
.phone-connection-settings select{width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fffcf5;color:var(--ink);font-size:16px}
.phone-connection-settings select:focus-visible{outline:3px solid #d4a34d;outline-offset:3px}
.phone-connection-settings>.muted{font-size:11px;line-height:1.7;margin:9px 0}
.phone-connection-settings>.button{width:100%;margin-top:8px;font-size:11px}
@media(prefers-reduced-motion:reduce){.shuffling .setup-deck>i,.dealing .hand>.card,.action-flash .card.fresh,.action-flash .own-zone .meld{animation:none!important}}

.draw-action .card.fresh{animation:card-in .18s ease-out both}
.play-action .meld.newly-laid{animation:meld-in .2s ease-out both}
.draft-warning{padding:10px 12px;border:1px solid #d8ba89;border-radius:10px;background:#f5eedb;color:#8b633f!important}
.quick-reactions{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.quick-reaction{min-height:40px;min-width:40px;padding:7px 10px;border-radius:10px;background:#e8eedb;color:var(--ink);font-size:12px}
@media(prefers-reduced-motion:reduce){.draw-action .card.fresh,.play-action .meld.newly-laid{animation:none!important}}
.game-screen:has(.setup-panel:not([hidden])) .pile-dock{display:none}

/* Classical playing-card faces. Geometry of the hand/table belongs to style.css. */
.card.classic-card {
  --card-index-size: 15px;
  --card-index-suit: 12px;
  --card-index-inset: 4px;
  --card-face-ink: #15231d;
  color: var(--card-face-ink);
  background: linear-gradient(135deg, #ffffff 0%, #fffefb 68%, #f8f7f2 100%);
  border-color: #d5d1c8;
  font-family: Georgia, "Times New Roman", serif;
}
.card.classic-card.red { --card-face-ink: #c0272d; color: var(--card-face-ink); }
.card.classic-card.black { --card-face-ink: #14221e; color: var(--card-face-ink); }
.card.classic-card.wild {
  color: var(--card-face-ink);
  background: linear-gradient(135deg, #ffffff, #fffcf3);
  border-color: #ccb886;
}
.card.classic-card.selected, .card.classic-card.is-selected {
  border-color: #8cab58;
  background: #fffef9;
}
.classic-card .card-rank, .classic-card .card-bottom {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--card-index-size);
  font-weight: 600;
  line-height: .91;
  letter-spacing: -.075em;
  color: var(--card-face-ink);
  z-index: 2;
  pointer-events: none;
}
.classic-card .card-rank {
  top: var(--card-index-inset);
  left: var(--card-index-inset);
  right: auto;
  inset-inline-start: var(--card-index-inset);
}
.classic-card .card-bottom {
  bottom: var(--card-index-inset);
  right: var(--card-index-inset);
  left: auto;
  transform: rotate(180deg);
}
.classic-card .card-suit {
  font-family: Arial, sans-serif;
  font-size: var(--card-index-suit);
  line-height: .85;
  letter-spacing: 0;
}
.classic-card .card-center.card-illustration {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--card-face-ink);
  font-size: 0;
  pointer-events: none;
}
.classic-card .card-art { display: block; width: 100%; height: 100%; overflow: visible; }
.classic-card.joker { --card-face-ink: #263d56; }
.classic-card.joker .card-rank, .classic-card.joker .card-bottom {
  font-size: calc(var(--card-index-size) * .76);
  letter-spacing: -.05em;
}
.classic-card.joker .card-center.card-illustration { color: var(--card-face-ink); }
.classic-card .wild-role {
  left: 3px;
  right: 3px;
  inset-inline: 3px;
  bottom: 2px;
  padding: 2px 1px;
  border: 1px solid #dec98e80;
  background: #f1e3b6eb;
  color: #756035;
  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: 3px;
  z-index: 3;
}
.classic-card.wild .card-bottom, .classic-card[data-rank="2"] .card-bottom { bottom: 14px; }
.classic-card.forced .card-bottom { visibility: hidden; }
.meld-cards .classic-card {
  --card-index-size: 10px;
  --card-index-suit: 8px;
  --card-index-inset: 3px;
}
.meld-cards .classic-card .card-rank, .meld-cards .classic-card .card-bottom { gap: 1px; }
.meld-cards .classic-card .card-rank, .meld-cards .classic-card .card-bottom,
.discard-top .classic-card .card-rank, .discard-top .classic-card .card-bottom,
.preview-cards .classic-card .card-rank, .preview-cards .classic-card .card-bottom {
  font-size: var(--card-index-size);
}
.meld-cards .classic-card .card-suit, .discard-top .classic-card .card-suit,
.preview-cards .classic-card .card-suit { font-size: var(--card-index-suit); }
.meld-cards .classic-card .wild-role {
  font-size: 6px;
  padding: 1px 0;
  bottom: 1px;
  left: 1px;
  right: 1px;
  inset-inline: 1px;
}
.meld-cards .classic-card.wild .card-bottom, .meld-cards .classic-card[data-rank="2"] .card-bottom { bottom: 10px; }
.discard-top .classic-card {
  --card-index-size: 10px;
  --card-index-suit: 8px;
  --card-index-inset: 3px;
}
.discard-top .classic-card .card-rank, .discard-top .classic-card .card-bottom { gap: 1px; }
.preview-cards .classic-card { --card-index-size: 13px; --card-index-suit: 10px; }
.preview-cards .classic-card .wild-role { font-size: 8px; }

/* Mobile card layout v1.1: complete melds, a physical hand, and room for the table. */
.game-screen{min-height:420px}
.topbar{padding-inline:13px}
.topbar-actions{gap:4px}
.opponent-name-row>strong{max-width:110px}
.table-scroll{min-height:100px;overflow-x:hidden;overflow-y:auto;padding-inline:12px;padding-bottom:10px;scroll-padding-block:10px;scrollbar-width:thin;scrollbar-color:#b8cbae88 #0c2e2926}
.table-zone{padding-top:8px;padding-bottom:5px;min-height:0}
.zone-heading{font-size:11px;margin-bottom:8px;line-height:1.4}
.meld-area{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start;min-height:0}
.meld-empty{grid-column:1/-1;padding:4px 0 8px;font-size:11px}
.meld{display:block;min-width:0;width:100%;max-width:100%;padding:7px 6px 6px;border-radius:12px;background:linear-gradient(145deg,#c8dac20c,#061e1b38);border-color:#b9d3ac39;text-align:right;box-shadow:0 2px 6px #08231e16}
.meld-wide{grid-column:1/-1}
.meld-header{min-height:14px;margin-bottom:6px;align-items:center;gap:6px;font-size:10px;line-height:1.3}
.meld-name{min-width:0;color:#d0dfc7}
.meld-bonus{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px 5px;border-radius:5px;background:#e8c98521;color:#efd5a1;font-size:9px;direction:ltr}
.meld-cards{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;justify-content:flex-start;overflow:visible;max-width:100%;min-width:0;padding:0}
.meld-cards>.card,.meld-cards>.card:first-child,.meld-cards>.card:last-child{width:clamp(40px,11.2vw,46px);min-width:0;height:64px;flex:0 0 clamp(40px,11.2vw,46px);margin:0;border-radius:5px;box-shadow:0 2px 3px #0520194a}
.meld>.meld-meta{font-size:9px;line-height:1.4;margin-top:6px;color:#a3bea2;white-space:normal}
.meld.is-target{border-color:#e8c985;box-shadow:0 0 0 2px #e8c9852c;background:#c8d99d19}
.meld.is-target>.meld-meta{color:#efd5a1}
.meld-cards .wild-role{display:block;font-size:8px;padding:1px;bottom:2px;inset-inline:2px;border-radius:2px;line-height:1.2}
.meld-cards .wild .card-bottom{visibility:hidden}

/* All three piles fit a compact, reachable bar instead of taking a table row. */
.pile-dock{max-width:600px;padding:6px 14px 5px;gap:7px;align-items:center}
.pile-button,.side-pile-area{flex-direction:row;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0}
.pile-button{border-radius:10px}
.pile-button:not(:disabled):hover{background:#d7e7c710}
.deck-stack,.discard-top{width:32px;height:44px;margin:0;flex:0 0 32px}
.deck-back{border-width:1.5px;border-radius:5px}
.deck-mark{font-size:21px}
.deck-stack::before,.deck-stack::after{border-radius:5px}
.discard-top{border-radius:5px}
.discard-top>.card{width:32px;min-width:32px;height:44px;border-radius:4px}
.pile-copy{gap:3px;text-align:right;min-width:0}
.pile-copy strong{font-size:11px;white-space:nowrap}
.pile-copy small{display:block;font-size:10px;line-height:1.2}
.side-piles{height:39px;margin:0;gap:3px;align-items:center;flex-shrink:0}
.mini-deck{width:21px;height:31px;border-width:1.5px;border-radius:4px}
.mini-deck>span{font-size:9px}
.side-pile-area{gap:6px}
.side-pile-area .pile-copy small{display:none}
.game-notice{min-height:21px;padding:3px 14px 5px;font-size:10px;line-height:1.45}
.game-notice:empty{display:none}

/* Left indices stay exposed in the fan; selection lifts without rearranging the hand. */
.hand-panel{padding:8px 12px max(9px,var(--safe-bottom));border-radius:20px 20px 0 0}
.hand-heading{min-height:22px;padding:0 2px}
.hand-title{gap:7px;min-width:0}
.hand-title>strong{font-size:13px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand-count{font-size:10px;padding:3px 6px;white-space:nowrap}
.my-score-wrap{display:flex}
.my-score-wrap>b{font-size:21px}
.hand-toolbar{position:static;display:flex;justify-content:space-between;gap:5px;align-items:center;min-height:38px;margin:0}
.sort-group{padding:2px;border-radius:9px}
.sort-group .tool-button{font-size:10px;padding-inline:7px}
.tool-button{min-height:34px;padding:7px;font-size:10px}
.tool-button::after{inset:-3px 0}
.hand-view-button{border:1px solid #d7d9c9;border-radius:8px;min-width:44px;padding-inline:6px}
.selection-tools{gap:0}
.clear-button{width:34px;min-width:34px;height:36px}
.hand{--hand-card-width:68px;--hand-card-height:98px;--hand-step:clamp(28px,calc((min(100vw,720px) - 36px - var(--hand-card-width)) / var(--hand-steps,10)),48px);display:flex;direction:ltr;grid-template-rows:none;grid-auto-columns:auto;align-items:flex-start;justify-content:flex-start;gap:0;min-height:118px;max-height:none;height:118px;max-width:100%;margin:0;padding:15px 7px 5px;overflow-x:auto;overflow-y:hidden;scroll-padding-inline:8px;scrollbar-width:thin;scrollbar-color:#c1c9ad transparent;touch-action:pan-x;isolation:isolate}
.hand>.card{width:var(--hand-card-width);min-width:var(--hand-card-width);height:var(--hand-card-height);flex:0 0 var(--hand-card-width);margin:0;z-index:var(--i);transform:translateY(var(--fan-drop,0px)) rotate(var(--fan-angle,0deg));transform-origin:50% 90%;box-shadow:0 2px 4px #233b3329,0 5px 9px #233b3312;touch-action:pan-x}
.hand>.card+.card{margin-left:calc(var(--hand-step) - var(--hand-card-width))}
.hand>.card.selected,.hand>.card.is-selected{transform:translateY(-11px) rotate(var(--fan-angle,0deg));border-color:#789e54;box-shadow:0 0 0 2px #aac38a88,0 5px 8px #38573233}
.hand>.card:focus-visible{outline-offset:-2px;outline-color:#a47a26}
.hand.hand-spread{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,88px);grid-auto-columns:62px;gap:7px;min-height:194px;height:194px;justify-content:start;--hand-card-width:62px;--hand-card-height:88px;padding:9px 3px 2px}
.hand.hand-spread>.card{margin:0;transform:none;box-shadow:0 2px 4px #233b3320}
.hand.hand-spread>.card.selected{transform:translateY(-4px)}
.action-bar{padding:3px 2px 0}
.selection-status{position:static;min-height:17px;margin:0 0 4px;font-size:10px;line-height:1.4;gap:6px}
.hand-scroll-hint{font-size:9px;color:#7f8d6e;white-space:nowrap}
.action-buttons{gap:7px;grid-template-columns:1.4fr 1fr}
.action-buttons>.button{min-height:44px;font-size:12px;padding:10px 8px;line-height:1.2}

/* A table overview gives long games the full screen when needed. */
.table-overview{margin-inline:-6px;padding-bottom:4px}
.table-overview>section+section{margin-top:24px}
.table-overview h3{font-size:13px;margin:3px 0 10px;color:#55704e}
.table-overview .meld{background:#e8eddf;border-color:#c8d4bc;box-shadow:none}
.table-overview .meld-name{color:#426140}
.table-overview .meld-bonus{background:#e2d2a4;color:#715824}
.table-overview .meld-meta{color:#758367}
.table-overview .meld-empty{color:#8c987c}
.table-overview .meld-cards>.card{width:clamp(40px,11.2vw,52px);flex-basis:clamp(40px,11.2vw,52px);height:70px}
.table-overview .meld.is-target{border-color:#a0b76d;background:#e6edcc}
.table-overview .meld.is-target .meld-meta{color:#688447}

@media(min-width:540px){
 .table-scroll{padding-inline:24px}
 .hand-panel{padding-inline:24px}
 .hand{--hand-card-width:76px;--hand-card-height:110px;--hand-step:clamp(34px,calc((min(100vw,720px) - 68px - var(--hand-card-width)) / var(--hand-steps,10)),56px);height:130px;min-height:130px}
 .hand.hand-spread{--hand-card-width:70px;--hand-card-height:100px;grid-auto-columns:70px;grid-template-rows:repeat(2,100px);height:218px;min-height:218px}
 .meld-area{gap:10px}
 .meld-cards{gap:5px}
 .meld-cards>.card{width:48px;flex-basis:48px;height:70px}
 .hand-title>strong{font-size:15px}
}
@media(max-width:359px){
 .topbar{padding-inline:10px}
 .opponent-profile{gap:7px}
 .opponent-name-row{gap:5px}
 .opponent-name-row>strong{max-width:82px;font-size:13px}
 .topbar-actions{gap:2px}
 .topbar-actions .icon-button{width:40px;min-width:40px;height:42px}
 .hand-panel{padding-inline:9px}
 .sort-group .tool-button{font-size:9px;padding-inline:5px}
 .tool-button{padding-inline:5px}
 .hint-button .icon{display:none}
 .hand-title>strong{max-width:124px}
 .table-scroll{padding-inline:10px}
 .pile-dock{padding-inline:11px;gap:4px}
 .pile-button,.side-pile-area{gap:5px}
 .pile-copy strong{font-size:10px}
}
@media(max-height:640px) and (orientation:portrait){
 .topbar{padding-block:7px}
 .turn-strip{padding-block:6px}
 .hand-panel{padding-top:6px;padding-bottom:max(7px,var(--safe-bottom))}
 .hand-toolbar{min-height:35px}
 .hand{--hand-card-width:62px;--hand-card-height:88px;height:108px;min-height:108px}
 .pile-dock{padding-block:3px}
 .game-notice{padding-block:2px 4px}
 .game-screen:has(#stage-area:not([hidden])) .hand-heading{display:none}
 .game-screen:has(#stage-area:not([hidden])) .hand:not(.hand-spread){--hand-card-width:56px;--hand-card-height:80px;height:98px;min-height:98px;max-height:none;grid-template-rows:none;grid-auto-columns:auto;padding:13px 7px 4px}
 .game-screen:has(#stage-area:not([hidden])) .hand:not(.hand-spread)>.card{width:var(--hand-card-width);height:var(--hand-card-height)}
 .stage-area{max-height:108px;margin-block:0 5px;padding:6px 9px}
 .stage-actions>.button{min-height:36px}
 .selection-status{min-height:16px;margin-bottom:3px}
 .first-card-option{min-height:30px;margin-block:-1px 4px;padding-block:5px}
 .table-scroll{min-height:80px}
}
@media(max-height:740px) and (orientation:portrait){
 .game-screen:has(#stage-area:not([hidden])) .hand{grid-template-rows:none;grid-auto-columns:auto;height:118px;min-height:118px;max-height:none}
 .game-screen:has(#stage-area:not([hidden])) .hand>.card{height:var(--hand-card-height);width:var(--hand-card-width)}
 .game-screen:has(#stage-area:not([hidden])) .hand.hand-spread{grid-template-rows:repeat(2,88px);grid-auto-columns:62px;height:194px;min-height:194px}
 .game-screen:has(#stage-area:not([hidden])) .selection-status{min-height:17px;font-size:10px;margin-bottom:4px}
 .game-screen:has(#stage-area:not([hidden])) .pile-button{min-height:48px}
}
@media(max-height:640px) and (orientation:portrait){
 .game-screen:has(#stage-area:not([hidden])) .hand:not(.hand-spread){height:98px;min-height:98px}
 .game-screen:has(#stage-area:not([hidden])) .hand-toolbar{min-height:34px}
}
@media(orientation:landscape) and (max-height:540px){
 .game-screen{min-height:360px}
 .hand-panel{padding-top:5px}
 .hand-heading{min-height:20px}
 .hand-toolbar{position:absolute;left:14px;top:1px;min-height:30px;gap:8px}
 .hand{--hand-card-width:58px;--hand-card-height:82px;--hand-step:clamp(30px,calc((min(100vw,720px) - 66px - var(--hand-card-width)) / var(--hand-steps,10)),46px);height:100px;min-height:100px}
 .hand.hand-spread{--hand-card-width:58px;--hand-card-height:82px;grid-template-rows:82px;grid-auto-columns:58px;height:96px;min-height:96px}
 .selection-status{position:static;min-height:14px;margin-bottom:3px}
 .my-score-wrap{display:none}
 .hand-scroll-hint{display:inline}
 .pile-dock{position:absolute;right:10px;top:99px;width:134px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;padding:0}
 .pile-button{width:60px;gap:5px}
 .side-pile-area{display:flex;width:100%}
 .table-scroll{padding-inline-start:155px;min-height:65px}
 .action-buttons>.button{min-height:40px}
 .game-notice{font-size:9px;padding-block:1px}
}
/* Face sizes are independent of whether the hand is fanned or spread. */
.hand .classic-card{--card-index-size:18px;--card-index-suit:13px;--card-index-inset:4px}
.hand .classic-card .card-rank,.hand .classic-card .card-bottom{gap:2px}
.meld-cards .classic-card{--card-index-size:11px;--card-index-suit:8px;--card-index-inset:3px}
.meld-cards .classic-card .wild-role{font-size:8px;padding:1px 0;bottom:2px;inset-inline:2px;left:2px;right:2px}
.discard-top .classic-card{--card-index-size:10px;--card-index-suit:7px;--card-index-inset:2px}
.discard-top .classic-card .wild-role{font-size:6px;bottom:1px;padding:1px 0;inset-inline:1px;left:1px;right:1px}
.hand>.classic-card.fresh:not(.selected){border-color:#c2a158}
.game-screen:has(#chat-toggle:not([hidden])) .opponent-name-row>strong{max-width:72px}
@media(max-width:359px){
 .game-screen:has(#chat-toggle:not([hidden])) .opponent-name-row>strong{max-width:60px}
 .mini-deck{width:18px;height:28px}
 .side-piles{gap:3px}
}
@media(max-height:640px) and (orientation:portrait){
 .game-screen>.room-info{min-height:34px;padding-block:0;margin-bottom:3px}
 .game-screen>.room-info .button{min-height:30px;padding-block:6px}
 .game-screen:has(#stage-area:not([hidden]))>.room-info{display:none}
 .game-screen:has(#stage-area:not([hidden])) .opponent-comment{display:none}
}
@media(max-height:640px) and (orientation:portrait){
 .hand.hand-spread{grid-template-rows:88px;height:108px;min-height:108px;max-height:none}
}
@media(max-height:740px) and (orientation:portrait){
 .game-screen:has(#stage-area:not([hidden])) .hand.hand-spread{grid-template-rows:88px;height:108px;min-height:108px;max-height:none;padding:9px 3px 2px}
}
@media(max-height:640px) and (orientation:portrait){
 .game-screen:has(#stage-area:not([hidden])) .game-notice:not(.warning){display:none}
}
@media(max-height:590px) and (orientation:portrait){
 .game-screen:has(#stage-area:not([hidden])) .selection-status{display:none}
}
.game-dialog[open]:has(.table-overview),.game-dialog.open:has(.table-overview){height:min(88dvh,800px);max-height:88dvh;display:flex;flex-direction:column;overflow:hidden}
.game-dialog:has(.table-overview) .dialog-handle,.game-dialog:has(.table-overview)>h2{flex-shrink:0}
.game-dialog:has(.table-overview) .dialog-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bcc8a7 transparent;padding-block:3px}
.game-dialog:has(.table-overview) .dialog-actions{flex-shrink:0;margin-top:10px;padding-top:11px;border-top:1px solid #dce2d0}
.hand:not(.hand-spread)>.card:first-child{margin-left:auto}
.hand:not(.hand-spread)>.card:last-child{margin-right:auto}
/* Leave breathing room between court illustrations and their corner indices. */
.court-card .card-art{transform:scale(.9);transform-origin:50% 50%}
.hand .court-card{--card-index-size:16px;--card-index-suit:12px;--card-index-inset:1px}
.meld-cards .court-card{--card-index-size:10px;--card-index-suit:7px;--card-index-inset:1px}
.preview-cards .court-card{--card-index-size:11px;--card-index-suit:8px;--card-index-inset:1px}
.discard-top .court-card{--card-index-size:8px;--card-index-suit:6px;--card-index-inset:1px}

/* Append after the table/hand layout rules in public/style.css. */
.hand-toolbar { gap: 4px; }
.hand-toolbar .sort-group { flex: 0 0 auto; }
.hand-toolbar .selection-tools { flex: 0 0 auto; }
.hand-manual-button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 34px;
  padding-inline: 6px;
  border: 1px solid #d2dacd;
  border-radius: 8px;
  background: transparent;
  color: #6b7d65;
}
.hand-manual-button.active, .hand-manual-button[aria-pressed="true"] {
  color: #37698e;
  border-color: #9fbfd2;
  background: #e5eff4;
  box-shadow: 0 1px 2px #4d78901a;
}

/* The same mode replaces both the fan and the two-row spread. */
.hand.is-arranging,
.hand.hand-spread.is-arranging,
.game-screen:has(#stage-area:not([hidden])) .hand.is-arranging,
.game-screen:has(#stage-area:not([hidden])) .hand.hand-spread.is-arranging {
  --hand-card-width: 68px;
  --hand-card-height: 98px;
  display: flex;
  direction: ltr;
  flex-wrap: nowrap;
  grid-template-rows: none;
  grid-auto-columns: auto;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 118px;
  min-height: 118px;
  max-height: 118px;
  margin: 0;
  padding: 13px 7px 5px;
  border: 1px dashed #c6d8dc;
  border-radius: 11px;
  background: #edf3f280;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto;
  scroll-padding-inline: 8px;
  scrollbar-color: #b1c8d0 transparent;
}
.hand.is-arranging > .card,
.hand.hand-spread.is-arranging > .card,
.game-screen:has(#stage-area:not([hidden])) .hand.is-arranging > .card,
.game-screen:has(#stage-area:not([hidden])) .hand.hand-spread.is-arranging > .card {
  flex: 0 0 var(--hand-card-width);
  width: var(--hand-card-width);
  min-width: var(--hand-card-width);
  height: var(--hand-card-height);
  margin: 0;
  transform: none;
  rotate: none;
  translate: none;
  z-index: auto;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 2px 4px #233b3324;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hand.is-arranging > .card.selected,
.hand.is-arranging > .card.is-selected,
.game-screen:has(#stage-area:not([hidden])) .hand.is-arranging > .card.selected,
.game-screen:has(#stage-area:not([hidden])) .hand.is-arranging > .card.is-selected {
  transform: translateY(-5px);
  border-color: #789e54;
  box-shadow: 0 0 0 2px #aac38a70, 0 5px 8px #38573222;
}
.hand.is-arranging > .card.reorder-picked,
.game-screen:has(#stage-area:not([hidden])) .hand.is-arranging > .card.reorder-picked {
  transform: translateY(-6px);
  border-color: #4e8cbc;
  box-shadow: 0 0 0 2px #99bfd578, 0 5px 9px #386a8b24;
  background: #fffef9;
  z-index: 2;
}
.hand.is-arranging > .card.reorder-dragging {
  opacity: .35;
  cursor: grabbing;
}
.hand.is-arranging > .card.drop-before::after,
.hand.is-arranging > .card.drop-after::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  height: auto;
  border: 0;
  border-radius: 3px;
  background: #4388bd;
  box-shadow: 0 0 3px #bfdcf09c;
  z-index: 5;
  pointer-events: none;
}
.hand.is-arranging > .card.drop-before::after { left: 1px; right: auto; }
.hand.is-arranging > .card.drop-after::after { right: 1px; left: auto; }
.hand-drag-ghost.card.classic-card {
  position: fixed;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
  touch-action: none;
  cursor: grabbing;
  opacity: .96;
  transform: rotate(-4deg);
  border-color: #4e8cbc;
  box-shadow: 0 8px 20px #123d3955, 0 0 0 2px #a7c9df55;
}
.hand-drag-ghost.classic-card {
  --card-index-size: 18px;
  --card-index-suit: 13px;
  --card-index-inset: 4px;
}
.hand-drag-ghost.court-card {
  --card-index-size: 16px;
  --card-index-suit: 12px;
  --card-index-inset: 1px;
}

@media (max-width: 359px) {
  .hand-toolbar { gap: 3px; }
  .hand-toolbar .sort-group .tool-button { padding-inline: 5px; font-size: 9px; }
  .hand-manual-button { min-width: 44px; padding-inline: 5px; font-size: 9px; }
}
@media (max-height: 740px) and (orientation: portrait) {
  .game-screen:has(#stage-area:not([hidden])) .hand.is-arranging,
  .game-screen:has(#stage-area:not([hidden])) .hand.hand-spread.is-arranging {
    --hand-card-width: 62px;
    --hand-card-height: 88px;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    padding: 13px 7px 5px;
  }
}
@media (max-height: 640px) and (orientation: portrait) {
  .hand.is-arranging, .hand.hand-spread.is-arranging {
    --hand-card-width: 62px;
    --hand-card-height: 88px;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
  }
  .game-screen:has(#stage-area:not([hidden])) .hand.is-arranging,
  .game-screen:has(#stage-area:not([hidden])) .hand.hand-spread.is-arranging {
    --hand-card-width: 56px;
    --hand-card-height: 80px;
    height: 98px;
    min-height: 98px;
    max-height: 98px;
    padding: 11px 7px 5px;
  }
}
@media (orientation: landscape) and (max-height: 540px) {
  .hand.is-arranging,
  .hand.hand-spread.is-arranging,
  .game-screen:has(#stage-area:not([hidden])) .hand.is-arranging,
  .game-screen:has(#stage-area:not([hidden])) .hand.hand-spread.is-arranging {
    --hand-card-width: 58px;
    --hand-card-height: 82px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    padding: 11px 7px 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hand.is-arranging > .card { transition: none; }
}
.hand.is-arranging>.card:first-child,.hand.is-arranging>.card:last-child{margin-left:0;margin-right:0}
.hand:not(.is-arranging)>.card.drop-before{box-shadow:-3px 0 0 #4388bd,0 2px 4px #233b3329}
.hand:not(.is-arranging)>.card.drop-after{box-shadow:3px 0 0 #4388bd,0 2px 4px #233b3329}

/* Classical blue card backs and actual packet thickness. Kept separate so the
   app can append this fragment without affecting card, hand, or turn geometry. */
.physical-blue-back {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid #faf9f2;
  border-radius: 5px;
  background-color: #14378a;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 2px, #b9cef56b 2px 3px, transparent 3px 4px),
    repeating-linear-gradient(-45deg, transparent 0 2px, #b9cef56b 2px 3px, transparent 3px 4px);
  box-shadow: inset 0 0 0 1px #092157, 0 1px 1px #071b2540;
}
.physical-blue-back::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #edf2fb;
  border-radius: 2px;
  pointer-events: none;
}
.physical-blue-back::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid #b2c7ee80;
  border-radius: 1px;
  pointer-events: none;
}
.deck-stock-mount {
  display: block;
  position: relative;
  width: var(--stock-width, 44px);
  height: calc(var(--stock-height, 60px) + 17px * var(--deck-depth-scale, 1));
  margin-bottom: 5px;
  transform: none;
  isolation: isolate;
}
.deck-stack.deck-stock-mount::before, .deck-stack.deck-stock-mount::after { content: none; }
.physical-stock {
  --deck-depth: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--stock-width, 44px);
  height: calc(var(--stock-height, 60px) + var(--deck-depth) * var(--deck-depth-scale, 1));
  transform: rotate(-4deg);
  transition: height .22s ease-out;
  filter: drop-shadow(2px 4px 3px #041c2166);
}
.physical-stock-paper {
  position: absolute;
  inset: 1px -1px 0 1px;
  border: 1px solid #bcb9ae;
  border-radius: 5px;
  background: repeating-linear-gradient(to bottom, #faf9f2 0 .7px, #aead9e .7px 1px, #e2e0d5 1px 1.5px);
  box-shadow: inset -2px 0 2px #817f6c40;
}
.physical-stock-back { position: absolute; top: 0; left: 0; width: var(--stock-width, 44px); height: var(--stock-height, 60px); }
.physical-stock-empty {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--stock-width, 44px);
  height: var(--stock-height, 60px);
  align-items: center;
  justify-content: center;
  border: 1px dashed #c5d3bd67;
  border-radius: 6px;
  color: #acc2a2;
  font: 11px Arial, sans-serif;
}
.physical-stock.is-empty { filter: none; height: var(--stock-height, 60px); }
.physical-stock.is-empty .physical-stock-paper, .physical-stock.is-empty .physical-stock-back { display: none; }
.physical-stock.is-empty .physical-stock-empty { display: flex; }

.physical-cut { width: min(100%, 282px); margin: 1px auto 0; color: #f6f3e7; }
.physical-cut-surface {
  --full-depth: 108px;
  --upper-depth: 54px;
  --lower-depth: 54px;
  --card-step: 1px;
  position: relative;
  height: 198px;
  width: 100%;
  border-radius: 15px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  isolation: isolate;
  direction: ltr;
}
.physical-cut-surface:focus-visible { outline: 2px solid #f1d48c; outline-offset: 2px; background: #d8e9d107; }
.physical-cut-surface.is-dragging { cursor: grabbing; }
.physical-cut-guide { position: absolute; left: 47px; right: 42px; top: 76px; height: var(--full-depth); pointer-events: none; }
.physical-cut-shadow {
  position: absolute;
  left: 28px;
  right: 26px;
  bottom: 8px;
  height: 21px;
  border-radius: 50%;
  background: #031f1b66;
  filter: blur(7px);
}
.physical-cut-packet {
  position: absolute;
  left: 47px;
  right: 42px;
  min-height: 1px;
  border-left: 1px solid #dfded3;
  border-right: 2px solid #aaa79b;
  border-bottom: 1px solid #c4c1b4;
  border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(to bottom, #fdfcf5 0 calc(var(--card-step) * .5), #a9a79b calc(var(--card-step) * .5) calc(var(--card-step) * .78), #e9e7dd calc(var(--card-step) * .78) var(--card-step));
  box-shadow: inset -4px 0 3px #807e6640, 2px 3px 2px #061b2133;
  pointer-events: none;
  transition: height .09s linear, top .09s linear;
}
.physical-cut-upper {
  z-index: 3;
  top: 76px;
  height: var(--upper-depth);
  transform: translate(-11px, -10px) rotate(-1deg);
  transform-origin: right bottom;
  box-shadow: inset -4px 0 3px #807e6640, 3px 6px 5px #051f2470;
}
.physical-cut-lower { z-index: 2; top: calc(76px + var(--upper-depth)); height: var(--lower-depth); }
.physical-cut-upper-back {
  position: absolute;
  left: -1px;
  right: -2px;
  top: -60px;
  height: 64px;
  border-width: 4px;
  transform: skewX(-12deg);
  transform-origin: left bottom;
  box-shadow: inset 0 0 0 1px #08214d, 1px 1px 1px #16295566;
}
.physical-cut-lower-back {
  position: absolute;
  left: -1px;
  right: -2px;
  top: -7px;
  height: 9px;
  border-width: 1px 3px;
  transform: skewX(-12deg);
  transform-origin: left bottom;
}
.physical-cut-lower-back::before, .physical-cut-lower-back::after { content: none; }
.physical-cut-marker {
  position: absolute;
  z-index: 5;
  left: 28px;
  right: 25px;
  top: calc(76px + var(--upper-depth) - 1px);
  height: 2px;
  background: #f0d39a;
  box-shadow: 0 1px 0 #785b3180;
  pointer-events: none;
  transition: top .09s linear;
}
.physical-cut-marker::before { content: ""; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1px; background: #f0d39a; }
.physical-cut-marker-value {
  position: absolute;
  right: -9px;
  top: -12px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #fff4cf;
  border-radius: 7px;
  background: #efd397;
  color: #253f34;
  font: 700 12px Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 4px #061c2250;
}
.physical-cut-totals { display: flex; justify-content: center; gap: 22px; margin-top: 0; direction: rtl; }
.physical-cut-total { display: flex; align-items: center; gap: 5px; font: 10px Arial, sans-serif; color: #b8d0b5; white-space: nowrap; }
.physical-cut-number { color: #f0d49e; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.physical-cut-hint { display: block; margin: 8px 0 0; font: 10px/1.5 Arial, sans-serif; color: #a8bfa4; text-align: center; }
.physical-cut.is-disabled .physical-cut-surface { cursor: default; }
.physical-cut.is-disabled .physical-cut-marker { opacity: .6; }
.physical-cut.is-disabled .physical-cut-hint { visibility: hidden; }
.physical-cut-surface.is-dragging .physical-cut-packet, .physical-cut-surface.is-dragging .physical-cut-marker { transition: none; }
@media (max-width: 359px) {
  .physical-cut-total { font-size: 9px; gap: 4px; }
  .physical-cut-totals { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .physical-stock, .physical-cut-packet, .physical-cut-marker { transition: none; }
}


/* A physical shuffle: two packets fan apart, alternate their individual
   backs into the center, then square. DeckUI controls only this visual deck. */
.setup-panel .setup-deck.physical-shuffle-mount {
  width: min(100%, 248px);
  height: 136px;
  min-height: 136px;
  margin: 2px 0 4px;
  overflow: visible;
}
.setup-panel .setup-deck.physical-shuffle-mount > .physical-shuffle {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  width: 100%;
  height: 100%;
  isolation: isolate;
  pointer-events: none;
  direction: ltr;
}
.physical-shuffle-leaf {
  position: absolute;
  left: calc(50% - 36px);
  top: 10px;
  width: 72px;
  height: 100px;
  border-width: 4px;
  border-radius: 7px;
  transform-origin: center 85%;
  box-shadow: inset 0 0 0 1px #092157, 1px 1px 0 #b5b3a7, 0 3px 5px #031d245c;
  backface-visibility: hidden;
}
.physical-shuffle.is-shuffling .physical-shuffle-leaf { will-change: transform; }
.physical-shuffle-shadow {
  position: absolute;
  z-index: 0;
  left: calc(50% - 57px);
  top: 104px;
  width: 116px;
  height: 20px;
  border-radius: 50%;
  background: #02181359;
  filter: blur(6px);
}
.physical-shuffle.is-shuffling .physical-shuffle-shadow { animation: physical-shuffle-shadow 960ms linear both; }
.physical-shuffle.is-shuffle-confirmed .physical-shuffle-shadow { background: #dfd8a555; }
@keyframes physical-shuffle-shadow {
  0%, 94%, 100% { transform: scaleX(.8); opacity: .9; }
  18%, 35% { transform: scaleX(1.75); opacity: .55; }
  75% { transform: scaleX(1); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .physical-shuffle.is-shuffling .physical-shuffle-leaf,
  .physical-shuffle.is-shuffling .physical-shuffle-shadow { animation: none !important; }
}

/* TableLayout.fit owns this host's exact geometry. The hand, deck widget and
   full-face inspection dialog keep their independent physical card layouts. */
#game #table-scroll.table-fitted {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--table-zone-gap, 9px);
  padding: var(--table-padding-y, 8px) var(--table-padding-x, 9px);
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  border: 0;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 48% 43%, #55a45322, transparent 74%),
    repeating-linear-gradient(22deg, #ffffff02 0 1px, transparent 1px 3px),
    repeating-linear-gradient(112deg, #092e220a 0 1px, transparent 1px 4px),
    linear-gradient(140deg, #226f48, #145535 68%, #104a32);
  box-shadow: inset 0 0 0 1px #dbcba12b, inset 0 0 0 3px #123d293f,
    inset 0 9px 22px #072f252c, inset 0 -4px 12px #082a1d2b;
}
#game #table-scroll.table-fitted > .table-zone {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--zone-height);
  height: var(--zone-height);
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: visible;
}
#game #table-scroll.table-fitted .zone-heading {
  display: flex;
  flex: 0 0 var(--zone-heading-height, 16px);
  height: var(--zone-heading-height, 16px);
  min-height: 0;
  margin: 0 0 var(--zone-heading-gap, 5px);
  font-size: var(--zone-heading-size, 11px);
  line-height: 1;
  gap: 8px;
  color: #d5e2bc;
  text-shadow: 0 1px 2px #173e27;
  white-space: nowrap;
}
#game #table-scroll.table-fitted .zone-line { background: #c3d69c30; }
#game #table-scroll.table-fitted .zone-suit { color: #c8dba18a; }
#game #table-scroll.table-fitted .meld-area {
  display: grid;
  grid-template-columns: repeat(var(--meld-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--meld-rows, 1), minmax(0, 1fr));
  flex: 0 0 var(--zone-area-height);
  height: var(--zone-area-height);
  min-height: 0;
  min-width: 0;
  gap: var(--meld-gap, 7px);
  align-items: stretch;
  direction: ltr;
}
#game #table-scroll.table-fitted .meld,
#game #table-scroll.table-fitted .meld.meld-wide {
  grid-column: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#game #table-scroll.table-fitted .meld-header,
#game #table-scroll.table-fitted .meld > .meld-meta { display: none; }
#game #table-scroll.table-fitted .meld.is-target {
  outline: 1.5px solid #ead694;
  outline-offset: -1px;
  background: #f1da9320;
}
#game #table-scroll.table-fitted .meld.staged-meld { background: #d5ebb719; }
#game #table-scroll.table-fitted .meld:focus-visible { outline-offset: -1px; }
#game #table-scroll.table-fitted .meld-cards {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  width: var(--table-strip-width);
  height: var(--table-card-height);
  max-width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  margin: 0;
  direction: ltr;
  overflow: visible;
  isolation: isolate;
}
#game #table-scroll.table-fitted .meld-cards > .card,
#game #table-scroll.table-fitted .meld-cards > .card:first-child,
#game #table-scroll.table-fitted .meld-cards > .card:last-child {
  --card-index-size: var(--table-index-size);
  --card-index-suit: var(--table-suit-size);
  --card-index-inset: var(--table-corner-inset);
  width: var(--table-card-width);
  min-width: var(--table-card-width);
  height: var(--table-card-height);
  flex: 0 0 var(--table-card-width);
  margin: 0;
  border-width: min(1px, var(--table-corner-inset));
  border-radius: var(--table-card-radius, 4px);
  transform: none;
  box-shadow: 0 1px 2px #05271d55;
  pointer-events: none;
}
#game #table-scroll.table-fitted .meld-cards > .card + .card {
  margin-left: calc(var(--table-card-step) - var(--table-card-width));
}
#game #table-scroll.table-fitted .meld-cards .card-rank,
#game #table-scroll.table-fitted .meld-cards .card-bottom {
  min-width: 0;
  line-height: .85;
  gap: 0;
  font-size: var(--table-index-size);
}
#game #table-scroll.table-fitted .meld-cards .card-suit { font-size: var(--table-suit-size); }
#game #table-scroll.table-fitted .meld-cards .wild-role {
  display: block;
  bottom: var(--table-corner-inset);
  inset-inline: auto;
  left: var(--table-corner-inset);
  right: auto;
  width: calc(var(--table-card-step) - var(--table-corner-inset) * 2);
  padding: 0;
  font-size: var(--table-role-size, 7px);
  line-height: 1.1;
  border-radius: 1px;
  text-align: left;
  white-space: nowrap;
}
#game #table-scroll.table-fitted .meld-cards > .card:last-child .wild-role {
  width: calc(var(--table-card-width) - var(--table-corner-inset) * 2);
}
#game #table-scroll.table-fitted .meld-empty {
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  min-height: 0;
  padding: 0;
  margin: 0;
  direction: rtl;
  color: #c4d7a580;
  font-size: min(11px, var(--zone-area-height));
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  #game #table-scroll.table-fitted .meld { animation: none; }
}


/* Physical table and a visible hand fan. Kept last after fitted table/deck rules. */
.game-screen{min-height:0;background:radial-gradient(ellipse at 50% 44%,#237244 0%,#135437 55%,#0b3428 100%);box-shadow:inset 4px 0 0 #82623d,inset -4px 0 0 #82623d,inset 7px 0 0 #d0a86933,inset -7px 0 0 #d0a86933}
.game-screen::before{opacity:.16}
.topbar{background:linear-gradient(180deg,#102f26ef,#0e3c2ccc);border-bottom-color:#e5d4a32b}
.avatar{border:2px solid #d2b66b;background:linear-gradient(145deg,#f2e5b6,#c4b378);box-shadow:0 3px 0 #071e2355;color:#214b32}
.turn-label.is-my-turn{background:linear-gradient(180deg,#f8dc8d,#e6bc63);box-shadow:0 2px 0 #082b2355;color:#233a28}
.step.active{color:#f2d488}
.hand-panel{background:linear-gradient(180deg,#15452f,#0c3227);color:#e7ead7;border-top:2px solid #c9a46b;border-radius:24px 24px 0 0;box-shadow:0 -5px 16px #06271844,inset 0 1px 0 #f4d3a62b;padding:8px 12px max(9px,var(--safe-bottom));overflow:hidden}
.hand-title>strong{color:#f1ead4}
.hand-count{color:#dbdfc6;background:#ffffff10;border:1px solid #e6ddb82a}
.my-score-wrap,.selection-status{color:#b7c8a7}
.my-score-wrap>b{color:#f0d184}
.sort-group{background:#0a2d2188;border:1px solid #bcd3a62b}
.hand-toolbar .tool-button{color:#c1d0b7}
.hand-toolbar .tool-button.active{color:#173e2a;background:linear-gradient(180deg,#f6e4b5,#e3cc91);box-shadow:0 2px 0 #031f1944}
.hand-view-button,.hand-manual-button{border-color:#bdd0a73b}
.clear-button{color:#c1d0b7}
.hand-panel .button-primary{background:linear-gradient(180deg,#f5da8d,#e9c46d);box-shadow:0 3px 0 #8a693a55;color:#243e2b}
.hand-panel .button-outline{background:#f8f0d9;border-color:#e4d3a3;color:#244832}
.hand-scroll-hint{color:#c8d5b5}
:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:72px;--hand-card-height:104px;--hand-step:clamp(20px,calc((min(100vw,720px) - 88px - var(--hand-card-width)) / var(--hand-steps,10)),44px);height:148px;min-height:148px;max-height:148px;padding:20px 30px 7px;scroll-padding-inline:30px;scrollbar-color:#a3bd8877 transparent;align-items:flex-start}
:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging)>.card{transform-origin:50% 94%;box-shadow:0 3px 5px #001e2270,0 6px 12px #082c2255}
:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging)>.card.selected{transform:translateY(calc(var(--fan-drop,0px) - 12px)) rotate(var(--fan-angle,0deg));border-color:#f6d377;box-shadow:0 0 0 2px #f2d38155,0 8px 13px #03251c88}
.hand .classic-card{--card-index-size:17px;--card-index-suit:12px;--card-index-inset:3px}
.hand .court-card{--card-index-size:15px;--card-index-suit:11px;--card-index-inset:1px}
.hand.is-arranging{background:#e8edde;border-color:#88b5c9;border-radius:12px}
.hand.is-arranging .classic-card{--card-index-size:18px;--card-index-suit:13px}
.pile-dock{padding:5px 16px 4px;min-height:84px;gap:8px;max-width:620px}
.pile-button,.side-pile-area{min-height:74px;gap:8px;flex-direction:row}
.pile-button:disabled{opacity:1}
.pile-button:disabled .pile-copy{opacity:.6}
.pile-button:not(:disabled){background:#082e2022;border:1px solid #e7d4a724;box-shadow:inset 0 1px 0 #e9d8aa11}
.pile-button:not(:disabled):hover{background:#f1d38b14}
.stock-pile .deck-stack{--stock-width:44px;--stock-height:60px;width:44px;height:72px;flex:0 0 44px;transform:rotate(-7deg);margin:0}
.discard-top{width:44px;height:61px;flex:0 0 44px;transform:rotate(5deg);border:1px dashed #d1d7b454;background:#0b322a33}
.discard-top>.card{width:44px;min-width:44px;height:61px;box-shadow:0 2px 4px #031e1966}
.pile-copy{gap:3px}
.pile-copy strong{font-size:11px;color:#eadcaa}
.pile-copy small{font-size:11px;color:#c6d3b4}
.side-piles{height:47px;gap:4px}
.mini-deck{width:23px;height:35px;transform:rotate(-8deg);background:repeating-conic-gradient(#293f8d 0% 25%,#4964b8 0% 50%) 0 0/4px 4px;border:2px solid #f1eddc;box-shadow:1px 2px 0 #c8c6bd,2px 3px 0 #909894,3px 4px 4px #09291f66}
.mini-deck:nth-child(2){transform:rotate(9deg)}
.mini-deck::before{background:none;border:1px solid #d9e0ff88}
.mini-deck>span{color:#fff8dc;background:#23356ad9;border-radius:4px;padding:2px;font-size:10px;text-shadow:0 1px 1px #183b29}
.mini-deck.taken{box-shadow:none}
.side-pile-area .pile-copy strong{font-size:10px}
.setup-panel h2{color:#f5dc98}
.setup-panel p{color:#d3e3c7}
.setup-panel .setup-deck>i{background:repeating-conic-gradient(#293f8d 0% 25%,#4964b8 0% 50%) 0 0/5px 5px;border-color:#f1eddf;box-shadow:2px 3px 0 #d7d9d1,3px 5px 0 #afb4a9,4px 7px 7px #08271e88}
.setup-panel .setup-deck>span{color:#fbf5d8}
@media(min-width:540px){:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:82px;--hand-card-height:118px;--hand-step:clamp(24px,calc((min(100vw,720px) - 120px - var(--hand-card-width)) / var(--hand-steps,10)),56px);height:162px;min-height:162px;max-height:162px;padding-inline:34px}}
@media(max-width:359px){.pile-dock{padding-inline:10px;gap:5px}.pile-button,.side-pile-area{gap:5px}.stock-pile .deck-stack{--stock-width:38px;--stock-height:52px;width:38px;height:64px;flex-basis:38px}.discard-top,.discard-top>.card{width:38px;min-width:38px;height:53px}.discard-top{flex-basis:38px}.pile-copy strong{font-size:10px}.pile-copy small{font-size:10px}.side-piles{gap:3px}.mini-deck{width:20px;height:31px}.side-pile-area .pile-copy strong{font-size:9px}:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:66px;--hand-card-height:96px;--hand-step:clamp(20px,calc((100vw - 82px - var(--hand-card-width)) / var(--hand-steps,10)),40px);padding-inline:26px;height:140px;min-height:140px;max-height:140px}}
@media(max-height:680px) and (orientation:portrait){.topbar{padding-block:6px}.avatar{width:36px;height:36px;font-size:19px}.turn-strip{padding-block:5px}.hand-panel{padding-top:5px;padding-bottom:max(6px,var(--safe-bottom))}.hand-toolbar{min-height:35px}:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:64px;--hand-card-height:92px;height:132px;min-height:132px;max-height:132px;padding-top:18px}.pile-dock{min-height:75px;padding-block:2px}.pile-button,.side-pile-area{min-height:70px}.stock-pile .deck-stack{--stock-width:38px;--stock-height:52px;width:38px;height:64px;flex-basis:38px}.discard-top,.discard-top>.card{width:38px;min-width:38px;height:52px}.discard-top{flex-basis:38px}.game-notice{font-size:9px;min-height:16px;padding-block:2px}}
@media(max-height:640px) and (orientation:portrait){.game-screen:has(#stage-area:not([hidden])) :is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:56px;--hand-card-height:80px;height:117px;min-height:117px;max-height:117px;padding:17px 30px 4px}:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:62px;--hand-card-height:88px;height:125px;min-height:125px;max-height:125px}.game-screen:has(#stage-area:not([hidden])) .hand .classic-card{--card-index-size:15px;--card-index-suit:10px}}
@media(orientation:landscape) and (max-height:540px){.game-screen{min-height:0}.topbar{padding-block:5px}.avatar{width:30px;height:30px;font-size:17px}.opponent-score-row{margin-top:3px}.topbar-actions .icon-button{height:36px;min-height:36px}.turn-strip{padding-block:4px}.hand-heading{display:none}.hand-toolbar{position:static;min-height:31px;gap:5px}.hand-panel{padding-top:3px;padding-bottom:max(4px,var(--safe-bottom))}:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging){--hand-card-width:54px;--hand-card-height:76px;--hand-step:clamp(20px,calc((min(100vw,720px) - 90px - var(--hand-card-width)) / var(--hand-steps,10)),42px);height:108px;min-height:108px;max-height:108px;padding:16px 30px 4px}.selection-status{display:none}.action-bar{padding-top:1px}.action-buttons>.button{min-height:36px;padding-block:8px}.pile-dock{position:absolute;top:82px;right:10px;width:128px;min-height:0;display:flex;flex-wrap:wrap;gap:7px;padding:0;align-content:flex-start}.pile-button{width:59px;min-height:64px;flex-direction:column;gap:1px;border:0!important;background:transparent!important}.stock-pile .deck-stack{--stock-width:28px;--stock-height:39px;--deck-depth-scale:.6;width:28px;height:49px;flex-basis:49px;margin:0 0 1px}.discard-top,.discard-top>.card{width:28px;min-width:28px;height:39px}.discard-top{flex-basis:39px}.pile-copy{display:flex;flex-direction:row;gap:3px}.pile-copy strong,.pile-copy small{font-size:9px}.side-pile-area{width:100%;min-height:30px;gap:7px;justify-content:center}.side-piles{height:28px}.mini-deck{width:18px;height:26px}.game-notice{font-size:8px;min-height:12px;padding-block:1px}}
@media(prefers-reduced-motion:reduce){.hand>.card,.physical-deck,.deck-stock-mount{transition:none!important}}
.setup-panel.cut-setup{padding-block:4px}
.setup-panel.cut-setup h2{margin:0 0 5px;font-size:23px}
.setup-panel.cut-setup>p{margin:0 auto 3px;max-width:300px;font-size:11px;line-height:1.5}
.setup-panel.cut-setup>small{display:block;margin-top:6px;font-size:10px;color:#c7dab5}
@media(max-height:590px) and (orientation:portrait){#cut-deck{height:202px}.physical-cut{transform:scale(.84);transform-origin:top center}.setup-panel.cut-setup>p{font-size:10px}}
@media(orientation:landscape) and (max-height:540px){#table-scroll.table-fitted{margin-inline-start:148px;margin-inline-end:8px}#cut-deck{height:177px}.physical-cut{transform:scale(.74);transform-origin:top center}.setup-panel.cut-setup h2{font-size:18px}.setup-panel.cut-setup>p{font-size:9px}.setup-panel.cut-setup>small{margin-top:2px}}
@media(orientation:landscape) and (max-height:360px){.pile-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));top:72px;gap:3px}.pile-button{width:40px;min-height:54px}.side-pile-area{width:40px;min-height:54px;flex-direction:column;gap:2px}.side-piles{height:23px;gap:2px}.mini-deck{width:12px;height:21px;border-width:1px}.mini-deck>span{font-size:7px;padding:0}.side-pile-area .pile-copy strong{font-size:8px;white-space:normal;text-align:center;line-height:1.1}.pile-copy strong,.pile-copy small{font-size:8px}.stock-pile .deck-stack{--stock-width:25px;--stock-height:34px;--deck-depth-scale:.4;width:25px;height:40px;flex-basis:40px}.discard-top,.discard-top>.card{width:25px;min-width:25px;height:34px}.discard-top{flex-basis:34px}.setup-panel.cut-setup>p{display:none}#cut-deck{height:156px}.physical-cut{transform:scale(.66)}}


/* Direct hand gestures and the public cut-card reminder. */
.hand>.card{touch-action:none;-webkit-touch-callout:none}
.cut-reveal-button{position:relative;display:block;margin:2px auto 0;padding:5px 4px;border:1px solid #e4cc8e50;border-radius:7px;background:#ebd39c12;color:#f0d99d;font:inherit;font-size:9px;font-weight:700;white-space:nowrap;min-height:28px;cursor:pointer}
.cut-reveal-button::before{content:"";position:absolute;inset:-7px -2px}
.cut-reveal-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cut-reveal-button:hover{background:#ebd39c25}
.cut-reveal-body{text-align:center}
.cut-reveal-preview{display:flex;justify-content:center;padding:12px 0 18px}
.cut-reveal-preview>.card{width:112px;min-width:112px;height:158px;cursor:default;box-shadow:0 8px 22px #15352830;transform:rotate(-4deg)}
.cut-reveal-preview .card-rank{font-size:25px}.cut-reveal-preview .card-suit{font-size:21px}.cut-reveal-preview .card-bottom{font-size:19px}
.cut-reveal-body>strong{font-size:19px;color:var(--ink)}.cut-reveal-body>p{line-height:1.7;color:#52695f;font-size:13px}.cut-reveal-joker{padding:10px;border-radius:10px;background:#e7f0dc}
@media(orientation:landscape) and (max-height:540px){.side-pile-area .pile-copy{flex-direction:column;gap:1px}.cut-reveal-button{font-size:8px;padding:3px;min-height:24px}.cut-reveal-preview>.card{width:82px;min-width:82px;height:116px}.cut-reveal-preview{padding:6px 0 10px}}
@media(orientation:landscape) and (max-height:360px){.cut-reveal-button{font-size:7px;padding:3px 1px;white-space:normal;line-height:1.2;min-height:24px}.side-pile-area .pile-copy>strong{display:none}}

.hand>.card.reorder-dragging{opacity:.3;cursor:grabbing}
.hand:not(.is-arranging)>.card.drop-before,.hand:not(.is-arranging)>.card.drop-after{border-color:#5cace0;box-shadow:0 0 0 2px #5cace088,0 4px 10px #03251c88!important}

/* Both neighbours frame the insertion gap while the held card is moving. */
.hand>.card:is(.drop-before,.drop-after):not(.reorder-dragging){border-color:#7cc7ed!important;box-shadow:0 0 0 2px #75c5edbb,0 7px 12px #03251c88!important;z-index:calc(var(--i,1) + 100)}
:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):not(.hand-spread):not(.is-arranging)>.card:is(.drop-before,.drop-after):not(.selected){transform:translateY(calc(var(--fan-drop,0px) - 8px)) rotate(var(--fan-angle,0deg))}
:is(.hand,.game-screen:has(#stage-area:not([hidden])) .hand):is(.hand-spread,.is-arranging)>.card:is(.drop-before,.drop-after):not(.selected):not(.reorder-picked){transform:translateY(-5px)}

@media(max-width:359px){.cut-reveal-button{white-space:normal;max-width:100%;padding-inline:2px;line-height:1.25}}
@media(orientation:landscape) and (max-height:540px){.cut-reveal-preview .card-rank{font-size:18px}.cut-reveal-preview .card-suit{font-size:13px}.cut-reveal-preview .card-bottom{font-size:16px}.cut-reveal-preview .court-card .card-rank{font-size:16px}.cut-reveal-preview .court-card .card-suit{font-size:12px}}

/* A small physical pile: recent faces peek out, with the newest above them. */
#discard-top.discard-stack {
  --discard-unit: 1px;
  --discard-card-width: 32px;
  --discard-card-height: 46px;
  position: relative;
  display: block;
  width: 66px;
  min-width: 66px;
  height: 72px;
  flex: 0 0 66px;
  margin: 0;
  transform: none;
  isolation: isolate;
  border: 1px dashed #d1d7b454;
  border-radius: 9px;
  background: #0b322a33;
  overflow: visible;
}
#discard-top.discard-stack.has-cards { border: 0; background: transparent; }
#discard-top.discard-stack > .discard-card {
  --card-index-size: 7px;
  --card-index-suit: 5px;
  --card-index-inset: 1px;
  position: absolute;
  top: calc(var(--discard-y) * var(--discard-unit));
  left: calc(var(--discard-x) * var(--discard-unit));
  width: var(--discard-card-width);
  min-width: var(--discard-card-width);
  height: var(--discard-card-height);
  margin: 0;
  border-width: 1px;
  border-radius: 4px;
  transform: rotate(var(--discard-angle));
  transform-origin: 50% 50%;
  z-index: var(--discard-layer);
  pointer-events: none;
  transition: none;
  box-shadow: 0 1px 2px #001e2255;
}
#discard-top.discard-stack > .is-top-discard {
  --card-index-size: 10px;
  --card-index-suit: 7px;
  box-shadow: 0 2px 4px #001e2270;
}
#discard-top.discard-stack .card-rank,
#discard-top.discard-stack .card-bottom { font-size: var(--card-index-size); gap: 1px; }
#discard-top.discard-stack .card-suit { font-size: var(--card-index-suit); }
#discard-top.discard-stack > .discard-card:not(.is-top-discard) .card-bottom,
#discard-top.discard-stack > .discard-card:not(.is-top-discard) .wild-role { display: none; }
#discard-top.discard-stack > .empty-pile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #bdcdb38c;
  font-size: 10px;
}
#discard-btn:hover:not(:disabled) > .discard-stack { transform: translateY(-2px); }
@media (max-width: 359px), (max-height: 680px) and (orientation: portrait) {
  #discard-top.discard-stack {
    --discard-unit: .83px;
    --discard-card-width: 27px;
    --discard-card-height: 39px;
    width: 56px;
    min-width: 56px;
    height: 64px;
    flex-basis: 56px;
  }
  #discard-top.discard-stack > .discard-card { --card-index-size: 6px; --card-index-suit: 4px; }
  #discard-top.discard-stack > .is-top-discard { --card-index-size: 9px; --card-index-suit: 6px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  #discard-top.discard-stack {
    --discard-unit: .67px;
    --discard-card-width: 23px;
    --discard-card-height: 33px;
    width: 47px;
    min-width: 47px;
    height: 49px;
    flex-basis: 49px;
  }
  #discard-top.discard-stack > .discard-card { --card-index-size: 6px; --card-index-suit: 4px; }
  #discard-top.discard-stack > .is-top-discard { --card-index-size: 8px; --card-index-suit: 5px; }
}
@media (orientation: landscape) and (max-height: 360px) {
  #discard-top.discard-stack {
    --discard-unit: .56px;
    --discard-card-width: 19px;
    --discard-card-height: 27px;
    width: 39px;
    min-width: 39px;
    height: 40px;
    flex-basis: 40px;
  }
  #discard-top.discard-stack > .is-top-discard { --card-index-size: 7px; --card-index-suit: 5px; }
}

/* Chat occupies the table area; incoming messages never cover the hand. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar-actions .chat-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:68px;padding:0 9px;border:1px solid #e8c98555;border-radius:12px;background:#e8c98512;color:#f4dfaf;font-size:12px;font-weight:700}
.chat-toggle>.icon{width:18px;height:18px;flex-basis:18px}
.chat-toggle.has-unread{background:#e8c98529;border-color:#e8c985b3}
.chat-unread{position:absolute;top:-5px;inset-inline-end:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#e8c985;color:#173c33;border:2px solid #174f37;font-size:10px;font-weight:800;line-height:1}
#game.chat-open{height:var(--chat-viewport-height,100dvh)}
#game.chat-open #table-scroll{display:flex;flex-direction:column;overflow:hidden;padding:7px 12px;min-height:0}
#game.chat-open #table-scroll>.table-zone,#game.chat-open #table-scroll>.setup-panel{display:none}
#game.chat-open .pile-dock,#game.chat-open #notice,#game.chat-open #stage-area{display:none}
#game .chat-panel{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;height:100%;padding:11px 12px 6px;border:1px solid #eedfbb;border-radius:18px;background:linear-gradient(155deg,#fffcf3,#f4f2e6);box-shadow:0 5px 16px #09231830;overflow:hidden}
#game .chat-heading{flex-shrink:0;gap:8px;padding-bottom:8px;border-bottom:1px solid #dedfcd;align-items:center}
.chat-heading>div{min-width:0}
.chat-heading>div>strong{display:block;font-size:15px;letter-spacing:-.02em}
.chat-heading>div>small{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:10px;color:#768177;flex-wrap:wrap}
#chat-peer-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-connection::before{content:'';display:inline-block;width:5px;height:5px;margin-inline-end:4px;border-radius:50%;background:#b49c75;vertical-align:middle}
#chat-connection.is-connected::before{background:#70975b}
.chat-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:4px;min-height:44px;padding:8px;border-radius:11px;background:#e5ebd7;color:#45613c;font-size:11px;font-weight:700}
.chat-close>.icon{width:17px;height:17px;flex-basis:17px}
#game .chat-messages{flex:1;min-height:0;max-height:none;margin:0;padding:10px 2px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;overflow-anchor:none;display:flex;flex-direction:column;gap:8px}
#game .chat-message{flex-shrink:0;max-width:85%;min-width:68px;padding:8px 11px 5px;margin:0;border:1px solid #d9e0c7;border-radius:14px;box-shadow:0 1px 2px #33452708;overflow-wrap:anywhere}
#game .chat-message-own{align-self:flex-start;background:#dfebcf;border-bottom-right-radius:4px}
#game .chat-message-peer{align-self:flex-end;background:#fffdfa;border-color:#e2dfd0;border-bottom-left-radius:4px}
#game .chat-message-name{display:block;color:#748365;font-size:10px;line-height:1.4;margin-bottom:3px}
#game .chat-message-text{padding:0;margin:0;background:none;border-radius:0;white-space:pre-wrap;font-size:14px;line-height:1.55;color:#264532;text-align:start}
.chat-message-time{display:block;margin-top:4px;font-size:9px;color:#8c9483;text-align:left;line-height:1.4}
.chat-empty{flex:1;min-height:30px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:12px 0;text-align:center;font-size:14px;color:#68805f}
.chat-empty>small{font-size:11px;color:#89937d}
.chat-panel:has(#chat-empty:not([hidden])) #chat-messages{display:none}
.chat-panel .quick-reactions{flex-shrink:0;gap:5px;flex-wrap:nowrap;margin:5px 0 7px}
.chat-panel .quick-reaction{flex:1;min-width:0;min-height:40px;padding:6px 7px;border:1px solid #d7dfc5;border-radius:10px;background:#edf1e2;color:#536e47;font-size:11px;white-space:nowrap}
.chat-panel .quick-reaction[data-reaction="👏"],.chat-panel .quick-reaction[data-reaction="😄"]{flex:0 0 40px;font-size:19px}
#game .chat-compose{flex-shrink:0;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:0}
#game .chat-compose input{min-height:46px;font-size:16px;border-radius:12px;padding:10px 12px;background:#fffdf8}
#game .chat-compose .button{min-height:46px;min-width:64px;padding:10px 12px;font-size:12px;border-radius:12px}
.chat-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0;min-height:19px;font-size:9px;line-height:1.35;color:#8b937f;padding-top:4px}
#chat-status.is-error{color:#ac5e3c}
#chat-count{flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-new-messages{align-self:center;flex-shrink:0;min-height:36px;padding:7px 13px;margin:3px 0;border:1px solid #bacba2;border-radius:99px;background:#e4edcf;color:#48663c;font-size:11px;box-shadow:0 2px 5px #34592712}
@media(max-width:359px){.topbar-actions .chat-toggle{min-width:60px;padding-inline:7px;gap:3px}.chat-toggle>span:not(.chat-unread){font-size:11px}#game .chat-panel{padding-inline:9px}.chat-heading>div>small{gap:4px}.chat-close{font-size:10px;padding-inline:7px}#chat-peer-name{max-width:105px}}
@media(orientation:landscape) and (max-height:540px){#game.chat-open #table-scroll{margin-inline:12px;padding-inline:0}.chat-heading>div>small{margin-top:0}.chat-heading>div>strong{font-size:12px}#game .chat-heading{padding-bottom:4px}.chat-close{min-height:36px}.chat-panel .quick-reactions{display:none}#game .chat-panel{padding-top:6px}#game .chat-compose input,#game .chat-compose .button{min-height:40px}.chat-footer{min-height:14px}#game.chat-open .hand-toolbar,#game.chat-open .action-bar{display:none}}
@media(max-width:720px){#game.chat-open:has(#chat-input:focus) .hand-panel{display:none}#game.chat-open:has(#chat-input:focus) #stage-area{display:none}}

/* The seat count is visible before starting; computers fill the open seats. */
.table-count-picker{margin:5px 0 14px}.table-count-picker>span{display:block;font-size:12px;font-weight:700;color:#586654;margin-bottom:8px}.player-count-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.player-count-options>button{min-height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #d8dbc9;border-radius:12px;background:#f4f1e6;color:#4e6250;font-size:19px;font-weight:800;transition:background .15s,border-color .15s}.player-count-options>button>span{font-size:10px;font-weight:500}.player-count-options>button.is-selected{background:#e2ebd7;border-color:#5b815c;color:#244b36;box-shadow:inset 0 0 0 1px #5b815c}.composition-note{font-size:11px;line-height:1.65;color:#697764;margin:9px 0 0}.room-configuration{margin-top:15px;border:1px solid #dde3d1;border-radius:14px;background:#f5f4e8;padding:12px}.room-config-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.room-config-fields>label{font-size:11px;font-weight:700;color:#65705a}.room-config-fields select{margin-top:5px;width:100%;min-height:42px;padding:7px;font-size:13px;background:#fffdf6;border:1px solid #d8ddcc;border-radius:9px}.room-seating-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}.seat-preview{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:8px;border:1px solid #dce0d0;border-radius:9px;background:#fffdf5;font-size:11px;min-width:0}.seat-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-preview small{white-space:nowrap;font-size:9px;color:#7c866d}.seat-preview.team-one,.lobby-seat.team-one{border-inline-start:3px solid #c39b41}.seat-preview.team-two,.lobby-seat.team-two{border-inline-start:3px solid #788ec1}#room-mode-note{color:#916d28}.local-game-config>label{display:block;margin:13px 0 7px;font-size:12px;font-weight:700}.local-game-config>select{width:100%;min-height:45px;border-radius:11px;border:1px solid #d7ddca;padding:9px;background:#f2f3e8}.local-player-names{display:flex;flex-direction:column;gap:9px;margin-top:12px}.local-player-names .text-input{width:100%;min-height:45px;margin:0}.multiplayer-heading{min-width:0;display:flex;flex-direction:column;gap:5px}.multiplayer-heading>strong{font-size:13px;font-weight:700;white-space:nowrap}.multiplayer-heading>span{font-size:10px;color:#a7bea0}.multiplayer-table .opponent-profile{display:none}.participants{display:grid;grid-template-columns:repeat(var(--participant-columns,4),minmax(0,1fr));gap:5px;flex-basis:100%;width:100%;margin-top:7px}.participant{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:53px;padding:7px 7px 6px;border:1px solid #dbe4c323;border-radius:10px;background:#071f1b33;color:#d0dfc0;transition:border-color .2s,background .2s}.participant>strong{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;max-width:100%}.participant>small{font-size:9px;white-space:nowrap;color:#aac0a4}.participant-role{font-size:8px;color:#829f82}.participant.is-me{background:#d7e5b710}.participant.is-partner{border-color:#ccb76b69}.participant.is-partner>.participant-role{color:#e0c986}.participant.is-active{border-color:#eed199;background:#d8c38119;box-shadow:inset 0 -2px 0 #e5c582}.participant.is-active>strong{color:#fff0c7}.participant.is-active::after{content:"";position:absolute;top:7px;inset-inline-end:6px;width:4px;height:4px;border-radius:50%;background:#f0d58e}.participant.is-active>strong{padding-inline-end:6px}#game .zone-heading>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.room-lobby{margin:auto;width:min(100%,340px);padding:16px 4px;text-align:center}.lobby-suit{font-size:38px;color:#e9cd8d;display:block;margin-bottom:8px}.room-lobby>h2{font-size:22px;margin:0 0 10px;letter-spacing:-.02em}.room-lobby>p{font-size:12px;color:#b9cfac;line-height:1.65;margin:0 0 14px}.lobby-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lobby-seat{display:flex;flex-direction:column;gap:7px;padding:13px 8px;background:#041f194a;border:1px dashed #a2bc835e;border-radius:12px;min-width:0;color:#b5c9a6}.lobby-seat>strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-seat>small{font-size:10px;line-height:1.5}.lobby-seat.is-ready{background:#d3e6a914;border-style:solid;border-color:#b5d68a75;color:#e7f0d7}.room-lobby>.lobby-note{margin-top:18px;font-size:10px;color:#93af88}#game.is-waiting #table-scroll{display:flex;flex-direction:column;overflow:auto}#game.is-waiting #table-scroll>.table-zone,#game.is-waiting>.pile-dock,#game.is-waiting>.hand-panel,#game.is-waiting>#notice,#game.is-waiting>#stage-area{display:none}#game.is-waiting .stepper{visibility:hidden}#game.chat-open #room-lobby{display:none}.score-partnership-note{font-size:11px;line-height:1.75;color:#6b775c}.chat-message-peer[data-seat="2"]{border-inline-start:2px solid #c8b880}.chat-message-peer[data-seat="3"]{border-inline-start:2px solid #a6b6d7}
@media(max-width:359px){.participant{padding-inline:5px}.participant>small{font-size:8px}.multiplayer-heading>strong{font-size:11px}.room-config-fields{gap:6px}.room-config-fields>label{font-size:10px}.room-seating-preview{gap:5px}.seat-preview{padding-inline:6px;font-size:10px}.participants{gap:4px}}
@media(orientation:landscape) and (max-height:540px){.multiplayer-heading{gap:2px}.multiplayer-heading>strong{font-size:11px}.multiplayer-heading>span{font-size:8px}.participants{margin-top:3px;gap:5px}.participant{min-height:31px;padding:4px 7px;gap:2px}.participant>strong{font-size:9px}.participant>small{font-size:8px}.participant-role{display:none}.multiplayer-table .pile-dock{top:116px}.room-lobby{padding-block:3px}.lobby-suit{display:none}.room-lobby>h2{font-size:17px;margin-bottom:4px}.room-lobby>p{font-size:10px;margin-bottom:6px}.lobby-seat{padding:7px;gap:3px}.lobby-seat>strong{font-size:11px}.lobby-seat>small{font-size:9px}.room-lobby>.lobby-note{margin-top:8px}.multiplayer-table #table-scroll.table-fitted{margin-inline-start:148px}}
/* Keep every seat's count and exact score readable on narrow phones. */
.participant{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;row-gap:5px;align-content:center}.participant>strong{grid-column:1;grid-row:1;line-height:1.3}.participant>.participant-role{grid-column:2;grid-row:1;align-self:center;line-height:1.3}.participant>small{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:2px 5px;white-space:normal;line-height:1.3}.participant>small>span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.participant-score{color:#d6c694}.participant.is-active::after{display:none}.participant.is-active>strong{padding-inline-end:0}
@media(max-height:640px) and (orientation:portrait){.participants{margin-top:4px}.participant{min-height:36px;padding:4px 5px;gap:2px 3px}.participant>strong{font-size:10px}.participant>small{font-size:8px}.participant-role{font-size:7px}.multiplayer-heading{gap:2px}.multiplayer-heading>span{font-size:9px}.multiplayer-table #opponent-comment{display:none}}
@media(orientation:landscape) and (max-height:540px){.participant{grid-template-columns:minmax(0,1fr);min-height:31px;gap:2px}.participant>strong{grid-row:1}.participant>small{grid-row:2}.multiplayer-table .turn-strip{padding-block:3px}.multiplayer-table>.room-info{min-height:30px;margin-bottom:2px}#game.multiplayer-table #hand:not(.hand-spread):not(.is-arranging){--hand-card-width:48px;--hand-card-height:68px;height:96px;min-height:96px;max-height:96px}#game.multiplayer-table .hand-toolbar{min-height:28px}.multiplayer-table .action-buttons>.button{min-height:32px;padding-block:6px}.multiplayer-table #opponent-comment{display:none}}
/* Room closure is a deliberate action, distinct from saving a paused room. */
.room-exit-option{margin-top:17px;color:#8d4034;border-color:#dfc3b5;background:#fbf1e8;font-weight:700}
.button.room-close-confirm{background:#914b3d;color:#fff8ed;min-height:48px}
.button.room-close-confirm:hover:not(:disabled){background:#7e3d32}
.saved-room-close{width:100%;margin-top:5px;min-height:40px;background:transparent;color:#825748;font-size:11px;border:1px solid #e1d4c6}
.room-exit-note{font-size:14px;line-height:1.85}

/* A quiet activity line stays in the normal flow above the cards. */
.player-activity{flex:0 0 auto;min-height:16px;max-height:16px;margin:-2px 17px 3px;color:#c8d8bd;font-size:10px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .15s ease}
.player-activity.has-activity{opacity:1}
@media(max-height:640px){.player-activity{min-height:13px;max-height:13px;margin:-2px 12px 1px;font-size:9px;line-height:13px}}
@media(prefers-reduced-motion:reduce){.player-activity{transition:none}}

/* Count-only dealing scene: the same blue backs travel in four clockwise
   packets, land in little fans, then build the side packets. */
.deal-animation-host>.physical-deal{position:absolute;inset:0;z-index:35;overflow:hidden;isolation:isolate;pointer-events:none;direction:ltr;contain:layout paint}
.physical-deal>.physical-deal-felt{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#315f4feb 0,#194c3df2 50%,#12392fec 100%);box-shadow:inset 0 0 95px #082d2559}
.physical-deal .physical-deal-stock{position:absolute;width:var(--deal-card-width);height:var(--deal-card-height);filter:drop-shadow(3px 6px 5px #071d2166)}
.physical-deal .physical-blue-back{position:absolute;left:0;top:0;width:var(--deal-card-width);height:var(--deal-card-height);border-width:2px;border-radius:4px}
.physical-deal .physical-deal-flight{will-change:transform,opacity;transform-origin:50% 50%}
.physical-deal .physical-deal-landed{transform-origin:50% 50%}
.physical-deal .physical-deal-title{position:absolute;z-index:4;transform:translate(-50%,-50%);color:#f3dfb0;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.015em;text-shadow:0 2px 5px #092c22;direction:rtl}
.physical-deal .physical-deal-recipient{position:absolute;z-index:4;width:106px;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-50%);text-align:center;direction:rtl;line-height:1.25;color:#e3edd9}
.physical-deal .physical-deal-name{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:700;text-shadow:0 1px 4px #061f1a}
.physical-deal .physical-deal-count{font-size:9px;color:#b3ccac;font-weight:400}
.physical-deal .physical-deal-recipient.is-own .physical-deal-name{color:#f5e0aa}
.physical-deal .physical-deal-side{position:absolute;z-index:4;transform:translate(-50%,-50%);font-size:9px;font-weight:700;color:#d6c998;direction:rtl;white-space:nowrap}
.physical-deal.is-reduced .physical-deal-stock{opacity:.7}
@media(max-width:359px){.physical-deal .physical-deal-recipient{width:84px}.physical-deal .physical-deal-name{font-size:10px}.physical-deal .physical-deal-count,.physical-deal .physical-deal-side{font-size:8px}}
@media(orientation:landscape) and (max-height:540px){.physical-deal .physical-deal-recipient{gap:1px}.physical-deal .physical-deal-name{font-size:10px}.physical-deal .physical-deal-count{font-size:8px}.physical-deal .physical-deal-title{font-size:10px}.physical-deal .physical-blue-back{border-width:1.5px}}
@media(prefers-reduced-motion:reduce){.physical-deal .physical-deal-flight{will-change:auto}}

/* The turn alert replaces the small turn pill, keeping cards and chat clear. */
.turn-status{min-width:0;flex:1;display:flex;align-items:center}
.turn-status>.turn-label{display:inline-block}
.turn-status>.turn-label[hidden]{display:none}
.turn-alert{display:flex;align-items:center;gap:8px;max-width:100%;padding:8px 11px;border:1px solid #ffdf91;border-radius:12px;background:linear-gradient(135deg,#ffedba,#e9c15c);color:#263c28;box-shadow:0 3px 13px #edd0752d;pointer-events:none}
.turn-alert[hidden]{display:none}
.turn-alert-mark{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#31513b;color:#fff0b9;font-size:19px;font-weight:800;line-height:1}
.turn-alert-message{display:flex;flex-direction:column;gap:3px;min-width:0}
.turn-alert-message>strong{font-size:16px;font-weight:800;line-height:1.15;white-space:nowrap}
.turn-alert-message>small{font-size:10px;font-weight:600;line-height:1.3;white-space:nowrap}
.turn-strip.has-turn-alert{background:linear-gradient(90deg,#e3bd5914,#e3bd5900);border-bottom:1px solid #e8c46d25;padding-block:6px}
.game-screen.is-your-turn>.hand-panel{border-top-color:#e6bd66;box-shadow:0 -3px 16px #e5bd5526}
.turn-alert.turn-arrival{animation:turn-arrival-glow 1.1s ease-in-out 2}
@keyframes turn-arrival-glow{0%,100%{box-shadow:0 3px 13px #edd0752d;transform:scale(1)}40%{box-shadow:0 0 0 3px #ffdf8559,0 3px 22px #ffdf8566;transform:scale(1.018)}}
@media(max-width:359px){.turn-strip.has-turn-alert{gap:6px;padding-inline:12px}.turn-alert{padding:7px 8px;gap:6px}.turn-alert-mark{flex-basis:19px;width:19px;height:19px;font-size:15px}.turn-alert-message>strong{font-size:14px}.turn-alert-message>small{font-size:9px}.has-turn-alert .stepper{gap:5px}.has-turn-alert .step{font-size:9px}}
@media(orientation:landscape) and (max-height:540px){.turn-strip.has-turn-alert{padding-block:3px}.turn-alert{padding-block:4px}.turn-alert-message{gap:2px}.turn-alert-message>strong{font-size:13px}.turn-alert-message>small{font-size:9px}.turn-alert-mark{width:20px;height:20px;flex-basis:20px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.turn-alert.turn-arrival{animation:none}}

/* Pending moves stay with the hand. The table keeps its space, and approval
   uses the same bottom action row as the rest of the turn. */
#game>.hand-panel>#stage-area{
 display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:6px;
 width:100%;height:56px;min-height:56px;max-height:56px;margin:2px 0 3px;padding:4px 6px;
 border:1px solid #b7cd8940;border-radius:12px;background:#d5e9b411;color:#e7ead7;
 box-shadow:none;overflow:hidden;flex-shrink:0
}
#game #stage-area>.stage-heading{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
 min-width:0;line-height:1.25
}
#game #stage-area .stage-heading>strong{padding:0;font-size:10px;color:#e8d298}
#game #stage-area .stage-heading>#stage-total{
 max-width:100%;font-size:9px;line-height:1.35;text-align:start;color:#b8ceb0;
 white-space:normal;overflow-wrap:anywhere
}
#game #stage-area #stage-total.insufficient{color:#ffd392}
#game #stage-area>.stage-items{
 min-width:0;min-height:46px;height:46px;margin:0;padding:0 1px;gap:6px;align-items:center;
 overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;
 scrollbar-width:thin;scrollbar-color:#d1dba35e transparent;scroll-padding-inline:2px
}
#game #stage-area .stage-items::-webkit-scrollbar{height:2px}
#game #stage-area .stage-items::-webkit-scrollbar-thumb{background:#d1dba35e;border-radius:2px}
#game #stage-area .stage-item{
 min-height:44px;height:44px;padding:0;border:1px solid #d0dbad4d;border-radius:9px;
 background:#f1f2dd;gap:0;overflow:hidden;flex-shrink:0
}
#game #stage-area .stage-item-name{
 min-height:44px;height:44px;max-width:180px;min-width:0;padding:7px 10px;
 color:#294a33;font-size:10px;line-height:1.35;text-align:start
}
#game #stage-area .stage-remove{
 min-width:44px;width:44px;min-height:44px;height:44px;margin:0;border-radius:0;
 border-inline-start:1px solid #c7ceaf;background:#e1e6ce;color:#62734c;font-size:23px
}
#game #stage-area .stage-remove:hover{background:#d5ddbc;color:#7b4f31}
#game #stage-area .stage-item-name:focus-visible,#game #stage-area .stage-remove:focus-visible{outline-offset:-3px}
#game>.hand-panel:has(>#stage-area:not([hidden])) .selection-status{display:none}
#game .action-buttons>:is(#stage-commit,#stage-cancel){min-height:44px;padding:10px 8px;font-size:12px}
#game.chat-open>.hand-panel>#stage-area{display:none}
@media(max-width:359px){
 #game>.hand-panel>#stage-area{grid-template-columns:76px minmax(0,1fr);gap:5px;padding-inline:5px}
 #game #stage-area .stage-item-name{max-width:148px;padding-inline:8px;font-size:9px}
 #game #stage-area .stage-heading>#stage-total{font-size:8px}
}
@media(orientation:landscape) and (max-height:540px){
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden])){
  --staged-width:clamp(172px,30vw,210px);display:grid;
  grid-template-columns:minmax(0,1fr) var(--staged-width);column-gap:8px
 }
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden]))>.hand-toolbar{grid-column:1/-1;grid-row:1}
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden]))>#hand{
  grid-column:1;grid-row:2;width:100%;min-width:0;max-width:100%;
  --hand-step:clamp(20px,calc((min(100vw,720px) - 96px - var(--staged-width) - var(--hand-card-width)) / var(--hand-steps,10)),42px)
 }
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden]))>.action-bar{grid-column:1/-1;grid-row:3;min-width:0}
 #game>.hand-panel>#stage-area{
  grid-column:2;grid-row:2;align-self:center;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 46px;gap:2px;height:70px;min-height:70px;max-height:70px;
  margin:0;padding:4px 5px
 }
 #game #stage-area>.stage-heading{flex-direction:row;align-items:center;gap:6px;min-height:12px}
 #game #stage-area .stage-heading>strong{font-size:9px}
 #game #stage-area .stage-heading>#stage-total{font-size:8px;flex:1;white-space:nowrap}
 #game #stage-area .stage-item-name{max-width:calc(var(--staged-width) - 58px);padding-inline:7px;font-size:9px}
}
@media(orientation:landscape) and (max-height:360px){
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden]))>#hand:not(.hand-spread):not(.is-arranging){
  --hand-card-width:46px;--hand-card-height:64px;height:84px;min-height:84px;max-height:84px;padding-block:13px 3px
 }
 #game:not(.chat-open)>.hand-panel:has(>#stage-area:not([hidden]))>#hand:is(.hand-spread,.is-arranging){
  --hand-card-width:46px;--hand-card-height:64px;height:84px;min-height:84px;max-height:84px;
  grid-template-rows:64px;grid-auto-columns:46px;padding-block:13px 3px
 }
 #game:not(.chat-open):has(#stage-area:not([hidden]))>.room-info{display:none}
 #game.multiplayer-table:not(.chat-open):has(#stage-area:not([hidden]))>.topbar{
  flex-wrap:nowrap;gap:8px
 }
 #game.multiplayer-table:not(.chat-open):has(#stage-area:not([hidden])) .multiplayer-heading{display:none}
 #game.multiplayer-table:not(.chat-open):has(#stage-area:not([hidden])) .topbar-actions{flex-shrink:0}
 #game.multiplayer-table:not(.chat-open):has(#stage-area:not([hidden])) #participants{
  flex:1 1 0;width:auto;min-width:0;margin:0;order:-1
 }
}

/* Selected cards lift as one small stack; the badge counts the whole block. */
.hand-group-drag-ghost {
  position:fixed;z-index:2000;pointer-events:none;touch-action:none;
  overflow:visible;isolation:isolate;cursor:grabbing;
}
.hand-group-drag-ghost>.card.classic-card {
  position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;
  transform:translate(calc(var(--group-index,0) * 10px),calc(var(--group-index,0) * -4px)) rotate(calc(-6deg + var(--group-index,0) * 5deg));
  z-index:calc(3 - var(--group-index,0));border-color:#78bde1;
  box-shadow:0 8px 20px #082a2266,0 0 0 2px #a7c9df66;
  --card-index-size:18px;--card-index-suit:13px;--card-index-inset:4px;
}
.hand-group-drag-ghost>.court-card {
  --card-index-size:16px;--card-index-suit:12px;--card-index-inset:1px;
}
.hand-drag-count {
  position:absolute;z-index:5;left:50%;bottom:-15px;transform:translateX(-50%);
  padding:5px 9px;border:1px solid #fff2bd;border-radius:20px;background:#f3d781;
  color:#173e32;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;
  box-shadow:0 3px 8px #082a2255;direction:rtl;
}
/* Install and update controls stay on the home screen, outside the table. */
.pwa-panel{margin-top:14px;border:1px solid #b7cfa82e;border-radius:18px;padding:13px 14px;color:#dce6d5;background:#102f2873}
.pwa-install-card,.pwa-update-card{display:flex;align-items:center;gap:11px}
.pwa-install-mark{display:grid;place-items:center;flex:0 0 35px;width:35px;height:42px;border-radius:9px;background:linear-gradient(145deg,#fff9e8,#e6d8ad);color:#23503f;font-size:26px;box-shadow:0 3px 8px #031d2040;transform:rotate(7deg)}
.pwa-install-copy,.pwa-update-card>div{flex:1;min-width:0}
.pwa-install-card strong,.pwa-update-card strong{font-size:12px;color:#f4efdc}
.pwa-panel p{font-size:11px;line-height:1.65;margin:3px 0 0;color:#b9cbb7}
.pwa-small-button{flex:0 0 auto;min-height:44px;min-width:66px;padding:10px 12px;border:1px solid #d5c48765;border-radius:11px;background:#ead49a;color:#193c31;font-size:12px;font-weight:700}
.pwa-small-button:hover:not(:disabled){background:#f4dfa8}
.pwa-small-button:disabled{opacity:.5;cursor:wait}
.pwa-small-button:focus-visible,.pwa-footer button:focus-visible{outline:2px solid #f1d88f;outline-offset:4px}
.pwa-update-card{border-top:1px solid #b7cfa82e;margin-top:12px;padding-top:12px}
.pwa-install-card[hidden]+.pwa-update-card{border-top:0;margin-top:0;padding-top:0}
.pwa-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;font-size:10px;color:#9bb699}
.pwa-footer button{background:transparent;color:#c5d5b6;font-size:11px;min-height:40px;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.pwa-panel .pwa-status{margin-top:2px;font-size:10px;color:#c6d6bc}
.pwa-instructions ol{padding-inline-start:23px;margin:12px 0 16px}
.pwa-instructions li{padding-inline-start:4px;margin-block:11px;font-size:14px;line-height:1.7;color:#35563e}
.pwa-instructions li::marker{font-weight:800;color:#7b9155}
.pwa-instructions .pwa-instructions-note{padding:11px 13px;border-radius:12px;background:#e9edda;font-size:12px}
@media(max-width:359px){.pwa-panel{padding-inline:11px}.pwa-install-card,.pwa-update-card{gap:8px}.pwa-install-mark{flex-basis:29px;width:29px;height:37px;font-size:23px}.pwa-small-button{min-width:60px;padding-inline:9px}.pwa-install-card strong,.pwa-update-card strong{font-size:11px}}