.camera-controls{position:fixed;right:12px;top:60%;transform:translateY(-50%);z-index:80;max-width:calc(100vw - 24px);font:13px/1.4 Arial,sans-serif}
.camera-controls button{min-height:42px;padding:10px 18px;border:1px solid #ffd575;border-radius:24px;background:#491421ed;color:#fff1b7;font-weight:700;cursor:pointer;box-shadow:0 3px 16px #14050b55}
.camera-controls button[aria-pressed=true]{border-color:#a6efe8;color:#d5fffa}
.camera-controls button:disabled{opacity:.6;cursor:wait}
.camera-controls button:focus-visible{outline:3px solid #a6efe8;outline-offset:3px}
#camera-status:not(.sr-only){max-width:240px;margin:7px 0 0;padding:8px 10px;background:#270b16ed;border-radius:8px;color:#fff1b7}
#camera-preview,#hand-cursor[hidden]{display:none!important}
#hand-cursor{position:fixed;z-index:10000;width:88px;height:88px;transform:translate(-50%,-50%);pointer-events:none}
.magician-glove{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #102b36b0) drop-shadow(0 0 7px #b9fff49c);animation:magic-float 1.8s ease-in-out infinite;transition:filter .2s}
.glove-pose{display:block;width:100%;height:100%;transition:transform .18s ease-out;transform-origin:55% 65%}
#hand-cursor.is-closed .glove-pose{transform:scale(.78) rotate(-18deg)}
#hand-cursor.is-hovering .magician-glove{filter:drop-shadow(0 2px 3px #102b36b0) drop-shadow(0 0 12px #ffe18e)}
.magic-spark{position:absolute;width:12px;height:12px;background:#fff1b1;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);animation:magic-twinkle 1.4s ease-in-out infinite}
.magic-spark.s1{left:3%;top:20%}.magic-spark.s2{right:0;top:38%;animation-delay:-.5s;width:9px;height:9px}.magic-spark.s3{left:25%;bottom:0;animation-delay:-.9s;width:8px;height:8px}
#hand-cursor::after{content:'';position:absolute;inset:18%;border:2px solid #fff0b2;border-radius:50%;opacity:0}
#hand-cursor.is-selecting::after{animation:magic-burst .5s ease-out}
.hand-target{outline:4px solid #9affc0!important;outline-offset:5px;filter:brightness(1.15)}
@keyframes magic-float{0%,100%{transform:translateY(1px) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes magic-twinkle{0%,100%{opacity:.2;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(40deg)}}
@keyframes magic-burst{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.7)}}
@media(max-width:1024px){.camera-controls{right:8px}.camera-controls button{padding:10px 12px}#hand-cursor{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){.magician-glove,.magic-spark,#hand-cursor.is-selecting::after{animation:none}.glove-pose{transition:none}}

/* Match the real hand pose and show the actual selection hold progress. */
.glove-pose{position:relative}
.magician-glove{position:absolute;inset:0;transition:opacity .16s ease,filter .2s}
.glove-closed{opacity:0}
#hand-cursor.is-closed .glove-open{opacity:0}
#hand-cursor.is-closed .glove-closed{opacity:1}
#hand-cursor.is-closed .glove-pose{transform:scale(.9) rotate(-6deg)}
.selection-ring{position:absolute;inset:-10%;width:120%;height:120%;transform:rotate(-90deg);opacity:0;transition:opacity .15s}
#hand-cursor.is-hovering .selection-ring{opacity:1}
.selection-ring circle{fill:none;stroke-width:4}
.selection-track{stroke:#23131dbb}
.selection-progress{stroke:#ffe493;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 2px #ffd76a)}
@media(prefers-reduced-motion:reduce){.magician-glove,.selection-ring{transition:none}}