/* Measured against panel 3 of the 8250 × 1536 editing panorama.
   iWish cabinet: x 5630–6130, y 734–1068. Screen: x 5740–5976, y 854–1000.
   Anchors inherit the scene transform, including scroll and cursor parallax. */
.panel-3-active .machine-hotspot { left:52.8%; top:38.9323%; width:9.4545%; height:35.8073%; }
.anything-hotspot { position:absolute; left:4.73%; top:47.79%; width:18.18%; height:21.74%; min-width:44px; min-height:44px; z-index:1; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.anything-hotspot:disabled { cursor:default; }
.anything-hotspot:focus-visible { outline:2px solid #f6ba02; outline-offset:5px; border-radius:14px; }
.anything-screen-light { position:absolute; left:22%; top:35.93%; width:47.2%; height:43.71%; border-radius:12%; background:linear-gradient(150deg,rgba(242,204,119,.18),rgba(211,153,65,.05)); box-shadow:inset 0 0 14px rgba(255,214,134,.09); opacity:0; transition:opacity .5s ease; }
.anything-screen-light::after { content:'✦'; display:block; margin-top:15%; text-align:center; font:clamp(10px,1.2vw,20px) Georgia,serif; color:#f2ce8a; opacity:.5; }
.anything-hotspot.is-powered .anything-screen-light { opacity:1; }
.anything-hotspot.is-dispensing .anything-screen-light::after { animation:locker-receive .8s ease both; }
.anything-cue { position:absolute; bottom:106%; left:50%; transform:translate(-50%,4px); border:1px solid rgba(244,221,175,.4); background:rgba(34,26,23,.8); color:#f5e9d0; font:500 12px var(--font-nav,sans-serif); padding:7px 10px; border-radius:4px; white-space:nowrap; opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; }
@media(hover:hover) { .anything-hotspot.is-inspectable:not(:disabled):hover .anything-cue { opacity:1; transform:translate(-50%,0); } }
.anything-hotspot.is-inspectable:focus-visible .anything-cue { opacity:1; transform:translate(-50%,0); }
@keyframes locker-receive { 0% { transform:translateY(-6px); opacity:0; } 45% { opacity:.9; } 100% { transform:translateY(3px); opacity:.5; } }

/* Quiet, untitled slots. Visibility comes from the real hero timeline. */
.find-inventory { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,12px); display:flex; gap:8px; z-index:80; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s,transform .32s,visibility .32s; }
.find-inventory.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; }
.find-slot { display:grid; place-items:center; width:52px; height:52px; padding:4px; border:1px solid rgba(244,224,187,.38); border-radius:3px; background:rgba(29,23,21,.67); box-shadow:0 4px 18px #0002,inset 0 0 0 3px #ffffff03; cursor:pointer; overflow:hidden; transition:border-color .2s,transform .2s,background .2s; }
.find-slot:disabled { cursor:default; }
.find-slot:not(:disabled):hover { border-color:#f6ba02; transform:translateY(-3px); background:#3b3029; }
.find-slot:focus-visible { outline:2px solid #f6ba02; outline-offset:4px; }
.find-slot img { width:100%; height:100%; object-fit:contain; border-radius:1px; }
.find-slot.is-new { animation:slot-stored .6s ease; }
@keyframes slot-stored { 35% { border-color:#f6ba02; box-shadow:0 0 18px #f6ba0240; transform:scale(1.09); } }
.find-toast { position:fixed; bottom:calc(max(24px,env(safe-area-inset-bottom)) + 70px); left:50%; transform:translate(-50%,6px); z-index:110; color:#f8edda; background:rgba(27,22,19,.88); border:1px solid #d8bc8140; padding:9px 14px; border-radius:3px; font:500 12px var(--font-nav,sans-serif); letter-spacing:.06em; opacity:0; visibility:hidden; transition:opacity .22s,transform .22s,visibility .22s; pointer-events:none; white-space:nowrap; }
.find-toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
/* This file used to carry .aura-sound overrides (a stray z-index that
   silently buried the button, then some now-meaningless padding/font-size
   tweaks). The button is a fixed-size icon inside .nav-right now — see
   css/style.css — with nothing left here for it to override. */

/* Nonmodal: the visitor can keep scrolling at any point. */
.find-overlay[hidden] { display:none !important; }
.find-overlay { position:fixed; inset:0; z-index:100; pointer-events:none; display:grid; place-items:center; padding:20px; }
.find-veil { position:absolute; inset:0; background:radial-gradient(ellipse at center,#18131bcc,#17121955 60%,transparent); opacity:0; transition:opacity .25s; }
.find-overlay.is-open .find-veil { opacity:1; }
.find-card { position:relative; width:min(340px,calc(100vw - 40px)); max-height:calc(100svh - 90px); background:#f3ebda; border:1px solid #efd7a8; border-radius:5px; box-shadow:0 24px 90px #0007,0 0 0 6px #f4e0b010; pointer-events:auto; opacity:0; transform:translateY(24px) scale(.85) rotate(-3deg); transition:opacity .24s,transform .4s cubic-bezier(.2,.8,.2,1); overflow:visible; color:#422520; }
.find-overlay.is-open .find-card { opacity:1; transform:translateY(0) scale(1) rotate(0); }
.find-close { position:absolute; right:8px; top:8px; z-index:3; width:44px; height:44px; border:0; background:transparent; color:#733c30; font:28px/1 sans-serif; cursor:pointer; border-radius:50%; }
.find-close:hover { background:#8b231810; }
.find-close:focus-visible,.find-store:focus-visible { outline:2px solid #92251d; outline-offset:3px; }
.find-art { position:relative; height:clamp(200px,43svh,360px); margin:16px 18px 0; overflow:hidden; background:#f3ebda; }
.find-art img { position:relative; display:block; height:100%; width:100%; object-fit:contain; mix-blend-mode:multiply; }
.find-burst { position:absolute; inset:0; z-index:-1; border:1px solid #f6ba0244; transform:rotate(8deg) scale(1.09); border-radius:4px; }
.find-overlay.is-open .find-burst { animation:find-flash .7s ease-out both; }
@keyframes find-flash { 0% { opacity:0; transform:rotate(-9deg) scale(.7); } 32% { opacity:1; transform:rotate(5deg) scale(1.2); } 100% { opacity:.45; transform:rotate(8deg) scale(1.06); } }
.find-kicker { position:absolute; top:22px; left:-17px; z-index:2; padding:7px 14px; transform:rotate(-8deg); color:#762219; background:#f6ba02; border:1px solid #683520; box-shadow:3px 3px 0 #70241f; font:800 13px var(--font-display,sans-serif); letter-spacing:.07em; }
.find-caption { text-align:center; padding:0 22px 22px; }
.find-caption h2 { font-family:var(--font-display,sans-serif); font-size:25px; line-height:1.15; margin:4px 0 16px; color:#78251e; }
.find-store { width:100%; min-height:44px; border:1px solid #78251e; background:#78251e; border-radius:3px; color:#fff3d8; font:600 14px var(--font-nav,sans-serif); cursor:pointer; transition:background .2s; }
.find-store:hover { background:#982f24; }
.find-card.is-storing { pointer-events:none; }
.find-access { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); right:18px; z-index:80; width:44px; height:44px; border:1px solid #f2d79b66; border-radius:4px; background:#211b18d9; color:#f4dfbb; display:none; place-items:center; cursor:pointer; }
.find-access.is-visible { display:grid; }
.find-access svg { width:20px; height:20px; }
.find-access:focus-visible { outline:2px solid #f6ba02; outline-offset:3px; }
@media(max-width:600px) { .find-inventory { bottom:calc(env(safe-area-inset-bottom) + 18px); gap:6px; } .find-slot { width:48px; height:48px; } .find-card { width:min(300px,calc(100vw - 44px)); } .find-art { height:clamp(160px,41svh,300px); } .find-caption { padding:0 18px 18px; } }
@media(prefers-reduced-motion:reduce) { .anything-screen-light,.find-inventory,.find-toast,.find-card,.find-veil { transition:opacity .12s; } .find-card,.find-overlay.is-open .find-card { transform:none; } .find-burst,.anything-hotspot.is-dispensing .anything-screen-light::after,.find-slot.is-new { animation:none; } }

/* Hand cursor across the cabinet, independent of its ambient light. */
.anything-hotspot.is-inspectable, .anything-hotspot.is-inspectable * { cursor:pointer; }
.anything-hotspot.is-inspectable::before { content:""; position:absolute; inset:-3px; border:1px solid rgba(246,186,2,0); border-radius:12px; background:rgba(255,224,160,0); transition:border-color .18s,background .18s; pointer-events:none; }
@media(hover:hover) { .anything-hotspot.is-inspectable:hover::before { border-color:rgba(246,186,2,.45); background:rgba(255,224,160,.035); } }

/* Transparent full-screen gallery/intro layers must not intercept scenery.
   Card rules explicitly opt into pointer-events, hence subtree suppression. */
.is-scene-pass-through, .is-scene-pass-through * { pointer-events:none !important; }

/* Floating bottle presentation. The generated source has no alpha channel;
   this silhouette clips its backdrop at render time in both uses. */
.find-art img,.find-slot img {
  clip-path:polygon(40% 1.3%,43% .9%,55% .9%,59% 1.5%,60.4% 2.5%,60.7% 4.6%,59.4% 6.3%,60.7% 7.3%,60.3% 10%,61.2% 14%,62.1% 17%,63.9% 22%,66.5% 29%,69.2% 36%,71% 43%,71.8% 50%,71.8% 60%,71.3% 70%,70.9% 77%,69.9% 84%,70.5% 91%,71.7% 94%,71.5% 96%,70.5% 97%,67% 98%,60% 98.5%,40% 98.5%,32% 97.7%,28.5% 96.4%,27.8% 94.7%,28.2% 92.5%,29.4% 89%,29.3% 86%,28.5% 81%,28% 76%,27.3% 69%,27.2% 60%,27.4% 51%,28.2% 43%,29.3% 37%,31% 31%,33.2% 25%,35.4% 20%,37.7% 14%,38.8% 10%,38.8% 7.5%,40% 6.2%,38.8% 4.9%,39% 2.6%);
  transform:rotate(-18deg); mix-blend-mode:normal; pointer-events:none;
}
.find-card { background:transparent; border:0; box-shadow:none; color:#fff0d4; }
.find-art { background:transparent; overflow:visible; height:clamp(160px,47svh,400px); margin:28px 18px 18px; filter:drop-shadow(8px 16px 12px #0008); }
.find-art img { width:auto; max-width:none; margin:auto; }
.find-burst { display:none; }
.find-caption h2 { color:#fff0d4; text-shadow:0 2px 12px #000; }
.find-store { width:auto; min-width:150px; padding:10px 24px; border-color:#dfba7466; background:#281d18d9; }
.find-store:hover { background:#563126; }
.find-close { color:#fff0d4; background:#281d18aa; }
.find-close:hover { background:#563126; }
.find-kicker { top:8px; left:0; }
.find-slot { overflow:visible; position:relative; }
.find-slot:not(:disabled) { background:transparent; }
.find-slot img { position:absolute; width:auto; height:76px; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-22deg); border-radius:0; }
@media(max-width:600px) { .find-slot img { height:70px; } .find-art { height:clamp(150px,43svh,320px); } }

/* Invisible catch area follows the real butterfly; the cursor is the only hint. */
.butterfly-catch {position:fixed;z-index:86;border:0;padding:0;margin:0;background:transparent;box-shadow:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M18 20L28 30' stroke='%231b1716' stroke-width='5'/%3E%3Cpath d='M18 20L28 30' stroke='%23d9b77a' stroke-width='2.5'/%3E%3Cellipse cx='12' cy='11' rx='9' ry='10' fill='%23fff8df' fill-opacity='.18' stroke='%231b1716' stroke-width='3'/%3E%3Cpath d='M7 3v16M12 1v20M17 3v16M4 7h16M3 12h18M5 17h14' stroke='%23f0dfb8' stroke-width='.7'/%3E%3Cellipse cx='12' cy='11' rx='9' ry='10' fill='none' stroke='%23f0dfb8' stroke-width='1.4'/%3E%3C/svg%3E") 12 11,crosshair;}
.butterfly-catch[hidden] {display:none;}
.butterfly-catch:focus-visible {outline:1px solid #e8ce9a;outline-offset:3px;border-radius:50%;}

.find-art img[data-item="butterfly"] {clip-path:none;transform:none;width:100%;max-width:100%;height:100%;object-fit:contain;}
.find-slot img[data-item="butterfly"] {clip-path:none;width:64px;height:64px;object-fit:contain;transform:translate(-50%,-50%);}

/* PUBLIC COMMENT is prepped as the third inventory item. Its transparent
   source already contains the approved angle, so it must not inherit the
   bottle's hand-authored silhouette clip or extra rotation. */
.find-art img[data-item="spray-can"] {clip-path:none;transform:none;width:100%;max-width:100%;height:100%;object-fit:contain;}
.find-slot img[data-item="spray-can"] {clip-path:none;width:auto;height:78px;max-width:none;object-fit:contain;transform:translate(-50%,-50%);}
@media(max-width:600px) { .find-slot img[data-item="spray-can"] {height:72px;} }

/* PUBLIC COMMENT Gold — removable world art anchored to the exact panel-2
   panorama coordinates approved in the Photoshop placement reference. */
.spray-can-world {position:absolute;left:46.2%;top:74.2%;width:3.2%;aspect-ratio:887/1377;z-index:5;padding:0;border:0;margin:0;background:transparent;appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;}
.spray-can-world[hidden] {display:none;}
.spray-can-world img {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;}
.spray-can-world:focus-visible {outline:2px solid #e7cf9a;outline-offset:2px;border-radius:45%;}
@media(hover:hover) {.spray-can-world:not(:disabled):hover img {filter:brightness(1.04);}}

/* Invisible, generously-sized catch area layered over the real (small,
   road-side) can art — same trick as .butterfly-catch above. The can
   doesn't wander, so this is positioned in JS from its own bounding box
   each frame rather than tracking a moving target, but the goal is the
   same: the visible art stays exactly where it is and exactly the size it
   is, while the clickable/tappable area around it is much bigger. */
.spray-can-catch {position:fixed;z-index:6;border:0;padding:0;margin:0;background:transparent;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;}
.spray-can-catch[hidden] {display:none;}
.spray-can-catch:focus-visible {outline:2px solid #e7cf9a;outline-offset:2px;border-radius:50%;}


/* A slot holding an item the Free Wall can use. touch-action:none is what
   lets a finger DRAG the object onto the wall instead of scrolling the page —
   it is set only on these slots, so every other slot still scrolls normally.
   See the carry/drop handling in js/freewall.js. */
.find-slot[data-tool] { cursor: grab; touch-action: none; }
.find-slot[data-tool]:active { cursor: grabbing; }
.find-slot.is-carrying { opacity: .35; }

/* A drunk bottle leans the OTHER way to a full one. Every thumbnail is
   rotate(-22deg); the empty cola tips right instead, so the change of state
   reads at a glance without needing different art. data-spent is set by
   syncCollected(), so this does not depend on a filename. */
.find-slot[data-spent] img { transform: translate(-50%, -50%) rotate(22deg); }