:root {
  --yt-game-width: min(100vw, 56.25vh);
  --yt-game-height: min(100vh, 177.77777778vw);
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #000000;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

#unity-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #000000;
}

#unity-canvas {
  width: var(--yt-game-width) !important;
  height: var(--yt-game-height) !important;
  aspect-ratio: 9 / 16;
  display: block;
  outline: none;
  touch-action: none;
  background: #1F1F20;
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; width: var(--yt-game-width); max-width: min(100vw, 360px); transform: translate(-50%, -50%); display: none; text-align: center; color: #ffffff; font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); pointer-events: none; }
#unity-loading-text { margin-top: 0; }
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: max(12px, calc((100vh - var(--yt-game-height)) / 2 + 12px)); width: min(var(--yt-game-width), calc(100vw - 24px)); transform: translateX(-50%); background: white; padding: 10px; display: none; box-sizing: border-box; }
