html, body { margin: 0; padding: 0; height: 100%; background: #10141f; overflow: hidden; }
#canvas { display: block; width: 100vw; height: 100vh; outline: none; touch-action: none; image-rendering: pixelated; }
#boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: radial-gradient(circle at 50% 35%, #2a3666, #10141f 70%); color: #f4ead0;
  font: 16px/1.4 "Trebuchet MS", system-ui, sans-serif; transition: opacity .5s; z-index: 2; padding: 16px; text-align: center; }
#boot.done { opacity: 0; pointer-events: none; }
#boot-logo { width: min(520px, 85vw); image-rendering: pixelated; }
#boot-bar { width: min(420px, 80vw); height: 14px; border: 3px solid #f8d048; border-radius: 4px; background: #222b4a; overflow: hidden; }
#boot-fill { width: 0; height: 100%; background: linear-gradient(90deg, #48c070, #8be07a); transition: width .2s; }
#boot-back { color: #f8d048; text-decoration: none; font-size: 14px; }