@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#000;font-family:"Press Start 2P",monospace;image-rendering:pixelated;image-rendering:crisp-edges}#canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;image-rendering:pixelated;image-rendering:crisp-edges}#info{position:fixed;top:20px;left:0;right:0;text-align:center;z-index:100;pointer-events:none}#info h1{font-size:clamp(.8rem,2.5vw,1.5rem);font-weight:400;letter-spacing:.1em;color:#fff;text-shadow:3px 3px 0px #000,-1px -1px 0px #000,1px -1px 0px #000,-1px 1px 0px #000;animation:pixel-glow 2s ease-in-out infinite alternate;padding:10px 20px;background:linear-gradient(180deg,#000000b3,#0000004d);display:inline-block;border:4px solid #fff;border-image:repeating-linear-gradient(90deg,#fff 0px,#fff 4px,transparent 4px,transparent 8px) 4}#info p{font-size:.5rem;letter-spacing:.2em;color:#fc0;margin-top:12px;text-transform:uppercase;text-shadow:2px 2px 0px #000}@keyframes pixel-glow{0%{color:#fff}to{color:#ff8}}#scene-indicator{position:fixed;bottom:20px;left:0;right:0;text-align:center;z-index:100;pointer-events:none}#scene-indicator:before{content:"▶ ";color:#fc0}#scene-indicator:after{content:attr(data-scene);font-size:.6rem;letter-spacing:.15em;color:#fff;text-shadow:2px 2px 0px #000;text-transform:uppercase;background:#0009;padding:8px 16px;border:2px solid #ffcc00}body:before{content:"";position:fixed;top:8px;left:8px;right:8px;bottom:8px;border:4px solid rgba(255,255,255,.3);pointer-events:none;z-index:50;box-shadow:inset 0 0 0 4px #00000080}body:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:60}.corner{position:fixed;width:20px;height:20px;border:4px solid #ffcc00;z-index:55;pointer-events:none}.corner-tl{top:4px;left:4px;border-right:none;border-bottom:none}.corner-tr{top:4px;right:4px;border-left:none;border-bottom:none}.corner-bl{bottom:4px;left:4px;border-right:none;border-top:none}.corner-br{bottom:4px;right:4px;border-left:none;border-top:none}.status-bar{position:fixed;top:80px;left:20px;z-index:100;pointer-events:none;font-size:.5rem;color:#fff;text-shadow:2px 2px 0px #000}.status-bar .hp{color:#f66}.status-bar .mp{color:#66f;margin-top:4px}.status-bar .exp{color:#fc0;margin-top:4px}#level-display{font-size:.6rem;color:#fc0;margin-bottom:8px;text-shadow:2px 2px 0px #000,0 0 8px #ffcc00}.bar-container{width:100px;height:8px;background:#333;border:2px solid #fff;margin-top:2px}.bar-fill{height:100%;transition:width .3s}.bar-fill.hp-fill{background:linear-gradient(180deg,#f88,#f44,#c22);width:85%}.bar-fill.mp-fill{background:linear-gradient(180deg,#88f,#44f,#22c);width:92%}.exp-container{width:80px}.bar-fill.exp-fill{background:linear-gradient(180deg,#fe8,#fc0,#c90);width:0%}.level-up-notification{position:fixed;top:40%;left:50%;transform:translate(-50%) translateY(-20px);z-index:400;text-align:center;opacity:0;transition:all .4s ease-out;pointer-events:none}.level-up-notification.show{opacity:1;transform:translate(-50%) translateY(0)}.level-up-text{font-size:1.8rem;color:#fc0;text-shadow:4px 4px 0px #000,0 0 20px #ffcc00,0 0 40px #ffaa00;animation:level-up-pulse .5s ease-in-out infinite alternate}.level-up-stats{font-size:.6rem;color:#8f8;text-shadow:2px 2px 0px #000;margin-top:10px}@keyframes level-up-pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.damage-flash{position:fixed;top:0;left:0;right:0;bottom:0;background:#ff00004d;pointer-events:none;z-index:200;animation:flash-fade .3s ease-out forwards}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}@keyframes hp-critical{0%,to{opacity:1}50%{opacity:.5}}.bar-fill.hp-fill.critical{animation:hp-critical .5s ease-in-out infinite}.spell-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;color:#4f8;text-shadow:3px 3px 0px #000,-1px -1px 0px #000,1px -1px 0px #000,-1px 1px 0px #000,0 0 20px #44ff88,0 0 40px #44ff88;z-index:300;pointer-events:none;animation:spell-appear 1.5s ease-out forwards}@keyframes spell-appear{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}40%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-70%) scale(1)}}#stats-display{margin-top:8px;font-size:.4rem;color:#fc0;text-shadow:1px 1px 0px #000}#stats-display div{margin-top:2px}#equipment-panel{position:fixed;top:80px;right:20px;z-index:100;pointer-events:none;font-size:.4rem;color:#fff;text-shadow:1px 1px 0px #000;background:#0009;padding:8px;border:2px solid #ffcc00;min-width:120px}#equipment-panel .panel-title{font-size:.45rem;color:#fc0;margin-bottom:6px;text-align:center;border-bottom:1px solid #ffcc00;padding-bottom:4px}#equipment-display{display:flex;flex-direction:column;gap:4px}.equip-item{display:flex;align-items:center;gap:4px;padding:2px 4px;background:#0006;border-left:2px solid #888}.equip-icon{font-size:.5rem}.equip-name{font-size:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-notification{position:fixed;bottom:100px;left:50%;transform:translate(-50%) translateY(100px);z-index:400;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#281e14f2,#140f0af2);padding:12px 20px;border:3px solid #ffcc00;box-shadow:0 0 20px #ffcc0080,inset 0 0 10px #ffcc001a;opacity:0;transition:all .5s ease-out;pointer-events:none}.item-notification.show{opacity:1;transform:translate(-50%) translateY(0)}.item-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#00000080;border:2px solid #888}.item-info{display:flex;flex-direction:column;gap:4px}.item-name{font-size:.6rem;text-shadow:2px 2px 0px #000}.item-stats{font-size:.4rem;color:#8f8;text-shadow:1px 1px 0px #000}@keyframes legendary-glow{0%,to{box-shadow:0 0 10px #fa0,0 0 20px #fa0}50%{box-shadow:0 0 20px #fa0,0 0 40px #fa0}}.item-notification.legendary{animation:legendary-glow 1s ease-in-out infinite}.item-notification.power-up{border-color:#8f8;box-shadow:0 0 20px #88ff8880,inset 0 0 10px #88ff881a}#game-over-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease-in}#game-over-screen.show{opacity:1;pointer-events:all}.game-over-content{text-align:center}.game-over-content h2{font-size:2rem;color:#f44;text-shadow:4px 4px 0px #000,0 0 20px #ff0000,0 0 40px #ff0000;animation:game-over-pulse 1s ease-in-out infinite alternate;margin-bottom:30px}@keyframes game-over-pulse{0%{transform:scale(1);text-shadow:4px 4px 0px #000,0 0 20px #ff0000,0 0 40px #ff0000}to{transform:scale(1.05);text-shadow:4px 4px 0px #000,0 0 30px #ff0000,0 0 60px #ff0000}}.respawn-text{font-size:.7rem;color:#fff;text-shadow:2px 2px 0px #000}#respawn-countdown{font-size:1.2rem;color:#fc0;text-shadow:2px 2px 0px #000,0 0 10px #ffcc00}.item-notification.power-down{border-color:#f66;box-shadow:0 0 15px #ff66664d,inset 0 0 10px #ff66661a}.item-notification.power-down .item-icon{filter:hue-rotate(180deg)}#vibe-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;font-size:clamp(2rem,5vw,4rem);font-weight:700;color:#ffffff26;z-index:1000;pointer-events:none;font-family:"Press Start 2P",monospace;text-transform:uppercase;line-height:1.5;-webkit-user-select:none;user-select:none;text-shadow:2px 2px 0px rgba(0,0,0,.5)}