:root{--bg-1: #e6f8ee;--bg-2: #c4ead8;--ink: #183526;--ink-2: #4b6b5a;--card: #ffffff;--card-2: #f3fbf6;--line: #20402f;--hair: rgba(24, 53, 38, .13);--green: #3fc35c;--green-d: #2a9a44;--gold: #ffb52e;--gold-d: #e08b00;--red: #ff5964;--shadow: 0 10px 30px rgba(20, 70, 45, .18);--font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg-1: #10291f;--bg-2: #0a1c15;--ink: #e9f7ef;--ink-2: #9cbcab;--card: #17372a;--card-2: #1d4434;--line: #07140e;--hair: rgba(255, 255, 255, .1);--shadow: 0 10px 30px rgba(0, 0, 0, .45);color-scheme:dark}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:var(--font);color:var(--ink);background:linear-gradient(170deg,var(--bg-1),var(--bg-2)) fixed;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}.pads{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.pad{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fdc7a,#4fae55 70%);opacity:.22;clip-path:polygon(50% 50%,100% 38%,100% 100%,0 100%,0 0,100% 0,100% 30%);animation:drift var(--d) ease-in-out infinite alternate}@media(prefers-color-scheme:dark){.pad{opacity:.12}}@keyframes drift{0%{transform:translate(0) rotate(0)}to{transform:translate(14px,-10px) rotate(14deg)}}#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto}.screen{flex:1;display:flex;flex-direction:column;min-height:0;animation:screen-in .26s ease-out}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:20px;letter-spacing:.01em;padding:16px 22px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--hair),var(--shadow);transition:transform 80ms ease,box-shadow 80ms ease}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--hair),var(--shadow)}.btn.primary{background:linear-gradient(180deg,#5ad672,var(--green));color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15);box-shadow:0 6px 0 var(--green-d),0 12px 24px #2a9a4459}.btn.primary:active{box-shadow:0 2px 0 var(--green-d),0 6px 12px #2a9a444d}.btn.gold{background:linear-gradient(180deg,#ffcf5c,var(--gold));color:#4a2b00;box-shadow:0 6px 0 var(--gold-d),0 12px 24px #e08b004d}.btn.gold:active{box-shadow:0 2px 0 var(--gold-d)}.btn.wide{width:100%}.btn svg{width:22px;height:22px;flex:none}.btn.bounce{animation:bounce 2.2s ease-in-out infinite}@keyframes bounce{0%,82%,to{transform:translateY(0) scale(1)}88%{transform:translateY(-5px) scale(1.03)}94%{transform:translateY(0) scale(.99)}}.icon-btn{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--card);box-shadow:0 4px 0 var(--hair),0 6px 16px #14462d1f}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hair)}.icon-btn svg{width:24px;height:24px}.home{justify-content:space-between;gap:18px;padding-bottom:8px}.home-top{display:flex;justify-content:flex-end;gap:10px}.logo{text-align:center;margin-top:0}.logo .mascot{width:132px;height:132px;margin:0 auto -18px;animation:idle-bob 3.2s ease-in-out infinite}@keyframes idle-bob{0%,to{transform:translateY(0) scale(1)}45%{transform:translateY(0) scale(1.04,.96)}55%{transform:translateY(-10px) scale(.97,1.04)}65%{transform:translateY(0) scale(1.03,.97)}}.logo h1{margin:0;font-size:clamp(54px,15vw,76px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;-webkit-text-stroke:7px var(--line);paint-order:stroke fill;text-shadow:0 6px 0 var(--line)}.logo h1 span{color:#7be36b}.logo p{margin:14px 0 0;font-weight:800;color:var(--ink-2);font-size:17px}.cards{display:flex;flex-direction:column;gap:14px}.card{background:var(--card);border-radius:24px;padding:18px;box-shadow:0 6px 0 var(--hair),var(--shadow)}.level-card{text-align:center}.level-card .kicker{font-size:14px;font-weight:900;color:var(--ink-2);text-transform:uppercase;letter-spacing:.12em}.level-card .big{font-size:44px;font-weight:900;margin:2px 0 14px;letter-spacing:-.02em}.daily-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left}.cal{flex:none;width:58px;height:62px;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 2px var(--hair);display:flex;flex-direction:column;align-items:center;overflow:hidden}.cal b{width:100%;background:var(--red);color:#fff;font-size:12px;text-align:center;padding:3px 0;letter-spacing:.08em}.cal span{font-size:24px;font-weight:900;margin-top:4px}.daily-card .meta{flex:1;min-width:0}.daily-card .t{font-size:19px;font-weight:900}.daily-card .s{font-size:14px;font-weight:700;color:var(--ink-2);margin-top:2px}.daily-card .s.done{color:var(--green-d)}@media(prefers-color-scheme:dark){.daily-card .s.done{color:#6fe08a}}.streak{flex:none;display:flex;align-items:center;gap:3px;font-weight:900;font-size:20px;color:var(--gold-d)}.streak svg{width:22px;height:22px}.streak.off{color:var(--ink-2);opacity:.6}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.topbar .title{text-align:center}.topbar>:first-child{justify-self:start}.hearts{justify-self:end;display:flex;gap:2px}.heart{width:28px;height:28px;display:block;transition:filter .2s ease,opacity .2s ease}.heart svg{width:100%;height:100%;display:block}.heart.lost{filter:grayscale(1) brightness(1.3);opacity:.35}.heart.breaking{animation:heart-break .65s ease}@keyframes heart-break{0%{transform:scale(1);filter:none;opacity:1}25%{transform:scale(1.45) rotate(-12deg);filter:none;opacity:1}45%{transform:scale(1.2) rotate(12deg)}to{transform:scale(1) rotate(0)}}.heart.gain{animation:heart-gain .6s cubic-bezier(.3,1.6,.5,1)}@keyframes heart-gain{0%{transform:scale(0)}}.sheet .big-icon{width:84px;height:84px;margin:-6px auto 6px;animation:trophy .7s cubic-bezier(.3,1.6,.5,1)}.topbar .title b{display:block;font-size:21px;font-weight:900}.topbar .title small{font-size:13px;font-weight:800;color:var(--ink-2)}.timer{justify-self:end;font-variant-numeric:tabular-nums;font-weight:900;font-size:15px;padding:7px 9px;border-radius:12px;background:var(--card);box-shadow:0 3px 0 var(--hair);min-width:58px;text-align:center}.banner{margin-top:12px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,#fff3cf,#ffe6a3);color:#5a3a00;font-weight:800;font-size:15px;text-align:center;box-shadow:0 3px #e08b0059}.rules{text-align:center;font-size:14px;font-weight:800;color:var(--ink-2);margin:12px 0 10px;min-height:20px}.stage{--size: min( calc(100vw - 32px) , 528px, calc(100dvh - 300px) );flex:1;display:grid;place-items:center;min-height:0;position:relative}.board{width:var(--size);height:var(--size);display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);border:3.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line);box-shadow:0 8px #0a281938,0 22px 40px #0a3c2338;touch-action:none;transition:box-shadow .4s ease,transform .4s ease;position:relative}.board.glow{box-shadow:0 8px #0a281938,0 0 0 6px #ffd84dd9,0 22px 50px #ffbe2880}.cell{position:relative;background:linear-gradient(180deg,#ffffff57,#fff0 55%),var(--pond);box-shadow:inset 0 -2px #0000000d;--wall: 1.6px;--thin: .5px;border-style:solid;border-color:#1835262e;border-width:var(--thin);display:grid;place-items:center;transition:filter .12s ease}.cell.t-wall{border-top:var(--wall) solid var(--line)}.cell.r-wall{border-right:var(--wall) solid var(--line)}.cell.b-wall{border-bottom:var(--wall) solid var(--line)}.cell.l-wall{border-left:var(--wall) solid var(--line)}.cell.t-edge{border-top-width:0}.cell.r-edge{border-right-width:0}.cell.b-edge{border-bottom-width:0}.cell.l-edge{border-left-width:0}.cell.press{filter:brightness(.9)}@media(prefers-color-scheme:dark){.cell{filter:saturate(.92) brightness(.93)}.cell.press{filter:saturate(.92) brightness(.8)}}.cell .x{width:30%;height:30%;position:relative;opacity:0;transform:scale(.4);transition:opacity 90ms ease,transform .12s cubic-bezier(.3,1.6,.6,1)}.cell .x:before,.cell .x:after{content:"";position:absolute;left:50%;top:0;width:22%;height:100%;margin-left:-11%;border-radius:99px;background:#1835269e;transform:rotate(45deg)}.cell .x:after{transform:rotate(-45deg)}.cell.marked .x{opacity:1;transform:scale(1)}.cell.auto .x{opacity:.3;transform:scale(.72)}.cell.clash:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,70,80,.32) 0 5px,transparent 5px 11px);pointer-events:none;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}}.cell.pulse:before{content:"";position:absolute;inset:8%;border-radius:30%;border:3px solid #fff;box-shadow:0 0 0 3px #ffbe28e6;animation:pulse-ring 1.1s ease-out 3;pointer-events:none;z-index:3}@keyframes pulse-ring{0%{opacity:0;transform:scale(1.25)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}.frog{position:absolute;inset:4%;display:none;z-index:2;pointer-events:none}.cell.has-frog .frog{display:block}.frog-svg{width:100%;height:100%;overflow:visible;display:block}.f-shadow{fill:#0a281938;transform-box:fill-box;transform-origin:center}.f-body{transform-box:fill-box;transform-origin:50% 100%}.f-lids ellipse{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.2s infinite;animation-delay:var(--blink-delay, 0s)}@keyframes blink{0%,94%,to{transform:scaleY(0)}96.5%{transform:scaleY(1)}}.f-brows,.f-worry{display:none}.frog.bad .f-brows,.frog.bad .f-worry{display:inline}.frog.bad .f-smile{display:none}.frog.bad .f-pupils{transform:translateY(2px)}.frog.enter .f-body{animation:hop-in .44s cubic-bezier(.25,1.3,.5,1)}.frog.enter .f-shadow{animation:shadow-in .44s ease-out}@keyframes hop-in{0%{transform:translateY(-38%) scale(.55,1.25);opacity:0}45%{transform:translateY(0) scale(1.22,.78);opacity:1}70%{transform:translateY(-6%) scale(.94,1.08)}to{transform:translateY(0) scale(1)}}@keyframes shadow-in{0%{transform:scale(.3);opacity:0}45%{transform:scale(1.15);opacity:1}}.frog.nope .f-body{animation:nope .42s ease}@keyframes nope{20%,60%{transform:translate(-7%) rotate(-6deg)}40%,80%{transform:translate(7%) rotate(6deg)}}.frog.party .f-body{animation:party .62s cubic-bezier(.3,1.4,.5,1) var(--hop-delay, 0ms) both}.frog.party .f-shadow{animation:party-shadow .62s ease var(--hop-delay, 0ms) both}@keyframes party{0%{transform:translateY(0) scale(1)}18%{transform:translateY(0) scale(1.15,.82)}50%{transform:translateY(-48%) scale(.9,1.12) rotate(-8deg)}78%{transform:translateY(0) scale(1.12,.88)}to{transform:translateY(0) scale(1)}}@keyframes party-shadow{50%{transform:scale(.5);opacity:.4}}.frog.hinted:after{content:"";position:absolute;right:-2%;top:-2%;width:26%;height:26%;background:radial-gradient(circle,#fff 0 25%,#ffd54d 26% 60%,transparent 62%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}.frog.ghost{display:block}.frog.ghost .f-body{animation:ghost .9s ease forwards}.frog.ghost .f-shadow{animation:ghost-shadow .9s ease forwards}@keyframes ghost{0%{transform:translateY(-30%) scale(.6,1.2);opacity:0}18%{transform:translateY(0) scale(1.15,.85);opacity:1}28%{transform:scale(1)}38%{transform:translate(-8%) rotate(-9deg)}48%{transform:translate(8%) rotate(9deg)}58%{transform:translate(-5%) rotate(-5deg)}68%{transform:translate(0) rotate(0) scale(1);opacity:1}to{transform:translateY(30%) scale(.15);opacity:0}}@keyframes ghost-shadow{68%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.ripple.oops{border-color:#ff5964f2;animation-delay:.56s;opacity:0}.ripple{position:absolute;inset:12%;border-radius:50%;border:3px solid rgba(255,255,255,.9);animation:ripple .52s ease-out forwards;pointer-events:none;z-index:1}@keyframes ripple{0%{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}.toolbar{display:flex;justify-content:center;gap:14px;margin-top:16px}.tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:900;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}.tool .icon-btn{width:58px;height:58px;border-radius:19px}.tool .icon-btn svg{width:28px;height:28px}.tool[disabled],.gated .tool{opacity:.4;pointer-events:none}.tool .badge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--gold);color:#4a2b00;font-size:13px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 0 var(--gold-d);letter-spacing:0}.gate{position:absolute;inset:0;display:grid;place-items:center;z-index:5}.gate-veil{position:absolute;width:var(--size);aspect-ratio:1;border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#ffffff40}.gate .btn{position:relative}.rules.coach{position:relative;color:var(--ink);background:var(--card);border-radius:16px;padding:12px 14px;margin:12px auto 14px;max-width:400px;font-size:16px;box-shadow:0 4px 0 var(--hair),var(--shadow);animation:pop .26s cubic-bezier(.3,1.5,.6,1)}.rules.coach:after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:var(--card);transform:rotate(45deg);border-radius:3px}@keyframes pop{0%{transform:scale(.9);opacity:0}}.sheet-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#081e1259;animation:fade-in .2s ease}.sheet{width:min(100%,560px);background:var(--card);border-radius:28px 28px 0 0;padding:26px 20px max(20px,env(safe-area-inset-bottom));box-shadow:0 -10px 40px #0003;animation:sheet-up .38s cubic-bezier(.2,1.2,.4,1);text-align:center;max-height:92dvh;overflow:auto}@keyframes sheet-up{0%{transform:translateY(100%)}}.sheet h2{margin:0;font-size:32px;font-weight:900;letter-spacing:-.02em}.sheet .sub{margin:6px 0 0;font-weight:800;color:var(--ink-2)}.sheet .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.sheet .stat{background:var(--card-2);border-radius:16px;padding:12px 6px}.sheet .stat b{display:block;font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}.sheet .stat span{font-size:12px;font-weight:900;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}.sheet .actions{display:flex;flex-direction:column;gap:12px}.sheet .note{margin-top:14px;font-weight:800;color:var(--ink-2);font-size:14px}.sheet .versus{margin:-6px 0 16px;padding:10px;border-radius:14px;background:var(--card-2);font-weight:900}.sheet .trophy{width:76px;height:76px;margin:-6px auto 6px;animation:trophy .7s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-weight:800;font-size:17px;border-bottom:1px solid var(--hair);text-align:left;gap:12px}.toggle-row small{display:block;font-size:13px;color:var(--ink-2);font-weight:700}.switch{flex:none;width:54px;height:32px;border-radius:99px;background:var(--hair);position:relative;transition:background .15s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:transform .16s cubic-bezier(.3,1.4,.6,1)}.switch.on{background:var(--green)}.switch.on:after{transform:translate(22px)}.howto{text-align:left}.howto .rule{display:flex;gap:14px;align-items:center;margin:14px 0}.howto .rule .mini{flex:none;width:92px;height:92px}.howto .rule p{margin:0;font-weight:800;font-size:16px;line-height:1.35}.howto .rule p small{display:block;color:var(--ink-2);font-weight:700;font-size:14px;margin-top:3px}.mini.board{--size: 92px;border-width:2.5px;border-radius:10px;box-shadow:none;pointer-events:none}.mini .cell{--wall: 1.2px}@keyframes trophy{0%{transform:scale(.2) rotate(-30deg);opacity:0}}.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:99px;font-weight:900;z-index:40;animation:toast 1.8s ease forwards;white-space:nowrap}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}.confetti{position:fixed;top:-20px;width:12px;height:16px;border-radius:50% 50% 50% 0;z-index:30;pointer-events:none;animation:fall var(--t) cubic-bezier(.2,.6,.4,1) forwards}@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition:none!important}}@media(max-height:700px){.logo .mascot{width:104px;height:104px}.level-card .big{font-size:36px;margin-bottom:10px}.card{padding:14px}.btn{padding:14px 20px}}
