/* The shared entry template owns height and order, including the controls. */
.game-demo { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.game-demo-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--tf-radius-lg); }
.entry-art .game-demo-stage :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-demo [hidden] { display: none !important; }
.game-demo-controls { display: flex; flex: 0 0 44px; align-items: center; gap: var(--tf-space-1); }
.game-demo-controls .tf-button { min-height: 44px; padding-block: 0; font-size: .8rem; }
.game-demo-play { margin-inline-end: auto; gap: var(--tf-space-2); white-space: nowrap; }
.game-demo-play [data-demo-icon] { width: 14px; text-align: center; }
.game-demo-controls .game-demo-icon-button { flex: 0 0 44px; width: 44px; padding: 0; }
.game-demo-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.game-demo:fullscreen { width: 100%; height: 100%; padding: var(--tf-space-2); box-sizing: border-box; background: var(--tf-bg); }
.game-demo:fullscreen .game-demo-controls { justify-content: center; }
.game-demo:fullscreen .game-demo-play { margin-inline-end: 0; }
@media (max-width: 600px) {
  .game-demo-controls .tf-button { font-size: .7rem; }
  .game-demo-controls .game-demo-play { padding-inline: var(--tf-space-2); }
}