*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f8fafc;font-family:system-ui,Segoe UI,Roboto,sans-serif;touch-action:none}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;z-index:1}#ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}#ui-layer button,#ui-layer select,#ui-layer a{pointer-events:auto;touch-action:manipulation}.ui-panel{pointer-events:auto;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#f8fafcf0;color:#0f172a;text-align:center}.ui-panel h1{margin:0 0 8px;font-size:clamp(1.4rem,5vw,2rem)}.sub{max-width:420px;opacity:.85;margin:0 0 12px}.best{margin:8px 0 16px;font-size:.95rem}.hint{margin-top:16px;font-size:.85rem;max-width:380px;opacity:.75}.lvl-label{display:block;margin-bottom:6px;font-size:.9rem}.lvl-select{margin-bottom:16px;padding:10px 14px;border-radius:10px;border:1px solid #cbd5e1;font-size:1rem;min-width:min(92vw,360px)}.btn-primary{padding:12px 28px;border:none;border-radius:12px;background:#3b82f6;color:#fff;font-weight:700;font-size:1rem;cursor:pointer}.btn-primary:hover{background:#2563eb}.btn-secondary{padding:12px 28px;border:1px solid #94a3b8;border-radius:12px;background:#fff;color:#0f172a;font-weight:600;cursor:pointer}.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}.reason{opacity:.85;font-size:.95rem}.hud-top{pointer-events:none;position:absolute;left:0;right:0;top:max(8px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;padding:0 12px}.combo{font-size:clamp(.85rem,3vw,1rem);color:#0f172a;background:#ffffffd9;padding:6px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.35)}.score-wrap{font-size:clamp(1rem,3.5vw,1.2rem);font-weight:800;color:#0f172a;background:#ffffffd9;padding:6px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.35)}.hud-right{pointer-events:none;position:absolute;right:max(8px,env(safe-area-inset-right));top:38%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.dist-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.dist-bar{width:10px;height:min(38vh,220px);border-radius:999px;background:#94a3b859;overflow:hidden;display:flex;flex-direction:column-reverse}.dist-fill{width:100%;height:0%;background:linear-gradient(180deg,#3b82f6,#22d3ee);transition:height .12s linear}.miss{font-size:.8rem;color:#b91c1c;font-weight:700}