@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#102321;--panel:#19302d;--line:#304740;--muted:#9bb2a8;--gold:#e5bd70;--cream:#f3efdf;--green:#88bfa0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 20%,#213a32,transparent 60%),var(--bg);font:14px 'DM Sans',sans-serif;color:var(--cream)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}header{height:96px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;gap:12px;color:var(--cream);text-decoration:none;letter-spacing:2px;font:800 20px Manrope,sans-serif}.brand b{color:var(--gold)}.brand small{display:block;font:9px 'DM Sans';letter-spacing:4px;margin-top:5px;color:var(--muted)}.logo{font-size:35px;color:var(--gold)}.mode{color:var(--muted);font-size:10px;letter-spacing:2px}.mode i,.live-dot{display:inline-block;background:#8ecdaa;width:6px;height:6px;border-radius:50%;margin-right:9px}main{max-width:1500px;margin:auto;padding:42px 5% 0}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold)}h1{font:500 38px/1.15 Manrope,sans-serif;margin:10px 0}.heading p{color:var(--muted);line-height:1.8;margin-right:5%}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.game{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#152b26}.table-top{display:flex;justify-content:space-between;padding:19px 24px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}.table-top b{color:var(--gold);margin-left:7px}.felt{height:370px;position:relative;background:radial-gradient(ellipse,#287053 0,#1b563e 57%,#173b2e 75%);margin:25px 28px 0;border:8px solid #354b36;border-radius:180px;box-shadow:0 0 0 2px #6b6b44,inset 0 0 0 2px #78957344,inset 0 0 50px #061e26}.seat{position:absolute;text-align:center;z-index:2;display:flex;align-items:center;flex-direction:column;gap:4px}.avatar{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;border:2px solid #c6ae79;background:#39594b;color:#fff;font:600 19px Manrope;box-shadow:0 3px 14px #0005}.seat strong{font-size:12px}.bot-status{font-size:9px;color:#aecaba}.opponent.active .avatar{box-shadow:0 0 0 5px #e5bd7040}.opponent.active .bot-status{color:var(--gold)}#bot0{left:10%;top:110px}#bot1{left:50%;top:-17px;transform:translateX(-50%)}#bot2{right:10%;top:110px}.backs{display:flex;padding-right:24px;margin-top:3px}.mini{width:19px;height:27px;border:1px solid #d6cc9e;border-radius:3px;margin-right:-12px;background:repeating-linear-gradient(45deg,#214742 0 3px,#416355 3px 4px)}.you{bottom:-24px;left:50%;transform:translateX(-50%)}.you .avatar{background:var(--gold);color:#24362b}.you strong span{font-size:8px;color:var(--gold);margin-left:5px}.table-brand{position:absolute;top:95px;left:50%;transform:translateX(-50%);font:800 17px Manrope;color:#9bb89155;letter-spacing:3px;white-space:nowrap;text-align:center}.table-brand small{display:block;font-size:7px;letter-spacing:3px;margin-top:5px}.piles{position:absolute;top:154px;left:50%;transform:translateX(-50%);display:flex;gap:24px;text-align:center}.piles small{display:block;color:#aac5ad;font-size:8px;letter-spacing:1px;margin-top:10px}.card{color:#24352e;background:#f8f5e9;border:1px solid #d5d2c3;border-radius:7px;width:59px;height:84px;position:relative;flex-shrink:0;padding:5px;box-shadow:0 3px 5px #0003;transition:transform .16s}.card.red{color:#b84640}.card .rank{position:absolute;top:5px;left:6px;font:bold 15px Georgia}.card .suit{font-size:27px}.card .bottom-rank{position:absolute;bottom:5px;right:6px;font:bold 12px Georgia;transform:rotate(180deg)}.card.joker .suit{font-size:20px}.card.joker .rank{font:700 9px sans-serif}.card.selected{transform:translateY(-13px);outline:3px solid var(--gold)}.card.back{background:repeating-linear-gradient(45deg,#244c43 0 4px,#365d4b 4px 5px);box-shadow:inset 0 0 0 4px #d8ca9c,0 3px 4px #0005;color:var(--gold);font-size:30px}.card.empty{background:#123d2b66;border:1px dashed #83a688;color:#aac5ad}.countdown{position:absolute;inset:0;border-radius:170px;background:#163e30ed;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.countdown b{font:500 72px Manrope;color:var(--gold)}.countdown small{color:var(--muted)}[hidden]{display:none!important}.hand-area{padding:43px 22px 20px}.hand-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hand-heading>div{flex:1}.hand-heading strong{font-size:12px}.hand-heading #cardCount{font-size:10px;color:var(--muted);margin-left:8px}.quiet{background:transparent;border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:10px 13px;font-size:11px}.quiet:hover{background:#ffffff0a}.hand-area>p{font-size:11px;color:var(--muted);min-height:30px;line-height:1.5}.hand{display:flex;gap:12px;min-height:120px;overflow-x:auto;padding:17px 4px 5px;align-items:flex-start}.group{display:flex;flex-direction:column;gap:9px}.group-cards{display:flex;padding-right:13px}.group-cards .card{margin-right:-13px}.group-label{font-size:8px;letter-spacing:.5px;color:var(--muted);white-space:nowrap}.group-label.pure{color:#9cddaf}.group-label.impure{color:#d8b6ed}.group-label.set{color:#a0c6e9}.action-bar{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:15px}.action-bar>span{font-size:10px;color:var(--muted);flex:1}.primary,.secondary{border-radius:7px;padding:12px 19px;font-weight:700;font-size:12px}.primary{background:var(--gold);color:#23352c;border:1px solid var(--gold)}.secondary{background:#27473b;border:1px solid #567462;color:var(--cream)}aside{display:flex;flex-direction:column;gap:17px}.panel{padding:23px;border:1px solid var(--line);border-radius:12px;background:#1c342dd0}.balance>div{font:500 43px Manrope;margin:14px 0 4px}.balance .coin{font-size:28px;color:var(--gold);margin-right:12px}.balance small{font:12px 'DM Sans';color:var(--muted);margin-left:8px}.balance p{font-size:10px;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);margin:19px 0}.balance>span:last-child{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.balance b{color:var(--cream)}h2{font:500 19px/1.5 Manrope;margin:13px 0 20px}.check{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding:13px 0;color:var(--muted);font-size:11px}.check.good{color:#a5dbb7}.coach p,.note p{font-size:11px;line-height:1.8;color:var(--muted)}.note{display:flex;gap:10px;padding:0 10px}.note>span{color:var(--gold);margin-top:12px}.note b{color:var(--cream);font-weight:500}.restart{align-self:flex-start;margin-left:8px}footer{display:flex;justify-content:space-between;color:#718b7d;padding:28px 0;font-size:9px;letter-spacing:1px}footer b{margin:0 10px;color:var(--gold)}dialog{background:#1c342d;color:var(--cream);border:1px solid #65836a;border-radius:16px;max-width:490px;width:90%;padding:32px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#061712cc;backdrop-filter:blur(5px)}dialog h2{font-size:25px;margin:6px 0 17px}dialog p,dialog li{color:#bdcec2;font-size:13px;line-height:1.8}dialog li{margin:9px 0}#dialogActions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.close{position:absolute;right:13px;top:10px;background:none;border:0;color:var(--muted);font-size:23px}.dealing{animation:deal .3s both}@keyframes deal{from{opacity:0;transform:translate(10px,-60px) rotate(10deg)}to{opacity:1;transform:translate(0,0)}}@media(min-width:1350px){.card{width:65px;height:91px}.felt{height:395px}.piles{top:170px}}@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 230px}.panel{padding:18px}.card{width:51px;height:76px}.felt{margin:25px 16px 0}.hand-area{padding-left:15px;padding-right:15px}.group-cards .card{margin-right:-18px}.group-cards{padding-right:18px}.hand{gap:9px}.heading h1{font-size:32px}}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr}.note,.restart{display:none}.heading p{font-size:12px}.felt{height:340px}.card{width:59px;height:84px}}@media(max-width:540px){header{height:77px;padding:0 18px}.brand{font-size:15px}.brand small{font-size:7px;letter-spacing:2px}.mode{display:none}main{padding:26px 12px 0}.heading{margin-left:6px}.heading h1{font-size:29px}.heading p{display:none}.table-top{padding:15px 12px;font-size:9px}.felt{margin:23px 10px 0;height:320px;border-width:5px;border-radius:120px}#bot0{left:3%;top:105px}#bot2{right:3%;top:105px}.table-brand{font-size:11px;top:106px;letter-spacing:1px}.table-brand small{font-size:5px}.piles{gap:13px;top:157px}.piles .card{height:70px;width:49px}.avatar{height:36px;width:36px}.backs{padding-right:20px}.mini{width:14px;height:21px;margin-right:-9px}.hand-heading .quiet{padding:8px}.hand-heading>div{flex-basis:100%}.hand .card{width:50px;height:76px}.action-bar{flex-wrap:wrap}.action-bar>span{flex-basis:100%}.action-bar button{flex:1}aside{gap:10px}.panel{padding:15px}.eyebrow{font-size:8px}.balance>div{font-size:36px}.coach h2{font-size:15px;margin-bottom:10px}.coach p{display:none}.check{font-size:10px;padding:10px 0}footer{font-size:7px;letter-spacing:0}.hand-area{padding-top:40px}.hand{min-height:124px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Cut-joker indicator and pointer-based manual arranging. */
.cut-display{position:relative}.cut-display .card{display:flex;align-items:center;justify-content:center;border:2px solid var(--gold)}#wildRank{position:absolute;left:50%;transform:translateX(-50%);top:117px;width:100px;font-size:8px;color:var(--gold)}.wild-badge{position:absolute;bottom:20px;left:3px;right:3px;font:700 7px sans-serif;letter-spacing:1px;background:#b38b32;color:#fff;border-radius:3px;padding:2px}.hand .card{touch-action:none;user-select:none;cursor:grab}.hand .card.dragging{opacity:.45;outline:3px solid var(--gold);cursor:grabbing}.group.drop-target{outline:2px dashed var(--gold);outline-offset:4px;border-radius:5px}#newGroup{margin:10px 0 0;border-style:dashed;padding:13px 18px}#newGroup.drop-target{background:#e5bd7033;border-color:var(--gold)}.hand-area .drag-hint{font-size:10px;min-height:0;margin:8px 0;color:var(--muted)}.piles{gap:15px}@media(max-width:540px){.piles{gap:9px}#wildRank{top:98px;font-size:7px;width:80px}.piles small{font-size:7px}.hand-area .drag-hint{font-size:9px}}@media(min-width:1350px){#wildRank{top:124px}}

.arranged-flash .card{animation:arranged .45s ease-out}@keyframes arranged{from{transform:translateY(8px);box-shadow:0 0 0 2px #e5bd70}to{transform:translateY(0)}}

/* Whole-hand layout: no horizontal hand scrolling at any width. */
.game,.hand-area{min-width:0}.hand{flex-wrap:wrap;overflow:visible;max-width:100%;gap:14px}.group{max-width:100%;min-width:0}.group-cards{flex-wrap:wrap;row-gap:12px;max-width:100%}.mobile-group-tag{display:none}.tap-arrange{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.move-controls{display:flex;gap:8px;align-items:center}.move-controls>span{flex:1;font-size:11px;color:var(--muted)}.move-controls .quiet,.group-targets .quiet{min-height:44px}.group-targets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.group-targets .quiet{padding:8px 10px}.target-pure{border-color:#78be94;color:#b7e7c7}.target-impure{border-color:#b395d0;color:#e0c7f5}.target-set{border-color:#8aabc7;color:#bddcf4}.group-targets .quiet:disabled{opacity:.65}.hand .card.selected{z-index:2}
@media(max-width:850px){
 header{height:64px}main{padding-top:14px}.heading{display:none}.table-top{padding:11px 14px}.felt{height:238px;margin-top:18px;border-radius:120px}.table-brand{top:69px;font-size:11px;letter-spacing:1px}.table-brand small{font-size:6px}.piles{top:107px;gap:12px}.piles .card{height:63px;width:44px}.piles small{font-size:7px;margin-top:6px}#wildRank{top:84px;width:88px;font-size:7px}#bot0,#bot2{top:68px}.avatar{height:32px;width:32px;font-size:15px}.seat strong{font-size:10px}.bot-status{font-size:8px}.backs{display:none}.you{bottom:-20px}.hand-area{padding:32px 12px 14px}.hand-heading{gap:8px}.hand-heading>div{flex-basis:100%}.hand-heading .quiet{min-height:40px;flex:1}.hand-area>p{min-height:0;margin:8px 0;font-size:10px}.hand-area .drag-hint{font-size:10px;line-height:1.5}
 .hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px 5px;padding:8px 2px;min-height:0;overflow:visible}.hand .group,.hand .group-cards{display:contents}.hand .group-label{display:none}.hand .card{width:100%;height:72px;min-width:0;margin:0;padding:3px;border-radius:5px}.hand .card .rank{font-size:14px;top:4px;left:4px}.hand .card .suit{font-size:22px}.hand .card .bottom-rank{display:none}.hand .card.joker .rank{font-size:7px}.hand .card .wild-badge{bottom:17px;font-size:6px;padding:1px;letter-spacing:0}.hand .card .mobile-group-tag{display:block;position:absolute;bottom:3px;left:0;right:0;font:700 8px sans-serif;color:#526c5b}.hand .card.meld-pure{border-bottom:4px solid #6ead81}.hand .card.meld-impure{border-bottom:4px solid #ad83ce}.hand .card.meld-set{border-bottom:4px solid #75a0c5}.hand .card.selected{transform:translateY(-4px);outline:3px solid var(--gold)}.hand .group.drop-target .card{box-shadow:0 0 0 2px var(--gold)}
 .tap-arrange{margin-top:8px;padding-top:8px}.move-controls .quiet{padding:8px 12px}.group-targets{gap:5px}.group-targets .quiet{font-size:10px;flex:1 0 auto}#newGroup{min-height:44px;padding:9px 15px;margin-top:8px}.action-bar{margin-top:10px;padding-top:10px}.action-bar button{min-height:44px}.action-bar>span{font-size:11px}.restart{display:block;grid-column:1/-1}aside{margin-top:0}.hand .card{touch-action:none}footer{gap:12px}
}
@media(max-width:359px){.hand{grid-template-columns:repeat(6,minmax(0,1fr))}.hand .card{height:68px}.move-controls>span{font-size:9px}main{padding-left:8px;padding-right:8px}.hand-area{padding-left:9px;padding-right:9px}.piles{gap:8px}}

/* Separate visible group panels; primary play actions immediately follow cards. */
.hand{gap:16px;padding-top:10px}.hand .group{background:#0c201a;border:1px solid #476558;border-radius:10px;padding:12px 9px 10px;gap:12px}.hand .group-label{order:-1;display:block;font-size:10px;line-height:1.4;white-space:normal;letter-spacing:.3px}.hand .group-pure{border-color:#78be94}.hand .group-impure{border-color:#b395d0}.hand .group-set{border-color:#8aabc7}.hand .card.selected{outline:3px solid #ffcc64;box-shadow:0 0 0 5px #ffcc6433}.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;padding-top:12px}.action-bar #discard,.action-bar #finish{min-height:52px;font-size:15px;font-weight:800}.action-bar #discard{background:#e6ede7;color:#20382b;border-color:#e6ede7}.action-bar #finish{background:#edbf63;color:#20382b}.action-bar #selectedText{grid-column:1/-1;min-height:18px;font-size:12px}.action-bar #groupSelected,.action-bar #clearSelection{min-height:44px}.action-bar button:disabled{opacity:.48}
@media(max-width:850px){
 .hand{display:flex;flex-wrap:wrap;gap:14px 12px;padding:8px 0;align-items:stretch}.hand .group{display:flex;flex-direction:column;flex:1 1 calc(50% - 6px);max-width:100%;min-width:0;padding:9px 7px 10px;gap:10px}.hand .group.group-wide{flex-basis:100%}.hand .group-cards{display:grid;grid-template-columns:repeat(var(--group-columns),minmax(0,1fr));gap:8px 4px;padding:0;width:100%}.hand .group-label{display:block;font-size:9px;min-height:13px;margin:0;order:-1}.hand .card{height:70px;width:100%;max-width:64px;margin:0}.hand .card .mobile-group-tag{display:none}.hand .card .bottom-rank{display:block;font-size:10px;right:3px;bottom:3px}.hand .card.selected{transform:translateY(-3px)}.action-bar{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:12px 0 0;margin-top:8px;gap:8px}.action-bar>span{flex-basis:auto}.action-bar #discard,.action-bar #finish{font-size:15px;min-height:52px}.action-bar #groupSelected{font-size:12px}.hand-area .drag-hint{font-size:11px;color:#c4d9ca}.hand .card .wild-badge{bottom:17px}
}
@media(max-width:359px){.hand{gap:12px 8px}.hand .group{padding-left:5px;padding-right:5px}.hand .group-cards{gap:8px 3px}.hand .card{height:65px}.hand .card .rank{font-size:12px}.hand .card .suit{font-size:20px}.action-bar #discard,.action-bar #finish{font-size:14px}}