.game-container{display:flex;flex-direction:column;height:100dvh;width:100%;max-width:600px;margin:0 auto}.game-screen{flex:1;position:relative;background-color:#000;border-bottom:4px solid #444;overflow:hidden;image-rendering:pixelated}.title-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#000;color:#fff;z-index:100}.game-title{font-size:3rem;margin-bottom:2rem;text-shadow:2px 2px 0 #444,4px 4px 0 #222;color:#f1c40f;letter-spacing:.2rem}.menu-window{background-color:#000;color:#fff;border:4px solid #fff;border-radius:8px;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #fff,4px 4px #00000080;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem}.menu-window button{background:none;border:none;color:#fff;font-family:inherit;font-size:1.2rem;text-align:left;cursor:pointer;padding:.5rem}.menu-window button:hover{background-color:#333}.field-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#2e8b57}.virtual-controller{height:35vh;min-height:230px;background-color:#222;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem calc(2rem + env(safe-area-inset-bottom,0px)) 1.5rem;position:relative;box-sizing:border-box}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.battle-bg-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#4ab7f5;perspective:600px}.battle-sky{position:absolute;top:0;left:0;width:100%;height:45%;background-image:url(/assets/media__1786266670035.png);background-size:cover;background-position:center bottom}.battle-floor{position:absolute;top:40%;left:-50%;width:200%;height:150%;background-size:64px 64px;image-rendering:pixelated;transform:rotateX(70deg);transform-origin:top center;box-shadow:inset 0 150px 100px -80px #698cb4e6}.monster-shadow{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:120px;height:20px;background:radial-gradient(ellipse at center,#0009,#0000 70%)}.monster-sprite{width:128px;height:128px;image-rendering:pixelated;transform-origin:bottom center;object-fit:contain;object-position:bottom center;animation:appearAnim .5s ease-out forwards}@keyframes appearAnim{0%{opacity:0;transform:scale(0) translateY(50px);filter:brightness(2)}50%{opacity:1;transform:scale(1.1) translateY(-10px);filter:brightness(2)}to{opacity:1;transform:scale(1) translateY(0);filter:brightness(1)}}.anim-idle{animation:enemy-idle 2s ease-in-out infinite}.anim-idle-grounded{animation:enemy-idle-grounded 2s ease-in-out infinite}.anim-attack{animation:enemy-attack .5s ease-in-out}.anim-damage{animation:enemy-damage .5s cubic-bezier(.36,.07,.19,.97) both}.anim-flee{animation:enemy-flee 1s ease-in forwards}@keyframes enemy-idle{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.02,.98) translateY(5px)}}@keyframes enemy-idle-grounded{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.02,.98) translateY(0)}}@keyframes enemy-attack{0%{transform:scale(1) translate(0)}30%{transform:scale(1.2) translateY(20px)}to{transform:scale(1) translate(0)}}@keyframes enemy-damage{0%{transform:translate(0) brightness(1);filter:invert(0)}20%{transform:translate(-10px) brightness(2);filter:invert(1)}40%{transform:translate(10px) brightness(1);filter:invert(0)}60%{transform:translate(-10px) brightness(2);filter:invert(1)}80%{transform:translate(10px) brightness(1);filter:invert(0)}to{transform:translate(0) brightness(1);filter:invert(0)}}@keyframes enemy-flee{0%{transform:scale(1) translate(0);opacity:1}to{transform:scale(.5) translateY(-100px);opacity:0}}.dpad{position:relative;width:120px;height:120px;margin-bottom:20px}.dpad-btn{position:absolute;width:40px;height:40px;background-color:#444;border:2px solid #222;border-radius:8px;color:#fff;font-size:1rem;display:flex;justify-content:center;align-items:center}.dpad-btn:active{background-color:#666}.dpad .up{top:0;left:40px}.dpad .down{bottom:0;left:40px}.dpad .left{top:40px;left:0}.dpad .right{top:40px;right:0}.dpad-center{position:absolute;top:40px;left:40px;width:40px;height:40px;background-color:#333}.action-buttons{display:flex;gap:1rem;align-items:center;height:120px;margin-bottom:20px}.action-btn{width:60px;height:60px;border-radius:50%;border:2px solid #111;font-size:1.5rem;font-weight:700;color:#fff;box-shadow:2px 2px 5px #00000080}.a-btn{background-color:#e74c3c;margin-bottom:20px}.a-btn:active{background-color:#c0392b}.b-btn{background-color:#f1c40f}.b-btn:active{background-color:#f39c12}.slash-effect{position:absolute;top:50%;left:50%;width:150px;transform-origin:center;transform:translate(-50%,-50%) rotate(30deg) scaleX(0);z-index:10;pointer-events:none;opacity:0;filter:brightness(2) drop-shadow(0 0 5px white)}.slash-effect.active{animation:slashAnim .2s cubic-bezier(.1,.9,.2,1) forwards}@keyframes slashAnim{0%{opacity:0;transform:translate(-50%,-50%) rotate(30deg) scaleX(0) scaleY(.5)}20%{opacity:1;transform:translate(-50%,-50%) rotate(30deg) scaleX(1.2) scaleY(1)}80%{opacity:1;transform:translate(-50%,-50%) rotate(30deg) scaleX(1.5) scaleY(.2)}to{opacity:0;transform:translate(-50%,-50%) rotate(30deg) scaleX(1.8) scaleY(0)}}.encounter-flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;animation:encounterFlash 1s forwards}@keyframes encounterFlash{0%{background-color:transparent}10%{background-color:#fff}20%{background-color:transparent}30%{background-color:#fff}40%{background-color:transparent}50%{background-color:#fff}60%{background-color:#000}to{background-color:#000}}.encounter-fade-in-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;background-color:#000;animation:encounterFadeIn .5s forwards}@keyframes encounterFadeIn{0%{opacity:1}to{opacity:0}}.damage-shake{animation:damageShake .4s ease-in-out}@keyframes damageShake{0%{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}to{transform:translate(0)}}.fade-out{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:9999;animation:fadeOutAnim 1s forwards;pointer-events:none}.fade-in{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:9999;animation:fadeInAnim 1s forwards;pointer-events:none}@keyframes fadeOutAnim{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnim{0%{opacity:1}to{opacity:0}}.death-fade-out{position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999;animation:deathFadeAnim 2.5s forwards;pointer-events:none}@keyframes deathFadeAnim{0%{background-color:#f000;opacity:0}20%{background-color:#f00c;opacity:1}50%{background-color:#f00c;opacity:1}to{background-color:#000;opacity:1}}*{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}img,button{-webkit-user-drag:none;user-drag:none}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100dvh;min-width:100vw;background-color:#1a1a1a;color:#fff;font-family:Courier New,Courier,monospace;overflow:hidden}#root{width:100%;height:100%;max-width:600px;max-height:1000px;background-color:#000;box-shadow:0 0 10px #00000080}