:root{--bg-top:#fff4f7;--bg-bot:#ffd9e4;--ink:#5b2639;--ink-dim:#a7697e;--accent:#ff4f86;--accent-deep:#d6336a;--surface:#ffffffbd;--shadow:#d6336a29;--rim:#f59bb8;--well:#4b1f3c;--well-line:#3b162f;--dot:#ffd3e1;--dot-glow:#ff6f9f;--c1:#ec4b8c;--c2:#f0802e;--c3:#f2bf3a;--c4:#3fbf5f;--c5:#2fb6e6;--c6:#e04848;--c7:#9257d8;--radius:18px;--pad:4px}:root[data-board=light]{--rim:#f4b0c4;--well:#fbe1e9;--well-line:#efc2cf;--dot:#fff;--dot-glow:#ff8fb2}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:linear-gradient(180deg, var(--bg-top), var(--bg-bot));min-height:100dvh;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;font-family:Nunito,system-ui,sans-serif;font-weight:800}#app{min-height:100dvh;padding:max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:flex}button{font:inherit;color:inherit;cursor:pointer;border:0}.display{letter-spacing:-.01em;font-family:"Baloo 2",Nunito,sans-serif;font-weight:800}.num{font-variant-numeric:tabular-nums}.blk{--c:var(--c6);width:var(--u);height:var(--u);background:color-mix(in srgb, var(--c), black 55%);position:absolute}.blk:before{content:"";inset:max(1px, calc(var(--u) * .016));border:calc(var(--u) * .135) solid;border-top-color:color-mix(in srgb, var(--c), white 42%);border-left-color:color-mix(in srgb, var(--c), white 9%);border-right-color:color-mix(in srgb, var(--c), black 20%);border-bottom-color:color-mix(in srgb, var(--c), black 36%);background:linear-gradient(var(--c), color-mix(in srgb, var(--c), black 8%));position:absolute}.k1{--c:var(--c1)}.k2{--c:var(--c2)}.k3{--c:var(--c3)}.k4{--c:var(--c4)}.k5{--c:var(--c5)}.k6{--c:var(--c6)}.k7{--c:var(--c7)}.game{flex-direction:column;flex:1;width:100%;max-width:440px;display:flex}.hud{grid-template-columns:110px 1fr 110px;align-items:center;height:44px;display:grid}.hud-right{justify-self:end;align-items:center;gap:8px;display:flex}.icon-btn{background:var(--surface);width:44px;height:44px;box-shadow:0 2px 8px var(--shadow);border-radius:14px;place-items:center;transition:transform .12s ease-out;display:grid}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:22px;height:22px}.target{color:var(--accent);justify-self:center;align-items:center;gap:6px;font-size:20px;display:flex}.target svg{width:22px;height:22px}.tag{color:var(--ink-dim);text-align:right;justify-self:end;font-size:12px;line-height:1.1}.score-wrap{place-items:center;display:grid;position:relative}.heart{width:92px;height:92px;color:var(--accent);opacity:0;pointer-events:none;filter:drop-shadow(0 0 14px #ff4f86b3);margin:-48px 0 0 -46px;transition:opacity .22s ease-out,transform .22s ease-out;position:absolute;top:50%;left:50%;transform:scale(.6)}.heart svg{width:100%;height:100%}.heart.on{opacity:.9;transform:scale(1)}.heart.on.beat{animation:.42s cubic-bezier(.2,.8,.3,1.4) beat}@keyframes beat{0%{transform:scale(1)}35%{transform:scale(1.22)}to{transform:scale(1)}}.heart.on+.score{color:#fff;text-shadow:0 3px 0 var(--accent-deep)}.score{text-align:center;text-shadow:0 4px 0 var(--shadow);margin:4px 0 2px;font-size:56px;line-height:1;position:relative}.progress{background:#5b26391a;border-radius:99px;height:8px;margin:0 18% 6px;overflow:hidden}.progress>i{background:var(--accent);border-radius:99px;width:0;height:100%;transition:width .3s ease-out;display:block}.progress.won>i{background:var(--c4)}.board-wrap{align-self:center;position:relative}.board{width:calc(var(--u) * 8 + var(--pad) * 2);height:calc(var(--u) * 8 + var(--pad) * 2);background:var(--rim);box-shadow:0 10px 30px var(--shadow);border-radius:10px;position:relative}.cells{inset:var(--pad);border-radius:3px;grid-template-columns:repeat(8,1fr);display:grid;position:absolute;overflow:hidden}.cells>i{background:var(--well);box-shadow:inset 0 0 0 .75px var(--well-line)}.layer{inset:var(--pad);pointer-events:none;position:absolute}.dots{pointer-events:none;position:absolute;inset:0}.dots>b{width:calc(var(--u) * .15);height:calc(var(--u) * .15);margin:calc(var(--u) * -.075);background:color-mix(in srgb, var(--dot), var(--rim) 55%);border-radius:50%;transition:background .2s,box-shadow .2s;position:absolute}.dots>b:after{content:"";background:radial-gradient(var(--dot-glow) 0%, transparent 65%);opacity:0;border-radius:50%;transition:opacity .2s;position:absolute;inset:-70%}.dots.lit>b{background:var(--dot)}.dots.lit>b:after{opacity:.7}.dots.chase>b:after{animation:.52s ease-out both chase;animation-delay:calc(var(--i) * 9ms)}@keyframes chase{0%{opacity:1;transform:scale(1.6)}to{transform:scale(1)}}.sparks{pointer-events:none;z-index:6;position:absolute}.ghost .blk:not(.hot){opacity:.38}.hot{animation:.6s ease-in-out infinite alternate hot}@keyframes hot{0%{opacity:1}to{opacity:.72}}.fx .blk{animation:.34s cubic-bezier(.3,0,.8,.4) forwards pop}.fx .blk:after{content:"";height:auto;animation:.34s ease-out both flash;animation-delay:inherit;background:#fff;border-radius:0;position:absolute;inset:0}@keyframes flash{0%{opacity:.85}to{opacity:0}}.beam{z-index:4;pointer-events:none;transform-origin:50%;background:linear-gradient(90deg,#fff0,#fff 50%,#fff0);animation:.42s cubic-bezier(.2,.8,.3,1) forwards beam;position:absolute;box-shadow:0 0 18px 6px #ffdcf0cc}.beam.v{background:linear-gradient(#fff0,#fff 50%,#fff0);animation-name:beamv}@keyframes beam{0%{opacity:1;transform:scaleX(0)scaleY(.5)}45%{opacity:1;transform:scaleX(1)scaleY(.7)}to{opacity:0;transform:scaleX(1.05)scaleY(.1)}}@keyframes beamv{0%{opacity:1;transform:scaleY(0)scaleX(.5)}45%{opacity:1;transform:scaleY(1)scaleX(.7)}to{opacity:0;transform:scaleY(1.05)scaleX(.1)}}.float.pts.gold{color:#ffd23a;-webkit-text-stroke:1.2px #b0571d;text-shadow:0 3px #b0571d;font-size:34px}@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.12)}to{opacity:0;transform:scale(0)}}.dead .blk{filter:grayscale()brightness(.6);transition:filter .26s ease-out}.land{animation:.18s cubic-bezier(.2,.8,.3,1.3) land}@keyframes land{0%{transform:scale(1.08)}}.float{pointer-events:none;z-index:5;white-space:nowrap;color:#fff;text-shadow:0 3px 0 var(--accent-deep), 0 0 12px #d93a6a59;animation:.9s cubic-bezier(.2,.7,.3,1) forwards rise;position:absolute;transform:translate(-50%,-50%)}.float.pts{font-size:26px}.float.word{color:#fff;-webkit-text-stroke:1.5px var(--accent-deep);text-shadow:0 4px 0 var(--accent-deep);font-size:44px}.float.combo{color:#fff4f7;font-size:24px}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)scale(.6)}18%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}30%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-110%)scale(1)}}.tray{height:calc(var(--u) * 2.9);margin-top:calc(var(--u) * .5);grid-template-columns:repeat(3,1fr);display:grid}.slot{touch-action:none;cursor:grab;place-items:center;display:grid;position:relative}.slot .piece{filter:drop-shadow(3px 4px #5b263938);transition:transform .16s ease-out,opacity .16s;position:relative}.slot.lifted .piece{opacity:0}.slot.nofit .piece{opacity:.35;transition:opacity .2s ease-out}.drag{contain:layout;z-index:50;pointer-events:none;will-change:transform;position:fixed;top:0;left:0}.piece.back{transition:transform .22s cubic-bezier(.2,.8,.3,1)}.screen{flex-direction:column;flex:1;gap:14px;width:100%;max-width:440px;display:flex}.logo{text-align:center;text-shadow:0 5px 0 var(--shadow);margin:18px 0 2px;font-size:46px}.logo span{color:var(--accent)}.sub{text-align:center;color:var(--ink-dim);margin:0 0 8px;font-size:15px}.card{background:var(--surface);border-radius:var(--radius);box-shadow:0 8px 24px var(--shadow), inset 0 1px 0 #fff;padding:18px}.card h2{margin:0 0 4px;font-size:26px}.card .meta{color:var(--ink-dim);font-size:14px}.row{justify-content:space-between;align-items:center;gap:10px;display:flex}.btn{background:var(--accent);color:#fff;text-shadow:0 2px #78143c40;border-radius:16px;width:100%;padding:16px 18px;font-size:20px;transition:transform .12s ease-out,filter .12s;display:block;box-shadow:inset 0 -5px #78143c38,inset 0 2px #ffffff59}.btn:active{transform:scale(.97)translateY(2px)}.btn.gold{background:var(--accent)}.btn.blue{background:var(--c7)}.btn.ghost{color:var(--ink);text-shadow:none;box-shadow:0 2px 8px var(--shadow);background:#ffffffb3;padding:13px;font-size:17px}.btn[disabled]{filter:grayscale(.6)brightness(.8);pointer-events:none}.btn-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.lb{flex-direction:column;gap:4px;margin:8px 0 0;padding:0;list-style:none;display:flex}.lb li{border-radius:10px;grid-template-columns:34px 1fr auto;align-items:center;padding:8px 10px;font-size:16px;display:grid}.lb li:nth-child(odd){background:#ff5c8a0f}.lb li.me{background:#ff5c8a33}.lb .pos{color:var(--ink-dim)}.lb li:first-child .pos{color:var(--accent)}.empty{color:var(--ink-dim);padding:6px 0;font-size:14px}.overlay{z-index:40;-webkit-backdrop-filter:blur(6px);padding:max(20px, env(safe-area-inset-top)) 16px 20px;background:#ffeef3c7;justify-content:center;align-items:flex-start;animation:.22s ease-out fade;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes fade{0%{opacity:0}}.sheet{flex-direction:column;gap:12px;width:100%;max-width:420px;animation:.32s cubic-bezier(.2,.8,.3,1) up;display:flex}@keyframes up{0%{opacity:0;transform:translateY(24px)}}.result{text-align:center}.result .label{color:var(--ink-dim);font-size:16px}.result .big{color:var(--accent);text-shadow:0 5px 0 var(--shadow);margin:4px 0;font-size:72px;line-height:1}.result .verdict{font-size:28px}.result .verdict.win{color:#2fae6e}.result .verdict.lose{color:var(--accent-deep)}.pill{background:#ff5c8a1f;border-radius:99px;margin-top:8px;padding:6px 12px;font-size:15px;display:inline-block}.pill.gold{background:var(--accent);color:#fff}.field{width:100%;color:var(--ink);font:inherit;-webkit-user-select:text;user-select:text;background:#fff;border:2px solid #f3cbd6;border-radius:14px;outline:none;padding:15px 16px;font-size:20px}.field:focus{border-color:var(--accent)}.err{color:var(--accent-deep);min-height:18px;font-size:14px}.toast{left:50%;bottom:max(24px, env(safe-area-inset-bottom));z-index:90;color:#fff;background:var(--ink);border-radius:12px;padding:12px 18px;font-size:15px;animation:.24s ease-out up;position:fixed;transform:translate(-50%)}.challenger{text-align:center;padding:26px 18px}.challenger .who{color:var(--ink-dim);font-size:18px}.challenger .big{color:var(--accent);margin:6px 0;font-size:64px;line-height:1.05}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.lineglow{z-index:2;box-shadow:0 0 0 2px #fff, 0 0 10px 3px var(--accent), inset 0 0 12px #fff9;border-radius:4px;animation:.5s ease-in-out infinite alternate hot;position:absolute}.cellpts{width:var(--u);height:var(--u);font-size:calc(var(--u) * .46);color:#fff;text-shadow:0 2px #5b263999;z-index:3;place-items:center;animation:.76s ease-out both cellpts;display:grid;position:absolute}@keyframes cellpts{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(-30%)}}.board-wrap .board{transition:box-shadow .26s ease-out}.board-wrap.streak .board{box-shadow:0 0 0 2px #fff, 0 0 22px 6px #ff4f868c, 0 10px 30px var(--shadow)}.combo-banner{z-index:7;pointer-events:none;white-space:nowrap;color:#fff;-webkit-text-stroke:1.5px var(--accent-deep);text-shadow:0 4px 0 var(--accent-deep), 0 0 18px #ff4f8699;font-size:40px;animation:1.1s cubic-bezier(.2,.8,.3,1) both banner;position:absolute;left:50%;transform:translate(-50%,-50%)}.combo-banner b{color:#ffd23a;-webkit-text-stroke:1.5px #b0571d;text-shadow:0 4px #b0571d;font-size:1.45em}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}18%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}30%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-70%)scale(1)}}.float.perfect{color:#ffd23a;-webkit-text-stroke:1.5px #b0571d;text-shadow:0 4px #b0571d;font-size:52px}.float.best{color:#ffd23a;-webkit-text-stroke:1.5px #b0571d;text-shadow:0 4px #b0571d}.nospace{z-index:8;text-align:center;color:#fff;background:#5b2639d1;padding:16px 0;font-size:30px;animation:.26s ease-out fade;position:absolute;top:50%;left:-16px;right:-16px;transform:translateY(-50%)}html{transition:background-color .4s}body{transition:background .6s ease-out}:root[data-skin=knit]{--bg-top:#f09a98;--bg-bot:#e48888;--ink:#fff;--ink-dim:#ffe3e3;--rim:#f7b6b4;--well:#7b3334;--well-line:#6a2a2c;--dot:#fff3f3;--dot-glow:#ff8fb2;--shadow:#781e2840;--surface:#ffffff38;--c1:#e8463f;--c2:#f08a2c;--c3:#f5c22e;--c4:#47c24e;--c5:#3cc6c6;--c6:#4b74e6;--c7:#b259e0}:root[data-skin=knit] .score,:root[data-skin=knit] .target,:root[data-skin=knit] .tag{color:#fff;text-shadow:0 3px #781e2859}:root[data-skin=night]{--bg-top:#4a2a6e;--bg-bot:#1e1036;--ink:#fff;--ink-dim:#d9c8f5;--rim:#7a56b8;--well:#1a0f30;--well-line:#120a24;--dot:#fff;--dot-glow:#c58bff;--shadow:#0a001e73;--surface:#ffffff1f;--accent:#ff5fa2;--accent-deep:#c2307a}:root[data-skin=night] .score,:root[data-skin=night] .tag{color:#fff}:root[data-skin=sunset]{--bg-top:#ffcf8a;--bg-bot:#ff7d8e;--ink:#5a1f2c;--ink-dim:#8a3a48;--rim:#ffe0a3;--well:#5a1f35;--well-line:#48172a;--dot:#fff6d6;--dot-glow:#ffb547;--shadow:#8c282840;--accent:#ff4f6d;--accent-deep:#c7304a}.skin-flash{z-index:60;pointer-events:none;background:radial-gradient(circle at 50% 45%,#fff 0%,#ffdcf0e6 35%,#e6c8ff00 75%);animation:1.1s ease-out forwards skinflash;position:fixed;inset:0}.skin-flash svg{color:#ff6fae;filter:drop-shadow(0 0 30px #ff6fae);width:220px;height:220px;margin:-110px;animation:1.1s cubic-bezier(.2,.8,.3,1) forwards skinheart;position:absolute;top:45%;left:50%}.skin-flash i{transform-origin:50% 0;background:linear-gradient(#fffffff2,#fff0);width:6px;height:46vh;margin-left:-3px;animation:1.1s ease-out forwards ray;position:absolute;top:45%;left:50%}@keyframes skinflash{0%{opacity:0}15%{opacity:1}55%{opacity:1}to{opacity:0}}@keyframes skinheart{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.1)}60%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}@keyframes ray{0%{opacity:0}25%{opacity:1}to{opacity:0}}.snd-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.snd{width:52px;height:52px;color:var(--ink);background:#ff4f861f;border-radius:14px;font-size:20px;font-weight:900;transition:transform .1s ease-out}.snd:active{transform:scale(.92)}.snd.on{background:var(--accent);color:#fff;box-shadow:inset 0 -4px #78143c40}.heart[data-tier=purple]{color:#b05cf0;filter:drop-shadow(0 0 14px #b05cf0bf)}.heart[data-tier=gold]{color:#ffc23a;filter:drop-shadow(0 0 16px #ffc23ad9)}.heart[data-tier=gold]+.score{text-shadow:0 3px #b0571d}.hapt-real{align-items:center;gap:10px;margin-top:8px;font-size:16px;display:flex}.hapt-real input{width:44px;height:26px}.liveline{flex-direction:column;gap:4px;height:40px;margin:0 4px 4px;display:flex}.timer{background:#5b26391f;border-radius:99px;height:8px;overflow:hidden}.timer>i{background:var(--accent);border-radius:99px;width:100%;height:100%;transition:width .12s linear;display:block}.timer.low>i{background:#ff3b3b;animation:.4s ease-in-out infinite alternate hot}.livebar{white-space:nowrap;justify-content:center;gap:6px;font-size:13px;display:flex;overflow:hidden}.livebar span{background:var(--surface);border-radius:99px;padding:3px 8px}.livebar span.me{background:var(--accent);color:#fff}.countdown{z-index:9;color:#fff;-webkit-text-stroke:2px var(--accent-deep);text-shadow:0 6px 0 var(--accent-deep);pointer-events:none;font-size:110px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.countdown.pop{animation:.9s cubic-bezier(.2,.8,.3,1) both cdpop}.countdown.go{color:#ffd23a;-webkit-text-stroke-color:#b0571d;text-shadow:0 6px #b0571d}@keyframes cdpop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.6)}20%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:1;transform:translate(-50%,-50%)scale(.92)}}.code{letter-spacing:.12em;text-align:center;color:var(--accent);font-size:54px}.plist{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.plist li{background:#ff4f8614;border-radius:12px;justify-content:space-between;padding:10px 12px;font-size:17px;display:flex}.plist li.me{background:#ff4f8638}.podium{text-align:center;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;margin-top:10px;display:grid}.podium div{background:var(--surface);border-radius:14px 14px 6px 6px;padding:10px 4px}.podium div:empty{visibility:hidden}.podium .p1{color:#5a3200;background:#ffd23a;min-height:120px}.podium .p2{background:#e6e1ea;min-height:95px}.podium .p3{background:#f2c29b;min-height:75px}.podium b{font-size:22px;display:block}.alert{background:var(--accent);color:#fff;box-shadow:0 8px 22px var(--shadow);border-radius:16px;align-items:center;gap:10px;padding:14px;animation:.32s ease-out up;display:flex}.alert span{flex:1;font-size:16px}.alert button{color:var(--accent-deep);background:#fff;border-radius:10px;padding:8px 12px;font-size:15px}.joinrow{grid-template-columns:1fr auto;gap:8px;margin-top:8px;display:grid}.joinrow .field{text-transform:uppercase;letter-spacing:.1em;padding:12px 14px;font-size:18px}.joinrow .btn{width:auto;padding:12px 16px;font-size:17px}.linkrow{text-align:left;background:#ff4f8614;border-radius:12px;align-items:center;gap:8px;margin:10px 0 4px;padding:6px 6px 6px 12px;display:flex}.linkrow span{text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;flex:1;min-width:0;font-size:15px;overflow:hidden}.linkrow .btn{width:auto;padding:8px 14px;font-size:15px}.live-strip{justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex}.live-strip .live-title{align-items:center;gap:8px;font-size:19px;display:flex}.live-strip .pill{margin-top:0;padding:3px 10px;font-size:13px}.live-strip .btn{flex-shrink:0;width:auto;padding:10px 18px;font-size:17px}.linkbtn{color:var(--ink-dim);font:inherit;cursor:pointer;background:0 0;border:0;font-size:14px;text-decoration:underline}.joinrow .field::placeholder{text-transform:none;letter-spacing:0}.play-big{padding:16px 18px 19px;font-size:26px}.best-line{margin-top:-8px}button.code{width:100%;font-family:inherit;font-weight:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:6px 0 0;padding:0;display:block}button.code:active{transform:scale(.97)}.invite-row{margin-top:14px}.invite-row .btn{font-size:19px}.lb .try{color:#7a45c4;vertical-align:2px;background:#8c52d624;border-radius:99px;margin-left:4px;padding:1px 7px;font-size:12px;display:inline-block}.playing-as{margin-top:10px}