*{box-sizing:border-box}body{margin:0;background:#0c1525;color:#eef7ff;font:16px system-ui,Arial}#game{max-width:1100px;margin:auto;padding:14px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:1.45rem;margin:10px 0}#stage{width:100%;height:min(65vh,600px);min-height:330px;border:2px solid #4cae79;border-radius:16px;overflow:hidden;background:#13253b}#stage canvas{display:block}.panel{background:#18293e;border-radius:14px;padding:16px;margin-top:12px}#message{font-size:1.15rem;font-weight:700;margin:0 0 15px;color:#f9d461}.controls{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:18px;align-items:end}label{display:grid;gap:7px}output{display:inline}input{width:100%;accent-color:#f9d461}button{padding:14px 25px;border:0;border-radius:9px;background:#f8cc42;color:#172135;font-weight:900;cursor:pointer}button:disabled{opacity:.5;cursor:default}small{display:block;margin-top:13px;color:#a7bed1}@media(max-width:650px){.controls{grid-template-columns:1fr}#stage{height:50vh;min-height:320px}header{font-size:.85rem}}

#stage{position:relative;touch-action:none;cursor:crosshair}#stage.dragging{cursor:grabbing}#gesture{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#trace{fill:none;stroke:#ffdd54;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #ffb300)}#gesture-info{margin:0;color:#c9e3f5}

.error{max-width:1100px;margin:12px auto;padding:14px;background:#70252b;color:#fff;border-radius:8px;overflow-wrap:anywhere}