/* ============================================================
   PHOTOSTRIP APP — mysketchbooth.com clone for CanOS
   Exact design: hand-drawn SVG assets + Montserrat font
   ============================================================ */

/* ════════════════════════════════════════════
   FULLSCREEN MODE — always covers the viewport
════════════════════════════════════════════ */
#photostrip-window {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}

#photostrip-window .window-header,
#photostrip-window .resize-handle {
  display: none !important;
}

/* Override window-content padding */
#photostrip-window .window-content {
  padding: 0;
  overflow: hidden;
  height: 100% !important;
  border-radius: 0 !important;
  position: relative;  /* fold button anchors here */
  background: transparent !important;
}

/* ── Root app container ── */
#photostrip-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background: #f6f6f6;
  color: #373737;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 16px;
  gap: 20px;
  overflow: auto;
  /* Triangle cutout at top-right for paper fold button */
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

/* ════════════════════════════════════════════
   SCREEN AREA — centers the screen in available space
   Eye-level + price sticker positioned around it
════════════════════════════════════════════ */
.pbs-screen-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Eye level — absolute, to the left of screen */
.pbs-eye-level-svg {
  display: none;
}

/* ════════════════════════════════════════════
   SKETCH WOBBLE — hand-drawn SVG cycling animation
   3 slightly different SVGs cycle to create a living-sketch effect.
   Each element with multiple versions uses the same keyframe.
════════════════════════════════════════════ */
@keyframes pbs-wobble {
  0%, 33.32%  { visibility: visible; }
  33.33%, 100% { visibility: hidden; }
}

@keyframes pbs-wobble-2 {
  0%, 49.99%  { visibility: visible; }
  50%, 100%   { visibility: hidden; }
}

/* Screen bezel — 3 frames stacked inside .pbs-screen-wrap */
.pbs-screen-svg {
  position: absolute;
  inset: 0;
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-screen-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-screen-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-screen-svg:nth-of-type(3) { animation-delay: -150ms; }

/* Coin panel — 3 frames stacked inside .pbs-coin-wrap */
.pbs-coin-svg {
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-coin-svg ~ .pbs-coin-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.pbs-coin-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-coin-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-coin-svg:nth-of-type(3) { animation-delay: -150ms; }

/* Lightbox frame — 3 frames stacked inside .pbs-lightbox-wrap */
.pbs-lightbox-svg {
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-lightbox-svg ~ .pbs-lightbox-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pbs-lightbox-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-lightbox-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-lightbox-svg:nth-of-type(3) { animation-delay: -150ms; }

/* Instructions — 3 frames inside .pbs-instructions-wrap */
.pbs-instructions-svg {
  display: block;
  width: 100%;
  height: auto;
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-instructions-svg ~ .pbs-instructions-svg {
  position: absolute;
  top: 0;
  left: 0;
}
.pbs-instructions-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-instructions-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-instructions-svg:nth-of-type(3) { animation-delay: -150ms; }

/* Price sticker — 2 frames inside .pbs-badge-wrap */
.pbs-badge-svg {
  animation: pbs-wobble-2 300ms steps(1) infinite;
}
.pbs-badge-svg ~ .pbs-badge-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pbs-badge-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-badge-svg:nth-of-type(2) { animation-delay: -150ms; }

/* Screen wrapper — width-based with aspect-ratio computing height */
.pbs-screen-wrap {
  position: relative;
  aspect-ratio: 312 / 395;
  width: 100%;
  max-width: 360px;
}

.pbs-screen-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Interactive content overlaid on the inner frame of screen1.svg.
   The inner frame path sits at ~9% left/right, ~7% top, ~6% bottom
   of the SVG viewBox (312×395). */
.pbs-screen-content {
  position: absolute;
  top: 10%;
  left: 11%;
  right: 11%;
  bottom: 10%;
  overflow: hidden;
  background: #fff;
  z-index: 1;
}

/* Screen SVG bezels render above content so edges frame it */
.pbs-screen-svg {
  z-index: 2;
  pointer-events: none;
}

/* ── Toggle row ── */
.pbs-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pbs-toggle-label {
  font-size: 16px;
  font-weight: 700;
  color: #373737;
  letter-spacing: 0.5px;
}

.pbs-toggle-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.pbs-toggle-wrap input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 2;
}

.pbs-toggle-img {
  display: block;
  width: 72px;
  pointer-events: none;
}

/* Price badge — absolute, to the right of screen */
.pbs-badge-wrap {
  position: absolute;
  left: calc(100% + 2.5rem);
  bottom: 10%;
  width: 6.75rem;
  z-index: 2;
}

.pbs-badge-svg {
  display: block;
  width: 100%;
}

/* Text overlay removed — SVG now has text baked in */
.pbs-badge-text {
  display: none;
}

/* Coin panel — natural height so button overlay % maps to actual SVG */
.pbs-coin-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.pbs-coin-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Button overlay — positioned over the coin panel button area */
.pbs-coin-btn-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18%;
}

.pbs-ctrl-label {
  font-size: 18px;
  font-weight: 700;
  color: #373737;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  line-height: 1;
  margin-bottom: 2px;
}

.pbs-ctrl-btn {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 2px solid #000;
  cursor: pointer;
  transition: transform 0.1s;
  font-size: 0;
}

.pbs-ctrl-btn--red {
  background: radial-gradient(circle at 38% 35%, #ff7070, #cc0000);
  box-shadow: 0 2px 0 #880000;
}

.pbs-ctrl-btn--green {
  background: radial-gradient(circle at 38% 35%, #70ee70, #009900);
  box-shadow: 0 2px 0 #005500;
}

.pbs-ctrl-btn:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

/* ════════════════════════════════════════════
   LIGHTBOX ROW — decorative frame at the top
════════════════════════════════════════════ */
.pbs-lightbox-row {
  flex-shrink: 0;
  width: 100%;
  max-width: 210px;
}

.pbs-lightbox-wrap {
  position: relative;
}

.pbs-lightbox-svg {
  display: block;
  width: 100%;
}

/* ════════════════════════════════════════════
   BOTTOM ROW — instructions + coin panel side by side
════════════════════════════════════════════ */
.pbs-bottom-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  flex-shrink: 0;
}

.pbs-instructions-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

.pbs-coin-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 94px;
  position: relative;
}

/* Label floats above the coin panel so tops align with instructions */
.pbs-coin-area .pbs-ctrl-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   SCREEN STATES (inside .pbs-screen-content)
════════════════════════════════════════════ */
.pbs-screen {
  display: none;
  position: absolute;
  inset: 0;
}

.pbs-screen.pbs-active {
  display: flex;
}

/* Frame select */
.pbs-frame-state {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
}

#pbs-frame-canvas {
  display: block;
  max-width: 85%;
  max-height: 85%;
}

.pbs-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: none;
  border: none;
  border-radius: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pbs-nav-arrow:hover { opacity: 0.6; }
.pbs-nav-arrow--left  { left: 12px; }
.pbs-nav-arrow--right { right: 12px; }

.pbs-nav-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.pbs-nav-img--flip {
  transform: scaleX(-1);
}

.pbs-frame-name-bar {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  color: #373737;
  background: rgba(246,246,246,0.88);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

/* Input choice */
.pbs-input-choice-state {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
}

.pbs-choice-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  background: #f6f6f6;
  border: 1.5px solid #000;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  color: #373737;
  width: 150px;
  justify-content: center;
  transition: background 0.1s;
  letter-spacing: 0.3px;
}
.pbs-choice-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.pbs-choice-icon--camera {
  width: 24px;
  height: 24px;
}
.pbs-choice-btn:hover  { background: #ebebeb; }
.pbs-choice-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }

/* Upload grid */
.pbs-upload-state {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  box-sizing: border-box;
  background: #fff;
}

.pbs-upload-slot {
  background: #f6f6f6;
  border: 1.5px dashed #000;
  border-radius: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.pbs-upload-slot:hover { background: #ebebeb; }

.pbs-slot-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.pbs-plus-icon {
  font-size: 22px;
  color: #aaa;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
}

.pbs-slot-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Camera */
.pbs-camera-state {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#pbs-video {
  flex: 1;
  width: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.pbs-cam-light {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #333;
  z-index: 5;
}
.pbs-cam-light--red   { background: #cc0000; box-shadow: 0 0 6px #cc0000; }
.pbs-cam-light--green { background: #00cc00; box-shadow: 0 0 6px #00cc00; }

.pbs-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  font-family: 'Montserrat', monospace;
  z-index: 4;
}
.pbs-countdown--show { opacity: 1; }

.pbs-cam-thumbs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(0,0,0,0.7);
  flex-shrink: 0;
}

.pbs-cam-thumb {
  flex: 1;
  height: 34px;
  background: #222;
  border: 1px solid #444;
  border-radius: 1px;
  overflow: hidden;
}
.pbs-cam-thumb.pbs-thumb--filled { border-color: #888; }

/* ════════════════════════════════════════════
   DELIVERY SCREEN (full overlay)
════════════════════════════════════════════ */
#pbs-screen-delivery {
  /* Break out of .pbs-screen-content and cover the full app */
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  padding: 20px 16px 14px;
  gap: 16px;
}

.pbs-delivery-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

.pbs-delivery-box {
  position: relative;
  width: 72%;
  max-width: 280px;
  padding: 18px 22px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 2px;
  text-align: center;
  box-shadow: 3px 3px 0 #000;
}

.pbs-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ddd, #888);
  border: 1px solid #555;
}
.pbs-screw::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  width: 5px; height: 1px;
  background: #555;
}
.pbs-screw--tl { top: 5px; left: 5px; }
.pbs-screw--tr { top: 5px; right: 5px; }
.pbs-screw--bl { bottom: 5px; left: 5px; }
.pbs-screw--br { bottom: 5px; right: 5px; }

#pbs-delivery-msg {
  font-size: 11px;
  font-weight: 800;
  color: #373737;
  line-height: 1.6;
  letter-spacing: 0.3px;
  font-family: 'Montserrat', sans-serif;
}

.pbs-delivery-arrow {
  font-size: 20px;
  color: #373737;
  margin-top: 6px;
  display: block;
  animation: pbs-bounce 1.2s ease infinite;
}

@keyframes pbs-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

.pbs-delivery-slot-wrap {
  width: 100%;
  max-width: 180px;
  background: none;
  border: none;
  min-height: 80px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Pickup box SVGs — wobble animation */
.pbs-pickup-svg {
  display: block;
  width: 100%;
  height: auto;
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-pickup-svg ~ .pbs-pickup-svg {
  position: absolute;
  top: 0;
  left: 0;
}
.pbs-pickup-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-pickup-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-pickup-svg:nth-of-type(3) { animation-delay: -150ms; }

#pbs-delivery-strip {
  width: 56px;
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%) translateY(-110%);
  z-index: 3;
}
#pbs-delivery-strip canvas {
  width: 100%;
  display: block;
}
#pbs-delivery-strip.pbs-slide-up {
  animation: pbs-strip-emerge 1.8s ease-out forwards;
}

@keyframes pbs-strip-emerge {
  0%   { transform: translateX(-50%) translateY(-110%); }
  40%  { transform: translateX(-50%) translateY(-30%); }
  70%  { transform: translateX(-50%) translateY(15%); }
  100% { transform: translateX(-50%) translateY(30%); }
}

#pbs-pickup-btn {
  display: none;
  padding: 8px 0;
  width: 72%;
  max-width: 280px;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  color: #373737;
  text-align: center;
  letter-spacing: 0.5px;
}
#pbs-pickup-btn.pbs-active { display: block; }
#pbs-pickup-btn:hover { background: #f0f0f0; }

/* ════════════════════════════════════════════
   RESULT SCREEN (full overlay)
════════════════════════════════════════════ */
#pbs-screen-result {
  /* Break out of .pbs-screen-content and cover the full app */
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  padding: 14px 16px;
  gap: 28px;
  overflow: auto;
}

.pbs-result-center {
  flex-shrink: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

#pbs-result-canvas {
  display: block;
  max-height: 70vh;
  width: 100%;
  object-fit: contain;
  box-shadow: 6px 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
#pbs-result-canvas:hover {
  transform: rotate(-3deg) scale(1.03);
  box-shadow: 10px 10px 24px rgba(0,0,0,0.4);
}

.pbs-result-strip-wrap {
  position: relative;
  display: inline-block;
  max-width: 38%;
  max-height: 100%;
}

.pbs-result-annotation {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 140px;
  height: auto;
}
.pbs-ra-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  animation: pbs-wobble 450ms steps(1) infinite;
}
.pbs-ra-svg:nth-of-type(1) { animation-delay: 0ms; }
.pbs-ra-svg:nth-of-type(2) { animation-delay: -300ms; }
.pbs-ra-svg:nth-of-type(3) { animation-delay: -150ms; }

.pbs-result-tag {
  position: absolute;
  bottom: 0;
  right: calc(100% + 10px);
  width: 140px;
}
.pbs-tag-svg {
  width: 100%;
  height: auto;
}

.pbs-result-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pbs-res-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  color: #373737;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.1s;
  letter-spacing: 0.3px;
}
.pbs-res-btn:hover  { background: #f0f0f0; }
.pbs-res-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.pbs-res-btn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: #aaa;
  color: #888;
}

/* ════════════════════════════════════════════
   PAPER FOLD EXIT BUTTON (top-right corner)
   Square with diagonal — top-right = peek-through, bottom-left = folded page
════════════════════════════════════════════ */
.pbs-fold {
  position: fixed;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  z-index: 10001;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.2s ease, height 0.2s ease;
}

/* Bottom-left triangle — the folded-back paper flap */
.pbs-fold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ddd 0%, #f5f5f5 100%);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Top-right triangle — transparent, reveals OS desktop behind */
.pbs-fold::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.pbs-fold:hover {
  width: 68px;
  height: 68px;
}
.pbs-fold:hover::before {
  background: linear-gradient(135deg, #ccc 0%, #eee 100%);
}
.pbs-fold.pbs-fold-hiding {
  animation: pbs-fold-btn-hide 0.3s ease-in forwards;
  pointer-events: none;
}
@keyframes pbs-fold-btn-hide {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Triangle cutout so fold button peeks through on fixed overlays */
#pbs-screen-delivery.pbs-active,
#pbs-screen-result.pbs-active {
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
#pbs-screen-delivery.pbs-overlay-exiting,
#pbs-screen-result.pbs-overlay-exiting {
  clip-path: none;
}

/* ════════════════════════════════════════════
   FOLD EXIT ANIMATION — diagonal page roll from top-right to bottom-left
════════════════════════════════════════════ */
#photostrip-app.pbs-exiting,
.pbs-screen.pbs-overlay-exiting {
  animation: pbs-fold-exit 0.9s ease-in forwards;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom left, transparent 33.3%, #000 66.6%);
  mask-image: linear-gradient(to bottom left, transparent 33.3%, #000 66.6%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
}

@keyframes pbs-fold-exit {
  0% {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
  }
  100% {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
  }
}

/* ════════════════════════════════════════════
   CROP MODAL
════════════════════════════════════════════ */
#pbs-crop-modal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 50;
  align-items: center;
  justify-content: center;
}
#pbs-crop-modal.pbs-active { display: flex; }

.pbs-crop-box {
  background: #f6f6f6;
  border: 2px solid #000;
  border-radius: 2px;
  padding: 16px;
  width: 90%;
  max-width: 520px;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
}

.pbs-crop-title {
  font-size: 13px;
  font-weight: 800;
  color: #373737;
  font-family: 'Montserrat', sans-serif;
}

.pbs-crop-img-wrap {
  position: relative;
  overflow: auto;
  max-height: 55vh;
  background: #f6f6f6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#pbs-crop-img {
  display: block;
  max-width: 100%;
  user-select: none;
}

#pbs-crop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
}

.pbs-crop-hint {
  font-size: 9px;
  color: #888;
  font-family: 'Montserrat', sans-serif;
}

.pbs-crop-actions {
  display: flex;
  gap: 8px;
}

.pbs-crop-btn {
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  border-radius: 2px;
  cursor: pointer;
  border: 1.5px solid #000;
  background: #fff;
  color: #373737;
  box-shadow: 2px 2px 0 #000;
}
.pbs-crop-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.pbs-crop-btn--primary {
  background: #373737;
  color: #f6f6f6;
  border-color: #000;
}
.pbs-crop-btn--primary:hover { background: #444; }

/* ════════════════════════════════════════════
   MOBILE RESPONSIVE
   Preserves desktop structure, scales proportionally
════════════════════════════════════════════ */
@media (max-width: 768px) {
  #photostrip-app {
    padding: 24px 8px 10px;
    gap: 10px;
    justify-content: flex-start;
  }

  /* Scale lightbox proportionally */
  .pbs-lightbox-row {
    max-width: 80vw;
  }

  /* Scale screen proportionally to viewport */
  .pbs-screen-wrap {
    max-width: 50vw;
  }

  /* Tighten badge position and shrink */
  .pbs-badge-wrap {
    left: calc(100% + 1rem);
    width: 5rem;
  }

  /* Bottom row — keep horizontal, scale down */
  .pbs-bottom-row {
    max-width: 95vw;
    gap: 10px;
  }

  .pbs-coin-area {
    width: 76px;
  }

  /* Slightly smaller toggle */
  .pbs-toggle-label {
    font-size: 12px;
  }

  .pbs-toggle-img {
    width: 48px;
  }

  /* Smaller control text/buttons */
  .pbs-ctrl-label {
    font-size: 15px;
  }

  .pbs-ctrl-btn {
    width: 24px;
    height: 24px;
  }

  .pbs-coin-area .pbs-ctrl-label {
    top: -20px;
  }

  /* Choice buttons inside screen */
  .pbs-choice-btn {
    width: 120px;
    padding: 7px 12px;
    font-size: 10px;
  }

  /* Delivery screen */
  #pbs-screen-delivery {
    padding: 16px 12px 10px;
    gap: 12px;
  }

  .pbs-delivery-box {
    width: 80%;
    max-width: 250px;
    padding: 14px 16px;
  }

  /* Result screen */
  #pbs-screen-result {
    padding: 10px 12px;
    gap: 16px;
  }

  #pbs-result-canvas {
    max-height: 60vh;
  }

  .pbs-result-strip-wrap {
    max-width: 50%;
  }

  /* Scale down result annotations */
  .pbs-result-annotation {
    width: 100px;
    left: calc(100% + 6px);
  }

  .pbs-result-tag {
    width: 100px;
    right: calc(100% + 6px);
  }

  .pbs-res-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Crop modal */
  .pbs-crop-img-wrap {
    max-height: 45vh;
  }

  /* Fold button — slightly smaller */
  .pbs-fold {
    width: 44px;
    height: 44px;
  }
  .pbs-fold:hover {
    width: 52px;
    height: 52px;
  }

  #photostrip-app {
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  }
  #pbs-screen-delivery.pbs-active,
  #pbs-screen-result.pbs-active {
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  }
}

/* Extra small screens (iPhone SE 375px, etc.) */
@media (max-width: 380px) {
  #photostrip-app {
    padding: 8px 6px;
    gap: 8px;
  }

  .pbs-screen-wrap {
    max-width: 48vw;
  }

  .pbs-lightbox-row {
    max-width: 75vw;
  }

  /* Hide badge on very small screens */
  .pbs-badge-wrap {
    display: none;
  }

  /* Hide annotations on very small screens */
  .pbs-result-annotation,
  .pbs-result-tag {
    display: none;
  }

  .pbs-result-strip-wrap {
    max-width: 60%;
  }

  .pbs-res-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* ════════════════════════════════════════════
   WIN XP THEME OVERRIDE — keep photobooth looking
   like macOS (hand-drawn sketch style) in WinXP
════════════════════════════════════════════ */
body.theme-winxp .pbs-choice-btn,
body.theme-winxp .pbs-res-btn,
body.theme-winxp .pbs-crop-btn,
body.theme-winxp #pbs-pickup-btn {
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #000;
  color: #373737;
  font-family: 'Montserrat', sans-serif;
}
body.theme-winxp .pbs-choice-btn:hover,
body.theme-winxp .pbs-res-btn:hover,
body.theme-winxp .pbs-crop-btn:hover,
body.theme-winxp #pbs-pickup-btn:hover {
  background: #ebebeb;
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
}
body.theme-winxp .pbs-choice-btn:active,
body.theme-winxp .pbs-res-btn:active,
body.theme-winxp .pbs-crop-btn:active,
body.theme-winxp #pbs-pickup-btn:active {
  background: #ebebeb;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}
body.theme-winxp .pbs-res-btn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: #aaa;
  color: #888;
}
body.theme-winxp .pbs-crop-btn--primary {
  background: #373737;
  color: #f6f6f6;
  border-color: #000;
}
body.theme-winxp .pbs-crop-btn--primary:hover {
  background: #444;
}
body.theme-winxp .pbs-ctrl-btn {
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: none;
}
body.theme-winxp .pbs-ctrl-btn--green {
  background: radial-gradient(circle at 38% 35%, #70ee70, #009900);
  box-shadow: 0 2px 0 #005500;
}
body.theme-winxp .pbs-ctrl-btn--red {
  background: radial-gradient(circle at 38% 35%, #ff7070, #cc0000);
  box-shadow: 0 2px 0 #880000;
}
body.theme-winxp .pbs-nav-arrow {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.theme-winxp .pbs-nav-arrow:hover {
  opacity: 0.6;
  box-shadow: none;
}
body.theme-winxp .pbs-slot-x {
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  box-shadow: none;
}