*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#29315f,#090d18 50%);color:#fff;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center}.app{width:min(100%,760px);padding:10px}header{display:flex;justify-content:space-between;align-items:center;padding:8px 2px}header span{display:block;color:#aeb7cf;font-size:12px;margin-top:2px}header button{background:#1b2440;color:white;border:1px solid #ffffff20;border-radius:12px;width:42px;height:42px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.hud div{background:#ffffff0d;border:1px solid #ffffff14;border-radius:13px;padding:8px;text-align:center;color:#aeb7cf;font-size:10px;text-transform:uppercase}.hud b{display:block;color:#fff;font-size:18px;margin-top:3px}.bar{height:12px;background:#0d1324;border-radius:20px;overflow:hidden;margin:10px 0;position:relative}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4de4a4,#48d6ff);transition:.2s}.bar span{position:absolute;right:8px;top:-1px;font-size:9px;z-index:2;color:#fff}main{position:relative;border-radius:20px;overflow:hidden;border:1px solid #ffffff18;box-shadow:0 18px 50px #0008}canvas{display:block;width:100%;height:auto;background:linear-gradient(#182442,#0a0f1e);touch-action:none}.overlay{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:#050914c9;backdrop-filter:blur(7px);padding:20px}.overlay.show{display:flex}.card{background:linear-gradient(#222d50,#11182d);border:1px solid #ffffff1c;border-radius:22px;padding:28px;text-align:center;max-width:480px}.card p{color:#aeb7cf;line-height:1.5}.card button{border:0;border-radius:15px;background:linear-gradient(135deg,#ffd54a,#ffab43);padding:14px 24px;font-weight:800;color:#12151e}footer{text-align:center;color:#8f9ab6;font-size:11px;padding:10px}