@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font-display: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{overflow-x:hidden;overflow-y:auto}.back-link svg{width:13px;height:13px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.brand{display:flex;flex-direction:column;align-items:flex-start}.top-actions{display:flex;gap:2vw}.back-link{display:flex;align-items:center;gap:4px;margin-bottom:.8svh;color:var(--ink-soft);font-size:clamp(10px,1.4svh,12px);font-weight:600;letter-spacing:.08em;text-decoration:none}.subtitle{margin:.4em 0 0;font-size:clamp(10px,1.4svh,12px);letter-spacing:.3em;color:var(--ink-soft)}.seo-info{flex-shrink:0;align-self:center;max-width:90vw;margin-top:.6svh;font-size:9px;color:var(--ink-soft);text-align:center}.icon-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,transform .1s ease}.howto-link{align-self:center;flex-shrink:0;border:none;background:none;color:var(--accent-dark);font-weight:600;font-size:clamp(12px,1.8svh,14px);letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:1svh 4px 0}.howto-backdrop{position:fixed;inset:0;background:var(--scrim, rgba(30, 24, 16, .35));opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:10}.howto-backdrop.show{opacity:1;pointer-events:auto}.howto-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-radius:20px 20px 0 0;box-shadow:0 -1svh 3svh #00000040;padding:1.6svh 6vw calc(4svh + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:11}.howto-sheet.show{transform:translateY(0)}.howto-handle{width:36px;height:4px;border-radius:2px;background:var(--ink-soft);opacity:.4;margin:0 auto 2svh}.howto-title{margin:0 0 1.6svh;font-size:clamp(14px,2svh,16px);font-weight:600;letter-spacing:.1em;color:var(--ink)}.howto-list{margin:0;padding:0 0 0 1.1em;display:flex;flex-direction:column;gap:1.2svh;font-size:clamp(13px,1.9svh,15px);color:var(--ink);line-height:1.4}.howto-list li::marker{color:var(--accent);font-weight:700}.howto-list strong{color:var(--ink);font-weight:700}.overlay-global{margin:0;font-size:clamp(11px,1.6svh,13px);color:var(--accent-dark);font-weight:600;letter-spacing:.06em}.overlay-global.new-global{color:var(--record, var(--accent-dark));font-weight:800}:root{--bg: #fdf6e9;--ink: #17233f;--ink-soft: #6f7a92;--line: #ece2d2;--accent: #4db2e8;--accent-dark: #2b8fc7;--record: #f0891f;--panel: #fbf1df;--panel-line: #f0e4cf;--on-hi: #ffe27a;--on-lo: #ffce33;--on-edge: #eda01c;--on-glow: transparent;--off-hi: #d3dbe5;--off-lo: #c0cad8;--off-edge: #a3aebe;--ripple-hi: #a8e6cf;--ripple-lo: #6fd6b1;--tile-drop: rgba(60, 55, 40, .16);--pulse: rgba(255, 206, 51, .55);--peach: #ffb4a2;--peach-ink: #a8452c;--scrim: rgba(40, 32, 20, .35)}html,body{margin:0;height:100%;height:100svh;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.stage{height:100%;display:flex;flex-direction:column;padding:2.4svh 4vw 2.4svh}.back-link:hover{color:var(--ink)}.title{margin:0;font-family:var(--font-display);font-size:clamp(15px,2.4svh,20px);font-weight:700;letter-spacing:.04em;color:var(--ink)}.icon-btn:active{background:#4db2e824;border-color:var(--accent);color:var(--accent-dark);transform:scale(.94)}.icon-btn .ico-sound-off,.icon-btn.is-off .ico-sound-on{display:none}.icon-btn.is-off .ico-sound-off{display:block}.icon-btn.is-off{color:var(--ink-soft)}.tagline{margin:1.4svh 0 0;text-align:center;font-size:clamp(12px,1.7svh,14px);color:var(--ink-soft);letter-spacing:.03em;flex-shrink:0}.challenge-banner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-height:0;opacity:0;overflow:hidden;margin:0 auto;padding:0 4vw;border-radius:999px;background:#4db2e81f;border:1.5px solid rgba(77,178,232,.35);color:var(--ink);font-size:clamp(11px,1.6svh,13px);letter-spacing:.02em;text-align:center;transition:max-height .35s ease,opacity .3s ease,margin .35s ease,padding .35s ease;flex-shrink:0;cursor:pointer}.challenge-banner.show{max-height:8svh;opacity:1;margin:1.2svh auto 0;padding:.9svh 4vw}.board-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8svh;min-height:0}.board-wrap{position:relative;width:min(88vw,52svh,480px);aspect-ratio:1 / 1;flex-shrink:0}.board-frame{position:absolute;inset:0;border-radius:7%;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line),0 1.2svh 2.6svh #50463224}.grid{--lip: calc(.8svh * 5 / var(--n, 5));position:absolute;left:50%;top:50%;width:89%;height:89%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(var(--n, 5),1fr);grid-template-rows:repeat(var(--n, 5),1fr);gap:4%}.grid.is-locked{pointer-events:none}.tile{position:relative;padding:0;border:none;border-radius:24%;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;background:linear-gradient(180deg,var(--off-hi) 0%,var(--off-lo) 100%);box-shadow:inset 0 calc(-1 * var(--lip)) 0 0 var(--off-edge),0 calc(.5 * var(--lip)) calc(1.1 * var(--lip)) var(--tile-drop);transition:background .14s ease,box-shadow .14s ease}.tile--on{background:linear-gradient(180deg,var(--on-hi) 0%,var(--on-lo) 100%);box-shadow:inset 0 calc(-1 * var(--lip)) 0 0 var(--on-edge),0 calc(.5 * var(--lip)) calc(1.1 * var(--lip)) var(--tile-drop),0 0 calc(2.4 * var(--lip)) var(--on-glow)}.tile:active{transform:scale(.93)}@keyframes tile-flip{0%{transform:scale(1)}45%{transform:scale(.84)}to{transform:scale(1)}}.tile--flip{animation:tile-flip .18s cubic-bezier(.34,1.35,.5,1)}.tile--flip:after{content:"";position:absolute;inset:0;border-radius:inherit;animation:tile-pulse .18s ease-out;pointer-events:none}@keyframes tile-pulse{0%{box-shadow:0 0 0 0 var(--pulse)}to{box-shadow:0 0 0 calc(1.8 * var(--lip)) transparent}}.grid.is-cleared .tile{animation:tile-ripple .46s ease-out both;animation-delay:calc(var(--d, 0) * 45ms)}@keyframes tile-ripple{0%{transform:scale(1);background:linear-gradient(180deg,var(--off-hi) 0%,var(--off-lo) 100%)}40%{transform:scale(1.12);background:linear-gradient(180deg,var(--ripple-hi) 0%,var(--ripple-lo) 100%)}to{transform:scale(1);background:linear-gradient(180deg,var(--off-hi) 0%,var(--off-lo) 100%)}}.stats{display:flex;align-items:stretch;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line);padding:.7svh 1.4svh;flex-shrink:0}.stat{display:flex;flex-direction:column;align-items:center;gap:.1svh;padding:0 5vw;min-width:0}.stat+.stat{border-left:1.5px solid var(--panel-line)}.stat-label{font-size:clamp(9px,1.2svh,11px);letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase}.stat-value{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,2.3svh,19px);color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;justify-content:center;gap:2.5vw;flex-shrink:0}.sizes{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line)}.size-btn{border:none;background:transparent;color:var(--ink-soft);font-family:var(--font-display);font-weight:700;font-size:clamp(11px,1.6svh,13px);width:clamp(26px,3.6svh,32px);height:clamp(26px,3.6svh,32px);border-radius:50%;cursor:pointer;transition:background .15s ease,color .15s ease}.size-btn.is-active{background:var(--accent);color:#fff}.pill-btn{border:none;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1.7svh,14px);letter-spacing:.04em;padding:1.1svh 4vw;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);box-shadow:0 .5svh 1.2svh #4db2e852;transition:transform .1s ease}.pill-btn--quiet{color:var(--peach-ink);background:var(--peach);box-shadow:0 .5svh 1.2svh #ffb4a259}.pill-btn:active{transform:scale(.96)}.seo-info summary{cursor:pointer;letter-spacing:.06em;font-weight:600;list-style:none}.seo-info summary::-webkit-details-marker{display:none}.seo-info summary:after{content:" ▾"}.seo-info[open] summary:after{content:" ▴"}.seo-info p{margin:4px 0 0;line-height:1.5;text-align:left}.overlay{position:fixed;inset:0;background:#fdf6e9f2;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}.overlay.show{opacity:1}.overlay-content{display:flex;flex-direction:column;align-items:center;gap:1.4svh;padding:0 6vw;text-align:center;pointer-events:none}.overlay.show .overlay-content{pointer-events:auto}.overlay-title{margin:0;font-family:var(--font-display);font-size:clamp(22px,4svh,32px);font-weight:700;letter-spacing:.1em;color:var(--ink)}.overlay-badge{margin:0;padding:.5svh 3.2vw;border-radius:999px;background:var(--ripple-lo);color:#0b3a2c;font-family:var(--font-display);font-weight:700;font-size:clamp(11px,1.6svh,13px);letter-spacing:.22em}.overlay-sub{margin:0;font-size:clamp(13px,1.9svh,15px);font-weight:600;color:var(--ink);letter-spacing:.08em}.overlay-time{margin:0;font-size:clamp(11px,1.6svh,13px);color:var(--ink-soft);letter-spacing:.06em}.overlay-hint{margin:0;max-width:32ch;font-size:clamp(10px,1.4svh,12px);color:var(--ink-soft);letter-spacing:.04em;line-height:1.4}.overlay-actions{display:flex;gap:3vw;margin-top:.6svh}.again-btn,.share-btn{font-family:var(--font-display);font-weight:600;padding:1.2svh 4.5vw;border-radius:999px;font-size:clamp(12px,1.8svh,14px);letter-spacing:.06em;cursor:pointer;transition:transform .1s ease}.again-btn:active,.share-btn:active{transform:scale(.96)}.again-btn{border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 .8svh 1.8svh #4db2e859}.share-btn{border:1.5px solid var(--accent);background:transparent;color:var(--accent-dark)}.share-note{margin:0;font-size:clamp(11px,1.5svh,13px);color:var(--ink-soft);letter-spacing:.06em;opacity:0;transition:opacity .25s ease}.share-note.show{opacity:1}@media(max-height:480px){.stage{padding-top:1.4svh;padding-bottom:1.2svh}.subtitle,.seo-info{display:none}.back-link{margin-bottom:.3svh}.tagline{margin-top:.6svh}}@media(prefers-reduced-motion:reduce){.tile{transition:background .14s ease}.tile--flip{animation:none}.tile--flip:after{animation:none}.grid.is-cleared .tile{animation:none}.challenge-banner{transition:none}}:root[data-theme=dark]{--bg: #070b16;--ink: #eaf6ff;--ink-soft: #7f93b3;--line: #1b2942;--accent: #22d3ee;--accent-dark: #0fb6d4;--record: #ff8a3d;--panel: #0c1526;--panel-line: #1b2942;--on-hi: #ffe45c;--on-lo: #ffd60a;--on-edge: #c99a00;--on-glow: rgba(255, 214, 10, .45);--off-hi: #1a2942;--off-lo: #142033;--off-edge: #0b1220;--ripple-hi: #67e8f9;--ripple-lo: #22d3ee;--tile-drop: rgba(0, 0, 0, .5);--pulse: rgba(34, 211, 238, .6);--peach: rgba(255, 77, 157, .16);--peach-ink: #ff4d9d;--scrim: rgba(0, 0, 0, .6)}[data-theme=dark] .board-frame{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent),0 0 2.4svh color-mix(in srgb,var(--accent) 22%,transparent),0 1.2svh 2.6svh #0000008c}[data-theme=dark] .icon-btn:active{background:color-mix(in srgb,var(--accent) 18%,transparent)}[data-theme=dark] .challenge-banner{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}[data-theme=dark] .size-btn.is-active{color:#04212a;box-shadow:0 0 1.4svh color-mix(in srgb,var(--accent) 55%,transparent)}[data-theme=dark] .pill-btn{color:#04212a;box-shadow:0 0 1.6svh color-mix(in srgb,var(--accent) 45%,transparent)}[data-theme=dark] .pill-btn--quiet{color:var(--peach-ink);background:var(--peach);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--peach-ink) 55%,transparent)}[data-theme=dark] .overlay{background:#070b16f0}[data-theme=dark] .overlay-badge{color:#04212a;box-shadow:0 0 1.8svh color-mix(in srgb,var(--accent) 50%,transparent)}[data-theme=dark] .again-btn{color:#04212a;box-shadow:0 .8svh 1.8svh color-mix(in srgb,var(--accent) 40%,transparent)}