*{box-sizing:border-box;margin:0;padding:0}body{background:#080a0c;color:#ccc;font-family:Courier New,monospace;display:flex;flex-direction:column;height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}#game-area{flex:1;display:flex;flex-direction:column;align-items:stretch;background:#080a0c;overflow:hidden;min-height:0}#canvas-wrapper{flex-shrink:0;display:flex;justify-content:center;align-items:flex-start;padding-top:80px}@media(max-width:679px){#canvas-wrapper{padding-top:30px}}#game-canvas{display:block}#controls{flex-shrink:0;background:#0e1014;border-top:1px solid #1e2428;border-left:1px solid #1e2428;border-right:1px solid #1e2428;border-radius:0 0 6px 6px;display:flex;flex-direction:column;gap:0;max-width:720px;width:100%;margin:0 auto 100px}.ctrl-group{display:flex;flex-direction:column;border-bottom:1px solid #1a1e22}.ctrl-group-last{border-bottom:none}.ctrl-row{display:flex;align-items:center;gap:8px;padding:7px 16px;border-bottom:1px solid #1a1e22;flex-wrap:wrap}.ctrl-row:last-child{border-bottom:none}.ctrl-row-url{flex:1;min-width:0}.ctrl-row-measure #progress-bar{flex:1;min-width:80px}.vdivider{width:1px;height:18px;background:#2a3038;flex-shrink:0}#url-input{flex:1;min-width:0;background:#161a1e;color:#ddd;border:1px solid #2a3038;border-radius:4px;padding:5px 8px;font-family:inherit;font-size:12px}#url-input:focus{outline:none;border-color:#3a5070}button{background:#1a2535;color:#bbb;border:1px solid #2a3a50;border-radius:4px;padding:5px 12px;cursor:pointer;font-family:inherit;font-size:14px;line-height:1;flex-shrink:0;transition:background .1s,color .1s}button:hover:not(:disabled){background:#253550;color:#eee;border-color:#4a6080}button:disabled{opacity:.3;cursor:not-allowed}#load-btn{background:#1a3025;border-color:#2a5038;color:#8dccaa}#load-btn:hover:not(:disabled){background:#254535;color:#adb}#clip-set-btn.active{background:#2a3520;border-color:#4a7030;color:#8c5}#clip-record-btn{color:#c44}#clip-record-btn.recording{background:#3a0a0a;border-color:#c22;color:#f44;animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.5}}label{font-size:12px;color:#778;flex-shrink:0}.radio-label,.checkbox-label{display:flex;align-items:center;gap:3px;cursor:pointer;font-size:12px;color:#aaa}.radio-label input[type=radio],.checkbox-label input[type=checkbox]{accent-color:#4a7aaa;cursor:pointer}#speed-input,#measure-input,#clip-start,#clip-end{background:#161a1e;color:#ddd;border:1px solid #2a3038;border-radius:4px;padding:5px 6px;font-family:inherit;font-size:12px;text-align:center}#speed-input{width:56px}#measure-input{width:60px}#clip-start,#clip-end{width:66px}#speed-input:focus,#measure-input:focus,#clip-start:focus,#clip-end:focus{outline:none;border-color:#3a5070}#status{flex-basis:100%;font-size:11px;color:#556;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.range-sep{color:#556;font-size:12px}#progress-bar{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1e2428;border-radius:2px;cursor:pointer;outline:none}#progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#4a7aaa;cursor:pointer}#progress-bar:disabled{opacity:.3;cursor:not-allowed}#key-hints{position:fixed;bottom:6px;left:50%;transform:translate(-50%);background:#080a0ed9;border:1px solid #1e2428;border-radius:4px;padding:4px 10px;font-size:10px;color:#445;text-align:center;pointer-events:none;white-space:nowrap}kbd{display:inline-block;background:#1a2028;border:1px solid #2a3038;border-radius:2px;padding:0 3px;font-size:9px;color:#778;font-family:inherit}