*{box-sizing:border-box}html,body{margin:0;background:#05040b;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden;touch-action:none}#shell{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.777vw);margin:auto;overflow:hidden;background:#090513}canvas{width:100%;height:100%;display:block}#top{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 10px;background:linear-gradient(#05020de8,#05020d00);font-size:clamp(9px,2.3vw,15px);text-shadow:0 0 9px #000}#top strong{font-size:22px;letter-spacing:2px}#top small{display:block;letter-spacing:2px;font-size:9px}.health{background:#75031d;padding:8px;border:1px solid #ff5470;border-radius:7px}#pause{background:#131321bb;border:1px solid #eee;color:white;border-radius:8px;font-size:21px}#controls{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:10px;right:10px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}button{cursor:pointer;color:white;touch-action:none}#controls button{pointer-events:auto;background:#10152da8;border:2px solid #9edbffbb;border-radius:50%;font-weight:bold;font-size:23px;width:57px;height:57px;box-shadow:0 0 15px #0ab6ff44}#pad{display:flex;align-items:end;gap:5px}#pad #jump{border-color:#e0b4ff;background:#32104dba}#actions{display:flex;align-items:end;gap:8px}#actions #fire{width:77px;height:77px;border-color:#ff3b67;background:#50091dbb;font-size:40px;box-shadow:0 0 19px #ff003a99}#overlay{position:absolute;inset:0;background:#060410d9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}#overlay h1{font-size:clamp(44px,12vw,80px);line-height:.9;text-shadow:0 0 25px #ff226d}#overlay em{font-size:.45em;font-style:normal;letter-spacing:6px}#overlay p{font-size:14px;max-width:290px}#start{background:linear-gradient(90deg,#df1249,#8122c9);border:2px solid #ff8bb6;border-radius:12px;padding:16px 34px;font-weight:bold;font-size:20px;margin:20px}#overlay small{opacity:.65}

#actions #grenade{width:57px;height:57px;border-color:#ffc76c;background:#59350cba;font-size:25px}

#overlay .brand-logo{width:min(75%,350px);max-height:200px;object-fit:contain;filter:drop-shadow(0 0 14px #a9d9ff66)}
#overlay h1{margin:12px 0}