body{-webkit-user-select:none;user-select:none;touch-action:none;background-color:#87ceeb;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}canvas{touch-action:none;display:block}#ui-layer{color:#fff;text-shadow:2px 2px #000;pointer-events:none;z-index:10;position:absolute;top:10px;left:10px}#level-indicator{color:gold;margin-bottom:5px;font-size:24px;font-weight:700;transition:color .5s}#cinematic-text{color:#fff;opacity:0;margin-top:20px;font-size:30px;font-weight:700;transition:opacity 1s}#sys-controls{z-index:50;gap:10px;display:flex;position:absolute;top:10px;right:10px}.sys-btn{color:#fff;cursor:pointer;background:#0009;border:2px solid #fff;border-radius:8px;padding:10px 15px;font-weight:700;transition:background .2s;box-shadow:0 4px 6px #00000080}.sys-btn:hover{background:#000c}#god-btn{background:purple}#god-btn:hover{background:#a000a0}#prev-btn{background:#d2691e}#prev-btn:hover{background:sienna}#next-btn{background:#f05}#next-btn:hover{background:#c04}#boss-ui{text-align:center;z-index:10;display:none;position:absolute;top:20px;left:50%;transform:translate(-50%)}#boss-name{color:#fff;text-shadow:2px 2px #000,0 0 10px red;margin:0;font-size:24px}.boss-hp-container{background:#222;border:3px solid #000;border-radius:5px;width:400px;height:25px;margin-top:5px;overflow:hidden;box-shadow:0 0 10px #000}#boss-hp-bar{background:linear-gradient(90deg,#8b0000,red);width:100%;height:100%;transition:width .1s}#ai-controls{pointer-events:auto;margin-top:10px}.ai-btn{color:#fff;cursor:pointer;background:linear-gradient(45deg,#6a11cb,#2575fc);border:2px solid #fff;border-radius:20px;padding:8px 15px;font-size:14px;font-weight:700;transition:transform .1s;box-shadow:0 4px 6px #0000004d}.ai-btn:active{transform:scale(.95)}#story-box{color:#e0ffff;background:#000000b3;border-left:3px solid #2575fc;border-radius:5px;max-width:300px;margin-top:10px;padding:10px;font-size:14px;font-style:italic;line-height:1.4;display:none}#controls{color:#ffffffe6;pointer-events:none;background:#000000b3;border-radius:8px;padding:15px;font-size:14px;transition:opacity .5s;display:none;position:absolute;bottom:10px;left:10px;box-shadow:0 0 10px #000}.overlay-screen{color:#fff;z-index:100;text-align:center;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}button.start-btn{color:#fff;cursor:pointer;background:#4caf50;border:2px solid #fff;border-radius:10px;margin-top:20px;padding:15px 40px;font-size:20px;font-weight:700;transition:all .2s}button.start-btn:hover{background:#45a049;transform:scale(1.05)}.bar-container{background:#333;border:2px solid #000;border-radius:5px;width:250px;height:25px;margin-bottom:5px;overflow:hidden}.health-bar{background:linear-gradient(90deg,green,#32cd32);width:100%;height:100%;transition:width .2s}.breath-bar{background:linear-gradient(90deg,#00bfff,#1e90ff);width:100%;height:100%;transition:width .1s}h1{color:gold;text-shadow:4px 4px #000;margin:0;font-size:50px}p{max-width:600px;font-size:18px;line-height:1.5}#touch-controls{box-sizing:border-box;pointer-events:none;z-index:50;justify-content:space-between;width:100%;padding:0 20px;display:none;position:absolute;bottom:20px;left:0}#touch-controls button{color:#fff;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;border:2px solid #fff9;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:20px;display:flex;box-shadow:0 4px 6px #0000004d}#touch-controls button:active{background:#fff6;transform:scale(.95)}#dpad{flex-direction:column;align-items:center;gap:5px;display:flex}.dpad-row{gap:5px;display:flex}#action-pad{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.action-row{gap:10px;display:flex}#action-pad button{border-radius:12px;width:70px;height:60px;font-size:16px;font-weight:700}#action-pad .jump-btn{background:#32cd32b3;border-radius:20px;width:100%;font-size:20px}#orientation-warning{color:#fff;z-index:9999;text-align:center;background:#000;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}#orientation-warning span{margin-bottom:20px;font-size:50px;animation:2s infinite rotatePhone}@keyframes rotatePhone{0%{transform:rotate(0)}50%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}@media screen and (width<=850px){h1{font-size:35px}p{padding:0 10px;font-size:14px}#sys-controls{transform-origin:100% 0;top:5px;right:5px;transform:scale(.75)}#ui-layer{transform-origin:0 0;transform:scale(.75)}#boss-ui{transform-origin:top;top:5px;transform:scale(.65)translate(-50%)}#controls{display:none!important}}@media screen and (orientation:portrait) and (width<=768px){#orientation-warning{display:flex}}.start-header{margin-bottom:20px}.start-content{background:#0009;border:2px solid #555;border-radius:15px;align-items:center;gap:40px;margin:0;padding:20px;display:flex;box-shadow:0 10px 20px #00000080}.costume-selection{text-align:left;flex-direction:column;display:flex}.costume-selection h3{color:gold;border-bottom:1px solid #777;margin-top:0;padding-bottom:10px}.costume-list{box-sizing:border-box;flex-direction:column;gap:10px;width:250px;max-height:250px;padding:10px 8px;display:flex;overflow-y:auto}.costume-list::-webkit-scrollbar{width:8px}.costume-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.costume-list::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.costume-list::-webkit-scrollbar-thumb:hover{background:#777}.costume-btn{color:#fff;cursor:pointer;text-align:left;background:#333;border:2px solid #555;border-radius:8px;padding:12px 20px;font-size:16px;transition:all .2s}.costume-btn:hover{background:#444;border-color:#888}.costume-btn.active{background:#4caf50;border-color:#fff;font-weight:700;transform:scale(1.05)}.character-preview{flex-direction:column;align-items:center;display:flex}#preview-canvas{background:#ffffff1a;border:2px solid #777;border-radius:10px;margin-bottom:20px}@media screen and (height<=450px){h1{font-size:24px}p{margin:5px 0;font-size:12px}.start-header{margin-bottom:5px}.start-content{border-radius:10px;gap:20px;padding:10px 20px}.costume-selection h3{margin-bottom:5px;padding-bottom:5px;font-size:14px}.costume-list{flex-flow:wrap;gap:5px;max-width:250px}.costume-btn{padding:6px 10px;font-size:12px}#preview-canvas{width:120px;height:120px;margin-bottom:10px}button.start-btn{margin-top:5px;padding:8px 20px;font-size:16px}}.auth-modal{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#14141ed9;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;gap:15px;width:320px;margin:0;padding:30px;display:flex;box-shadow:0 8px 32px #00000080}.auth-modal h2{color:#fff;text-align:center;margin:0;font-size:24px}.modern-input{color:#fff;background:#00000080;border:1px solid #fff3;border-radius:8px;outline:none;padding:12px 15px;font-size:16px;transition:border-color .3s}.modern-input:focus{border-color:#4caf50}.auth-buttons{gap:10px;margin-top:10px;display:flex}.auth-buttons button{flex:1;margin-top:0}.secondary-btn{background:#333!important;border-color:#555!important}.secondary-btn:hover{background:#444!important}.auth-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;background:#14141ed9;border:1px solid #ffffff1a;border-radius:16px;width:320px;margin:0;padding:20px}.auth-panel .user-info{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;display:flex}.auth-panel .user-info h3{color:gold;margin:0;font-size:18px}.small-btn{margin:0!important;padding:6px 12px!important;font-size:14px!important}.social-panel h4{color:#fff;margin:0 0 10px}.friends-list{max-height:150px;margin:0 0 15px;padding:0;list-style:none;overflow-y:auto}.friends-list li{background:#ffffff0d;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:5px;padding:8px 12px;font-size:14px;display:flex}.friends-list::-webkit-scrollbar{width:6px}.friends-list::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.add-friend-form{gap:10px;display:flex}.add-friend-form input{flex:1;padding:8px;font-size:14px}.chat-box{-webkit-backdrop-filter:blur(15px);z-index:1000;background:#0a0f19d9;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;width:320px;height:400px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;position:fixed;bottom:20px;right:20px;overflow:hidden;box-shadow:0 10px 30px #00000080}.chat-header{color:#fff;background:#ffffff0d;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:12px 15px;font-weight:700;display:flex}.chat-messages{flex-direction:column;flex:1;gap:10px;padding:15px;display:flex;overflow-y:auto}.chat-message{word-wrap:break-word;border-radius:18px;max-width:80%;padding:10px 14px;font-size:14px;line-height:1.4}.chat-message.sent{color:#fff;background:linear-gradient(135deg,#007aff,#005ce6);border-bottom-right-radius:4px;align-self:flex-end}.chat-message.received{color:#fff;background:#ffffff1a;border-bottom-left-radius:4px;align-self:flex-start}.chat-input-area{background:#0003;border-top:1px solid #ffffff1a;gap:8px;padding:12px;display:flex}.chat-input-area .modern-input{border-radius:20px;flex:1;margin:0;padding:10px 14px}.chat-input-area .start-btn{border-radius:20px;width:auto;padding:10px 16px}