html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0c15; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  color: #c3bfd0; font: 14px/1.4 Inter, system-ui, sans-serif; pointer-events: none; background: radial-gradient(60% 50% at 50% 42%, #221c3d 0%, #0d0c15 72%); }
#loading img { width: 76px; height: 76px; border-radius: 22px; box-shadow: 0 12px 40px rgba(101, 82, 255, .35); }
#loading .name { font-size: 17px; font-weight: 600; color: #fff; } #loading .name b { color: #ff6fa8; }
#loading .bar { width: 200px; height: 4px; border-radius: 4px; background: #ffffff14; overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #6552ff, #9a67f5, #ff6fa8); transition: width .2s; }
#loading .err { color: #ff8a7a; white-space: pre-wrap; max-width: 70ch; pointer-events: auto; }
#device-lost { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 16px;
  text-align: center; background: rgb(13 12 21 / 0.88); color: #c3bfd0; font: 14px/1.4 Inter, system-ui, sans-serif; }
#device-lost strong { color: #f7f6fb; font-size: 16px; } #device-lost p { margin: 0; max-width: 60ch; } #device-lost small { color: #8f8a9e; font-size: 12px; }
#device-lost div { display: flex; gap: 8px; }
#device-lost button { padding: 6px 14px; border: 1px solid #342f4c; border-radius: 8px; background: #1d1b2a; color: #f7f6fb; font: inherit; cursor: pointer; }
#device-lost button:hover { background: #252238; }
#device-lost button:last-child { background: #6552ff; border-color: #6552ff; } #device-lost button:last-child:hover { background: #7a6aff; }
#device-lost button:disabled { opacity: 0.6; cursor: default; }