/* V05: two original PNG layers and placement from DOPE-Vending-Web-Layers-v02.zip. */
.bar-experience{background:#0e0b07;color:#f2e6cf;overflow:hidden;height:100dvh}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Clip the scene without letting focus scroll the full layered canvas. */
.bar-scene{position:relative;isolation:isolate;width:100%;height:100dvh;overflow:clip;background:#0e0b07}
.bar-backdrop{position:absolute;inset:-40px;background:linear-gradient(#08090680,#080906a0),url('assets/layers-v05/bar-background.png') center/cover no-repeat;filter:blur(25px);transform:scale(1.03)}
.scene-world{position:absolute;width:max(min(100vw,199dvh),177.5771dvh);aspect-ratio:1671/941;top:50%;left:50%;transform:translate(-50%,-50%);isolation:isolate}
.scene-picture,.scene-art{display:block;width:100%;height:100%}
.scene-art{object-fit:fill;user-select:none;-webkit-user-drag:none}
/* Separate foreground shares the scene frame and stays still above the machine. */
.scene-foreground{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:8;clip-path:inset(78.3% 25% 0 36.5%)}
/* Both images share this parent: any responsive crop keeps their alignment. */
.scene-machine{position:absolute;left:5.877299666029615%;top:3.664598402523055%;width:88.65658964112663%;pointer-events:none;z-index:4}
.machine-art{display:block;width:100%;height:auto;transform-origin:49.7% 88%;clip-path:inset(15.25% 38.55% 11.6% 38.4%);user-select:none;-webkit-user-drag:none}
/* The hitbox does not move with the illustrated machine. */
.machine-hotspot{position:absolute;left:40.22509217968766%;top:17.42826780021254%;width:19.430126831528348%;height:64.29330499468651%;border:0;border-radius:7% 7% 3% 3%;padding:0;background:transparent;cursor:pointer;z-index:6;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.machine-hotspot:focus-visible{outline:2px solid #ffe0a0;outline-offset:6px;box-shadow:0 0 25px #efb84a66}
.machine-hotspot:disabled{cursor:wait}
.contact-shadow{position:absolute;inset:0;pointer-events:none;transform-origin:50% 81.7%;mix-blend-mode:multiply;z-index:3}
.contact-shadow span{position:absolute;display:block;border-radius:50%}
.shadow-falloff{left:38.7%;top:79.5%;width:22.6%;height:5.8%;background:radial-gradient(ellipse closest-side at 50% 42%,#0c0713b8 0%,#0c071380 36%,#0c071340 65%,#0c071300 100%);filter:blur(2px)}
.shadow-base{left:40.5%;top:80.8%;width:19%;height:2.4%;background:radial-gradient(ellipse closest-side,#07040de8 0%,#07040db3 40%,#07040d55 70%,#07040d00 100%);filter:blur(1px)}
.shadow-foot{top:81.15%;width:3.2%;height:1.3%;background:radial-gradient(ellipse closest-side,#030207ff 0%,#030207ed 38%,#03020780 68%,#03020700 100%);filter:blur(.6px)}
.shadow-foot-left{left:40.75%}.shadow-foot-right{left:56.95%}
.lamp-warmth{position:absolute;left:37%;top:6.7%;width:27%;height:68%;pointer-events:none;background:radial-gradient(ellipse 45% 65% at 50% 0%,#ffd58b30 0%,#ffba4b12 32%,transparent 76%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;z-index:1}
.floor-light{position:absolute;left:39%;top:78%;width:23%;height:14%;background:radial-gradient(ellipse,#f3b34b22,transparent 69%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:2}
.scene-prompt{position:absolute;left:50.1%;top:86%;transform:translate(-50%,8px);pointer-events:none;color:#ffdfa3;font:11px 'Courier New',monospace;letter-spacing:1.1px;white-space:nowrap;text-shadow:0 1px 5px #000,0 1px 16px #000;opacity:0;transition:opacity .3s,transform .3s;z-index:9}
.scene-prompt span{margin-left:10px;font-size:17px}
.scene-world.is-awake:not(.is-modal-open) .machine-art{animation:machine-vibrate 360ms linear infinite}
.scene-world.is-awake:not(.is-modal-open) .contact-shadow{animation:shadow-vibrate 360ms linear infinite}
.scene-world.is-awake:not(.is-modal-open) :is(.lamp-warmth,.floor-light){opacity:1}
.scene-world.is-awake:not(.is-modal-open) .scene-prompt{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){
 .scene-world:not(.is-modal-open):has(:is(.machine-hotspot,.stock-pack):hover) .machine-art{animation:machine-vibrate 360ms linear infinite}
 .scene-world:not(.is-modal-open):has(:is(.machine-hotspot,.stock-pack):hover) .contact-shadow{animation:shadow-vibrate 360ms linear infinite}
 .scene-world:not(.is-modal-open):has(:is(.machine-hotspot,.stock-pack):hover) :is(.lamp-warmth,.floor-light){opacity:1}
 .scene-world:not(.is-modal-open):has(:is(.machine-hotspot,.stock-pack):hover) .scene-prompt{opacity:1;transform:translate(-50%,0)}
}
.dispense-pack{position:absolute;left:47.5%;top:68.3%;width:4.8%;height:6.2%;display:grid;place-items:center;background:linear-gradient(105deg,#8f691d,#edc362 25%,#d5a73c 60%,#855719);border-top:3px ridge #d5ad59;border-bottom:3px ridge #d5ad59;color:#35230c;font:bold clamp(9px,1.1vw,19px) Arial;letter-spacing:-.8px;box-shadow:0 3px 10px #0008;opacity:0;pointer-events:none;z-index:5}
.bar-experience[data-opening-state="dispensing"] .machine-art{animation:machine-vibrate 180ms linear infinite}
.bar-experience[data-opening-state="dispensing"] .contact-shadow{animation:shadow-vibrate 180ms linear infinite}
.bar-experience[data-opening-state="dispensing"] .dispense-pack{animation:bar-pack-drop 1.1s both}
.bar-experience:is([data-opening-state="loading"],[data-opening-state="dispensing"]) .scene-prompt{opacity:1;transform:translate(-50%,0)}
.bar-experience[data-opening-state="dispensing"] :is(.lamp-warmth,.floor-light){opacity:1}
@keyframes machine-vibrate{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(.8px) rotate(.16deg)}40%{transform:translateX(-.8px) rotate(-.16deg)}60%{transform:translateX(.5px) rotate(.1deg)}80%{transform:translateX(-.5px) rotate(-.1deg)}}
@keyframes shadow-vibrate{0%,100%{transform:translateX(0) scaleX(1);opacity:1}20%{transform:translateX(.4px) scaleX(1.006);opacity:.98}40%{transform:translateX(-.4px) scaleX(.998);opacity:1}60%{transform:translateX(.25px) scaleX(1.004);opacity:.99}80%{transform:translateX(-.25px) scaleX(.999);opacity:1}}
@keyframes bar-pack-drop{0%,30%{opacity:0;transform:translateY(-18px) rotate(-4deg)}45%{opacity:1;transform:translateY(-5px) rotate(-4deg)}75%{opacity:1;transform:translateY(15px) rotate(9deg)}100%{opacity:1;transform:translateY(10px) rotate(5deg)}}
@media(min-aspect-ratio:2/1){.scene-world{mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}}
@media(max-width:500px){.bar-modal-tools{gap:13px;font-size:8px}.bar-experience .opening-dialog{max-height:95dvh}}
@media(prefers-reduced-motion:reduce){
 .scene-world .machine-art,.scene-world .contact-shadow,.bar-experience[data-opening-state="dispensing"] .dispense-pack{animation:none!important;transform:none}
 .scene-prompt,.lamp-warmth,.floor-light{transition:none}
}
.bar-experience dialog{--paper:#e9e4d9;--ink:#211d15;--yellow:#e9bd59;background:var(--paper);color:var(--ink);border:1px solid #b28c4c70;box-shadow:0 20px 120px #0008}
.bar-experience dialog::backdrop{background:#030403a3;backdrop-filter:blur(9px)}
.bar-experience .opening-dialog{border-radius:3px}
.bar-experience .close-dialog{border-color:#9e8d6b80}
.bar-experience .primary{background:#edc366;border-color:#6d5427}
.bar-experience .primary:hover{background:#f5ce7d}
.bar-experience .burst{background:#cba45c;opacity:.3}
.bar-experience .opening-dialog.is-revealed .burst{opacity:.42}
.bar-experience .card-front{background:#f3ecdf;border-color:#c0ad85}
.bar-experience .card-back{color:#e1bc6d;background:#242016;border-color:#353022;outline-color:#77633b}
.bar-experience .card-back:before{border-color:#8f7138}
.bar-experience .button:focus-visible,.bar-experience a:focus-visible{outline-color:#8b642a}
.bar-modal-tools{display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid #b4a48666;margin-top:17px;padding-top:14px;font:9px 'Courier New',monospace;color:#6a5b41}
.bar-modal-tools>button{background:none;font:inherit;padding:3px 0}
.bar-modal-tools>button:hover{text-decoration:underline;text-underline-offset:3px}
.bar-modal-tools label{display:flex;gap:5px;align-items:center;cursor:pointer}
.bar-modal-tools input{accent-color:#6f5529;margin:0}
.bar-modal-tools #pull-count{display:inline-flex;min-width:16px;align-items:center;justify-content:center;border:1px solid #a58f68;border-radius:50%;font-size:8px;margin-left:2px}
.bar-experience .opening-note{color:#7c705b}
/* V04: a discreet, always available ambient-sound control. */
.sound-toggle{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:9px;min-height:40px;padding:10px 13px;border:1px solid #ffe0a02b;border-radius:30px;color:#f3d7a5;background:#0b0810a6;backdrop-filter:blur(12px);font:9px 'Courier New',monospace;letter-spacing:.6px;box-shadow:0 2px 15px #0004}
.sound-toggle:hover{background:#22172bbd;border-color:#f3c77770}
.sound-toggle:focus-visible{outline:2px solid #efc877;outline-offset:4px}
.sound-waves{display:none}
[data-audio-state="playing"] .sound-waves{display:block}
[data-audio-state="playing"] .sound-slash{display:none}
.bar-modal-tools{flex-wrap:wrap;row-gap:10px}
@media(max-width:500px){.sound-toggle{right:14px;bottom:max(16px,env(safe-area-inset-bottom));font-size:8px;min-height:40px;padding:9px 11px}.bar-modal-tools{column-gap:14px}}

.gallery-sound{position:absolute;top:24px;right:65px;font:9px 'Courier New',monospace;background:transparent;border:0;color:#6a5b41;padding:4px}