:root{--bg-1: #4b2e1b;--bg-2: #1d1109;--frame-hi: #9a6238;--frame-lo: #5a331b;--cell-a: #3a2416;--cell-b: #543722;--cell-line: rgba(0, 0, 0, .3);--cell-hl: #6e4523;--honey-1: #ffdb98;--honey-2: #efab58;--honey-3: #c77a33;--glow-1: #fff8e0;--glow-2: #ffd982;--glow-3: #f4aa42;--cream: #fff3dc;--muted: #d9bb96;--gold: #ffc65c;--ember: #ff9a3d;--btn-1: #ffd480;--btn-2: #eb9f48;--btn-edge: #a15d1c;--btn-text: #48280f;--btn2-1: #8e5833;--btn2-2: #6a3e21;--btn2-edge: #391f0e;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(120% 80% at 50% 0%,var(--bg-1),var(--bg-2) 75%) fixed,var(--bg-2);color:var(--cream);font-family:Fredoka,ui-rounded,Segoe UI,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 118px),repeating-linear-gradient(0deg,rgba(255,220,170,.025) 0 1px,transparent 1px 7px)}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.game{--board: min( calc(100vw - 36px) , 500px, calc((100vh - 170px) / 1.4));--cell: calc(var(--board) / 9);--mini: calc(var(--cell) * .56);position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,18px);padding:max(10px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom));touch-action:none}@supports (height: 100dvh){.game{--board: min( calc(100vw - 36px) , 500px, calc((100dvh - 170px) / 1.4))}}.game.is-dragging,.game.is-dragging *{cursor:grabbing!important}.hud{width:calc(var(--board) + 16px);display:grid;grid-template-columns:46px 1fr 46px;align-items:center}.scorebox{text-align:center;line-height:1}.best{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}.score{font-size:clamp(36px,10vw,54px);font-weight:700;margin-top:4px;text-shadow:0 3px 0 rgba(0,0,0,.35);font-variant-numeric:tabular-nums}.combo-row{height:24px;margin-top:5px;display:flex;justify-content:center}.combo-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#ff9a3d29;color:var(--ember);font-weight:600;font-size:14px;animation:popIn .3s cubic-bezier(.2,1.4,.4,1) both}.dots{display:inline-flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;background:#ff9a3d40;transition:background .2s}.dots i.on{background:var(--ember)}.icon-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(var(--btn2-1),var(--btn2-2));box-shadow:inset 0 2px #ffffff2e,0 4px 0 var(--btn2-edge),0 6px 12px #0000004d;color:var(--cream);transition:transform .08s,box-shadow .08s}.icon-btn:active{transform:translateY(3px);box-shadow:inset 0 2px #ffffff2e,0 1px 0 var(--btn2-edge),0 2px 6px #0000004d}.board{padding:8px;border-radius:16px;background:repeating-linear-gradient(95deg,transparent 0 6px,rgba(0,0,0,.07) 6px 8px,transparent 8px 17px),linear-gradient(160deg,var(--frame-hi),var(--frame-lo));box-shadow:inset 0 2px #ffffff38,inset 0 -3px #0000004d,0 14px 30px #00000073}.board.shake{animation:shake .36s ease-out}.grid{--pc: var(--cell);--gap: 2px;position:relative;width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);border-radius:8px;background:var(--cell-a);box-shadow:0 0 0 2px #00000059}.cell{position:relative;background:var(--cell-a);box-shadow:inset 0 0 0 .5px var(--cell-line),inset 0 2px 3px #0000002e;transition:background-color .15s}.cell.alt{background:var(--cell-b)}.cell.hl{background:var(--cell-hl)}.cell:nth-child(1){border-top-left-radius:8px}.cell:nth-child(9){border-top-right-radius:8px}.cell:nth-child(73){border-bottom-left-radius:8px}.cell:nth-child(81){border-bottom-right-radius:8px}.block{position:absolute;inset:var(--gap, 2px);border-radius:calc(var(--pc) * .16);background:repeating-linear-gradient(100deg,transparent 0 3px,rgba(150,85,30,.14) 3px 4.5px,transparent 4.5px 9px),linear-gradient(150deg,var(--honey-1),var(--honey-2) 55%,var(--honey-3));box-shadow:inset 0 2px #ffffff8c,inset 0 -3px #733a0f73,inset 2px 0 #ffffff2e,inset -2px 0 #733a0f38,0 2px 3px #00000059}.cell>.block{animation:pop .24s cubic-bezier(.3,1.6,.5,1) both}.cell>.block.ghost{animation:none;opacity:.4;box-shadow:inset 0 0 0 2px #ffe6aa8c}.cell.hl>.block,.hl-block{background:repeating-linear-gradient(100deg,transparent 0 3px,rgba(200,120,40,.12) 3px 4.5px,transparent 4.5px 9px),linear-gradient(150deg,var(--glow-1),var(--glow-2) 55%,var(--glow-3))}.cell.hl>.block{animation:shimmer .55s ease-in-out infinite alternate}.cell.hl>.block.ghost{opacity:.85}.board.dead .cell>.block{filter:grayscale(1) brightness(.6);transition:filter .35s ease calc(var(--d) * 70ms)}.fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.burst{position:absolute;width:var(--cell);height:var(--cell);animation:burst .55s cubic-bezier(.4,0,.7,.4) both}.popup{position:absolute;transform:translate(-50%,-50%);font-weight:700;white-space:nowrap;pointer-events:none;color:var(--cream);text-shadow:0 2px 0 #7a4314,0 4px 12px rgba(0,0,0,.55)}.popup.score{font-size:calc(var(--cell) * .62);animation:rise 1.05s ease-out forwards}.popup.praise{left:50%;top:42%;font-size:calc(var(--cell) * 1);color:var(--gold);text-shadow:0 3px 0 #8a4a12,0 6px 18px rgba(0,0,0,.6);animation:praise 1.3s ease-out forwards}.popup.combo,.popup.bonus{left:50%;font-size:calc(var(--cell) * .58);color:var(--ember);animation:praise 1.3s ease-out .08s both}.popup.combo{top:56%}.popup.bonus{top:66%;color:var(--cream)}.tray{--pc: var(--mini);--gap: 1.5px;width:calc(var(--board) + 16px);height:calc(var(--cell) * 3.1);display:grid;grid-template-columns:repeat(3,1fr)}.slot{display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}.slot:empty{cursor:default}.piece-wrap{animation:slideIn .42s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i) * 70ms);transition:opacity .2s,filter .2s}.slot.nofit .piece-wrap{opacity:.3;filter:grayscale(.85)}.slot.dragging .piece-wrap{opacity:0;transition:none}.piece{display:grid}.pcell{position:relative;width:var(--pc);height:var(--pc)}.float{--pc: var(--cell);--gap: 2px;position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}.float .piece{animation:lift .14s ease-out both}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:16px;background:#1209039e;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .25s ease-out}.card{width:min(100%,360px);padding:28px 22px 22px;border-radius:24px;text-align:center;display:flex;flex-direction:column;gap:12px;background:repeating-linear-gradient(95deg,transparent 0 7px,rgba(0,0,0,.06) 7px 9px,transparent 9px 19px),linear-gradient(170deg,#8a5532,#5a331b);box-shadow:inset 0 2px #ffffff2e,inset 0 -4px #00000040,0 24px 60px #0000008c;animation:popIn .38s cubic-bezier(.2,1.4,.4,1) both}.card h2{margin:0 0 6px;font-size:28px;font-weight:700}.ribbon{font-size:32px;font-weight:700;color:var(--gold);text-shadow:0 3px 0 #8a4a12;animation:tada .9s ease-out .2s both}.final-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:14px}.final-score{font-size:64px;font-weight:700;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.3)}.final-best{display:inline-flex;gap:6px;align-items:center;justify-content:center;color:var(--gold);font-weight:600}.stats{color:var(--muted);font-size:15px;margin-bottom:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:16px;font-size:19px;font-weight:600;background:linear-gradient(var(--btn-1),var(--btn-2));color:var(--btn-text);box-shadow:inset 0 2px #fff9,0 5px 0 var(--btn-edge),0 10px 18px #0000004d;transition:transform .08s,box-shadow .08s}.btn:active{transform:translateY(4px);box-shadow:inset 0 2px #fff9,0 1px 0 var(--btn-edge),0 4px 8px #0000004d}.btn.secondary{background:linear-gradient(var(--btn2-1),var(--btn2-2));color:var(--cream);box-shadow:inset 0 2px #ffffff29,0 5px 0 var(--btn2-edge),0 10px 18px #0000004d}.btn.secondary:active{box-shadow:inset 0 2px #ffffff29,0 1px 0 var(--btn2-edge),0 4px 8px #0000004d}.btn.link{background:none;box-shadow:none;color:var(--muted);font-size:17px;padding:10px}.btn.big{padding:18px 20px;font-size:22px}.btn svg{width:22px;height:22px;flex:none}.help ul{margin:0 0 6px;padding:0;list-style:none;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.35}.help li{position:relative;padding-left:24px}.help li:before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:3px;background:linear-gradient(150deg,var(--honey-1),var(--honey-3));box-shadow:inset 0 1px #ffffff80}.help b{color:var(--gold);font-weight:600}.home{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px}.home-top{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px}.logo{--pc: clamp(36px, 11vw, 46px);--gap: 2.5px;display:grid;grid-template-columns:repeat(4,var(--pc));grid-template-rows:repeat(4,var(--pc));padding:8px;border-radius:18px;background:linear-gradient(160deg,var(--frame-hi),var(--frame-lo));box-shadow:inset 0 2px #ffffff38,0 14px 30px #00000073;transform:rotate(-4deg)}.lcell{position:relative;background:var(--cell-a);box-shadow:inset 0 0 0 .5px var(--cell-line)}.lcell.alt{background:var(--cell-b)}.lcell .block.bob{animation:bob 2.6s ease-in-out infinite}.title{margin:10px 0 0;font-size:clamp(46px,13vw,68px);font-weight:700;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.35)}.title .accent{color:var(--gold)}.tagline{margin:0;color:var(--muted);font-size:18px}.home-best{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#00000040;color:var(--gold);font-size:18px}.home-best b{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}.menu{display:flex;flex-direction:column;gap:14px;width:min(100%,300px);margin-top:8px}@keyframes pop{0%{transform:scale(.55)}to{transform:scale(1)}}@keyframes shimmer{0%{filter:brightness(1)}to{filter:brightness(1.15) drop-shadow(0 0 6px rgba(255,205,100,.85))}}@keyframes burst{0%{transform:scale(1);opacity:1;filter:brightness(1.2)}35%{transform:scale(1.18);opacity:1;filter:brightness(1.7)}to{transform:scale(.15) rotate(30deg);opacity:0;filter:brightness(2)}}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-170%) scale(1)}}@keyframes praise{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}35%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-75%) scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}@keyframes slideIn{0%{opacity:0;transform:translateY(40px) scale(.6)}to{opacity:1;transform:none}}@keyframes lift{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes tada{0%{opacity:0;transform:scale(.4) rotate(-8deg)}50%{opacity:1;transform:scale(1.15) rotate(3deg)}to{transform:scale(1) rotate(0)}}@keyframes bob{0%,to{transform:translateY(-38px);opacity:.85}45%,70%{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){.cell.hl>.block,.board.shake,.lcell .block.bob{animation:none}}:root{--opp-1: #ffbca2;--opp-2: #d9674b;--opp-3: #9a3a27;--bad: #ff6b55}.block.opp{background:repeating-linear-gradient(100deg,transparent 0 3px,rgba(110,30,15,.16) 3px 4.5px,transparent 4.5px 9px),linear-gradient(150deg,var(--opp-1),var(--opp-2) 55%,var(--opp-3));box-shadow:inset 0 2px #ffffff73,inset 0 -3px #5a140880,inset 2px 0 #ffffff26,inset -2px 0 #5a140840,0 2px 3px #00000059}.cell>.block.ghost.opp{opacity:.45;box-shadow:inset 0 0 0 2px #ffbea099}.popup.opp{color:var(--opp-1);text-shadow:0 2px 0 #6e2414,0 4px 12px rgba(0,0,0,.55)}.popup.praise.info{font-size:calc(var(--cell) * .62);color:var(--cream)}.duel{--board: min( calc(100vw - 36px) , 470px, calc((100vh - 300px) / 1.36));gap:clamp(6px,1.4vh,12px)}@supports (height: 100dvh){.duel{--board: min( calc(100vw - 36px) , 470px, calc((100dvh - 300px) / 1.36))}}.duel-hud{gap:8px}.turn-text{text-align:center;font-weight:600;font-size:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-text.mine{color:var(--gold);font-size:21px;animation:popIn .3s cubic-bezier(.2,1.4,.4,1) both}.turn-text.warn{color:var(--bad);font-size:15px}.pbar{width:calc(var(--board) + 16px);min-height:52px;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:14px;background:#00000038;border:2px solid transparent;transition:border-color .25s,box-shadow .25s,background-color .25s}.pbar.me.active{border-color:var(--gold);background:#ffc65c14;box-shadow:0 0 18px #ffc65c38}.pbar.opp.active{border-color:var(--opp-2);background:#d9674b14;box-shadow:0 0 18px #d9674b40}.avatar{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:19px;color:#4a2a12;background:linear-gradient(150deg,var(--honey-1),var(--honey-3));box-shadow:inset 0 2px #ffffff80,inset 0 -2px #0003}.avatar.opp{color:#4a160c;background:linear-gradient(150deg,var(--opp-1),var(--opp-3))}.pinfo{flex:1;min-width:0;line-height:1.1}.pname{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.you-tag{margin-left:6px;padding:1px 6px;border-radius:6px;font-size:11px;background:#ffc65c2e;color:var(--gold);vertical-align:2px}.pscore{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.pscore.side{flex:none}.pstatus{font-size:13px;color:var(--bad);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.combo-badge.small{flex:none;padding:2px 8px;font-size:13px;gap:3px}.mini-tray{--pc: calc(var(--cell) * .22);--gap: 1px;flex:none;display:flex;align-items:center;gap:6px}.mini-slot{min-width:calc(var(--pc) * 3);display:flex;justify-content:center;transition:transform .2s}.mini-slot.lifted{transform:translateY(-4px) scale(1.12)}.mini-tray .block{border-radius:2px;box-shadow:inset 0 1px #fff6}.pbar.opp .mini-tray .block{background:linear-gradient(150deg,var(--opp-1),var(--opp-3))}.timer-row{width:calc(var(--board) + 16px);display:flex;align-items:center;gap:10px}.timer{position:relative;flex:1;height:10px;border-radius:99px;background:#00000059;overflow:hidden}.timer>i{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;transform-origin:left center;background:linear-gradient(90deg,var(--honey-2),var(--gold));transition:transform .1s linear}.timer-row.theirs .timer>i{background:linear-gradient(90deg,var(--opp-3),var(--opp-2))}.timer-row.low.mine .timer>i{background:var(--bad)}.timer-row>span{flex:none;width:22px;text-align:right;font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.timer-row.low.mine>span{color:var(--bad)}.timer-row.idle{opacity:.4}.tray.disabled .slot{cursor:default}.tray.disabled .piece-wrap{opacity:.55;filter:saturate(.7)}.lobby{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:72px 16px 24px;overflow-y:auto;text-align:center}.home-top.left{right:auto;left:16px}.lobby-title{margin:0;font-size:clamp(30px,8vw,40px);font-weight:700;text-shadow:0 3px 0 rgba(0,0,0,.35)}.muted{margin:0;color:var(--muted);font-size:17px}.gold{color:var(--gold);letter-spacing:.08em}.field{display:flex;flex-direction:column;gap:6px;width:min(100%,300px);text-align:left;color:var(--muted);font-size:15px}.field input,.code-input,.link-box{font:inherit;font-size:19px;font-weight:600;color:var(--cream);padding:12px 14px;border-radius:14px;border:2px solid rgba(255,220,170,.18);background:#0000004d;outline:none;-webkit-user-select:text;user-select:text}.field input:focus,.code-input:focus{border-color:var(--gold)}.or{color:var(--muted);font-size:15px}.join-row{display:flex;gap:10px}.code-input{flex:1;min-width:0;text-align:center;letter-spacing:.3em;text-transform:uppercase}.err{margin:0;max-width:320px;color:var(--bad);font-weight:600}.rules{margin:8px 0 0;padding:14px 16px;width:min(100%,360px);list-style:none;text-align:left;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.35;color:var(--muted);border-radius:16px;background:#0003}.rules b{color:var(--cream);font-weight:600}.code-big{display:flex;gap:10px}.code-big span{width:58px;height:64px;display:grid;place-items:center;font-size:36px;font-weight:700;color:#4a2a12;border-radius:12px;background:linear-gradient(150deg,var(--honey-1),var(--honey-2) 55%,var(--honey-3));box-shadow:inset 0 2px #ffffff8c,inset 0 -4px #733a0f73,0 6px 12px #00000059;animation:slideIn .45s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i) * 80ms)}.link-box{width:min(100%,340px);font-size:14px;font-weight:500;text-align:center;color:var(--muted)}.dots-anim:after{content:"…";display:inline-block;width:1.2em;text-align:left;animation:blink 1.2s steps(2,start) infinite}.card-text{margin:-4px 0 4px;color:var(--muted);font-size:16px;line-height:1.35}.ribbon.lose{color:var(--opp-1);text-shadow:0 3px 0 #6e2414}.duel-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}.duel-scores>div{display:flex;flex-direction:column;gap:4px;padding:10px 6px;border-radius:14px;background:#00000038;border:2px solid transparent}.duel-scores>div.win{border-color:var(--gold)}.duel-scores>div.opp.win{border-color:var(--opp-2)}.duel-scores span{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duel-scores b{font-size:32px;font-weight:700}.btn:disabled{cursor:default;opacity:.6;transform:none}.btn.pulse{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes blink{0%{opacity:.2}to{opacity:1}}