/* Ruby’s Lounge · little ones · shared page bits for the new games (v20261101ng1) */
html,body{background:#ffeaf4}
#cv{position:fixed;left:0;top:0;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#tk-back{display:none!important}
.tk #tg-exit{background:rgba(120,110,120,.10);color:#8a8090}
.tk #tg-exit .ring circle{stroke:#8a8090}
.tk #tg-exit.hold .ring circle{transition:stroke-dashoffset 2s linear;stroke-dashoffset:0}
#tg-cards-key{position:fixed;z-index:46;top:calc(4px + env(safe-area-inset-top));left:calc(150px + env(safe-area-inset-left));width:52px;height:52px;padding:6px;border-radius:50%;
 background:#fff;border:3px solid #5a2f4f;box-shadow:0 3px 0 #5a2f4f;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
#tg-cards-key:active{transform:translateY(2px);box-shadow:0 1px 0 #5a2f4f}
#tg-cards-key svg{width:100%;height:100%;display:block}
#tg-cards-key rect{stroke:#5a2f4f;stroke-width:2.6}
/* pop words fallback (the Ruby Jar module draws its own when it is loaded) */
.tg-pop{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);font:900 clamp(34px,6vw,72px)/1 var(--kw-font,ui-rounded,system-ui,sans-serif);color:#fff;
 -webkit-text-stroke:6px #5a2f4f;paint-order:stroke fill;text-shadow:0 0 22px rgba(255,216,77,.9),0 6px 0 #5a2f4f;letter-spacing:.5px;white-space:nowrap;animation:tg-pop 1.3s ease-out forwards}
@keyframes tg-pop{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
/* age picker */
#tg-pick{position:fixed;inset:0;z-index:48;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:70px 16px 24px;
 background:linear-gradient(#a9e2ff,#cdeeff 40%,#ffd7ec 75%,#ffeaf4);transition:opacity .25s,transform .25s}
#tg-pick.kw-dots{background:radial-gradient(circle,rgba(255,255,255,.45) 3px,transparent 3.5px) 0 0/24px 24px,linear-gradient(#a9e2ff,#cdeeff 40%,#ffd7ec 75%,#ffeaf4)}
#tg-pick.bye{opacity:0;transform:scale(1.06);pointer-events:none}
#tg-pick .tg-hero{width:min(64vw,52vh,520px);aspect-ratio:2/1;pointer-events:none}
#tg-pick .tg-hero svg{width:100%;height:100%;display:block;overflow:visible}
#tg-pick .tg-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vw,26px);max-width:1500px}
#tg-pick .tg-card{position:relative;width:clamp(150px,15vw,250px);aspect-ratio:3/4;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 background:var(--c);overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .12s;font:900 20px var(--kw-font,system-ui)}
#tg-pick .tg-card.on{outline:6px solid #fff;outline-offset:-14px}
#tg-pick .tg-card.pressed,#tg-pick .tg-card:active{transform:translateY(5px) scale(.97);box-shadow:0 1px 0 #5a2f4f}
#tg-pick .tg-art{width:84%;height:62%;display:block;margin-top:6%;background:rgba(255,255,255,.55);border-radius:22px}
#tg-pick .tg-art svg{width:100%;height:100%;display:block}
#tg-pick .tg-card b{display:block;margin-top:2%;font:900 clamp(40px,4.6vw,76px)/1 var(--kw-font,system-ui);color:#fff;-webkit-text-stroke:5px #5a2f4f;paint-order:stroke fill;text-shadow:0 4px 0 #5a2f4f}
#tg-pick .tg-card b i{font-style:normal;font-size:.7em}
#tg-pick .tg-dots{position:absolute;bottom:5%;display:flex;gap:4px}
#tg-pick .tg-dots em{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #5a2f4f}
#tg-pick .tg-rain{width:62%;-webkit-text-stroke:0!important;text-shadow:none!important}
#tg-pick .tg-rain svg{width:100%;display:block}
#tg-pick .tg-rain path{filter:drop-shadow(0 0 0 #5a2f4f)}
@media (max-aspect-ratio:3/4){#tg-pick{gap:1.5vh;padding-top:64px}#tg-pick .tg-hero{width:86vw}#tg-pick .tg-card{width:calc(50vw - 30px);max-width:200px}#tg-pick .tg-free{width:calc(100vw - 48px);max-width:420px;aspect-ratio:auto;height:22vh;flex-direction:row;gap:4%;justify-content:center;align-items:center}
 #tg-pick .tg-free .tg-art{width:40%;height:80%;margin:0}#tg-pick .tg-free .tg-rain{width:36%}}
@media (max-height:520px){#tg-pick .tg-hero{display:none}}
@media (prefers-reduced-motion:reduce){.tg-pop{animation-duration:.01s}}

/* v20261101rb1: the cards key is a 1.6 s grown-up hold with a ring */
#tg-cards-key{overflow:visible}
#tg-cards-key svg.ring{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);pointer-events:none}
#tg-cards-key .ring circle{fill:none;stroke:#ff6fae;stroke-width:3;stroke-linecap:round;stroke-dasharray:107;stroke-dashoffset:107}
#tg-cards-key.hold .ring circle{transition:stroke-dashoffset 1.6s linear;stroke-dashoffset:0}