:root{--bg: #ffe9f4;--ink: #5b3a4a;--muted: #b08497;--card: #fff7fb;--accent: #ff6b9d;--accent-deep: #e64980;--mint: #63e6be;--line: rgba(255, 140, 180, .22);font-family:Fredoka,Nunito,PingFang SC,Hiragino Sans GB,Noto Sans SC,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:radial-gradient(circle at 12% 18%,#fff1c9 0,transparent 28%),radial-gradient(circle at 88% 12%,#ffd0e8 0,transparent 32%),radial-gradient(circle at 80% 88%,#c5f6fa 0,transparent 30%),var(--bg);color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none}#app{height:100%;display:flex;flex-direction:column}canvas{display:block;flex:1;touch-action:none}.hud{display:flex;align-items:center;gap:10px;padding:10px 12px 8px;background:linear-gradient(180deg,#fff7fbf5,#ffecf5e0);border-bottom:2px solid var(--line);flex-wrap:wrap}.hud-main{display:flex;gap:10px;flex:1;justify-content:center}.stat{display:flex;flex-direction:column;align-items:center;min-width:58px;background:#fff;border-radius:16px;padding:4px 10px 6px;border:2px solid var(--line);box-shadow:0 4px #ff96be2e}.stat-label{font-size:11px;color:var(--muted);font-weight:700}.stat-value{font-size:20px;font-weight:800}.goals{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.goal{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}.goal.done{background:#ebfff6;border-color:#63e6be80}.goal-dot{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px #fff inset}.icon-btn,.btn,.lvl{border:0;cursor:pointer;font:inherit}.icon-btn{background:#fff;border:2px solid var(--line);border-radius:16px;padding:8px 12px;color:var(--ink);font-weight:800;font-size:13px;box-shadow:0 4px #ff96be33}.icon-btn:active,.btn:active,.lvl:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #ff96be33}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#5b3a4a38;padding:16px;z-index:5}.overlay[hidden],[hidden]{display:none!important}.card{background:var(--card);border-radius:28px;padding:22px 18px 18px;width:min(520px,100%);box-shadow:0 18px #ff96be2e,0 24px 50px #5a284629;text-align:center;border:3px solid #ffd0e6;max-height:min(92vh,760px);display:flex;flex-direction:column}.brand{display:flex;flex-direction:column;align-items:center;gap:2px}.logo-row{font-size:28px;letter-spacing:.08em}h1,h2{margin:0 0 4px;font-weight:800}h1{font-size:34px;background:linear-gradient(90deg,#ff6b9d,#ffa94d,#74c0fc);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin:0 0 12px;color:var(--muted);font-weight:600}.chapter-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.chapter-name{font-weight:800;font-size:15px;color:var(--accent-deep)}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;overflow:auto;padding:4px 2px 8px}.lvl{height:48px;border-radius:16px;background:#fff;border:2px solid var(--line);font-weight:800;font-size:16px;color:var(--ink);box-shadow:0 4px #ffaac840}.lvl:hover:not(:disabled){background:#fff0f6}.lvl.cleared{background:linear-gradient(180deg,#fff,#e6fcf5);border-color:#63e6be80}.lvl.current{background:linear-gradient(180deg,#ffe8f1,#ffd0e3);border-color:var(--accent);color:var(--accent-deep)}.lvl.locked{color:#d0b4c0;background:#fff4f8;cursor:default;box-shadow:none}.result-score{font-size:18px;font-weight:800;margin:8px 0 16px}.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 16px;font-weight:800;box-shadow:0 4px #ff96be2e}.btn.primary{background:linear-gradient(180deg,#ff8fb3,#ff6b9d);color:#fff;border-color:transparent}.btn.ghost{background:#fff}.spark{display:inline-block;animation:bob 1.6s ease-in-out infinite}.spark:nth-child(2){animation-delay:.2s}.spark:nth-child(3){animation-delay:.4s}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media (min-width: 768px){.hud{padding:14px 24px 10px}.stat-value{font-size:24px}.card{padding:28px 28px 22px}.lvl{height:54px;font-size:18px}}