html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: none;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
#tank {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#tank.shake { animation: shake 0.35s linear infinite; }
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-0.6vw, 0.3vw); }
  50% { transform: translate(0.5vw, -0.4vw); }
  75% { transform: translate(-0.3vw, -0.2vw); }
  100% { transform: translate(0, 0); }
}
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#cracks { pointer-events: none; }

#qr {
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  width: 24vw;
  padding: 1.6vw;
  border-radius: 2.4vw;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.6vw 3vw rgba(0, 20, 40, 0.45);
  text-align: center;
  color: #04263a;
}
#qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr-title { font-size: 3.4vw; font-weight: 700; margin-bottom: 0.8vw; }
.qr-sub { font-size: 1.9vw; margin-top: 0.8vw; line-height: 1.2; }

#toast {
  position: absolute;
  left: 3vw;
  right: 33vw;
  bottom: 6vw;
  font-size: 3.2vw;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(2vw);
  transition: opacity 0.5s, transform 0.5s;
}
#toast.show { opacity: 1; transform: none; }

#fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease-in;
}
#fade.dark { opacity: 1; }
#fade.instant { transition: none; }
#fade.out { transition: opacity 1.8s ease-out; }

#offline {
  position: absolute;
  top: 2vw;
  left: 2vw;
  font-size: 2vw;
  color: rgba(255, 255, 255, 0.7);
  display: none;
}
#offline.show { display: block; }