/* Photobooth — the kiosk layer (Design.md §6, 2026-09 redesign).
   Loaded ONLY by the photobooth document (client/index.html) and by /date, which embeds the
   same scenes. app.css keeps the shared game chrome; everything here is the booth's own look
   and overrides app.css where the two meet. Written from tokens so every room skin
   (rooms.css: vintage's warm dark, karaoke's neon) restyles it for free.

   The idea: a real Korean photobooth screen. ONE instruction in big type at the top, a row
   of five step dots above it, big tap targets in the middle, one primary button at the
   bottom. No paragraphs, no glyph decorations in labels, nothing to read twice. */

:root {
  --pb-r: 6px;                 /* the booth's tap targets — near-sharp, never bubbly */
  --pb-max: 760px;             /* the kiosk column */
  --pb-ok: #1f7a4d;
}

/* The kiosk column: every booth scene is a centered column of the same width. */
.scene.start, .scene.room, .scene.profile, .scene.layout, .scene.theme,
.scene.filter, .scene.decorate { max-width: var(--pb-max); gap: var(--s3); }
.scene.booth { max-width: 820px; gap: var(--s2); }
.scene.edit { max-width: 980px; gap: var(--s2); }
.scene.download { max-width: 980px; }

/* ---- step header ---------------------------------------------------------------- */
.pb-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 100%;
  /* clears the fixed chrome (back/exit top-left, timer + avatar top-right) when a tall
     scene starts at the very top of the viewport */
  padding-top: 14px;
}
@media (max-width: 720px) { .pb-head { padding-top: 46px; } .scene.start .pb-head { padding-top: 0; } }
.pb-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.pb-steps[hidden] { display: none; }
.pb-step { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.pb-step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper-raised);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.pb-step.is-done .pb-step-dot { background: var(--pink); border-color: var(--pink); }
.pb-step.is-current .pb-step-dot { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }
.pb-step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pb-step.is-current .pb-step-label { color: var(--ink); font-weight: 800; }
.pb-step-line { width: 22px; height: 2px; background: var(--line); border-radius: 1px; }
.pb-step-line.is-done { background: var(--pink); }
@media (max-width: 560px) {
  /* Phone: dots for every step, the label only under the current one. */
  .pb-step:not(.is-current) .pb-step-label { display: none; }
  .pb-step-line { width: 16px; }
}

.pb-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.pb-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 44ch;
}
.pb-sub[hidden] { display: none; }

/* ---- the one primary button + the sticky action bar ------------------------------ */
.pb-bar {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s1);
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(23, 24, 28, 0.08);
}
.pb-bar .ready-btn {
  margin: 0;
  min-width: 220px;
  min-height: 54px;
  padding: 0 32px;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--pb-r);
  letter-spacing: 0.01em;
}
.pb-bar .btn-ghost { min-height: 54px; border-radius: var(--pb-r); padding: 0 22px; font-weight: 600; }
.pb-bar-note { font-size: 14px; color: var(--ink-soft); }
.pb-bar-note:empty { display: none; }
.ready-btn.is-ready { background: var(--pb-ok); }

/* Quiet text actions ("Take photos alone instead", "Leave"). */
.pb-quiet {
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--pb-r);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.pb-quiet:hover { color: var(--ink); background: var(--paper-raised); }
.pb-quiet-row { display: flex; gap: var(--s1); align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---- START ------------------------------------------------------------------------ */
.scene.start { gap: var(--s4); }
.scene.start .brand { display: none; }              /* the hero below is the brand now */
.pb-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--s4);
  width: 100%;
}
.pb-hero-copy { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.pb-hero-mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.pb-hero-ko {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pink-tint);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pb-hero-sub { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-soft); max-width: 30ch; }
.pb-hero-back { margin-top: 2px; padding-left: 0; }

/* The hero picture is a REAL strip — Nick and Angie's four landing-page frames — printing
   out of a booth slot. The slot is a dark bar; the strip slides down out of it (clip-path
   grows from the top edge, like paper feeding out), each frame develops from grey a beat
   after it appears, and once printed the whole strip settles into a slow, tilted float. */
.pb-strip-slot {
  position: relative;
  justify-self: center;
  width: 190px;
  padding-top: 18px;
}
.pb-strip-slot::before {
  content: "";
  position: absolute;
  top: 0; left: -22px; right: -22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2c33, var(--ink));
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(23, 24, 28, 0.18);
  z-index: 2;
}
.pb-strip-art {
  width: 150px;
  margin: 0 auto;
  padding: 10px 10px 28px;
  background: var(--ink);
  display: grid;
  gap: 8px;
  position: relative;
  transform-origin: 50% 0;
  box-shadow: 0 24px 60px rgba(23, 24, 28, 0.18);
  animation: pb-print 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both, pb-float 6s ease-in-out 2.6s infinite;
}
.pb-strip-foot {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  text-align: center;
  font-family: "Gowun Batang", serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
}
.pb-strip-cell {
  position: relative;
  aspect-ratio: 503 / 377;
  background: #fff;
  overflow: hidden;
}
.pb-strip-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(0.7) brightness(1.25);
  animation: pb-develop 1.4s ease both;
}
.pb-strip-cell:nth-child(1) img { animation-delay: 0.9s; }
.pb-strip-cell:nth-child(2) img { animation-delay: 1.3s; }
.pb-strip-cell:nth-child(3) img { animation-delay: 1.7s; }
.pb-strip-cell:nth-child(4) img { animation-delay: 2.1s; }
@keyframes pb-print {
  0%   { clip-path: inset(0 0 100% 0); transform: translateY(-14px) rotate(0deg); }
  70%  { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(0deg); }
  100% { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(-4deg); }
}
@keyframes pb-develop { to { filter: none; } }
@keyframes pb-float {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-6px); }
}

.pb-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; margin-top: var(--s2); }
.pb-cta {
  min-height: 58px;
  border-radius: var(--pb-r);
  font-size: 17px;
  font-weight: 700;
  justify-content: space-between;
  padding: 0 22px;
  width: 100%;
}
.pb-cta-hint { font-size: 13px; font-weight: 500; opacity: 0.7; }
.pb-cta.btn-ghost { border: 1.5px solid var(--line); }
.pb-cta.btn-ghost:hover { border-color: var(--ink); }
.pb-modes { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.pb-chip:hover { border-color: var(--ink); color: var(--ink); }
.pb-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--blue-tint); }
.pb-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pb-chip[aria-pressed="true"] .pb-chip-dot { background: var(--blue); }

@media (max-width: 720px) {
  .pb-hero { grid-template-columns: 1fr; gap: var(--s3); text-align: center; }
  .pb-hero-copy { align-items: center; order: 2; }
  .pb-strip-slot { width: 130px; margin-top: 24px; }
  .pb-strip-art { width: 104px; padding: 7px 7px 22px; gap: 5px; }
  .pb-strip-foot { font-size: 8px; bottom: 7px; }
  .pb-strip-art::after { font-size: 8px; bottom: 8px; }
  .pb-actions { align-self: center; }
  .pb-modes { justify-content: center; }
}

/* Room-style picker step (the poster grid keeps its art from app.css, restyled here). */
.room-picker.is-page { max-width: 100%; gap: var(--s3); }
.room-picker.is-page .room-picker-label { display: none; }     /* the pb-head says it */
.room-picker.is-page .room-picker-cards { grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.room-picker.is-page .room-card { height: 124px; border-radius: var(--pb-r); border-color: var(--line); }
.room-picker.is-page .room-card.is-on { border-color: var(--line); }
.room-picker.is-page .room-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.room-picker.is-page .room-card-text { padding: 30px 12px 10px; }
.room-picker.is-page .room-card-text strong { font-size: 16px; letter-spacing: -0.01em; }
.room-picker.is-page .room-card-sub { font-size: 12px; }
@media (max-width: 720px) {
  .room-picker.is-page .room-picker-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .room-picker.is-page .room-card { height: 104px; }
}

/* Join form */
.join-form { gap: var(--s3); width: 100%; }
.join-form .field-label { display: none; }
.join-actions { flex-wrap: wrap; justify-content: center; }
.join-actions .btn { min-height: 52px; border-radius: var(--pb-r); padding: 0 26px; font-weight: 700; }
.code-cell { border-radius: var(--pb-r); }

/* ---- ROOM (waiting) ---------------------------------------------------------------- */
.scene.room { gap: var(--s3); }
.scene.room .field-label { display: none; }
.code--display .code-cell--static { border-radius: var(--pb-r); width: 60px; height: 76px; font-size: 38px; }
.room-actions { margin: 0; gap: 10px; }
.room-actions .btn { min-height: 46px; border-radius: var(--pb-r); font-weight: 600; }
.presence { margin: 0; font-size: 15px; }
.presence .dot--waiting { border-color: var(--pink); }
.room-solo, .room-back { margin: 0; }
.room-solo { min-height: 50px; border-radius: var(--pb-r); padding: 0 24px; font-weight: 700; }
.pb-wait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  max-width: 460px;
  padding: var(--s3);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ---- PROFILE ----------------------------------------------------------------------- */
.scene.profile { gap: var(--s3); }
.profile-grid {
  grid-template-columns: 1fr;
  max-width: 440px;
  justify-items: center;
  gap: var(--s2);
}
.profile-panel {
  width: 100%;
  padding: var(--s3);
  border-radius: 10px;
  gap: var(--s2);
}
.profile-panel .field-label { display: none; }
.profile-panel .text-input {
  max-width: 100%;
  min-height: 56px;
  font-size: 22px;
  font-weight: 700;
  border-radius: var(--pb-r);
  border-width: 1.5px;
}
.profile-panel .text-input::placeholder { font-weight: 500; color: var(--ink-soft); opacity: 0.6; }
.swatches { gap: var(--s3); }
.swatch { width: 64px; height: 64px; border: 3px solid transparent; }
.swatch.is-selected { border-color: var(--ink); transform: scale(1.1); box-shadow: 0 0 0 3px var(--paper-raised) inset; }
.swatch:focus-visible { outline-offset: 3px; }
.profile-panel .ready-btn { display: none; }        /* the sticky bar carries "Ready" */
/* Partner: one quiet row, not a second empty card. */
.profile-panel--peer {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 14px var(--s2);
  background: transparent;
  border-style: dashed;
}
.profile-panel--peer .field-label { display: inline; font-size: 12px; }
.profile-panel--peer.is-empty { opacity: 0.7; }
.profile-panel--peer .peer-name { font-size: 16px; min-height: 0; }
.profile-panel--peer .swatch--peer { width: 16px; height: 16px; }
.profile-panel--peer .peer-ready { min-height: 0; font-size: 14px; }
.profile-panel--peer .peer-ready:empty { display: none; }
/* Group: the three others as compact rows under yours. */
.profile.is-group .profile-peers { grid-template-columns: 1fr; gap: var(--s1); }
.profile.is-group .profile-peers .profile-panel { padding: 10px var(--s2); }

/* ---- LAYOUT (frame size) ----------------------------------------------------------- */
.scene.layout .eyebrow { display: none; }
.layout-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  max-width: 100%;
}
.layout-card {
  padding: var(--s3) var(--s2) var(--s2);
  gap: 6px;
  min-height: 190px;
  border-radius: 10px;
  box-shadow: none;
  border-width: 1.5px;
  justify-content: center;
  flex-direction: column;
}
.layout-card .mini-strip { margin: 0 0 var(--s2); }
.layout-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.layout-card.is-selected { border-width: 2.5px; }
.layout-card .mini-strip { align-self: center; }
.layout-cap {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.layout-hint { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 720px) {
  .layout-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .layout-card { min-height: 160px; padding: var(--s2); flex-direction: column; justify-content: center; }
}

/* ---- THEME (frame picker: tabs + grid) --------------------------------------------- */
.scene.theme .eyebrow, .scene.theme .nf-row { display: none; }
.pb-tabs {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  scroll-snap-type: x proximity;
}
.pb-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 721px) { .pb-tabs { justify-content: center; flex-wrap: wrap; overflow: visible; } }
.pb-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.pb-tab:hover { border-color: var(--ink); color: var(--ink); }
.pb-tab.is-open { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pb-tab-emoji { font-size: 15px; }
.pb-tab-count { font-size: 12px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.pb-tab-new {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
}
/* A partner's pick lives in this tab: a small dot in their colour. */
.pb-tab-pick { width: 8px; height: 8px; border-radius: 50%; display: none; }
.pb-tab[data-pick-color="pink"] .pb-tab-pick { display: inline-block; background: var(--pink); }
.pb-tab[data-pick-color="blue"] .pb-tab-pick { display: inline-block; background: var(--blue); }
.pb-tab.is-pair .pb-tab-pick { display: inline-block; background: linear-gradient(135deg, var(--pink) 50%, var(--blue) 50%); }

.pb-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px;
  width: 100%;
  animation: scene-in 200ms ease both;
}
.pb-frames[data-layout="grid"] { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pb-frames[data-layout="duo"] { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pb-frames[data-layout="polaroid"] { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pb-frames[hidden] { display: none; }
.pb-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 9px;
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.pb-frame:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pb-frame.is-selected { border-width: 2.5px; padding: 9px 7px 8px; }
.pb-frame[data-pick-color="pink"] { border-color: var(--pink); }
.pb-frame[data-pick-color="blue"] { border-color: var(--blue); }
.pb-frame.is-pair { border-style: solid; }
.pb-tab[data-pick-color="pink"] { border-color: var(--pink); }
.pb-tab[data-pick-color="blue"] { border-color: var(--blue); }
.pb-frame-cap {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: capitalize;
}
.pb-frame.is-selected .pb-frame-cap { color: var(--ink); }
/* The strip preview inside a frame card: real thumb art, or the solid + slot mock. */
.theme-strip {
  position: relative;
  width: 100%;
  display: grid;
  gap: 5%;
  padding: 7%;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 28, 0.08);
  background-size: cover;
}
.theme-strip[data-layout="vertical"] { aspect-ratio: 1 / 3; grid-template-columns: 1fr; }
.theme-strip[data-layout="grid"] { aspect-ratio: 3 / 2; grid-template-columns: 1fr 1fr; }
.theme-strip[data-layout="duo"] { aspect-ratio: 2 / 3; grid-template-columns: 1fr; }
.theme-strip[data-layout="polaroid"] { aspect-ratio: 3.5 / 4.25; grid-template-columns: 1fr; padding: 6% 6% 22%; }
.theme-slot { display: block; width: 100%; min-height: 0; }
.theme-strip[data-layout="vertical"] .theme-slot { aspect-ratio: 1.4 / 1; }
.theme-strip[data-layout="grid"] .theme-slot { aspect-ratio: 1.85 / 1; }
.theme-strip[data-layout="duo"] .theme-slot { aspect-ratio: 1.5 / 1; }
.theme-strip[data-layout="polaroid"] .theme-slot { aspect-ratio: 1 / 1; }
.theme-strip.has-art .theme-slot, .theme-strip.has-art .theme-footer { visibility: hidden; }
.theme-footer { display: block; height: 4%; min-height: 3px; }
.theme-strip[data-layout="polaroid"] .theme-footer { display: none; }
.theme-strip[data-layout="duo"] .theme-slot:nth-child(n+3),
.theme-strip[data-layout="polaroid"] .theme-slot:nth-child(n+2) { display: none; }
/* the old gallery + pack stack are gone from the scene, but stay inert if ever mounted */
.scene.theme .pack-stack, .scene.theme .theme-gallery, .scene.theme .pack-back { display: none; }

/* ---- BOOTH ------------------------------------------------------------------------- */
.scene.booth .shot-counter { display: none; }        /* the header title is the counter */
.booth-stage { max-width: 100%; }
.booth-feeds { border-radius: var(--pb-r); box-shadow: 0 18px 50px rgba(23, 24, 28, 0.14); }
.booth-feeds.is-round { border-radius: 50%; }
.feed-tag { font-size: 12.5px; padding: 3px 10px; z-index: 3; }   /* above the background/filter overlay canvas */

/* One toolbar under the camera: Background · Face filter · mic. Tapping opens ONE tray. */
.pb-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.pb-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.pb-tool:hover { border-color: var(--ink); }
.pb-tool[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pb-tool-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
  display: none;
}
.pb-tool.has-pick .pb-tool-thumb { display: block; }
.pb-tool.has-pick .pb-tool-icon { display: none; }
.pb-tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); display: none; }
.pb-tool.has-pick .pb-tool-dot { display: inline-block; }
.pb-tool.is-mic { padding: 0 12px; }
@media (max-width: 480px) {
  .pb-tool { min-height: 40px; padding: 0 12px 0 10px; font-size: 13px; gap: 6px; }
  .pb-tool.is-mic .pb-tool-label { display: none; }   /* icon only — three pills fit one row */
}
.pb-tool.is-mic.is-muted { background: var(--pink-tint); border-color: var(--pink); color: var(--ink); }
.booth-mic { display: none; }                         /* the old floating mic — replaced */

.pb-tray {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  animation: scene-in 160ms ease both;
}
.pb-tray.is-open { display: flex; }
.pb-tray .booth-picker-row { gap: 10px; padding: 4px 6px; justify-content: flex-start; }
.pb-tray-label {
  padding: 4px 8px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filter-circle { width: 52px; height: 52px; border-width: 2px; }
.filter-circle.is-active { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper-raised), 0 0 0 5px var(--ink); transform: none; }
.booth-picker, .booth-controls { display: none; }    /* legacy pickers (kept in app.css) */

/* Pose line: quieter, one line, under the camera. */
.pose-line { justify-content: center; }

/* The ready bar — the big moment before the shoot. */
.booth-ready { gap: var(--s2); }
.booth-ready-btn { min-height: 54px; min-width: 200px; padding: 0 30px; font-size: 17px; font-weight: 700; border-radius: var(--pb-r); }
.booth-ready-status { font-size: 14px; }
/* The "pick a background" banner over the camera is gone — the header says it. */
.booth-prep { display: none !important; }
/* While the shoot runs, the toolbar steps aside and the camera + filmstrip are all there is. */
.scene.booth.is-shooting .pb-toolbar, .scene.booth.is-shooting .pb-tray { display: none; }

/* Filmstrip: every shot has a slot from the start, so you watch the strip fill up. */
.booth-thumbs {
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  justify-content: center;
}
.booth-thumb {
  flex: 1 1 0;
  width: auto;
  max-width: 104px;
  min-width: 0;
  border-radius: 3px;
  border: 1.5px dashed var(--line);
  background: var(--paper-raised);
  animation: none;
}
.booth-thumb.is-shot { border-style: solid; animation: thumb-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.booth-thumb.is-empty img { display: none; }
.booth-thumb-state { font-size: 12px; }
.booth-thumb.is-empty .booth-thumb-state { display: flex; color: var(--ink-soft); opacity: 0.6; }
.booth-thumb.is-developing { border-style: solid; }
/* the slot the current countdown is about to fill */
.booth-thumb.is-next { border-style: solid; border-color: var(--ink); }
.booth-thumb.is-next .booth-thumb-state { color: var(--ink); opacity: 1; font-weight: 800; }

.countdown { font-size: clamp(96px, 22vw, 150px); }
.gate-text { font-size: 16px; }
.booth-gate .btn { min-height: 50px; border-radius: var(--pb-r); padding: 0 26px; font-weight: 700; }

/* ---- EDIT (pick your photos) ------------------------------------------------------- */
.scene.edit .eyebrow { display: none; }
.edit-grid { gap: var(--s4); align-items: start; }
.edit-left { width: 440px; }
.edit-right { position: sticky; top: var(--s2); }
.edit-pool { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.edit-pool-item { position: relative; border-radius: 4px; border-width: 1.5px; }
.edit-pool-item.is-placed { opacity: 1; border-color: var(--ink); }
.edit-pool-item.is-placed img { opacity: 0.55; }
.edit-pool-item.is-placed:hover img { opacity: 0.35; }
.pb-num {
  position: absolute;
  top: 6px; left: 6px;
  min-width: 24px; height: 24px;
  padding: 0 7px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.edit-pool-item.is-placed .pb-num { display: inline-flex; }
/* The strip preview fits the viewport: the old 300px column ran 4 cells past the fold. */
.edit-strip { padding: 12px; gap: 8px; box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(23, 24, 28, 0.08); }
.edit-strip[data-layout="vertical"] { grid-template-columns: min(184px, 60vw); }
.edit-strip[data-layout="grid"] { grid-template-columns: repeat(2, min(190px, 40vw)); }
.edit-strip[data-layout="duo"] { grid-template-columns: min(220px, 60vw); }
.edit-strip[data-layout="polaroid"] { grid-template-columns: min(220px, 60vw); padding-bottom: 60px; }
.edit-strip.is-frame[data-layout="vertical"] { width: min(84vw, 184px); }
.edit-strip.is-frame[data-layout="grid"] { width: min(92vw, 380px); }
.edit-slot.is-empty { background: rgba(127, 127, 127, 0.14); outline: 1.5px dashed rgba(127, 127, 127, 0.45); outline-offset: -4px; }
.slot-plus { font-size: 24px; }
.edit-right .ready-btn { display: none; }               /* the sticky bar has it */
@media (max-width: 720px) {
  /* Phone: a SMALL strip on the left, the pool beside it in two columns — so the photos
     you're choosing from are on screen with the strip, not a full screen below it. */
  .edit-grid { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
  .edit-grid:has(.edit-strip[data-layout="grid"]) { grid-template-columns: 1fr; }
  .edit-right { position: static; }
  .edit-left { width: auto; }
  .edit-strip { width: auto; padding: 8px; gap: 5px; }   /* app.css stretches it to 100%: the theme art then spans the phone */
  .edit-strip[data-layout="vertical"], .edit-strip[data-layout="duo"], .edit-strip[data-layout="polaroid"] { grid-template-columns: 118px; }
  .edit-strip.is-frame[data-layout="vertical"] { width: 134px; }
  .edit-strip[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, min(42vw, 180px))); }
  .edit-pool { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pb-num { min-width: 20px; height: 20px; font-size: 11px; }
}

/* ---- FILTER ------------------------------------------------------------------------ */
.scene.filter .eyebrow { display: none; }
.filter-stage { box-shadow: var(--shadow-soft); }
.filter-card { border-radius: 8px; }
.filter-card.is-active { border-color: var(--ink); }
.filter-cap { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; letter-spacing: 0; }
.scene.filter > .ready-btn { display: none; }

/* ---- DECORATE ---------------------------------------------------------------------- */
.scene.decorate .eyebrow { display: none; }
/* Desktop: the strip on the left, the tools beside it, so a tall strip never pushes the
   sticker tray under the sticky Finish bar. Phones keep the single column. */
@media (min-width: 900px) {
  .scene.decorate {
    display: grid;
    grid-template-columns: auto minmax(0, 440px);
    grid-template-areas: "head head" "stage tabs" "stage dock" "bar bar";
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--s4);
    row-gap: var(--s2);
    justify-content: center;
    align-items: start;
    max-width: 900px;
  }
  .scene.decorate .pb-head { grid-area: head; }
  .scene.decorate .deco-stage { grid-area: stage; justify-self: end; }
  .scene.decorate .deco-stage[data-layout="vertical"] { width: 210px; }
  .scene.decorate .deco-tabs { grid-area: tabs; justify-self: start; }
  .scene.decorate .deco-dock { grid-area: dock; justify-self: start; align-items: flex-start; max-width: 100%; }
  .scene.decorate .deco-drawtools { align-items: flex-start; }
  .scene.decorate .deco-swatches { justify-content: flex-start; }
  .scene.decorate .pb-bar { grid-area: bar; justify-self: center; }
}
@media (max-width: 720px) {
  /* Phone: a smaller strip so the tabs and the sticker tray sit under it on one screen,
     and the Finish bar goes back into the flow so it never covers the tray. */
  .scene.decorate .deco-stage[data-layout="vertical"] { width: min(40vw, 150px); }
  .scene.decorate .deco-stage[data-layout="grid"] { width: min(88vw, 360px); }
  .scene.decorate .pb-bar { position: static; }
  .deco-tray { padding: 6px 2px; }
  .deco-trayitem { width: 54px; height: 54px; }
}
.deco-tab { min-height: 42px; padding: 0 18px; border-width: 1.5px; }
.deco-tab.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scene.decorate > .ready-btn { display: none; }
.deco-trayitem, .deco-size, .deco-tool { border-radius: var(--pb-r); }

/* Login gate (DECORATE → DOWNLOAD) */
.filter-gate .eyebrow { display: none; }
.fgate-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.fgate-sub { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 34ch; text-align: center; }
.fgate-google { min-height: 52px; border-radius: var(--pb-r); }
.fgate-continue { background: none; border: none; color: var(--ink-soft); font-weight: 600; }
.fgate-continue:hover { color: var(--ink); }

/* ---- DOWNLOAD ---------------------------------------------------------------------- */
.scene.download .eyebrow { display: none; }
.dl-actions .btn { min-height: 50px; border-radius: var(--pb-r); font-weight: 700; padding: 0 22px; }
.dl-side-title { font-size: 12px; }
.dl-side-btn { min-height: 50px; border-radius: var(--pb-r); font-weight: 700; }
.dl-side-offer, .dl-side-wall { border-radius: 10px; }
.dl-restart-row .btn-link { font-weight: 600; }

/* ---- motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pb-strip-art { animation: none; transform: rotate(-4deg); }
  .pb-strip-cell img { animation: none; filter: none; }
  .pb-frames, .pb-tray { animation: none; }
  .booth-thumb.is-shot { animation: none; }
}