:root{--bg1:#0f1030;--bg2:#2a1050;--panel:rgba(255,255,255,.08);--text:#fff7e8;--muted:#c9c3e6;--accent:#ffd23f;--accent2:#ff5d8f;--green:#3ee08f;font-family:Segoe UI,Arial Hebrew,Rubik,Arial,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}body{background:radial-gradient(circle at 20% 0%,var(--bg2),var(--bg1) 70%);color:var(--text)}#app{height:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(8px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));gap:8px}.hud{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;gap:8px}.logo{margin:0;font-size:clamp(22px,6vw,32px);font-weight:900;letter-spacing:1px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.stats{display:flex;gap:8px}.stat{background:var(--panel);border-radius:12px;padding:4px 12px;text-align:center;min-width:64px}.label{display:block;font-size:12px;color:var(--muted)}.val{font-size:20px;font-weight:800}.stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}.board-wrap{position:relative;border-radius:18px;box-shadow:0 0 0 3px #ffffff1f,0 20px 50px #00000080;overflow:hidden}canvas{display:block}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a081e9e;backdrop-filter:blur(3px);animation:fade .25s ease}.hidden{display:none!important}.card{text-align:center;padding:18px 20px;max-width:90%}.title{margin:0 0 8px;font-size:clamp(40px,12vw,64px);font-weight:900;background:linear-gradient(90deg,var(--green),var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop .5s ease}.title.sm{font-size:clamp(28px,8vw,42px)}.card p{margin:6px 0;color:var(--text);font-size:clamp(14px,3.8vw,17px)}.howto{list-style:none;padding:0;margin:10px 0 16px;color:var(--muted);font-size:clamp(12px,3.4vw,15px);line-height:1.7}.final b{font-size:1.4em;color:var(--accent)}.record{color:var(--accent);font-weight:800;font-size:20px!important;animation:pulse 1s ease infinite}.btn{font:inherit;font-weight:800;border:0;border-radius:999px;cursor:pointer;color:#2a1050;background:linear-gradient(180deg,#ffe46b,var(--accent));box-shadow:0 5px #c99a00,0 8px 20px #ffd23f59;transition:transform .08s}.btn:active{transform:translateY(3px);box-shadow:0 2px #c99a00}.btn.big{font-size:20px;padding:12px 34px;margin-top:8px}.btn.small{font-size:15px;padding:8px 16px;box-shadow:0 3px #c99a00}.btn:disabled{opacity:.45;cursor:default}.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:8px;grid-template-areas:". up ." "left down right"}.dir{font-size:22px;border:0;border-radius:16px;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 2px #ffffff26;touch-action:none}.dir:active,.dir.on{background:#ffd23f59}.up{grid-area:up}.down{grid-area:down}.left{grid-area:left}.right{grid-area:right}@media(hover:hover)and (pointer:fine){.pad{display:none}}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}}@keyframes pulse{50%{transform:scale(1.1)}}