/* Ruby’s Lounge · RUBY JAR (v20261101rj1): hidden red ruby gems, one shared jar, sparkly start/finish pops. Kawaii look.
   Everything here except the jar itself is pointer-events:none: it never takes a tap away from a game (the jar is a small key, like back and sound; a tap opens the big jar view). Collecting is done by ruby-jar.js
   watching pointers at the window (capture, passive), so the game still gets every tap and drag. */
#rj-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;contain:layout style}
#rj-layer *{pointer-events:none;box-sizing:border-box}
.rj-gem{position:absolute;left:0;top:0;width:var(--rj-s,52px);height:var(--rj-s,52px);margin:calc(var(--rj-s,52px) / -2) 0 0 calc(var(--rj-s,52px) / -2);will-change:transform}
.rj-gem svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 0 rgba(90,47,79,.22))}
.rj-gem .rj-bob{width:100%;height:100%;animation:rj-peek 2.8s ease-in-out infinite;transform-origin:50% 90%}
.rj-gem .rj-tw{position:absolute;width:38%;height:38%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9.4 8.6 16.4 18 18-9.4 1.6-16.4 8.6-18 18-1.6-9.4-8.6-16.4-18-18 9.4-1.6 16.4-8.6 18-18z' fill='%23fff' stroke='%235a2f4f' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");animation:rj-tw 1.9s ease-in-out infinite}
.rj-gem .rj-tw.a{right:-14%;top:-12%}.rj-gem .rj-tw.b{left:-12%;bottom:4%;width:26%;height:26%;animation-delay:-.8s}
.rj-gem.rj-got .rj-bob{animation:none}
.rj-gem.rj-got .rj-tw{display:none}
@keyframes rj-peek{0%,100%{transform:translateY(0) rotate(-6deg) scale(1)}50%{transform:translateY(-6%) rotate(6deg) scale(1.06)}}
@keyframes rj-tw{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1) rotate(25deg);opacity:1}}
/* the jar */
#rj-jar{position:fixed;z-index:61;pointer-events:auto;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;outline:none;width:64px;height:76px;top:calc(8px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));transform-origin:50% 100%}
#rj-jar.rj-tl{right:auto;left:calc(10px + env(safe-area-inset-left))}
#rj-jar.rj-bl{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));right:auto;left:calc(10px + env(safe-area-inset-left))}
#rj-jar.rj-br{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
#rj-jar.rj-tr2{top:calc(100px + env(safe-area-inset-top))}
#rj-jar.rj-tm{right:auto;left:50%;margin-left:-32px}
#rj-jar.rj-hide{display:none}
#rj-jar.rj-pass{pointer-events:none}
#rj-jar svg{display:block;width:100%;height:100%;overflow:visible}
#rj-jar.rj-wig{animation:rj-wig .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes rj-wig{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.16,.9) rotate(-8deg)}50%{transform:scale(.94,1.1) rotate(7deg)}75%{transform:scale(1.05,.97) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@media (min-width:900px) and (min-height:700px){#rj-jar{width:80px;height:95px}#rj-jar.rj-tr2{top:calc(100px + env(safe-area-inset-top))}
#rj-jar.rj-tm{margin-left:-40px}}
/* the pops */
.rj-pop{position:absolute;left:0;top:0;white-space:nowrap;font:900 clamp(40px,8.4vmin,96px)/1 var(--kw-font,ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito",system-ui,sans-serif);
 letter-spacing:.01em;color:#fff;-webkit-text-stroke:.16em #5a2f4f;paint-order:stroke fill;
 text-shadow:0 .07em 0 #5a2f4f,0 0 .35em rgba(255,216,77,.9),0 0 .8em rgba(255,111,174,.75);
 animation:rj-pop 1.2s cubic-bezier(.2,1.4,.4,1) both;will-change:transform,opacity}
.rj-pop b{display:inline-block;font-weight:900;animation:rj-bounce .5s cubic-bezier(.3,1.7,.5,1) both}
.rj-pop.rj-start b:nth-child(4n+1){color:#ff6fae}.rj-pop.rj-start b:nth-child(4n+2){color:#ffd84d}.rj-pop.rj-start b:nth-child(4n+3){color:#7fe0b8}.rj-pop.rj-start b:nth-child(4n+4){color:#7cc8ff}
.rj-pop.rj-done b:nth-child(4n+1){color:#ff4fa3}.rj-pop.rj-done b:nth-child(4n+2){color:#ffb38a}.rj-pop.rj-done b:nth-child(4n+3){color:#b99cff}.rj-pop.rj-done b:nth-child(4n+4){color:#ffd84d}
.rj-pop i{position:absolute;width:.42em;height:.42em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9.4 8.6 16.4 18 18-9.4 1.6-16.4 8.6-18 18-1.6-9.4-8.6-16.4-18-18 9.4-1.6 16.4-8.6 18-18z' fill='%23fff' stroke='%235a2f4f' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");animation:rj-tw .9s ease-in-out infinite}
@keyframes rj-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}18%{transform:translate(-50%,-50%) scale(1.1);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-62%) scale(1)}100%{transform:translate(-50%,-80%) scale(.92);opacity:0}}
@keyframes rj-bounce{0%{transform:translateY(.4em) scale(.4)}100%{transform:none}}
.rj-spark{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9.4 8.6 16.4 18 18-9.4 1.6-16.4 8.6-18 18-1.6-9.4-8.6-16.4-18-18 9.4-1.6 16.4-8.6 18-18z' fill='%23ffd84d' stroke='%235a2f4f' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.rj-gem .rj-bob,.rj-gem .rj-tw,.rj-pop i{animation:none}.rj-pop{animation-duration:1.2s}}

/* the big jar view (tap the jar) */
#rj-pane{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;background:rgba(255,228,240,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);touch-action:none;cursor:pointer;animation:rj-fade .25s ease both}
#rj-pane[hidden]{display:none}
#rj-pane .rj-big{position:relative;width:min(74vw,64vh,600px);aspect-ratio:80/96;filter:drop-shadow(0 8px 0 rgba(90,47,79,.25));animation:rj-bigin .45s cubic-bezier(.3,1.5,.5,1) both}
#rj-pane .rj-big::before{content:'';position:absolute;left:17.5%;right:17.5%;top:23%;bottom:6%;border:5px solid #5a2f4f;border-radius:10% 10% 14% 14%;background:linear-gradient(160deg,rgba(240,250,255,.95),rgba(214,236,255,.9));box-shadow:inset 10px 0 0 rgba(255,255,255,.6)}
#rj-pane .rj-big::after{content:'';position:absolute;left:15%;right:15%;top:8%;height:15%;border:5px solid #5a2f4f;border-radius:18px;background:#ff6fae;box-shadow:inset 0 6px 0 rgba(255,255,255,.4)}
#rj-pane .rj-pile{position:absolute;left:19.5%;right:19.5%;top:25%;bottom:7.5%;overflow:hidden;border-radius:0 0 14% 14%}
#rj-pane .rj-pile>div{position:absolute;aspect-ratio:1;transform:rotate(var(--r,0deg));animation:rj-drop .55s cubic-bezier(.3,1.4,.5,1) both}
#rj-pane .rj-pile>div svg,.rj-rain svg,.rj-party-gem svg{display:block;width:100%;height:100%}
#rj-pane .rj-pile>.rj-ghost{left:30%;width:40%;bottom:30%;opacity:.3;animation:none}
@keyframes rj-drop{0%{transform:translateY(-260%) rotate(0);opacity:0}60%{opacity:1}100%{transform:translateY(0) rotate(var(--r,0deg))}}
@keyframes rj-bigin{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes rj-fade{0%{opacity:0}}
/* milestone party */
.rj-party{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rj-party-gem{position:absolute;left:50%;top:45%;width:min(42vw,42vh);height:min(42vw,42vh);transform:translate(-50%,-50%);animation:rj-pgem 2.5s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 0 22px #fff6a8)}
@keyframes rj-pgem{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg)}20%{transform:translate(-50%,-50%) scale(1.12) rotate(8deg)}35%,80%{transform:translate(-50%,-50%) scale(1) rotate(0)}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}
.rj-rain{position:absolute;top:-90px;animation:rj-rain 1.8s cubic-bezier(.4,.1,.7,1) both}
@keyframes rj-rain{to{transform:translateY(calc(100vh + 140px)) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){#rj-pane .rj-pile>div,#rj-pane .rj-big{animation:none}.rj-rain{display:none}.rj-party-gem{animation-duration:1.2s}}