canvas{position:fixed;top:0;left:0}.mobile-controls{display:none;position:fixed;bottom:20px;left:0;right:0;z-index:1000;pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.mobile-controls.active{display:flex;justify-content:space-between;align-items:flex-end;padding:0 20px;gap:20px}.control-pad{display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:auto}.control-row{display:flex;gap:5px;justify-content:center}.control-btn{width:60px;height:60px;border:none;border-radius:12px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);color:#fff;font-size:24px;font-weight:bold;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:all .1s ease;box-shadow:0 4px 6px #0000004d;border:2px solid rgba(255,255,255,.3)}.control-btn:active{background:rgba(255,255,255,.4);transform:scale(.95);box-shadow:0 2px 4px #0000004d}.btn-up{align-self:center}.btn-barrel-roll{width:100px;height:60px;font-size:16px;background:rgba(255,100,100,.3);border-color:#ff646480;pointer-events:auto}.btn-barrel-roll:active{background:rgba(255,100,100,.5)}.vertical-controls{display:flex;flex-direction:column;gap:5px;pointer-events:auto}.btn-vertical-up,.btn-vertical-down{width:60px;height:60px;font-size:20px}@media (max-width: 768px){.mobile-controls{display:flex}}@media (hover: none) and (pointer: coarse){.mobile-controls{display:flex}}.tutorial{position:fixed;bottom:20px;right:20px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:20px;z-index:1000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;min-width:250px;box-shadow:0 8px 32px #00000080;transition:opacity .3s ease,transform .3s ease}.tutorial.collapsed{opacity:.7;min-width:auto;width:auto;padding:10px}.tutorial.collapsed .tutorial-content,.tutorial.collapsed .tutorial-header{display:none}.tutorial.collapsed .tutorial-toggle{display:block}.tutorial-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2)}.tutorial-header h2{margin:0;font-size:18px;font-weight:600;color:#fff}.tutorial-close{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:24px;width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1;padding:0}.tutorial-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}.tutorial-content{display:flex;flex-direction:column;gap:12px}.control-item{display:flex;align-items:center;gap:12px}.key-group{display:flex;gap:4px}kbd{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 12px;font-family:monospace;font-size:14px;font-weight:600;color:#fff;min-width:40px;text-align:center;box-shadow:0 2px 4px #0000004d;display:inline-block}kbd:first-child{margin-left:0}.control-description{font-size:14px;color:#ffffffe6;flex:1}.tutorial-toggle{display:none;width:100%;padding:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:12px;cursor:pointer;transition:all .2s ease;font-weight:500}.tutorial-toggle:hover{background:rgba(255,255,255,.2)}@media (max-width: 768px){.tutorial{display:none}}@media (hover: none) and (pointer: coarse){.tutorial{display:none}}