:root{--bg:#121a13;--panel:#1b261ced;--cell:#223022f2;--cell-alt:#1d2a1ef2;--line:#35482f;--line-bold:#7ea36a;--text:#eef4e8;--given:#c3d6b6;--user:#f0d98a;--note:#9db292;--accent:#8fc464;--sel:#3e5c33;--peer:#26331f;--same:#36512c;--bad:#ff7b6b;--good:#9fd45f;--radius:12px;--plum:#6b2d63;--plum-lt:#8a3f7e;--garden:#5c8a3c;--garden-lt:#74a850;--sand:#c9a86a;--sand-lt:#ddc48a;--sky:#3f6e8f;--sky-lt:#5898c2;--blossom:#d9639e;--cream:#f7eddb;--hero:url(/hero.webp)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body{color:var(--text);-webkit-text-size-adjust:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}html{background:var(--bg);overflow-x:hidden}body{overscroll-behavior-y:none;background:0 0;flex-direction:column;align-items:center;min-height:100dvh;padding:16px 12px 24px;display:flex;overflow-x:hidden}body:before{content:"";filter:blur(4px)brightness(.3)saturate(.75);z-index:-1;pointer-events:none;background:url(/garden-bg.webp) 50%/cover no-repeat;position:fixed;inset:0;transform:scale(1.06)}h1{letter-spacing:.5px;color:var(--text);flex:none;margin:2px 0 12px;font-size:22px;font-weight:600}:root{--chrome:400px}@media (width>=700px){:root{--chrome:470px}}.wrap{flex-direction:column;flex:auto;width:100%;min-width:0;max-width:520px;min-height:0;display:flex}.board-wrap{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;margin-bottom:2px;display:flex}.toolbar{flex-wrap:wrap;flex:none;gap:8px;margin-bottom:12px;display:flex}select,button{appearance:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;padding:12px 14px;font-family:inherit;font-size:16px;transition:background .12s,border-color .12s,transform 60ms}select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--note) 50%), linear-gradient(135deg, var(--note) 50%, transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;flex:auto;min-width:130px;padding-right:34px}button:active{transform:scale(.97)}button:hover,select:hover{border-color:var(--line-bold)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#08131f;font-weight:600}.btn-primary:hover{background:#63aeff;border-color:#63aeff}.daily-btn{border-radius:var(--radius);background:linear-gradient(#24303f,#1e2733);border:1px solid #3a4a5f;flex-direction:column;flex:none;align-items:center;gap:3px;width:100%;margin-bottom:10px;padding:12px 16px;display:flex}.daily-btn:hover{border-color:var(--accent)}.daily-main{color:var(--text);font-size:17px;font-weight:600}.daily-sub{color:var(--note);font-size:13px;font-weight:400}.daily-btn.active{border-color:var(--accent);background:linear-gradient(#294464,#21354d)}.daily-btn.solved .daily-main:after{content:" ✓";color:var(--good)}@media (width>=700px){.daily-main{font-size:20px}.daily-sub{font-size:15px}.daily-btn{border-radius:14px;padding:15px 18px}}.board-shell{background:var(--line-bold);border-radius:var(--radius);width:min(100%, calc(100dvh - var(--chrome)));aspect-ratio:1;margin:0 auto;padding:2px;box-shadow:0 8px 28px #00000073}@supports not (height:100dvh){.board-shell{width:min(100%, calc(100vh - var(--chrome)))}}#board{background:var(--line);border-radius:10px;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);gap:1px;width:100%;height:100%;display:grid;overflow:hidden;container-type:inline-size}.cell{background:var(--cell);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:clamp(18px,6.2cqw,40px);font-weight:500;line-height:1;transition:background .1s;display:flex;position:relative}.cell.br{box-shadow:2px 0 0 0 var(--line-bold);z-index:2}.cell.bb{box-shadow:0 2px 0 0 var(--line-bold);z-index:2}.cell.br.bb{box-shadow:2px 0 0 0 var(--line-bold), 0 2px 0 0 var(--line-bold)}.cell.box-alt{background:var(--cell-alt)}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.sel{background:var(--sel)}.cell.given{color:var(--given);font-weight:600}.cell.user{color:var(--user)}.cell.wrong{color:var(--bad)!important}.cell.hinted{animation:.45s pop}@keyframes pop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.18)}to{opacity:1;transform:scale(1)}}.notes{pointer-events:none;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:2px}.notes span{color:var(--note);justify-content:center;align-items:center;font-size:clamp(7px,2.1cqw,14px);line-height:1;display:flex}.notes span.hl{color:var(--accent);font-weight:700}.pad{flex:none;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px;display:grid;container-type:inline-size}.num{aspect-ratio:1/.82;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-height:52px;color:var(--user);flex-direction:column;justify-content:center;align-items:center;padding:0;font-size:clamp(20px,9cqw,34px);font-weight:600;display:flex}.num small{color:var(--note);margin-top:3px;font-size:10px;font-weight:400}.num.active{background:var(--sel);border-color:var(--accent);color:#fff}.num.done{opacity:.32}.num.erase{color:var(--note);font-size:clamp(13px,3.4cqw,17px)}.modes{flex:none;gap:8px;margin-top:8px;display:flex}.modes button{flex:1}.mode.active{background:var(--sel);border-color:var(--accent);color:#fff;font-weight:600}.actions{flex:none;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;display:grid}.footer{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}.switch{color:var(--note);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:15px;display:flex}.switch input{display:none}.track{background:var(--line);border-radius:999px;flex:none;width:48px;height:28px;transition:background .16s;position:relative}.track:after{content:"";background:var(--note);border-radius:50%;width:22px;height:22px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track:after{background:#fff;transform:translate(20px)}.stat{color:var(--note);font-variant-numeric:tabular-nums;font-size:15px}#msg{text-align:center;min-height:22px;color:var(--note);flex:none;margin-top:10px;font-size:16px;font-weight:500}#msg.ok{color:var(--good)}#msg.err{color:var(--bad)}.hidden{display:none!important}#start{z-index:60;overscroll-behavior:none;background:#241a14;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden auto}.start-bg{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.start-bg:before{content:"";background:var(--hero) center/cover no-repeat;filter:blur(28px)brightness(.5)saturate(1.1);position:absolute;inset:-40px}.start-art,.start-menu,.start-note{z-index:1;position:relative}.start-art{aspect-ratio:1672/941;background:var(--hero) center/cover no-repeat;--fade:7%;width:min(100%,103.056vh);max-height:58vh;-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);flex:0 auto;-webkit-mask-composite:source-in;mask-composite:intersect}.start-menu{flex-direction:column;flex:none;gap:12px;width:100%;max-width:460px;padding:20px 20px 8px;display:flex}.card{-webkit-backdrop-filter:blur(10px);text-align:left;background:#161e16d1;border:1px solid #ffffff24;border-radius:18px;padding:16px 18px 18px;box-shadow:0 10px 30px #0006}.card header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px;display:flex}.card h2{letter-spacing:.2px;color:#fff;margin:0;font-size:19px;font-weight:700}.card .badge{letter-spacing:.4px;text-transform:uppercase;color:#eaf3e4;white-space:nowrap;background:#ffffff24;border-radius:999px;flex:none;padding:4px 10px;font-size:12px;font-weight:700}.card.daily .badge{background:#d9639e57}.card.is-done .badge{color:#d8f0bd;background:#9fd45f47}.card-note{color:#c2d2bb;margin:0 0 14px;font-size:14px;line-height:1.4}.card-actions{gap:8px;display:flex}.card-actions .card-go{flex:2}.card-actions .card-alt{flex:1}.card-go{letter-spacing:.3px;color:#fff;background:linear-gradient(180deg, var(--garden-lt), var(--garden));border:none;border-radius:12px;width:100%;padding:13px 16px;font-size:17px;font-weight:700}.card.daily .card-go{background:linear-gradient(180deg, var(--blossom), #b34a80)}.card.is-done .card-go{background:linear-gradient(#4d5f47,#3c4c38)}.card-go:hover{filter:brightness(1.08)}.card-go:active{transform:scale(.98)}.card-alt{color:#dbe7d5;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff38;border-radius:12px;padding:13px 12px;font-size:15px;font-weight:600}.card-alt:hover{background:#ffffff1f}.levels{background:#00000047;border-radius:12px;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;padding:4px;display:grid}.level-opt{color:#bccdb5;background:0 0;border:none;border-radius:9px;padding:9px 6px;font-size:14px;font-weight:600}.level-opt:hover{color:#e7f1e2;background:#ffffff14}.level-opt.on{color:#33402c;background:#e9dec2ed;font-weight:700;box-shadow:0 1px 4px #00000047}.level-opt.on:hover{color:#33402c;background:#f0e7d0f7}.text-link{color:#cfe0c7;text-underline-offset:3px;background:0 0;border:none;align-self:center;padding:10px 14px;font-size:15px;font-weight:600;text-decoration:underline}@media (width>=700px){.card{border-radius:20px;padding:20px 22px 22px}.card h2{font-size:23px}.card .badge{font-size:13px}.card-note{font-size:16px}.card-go{padding:15px 18px;font-size:19px}.card-alt{font-size:16px}.level-opt{padding:11px 8px;font-size:16px}.text-link{font-size:17px}}.start-note{display:none}@media (aspect-ratio>=1) and (width>=800px){.start-art{--art-h:min(56.25vw, calc(100vh - 350px));height:var(--art-h);width:calc(var(--art-h) * 1672 / 941);aspect-ratio:auto;background-position:50%;background-size:cover;max-width:100%;max-height:none;position:static}#start{justify-content:center;align-items:center}.start-menu{align-self:center;max-width:520px;margin-top:14px;padding:0 24px;position:relative}}@media (width>=700px){.menu-btn{padding:18px 24px;font-size:21px}.menu-btn.play{padding:21px 24px;font-size:25px}.menu-btn .ico{width:38px;height:38px;font-size:20px}.start-menu{gap:14px;max-width:520px}}#howto{z-index:70;-webkit-backdrop-filter:blur(3px);background:#080a0ebf;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.howbox{background:var(--panel);border:1px solid var(--line-bold);border-radius:20px;width:100%;max-width:440px;max-height:86vh;padding:26px 24px 22px;overflow:auto;box-shadow:0 20px 60px #0009}.howbox h2{color:var(--accent);margin:0 0 14px;font-size:24px}.howbox ol{margin:0 0 14px;padding-left:22px}.howbox li{color:var(--text);margin-bottom:7px;font-size:16px;line-height:1.55}.how-goal{color:var(--note);background:#171b22;border-radius:10px;margin:0 0 18px;padding:12px 14px;font-size:15px;line-height:1.5}.howbox button{width:100%;padding:14px;font-size:18px}@media (width>=700px){.howbox{max-width:520px;padding:32px 30px 26px}.howbox h2{font-size:28px}.howbox li{font-size:18px}.how-goal{font-size:17px}}.offscreen{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.topbar{flex:none;align-items:center;gap:12px;width:100%;margin-bottom:10px;display:flex}.topbar-title{text-align:center;letter-spacing:.4px;color:var(--text);flex:1;font-size:18px;font-weight:600}.back-btn{flex:none;min-width:46px;padding:10px 14px;font-size:15px}@media (width>=700px){.topbar-title{font-size:22px}.back-btn{padding:12px 18px;font-size:17px}}#fx{pointer-events:none;z-index:40;width:100%;height:100%;display:none;position:fixed;inset:0}#fx.on{display:block}#overlay{z-index:50;-webkit-backdrop-filter:blur(3px);background:#080a0eb8;justify-content:center;align-items:center;padding:24px;animation:.25s fade;display:flex;position:fixed;inset:0}#winbox{background:var(--panel);border:1px solid var(--line-bold);text-align:center;border-radius:20px;width:100%;max-width:360px;padding:32px 28px 26px;animation:.35s cubic-bezier(.2,.9,.3,1.2) rise;box-shadow:0 20px 60px #0009}#winbox .trophy{margin-bottom:10px;font-size:56px;line-height:1}#winbox h2{color:var(--good);margin:0 0 8px;font-size:26px}#winbox p{color:var(--note);margin:0 0 22px;font-size:17px;line-height:1.45}#winbox button{width:100%;padding:14px;font-size:18px}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(18px)scale(.92)}to{opacity:1;transform:none}}@media (width>=700px){#winbox{max-width:420px;padding:40px 34px 30px}#winbox .trophy{font-size:68px}#winbox h2{font-size:31px}#winbox p{font-size:19px}#winbox button{padding:16px;font-size:20px}}@media (width<=380px){select,button{padding:10px 12px;font-size:15px}.pad,.actions,.modes{gap:6px}}@media (width>=700px){h1{margin-bottom:20px;font-size:30px}select,button{border-radius:14px;padding:15px 18px;font-size:19px}select{background-position:calc(100% - 20px) 25px,calc(100% - 15px) 25px}.num small{font-size:12px}.switch,.stat{font-size:17px}#msg{min-height:28px;font-size:19px}.toolbar,.pad,.modes,.actions{gap:10px}.track{width:54px;height:32px}.track:after{width:26px;height:26px}.switch input:checked+.track:after{transform:translate(22px)}}@supports (padding:max(0px)){body{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(32px, env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}#root{flex-direction:column;flex:auto;align-items:center;width:100%;min-width:0;min-height:0;display:flex}