/* The Curio Machine (Ruby’s Lounge · vend/ · v20261022cm2) */
.vm{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:calc(50px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
.mwrap{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
#mach{display:block;height:100%;max-height:640px;width:auto;max-width:100%;aspect-ratio:320/500;overflow:visible;filter:drop-shadow(0 0 26px rgba(255,95,184,.22));-webkit-user-select:none;user-select:none}
.hint{margin:0;min-height:1.4em;font:italic 600 19px/1.3 var(--serif);color:#ffe8c8;text-shadow:0 0 12px rgba(255,95,184,.5);letter-spacing:.02em;transition:opacity .3s}
.hint:empty{opacity:0}
.vlever,.vbtn{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.vlever{touch-action:none}
#arm{transition:none}
.vlever:focus-visible #arm circle:nth-of-type(1),.vbtn:focus-visible>circle:first-child{stroke:#ffb84d;stroke-width:3}
.vbtn .top{transition:transform .08s ease-out}
.vbtn.down .top{transform:translateY(5px)}
.vbtn .ring{transition:opacity .3s}
.armed .vbtn .ring{animation:vring 1.1s ease-in-out infinite}
@keyframes vring{0%,100%{opacity:.15;stroke-width:3}50%{opacity:1;stroke-width:6}}
.idle .vlever #arm{animation:vnudge 2.6s ease-in-out 1.2s infinite;transform-box:view-box;transform-origin:251px 330px}
@keyframes vnudge{0%,72%,100%{rotate:0deg}80%{rotate:9deg}88%{rotate:-2deg}94%{rotate:4deg}}
.vlever.drag #arm,.busy .vlever #arm,.armed .vlever #arm{animation:none}
/* reveal */
.rv{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:calc(54px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:rgba(12,4,20,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rvIn .3s ease-out;overflow-y:auto}
.rv[hidden]{display:none}
@keyframes rvIn{from{opacity:0}}
.rv-in{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(380px,100%);margin:auto}
.rv-st{position:relative;width:min(52vw,220px,27vh);aspect-ratio:1;display:grid;place-items:center}
.rv-st img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.2);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.rv-st .glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,140,.55),rgba(255,95,184,.18) 60%,transparent);opacity:0;pointer-events:none}
.rv-st .spark{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;pointer-events:none}
.rv-cap{position:absolute;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:7;pointer-events:none;overflow:visible}
.rv-n{margin:10px 0 0;font:italic 600 30px/1.08 var(--serif);color:#ffe8c8;text-shadow:0 0 14px rgba(255,95,184,.55);opacity:0}
.rv-n.alt{font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:400}
/* date + where: a small world map with a glowing pin, the date big beside it, the place under the date */
.rv-m{display:flex;align-items:center;justify-content:center;gap:12px;margin:9px 0 0;max-width:100%;opacity:0}
.rv-map{flex:0 0 auto;display:block;width:146px;height:auto;aspect-ratio:360/142;border-radius:9px;background:radial-gradient(120% 140% at 50% 40%,#1d1430,#0f0818);box-shadow:inset 0 0 0 1px rgba(67,230,216,.28),0 4px 14px rgba(0,0,0,.35);overflow:hidden}
.rv-map .land{fill:#43e6d8;fill-opacity:.42;stroke:#9ff6ee;stroke-opacity:.55;stroke-width:.8;stroke-linejoin:round}
.rv-map .eq{stroke:#43e6d8;stroke-opacity:.16;stroke-width:1;stroke-dasharray:4 5}
#rvpin .dot{fill:#ffd27a;stroke:#fff6e8;stroke-width:2.6}
#rvpin .ring{fill:none;stroke:#ffb84d;stroke-width:3;opacity:.9}
#rvpin .halo{fill:url(#vpinG)}
.rv.show #rvpin .ring{animation:vpin 1.8s ease-out .6s infinite;transform-box:fill-box;transform-origin:center}
@keyframes vpin{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.rv-mt{min-width:0;text-align:left}
.rv-d{margin:0;font:800 28px/1.05 var(--sans);font-variant-numeric:lining-nums tabular-nums;color:#ffd27a;text-shadow:0 0 14px rgba(255,184,77,.45);letter-spacing:.01em}
.rv-d.mid{font-size:21px}
.rv-d.long{font-size:17px;line-height:1.15;max-width:170px}
.rv-d:empty{display:none}
.rv-t{margin:4px 0 0;font:700 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.rv-t:empty{display:none}
.rv-m.nogeo .rv-map{display:none}
.rv-m.nogeo .rv-mt{text-align:center}
.rv-m.nogeo .rv-t{margin:0;letter-spacing:.1em}
.rv-b{position:relative;margin:15px 0 0;padding:12px 15px;border-radius:16px;background:#fff6e8;color:#2a1430;font:15px/1.42 var(--sans);text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.4);opacity:0;transform-origin:50% 0}
.rv-b::before{content:'';position:absolute;left:50%;top:-9px;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:#fff6e8}
.rv-b.cap{text-align:center;font:italic 600 21px/1.25 var(--serif);padding:10px 18px}
.rv-go{margin-top:18px;min-width:168px;min-height:54px;padding:0 30px;border:0;border-radius:27px;background:linear-gradient(180deg,#ffd27a,#ff9f3a);color:#3a1404;font:italic 700 24px/1 var(--serif);letter-spacing:.03em;box-shadow:0 6px 0 #b8561a,0 12px 24px rgba(0,0,0,.4);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;opacity:0}
.rv-go:active{transform:translateY(4px);box-shadow:0 2px 0 #b8561a,0 6px 14px rgba(0,0,0,.4)}
.rv-go:focus-visible{outline:3px solid #fff6e8;outline-offset:3px}
.rv.show .rv-n,.rv.show .rv-m,.rv.show .rv-b,.rv.show .rv-go{animation:rvUp .45s cubic-bezier(.2,1.4,.4,1) both}
.rv.show .rv-m{animation-delay:.1s}.rv.show .rv-b{animation-name:rvPop;animation-delay:.22s}.rv.show .rv-go{animation-delay:.4s}
@keyframes rvUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rvPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (max-height:620px){.rv-n{font-size:25px}.rv-map{width:120px}.rv-d{font-size:24px}.rv-d.mid{font-size:19px}.rv-d.long{font-size:15px}.rv-b{font-size:14px;margin-top:12px}.rv-go{min-height:48px;margin-top:12px}}
@media (min-width:700px) and (min-height:680px){.rv-map{width:168px}.rv-d{font-size:32px}.rv-d.mid{font-size:24px}.rv-d.long{font-size:19px}}
@media (prefers-reduced-motion:reduce){.idle .vlever #arm,.armed .vbtn .ring{animation:none}.rv.show .rv-n,.rv.show .rv-m,.rv.show .rv-b,.rv.show .rv-go{animation-duration:.01s}.rv.show #rvpin .ring{animation:none}}
