html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071522;font-family:Arial,Helvetica,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{display:flex;align-items:center;justify-content:center}
#wrap{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#071522;contain:layout paint size}
canvas{display:block;max-width:100vw;max-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.35);touch-action:none;outline:none}
.touch-controls{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:none;justify-content:space-between;align-items:end;gap:12px;padding:0 16px;pointer-events:none}
.touch-btn{pointer-events:auto;border:2px solid rgba(255,255,255,.75);border-radius:18px;min-width:94px;min-height:58px;font-weight:900;font-size:18px;letter-spacing:.5px;color:#fff;background:rgba(8,29,49,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.touch-btn:active{transform:scale(.97)}
.touch-btn:disabled{opacity:.42;filter:saturate(.65);transform:none}
.touch-btn.cut{min-width:78px;font-size:16px}
@media (pointer:coarse),(max-width:900px){.touch-controls{display:flex}}

.utility-controls{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:8px;z-index:4;pointer-events:none}
.utility-btn{pointer-events:auto;width:44px;height:40px;border:1.5px solid rgba(255,255,255,.6);border-radius:12px;background:rgba(8,29,49,.68);color:#fff;font-size:18px;font-weight:900;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer}
.utility-btn:active{transform:scale(.96)}
.utility-btn.muted{opacity:.62}
@media (max-height:520px){.touch-controls{bottom:max(7px,env(safe-area-inset-bottom));padding:0 10px}.touch-btn{min-height:50px;min-width:84px;font-size:16px}.touch-btn.cut{min-width:70px}.utility-controls{top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}.utility-btn{width:40px;height:36px}}

@media (max-width:640px){.touch-controls{padding:0 10px;gap:10px}.touch-btn{min-width:86px;min-height:52px;font-size:16px;border-radius:15px}.touch-btn.cut{min-width:70px}.utility-btn{width:40px;height:38px}}
@media (max-width:520px){.touch-controls{padding:0 8px;gap:8px}.touch-btn{min-width:72px;min-height:46px;font-size:14px;border-radius:14px}.touch-btn.cut{min-width:60px;font-size:13px}.utility-controls{gap:6px}.utility-btn{width:36px;height:34px;font-size:16px;border-radius:10px}}
@media (max-height:430px){.touch-controls{bottom:max(4px,env(safe-area-inset-bottom));padding:0 8px;gap:8px}.touch-btn{min-width:68px;min-height:42px;font-size:13px}.touch-btn.cut{min-width:56px}.utility-btn{width:34px;height:32px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.touch-btn:active,.utility-btn:active{transform:none}}