:root{--bg: #f3eee3;--surface: #fffdf8;--ink: #1c1a16;--muted: #6f6a5e;--line: #1c1a16;--shadow: #1c1a16;--accent: #ff5b3a;--accent-ink: #fff;--green: #2fa862;--yellow: #f0b429;--gray: #8b8f98;--font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", sans-serif}:root[data-theme=dark]{--bg: #15141a;--surface: #23212b;--ink: #f4efe6;--muted: #a29cae;--line: #5a5568;--shadow: #000;--accent: #ff6b4a;--gray: #5d606a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font)}body{overscroll-behavior-y:contain}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:480px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom));min-height:100dvh}.header{display:flex;align-items:center;justify-content:space-between;height:56px}.header .right{display:flex;gap:2px}.icon{background:none;border:0;width:40px;height:40px;display:grid;place-items:center;border-radius:12px}.icon:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}.logo{margin:0;font-size:28px;font-weight:900;letter-spacing:-.04em;display:flex;align-items:center;gap:6px}.logo span{background:var(--accent);color:var(--accent-ink);padding:0 8px;border-radius:8px;transform:rotate(-4deg);box-shadow:0 3px 0 var(--shadow)}.puzzle{text-align:center;padding:6px 0 10px}.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.puzzle h2{margin:4px 0 0;font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:850;text-wrap:balance}.grid{display:grid;gap:6px;justify-content:center;margin:6px 0 12px}.grow{display:flex;gap:6px;justify-content:center}.cell{--tile-bg: transparent;--tile-fg: var(--ink);width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:2px dashed color-mix(in srgb,var(--ink) 22%,transparent);font-weight:800;font-size:14px;color:var(--tile-fg)}.cell.m-g,.cell.m-y,.cell.m-x{border:2px solid var(--line)}.m-g{--mark-bg: var(--green);--mark-fg: #fff}.m-y{--mark-bg: var(--yellow);--mark-fg: #1c1a16}.m-x{--mark-bg: var(--gray);--mark-fg: #fff}.cell.m-g,.cell.m-y,.cell.m-x,.tile.m-g,.tile.m-y,.tile.m-x{background:var(--mark-bg);color:var(--mark-fg)}@keyframes flip{0%{transform:perspective(500px) rotateX(0);background:var(--tile-bg);color:var(--tile-fg)}49%{transform:perspective(500px) rotateX(90deg);background:var(--tile-bg);color:var(--tile-fg)}51%{transform:perspective(500px) rotateX(90deg);background:var(--mark-bg);color:var(--mark-fg)}to{transform:perspective(500px) rotateX(0);background:var(--mark-bg);color:var(--mark-fg)}}.flip{animation:flip .55s ease both;animation-delay:calc(var(--i) * .28s)}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-14px)}60%{transform:translateY(-6px)}}.bounce{animation:bounce .9s ease both;animation-delay:calc(var(--i) * .1s)}.ends{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-left:34px}.ends.top{margin-bottom:8px}.ends.bottom{margin-top:8px}.list{position:relative}.rank{position:absolute;left:0;top:0;width:26px;display:grid;place-items:center;font-weight:900;font-size:18px;color:var(--muted)}.slot{position:absolute;left:34px;right:0;top:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;transition:transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform;outline:none}.slot.dragging{transition:none;z-index:5;cursor:grabbing}.slot.locked{cursor:default}.tile{--tile-bg: var(--surface);--tile-fg: var(--ink);height:100%;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--tile-bg);color:var(--tile-fg);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--shadow);font-weight:750;font-size:17px}.slot.dragging .tile{box-shadow:0 12px 24px #00000047,0 4px 0 var(--shadow)}.slot:focus-visible .tile{outline:3px solid var(--accent);outline-offset:2px}.letter{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:14px;font-weight:900}.name{flex:1;line-height:1.15;text-wrap:balance}.grip{display:grid;gap:4px;opacity:.4;flex:none}.grip i{width:18px;height:3px;border-radius:2px;background:currentColor;display:block}@keyframes shake{0%,to{translate:0}20%{translate:-9px}40%{translate:8px}60%{translate:-6px}80%{translate:4px}}.shake{animation:shake .5s ease}.btn{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 20px;font-weight:850;font-size:16px;box-shadow:0 4px 0 var(--shadow);transition:transform .08s,box-shadow .08s}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}.btn.primary{background:var(--accent);color:var(--accent-ink)}.btn:disabled{opacity:.55;cursor:default}.submit{width:100%;margin-top:18px;padding:16px;font-size:18px}.verdict{text-align:center;font-weight:850;font-size:18px;margin:4px 0 10px}.verdict.good{color:var(--green)}.answer{display:grid;gap:10px}.akick{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.akick span{color:var(--accent)}.arow{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 12px 12px;box-shadow:0 3px 0 var(--shadow);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1)}.arow.in{opacity:1;transform:none}.atop{display:flex;align-items:baseline;gap:10px}.arank{font-weight:900;font-size:18px;width:18px;color:var(--accent)}.aname{flex:1;font-weight:750;line-height:1.15}.aval{font-weight:900;font-variant-numeric:tabular-nums;font-size:18px;white-space:nowrap}.abar{height:8px;background:color-mix(in srgb,var(--ink) 10%,transparent);border-radius:5px;margin-top:8px;overflow:hidden}.abar i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .9s cubic-bezier(.2,.8,.2,1)}.you{position:absolute;top:-9px;right:10px;font-size:11px;font-weight:850;padding:1px 8px;border-radius:99px;border:2px solid var(--line);background:var(--mark-bg);color:var(--mark-fg)}.fact{margin:4px 2px 0;font-size:15px;line-height:1.35;color:var(--muted);font-weight:600;animation:fadein .5s both}@keyframes fadein{0%{opacity:0;transform:translateY(6px)}}.actions{display:flex;gap:10px;margin-top:18px}.actions .primary{flex:1;font-size:18px;padding:15px}.next-in{text-align:center;color:var(--muted);font-weight:650;margin:16px 0 0}.next-in b{color:var(--ink);font-variant-numeric:tabular-nums}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a08068c;display:grid;place-items:center;padding:16px;z-index:20;animation:fadein .2s both}.modal{position:relative;width:100%;max-width:420px;max-height:90dvh;overflow:auto;background:var(--bg);border:2px solid var(--line);border-radius:22px;padding:22px 20px 20px;box-shadow:0 6px 0 var(--shadow);animation:pop .3s cubic-bezier(.2,1.3,.4,1) both}@keyframes pop{0%{opacity:0;transform:scale(.92) translateY(10px)}}.modal h2{margin:0 0 12px;font-size:24px;font-weight:900;letter-spacing:-.02em}.modal h3{margin:18px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:none;font-size:28px;line-height:1;border-radius:10px}.rules{padding-left:20px;margin:0 0 12px;line-height:1.5;font-weight:600}.legend{display:grid;gap:8px;margin:0 0 14px;font-weight:700}.legend div{display:flex;align-items:center;gap:12px}.legend .cell{--tile-bg: transparent}.muted{color:var(--muted);font-weight:600;line-height:1.4}.modal .btn.primary{width:100%}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}.stats b{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em}.stats span{font-size:11px;color:var(--muted);font-weight:700}.drow{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:800}.dbar{flex:1}.dbar i{display:block;min-width:28px;background:var(--gray);color:#fff;text-align:right;padding:3px 8px;border-radius:6px;font-style:normal;font-size:14px}.dbar i.today{background:var(--green)}.next{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:2px solid color-mix(in srgb,var(--ink) 12%,transparent)}.next div span{display:block;font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.next div b{font-size:26px;font-variant-numeric:tabular-nums}.modal .next .btn.primary{width:auto}.toast{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-weight:800;z-index:40;animation:pop .25s both}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:30}.confetti i{position:absolute;top:-20px;border-radius:2px;animation:fall linear both}@keyframes fall{to{transform:translate(var(--drift),105dvh) rotate(var(--rot));opacity:.9}}@media (prefers-reduced-motion: reduce){.flip,.bounce,.shake,.confetti i{animation-duration:.01s!important;animation-delay:0s!important}.slot{transition-duration:.01s}}@media (max-height: 700px){.puzzle h2{font-size:21px}}.diff{margin-left:8px;font-size:10px;letter-spacing:.5px;opacity:.75;white-space:nowrap}.diff b{font-weight:400;opacity:.3}.diff.hardtag{letter-spacing:.06em;opacity:1;color:var(--accent)}.lock{flex:none;font-size:15px}.setting{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer}.setting div{flex:1;display:grid;gap:4px}.setting b{font-size:17px}.setting span,.setting em{font-size:14px;color:var(--muted);font-weight:600;line-height:1.35;font-style:normal}.setting input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}.setting .switch{flex:none;width:52px;height:30px;border-radius:99px;border:2px solid var(--line);background:var(--surface);position:relative;transition:background .2s}.setting .switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .2s}.setting input:checked~.switch{background:var(--accent)}.setting input:checked~.switch:after{transform:translate(22px);background:#fff}.setting.off{opacity:.6;cursor:default}.setting.off input{cursor:default}.hintbtn{width:100%;margin-top:12px;padding:12px;font-size:15px}.hintval{flex:none;font-size:13px;font-weight:900;padding:3px 8px;border-radius:8px;background:var(--accent);color:var(--accent-ink);white-space:nowrap;box-shadow:0 2px 0 var(--shadow)}