/* Photo and cinematic mode: the bar and settings card (cream paper, as everywhere), the vignette and frame over the town,
   and the shutter flash. With body.photo every part of the game's HUD steps aside; only .photoui and the stage stay. */
body.photo #app>*:not(#stage):not(.photoui){display:none!important}
.photoui{z-index:30}

.ph-bar{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 32px);bottom:22px;display:flex;gap:10px;padding:10px 12px;border-radius:22px;--mo-y:14px}
.ph-bar .btn{height:46px;font-size:15px;padding:0 16px;white-space:nowrap}
.ph-bar .btn[aria-pressed="true"]:not(.primary){background:var(--sky-soft)}
.ph-bar #ph-cine[aria-pressed="true"]{background:var(--sage);}

.ph-panel{position:absolute;top:16px;right:max(16px,env(safe-area-inset-right,0px));bottom:96px;width:var(--side);max-width:calc(100% - 32px);padding:0;overflow:auto;overscroll-behavior:contain}
.ph-panel .band{padding:16px 62px 14px 18px;background:var(--paper-3);background-image:var(--grain);border-bottom:2.5px solid var(--ink);border-radius:17px 21px 0 0}
.ph-panel .band h2{font-size:25px}
.ph-panel .pad{padding:14px 18px 20px;display:flex;flex-direction:column;gap:14px}
.ph-sec{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border:2px dashed rgba(43,38,32,.3);border-radius:14px}
.ph-sec>.h-disp{font-size:19px}
.ph-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.ph-seg .gfx-opt{min-height:36px;font-size:13px}
.ph-row{display:flex;flex-direction:column;gap:2px}
.ph-row .gfx-label{display:flex;justify-content:space-between}
.ph-row output{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ph-row input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0}
.ph-row input[type="range"]::-webkit-slider-runnable-track{height:10px;border-radius:6px;border:2px solid var(--ink);background:var(--paper-3)}
.ph-row input[type="range"]::-moz-range-track{height:6px;border-radius:6px;border:2px solid var(--ink);background:var(--paper-3)}
.ph-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;border:2.5px solid var(--ink);background:var(--sky);box-shadow:0 2px 0 var(--ink)}
.ph-row input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ink);background:var(--sky)}
.ph-row input[type="range"]:disabled{opacity:.45}
.ph-row input[type="range"]:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}

/* over the town: a soft dark rim and the paper frame. Sizes arrive as custom properties from photo.js. */
.ph-veil{position:absolute;inset:0;pointer-events:none;z-index:20}
.ph-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(43,38,32,0) 45%,rgba(43,38,32,var(--vig,0)) 100%)}
.ph-edge{position:absolute;inset:0;border:solid #FBF6EA;border-width:var(--m-t,0) var(--m-r,0) var(--m-b,0) var(--m-l,0);box-shadow:inset 0 0 0 0 var(--ink)}
.ph-veil[data-frame="none"] .ph-edge{display:none}
.ph-cap{position:absolute;left:0;right:0;bottom:calc(var(--m-b,0px)*.5);translate:0 50%;text-align:center;font:italic 700 clamp(14px,2.2vw,26px) var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--ink-soft)}
.ph-flash{position:absolute;inset:0;background:#FFFDF7;opacity:0;pointer-events:none;z-index:50}
.ph-flash.go{animation:ph-flash .45s ease-out}
@keyframes ph-flash{0%{opacity:.85}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-flash.go{animation:none}}
@media (max-width:900px){.ph-bar{flex-wrap:wrap;justify-content:center;width:calc(100% - 32px)}.ph-panel{bottom:150px}}