*{box-sizing:border-box;margin:0}html,body,#root{height:100%}.wrap{background:#1a1c22;flex-direction:column;font-family:ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed;inset:0}.hud{color:#e8e8ea;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 20px;display:flex}.title{letter-spacing:.15em;font-size:15px;font-weight:800}.moves{opacity:.7;font-variant-numeric:tabular-nums}.level{letter-spacing:.08em;background:#2d3038;border:1px solid #454a55;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700}.score{color:#ffd75e;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.title-score{color:#ffd75e;letter-spacing:.08em;font-variant-numeric:tabular-nums;font-weight:700}.hud button{color:#e8e8ea;cursor:pointer;background:#33363f;border:1px solid #454a55;border-radius:8px;padding:6px 14px;font-size:13px}.hud button:hover{background:#3d414c}.hud button.toggle{opacity:.75}.hud button.toggle.on{color:#fff;opacity:1;background:#e5484d;border-color:#e5484d}.hud button.toggle.on:hover{background:#ef5b60}.win{color:#e5484d;letter-spacing:.1em;margin-left:auto;font-weight:800}.hud .menu-btn{align-items:center;margin-left:auto;padding:6px 12px;display:inline-flex}.win+.menu-btn{margin-left:0}.menu-backdrop{z-index:24;position:fixed;inset:0}.menu-panel{z-index:25;background:#16181df7;border:1px solid #454a55;border-radius:14px;flex-direction:column;min-width:190px;display:flex;position:fixed;top:54px;right:12px;overflow:hidden;box-shadow:0 16px 48px #00000080}.menu-panel button{color:#e8e8ea;text-align:left;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #2d3038;align-items:center;gap:10px;padding:14px 18px;font-size:14px;display:inline-flex}.menu-panel button:last-child{border-bottom:none}.menu-panel button:hover{background:#2a2d35}.menu-panel button.on{color:#ff8a8d}.hint-text{color:#7a7f8a;text-align:center;padding:10px 20px 16px;font-size:12px}canvas{touch-action:none;flex:1}.clear-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.clear-card{pointer-events:auto;opacity:0;text-align:center;color:#e8e8ea;background:#16181de0;border:1px solid #454a55;border-radius:16px;padding:32px 56px;animation:.5s .8s forwards clear-in;box-shadow:0 24px 64px #00000080}.clear-title{letter-spacing:.12em;color:#e5484d;font-size:28px;font-weight:800}.clear-stars{justify-content:center;gap:8px;margin-top:12px;display:flex}.clear-stars .star{color:#3d414c;font-size:30px}.clear-stars .star.on{color:#ffd75e;text-shadow:0 0 18px #ffd75e8c}.clear-moves{opacity:.75;font-variant-numeric:tabular-nums;margin:8px 0 4px}.clear-pts{color:#ffd75e;font-variant-numeric:tabular-nums;font-weight:700}.clear-total{opacity:.75;font-variant-numeric:tabular-nums;margin:4px 0 18px;font-size:13px}.clear-card button{color:#fff;cursor:pointer;background:#e5484d;border:none;border-radius:10px;padding:10px 26px;font-size:14px;font-weight:700}.clear-card button:hover{background:#ef5b60}.clear-card button.secondary{background:#33363f;border:1px solid #454a55;margin-left:10px;font-weight:500}.clear-card button.secondary:hover{background:#3d414c}@keyframes clear-in{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:none}}.title-screen{color:#e8e8ea;pointer-events:none;background:radial-gradient(#16181d40 0%,#16181db8 100%);flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex;position:fixed;inset:0}.title-screen>*{pointer-events:auto}.title-logo{letter-spacing:.1em;color:#fff;text-shadow:0 4px 32px #e5484d8c;margin-left:.1em;font-size:clamp(40px,8vw,72px);font-weight:800}.start-btn{color:#fff;letter-spacing:.1em;cursor:pointer;background:#e5484d;border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:16px 54px;font-size:20px;font-weight:800;display:inline-flex;box-shadow:0 12px 40px #e5484d66}.start-btn:hover{background:#ef5b60}.start-btn:disabled{opacity:.5;cursor:default}.level-picker{font-variant-numeric:tabular-nums;align-items:center;gap:14px;display:flex}.level-picker span{text-align:center;opacity:.9;min-width:160px}.level-picker button{color:#e8e8ea;cursor:pointer;background:#2d3038;border:1px solid #454a55;border-radius:10px;width:38px;height:38px;font-size:18px}.level-picker button:hover:not(:disabled){background:#3d414c}.level-picker button:disabled{opacity:.35;cursor:default}.howto{text-align:center;color:#9aa0ab;font-size:13px;line-height:1.9;list-style:none}@keyframes cta-beat{0%,to{transform:scale(1);box-shadow:0 0 14px #e5484d80,0 10px 36px #e5484d66}50%{transform:scale(1.08);box-shadow:0 0 36px #e5484d,0 10px 56px #e5484dbf}}@keyframes cta-shine{0%,55%{left:-80%}to{left:130%}}button.glow{animation:1.2s ease-in-out infinite cta-beat;position:relative;overflow:hidden}button.glow:after{content:"";pointer-events:none;background:linear-gradient(115deg,#0000,#fff9,#0000);width:55%;height:100%;animation:2.2s ease-in-out infinite cta-shine;position:absolute;top:0;left:-80%}button.glow:disabled{animation:none}button.glow:disabled:after{opacity:0;animation:none}@media (prefers-reduced-motion:reduce){button.glow,button.glow:after{animation:none}}.tutorial-bubble{color:#fff;z-index:20;background:#16181deb;border:1px solid #454a55;border-radius:999px;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:10px 18px;font-size:14px;display:flex;position:fixed;top:72px;left:50%;transform:translate(-50%)}.tutorial-bubble button{color:#9aa0ab;cursor:pointer;background:#2d3038;border:1px solid #454a55;border-radius:999px;flex-shrink:0;padding:4px 12px;font-size:12px}.tutorial-hand{filter:drop-shadow(0 6px 14px #0000008c);font-size:46px;animation:.9s ease-in-out infinite hand-bounce}@keyframes hand-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}@media (prefers-reduced-motion:reduce){.tutorial-hand{animation:none}}@media (width<=520px){.tutorial-bubble{font-size:13px;top:96px}}.face-setter{align-items:center;gap:8px;display:flex}.face-setter button{color:#e8e8ea;cursor:pointer;background:#2d3038;border:1px solid #454a55;border-radius:999px;align-items:center;gap:6px;padding:6px 16px;font-size:12px;display:inline-flex}.face-setter button:hover{background:#3d414c}.face-preview{object-fit:cover;border:2px solid #454a55;border-radius:50%;width:34px;height:34px}.face-note{color:#6b7078;margin-top:-12px;font-size:11px}.lang-picker{gap:8px;margin-top:6px;display:flex}.lang-picker button{color:#9aa0ab;cursor:pointer;background:#2d3038;border:1px solid #454a55;border-radius:999px;padding:5px 14px;font-size:12px}.lang-picker button.on{color:#fff;background:#e5484d;border-color:#e5484d}@media (width<=520px){.hud{gap:8px;padding:10px 12px}.hud button{padding:5px 10px;font-size:12px}.hud .title{display:none}.moves,.score{font-size:12px}.level{padding:2px 10px;font-size:11px}.clear-card{padding:24px 28px}.menu-panel{top:46px;right:8px}}