body{margin:0;padding:0;overflow:hidden;background-color:#000;font-family:"Press Start 2P",cursive;-webkit-user-select:none;user-select:none}canvas{display:block}#pregame-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#1a1a2e66,#0f346066,#16213e66);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 1s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}#pregame-content{text-align:center;color:#fff}.quest-item{font-size:14px;margin-bottom:8px;color:#ddd;display:flex;align-items:center;gap:8px}.quest-icon{font-size:16px;text-shadow:1px 1px 0 #000}#game-title{font-size:64px;margin:0;color:#00d9ff;text-shadow:4px 4px 0px #ff006e,8px 8px 0px rgba(0,0,0,.3);animation:float 3s ease-in-out infinite;letter-spacing:8px}#game-subtitle{font-size:24px;margin:10px 0 50px;color:#ffbe0b;text-shadow:2px 2px 0px rgba(0,0,0,.5);letter-spacing:12px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}#start-button{font-family:"Press Start 2P",cursive;font-size:28px;padding:20px 60px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:4px solid #fff;cursor:pointer;box-shadow:0 8px #333,0 12px 20px #00000080;transition:all .1s;margin-bottom:60px}#start-button:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(2px);box-shadow:0 6px #333,0 10px 15px #00000080}#start-button:active{transform:translateY(4px);box-shadow:0 4px #333,0 6px 10px #00000080}#pregame-controls{font-size:12px;color:#aaa;line-height:24px}#pregame-controls p{margin:8px 0}#hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#compass-container{position:absolute;top:20px;left:50%;transform:translate(-50%);width:400px;height:50px;background:#000;border:4px solid #fff;box-shadow:0 0 0 4px #000,0 4px 0 4px #555;overflow:hidden;font-family:"Press Start 2P",cursive}#compass-strip{display:flex;justify-content:space-between;width:200%;color:#0f0;font-size:14px;line-height:42px;padding:0 20px;box-sizing:border-box;transition:transform .1s linear;text-shadow:2px 2px 0 #004400}#compass-strip span{flex:1;text-align:center}#compass-marker{position:absolute;top:0;left:50%;transform:translate(-50%);color:#ff0;font-size:24px;line-height:24px;text-shadow:2px 2px 0 #000}#stats-panel{position:absolute;bottom:30px;left:30px;display:flex;flex-direction:column;gap:15px}.bar-container{display:flex;align-items:center;margin-bottom:10px}.bar-icon{width:30px;font-size:20px;text-align:center;margin-right:10px;text-shadow:2px 2px 0 #000}.bar-label{font-family:"Press Start 2P",cursive;font-size:16px;width:40px;text-align:left;color:#fff;text-shadow:3px 3px 0 #000}.bar-bg{width:250px;height:20px;background:#333;border:2px solid #fff;box-shadow:4px 4px #000;overflow:hidden;position:relative}.bar-fill{height:100%;width:100%;transition:width .2s ease-out;position:relative;image-rendering:pixelated}.bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(0,0,0,.1) 8px,rgba(0,0,0,.1) 10px)}.bar-fill.health{background:repeating-linear-gradient(90deg,red,red 4px,#c00 4px,#c00 8px);box-shadow:inset 0 -4px #0000004d}.bar-fill.stamina{background:linear-gradient(90deg,gold,#fa0);box-shadow:0 0 10px gold}.bar-fill.wetness{background:linear-gradient(90deg,#00bfff,#1e90ff);box-shadow:0 0 10px #00bfff}#quest-panel{position:absolute;top:20px;right:20px;width:300px;background:#000000b3;border:4px solid #fff;padding:15px;color:#fff;font-family:"Press Start 2P",cursive;box-shadow:0 0 0 4px #000}#quest-panel h3{margin:0 0 15px;font-size:16px;color:gold;text-align:center;text-shadow:2px 2px 0 #000}.quest-item{font-size:12px;margin:10px 0;line-height:1.5;color:#aaa}.quest-item.completed{color:#0f0;text-decoration:line-through}#story-box{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:80%;max-width:800px;height:auto;background:#000000e6;border:4px solid #fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;z-index:2000;padding:20px;box-shadow:0 0 0 4px #000,0 10px 20px #00000080;font-family:"Press Start 2P",cursive;animation:slideUp .5s ease-out}@keyframes slideUp{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}.story-content{background:transparent;border:none;padding:0;box-shadow:none;color:#fff;text-align:left;width:100%;display:flex;flex-direction:column;gap:10px}.story-content h2{color:gold;font-size:18px;margin:0 0 10px;text-shadow:2px 2px 0 #000}.story-content p{line-height:1.6;margin:5px 0;font-size:12px;color:#ddd}.story-content ul{margin:10px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.story-content li{font-size:10px;color:#aaa}#close-story{align-self:flex-end;font-family:"Press Start 2P",cursive;font-size:12px;padding:10px 20px;background:transparent;color:#0f0;border:2px solid #00ff00;cursor:pointer;margin-top:10px;box-shadow:none;transition:all .2s}#close-story:hover{background:#0f0;color:#000;transform:none;box-shadow:0 0 10px #0f0}#notification-area{position:absolute;top:100px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.notification{background:#000c;border:2px solid #ffd700;color:gold;padding:15px 30px;font-family:"Press Start 2P",cursive;font-size:14px;animation:slideDown .5s ease-out,fadeOut .5s ease-in 3s forwards;text-shadow:2px 2px 0 #000;box-shadow:0 4px #00000080}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes stamina-flash{0%{transform:scaleX(1);box-shadow:0 0 10px gold;filter:brightness(1)}25%{transform:scaleX(1.05);box-shadow:0 0 40px gold,0 0 60px #fa0;filter:brightness(1.5)}50%{transform:scaleX(1.1);box-shadow:0 0 50px gold,0 0 80px #fa0,inset 0 0 20px #fff;filter:brightness(2)}75%{transform:scaleX(1.05);box-shadow:0 0 40px gold,0 0 60px #fa0;filter:brightness(1.5)}to{transform:scaleX(1);box-shadow:0 0 10px gold;filter:brightness(1)}}.stamina-flash{animation:stamina-flash 1s ease-in-out;transform-origin:left}