*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}#app{width:min(100vw,56.25dvh);height:100dvh;margin:auto;position:relative;overflow:hidden;box-shadow:0 0 80px #31406455}body{touch-action:none;background:#89caff;font-family:system-ui,-apple-system,sans-serif}canvas{display:block}#hud{top:env(safe-area-inset-top);color:#fff;text-shadow:0 2px 4px #36466b99;pointer-events:none;padding:14px 18px;position:absolute;left:0;right:0}.top,.stats{justify-content:space-between;align-items:center;display:flex}.brand{letter-spacing:.08em;font-size:15px;font-weight:900}.brand b{color:#fff1a7}#sound{pointer-events:auto;background:#ffffffc9;border:0;border-radius:50%;width:38px;height:38px;font-size:18px}.stats{margin-top:10px;font-size:16px;font-weight:900}.stats span{background:#34315da8;border:2px solid #fffa;border-radius:20px;padding:5px 12px}.progress{background:#fff8;border:2px solid #fff;border-radius:10px;width:100%;height:9px;margin-top:8px;overflow:hidden}#progressFill{background:linear-gradient(90deg,#f9a4d0,#ffe08b);width:0;height:100%}.overlay{z-index:5;background:linear-gradient(#2a538566,#29265caa);justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.hidden{display:none}.card{text-align:center;color:#43325e;background:linear-gradient(#fff9ea,#ffe1f2);border:5px solid #fff;border-radius:30px;width:min(360px,100%);padding:25px 20px;box-shadow:0 12px #724a8999,0 25px 55px #172c5999}.crown{font-size:45px}.card h1{color:#b8488d;text-shadow:2px 3px #fff;margin:5px 0 18px;font-size:39px;line-height:1}.card h1 em{color:#5849a1;font-style:normal}.card p{font-size:15px;font-weight:700;line-height:1.6}.how{background:#fffb;border-radius:14px;margin:20px 0;padding:12px;font-weight:700;line-height:1.8}button#start,button#next{color:#fff;background:linear-gradient(#ffb0d7,#f274b6);border:0;border-radius:18px;width:100%;padding:14px;font-size:23px;font-weight:1000;box-shadow:0 6px #ad4f8f}small{color:#75566e;margin-top:15px;font-size:11px;font-weight:800;display:block}#message{text-align:center;color:#fff;text-shadow:0 4px #7b478c,0 6px 15px #222;pointer-events:none;opacity:0;font-size:30px;font-weight:1000;transition:opacity .2s;position:absolute;top:22%;left:0;right:0}#power{background:#e8863fba!important}#herd{background:#416ca6ba!important}.stats{gap:6px}.stats span{padding:5px 8px;font-size:clamp(12px,3.5vw,16px)}.mode{letter-spacing:.08em;background:#f476acc9;border-radius:12px;padding:5px 9px;font-size:11px;font-weight:900}#combo{text-align:right;color:#fff2a0;letter-spacing:.04em;opacity:0;height:22px;margin-top:7px;font-size:15px;font-weight:1000;transition:opacity .18s}
