/* Quick camera: a steady shutter button at the bottom right while exploring, a crisp shutter,
   and a small print of the newest shot that opens the photo booth. */
.quick-camera-dock {
  position: absolute; z-index: 19;
  right: var(--qc-right, calc(54px + var(--safe-right, 0px)));
  bottom: var(--qc-bottom, calc(231px + var(--safe-bottom, 0px)));
  width: 54px; height: 54px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s, bottom .35s cubic-bezier(.2,.8,.3,1);
}
.quick-camera-dock.is-ready { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, visibility 0s, bottom .35s cubic-bezier(.2,.8,.3,1); }
/* Compact layouts: stacked directly above Bubble Play (54px tall, 22px up) with an 11px gap. */
body[data-compact=true] .quick-camera-dock { right: calc(20px + var(--safe-right, 0px)); bottom: calc(87px + var(--safe-bottom, 0px)); }

.quick-camera {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  color: var(--cream, #fff4ed); background: #362b3bea;
  border: 1px solid #caa7bb77; border-radius: 50%;
  box-shadow: 0 10px 26px #12080d4d;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  touch-action: manipulation; transition: background-color .15s, border-color .15s;
}
.quick-camera svg { width: 23px; height: 23px; stroke-width: 1.45; }
.quick-camera:hover { background-color: #584055ed; border-color: #f0bdd799; }
.quick-camera:active { background-color: #6a4b63f0; }
.quick-camera:focus-visible, .quick-roll:focus-visible { outline: 2px solid var(--lime, #f0bdd7); outline-offset: 4px; }

/* The newest shot, as a little print that slides out from the camera. */
.quick-roll {
  position: absolute; width: 50px; height: 50px; padding: 3px;
  background: #fff4ed; border: 0; border-radius: 12px;
  box-shadow: 0 10px 24px #12080d73, 0 0 0 1px #f0bdd74d;
  rotate: -4deg; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, translate .3s cubic-bezier(.2,.8,.3,1), visibility 0s linear .3s;
}
.quick-roll[hidden] { display: none; }
.quick-roll[data-side=above] { right: 2px; bottom: calc(100% + 10px); translate: 0 12px; }
.quick-roll[data-side=left] { right: calc(100% + 10px); bottom: 2px; translate: 12px 0; }
.quick-roll.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s ease, translate .3s cubic-bezier(.2,.8,.3,1), visibility 0s; }
.quick-roll img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.quick-roll-count {
  position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 11px; background: #f0bdd7; color: #3f2940; box-shadow: 0 0 0 2px #2e2335;
  font: 400 11px/21px var(--sans, sans-serif); text-align: center; rotate: 4deg;
}
.quick-roll-count:empty { display: none; }

/* Shutter: two dark blades meet in the middle and part again, with a soft flash as they open. */
.quick-shutter { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.quick-shutter[hidden] { display: none; }
.quick-shutter-blade { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: linear-gradient(#0c070b, #1d1119); }
.quick-shutter-blade:first-child { top: 0; transform: translateY(-112%); border-bottom: 1px solid #f0bdd738; box-shadow: 0 10px 30px #000b; }
.quick-shutter-blade:nth-child(2) { bottom: 0; transform: translateY(112%); background: linear-gradient(#1d1119, #0c070b); border-top: 1px solid #f0bdd738; box-shadow: 0 -10px 30px #000b; }
.quick-shutter-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 45%, #fffdfb, #fff4ed 55%, #fbe3ef); }

/* Compact: the nearby pills and the caption always keep their usual centred spot and look. When a
   pill row reaches the camera column, the camera itself rises above the caption band and comes back
   down once the pills go. The caption is a <p> that keeps its 14px margin, so with its CSS bottom at
   148px its box spans 162px to about 229px for two lines (22.4px lines plus 11px padding); 239px
   leaves about 10px of air, the same as a one line caption gets. */
body[data-compact=true].quick-camera-lift .quick-camera-dock { bottom: calc(239px + var(--safe-bottom, 0px)); }
/* Narrow phones: the caption box is 268px wide at 320px, so the longest captions wrap to three lines
   (box up to about 251px from the bottom); the camera rises a line further. */
@media (max-width: 340px) {
  body[data-compact=true].quick-camera-lift .quick-camera-dock { bottom: calc(261px + var(--safe-bottom, 0px)); }
}
/* Short landscape phones: the caption stops clear of the camera column. */
@media (max-height: 500px) and (orientation: landscape) {
  body[data-compact=true].has-quick-camera .forest-notice { width: min(330px, 45vw); }
}
/* The caption rests while Tools is open, so no fragment peeks out beside the panel. */
body:has(#forest-kit[open]) .forest-notice { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .quick-roll, .quick-roll.is-shown { translate: 0 0; }
  .quick-camera-dock { transition: opacity .25s ease, visibility 0s linear .25s; }
  .quick-camera-dock.is-ready { transition: opacity .25s ease, visibility 0s; }
}

/* When the print has to share space with the notice caption, the caption steps up above it. */
.forest-notice { transition: opacity .5s, translate .3s cubic-bezier(.2,.8,.3,1); }
body.quick-roll-nudge .forest-notice { translate: -50% -62px; }