*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#000;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.container{background:#1a1a2e;border-radius:10px;box-shadow:0 20px 60px #00000080;overflow:hidden;max-width:1000px;width:100%}.header{background:linear-gradient(90deg,#4a7c1a,#2d5a10);padding:20px;text-align:center;color:#fff}.header h1{font-size:1.8em;margin-bottom:8px;text-shadow:2px 2px 4px rgba(0,0,0,.6)}.header p{font-size:.9em;opacity:.9}.hud{background:#0f0f1e;padding:15px 20px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;border-bottom:2px solid #4a7c1a}.hud-item{text-alignn:center;color:#7ec850;font-weight:700}.hud-item label{display:block;font-size:.75em;opacity:.7;margin-bottom:5px}.hud-item .value{font-size:1.5em;color:#b5e853}canvas{display:block;width:100%;max-height:600px}.controls{background:#0f0f1e;padding:15px 20px;text-align:center;color:#7ec850;border-top:2px solid #4a7c1a}.controls p{margin:6px 0;font-size:.85em}.controls strong{color:#b5e853}.button-group{margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}button{padding:10px 20px;background:linear-gradient(90deg,#4a7c1a,#2d5a10);color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;font-size:.9em;transition:transform .2s,box-shadow .2s}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #4a7c1a80}button:active{transform:translateY(0)}.char-selector{display:flex;gap:8px;justify-content:center;margin-top:10px}.char-btn{padding:6px 14px;background:#2a2a4e;color:#b5e853;border:2px solid #4a7c1a;border-radius:5px;cursor:pointer;font-size:.8em;transition:all .2s}.char-btn.active{background:#4a7c1a;color:#fff}.char-btn:hover{background:#3a5a15}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;justify-content:center;align-items:center}.modal.show{display:flex}.modal-content{background:#1a1a2e;padding:40px;border-radius:10px;text-align:center;color:#fff;max-width:500px;border:2px solid #4a7c1a}.modal-content h2{font-size:2em;margin-bottom:20px;color:#b5e853}.modal-content p{font-size:1.1em;margin-bottom:30px;line-height:1.6}#startScreen{position:absolute;inset:0;background:url(../img/title_screen.png) center top / cover no-repeat;z-index:50;transition:opacity .5s ease}#startScreen.hidden{opacity:0;pointer-events:none}#startScreen .game-title{font-size:clamp(1.8em,5vw,3.2em);font-weight:900;color:#fff;text-align:center;text-shadow:0 0 30px rgba(180,255,80,.7),2px 3px 0 #1a4a00;letter-spacing:1px;line-height:1.2;margin-bottom:6px}#startScreen .game-subtitle{color:#b5e853;font-size:1em;margin-bottom:28px;opacity:.85;text-align:center}#startScreen .instructions{background:#00000080;border:1px solid rgba(180,255,80,.3);border-radius:10px;padding:18px 28px;max-width:540px;width:100%;margin-bottom:28px;color:#e8e8e8}#startScreen .instructions h3{color:#b5e853;font-size:.9em;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;text-align:center}#startScreen .instructions .ctrl-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:.88em}#startScreen .instructions .key{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:2px 8px;font-weight:700;color:#fff;white-space:nowrap;font-size:.85em}#startScreen .mission-box{background:#b4ff5014;border-left:3px solid #b5e853;padding:10px 14px;margin-top:12px;border-radius:0 6px 6px 0;font-size:.87em;color:#d4f0a0;line-height:1.5}#startScreen .char-pick{display:flex;gap:16px;margin-bottom:0}#startScreen .char-card{background:#ffffff12;border:2px solid rgba(180,255,80,.25);border-radius:10px;padding:10px 18px;cursor:pointer;text-align:center;transition:all .2s;color:#ccc;font-size:.85em}#startScreen .char-card.selected{border-color:#b5e853;background:#b4ff5026;color:#fff}#startScreen .char-card:hover{border-color:#b5e853}#startScreen .char-card .char-icon{font-size:1.8em;display:block;margin-bottom:4px}#startBtn{background:linear-gradient(135deg,#4a9a10,#2a6a05);color:#fff;border:none;border-radius:10px;padding:14px 60px;font-size:1.3em;font-weight:900;cursor:pointer;letter-spacing:2px;text-transform:uppercase;box-shadow:0 4px 24px #64dc2859;transition:transform .15s,box-shadow .15s}#startBtn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 32px #64dc288c}#startBtn:active{transform:scale(.97)}.canvas-wrapper{position:relative}.game-btn-overlay{position:absolute;bottom:8px;right:8px;z-index:20;gap:4px;flex-direction:row}@media (max-width: 900px),(max-height: 600px),(pointer: coarse){.game-btn-overlay{inset:8px auto auto 50%;transform:translate(-50%);gap:10px}.icon-btn{width:40px;height:40px;font-size:1.1em;background:#0009;border:1px solid rgba(255,255,255,.3)}}.icon-btn{width:32px;height:32px;background:#0000008c;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1em;line-height:1;padding:0}.start-panel{position:absolute;left:50%;transform:translate(-50%);bottom:2%;width:56%;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 20px 14px;background:#000800c7;border-radius:8px;border:1px solid rgba(180,255,80,.2)}@media (max-width: 900px),(max-height: 600px){#startScreen .start-panel{top:auto;bottom:6px;width:auto;max-width:360px;padding:9px 5px;gap:5px;flex-direction:row;flex-wrap:wrap;justify-content:center;transform:none;left:5px}#startScreen .controls-hint{font-size:.68em;line-height:1.5;width:100%;text-align:center}#startScreen .char-row{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap}#startScreen .char-pick{flex-direction:row}#startScreen .char-card{padding:5px 10px;font-size:.72em}#startScreen .char-icon-sm{font-size:1.1em}#startBtn{padding:8px 20px;font-size:.95em;white-space:nowrap}}.controls-hint{color:#ddd;font-size:.77em;text-align:center;line-height:2;text-shadow:1px 1px 3px #000,0 0 6px #000}.kbd-key{display:inline-block;background:linear-gradient(180deg,#4a9a10,#2a6005);color:#fff;border:1px solid #8eff50;border-bottom:3px solid #1a4a00;border-radius:5px;padding:2px 9px;font-family:inherit;font-size:.95em;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 4px #00000080}.rotate-overlay{display:none}@media (max-width: 900px) and (orientation: portrait){.rotate-overlay{display:flex;position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#0a1a0a,#1a2e10);align-items:center;justify-content:center;flex-direction:column}}.rotate-content{text-align:center;color:#fff;padding:30px}.rotate-icon{font-size:3.5em;margin-bottom:16px;animation:rotateHint 2s ease-in-out infinite}@keyframes rotateHint{0%,to{transform:rotate(0)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}}.rotate-title{font-size:1.6em;font-weight:700;color:#b5e853;margin-bottom:8px;text-shadow:0 0 12px rgba(180,255,80,.5)}.rotate-sub{font-size:.95em;color:#aaa}.kbd-mobile{display:none!important}.kbd-desktop{display:inline-block!important}@media (max-width: 900px),(max-height: 600px){.kbd-mobile{display:inline-block!important}.kbd-desktop{display:none!important}}.kbd-inline{display:inline-block;background:linear-gradient(180deg,#2a5a10,#1a3a05);color:#b5e853;border:1px solid #4a8a20;border-bottom:2px solid #0a2000;border-radius:4px;padding:1px 7px;font-family:inherit;font-size:.9em;font-weight:700}.text-yellow{color:#ffe066}.text-red-hint{color:#ff6b6b}.char-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}#startScreen .char-pick-compact{margin:0;gap:6px}.char-icon-sm{font-size:1.3em}.game-controls-bar{padding:8px 16px;background:#0f0f1e;border-top:1px solid #1a3a10;text-align:center;color:#7ec850;font-size:.82em}.text-highlight{color:#b5e853}.touch-controls{position:absolute;bottom:12px;left:0;right:0;pointer-events:none;display:none;z-index:30}.touch-left,.touch-right{position:absolute;bottom:0;display:flex;gap:10px;pointer-events:none}.touch-left{left:14px}.touch-right{right:14px}.touch-btn{width:68px;height:68px;background:#00000073;border:1.5px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:all;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .1s,transform .1s;opacity:.8;padding:0;cursor:pointer}.touch-btn svg{width:34px;height:34px;flex-shrink:0}#btn-rescue{font-size:2.2em;line-height:1}.touch-btn.pressed,.touch-btn:active{background:#fff3;transform:scale(.9);opacity:1}@media (max-width: 900px),(max-height: 600px){html{overflow:hidden;height:100%}body{overflow:hidden;height:100%;padding:0;margin:0;align-items:stretch;position:fixed;width:100%;top:0;left:0}.container{border-radius:0;box-shadow:none;max-width:100%;width:100%;height:100dvh;display:flex;flex-direction:column}canvas{flex:1!important;min-height:0!important;width:100%!important;display:block}.canvas-wrapper{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.header{padding:5px 10px;flex-shrink:0}.header{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;padding:5px 10px}.header h1{font-size:.82em;margin:0;white-space:nowrap}.header p{font-size:.72em;margin:0;opacity:.85;white-space:nowrap;border-left:1px solid rgba(255,255,255,.3);padding-left:8px}.hud{padding:4px 8px;gap:4px;flex-shrink:0}.hud-item .value{font-size:.95em}.hud-item label{font-size:.58em;margin-bottom:2px}#gameControls{display:none!important}}.credits-modal{max-width:580px;text-align:left}.credits-title{text-align:center;margin-bottom:18px}.credits-table{width:100%;border-collapse:collapse;font-size:.85em;color:#ccc;line-height:1.7}.credits-table td,.credits-table th{padding:4px 8px}.credits-thead-row{color:#b5e853;border-bottom:1px solid #4a7c1a}.credits-link{color:#7ec850}.credits-link:hover{color:#b5e853}.credits-source{margin-top:16px;font-size:.78em;color:#666;text-align:center}.credits-close{text-align:center;margin-top:20px}.credits-btn{background:transparent;border:none;color:#ffffff73;font-size:.7em;cursor:pointer;padding:4px 8px;text-decoration:underline;font-weight:400;box-shadow:none;transform:none}.credits-btn:hover{color:#ffffffd9;transform:none;box-shadow:none}.page-footer{width:100%;text-align:center;padding:10px 0 6px}.footer-credits{color:#ffffff59;font-size:.75em;cursor:pointer;letter-spacing:1px;transition:color .2s}.footer-credits:hover{color:#ffffffbf}.start-credits-link{position:absolute;bottom:12px;right:14px;color:#ffffff80;font-size:.72em;cursor:pointer;letter-spacing:.5px;text-shadow:1px 1px 2px rgba(0,0,0,.8);transition:color .2s;z-index:10}.start-credits-link:hover{color:#ffffffe6}.page-loader{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s ease}.page-loader.hidden{opacity:0;pointer-events:none}.loader-inner{display:flex;flex-direction:column;align-items:center;gap:16px}.loader-spinner{width:44px;height:44px;border:3px solid rgba(255,255,255,.15);border-top-color:#b5e853;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{color:#ffffff80;font-size:.85em;letter-spacing:2px;text-transform:uppercase}@media (max-width: 900px),(max-height: 600px){.credits-modal{max-width:95vw;padding:20px 16px}.credits-title{font-size:1.3em;margin-bottom:10px}.credits-table{font-size:.76em;line-height:1.4}.credits-table td,.credits-table th{padding:2px 6px}.credits-source{font-size:.7em;margin-top:10px}.credits-close{margin-top:12px}}