*{box-sizing:border-box} :root{font-family:Tahoma,Arial,sans-serif;font-size:16px;color:#fff8eb;background:#15100b;color-scheme:dark}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0}button:focus-visible{outline:3px solid #ffc965;outline-offset:4px}button:disabled{cursor:default}button:not(:disabled):hover{filter:brightness(1.18)}.game-shell{position:relative;isolation:isolate;width:100%;height:100svh;min-height:680px;max-height:1200px;overflow:hidden;margin:auto}.scene{position:absolute;inset:0;background:#174829 url('assets/table-room.png') center/cover no-repeat;z-index:-3}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#090b0e3b,transparent 25%,transparent 77%,#04080bb3),linear-gradient(0deg,#15090180,transparent 20%,transparent 75%,#05070940);z-index:-2}.glass{background:linear-gradient(125deg,#101719f2,#090d10eb);border:1px solid #9ba8ae9e;border-radius:17px;box-shadow:0 7px 22px #0005,inset 0 1px 1px #ffffff13;backdrop-filter:blur(9px)}.exit{position:absolute;left:1.5%;top:2.1%;padding:12px 22px;display:flex;direction:ltr;align-items:center;gap:18px;font-size:20px}.exit span{font-size:29px;line-height:1}.score{position:absolute;left:1.5%;top:10%;width:19.5%;padding:15px 17px 10px;z-index:3}.score-teams{display:flex;direction:ltr;text-align:center;margin:0 0 8px}.score-teams>div{width:50%;font-size:19px}.score-teams>div+div{border-left:1px solid #a4a8ab7f}.score-teams b{display:block;font-size:39px;font-weight:bold;line-height:1.3;color:#fff}.score-caption{border-top:1px solid #ffffff15;display:flex;justify-content:center;gap:9px;padding:7px 0 2px;font-size:14px}.score-caption span{color:#f8cf8a}.mode-note{font-size:12px;color:#bbbeb8;text-align:center;margin:5px 0 0}.turn{position:absolute;top:1.8%;left:50%;transform:translateX(-50%);width:310px;min-height:87px;display:flex;align-items:center;justify-content:center;padding:12px 20px;gap:12px;z-index:4;border-radius:27px}.turn-icon{font-size:40px;line-height:1}.turn strong{font-size:23px;display:block;margin-bottom:7px}.turn div>span{font-size:16px;color:#d8d9d4;display:block;text-align:center}.sidebar{position:absolute;right:1.5%;top:1.7%;width:14.7%;z-index:6}.brand{text-align:center;margin-bottom:24px}.brand .crown{display:block;color:#efb344;font-size:39px;line-height:.9;transform:rotate(9deg)}.brand h1{font-size:clamp(45px,4.8vw,78px);font-weight:900;margin:0;line-height:1.2;color:#fff0d7;letter-spacing:-3px;text-shadow:0 4px 8px #0008}.brand p{font-size:18px;font-weight:bold;margin:10px 0 0}.side-menu{display:flex;flex-direction:column;gap:10px}.side-menu>button{padding:14px;min-height:60px;font-size:18px;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap}.icon{font-size:30px;line-height:1;width:29px;text-align:center;color:#e8e8e9}.question{background:#e1e2e7;color:#202329;border-radius:50%;font-size:23px;width:29px;height:29px;display:grid;place-items:center;font-weight:bold}.side-menu .sound{font-size:17px}.switch{width:37px;height:23px;background:#13cd78;border-radius:20px;position:relative;flex-shrink:0;box-shadow:inset 0 1px 3px #0003}.switch:after{content:'';position:absolute;top:2px;right:2px;background:#088752;width:19px;height:19px;border-radius:50%;transition:transform .2s}#sound[aria-checked=false] .switch{background:#5e6467}#sound[aria-checked=false] .switch:after{background:#afb1ac;transform:translateX(-14px)}.table{position:absolute;inset:0;pointer-events:none}.seat{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:3;min-width:126px;transform:translateX(-50%);pointer-events:auto}.avatar{width:94px;height:94px;background-image:url('assets/portraits.png');background-size:200% 200%;border:3px solid #e7e1d3;border-radius:50%;position:relative;box-shadow:0 4px 8px #000a;padding:0}.portrait-a{background-position:0 0}.portrait-b{background-position:100% 0}.portrait-c{background-position:0 100%}.portrait-d{background-position:100% 100%}.seat.active .avatar{border-color:#ffcf66;box-shadow:0 0 0 4px #e8b24765,0 0 20px #ffc14270}.seat strong{font-size:17px;background:linear-gradient(#101215e8,#040606f2);border:1px solid #acada28f;border-radius:8px;min-width:134px;text-align:center;padding:7px 13px;margin-top:-7px;z-index:2;box-shadow:0 4px 9px #0005;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}.seat .count{font-size:15px;padding:4px 12px;background:#09100ce8;border-radius:0 0 10px 10px;position:relative;z-index:2;box-shadow:0 7px 7px #0003;white-space:nowrap}.player-role{font-size:12px;color:#efe9d6;background:#101914bd;padding:3px 9px;z-index:2;white-space:nowrap;border-radius:0 0 7px 7px}.north{left:49.7%;top:13.8%}.west{left:21.5%;top:40%}.east{left:77.8%;top:40%}.south{left:49.7%;bottom:22%}.player-crown{position:absolute;font-size:42px;color:#ffd270;top:-29px;z-index:3;line-height:1;text-shadow:0 3px 3px #000a}.bot-badge,.flag-badge{position:absolute;bottom:-1px;right:-8px;border:2px solid #102018;background:#1a4d2e;color:#e5f6cf;min-width:29px;height:29px;border-radius:50%;font-size:10px;display:grid;place-items:center;font-weight:bold;z-index:3}.flag-badge{font-size:20px;min-width:32px;height:32px;background:#101714;line-height:1}.flag-badge:empty{display:none}.back-stack{display:flex;direction:ltr;margin-top:-7px;height:42px}.back-stack i{display:block;width:43px;height:57px;border-radius:5px;background:repeating-linear-gradient(45deg,#1f355a 0px,#1f355a 2px,#617093 2px,#617093 3px);border:3px solid #dfdfd6;outline:1px solid #111c2a;box-shadow:inset 0 0 0 2px #1c315a,0 3px 4px #0008;margin-left:-13px;transform:rotate(90deg)}.west .back-stack{position:absolute;top:39px;left:105px;transform:rotate(90deg);z-index:-1}.east .back-stack{position:absolute;top:39px;right:105px;transform:rotate(-90deg);z-index:-1}.north .back-stack{margin-top:0}.table-label{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#dfd0a454;transition:opacity .3s}.table-label>span{font-size:50px;line-height:1}.table-label p{font-size:18px;margin:8px 0}.table-label small{font-size:14px}.table-label.hidden{opacity:0}#trick{position:absolute;inset:0;pointer-events:none}.card{background:linear-gradient(115deg,#fffef7,#f1e5d6);border:1px solid #dbd0c0;color:#111415;border-radius:8px;box-shadow:0 3px 7px #0007;position:relative;display:block;direction:ltr;font-family:Georgia,'Times New Roman',serif;padding:0;flex-shrink:0;text-align:left}.card.red{color:#be2718}.corner{position:absolute;left:7px;top:7px;display:flex;flex-direction:column;align-items:center;line-height:.88;font-size:26px;font-weight:bold}.corner .mini-suit{font-size:23px;margin-top:5px}.corner-bottom{left:auto;top:auto;right:7px;bottom:7px;transform:rotate(180deg)}.pip{font-size:54px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1}.royal{font-size:76px;color:#896321;text-shadow:1px 0 #2b3441,-1px 0 #c23320}.card.red .royal{color:#bc7e28}.card .watermark{position:absolute;left:50%;top:77%;transform:translateX(-50%);font-size:21px}#trick .card{position:absolute;left:49.7%;top:45%;width:82px;height:116px;animation:land .2s ease-out}#trick .p0{transform:translate(-50%,38%) rotate(3deg)}#trick .p1{transform:translate(-149%,-40%) rotate(3deg)}#trick .p2{transform:translate(-50%,-114%) rotate(-2deg)}#trick .p3{transform:translate(52%,-40%) rotate(-3deg)}#trick .corner{font-size:22px}#trick .mini-suit{font-size:19px}#trick .pip{font-size:49px}.hand{position:absolute;left:49.7%;bottom:5.8%;transform:translateX(-50%);width:58%;display:flex;justify-content:center;direction:ltr;align-items:flex-end;padding:25px 6px 8px;z-index:5;height:180px;--card-width:clamp(68px,7vw,114px)}.hand .card{width:var(--card-width);height:calc(var(--card-width)*1.46);margin-left:calc((100% - 13*var(--card-width))/12);transform:translateY(var(--rise)) rotate(var(--angle));transform-origin:50% 100%;transition:transform .17s,filter .17s,border-color .17s;z-index:var(--index);outline-offset:1px}.hand .card:first-child{margin-left:0}.hand .card:not(:disabled):hover,.hand .card.selected{transform:translateY(calc(var(--rise) - 25px)) rotate(var(--angle));border-color:#ffe285;box-shadow:0 0 0 2px #efc864,0 9px 20px #0007;filter:none}.hand .card:disabled{filter:brightness(.78)}.hand .card.follow-disabled{filter:brightness(.57)}.hand .card.selected{z-index:25}.hand .pip{font-size:clamp(34px,4.4vw,66px)}.hand .royal{font-size:clamp(45px,5.1vw,85px)}.reaction-panel{position:absolute;left:1.5%;bottom:4.5%;width:22%;padding:13px;z-index:6;border-radius:22px}#reaction-toggle{display:flex;align-items:center;justify-content:space-between;direction:ltr;width:100%;background:none;padding:1px 3px 14px;font-size:19px;font-weight:bold}#reaction-toggle .chevron{font-size:32px;line-height:1}.reactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;direction:ltr}.reactions button{min-height:52px;background:linear-gradient(140deg,#20364b,#112236);border:1px solid #54aaf4;border-radius:15px;font-size:20px;display:flex;align-items:center;justify-content:space-evenly;gap:5px;padding:8px}.reactions button span{font-size:28px}.reactions[hidden]{display:none}.reaction-panel.collapsed{width:205px}#reaction-toggle[aria-expanded=false]{padding-bottom:0}.play-controls{position:absolute;right:1.5%;bottom:4.5%;width:14.7%;display:flex;flex-direction:column;gap:10px;z-index:6}.play-controls>button{min-height:54px;display:flex;direction:ltr;align-items:center;justify-content:center;gap:13px;font-size:19px}.play-controls>button span:first-child{font-size:32px;line-height:1}.blue{background:linear-gradient(135deg,#152330f5,#0d1b2aee);border-color:#4eb5fc;box-shadow:inset 0 0 14px #12315380,0 4px 10px #0004}.play-controls .blue:disabled{color:#9ca8b2;border-color:#7d939f}.play-controls #sort{font-size:17px;color:#6fc4ff}.play-controls .play-button{background:linear-gradient(140deg,#b63d26,#700e09);border:1px solid #ff8d72;box-shadow:0 5px 16px #0005,inset 0 1px 1px #ffffff36;border-radius:16px;min-height:78px;color:#ffe9ce;font-size:24px}.play-controls .play-button:disabled{background:linear-gradient(140deg,#65291f,#35100b);color:#cdbcae;border-color:#ac6b58}.table-footer{position:absolute;bottom:1.3%;left:50%;transform:translateX(-50%);font-size:12px;color:#e4d1bda8;white-space:nowrap}.table-footer span{padding:0 8px}.speech{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);background:linear-gradient(#fff1ae,#f5c354);color:#35230e;box-shadow:0 5px 12px #0007;padding:11px 19px;border-radius:23px;font-size:21px;font-weight:bold;white-space:nowrap;display:none;z-index:10}.speech:after{content:'';position:absolute;bottom:-10px;left:55%;border-width:12px 0 0 14px;border-style:solid;border-color:#efc059 transparent transparent transparent}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0b191bf5;color:#fff7e9;border:1px solid #d4b97a70;border-radius:14px;padding:14px 24px;z-index:20;display:none;max-width:90%;text-align:center;font-size:16px}dialog{border:1px solid #b5a37e77;border-radius:24px;padding:30px;max-width:460px;width:calc(100% - 32px);color:#fff3dc;background:linear-gradient(140deg,#18211f,#0d1216);box-shadow:0 20px 90px #000a}dialog::backdrop{background:#05080bc4;backdrop-filter:blur(6px)}dialog h2{font-size:26px;margin:14px 0}dialog p{line-height:1.9;color:#c1c9c3}dialog .note{font-size:14px;color:#adb8ad}dialog label{display:block;margin:18px 0 9px;font-size:16px}dialog input,dialog select{width:100%;padding:13px;border:1px solid #82908370;border-radius:11px;background:#0a1114;color:#fff;font:inherit}dialog input:focus,dialog select:focus{outline:2px solid #eec26c}.close{float:left;padding:0 8px;font-size:29px;background:none}.primary{background:linear-gradient(#e2b866,#c19143);color:#241c0e;width:100%;border-radius:12px;padding:14px;margin-top:20px;font-weight:bold}.secondary{background:#ffffff0b;border:1px solid #a7b2b64d;border-radius:12px;padding:13px;width:100%;margin-top:10px}.game-choice{display:flex;gap:8px;background:#0003;padding:6px;border-radius:12px;margin-top:20px}.game-choice button{flex:1;background:none;padding:10px;border-radius:8px}.game-choice .selected{background:#b78a3b;color:#100f0b}.avatar-choices{display:flex;gap:13px;margin-top:12px}.avatar-choices .avatar{width:55px;height:55px;border-width:2px}.avatar-choices .chosen{border-color:#ffd478;box-shadow:0 0 0 3px #ffc55959}.bot-list{display:flex;justify-content:space-between;gap:10px;font-size:14px;text-align:center;margin:20px 0}.bot-list span{background:#ffffff08;border-radius:12px;padding:14px 8px;flex:1}.bot-list small{display:block;color:#a9c7ac;margin-top:8px}.left-room .table,.left-room .hand,.left-room .turn{filter:blur(8px)}@keyframes land{from{opacity:.1;scale:.85}to{opacity:1;scale:1}}
@media(min-width:1600px){.game-shell{max-width:1800px}.avatar{width:112px;height:112px}.seat strong{font-size:20px}.turn{width:350px}.turn strong{font-size:26px}.hand{bottom:6.8%}.side-menu>button{min-height:70px;font-size:21px}.reaction-panel{padding:16px}.reactions button{min-height:64px}.play-controls>button{min-height:66px}}
@media(max-width:1100px) and (min-width:901px){.game-shell{min-height:650px}.side-menu>button{font-size:14px;padding:12px 8px}.side-menu .sound{font-size:14px}.icon{font-size:24px;width:24px}.question{width:25px;height:25px;font-size:20px}.brand p{font-size:14px}.brand{margin-bottom:20px}.side-menu{gap:8px}.turn{width:270px;min-height:77px}.turn strong{font-size:20px}.avatar{width:76px;height:76px}.seat strong{font-size:15px;min-width:106px;padding:6px 8px}.seat{min-width:100px}.seat .count{font-size:14px}.north{top:16%}.west,.east{top:41%}.south{bottom:22%}.score-teams b{font-size:31px}.score-teams>div{font-size:16px}.score{padding:12px 8px}.score-caption{font-size:12px}.reaction-panel{padding:10px;width:21.5%}.reactions{gap:6px}.reactions button{font-size:16px;padding:7px;min-height:47px}.reactions button span{font-size:23px}#reaction-toggle{font-size:16px}.play-controls>button{font-size:16px;gap:6px}.play-controls #sort{font-size:14px}.play-controls .play-button{font-size:20px;min-height:68px}.play-controls>button span:first-child{font-size:26px}.hand{width:55%;--card-width:clamp(64px,7.5vw,84px);bottom:5.5%}.corner{font-size:24px;left:5px}.corner .mini-suit{font-size:21px}.corner-bottom{left:auto;right:5px}.west .back-stack{left:80px}.east .back-stack{right:80px}#trick .card{width:66px;height:94px}.back-stack i{width:33px;height:48px}.switch{width:32px;height:22px}.switch:after{width:18px;height:18px}}
@media(max-width:900px){.game-shell{min-height:790px;height:100svh;max-height:none}.scene{background-size:auto 100%;background-position:50% center}.shade{background:linear-gradient(#020809b3,transparent 27%,transparent 68%,#06090dc9)}.sidebar{top:12px;right:12px;width:calc(100% - 24px);display:flex;align-items:flex-start;justify-content:space-between}.brand{margin:0;width:94px}.brand .crown{font-size:24px}.brand h1{font-size:35px;letter-spacing:-2px}.brand p{font-size:12px;margin:3px 0 0}.side-menu{display:grid;grid-template-columns:repeat(3,38px);gap:5px;direction:rtl;max-width:145px;margin-right:auto;margin-left:65px;padding-top:1px}.side-menu>button{width:38px;min-height:36px;padding:7px;font-size:0!important;border-radius:10px;justify-content:center}.side-menu .icon{font-size:22px;width:22px}.side-menu .question{width:21px;height:21px;font-size:17px}.side-menu .switch{display:none}.side-menu #sound[aria-checked=false]{opacity:.5}.side-menu #bots{display:none}.side-menu #help{grid-column:3;grid-row:1}.side-menu #sound{grid-column:2;grid-row:2}.exit{top:13px;left:10px;padding:7px 10px;gap:0;font-size:0;z-index:7;border-radius:10px;min-height:36px}.exit span{font-size:22px}.score{left:10px;top:100px;width:106px;padding:10px 5px;border-radius:13px}.score-teams>div{font-size:14px}.score-teams b{font-size:27px}.score-caption{display:block;text-align:center;font-size:12px;padding:6px 0 0}.score-caption span{display:block;margin-top:3px}.mode-note{font-size:12px;margin-top:5px}.turn{top:103px;left:65%;width:190px;min-height:72px;padding:10px;border-radius:18px;gap:7px}.turn strong{font-size:17px;margin-bottom:7px}.turn div>span{font-size:14px}.turn-icon{font-size:26px}.seat{min-width:86px}.avatar{width:68px;height:68px;border-width:2px}.seat strong{font-size:14px;min-width:89px;padding:6px;max-width:115px}.seat .count{font-size:12px;padding:4px 8px}.bot-badge{min-width:23px;height:23px;font-size:10px;right:-5px}.flag-badge{font-size:18px;height:25px;min-width:25px;right:-5px}.player-role{font-size:12px;padding:3px 6px}.north{top:25%;left:50%}.player-crown{font-size:32px;top:-23px}.west{top:43%;left:13%}.east{top:43%;left:87%}.south{left:50%;bottom:27%}.back-stack{display:none}.table-label{top:48%;left:50%}.table-label>span{font-size:40px}.table-label p{font-size:14px}.table-label small{font-size:12px}#trick .card{width:54px;height:76px;top:47%;left:50%;border-radius:5px}#trick .corner{font-size:17px;left:4px;top:4px}#trick .mini-suit{font-size:15px;margin-top:3px}#trick .corner-bottom{left:auto;top:auto;right:4px;bottom:4px}#trick .pip{font-size:32px}#trick .royal{font-size:44px}.card .watermark{display:none}.hand{left:50%;bottom:14.5%;width:97%;height:120px;--card-width:53px;padding:10px 5px}.hand .card{border-radius:5px;height:92px}.corner{font-size:19px;left:4px;top:5px}.corner .mini-suit{font-size:16px;margin-top:4px}.corner-bottom{left:auto;top:auto;right:4px;bottom:5px}.hand .pip{font-size:30px}.hand .royal{font-size:39px}.hand .card:not(:disabled):hover,.hand .card.selected{transform:translateY(calc(var(--rise) - 18px)) rotate(var(--angle))}.reaction-panel{left:10px;bottom:1.6%;width:calc(53% - 14px);border-radius:14px;padding:8px;z-index:7}#reaction-toggle{font-size:14px;padding-bottom:7px}#reaction-toggle .chevron{font-size:21px}.reactions{grid-template-columns:repeat(3,1fr);gap:4px}.reactions button{font-size:12px;min-height:29px;flex-direction:column;padding:4px 2px;gap:2px;border-radius:8px}.reactions button span{font-size:17px}.play-controls{right:10px;bottom:1.6%;width:calc(47% - 15px);display:grid;grid-template-columns:1fr 1fr;gap:6px}.play-controls>button{font-size:12px;gap:4px;min-height:33px;border-radius:10px;padding:7px 4px}.play-controls>button span:first-child{font-size:20px}.play-controls #sort{font-size:12px}.play-controls .play-button{grid-column:1/-1;min-height:56px;font-size:20px;border-radius:12px}.table-footer{display:none}.reaction-panel.collapsed{width:calc(53% - 14px)}.speech{font-size:17px;padding:9px 14px;bottom:calc(100% + 10px)}#toast{font-size:14px;bottom:130px;padding:12px 16px}}
@media(max-height:600px) and (min-width:901px){.game-shell{min-height:600px}.brand h1{font-size:43px}.brand .crown{font-size:27px}.brand p{font-size:12px;margin-top:4px}.brand{margin-bottom:12px}.side-menu>button{min-height:41px;padding:8px;font-size:14px}.turn{top:10px;min-height:62px}.north{top:17%}.score{top:80px}.reaction-panel{bottom:18px}.play-controls{bottom:18px}.reactions button{min-height:39px}.avatar{width:68px;height:68px}.hand{--card-width:70px}.player-role{display:none}.play-controls>button{min-height:39px}.play-controls .play-button{min-height:57px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.card-art{display:block;width:100%;height:100%;object-fit:fill;border-radius:7px;pointer-events:none;filter:sepia(.13)}
.hand{width:52%}.south{bottom:25.5%}@media(max-width:1100px) and (min-width:901px){.hand{width:52%}.south{bottom:26%}}@media(max-height:850px) and (min-width:901px){.north{top:18%}.north .avatar{width:80px;height:80px}.brand .crown{font-size:29px}.brand h1{font-size:55px}.brand p{font-size:16px;margin-top:6px}.brand{margin-bottom:19px}.side-menu{gap:8px}.side-menu>button{min-height:46px;padding:10px 12px;font-size:16px}.side-menu .sound{font-size:16px}.reactions button{min-height:42px;padding:6px;font-size:18px}.reactions button span{font-size:25px}.reaction-panel{padding:12px}#reaction-toggle{padding-bottom:10px;font-size:18px}.play-controls>button{min-height:48px}.play-controls .play-button{min-height:72px}}@media(max-width:900px){.hand{width:97%}.south{bottom:29%}}
.hand{left:50.8%}.south{bottom:22%}.north .player-role{display:none}.north .count{position:absolute;bottom:0}.north .back-stack{height:36px}#trick{z-index:2}@media(max-height:850px) and (min-width:901px){.south{bottom:24%}.south .avatar{width:68px;height:68px}.south strong{font-size:16px;min-width:112px;padding:6px 10px}.south .count{font-size:14px;padding:3px 10px}#trick .card{width:60px;height:82px;top:45%}#trick .p2{transform:translate(-50%,-95%) rotate(-2deg)}#trick .p0{transform:translate(-50%,10%) rotate(3deg)}}@media(min-height:851px) and (min-width:901px){#trick .card{width:75px;height:104px;top:46%}#trick .p2{transform:translate(-50%,-95%) rotate(-2deg)}#trick .p0{transform:translate(-50%,10%) rotate(3deg)}}@media(max-width:900px){.hand{left:50%;width:97%}.north{top:24%}.north .count{position:relative}.north .player-role{display:block}.south{bottom:27%}#trick .card{width:44px;height:62px;top:48%}.north .player-crown{display:none}}
.turn-clock{--progress:360deg;--clock-color:#eac36d;width:54px;height:54px;flex:0 0 54px;position:relative;border-radius:50%;background:conic-gradient(var(--clock-color) var(--progress),#ffffff1a 0);display:flex;flex-direction:column;justify-content:center;align-items:center;direction:rtl}.turn-clock::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#10181b}.turn .turn-clock>span{position:relative;font:700 21px/1 Tahoma,Arial,sans-serif;color:var(--clock-color);margin-top:2px}.turn-clock small{position:relative;font-size:10px;color:#d2d9d3;margin-top:3px}.turn-clock.urgent{--clock-color:#ff7866}.turn-clock.idle{--clock-color:#8b9698}.hand .card{touch-action:manipulation;user-select:none;-webkit-user-select:none}@media(max-width:900px){.turn-clock{width:43px;height:43px;flex-basis:43px}.turn .turn-clock>span{font-size:18px}.turn-clock small{font-size:9px}.turn-clock::before{inset:3px}.turn{gap:8px}.turn strong{font-size:16px}.turn div>span#status-hint{font-size:12px}}@media(hover:none){.hand .card.selected,.hand .card:not(:disabled):hover{transform:translateY(var(--rise)) rotate(var(--angle))}}
.bot-badge[hidden]{display:none}#invite-link{font-size:13px;text-align:left}

.hand .card{touch-action:none}.hand .card.drag-source{opacity:.3}.drag-ghost{position:fixed!important;z-index:100!important;pointer-events:none;transform:translate(-50%,-65%) rotate(-4deg)!important;box-shadow:0 15px 30px #0008,0 0 0 2px #ffe285;opacity:.97}#drop-zone{position:absolute;left:29%;top:31%;width:42%;height:34%;border-radius:50%;border:2px dashed #f5d48c;box-shadow:inset 0 0 45px #e7be5026;z-index:8;pointer-events:none;display:none;align-items:center;justify-content:center;background:#062a1e35}#drop-zone.visible{display:flex}#drop-zone.over{border-style:solid;background:#a5dc7930;box-shadow:0 0 25px #d5e67c4a}#drop-zone span{background:#10261dea;border:1px solid #eac36d77;color:#ffedbf;border-radius:30px;padding:9px 18px;font-size:18px}#drop-zone.over span{background:#28552c}@media(max-width:900px){#drop-zone{left:26%;top:37%;width:48%;height:23%}#drop-zone span{font-size:14px;padding:8px}}
.auction{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:260px;padding:14px;z-index:4;text-align:center;border-radius:18px}.auction[hidden]{display:none}.auction h2{font-size:19px;margin:0 0 5px}.auction p{font-size:13px;line-height:1.5;margin:0 0 9px;color:#d6d9ca}.bid-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.bid-options button,.pass-bid{background:#213e35;border:1px solid #9aaf83;border-radius:8px;min-height:34px;font-size:18px}.bid-options button:disabled,.trump-options button:disabled{opacity:.35}.pass-bid{width:100%;margin-top:6px;background:#17262a;font-size:15px}.trump-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.trump-options button{background:#e9dfca;color:#172020;border-radius:8px;padding:6px 2px}.trump-options b{font-size:30px;display:block}.trump-options .red{color:#b92e26}.trump-options small{font-size:10px}.auction-wait{font-size:25px;color:#d9bd76;letter-spacing:8px}.round-points{display:flex;justify-content:space-around;font-size:14px}.round-points strong{display:block;font-size:26px;direction:ltr;margin-top:5px}.score-caption{flex-wrap:wrap}.score-caption #round{font-size:12px}.hand .card:disabled{cursor:default}@media(max-width:900px){.auction{width:46%;top:47%;padding:9px;border-radius:13px}.auction h2{font-size:15px}.auction p{font-size:11px;margin-bottom:6px}.bid-options{gap:4px}.bid-options button{font-size:16px;min-height:28px}.pass-bid{min-height:26px;font-size:13px;margin-top:4px}.trump-options{grid-template-columns:repeat(2,1fr);gap:4px}.trump-options button{padding:3px}.trump-options b{font-size:25px}.trump-options small{font-size:10px}.round-points strong{font-size:22px}.round-points{font-size:12px}}
.score-teams[hidden],#individual-scores[hidden],#trix-board[hidden],#doubled-cards[hidden]{display:none!important}#individual-scores{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center}#individual-scores span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}#individual-scores b{display:block;font-size:24px}.game-choice button{font-size:13px}.request-options{display:grid;gap:7px}.request-options button,.double-options button{background:#203c33;border:1px solid #bbaa70;border-radius:8px;padding:9px;font-size:16px}.request-options button:disabled,.double-options button:disabled{opacity:.4}.double-options{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.double-options button{font-size:20px;padding:6px}.double-options [aria-pressed=true]{background:#d1af64;color:#171d19}.round-points.solo{display:grid;grid-template-columns:1fr 1fr;gap:8px}#trix-board{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:250px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr;z-index:3;pointer-events:none}.trix-column{color:#19221c;text-align:center}.trix-column.red{color:#a92c27}.trix-column>b{font-size:25px;color:#f2d993;text-shadow:0 1px 3px #000}.layout-card{display:block;height:24px;line-height:16px;background:#ede4d3;border:1px solid #a5987f;border-radius:4px;font:bold 14px/17px Georgia,serif;box-shadow:0 2px 3px #0004}.layout-card+.layout-card{margin-top:-13px}.layout-empty{display:block;background:#092c244d;border:1px dashed #c4b97770;border-radius:6px;color:#d9c28a66;font-size:27px;height:45px;padding-top:4px}#doubled-cards{position:absolute;left:72%;top:25%;width:88px;padding:6px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center;border-radius:10px;z-index:4}#doubled-cards small{width:100%;text-align:center;font-size:11px;color:#e5d297}#doubled-cards span{font:14px Georgia,serif;white-space:nowrap;background:#283829;border-radius:3px;padding:3px}@media(max-width:900px){#individual-scores{gap:6px}#individual-scores span{font-size:10px}#individual-scores b{font-size:18px}.game-choice button{font-size:12px;padding:8px 3px}.request-options button{font-size:14px;padding:7px}.double-options button{font-size:16px;padding:5px}.auction .round-points.solo{gap:5px}.auction .round-points.solo strong{font-size:19px}#trix-board{width:46%;gap:4px}.trix-column>b{font-size:21px}.layout-card{font-size:11px;height:22px;line-height:14px}.layout-card+.layout-card{margin-top:-12px}#doubled-cards{left:auto;right:12px;top:25%;width:76px;padding:4px}#doubled-cards span{font-size:12px}}
.auction{pointer-events:auto}
.auction{top:49%}.auction:has(.bid-options){padding:10px}.auction:has(.bid-options) p{display:none}.bid-options button{min-height:28px}.auction:has(.bid-options) .pass-bid{min-height:28px}@media(max-width:900px){.auction{top:49%}}

/* An exposed doubled card keeps its gold marker in the hand, drag clone and trick. */
.double-glow{position:absolute;inset:0;border:2px solid #ffd66c;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 8px #e7aa3270,0 0 5px 1px #ffd46bc9,0 0 15px #ecb94785}
.double-glow::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#fff4bd55 48%,transparent 67%);opacity:.35;animation:double-gold-shimmer 3.2s ease-in-out infinite}
.double-glow b{position:absolute;left:2px;bottom:3px;min-width:22px;text-align:center;padding:2px 3px;border:1px solid #fff0b7;border-radius:6px;background:linear-gradient(#ffe9a0,#d99a2c);box-shadow:0 1px 4px #67450a80;color:#442b04;font:700 12px/1.15 Tahoma,Arial,sans-serif;direction:ltr}
#doubled-cards span{border:1px solid #f6cf6c;box-shadow:0 0 6px #e9b94875;background:linear-gradient(135deg,#5e481e,#26372a);color:#ffedb5}
@keyframes double-gold-shimmer{0%,100%{opacity:.25}50%{opacity:.85}}
@media(max-width:900px){.double-glow b{left:1px;bottom:2px;min-width:18px;font-size:10px;padding:2px}}
@media(prefers-reduced-motion:reduce){.double-glow::before{animation:none;opacity:.35}}

/* Keep the newest layout card legible above the overlapping sequence. */
.layout-card.latest{position:relative;z-index:5;transform:scale(1.2);font-size:17px;background:#fff8df;outline:2px solid #70dcff;box-shadow:0 0 14px #54cfffaa,0 3px 8px #0007;border-color:#fff;animation:trix-card-arrival .4s ease-out}
@keyframes trix-card-arrival{from{transform:translateY(-10px) scale(1.4);opacity:.4}to{transform:translateY(0) scale(1.2);opacity:1}}
@media(max-width:900px){.layout-card.latest{font-size:14px}}
@media(prefers-reduced-motion:reduce){.layout-card.latest{animation:none}}
/* Clear game selection before entering the table. */
.choose-game{display:block;width:100%;background:none;color:#f3d18b;font-size:13px;padding:8px 2px;border-top:1px solid #ffffff18;margin-top:5px;border-radius:5px}
body.lobby-open{overflow:hidden;background:#15100b url('assets/table-room.png') center/cover fixed no-repeat}body.lobby-open .game-shell{visibility:hidden}
#game-lobby{width:min(650px,calc(100% - 28px));max-width:650px;max-height:calc(100svh - 28px);overflow:auto;padding:24px 32px;border:1px solid #d4ac57;border-radius:28px;text-align:center;background:linear-gradient(140deg,#26241deb,#101b17f5);box-shadow:0 24px 100px #0009;color:#fff1d4}
#game-lobby::backdrop{background:#160e0666;backdrop-filter:blur(3px)}.lobby-brand{display:flex;flex-direction:column;align-items:center;line-height:1}.lobby-brand>span{font-size:35px;color:#f1cc72}.lobby-brand>b{font-size:54px;letter-spacing:-3px}#game-lobby h2{font-size:27px;margin:22px 0 18px}.lobby-games,.lobby-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.lobby-games>button{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 12px 18px;background:linear-gradient(140deg,#ffffff08,#111713);border:2px solid #ffffff25;border-radius:22px;min-width:0}.lobby-games>button[aria-pressed=true]{border-color:#f7d575;background:linear-gradient(130deg,#34432e,#11271e);box-shadow:inset 0 0 26px #e5bf4220}.lobby-check{position:absolute;left:12px;top:12px;background:#f1cd76;color:#2e2818;border-radius:50%;width:26px;height:26px;display:none;align-items:center;justify-content:center}.lobby-games [aria-pressed=true] .lobby-check{display:flex}.lobby-games strong{font-size:30px;margin-top:12px}.lobby-fan{position:relative;display:block;width:190px;height:138px;direction:ltr;margin-top:12px}.lobby-fan img{position:absolute;top:10px;left:22px;width:77px;height:108px;border-radius:5px;box-shadow:0 4px 10px #0007;transform:rotate(-22deg);transform-origin:50% 110%}.lobby-fan img:nth-child(2){left:45px;transform:rotate(-8deg)}.lobby-fan img:nth-child(3){left:68px;transform:rotate(8deg)}.lobby-fan img:nth-child(4){left:90px;transform:rotate(22deg)}.lobby-modes button{border:1px solid #ffffff35;border-radius:15px;background:#ffffff06;padding:16px;font-size:24px;font-weight:bold}.lobby-modes button span{margin-left:10px}.lobby-modes button[aria-pressed=true]{background:linear-gradient(120deg,#f5d27e,#d5ae58);border-color:#ffe6a2;color:#28271b}.lobby-modes button:disabled{opacity:.35}#game-lobby #lobby-note{font-size:13px;line-height:1.6;margin:12px 0;color:#c9c6b5}#lobby-start{width:100%;padding:18px;background:linear-gradient(120deg,#1e7049,#0b3d2a);border:2px solid #b8c17b;border-radius:17px;font-size:29px;font-weight:bold;color:#fff0cb;margin-top:6px}#lobby-start span{margin-right:18px}#lobby-back{display:block;width:100%;background:none;padding:14px 5px 0;color:#ded6bc;font-size:15px}
@media(max-width:900px){.choose-game{font-size:11px;padding:7px 0}#game-lobby{padding:20px 17px;border-radius:23px}.lobby-brand>b{font-size:44px}.lobby-brand>span{font-size:29px}#game-lobby h2{font-size:23px;margin:22px 0 16px}.lobby-games{gap:10px}.lobby-games>button{padding:17px 4px 15px;border-radius:16px}.lobby-games strong{font-size:24px}.lobby-fan{width:130px;height:105px;margin-top:14px}.lobby-fan img{width:55px;height:78px;left:6px}.lobby-fan img:nth-child(2){left:23px}.lobby-fan img:nth-child(3){left:40px}.lobby-fan img:nth-child(4){left:57px}.lobby-check{width:22px;height:22px;top:8px;left:8px}.lobby-modes{gap:10px}.lobby-modes button{font-size:20px;padding:14px 8px}.lobby-modes button span{margin-left:4px}#lobby-start{font-size:25px;padding:16px}}
@media(max-height:780px) and (min-width:701px){#game-lobby{padding:15px 26px}.lobby-brand>b{font-size:35px}.lobby-brand>span{font-size:24px}#game-lobby h2{margin:12px 0;font-size:22px}.lobby-games>button{padding:6px}.lobby-fan{height:110px;margin:0}.lobby-games strong{font-size:24px;margin-top:0}.lobby-modes button{padding:10px}#lobby-start{padding:10px}}
/* Keep the hit target still between the two clicks; selection uses an outline. */
.hand .card:not(:disabled):hover,.hand .card.selected{transform:translateY(var(--rise)) rotate(var(--angle))}
.hand .card.selected{outline:3px solid #7cddff;outline-offset:1px}

/* Compact tables also cover narrow desktop windows and tablets. */
@media(max-width:900px){.side-menu{flex-shrink:0}.score{max-width:calc(34% - 15px)}.turn{left:auto;right:12px;transform:none;width:calc(66% - 18px)}.reactions button{min-width:0}.play-controls>button{min-width:0}.hand{max-width:100%}.lobby-fan{max-width:100%}}
@media(min-width:701px) and (max-width:900px){.game-shell{min-height:790px}.hand{--card-width:68px;height:145px}.hand .card{height:100px}.auction{width:240px}#trix-board{width:260px}.turn{right:28%;width:260px}.score{width:140px}.reaction-panel{width:230px}.play-controls{width:220px}.reactions button{font-size:14px}.play-controls>button{font-size:14px}.north{top:23%}.south{bottom:27%}}
@media(max-width:900px){.reactions button{height:36px;min-height:36px;padding:3px;flex-direction:row;font-size:12px;gap:3px}.reactions button span{font-size:17px}#reaction-toggle{padding-bottom:6px}.reaction-panel{padding:8px}.hand{bottom:16%}}
.dealing .hand{animation:deal-hand-in .5s ease-out}.dealing .turn{animation:deal-status-in .5s ease-out}@keyframes deal-hand-in{from{opacity:.25;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes deal-status-in{from{opacity:.3}to{opacity:1}}@media(prefers-reduced-motion:reduce){.dealing .hand,.dealing .turn{animation:none}}
/* One face-down card per remaining card; spread stays within the seat. */
.back-stack{position:relative;--back-width:43px;width:calc(var(--back-width) + (var(--back-count,0) - 1)*var(--back-step,0px));flex-shrink:0}
.back-stack i{position:absolute;left:calc(var(--back-index)*var(--back-step));margin:0;width:var(--back-width);flex-shrink:0}
.back-stack[hidden]{display:none!important}
@media(min-width:901px) and (max-width:1100px){.back-stack{--back-width:33px}}
/* Phone game chrome: compact identity and one clear game label. */
@media(max-width:700px){
 .game-shell{height:100svh;min-height:660px}
 .sidebar{top:10px;align-items:center}
 .brand{width:85px;display:flex;align-items:center;gap:4px;justify-content:center}
 .brand .crown{font-size:19px}.brand h1{font-size:28px;letter-spacing:-1px}.brand p{display:none}
 .side-menu{display:flex;gap:5px;margin-left:50px;padding:0;max-width:none;flex-wrap:nowrap}
 .side-menu>button{width:32px;min-height:32px;padding:4px}.side-menu .icon{font-size:20px}
 .exit{top:10px;min-height:32px;padding:4px 8px}
 .score{top:57px;left:8px;width:102px;padding:7px 5px}.score-teams{margin-bottom:3px}.score-teams b{font-size:23px}.score-teams>div{font-size:12px}
 .score-caption{padding-top:3px;font-size:10px}.score-caption #round{font-size:10px}.score-caption span{margin-top:2px}
 .score .mode-note{display:none}.choose-game{font-size:10px;padding:5px 0;margin-top:3px}
 .turn{top:57px;right:8px;width:calc(100% - 126px);min-height:63px;padding:8px;gap:7px;border-radius:14px}
 .turn strong{font-size:14px;margin-bottom:4px}.turn div>span#status-hint{font-size:11px;line-height:1.45}.turn-clock{width:37px;height:37px;flex-basis:37px}.turn .turn-clock>span{font-size:16px}
 .north{top:25%}.north .player-role,.seat .player-role{display:none}.north .avatar,.west .avatar,.east .avatar{width:56px;height:56px}
 .seat strong{font-size:12px;min-width:76px;padding:5px}.seat .count{font-size:11px;padding:3px 6px}
 .south{bottom:31%}.south .avatar{width:58px;height:58px}.hand{bottom:19%;height:100px;--card-width:48px}.hand .card{height:84px}
 .reaction-panel,.play-controls{bottom:10px}
 #doubled-cards{top:19%;right:8px;width:65px}#doubled-cards small{font-size:10px}
}
@media(max-width:360px){.brand{width:68px}.brand h1{font-size:23px}.brand .crown{display:none}.side-menu{gap:4px}.side-menu>button{width:29px}.hand{--card-width:43px}.hand .card{height:76px}}
@media(max-width:700px){.side-menu{flex-direction:row}.sidebar{height:34px}.brand{flex-shrink:0}}
/* Use the visible browser area, never a minimum taller than the phone. */
@media(max-width:900px){
 .game-shell{height:var(--visible-height,100dvh);min-height:0;max-height:none}
 .play-controls,.reaction-panel{bottom:max(10px,env(safe-area-inset-bottom))}
 .hand{bottom:125px}
 .south{bottom:225px}
 dialog{max-height:calc(var(--visible-height,100dvh) - 24px);overflow-y:auto}
}
@media(max-width:700px){
 .play-controls .play-button{min-height:44px;font-size:17px}
 .reaction-panel{padding:6px}.reactions button{height:30px;min-height:30px}
 .hand{bottom:112px;height:90px}
 .south{bottom:210px}
}
@media(max-width:900px) and (max-height:600px){
 .north{top:24%}.west,.east{top:43%}
 .seat .avatar{width:44px;height:44px}.seat strong{font-size:11px;padding:3px}
 .seat .count{font-size:10px;padding:2px 5px}
 .south{bottom:190px}.hand{--card-width:42px;height:75px}.hand .card{height:72px}
 .score-teams b{font-size:19px}.score-caption{font-size:9px}
}
/* Persistent contract details survive cards covering the middle of the table. */
#contract-summary{border-top:1px solid #e6bd6455;margin-top:9px;padding-top:9px;text-align:center;font-size:14px;line-height:1.65}
#contract-summary[hidden]{display:none}
.contract-owner{overflow-wrap:anywhere}.contract-owner b{color:#ffda83;font-size:20px}
.contract-trump b{color:#fff4d7}.contract-trump b.warm{color:#ff9e8f}
.contract-progress{color:#dbdfd4}.contract-progress span{display:block;color:#ffda83;font-weight:bold}
@media(max-width:900px){#contract-summary{font-size:11px;line-height:1.5;margin-top:5px;padding-top:5px}.contract-owner b{font-size:14px}}
@media(max-width:700px){#contract-summary{font-size:10px}.contract-owner b{font-size:13px}}
/* Trump is distinguished without moving the card's click target. */
.trump-glow{position:absolute;inset:0;border:2px solid #ffd36b;border-radius:inherit;box-shadow:inset 0 0 12px #ffc34299,0 0 9px #ffcf65b3;pointer-events:none;overflow:hidden;z-index:2}
.trump-glow:after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 38%,#fff2b96b 48%,transparent 58%);animation:trump-shimmer 3.6s ease-in-out infinite}
@keyframes trump-shimmer{0%,25%{transform:translateX(-70%)}75%,100%{transform:translateX(70%)}}
@media(prefers-reduced-motion:reduce){.trump-glow:after{animation:none;display:none}}
.bid-rule{font-size:13px!important;line-height:1.6!important;color:#f7d78d!important}.trump-options button:disabled{opacity:.4;cursor:not-allowed}
/* Dedicated phone table: compact header, clear centre, one bottom action row. */
@media(max-width:700px){
 .sidebar{top:7px;right:8px;width:calc(100% - 16px);height:32px}.brand{width:75px}.brand h1{font-size:25px}.brand .crown{font-size:15px}.exit{top:7px;left:8px}
 .score{top:45px;left:8px;right:8px;width:auto;max-width:none;padding:5px 8px;border-radius:10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
 #individual-scores{display:flex;flex:1;justify-content:space-around;gap:6px;margin:0}#individual-scores>div{display:flex;align-items:center;gap:4px;font-size:10px}#individual-scores b{font-size:15px}
 .score-teams{flex:1;margin:0}.score-teams>div{display:flex;gap:7px;justify-content:center;font-size:11px}.score-teams b{font-size:17px}
 #individual-scores[hidden],.score-teams[hidden]{display:none}
 .score-caption,.score .mode-note{display:none}#choose-game{width:auto;font-size:10px;border:0;margin:0;padding:4px}
 #contract-summary{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:2px 9px;font-size:10px;margin:0;padding:3px 0 0;line-height:1.4}#contract-summary[hidden]{display:none}.contract-owner b{font-size:12px}.contract-progress span{display:inline;margin-right:5px}.contract-trump b{white-space:nowrap}
 .turn{top:111px;left:8px;right:8px;width:auto;transform:none;min-height:39px;padding:4px 9px;border-radius:10px;justify-content:space-between;gap:6px}.turn strong{font-size:13px;margin:0}.turn div>span#status-hint{font-size:10px;margin-top:2px}.turn-clock{width:30px;height:30px;flex-basis:30px}.turn .turn-clock>span{font-size:14px}
 .north{top:156px}.seat{min-width:65px}.seat .avatar{width:42px;height:42px}.seat strong{font-size:11px;min-width:65px;max-width:85px;padding:3px 5px}.seat .count{font-size:10px;padding:2px 5px}.player-crown{font-size:21px;top:-16px}.seat .bot-badge{height:18px;min-width:18px;font-size:8px}
 .west,.east{top:49%}.west{left:10%}.east{left:90%}.south{bottom:155px}.south .avatar{display:none}.south strong{background:#0b1e17b3;border-color:#d6b15b66}.south .count{display:none}
 #trick .card{top:51%;width:55px;height:78px;z-index:4}#trick .p0{transform:translate(-50%,30%) rotate(2deg)}#trick .p2{transform:translate(-50%,-112%) rotate(-2deg)}#trick .p1{transform:translate(-140%,-40%) rotate(-4deg)}#trick .p3{transform:translate(40%,-40%) rotate(4deg)}
 .hand{bottom:58px;height:92px;width:98%;--card-width:48px}.hand .card{height:84px}
 .play-controls{bottom:max(8px,env(safe-area-inset-bottom));right:8px;left:62px;width:auto;display:flex;flex-direction:row;gap:6px}.play-controls #undo{display:none}.play-controls #sort{width:47px;font-size:0;padding:6px;flex-shrink:0}.play-controls #sort span{font-size:24px}.play-controls .play-button{min-height:42px;flex:1;font-size:17px}.play-controls>button{min-height:42px}
 .reaction-panel,.reaction-panel.collapsed{left:8px;bottom:max(8px,env(safe-area-inset-bottom));width:46px;padding:0;border-radius:12px}#reaction-toggle{height:42px;padding:0;justify-content:center}#reaction-toggle>span:first-child{font-size:0}#reaction-toggle>span:first-child:before{content:'😄';font-size:23px}#reaction-toggle .chevron{display:none}
 .reactions{position:absolute;bottom:50px;left:0;width:235px;background:#0b1719f5;border:1px solid #829794;border-radius:12px;padding:8px;box-shadow:0 5px 20px #0009;gap:5px}.reactions button{height:40px;font-size:12px}
 .auction{top:49%;width:64%;max-height:calc(var(--visible-height,100dvh) - 260px);overflow-y:auto;padding:9px}.auction h2{font-size:17px}.auction p{font-size:11px}.auction:has(.bid-options) .bid-rule{display:block;font-size:10px!important}.bid-options{gap:4px}
 #trix-board{top:51%;width:54%}#doubled-cards{top:158px;right:8px;width:60px}
}
@media(max-width:700px) and (max-height:570px){.north{top:153px}.north .avatar{display:none}.hand{--card-width:42px;height:77px}.hand .card{height:72px}.south{bottom:140px}#trick .card{width:47px;height:67px;top:52%}.seat .avatar{width:34px;height:34px}}
@media(max-width:700px) and (max-height:570px){.north{top:164px}}
@media(max-width:700px){#choose-game{font-size:0;flex-shrink:0}#choose-game:after{content:'اللعبة ⌄';font-size:10px}#individual-scores{min-width:0;gap:3px}#individual-scores>div{gap:2px;font-size:9px}#contract-summary{display:grid;grid-template-columns:1fr 1fr;gap:1px 4px}.contract-progress{grid-column:1/-1}}
@media(max-width:700px) and (max-height:500px){.south{display:none}#trick .card{top:55%;width:42px;height:60px}.auction{top:55%;max-height:180px}.auction .bid-rule{font-size:9px!important}.north{top:161px}}
@media(max-width:700px){.turn{top:var(--phone-turn-top,111px)}.north{top:var(--phone-north-top,168px)}.turn>div{min-width:0}.turn strong,.turn #status-hint{overflow-wrap:anywhere}.turn-clock{flex-shrink:0}}
#doubled-cards{width:126px;max-height:180px;overflow-y:auto}#doubled-cards .double-owner{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:4px}#doubled-cards .double-owner>b{font-size:11px;overflow-wrap:anywhere;min-width:0}#doubled-cards .double-owner>span{white-space:nowrap;font-size:13px;margin:0}
@media(max-width:700px){#doubled-cards{top:var(--phone-north-top,168px);right:5px;width:94px;max-height:100px;padding:4px}#doubled-cards small{font-size:9px}#doubled-cards .double-owner>b{font-size:9px}#doubled-cards .double-owner>span{font-size:10px;padding:2px}}
.exposed-doubles{display:flex;gap:3px;justify-content:center;position:absolute;top:100%;margin-top:4px;z-index:5;pointer-events:none}.exposed-doubles[hidden]{display:none}.exposed-card{width:40px;height:57px}.exposed-card .double-glow{border-width:2px}.west .exposed-doubles{top:35px;left:100%;margin-left:10px}.east .exposed-doubles{top:35px;right:100%;margin-right:10px}
@media(max-width:700px){.exposed-card{width:27px;height:39px}.exposed-doubles{gap:2px}.west .exposed-doubles,.east .exposed-doubles{top:100%;left:auto;right:auto;margin:4px 0 0;max-width:70px;flex-wrap:wrap}.north .exposed-doubles{top:100%}.exposed-card .double-glow b{font-size:8px;min-width:12px;padding:0}}
/* Exposed doubles show their rank clearly instead of hiding it under the badge. */
.exposed-card{width:58px;height:82px;overflow:visible;box-shadow:0 0 0 2px #ffd36b,0 0 15px #ffcc6480,0 4px 8px #0009}
.exposed-card:before{content:attr(data-face);position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:#fff3d7;color:#171510;font:bold 16px Georgia,serif;border:1px solid #eac371;border-radius:5px;padding:1px 6px;white-space:nowrap;z-index:8}
.exposed-card.red:before{color:#b51e13}.exposed-card .double-glow{overflow:visible;box-shadow:inset 0 0 5px #ffc94a55}.exposed-card .double-glow b{left:auto;right:-7px;bottom:-9px;top:auto;font-size:12px;min-width:24px;padding:2px;border:1px solid #fff0ac}
.exposed-doubles{gap:9px;margin-top:23px}.west .exposed-doubles,.east .exposed-doubles{top:40px}
@media(max-width:700px){.exposed-card{width:35px;height:50px}.exposed-card:before{font-size:12px;top:-16px;padding:0 4px}.exposed-card .double-glow b{font-size:9px;min-width:17px;right:-4px;bottom:-6px;padding:1px}.exposed-doubles{gap:5px;margin-top:19px}.west .exposed-doubles,.east .exposed-doubles{top:100%;margin-top:19px;max-width:80px;row-gap:23px}}
/* Keep exposed doubles readable without floating labels or oversized glow. */
.exposed-card{width:44px;height:63px;box-shadow:0 0 0 1px #f4cc71,0 2px 5px #0007;overflow:hidden}.exposed-card:before{display:none}.exposed-card .double-glow{box-shadow:none;border:1px solid #f4cc71;overflow:hidden}.exposed-card .double-glow b{right:2px;bottom:2px;min-width:16px;font-size:9px;padding:0 2px}.exposed-doubles{gap:4px;margin-top:5px;max-width:140px;flex-wrap:wrap}.west .exposed-doubles,.east .exposed-doubles{top:35px}
@media(max-width:700px){.exposed-card{width:29px;height:42px}.exposed-doubles{gap:3px;margin-top:4px;max-width:96px}.west .exposed-doubles,.east .exposed-doubles{top:100%;margin-top:4px;max-width:65px;row-gap:4px}.exposed-card .double-glow b{font-size:8px;min-width:13px;right:1px;bottom:1px}}
@media(max-width:360px){#game-lobby{padding:12px;overflow-x:hidden}.lobby-brand>b{font-size:32px}.lobby-brand>span{font-size:20px}#game-lobby h2{font-size:19px;margin:12px 0}.lobby-fan{width:100px;height:78px;margin-top:6px}.lobby-fan img{width:40px;height:57px;left:3px}.lobby-fan img:nth-child(2){left:16px}.lobby-fan img:nth-child(3){left:29px}.lobby-fan img:nth-child(4){left:42px}.lobby-games strong{font-size:20px}.lobby-games>button{padding:8px 2px}.lobby-modes button{font-size:17px;padding:10px}#lobby-start{font-size:21px;padding:10px}}
/* Face-up doubles belong to the opponent's hand, never a separate floating row. */
.stack-face{position:absolute;left:calc(var(--back-index)*var(--back-step));top:0;width:43px;height:57px;background:#fff8e8;border:1px solid #cbbd9f;border-radius:4px;color:#161616;display:flex;align-items:center;justify-content:center;flex-direction:column;font:bold 19px Georgia;z-index:2;box-shadow:0 1px 3px #0005}.stack-face.red{color:#b52318}.stack-face small{position:absolute;bottom:1px;right:2px;font:9px Arial;color:#6a531b}.stack-face span{font-size:24px;line-height:1}.stack-face b{line-height:1}
@media(max-width:700px){.back-stack.has-exposed{display:flex!important;position:absolute;width:56px!important;height:42px;transform:none!important;top:0!important;z-index:2}.back-stack.has-exposed i{display:none}.back-stack.has-exposed .stack-face{position:relative;left:auto;top:auto;width:26px;height:38px;flex-shrink:0;margin-left:-5px;font-size:14px;box-shadow:none}.stack-face span{font-size:18px}.stack-face small{font-size:7px}.north .back-stack.has-exposed{left:calc(100% + 5px);margin-top:0}.west .back-stack.has-exposed{left:calc(100% + 2px);right:auto}.east .back-stack.has-exposed{right:calc(100% + 2px);left:auto;justify-content:flex-end}}
/* Scale phone typography and cards with both available width and height. */
@media(max-width:700px){
 .game-shell{--ui-text:clamp(10px,2.8vw,14px);--small-text:clamp(9px,2.5vw,12px);--hand-size:clamp(36px,min(12.3vw,12dvh),65px);--table-card:clamp(40px,min(14vw,9.8dvh),68px)}
 .turn strong{font-size:clamp(12px,3.4vw,18px)}.turn div>span#status-hint{font-size:var(--small-text)}.turn .turn-clock>span{font-size:clamp(14px,4.3vw,22px)}
 .seat strong{font-size:var(--ui-text)}.seat .count{font-size:var(--small-text)}
 #individual-scores>div{font-size:var(--small-text)}#individual-scores b,.score-teams b{font-size:clamp(14px,4vw,21px)}.score-teams>div{font-size:var(--ui-text)}
 #contract-summary{font-size:var(--small-text)}.contract-owner b{font-size:var(--ui-text)}
 .hand{--card-width:var(--hand-size);height:calc(var(--hand-size)*1.75)}.hand .card{height:calc(var(--hand-size)*1.5)}
 #trick .card{width:var(--table-card);height:calc(var(--table-card)*1.42)}
 .back-stack.has-exposed .stack-face{width:clamp(24px,6.7vw,34px);height:clamp(35px,9.8vw,49px);font-size:clamp(13px,3.6vw,18px)}.stack-face span{font-size:clamp(16px,4.6vw,23px)}
 .auction h2{font-size:clamp(16px,4.4vw,22px)}.auction p{font-size:var(--ui-text)}.play-controls .play-button{font-size:clamp(15px,4.4vw,21px)}
 .lobby-games strong{font-size:clamp(19px,5.5vw,30px)}.lobby-modes button{font-size:clamp(16px,4.5vw,23px)}
}
/* Show each opponent's remaining face-down cards on phones as a compact fan. */
@media(max-width:700px){
 .seat .back-stack,.seat .back-stack.has-exposed{display:block;position:absolute;top:0!important;transform:none!important;z-index:2;margin:0!important;width:clamp(46px,13vw,66px)!important;height:42px;--back-step:2px!important;--back-width:clamp(19px,5.4vw,27px)}
 .seat .back-stack[hidden]{display:none!important}
 .seat .back-stack i{display:block;position:absolute;left:calc(var(--back-index)*2px);top:0;width:var(--back-width);height:calc(var(--back-width)*1.45);margin:0;transform:none;border-width:1px;border-radius:3px;box-shadow:none}
 .seat .back-stack .stack-face{display:flex;position:absolute;left:calc(var(--back-index)*2px);top:0;margin:0;width:var(--back-width);height:calc(var(--back-width)*1.45);font-size:clamp(12px,3.3vw,16px);box-shadow:none}
 .seat .back-stack .stack-face span{font-size:clamp(14px,3.8vw,19px)}
 .north .back-stack{left:calc(100% + 5px);right:auto}.west .back-stack{left:calc(100% + 2px);right:auto}.east .back-stack{right:calc(100% + 2px);left:auto}
}
@media(max-width:700px){.seat .back-stack .stack-face{left:calc(var(--hidden-count)*2px + var(--face-slot)*13px);align-items:flex-start;padding-left:2px}.seat .back-stack .stack-face span{font-size:13px}.seat .back-stack .stack-face small{font-size:6px}}
/* Desktop-only spacing; preserve the approved phone layout. */
@media(min-width:901px){
 .hand{--card-width:clamp(62px,min(7vw,14vh),110px);height:calc(var(--card-width)*1.55 + 24px);width:52%;bottom:5%}
 .south{bottom:calc(5% + clamp(62px,min(7vw,14vh),110px)*1.55 + 38px)}
 .north .back-stack{height:60px;margin-top:8px}
 .north .count{margin-top:5px}
 .back-stack .stack-face{left:calc(var(--hidden-count)*7px + var(--face-slot)*26px);align-items:flex-start;padding-left:3px}
 .north .back-stack:has(.stack-face){min-width:100px}
 .west .back-stack,.east .back-stack{z-index:1}
}
/* Phone opponents hold their cards above their portraits, away from the trick. */
@media(max-width:700px){
 .seat.west .back-stack,.seat.east .back-stack,
 .seat.west .back-stack.has-exposed,.seat.east .back-stack.has-exposed{
  top:auto!important;bottom:calc(100% + 7px);left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;margin:0!important;height:calc(var(--back-width)*1.45);
 }
}
#phone-game-info{display:none}
@media(max-width:700px){#phone-game-info{display:block;flex-basis:100%;order:5;text-align:center;font-size:clamp(9px,2.5vw,12px);line-height:1.4;color:#edd498;border-top:1px solid #ffffff18;padding-top:3px;overflow-wrap:anywhere}}

/* A single compact mobile scoreboard, game summary and turn indicator. */
@media(max-width:700px){
 .score{gap:2px 6px;padding:5px 8px}
 .score .turn{position:static;order:10;flex:0 0 100%;box-sizing:border-box;
 width:100%;min-height:29px;padding:3px 0 0;margin:0;transform:none;
 border:0;border-top:1px solid #ffffff18;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
 .score .turn>div:last-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px;text-align:right}
 .score .turn strong{font-size:clamp(12px,3.2vw,15px);line-height:1.3}
 .score .turn div>span#status-hint{font-size:clamp(9px,2.5vw,11px);margin:0;line-height:1.3}
 .score .turn-clock{width:25px;height:25px;flex-basis:25px}
 .score .turn .turn-clock>span{font-size:14px}
 #phone-game-info{border:0;padding:0;font-size:clamp(9px,2.4vw,11px);line-height:1.3}
}

.invite-entry{width:min(360px,calc(100vw - 32px));max-height:calc(var(--visible-height,100dvh) - 32px);overflow:auto;box-sizing:border-box;border:1px solid #d6b15b;border-radius:18px;background:#101c18;color:#fff3d7;padding:22px;direction:rtl}
.invite-entry::backdrop{background:#000b}
.invite-entry h2{font-size:22px;margin:0 0 8px}.invite-entry p{font-size:14px}
.invite-entry label{display:block;margin:12px 0 5px}.invite-entry input,.invite-entry select{box-sizing:border-box;width:100%;padding:10px;border:1px solid #84958a;border-radius:8px;background:#192b25;color:#fff;font:inherit;font-size:16px}
.invite-entry .primary{width:100%;margin-top:18px;padding:12px;border-radius:9px;background:#e9c66c;color:#19221d;font:inherit;font-weight:bold;border:0}

.invite-share-actions{display:flex;gap:10px;margin:18px 0}
.invite-share-actions>a,.invite-share-actions>button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:52px;padding:10px;border:1px solid #7b9991;border-radius:12px;background:#1b3430;color:#fff;text-decoration:none;font:inherit;font-weight:bold;cursor:pointer}
.invite-share-actions .invite-whatsapp{background:#167b46;border-color:#39ce80}
.invite-share-actions svg{width:27px;height:27px;flex-shrink:0}
#invite-more:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
#invite-more a{flex:1;text-align:center;border:1px solid #7b9991;border-radius:8px;padding:10px;color:#fff3d7;text-decoration:none}
#invite-more p{flex-basis:100%;margin:0}#copy-invite{width:100%;margin-top:8px}
/* Generous drop area, extending toward the player's hand on touch screens. */
#drop-zone{left:18%;top:27%;width:64%;height:48%}
@media(max-width:900px),(pointer:coarse){
 #drop-zone{left:9%;top:29%;width:82%;height:49%}
 #drop-zone span{font-size:clamp(12px,3vw,16px);padding:6px 12px}
}
/* Modest mobile opponent-card enlargement, retaining the same seat anchors. */
@media(max-width:700px){
 .seat .back-stack,.seat .back-stack.has-exposed{--back-width:clamp(23px,6.8vw,34px);--back-step:2.3px!important;width:calc(var(--back-width) + (var(--back-count) - 1)*var(--back-step))!important;height:calc(var(--back-width)*1.45)}
 .seat .back-stack i{left:calc(var(--back-index)*var(--back-step))}
 .seat .back-stack .stack-face{left:calc(var(--hidden-count)*var(--back-step) + var(--face-slot)*15px);font-size:clamp(14px,3.8vw,19px)}
 .seat .back-stack .stack-face span{font-size:clamp(15px,4vw,20px)}
 .seat .back-stack .stack-face small{font-size:7px}
}

/* The active player's portrait carries the actual remaining turn time. */
.turn,.score .turn{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);border:0!important;flex:0 0 0!important}
.seat .avatar{position:relative;overflow:visible}
.seat.active .avatar{box-shadow:none}
.seat.timed-turn .avatar::after{content:'';position:absolute;inset:-6px;border-radius:50%;padding:4px;pointer-events:none;background:conic-gradient(var(--ring-color,#f4cf70) var(--seat-progress,0deg),#ffffff26 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.seat.timer-urgent{--ring-color:#ff715d}
@media(max-width:700px){
 .seat.south{display:flex;bottom:calc(58px + var(--hand-size)*1.75 + 9px)}
 .seat.south .avatar{display:block;width:36px;height:36px;margin-bottom:3px}
 .seat.south strong{font-size:10px;padding:2px 5px}
 .seat.north .avatar{display:block;width:36px;height:36px}
 .seat.timed-turn .avatar::after{inset:-5px;padding:3px}
}
@media(max-width:700px) and (max-height:500px){.seat.south .avatar,.seat.north .avatar{width:28px;height:28px}.seat.south strong{display:none}}

/* A fixed crown identifies the kingdom owner, independently of the turn ring. */
.seat .player-crown{display:none!important}
.seat.kingdom-owner .avatar::before{content:'♛';position:absolute;left:50%;top:-25px;transform:translateX(-50%);font:28px/1 Georgia,serif;color:#f6cf67;text-shadow:0 2px 3px #000;z-index:5;pointer-events:none}
@media(max-width:700px){.seat.kingdom-owner .avatar::before{top:-15px;font-size:20px}.seat.north.kingdom-owner{margin-top:5px}}
/* Avoid duplicate bot labels and keep desktop portraits clear of the trick. */
.seat .player-role{display:none!important}
@media(min-width:701px){
 .seat.south .avatar{width:54px;height:54px}
 .seat.south .count{display:none}
 .seat.south strong{font-size:14px;padding:4px 9px;min-width:100px}
 .seat.north .count{position:relative;bottom:auto;margin-top:6px}
}
@media(min-width:901px){
 .seat.south{bottom:calc(5% + clamp(62px,min(7vw,14vh),110px)*1.55 + 18px)}
}

/* Card identity remains readable while the embedded artwork is decoded. */
.card-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:4px;color:#171717;font:bold 18px/1 Georgia,serif;background:#fff9eb;border-radius:inherit;pointer-events:none}
.card-fallback.red{color:#bd2018}.card-fallback>span{font-size:22px}.card-art{position:relative;z-index:1}
.seat .flag-badge{right:-9px;bottom:0;min-width:20px;width:20px;height:20px;font-size:15px;line-height:20px;border-width:1px;pointer-events:none}
.seat .flag-badge:empty{display:none}
@media(max-width:700px){.seat .flag-badge{right:-9px;bottom:0;min-width:16px;width:16px;height:16px;font-size:12px;line-height:16px}}

.auction .bid-history{font-size:12px;line-height:1.5;color:#f1d38d;margin:5px 0;overflow-wrap:anywhere}

.action-icon{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.exit .action-icon{width:27px;height:27px}#exit-home{display:block;width:100%;margin-top:10px}
/* Mid-size desktop windows: reserve separate space for reactions and the hand. */
@media(min-width:901px) and (max-width:1200px){
 .reaction-panel,.reaction-panel.collapsed{width:21%;padding:10px}
 .reactions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
 .reactions button{min-width:0;white-space:nowrap;font-size:clamp(12px,1.4vw,16px);padding:5px 3px;gap:3px}
 .reactions button span{font-size:20px}
 #reaction-toggle{font-size:14px;gap:4px}
 .hand{left:53%;width:50%;--card-width:clamp(58px,6.3vw,76px)}
}

/* One brief sparkle when the kingdom crown changes owner. */
.seat.kingdom-owner.crown-arrived .avatar::before{animation:crown-arrival 1.1s ease-out 1}
@keyframes crown-arrival{0%{filter:brightness(1);text-shadow:0 2px 3px #000}35%{filter:brightness(1.7);text-shadow:0 0 5px #fff9ce,0 0 14px #ffd452,0 0 24px #e7aa39}100%{filter:brightness(1);text-shadow:0 2px 3px #000}}
@media(prefers-reduced-motion:reduce){.seat.kingdom-owner.crown-arrived .avatar::before{animation:none}}

/* Exposed cards extend toward the table, never beyond the phone edge. */
@media(max-width:700px){
 .seat .back-stack.has-exposed{width:calc(var(--hidden-count)*var(--back-step) + (var(--exposed-count) - 1)*15px + var(--back-width))!important}
 .seat.east .back-stack,.seat.east .back-stack.has-exposed{left:auto!important;right:0!important;transform:none!important}
 .seat.west .back-stack,.seat.west .back-stack.has-exposed{left:0!important;right:auto!important;transform:none!important}
}
/* Desktop/tablet seats: cards occupy their own lane, not the portrait or name. */
@media(min-width:701px){
 .seat .back-stack,.seat .back-stack.has-exposed{display:block;position:absolute;margin:0;transform:none;--back-width:34px;--back-step:4px!important;width:calc(var(--hidden-count)*4px + max(0,var(--exposed-count) - 1)*23px + var(--back-width));height:49px;min-width:34px;z-index:1}
 .seat .back-stack i{top:0;left:calc(var(--back-index)*4px);width:34px;height:49px;transform:none;margin:0;border-width:2px}
 .seat .back-stack .stack-face{top:0;left:calc(var(--hidden-count)*4px + var(--face-slot)*23px);width:34px;height:49px;transform:none;font-size:17px;padding-left:3px;align-items:flex-start}
 .seat .back-stack .stack-face span{font-size:20px}
 .seat.north .back-stack{top:12px;left:calc(100% + 12px);right:auto;margin:0;min-width:34px}
 .seat.west .back-stack,.seat.east .back-stack{top:auto;bottom:calc(100% + 30px);left:50%;right:auto;transform:translateX(-50%)}
 .seat.north .count,.seat.west .count,.seat.east .count{position:relative;margin-top:5px;bottom:auto}
 .seat.south{bottom:var(--desktop-south-bottom,28%)}
 #trick .card{width:clamp(64px,6.5vw,90px);height:clamp(91px,9.25vw,128px)}
}
/* Reserve the desktop centre for played cards, including the final trick. */
@media(min-width:701px){
 .seat.north{top:8%}
 #trick .card{top:var(--desktop-trick-top,46%)}
 #trick .p2{transform:translate(-50%,-100%) rotate(-2deg)}
 #trick .p0{transform:translate(-50%,0) rotate(2deg)}
 #trick .p1{transform:translate(-145%,-50%) rotate(-3deg)}
 #trick .p3{transform:translate(45%,-50%) rotate(3deg)}
}
.match-finish{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;border:1px solid #e9c970;border-radius:24px;padding:24px;background:radial-gradient(ellipse at top,#3c4930,#10221c 55%,#091611);color:#fff4d8;text-align:center;box-shadow:0 0 50px #e2b64e30;direction:rtl}
.match-finish::backdrop{background:#020b08d9;backdrop-filter:blur(6px)}
.finish-trophy{font-size:60px;line-height:1.2;filter:drop-shadow(0 0 16px #f7ce6380);animation:finish-arrive .65s ease-out}
.finish-sparkles{color:#ffdc75;font-size:24px;letter-spacing:12px;animation:finish-shine 1.4s ease-out 2;pointer-events:none}
.finish-eyebrow{color:#d6c48d;font-size:13px;margin:10px 0 4px}.match-finish h2{font-size:28px;margin:6px}.finish-winner{font-size:19px;color:#ffe29a;margin:8px 0 18px;overflow-wrap:anywhere}.match-finish h3{font-size:14px;color:#d6cbb0;margin:12px 0}
.finish-scores{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}.finish-scores li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #ffffff20;border-radius:10px;background:#ffffff07;text-align:right}.finish-scores span{overflow-wrap:anywhere}.finish-scores b{font-size:23px;direction:ltr}.finish-scores .winner{background:#e5be5720;border-color:#e4bd60}
.match-finish button{display:block;width:100%;padding:12px;border-radius:12px;margin-top:8px;font-weight:bold}.match-finish .primary{background:linear-gradient(120deg,#f9dc8c,#d1a342);color:#202b1d}.match-finish .secondary{background:#ffffff09;border:1px solid #ffffff35;color:#f6e9c9}.match-finish button:disabled{opacity:.5}
@keyframes finish-arrive{from{transform:translateY(12px) scale(.75);opacity:0}to{transform:none;opacity:1}}@keyframes finish-shine{0%,100%{opacity:.5}50%{opacity:1;text-shadow:0 0 15px #ffce5a}}
@media(max-width:380px),(max-height:600px){.match-finish{padding:14px;border-radius:18px}.finish-trophy{font-size:40px}.finish-sparkles{font-size:18px}.match-finish h2{font-size:23px}.finish-winner{font-size:15px;margin-bottom:10px}.finish-scores li{padding:8px}.finish-scores b{font-size:19px}.finish-scores{gap:5px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.finish-trophy,.finish-sparkles{animation:none}}
/* Keep score signs, digits and counters stable in the Arabic layout. */
.score-teams b,#individual-scores b,.round-points strong,.finish-scores b{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.score-caption,#phone-game-info,.mode-note{line-height:1.5}
.seat .count{font-variant-numeric:tabular-nums}
.language-picker{display:flex;justify-content:center;gap:6px;margin-bottom:12px;direction:ltr}.language-picker button{border:1px solid #ffffff40;border-radius:20px;padding:7px 18px;background:#ffffff09;color:#eee;font-size:14px}.language-picker button[aria-pressed=true]{background:#ebc972;color:#18251b;border-color:#ffe19a}
html[lang=en] #phone-game-info,html[lang=en] .score-caption,html[lang=en] .mode-note{direction:ltr}html[lang=en] .finish-scores li{text-align:left}@media(max-width:700px){html[lang=en] #choose-game:after{content:'Game ⌄'}}
@media(max-width:700px){html[lang=en] .side-menu>button{font-size:0}html[lang=en] #phone-game-info{font-size:clamp(8px,2.3vw,11px)}}

/* Keep the longer English wordmark inside the phone header. */
@media(max-width:700px){html[lang=en] .brand{width:clamp(100px,29vw,126px);min-width:0;gap:2px}html[lang=en] .brand h1{font-family:Tahoma,Arial,sans-serif;font-size:clamp(17px,5.1vw,24px);letter-spacing:-.7px;white-space:nowrap;line-height:1.2}html[lang=en] .brand .crown{display:none}}
/* Phone home: size the content to the usable viewport, including browser bars. */
#game-lobby .lobby-entry-options{display:flex;gap:8px;margin-top:8px}
#game-lobby .lobby-entry-options button{flex:1;min-height:42px;border:1px solid #ffffff40;border-radius:12px;background:#ffffff0d;color:inherit;font:inherit;font-size:13px;padding:8px}
#game-lobby button:disabled{opacity:.6;cursor:wait}
@media(max-width:700px){
 #game-lobby{width:min(440px,calc(100% - 20px));max-height:calc(100svh - 20px);padding:clamp(10px,2svh,18px);border-radius:22px;overscroll-behavior:contain}
 #game-lobby .language-picker{margin-bottom:clamp(4px,1svh,8px)}
 #game-lobby .language-picker button{min-height:34px;padding:5px 16px;font-size:13px}
 #game-lobby .lobby-brand>span{font-size:clamp(16px,3svh,24px)}
 #game-lobby .lobby-brand>b{font-size:clamp(28px,5svh,38px);letter-spacing:-1px}
 #game-lobby h2{font-size:clamp(17px,3svh,21px);line-height:1.2;margin:clamp(7px,1.5svh,12px) 0}
 #game-lobby .lobby-games{gap:8px}
 #game-lobby .lobby-games>button{padding:6px 3px 8px;border-radius:14px}
 #game-lobby .lobby-fan{width:104px;height:clamp(57px,12svh,88px);margin-top:3px}
 #game-lobby .lobby-fan img{width:clamp(32px,7svh,46px);height:auto;top:5px;left:8px}
 #game-lobby .lobby-fan img:nth-child(2){left:23px}
 #game-lobby .lobby-fan img:nth-child(3){left:38px}
 #game-lobby .lobby-fan img:nth-child(4){left:53px}
 #game-lobby .lobby-games strong{font-size:clamp(17px,3.1svh,22px);margin-top:2px}
 #game-lobby .lobby-modes{gap:8px}
 #game-lobby .lobby-modes button{min-height:44px;font-size:clamp(14px,2.7svh,18px);padding:7px 3px}
 #game-lobby #lobby-note{font-size:11px;line-height:1.35;margin:7px 0}
 #game-lobby #lobby-start{min-height:44px;padding:8px;font-size:clamp(19px,3.3svh,23px);margin-top:2px;border-radius:13px}
 #game-lobby #lobby-back{padding-top:7px;font-size:12px}
}
/* Bound each score entry so user names cannot stretch the score panel. */
#individual-scores{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
#individual-scores>div{min-width:0;max-width:100%}
#individual-scores span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
@media(max-width:700px){
 #individual-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1 1 0;gap:5px;overflow:hidden}
 #individual-scores>div{display:flex;gap:3px;min-width:0;overflow:hidden;align-items:center}
 #individual-scores span{flex:1 1 0;text-align:start}
 #individual-scores b{flex:0 0 auto;font-size:clamp(13px,3.5vw,18px);line-height:1.3}
}
#play #play-label{font-size:inherit}
#sort .sort-cards-icon{width:30px;height:28px;fill:var(--brand-green,#123d32);stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
#sort .sort-label{font-size:14px!important}
.seat-message{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);z-index:12;background:#fff4d7;color:#153542;border:1px solid #c6a365;border-radius:13px;padding:7px 16px;font:bold 17px Tahoma,Arial;box-shadow:0 3px 10px #0004;white-space:nowrap;pointer-events:none}
.seat-message:after{content:'';position:absolute;top:100%;left:calc(50% - 5px);border:5px solid transparent;border-top-color:#fff4d7}.seat-message[hidden]{display:none}
@media(max-width:700px){.play-controls #sort{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:3px;width:53px;color:inherit}.play-controls #sort .sort-cards-icon{width:25px;height:23px}.play-controls #sort .sort-label{font-size:8px!important;line-height:1.1;white-space:nowrap}.seat-message{font-size:13px;padding:5px 12px}}
/* Compact desktop score panel: readable hierarchy without reaching opponent cards. */
@media(min-width:901px){
 .score{width:clamp(165px,17vw,220px);padding:10px 12px 8px;border-radius:15px}
 .score-teams{margin-bottom:4px}.score-teams>div{font-size:15px}.score-teams b{font-size:30px;line-height:1.15}
 .score-caption{font-size:13px;padding:5px 0 0;gap:5px}.score-caption #round{font-size:13px}
 .score .choose-game{font-size:13px;padding:5px 0;margin-top:2px}
 .score .mode-note{font-size:12px;line-height:1.3;margin:3px 0 0}
 #individual-scores{gap:4px 8px}#individual-scores span{font-size:12px}#individual-scores b{font-size:25px;line-height:1.15}
}
@media(min-width:901px){.score{width:min(190px,16vw)}}
#sort .sort-label,#sort .sort-cards-icon{color:inherit}html[data-theme="3"] #sort{color:#153542}html[data-theme="1"] #sort{color:#f4ebd8}