:root{--ink:#f6f5ec;--muted:#b2c2bc;--felt:#145345;--felt-dark:#0b302a;--gold:#e8c980;--gold-strong:#ffe6a2;--line:rgba(255,255,255,.13);--panel:#0d2627;--red:#bb3e50;--font:'Trebuchet MS',Arial,system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font)}body{background:#091e20;color:var(--ink);overscroll-behavior-y:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.hidden{display:none!important}
body[data-felt="ruby"]{--felt:#663039;--felt-dark:#351b27;--panel:#251b27}body[data-felt="midnight"]{--felt:#24435a;--felt-dark:#152736;--panel:#152331}body[data-felt="teal"]{--felt:#156469;--felt-dark:#0b343a;--panel:#0c2b30}
.topbar{height:76px;background:#0b2022;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,42px);border-bottom:1px solid #ffffff15;position:relative;z-index:15;gap:12px}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand-icon{display:flex;position:relative;width:45px;height:43px;align-items:center;justify-content:center}.brand-icon span{display:grid;place-items:center;border:2px solid #eccf8a;background:#133e37;border-radius:6px;width:26px;height:35px;color:#ffe5aa;font-size:20px;transform:rotate(-16deg);position:absolute;left:3px}.brand-icon span+span{color:#bb5663;transform:rotate(18deg);left:17px;background:#f4e8d0;font-size:18px;border-color:#e9e3ca}.brand strong{font-size:17px;letter-spacing:.15em;font-weight:900}.brand small{display:block;color:var(--gold);font-size:9px;letter-spacing:.33em;margin-top:5px}.topbar-center{display:flex;align-items:center;gap:9px;color:#93aea6;font-size:12px}.connection-dot{width:7px;height:7px;background:#75d8a7;border-radius:50%;box-shadow:0 0 0 4px #75d8a71a}.connection-dot.offline{background:#e48a84;box-shadow:0 0 0 4px #e48a8422}.topbar-actions{display:flex;align-items:center;gap:10px}.top-icon{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:#ffffff09;color:#dde8dc;font-size:20px}.top-icon:hover,.user-chip:hover{background:#ffffff19}.user-chip{border:1px solid #ffffff23;border-radius:32px;padding:5px 13px 5px 5px;display:flex;align-items:center;gap:9px;background:#ffffff0c;color:#f8f3e4;font-size:12px;font-weight:700;min-width:0}.mini-avatar,.your-avatar{border:2px solid #dbb979;background:#715c49;color:#fff2c9;border-radius:50%;display:grid;place-items:center;font-weight:900}.mini-avatar{width:28px;height:28px;font-size:12px}
.lobby-screen{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(370px,.85fr);background:radial-gradient(ellipse at 22% 63%,#1d604b 0%,#0e352e 48%,#092520 95%);position:relative;overflow:hidden}.lobby-screen:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.21;background:repeating-linear-gradient(130deg,transparent,transparent 3px,#ffffff05 4px),radial-gradient(circle at 5% 7%,#d8c07a44,transparent 28%)}.welcome-panel{padding:clamp(38px,6.2vw,108px) clamp(28px,7vw,105px) 40px;position:relative;min-height:680px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.29em;font-weight:900;display:flex;gap:12px;align-items:center}.eyebrow-line{width:29px;height:1px;background:var(--gold)}.welcome-panel h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.3vw,74px);line-height:1.09;letter-spacing:-.045em;max-width:640px;font-weight:500;margin:24px 0}.welcome-panel h1 em{color:#eccc84;font-weight:400}.welcome-panel p{color:#c1d6cc;line-height:1.8;font-size:15px;max-width:480px}.welcome-metrics{display:flex;gap:clamp(28px,4vw,75px);margin-top:34px}.welcome-metrics span{display:flex;flex-direction:column;gap:5px}.welcome-metrics b{font-family:Georgia,serif;color:#fff6e5;font-size:26px;font-weight:500}.welcome-metrics small{font-size:9px;letter-spacing:.2em;color:#afc2b6}.hero-cards{position:relative;margin:38px 0 0 80px;height:206px}.hero-card{position:absolute;width:132px;height:185px;background:#f6eddc;border:5px solid #fff9e9;border-radius:10px;box-shadow:0 18px 30px #061f19a0,0 0 1px #222;display:flex;align-items:center;justify-content:center;font-family:Georgia;color:#191f27}.hero-card i{font-size:94px;font-style:normal}.hero-card b{position:absolute;top:7px;left:9px;font-size:23px}.hero-left{transform:rotate(-22deg);left:6px;top:24px}.hero-middle{transform:rotate(0);left:112px;top:0;color:#ad4052}.hero-right{transform:rotate(20deg);left:214px;top:22px;background:repeating-linear-gradient(45deg,#d2baa1,#d2baa1 2px,#eee2d2 2px,#eee2d2 7px)}.hero-right i{color:#1b6555}.hero-caption{color:#c2d2c6;font-size:9px;letter-spacing:.22em;margin-top:28px}.welcome-control{display:flex;align-items:center;justify-content:center;padding:55px 45px;position:relative;z-index:1}.welcome-card{width:min(100%,465px);background:#f7f2e7;color:#20312c;border-radius:20px;padding:clamp(25px,3vw,43px);box-shadow:0 35px 85px #020f0f88;border:1px solid #fff}.welcome-card .small-heading{color:#a07842;font-size:10px;letter-spacing:.22em;font-weight:900}.welcome-card h2{font-size:30px;letter-spacing:-.03em;line-height:1.1;font-family:Georgia,serif;font-weight:500;margin:10px 0 12px}.welcome-card .subcopy{color:#66766e;line-height:1.6;font-size:13px;margin:0 0 27px}.segmented{display:flex;gap:5px;background:#e5e3d9;padding:5px;border-radius:11px;margin-bottom:25px}.segmented button{flex:1;padding:11px 8px;border:0;background:transparent;color:#68776b;font-weight:800;border-radius:8px;font-size:13px}.segmented button.selected{background:white;color:#194338;box-shadow:0 3px 12px #162c2420}.form-label{display:block;font-size:11px;letter-spacing:.08em;font-weight:900;color:#526156;margin:15px 0 8px}.form-input,.form-select{width:100%;height:49px;border:1px solid #d8dbd0;border-radius:9px;background:#fffef9;padding:0 14px;outline:none;color:#243e32}.form-input:focus,.form-select:focus{border-color:#276750;box-shadow:0 0 0 3px #2767501c}.form-help{display:block;color:#9b9f95;font-size:11px;margin:8px 0 20px}.primary-action{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;background:#174f3d;border:0;border-radius:10px;color:#fffbe8;font-weight:900;min-height:53px;padding:13px 16px;box-shadow:0 6px 12px #0b382427;transition:transform .14s,background .14s}.primary-action:hover{transform:translateY(-1px);background:#226e52}.sub-action{background:transparent;border:1px solid #dae1d5;border-radius:9px;color:#476052;padding:11px 16px;font-size:12px;font-weight:800}.room-code{font-size:38px;letter-spacing:.18em;text-align:center;font-weight:900;margin:19px 0;color:#22503f}.room-link{font-size:11px;text-align:center;color:#829085;margin:-6px 0 24px}.waiting-players{display:flex;flex-direction:column;gap:9px;margin:20px 0}.waiting-person{display:flex;align-items:center;gap:12px;background:#ebece2;border:1px solid #dde1d6;border-radius:9px;padding:9px 12px;color:#274838}.waiting-person .mini-avatar{background:#3c6751;border-color:#3c6751}.waiting-person strong{font-size:13px;flex:1}.waiting-person small{font-size:10px;color:#718477}.waiting-empty{border:1px dashed #c8d3c4;border-radius:9px;padding:12px;color:#8b998d;font-size:12px;text-align:center}.welcome-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}.welcome-foot span{color:#809084;font-size:11px}.welcome-foot-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.game-screen{min-height:calc(100vh - 76px);display:flex;background:#0e2525}.game-main{min-width:0;flex:1;padding:19px clamp(12px,2vw,27px) 0;display:flex;flex-direction:column}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 15px;min-height:70px}.round-label{font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:900}.game-heading h2{font:500 27px Georgia,serif;margin:4px 0 0}.cards-rule{font-size:11px;color:#a9c1b5}.timers{display:flex;align-items:center;gap:25px}.elapsed{display:flex;flex-direction:column;gap:6px}.meta-label{font-size:9px;letter-spacing:.14em;color:#91aba6;font-weight:900}.elapsed strong{font-family:'Courier New',monospace;font-size:24px;font-variant-numeric:tabular-nums}.turn-clock{display:flex;align-items:center;gap:10px}.turn-clock>div:last-child{display:flex;flex-direction:column;gap:5px;min-width:92px}.turn-clock strong:not(.clock-ring strong){font-size:12px;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clock-ring{width:58px;height:58px;border-radius:50%;padding:5px;background:conic-gradient(var(--gold) 100%,#ffffff13 0);display:grid;place-items:center}.clock-ring strong{background:#102b29;border-radius:50%;height:100%;width:100%;display:grid;place-items:center;font:900 19px monospace;color:#ffdf96}.clock-ring.urgent{background:conic-gradient(#f2716e var(--progress,100%),#ffffff13 0)}.clock-ring.urgent strong{color:#ff9690}
.table-shell{--felt-highlight:rgba(255,255,255,.036);position:relative;flex:1;min-height:655px;max-height:calc(100vh - 210px);background:radial-gradient(ellipse at 50% 28%,#ffffff0b,transparent 60%),radial-gradient(ellipse at 50% 52%,var(--felt),var(--felt-dark) 94%);border-radius:52% / 16%;border:10px solid #173f35;box-shadow:inset 0 0 0 2px #e1c28669,inset 0 0 50px #00000077,0 0 0 3px #543d2b,0 15px 35px #0009;overflow:hidden}.table-shell:after{content:'';position:absolute;inset:16px;border:1px solid #dec58f25;border-radius:50% / 17%;pointer-events:none}.table-sheen{position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:repeating-linear-gradient(110deg,#fff1 0px,transparent 1px,transparent 5px)}.table-wordmark{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:clamp(20px,2.5vw,42px);letter-spacing:.16em;color:#ffffff0c;white-space:nowrap;pointer-events:none}.table-wordmark span{color:#ffffff1b;margin:0 8px}.opponents{position:absolute;inset:0;pointer-events:none;z-index:2}.opponent{position:absolute;left:var(--seat-x);top:var(--seat-y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;min-width:110px}.opp-avatar{width:41px;height:41px;display:grid;place-items:center;border:2px solid #e8d8ad77;background:linear-gradient(135deg,#324f49,#6d564e);border-radius:50%;font-weight:900;color:#ffedc1;position:relative;box-shadow:0 3px 13px #0005}.opponent.is-active .opp-avatar{box-shadow:0 0 0 3px #f0d58a,0 0 0 7px #e8c9803b;animation:activePulse 2.5s ease-in-out infinite}.opp-name{font-size:11px;font-weight:900;background:#081f1dc9;border-radius:50px;padding:4px 11px;max-width:125px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opp-cards{color:#deeadc;font-size:10px;background:#17392fbb;border-radius:50px;padding:3px 7px}.opponent.laid .opp-name:after{content:' ✓';color:#c8e3a0}.opponent.disconnected{opacity:.65}.opponent .bot-mark{position:absolute;top:-5px;right:-8px;border-radius:10px;background:#e3bc75;color:#322a1e;font-size:8px;padding:3px 5px;font-weight:900}.meld-area{position:absolute;top:28%;left:6%;right:6%;height:23%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}.area-label{font-size:9px;color:#c4d2c7b8;letter-spacing:.19em;font-weight:900;white-space:nowrap}.meld-list{display:flex;justify-content:center;align-content:flex-start;align-items:center;gap:7px;flex-wrap:wrap;overflow-y:auto;max-width:100%;padding:6px;scrollbar-width:thin}.empty-melds{border:1px dashed #e4dfbb3c;border-radius:8px;padding:15px 25px;color:#d3e0c387;font-size:12px}.meld-group{display:flex;flex-direction:column;gap:4px;align-items:center;background:#00000023;padding:6px 9px;border:1px solid #e4e0c128;border-radius:9px;max-width:100%;transition:border .15s}.meld-group.selected{border-color:#ffe2a1;box-shadow:0 0 0 2px #ffdd8b55}.meld-group .meld-cards{display:flex;align-items:center;justify-content:center;padding:0 8px}.meld-cards .playing-card{margin-left:-13px}.meld-cards .playing-card:first-child{margin-left:0}.meld-caption{font-size:9px;color:#e4e7c8;white-space:nowrap}.piles-area{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:21px;z-index:2}.pile{display:flex;flex-direction:column;align-items:center;min-width:95px;gap:8px;padding:8px 4px;background:transparent;border:1px solid transparent;border-radius:12px;color:#f8f2da}.pile:hover:not(:disabled){background:#ffffff13;border-color:#ffffff25}.pile.available{background:#e8c98016;border-color:#e8c98055}.pile-name{font-size:10px;letter-spacing:.12em;font-weight:900}.pile-count{font-size:9px;color:#ced8c5}.stack-stack{position:relative;height:98px;width:72px}.stack-shadow{position:absolute;inset:5px -5px -5px 6px;border:2px solid #f2e6c6;border-radius:7px;background:#082f29;transform:rotate(4deg)}.stack-card{position:relative;display:block!important}.pile-divider{font-size:9px;color:#a6c1b0;display:flex;flex-direction:column;gap:9px;align-items:center;letter-spacing:.12em}.pile-arrow{font-size:25px;font-weight:100;color:#e9ce84}.discard-wrap{height:98px;width:72px}.play-notice{display:none;position:absolute;bottom:42%;left:50%;transform:translateX(-50%);font-size:11px;color:#e3daba;background:#0b2628bb;padding:7px 14px;border:1px solid #ffffff16;border-radius:30px;text-align:center;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4}
.your-zone{position:absolute;bottom:2.5%;left:5%;right:5%;z-index:5;padding:9px 16px 12px;border-radius:16px;background:linear-gradient(180deg,#0a272598,#071e1ee0);border:1px solid #ffffff26;box-shadow:0 10px 24px #0003;backdrop-filter:blur(8px)}.your-zone.is-active{border-color:#e9cc806f;box-shadow:0 0 0 1px #e9cc8029,0 9px 26px #0003}.your-zone-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}.you-indicator{display:flex;align-items:center;gap:8px}.your-avatar{width:33px;height:33px;border-color:#f6d897;font-size:12px}.you-indicator b{font-size:12px}.you-indicator small{display:block;color:#a9bdad;font-size:9px;margin-top:2px}.inline-count{background:#f5d28c;color:#18362e;font-size:10px;margin-left:5px;padding:2px 5px;border-radius:11px}.hand-tools{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.soft-button{background:#ffffff0e;border:1px solid #ffffff24;color:#dae8d8;padding:7px 10px;border-radius:7px;font-size:10px;font-weight:700}.soft-button:hover{background:#ffffff2a}.soft-button.compact{font-size:14px;padding:4px 10px}.hand-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;min-height:100px}.hand{display:flex;align-items:end;justify-content:center;min-width:max-content;padding:5px 9px 8px;height:116px}.hand .playing-card{margin-left:-21px;transition:transform .15s,margin .15s,box-shadow .15s;flex:0 0 auto;cursor:pointer}.hand .playing-card:first-child{margin-left:0}.hand .playing-card:hover{transform:translateY(-9px)}.hand .playing-card.selected{transform:translateY(-15px);box-shadow:0 0 0 3px #f7dc86,0 8px 15px #0007}.hand .playing-card.planned{opacity:.68;filter:saturate(.7);border-color:#90cba8}.hand .playing-card.dragging{opacity:.28}.planning-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:23px;padding:2px 4px;margin:1px 0 7px}.planning-groups{display:flex;gap:5px;flex-wrap:wrap}.planning-prompt{color:#adbeac;font-size:10px}.planned-chip{background:#dcd6ae20;color:#f6e4a4;border:1px solid #dfd0956e;border-radius:20px;padding:4px 10px;font-size:10px;font-weight:800}.planned-chip:hover{background:#dcd6ae36}.selection-count{font-size:10px;color:#f0d18e}.actions-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;min-height:39px}.game-btn{border:1px solid #ffffff2e;background:#eff1df13;color:#f9f5e9;min-height:35px;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:900;letter-spacing:.02em}.game-btn:hover:not(:disabled){background:#ffffff2f}.game-btn.primary{background:#f1d18e;color:#213b31;border-color:#f1d18e}.game-btn.primary:hover{background:#ffe8ae}.game-btn.danger{background:#b54647;color:white;border-color:#b54647}.game-btn.action-green{background:#277558;border-color:#469773}.game-btn.transparent{background:#ffffff0c;color:#dbe9cf}.bottom-strip{height:40px;display:flex;gap:12px;align-items:center;padding:0 9px;font-size:10px;letter-spacing:.08em;color:#95afa6}.text-link{color:#e7d18c;background:none;border:0;font-size:10px;letter-spacing:0;text-decoration:underline;text-underline-offset:2px}.exit-link{margin-left:auto;color:#d8a9a2}
.playing-card{display:block;width:75px;height:106px;border-radius:7px;background:#fffaf0;color:#222e39;border:3px solid #fff6e7;box-shadow:0 2px 6px #0018;position:relative;overflow:hidden;text-align:left;user-select:none;touch-action:manipulation;padding:0;flex:none}.playing-card.small-card{width:72px;height:98px}.playing-card.mini-card{width:40px;height:54px;border-radius:4px;border-width:2px;box-shadow:0 1px 3px #0008}.playing-card .card-index{position:absolute;left:4px;top:3px;display:flex;flex-direction:column;align-items:center;line-height:1;font-family:Georgia,serif;z-index:1}.playing-card .card-index strong{font-size:20px}.playing-card .card-index .suit-small{font-size:15px;margin-top:1px}.playing-card .center-symbol{font-size:46px;display:grid;place-items:center;position:absolute;inset:13px 0 8px;line-height:1;font-family:Georgia,serif}.playing-card .card-corner-bottom{position:absolute;right:4px;bottom:2px;font-family:Georgia,serif;font-size:18px;transform:rotate(180deg)}.playing-card .card-suit-name{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.65}.playing-card .suit-svg{width:38px;height:47px}.playing-card .suit-small .suit-svg{width:12px;height:15px}.playing-card.mini-card .card-index{left:2px;top:2px}.playing-card.mini-card .card-index strong{font-size:12px}.playing-card.mini-card .card-index .suit-small{display:none}.playing-card.mini-card .center-symbol{font-size:26px;inset:7px 0}.playing-card.mini-card .suit-svg{width:22px;height:28px}.playing-card.mini-card .card-corner-bottom,.playing-card.mini-card .card-suit-name{display:none}.playing-card.red{color:#b53b4c}.playing-card.gold{color:#b58c34}.playing-card.green{color:#35704a}.playing-card.blue{color:#376b99}.playing-card.joker{color:#7653a6;background:radial-gradient(circle at 50% 50%,#fff3d4,#f9f0e9);border-color:#fdf3e9}.playing-card.joker .center-symbol{font-size:44px}.playing-card.joker .card-suit-name{bottom:14px}.playing-card.back{background:#123f36;box-shadow:0 3px 10px #0018; border:3px solid #ead9ae}.playing-card.back:before{content:'';position:absolute;inset:5px;border:2px solid #e7cf8d;border-radius:2px;background:repeating-linear-gradient(45deg,#ffffff17 0px,#ffffff17 2px,transparent 2px,transparent 7px),radial-gradient(circle at center,#d4b46d2e,#133c35 65%)}.playing-card.back:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#e2c682;font-size:35px}.playing-card.mini-card.back:after{font-size:22px}
.sidebar{flex:0 0 319px;width:319px;min-height:calc(100vh - 76px);max-height:calc(100vh - 76px);background:linear-gradient(160deg,#122a2c,var(--panel));border-left:1px solid #ffffff16;display:flex;flex-direction:column;z-index:10}.sidebar-head{padding:27px 22px 22px;display:flex;justify-content:space-between;gap:10px}.sidebar-head small{display:block;font-size:9px;letter-spacing:.18em;color:#e4c584;font-weight:900}.sidebar-head strong{display:block;font:19px Georgia,serif;margin-top:9px}.side-close{display:none;background:transparent;border:0;color:white;font-size:24px}.sidebar-tabs{display:flex;border-bottom:1px solid #ffffff1c;margin:0 16px;gap:12px}.side-tab{background:none;border:0;color:#95a9a4;font-size:10px;font-weight:900;letter-spacing:.11em;padding:13px 3px;border-bottom:2px solid transparent;position:relative}.side-tab.active{color:#f5d88a;border-color:#f2d48c}.unread-dot{width:7px;height:7px;display:inline-block;background:#efc66b;border-radius:50%;margin-left:4px}.side-panel{overflow:auto;padding:16px 16px;flex:1;min-height:0}.side-panel#chatPanel{display:flex;flex-direction:column;gap:10px}.score-overview{background:#1b3e37;border:1px solid #ffffff12;border-radius:12px;padding:17px;margin-bottom:17px}.score-overview .score-title{font-size:10px;color:#c3d8bf;letter-spacing:.15em}.score-overview strong{font:28px Georgia,serif;display:block;margin-top:5px;color:#f7dfa1}.score-hint{font-size:11px;color:#94b2a0;line-height:1.6;margin-top:5px}.score-row{display:flex;align-items:center;gap:9px;border-bottom:1px solid #ffffff13;padding:12px 1px}.score-position{font:18px Georgia,serif;color:#d6c58f;width:19px}.score-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#386453;color:#fff3d9;font-size:11px;font-weight:900}.score-person{min-width:0;flex:1}.score-person b{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-person small{display:block;font-size:9px;color:#92aba1;margin-top:4px}.score-points{font:20px Georgia,serif;color:#f4e5b5;min-width:44px;text-align:right}.score-legend{font-size:10px;color:#97aba2;margin-top:23px;line-height:1.8}.score-legend strong{color:#e5c57e}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-bottom:9px;min-height:120px;scrollbar-width:thin}.chat-message{padding:9px 11px;background:#ffffff0a;border:1px solid #ffffff0d;border-radius:10px}.chat-message.system{background:#d6bf7520;border-color:#d6bf7519}.chat-message .chat-meta{font-size:10px;color:#edcd86;font-weight:900;display:flex;justify-content:space-between;gap:10px}.chat-meta time{font-size:9px;color:#839f96;font-weight:400}.chat-message p{font-size:12px;line-height:1.5;word-break:break-word;margin:5px 0 0;color:#edf2e6}.chat-input{display:flex;background:#23413c;border:1px solid #ffffff1c;border-radius:10px;padding:5px;gap:3px}.chat-input input{min-width:0;flex:1;background:transparent;border:0;color:#fff;outline:none;padding:8px 7px;font-size:12px}.chat-input input::placeholder{color:#9cad9d}.chat-input button{border:0;border-radius:7px;background:#e7c980;color:#1d4434;padding:7px 12px}.sidebar-foot{padding:18px;text-align:center;color:#9baa94;font-size:10px;line-height:1.5;border-top:1px solid #ffffff12}.sidebar-foot span{color:#e2c57e}.mobile-panel-buttons{display:none}
.modal-backdrop,.round-overlay{position:fixed;inset:0;background:#030d0cc4;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)}.modal-card{position:relative;background:#f8f4e9;color:#203b31;border-radius:18px;padding:33px;max-width:450px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 28px 100px #0009}.modal-x{position:absolute;right:13px;top:12px;border:0;background:transparent;font-size:26px;color:#65786b}.modal-card h2{font:29px Georgia,serif;margin:0 0 7px}.modal-card p{font-size:12px;color:#657267;line-height:1.6}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.settings-grid .full{grid-column:span 2}.toggle-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dbe0d3;padding:12px 0;font-size:12px;font-weight:700}.toggle-row input{accent-color:#1d7054;width:19px;height:19px}.color-picks{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0 15px}.color-option{border:3px solid #ffffff;box-shadow:0 0 0 1px #ccd1c2;border-radius:50%;width:40px;height:40px}.color-option.chosen{box-shadow:0 0 0 2px #123d2c,0 0 0 5px #b9a46b}.rules-text{font-size:12px;line-height:1.75;color:#45534c}.rules-text p{margin:8px 0}.rules-text b{color:#224e3d}.result-card{width:min(95vw,540px);background:#f8f1df;color:#1f3930;border-radius:18px;padding:29px 34px;box-shadow:0 30px 110px #0009;text-align:center;max-height:90vh;overflow-y:auto}.result-symbol{font-size:45px}.result-card small{color:#94753d;letter-spacing:.18em;font-weight:900;font-size:10px}.result-card h2{font:40px Georgia,serif;margin:8px 0 3px}.result-card .result-sub{color:#66766a;font-size:13px;margin-bottom:22px}.result-table{width:100%;border-collapse:collapse;text-align:left;margin:18px 0}.result-table th{font-size:10px;color:#8f9889;letter-spacing:.1em;padding:8px;border-bottom:1px solid #c9d3c5}.result-table td{font-size:12px;padding:10px 8px;border-bottom:1px solid #e0e5db}.result-table td:last-child,.result-table th:last-child{text-align:right}.result-table .winner-line{background:#e1e6c5}.result-countdown{font-size:11px;color:#617368;margin:12px 0}.toast-area{position:fixed;z-index:90;top:90px;right:20px;display:flex;flex-direction:column;gap:8px;max-width:min(380px,85vw);pointer-events:none}.toast{background:#183e33;color:#fff7df;border:1px solid #d7c18770;padding:12px 15px;border-radius:10px;box-shadow:0 6px 20px #0006;font-size:12px;line-height:1.5;animation:toastIn .18s ease}.toast.error{border-color:#e48c88;background:#512b31}.toast.success{border-color:#a5cfa5}.server-reconnecting{opacity:.85}
.modal-card.rules-layout{max-width:min(960px,96vw);padding:30px 28px 24px;background:linear-gradient(180deg,#fbf7ed 0%,#f4eedf 100%)}
.rules-modal{display:flex;flex-direction:column;gap:18px}.rules-hero{padding:8px 6px 0}.rules-mini{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.24em;color:#9b7440;margin-bottom:8px}.rules-hero h2{font:36px Georgia,serif;line-height:1.05;margin:0 0 10px;color:#173f32}.rules-hero p{font-size:14px;max-width:640px;color:#5f6f67;margin:0}.rules-highlights{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.rules-highlights span{padding:7px 10px;border-radius:999px;background:#efe7d3;color:#2a483d;border:1px solid #e0d2b1;font-size:11px;font-weight:800}.rules-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.rules-panel{position:relative;background:#fffaf0;border:1px solid #e6dcc6;border-radius:16px;padding:16px 16px 14px 18px;box-shadow:0 10px 20px #0000000a}.rules-main{grid-row:span 2;background:linear-gradient(180deg,#fffaf0 0%,#f7efd8 100%)}.rules-badge{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:#184a3a;color:#fff6d7;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}.rules-panel h3{margin:0 0 12px;padding-right:38px;font:22px Georgia,serif;color:#183f33}.rules-steps{display:grid;gap:10px}.rules-steps article{padding:12px;border-radius:12px;background:#fff;border:1px solid #e8deca}.rules-steps strong,.rules-round b,.rules-list b,.rules-accordion summary{color:#183f33}.rules-steps p,.rules-list,.rules-duo p,.rules-note,.rules-round span,.rules-accordion p{font-size:12px;line-height:1.55;color:#57675f;margin:4px 0 0}.rules-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rules-duo>div{padding:12px;border-radius:12px;background:#fff;border:1px solid #e8deca}.rules-duo small{display:block;font-size:10px;letter-spacing:.16em;font-weight:900;color:#9b7440;margin-bottom:5px}.rules-rounds{display:grid;gap:8px}.rules-round{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid #e8deca}.rules-round span{text-align:right}.rules-note{margin-top:10px;padding:10px 12px;border-radius:11px;background:#f1ead8}.rules-list{padding-left:18px;margin:0;display:grid;gap:8px}.rules-accordion{display:grid;gap:8px}.rules-accordion details{border:1px solid #e7dcc7;border-radius:12px;background:#fff;padding:10px 12px}.rules-accordion summary{cursor:pointer;font-size:13px;font-weight:800;list-style:none}.rules-accordion summary::-webkit-details-marker{display:none}.rules-accordion summary:after{content:'+';float:right;color:#9b7440}.rules-accordion details[open] summary:after{content:'−'}.rules-accordion p{margin-top:8px}.rules-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}.rules-footer .primary-action{width:auto;min-width:220px}.rules-footer .sub-action{min-width:110px}.rules-link-inline{display:inline-flex;align-items:center;gap:6px}
@media(max-width:860px){.rules-grid{grid-template-columns:1fr}.rules-main{grid-row:auto}.modal-card.rules-layout{padding:24px 18px 18px}.rules-hero h2{font-size:31px}}
@media(max-width:560px){.rules-hero h2{font-size:27px}.rules-hero p{font-size:12px}.rules-highlights span{font-size:10px;padding:6px 8px}.rules-panel{padding:14px}.rules-panel h3{font-size:19px}.rules-duo{grid-template-columns:1fr}.rules-round{flex-direction:column}.rules-round span{text-align:left}.rules-footer{flex-direction:column-reverse}.rules-footer .primary-action,.rules-footer .sub-action{width:100%}.modal-card.rules-layout{max-width:98vw;padding:18px 14px 16px}}
@keyframes activePulse{50%{box-shadow:0 0 0 3px #f0d58a,0 0 0 10px #e8c98012}}@keyframes toastIn{from{transform:translateY(-8px);opacity:0}to{opacity:1;transform:translateY(0)}}
@media(max-width:1180px){.sidebar{flex-basis:280px;width:280px}.table-shell{min-height:615px}.welcome-panel{padding:60px 36px}.hero-cards{margin-left:30px}}
@media(max-width:970px){.topbar{height:62px}.game-screen{min-height:calc(100vh - 62px)}.game-main{padding:9px 13px 0}.sidebar{position:fixed;right:0;top:62px;bottom:0;max-height:none;width:min(95vw,370px);transform:translateX(110%);transition:transform .2s;box-shadow:-9px 0 35px #0006}.sidebar.open{transform:translateX(0)}.side-close{display:block}.mobile-panel-buttons{position:fixed;bottom:0;left:0;right:0;z-index:8;display:flex;background:#102b2b;border-top:1px solid #ffffff29;padding:8px 15px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:9px}.mobile-panel-buttons button{flex:1;border:1px solid #ffffff2a;background:#ffffff0b;color:#e9d5a5;border-radius:8px;padding:9px;font-size:11px;font-weight:800}.bottom-strip{margin-bottom:51px}.table-shell{min-height:660px;max-height:none}.welcome-control{padding:30px}}
@media(max-width:680px){.brand strong{font-size:12px}.brand small{font-size:7px}.brand-icon{transform:scale(.8);margin-left:-6px;margin-right:-7px}.topbar-center{display:none}.topbar{padding:0 11px}.topbar-actions{gap:5px}.top-icon{width:30px;height:30px}.user-chip{padding-right:5px}.user-chip #profileName{display:none}.lobby-screen{display:flex;flex-direction:column}.welcome-panel{padding:29px 26px 15px;min-height:0}.welcome-panel h1{font-size:37px;margin:15px 0}.welcome-panel p{font-size:12px;line-height:1.6;margin:0}.welcome-metrics{margin:20px 0 0;gap:28px}.welcome-metrics b{font-size:20px}.welcome-metrics small{font-size:8px}.hero-cards,.hero-caption{display:none}.welcome-control{padding:20px 15px 35px;display:block}.welcome-card{width:100%;padding:23px}.welcome-card h2{font-size:25px}.game-heading{min-height:52px;margin:0 0 7px}.game-heading h2{font-size:19px}.round-label{font-size:9px}.cards-rule{display:none}.timers{gap:9px}.elapsed{display:none}.turn-clock{gap:5px}.clock-ring{width:43px;height:43px;padding:4px}.clock-ring strong{font-size:15px}.turn-clock>div:last-child{min-width:60px}.meta-label{font-size:7px}.turn-clock strong:not(.clock-ring strong){max-width:88px;font-size:10px}.game-main{padding:9px 7px 0}.table-shell{min-height:calc(100dvh - 160px);border-width:5px;border-radius:28% / 8%;max-height:none}.table-shell:after{inset:7px}.opponent{min-width:65px;gap:2px}.opp-avatar{height:30px;width:30px;font-size:11px}.opp-name{font-size:9px;max-width:77px;padding:3px 5px}.opp-cards{font-size:8px}.opponent .bot-mark{font-size:6px}.meld-area{top:25%;left:4%;right:4%;height:25%;gap:5px}.area-label{font-size:7px}.empty-melds{font-size:9px;padding:9px}.meld-list{gap:5px}.meld-group{padding:4px 6px;gap:1px}.meld-cards .playing-card{margin-left:-17px}.meld-caption{font-size:8px}.piles-area{top:53%;gap:7px}.pile{min-width:71px;padding:3px}.pile-divider{font-size:7px;gap:4px}.pile-arrow{font-size:17px}.pile-name{font-size:8px}.pile-count{font-size:8px}.play-notice{bottom:41%;font-size:9px;padding:5px 9px}.your-zone{left:2%;right:2%;bottom:2%;padding:8px 7px}.your-zone-head{align-items:flex-start;gap:3px}.your-avatar{width:28px;height:28px}.you-indicator{gap:6px}.you-indicator b{font-size:10px}.you-indicator small{font-size:8px;max-width:145px}.hand-tools{gap:3px}.soft-button{font-size:9px;padding:5px 6px}.soft-button.compact{font-size:11px;padding:4px 6px}.hand-scroll{min-height:90px}.hand{height:104px;justify-content:flex-start;padding-left:6px}.hand .playing-card{margin-left:-29px}.playing-card{width:67px;height:95px}.stack-stack,.discard-wrap{width:61px;height:84px}.playing-card.small-card{width:61px;height:84px}.playing-card.mini-card{width:32px;height:45px}.playing-card.mini-card .center-symbol{font-size:20px}.playing-card .center-symbol{font-size:37px}.playing-card .suit-svg{width:29px;height:40px}.playing-card .card-index strong{font-size:17px}.playing-card .card-corner-bottom{font-size:14px}.planning-row{margin-bottom:4px}.planning-prompt{font-size:9px}.actions-row{gap:4px}.game-btn{font-size:10px;min-height:32px;padding:6px 8px}.bottom-strip{font-size:8px;gap:5px;height:32px}.text-link{font-size:9px}.modal-card{padding:26px 22px}.result-card{padding:25px 17px}.result-card h2{font-size:30px}}
@media(max-width:390px){.hand .playing-card{margin-left:-33px}.your-zone{padding-left:5px;padding-right:5px}.hand-tools .soft-button{padding:5px 4px}.opponent .opp-cards{display:none}.game-btn{font-size:9px;padding:5px 7px}.table-shell{min-height:calc(100dvh - 155px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

body.high-contrast .playing-card{box-shadow:0 0 0 2px #fff,0 3px 8px #000a}body.high-contrast .game-btn{border-color:#f1dda3}body.high-contrast .opp-name{background:#021414;color:#fff}

/* Versión 1.1: duración de turno y figuras de las dos barajas */
.turn-setting-row{display:flex;align-items:center;gap:12px}
.turn-setting-row .form-input{max-width:115px;font-weight:900;font-size:18px;text-align:center;font-variant-numeric:tabular-nums}
.turn-setting-row .sub-action{flex:1;min-height:49px}
.turn-unit{font-size:12px;color:#60766a;font-weight:800}
.host-turn-control{padding:4px 13px 13px;background:#eaf0e7;border:1px solid #d3dfd3;border-radius:11px;margin-bottom:15px}
.host-turn-control .form-help{margin-bottom:0}
.lobby-turn-info{font-size:12px;font-weight:800;color:#305b45;background:#e3eee3;border-radius:10px;padding:13px;margin-bottom:14px;text-align:center}
.playing-card .center-symbol.figure-center{inset:13px 7px 15px;overflow:hidden;border-radius:3px}
.playing-card .figure-center .court-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px #34291940)}
.playing-card.small-card .center-symbol.figure-center{inset:12px 6px 13px}
.playing-card.mini-card .center-symbol.figure-center{inset:8px 3px 3px;border-radius:1px}
.playing-card.mini-card .figure-center .court-art{filter:none}
@media(max-width:680px){.playing-card .center-symbol.figure-center{inset:11px 5px 13px}.playing-card.small-card .center-symbol.figure-center{inset:10px 4px 12px}}

/* v1.2: aviso persistente cuando el navegador y el servidor ejecutan versiones incompatibles. */
.server-warning { position: fixed; z-index: 2200; left: 50%; top: max(76px, env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(94vw, 680px); border: 2px solid #b04b37; border-radius: 14px; background: #fff3e8; color: #4d2519;
  padding: 16px 20px; font: 600 15px/1.45 system-ui, sans-serif; box-shadow: 0 12px 30px #0005; text-align: left; }
.server-warning code { font-family: ui-monospace,monospace; background: #ffead8; padding: 1px 4px; border-radius: 4px; }
.server-warning.hidden { display: none !important; }

/* v1.3: los naipes vuelan desde su origen hasta su destino; son decorativos y nunca bloquean clics. */
.card-flight-layer{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.card-flight{position:absolute;pointer-events:none;filter:drop-shadow(0 11px 10px #0008);transform-origin:center center;will-change:transform,opacity}
.card-flight .playing-card{margin:0!important;cursor:default!important}
.penalty-notice{position:absolute;z-index:7;left:50%;top:46%;transform:translate(-50%,-50%);width:max-content;max-width:92%;padding:8px 14px;border-radius:40px;background:#fff0c4;color:#4b3112;box-shadow:0 5px 17px #0006;font-size:12px;font-weight:900;text-align:center;pointer-events:none}
.planning-tip{color:#ffdb8e;font-size:11px;font-weight:800;padding:4px 6px;display:inline-block}
@media(prefers-reduced-motion:reduce){.card-flight-layer{display:none!important}}

/* v1.4 · interacción directa con el tapete en ratón y pantallas táctiles */
.turn-clock .penalty-notice{display:block;position:static;transform:none;background:#f9deb0;color:#583f16;box-shadow:none;border-radius:12px;padding:3px 8px;font-size:9px;font-weight:900;max-width:150px;width:max-content;white-space:nowrap;pointer-events:none}
.turn-clock .penalty-notice.hidden{display:none}
.turn-clock>div:last-child{min-width:92px;max-width:180px}
.hand [data-card-id],#drawDeck,#drawDiscard{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.pile.available{cursor:grab}
.hand [data-card-id]{cursor:grab}
.drag-mode,.drag-mode *{cursor:grabbing!important}
.pointer-card-ghost{position:absolute;left:0;top:0;pointer-events:none;z-index:80;filter:drop-shadow(0 15px 14px #001b);will-change:transform}
.pointer-card-ghost .playing-card{margin:0!important;box-shadow:0 0 0 3px #f4d486,0 15px 22px #0007;transform:rotate(-3deg)}
.drag-source-active{opacity:.5!important}
.pile.drop-valid,.meld-group.drop-valid,.plan-drop-target.drop-valid{outline:3px dashed #f7df93!important;outline-offset:3px;box-shadow:0 0 0 8px #f5de8344,0 0 24px #f2d38195!important;background:#387b5b!important;opacity:1!important}
#yourZone.drop-valid{outline:3px dashed #f7df93;outline-offset:2px;border-color:#f7df93;box-shadow:0 0 0 7px #f5de832b}
#hand .playing-card.drop-valid{outline:3px solid #f7df93;outline-offset:3px;opacity:1}
.plan-drop-target{border:1px dashed #d3bf796e;border-radius:8px;background:#ffffff0a;color:#f8e3a4;padding:6px 10px;font-size:10px;font-weight:800;white-space:nowrap;cursor:default}
.drag-help{position:absolute;z-index:9;left:50%;bottom:43%;transform:translateX(-50%);max-width:min(440px,90%);background:#f9e8bd;color:#174334;padding:7px 12px;border-radius:9px;font-size:11px;font-weight:900;line-height:1.4;text-align:center;pointer-events:none;box-shadow:0 6px 16px #0006}
@media(max-width:680px){.turn-clock .penalty-notice{font-size:8px;padding:2px 5px}.turn-clock>div:last-child{max-width:130px}.plan-drop-target{padding:5px 6px;font-size:9px}.drag-help{font-size:9px;bottom:45%}}
@media(prefers-reduced-motion:reduce){.pointer-card-ghost .playing-card{transform:none}}

/* El montón de descartes también es el destino al soltar cartas, no debe verse desactivado */
.pile-discard.drop-zone-ready,.pile-discard.penalty-available{opacity:1!important;border-color:#ebce81!important;box-shadow:0 0 0 2px #ebce813c}
.pile-discard.penalty-available .pile-name{color:#ffe3a2}

/* La ayuda durante un arrastre queda fuera del centro del tapete y nunca tapa el descarte. */
.drag-help{position:fixed;top:auto;bottom:8px;z-index:46;max-width:min(560px,94vw);box-shadow:0 4px 14px #0009}
@media(max-width:680px){.drag-help{bottom:7px;max-width:95vw;font-size:9px}}

/* v1.5 — El tablero y la mano ocupan espacios independientes.
   En una pantalla estrecha nunca se dibujan cartas encima de los mazos. */
.table-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  height: auto;
  isolation: isolate;
}
.board-stage {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 465px;
}
.board-stage .meld-area { top: 23%; height: 27%; }
.board-stage .piles-area { top: 69%; }
.board-stage .play-notice { bottom: 37%; }
.your-zone, .table-shell .your-zone {
  position: relative;
  flex: 0 0 auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  margin: 0 clamp(12px, 3.5vw, 42px) 18px;
}
.hand-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }
.board-preview-label { display: none; }
.hand-toggle {
  border-color: #e8c980aa;
  color: #ffe5a7;
  background: #e8c98020;
  white-space: nowrap;
}
.hand-toggle:hover { background: #e8c98039; }
/* Ampliada: cada carta es visible por completo, en varias filas; el área es
   desplazable por dentro y no desplaza el tablero fuera de la pantalla. */
.table-shell.hand-expanded .hand-scroll {
  max-height: min(47dvh, 475px);
  min-height: 105px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.table-shell.hand-expanded .hand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 14px 10px;
  align-items: center;
  justify-items: center;
  justify-content: normal;
  min-width: 0;
  width: 100%;
  height: auto;
  padding: 16px 12px 14px;
}
.table-shell.hand-expanded .hand .playing-card,
.table-shell.hand-expanded .hand .playing-card:first-child {
  margin-left: 0;
}
.table-shell.hand-expanded .board-stage {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 300px;
  border-radius: 38% / 9%;
  background: radial-gradient(ellipse at 50% 47%, var(--felt), var(--felt-dark) 96%);
  box-shadow: 0 5px 20px #051a1850;
}
.table-shell.hand-expanded .board-stage .meld-area {top: 24%; height: 25%;}
.table-shell.hand-expanded .board-stage .piles-area {top: 69%;}
.table-shell.hand-expanded .board-preview-label {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #f4dba8c9;
  font-size: 9px;
  letter-spacing: .14em;
  pointer-events: none;
}
@media (max-width: 970px) {
  .board-stage { min-height: 390px; }
  .table-shell.hand-expanded .board-stage {min-height: 285px;}
}
@media (max-width: 680px) {
  .table-shell { min-height: 0; max-height: none; border-radius: 26px; }
  .board-stage { min-height: 330px; }
  .board-stage .meld-area {top: 23%; height: 25%;}
  .board-stage .piles-area {top: 69%;}
  .your-zone, .table-shell .your-zone {left: auto;right: auto;bottom: auto;margin: 0 5px 9px;padding: 8px 7px;}
  .your-zone-head { flex-wrap: wrap; }
  .hand-tools { flex: 1 1 100%; justify-content: flex-start; }
  .hand-toggle { flex: 1 0 auto; }
  .hand-scroll { min-height: 92px; }
  .hand { min-width: max-content; }
  .table-shell.hand-expanded .board-stage {min-height: 260px;border-radius: 20px;}
  .table-shell.hand-expanded .board-stage .meld-area {top: 21%; height: 26%;}
  .table-shell.hand-expanded .board-stage .piles-area {top: 70%;}
  .table-shell.hand-expanded .hand-scroll {max-height: 40dvh;}
  .table-shell.hand-expanded .hand {
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 13px 7px;
    padding: 14px 5px 11px;
  }
  .table-shell.hand-expanded .hand .playing-card { width: 67px; height: 95px; }
  .board-preview-label {font-size: 8px;}
  .bottom-strip {margin-bottom: 52px;}
}
@media (max-width: 390px) {
  .board-stage {min-height: 310px;}
  .table-shell.hand-expanded .board-stage {min-height: 252px;}
  .table-shell.hand-expanded .hand {grid-template-columns: repeat(auto-fill, minmax(63px, 1fr)); gap: 11px 3px;}
  .table-shell.hand-expanded .hand .playing-card { width: 64px; height: 92px; }
}
@media (max-height: 680px) and (max-width: 680px) {
  .board-stage {min-height: 295px;}
  .table-shell.hand-expanded .board-stage {min-height: 248px;}
  .table-shell.hand-expanded .hand-scroll {max-height: 36dvh;}
}

.table-shell.hand-expanded .hand-navigate {display:none;}
.hand-navigate {min-width: 30px; font-size: 16px; padding: 5px 8px;}

/* La etiqueta adicional compite con los avatares en móviles pequeños. */
.table-shell.hand-expanded .board-preview-label {display:none;}


/* v1.6 — pestaña de mano, comodines limpios, celebración sin tapar la mesa y aviso de turno */
.your-zone,.table-shell .your-zone { overflow: visible; margin-top: 14px; }
.your-zone > .hand-toggle {
  position:absolute; top:-25px; left:50%; transform:translateX(-50%);
  width:68px; height:29px; padding:1px 8px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e8c980ad; border-bottom:0; border-radius:12px 12px 0 0;
  background:#173f37; color:#f3d99c; z-index:9; cursor:pointer;
  box-shadow:0 -3px 12px #0005;
}
.your-zone > .hand-toggle svg{display:block;width:45px;height:25px;overflow:visible}
.your-zone > .hand-toggle polyline{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.your-zone > .hand-toggle:hover,.your-zone > .hand-toggle:focus-visible{background:#2b6852;outline-color:#ffe4a5}
.playing-card.joker .center-symbol.figure-center{inset:6px 5px 6px}
.playing-card.joker.mini-card .center-symbol.figure-center{inset:3px 2px}
.playing-card.joker.small-card .center-symbol.figure-center{inset:5px 4px}
.sound-hint{font-size:11px!important;margin:5px 0 13px!important;color:#64796d!important}
#soundTestBtn{margin:7px 0 0;width:100%;text-align:center;border-color:#b4c6b9}
.clock-ring.urgent{animation:urgentClock 1s ease-in-out infinite}
@keyframes urgentClock{50%{filter:drop-shadow(0 0 8px #f07472b0)}}
.board-stage.celebrating{box-shadow:inset 0 0 60px #dfad4433}
.board-stage.celebrating .meld-group.winner-meld{border:2px solid #ffe1a0;background:#d9b4492a;box-shadow:0 0 0 2px #e7b96044,0 0 20px #fbd57e9c;animation:meldVictory .8s ease-in-out infinite alternate}
@keyframes meldVictory{to{box-shadow:0 0 0 4px #fff0ba7a,0 0 28px #fbd57eaa;transform:translateY(-2px)}}
.victory-moment{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.victory-banner{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  width:max-content;max-width:80%;padding:7px 20px 9px;border:1px solid #ffde8ba1;background:linear-gradient(110deg,#133b32ed,#2b503eee,#133b32ed);border-radius:12px;
  color:#fff4ce;text-align:center;box-shadow:0 0 25px #d8a8527a,0 10px 22px #001b;animation:victoryEnter .45s ease-out both}
.victory-star{position:absolute;left:-14px;top:-21px;font-size:32px;color:#ffe6a4;filter:drop-shadow(0 0 8px #edc35e)}
.victory-kicker{font-size:9px;letter-spacing:.16em;font-weight:900;color:#f5d48c}
.victory-banner strong{font:600 clamp(17px,3.2vw,28px) Georgia,serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.victory-detail{font-size:10px;font-weight:800;color:#e8f1d8;white-space:nowrap}
.victory-final-card{position:absolute;right:6%;bottom:8%;display:flex;align-items:center;flex-direction:column;gap:4px;
  transform:rotate(9deg);filter:drop-shadow(0 0 10px #efc46bb9);animation:closingCardEnter .65s ease-out both}
.victory-final-card .playing-card{width:49px;height:68px}
.victory-final-card span:last-child{font-size:8px;font-weight:900;letter-spacing:.09em;color:#ffe4a6;background:#092721e0;border-radius:7px;padding:3px 5px}
.victory-spark{position:absolute;color:#ffdd94;font-size:30px;animation:sparkDrift 1.4s ease-in-out infinite alternate}
.spark-one{top:23%;left:16%}.spark-two{top:68%;left:12%;animation-delay:.5s}.spark-three{top:25%;right:10%;animation-delay:.8s}
@keyframes victoryEnter{from{opacity:0;transform:translate(-50%,-30%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes closingCardEnter{from{opacity:0;transform:translateY(-40px) rotate(-20deg) scale(.7)}to{opacity:1;transform:rotate(9deg) scale(1)}}
@keyframes sparkDrift{to{opacity:.35;transform:translateY(-16px) rotate(23deg)}}
@media(max-width:680px){
  .victory-banner{top:52%;padding:6px 11px 8px;max-width:87%}
  .victory-kicker{font-size:8px}.victory-detail{font-size:9px}
  .victory-final-card{right:2%;bottom:6%}.victory-final-card .playing-card{width:39px;height:54px}
  .spark-one{left:5%}.spark-two{left:5%}.spark-three{right:4%}
}
@media(prefers-reduced-motion:reduce){.board-stage.celebrating .meld-group.winner-meld,.victory-moment *,.clock-ring.urgent{animation:none!important}}

/* v1.7 — solo controles útiles, turno visible, pausa real y mano cómoda en móvil */
.pause-button {
  flex: 0 0 auto;
  border: 1px solid #e8c980a8; border-radius: 10px;
  color: #ffecbc; background: #24483c;
  font-size: 12px; font-weight: 900; padding: 11px 14px;
  min-height: 42px; white-space: nowrap;
}
.pause-button:hover, .pause-button:focus-visible {background:#3d6d53;}
.game-paused .pause-button {background:#ffe3a4; color:#263b34; border-color:#fff3cd;}
.pause-banner {
  padding: 10px 14px; margin: 0 4px 12px; border: 1px solid #f1d18ebb;
  border-radius: 12px; background: #4c3824; color: #fff2d2;
  font-weight: 900; font-size: 12px; letter-spacing: .035em; text-align: center;
}
.game-paused .clock-ring {filter: grayscale(.7); animation: none!important;}
/* El jugador actual resalta tanto en el cronómetro como en el propio asiento. */
#turnClock {border: 2px solid #ffffff23; border-radius: 18px; padding: 7px 12px; background: #ffffff09; transition: background .15s, box-shadow .15s;}
#turnClock.current-is-me {
  background: #e6c26a24; border-color: #ffe092;
  box-shadow: 0 0 0 3px #e8c9803a, 0 0 28px #f4d58a4f;
  animation: turnCurrentPulse 1.5s ease-in-out infinite alternate;
}
#turnClock.current-is-me .meta-label {color:#ffdc87;}
#turnClock.current-is-me #turnPlayerName {font-weight:900; color:#fff0b8;}
#turnClock.current-is-other {border-color:#ebce8075; background: #e8c98012;}
.opponent.is-active {z-index: 6;}
.opponent.is-active .opp-avatar {
  border: 3px solid #ffe4a2; background: linear-gradient(140deg,#c99336,#695019);
  box-shadow: 0 0 0 4px #f7cd72a8, 0 0 25px #ffcb54b8;
}
.opponent.is-active .opp-name {background:#f4d88e; color:#203c2e; font-weight:900; box-shadow:0 0 14px #f5d57866;}
.opp-playing {
  background:#f4d88e; color:#203b30; border:1px solid #fff8d9;
  padding:3px 7px; border-radius: 12px;
  font-size: 9px; font-weight: 1000; letter-spacing: .04em;
  box-shadow: 0 2px 12px #e4b74b77;
}
.your-zone.is-active {
  border: 2px solid #ffe3a0; background:linear-gradient(180deg,#28513bc4,#092623ee);
  box-shadow: 0 0 0 3px #ebcf8273,0 0 26px #efc15c55;
}
@keyframes turnCurrentPulse {to{box-shadow:0 0 0 4px #ffe1a055,0 0 35px #f1d78566;}}
/* El objetivo ocupa siempre el extremo derecho del título de la mano. */
.your-zone-head, .your-zone .your-zone-head {
  display: grid; grid-template-columns:minmax(0,1fr) minmax(105px,max-content);
  align-items:center; gap: 8px 10px;
}
.your-zone-head .you-indicator {min-width:0;}
.your-zone-head .you-indicator > div {min-width:0;}
.your-zone-head .you-indicator small {max-width:none; overflow-wrap:anywhere;}
.hand-objective {
  text-align:right; align-self:center; max-width:min(44vw,270px);
  padding: 6px 10px; background:#f3d58c1b;
  border:1px solid #e8c9806e; border-radius:9px;
}
.hand-objective span {display:block; font-size:9px; letter-spacing:.15em; font-weight:900; color:#efce87;}
.hand-objective strong {display:block; margin-top:2px; font:600 clamp(12px,1.5vw,17px) Georgia,serif; line-height:1.2; color:#fff0c7;}
.your-zone-head .hand-tools {grid-column:1/-1; justify-content:flex-start; flex:0 0 auto;}
/* Los controles no se solapan con los naipes, y el scroll nativo minúsculo se oculta. */
.hand-rail {display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:stretch; min-width:0; max-width:100%; gap:3px; overflow:visible;}
.hand-rail .hand-scroll {flex:1; min-width:0; max-width:100%; scrollbar-width:none; -ms-overflow-style:none;}
.hand-rail .hand-scroll::-webkit-scrollbar {display:none;}
.hand-nav {
  flex:0 0 44px; min-width:44px; display:flex; align-items:center; justify-content:center;
  color:#193c30; font-size:24px; font-weight:900; border:1px solid #fff0b0;
  border-radius:10px; background:#edd48f; box-shadow:0 2px 9px #0004;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.hand-nav:hover,.hand-nav:focus-visible {background:#fff0b7;}
.table-shell.hand-expanded .hand-nav {display:none!important;}
.table-shell.hand-expanded .hand-scroll {scrollbar-width:thin;}
.table-shell.hand-expanded .hand-scroll::-webkit-scrollbar{display:initial;}
.actions-row:empty,.planning-groups:empty {display:none;}
/* Ocultar controles inservibles también reduce el largo de la mesa en móvil. */
@media (max-width:680px) {
  .game-heading {gap:5px;}
  .game-heading-left{min-width:0;}
  .timers {gap:4px;}
  .pause-button {padding:8px 6px; font-size:10px; min-height:38px;}
  #turnClock {padding:4px 6px; gap:5px; border-radius:11px;}
  #turnClock .clock-ring {width:40px;height:40px;}
  .opp-playing {font-size:7px; padding:2px 5px;}
  .your-zone-head {grid-template-columns:minmax(0,1fr) minmax(110px,auto)!important; gap:6px;}
  .hand-objective{max-width:45vw; padding:5px 7px;}
  .hand-objective span{font-size:8px;}
  .hand-objective strong{font-size:12px;}
  .your-zone-head .hand-tools {flex: 0 0 auto;}
  .hand-nav {min-width:40px; flex-basis:40px; font-size:23px;}
}
@media(max-width:390px){
  .pause-button{padding:6px 5px;font-size:9px;}
  .hand-nav{min-width:35px;flex-basis:35px;}
  .hand-rail{grid-template-columns:31px minmax(0,1fr) 31px;}
  .hand-objective{max-width:44vw;}
  #turnClock>div:last-child{min-width:55px;max-width:100px;}
}
@media(prefers-reduced-motion:reduce){#turnClock.current-is-me{animation:none!important}}

@media(max-width:680px){.game-heading-left #roundTitle{display:none;} .game-heading-left{flex:0 0 auto;} .game-heading .timers{margin-left:auto;}}

/* Continental 1.8: controles compactos, área de castigo y mesa adaptable. */
.number-stepper{display:inline-flex;align-items:center;gap:0;border:1px solid #bbd0c0;border-radius:11px;overflow:hidden;background:#fff;max-width:220px;height:48px}
.number-stepper .form-input{margin:0;border:0!important;max-width:86px;width:86px;height:46px;padding:4px!important;text-align:center;border-radius:0;appearance:textfield;-moz-appearance:textfield;font-size:19px;font-weight:900}
.number-stepper .form-input::-webkit-inner-spin-button,.number-stepper .form-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.number-stepper button{width:49px;min-width:49px;height:48px;display:grid;place-items:center;background:#e5efdf;border:0;color:#174c3b;font-size:26px;font-weight:900;touch-action:manipulation}
.number-stepper button:active{background:#cbdcc9}
.deck-choices{display:flex;gap:15px;margin:12px 0 7px}
.deck-choice{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;padding:12px;border:2px solid #bdd1c4;border-radius:13px;background:#f2f3e8;color:#254f41;font-weight:900;cursor:pointer}
.deck-choice.chosen{border:3px solid #bf964b;background:#f6ecca;box-shadow:0 0 0 3px #e7ca7450}
.deck-choice img{width:72px;height:92px;object-fit:contain;background:#fff;border:1px solid #d3d0ba;border-radius:8px}
.penalty-actions{position:absolute;z-index:10;top:calc(69% + 106px);left:50%;transform:translateX(8%);display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:58%;}
.penalty-actions:empty{display:none}
.penalty-actions .game-btn{white-space:nowrap;padding:6px 9px;font-size:11px;box-shadow:0 4px 10px #0006}
.hand-side{display:flex;min-width:0;width:100%;flex-direction:column;gap:4px;justify-content:center;align-self:stretch;position:relative;z-index:4}
.hand-rail .hand-nav{min-width:0;width:100%;height:50%;max-height:54px;flex:1 1 50%;font-size:18px;border-radius:9px}
.hand-sort{display:flex;flex:1 1 50%;height:50%;min-height:35px;width:100%;justify-content:center;align-items:center;gap:1px;border-radius:9px;border:1px solid #e6d59d88;background:#174638;color:#f8e7b4;font-size:18px;font-weight:900;touch-action:manipulation}
.hand-sort span{font-size:14px;color:#f0a89b}
.hand-side .hand-nav.hidden{visibility:hidden!important;display:flex!important;pointer-events:none}
.table-shell.hand-expanded .hand-side .hand-nav{visibility:hidden!important;display:flex!important;pointer-events:none}
.table-shell.hand-expanded .hand{display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;min-width:0;width:100%;padding:6px 3px 10px;height:auto}
.custom-hand-row{width:100%;display:flex;align-items:center;gap:5px;min-height:102px;flex:0 0 auto;min-width:0}
.custom-hand-row .hand-row-label{display:inline-flex;align-items:center;justify-content:center;min-width:17px;color:#d8c68f;font-size:10px;font-weight:900}
.custom-row-cards{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#d5c08477 transparent;padding:15px 6px 5px}
.custom-row-cards .playing-card,.custom-row-cards .playing-card:first-child{margin-left:0!important;flex:0 0 auto}
.row-drop{flex:0 0 56px;align-self:stretch;min-height:88px;border:2px dashed #e6d19787;border-radius:11px;color:#ecd899;font-size:32px;display:flex;justify-content:center;align-items:center;touch-action:none}
.custom-hand-row:last-child{min-height:76px}
.custom-hand-row:last-child .row-drop{min-height:64px}
.custom-hand-row:last-child .custom-row-cards{padding-top:2px}
.custom-hand-row.drop-valid,.row-drop.drop-valid{outline:3px dashed #fbe1a0;background:#e8c98025}
.meld-group{position:relative;overflow:visible;min-width:0}
.meld-group .meld-toggle{position:absolute;top:-8px;right:-8px;z-index:2;background:#f5de9d;color:#193e32;border:0;border-radius:99px;width:23px;height:23px;font-size:18px;font-weight:900;line-height:1}
.meld-group .meld-caption{background:none;border:0;cursor:pointer;color:#f7e6b6;font-size:10px}
.meld-group .meld-cards{max-width:100%;overflow:hidden;justify-content:flex-start}
.meld-group.meld-open .meld-cards{overflow-x:auto;scrollbar-width:thin;padding:8px 3px;max-width:min(72vw,520px)}
.meld-group.meld-open .meld-cards .playing-card{margin-left:0!important}
.meld-card{display:inline-flex;flex:0 0 auto;touch-action:none;cursor:grab}
.meld-card .playing-card{pointer-events:none}
.meld-card.drop-valid{outline:2px dashed #ffe1a0}
.opponent .opp-cards{display:block!important;background:#fff3c5;color:#17362e;font-size:clamp(10px,1.5vw,13px);font-weight:900;border-radius:8px;border:1px solid #dcbf74;padding:3px 6px;box-shadow:0 2px 4px #0006}
.opponent .opp-cards b{font-size:clamp(14px,2vw,19px)}
@media(max-width:680px){.penalty-actions{top:calc(70% + 82px);transform:translateX(0);max-width:82%;left:50%;translate:-50% 0}.penalty-actions .game-btn{font-size:10px;padding:5px 7px}.hand-rail{grid-template-columns:33px minmax(0,1fr) 33px}.hand-sort{font-size:14px;min-height:29px}.hand-sort span{font-size:11px}.table-shell.hand-expanded .hand-scroll{max-height:47dvh}.custom-row-cards{gap:4px}.row-drop{flex-basis:48px}.opponent .opp-cards{padding:3px 4px;font-size:9px}.opponent .opp-cards b{font-size:14px}}

/* El castigo pertenece físicamente al montón de descartes. */
.discard-pile-zone{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.discard-pile-zone .penalty-actions{position:absolute;top:100%;left:50%;transform:translateX(-50%);translate:none;max-width:none;width:max-content;min-width:min(220px,73vw);gap:5px;z-index:12;justify-content:center}
.discard-pile-zone .penalty-actions .game-btn{font-size:10px;padding:5px 8px;white-space:nowrap}
.hand-rail .hand-side{height:105px;align-self:center;justify-content:initial}
.hand-rail .hand-side .hand-nav{height:51px;flex:0 0 51px;max-height:51px}
.hand-rail .hand-side .hand-sort{height:50px;flex:0 0 50px;min-height:0}
@media(max-width:680px){.discard-pile-zone .penalty-actions{min-width:min(190px,70vw)}.discard-pile-zone .penalty-actions .game-btn{font-size:9px;padding:5px 6px}}

/* Las combinaciones abiertas muestran cartas legibles y permanecen desplazables. */
.board-stage:has(.meld-open) .meld-area{top:19%;height:40%;z-index:5}
.board-stage:has(.meld-open) .meld-list{align-content:flex-start;align-items:flex-start;overflow-y:auto;max-height:100%}
.meld-group.meld-open{background:#0a302adf;border-color:#d6bf7f;z-index:6}
.meld-group.meld-open .meld-cards .playing-card.small-card{width:60px;height:83px}
.meld-group.meld-open .meld-cards .playing-card.small-card .center-symbol{font-size:30px}
@media(max-width:680px){.board-stage:has(.meld-open) .meld-area{top:17%;height:43%}.meld-group.meld-open .meld-cards{max-width:68vw}}
/* Reservar espacio real para las decisiones de castigo, sin invadir la mano. */
@media(max-width:680px){.board-stage:has(.penalty-actions:not(:empty)){min-height:390px}.board-stage:has(.penalty-actions:not(:empty)) .piles-area{top:61%}}

/* v1.9 · Distribución real por filas y vista conjunta de las combinaciones. */
.meld-area-heading{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;z-index:1}
.meld-area-heading .area-label{margin:0}
.table-toggle{border:1px solid #f4d88b;background:#1b5140;color:#ffedbc;border-radius:9px;padding:7px 11px;min-height:32px;font-size:11px;font-weight:900;box-shadow:0 3px 8px #0018;touch-action:manipulation;white-space:nowrap}
.table-toggle:hover,.table-toggle:focus-visible{background:#326c52}
.table-shell.table-expanded .board-stage{min-height:clamp(310px,49dvh,540px);border-radius:22px;position:relative;background:radial-gradient(ellipse at 50% 25%,var(--felt),var(--felt-dark) 96%)}
.table-shell.table-expanded .board-stage .opponents,.table-shell.table-expanded .board-stage .table-wordmark,.table-shell.table-expanded .board-stage .play-notice{visibility:hidden}
.table-shell.table-expanded .board-stage .meld-area{top:8px;bottom:120px;left:9px;right:9px;height:auto;z-index:8;display:flex;align-items:stretch;gap:6px;padding:8px;background:#082b27f5;border:1px solid #e7ce8a88;border-radius:14px;box-shadow:0 8px 20px #001a1b9e}
.table-shell.table-expanded .board-stage .meld-area-heading{justify-content:space-between;flex-wrap:nowrap;gap:7px}
.table-shell.table-expanded .meld-list{width:100%;flex:1;min-height:0;max-height:none;display:flex;justify-content:flex-start;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:7px}
.table-shell.table-expanded .meld-group{flex:0 1 auto;max-width:100%;padding:7px;gap:5px;background:#175344b9;border:1px solid #efd28b5c;align-items:flex-start}
.table-shell.table-expanded .meld-group .meld-caption{font-size:11px;min-height:27px;text-align:left;border-radius:6px;padding:4px 6px;background:#0a3026;white-space:normal;max-width:100%}
.table-shell.table-expanded .meld-group .meld-cards{justify-content:flex-start;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:8px 7px 5px;scrollbar-width:thin;scrollbar-color:#e5cb92a3 transparent}
.table-shell.table-expanded .meld-group .meld-cards .playing-card.small-card{width:67px;height:90px}
.table-shell.table-expanded .meld-group .meld-cards .meld-card+.meld-card .playing-card{margin-left:-39px!important}
.table-shell.table-expanded .meld-group .meld-cards .playing-card:first-child{margin-left:0!important}
.table-shell.table-expanded .board-stage .piles-area{top:auto;bottom:-10px;z-index:9;transform:translateX(-50%) scale(.72);transform-origin:bottom center}
.table-shell.table-expanded .hand-scroll{max-height:min(31dvh,280px)}
.table-shell.table-expanded.hand-expanded .hand-scroll{max-height:min(35dvh,330px)}
.table-shell.table-expanded .your-zone{margin-top:13px}
/* Cada fila es independiente, con un abanico solapado y desplazamiento horizontal propio. */
.table-shell.hand-expanded .hand-scroll{overflow-x:auto;overflow-y:auto;touch-action:pan-x pan-y}
.table-shell.hand-expanded .hand{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;min-width:0;width:100%;height:auto;padding:6px 4px 10px}
.table-shell.hand-expanded .custom-hand-row{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:0;width:100%;min-width:0;flex:0 0 auto}
.custom-row-head{display:flex;justify-content:space-between;align-items:center;min-height:25px;padding:0 6px;color:#f0d796;font-size:10px;font-weight:900;letter-spacing:.06em}
.row-navigation{display:flex;gap:7px;align-items:center}
.row-navigation button{background:#efdc9a;color:#174838;border:1px solid #fff0bf;border-radius:8px;min-width:36px;min-height:29px;font-weight:900;font-size:22px;line-height:1;touch-action:manipulation}
.row-navigation button:disabled{opacity:.32}
.table-shell.hand-expanded .custom-row-cards{--card-width:75px;--card-step:30px;display:flex;flex:0 1 auto;width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;align-items:flex-start;gap:0;padding:18px 7px 13px;scrollbar-width:thin;scrollbar-color:#f2d48d9a #062c28;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.table-shell.hand-expanded .custom-row-cards .playing-card{flex:0 0 var(--card-width);width:var(--card-width);height:106px;min-width:var(--card-width);margin-left:0!important}
.table-shell.hand-expanded .custom-row-cards .playing-card+.playing-card{margin-left:calc(var(--card-step) - var(--card-width))!important}
.table-shell.hand-expanded .custom-row-cards .playing-card:focus-visible{z-index:3}
.table-shell.hand-expanded .custom-row-cards .playing-card:hover,.table-shell.hand-expanded .custom-row-cards .playing-card.selected{z-index:4}
.table-shell.hand-expanded .empty-row{min-height:61px;padding:0 5px 5px}
.table-shell.hand-expanded .empty-row .row-drop{width:100%;min-height:57px;flex:none;max-width:none;display:flex;align-items:center;justify-content:flex-start;padding:8px 14px;color:#f7dda4;font-size:12px;font-weight:800;letter-spacing:.02em;touch-action:none}
.table-shell.hand-expanded .empty-row .row-drop::first-letter{font-size:24px}
.table-shell.hand-expanded .hand-side .hand-nav{visibility:hidden!important;pointer-events:none}
/* Las cartas conservan su tamaño legible; se superponen más en teléfonos estrechos. */
@media(max-width:680px){
 .table-shell.table-expanded .board-stage{min-height:clamp(285px,47dvh,430px)}
 .table-shell.table-expanded .board-stage .meld-area{left:5px;right:5px;top:5px;bottom:105px;padding:6px}
 .table-shell.table-expanded .board-stage .piles-area{bottom:-12px;transform:translateX(-50%) scale(.62)}
 .table-shell.table-expanded .meld-group .meld-cards .playing-card.small-card{width:59px;height:81px}
 .table-shell.table-expanded .meld-group .meld-cards .meld-card+.meld-card .playing-card{margin-left:-35px!important}
 .table-toggle{padding:5px 7px;font-size:10px;min-height:30px}
 .table-shell.hand-expanded .custom-row-cards{--card-width:67px;--card-step:25px;padding-left:4px;padding-right:5px}
 .table-shell.hand-expanded .custom-row-cards .playing-card{height:96px}
 .table-shell.hand-expanded .hand-scroll{max-height:min(41dvh,400px)}
 .table-shell.table-expanded.hand-expanded .hand-scroll{max-height:min(35dvh,300px)}
}
@media(max-width:390px){
 .table-shell.hand-expanded .custom-row-cards{--card-width:63px;--card-step:18px;padding-left:3px;padding-right:3px}
 .table-shell.hand-expanded .custom-row-cards .playing-card{height:92px}
 .table-shell.table-expanded .meld-group .meld-cards .playing-card.small-card{width:56px;height:78px}
 .table-shell.table-expanded .meld-group .meld-cards .meld-card+.meld-card .playing-card{margin-left:-36px!important}
}

/* Cuando ambas zonas están abiertas, dar prioridad a la comparación de cartas. */
@media(max-width:680px){
 .table-shell.table-expanded.hand-expanded .board-stage{min-height:clamp(280px,41dvh,365px)}
 .table-shell.table-expanded.hand-expanded .board-stage .meld-area{bottom:98px}
 .table-shell.table-expanded.hand-expanded .hand-scroll{max-height:min(32dvh,300px)}
}
.table-shell.table-expanded .victory-moment{z-index:11}

/* v1.10 · Interfaz sin cabecera de cronómetro, filas densas y tiempo integrado. */
/* En escritorio los tres controles viven juntos en el lateral; en móvil, junto al borde inferior. */
.sidebar-tabs{align-items:center;gap:6px;justify-content:space-between}
.sidebar-tabs .side-tab{flex:0 1 auto;font-size:9px;letter-spacing:.02em;white-space:nowrap}
.sidebar-tabs .pause-button{min-height:31px;padding:6px 9px;font-size:10px;white-space:nowrap;border-radius:8px;margin-left:auto}
.mobile-panel-buttons .pause-button{display:none!important}
.hand-objective #roundLabel{display:block;color:#efd28b;font-size:10px;letter-spacing:.09em;font-weight:900}
.your-zone .hand-objective{padding:5px 9px}
/* La mano funciona como una barra horizontal de tiempo restante. El color se retira de derecha a izquierda. */
.your-zone.turn-timing{
  background:linear-gradient(to right,#28513b var(--hand-remaining,100%),#082420 var(--hand-remaining,100%))!important;
  border-color:#e8c980a0;
  box-shadow:0 0 0 2px #e8c98030,0 7px 26px #0006;
}
.your-zone.turn-timing.turn-ending{border-color:#ec8d81;box-shadow:0 0 0 2px #f27c793a,0 7px 26px #0006}
.game-paused .your-zone.turn-timing{border-color:#d8c185;box-shadow:0 0 0 2px #e8c98024}
/* Esfera decreciente solo en el asiento del rival que está jugando. */
.opponent.is-active .opp-avatar{
  padding:0;border:0!important;position:relative;isolation:isolate;
  background:conic-gradient(from -90deg,var(--opp-ring-color,#ffe6a2) var(--opp-remaining,100%),#25443d 0)!important;
  box-shadow:0 0 0 2px #f7cd7280,0 0 20px #ffcb5466;
}
.opponent.is-active .opp-avatar::before{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(140deg,#b18b3e,#41533e);z-index:0}
.opp-avatar .opp-initial{position:relative;z-index:1}
.game-paused .opponent.is-active .opp-avatar{filter:saturate(.65)}
/* Una fila = prácticamente una carta de alto. No hay cabeceras ni espacio extra. */
.table-shell.hand-expanded .hand{gap:2px!important;padding:3px 2px 5px!important}
.table-shell.hand-expanded .custom-hand-row{height:111px;min-height:0!important;gap:0!important;position:relative;display:flex;flex-direction:row;align-items:flex-start;flex:0 0 auto}
.table-shell.hand-expanded .custom-row-cards{
  --card-width:75px;--card-step:54px;
  height:111px;min-height:0;max-height:111px;
  flex:1 1 auto;max-width:100%;min-width:0;
  padding:2px 3px 3px!important;align-items:flex-start;
  overscroll-behavior-x:contain;scrollbar-width:thin;
}
.table-shell.hand-expanded .custom-row-cards .playing-card{height:106px}
.table-shell.hand-expanded .row-navigation{
  position:absolute;z-index:6;inset:0;display:block;
  background:none;box-shadow:none;padding:0;pointer-events:none;
}
.table-shell.hand-expanded .row-navigation button{
  position:absolute;top:50%;transform:translateY(-50%);
  min-width:32px;width:32px;min-height:30px;height:30px;
  font-size:20px;padding:0;pointer-events:auto;
  background:#0b302be9;color:#f8e6b0;border:1px solid #ead08e;border-radius:8px;
  box-shadow:0 2px 8px #0008;
}
.table-shell.hand-expanded .row-navigation button:first-child{left:1px}
.table-shell.hand-expanded .row-navigation button:last-child{right:1px}
.table-shell.hand-expanded .empty-row{height:36px;min-height:36px!important;padding:0 3px 2px!important}
.table-shell.hand-expanded .empty-row .row-drop{
  width:67px;min-width:67px;max-width:67px;min-height:32px;height:32px;
  flex:0 0 67px;padding:0!important;font-size:25px!important;line-height:1;
  border-radius:7px;justify-content:center;align-items:center;
}
.table-shell.hand-expanded .empty-row .row-drop::first-letter{font-size:inherit}
.table-shell.hand-expanded .hand-scroll{max-height:min(62dvh,540px);overflow-y:auto;overflow-x:auto;scrollbar-width:thin}
.table-shell.table-expanded.hand-expanded .hand-scroll{max-height:min(40dvh,375px)}
@media(max-width:970px){
  .mobile-panel-buttons .pause-button:not(.hidden){display:flex!important;align-items:center;justify-content:center;flex:0 0 auto;min-height:0;padding:7px 10px;font-size:11px}
  .mobile-panel-buttons button{min-width:0}
  /* La pausa del panel sigue disponible en escritorio y el botón inferior solo en móvil. */
  .sidebar-tabs #pauseBtnDesktop{display:none!important}
}
@media(max-width:680px){
  .game-main{padding-top:6px}
  .your-zone .hand-objective{max-width:50vw}
  .table-shell.hand-expanded .hand{gap:1px!important;padding:2px 1px 3px!important}
  .table-shell.hand-expanded .custom-hand-row{height:99px}
  .table-shell.hand-expanded .custom-row-cards{
    --card-width:67px;--card-step:38px;
    height:99px;max-height:99px;padding:1px 3px 2px!important;
  }
  .table-shell.hand-expanded .custom-row-cards .playing-card{width:67px;height:95px;min-width:67px}
  .table-shell.hand-expanded .hand-scroll{max-height:min(59dvh,480px)}
  .table-shell.table-expanded.hand-expanded .hand-scroll{max-height:min(38dvh,345px)}
  .table-shell.hand-expanded .empty-row{height:34px;min-height:34px!important}
  .table-shell.hand-expanded .empty-row .row-drop{height:30px;min-height:30px}
  .hand-objective #roundLabel{font-size:9px}
}
@media(max-width:390px){
  /* Las cartas comparten exactamente el ancho visible de la mano comprimida. */
  .table-shell.hand-expanded .custom-row-cards{--card-width:67px;--card-step:34px}
  .table-shell.hand-expanded .custom-row-cards .playing-card{width:67px;height:95px;min-width:67px}
}
/* En la vista de mano larga los rivales quedan dentro del tapete, no cortados en el borde. */
.table-shell.hand-expanded .board-stage .opponent{top:8px;transform:translate(-50%,0)}
.table-shell.hand-expanded .board-stage .meld-area{top:34%;height:25%}
@media(max-width:680px){
  .table-shell.hand-expanded .board-stage .opponent{top:6px}
  .table-shell.hand-expanded .board-stage .meld-area{top:33%;height:23%}
}
/* La mesa completa debe prevalecer sobre el reparto del tapete. */
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{top:8px;height:auto}
@media(max-width:680px){.table-shell.table-expanded.hand-expanded .board-stage .meld-area{top:5px}}


/* v1.11 · Sin pastillas flotantes sobre el descarte. */
.penalty-notice{display:none!important}

/* Mesa con un único control visual como la pestaña de la mano. */
.meld-area{gap:0;top:25%;height:29%;align-items:stretch}
.meld-area .meld-list{flex:1 1 auto;min-height:0;width:100%;max-width:100%;padding:2px 3px;gap:5px;align-content:flex-start}
.table-toggle{
  position:absolute;z-index:12;right:3px;top:-18px;display:grid;place-items:center;
  width:46px;height:30px;min-height:30px;padding:0;background:#174b3e;
  border:1px solid #ead08e;border-radius:9px;box-shadow:0 3px 12px #0019;
  touch-action:manipulation;
}
.table-toggle svg{stroke:currentColor;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;fill:none}
.table-toggle:hover,.table-toggle:focus-visible{background:#327057}
.table-shell.table-expanded .board-stage{min-height:clamp(385px,52dvh,550px)}
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  top:5px;left:7px;right:7px;bottom:92px;height:auto;
  padding:4px 4px 3px;gap:0;align-items:stretch;
}
.table-shell.table-expanded .meld-list{padding:28px 3px 4px;gap:5px;overflow-y:auto;overflow-x:hidden}
.table-shell.table-expanded .meld-group{padding:4px;gap:3px}
.table-shell.table-expanded .meld-group .meld-caption{min-height:0;padding:2px 5px;font-size:10px}
.table-shell.table-expanded .board-stage .table-toggle{top:3px;right:5px}
.table-shell.table-expanded .board-stage .piles-area{bottom:-11px}

/* Mano expandida: altura invariable para TRES filas (ocupadas o vacías),
   y desplazamiento propio para filas adicionales. No depende del turno actual. */
.table-shell.hand-expanded .hand-scroll,
.table-shell.table-expanded.hand-expanded .hand-scroll{
  height:346px;min-height:346px;max-height:346px;
  flex:0 0 346px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;overscroll-behavior:contain;
}
.table-shell.hand-expanded .hand{gap:2px!important;min-height:100%;padding:2px 1px 3px!important}
.table-shell.hand-expanded .custom-hand-row,
.table-shell.hand-expanded .custom-hand-row.empty-row{
  height:111px;min-height:111px!important;max-height:111px;
  flex:0 0 111px;padding:0!important;
}
.table-shell.hand-expanded .empty-row .row-drop{
  width:67px;max-width:67px;min-width:67px;height:78px;min-height:78px;
  align-self:center;border-radius:9px;
}
.table-shell.hand-expanded .custom-row-cards{overflow-x:auto;overflow-y:hidden}
/* Evitar cambios de altura cuando cambian los botones contextuales en los turnos. */
.table-shell.hand-expanded .actions-row{min-height:44px}
.table-shell.hand-expanded .planning-row{min-height:0}

@media(max-width:680px){
 .meld-area{top:26%;height:28%}
 .table-shell.table-expanded .board-stage{min-height:clamp(350px,47dvh,445px)}
 .table-shell.table-expanded.hand-expanded .board-stage{min-height:clamp(350px,47dvh,445px)}
 .table-shell.table-expanded .board-stage .meld-area,
 .table-shell.table-expanded.hand-expanded .board-stage .meld-area{left:4px;right:4px;top:3px;bottom:81px;padding:3px}
 .table-shell.table-expanded .meld-list{padding:27px 2px 4px}
 .table-shell.table-expanded .board-stage .piles-area{bottom:-12px;transform:translateX(-50%) scale(.62)}
 .table-toggle{width:42px;height:28px;min-height:28px;top:-14px}
 .table-shell.hand-expanded .hand-scroll,
 .table-shell.table-expanded.hand-expanded .hand-scroll{height:308px;min-height:308px;max-height:308px;flex-basis:308px}
 .table-shell.hand-expanded .custom-hand-row,
 .table-shell.hand-expanded .custom-hand-row.empty-row{height:100px;min-height:100px!important;max-height:100px;flex-basis:100px}
 .table-shell.hand-expanded .empty-row .row-drop{width:61px;min-width:61px;max-width:61px;height:75px;min-height:75px}
}

/* El tablero no debe cambiar de altura ni desplazar la mano al empezar el
   castigo. El lugar para los botones queda reservado durante toda la ronda. */
@media(max-width:680px){
  .table-shell.hand-expanded:not(.table-expanded) .board-stage,
  .table-shell.hand-expanded:not(.table-expanded) .board-stage:has(.penalty-actions:not(:empty)){
    min-height:350px;
  }
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .piles-area,
  .table-shell.hand-expanded:not(.table-expanded) .board-stage:has(.penalty-actions:not(:empty)) .piles-area{
    top:61%;
  }
}

/* En teléfono, reservar espacio para los tres pisos completos sin que la
   mesa dependa de si se acaba de abrir la votación de castigo. */
@media(max-width:680px){
  .table-shell.hand-expanded:not(.table-expanded) .board-stage,
  .table-shell.hand-expanded:not(.table-expanded) .board-stage:has(.penalty-actions:not(:empty)){
    min-height:280px;
  }
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .piles-area,
  .table-shell.hand-expanded:not(.table-expanded) .board-stage:has(.penalty-actions:not(:empty)) .piles-area{
    top:63%;
  }
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .stack-stack,
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .discard-wrap{height:72px;width:53px}
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .piles-area .playing-card.small-card{height:72px;width:53px}
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .meld-area{top:28%;height:25%}
}
/* El mensaje de estado no debe romper el encabezado ni mover las filas. */
.table-shell.hand-expanded #turnInstruction{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}

/* v1.12 — Tapete seguro: combinaciones y mazos son zonas de flujo separadas.
   Los mazos nunca se dibujan detrás de las combinaciones, con independencia
   del tamaño de pantalla, del número de combinaciones o de la mano expandida. */
.table-shell .board-stage{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:0 8px 44px;
  min-height:395px;
}
.table-shell .board-stage::before{
  content:"";
  display:block;
  flex:0 0 clamp(86px,15%,130px);
  pointer-events:none;
}
.table-shell .board-stage .meld-area,
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  position:relative;
  inset:auto;
  top:auto;
  bottom:auto;
  left:auto;
  right:auto;
  flex:1 1 auto;
  width:100%;
  min-height:70px;
  height:auto;
  max-height:none;
  margin:0;
  overflow:visible;
  z-index:3;
}
.table-shell .board-stage .meld-list,
.table-shell.table-expanded .board-stage .meld-list{
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.table-shell .board-stage .piles-area,
.table-shell.table-expanded .board-stage .piles-area,
.table-shell.table-expanded.hand-expanded .board-stage .piles-area{
  position:relative;
  inset:auto;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  flex:0 0 auto;
  margin:8px auto 0;
  align-self:center;
  justify-self:center;
  transform:none;
  z-index:5;
}
.table-shell.table-expanded .board-stage,
.table-shell.table-expanded.hand-expanded .board-stage{
  min-height:485px;
  height:clamp(485px,60dvh,600px);
  padding:7px 7px 44px;
}
.table-shell.table-expanded .board-stage::before{display:none}
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  min-height:180px;
  padding:4px 4px 2px;
}
/* Los botones de castigo quedan dentro del espacio reservado bajo los mazos. */
.table-shell .board-stage .piles-area .penalty-actions{z-index:11}

/* Mano con tres filas completas, sin recortar la tercera ni depender del turno.
   La zona de scroll persiste incluso con filas vacías; al crear otra fila,
   se desplaza solamente la mano. */
.table-shell.hand-expanded .hand-scroll,
.table-shell.table-expanded.hand-expanded .hand-scroll{
  height:368px;
  min-height:368px;
  max-height:368px;
  flex:0 0 368px;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.table-shell.hand-expanded .custom-hand-row,
.table-shell.hand-expanded .custom-hand-row.empty-row{
  height:111px;
  min-height:111px!important;
  max-height:111px;
  flex:0 0 111px;
}
.table-shell.hand-expanded .hand{
  min-height:100%;
  padding-bottom:8px!important;
}
/* Los botones inferiores fijos nunca esconden la parte final de la mano.
   En teléfonos de poca altura, la página se puede desplazar verticalmente. */
@media(max-width:970px){
  .game-main{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .game-screen{overflow:visible}
}
@media(max-width:680px){
  .table-shell .board-stage{
    min-height:345px;
    padding:0 4px 39px;
  }
  .table-shell .board-stage::before{flex-basis:86px}
  .table-shell .board-stage .meld-area{min-height:55px}
  .table-shell.table-expanded .board-stage,
  .table-shell.table-expanded.hand-expanded .board-stage{
    min-height:410px;
    height:clamp(410px,54dvh,525px);
    padding:5px 4px 39px;
  }
  .table-shell.table-expanded .board-stage .meld-area,
  .table-shell.table-expanded.hand-expanded .board-stage .meld-area{min-height:180px}
  .table-shell.hand-expanded .hand-scroll,
  .table-shell.table-expanded.hand-expanded .hand-scroll{
    height:332px;
    min-height:332px;
    max-height:332px;
    flex-basis:332px;
  }
  .table-shell.hand-expanded .custom-hand-row,
  .table-shell.hand-expanded .custom-hand-row.empty-row{
    height:100px;
    min-height:100px!important;
    max-height:100px;
    flex-basis:100px;
  }
}
/* En el móvil, priorizar las tres filas sin agrandar innecesariamente el tapete.
   zoom cambia el tamaño de disposición del mazo (no es solo transform),
   por lo que la zona de combinaciones sigue sin poder cubrirlo. */
@media(max-width:680px){
  .table-shell.hand-expanded:not(.table-expanded) .board-stage{
    min-height:280px;
    height:280px;
    padding-bottom:30px;
  }
  .table-shell.hand-expanded:not(.table-expanded) .board-stage::before{flex-basis:62px}
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .piles-area{zoom:.78;margin-top:3px}
  .table-shell.hand-expanded:not(.table-expanded) .board-stage .meld-area{min-height:50px}
}
/* Anular las antiguas posiciones porcentuales de la mano expandida. */
.table-shell .board-stage .meld-area,
.table-shell.hand-expanded .board-stage .meld-area,
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  height:auto!important;
}
.table-shell .board-stage .piles-area,
.table-shell.hand-expanded:not(.table-expanded) .board-stage .piles-area,
.table-shell.table-expanded .board-stage .piles-area{
  top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  transform:none!important;
}
/* Botones de desplazamiento vertical solo si existen filas fuera de la vista.
   Reutilizamos los laterales de la mano, sin ocupar espacio sobre los naipes. */
.table-shell.hand-expanded .hand-side .hand-nav:not(.hidden){
  display:flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.table-shell.hand-expanded .hand-side .hand-nav.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* v1.13 · Pestaña de mesa CENTRADA y DEBAJO de las combinaciones.
   El elemento pertenece al flujo flex; no se superpone con jugadores ni mazos. */
.table-shell .board-stage .meld-area,
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
}
.table-shell .board-stage .meld-list,
.table-shell.table-expanded .board-stage .meld-list{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  padding-top:2px;
  padding-bottom:2px;
}
.table-shell .board-stage .table-toggle,
.table-shell.table-expanded .board-stage .table-toggle,
.table-shell.table-expanded.hand-expanded .board-stage .table-toggle{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex:0 0 29px;
  width:54px;
  height:29px;
  min-height:29px;
  margin:2px auto 0;
  z-index:5;
}
.table-shell .board-stage .table-toggle.hidden{display:none!important}
.table-shell .board-stage .table-toggle svg{display:block;pointer-events:none}
/* El número de cartas del oponente sustituye a la inicial y al antiguo rótulo. */
.opponent .opp-cards{display:none!important}
.opponent .opp-avatar .opp-card-count{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-width:100%;
  height:100%;
  font-variant-numeric:tabular-nums;
  font-weight:1000;
  font-size:clamp(14px,2vw,20px);
  color:#fff2c5;
  text-shadow:0 1px 3px #061711;
}
@media(max-width:680px){
  .opponent .opp-avatar .opp-card-count{font-size:15px}
}
/* Las acciones válidas están ANTES de las cartas, nunca debajo de las tres filas.
   La mano se puede usar durante toda la partida sin tener que comprimirla. */
.your-zone #actionButtons{
  flex:0 0 auto;
  order:0;
  justify-content:center;
  align-items:center;
  position:relative;
  z-index:8;
  padding:0 2px;
  margin:0 0 3px;
}
.table-shell.hand-expanded .your-zone #actionButtons:not(.hidden){
  min-height:36px;
  flex-wrap:wrap;
}
.table-shell.hand-expanded .your-zone #actionButtons .game-btn{
  min-height:34px;
  touch-action:manipulation;
  box-shadow:0 2px 6px #0017;
}
/* Evitar que el contenido de combinaciones haga crecer el tapete y empuje los
   mazos fuera de la zona visible: el exceso se desplaza dentro de la mesa. */
.table-shell .board-stage{
  height:clamp(395px,49dvh,515px);
  min-height:395px;
  flex:0 0 auto;
}
.table-shell .board-stage .meld-area,
.table-shell.table-expanded .board-stage .meld-area,
.table-shell.table-expanded.hand-expanded .board-stage .meld-area{
  min-height:0!important;
  flex:1 1 0%;
  overflow:hidden;
}
.table-shell .board-stage .meld-list,
.table-shell.table-expanded .board-stage .meld-list{
  min-height:0!important;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media(max-width:680px){
  .table-shell .board-stage{height:395px;min-height:395px}
  .table-shell.hand-expanded:not(.table-expanded) .board-stage{height:280px;min-height:280px}
  .table-shell.table-expanded .board-stage,
  .table-shell.table-expanded.hand-expanded .board-stage{height:clamp(410px,54dvh,525px);min-height:410px}
}
/* La carta seleccionada no debe elevarse por encima de las cartas siguientes:
   hacerlo impedía tocarlas en una fila solapada (y se desmarcaba la anterior). */
.table-shell.hand-expanded .custom-row-cards .playing-card,
.table-shell.hand-expanded .custom-row-cards .playing-card.selected,
.table-shell.hand-expanded .custom-row-cards .playing-card:hover{
  position:relative;
  z-index:1!important;
}


/* v1.14: pestañas de combinaciones junto a la flecha de la mano.
   No ocupan una fila en el interior de la mano; tres filas siguen visibles
   incluso cuando aparece una combinación válida para preparar. */
.your-zone > .hand-top-tabs {
  position:absolute;
  top:-29px;
  left:50%;
  transform:translateX(-50%);
  z-index:15;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  max-width:calc(100% - 10px);
  white-space:nowrap;
}
.your-zone > .hand-top-tabs > .hand-toggle {
  position:relative;
  inset:auto;
  top:auto;
  left:auto;
  transform:none;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:29px;
  padding:1px 8px;
  border:1px solid #e8c980ad;
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:#173f37;
  color:#f3d99c;
  box-shadow:0 -3px 12px #0005;
  cursor:pointer;
  z-index:1;
}
.your-zone > .hand-top-tabs > .hand-toggle svg{
  display:block;
  width:42px;
  height:25px;
  overflow:visible;
}
.your-zone > .hand-top-tabs > .hand-toggle polyline{
  fill:none;
  stroke:currentColor;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.your-zone > .hand-top-tabs > .hand-toggle:hover,
.your-zone > .hand-top-tabs > .hand-toggle:focus-visible {background:#2b6852;outline-color:#ffe4a5;}
.your-zone .hand-plan-actions {display:flex;gap:5px;align-items:end;}
.your-zone .hand-plan-actions.hidden {display:none!important;}
.your-zone .hand-plan-tab {
  height:29px;
  min-height:29px;
  padding:3px clamp(6px,1.5vw,13px);
  background:#244c3e;
  color:#ffe7b0;
  border:1px solid #e8c980ad;
  border-bottom:0;
  border-radius:10px 10px 0 0;
  font-size:clamp(10px,2.6vw,12px);
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:0 -3px 12px #0005;
}
.your-zone .hand-plan-tab:hover,
.your-zone .hand-plan-tab:focus-visible {background:#3b7357;outline-color:#ffe4a5;}
/* Solo las acciones que no son "Formar ..." viven en la barra interior;
   cuando no hay ninguna, el bloque entero desaparece sin reservar alto. */
.your-zone #actionButtons.hidden {display:none!important;min-height:0!important;}
@media(max-width:390px){
  .your-zone > .hand-top-tabs {gap:3px;}
  .your-zone > .hand-top-tabs > .hand-toggle {flex-basis:58px;width:58px;}
  .your-zone .hand-plan-actions {gap:3px;}
  .your-zone .hand-plan-tab{padding-inline:7px;font-size:10px;}
}

/* v1.16: controles en la cabecera, no desplazan las cartas de la mano. */
.your-zone > .hand-top-tabs {width:100%;max-width:100%;justify-content:center;flex-wrap:nowrap;}
.your-zone .hand-plan-actions {min-width:0;max-width:calc(100% - 70px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#d6b36e transparent;}
.your-zone .hand-plan-tab {flex:0 0 auto;white-space:nowrap;min-height:29px;touch-action:manipulation;}
.your-zone .hand-plan-tab.plan-drop-target {border-style:dashed;cursor:default;}
.your-zone .hand-plan-tab.primary {background:#dabb72;color:#183c2f;}
.your-zone .hand-plan-tab.action-green {background:#2b6d51;}
#actionButtons, #planningRow {display:none!important;}
/* Siete fichas pulsables de rondas, también legibles en móvil. */
.round-pills {display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:8px 0 15px;}
.round-pill {width:52px;height:52px;border:2px solid #b4c9b5;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;letter-spacing:.02em;color:#607b6c;background:#e8eee7;cursor:pointer;transition:background .12s,transform .12s;touch-action:manipulation;}
.round-pill.chosen {color:#183e31;background:#efd497;border-color:#9d783b;box-shadow:0 2px 7px #876d2950;}
.round-pill:focus-visible {outline:3px solid #3d8369;outline-offset:2px;}
.round-pills.readonly .round-pill {width:40px;height:40px;font-size:11px;cursor:default;}
.lobby-round-preview {background:#e8efe4;padding:12px 6px;border-radius:11px;margin-bottom:14px;text-align:center;color:#2d5945;font-size:11px;letter-spacing:.04em;}
.lobby-round-preview .round-pills {margin-bottom:2px;}
@media (max-width:400px){.round-pill {width:45px;height:45px;}.round-pills{gap:7px;}}


/* v1.17 · Mensajes breves sobre los avatares, sin modificar el tamaño del tapete. */
.chat-bubble-layer{
  position:fixed; inset:0; z-index:38; pointer-events:none;
  overflow:visible; isolation:isolate;
}
.avatar-chat-bubble{
  position:absolute; box-sizing:border-box;
  width:max-content; max-width:min(215px,calc(100vw - 20px));
  padding:9px 12px; border:1px solid #e1c278;
  border-radius:13px; background:#fff5d9; color:#244236;
  box-shadow:0 5px 16px #001c1a9c;
  font-size:clamp(11px,2.4vw,13px); line-height:1.3; font-weight:700;
  white-space:normal; overflow-wrap:anywhere;
  display:block;
  animation:chatBubbleEnter .18s ease-out both;
}
.avatar-chat-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;}
.avatar-chat-bubble::after{content:'';position:absolute;left:calc(var(--bubble-tail-x,50%) - 6px);bottom:-6px;width:11px;height:11px;transform:rotate(45deg);border-right:1px solid #e1c278;border-bottom:1px solid #e1c278;background:#fff5d9}
.avatar-chat-bubble.below-avatar::after{bottom:auto;top:-6px;transform:rotate(225deg)}
@keyframes chatBubbleEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.avatar-chat-bubble{animation:none}}

/* v1.18 · Portada limpia: protagonismo para Continental y controles compactos. */
.lobby-screen{grid-template-columns:minmax(0,1fr) minmax(340px,1fr);align-items:center;overflow:visible}
.lobby-screen .welcome-panel{min-height:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:20px;padding:24px 18px 24px;text-align:center}
.welcome-brandmark{display:flex;align-items:center;justify-content:center;position:relative;width:108px;height:96px}
.welcome-brandmark span{display:grid;place-items:center;position:absolute;width:65px;height:85px;
  background:#144939;border:3px solid #e4c37e;border-radius:10px;color:#f9dc9e;
  transform:rotate(-16deg) translateX(-15px);font-size:48px;box-shadow:0 10px 20px #001b}
.welcome-brandmark span+span{background:#f1e9d7;color:#bc5360;border-color:#f4e9cf;
  transform:rotate(16deg) translateX(15px)}
.welcome-wordmark h1{font:bold clamp(37px,5vw,72px)/1.04 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.12em;margin:0;color:#fff6db;word-break:normal}
.welcome-wordmark p{margin:12px 0 0;font-size:clamp(11px,1.4vw,15px);letter-spacing:.3em;
  font-weight:800;color:#e8cb91;line-height:1.3}
.lobby-screen .welcome-control{padding:15px;align-items:center}
.lobby-screen .welcome-card{width:min(100%,540px);padding:clamp(13px,2vh,22px);border-radius:14px}
.lobby-screen .welcome-card h2{font-size:24px;margin:0 0 8px}
.lobby-screen .segmented{margin-bottom:9px;padding:3px}
.lobby-screen .segmented button{padding:7px 6px;font-size:12px}
.lobby-screen .form-label{margin:7px 0 3px;font-size:10px}
.lobby-screen .form-input{height:35px;padding:0 10px}
.lobby-screen .turn-setting-row{gap:9px}
.lobby-screen .number-stepper{height:34px;max-width:174px}
.lobby-screen .number-stepper .form-input{height:32px;max-width:72px;width:72px;font-size:15px}
.lobby-screen .number-stepper button{min-width:48px;width:48px;height:34px;font-size:22px}
.lobby-screen .turn-unit{font-size:11px}
.lobby-screen .round-pills{margin:4px 0 2px;gap:5px}
.lobby-screen .form-help{font-size:10px;margin:3px 0 4px;line-height:1.3}
.lobby-screen .primary-action{min-height:37px;padding:8px 12px;margin-top:8px;font-size:13px}
.lobby-screen .welcome-foot{margin-top:9px;font-size:10px}
/* El resalte del turno propio sigue la misma estética del avatar rival. */
.your-zone.turn-timing.is-active{border:3px solid #ffe4a2!important;
  box-shadow:0 0 0 4px #f6cd72a8,0 0 23px #ffca55a1!important;
  animation:continentalOwnTurn 1.65s ease-in-out infinite alternate}
@keyframes continentalOwnTurn{from{box-shadow:0 0 0 3px #f5d68d77,0 0 12px #ffcf6b65}
  to{box-shadow:0 0 0 5px #ffe8a9dc,0 0 31px #ffd875ce}}
.game-paused .your-zone.turn-timing.is-active{animation:none;border-color:#c3b79b!important;
  box-shadow:0 0 0 2px #d6c28b55!important}
@media(prefers-reduced-motion:reduce){.your-zone.turn-timing.is-active{animation:none}}
@media(max-width:970px){
  .lobby-screen{display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100dvh - 76px)}
  .lobby-screen .welcome-panel{padding:12px 8px 3px;gap:8px;flex-direction:row;flex:0 0 auto}
  .welcome-brandmark{width:60px;height:57px;flex:0 0 60px}
  .welcome-brandmark span{height:49px;width:39px;font-size:27px;border-width:2px;border-radius:6px}
  .welcome-brandmark span+span{height:49px;width:39px}
  .welcome-wordmark h1{font-size:clamp(27px,6vw,41px);letter-spacing:.07em;text-align:left}
  .welcome-wordmark p{font-size:9px;margin:3px 0 0;text-align:left;letter-spacing:.22em}
  .lobby-screen .welcome-control{width:100%;padding:6px 12px 12px;display:block;flex:1;min-height:0}
  .lobby-screen .welcome-card{max-width:540px;margin:0 auto;padding:12px 15px;border-radius:13px}
  .lobby-screen .welcome-card h2{font-size:21px;margin:0 0 6px}
  .lobby-screen .form-label{margin:6px 0 3px;font-size:9px}
  .lobby-screen .round-pills{gap:4px;flex-wrap:wrap}
  .lobby-screen .number-stepper{height:33px}
  .lobby-screen .number-stepper button{height:33px}
}
@media(max-width:390px){
  .lobby-screen .welcome-panel{gap:6px}
  .welcome-wordmark h1{font-size:27px}
  .lobby-screen .welcome-control{padding:4px 7px 10px}
  .lobby-screen .welcome-card{padding:10px 11px}
}


/* v1.18.1 — Una sola identidad gráfica, en grande. La barra del juego se conserva. */
body:has(#lobbyScreen:not(.hidden)) .topbar{
  height:46px;min-height:46px;justify-content:flex-end;
  background:#0b2022;border-bottom:1px solid #ffffff12;
}
body:has(#lobbyScreen:not(.hidden)) .topbar .brand{display:none}
body:has(#lobbyScreen:not(.hidden)) .topbar .topbar-center{margin-right:auto}
body:has(#lobbyScreen:not(.hidden)) .lobby-screen{min-height:calc(100dvh - 46px)}
@media(max-width:970px){
  .lobby-screen .welcome-wordmark h1{font-size:clamp(30px,7.2vw,43px);letter-spacing:.025em}
  .lobby-screen .welcome-panel{padding-top:10px;padding-bottom:5px}
  body:has(#lobbyScreen:not(.hidden)) .topbar{padding-right:12px}
}
@media(max-width:390px){
  .lobby-screen .welcome-wordmark h1{font-size:clamp(29px,8.1vw,33px)}
  .lobby-screen .welcome-brandmark{flex-basis:57px;width:57px}
}

/* Sala de espera: código, jugadores y configuración sin bloques vacíos. */
.lobby-screen .waiting-card{padding:clamp(12px,2vw,20px);}
.waiting-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.waiting-connected{font-size:11px;font-weight:900;color:#236047;background:#e6ecdf;padding:5px 9px;border-radius:99px;white-space:nowrap}
.waiting-code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eaf0e6;border:1px solid #cfdbc9;border-radius:12px;padding:9px 12px}
.waiting-code-label{display:block;font-size:9px;font-weight:900;color:#64806a;letter-spacing:.11em}
.waiting-code-row .room-code{margin:2px 0 0;text-align:left;font-size:clamp(27px,4.1vw,38px);letter-spacing:.11em;line-height:1.1;font-variant-numeric:tabular-nums}
.waiting-copy{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 10px;background:#17503e;border:0;border-radius:8px;color:#fff7e8;font-size:11px;font-weight:900;touch-action:manipulation}
.waiting-copy:hover,.waiting-copy:focus-visible{background:#267453}
.lobby-screen .waiting-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0 5px}
.lobby-screen .waiting-person{min-width:0;display:flex;align-items:center;gap:7px;padding:6px 8px;min-height:41px;border-radius:8px}
.lobby-screen .waiting-person .mini-avatar{width:26px;height:26px;min-width:26px;font-size:11px}
.lobby-screen .waiting-person-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}
.lobby-screen .waiting-person small{font-size:9px;font-weight:800;color:#718477;white-space:nowrap}
.waiting-open-seats{font-size:10px;color:#66796a;text-align:center;margin:5px 0 8px}
.lobby-screen .waiting-card .lobby-turn-info{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 18px;padding:7px 10px;margin:9px 0 6px;font-size:11px}
.lobby-screen .waiting-card .lobby-round-preview{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#e8efe4;margin:0 0 9px;padding:6px 8px;text-align:left;font-size:10px;letter-spacing:0;font-weight:900}
.lobby-screen .waiting-card .round-pills{display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;gap:3px}
.lobby-screen .waiting-card .round-pills.readonly .round-pill{width:clamp(24px,2.5vw,32px);height:clamp(24px,2.5vw,32px);font-size:9px;border-width:1px}
.lobby-screen .waiting-card .primary-action{margin-top:8px}
.lobby-screen .waiting-card .welcome-foot{margin-top:7px}
.lobby-screen .waiting-card .welcome-foot .sub-action{padding:5px 8px;font-size:10px}
.waiting-host-message{padding:9px 10px;text-align:center;font-size:12px;font-weight:800;color:#285d42;background:#e8eee5;border-radius:8px}
@media(max-width:680px){
  .lobby-screen .waiting-card{padding:10px 12px}
  .lobby-screen .waiting-card .waiting-code-row{padding:8px 10px}
  .lobby-screen .waiting-card .room-code{font-size:clamp(25px,7.5vw,33px)}
  .lobby-screen .waiting-card .waiting-person{padding:5px 6px;min-height:37px}
  .lobby-screen .waiting-card .waiting-person small{font-size:8px}
  .lobby-screen .waiting-card .lobby-round-preview{gap:5px}
  .lobby-screen .waiting-card .round-pills.readonly .round-pill{width:26px;height:26px;font-size:8px}
}
@media(max-width:350px){
  .waiting-copy span{display:none}
  .lobby-screen .waiting-card .round-pills.readonly .round-pill{width:24px;height:24px}
  .lobby-screen .waiting-person small{display:none}
}


/* v1.18.2 — Imagen de marca elegida: portada, espera y juego. */
.brand .brand-emblem{
  display:block;flex:0 0 auto;width:72px;height:50px;object-fit:contain;
  filter:drop-shadow(0 2px 4px #0005);
}
.brand{gap:5px}
.brand strong{letter-spacing:.12em}
.lobby-screen .welcome-panel{
  background:transparent;overflow:hidden;padding:8px 14px;
}
.lobby-screen .continental-hero-logo{
  display:block;width:min(100%,690px);height:auto;max-height:clamp(215px,38dvh,395px);
  object-fit:contain;margin:0 auto;
  -webkit-mask-image:radial-gradient(ellipse 83% 77% at center,#000 74%,transparent 100%);
  mask-image:radial-gradient(ellipse 83% 77% at center,#000 74%,transparent 100%);
}
@media(max-width:970px){
  .lobby-screen .welcome-panel{padding:4px 9px 0;flex-direction:column;align-items:center;justify-content:center;}
  .lobby-screen .continental-hero-logo{width:min(100%,440px);height:auto;max-height:clamp(151px,21dvh,215px)}
}
@media(max-width:680px){
  .brand .brand-emblem{width:52px;height:42px}
  .brand{gap:3px}
  .brand strong{font-size:11px;letter-spacing:.08em}
  .brand small{font-size:6px;letter-spacing:.17em}
  .lobby-screen .welcome-panel{padding:2px 6px 0;}
  .lobby-screen .continental-hero-logo{width:min(100%,365px);max-height:clamp(142px,20dvh,175px)}
}
@media(max-width:360px){
  .lobby-screen .continental-hero-logo{max-height:147px}
  .lobby-screen .welcome-panel{padding:0 5px}
}

/* Continental 1.18.5 — traslado entre combinaciones con un toque y destino visible. */
.meld-group.transfer-source{border-color:#f8d98d!important;box-shadow:0 0 0 2px #f1d08077!important}
.meld-group.transfer-ready{border-color:#8ff2b3!important;box-shadow:0 0 0 2px #6dde9e9c,0 0 14px #65c88a55!important;cursor:pointer}
.meld-group.transfer-ready .meld-caption{color:#d5ffdf}
.meld-card.transfer-picked{outline:3px solid #f6d789;outline-offset:2px;border-radius:5px;z-index:8}