*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
body{background:#000000;color:#e0e0e0;font-family:'Courier New',Courier,monospace;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app-main{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;z-index:1;visibility:hidden;opacity:0;transition:opacity .2s}
.screen.active{visibility:visible;opacity:1;z-index:2}
.overlay{background:rgba(0,0,0,.85);z-index:10}
.error-screen{background:#1a0000;z-index:20}
#screen-play{background:transparent;padding:0}
#game-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
#hud-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:1rem;background:rgba(0,0,0,.6);padding:4px 12px;border-radius:4px;font-size:14px;pointer-events:none;z-index:5}
#hud-bottom{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;width:80%;max-width:300px;pointer-events:none;z-index:5}
#hp-bar-wrap,#xp-bar-wrap{background:#222;border:1px solid #555;height:12px;border-radius:6px;position:relative;overflow:hidden}
#hp-bar,#xp-bar{height:100%;width:100%;transition:width .2s}
#hp-bar{background:linear-gradient(90deg,#ff0000,#ff3333)}
#xp-bar{background:linear-gradient(90deg,#4444ff,#6666ff)}
#hp-text,#xp-text{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:9px;color:#fff;text-shadow:0 0 2px #000;line-height:12px}
#btn-pause{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:6;width:44px;height:44px;background:rgba(0,0,0,.5);border:1px solid #666;border-radius:8px;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#joystick-area{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));width:120px;height:120px;border-radius:60px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);z-index:7;display:none}
#joystick-canvas{width:100%;height:100%}
.logo{font-size:2.5rem;font-weight:bold;color:#ffd700;text-shadow:0 0 8px #ff0000,0 0 16px #ff6600;letter-spacing:4px;text-align:center}
.subtitle{font-size:1.2rem;color:#ff6600;margin-top:-.5rem}
.flavor{font-size:.9rem;color:#aaa}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 24px;border:2px solid #555;background:transparent;color:#ddd;font-family:inherit;font-size:1rem;border-radius:6px;cursor:pointer;transition:background .1s,border-color .1s}
.btn:active{background:#333;border-color:#888}
.btn-primary{border-color:#ffd700;color:#ffd700;background:rgba(255,215,0,.1)}
.btn-primary:active{background:rgba(255,215,0,.3)}
.btn-icon{border:none;background:transparent;color:#fff;font-size:1.5rem;padding:4px;min-width:44px;min-height:44px}
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-label input[type="checkbox"]{width:0;height:0;opacity:0}
.toggle-slider{width:44px;height:24px;background:#555;border-radius:12px;position:relative;transition:background .2s}
.toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle-label input:checked+.toggle-slider{background:#00ff00}
.toggle-label input:checked+.toggle-slider::after{transform:translateX(20px)}
.hidden{display:none!important}
#upgrade-panel{position:absolute;inset:0;background:rgba(0,0,0,.85);z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem}
#upgrade-choices{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
#upgrade-choices button{min-width:140px;min-height:60px;padding:8px;background:#1a1a2e;border:2px solid #448;color:#dde;font-family:inherit;font-size:.9rem;border-radius:8px;cursor:pointer;transition:border-color .1s}
h1,h2,h3{color:#ffd700;letter-spacing:2px;text-shadow:0 0 4px #ff0000}
p{max-width:400px;text-align:center;line-height:1.4}
@media (pointer:coarse){
#joystick-area{display:block}
}
@media (prefers-reduced-motion:reduce){
*{transition-duration:0s!important;animation-duration:0s!important}
}