body{margin:0;padding:0;background:#34495e;font-family:Arial,sans-serif;overflow:hidden;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#joystick-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:auto}#game-container{position:relative;width:100vmin;height:calc(100vh - 60px);max-height:100vmin;margin:0 auto;z-index:10;pointer-events:auto}#joystick-container .nipple{background:#0000004d;border-radius:50%;border:2px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#joystick-container .nipple .front{background:#ffffffe6;border:1px solid rgba(255,255,255,1);box-shadow:0 1px 5px #0003}#virtual-keyboard{background:linear-gradient(135deg,#2c3e50,#34495e);border:2px solid #3498db;border-radius:0;box-shadow:0 -4px 20px #0000004d;padding:8px;z-index:10001;display:block;font-family:Pixelify Sans,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:12px;box-sizing:border-box;overflow:hidden;position:fixed;bottom:0;left:0;right:0;max-width:none;min-width:auto;border-top:2px solid #3498db;pointer-events:auto;border-left:none;border-right:none;border-bottom:none}.keyboard-container{max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:4px;box-sizing:border-box;overflow:hidden}.keyboard-row{display:flex;justify-content:center;gap:2px;flex-wrap:nowrap;max-width:100%;box-sizing:border-box;overflow:hidden}k-key{background:linear-gradient(145deg,#ff6b6b,#ee5a52);border:2px solid #e74c3c;border-radius:8px;padding:6px 4px;min-width:20px;max-width:30px;min-height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;box-shadow:0 3px 6px #e74c3c4d,inset 0 1px #fff3;position:relative;flex:1;box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.3)}k-key k-lower,k-key k-upper{display:block;line-height:1}k-key k-upper{display:none}#virtual-keyboard.shift-enabled k-key k-lower{display:none}#virtual-keyboard.shift-enabled k-key k-upper{display:block}#virtual-keyboard.shift-enabled #key-shift-left,#virtual-keyboard.shift-enabled #key-shift-right{background:linear-gradient(145deg,#27ae60,#2ecc71)!important;color:#fff!important;border-color:#27ae60!important;box-shadow:0 0 10px #27ae6080!important}#virtual-keyboard.shift-enabled #key-shift-left:hover,#virtual-keyboard.shift-enabled #key-shift-right:hover{background:linear-gradient(145deg,#2ecc71,#27ae60)!important;box-shadow:0 0 15px #27ae60b3!important}#virtual-keyboard.shift-enabled #key-shift-left:active,#virtual-keyboard.shift-enabled #key-shift-right:active{background:linear-gradient(145deg,#229954,#27ae60)!important;box-shadow:0 0 8px #27ae6099!important}k-key:hover{background:linear-gradient(145deg,#ff5252,#d32f2f);transform:translateY(-2px);box-shadow:0 5px 10px #e74c3c66,inset 0 1px #ffffff4d}k-key:active{background:linear-gradient(145deg,#c62828,#b71c1c);transform:translateY(1px);box-shadow:0 2px 4px #e74c3c80,inset 0 1px #ffffff1a}k-key.special{background:linear-gradient(145deg,#9b59b6,#8e44ad);color:#fff;border-color:#8e44ad;box-shadow:0 3px 6px #9b59b64d,inset 0 1px #fff3}k-key.special:hover{background:linear-gradient(145deg,#8e44ad,#7d3c98);box-shadow:0 5px 10px #9b59b666,inset 0 1px #ffffff4d}k-key.special:active{background:linear-gradient(145deg,#7d3c98,#6c3483);box-shadow:0 2px 4px #9b59b680,inset 0 1px #ffffff1a}k-key.function{background:linear-gradient(145deg,#f39c12,#e67e22);color:#fff;border-color:#e67e22;box-shadow:0 3px 6px #f39c124d,inset 0 1px #fff3}k-key.function:hover{background:linear-gradient(145deg,#e67e22,#d35400);box-shadow:0 5px 10px #f39c1266,inset 0 1px #ffffff4d}k-key.function:active{background:linear-gradient(145deg,#d35400,#ba4a00);box-shadow:0 2px 4px #f39c1280,inset 0 1px #ffffff1a}.keyboard-row:not(:last-child) k-key{font-size:14px}k-key.enabled{background:linear-gradient(145deg,#27ae60,#2ecc71)!important;color:#fff!important;border-color:#27ae60!important;box-shadow:0 0 10px #27ae6080!important}k-key.enabled:hover{background:linear-gradient(145deg,#2ecc71,#27ae60)!important;box-shadow:0 0 15px #27ae60b3!important}k-key.enabled:active{background:linear-gradient(145deg,#229954,#27ae60)!important;box-shadow:0 0 8px #27ae6099!important}k-key.collapse-btn{background:linear-gradient(145deg,#8e44ad,#9b59b6);color:#fff;border-color:#8e44ad;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease}k-key.collapse-btn:hover{background:linear-gradient(145deg,#9b59b6,#8e44ad);transform:translateY(-1px);box-shadow:0 4px 8px #8e44ad4d}k-key.collapse-btn:active{background:linear-gradient(145deg,#7d3c98,#8e44ad);transform:translateY(1px);box-shadow:0 1px 2px #8e44ad66}#virtual-keyboard.collapsed{max-height:60px;overflow:hidden}#virtual-keyboard.collapsed .keyboard-container{transform:none}#virtual-keyboard.collapsed .keyboard-row:not(:last-child){display:none}#virtual-keyboard.collapsed k-key.collapse-btn{transform:rotate(180deg)}k-key.wide{min-width:40px;max-width:50px;flex:1.5}k-key.extra-wide{min-width:60px;max-width:80px;flex:2}k-key.space{min-width:100px;max-width:150px;flex:4}@media (max-width: 768px){k-key{min-width:30px;max-width:40px;min-height:35px;padding:8px 4px;font-size:12px}k-key.wide{min-width:50px;max-width:60px;flex:1.5}k-key.extra-wide{min-width:80px;max-width:100px;flex:2}k-key.space{min-width:120px;max-width:180px;flex:4}}@media (max-width: 480px){k-key{min-width:25px;max-width:35px;min-height:30px;padding:6px 3px;font-size:10px}k-key.wide{min-width:40px;max-width:50px;flex:1.5}k-key.extra-wide{min-width:60px;max-width:80px;flex:2}k-key.space{min-width:100px;max-width:140px;flex:4}}.keyboard-container{width:100%;max-width:100%;padding:0 4px}.keyboard-row{width:100%;max-width:100%;gap:1px}