/* v30.19.0: Royale-kister - the "Kister" tab, the Shop badge, the opening animation, ranked HUD tags. */
.shop-filter.hidden{display:none}

/* ---- the tab --------------------------------------------------------------- */
.chest-hero{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:14px;align-items:center;margin:4px 0 12px;padding:12px;border:1px solid #6b5220;border-radius:14px;
  background:radial-gradient(80% 120% at 20% 50%,rgba(255,200,80,.18),transparent 60%),linear-gradient(180deg,#14263a,#0a1724)}
.chest-hero.ready{border-color:#ffd766;box-shadow:0 0 22px rgba(255,214,102,.35)}
.chest-hero-img{width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.chest-hero.ready .chest-hero-img{animation:chestIdle 1.6s ease-in-out infinite}
.chest-hero-text{display:grid;gap:6px;color:#cbdceb;font-size:13px}
.chest-hero-text strong{font-size:20px;color:#ffe591}
.chest-progress{display:grid;gap:4px}
.chest-pips{display:flex;gap:6px}
.chest-pips i{flex:1;max-width:46px;height:10px;border-radius:6px;background:#1d3550;border:1px solid #2f4f70}
.chest-pips i.on{background:linear-gradient(90deg,#ffd766,#f1a627);border-color:#ffe9a6;box-shadow:0 0 8px rgba(255,214,102,.6)}
.chest-progress small,.chest-none{color:#9db2c7;font-size:12px}
.chest-open-btn{justify-self:start;font-size:15px;padding:9px 16px;animation:chestBtn 1.2s ease-in-out infinite}
.ranked-tag-head{background:linear-gradient(90deg,#8a1d1d,#d4561f)!important;color:#fff!important}
.ranked-dot{background:linear-gradient(90deg,#8a1d1d,#d4561f)!important;color:#fff!important}
.ranked-tag{font-size:11px!important;color:#ffd0b8!important;background:#3a1610!important;border:1px solid #9c3a1c!important}
.chest-item.locked img{filter:brightness(.35) saturate(.6)}
@media (max-width:420px){.chest-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.chest-hero-img{max-width:200px}.chest-open-btn{justify-self:center}.chest-pips{justify-content:center}}

/* ---- the Shop card on the front page --------------------------------------- */
.menu-card.chest-ready{position:relative;border-color:#ffd766!important;box-shadow:0 0 0 1px rgba(255,214,102,.5),0 0 22px rgba(255,214,102,.45)!important;animation:chestCard 1.6s ease-in-out infinite}
.menu-card.chest-ready::after{content:"🎁 " attr(data-chests);position:absolute;top:6px;right:8px;padding:2px 8px;border-radius:999px;background:#d4561f;color:#fff;font-size:12px;font-weight:1000;box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ---- scorecard line ------------------------------------------------------ */
.gp-chest{display:block;margin-top:4px;font-size:12px;font-weight:800;color:#d9bd68}
.gp-chest.won{font-size:14px;color:#ffe591;text-shadow:0 0 12px rgba(255,214,102,.6)}

/* ---- opening --------------------------------------------------------------- */
.chest-overlay{position:fixed;inset:0;z-index:14500;display:grid;place-items:center;align-content:center;gap:14px;padding:16px;
  background:radial-gradient(70% 60% at 50% 45%,rgba(29,54,85,.94),rgba(3,9,16,.97));backdrop-filter:blur(6px);overflow:hidden}
.chest-overlay.hidden{display:none}
.chest-stage{position:relative;pointer-events:none;width:min(300px,72vw);aspect-ratio:1310/841;margin-top:min(230px,34vh)}
.chest-part{position:absolute;display:block;pointer-events:none}
.chest-base{left:.76%;top:37.69%;width:99.24%;z-index:2}
.chest-lid{left:0;top:0;width:91.07%;z-index:3;transform-origin:50% 95%}
.chest-glow{position:absolute;left:50%;top:40%;width:10%;height:10%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;opacity:0;background:radial-gradient(circle,#fff 0,#ffe28a 30%,rgba(255,180,40,0) 70%)}
.chest-rays{position:absolute;left:50%;top:-10%;width:240%;aspect-ratio:1;translate:-50% -50%;z-index:0;opacity:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.5) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0 22%,transparent 60%);mask:radial-gradient(circle,#000 0 22%,transparent 60%)}
.chest-card{position:absolute;left:50%;top:30%;width:50%;aspect-ratio:4/5;transform:translate(-50%,0) scale(.2);z-index:5;opacity:0;border-radius:12px;border:3px solid #ffd766;
  background:#0b1b2b center/cover no-repeat;box-shadow:0 0 30px rgba(255,90,40,.9),0 0 70px rgba(255,200,80,.7);display:grid;place-items:center}
.chest-card.points{font-size:clamp(24px,7vw,34px);font-weight:1000;color:#ffe591;background:radial-gradient(circle at 40% 35%,#3b2a08,#120c02)}
.chest-label{position:absolute;left:50%;top:-112%;z-index:6;transform:translateX(-50%);color:#ffe591;font-weight:1000;font-size:clamp(18px,5.4vw,24px);letter-spacing:1px;text-shadow:0 0 18px rgba(255,120,40,.9);opacity:0;white-space:nowrap}
.chest-sparks i{position:absolute;left:50%;top:40%;width:8px;height:8px;margin:-4px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ffd766 55%,transparent 72%);opacity:0;z-index:4}
.chest-result{position:relative;z-index:10;min-height:110px;display:grid;justify-items:center;gap:4px;text-align:center;color:#cbdceb;opacity:0;transition:opacity .3s}
.chest-overlay.done .chest-result{opacity:1}
.chest-result strong{font-size:24px;color:#ffe591}
.chest-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.chest-error{color:#ff9d93;font-weight:800}

.chest-stage.shaking .chest-base,.chest-stage.shaking .chest-lid{animation:chestShake 1.5s ease-in both}
.chest-stage.open .chest-lid{animation:chestLid .7s cubic-bezier(.2,1.4,.4,1) both}
.chest-stage.open .chest-glow{animation:chestGlow .9s ease-out both}
.chest-stage.open .chest-rays{animation:chestRays 1s ease-out .1s both,chestSpin 8s linear .1s infinite}
.chest-stage.open .chest-card{animation:chestCardUp .8s cubic-bezier(.2,1.5,.4,1) .25s both}
.chest-stage.open .chest-label{animation:chestLabel .5s ease-out .9s both}
.chest-stage.open .chest-sparks i{animation:chestSpark 1.1s ease-out var(--d) both}

@keyframes chestShake{0%{transform:none}20%{transform:rotate(-1deg)}30%{transform:rotate(1.5deg)}40%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg) translateY(-2px)}60%{transform:rotate(-3deg) translateY(-3px)}70%{transform:rotate(3.5deg) translateY(-4px)}80%{transform:rotate(-4deg) translateY(-6px) scale(1.02)}90%{transform:rotate(4deg) translateY(-8px) scale(1.03)}100%{transform:none}}
@keyframes chestLid{0%{transform:none}55%{transform:translate(-14%,-120%) rotate(-28deg) scale(.86)}100%{transform:translate(-18%,-98%) rotate(-20deg) scale(.78)}}
@keyframes chestGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-50%) scale(14)}100%{opacity:.55;transform:translate(-50%,-50%) scale(9)}}
@keyframes chestRays{from{opacity:0}to{opacity:1}}
@keyframes chestSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes chestCardUp{0%{opacity:0;transform:translate(-50%,40%) scale(.2)}100%{opacity:1;transform:translate(-50%,-95%) scale(1)}}
@keyframes chestLabel{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes chestSpark{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2)}}
@keyframes chestIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg) translateY(-3px)}}
@keyframes chestBtn{0%,100%{box-shadow:0 0 0 rgba(120,255,170,0)}50%{box-shadow:0 0 18px rgba(120,255,170,.7)}}
@keyframes chestCard{0%,100%{filter:none}50%{filter:brightness(1.15)}}

@media (prefers-reduced-motion: reduce){
  .chest-stage.shaking .chest-base,.chest-stage.shaking .chest-lid,.chest-hero.ready .chest-hero-img,.chest-open-btn,.menu-card.chest-ready,.chest-stage.open .chest-rays{animation:none}
  .chest-stage.open .chest-lid{animation:none;transform:translate(-18%,-98%) rotate(-20deg) scale(.78)}
  .chest-stage.open .chest-card,.chest-stage.open .chest-label{animation:none;opacity:1;transform:translate(-50%,-95%)}
  .chest-stage.open .chest-label{transform:translateX(-50%)}
  .chest-sparks{display:none}
}