@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#fff;background:#101a28}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}#game{position:fixed;inset:0}#game canvas{display:block;width:100%;height:100%}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,15,28,.75),transparent 38%,transparent 68%,rgba(5,15,28,.3)),linear-gradient(0deg,rgba(5,15,28,.62),transparent 28%);z-index:1}#hud{position:fixed;inset:0;z-index:2;pointer-events:none}.topbar{height:78px;padding:20px 30px;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:23px;font-weight:900;letter-spacing:1.6px;line-height:1}.brand b{color:#ff765b}.brand small{font-size:12px;margin-left:4px;color:#ffcc84}.brand-icon{display:grid;place-items:center;width:34px;height:34px;background:#e8543d;border-radius:9px;color:#fff;font-size:27px;box-shadow:0 5px 25px #f2493580}.mission-pill{margin-left:auto;background:#132235bc;border:1px solid #ffffff25;border-radius:100px;padding:10px 15px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:2px;font-weight:800;backdrop-filter:blur(10px)}.pulse,.map-dot{width:7px;height:7px;border-radius:50%;background:#ff664a;box-shadow:0 0 13px #ff664a;animation:pulse 1.5s infinite}.icon-btn{pointer-events:auto;border:1px solid #ffffff3d;color:#fff;background:#17283fb5;border-radius:12px;width:37px;height:37px;font-size:20px}.left-panel,.right-panel{position:absolute;background:#132236c2;border:1px solid #ffffff2b;border-radius:17px;backdrop-filter:blur(18px);box-shadow:0 18px 60px #06111a5c}.left-panel{left:30px;top:99px;width:284px;padding:20px}.eyebrow,.overline{font-size:10px;letter-spacing:2.1px;font-weight:800;color:#ffab7c}.left-panel h1{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.3px;line-height:.95;font-weight:900;font-size:36px;margin:12px 0 8px}.left-panel p{font-size:12px;line-height:1.55;color:#b9c6d0;margin:0 0 19px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.stat{display:flex;align-items:center;gap:7px;background:#ffffff0d;padding:10px 7px;border-radius:10px}.stat-icon{font-size:18px}.blue{color:#5ed9fa}.orange{color:#ff9b63}.stat strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:21px;line-height:1}.stat small{display:block;font-size:8px;white-space:nowrap;color:#a3b2c1;letter-spacing:.5px;margin-top:3px}.meters{margin-top:17px}.meter-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#b9c6d0;margin:10px 0 5px;font-weight:800}.meter-label b{color:#fff}.meter{height:5px;background:#ffffff21;border-radius:5px;overflow:hidden}.meter i{display:block;height:100%;width:100%;border-radius:5px;transition:width .2s}.water-bar{background:linear-gradient(90deg,#2a9bc7,#79e6ff)}.health-bar{background:linear-gradient(90deg,#ed5c43,#ffbb73)}.tip{display:flex;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid #ffffff25;color:#d5e0e8;font-size:10px;line-height:1.4}.tip>span:first-child{color:#ffc26d}.right-panel{right:30px;top:99px;width:220px;padding:12px}.map-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1.5px;padding:2px 4px 10px}.map-dot{width:5px;height:5px;background:#62dbac;box-shadow:0 0 9px #62dbac}#minimap{display:block;width:194px;height:194px;border-radius:8px;background:#17263a}.map-key{display:flex;gap:10px;padding:10px 3px 2px;color:#a9bccb;font-size:9px}.key-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px}.key-dot.fire{background:#ff7b4c}.key-dot.person{background:#7ce6ee}.key-dot.base{background:#9af6aa}.controls-hint{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);display:flex;gap:20px;white-space:nowrap;color:#d4e0e9;font-size:10px;font-weight:700;letter-spacing:1px}kbd{display:inline-block;background:#1a2a3ccf;border:1px solid #ffffff35;border-bottom-color:#ffffff6e;padding:4px 6px;border-radius:5px;font-size:10px;color:#fff;margin-right:2px;min-width:21px;text-align:center}.action-prompt{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);background:#121f30e8;border:1px solid #ffffff42;border-radius:10px;padding:10px 16px;font-size:12px;font-weight:700;box-shadow:0 10px 30px #0006}.hidden{display:none!important}.overlay{position:fixed;inset:0;z-index:5;background:linear-gradient(120deg,#081422e6,#102238bb);display:grid;place-items:center;backdrop-filter:blur(7px)}.overlay-card{width:min(480px,calc(100vw - 34px));padding:39px 38px 34px;background:linear-gradient(145deg,#23344aef,#111e30f7);border:1px solid #ffffff3c;border-radius:20px;text-align:center;box-shadow:0 30px 90px #0209118c}.hero-emblem{display:grid;place-items:center;margin:20px auto 12px;width:75px;height:75px;border-radius:22px;background:linear-gradient(135deg,#ff9d54,#e94839);font-size:50px;box-shadow:0 0 38px #ff5c4b88,0 10px 24px #0004}.overlay-card h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(54px,10vw,82px);line-height:.82;margin:22px 0;letter-spacing:1px}.overlay-card h2 span{color:#ff9270}.overlay-card p{max-width:360px;margin:0 auto 25px;color:#c9d4dc;font-size:14px;line-height:1.6}.primary-btn{background:linear-gradient(110deg,#f65a40,#ff9d54);color:#fff;border:0;border-radius:10px;padding:15px 20px;font-weight:800;letter-spacing:1.5px;font-size:12px;min-width:225px;box-shadow:0 9px 28px #f959497a;transition:transform .2s,filter .2s}.primary-btn:hover{transform:translateY(-3px);filter:brightness(1.08)}.primary-btn span{margin-left:25px;font-size:17px}.overlay-note{margin-top:20px;font-size:11px;color:#98aaba}.overlay .overline{color:#ffc491}#loading{position:fixed;z-index:10;inset:0;display:grid;place-items:center;background:#101a28;color:#d9e5ee;font-family:'Barlow Condensed',sans-serif;letter-spacing:4px;font-size:18px;transition:opacity .5s}#loading.done{opacity:0;pointer-events:none}#mobileControls{display:flex;position:fixed;z-index:3;bottom:25px;left:20px;right:20px;justify-content:space-between;align-items:end;pointer-events:none}.pad{display:grid;justify-items:center}.pad>div{display:flex;gap:5px}.pad button,#sprayBtn{pointer-events:auto;touch-action:none;color:#fff;border:1px solid #ffffff6b;background:#17283fbb;backdrop-filter:blur(8px);box-shadow:0 5px 15px #0005}.pad button{width:52px;height:52px;border-radius:12px;font-size:21px;margin:2px}#sprayBtn{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#3cb8ddbc,#21678fbf);font-family:'Barlow Condensed',sans-serif;font-size:18px;line-height:1.1;font-weight:900}.pad button:active,#sprayBtn:active{background:#f26749}@keyframes pulse{50%{opacity:.4;box-shadow:0 0 20px #ff664a}}@media(max-width:800px){.topbar{padding:15px;height:62px}.brand{font-size:18px}.brand-icon{width:29px;height:29px;font-size:23px}.mission-pill{font-size:8px;padding:8px}.left-panel{left:10px;top:74px;width:200px;padding:12px}.left-panel h1{font-size:26px}.left-panel p,.tip,.meters{display:none}.stat-grid{margin-top:12px;gap:4px}.stat{padding:7px 4px}.stat strong{font-size:17px}.stat small{font-size:6px}.stat-icon{font-size:13px}.right-panel{right:10px;top:74px;width:125px;padding:7px}.map-title{font-size:7px;padding-bottom:5px}#minimap{width:109px;height:109px}.map-key{display:none}.controls-hint{display:none}#mobileControls{display:flex}.action-prompt{bottom:130px;font-size:10px;white-space:nowrap}.overlay-card{padding:27px 20px}.overlay-note{font-size:10px}}@media(max-height:600px){.left-panel{top:70px}.right-panel{top:70px}.controls-hint{bottom:12px}.overlay-card{padding:18px}.hero-emblem{margin:10px auto;width:52px;height:52px;font-size:35px}.overlay-card h2{margin:10px}.overlay-card p{margin-bottom:12px}}
