/* "Play here" on the Choices phone (homepage hero and /games/ hero), driven by
   js/play-embed.js. Below 734px, and without JS, a "Play Choices" link to the full
   game shows instead of the button. Both are secondary (outlined, not amber):
   Get started stays the one amber button in the hero. Play here is a 44px pill centred on the
   phone's bottom edge, so it never sits over the screenshot's text. While playing, the laptop
   steps aside and the phone grows to a playable size with Open full screen and
   Close below it. */

.play-embed-play, .play-embed-link {
  position:absolute; left:50%; top:100%; z-index:1; transform:translate(-50%, -50%);
  align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 16px; border:1px solid var(--tile-hairline); border-radius:var(--radius-pill);
  background:var(--v-ink); color:var(--v-paper); border-color:rgba(243,239,230,0.28);
  font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1.2; white-space:nowrap; text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  transition:background-color 0.2s ease;
}
.play-embed-play:hover, .play-embed-link:hover { background:var(--v-ink); border-color:var(--v-amber); }
.play-embed-icon { width:12px; height:12px; flex:none; fill:currentColor; }

/* The phone's 2px metal band (tiles.css) sits outside the box the pill is placed in;
   step past it so the pill stays centred on the phone's outer edge. */
.play-embed-phone > .play-embed-play { top:calc(100% + 2px); }

/* Half of each pill hangs below the phone; keep that clear of the next section. */
.device-cluster[data-play-embed] { margin-bottom:56px; }

/* Fallback link (no JS at 734px+): right-aligned on the cluster's bottom edge. */
.play-embed-link { display:inline-flex; left:auto; right:0; transform:translateY(-50%); padding:0 12px; }

/* Phones: the phone graphic is too small to carry a control, so "Play Choices"
   is a plain pill centred under the devices, clear of both. */
@media (max-width: 733px) {
  .device-cluster[data-play-embed] { margin-bottom:32px; }
  /* The pill (12px gap + 44px, one line) flows under the laptop; the phone
     stays level with the laptop's base above it. */
  .device-cluster[data-play-embed] > .play-embed-phone { bottom:56px; }
  .play-embed-link { position:static; display:flex; width:fit-content; max-width:280px; margin:12px auto 0; padding:0 20px; transform:none; }
}

/* The in-page button. */
.play-embed-play { display:none; cursor:pointer; }
@media (min-width: 734px) {
  .js .play-embed-play { display:inline-flex; }
  .js .play-embed-link { display:none; }
}

.play-embed-controls { display:flex; align-items:center; justify-content:center; gap:28px; }
.play-embed-controls[hidden] { display:none; }
.play-embed-close {
  min-height:44px; padding:0 22px; border:1px solid var(--tile-hairline); border-radius:var(--radius-pill);
  background:transparent; color:var(--tile-fg);
  font-family:var(--font-body); font-size:17px; font-weight:500; cursor:pointer;
  transition:background-color 0.2s ease;
}
.play-embed-close:hover { background:var(--tile-card); }

/* Playing: the phone's screen is sized so the phone and its controls fit under the
   sticky header (html scroll-padding-top, tiles.css), at most a 390 x 844 phone. */
.device-cluster.is-playing { display:flex; flex-direction:column; align-items:center; gap:24px; padding-right:0; scroll-margin:8px 0 24px; }
.device-cluster.is-playing > .device-laptop,
.is-playing .play-embed-play, .is-playing .play-embed-link { display:none; }
.device-cluster.is-playing > .play-embed-phone {
  position:relative; right:auto; bottom:auto;
  width:calc(max(420px, min(844px, 100svh - 220px)) * 780 / 1688 + 20px); max-width:100%;
  padding:8px; border-width:2px; border-radius:36px;
  animation:play-embed-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.device-cluster.is-playing > .play-embed-phone > .device-screen { position:relative; border-radius:27px; }
/* No glass sheen over a game being played. */
.device-cluster.is-playing > .play-embed-phone > .device-screen::after { display:none; }
.play-embed-frame {
  position:absolute; inset:0; width:100%; height:100%; border:0;
  background:var(--color-bg); opacity:0; transition:opacity 0.3s ease;
}
.is-loaded .play-embed-frame { opacity:1; }

@keyframes play-embed-in { from { opacity:0; transform:scale(0.92); } }

@media (prefers-reduced-motion: reduce) {
  .device-cluster.is-playing > .play-embed-phone { animation:none; }
  .play-embed-frame, .play-embed-play, .play-embed-link, .play-embed-close { transition:none; }
}