:root{--paper: #f6f3ea;--paper2: #ece8dc;--ink: #1c1b18;--ink2: #4a4740;--line: #1c1b18;--clue-bg: #e4e0d4;--clue-ink: #2a2924;--sel: #fbe7a1;--act: #f3c650;--ok-bg: #dff0d8;--ok-ink: #1d5c2a;--wrong: #f4b4b4;--hint: #d9e8f7;--accent: #b4382c;--accent-ink: #fff;--card: #fffdf7;--shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06);--font: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;--fs: 16px;--cell: 36px;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px)}html.dark{--paper: #1c1b18;--paper2: #26251f;--ink: #f1ede2;--ink2: #b9b4a6;--line: #d8d3c6;--clue-bg: #33312a;--clue-ink: #e8e3d5;--sel: #5a4a10;--act: #a9801a;--ok-bg: #22402a;--ok-ink: #bfe8c6;--wrong: #7a2a2a;--hint: #26405c;--card: #26251f;--accent: #e06a5c}html.hc{--paper: #fff;--paper2: #eee;--ink: #000;--ink2: #000;--line: #000;--clue-bg: #fff;--clue-ink: #000;--sel: #ffe600;--act: #ff9900;--ok-bg: #b7f5b7;--ok-ink: #003300;--wrong: #ff8080;--hint: #9ad0ff;--accent: #c00}html.hc.dark{--paper: #000;--paper2: #111;--ink: #fff;--ink2: #fff;--line: #fff;--clue-bg: #000;--clue-ink: #fff;--sel: #6a5a00;--act: #c08000;--card: #111}html.big{--fs: 19px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:var(--fs)/1.35 var(--font);overscroll-behavior:none}body{position:fixed;inset:0;overflow:hidden}#app{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}button.danger{color:var(--accent)}button.icon{min-width:44px;width:44px;height:44px;padding:0;font-size:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.hidden{display:none!important}.loading,.err{text-align:center;padding:40px 16px;color:var(--ink2)}.screen{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:760px;margin:0 auto;padding:0 16px}.screen.home,.screen.archive,.screen.themes,.screen.settings{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}.brand{text-align:center;padding:18px 0 6px}.brand h1{margin:0;font-size:30px;letter-spacing:.5px;font-weight:800}.brand .tag{margin:4px 0 0;color:var(--ink2)}.dateline{text-align:center;margin:8px 0}.dateline .note{color:var(--accent);font-size:.9em;margin-top:4px}.streakline{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--ink2);font-size:.95em;margin-bottom:10px}h2{font-size:18px;margin:14px 0 8px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cards.menu{margin-top:16px;grid-template-columns:1fr}.card{text-align:left;position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;box-shadow:var(--shadow);min-height:96px}.card .lname{font-weight:800;font-size:1.1em}.card .ldesc{color:var(--ink2);font-size:.9em}.card .cta{margin-top:auto;align-self:flex-end;font-weight:700;color:var(--accent)}.card.nav{flex-direction:row;align-items:center;min-height:64px;flex-wrap:wrap}.card.nav .ldesc{flex-basis:100%}.card.nav .cta{margin:0 0 0 auto}.card.level.solved{border-color:var(--ok-ink)}.card.theme{min-height:76px}.chip{font-size:.8em;padding:2px 8px;border-radius:999px;background:var(--paper2);color:var(--ink2);align-self:flex-start}.chip.solved{background:var(--ok-bg);color:var(--ok-ink)}.chip.inProgress{background:var(--sel);color:var(--ink)}.foot{color:var(--ink2);font-size:.85em;text-align:center;margin-top:24px}.topbar{display:flex;align-items:center;gap:8px;padding:8px 0}.topbar .title{flex:1;display:flex;flex-direction:column;line-height:1.15;min-width:0}.topbar .title .sub{color:var(--ink2);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .timer{font-variant-numeric:tabular-nums;font-weight:700;min-width:48px;text-align:right}.alist{display:flex;flex-direction:column;gap:10px}.arow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}.arow .adate{font-weight:700;margin-bottom:6px}.alevels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.lvbtn{padding:6px 2px;font-size:.8em;line-height:1.25;border-radius:8px;overflow:hidden;min-width:0}.lvbtn .chip{display:inline-block;margin-top:4px;font-size:.85em;padding:1px 6px}.themerow{display:flex;justify-content:space-between;align-items:center;text-align:left}.form{display:flex;flex-direction:column;gap:12px}.form .row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:52px}.form input[type=checkbox]{width:28px;height:28px;accent-color:var(--accent)}.form select{font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:inherit}.help{color:var(--ink2);font-size:.9em}.screen.play{padding:0 8px}.progress{position:relative;height:22px;background:var(--paper2);border-radius:999px;overflow:hidden;margin:0 0 6px}.progress .bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--act);transition:width .4s ease}.progress .ptext{position:relative;display:block;text-align:center;font-size:.8em;line-height:22px;font-weight:600}.gridwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.gridwrap.zoomed{overflow:auto;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch}.gridscroll{padding:2px}.grid{display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell);border:2px solid var(--line);background:var(--line);gap:1px;width:max-content}.cell{position:relative;background:var(--card);user-select:none;overflow:hidden}.cell.letter{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--cell) * .58);cursor:pointer}.cell.letter.sel{background:var(--sel)}.cell.letter.act{background:var(--act);box-shadow:inset 0 0 0 3px var(--ink)}.cell.letter.ok{color:var(--ok-ink)}.cell.letter.ok:not(.sel):not(.act){background:var(--ok-bg)}.cell.letter.wrong{background:var(--wrong)!important}.cell.letter.hint:after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}.cell.letter.press .lt{animation:press .14s ease}@keyframes press{0%{transform:scale(.7)}60%{transform:scale(1.12)}to{transform:scale(1)}}.cell.clue{background:var(--clue-bg);color:var(--clue-ink);display:flex;flex-direction:column}.cell.clue .ce{position:relative;flex:1;min-height:0;padding:2px 3px;display:flex;align-items:center;cursor:pointer;overflow:hidden}.cell.clue.two .ce:first-child{border-bottom:1px solid var(--line)}.cell.clue .ct{font-size:clamp(6px,calc(var(--cell) * .2),13px);line-height:1.05;font-weight:600;letter-spacing:-.01em;word-break:break-word;hyphens:auto;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}html.big .cell.clue .ct{font-size:clamp(7px,calc(var(--cell) * .22),15px)}.cell.clue.two .ct{-webkit-line-clamp:2}.cell.clue .ce.cur{background:var(--sel);color:var(--ink)}.cell.clue .ar{position:absolute;width:calc(var(--cell) * .3);height:calc(var(--cell) * .3);color:var(--accent)}.cell.clue .ar.ar-r{right:0;top:50%;transform:translateY(-50%)}.cell.clue .ar.ar-d{bottom:0;left:50%;transform:translate(-50%)}.cell.clue .ar.ar-rd{right:0;top:0}.cell.clue .ar.ar-dr{left:0;bottom:0}.cell.clue.two .ar{width:calc(var(--cell) * .24);height:calc(var(--cell) * .24)}.cell.clue .stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:clamp(5px,calc(var(--cell) * .17),10px);font-weight:900;color:var(--accent);letter-spacing:.08em;transform:rotate(-12deg);opacity:.9;pointer-events:none}.cell.clue .ce.solved{color:var(--ink2)}.cell.clue .ce.solved .ct{opacity:.45}.cell.clue .ce.solved .stamp{display:flex}.cell.clue .ce.pop .stamp{animation:stamp .45s cubic-bezier(.2,1.4,.4,1)}.cell.clue .ce.pop{animation:glow .6s ease}@keyframes stamp{0%{transform:rotate(-12deg) scale(2.2);opacity:0}70%{transform:rotate(-12deg) scale(.95);opacity:1}to{transform:rotate(-12deg) scale(1)}}@keyframes glow{0%{box-shadow:inset 0 0 0 0 var(--act)}40%{box-shadow:inset 0 0 0 40px var(--act)}to{box-shadow:inset 0 0 0 0 transparent}}.cell.wave{animation:wave .9s ease var(--d) both}@keyframes wave{0%{background:var(--card)}40%{background:var(--act);transform:scale(1.08)}to{background:var(--ok-bg);transform:scale(1)}}.cell.clue.wave{animation:waveClue .9s ease var(--d) both}@keyframes waveClue{40%{background:var(--sel)}to{background:var(--clue-bg)}}.cluebar{display:flex;align-items:center;gap:6px;margin:6px 0;min-height:52px}.cluetext{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:52px}.cluetext .cdir{color:var(--accent);font-weight:800;white-space:nowrap;font-size:.9em}.cluetext .ctxt{font-weight:700;font-size:1.05em}html.big .cluetext .ctxt{font-size:1.2em}.tools{display:flex;gap:6px;margin-bottom:6px}.tools button{flex:1;padding:8px 4px;font-size:.9em;min-height:44px}.tools .hl{color:var(--ink2);font-size:.85em}.kbd{display:flex;flex-direction:column;gap:5px;padding-bottom:6px}.krow{display:flex;justify-content:center;gap:4px}.key{flex:1 1 0;max-width:52px;min-width:0;height:46px;padding:0;border-radius:7px;font-weight:700;font-size:1.05em;background:var(--card)}.key.wide{flex:1.6 1 0;max-width:84px}.key:active{background:var(--sel)}.toast{position:absolute;left:50%;bottom:36%;transform:translate(-50%,10px);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;font-weight:700;z-index:5;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%)}.overlay{position:absolute;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.overlay .card{background:var(--card);border-radius:16px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:var(--shadow)}.overlay h2{margin:0;font-size:26px}.overlay .sub{margin:-6px 0 0;color:var(--ink2)}.overlay .stats{display:flex;justify-content:center;gap:18px}.overlay .stats div{display:flex;flex-direction:column}.overlay .stats span{color:var(--ink2);font-size:.85em}.overlay .stats strong{font-size:1.5em}.badge{display:inline-block;align-self:center;background:var(--act);color:var(--ink);padding:6px 12px;border-radius:999px;font-weight:800}.badge.theme{background:var(--ok-bg);color:var(--ok-ink)}.overlay .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.overlay .row button{flex:1;min-width:110px}.tut .demo{display:flex;justify-content:center;gap:2px;position:relative;padding:10px 0 18px}.dcell{width:44px;height:44px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;background:var(--card);position:relative}.dcell.dclue{width:70px;background:var(--clue-bg);font-size:9px;font-weight:700;padding:2px 10px 2px 3px;text-align:left;line-height:1.1}.dcell.dclue svg{position:absolute;right:0;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--accent)}.dcell.dl span{opacity:0;animation:tut-letter 6s ease-in-out infinite;animation-delay:calc(.8s + var(--i) * .5s)}@keyframes tut-letter{0%,10%{opacity:0;transform:scale(.6)}15%,75%{opacity:1;transform:scale(1)}80%,to{opacity:0}}.dcell.dl{animation:tut-cell 6s ease-in-out infinite;animation-delay:calc(.8s + var(--i) * .5s)}@keyframes tut-cell{0%,10%{background:var(--card)}15%,70%{background:var(--sel)}75%,to{background:var(--ok-bg)}}.finger{position:absolute;left:50%;bottom:-8px;font-size:22px;animation:finger 6s ease-in-out infinite}@keyframes finger{0%{transform:translate(-70px);opacity:0}10%{opacity:1}15%{transform:translate(-40px)}65%{transform:translate(90px);opacity:1}80%,to{opacity:0}}.tut ol{text-align:left;margin:0;padding-left:20px}.tut li{margin:4px 0}@media(min-width:760px)and (min-aspect-ratio:1/1){.screen.play{max-width:1100px}.kbd{display:none}.cluetext .ctxt{font-size:1.2em}}@media(min-width:760px)and (min-aspect-ratio:1/1)and (hover:none){.kbd{display:flex}}@media(max-height:640px){.key{height:38px}.tools button{min-height:38px}.cluebar{min-height:44px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}
