*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--sky-top:#9b28a4;--sky-high:#bd2d99;--sky-mid:#d6338f;--sky-low:#ee3d92;--sky-bottom:#ff6ba6;--cream:#fff7fb;--sugar:#ffe4f1;--sugar-line:#ffc2dd;--frost:#ffffff2e;--mat:#340a4861;--ink:#fff2f8;--ink-dark:#641f4c;--pink:#ff3d92;--pink-dark:#d81b74;--mint:#3ddbb4;--lilac:#b98cff;--lilac-dark:#7c3aed;--gold:#ffc93c;--gold-dark:#d99400;--good:#2ec98a;--danger:#f57;--danger-dark:#d32b53;--card-w:64px;--card-h:90px;--font-display:"Chewy","Comic Sans MS","Chalkboard SE",cursive;--font-body:"Quicksand","Trebuchet MS",system-ui,sans-serif;--rainbow:linear-gradient(100deg,#ff6fb0,#ffa15c,#ffe14f,#6ef0c0,#7fd4ff,#ff6fb0)}html,body{height:100%}body{font-family:var(--font-body);color:var(--ink);overscroll-behavior:none;background-color:var(--sky-mid);background-image:radial-gradient(125% 48% at 50% 108%,#ffd9a0e6 0%,#ff8cbeb3 38%,#ff8cbe00 72%),linear-gradient(177deg,var(--sky-top)0%,var(--sky-high)26%,var(--sky-mid)50%,var(--sky-low)72%,var(--sky-bottom)100%);background-attachment:fixed;min-height:100dvh;font-weight:600}body:before{content:"";position:fixed;z-index:0;pointer-events:none;animation:twinkle 4.5s ease-in-out infinite alternate;background-image:radial-gradient(1.6px at 18% 22%,#fffffff2,#fff0),radial-gradient(1px at 68% 12%,#fffc,#fff0),radial-gradient(2.2px at 42% 68%,#fff6d6e6,#fff0),radial-gradient(1.2px at 88% 44%,#ffffffbf,#fff0),radial-gradient(1.6px at 8% 78%,#ffffffb3,#fff0);background-size:190px 190px,130px 130px,240px 240px,160px 160px,210px 210px;inset:0}@keyframes twinkle{0%{opacity:.45}to{opacity:1}}body:after{content:"";position:fixed;z-index:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");inset:0}button{cursor:pointer;font-family:inherit}#root{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100dvh}h1,h2,h3{font-family:var(--font-display);letter-spacing:.5px;font-weight:400}.screen{display:flex;flex-direction:column;flex:1;align-items: center;gap:12px;width:100%;max-width:560px;margin:0 auto;padding:12px}.center-screen{text-align:center;justify-content:center}.center-screen h1{text-shadow:0 3px #4a1a7273;font-size:30px}.loading-cat{animation:bounce .8s ease-in-out infinite alternate;filter:drop-shadow(0 8px 10px #4a1a7266);font-size:64px}@keyframes bounce{0%{transform:translateY(0)rotate(-4deg)}to{transform:translateY(-14px)rotate(4deg)}}.btn{position:relative;overflow:hidden;font-family:var(--font-display);letter-spacing:.4px;color:#fff;background:linear-gradient(#ff8dc0,var(--pink-dark));box-shadow:0 4px 0 var(--pink-dark),0 9px 16px #3c0a3052;text-shadow:0 1px #0000002e;border:none;border-radius:999px;padding:12px 22px;transition:transform 80ms,box-shadow 80ms,filter .15s;font-size:17px;font-weight:400}.btn:before{content:"";position:absolute;pointer-events:none;background:linear-gradient(#fff9,#fff0);border-radius:999px;height:42%;inset:3px 10px auto}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 #0000,0 3px 8px #3c0a304d}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline:4px solid #fff;outline-offset:3px}.btn-primary{background:linear-gradient(#ffe98f,var(--gold-dark));color:#6b3a00;text-shadow:0 1px #ffffff73;box-shadow:0 4px #a86f00,0 9px 16px #3c0a3052}.btn-secondary{background:linear-gradient(#ddc6ff,var(--lilac-dark));box-shadow:0 4px #5b21b6,0 9px 16px #3c0a3052}.btn-power{background:linear-gradient(#ff9fd0,#e6187f);box-shadow:0 4px #a30f58,0 9px 16px #3c0a3052}.btn-danger{background:linear-gradient(#ff9bad,var(--danger-dark));box-shadow:0 4px #9e1b3c,0 9px 16px #3c0a3052}.btn-ghost{box-shadow:none;color:inherit;opacity:.85;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-shadow:none;background:0 0}.btn-ghost:before{display:none}.btn-ghost:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.btn-big{width:100%;padding:15px 24px;font-size:21px}.btn-icon{background:var(--frost);display:grid;color:var(--ink);border:2px solid #ffffff73;border-radius:50%;place-items: center;width:40px;height:40px;transition:transform .1s;font-size:18px}.btn-icon:active{transform:scale(.9)}.home-header{text-align:center;margin-top:22px}.home-logo{animation:logo-bob 2.4s ease-in-out infinite alternate;filter:drop-shadow(0 8px 10px #4a1a7273);font-size:58px;line-height:1.1}@keyframes logo-bob{0%{transform:translateY(0)rotate(-3deg)}to{transform:translateY(-8px)rotate(3deg)}}.home-header h1{font-family:var(--font-display);letter-spacing:1px;background:var(--rainbow);color:#0000;filter:drop-shadow(0 3px 0 #4a1a728c);animation:rainbow-slide 9s linear infinite;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;font-size:46px;line-height:1.1}@keyframes rainbow-slide{0%{background-position:0%}to{background-position:300%}}.tagline{opacity:.9;margin-top:6px}.home-footer{text-align:center;opacity:.85;margin-top:20px;padding-bottom:16px;font-size:14px}.tabs{display:flex;gap:8px;width:100%}.tab{background:var(--frost);color:var(--ink);font-family:var(--font-display);opacity:.7;border:none;border-radius:16px 16px 0 0;flex:1;padding:11px;transition:opacity .15s,transform .1s;font-size:17px;font-weight:400}.tab-active{opacity:1;background:var(--cream);color:var(--ink-dark);transform:translateY(1px)}.card-panel{position:relative;background:var(--cream);color:var(--ink-dark);display:flex;filter:drop-shadow(0 6px 0 #7a1a5847)drop-shadow(0 14px 20px #3c0a3059);border-radius:26px 26px 7px 7px;flex-direction:column;gap:14px;width:100%;margin-bottom:8px;padding:18px}.card-panel:after{content:"";position:absolute;background:radial-gradient(circle 10px at 11px 0,var(--cream)10px,transparent 10.5px)0 0/22px 22px repeat-x;height:11px;top:100%;left:0;right:0}.card-panel h2,.card-panel h3{font-size:22px}.field{display:flex;flex-direction:column;gap:7px;font-weight:700}.field>span{font-size:15px}.field input{border:3px solid var(--sugar-line);font-size:18px;font-family:var(--font-body);color:var(--ink-dark);background:#fff;border-radius:14px;padding:12px;transition:border-color .15s,box-shadow .15s;font-weight:700}.field input::placeholder{color:#d9a8c4}.field input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px #ff3d9233}.code-input{font-family:var(--font-display);text-transform:uppercase;letter-spacing:8px;text-align:center;color:var(--pink-dark)!important;font-size:26px!important}.format-options{display:flex;flex-direction:column;gap:8px}.format-option{border:3px solid var(--sugar-line);background:var(--sugar);color:var(--ink-dark);text-align:left;display:flex;font-family:var(--font-body);border-radius:14px;flex-direction:column;gap:2px;padding:11px;transition:transform .1s}.format-option strong{font-size:16px}.format-option.selected{border-color:var(--gold-dark);background:linear-gradient(#fff5d6,#ffe9a8);box-shadow:0 0 0 4px #ffc93c59}.format-option small{opacity:.75;font-weight:600}.x-picker{display:flex;flex-wrap:wrap;gap:6px}.x-option{border:3px solid var(--sugar-line);background:var(--sugar);color:var(--ink-dark);font-family:var(--font-display);border-radius:50%;width:44px;height:44px;transition:transform .1s;font-size:19px}.x-option:active{transform:scale(.9)}.x-option.selected{border-color:var(--gold-dark);background:linear-gradient(#fff5d6,#ffe9a8);box-shadow:0 0 0 4px #ffc93c59}.error{color:#a11d3f;background:#ffe0e6;border:3px solid #ffb3c4;border-radius:14px;padding:9px 13px;font-weight:700}.lobby-screen h1{text-shadow:0 3px #4a1a7280;margin-top:12px;font-size:34px}.room-code-panel{text-align:center;align-items: center}.room-code-panel:before{content:"🎀";align-self: center;font-size:30px;line-height:1}.room-code-label{opacity:.7;font-size:14px}.room-code{font-family:var(--font-display);letter-spacing:10px;text-indent:10px;background:var(--rainbow);color:#0000;animation:rainbow-slide 9s linear infinite;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;font-size:46px}.lobby-hint{opacity:.85;text-align:center;font-size:15px}.player-list{list-style:none;display:flex;flex-direction:column;gap:8px}.player-row{display:flex;background:var(--sugar);border:2px solid var(--sugar-line);border-radius:14px;align-items: center;gap:10px;padding:8px 12px}.player-avatar{font-size:26px}.player-name{text-align:left;flex:1;font-size:17px;font-weight:700}.player-waiting{opacity:.55}.badge{background:var(--sugar);border:2px solid var(--sugar-line);color:#8a2a5e;white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}.badge-host{background:linear-gradient(#ffe98f,var(--gold));border-color:var(--gold-dark);color:#6b3a00}.badge-offline{background:var(--danger);border-color:var(--danger-dark);color:#fff;animation:pulse-badge 1.2s infinite}.badge-knock{background:linear-gradient(#ffa8d6,var(--pink));border-color:var(--pink-dark);color:#fff}.badge-peek{background:linear-gradient(#d9c2ff,var(--lilac));border-color:var(--lilac-dark);color:#2e1065}.badge-score{border-color:var(--sugar-line);color:var(--ink-dark);background:#ffffffe6}@keyframes pulse-badge{50%{opacity:.5}}.table-screen{gap:8px;padding-bottom:64px}.table-topbar{display:flex;align-items: center;gap:8px;width:100%}.topbar-code{font-family:var(--font-display);letter-spacing:2px;background:var(--frost);border:2px solid #fff6;border-radius:10px;padding:4px 9px}.topbar-round{opacity:.95;flex:1;font-weight:700}.knock-banner{background:var(--rainbow);color:#fff;font-family:var(--font-display);text-align:center;text-shadow:0 2px 3px #0000004d;animation:rainbow-slide 3s linear infinite,knock-flash 1s ease-in-out infinite alternate;background-size:300% 100%;border:3px solid #ffffffbf;border-radius:14px;width:100%;padding:9px;font-size:17px;box-shadow:0 5px 14px #3c0a3066}@keyframes knock-flash{0%{transform:scale(1)}to{transform:scale(1.02)}}.host-gone{background:var(--mat);display:flex;text-align:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:3px solid #ffffff73;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items: center;gap:8px 12px;width:100%;padding:10px 12px}.host-gone-text{text-shadow:0 2px 4px #3c0a3073;font-weight:700}.opponents{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}.opponents-2 .seat,.opponents-3 .seat{flex:1;min-width:150px}.seat{display:flex;position:relative;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:linear-gradient(#340a4870,#340a4842);border:3px solid #ffffff80;border-radius:18px;flex-direction:column;align-items: center;gap:6px;width:100%;padding:9px}.seat-active{border-color:var(--gold);background:linear-gradient(#5c2c0866,#340a484d);box-shadow:0 0 20px #ffc93c8c}.seat-your-turn{animation:your-turn-glow 1.3s ease-in-out infinite alternate}@keyframes your-turn-glow{0%{box-shadow:0 0 0 2px #ffffff73,0 0 12px #ffc93c80}to{box-shadow:0 0 0 5px #ffffffd9,0 0 34px #ffc93c}}.seat-your-turn:before,.seat-your-turn:after{content:"✨";position:absolute;pointer-events:none;animation:sparkle-pop 1.6s ease-in-out infinite;font-size:20px}.seat-your-turn:before{top:-12px;left:-8px}.seat-your-turn:after{animation-delay:.8s;bottom:-12px;right:-8px}@keyframes sparkle-pop{0%,to{transform:scale(.4)rotate(-20deg);opacity:0}50%{transform:scale(1.15)rotate(20deg);opacity:1}}.seat-header{display:flex;flex-wrap:wrap;justify-content:center;align-items: center;gap:6px}.seat-avatar{filter:drop-shadow(0 2px 3px #3c0a3066);font-size:22px}.seat-name{font-family:var(--font-display);text-shadow:0 2px #4a1a7259;font-size:16px}.card-row{display:flex;gap:6px}.playing-card{width:var(--card-w);height:var(--card-h);position:relative;display:flex;animation:deal-in .35s ease backwards;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items: center;box-shadow:0 3px 8px #3c0a3073}.card-sm{--card-w:44px;--card-h:62px;border-radius:8px;width:44px;height:62px}.card-lg{width:72px;height:101px}@keyframes deal-in{0%{transform:translateY(-30px)scale(.6)rotate(-8deg);opacity:0}to{transform:none;opacity:1}}.card-back{border:3px solid var(--pink);color:#fff;background-color:#fff6fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C12 20.5 3.5 15.2 3.5 9.6C3.5 6.7 5.8 4.5 8.6 4.5C10.2 4.5 11.4 5.3 12 6.2C12.6 5.3 13.8 4.5 15.4 4.5C18.2 4.5 20.5 6.7 20.5 9.6C20.5 15.2 12 20.5 12 20.5Z' fill='%23ff85c0' fill-opacity='0.5'/%3E%3C/svg%3E"),linear-gradient(150deg,#fffdfa,#ffe6f3)}.card-back-pattern{display:grid;background:linear-gradient(#ff8dc0,#e6187f);border:2px solid #fff;border-radius:50%;place-items: center;width:32px;height:32px;font-size:17px;box-shadow:0 2px 5px #780a464d}.card-sm .card-back-pattern{width:22px;height:22px;font-size:13px}.card-face{color:#4d1839;border:3px solid var(--sugar-line);font-family:var(--font-display);background:linear-gradient(#fffdfa,#fff0f7);font-weight:400}.card-emoji{font-size:26px}.card-corner{position:absolute;opacity:.9;font-size:14px;top:3px;left:5px}.card-corner-br{inset:auto 5px 3px auto;transform:rotate(180deg)}.card-power{border-color:var(--lilac);color:#5b1d8a;background:linear-gradient(#fdf2ff,#f3e0ff)}.card-power .card-corner{font-size:8px}.card-v0,.card-v1,.card-v2,.card-v3{border-color:var(--mint);background:linear-gradient(#f6fffc,#dcfff4)}.card-v4,.card-v5,.card-v6{border-color:var(--sugar-line)}.card-v7,.card-v8{background:linear-gradient(#fffaf5,#ffeeda);border-color:#ffab6b}.card-v9{background:linear-gradient(#fff5f7,#ffdfe6);border-color:#ff6f8b}.card-flip-in{animation:flip-in .5s ease backwards}@keyframes flip-in{0%{transform:rotateY(90deg)scale(.9);opacity:.3}to{transform:rotateY(0)scale(1);opacity:1}}.card-selectable{cursor:pointer;animation:wiggle .7s ease-in-out infinite alternate;outline:3px dashed var(--gold);outline-offset:3px}@keyframes wiggle{0%{transform:translateY(0)rotate(-1.5deg)}to{transform:translateY(-5px)rotate(1.5deg)}}.card-selected{outline:4px solid var(--good);outline-offset:3px;animation:none;transform:translateY(-8px);box-shadow:0 0 18px #2ec98acc}.center-area{display:flex;position:relative;flex-wrap:wrap;justify-content:center;align-items: center;gap:24px;padding:4px 0}.pile{display:flex;flex-direction:column;align-items: center;gap:4px}.pile-label{opacity:.9;text-shadow:0 1px 3px #3c0a3080;font-size:13px;font-weight:700}.pile-empty{width:var(--card-w);height:var(--card-h);display:flex;border:3px dashed #ffffff80;border-radius:12px;justify-content:center;align-items: center}.drawtwo-chip{color:#fff;font-family:var(--font-display);background:linear-gradient(#ffa8d6,#e6187f);border:3px solid #fffc;border-radius:999px;padding:7px 15px;box-shadow:0 4px 12px #3c0a3066}.prompt{background:var(--mat);display:flex;text-align:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:3px solid #ffffff73;border-radius:18px;flex-direction:column;align-items: center;gap:10px;width:100%;padding:12px}.prompt-attention{border-color:var(--gold);box-shadow:0 0 24px #ffc93c73}.prompt-text{text-shadow:0 2px 4px #3c0a3073;font-size:17px;font-weight:700}.prompt-your-turn{font-family:var(--font-display);animation:pulse-badge 1s infinite;font-size:24px;font-weight:400}.prompt-buttons{display:flex;flex-direction:column;gap:8px;width:100%}.prompt-drawn{display:flex;align-items: center;gap:12px}.reactions-bar{position:fixed;display:flex;z-index:40;flex-direction:column-reverse;align-items: flex-end;gap:8px;bottom:10px;right:10px}.reactions-toggle{background:linear-gradient(#ffa8d6,#e6187f);border:3px solid #fff;border-radius:50%;width:54px;height:54px;font-size:24px;box-shadow:0 5px 14px #3c0a3073}.reactions-palette{background:var(--cream);color:var(--ink-dark);display:flex;animation:slide-up .2s ease;border:3px solid #fff;border-radius:20px;flex-direction:column;gap:8px;max-width:260px;padding:10px;box-shadow:0 8px 24px #3c0a3080}.reactions-emoji{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.reaction-btn{border:2px solid var(--sugar-line);background:var(--sugar);color:var(--ink-dark);border-radius:12px;padding:6px 10px;transition:transform .1s;font-size:22px}.reaction-btn:active{transform:scale(1.2)}.reactions-phrases{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.reaction-phrase{font-family:var(--font-body);font-size:13px;font-weight:700}.seat-reactions{position:absolute;display:flex;pointer-events:none;z-index:30;gap:4px;top:-14px;right:6px}.reaction-float{animation:float-up 3.5s ease forwards}.reaction-emoji-float{filter:drop-shadow(0 3px 5px #3c0a3080);font-size:32px}.reaction-bubble{color:var(--ink-dark);white-space:nowrap;background:#fff;border-radius:14px 14px 14px 3px;padding:5px 10px;font-size:13px;font-weight:700;box-shadow:0 3px 8px #3c0a3066}@keyframes float-up{0%{transform:translateY(8px)scale(.6);opacity:0}12%{transform:translateY(0)scale(1.1);opacity:1}75%{transform:translateY(-14px)scale(1);opacity:1}to{transform:translateY(-26px)scale(.9);opacity:0}}.overlay{position:fixed;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;z-index:50;animation:overlay-in .3s ease;overflow-y:auto;background:#4a0f3cc7;justify-content:center;align-items: center;padding:14px;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.dialog{background:var(--cream);color:var(--ink-dark);display:flex;text-align:center;overflow-y:auto;border:4px solid #fff;border-radius:28px;flex-direction:column;gap:14px;width:100%;max-width:480px;max-height:92dvh;padding:20px;box-shadow:0 0 0 4px #ffc93c99,0 18px 50px #1e051999}.dialog:before{content:"🎀";align-self: center;font-size:30px;line-height:1}.dialog h2{font-size:25px}.dialog h3{font-size:19px}.dialog-buttons{display:flex;flex-direction:column;align-items: center;gap:8px;width:100%}.summary-dialog{animation:slide-up .4s ease}@keyframes slide-up{0%{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}.summary-sub{opacity:.75}.summary-hands{display:flex;flex-direction:column;gap:8px}.summary-row{display:flex;background:var(--sugar);border:2px solid var(--sugar-line);border-radius:14px;align-items: center;gap:8px;padding:6px 10px}.summary-winner{border-color:var(--gold-dark);background:linear-gradient(#fff5d6,#ffe9a8);box-shadow:0 0 0 3px #ffc93c73}.summary-name{text-align:left;min-width:84px;font-size:14px;font-weight:700}.summary-cards{display:flex;flex:1;justify-content:center;gap:4px}.summary-score{font-family:var(--font-display);min-width:34px;font-size:22px}.standings ul{list-style:none}.standings li{padding:2px 0}.match-winner-title{background:var(--rainbow);color:#0000;animation:rainbow-slide 4s linear infinite;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;font-size:32px}.confetti{position:fixed;pointer-events:none;overflow:hidden;z-index:1;inset:0}.confetti-piece{position:absolute;animation:confetti-fall linear infinite;font-size:24px;line-height:1;top:-30px}@keyframes confetti-fall{0%{transform:translateY(-30px)rotate(0)}50%{transform:translate(26px,50vh)rotate(180deg)}to{transform:translate(-16px,105vh)rotate(400deg)}}@media (max-width:400px){.home-header h1{font-size:38px}.room-code{letter-spacing:7px;text-indent:7px;font-size:38px}.card-lg{width:62px;height:87px}.playing-card{--card-w:56px;--card-h:79px;width:56px;height:79px}.card-sm{width:38px;height:54px}.summary-name{min-width:64px}}@media (max-height:700px){.screen{gap:6px;padding:8px}.seat{padding:6px}.home-header{margin-top:6px}.home-logo{font-size:40px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}