/* Only Nicole's Picture Mix-Up. No shared scene or modal rules. */
#nicoleMixUp{width:calc(100vw - 20px);max-width:none;max-height:calc(100dvh - 20px);margin:auto;padding:12px;border:1px solid #798080;border-radius:0;background:#10243c;color:#eee4cf;overflow:auto;font-family:"Libre Franklin",Arial,sans-serif;overscroll-behavior:contain}
#nicoleMixUp:not([open]){display:none}
#nicoleMixUp::backdrop{background:#020a13eb}
#nicoleMixUp .mix-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 2px 10px}
#nicoleMixUp .mix-heading h2{margin:0;font-size:clamp(1rem,1.8vw,1.45rem);line-height:1.25;letter-spacing:-.025em}
#nicoleMixUp .mix-heading p{margin:6px 0 0;font:500 .875rem/1.4 "DM Mono",monospace;color:#efce8b}
#nicoleMixUp .mix-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#nicoleMixUp button{min-height:42px;border:1px solid #a7adad70;border-radius:3px;background:#ffffff0a;color:inherit;padding:8px 12px;font:500 .8125rem "DM Mono",monospace;cursor:pointer}
#nicoleMixUp button:hover:not(:disabled){background:#ffffff17}
#nicoleMixUp button:focus-visible{outline:2px solid #f6bc4b;outline-offset:2px}
#nicoleMixUp button:disabled{opacity:.45;cursor:default}
#nicoleMixUp [hidden]{display:none!important}
#nicoleMixUp .mix-zoom{display:flex;align-items:center;gap:6px}
#nicoleMixUp .mix-zoom button{width:40px;padding:6px;font-size:1rem}
#nicoleMixUp .mix-zoom output{min-width:32px;text-align:center;font:400 .8125rem "DM Mono",monospace}
#nicoleMixUp .mix-status-line{display:flex;align-items:center;gap:12px;min-height:28px;margin:0 2px 9px;font-size:.8125rem;line-height:1.4}
#nicoleMixUp .mix-status-line p{margin:0}
#nicoleMixUp #mixInstructions{color:#b9c0bf}
#nicoleMixUp #mixReaction{color:#f1dbab;margin-left:auto}
#nicoleMixUp #mixReplay{min-height:34px;color:#f1d193;border-color:#e4bf7577;white-space:nowrap}
#nicoleMixUp .mix-pictures{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#nicoleMixUp figure{margin:0;min-width:0}
#nicoleMixUp figcaption{margin:0 0 6px;font:400 .75rem/1.3 "DM Mono",monospace;letter-spacing:.04em;color:#b9c0bf}
#nicoleMixUp .mix-photo-viewport{overflow:auto;max-height:calc(100dvh - 155px);background:#07131f;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d3c3a2 #10243c}
#nicoleMixUp .mix-photo-surface{position:relative;width:100%;aspect-ratio:3/2;line-height:0;isolation:isolate;cursor:default}
#nicoleMixUp .mix-photo-surface>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;user-select:none;-webkit-user-drag:none;cursor:default}
#nicoleMixUp .mix-marks{position:absolute;inset:0;pointer-events:none}
#nicoleMixUp .mix-found-mark{position:absolute;display:block;border:2px solid #fff0aec9;border-radius:48% 52% 47% 53% / 53% 45% 55% 47%;transform:rotate(-3deg);background:none;pointer-events:none;animation:mixFound .22s ease-out}
#nicoleMixUp .mix-found-mark::after{content:"";position:absolute;inset:1px -2px -1px 1px;border:1px solid #fff0ae72;border-radius:51% 48% 54% 46%;transform:rotate(3deg);pointer-events:none}
#nicoleMixUp .mix-hint-area{position:absolute;pointer-events:none;border:0;border-radius:50%;background:radial-gradient(ellipse,#f0d57650 0,#f0d57626 42%,transparent 73%);animation:mixHintFade 2.4s ease-in-out both}
#nicoleMixUp[data-complete="true"] #mixScore{color:#c6e3bc}
@keyframes mixFound{from{opacity:0;transform:rotate(-3deg) scale(.88)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes mixHintFade{0%,100%{opacity:0}18%,70%{opacity:1}}
@media(max-width:760px){
  #nicoleMixUp{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:10px 6px}
  #nicoleMixUp .mix-toolbar{align-items:flex-start;gap:10px;flex-wrap:wrap}
  #nicoleMixUp .mix-controls{width:100%;justify-content:space-between;gap:6px}
  #nicoleMixUp .mix-pictures{grid-template-columns:minmax(0,1fr);gap:16px}
  #nicoleMixUp .mix-photo-viewport{max-height:72dvh}
  #nicoleMixUp .mix-status-line{flex-wrap:wrap;gap:6px;margin-bottom:10px}
  #nicoleMixUp #mixReaction{margin-left:0}
  #nicoleMixUp #mixReplay{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){#nicoleMixUp .mix-found-mark,#nicoleMixUp .mix-hint-area{animation:none}}