/* digi-app · ui/chest.css
   HER CHESTS (digiAPP_Build 8x.11 piece 4) in digiGAMES' cartoon look: ink #14123d outlines, hard ink shadows, chunky
   words. The page rides .pg-games (ui/games.css); the moment is its own overlay. Reduced motion (or .still): no motion,
   straight to what the chest held. */

/* digiGAMES' tile: the bar, the dots, the pill */
.ch-bar{position:relative;display:block;height:14px;border-radius:999px;background:#fff;box-shadow:0 0 0 2.5px #14123d;overflow:hidden}
.ch-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .6s ease}
.gm-earn .ch-bar{margin-top:4px}
.gm-earn .gm-w b{font-size:23px}
.gm-earn .gm-art{width:104px;height:84px}
.ch-tl{display:flex;align-items:center;gap:8px}
.ch-tl small{color:#14123d!important}
.ch-dots{display:inline-flex;gap:5px}
.ch-dots i{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #14123d}
.ch-dots i.on{background:#cbd5e1}
.ch-dots i.g{background:#fff7cc}
.ch-dots i.g.on,.ch-dots i.on.g{background:#eab308}
.gm-st.go{background:#14123d;color:#fde047;animation:chPulse 1.6s ease-in-out infinite}
@keyframes chPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* the chest: a shake while it waits */
.chs{width:100%;height:100%;overflow:visible}
.chs-lid{transform-box:fill-box;transform-origin:0% 100%}
.chs.ready{animation:chShake 2.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes chShake{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-6deg)}74%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}86%{transform:rotate(4deg)}}

/* the page */
.ch-sky{height:calc(var(--safe-t) + 222px)}
.ch-big{position:absolute;left:50%;top:calc(var(--safe-t) + 54px);width:132px;height:108px;transform:translateX(-50%);z-index:1}
.ch-h{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 164px);margin:0;text-align:center;font-size:30px;font-weight:900;color:#fff;z-index:1;
  text-shadow:0 3px 0 #14123d,2px 0 0 #14123d,-2px 0 0 #14123d,0 -2px 0 #14123d,1.5px 1.5px 0 #14123d,-1.5px 1.5px 0 #14123d,1.5px -1.5px 0 #14123d,-1.5px -1.5px 0 #14123d}
.ch-h .s{color:#e5e7eb}.ch-h .g{color:#fde047}
.ch-in h2{margin:0 0 10px;font-size:20px;font-weight:900;color:#14123d}
.ch-next{display:flex;flex-direction:column;gap:10px}
.ch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:800;color:#14123d}
.ch-row b{font-size:18px;font-weight:900}
.ch-open{display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;border:0;border-radius:26px;font:inherit;font-size:24px;font-weight:900;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#f59e0b,#eab308 60%,#fde047);box-shadow:0 0 0 3px #14123d,0 7px 0 3px #14123d;
  text-shadow:0 3px 0 #14123d,1.8px 0 0 #14123d,-1.8px 0 0 #14123d,0 -1.8px 0 #14123d}
.ch-open:active{transform:translateY(5px);box-shadow:0 0 0 3px #14123d,0 2px 0 3px #14123d}
.ch-open svg{width:84px;height:68px;flex:none}
.ch-tk b{display:block;font-size:18px;font-weight:900;color:#14123d}
.ch-tk p{margin:6px 0 12px;font-weight:700;color:#14123d}
.ch-tk .btn,.ch-rw .btn{background:#14123d;color:#fff;box-shadow:none}
.ch-rw{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:2px dashed rgba(20,18,61,.18);color:#14123d}
.ch-wallet h2+.ch-rw{border-top:0}
.ch-rw>svg{flex:none;width:48px}
.ch-rw span{flex:1;min-width:0}
.ch-rw b{display:block;font-size:17px;font-weight:900}
.ch-rw small{font-size:14px;font-weight:700;opacity:.8}
.ch-rw .btn.sm{width:auto;flex:none;padding:10px 14px;border-radius:999px;font-size:14.5px}
.ch-rw.used{background:#fff7cc;margin:0 -14px;padding:10px 14px}
.ch-rw.used.silver{background:#f1f5f9}
.ch-none{margin:4px 0;font-weight:700;color:#14123d;opacity:.75}
.ch-how p{margin:0 0 10px;font-size:15px;line-height:1.45;color:#14123d}
.ch-how p:last-child{margin:0}

/* her home's line: a chest is ready */
.h-chest{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 16px;border:0;border-radius:20px;font:inherit;text-align:left;cursor:pointer;color:#14123d;
  background:linear-gradient(135deg,#f59e0b,#fde047);box-shadow:0 0 0 2.5px #14123d,0 5px 0 2.5px #14123d}
.h-chest svg{width:58px;height:48px;flex:none}
.h-chest b{display:block;font-size:17px;font-weight:900}.h-chest small{font-size:14px;font-weight:700}

/* where: the spot picker and the yes */
.ch-pick h3{margin:14px 0 8px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.ch-sub{margin:-4px 0 12px;opacity:.8}
.ch-pct{flex:none;font-style:normal;font-weight:900;font-size:15px;padding:5px 10px;border-radius:999px;background:#e5e7eb;color:#14123d}
.ch-pct.gold{background:#fde047}
.ch-ok{text-align:center}
.ch-ok-art{margin:4px auto 6px}
.ch-ok .btn{margin-top:10px}

/* THE MOMENT */
.chm{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 45%,rgba(253,224,71,.28),transparent 55%),rgba(20,18,61,.94);opacity:0;transition:opacity .25s ease}
.chm.in,.chm.still{opacity:1}
.chm-stage{position:relative;width:220px;height:200px;cursor:pointer;outline:none}
.chm-box{position:absolute;left:10px;right:10px;bottom:0;height:170px;transform:translateY(-120vh)}
.chm.in .chm-box{animation:chDrop .7s cubic-bezier(.3,1.4,.5,1) forwards,chWait 1.8s ease-in-out .8s infinite}
@keyframes chDrop{0%{transform:translateY(-120vh)}100%{transform:translateY(0)}}
@keyframes chWait{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}90%{transform:rotate(-3deg)}}
.chm.still .chm-box{transform:none}
.chm-stage.open .chm-box{animation:chPop .4s ease forwards}
@keyframes chPop{0%{transform:scale(1)}40%{transform:scale(1.12,.9)}100%{transform:scale(1)}}
.chm-stage.open .chs-lid{animation:chLid .6s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes chLid{to{transform:translate(-6px,-26px) rotate(-32deg)}}
.chm.still .chm-stage.open .chs-lid{animation:none;transform:translate(-6px,-26px) rotate(-32deg)}
.chm-stage.done{display:none}
.chm-fly{position:absolute;left:50%;top:55%;pointer-events:none}
.chm-f{position:absolute;left:-15px;top:-15px;opacity:0}
.chm-stage.open .chm-f{animation:chFly .9s cubic-bezier(.2,.8,.3,1) var(--d,0s) forwards}
@keyframes chFly{0%{opacity:1;transform:translate(0,0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(220deg)}}
.chm.still .chm-f{display:none}
.chm-tap{position:absolute;left:0;right:0;bottom:-46px;margin:0;text-align:center;color:#fff;font-size:20px;font-weight:900;animation:chPulse 1.4s ease-in-out infinite}
.chm-stage.open .chm-tap,.chm.still .chm-tap{display:none}
.chm-card{width:100%;max-width:340px;margin-top:56px;padding:22px 20px;border-radius:26px;background:#fff;color:#14123d;text-align:center;box-shadow:0 0 0 3px #14123d,0 7px 0 3px #14123d;
  transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s ease}
.chm-card.in{transform:none;opacity:1}
.chm.still .chm-card{transition:none}
.chm-art{display:flex;justify-content:center;gap:10px;margin:-64px 0 10px}
.chm-art svg{filter:drop-shadow(0 6px 0 #14123d)}
.chm-card.in .chm-art svg{animation:chSpin .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes chSpin{0%{transform:scale(.3) rotateY(0)}100%{transform:scale(1) rotateY(360deg)}}
.chm-card h2{margin:0 0 6px;font-size:30px;font-weight:900}
.chm-card p{margin:0 0 14px;font-size:16px;font-weight:700}
.chm-card .btn{margin-top:8px;background:#14123d;color:#fff;box-shadow:none}
.chm-card .btn.ghost{background:#eef0f6!important;color:#14123d!important}
@media (prefers-reduced-motion:reduce){.chm *,.h-chest *,.ch-in *{animation:none!important;transition:none!important}.chm-box{transform:none}}