html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #fff; }
body { overscroll-behavior: none; }
#game { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; cursor: grab; outline: none; }
#game:active { cursor: grabbing; }
#game:focus-visible { outline: 3px solid #4b90c6; outline-offset: -3px; }

#fallback { position: fixed; inset: 0; overflow: hidden; background: #fff; pointer-events: none; }
.fallback-board { position: absolute; right: 0; top: 21%; width: 33%; height: 58%; background: url('./wojak-reference.jpg') right center / 303% auto no-repeat; }
.fallback-block { position: absolute; top: 43%; width: min(7vw, 76px); height: min(7vw, 76px); background: #080808; }
.fallback-block.circle { left: 53%; border-radius: 50%; }
.fallback-block.triangle { left: 62%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fallback-block.square { left: 72%; transform: rotate(-12deg); }
#game { position: relative; z-index: 1; }
body.running #fallback { display: none; }

@media (max-width: 600px) and (orientation: portrait) {
  .fallback-board { width: 70%; height: 70%; top: 15%; }
  .fallback-block { top: 41%; width: 15vw; height: 15vw; }
  .fallback-block.circle { left: 9%; }
  .fallback-block.triangle { left: 28%; }
  .fallback-block.square { left: 48%; }
}