:root{--ink:#3d2a6d;--ink-soft:#8a7fb5;--muted:#9a8fc2;--blue:#3ea6ff;--blue-deep:#1f8fff;--blue-shadow:#156fd0;--pink:#ff5fa2;--yellow:#ffd23f;--yellow-shadow:#d8a800;--green:#7ed957;--purple:#a66cff;--red:#ff4d6d;--white:#fff;--panel-shadow:0 6px 0 #3d2a6d1f, 0 14px 30px #143c7826;--font-display:"Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;--font-body:"Nunito", "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--ink)}.bg{background:linear-gradient(#5fd0ff 0%,#79d9ff 45%,#4fb6ff 100%);position:fixed;inset:0}.bg:before{content:"";opacity:.09;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='white'><path transform='translate(14 12) scale(1.1)' d='M12 21s-7.5-4.6-9.3-9.2C1.4 8.4 3.6 5 7 5c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.4 0 5.6 3.4 4.3 6.8C19.5 16.4 12 21 12 21z'/><path transform='translate(76 14) scale(1.1)' d='M12 2l7 10-7 10-7-10z'/><path transform='translate(14 74) scale(1.1)' d='M12 2c3 4 9 7.5 9 12a4.5 4.5 0 0 1-8 2.8c.2 2 .8 3.2 2 4.2H9c1.2-1 1.8-2.2 2-4.2A4.5 4.5 0 0 1 3 14c0-4.5 6-8 9-12z'/><g transform='translate(76 74) scale(1.1)'><circle cx='12' cy='7.2' r='5.2'/><circle cx='6.6' cy='13.6' r='5.2'/><circle cx='17.4' cy='13.6' r='5.2'/><circle cx='12' cy='12.6' r='3.6'/><path d='M10.9 13.5c-.1 3-.8 5.3-2.6 7.5h7.4c-1.8-2.2-2.5-4.5-2.6-7.5z'/></g></svg>");background-size:120px 120px;position:absolute;inset:0}.bg:after{content:"";background:radial-gradient(90% 70% at 50% 40%,#0000 60%,#143c8c2e 100%);position:absolute;inset:0}.stage{transform-origin:0 0;width:390px;height:844px;position:fixed}.h{font-family:var(--font-display);letter-spacing:-.01em;font-weight:800}.panel{background:var(--white);box-shadow:var(--panel-shadow);border-radius:22px}.label{color:#fff;text-shadow:0 2px #3d2a6d40;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:800}.pill{border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:800;display:inline-flex}.btn{cursor:pointer;min-height:54px;font-family:var(--font-display);color:#fff;border:0;border-radius:20px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:20px;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active{transform:translateY(4px)}.btn.blue{background:var(--blue);box-shadow:0 5px 0 var(--blue-shadow), 0 10px 20px #3ea6ff59}.btn.blue:active{box-shadow:0 1px 0 var(--blue-shadow)}.btn.yellow{background:var(--yellow);color:#6b4a12;box-shadow:0 5px 0 var(--yellow-shadow), 0 10px 20px #ffd23f59}.btn.yellow:active{box-shadow:0 1px 0 var(--yellow-shadow)}.btn.white{color:var(--ink);background:#fff;box-shadow:0 5px #d9e2f5,0 10px 20px #143c781f}.btn:disabled{filter:saturate(.3)brightness(1.1);cursor:default;transform:none}.avatar{font-family:var(--font-display);color:#fff;border:4px solid #fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:800;display:flex;position:relative;box-shadow:0 4px 10px #143c782e}.avatar.turn{box-shadow:0 0 0 4px var(--yellow), 0 4px 10px #143c782e;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 0 4px var(--yellow), 0 4px 10px #143c782e}50%{box-shadow:0 0 0 7px #ffd23fb3,0 4px 10px #143c782e}}.avatar .count{background:var(--ink);color:#fff;border:2px solid #fff;border-radius:11px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 4px;font-size:12px;font-weight:800;display:flex;position:absolute;bottom:-6px;right:-6px}.avatar .down{background:var(--green);border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:-4px;left:-4px}.card{font-family:var(--font-display);touch-action:none;background:#fff;border-radius:8px;flex:none;font-weight:800;position:relative;overflow:hidden;box-shadow:0 2px #d9e2f5,0 6px 12px #143c782e}.card .idx{text-align:center;flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute;top:4%;left:6%}.card .idx svg{margin-top:-1px}.card .pip{position:absolute;top:56%;left:50%;transform:translate(-50%,-50%)}.card.back{background:var(--blue);background-image:repeating-linear-gradient(45deg,#ffffff2e 0 8px,#0000 8px 16px);border:4px solid #fff}.card.back .logo{color:#fff;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.card.joker .pip{top:50%}.card.selected{outline:4px solid var(--yellow);outline-offset:-2px}.card.dragging{box-shadow:0 10px #d9e2f5,0 24px 40px #143c7859}.tabbar{height:68px;box-shadow:var(--panel-shadow);background:#fff;border-radius:26px;justify-content:space-around;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.tab{color:var(--muted);cursor:pointer;font-size:11px;font-weight:800;font-family:var(--font-body);background:0 0;border:0;flex-direction:column;align-items:center;gap:2px;display:flex}.tab.on{color:var(--blue-deep)}.tab .dot{border-radius:14px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.tab.on .dot{background:#e3f0ff}.slot{background:#ffffff14;border:3px dashed #ffffff8c;border-radius:8px;flex:none}.slotgroup{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.slotgroup .name{color:#fff;text-shadow:0 2px #0003;font-size:15px;font-weight:800}.slotgroup.over .slot{background:#ffd23f40;border-color:#ffd23f}.slotgroup.ok .name:after{content:" ✓";color:#7ed957}.cardcount{color:#fff;text-shadow:0 2px #3d2a6d40;align-items:center;gap:4px;font-size:12px;font-weight:800;display:inline-flex}.cardcount .mini{background:#fff;border-radius:2.5px;width:11px;height:15px;position:relative;box-shadow:0 1px #3d2a6d59}.cardcount .mini:after{content:"";background:#ff4d6d;border-radius:50%;width:5px;height:5px;position:absolute;top:4px;left:3px}.cardcount.low{color:#fff;background:#ff4d6d;border-radius:999px;padding:1px 8px;animation:1s ease-in-out infinite blink}@keyframes blink{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.chipstack{width:34px;height:30px;position:relative}.chipstack i{box-sizing:border-box;border:3px solid #fff;border-radius:50%;width:26px;height:26px;position:absolute;left:0}.panel.board{background:#e9f3ff}.panel.board .card{box-shadow:0 3px #c7d8f2,0 8px 16px #143c7838}.toast{z-index:30;text-align:center;color:#c0264d;box-shadow:var(--panel-shadow);z-index:20;background:#fff;border-radius:16px;padding:12px 14px;font-weight:800;position:absolute;top:168px;left:24px;right:24px}.hint{text-align:center;color:#6b4a12;z-index:5;background:#ffd23f;border-radius:14px;padding:10px 14px;font-weight:800;position:absolute;left:16px;right:16px;box-shadow:0 4px #d8a800}.droptarget{outline-offset:3px;background:#ffd23f40;outline:4px solid #ffd23f}.flash{text-align:center;color:#fff;z-index:20;background:#2f8a1f;border-radius:999px;max-width:330px;padding:9px 16px;font-size:14px;font-weight:800;animation:.24s ease-out flashin,.4s ease-in 2.8s forwards flashout;position:absolute;bottom:268px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #143c7847}@keyframes flashin{0%{opacity:0;transform:translate(-50%)translateY(10px)scale(.96)}to{opacity:1;transform:translate(-50%)}}@keyframes flashout{to{opacity:0;transform:translate(-50%)translateY(8px)}}.sheet{z-index:100;background:#1026549e;justify-content:center;align-items:center;padding:20px;animation:.22s ease-out sheetin;display:flex;position:absolute;inset:0}@keyframes sheetin{0%{opacity:0}to{opacity:1}}.sheet .panel{z-index:1;background:#fff;animation:.26s cubic-bezier(.2,1.2,.4,1) sheetpop;position:relative}@keyframes sheetpop{0%{transform:translateY(16px)scale(.96)}to{transform:none}}
