/* Become a Realtor: the shell (2026-10-18). Hub street + stage + HUD + overlays. Everything is
   prefixed play- or ztr-zach. Site tokens only (styles.css loads first). The stage is a 400 x 600
   logical box scaled with transform; overlays sit over it unscaled so text stays readable. */

.play-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.play-page [hidden] { display: none !important; }

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
/* The site's guide hero is near-black, so every line here is cream or sage-light; the top padding
   clears the fixed 72 px header so the breadcrumb shows. */
.play-hero { padding: 96px 0 30px; text-align: center; }
.play-hero .area-breadcrumb { justify-content: center; margin-bottom: 16px; }
.play-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-light); }
.guide-hero h1.play-h1 { max-width: none; margin: 0 auto; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height: 1.05; color: var(--color-cream); }
.play-sub { margin: 8px 0 0; font-family: var(--font-serif); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); color: var(--color-gold-light); }
.play-lede { max-width: 52ch; margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: rgba(247, 248, 246, .8); }
@media (max-width: 640px) {
  .play-hero { padding: 86px 0 20px; }
  .play-hero .area-breadcrumb { margin-bottom: 12px; font-size: 12px; }
  .play-kicker { display: none; }
  .play-lede { font-size: 15px; line-height: 1.5; }
}
@media (min-width: 900px) { .play-hero { padding: 108px 0 30px; } }

/* ── the street ───────────────────────────────────────────────────────────────────────────
   Two rows of three on phones and tablets, one row of six on a wide screen; never a sideways
   scroll. Every height below is fixed by the custom properties, so the six placeholders in
   play.html take exactly the room the drawn houses will (no layout shift while engine.js draws).
   The sky, lawn, sidewalk and road are one background on the whole street, repeated once per
   row, so the ground runs edge to edge without a seam between houses. */
.play-street-wrap {
  --cols: 3;
  --house-w: clamp(76px, 22vw, 96px);
  --house-h: calc(var(--house-w) * 214 / 166);
  --sky: 8px; --lawn: 22px; --walk: 8px; --curb: 3px; --road: 14px;
  --sign-w: 36px;
  --label-h: 72px;
  --ground: calc(var(--lawn) + var(--walk) + var(--curb) + var(--road));
  --lawn-top: calc(var(--sky) + var(--house-h) - 3px);
  --scene-h: calc(var(--lawn-top) + var(--ground));
  --row-h: calc(var(--scene-h) + var(--label-h));
  position: relative; margin: 0; padding: 14px 0 8px; background: var(--color-cream);
}
.play-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.play-bar-zach { flex: none; width: 44px; height: 53px; }
.play-bar-zach .ztr-zach { display: block; }
.play-bar-text { min-width: 0; text-align: left; }
.play-bar-title { margin: 0; font-size: 1.3rem; line-height: 1.15; color: var(--color-brown); }
.play-click { display: none; }
@media (hover: hover) and (pointer: fine) { .play-tap { display: none; } .play-click { display: inline; } }
.play-progress { min-height: 1.4em; margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--color-text-light); }
.play-progress strong { color: var(--color-brown); }
.play-street {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row-h);
  margin: 0; padding: 0 max(4px, calc((100% - 1320px) / 2)); list-style: none;
  background: linear-gradient(to bottom,
    #E9EBE4 0 calc(var(--lawn-top) - 5px),
    #A9B8A1 calc(var(--lawn-top) - 5px) var(--lawn-top),
    #94AC89 var(--lawn-top) calc(var(--lawn-top) + var(--lawn)),
    #E4E5DF calc(var(--lawn-top) + var(--lawn)) calc(var(--lawn-top) + var(--lawn) + var(--walk)),
    #C9CBC4 calc(var(--lawn-top) + var(--lawn) + var(--walk)) calc(var(--lawn-top) + var(--lawn) + var(--walk) + var(--curb)),
    #3B403B calc(var(--lawn-top) + var(--lawn) + var(--walk) + var(--curb)) var(--scene-h),
    var(--color-cream) var(--scene-h) 100%) 0 0 / 100% var(--row-h) repeat-y;
}
.play-slot { display: flex; min-width: 0; margin: 0; padding: 0; }
.play-lot { position: relative; flex: 1; display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.play-lot--skel { cursor: default; }
.play-scene { position: relative; flex: none; display: block; height: var(--scene-h); }
.play-house { position: absolute; left: 50%; bottom: calc(var(--ground) - 3px); width: var(--house-w); margin-left: calc(var(--house-w) / -2); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.play-house svg { display: block; width: 100%; height: auto; }
/* the lawn sign stands on the lawn, in front of the house's left corner */
.play-lot-sign { position: absolute; z-index: 2; left: calc(50% - var(--house-w) / 2 - var(--sign-w) / 4); bottom: calc(var(--ground) - var(--lawn) * .55); width: var(--sign-w); pointer-events: none; }
.play-lot-sign svg { display: block; width: 100%; height: auto; }
.play-label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 5px 3px 6px; padding: 5px 5px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background: var(--color-white); box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease, background-color .15s ease; }
.play-lot-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-serif); font-size: 14px; line-height: 1.15; color: var(--color-brown); }
.play-lot-blurb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.play-lot-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--color-brown); }
.play-lot-cta svg { width: 9px; height: 9px; }
.play-lot.is-played .play-label { border-color: var(--color-sage); }
.play-lot.is-played .play-lot-cta { font-weight: 600; }
.play-lot:disabled { cursor: default; }
.play-lot:disabled .play-label { opacity: .7; }
.play-lot:focus-visible { outline: 3px solid var(--color-brown); outline-offset: -1px; }
@media (hover: hover) {
  .play-lot:not(:disabled):hover .play-house { transform: translateY(-3px); }
  .play-lot:not(:disabled):hover .play-label { border-color: var(--color-brown); box-shadow: var(--shadow-hover); }
}
.play-lot:not(:disabled):active .play-house { transform: translateY(0); }
.play-lot:not(:disabled):active .play-label { background: var(--color-cream-dark); border-color: var(--color-brown); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .play-house { transition: none; }
  .play-lot:not(:disabled):hover .play-house { transform: none; }
}
.play-noscript { padding: 24px; text-align: center; }
@media (min-width: 640px) {
  .play-street-wrap { --house-w: 132px; --sky: 16px; --lawn: 36px; --walk: 14px; --curb: 4px; --road: 30px; --sign-w: 46px; --label-h: 132px; padding-top: 26px; }
  .play-street { padding-left: max(12px, calc((100% - 1320px) / 2)); padding-right: max(12px, calc((100% - 1320px) / 2)); }
  .play-bar-zach { width: 56px; height: 67px; }
  .play-bar-title { font-size: 1.5rem; }
  .play-label { gap: 4px; margin: 10px 8px 14px; padding: 10px 12px; }
  .play-lot-title { font-size: 1.15rem; -webkit-line-clamp: 1; }
  .play-lot-blurb { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--color-text-light); }
  .play-lot-cta { margin-top: 2px; font-size: 13px; }
}
@media (min-width: 1100px) { .play-street-wrap { --cols: 6; --house-w: 148px; } }

/* sprite frames (art.js sets size + background inline; walk cycles between frames 1 and 2) */
.ztr-zach { image-rendering: auto; }
.ztr-zach--walk { animation: ztr-zach-walk .5s steps(1) infinite; }
@keyframes ztr-zach-walk { 0% { background-position-x: calc(-1 * var(--f, 90px)); } 50% { background-position-x: calc(-2 * var(--f, 90px)); } 100% { background-position-x: calc(-1 * var(--f, 90px)); } }
@media (prefers-reduced-motion: reduce) { .ztr-zach--walk { animation: none; } }

/* ── below the street ─────────────────────────────────────────────────────────────────── */
.play-notes { padding: 36px 0 56px; }
.play-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.play-note { padding: 22px 24px; background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--border-radius); }
.play-note h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--color-brown); }
.play-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-light); }
.play-note a { color: var(--color-brown); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── the stage (full screen while a level is open) ─────────────────────────────────────── */
.play-wrap { display: none; }
body.play-full { overflow: hidden; }
body.play-full .play-wrap { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--color-cream-dark); }
body.play-full .site-header, body.play-full .mobile-action-bar, body.play-full .ztr-season-line { visibility: hidden; }
.play-hud { display: flex; align-items: center; gap: 10px; width: min(100%, var(--play-w, 400px)); min-height: 44px; }
.play-stat { display: flex; flex-direction: column; margin: 0; line-height: 1.1; }
.play-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); }
.play-stat-val { font-family: var(--font-serif); font-size: 1.4rem; color: var(--color-brown); font-variant-numeric: tabular-nums; }
.play-stat--score { min-width: 4.2em; }
.play-stat--two { min-width: 3em; }
.play-lives { display: flex; gap: 5px; align-items: center; height: 1.4rem; }
.play-life { width: 18px; height: 14px; border: 2px solid var(--color-brown); border-radius: 2px; background: linear-gradient(var(--color-brown) 0 4px, var(--color-cream) 4px); }
.play-life.is-lost { border-style: dashed; border-color: var(--color-text-light); background: transparent; }
.play-note-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--color-text-light); text-align: center; }
.play-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-text-light); border-radius: 50%; background: var(--color-cream); color: var(--color-brown); cursor: pointer; transition: background-color var(--transition); }
.play-ico:hover:not(:disabled) { background: var(--color-cream-dark); }
.play-ico:disabled { opacity: .4; cursor: default; }
.play-ico:focus-visible { outline: 2px solid var(--color-brown); outline-offset: 3px; }
.play-ico svg { width: 18px; height: 18px; }
.play-ico .play-ico-b, .play-ico.is-on .play-ico-a { display: none; }
.play-ico.is-on .play-ico-b { display: block; }
.play-box { position: relative; flex: 1; width: 100%; min-height: 0; }
body.play-full .play-box { touch-action: none; }
.play-stage { position: absolute; left: 0; top: 0; width: 400px; height: 600px; transform-origin: 0 0; backface-visibility: hidden; will-change: transform; overflow: hidden; border-radius: 10px; background: var(--color-cream); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.play-stage.is-playing { touch-action: none; cursor: pointer; }
.play-level { position: absolute; inset: 0; width: 400px; height: 600px; }
.play-level:focus { outline: none; }
.play-stage.is-playing:focus-within { box-shadow: 0 0 0 2px var(--color-brown), var(--shadow-sm); }
/* overlays sit on the stage's screen rect, unscaled */
.play-ov { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 20px; overflow-y: auto; text-align: center; background: rgba(247, 248, 246, .93); border-radius: 10px; }
.play-ov > * { flex-shrink: 0; }
.play-ov.is-arming, .play-ov.is-arming * { pointer-events: none !important; }
.play-ov > :first-child { margin-top: auto; }
.play-ov > :last-child { margin-bottom: auto; }
.play-ov-kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-light); }
.play-ov-title { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem); line-height: 1.1; color: var(--color-brown); }
.play-ov-title:focus { outline: none; }
.play-ov-text { max-width: 32ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text); }
.play-howto { max-width: 34ch; margin: 0; padding-left: 20px; text-align: left; font-size: 14.5px; line-height: 1.5; color: var(--color-text); }
.play-howto li + li { margin-top: 4px; }
.play-ov-btn { min-width: 200px; min-height: 50px; }
.play-ov-best { margin: 0; font-size: 13px; color: var(--color-text-light); }
.play-ov-best strong { color: var(--color-brown); }
.play-chal { margin: 0; padding: 8px 12px; background: var(--color-cream); border-left: 4px solid var(--color-sage); border-radius: 0 6px 6px 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--color-brown); text-align: left; }
.play-diff { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.play-diff-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); }
.play-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.play-seg button { min-width: 44px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-cream); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--color-brown); cursor: pointer; }
.play-seg button[aria-pressed="true"] { background: var(--color-brown); border-color: var(--color-brown); color: var(--color-cream); }
.play-seg button:focus-visible { outline: 2px solid var(--color-brown); outline-offset: 2px; }
.play-final { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--font-serif); font-size: clamp(2.4rem, 2rem + 2.6vw, 3.2rem); line-height: 1; color: var(--color-brown); }
.play-final small { font-family: var(--font-sans); font-size: 15px; color: var(--color-text-light); }
.play-badge { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--color-brown); color: var(--color-cream); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.play-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background: var(--color-cream); overflow: hidden; }
.play-stats > div { padding: 7px 14px; }
.play-stats > div + div { border-left: 1px solid var(--color-border); }
.play-stats dt { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); }
.play-stats dd { margin: 2px 0 0; font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-brown); }
.play-lines { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.play-lines p { margin: 0; }
.play-lines p + p { margin-top: 3px; }
.play-zachline { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-sage); }
.play-lead { margin: 2px 0 0; max-width: 34ch; font-size: 13.5px; line-height: 1.45; color: var(--color-text); }
.play-lead strong { color: var(--color-brown); }
.play-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.play-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-white); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-brown); cursor: pointer; text-decoration: none; transition: border-color var(--transition), background var(--transition); }
.play-chip:hover { border-color: var(--color-gold); background: var(--color-cream); }
.play-chip:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .play-chip--sms { display: none; } }
.play-status { min-height: 20px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-brown); }
.play-status:empty { min-height: 0; }
.play-back { margin-top: 2px; }
.play-end-zach { width: 64px; height: 77px; }
.play-end-zach { overflow: hidden; }
.play-end-zach .ztr-zach { display: block; }

/* The end card: a body that scrolls if a level's stats run long, and a foot with Play again and
   Back to the street that is always on screen (2026-10-20: at 390 x 844 three levels needed up to
   592 px in a 555 px card and the buttons fell off the bottom). */
.play-ov--end { gap: 0; padding: 0; overflow: hidden; background: rgba(247, 248, 246, .985); }
.play-ov--end > .play-end-body, .play-ov--end > .play-end-foot { margin: 0; }
.play-end-body { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 18px 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.play-end-body > * { flex-shrink: 0; }
.play-end-body > :first-child { margin-top: auto; }
.play-end-body > :last-child { margin-bottom: auto; }
.play-end-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
.play-share-row { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.play-share-btn { gap: 8px; min-width: 200px; min-height: 46px; }
.play-end-foot { flex: none; display: flex; gap: 10px; width: 100%; padding: 10px 14px 12px; border-top: 1px solid var(--color-border); background: var(--color-cream); border-radius: 0 0 10px 10px; }
.play-end-foot .btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 10px 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .play-ov { gap: 6px; padding: 12px 12px 14px; }
  .play-ov--end { padding: 0; }
  .play-lines { font-size: 13px; line-height: 1.4; }
  .play-final { font-size: 2rem; }
  .play-stats > div { padding: 4px 10px; }
  .play-stats dd { font-size: 1.05rem; }
  .play-lead { font-size: 12.5px; line-height: 1.35; }
  .play-chip { min-height: 36px; padding: 4px 12px; font-size: 12.5px; }
  .play-howto { font-size: 13.5px; }
  .play-ov-btn { min-height: 46px; }
  .play-end-zach { width: 52px; height: 62px; }
}
/* compact end card on short stages (all phones): Zach shrinks, the score sits beside its badge,
   the stats go on one tight row, and the challenge line keeps only its first sentence */
.play-short .play-end-body { gap: 7px; padding: 12px 12px 8px; }
.play-short .play-end-zach { width: 40px; height: 48px; }
.play-short .play-ov--end .play-ov-title { font-size: 1.35rem; }
.play-short .play-final { font-size: 1.9rem; }
.play-short .play-badge { padding: 4px 10px; font-size: 11px; }
.play-short .play-stats { flex-wrap: nowrap; max-width: 100%; }
.play-short .play-stats > div { flex: 1 1 auto; min-width: 0; padding: 4px 5px; }
.play-short .play-stats dt { font-size: 9px; letter-spacing: .06em; line-height: 1.2; }
.play-short .play-stats dd { font-size: .92rem; white-space: nowrap; }
.play-short .play-lines { font-size: 12.5px; line-height: 1.38; }
.play-short .play-chal { padding: 6px 10px; font-size: 12.5px; }
.play-short .play-lead-more { display: none; }
.play-short .play-share-row { gap: 6px; }
.play-short .play-share-btn { min-height: 42px; padding: 9px 16px; }
.play-short .play-chip { min-height: 34px; padding: 4px 11px; }
.play-short .play-end-foot { gap: 8px; padding: 8px 10px 10px; }
.play-short .play-end-foot .btn { min-height: 44px; padding: 9px 8px; font-size: 13px; letter-spacing: .3px; }
.play-tiny .play-end-zach { display: none; }
.play-tiny .play-lead { display: none; }
@media (max-width: 360px) {
  .play-stat--two { display: none; }
  .play-ov-btn { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .play-ico, .play-chip, .play-label { transition: none; }
}