/* Photo mode and postcards (js/photo.js, js/postcard.js) */

/* in photo mode the page is the canvas and the bar: every other page element steps aside */
body.photo > *:not(#game):not(#photoBar) { display: none !important; }
body.photo #game { cursor: grab; }

#photoBar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100vw - 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: grid; gap: 8px; justify-items: center;
  padding: 10px 12px; border-radius: 8px; background: rgba(8,34,45,.82); border: 1px solid rgba(240,199,102,.35);
  font-family: var(--f-ui); color: var(--foam); text-shadow: 0 1px 2px #000;
}
#photoBar .ph-hint { margin: 0; font-size: calc(13px * var(--ts)); font-weight: 600; letter-spacing: .03em; text-align: center; opacity: .9; }
#photoBar .ph-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#photoBar .ph-zoom { min-width: 3.2em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.phbtn, .pcchip {
  font: inherit; font-weight: 700; font-size: calc(15px * var(--ts)); min-height: 44px; min-width: 44px; padding: 8px 14px;
  border-radius: 4px; cursor: pointer; background: rgba(246,241,227,.1); color: var(--foam); border: 1px solid rgba(246,241,227,.4);
}
.phbtn:hover, .pcchip:hover { background: rgba(246,241,227,.2); }
.phbtn:disabled, .pcchip:disabled { cursor: default; opacity: .75; }
.phbtn.ph-save { background: var(--brass); border-color: var(--brass); color: #1b1410; text-shadow: none; }
.phbtn.ph-save:hover { background: #d4a13a; }

/* the offer after a boss or a paid sortie: a small chip above the hint, for a few seconds */
.pcchip {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 17;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); background: rgba(8,34,45,.82); border-color: rgba(240,199,102,.55);
}
/* on the victory screen the button sits among the choices */
.v-choices .v-card { order: 1; min-width: 0; }