/* Game preview bottom sheet: no dim/blur backdrop. */
.s-sheet[data-kind='game-preview'] {
  position: fixed;
  inset: auto 0 0;
  width: var(--layout-width);
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: calc(32 * var(--v)) calc(32 * var(--v)) 0 0;
  overflow: visible;
  background: transparent;
  color: #242424;
  box-shadow: none;
}
.s-sheet[data-kind='game-preview']::backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
}
.s-sheet[data-kind='game-preview'] .s-game-preview-card {
  margin: 0;
  border-radius: calc(32 * var(--v)) calc(32 * var(--v)) 0 0;
  padding: calc(42 * var(--v)) calc(34 * var(--v)) calc(36 * var(--v));
  background: #fff;
  box-shadow: 0 calc(-12 * var(--v)) calc(42 * var(--v)) #0003;
  animation: game-preview-sheet-in .16s cubic-bezier(.2,.82,.28,1) both;
}
@keyframes game-preview-sheet-in {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
.s-sheet[data-kind='game-preview'] .s-game-preview-close {
  top: calc(-34 * var(--v));
  right: calc(26 * var(--v));
  width: calc(72 * var(--v));
  height: calc(72 * var(--v));
  background: #fff;
  color: #6d6d6d;
  box-shadow: 0 2px 10px #0003;
}
.s-sheet[data-kind='game-preview'] .s-game-preview-main {
  grid-template-columns: calc(300 * var(--v)) 1fr;
  gap: calc(34 * var(--v));
  min-height: calc(192 * var(--v));
}
.s-sheet[data-kind='game-preview'] .s-game-preview-art { margin-top: calc(-118 * var(--v)); }
.s-sheet[data-kind='game-preview'] .s-game-preview-actions { margin-top: calc(30 * var(--v)); }

/* In-site iframe player. The provider iframe is preloaded invisibly as soon as
   the preview popup is visible, so Play can reveal an already-loading/ready game. */
html.game-player-open,
body.game-player-open { overflow: hidden !important; }
.design-game-player {
  --player-yellow: #ffd900;
  --player-teal: #007e75;
  --player-deep: #17345b;
  --game-load-progress: 0;
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: min(100%, var(--layout-width, 430px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #000;
  color: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .14s ease;
}
.design-game-player.is-preloaded {
  /* Keep real dimensions so providers can initialize responsively, but do not
     cover or intercept the homepage while the preview popup is open. */
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.design-game-player.is-active { z-index: 10000; }
.design-game-player__bar {
  min-height: 54px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  background: #000;
  border-bottom: 1px solid #007e7566;
}
.design-game-player__back {
  width: 44px;
  height: 44px;
  margin-left: 5px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 42px/1 Arial,sans-serif;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.design-game-player__brand {
  justify-self: center;
  color: #fff;
  font: 800 20px/1 Arial,sans-serif;
  letter-spacing: -.5px;
}
.design-game-player__brand span { color: var(--player-yellow); }
.design-game-player__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
.design-game-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  background: #000;
}
.design-game-player__frame.is-visible {
  opacity: 1;
  visibility: visible;
}
.design-game-player__loader,
.design-game-player__error {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 30px;
  text-align: center;
  background: #000;
}
.design-game-player__loader[hidden],
.design-game-player__error[hidden] { display: none !important; }
.design-game-player__loader > strong {
  margin-top: 22px;
  font: 800 18px/1.2 Arial,sans-serif;
  color: #fff;
}
.design-game-player__loader small {
  margin-top: 8px;
  color: #aebfbd;
  font: 500 12px/1.4 Arial,sans-serif;
}

/* 10-second circular progress. JS drives --game-load-progress from 0→99;
   actual iframe load completes it to 100 and hides the loader immediately. */
.design-game-player__progress {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}
.design-game-player__progress svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.design-game-player__progress circle {
  fill: none;
  stroke-width: 14;
}
.design-game-player__progress-track {
  stroke: var(--player-deep);
}
.design-game-player__progress-value {
  stroke: var(--player-yellow);
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--game-load-progress));
  transition: stroke-dashoffset .08s linear;
  filter: drop-shadow(0 0 2px #ffd90055);
}
.design-game-player__progress::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 3px solid #fff;
  pointer-events: none;
}
.design-game-player__percent {
  position: relative;
  z-index: 2;
  font: 900 23px/1 Arial,sans-serif;
  color: #fff;
}
.design-game-player__error strong { font:800 20px/1.25 Arial,sans-serif; }
.design-game-player__error p { max-width:280px; margin:10px 0 22px; color:#b9c8c7; font:500 13px/1.45 Arial,sans-serif; }
.design-game-player__error button {
  min-width: 150px;
  min-height: 44px;
  border: 1px solid #007e75;
  border-radius: 10px;
  background: var(--player-yellow);
  color: #171400;
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .s-sheet[data-kind='game-preview'] .s-game-preview-card,
  .design-game-player { animation: none !important; transition: none !important; }
  .design-game-player__progress-value { transition: none !important; }
}

.s-game-art,.s-game-label,.s-game-preview-play{touch-action:manipulation;}