/* Photo mode and pet portraits (M14, track AG; expansions-round2.md 2.1). */

/* photo mode: everything but the picture (and this) tucked away */
body.photo-on > *:not(#game):not(#photo-ui):not(#panel-root):not(#overlay):not(#toasts):not(#offline):not(script) { display: none !important; }
#photo-ui { position: fixed; inset: 0; z-index: 18; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#photo-ui:active { cursor: grabbing; }
.ph-guide { position: absolute; box-shadow: 0 0 0 100vmax rgba(10, 8, 20, 0.42); outline: 2px solid rgba(255, 246, 224, 0.9); outline-offset: 0; pointer-events: none; }
.ph-guide[data-frame="instant"] { outline: 6px solid rgba(251, 248, 240, 0.85); }
.ph-guide[data-frame="gilt"] { outline: 6px solid rgba(232, 190, 90, 0.9); }
.ph-guide[data-frame="storybook"] { outline: 6px solid rgba(244, 234, 210, 0.9); }
.ph-guide[data-frame="dusk"] { outline: 6px solid rgba(40, 36, 90, 0.9); }
.ph-guide[data-frame="starlit"] { outline: 6px dotted rgba(255, 246, 168, 0.9); }
.ph-thirds { position: absolute; inset: 0; background:
  linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
  linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% - 0.5px), rgba(255,255,255,0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% - 0.5px), rgba(255,255,255,0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.ph-top, .ph-bottom { position: absolute; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 10px; }
.ph-top { top: max(6px, env(safe-area-inset-top)); }
.ph-bottom { bottom: max(6px, env(safe-area-inset-bottom)); align-items: center; }
.ph-pad, .ph-acts { display: flex; gap: 4px; flex-wrap: nowrap; }
.ph-chip, .ph-btn { font: inherit; font-size: 13px; border: 2px solid #6b4a2e; border-radius: 10px; background: rgba(255, 250, 238, 0.94); color: #3a2a1a; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.ph-chip.on, .ph-btn.on { background: #ffe9a8; border-color: #b8862a; }
.ph-btn.good { background: #d8f0c0; border-color: #4a8a3a; }
.ph-btn:active, .ph-chip:active { transform: translateY(1px); }
.ph-capin { font: inherit; font-size: 14px; width: min(260px, 60vw); padding: 6px 8px; border-radius: 10px; border: 2px solid #6b4a2e; background: rgba(255, 250, 238, 0.96); }
.ph-flash { position: fixed; inset: 0; background: #fff; z-index: 60; pointer-events: none; animation: ph-flash 0.45s ease-out forwards; }
@keyframes ph-flash { from { opacity: 0.85; } to { opacity: 0; } }
@media (max-width: 640px) {
  .ph-chip { font-size: 11.5px; padding: 4px 6px; }
  .ph-btn { font-size: 12px; padding: 5px 7px; }
  .ph-bottom { gap: 5px; }
}

/* the album, a frame's photo, a portrait up close */
.ph-album .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 8px 0; }
.ph-card { background: #fffaf0; border: 2px solid var(--paper2, #e8d8b8); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.ph-card.hung { border-color: #c8a050; }
.ph-pick { padding: 0; border: 0; background: none; cursor: pointer; }
.ph-thumb { display: block; width: 100%; height: auto; border-radius: 4px; background: #e8e2d8; image-rendering: auto; }
.ph-cap { font-size: 13.5px; color: #3a2a1a; }
.ph-card .btns { gap: 4px; flex-wrap: wrap; }
.ph-big { display: flex; justify-content: center; margin: 4px 0 8px; }
.ph-big canvas { max-width: 100%; height: auto; border: 6px solid #fbf8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.ph-big .ph-paint { image-rendering: pixelated; border: 8px solid #c89a3a; outline: 2px solid #8a6420; }
.ph-paint-small { image-rendering: pixelated; width: 56px; height: 42px; border: 3px solid #c89a3a; margin-right: 8px; flex: none; }
.ph-plaque { text-align: center; font-weight: 600; color: #6a4a1a; margin: 0 0 4px; }
.ph-portraits { margin-top: 10px; border-top: 2px dashed var(--paper2, #e8d8b8); padding-top: 6px; }
.ph-portraits .row { align-items: center; gap: 6px; margin: 4px 0; }