/* Lizark Player hosted demo — click-to-play gate.
 * Covers the empty viewer until the user chooses to load the player, so the
 * ~11 MB model and the WebGL runtime are only downloaded on a real click.
 */
.play-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(23, 32, 64, .42) 0, rgba(12, 17, 34, .68) 62%),
    linear-gradient(160deg, #1a2233, #0f1420);
}

.play-gate__card {
  display: grid;
  place-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 34px 40px 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.play-gate__card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .32);
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}

.play-gate__card:active { transform: translateY(0) scale(.98); }
.play-gate__card:focus-visible { outline: 3px solid rgba(120, 162, 255, .7); outline-offset: 4px; }

.play-gate__icon {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(22, 48, 120, .5);
}

.play-gate__label {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .01em;
}

.play-gate__sub {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  max-width: 26ch;
}

/* Spin the icon while the player is downloading so the click reads as busy. */
.play-gate.is-loading .play-gate__icon { animation: pg-spin 1.4s ease-in-out infinite; }
.play-gate.is-loading .play-gate__card { cursor: default; }

@keyframes pg-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .play-gate__card { padding: 26px 24px 22px; }
  .play-gate__icon { width: 78px; height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-gate.is-loading .play-gate__icon { animation: none; }
  .play-gate__card { transition: none; }
}