:root {
  --loading-bg: #282828;
  --loading-logo-size: 210px;
  --loading-logo-shimmer-duration: 3s;
  --loading-logo-light-rgb: 60, 60, 60;
  --loading-logo-light-opacity: 0.85;
  --loading-logo-base-brightness: 0.35;
  color-scheme: light;
}
html, body { color-scheme: light; forced-color-adjust: none; }
body { padding: 0; margin: 0; background: var(--loading-bg); }
#game-container { position: fixed; width: 100%; height: 100%; background: var(--loading-bg); color-scheme: light; forced-color-adjust: none; }
#game-canvas { width: 100%; height: 100%; background: var(--loading-bg); }
#game-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 150px;
  box-sizing: border-box;
}
#game-loading-logo {
  position: relative;
  width: var(--loading-logo-size);
  height: var(--loading-logo-size);
  background: url('logo.png') no-repeat center / contain;
  filter: grayscale(1) brightness(var(--loading-logo-base-brightness));
  color-scheme: light;
  forced-color-adjust: none;
}
@supports ((-webkit-mask: url("logo.png")) or (mask: url("logo.png"))) {
  #game-loading-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(var(--loading-logo-light-rgb), var(--loading-logo-light-opacity)) 50%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 240% 240%;
    animation: loadingLogoShimmer var(--loading-logo-shimmer-duration) linear infinite;
    -webkit-mask: url('logo.png') no-repeat center / contain;
    mask: url('logo.png') no-repeat center / contain;
  }
}
@keyframes loadingLogoShimmer {
  0% { background-position: 90% 90%; }
  100% { background-position: -90% -90%; }
}
#game-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }