* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; font-family: sans-serif; }
body, html { width: 100%; height: 100%; overflow: hidden; background-color: #ffffff; }
#version-info { position: absolute; top: 10px; left: 10px; z-index: 100; font-weight: bold; color: #000; background: rgba(255, 255, 255, 0.8); padding: 4px 10px; border-radius: 5px; border: 1px solid #ccc; }
#main-menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 90; }
#main-menu h1 { font-size: 2.2rem; color: #000000; margin-bottom: 30px; text-align: center; }
.menu-btn { width: 200px; padding: 15px; margin: 10px; font-size: 1.2rem; font-weight: bold; color: #ffffff; background-color: #000000; border: none; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; }
#char-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 95; }
#char-select h2 { color: #000; margin-bottom: 20px; }
.char-container { display: flex; gap: 15px; margin-bottom: 20px; }
.char-card { width: 90px; padding: 15px 10px; border: 2px solid #000; border-radius: 10px; text-align: center; font-weight: bold; color: #000; background: #f0f0f0; cursor: pointer; }
.char-card.selected { background: #000; color: #fff; }
#loading-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 100; }
#loading-screen h2 { color: #000; margin-bottom: 15px; }
.loader-bar { width: 70%; height: 20px; border: 2px solid #000; border-radius: 10px; overflow: hidden; }
.loader-fill { width: 0%; height: 100%; background-color: #000; transition: width 0.1s; }
#game-hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; z-index: 50; }
#stats-panel { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.85); padding: 10px 15px; border-radius: 8px; border: 2px solid #000; color: #000; font-weight: bold; }
.bar-container { width: 120px; height: 12px; background: #ccc; border-radius: 6px; margin-top: 5px; overflow: hidden; }
#stamina-bar { width: 100%; height: 100%; background: #00a8ff; }
#joystick-zone { position: absolute; bottom: 30px; left: 30px; width: 120px; height: 120px; background: rgba(0,0,0,0.1); border: 2px dashed #000; border-radius: 60px; pointer-events: auto; touch-action: none; }
#joystick-knob { position: absolute; top: 35px; left: 35px; width: 50px; height: 50px; background: #000; border-radius: 25px; }
#action-zone { position: absolute; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; pointer-events: auto; }
.btn-action { width: 65px; height: 65px; border-radius: 50%; background: #000; color: #fff; font-weight: bold; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; touch-action: manipulation; }
canvas { display: block; width: 100%; height: 100%; }