/* /play, Episode 1's own page (Kyle, 29 Oct; docs/plans/how-it-works-episode-1-2026-10-29.md, decision 1): a bar back
   to the benchmark, as the whitepaper's page has (whitepaper.css), over Episode 1's section as it stood on the home
   page, in the home page's own styles. */
.play-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;min-height:var(--fx-nav);padding:8px var(--fx-margin);background:rgba(20,20,20,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--fx-hair-strong)}
.play-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:400 12px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--fx-ink);text-decoration:none;transition:color .2s}
.play-back::before{content:"";flex:none;width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.play-back:hover{color:#fff}
.play-back:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
/* The section fills the window under the bar, so the footer never rides up a short page. */
.play .ov{min-height:calc(100vh - var(--fx-nav))}
@media(max-width:640px){
  .play-bar{padding:8px 16px}
  .play-back{font-size:10px;letter-spacing:1.2px}
}