/* Playground: a 3D photo booth (playground.js). The booth stands alone; clicking it is the way in (the cursor reads "Step inside"). */
.booth-stage { position: relative; max-width: 1440px; height: clamp(600px, calc(100vh - 84px), 860px); margin: 0 auto; overflow: hidden; }
#booth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
#booth.booth-hover { cursor: pointer; }
.pg-note { position: absolute; left: 40px; bottom: 28px; margin: 0; font-size: 13px; color: var(--ink-muted); transition: opacity .5s var(--ease); }
.pg-enter { padding: 14px 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px var(--body); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.pg-enter:hover { background: var(--ask-accent); }
.pg-enter:active { transform: scale(.97); }
/* keyboard users: the hidden "Step inside" button shows up under the booth when it gets focus */
#enterBtn:focus-visible { clip: auto; width: auto; height: auto; overflow: visible; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 12px 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px var(--body); }

/* phones and tablets (no cursor to say "Step inside"): a small hint under the booth */
.pg-tap { display: none; position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; text-align: center; font: 400 14px var(--mono); color: var(--ink-muted); transition: opacity .5s var(--ease); }
@media (hover: none), (pointer: coarse) { .pg-tap { display: block; } }

@media (max-width: 600px) {
  .booth-stage { height: calc(100svh - 64px); min-height: 520px; }
  .pg-note { left: 16px; right: 16px; bottom: 16px; }
}

/* ---------- inside the booth: white walls, a steel-framed screen showing the camera ---------- */
html.in-booth { overflow: hidden; }
html.in-booth .pg-note, html.in-booth .pg-tap { opacity: 0; }
.bo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #fbfaf8 0%, #ecebe7 70%, #dedcd7 100%); }
.bo[hidden], .strip-modal[hidden] { display: none; }
.bo-leave { position: absolute; top: 20px; left: 24px; padding: 10px 16px; border: 1px solid rgba(12,12,12,.16); border-radius: 999px;
  background: rgba(255,254,252,.9); font: 500 14px var(--body); color: var(--ink); cursor: pointer; }
.bo-leave:hover { border-color: var(--ink); }
.bo-body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px; }
.bo-screen { display: flex; gap: 18px; align-items: stretch; padding: 18px; border-radius: 22px;
  background: linear-gradient(100deg, #b9bcc1 0%, #eef0f2 22%, #a9acb2 46%, #e3e5e8 70%, #b3b6bb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.15), 0 24px 60px -24px rgba(20,20,30,.35); }
.bo-frame { position: relative; width: min(64vw, calc((100vh - 220px) * 4 / 3), 820px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #111; }
.bo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.bo-empty { display: none; position: absolute; inset: 0; align-items: center; padding-left: 18%; background: #eceae6; color: #9a968f; font: 500 15px var(--mono); }
.bo-frame.no-cam .bo-empty { display: flex; }
.bo-me { position: absolute; right: 0; bottom: 0; height: 94%; width: auto; pointer-events: none; }
.bo-frame.frozen::after { content: ""; position: absolute; inset: 0; background: var(--still) center / cover; }
.bo-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 300 clamp(96px, 14vw, 180px) / 1 var(--display); color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.bo-shots { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 6px; background: #fff; }
.bo-shots i { display: block; width: 92px; aspect-ratio: 4 / 3; border-radius: 2px; background: #eceae6 center / cover; transition: opacity .3s; opacity: .55; }
.bo-shots i.on { opacity: 1; }
.bo-msg { margin: 0; font-size: 16px; color: var(--ink-body); min-height: 1.5em; text-align: center; }
.bo-go { margin-top: 0; }
.bo-go[hidden] { display: none; }
.bo-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* ---------- the printed strip, brought to the front ---------- */
.strip-modal { --dim: 1; position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(255,254,252, calc(var(--dim) * .82)); backdrop-filter: blur(calc(var(--dim) * 8px)); -webkit-backdrop-filter: blur(calc(var(--dim) * 8px)); }
.sm-in { display: flex; flex-direction: column; align-items: center; gap: 26px; }
#stripImg { display: block; height: min(72vh, 680px); width: auto; box-shadow: var(--shadow-polaroid), 0 30px 60px -30px rgba(20,20,40,.35); transform-origin: center; }
.sm-actions { display: flex; gap: 10px; }
.sm-actions .pg-enter { margin: 0; text-decoration: none; display: inline-block; }
.sm-actions .pg-enter:hover { color: #fff; }
.sm-again { padding: 14px 24px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: 600 15px var(--body); color: var(--ink); cursor: pointer; }
.sm-again:hover { background: var(--ink); color: #fff; }
.sm-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font: 300 30px/1 var(--body); color: var(--ink); cursor: pointer; }
.sm-close:hover { background: rgba(12,12,12,.06); }

@media (max-width: 700px) {
  .bo-screen { flex-direction: column; padding: 10px; gap: 10px; border-radius: 16px; }
  .bo-frame { width: calc(100vw - 52px); }
  .bo-shots { flex-direction: row; justify-content: center; }
  .bo-shots i { width: 64px; }
  .bo-leave { top: 12px; left: 12px; }
  #stripImg { height: min(64vh, 560px); }
}