/* Open the album straight into photographs; the original framing stays intact. */
#album-dialog.album-dialog {
  width:min(100%,620px);
  max-width:100%;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  margin:0 auto;
  padding:0 0 max(12px,env(safe-area-inset-bottom));
  border:0;
  border-radius:0;
  background:#fffdfd;
  color:#302c30;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#album-dialog:not([open]),#photo-dialog:not([open]) { display:none; }
#album-dialog .album-grid {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:4px 12px 12px;
}
#album-dialog .album-row { display:flex; align-items:start; gap:8px; width:100%; }
#album-dialog .album-photo {
  display:block;
  flex-basis:0;
  flex-shrink:1;
  min-width:0;
  padding:0;
  border:0;
  border-radius:3px;
  overflow:hidden;
  background:#f1eeed;
  line-height:0;
}
#album-dialog .album-photo img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  border:0;
  border-radius:0;
}
#album-dialog .album-photo:focus-visible { outline:2px solid var(--red-ink); outline-offset:3px; }
#album-dialog .album-empty { padding:48px 24px; text-align:center; color:#797079; font:14px/1.8 var(--sans); }
#photo-dialog.photo-dialog {
  padding:0;
  background:#181818;
  color:#fffdfd;
  overflow:hidden;
}
#photo-dialog[open] { display:flex; flex-direction:column; }
#photo-dialog::backdrop { background:#181818; }
#photo-dialog .subpage-toolbar { flex:0 0 auto; }
#photo-dialog .subpage-title { font-variant-numeric:tabular-nums; }
#photo-dialog .photo-viewport {
  position:relative;
  inset:auto;
  flex:1;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 12px 0;
  overflow:hidden;
  perspective:1400px;
  container-type:size;
  touch-action:pan-y pinch-zoom;
  overscroll-behavior:contain;
}
#photo-dialog .photo-stage {
  position:relative;
  flex:none;
  width:min(100cqw,calc(100cqh * var(--photo-ratio,.6664)));
  height:min(100cqh,calc(100cqw / var(--photo-ratio,.6664)));
  container:photo-card / size;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,.72,.18,1);
}
#photo-dialog .photo-stage.is-flipped { transform:rotateY(180deg); }
#photo-dialog .photo-front,#photo-dialog .photo-back {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:3px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#photo-dialog .photo-front { padding:0; background:transparent; cursor:pointer; }
#photo-dialog .photo-front img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  user-select:none;
}
#photo-dialog .photo-back {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 20px;
  overflow:auto;
  background:#fffdfa;
  color:#302c30;
  transform:rotateY(180deg);
  pointer-events:none;
}
#photo-dialog .is-flipped .photo-front { pointer-events:none; }
#photo-dialog .is-flipped .photo-back { pointer-events:auto; }
#photo-dialog .photo-back-content { display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; max-width:350px; margin:auto; }
#photo-dialog .photo-ticket-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
#photo-dialog .photo-back-mark {
  display:inline-block;
  color:var(--red-ink,#b52a27);
  font:10px/1.5 var(--sans);
  letter-spacing:1px;
}
#photo-dialog .photo-ticket-seal { display:grid; place-items:center; flex:none; width:25px; height:25px; border:1px solid currentColor; border-radius:50%; color:var(--red-ink,#b52a27); font:16px/1 var(--serif,serif); transform:rotate(9deg); }
#photo-dialog .photo-back h2 { flex:none; margin:0 0 6px; color:#302c30; font:400 clamp(20px,6cqw,28px)/1.5 var(--serif,serif); letter-spacing:1px; }
#photo-dialog .photo-back-note { flex:none; margin:0 0 14px; color:#797079; font:11px/1.7 var(--sans); }
#photo-dialog .photo-scratch-area { position:relative; flex:1 1 170px; width:100%; min-height:85px; max-height:180px; border:1px solid #dcd9d6; border-radius:5px; overflow:hidden; background:#fff; }
#photo-dialog .photo-scratch-canvas { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; touch-action:none; user-select:none; cursor:crosshair; }
#photo-dialog .photo-scratch-canvas[hidden],#photo-dialog .photo-result[hidden],#photo-dialog .photo-next[hidden],#photo-dialog .photo-scratch-undercoat[hidden] { display:none; }
#photo-dialog .photo-scratch-undercoat { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#c7bdb6; background:repeating-linear-gradient(45deg,#fffdf9 0 8px,#f7f4ef 8px 9px); }
#photo-dialog .photo-scratch-undercoat > span { font:40px/1 var(--serif,serif); color:#d3b6af; }
#photo-dialog .photo-scratch-undercoat small { font:11px/1.5 var(--sans); letter-spacing:3px; }
#photo-dialog .photo-result { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:15px; text-align:center; }
#photo-dialog .photo-result-mark { color:#797079; font:10px/1.5 var(--sans); letter-spacing:3px; }
#photo-dialog .photo-result h3 { margin:0; color:#302c30; font:400 21px/1.5 var(--serif,serif); }
#photo-dialog .photo-result p { margin:0; color:#797079; white-space:pre-line; font:11px/1.8 var(--sans); }
#photo-dialog .photo-result.is-winner { background:#fff3ed; box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px #d7b6a8; }
#photo-dialog .is-winner .photo-result-mark,#photo-dialog .is-winner h3 { color:var(--red-ink,#b52a27); }
#photo-dialog .photo-scratch-progress { flex:none; min-height:18px; margin:10px 0 6px; color:#797079; text-align:center; font:10px/1.7 var(--sans); }
#photo-dialog .photo-scratch-assist { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; padding:0; border:0; }
#photo-dialog .photo-scratch-assist:focus,#photo-dialog .photo-scratch-assist.is-fallback { position:static; width:100%; height:auto; min-height:44px; overflow:visible; clip-path:none; white-space:normal; padding:8px; border:1px solid #dcd9d6; background:#fff; color:#302c30; font:12px/1.5 var(--sans); }
#photo-dialog .photo-next {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  flex:none;
  min-height:40px;
  padding:8px 16px;
  border:0;
  border-radius:3px;
  background:var(--red-ink,#b52a27);
  color:#fff;
  font:14px/1.5 var(--sans);
}
#photo-dialog .photo-unflip { display:block; flex:none; min-height:36px; margin:4px auto 0; padding:6px 12px; border:0; background:transparent; color:#797079; font:11px/1.5 var(--sans); }
#photo-dialog .photo-ticket-footer { display:flex; flex:none; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 0; padding-top:10px; border-top:1px dashed #d6ceca; color:#a28f87; font:8px/1.5 var(--sans); letter-spacing:1px; }
#photo-dialog .photo-ticket-footer > span { color:var(--red-ink,#b52a27); letter-spacing:3px; }
#photo-dialog .photo-hint { flex:0 0 auto; margin:0; padding:13px 12px max(16px,env(safe-area-inset-bottom)); color:#ddd4cc; text-align:center; font:11px/1.6 var(--sans); letter-spacing:.4px; }
#photo-dialog button:focus-visible,#photo-dialog .photo-viewport:focus-visible { outline:2px solid #fffdfd; outline-offset:-4px; }
#photo-dialog .photo-back button:focus-visible { outline-color:var(--red-ink,#b52a27); outline-offset:3px; }
@container photo-card (min-aspect-ratio:1/1) {
  #photo-dialog .photo-back { padding:12px; }
  #photo-dialog .photo-back-content { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto auto 1fr auto; gap:5px 12px; max-width:none; }
  #photo-dialog .photo-ticket-heading { grid-area:1 / 1; margin:0; }
  #photo-dialog .photo-back-mark { font-size:8px; }
  #photo-dialog .photo-ticket-seal { display:none; }
  #photo-dialog .photo-back h2 { grid-area:2 / 1; margin:0; font-size:clamp(15px,4.5cqw,21px); line-height:1.6; }
  #photo-dialog .photo-back-note,#photo-dialog .photo-ticket-footer { display:none; }
  #photo-dialog .photo-scratch-area { grid-area:1 / 2 / 4; height:100%; min-height:0; max-height:none; }
  #photo-dialog .photo-scratch-progress { grid-area:4 / 2; align-self:center; margin:0; min-height:0; font-size:8px; }
  #photo-dialog .photo-unflip { grid-area:4 / 1; width:100%; min-height:32px; margin:0; padding:4px; font-size:10px; }
  #photo-dialog .photo-next { grid-area:3 / 1; align-self:end; min-height:34px; padding:5px 8px; font-size:10px; }
  #photo-dialog .photo-result { padding:8px; gap:6px; }
  #photo-dialog .photo-result h3 { font-size:16px; }
  #photo-dialog .photo-result p { font-size:9px; }
  #photo-dialog .photo-result-mark { font-size:8px; letter-spacing:1px; }
}
@media(prefers-reduced-motion:reduce) {
  #album-dialog[open] { animation:none; }
  #photo-dialog .photo-stage { transition:none; }
}