:root {
  --bg: #07051a;
  --foam: #f4fbff;
  --muted: #9aa4c7;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(1200px 800px at 50% 0%, #1a1050 0%, var(--bg) 55%, #04030d 100%);
  color: var(--foam);
  font-family: ui-rounded, "Trebuchet MS", "Segoe UI", "Avenir Next", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  touch-action: manipulation;
}
#wrap {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game, #game canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #07051a;
  z-index: 5;
  font-size: 22px;
  letter-spacing: 0.04em;
}
#loading.gone { display: none; }
.load-lob {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fff 3px, transparent 4px),
    radial-gradient(circle at 62% 32%, #fff 3px, transparent 4px),
    linear-gradient(160deg, #f07a6a, #d94a3d);
  box-shadow: 0 8px 0 #9b2e26, 0 0 40px rgba(232, 93, 76, 0.45);
  animation: bob 1s ease-in-out infinite;
}
.bar {
  width: min(280px, 70vw);
  height: 14px;
  border-radius: 99px;
  background: #1b1840;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #3a3470;
}
#load-bar {
  display: block;
  height: 100%;
  width: 8%;
  background: linear-gradient(90deg, #ff7a3d, #ffd36a);
  border-radius: 99px;
  transition: width 0.2s;
}
@keyframes bob {
  50% { transform: translateY(-8px); }
}