html,
body,
#unity-container {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #88bddb;
}

body {
  touch-action: none;
}

#unity-container {
  position: relative;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #88bddb;
}

#unity-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(20rem, 76vw);
  gap: 0.7rem;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-align: center;
}

#unity-loading[hidden] {
  display: none;
}

#unity-loading strong {
  color: #ffd84d;
  letter-spacing: 0.08em;
}

#unity-loading > div {
  height: 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 17, 31, 0.25);
}

#unity-progress {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #57e48d, #ffd84d);
  transition: width 180ms ease-out;
}

#unity-loading small:not(#unity-loading-detail) {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#unity-progress-value {
  min-width: 3ch;
  color: #ffd84d;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

#unity-loading-detail {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}

#unity-loading[data-state='error'] #unity-progress {
  background: #d94d48;
}

#unity-warning {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.7rem;
  border-radius: 0.7rem;
  background: #ffd84d;
  color: #10212b;
  font: 700 0.9rem system-ui, sans-serif;
  text-align: center;
}

#unity-warning[data-type='error'] {
  background: #d94d48;
  color: #fff;
}

#unity-retry {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 4.5rem;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  transform: translateX(-50%);
  border: 2px solid #ffd84d;
  border-radius: 0.75rem;
  background: #18394a;
  color: #fff;
  font: 800 1rem system-ui, sans-serif;
}

#unity-retry[hidden],
#unity-loading-detail[hidden],
#unity-warning[hidden] {
  display: none;
}