/* The play page (demo spec 5.2): its top bar, the frame round the game, the aside and the panels.
   Only .demo classes and rules scoped under them: the game's own UI keeps its own look. The site's
   colours, repeated; the game's bundle brings the two fonts. */
body.demo {
  --demo-ink: #1b1a2e;
  --demo-ink-5: #5c5980;
  --demo-paper: #fffaf0;
  --demo-dot: #ecdcbc;
  --demo-coral: #ff6b4a;
  --demo-sun: #ffd166;
  --demo-focus: #2f6bff;
  --demo-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --demo-body: 'Nunito', system-ui, sans-serif;
  --demo-lift: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--demo-paper);
  background-image: radial-gradient(var(--demo-dot) 1.3px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--demo-ink);
  font: 400 16px/1.5 var(--demo-body);
}
.demo-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.demo-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0
    max(12px, env(safe-area-inset-left));
}
.demo-back {
  min-width: 0;
  overflow: hidden;
  color: var(--demo-ink);
  font: 700 15px/1.2 var(--demo-body);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-back:hover {
  text-decoration: underline;
}
.demo-chip {
  flex: 0 0 auto;
  padding: 2px 10px;
  border: 2px solid var(--demo-ink);
  border-radius: 999px;
  background: var(--demo-sun);
  font: 600 13px/1.4 var(--demo-display);
}
.demo-get-link,
.demo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2.5px solid var(--demo-ink);
  border-radius: 999px;
  background: var(--demo-coral);
  box-shadow: 0 3px 0 var(--demo-ink);
  color: var(--demo-ink);
  font: 600 16px/1 var(--demo-display);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--demo-lift),
    box-shadow var(--demo-lift);
}
.demo-button--quiet {
  background: #fff;
}
.demo-get-link {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.demo-get-link:hover,
.demo-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--demo-ink);
}
.demo-get-link:active,
.demo-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--demo-ink);
}
body.demo :focus-visible {
  outline: 3px solid var(--demo-focus);
  outline-offset: 2px;
}
.demo-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
.demo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--demo-bg);
}
.demo-frame > #app {
  position: relative;
  width: 100%;
  height: 100%;
}
/* The key art while the game loads; the game's stage covers it, and the script hides it. */
.demo-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}
.demo-poster-art {
  width: 100%;
  max-width: 340px;
  height: auto;
}
/* The shell's backdrop fills the window in the lab and the apps; here it fills the frame, so the
   top bar and the aside stay reachable. */
.demo-frame .gl-backdrop {
  position: absolute;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.demo-aside {
  display: none;
}
.demo-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(21, 20, 37, 0.55);
  animation: demo-in 300ms ease-out both;
}
@keyframes demo-in {
  from {
    opacity: 0;
  }
}
.demo-card {
  width: 100%;
  max-width: 340px;
  padding: 22px 20px;
  border: 3px solid var(--demo-ink);
  border-radius: 22px;
  background: var(--demo-paper);
  box-shadow: 0 5px 0 var(--demo-ink);
  text-align: center;
}
.demo-card h2 {
  margin: 0 0 8px;
  font: 600 24px/1.15 var(--demo-display);
}
.demo-card h2:focus {
  outline: none;
}
.demo-card p {
  margin: 0 0 14px;
}
.demo-fine {
  color: var(--demo-ink-5);
  font-size: 13.5px;
}
.demo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.demo-link {
  color: var(--demo-ink);
  font-weight: 700;
}
.demo-card .stores,
.demo-aside .stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.demo-card .badge img,
.demo-aside .badge img {
  display: block;
}
.demo-card .soon,
.demo-aside .soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 2px dashed #8e8ab0;
  border-radius: 12px;
  background: #fff;
  color: var(--demo-ink-5);
  font: 700 13px/1 var(--demo-body);
}
/* The site's sign-up form (tools/site/sign-up.ts), drawn as site.css draws it. */
.demo-card .sign-up {
  position: relative;
  margin: 4px 0 12px;
  text-align: left;
}
.demo-card .sign-up label {
  display: block;
  margin-bottom: 8px;
  font: 700 15px/1.3 var(--demo-body);
}
.demo-card .sign-up-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.demo-card .sign-up input[type='email'] {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 2.5px solid var(--demo-ink);
  border-radius: 14px;
  background: #fff;
  color: var(--demo-ink);
  font: 700 16px/1 var(--demo-body);
}
.demo-card .sign-up-button {
  flex: 1 1 100%;
  min-height: 48px;
  padding: 0 22px;
  border: 2.5px solid var(--demo-ink);
  border-radius: 999px;
  background: var(--demo-coral);
  box-shadow: 0 3px 0 var(--demo-ink);
  color: var(--demo-ink);
  font: 600 18px/1 var(--demo-display);
  cursor: pointer;
}
.demo-card .sign-up-note {
  margin: 10px 0 0;
  color: var(--demo-ink-5);
  font: 700 13px/1.45 var(--demo-body);
}
.demo-card .sign-up-note a {
  color: var(--demo-ink);
  white-space: nowrap;
}
.demo-card .trap {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
/* The stage needs about 522 px of height for 44 px controls (src/shell/stage.ts). On a short
   screen the bar gives its room to the game; the game's Shop button still opens the get-the-app
   panel, and the aside (on a desktop) still leads back to the game's page. */
@media (max-height: 580px) {
  .demo-bar {
    display: none;
  }
}
@media (min-width: 900px) {
  .demo-stage {
    padding: 24px;
  }
  .demo-frame {
    box-sizing: content-box;
    width: auto;
    height: min(calc(100% - 20px), 840px);
    aspect-ratio: 9 / 16;
    border: 10px solid #fff;
    border-radius: 28px;
    box-shadow:
      0 6px 0 rgba(27, 26, 46, 0.12),
      0 18px 40px rgba(27, 26, 46, 0.18);
  }
  .demo-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 280px;
  }
  .demo-aside .stores {
    justify-content: flex-start;
    margin: 0;
  }
  .demo-aside-name {
    margin: 0;
    font: 600 30px/1.1 var(--demo-display);
  }
  .demo-aside-name a {
    color: inherit;
    text-decoration: none;
  }
  .demo-aside-name a:hover {
    text-decoration: underline;
  }
  .demo-aside p {
    margin: 0;
  }
  .demo-qr {
    margin: 8px 0 0;
  }
  .demo-qr img {
    display: block;
    width: 148px;
    height: 148px;
    border: 3px solid var(--demo-ink);
    border-radius: 14px;
  }
  .demo-qr figcaption {
    margin-top: 8px;
    color: var(--demo-ink-5);
    font: 700 14px/1.3 var(--demo-body);
  }
}
@media (min-width: 900px) and (max-height: 660px) {
  .demo-bar {
    display: none;
  }
  .demo-stage {
    padding: 12px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-panel {
    animation: none;
  }
  .demo-get-link,
  .demo-button {
    transition: none;
  }
  .demo-get-link:hover,
  .demo-button:hover {
    transform: none;
  }
}

/* Each game's frame (apps/<slug>/app.json backgroundColor) */
.look-charm-blocks { --demo-bg: #120f27; --top: #161233; --bottom: #07061a; }
.look-shiny-catch { --demo-bg: #2f6f9f; --top: #bfe6ff; --bottom: #e8f7ff; }
.look-the-last-thing { --demo-bg: #151425; --top: #fbeedd; --bottom: #f1d6b8; }