:root{--bg:#ffffff;--panel:#f6f8fb;--panel-2:#e9eef5;--ink:#0f1320;--muted:#6c7686;--line:#d9e2ef;--brand:#0aa770;--brand-2:#33c3ff;--good:#16b369;--bad:#e64b4b;--warn:#ffd400;--radius-lg:18px;--radius-sm:10px;--shadow-card:0 24px 60px rgba(15,19,32,.12);--gap:10px;--cell:64px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Inter",Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}body{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1000px 700px at 15% -10%,rgb(51 195 255 / .18) 0%,rgb(10 167 112 / .08) 60%,transparent 80%),var(--bg);background-attachment:fixed}a{color:var(--brand-2);text-decoration:none}.app{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr;width:100%;max-width:1100px;margin:0 auto;position:relative;padding-bottom:env(safe-area-inset-bottom)}header{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 12px;background:var(--panel);background-image:radial-gradient(circle at 0% 0%,rgb(51 195 255 / .18) 0%,#fff0 60%);border-bottom:1px solid var(--line);box-shadow:0 12px 30px rgb(15 19 32 / .08);position:relative;z-index:5}header h1{font-size:16px;font-weight:600;margin:0;color:var(--ink);letter-spacing:.2px;text-align:center;line-height:1}header h1 a{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px}header .mark{width:22px;height:22px;border-radius:8px;background:radial-gradient(circle at 20% 20%,#fff 0%,#fff0 40%),linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);box-shadow:0 16px 30px rgb(51 195 255 / .35);flex-shrink:0}main{min-height:0;padding:16px;padding-bottom:24px;display:grid;grid-template-rows:auto 1fr auto;gap:16px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media (max-width:520px){.hud{grid-template-columns:repeat(2,1fr)}}.chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;box-shadow:var(--shadow-card);text-align:center;min-height:56px;display:flex;flex-direction:column;justify-content:center}.chip small{color:var(--muted);display:block;font-size:12px;line-height:1.3;font-weight:500;margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}.chip b{font-size:18px;font-weight:600;color:var(--ink);line-height:1.2}.grid-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px}.grid{display:grid;gap:10px;justify-content:center;align-content:center;padding:4px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.cell{width:var(--cell);height:var(--cell);border-radius:12px;border:1px solid var(--line);background:radial-gradient(circle at 30% 25%,#ffffff 0%,#f6f8fb 30%,#e9eef5 70%);position:relative;overflow:hidden;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgb(15 19 32 / .12);transition:transform .05s ease,box-shadow .15s ease,border-color .15s ease}.cell:active{transform:translateY(1px)}.cell.reveal{box-shadow:0 0 0 2px rgb(51 195 255 / .4),0 12px 30px rgb(15 19 32 / .24);border-color:var(--brand-2)}.cell.correct{border-color:var(--good);box-shadow:0 0 0 2px rgb(22 179 105 / .4),0 12px 30px rgb(15 19 32 / .24)}.cell.wrong{border-color:var(--bad);animation:shake .2s ease 2}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}.glyph{opacity:0;transition:opacity .2s ease}.cell.reveal .glyph,.cell.correct .glyph{opacity:1}.toast{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:var(--ink);color:#fff;border:1px solid rgb(0 0 0 / .2);padding:8px 12px;border-radius:var(--radius-sm);box-shadow:0 16px 30px rgb(15 19 32 / .4);font-size:14px;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;font-weight:500;text-align:center;min-width:140px}.toast.show{opacity:1;transform:translate(-50%,0)}.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:12px 16px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;letter-spacing:.2px;box-shadow:var(--shadow-card);font-size:15px;line-height:1.2;transition:transform .05s ease,box-shadow .15s ease,border-color .15s ease;min-width:120px}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;border:1px solid #fff0;box-shadow:0 24px 60px rgb(51 195 255 / .4),0 4px 12px rgb(15 19 32 / .24)}.btn.good{border-color:var(--good);background:linear-gradient(135deg,#0aa770 0%,#16b369 100%);color:#fff;box-shadow:0 24px 60px rgb(22 179 105 / .4),0 4px 12px rgb(15 19 32 / .24)}.modal{position:fixed;inset:0;background:rgb(15 19 32 / .55);display:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;padding:16px;align-items:center;justify-content:center}.modal.show{display:flex}.card{width:min(480px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 40px 100px rgb(15 19 32 / .4);overflow:hidden;color:var(--ink);text-align:left}.card .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:radial-gradient(circle at 0% 0%,rgb(51 195 255 / .18) 0%,#fff0 60%);font-weight:600;font-size:15px;line-height:1.3}.card .bd{padding:16px;font-size:14px;line-height:1.5;color:var(--ink)}.center{text-align:center}.bd p{margin:0 0 12px 0;color:var(--ink);font-size:14px}.info-note{font-size:12px;color:var(--muted);line-height:1.4;margin-top:12px}.bd .btn.primary{margin-top:10px;width:100%}.modal[aria-hidden="true"]{visibility:hidden}