body.photo-mode .hud,
body.photo-mode .room-ui { display: none !important; }
body.photo-mode { cursor: crosshair; }

.photo-ui { position: fixed; inset: 0; pointer-events: none; z-index: 8000; }
.photo-corner { position: absolute; width: 48px; height: 48px; border: 0 solid var(--fg); filter: drop-shadow(0 4px 0 var(--ink)); }
.photo-corner.tl { left: 32px; top: 32px; border-left-width: 6px; border-top-width: 6px; }
.photo-corner.tr { right: 32px; top: 32px; border-right-width: 6px; border-top-width: 6px; }
.photo-corner.bl { left: 32px; bottom: 32px; border-left-width: 6px; border-bottom-width: 6px; }
.photo-corner.br { right: 32px; bottom: 32px; border-right-width: 6px; border-bottom-width: 6px; }
.photo-hint {
  position: absolute; left: 50%; bottom: 44px; translate: -50% 0;
  font-family: 'Pixelify Cases', monospace; font-weight: 600; font-size: 16px; line-height: 1;
  color: var(--fg); background: var(--bg3); padding: 12px 18px; white-space: nowrap;
  text-box: trim-both cap alphabetic;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 3px 0 0 var(--hi), inset 0 -4px 0 0 var(--lo);
}

.photo-polaroid {
  position: fixed; right: 24px; bottom: 24px; z-index: 8100; pointer-events: none;
  background: #ece6d6; padding: 12px 12px 8px; width: 244px;
  translate: 300px 0; rotate: 3deg; opacity: 0;
  transition: translate .45s var(--spring), opacity .3s;
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 10px 0 0 var(--lo);
}
.photo-polaroid.in { translate: 0 0; opacity: 1; }
.photo-polaroid canvas { display: block; width: 220px; height: auto; background: var(--bg); }
.photo-cap {
  margin-top: 10px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-family: 'Pixelify Cases', monospace; font-weight: 700; font-size: 14px; line-height: 1;
  color: #3a372f; text-box: trim-both cap alphabetic;
}