/* Unity WebGL player — only what Bootstrap can't do */

/* Default colors; the macro's color arguments override these on the player itself */
.unity-player {
  --unity-btn-bg: #ffc107;
  --unity-btn-color: #000;
  --unity-bar: linear-gradient(to right, #ffc107, #fd7e14);
  --unity-bar-track: var(--bs-secondary-bg);
}

/* Play button: feed the colors into Bootstrap's own button variables */
.unity-player .unity-play-btn {
  --bs-btn-color: var(--unity-btn-color);
  --bs-btn-bg: var(--unity-btn-bg);
  --bs-btn-border-color: var(--unity-btn-bg);
  --bs-btn-hover-color: var(--unity-btn-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--unity-btn-bg) 85%, #fff);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--unity-btn-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--unity-btn-bg) 85%, #000);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
}
.unity-player .unity-play-btn:focus-visible {
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--unity-btn-bg) 50%, transparent);
}

/* Loading bar: the gradient spans the whole track, so it reveals left to right as it fills */
.unity-player .unity-progress {
  --bs-progress-bg: var(--unity-bar-track);
  container-type: inline-size; /* lets the bar size its gradient to the track (100cqw) */
}
.unity-player .unity-progress .progress-bar {
  background-color: transparent;
  background-image: var(--unity-bar);
  background-size: 100cqw 100%;
  background-repeat: no-repeat;
}
.unity-player .unity-progress .progress-bar-striped {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,
                    rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent),
    var(--unity-bar);
  background-size: var(--bs-progress-height) var(--bs-progress-height), 100cqw 100%;
  background-repeat: repeat, no-repeat;
}
/* Move only the stripes, not the gradient underneath */
@media (prefers-reduced-motion: no-preference) {
  .unity-player .unity-progress .progress-bar-animated {
    animation: unity-progress-stripes 1s linear infinite;
  }
}
@keyframes unity-progress-stripes {
  from { background-position: var(--bs-progress-height) 0, 0 0; }
  to   { background-position: 0 0, 0 0; }
}

.unity-player canvas[data-pixel-art="true"] {
  image-rendering: pixelated;
}

/* Fullscreen (real Fullscreen API, or the fixed-position fallback for iPhone) */
.unity-player:fullscreen,
.unity-player.unity-pseudo-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.unity-player.unity-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1080;
}

/* <main> is z-1 like the footer, so lift it while the fallback is active,
   otherwise the footer paints over the "fullscreen" game */
main:has(.unity-pseudo-fullscreen) {
  z-index: 1080 !important;
}

/* Letterbox: largest box with the game's aspect ratio that fits the screen */
.unity-player:fullscreen > .ratio,
.unity-player.unity-pseudo-fullscreen > .ratio {
  width: min(100vw, calc(100dvh * var(--unity-aspect)));
}