/* desk-v2.css */
.stage .film-camera { width:110%; max-width:285px; transform:rotate(-4deg); }
@media(max-width:650px) {
.stage .film-camera { grid-column:3 / span 2; }
}

/* interactions.css */
.film-camera .object-photo {
  aspect-ratio:3 / 2;
  clip-path:polygon(15% 14.7%,28% 14.7%,31% 14.5%,31% 14.1%,67% 14.1%,71% 13.8%,76% 12.7%,83% 12.7%,87% 13.6%,90% 15.4%,92% 18%,93.7% 22%,94.6% 27%,95% 32%,94.7% 37%,93.5% 43%,92% 48%,91.7% 54%,92.5% 61%,92.6% 70%,91.8% 77%,90% 81.2%,87% 84%,81% 85.5%,69% 85.5%,54% 85%,31% 85%,18% 84.9%,13% 84%,10% 82%,8% 78%,6.8% 71%,6.8% 65%,7.4% 58%,8% 53%,8% 49%,6.8% 42%,5.5% 36%,5% 30%,5.8% 24%,7.3% 20%,9.5% 17%,12% 15.5%);
}
.object-dialog[data-room="photos"] { width:min(1050px,calc(100vw - 20px)); border:0; border-radius:0; background:none; box-shadow:none; overflow:auto; }
[data-room="photos"] .dialog-inner { padding:32px 12px 18px; }
[data-room="photos"] .dialog-head { position:absolute; top:0; right:0; z-index:3; }
[data-room="photos"] .dialog-head > div { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[data-room="photos"] .dialog-close { width:34px; height:34px; min-height:34px; padding:0; font:26px/1 var(--ui); }
.photo-print { width:fit-content; margin:0 auto; padding:clamp(8px,1.6vw,18px); background:#fffdf8; box-shadow:0 2px 3px #0003,4px 18px 45px #14201780; transform:rotate(-1deg); }
.photo-print img { display:block; width:auto; height:auto; max-width:100%; max-height:73svh; object-fit:contain; }
.photo-navigation { justify-content:center; align-items:center; gap:12px; padding-top:12px; color:#fffdf6c7; font:11px/1.2 var(--ui); letter-spacing:.08em; text-transform:lowercase; text-shadow:0 1px 3px #101b19; }
.photo-navigation:not([hidden]) { display:flex; }
.photo-navigation button { min-width:36px; min-height:30px; padding:0; border:0; background:transparent; color:inherit; border-radius:0; font:19px/1 var(--ui); cursor:pointer; opacity:.72; }
.photo-navigation button:hover,.photo-navigation button:focus-visible { opacity:1; }
.photo-print { position:relative; }
.photo-print img[hidden],.photo-print video[hidden] { display:none; }
.photo-print video { display:block; width:auto; height:auto; max-width:100%; max-height:73svh; object-fit:contain; background:#111; }
#photo-live { position:absolute; left:26px; top:26px; padding:4px 9px; min-height:30px; border:1px solid #ffffff80; border-radius:4px; background:#1c2329a8; color:#fff; font:12px var(--ui); cursor:pointer; }
#photo-live[aria-pressed="true"] { color:#ffdc67; }


/* Gallery arrows match the Etch A Sketch's round keyboard buttons. */
.photo-navigation button { width:42px; min-width:42px; height:42px; min-height:42px; padding:0; border:1px solid #d9d3c5; border-radius:50%; background:#f2eee4; color:#7e1b18; box-shadow:0 5px 10px #0004; font-size:19px; opacity:1; }
.photo-navigation button:hover,.photo-navigation button:focus-visible { background:#fffdf4; }

/* The camera becomes a small browser-local instant camera. */
.photo-navigation .photo-text-button { width:auto; min-width:auto; border-radius:5px; padding:0 17px; font:14px Georgia,serif; }
.photo-selfie { position:relative; overflow:hidden; }
.photo-selfie video { display:block; width:min(680px,calc(100vw - 76px),68svh); aspect-ratio:1; object-fit:cover; transform:scaleX(-1); filter:saturate(.76) contrast(1.08) sepia(.12); background:#151515; }
.photo-selfie canvas { display:block; width:auto; max-width:min(620px,calc(100vw - 44px)); height:auto; max-height:74svh; border:1px solid #8d74544a; background:#eee6d6; box-shadow:1px 2px 2px #0005,7px 24px 52px #14201799; }
.photo-selfie video[hidden],.photo-selfie canvas[hidden] { display:none; }
.photo-print.is-selfie:not(.is-printed) .photo-selfie::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px 12px #170f0a96; background:linear-gradient(104deg,#f5bb7210,#421d0f14); }
.photo-print.is-selfie { padding:8px; transform:rotate(-1deg); background:#171715; }
.photo-print.is-printed { padding:0; transform:rotate(.6deg); background:transparent; box-shadow:none; }
.photo-selfie-controls { min-height:48px; }
.photo-navigation .photo-shutter { position:relative; width:48px; min-width:48px; height:48px; min-height:48px; border-color:#ffffffb5; background:transparent; }
.photo-shutter span { position:absolute; inset:5px; border-radius:50%; background:#f7f2e7; box-shadow:inset 0 0 0 1px #7e1b1830; }
.photo-shutter:hover span,.photo-shutter:focus-visible span { background:#fff; }
.photo-flash { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; background:#fff; }
.photo-flash.is-flashing { animation:photo-flash 280ms ease-out; }
.photo-selfie canvas.is-developing { animation:photo-develop 2.4s ease-out both; }
.photo-status { min-height:18px; margin:6px 0 0; color:#fffdf6; text-align:center; text-shadow:0 2px 5px #000; font:13px/1.35 Georgia,serif; }
.photo-status:empty { visibility:hidden; }
@keyframes photo-flash { 0% { opacity:.98; } 100% { opacity:0; } }
@keyframes photo-develop {
  0% { filter:brightness(.48) sepia(.9) saturate(.3); opacity:.72; }
  35% { filter:brightness(.72) sepia(.58) saturate(.55); opacity:.88; }
  100% { filter:none; opacity:1; }
}
@media(max-width:650px) {
  .photo-navigation { gap:9px; }
  .photo-navigation .photo-text-button { padding:0 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-flash.is-flashing,.photo-selfie canvas.is-developing { animation:none; }
}

/* A compact, worn mall photobooth replaces the single-shot selfie camera. */
.photo-print.is-selfie:not(.is-printed) { padding:clamp(12px,2vw,22px); border:2px solid #78756d; border-radius:20px; background:linear-gradient(110deg,#312f2b,#161616 45%,#393630); box-shadow:inset 0 0 0 4px #080808,inset 0 0 26px #000,5px 24px 55px #101814a8; transform:rotate(-.3deg); }
.photo-booth-preview { position:relative; width:min(720px,calc(100vw - 78px),72svh); aspect-ratio:4 / 3; overflow:hidden; border:9px ridge #aaa69b; border-radius:8px; background:#080808; box-shadow:inset 0 0 45px #000,0 0 0 4px #24231f; }
.photo-booth-preview::after { content:""; position:absolute; z-index:6; inset:0; pointer-events:none; background:linear-gradient(100deg,#f8dda80d,transparent 33%,#37180518),radial-gradient(ellipse at center,transparent 56%,#09060375); box-shadow:inset 0 0 32px #0008; }
.photo-selfie .photo-booth-preview video { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; transform:scaleX(-1); filter:saturate(.78) contrast(1.08) sepia(.1); }
.photo-prop { position:absolute; z-index:4; min-width:0!important; min-height:0!important; padding:0!important; border:0!important; background:transparent; box-shadow:none!important; transform:translate(-50%,-50%); cursor:grab!important; touch-action:none; filter:drop-shadow(0 3px 3px #0008); }
.photo-prop:active { cursor:grabbing!important; }
.photo-prop:disabled { pointer-events:none; opacity:1; }
.photo-prop img { display:block; width:100%; height:auto; user-select:none; }
.photo-countdown { position:absolute; z-index:8; left:50%; top:50%; color:#ff4d32; font:700 clamp(64px,15vw,124px)/1 var(--digital); text-shadow:0 0 7px #ff3d24,3px 4px #240300; transform:translate(-50%,-50%); }
.photo-sequence { position:absolute; z-index:8; right:13px; top:10px; color:#ff613e; font:18px/1 var(--digital); letter-spacing:.14em; text-shadow:0 0 5px #ff3d24,1px 2px #240300; }
.photo-selfie canvas { width:auto; max-width:min(330px,calc(100vw - 52px)); max-height:74svh; }
.photo-print.is-printed { filter:drop-shadow(6px 20px 30px #101814a0); }
.photo-selfie-controls { gap:18px; }
.photo-navigation .retro-icon-button { width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; opacity:1; }
@media(max-width:650px) {
  .photo-booth-preview { width:calc(100vw - 54px); }
  .photo-print.is-selfie:not(.is-printed) { padding:9px; }
  .photo-navigation .retro-icon-button { width:52px!important; min-width:52px!important; height:52px!important; min-height:52px!important; }
}
.photo-email-form { position:fixed; z-index:10; left:50%; top:50%; box-sizing:border-box; width:min(470px,calc(100vw - 32px)); margin:0; padding:13px; border:1px solid #8e897d; border-radius:6px; background:#eeeae0; box-shadow:0 10px 30px #0008; font:13px Tahoma,Arial,sans-serif; transform:translate(-50%,-50%); }
.photo-email-form textarea,.photo-email-form input { box-sizing:border-box; width:100%; margin:0 0 8px; padding:8px 10px; border:1px inset #aaa59a; background:#fffef9; color:#343833; font:13px/1.35 Tahoma,Arial,sans-serif; }
.photo-email-form textarea { resize:vertical; }
.photo-email-form div { display:flex; justify-content:flex-end; gap:8px; }
.photo-email-form button { min-width:74px; min-height:32px; border:1px outset #b8b4aa; background:#e8e5dd; font:13px Tahoma,Arial,sans-serif; cursor:pointer; }
.photo-email-form p { min-height:18px; margin:8px 0 0; }
.photo-email-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

/* A small soundtrack strip beneath the photographs. */
.photo-story { width:min(440px,100%); margin:10px auto 0; font:12px/1.4 var(--ui); color:#fffdf6; }
.photo-story[hidden] { display:none; }
.photo-story-controls { display:flex; align-items:center; justify-content:center; gap:9px; }
.photo-story-controls button { flex-shrink:0; width:34px; min-height:34px; padding:0; border:1px solid #d9d3c5; border-radius:50%; background:#f2eee4; color:#7e1b18; cursor:pointer; font:14px var(--ui); }
.photo-story-controls button[hidden] { display:none; }
.photo-story-controls :focus-visible { outline:2px solid #ffdc67; outline-offset:3px; }
.photo-story-embed { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.photo-story-embed iframe { display:block; width:440px; height:80px; border:0; }
#photo-story-status { margin:5px 0 0; text-align:center; font:11px/1.4 var(--ui); }
#photo-story-status:empty { display:none; }
@media(max-width:650px) {
  .photo-story { margin-top:8px; }
  }
/* Let controls follow the actual print, including wide landscape photographs. */
[data-room="photos"] .dialog-inner { padding:24px 12px 20px; }
#photos-room.is-story .photo-stage { display:flex; align-items:center; justify-content:center; }
#photos-room.is-story .photo-print { max-width:100%; }
#photos-room .photo-print > img,
#photos-room .photo-print > video { max-height:max(80px,calc(100dvh - 310px)); }
#photos-room .photo-navigation { gap:clamp(10px,2vw,18px); padding-top:20px; }
#photos-room .photo-story { margin-top:12px; }
#photos-room #photo-status:empty { display:none; }
@media(max-height:550px) {
  [data-room="photos"] .dialog-inner { padding-top:12px; padding-bottom:12px; }
  #photos-room .photo-navigation { padding-top:12px; }
  #photos-room .photo-story { margin-top:8px; }
  #photos-room .photo-print > img,
  #photos-room .photo-print > video { max-height:max(60px,calc(100dvh - 260px)); }
}

/* Handwritten flick call-to-action while a photo story plays; fades after the first skip. */
.photo-story-flick-hint { position:absolute; right:2px; bottom:-32px; display:inline-flex; align-items:flex-end; gap:3px; color:#fffdf6e0; font:20px/1 var(--hand); letter-spacing:.02em; transform:rotate(-4deg); transition:opacity .45s ease; pointer-events:none; text-shadow:0 1px 4px #101b19; }
.photo-story-flick-hint.is-gone { opacity:0; }
.photo-print.is-selfie .photo-story-flick-hint { display:none; }

/* Flick through the prints like a pile of photos. */
.photo-stage { position:relative; }
.photo-print-anchor { position:relative; width:fit-content; margin:0 auto; }

/* A photographic booth sits centered beneath the photo and its navigation. */
#photos-room #photo-selfie-start { position:relative; display:block; margin:12px auto 0; width:76px!important; min-width:76px!important; height:84px!important; min-height:84px!important; }
#photos-room #photo-selfie-start::before { background-image:url('../../assets/photobooth/booth-icon.png'); background-size:contain; background-position:center; }
#photos-room #photo-selfie-start[hidden] { display:none; }
@media(max-width:650px) { #photos-room #photo-selfie-start { width:68px!important; min-width:68px!important; height:76px!important; min-height:76px!important; } }
.photo-print { touch-action:pan-y; user-select:none; }
.photo-print:not(.is-selfie) { cursor:grab; }
.photo-print.is-dragging { cursor:grabbing; }
.photo-print img { -webkit-user-drag:none; }
.photo-ghost { position:absolute; z-index:5; margin:0; pointer-events:none; }

/* Handwritten flick call-to-action; fades after the first flick. On phones it tucks against the
   print's corner; on desktop it sits in the control row where the count used to be, arrow up at the print. */
.photo-flick-hint { position:absolute; right:2px; bottom:-32px; display:none; align-items:flex-end; gap:3px; color:#fffdf6e0; font:20px/1 var(--hand); letter-spacing:.02em; transform:rotate(-4deg); transition:opacity .45s ease; pointer-events:none; text-shadow:0 1px 4px #101b19; }
@media(max-width:650px) { .photo-flick-hint:not([hidden]) { display:inline-flex; } }
.photo-flick-hint.is-gone { opacity:0; }
.photo-print.is-selfie .photo-flick-hint { display:none; }
.photo-flick-hint-row { display:none; align-items:flex-end; gap:3px; color:#fffdf6e0; font:20px/1 var(--hand); letter-spacing:.02em; transform:rotate(-3deg); transition:opacity .45s ease; pointer-events:none; text-shadow:0 1px 4px #101b19; }
@media(min-width:651px) { .photo-flick-hint-row:not([hidden]) { display:inline-flex; } }
.photo-flick-hint-row.is-gone { opacity:0; }
@media(min-width:651px) { #photo-count { display:none; } }

.object-dialog[data-room="photos"]:has(#photo-selfie:not([hidden])) > .keyboard-shuffle { display:none; }

#photo-booth-scene { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.photo-prop.is-random { aspect-ratio:1; background-image:url('../../assets/photobooth/props-atlas.png')!important; background-size:400% 400%!important; background-repeat:no-repeat!important; }
.photo-prop.is-random img { visibility:hidden; aspect-ratio:1; }

.photo-print-anchor { perspective:1200px; }
.photo-print { box-shadow:0 2px 0 #c8c0ad,0 4px 0 -1px #eee5d4,2px 8px 14px #17110d66; }
.photo-print.is-dragging { box-shadow:2px 4px 0 #c8c0ad,9px 22px 22px #17110d66; border-radius:2px 8px 16px 3px; }
#photo-selfie-start.physical-pressed { box-shadow:inset 0 3px 4px #0008; }
@media(prefers-reduced-motion:reduce) { .photo-print.is-dragging { border-radius:2px; } }