.play-page{--play-surface:var(--surface);--play-ink:var(--ink);--play-accent:var(--blue);--play-line:var(--line);padding-block:48px 80px}
.play-hub-locale{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.play-hub-locale button{min-width:48px;min-height:48px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:.8rem}
.play-eyebrow{display:flex;align-items:center;gap:24px;font-size:.78rem;margin-bottom:38px}.play-eyebrow .label{margin-left:auto}.play-eyebrow button{background:none;border:1px solid var(--line);color:var(--ink);min-width:48px;min-height:48px}
.play-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;margin-bottom:36px}.play-heading h1{font-size:clamp(2.5rem,5.4vw,4.6rem);letter-spacing:-.05em}.play-heading h1 em{display:block;font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.03em;margin-top:16px}.play-description{color:var(--muted);font-size:.9rem;max-width:45ch}.play-intro{max-width:54ch;margin-top:26px}
.play-workbench{border:1px solid var(--line);background:var(--surface)}.play-toolbar{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}.play-toolbar button,.play-result button:not(.button),.play-help button,.play-lab button,.play-pause-content button:not(.button),[data-redraw]{min-height:48px;border:1px solid var(--line);padding:8px 15px;background:var(--surface);color:var(--ink);font-size:.78rem}.play-modes{display:flex}.play-modes button+button{border-left:0}.play-modes [aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}.play-utilities{display:flex;gap:8px}.play-toolbar button:disabled{cursor:default}
.play-room-caption{display:flex;gap:22px;align-items:center;padding:20px 24px}.play-room-caption .label{color:var(--blue);white-space:nowrap}.play-room-caption h2{font-size:1.03rem;letter-spacing:-.025em}.play-checkpoint{font-size:.7rem;margin-left:auto;color:var(--success)}
.play-stage{height:400px;position:relative;overflow:hidden;background:var(--paper);isolation:isolate}.play-stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;outline-offset:-5px}.play-stage img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:left center}.play-cover{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:14px;background:linear-gradient(transparent 30%,rgba(246,244,239,.97) 95%)}.play-cover p{font:1.5rem/1.3 var(--serif);color:var(--ink)}.play-cover .button{min-height:56px}
.play-story{min-height:90px;padding:18px 24px 12px;font-size:.82rem;border-top:1px solid var(--line)}.play-story [data-status]{color:var(--blue);font-size:.77rem;min-height:1.6em;margin-top:7px}
.play-touch{display:flex;justify-content:space-between;gap:16px;padding:8px 24px 22px}.play-touch>div{display:flex;gap:8px}.play-touch button{min-width:64px;min-height:58px;padding:10px 18px;font-size:.85rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:3px;touch-action:none;user-select:none;-webkit-user-select:none}.play-touch [data-input=action]{background:var(--pale);border-color:var(--blue);color:var(--blue)}.play-touch button.is-held{background:var(--ink);color:var(--surface)}
.play-discover,.play-help,.play-result{padding:24px;border-top:1px solid var(--line)}.play-discover p,.play-help p{font-size:.85rem;max-width:66ch}.play-discover ol{display:flex;flex-wrap:wrap;gap:8px 24px;padding-left:24px;margin:18px 0;font-size:.8rem}.play-discover li.is-done{color:var(--success)}.play-discover .button{min-height:56px}.play-help button{margin-top:16px}.play-error{padding:20px;color:var(--danger);font-size:.85rem}.play-result h2{font:clamp(1.7rem,3vw,2.5rem)/1.2 var(--serif);letter-spacing:-.035em;margin:10px 0}.play-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.play-result input{width:100%;padding:12px;border:1px solid var(--line);background:var(--paper);font-size:.78rem;margin:8px 0}.play-result>a{display:block;font-size:.85rem;margin-top:22px}
.play-room-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);margin-top:28px}.play-room-nav a{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px;text-decoration:none;font-size:.74rem;border:1px solid var(--line)}.play-room-nav a>span:first-child{font-size:.7rem;color:var(--blue)}.play-room-nav a[aria-current=true]{background:var(--pale)}.play-room-nav a.is-complete>span:first-child::after{content:' ✓'}
.play-notes{font-size:.75rem;color:var(--muted);line-height:1.7;margin-top:24px;max-width:80ch}.play-notes .microcopy{margin-top:18px}.play-card{display:grid;grid-template-columns:1.4fr 1fr;margin-top:44px;border:1px solid var(--line);background:var(--surface);gap:36px;align-items:center}.play-card-image{display:block}.play-card-image img{width:100%;height:auto}.play-card>div{padding:32px 30px 32px 0}.play-card h2{font-size:2rem;margin:12px 0}.play-card .button{margin-top:22px}
.play-page dialog{border:1px solid var(--line);border-radius:3px;max-width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;color:var(--ink);background:var(--paper)}.play-page dialog::backdrop{background:rgba(23,27,29,.35)}.play-pause-content{display:flex;flex-direction:column;gap:16px;padding:30px}.play-pause-content h2{font:2rem/1.15 var(--serif);letter-spacing:-.03em}.play-pause-content p{font-size:.85rem}.play-pause-content label{font-size:.83rem;display:flex;align-items:center;gap:12px;min-height:48px}.play-pause-content input{width:22px;height:22px;accent-color:var(--blue)}.play-pause-content select{margin-left:auto;min-height:44px;border:1px solid var(--line);background:var(--surface)}.play-lab{margin-top:32px;padding:24px;border:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:20px;align-items:center}.play-lab h2{font-size:1.25rem;width:100%}.play-lab label,.play-lab output{font-size:.8rem}.play-lab output{width:100%}
@media(max-width:767px){.play-page{padding-top:26px;width:calc(100% - 32px)}.play-eyebrow{gap:10px;margin-bottom:24px}.play-eyebrow .label{font-size:.6rem}.play-heading{grid-template-columns:1fr;gap:22px;margin-bottom:24px}.play-heading h1{font-size:2.65rem}.play-description{font-size:.83rem}.play-toolbar{padding:10px;gap:8px;flex-wrap:wrap}.play-toolbar button{padding:8px 11px;font-size:.73rem}.play-room-caption{padding:16px 12px;gap:12px;align-items:flex-start}.play-room-caption h2{font-size:.92rem}.play-checkpoint{display:none}.play-stage{height:360px}.play-cover{padding:20px}.play-cover p{font-size:1.3rem}.play-story{padding:16px 14px;min-height:112px}.play-touch{padding:8px 10px 18px;gap:8px}.play-touch>div{gap:6px}.play-touch button{min-width:48px;min-height:58px;padding:10px 9px;font-size:.7rem}.play-touch [data-input=action]{min-width:68px}.play-room-nav{grid-template-columns:repeat(2,1fr)}.play-discover,.play-result,.play-help{padding:18px 14px}.play-card{grid-template-columns:1fr;gap:0}.play-card>div{padding:24px}.play-page>h1{font-size:3rem}.play-pause-content{padding:22px}}
.play-cover{inset:36px 32px auto auto;max-width:280px;padding:18px;align-items:flex-start;background:var(--paper);border-left:1px solid var(--line)}
.play-place-shell{margin-top:32px;border-top:1px solid var(--line)}.play-place-shell>summary{min-height:64px;padding:18px 0;font-size:.9rem}.play-place-shell .play-page{width:100%;padding-top:24px}.play-place-shell .play-heading h2{font-size:clamp(2.5rem,5.4vw,4.6rem)}.play-place-shell .play-heading h2 em{display:block;font-size:1.35rem;margin-top:16px}.play-story [data-place-return]{min-height:48px;border:1px solid var(--line);background:var(--surface);padding:10px;margin-top:12px;font-size:.8rem}
.play-room-nav a>span:first-child{flex:0 0 24px;white-space:nowrap}.play-room-nav a>span:last-child{min-width:0}
.play-story [data-place-chooser]{margin-top:20px;display:flex;flex-wrap:wrap;align-items:end;gap:12px}.play-story [data-place-chooser] label{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%}.play-story [data-game-select]{min-height:48px;max-width:100%;padding:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}.play-story [data-place-start-game]{min-height:48px;padding:10px 16px;background:var(--ink);border:1px solid var(--ink);color:var(--surface);font-size:.8rem}
@media(max-width:359px){.play-room-nav{grid-template-columns:1fr}.play-room-nav a{min-height:56px}}
@media(max-width:767px){.play-cover{inset:16px 12px auto auto;max-width:174px;padding:10px 12px}.play-cover p{font-size:1.05rem}.play-cover .microcopy{font-size:.62rem}.play-cover .button{padding:12px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.play-page *, .play-page *::before,.play-page *::after{scroll-behavior:auto;transition:none;animation:none}}
.play-mission{padding:16px 20px;border-bottom:1px solid #d1d3ce;background:#fffefb}
.play-result{scroll-margin-top:96px}
.play-stage canvas{scroll-margin-top:160px}
.play-mission p{margin:0 0 10px;max-width:74ch}
.play-mission ol{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin:0 0 10px;padding-left:24px;font-size:14px;line-height:1.5}
.play-mission .is-done{color:#214bb8}
.play-mission .is-done::marker{content:'✓  '}
.play-mission [data-mission-progress]{margin:0;color:#214bb8}
@media(max-width:620px){.play-mission ol{grid-template-columns:1fr;gap:10px}.play-mission{padding:14px 16px}}