html.pcg-loading .game-embed-wrap,
html.pcg-loading .game-shell {
  background: #000;
}

html.pcg-loading canvas {
  visibility: hidden;
}

.pcg-loading-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  background: #000;
  color: #fff3d7;
  font: 16px/1.4 Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  opacity: 1;
  transition: opacity 220ms ease;
}

.pcg-loading-screen.is-leaving { opacity: 0; }
.pcg-loading-screen .pcg-loading-title {
  max-width: 100%;
  margin: 0 0 12px;
  color: #ff3b18;
  font: 900 32px/1.15 Arial, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.pcg-loading-status { margin: 0; font: 700 18px/1.4 Arial, sans-serif; }
.pcg-loading-meter { width: 72%; max-width: 400px; }
.pcg-loading-progress {
  display: block;
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid #d6ccbc;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #292929;
}
.pcg-loading-progress::-webkit-progress-bar { background: #292929; }
.pcg-loading-progress::-webkit-progress-value { background: linear-gradient(90deg, #ff2a12, #ff9f1c, #ffe066); }
.pcg-loading-progress::-moz-progress-bar { background: linear-gradient(90deg, #ff2a12, #ff9f1c, #ffe066); }
.pcg-loading-percent { display: block; margin-top: 12px; font: 15px/1.4 Arial, sans-serif; }
.pcg-loading-screen .pcg-loading-retry {
  padding: 8px 20px;
  border: 2px solid #fff3d7;
  border-radius: 4px;
  background: #000;
  color: #fff3d7;
  font: 700 16px/1.4 Arial, sans-serif;
  cursor: pointer;
}
.pcg-loading-retry[hidden] { display: none; }
.pcg-loading-retry:focus-visible { outline: 3px solid #ff9f1c; outline-offset: 4px; }

@media (max-width: 480px), (max-height: 450px) {
  .pcg-loading-screen { gap: 8px; padding: 12px; }
  .pcg-loading-screen .pcg-loading-title { font-size: 18px; margin-bottom: 0; }
  .pcg-loading-status { font-size: 13px; }
  .pcg-loading-progress { height: 14px; }
  .pcg-loading-percent { margin-top: 4px; font-size: 12px; }
  .pcg-loading-screen .pcg-loading-retry { padding: 4px 16px; font-size: 14px; }
  .pcg-loading-screen:has(.pcg-loading-retry:not([hidden])) .pcg-loading-title { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcg-loading-screen { transition: none; }
}