*,::before,::after{box-sizing:border-box;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,p{margin:0;font-size:inherit;font-weight:inherit}
button{font:inherit;color:inherit;background:none;padding:0;cursor:pointer;-webkit-appearance:button}
svg{display:block}
.flex{display:flex}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.hidden{display:none}
.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-2{gap:.5rem}.gap-4{gap:1rem}.mb-3{margin-bottom:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}
.pb-4{padding-bottom:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.min-h-full{min-height:100%}.w-full{width:100%}
.text-center{text-align:center}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.tracking-widest{letter-spacing:.1em}
@media(min-width:640px){.sm\:inline{display:inline}}
:root{--bg:#f4f4f1;--fg:#1f2328;--mut:#5f656c;--bd:rgba(31,35,40,.14);--card:#fbfbfa;--accent:#4f7a62;--danger:#c0414b;--dot:rgba(31,35,40,.2);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#121415;--fg:#e6e8ea;--mut:#9aa1a8;--bd:rgba(230,232,234,.14);--card:#1a1d1f;--accent:#8fc4a1;--danger:#ff7b84;--dot:rgba(230,232,234,.2)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0}
body{overscroll-behavior-y:contain;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mut{color:var(--mut)}
.wrap{width:100%;max-width:42rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.wrap{padding:0 1.5rem}}
@media(min-width:1024px){.wrap{padding:0 2rem}}
.skip{position:absolute;left:1rem;top:-5rem;z-index:10001;background:var(--fg);color:var(--bg);padding:.75rem 1rem;border-radius:.75rem;font-weight:600}
.skip:focus{top:1rem}
.glass{background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--bd);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:1.5rem}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);padding:.5rem 0}
.logo{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:.4rem}
.logo i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill,.btn-g,.btn-p,.lvb{min-height:44px;font-weight:600;font-size:.9rem;cursor:pointer;touch-action:manipulation;border-radius:1rem;transition:opacity .3s linear,background-color .3s linear}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:44px;padding:0 .9rem;color:var(--fg);background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--bd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:1rem}
.pill:disabled{opacity:.4;cursor:default}
.btn-p{position:relative;overflow:hidden;background:var(--fg);color:var(--bg);border:0;padding:0 1.25rem;border-radius:.75rem}
.btn-g{background:transparent;color:var(--fg);border:1px solid var(--bd);padding:0 1.25rem;border-radius:.75rem}
@media(hover:hover){.btn-p:hover,.pill:hover:not(:disabled){opacity:.8}.btn-g:hover,.lvb:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 8%,transparent)}}
.pill:active,.btn-p:active,.btn-g:active,.lvb:active{transform:scale(.98)}
.i-sun{display:none}.dark .i-sun{display:block}.dark .i-moon{display:none}
#boardWrap{width:min(100%,max(16rem,calc(100dvh - 17rem)));padding:.75rem}
@media(min-width:640px){#boardWrap{padding:1rem}}
#board{display:block;width:100%;aspect-ratio:1;overflow:visible;touch-action:manipulation}
.arrow{cursor:pointer;outline:none}
.arrow .hit{fill:none;stroke:transparent;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.arrow .body{fill:none;stroke:var(--fg);stroke-width:.26;stroke-linecap:round;stroke-linejoin:round}
.arrow .head{fill:var(--fg)}
.arrow:focus-visible .hit{stroke:color-mix(in srgb,var(--accent) 35%,transparent)}
.arrow.hint .body{stroke:var(--accent);stroke-width:.36}
.arrow.hint .head{fill:var(--accent)}
.arrow.hint{animation:pulse 1s ease-out infinite}
.arrow.bad .body{stroke:var(--danger)}
.arrow.bad .head{fill:var(--danger)}
.arrow.shake{animation:shake .35s linear}
.arrow.gone{pointer-events:none}
@keyframes pulse{50%{opacity:.45}}
@keyframes shake{25%{transform:translateX(-.08px)}75%{transform:translateX(.08px)}}
@media (prefers-reduced-motion:reduce){.arrow.hint,.arrow.shake,#board.intro .arrow,#hearts svg.pop,#boardWrap.win,#boardWrap.err{animation:none}}
.pan{overflow:auto;overscroll-behavior:contain}
.pan #board{width:calc(var(--n)*22px)}
@keyframes arrow-in{from{opacity:0}}
#board.intro .arrow{animation:arrow-in .4s ease-out backwards;animation-delay:var(--d,0ms)}
@keyframes pop{40%{transform:scale(1.35)}}
#hearts svg.pop{animation:pop .4s ease-out}
@keyframes ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}to{box-shadow:0 0 0 18px transparent}}
#boardWrap.win{animation:ring .9s ease-out}
@keyframes err{40%{border-color:var(--danger)}}
#boardWrap.err{animation:err .45s linear}
#snd[aria-pressed="true"] .s-off,#snd[aria-pressed="false"] .s-on{display:none}
.h-on{fill:var(--danger);stroke:var(--danger)}
.h-off{fill:none;stroke:var(--mut)}
#hearts svg{width:24px;height:24px;stroke-width:2;stroke-linejoin:round}
#hearts{display:flex;gap:.25rem}
.layer{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;transition:visibility .3s}
.layer.open{visibility:visible}
.bd{position:absolute;inset:0;background:rgba(10,12,14,.5);opacity:0;transition:opacity .3s linear}
.layer.open .bd{opacity:1}
.sheet{position:relative;width:100%;max-width:28rem;max-height:85dvh;display:flex;flex-direction:column;border-radius:2rem 2rem 0 0;padding:.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--bd);transform:translateY(100%);transition:transform .3s ease-out}
.layer.open .sheet{transform:none}
.grab{width:2.5rem;height:.3rem;border-radius:9999px;background:var(--bd);margin:0 auto .9rem}
@media(min-width:640px){.layer{align-items:center}.sheet{max-width:24rem;border-radius:1.5rem;padding-bottom:1.25rem;transform:translateY(1rem);opacity:0;transition:transform .3s ease-out,opacity .3s linear}.layer.open .sheet{transform:none;opacity:1}.grab,.m-only{display:none}}
.lvg{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;overflow-y:auto;padding:3px}
.lvb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1;background:transparent;color:var(--fg);border:1px solid var(--bd);padding:0;border-radius:.75rem}
.lvb small{font-size:.6rem;letter-spacing:.05em}
.lvb.done{background:var(--fg);color:var(--bg)}
.lvb.cur{box-shadow:0 0 0 2px var(--accent)}
.lvb:disabled{opacity:.45;cursor:default}
.star{display:inline-block}.star:not(.on){color:var(--mut)}
@keyframes starin{from{transform:scale(.4);opacity:0}}
.star.on{animation:starin .45s ease-out backwards;animation-delay:calc(var(--i)*.14s)}
@media (prefers-reduced-motion:reduce){.star.on{animation:none}}
.btn-p .cd{display:none;position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--bg) 55%,transparent);transform-origin:left}
.auto .btn-p .cd{display:block;animation:drain 3s linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
#ovN{display:none}.auto #ovN{display:block}
.toast{position:fixed;left:50%;bottom:calc(6rem + env(safe-area-inset-bottom,0px));z-index:10000;max-width:calc(100% - 2rem);text-align:center;background:var(--fg);color:var(--bg);padding:.75rem 1.25rem;border-radius:1rem;font-size:.9rem;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translate(-50%,.5rem);pointer-events:none;transition:opacity .3s linear,transform .3s ease-out}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}