#photo-overlay{position:fixed;inset:0;z-index:120;color:white;font-family:'Source Han Sans TC','Noto Sans TC',sans-serif;overflow:hidden;touch-action:none;display:flex;flex-direction:column;align-items:center;padding:max(16px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));background:transparent}
#photo-overlay[hidden],#photo-overlay [hidden]{display:none!important}
.photo-heading{margin:4px 20px 0;text-align:center;font-size:23px;font-weight:700;text-shadow:0 2px 8px #000}
.photo-hint{margin:8px 20px 0;text-align:center;font-size:14px;color:#fff;text-shadow:0 2px 6px #000}
.photo-screen{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#photo-carousel{position:relative;width:100%;height:min(61dvh,580px);perspective:900px;touch-action:pan-y;flex-shrink:1;min-height:180px}
.photo-choice{position:absolute;left:50%;top:50%;width:min(73.6vw,391px,44.85dvh);aspect-ratio:857/1237;padding:0;border:0;background:transparent;border-radius:24px;cursor:grab;transform-origin:50% 75%;will-change:transform;filter:drop-shadow(0 14px 14px rgba(0,0,0,.45));touch-action:none}
.photo-choice img{width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.photo-choice:focus-visible{outline:3px solid #ffe900;outline-offset:4px}
#photo-name{margin:0 0 10px;font-size:16px;font-weight:700;text-shadow:0 2px 6px #000}
.photo-dots{display:flex;gap:9px;margin:0 0 15px}.photo-dots span{width:6px;height:6px;background:#ffffff60;border-radius:50%}.photo-dots span.active{background:#ffec00;transform:scale(1.4)}
.photo-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 16px;width:100%}
.photo-btn{border:1px solid #ffffffa0;border-radius:999px;padding:11px 22px;min-height:44px;background:#07192ad9;color:white;font:700 15px 'Source Han Sans TC','Noto Sans TC',sans-serif;cursor:pointer;touch-action:manipulation}
.photo-btn.primary{background:#ffed00;color:#07192a;border-color:#ffed00;box-shadow:0 0 17px #ffed0040}
.photo-btn:disabled{opacity:.45;cursor:default}.photo-back{margin-top:12px;padding:7px 18px;background:none;border:0;color:white;font:14px 'Source Han Sans TC','Noto Sans TC',sans-serif;min-height:44px;cursor:pointer}
#photo-camera-shell{position:relative;width:min(94vw,530px,70dvh);aspect-ratio:991/1109;flex-shrink:1;min-height:0}
#photo-video{position:absolute;left:5.05%;top:7.85%;width:89.5%;height:66.9%;object-fit:cover;background:#06121f;clip-path:inset(0 round 4%);transform:scaleX(-1)}
#photo-camera-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.photo-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;min-width:44px;min-height:44px}
#photo-shutter{left:41%;top:76%;width:17%;height:16%}#photo-camera-back{right:0;top:0;width:9%;height:9%}
#photo-camera-status{position:absolute;left:13%;right:13%;top:15%;margin:0;text-align:center;font-size:14px;text-shadow:0 2px 5px black;pointer-events:none}
#photo-camera-tools{margin-top:8px}#photo-preview-img{display:block;width:auto;height:auto;max-width:86vw;max-height:65dvh;aspect-ratio:857/1237;object-fit:contain;filter:drop-shadow(0 10px 15px #0007);margin:10px auto 16px;touch-action:auto;user-select:auto;-webkit-touch-callout:default}
#photo-status{min-height:20px;font-size:13px;margin:8px 20px 0;text-align:center;text-shadow:0 2px 6px black}
@media(max-height:620px){.photo-heading{font-size:18px}.photo-hint{margin:4px}.photo-btn{padding:8px 17px}#photo-carousel{height:50dvh}#photo-preview-img{max-height:54dvh}}
@media(prefers-reduced-motion:reduce){.photo-choice{will-change:auto}}

#photo-edit-canvas{display:block;max-width:86vw;max-height:55dvh;width:auto;height:auto;aspect-ratio:857/1237;touch-action:none;margin:8px auto;filter:drop-shadow(0 10px 15px #0007)}
.photo-edit-controls{width:min(86vw,380px);margin:4px auto 12px;display:grid;gap:8px}.photo-edit-controls label{display:flex;align-items:center;gap:12px;font-size:14px}.photo-edit-controls input{flex:1;min-width:0;accent-color:#ffed00;touch-action:pan-x}

/* Compact, separately supplied controls; keep the original character-frame size. */
#photo-use,#photo-exit{position:relative;display:block;flex:none;height:42.5px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;touch-action:manipulation}
#photo-use{width:143px;max-width:60vw;aspect-ratio:286/85}
#photo-exit{width:107px;max-width:45vw;aspect-ratio:214/85;margin-top:10px}
#photo-use img,#photo-exit img{position:static;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#photo-use:focus-visible,#photo-exit:focus-visible{outline:3px solid #00b8ef;outline-offset:4px}
.photo-choice{width:min(73.6vw,391px,44.85dvh);aspect-ratio:857/1237}
#photo-switch{left:76.5%;top:10%;width:15%;height:14%;padding:0;touch-action:manipulation}
#photo-shutter{left:42.8%;top:78%;width:13.3%;height:12.3%;padding:0;border-radius:15%}
#photo-shutter:not(:disabled)::after{content:"";position:absolute;inset:0;border-radius:15%;background:rgba(125,235,255,.18);box-shadow:0 0 12px rgba(0,192,255,.6);pointer-events:none;animation:photo-shutter-hint 2.4s ease-in-out infinite}
@keyframes photo-shutter-hint{0%,100%{opacity:.05}50%{opacity:.8}}
#photo-switch:focus-visible,#photo-shutter:focus-visible{outline:3px solid white;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#photo-shutter:not(:disabled)::after{animation:none;opacity:.15}}

/* Two rows follow the supplied reference; preserve the compact 42.5px controls. */
#photo-preview .photo-preview-actions{display:flex;flex-direction:column;align-items:center;gap:9px;width:min(381px,calc(100vw - 24px));padding:0;flex:none}
.photo-preview-row{display:grid;gap:10px;align-items:center;width:100%}
.photo-preview-row.first{width:77.6903%;grid-template-columns:1fr 1fr}
.photo-preview-row.second{grid-template-columns:214fr 214fr 294fr}
#photo-preview .photo-preview-row .photo-btn{display:block;width:100%;min-width:0;min-height:0;height:auto;aspect-ratio:286/85;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#photo-preview .second #photo-retake,#photo-preview .second #photo-reselect{aspect-ratio:214/85}
#photo-preview .second #photo-share{aspect-ratio:294/85}
#photo-preview .photo-preview-row img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#photo-preview .photo-preview-row .photo-btn:focus-visible{outline:3px solid #00b8ef;outline-offset:3px}

/* Let short viewports scroll instead of compressing headings under the photo. */
#photo-overlay .photo-heading,#photo-overlay .photo-hint{flex-shrink:0;position:relative;z-index:1}
#photo-overlay[data-photo-screen="preview"]{overflow-y:auto;touch-action:pan-y;justify-content:flex-start}
#photo-overlay[data-photo-screen="preview"] #photo-preview{flex:0 0 auto;justify-content:flex-start;padding-top:8px}
#photo-preview-img{flex-shrink:0}
#photo-overlay[data-photo-screen="preview"] #photo-status{flex-shrink:0}