/* ===== 3D chest ===== */
.chest{--d:calc(var(--s)*.68);position:relative;width:calc(var(--s)*1.5);height:calc(var(--s)*1.3);perspective:calc(var(--s)*7);display:grid;place-items:center;flex:none}
.ch-3d{position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(calc(var(--s)*.16)) rotateX(-18deg) rotateY(-30deg);animation:ch-sway 6s ease-in-out infinite}
.ch-base,.ch-lid{position:absolute;left:0;top:0;transform-style:preserve-3d}
.ch-lid{transform:translateY(calc(var(--s)*-.36));transform-origin:0 calc(var(--s)*.11) calc(var(--s)*-.36);transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.chest{--trim:#d9a640;--trim2:#fff0b8}.chest.trim-silver{--trim:#9fb0c4;--trim2:#f2f7ff}.chest.trim-bronze{--trim:#a8693a;--trim2:#f2c9a0}.chest.trim-black{--trim:#1b1f27;--trim2:#596273}
.chest .f{position:absolute;left:0;top:0;display:grid;place-items:center;--band:var(--trim);box-shadow:inset 0 0 0 calc(var(--s)*.028) var(--trim),inset 0 0 0 calc(var(--s)*.04) #0003}
.ch-base .front,.ch-base .back{width:var(--s);height:calc(var(--s)*.5);margin:calc(var(--s)*-.25) 0 0 calc(var(--s)*-.5)}
.ch-base .front{transform:translateZ(calc(var(--s)*.34))}.ch-base .back{transform:rotateY(180deg) translateZ(calc(var(--s)*.34))}
.ch-base .left,.ch-base .right{width:var(--d);height:calc(var(--s)*.5);margin:calc(var(--s)*-.25) 0 0 calc(var(--s)*-.34)}
.ch-base .left{transform:rotateY(-90deg) translateZ(calc(var(--s)*.5))}.ch-base .right{transform:rotateY(90deg) translateZ(calc(var(--s)*.5))}
.ch-base .bottom,.ch-base .inside{width:var(--s);height:var(--d);margin:calc(var(--s)*-.34) 0 0 calc(var(--s)*-.5)}
.ch-base .bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)*.25))}.ch-base .inside{transform:rotateX(90deg) translateZ(calc(var(--s)*.22))}
.ch-lid .front,.ch-lid .back{width:calc(var(--s)*1.04);height:calc(var(--s)*.22);margin:calc(var(--s)*-.11) 0 0 calc(var(--s)*-.52)}
.ch-lid .front{transform:translateZ(calc(var(--s)*.36))}.ch-lid .back{transform:rotateY(180deg) translateZ(calc(var(--s)*.36))}
.ch-lid .left,.ch-lid .right{width:calc(var(--s)*.72);height:calc(var(--s)*.22);margin:calc(var(--s)*-.11) 0 0 calc(var(--s)*-.36)}
.ch-lid .left{transform:rotateY(-90deg) translateZ(calc(var(--s)*.52))}.ch-lid .right{transform:rotateY(90deg) translateZ(calc(var(--s)*.52))}
.ch-lid .top,.ch-lid .under{width:calc(var(--s)*1.04);height:calc(var(--s)*.72);margin:calc(var(--s)*-.36) 0 0 calc(var(--s)*-.52)}
.ch-lid .top{transform:rotateX(90deg) translateZ(calc(var(--s)*.11))}.ch-lid .under{transform:rotateX(-90deg) translateZ(calc(var(--s)*.11))}
.ch-base .front{background:linear-gradient(90deg,transparent 11%,var(--band) 11% 17%,transparent 17% 83%,var(--band) 83% 89%,transparent 89%),linear-gradient(hsl(var(--h) var(--sa) 54%),hsl(var(--h) var(--sa) 34%))}
.ch-base .left,.ch-base .right{background:linear-gradient(90deg,transparent 14%,var(--band) 14% 22%,transparent 22%),linear-gradient(hsl(var(--h) var(--sa) 36%),hsl(var(--h) var(--sa) 22%))}
.ch-base .back,.ch-base .bottom{background:hsl(var(--h) 55% 22%)}
.ch-base .inside{background:radial-gradient(circle,#fff7cf,hsl(var(--h) 95% 66%) 35%,hsl(var(--h) 60% 18%) 75%)}
.ch-lid .front{background:linear-gradient(90deg,transparent 10%,var(--band) 10% 16%,transparent 16% 84%,var(--band) 84% 90%,transparent 90%),linear-gradient(hsl(var(--h) var(--sa) 62%),hsl(var(--h) var(--sa) 44%))}
.ch-lid .left,.ch-lid .right{background:linear-gradient(hsl(var(--h) var(--sa) 44%),hsl(var(--h) var(--sa) 30%))}
.ch-lid .top{background:linear-gradient(90deg,transparent 10%,var(--band) 10% 16%,transparent 16% 84%,var(--band) 84% 90%,transparent 90%),linear-gradient(160deg,hsl(var(--h) var(--sa) 70%),hsl(var(--h) var(--sa) 48%))}
.ch-lid .back{background:hsl(var(--h) 55% 26%)}.ch-lid .under{background:radial-gradient(circle,hsl(var(--h) 90% 70%),hsl(var(--h) 55% 24%))}
.ch-emblem{width:calc(var(--s)*.32);height:calc(var(--s)*.32);border-radius:50%;background:radial-gradient(hsl(var(--h) 40% 22%),hsl(var(--h) 40% 12%));box-shadow:inset 0 0 0 calc(var(--s)*.022) var(--trim),0 0 0 calc(var(--s)*.012) #0005;display:grid;place-items:center}
.ch-emblem svg{width:78%;height:78%;filter:drop-shadow(0 0 5px hsl(var(--h) 90% 60% / .7))}
.ch-plate{width:34%;height:22%;border-radius:4px;background:linear-gradient(var(--trim2),var(--trim));box-shadow:0 1px 0 #0004}
.ch-new{position:absolute;top:4%;left:4%;z-index:3;font:800 calc(var(--s)*.11)/1 Golos,sans-serif;letter-spacing:.5px;padding:3px 6px;border-radius:5px;background:#2f8cf0;color:#fff;box-shadow:0 3px 8px #0006}
.ch-lock{position:absolute;bottom:-1px;width:calc(var(--s)*.12);height:calc(var(--s)*.15);border-radius:3px 3px 5px 5px;background:linear-gradient(var(--trim2),var(--trim))}
.ch-glow{position:absolute;width:120%;height:90%;border-radius:50%;background:radial-gradient(hsl(var(--h) 90% 60% / .5),transparent 65%);filter:blur(8px);transition:transform .6s,opacity .6s}
.ch-shadow{position:absolute;bottom:4%;width:85%;height:10%;border-radius:50%;background:#000a;filter:blur(8px)}
.ch-buba{position:absolute;z-index:2;width:calc(var(--s)*.58);left:50%;top:calc(var(--s)*-.06);transform:translateX(-22%) rotate(7deg);filter:drop-shadow(0 6px 8px #0007);animation:bob 3s ease-in-out infinite}
.chest.bouncy .ch-lid{animation:lid-peek 3s ease-in-out infinite}
.chest.shake{animation:ch-shake .12s linear infinite}
.chest.open .ch-lid{transform:translateY(calc(var(--s)*-.36)) rotateX(112deg)}
.chest.open .ch-glow{transform:scale(1.6);opacity:1;background:radial-gradient(#fff6c0,hsl(var(--h) 95% 62% / .7) 30%,transparent 65%)}
.chest.open .ch-buba{animation:none;transform:translate(-22%,-30%) rotate(-6deg) scale(1.05);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ch-sway{0%,100%{transform:translateY(calc(var(--s)*.16)) rotateX(-18deg) rotateY(-36deg)}50%{transform:translateY(calc(var(--s)*.1)) rotateX(-16deg) rotateY(-22deg)}}
@keyframes lid-peek{0%,62%,100%{transform:translateY(calc(var(--s)*-.36))}74%{transform:translateY(calc(var(--s)*-.36)) rotateX(38deg)}84%{transform:translateY(calc(var(--s)*-.36)) rotateX(-4deg)}}
@keyframes ch-shake{25%{transform:translate(-2px,1px) rotate(-1.5deg)}75%{transform:translate(2px,-1px) rotate(1.5deg)}}

/* ===== games home ===== */
.games-home{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.promos{scroll-snap-type:x mandatory;gap:10px}
.promo{position:relative;flex:none;width:86%;height:150px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;scroll-snap-align:start;box-shadow:inset 0 0 0 1px #ffffff26}
.promo-buba{background:radial-gradient(circle at 80% 40%,#8fdcff,#3aa7ff 30%,transparent 60%),linear-gradient(115deg,#0a4fa8,#1c84e6 60%,#4cbcff)}
.promo-up{background:radial-gradient(circle at 78% 45%,#ffd36b88,transparent 50%),linear-gradient(115deg,#5b2a8f,#a03c8a 55%,#f0786a)}
.promo-copy{position:absolute;left:16px;top:14px;z-index:3}
.promo h2{font:800 22px/1 Unbounded,sans-serif;letter-spacing:-.5px;text-shadow:0 3px 12px #0005}
.promo p{font-size:12px;opacity:.88;margin-top:6px}
.promo-btn{display:inline-flex;align-items:center;gap:2px;margin-top:12px;height:32px;padding:0 10px 0 14px;border-radius:12px;background:#ffffff2e;font-weight:700;font-size:13px;backdrop-filter:blur(6px)}.promo-btn svg{width:16px;height:16px}
.promo-chest{position:absolute;right:62px;bottom:-12px;z-index:1}
.promo p{max-width:150px}
.promo-mascot{position:absolute;right:-14px;bottom:-22px;width:118px;height:auto;z-index:2;animation:wave 4s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 8px 12px #0a2f5c66)}
.promo-items{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px}
.promo-items b{font-size:20px;opacity:.8}.promo-items .big{animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 0 16px #ffd36b88)}
.topup-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.topup-row span:nth-child(2){flex:1;display:grid}.topup-row small{color:var(--muted);font-size:12px}.topup-row>svg{width:20px;height:20px;color:var(--muted)}
.tr-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#3ea6ff1f}.tr-ic .coin{width:26px;height:26px}
.games-title{font:800 26px/1 Unbounded,sans-serif;letter-spacing:-.5px;margin-top:4px}

/* Animated game tiles. Text stays above a shared gradient. */
.gtiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "cases mines" "rocket mines" "upgrade upgrade";
  grid-auto-rows: clamp(150px, 43vw, 180px);
  gap: 8px;
}
.gt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px #d0e8ff26, 0 8px 20px #0003;
  transition: transform .16s ease;
}
.gt:active { transform: scale(.97); }
.gt:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.gt::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 43%, #050b1719 56%, #060c19e8 100%);
}
.gt-copy { position: absolute; z-index: 4; inset: auto 9px 11px 12px; }
.gt-copy b {
  display: block;
  font: 800 clamp(17px, 5vw, 23px)/1 Unbounded, sans-serif;
  letter-spacing: -.045em;
  text-shadow: 0 3px 9px #020610c9;
}
.gt-copy small { display: block; margin-top: 5px; color: #d4e2f1; font-size: 11px; line-height: 1.24; font-weight: 600; }

.gt-cases {
  grid-area: cases;
  background: repeating-linear-gradient(145deg, transparent 0 21px, #dbfaff14 22px, transparent 23px 35px),
    radial-gradient(ellipse at 30% 10%, #258fa4, transparent 77%), #0c3452;
}
.gt-cases .gt-art { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); }
.gt-case-gift {
  position: absolute;
  z-index: 2;
  left: 51%;
  top: 7px;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px #07283baa);
  animation: tile-levitate 5s ease-in-out infinite;
}
.tile-chest.bouncy .ch-lid { animation: tile-hinge 5s ease-in-out infinite; }
@keyframes tile-hinge {
  0%, 20%, 83%, 100% { transform: translateY(calc(var(--s) * -.36)); }
  43%, 64% { transform: translateY(calc(var(--s) * -.36)) rotateX(96deg); }
}
@keyframes tile-levitate {
  0%, 29%, 78%, 100% { opacity: 0; transform: translate(-50%, 26px) scale(.6) rotate(-7deg); }
  49%, 62% { opacity: 1; transform: translate(-54%, -13px) scale(1) rotate(5deg); }
}
.gt-art .sp {
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d6f5ff;
  box-shadow: 0 0 10px #a2dcff;
  opacity: .3;
  animation: twinkle 5s ease-in-out infinite;
}
.gt-art .s1 { left: 12%; top: 14%; }
.gt-art .s2 { right: 7%; top: 20%; animation-delay: -1.2s; }

.gt-mines {
  grid-area: mines;
  background: radial-gradient(ellipse at 59% 6%, #345684, transparent 76%), #101b2c;
}
.mines-board {
  position: absolute;
  inset: 11px 9px 62px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.mc {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #273a53, #162339);
  box-shadow: inset 0 0 0 1px #c8e5ff23;
}
.mc::before {
  content: "";
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  rotate: 45deg;
  border-radius: 2px;
  background: #d3e7ff20;
}
.mc.g, .mc.b { --delay: calc(var(--step) * 1.32s); }
.mc.b { --mark: #ff6f86; --glow: #ff597958; }
.mc.g { --mark: #70efc6; --glow: #49dcb95e; }
.mc.g::after, .mc.b::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mark), inset 0 0 15px var(--glow), 0 0 10px var(--glow);
  opacity: 0;
  animation: tile-cell 6s var(--delay) ease-in-out infinite;
}
.mc img, .mc .bomb {
  z-index: 1;
  opacity: 0;
  animation: tile-cell 6s var(--delay) ease-in-out infinite;
}
.mc img { width: 69%; height: 76%; object-fit: contain; }
.mc .bomb {
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5d77;
  box-shadow: inset 0 -4px 5px #9f334c, 3px -4px 0 -2px #ffc176;
}
@keyframes tile-cell {
  0%, 7%, 43%, 100% { opacity: 0; scale: .87; }
  15%, 33% { opacity: 1; scale: 1; }
}
.mine-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 48%, #93d6ff26 50%, transparent 55%);
  animation: tile-scan 6s ease-in-out infinite;
}
@keyframes tile-scan {
  0% { transform: translateY(-40%); opacity: 0; }
  18%, 60% { opacity: 1; }
  100% { transform: translateY(40%); opacity: 0; }
}

.gt-rocket {
  grid-area: rocket;
  background: radial-gradient(ellipse at 75% 12%, #2f7d6a, transparent 71%), linear-gradient(132deg, #193d43, #09222a);
}
.gt-flight { position: absolute; inset: 0; }
.gt-pattern, .gt-pattern::after {
  position: absolute;
  inset: -74px;
  background: radial-gradient(circle, #c1ffed64 0 1px, transparent 1.4px) 0 0 / 24px 24px;
  animation: tile-stars 6s linear infinite;
}
.gt-pattern::after {
  content: "";
  inset: 0;
  background: radial-gradient(circle, #e1ffda5c 0 1.2px, transparent 1.6px) 8px 4px / 36px 36px;
  animation-duration: 3s;
}
@keyframes tile-stars { to { transform: translate(-72px, 72px); } }
.rk-orbit {
  position: absolute;
  inset: 14% -12% 15%;
  rotate: -30deg;
  border-radius: 50%;
  border: 1px solid #b0ffe44a;
  box-shadow: 0 0 14px #62e6ac22;
}
.rk-fly {
  position: absolute;
  left: 29%;
  top: 16%;
  animation: tile-flight 6s cubic-bezier(.42,0,.2,1) infinite;
}
.rk-fly img { position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 4px 9px #071e25aa); }
.rk-trail {
  position: absolute;
  left: -43px;
  bottom: -3px;
  width: 70px;
  height: 5px;
  rotate: -36deg;
  background: linear-gradient(90deg, transparent, #71ffd482);
  border-radius: 50%;
  filter: blur(1px);
  animation: tile-thrust 6s ease-in-out infinite;
}
.rk-fire {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 21px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(#fff4b8, #71ffd4 42%, transparent 72%);
  animation: flame .25s infinite alternate;
}
@keyframes flame { to { transform: scale(1.26); opacity: .62; } }
@keyframes tile-flight {
  0%, 100% { transform: translate(-8px, 9px); }
  64% { transform: translate(14px, -14px); }
}
@keyframes tile-thrust { 0%, 100% { opacity: .44; scale: .8 1; } 64% { opacity: 1; scale: 1.17 1; } }

.gt-upgrade {
  grid-area: upgrade;
  background: radial-gradient(ellipse at 79% 27%, #247b6eac, transparent 59%), linear-gradient(112deg, #1b284a, #153442);
}
.gt-upgrade .gt-copy { right: auto; bottom: 16px; left: 16px; }
.gt-upgrade .gt-copy b { font-size: clamp(19px, 5.7vw, 27px); }
.gt-rays {
  position: absolute;
  left: 72%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px;
  background: repeating-conic-gradient(#b8f7f413 0 7deg, transparent 8deg 20deg);
  animation: spin 36s linear infinite;
}
.up-mini { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; }
.up-mini-ring { position: relative; width: clamp(92px, 30vw, 128px); aspect-ratio: 1; }
.up-mini-ring svg { width: 100%; height: 100%; }
.up-mini-ring .arc { stroke-dasharray: 96 270; filter: drop-shadow(0 0 4px #7cffca88); animation: tile-arc 3s ease-in-out infinite; }
.up-mini-ring .needle { position: absolute; inset: 0; animation: tile-needle 3s cubic-bezier(.22,.74,.31,1) infinite; }
.up-mini-ring .needle::before {
  content: "";
  position: absolute;
  top: 2%;
  left: 50%;
  translate: -50% 0;
  border: 5px solid transparent;
  border-top: 9px solid #e5fff1;
}
.up-gift {
  position: absolute;
  inset: 50% auto auto 50%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: upgrade-model 9s ease-in-out infinite;
}
.up-gift-1 { animation-delay: -6s; }
.up-gift-2 { animation-delay: -3s; }
@keyframes tile-arc { 52% { stroke-dasharray: 151 270; } }
@keyframes tile-needle { 72%, 100% { transform: rotate(360deg); } }
@keyframes upgrade-model {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.78); }
  6%, 28% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  33%, 100% { opacity: 0; transform: translate(-50%, -57%) scale(.88); }
}
.offscreen,.offscreen *{animation-play-state:paused!important}
@keyframes wave{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.feed-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:twinkle 2s infinite}
.feed-row{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}.feed-row::-webkit-scrollbar{display:none}
.feed-chip{flex:none;width:58px;height:58px;border-radius:16px;background:var(--card);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.feed-chip.mult{align-content:center;gap:0}.feed-chip.mult b{font-size:13px;color:var(--ok)}.feed-chip.mult small{font-size:9px;color:var(--muted)}

/* ===== cases ===== */
.label-sm{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.count-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.count-seg button{height:46px;border-radius:14px;background:var(--card);font-weight:800;font-size:17px;box-shadow:inset 0 0 0 1px var(--line)}
.count-seg button.on{background:hsl(var(--h) 80% 60%);color:#fff;box-shadow:0 6px 16px hsl(var(--h) 80% 50% / .35)}
.btn-gold{background:linear-gradient(180deg,hsl(var(--h,205) 85% 66%),hsl(var(--h,205) 72% 46%));color:#fff;box-shadow:0 8px 20px hsl(var(--h,205) 80% 45% / .35);text-shadow:0 1px 2px #0004}
.drop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.drop{position:relative;display:grid;gap:2px;padding:8px 8px 10px;border-radius:16px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rc) 22%,var(--card)),var(--card) 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent)}
.drop-art{display:grid;place-items:center;padding:4px 0}.drop-art svg{width:72%;height:auto;filter:drop-shadow(0 6px 8px #0006)}
.drop b{font-size:12px;line-height:1.2}.drop small{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted);font-weight:700}
.odds-text{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}.odds-text li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:3px}
.reel-wrap{position:relative;padding:8px 0;border-radius:var(--r);background:#ffffff0a;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.reel-pointer{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(hsl(var(--h,205) 90% 70%),transparent 40% 60%,hsl(var(--h,205) 90% 70%))}
.reel-pointer::before,.reel-pointer::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:7px solid transparent}
.reel-pointer::before{top:0;border-top:9px solid hsl(var(--h,205) 90% 70%)}.reel-pointer::after{bottom:0;border-bottom:9px solid hsl(var(--h,205) 90% 70%)}
.reel{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.reel-track{position:relative;display:flex;gap:8px;padding:0 8px;will-change:transform}
.reel-cell{flex:none;width:84px;height:88px;border-radius:14px;display:grid;place-items:center;background:var(--card2);box-shadow:inset 0 -3px 0 var(--rc)}
.op-reels.n3 .reel-cell,.op-reels.n4 .reel-cell,.op-reels.n5 .reel-cell{width:62px;height:58px}
.opening{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(var(--top) + 20px) 16px calc(var(--bottom) + 80px);opacity:0;transition:opacity .25s}
.opening.in{opacity:1}.opening.out{opacity:0}
.op-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 38%,hsl(var(--h) 60% 22%),#0b1018 70%)}
.op-chest{position:relative;transition:transform .65s cubic-bezier(.2,.75,.2,1),opacity .65s}
.opening.reels .op-chest{transform:translateY(-14px) scale(.62);opacity:.22;margin:-40px 0}
.op-chest .chest.shake { animation:case-anticipate .9s ease-in-out both; }
.op-chest .chest.open { animation:case-open-pop .75s cubic-bezier(.18,.8,.25,1) both; }
@keyframes case-anticipate {
  0%,100% { transform:translateY(0) scale(1); }
  42% { transform:translateY(3px) scale(.98) rotate(-.6deg); }
  68% { transform:translateY(2px) scale(.985) rotate(.7deg); }
  84% { transform:translateY(1px) scale(.99) rotate(-.4deg); }
}
@keyframes case-open-pop {
  0% { transform:translateY(2px) scale(.985); }
  42% { transform:translateY(-5px) scale(1.025); }
  100% { transform:translateY(0) scale(1); }
}
.op-particles { position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none; }
.op-particles i {
  position:absolute;width:var(--spark-size);height:var(--spark-size);border-radius:50%;
  background:#ffe6ae;box-shadow:0 0 4px #ffe5ab5c;opacity:0;
}
.op-particles i:nth-child(3n) { border-radius:1px;background:#c5e9ff; }
.op-chest .chest.open ~ .op-particles i { animation:case-spark var(--spark-life) var(--spark-delay) cubic-bezier(.12,.6,.3,1) both; }
@keyframes case-spark {
  0% { opacity:0;transform:translate3d(0,5px,0) scale(.3); }
  14% { opacity:.58; }
  65% { opacity:.32; }
  100% { opacity:0;transform:translate3d(var(--spark-x),var(--spark-y),0) scale(.4) rotate(var(--spark-turn)); }
}
.op-reels{display:none;width:100%;max-width:440px;gap:8px;flex-direction:column}
.opening.reels .op-reels{display:flex}
.opening.reels .reel-wrap { animation:case-reel-launch .74s var(--reel-delay) cubic-bezier(.16,.8,.25,1) both;transform-origin:50% 50%; }
.opening.prepare-reels .reel-wrap { animation:none;opacity:0;transform:none; }
.opening.skip-reel-motion .reel-wrap { animation:none;opacity:1;transform:none; }
@keyframes case-reel-launch {
  0% { opacity:0;transform:perspective(700px) translate3d(var(--launch-x,0px),var(--launch-y,-100px),0) scale(.18,.24) rotateX(35deg) rotate(var(--launch-tilt)); }
  22% { opacity:.92; }
  76% { opacity:1;transform:perspective(700px) translate3d(0,-4px,0) scale(1.015) rotateX(-2deg) rotate(0); }
  100% { opacity:1;transform:perspective(700px) translate3d(0,0,0) scale(1) rotateX(0) rotate(0); }
}
.op-copy{text-align:center}.op-copy small{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:hsl(var(--h) 90% 72%)}
.op-copy h2{font:800 26px/1.15 Unbounded,sans-serif;letter-spacing:-.6px;margin:6px 0 4px}.op-copy p{color:var(--muted);font-size:14px}
.op-skip{position:absolute;bottom:calc(var(--bottom) + 26px);height:38px;padding:0 16px;border-radius:20px;background:#ffffff12;color:var(--muted);font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line2)}
.prize{position:relative;display:grid;justify-items:center;gap:8px;padding:10px 0}
.prize svg{position:relative;animation:prize-in .6s cubic-bezier(.2,1.4,.4,1)}
.prize-glow{position:absolute;top:0;width:220px;height:220px;border-radius:50%;background:radial-gradient(var(--rc),transparent 65%);opacity:.45;animation:spin 8s linear infinite}
.prize h3{font-size:22px}
.prize-multi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pm{display:grid;justify-items:center;gap:2px;padding:8px;border-radius:14px;background:var(--card);box-shadow:inset 0 -3px 0 var(--rc);text-align:center;animation:prize-in .5s backwards}
.pm:nth-child(2){animation-delay:.08s}.pm:nth-child(3){animation-delay:.16s}.pm:nth-child(4){animation-delay:.24s}.pm:nth-child(5){animation-delay:.32s}
.pm b{font-size:12px}.pm small{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
@keyframes prize-in{from{transform:scale(.3) rotate(-20deg);opacity:0}}
@media (max-width:370px){.promo h2{font-size:19px}}
@media (prefers-reduced-motion:reduce){.chest *,.gt *,.gt *::before,.gt *::after{animation:none!important}}

/* case surface patterns (overlay on visible faces) */
.chest .front::before,.chest .left::before,.chest .right::before,.chest .top::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay}
.pat-dots .f::before{background:radial-gradient(#fff 18%,transparent 20%) 0 0/calc(var(--s)*.1) calc(var(--s)*.1)}
.pat-stripes .f::before{background:repeating-linear-gradient(135deg,#fff 0 calc(var(--s)*.03),transparent 0 calc(var(--s)*.08));opacity:.4}
.pat-camo .f::before{background:radial-gradient(circle at 20% 30%,#0008 0 14%,transparent 15%),radial-gradient(circle at 70% 60%,#fff6 0 16%,transparent 17%),radial-gradient(circle at 40% 80%,#0007 0 12%,transparent 13%),radial-gradient(circle at 85% 20%,#0006 0 10%,transparent 11%);opacity:.7}
.pat-carbon .f::before{background:repeating-linear-gradient(45deg,#0005 0 3px,transparent 3px 6px),repeating-linear-gradient(-45deg,#fff2 0 3px,transparent 3px 6px);opacity:.8}
.pat-waves .f::before{background:radial-gradient(circle at 50% 100%,transparent 40%,#fff6 42% 48%,transparent 50%) 0 0/calc(var(--s)*.16) calc(var(--s)*.1)}
.pat-plaid .f::before{background:repeating-linear-gradient(90deg,#0004 0 calc(var(--s)*.04),transparent 0 calc(var(--s)*.12)),repeating-linear-gradient(0deg,#fff3 0 calc(var(--s)*.04),transparent 0 calc(var(--s)*.12))}
.pat-galaxy .f::before{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(#fff 1px,transparent 1.5px) 4px 5px/13px 13px,radial-gradient(circle at 30% 40%,#ff7af855,transparent 40%);opacity:.9;mix-blend-mode:screen}
.pat-rhombus .f::before{background:linear-gradient(135deg,#fff5 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,#fff5 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(315deg,#fff5 25%,transparent 25%) 0 0/12px 12px,linear-gradient(45deg,#fff5 25%,transparent 25%) 0 0/12px 12px;opacity:.45}
.pat-scales .f::before{background:radial-gradient(circle at 50% 0,transparent 55%,#fff5 57% 62%,transparent 64%) 0 0/12px 9px}
.pat-sunburst .f::before{background:repeating-conic-gradient(from 0deg at 50% 50%,#ffd27a33 0 8deg,transparent 8deg 16deg);opacity:.9;mix-blend-mode:screen}

.drop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.drop-head h2 { font-size: 17px; }
.drop-head span { font-size: 12px; color: var(--muted); }
.drop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drop {
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  text-align: center;
  gap: 5px;
  padding: 7px 6px 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.drop-art { padding: 0; }
.drop-art .prize-art { max-width: 100%; }
.drop b { overflow-wrap: anywhere; }
.reel-cell, .pm { box-shadow: inset 0 0 0 1px var(--line); }

.prize-sheet .sheet { background: linear-gradient(165deg, #242d46, #182239 85%); }
.prize-sheet .sheet-foot { gap: 8px; }
.prize { padding: 10px 0 14px; text-align: center; }
.prize > small { color: var(--muted); font-size: 12px; }
.prize .price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font: 800 22px/1.1 Unbounded, sans-serif;
}
.prize .price .coin { width: 20px; height: 20px; }
.native-prize .prize { gap: 8px; }
.native-prize .prize > .prize-art { filter: drop-shadow(0 14px 17px #080c1d99); }
.prize-up { color: #231b0f; background: linear-gradient(180deg, #ffdf86, #ffc84e); }
.prize-sell { color: #edf5ff; background: #ffffff17; }
.prize-sheet .btn { border-radius: 16px; }
.prize-sheet .btn .coin { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .gt-upgrade .up-gift { opacity: 0; }
  .gt-upgrade .up-gift-0, .gt-case-gift { opacity: 1; }
  .gt-case-gift { transform: translate(-50%, -8px); }
  .mc.g img { opacity: 1; }
}


/* Cases share a material, a camera angle and a light source across all three scenes. */
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.case-filters { display:flex; gap:6px; overflow-x:auto; min-width:0; scrollbar-width:none; }
.case-filters::-webkit-scrollbar { display:none; }
.case-filters button {
  min-width: 0;
  display: flex;
  align-items: center;
  flex:none;
  justify-content:center;
  height:35px;
  gap:6px;
  padding:0 11px;
  border-radius: 13px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #bed0e6;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.case-filters span {
  flex: none;
  min-width: 22px;
  padding: 3px 4px;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.case-filters button[aria-pressed=true] {
  color: #e8f6ff;
  background: #28649b;
  box-shadow: inset 0 0 0 1px #61b6f795;
}
.case-skin {
  --light: hsl(var(--h) 34% 38% / .68);
  --shade: hsl(var(--h) 27% 17%);
  --motif: none;
}
.case-card, .case-hero {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, var(--light), var(--shade) 86%);
  box-shadow: inset 0 0 0 1px #d2e5ff27;
}
.case-card {
  display: block;
  aspect-ratio: 1 / 1.15;
  container-type: inline-size;
  transition: transform .16s ease;
}
.case-card[hidden] { display: none; }
.case-card:active { transform: scale(.97); }
.case-card:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.case-card h2 {
  position: absolute;
  inset: 20px 5px auto;
  z-index: 3;
  font: 800 clamp(11px, 8.1cqw, 16px)/1.1 Unbounded, sans-serif;
  letter-spacing: -.045em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 7px #030914c9;
}
.cc-new {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 3;
  border-radius: 5px;
  padding: 2px 5px;
  background: #141c31aa;
  box-shadow: inset 0 0 0 1px #d5f1ff38;
  color: #f5fcff;
  font: 800 8px/1 Golos, sans-serif;
  letter-spacing: .06em;
}
.cc-stage, .ch-stage {
  display: grid;
  place-items: center;
  min-width: 0;
}
.cc-stage {
  position: absolute;
  inset: 42px 0 15px;
  --chest-size: clamp(66px, 54cqw, 122px);
}
.cc-price {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 10px;
  background: #101a2ce8;
  box-shadow: inset 0 0 0 1px #adcce449;
  font-size: 12px;
  font-weight: 800;
}
.cc-price .coin { width: 14px; height: 14px; }
.case-motif {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--motif);
  opacity: .05;
  pointer-events: none;
}
.case-skin[data-skin=candy] { --motif:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/24px 24px; }
.case-skin[data-skin=forest] { --motif:repeating-linear-gradient(120deg,transparent 0 25px,#fff 26px,transparent 27px 40px); }
.case-skin[data-skin=storm] { --motif:repeating-linear-gradient(125deg,transparent 0 28px,#fff 29px,transparent 30px 48px); }
.case-skin[data-skin=wave] { --motif:repeating-radial-gradient(ellipse at 100% 100%,transparent 0 19px,#fff 20px,transparent 21px 33px); }
.case-skin[data-skin=neon] { --motif:repeating-linear-gradient(150deg,transparent 0 29px,#fff 30px,transparent 31px 50px); }
.case-skin[data-skin=cosmos],.case-skin[data-skin=lunar] { --motif:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 7px 11px/36px 39px; }
.case-skin[data-skin=royal],.case-skin[data-skin=ice] { --motif:repeating-conic-gradient(from 45deg,#fff 0 1deg,transparent 1deg 89deg,#fff 89deg 90deg,transparent 90deg 180deg) 0 0/36px 36px; }
.case-skin[data-skin=empire] { --motif:repeating-conic-gradient(from -10deg at 50% 100%,#fff 0 1deg,transparent 2deg 18deg); }
.case-hero { min-height: 248px; display: grid; justify-items: center; align-content: start; padding-top: 13px; }
.case-heading { z-index: 2; text-align: center; padding: 0 8px; }
.case-hero h1 {
  margin-top: 2px;
  font: 800 clamp(18px, 5.4vw, 28px)/1.13 Unbounded, sans-serif;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 9px #030914af;
}
.case-hero .ch-stage { width: 100%; height: 186px; margin-top: 6px; --chest-size: clamp(110px, 36vw, 153px); }
.cat-label { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #d8e9fa; }
.op-bg.case-skin {
  background: radial-gradient(ellipse at 50% 38%, var(--light), transparent 65%), linear-gradient(145deg, var(--shade), #0b1018 82%);
}
.op-bg .case-motif { opacity: .45; }

.ch-edge { position: absolute; inset: 0 2% auto; height: 2px; overflow: hidden; }
.ch-edge::after {
  content: "";
  display: block;
  width: 37%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff9dc, transparent);
  transform: translateX(-110%);
  animation: chest-edge 7s ease-in-out infinite;
}
@keyframes chest-edge { 24%, 100% { transform: translateX(290%); } }
.ch-prize {
  --x: .11; --y: -.50; --z: .29; --tilt: 7deg; --delay: 0s; --scale: .48;
  position: absolute;
  width: calc(var(--s) * var(--scale));
  height: calc(var(--s) * var(--scale));
  margin: calc(var(--s) * var(--scale) / -2);
  transform: translate3d(calc(var(--x) * var(--s)), calc(var(--y) * var(--s)), calc(var(--z) * var(--s))) rotateY(27deg) rotateX(16deg) rotate(var(--tilt));
}
.ch-prize:nth-of-type(4) { --x: -.36; --y: -.59; --z: .03; --tilt: -14deg; --delay: -1.3s; --scale: .43; }
.ch-prize:nth-of-type(5) { --x: .51; --y: -.63; --z: -.03; --tilt: 15deg; --delay: -2.6s; --scale: .42; }
.ch-prize:nth-of-type(6) { --x: -.05; --y: -.92; --z: -.12; --tilt: -7deg; --delay: -3.8s; --scale: .39; }
.ch-float { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px #06102384); animation: chest-prize 5.4s var(--delay) ease-in-out infinite; }
.ch-float .prize-art, .ch-float > svg { width: 100%; height: 100%; border-radius: 0; overflow: visible; }
.showcase.shake .ch-float { opacity: 0; animation: none; }
.showcase.open .ch-float { animation: chest-reveal .65s cubic-bezier(.16,.8,.3,1) backwards; }
@keyframes chest-prize { 50% { transform: translateY(-7%) rotate(3deg); } }
@keyframes chest-reveal { from { transform: translateY(80%) scale(.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ch-edge::after { animation: none; }
}


/* Rounded, articulated CSS geometry. All rotations happen around the rear hinge. */
.rounded-chest {
  --paint: hsl(var(--h) var(--sa) 45%);
  --paint-dark: hsl(var(--h) var(--sa) 22%);
  --lid-saturation: var(--sa);
}
.rounded-chest .ch-3d {
  transform: translateY(calc(var(--s) * .19)) rotateX(-21deg) rotateY(-27deg);
  animation: none;
}
.rounded-chest .f {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--trim), inset 0 2px 1px #ffffec73, inset 0 -3px 3px #03080f75;
}
.rounded-chest .f::before { opacity: .06; }
.rounded-chest .ch-base .front {
  background: linear-gradient(110deg, #fff2, transparent 48%),
    linear-gradient(90deg, transparent 12%, var(--trim) 12% calc(12% + 2px), transparent calc(12% + 2px) calc(88% - 2px), var(--trim) calc(88% - 2px) 88%, transparent 88%),
    linear-gradient(var(--paint), var(--paint-dark));
}
.rounded-chest .ch-base .right, .rounded-chest .ch-base .left {
  background: linear-gradient(115deg, #ffffff12, #02091238),
    linear-gradient(var(--paint), var(--paint-dark));
}
.rounded-chest .ch-base .inside {
  background: radial-gradient(ellipse at 52% 30%, #fff3b9, #ffba53 31%, #5d341b 70%);
  box-shadow: inset 0 0 0 2px var(--trim), inset 0 0 15px #322419bb;
}
.rounded-chest .ch-emblem {
  width: calc(var(--s) * .27);
  height: calc(var(--s) * .27);
  background: linear-gradient(135deg, #ffffff13, #04102053), var(--paint-dark);
  box-shadow: inset 0 0 0 1px var(--trim), inset 0 1px 1px #fff8, 0 1px 2px #0005;
}
.rounded-chest .ch-emblem svg { filter: none; width: 73%; height: 73%; }
.rounded-chest .rounded-lid {
  --opening: 18deg;
  transform-origin: 0 0 calc(var(--s) * -.34);
  transform: translateY(calc(var(--s) * -.27)) rotateX(var(--opening));
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  animation: rounded-hinge 5.4s ease-in-out infinite;
}
.rounded-lid .lid-curve {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: calc(var(--s) * var(--ll));
  margin: calc(var(--s) * var(--ll) / -2) 0 0 calc(var(--s) * -.5);
  transform: translateY(calc(var(--s) * var(--ly))) translateZ(calc(var(--s) * var(--lz))) rotateX(var(--la));
  background: linear-gradient(90deg, var(--trim) 0 1.5px, transparent 1.5px 13%, var(--trim) 13% calc(13% + 2px), transparent calc(13% + 2px) calc(87% - 2px), var(--trim) calc(87% - 2px) 87%, transparent 87% calc(100% - 1.5px), var(--trim) calc(100% - 1.5px)),
    linear-gradient(hsl(var(--h) var(--lid-saturation) calc(var(--tone1) + var(--tone-shift,0%))), hsl(var(--h) var(--lid-saturation) calc(var(--tone2) + var(--tone-shift,0%))));
  backface-visibility: hidden;
}
.rounded-lid .lid-end {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s) * .68);
  height: calc(var(--s) * .29);
  margin: calc(var(--s) * -.29) 0 0 calc(var(--s) * -.34);
  border-radius: 50% 50% 2px 2px / 100% 100% 2px 2px;
  background: linear-gradient(120deg, #ffffff21, #06101d5c), var(--paint);
  box-shadow: inset 0 0 0 1.6px var(--trim), inset 0 2px 1px #fff6;
}
.rounded-lid .lid-end.left { transform: rotateY(-90deg) translateZ(calc(var(--s) * .5)); }
.rounded-lid .lid-end.right { transform: rotateY(90deg) translateZ(calc(var(--s) * .5)); }
.rounded-lid .lid-inner {
  position: absolute;
  width: var(--s);
  height: calc(var(--s) * .68);
  margin: calc(var(--s) * -.34) 0 0 calc(var(--s) * -.5);
  transform: rotateX(90deg);
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 70%, #aa7749, #3b251a 78%);
  box-shadow: inset 0 0 0 2px var(--trim), inset 0 0 0 5px #10192880;
}
.rounded-lid .lid-front-edge {
  position: absolute;
  width: var(--s);
  height: 2px;
  margin-left: calc(var(--s) * -.5);
  transform: translateZ(calc(var(--s) * .34));
  background: linear-gradient(90deg, var(--trim), var(--trim2) 30%, var(--trim));
  box-shadow: 0 1px 1px #0008;
}
.rounded-lid > .ch-lock {
  left: calc(var(--s) * -.045);
  top: -1px;
  bottom: auto;
  width: calc(var(--s) * .09);
  height: calc(var(--s) * .12);
  transform: translateZ(calc(var(--s) * .344));
  box-shadow: inset 0 1px 1px #fff8, 0 1px 2px #0008;
}
.rounded-chest .ch-glow {
  width: 83%;
  height: 44%;
  margin-top: -12%;
  background: radial-gradient(ellipse, #ffd79254, transparent 69%);
  filter: blur(6px);
  animation: rounded-light 5.4s ease-in-out infinite;
}
.rounded-chest .ch-shadow { width: 74%; height: 8%; bottom: 7%; background: #050a11b8; filter: blur(4px); }
.rounded-chest .ch-prize {
  --x: .05; --y: -.29; --z: .24; --tilt: -4deg; --scale: .52; --delay: 0s;
}
.rounded-chest .ch-float { animation: rounded-prize 5.4s ease-in-out infinite; filter: drop-shadow(0 2px 2px #0c152547); }
.rounded-chest:not(.open) .ch-float { clip-path:inset(0 0 44%); }
.rounded-chest .ch-edge::after { animation: chest-edge 5.4s ease-in-out infinite; }
@keyframes rounded-hinge {
  0%, 100% { transform: translateY(calc(var(--s) * -.27)) rotateX(17deg); }
  50% { transform: translateY(calc(var(--s) * -.27)) rotateX(20deg); }
}
@keyframes rounded-light { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@keyframes rounded-prize { 50% { transform: translateY(-5%) rotate(2deg); } }
.rounded-chest.shake .rounded-lid { animation: none; transform: translateY(calc(var(--s) * -.27)) rotateX(0deg); }
.rounded-chest.shake .ch-float { opacity: 0; animation: none; }
.rounded-chest.open .rounded-lid { animation: none; transform: translateY(calc(var(--s) * -.27)) rotateX(110deg); }
.rounded-chest.open .ch-glow { animation: none; opacity: 1; background: radial-gradient(ellipse, #fff5c2ac, #ffbf5659 40%, transparent 72%); }
.rounded-chest.open .ch-prize { --x:.09; --y:-.59; --z:.29; transition:transform .65s ease-out; }
.rounded-chest.open .ch-prize:nth-of-type(4) { --x:-.4; --y:-.67; --z:.03; --tilt:-12deg; --scale:.46; }
.rounded-chest.open .ch-prize:nth-of-type(5) { --x:.47; --y:-.7; --z:-.02; --tilt:14deg; --scale:.45; }
.rounded-chest.open .ch-prize:nth-of-type(6) { --x:-.07; --y:-.99; --z:-.11; --tilt:-7deg; --scale:.43; }
.rounded-chest.open .ch-float { animation: chest-reveal .65s cubic-bezier(.16,.8,.3,1) backwards; }

.rounded-chest[data-chest=neon] {
  --paint:#222332; --paint-dark:#0c0f1b; --trim:#c74bda; --trim2:#faabff; --lid-saturation:9%; --tone-shift:-21%;
}
.rounded-chest[data-chest=royal] {
  --paint:#e2d2ac; --paint-dark:#a99268; --lid-saturation:29%; --tone-shift:29%;
}
.rounded-chest[data-chest=ice] {
  --paint:#b9eff5; --paint-dark:#64aabb; --lid-saturation:40%; --tone-shift:20%;
}
.rounded-chest[data-chest=empire] { --paint:#24242c; --paint-dark:#0c1019; --lid-saturation:8%; --tone-shift:-21%; }

.case-card h2 { top:19px; height:calc(22% - 19px); display:grid; align-items:start; }
.cc-stage { inset:26% 0 11%; --chest-size:clamp(66px,65cqw,140px); }
.cc-new { top:7px; }
.case-filters { padding-bottom:1px; }
.case-filters button[aria-pressed=true] { color:#fff; }
.case-card .chest { height:calc(var(--s) * 1.18); }
.case-card .ch-3d { transform:translateY(calc(var(--s) * .06)) rotateX(-21deg) rotateY(-27deg); }
.case-hero .ch-stage { --chest-size:clamp(120px,38vw,160px); }
.case-hero .rounded-chest .ch-3d { transform:translateY(calc(var(--s) * .02)) rotateX(-21deg) rotateY(-27deg); }
.case-card { --idle-y:.06; --idle-delay:0s; --idle-period:7.8s; }
.case-card:nth-child(2n) { --idle-delay:-2.6s; }
.case-card:nth-child(3n) { --idle-delay:-5.1s; }
.case-card:nth-child(4n) { --idle-period:8.6s; }
.case-hero { --idle-y:.02; --idle-delay:0s; --idle-period:8.2s; }
.case-card .textured-chest .ch-3d,.case-hero .textured-chest .ch-3d {
  animation:case-idle-turn var(--idle-period) var(--idle-delay) ease-in-out infinite;
}
@keyframes case-idle-turn {
  0%,100% { transform:translateY(calc(var(--s) * var(--idle-y))) rotateX(-21deg) rotateY(-30deg); }
  50% { transform:translateY(calc(var(--s) * (var(--idle-y) - .015))) rotateX(-20deg) rotateY(-24deg); }
}
.op-bg .case-motif { opacity:.05; }
.tile-chest { --chest-size:87px; }

/* Case materials are static local surfaces; the existing 3D hinge stays articulated. */
.textured-chest { --surface-alpha:.82; --decal-tilt:6deg; }
.textured-chest .f.front::before,
.textured-chest .f.left::before,
.textured-chest .f.right::before {
  content:""; position:absolute; inset:2px; border-radius:3px; pointer-events:none;
  background:var(--surface) center/100% 100% no-repeat;
  opacity:var(--surface-alpha); mix-blend-mode:normal;
}
.textured-chest .lid-curve::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--surface); background-size:100% calc(var(--s) * 1.02);
  background-position:50% var(--uv); opacity:var(--surface-alpha);
}
.textured-chest .lid-end {
  background-image:linear-gradient(115deg,#ffffff15,#0207135a),var(--surface),linear-gradient(var(--paint),var(--paint-dark));
  background-size:100% 100%;
}
.textured-chest .ch-base .front,
.textured-chest .ch-base .right,
.textured-chest .ch-base .left { border-radius:5px; }
.textured-chest .ch-base .front {
  box-shadow:inset 0 0 0 2px var(--trim),inset 0 3px 2px #ffffe950,inset 0 -4px 4px #0007;
}
.textured-chest .ch-sticker,
.textured-chest .ch-decal,
.textured-chest .ch-corners,
.textured-chest .ch-engraving { position:absolute; z-index:1; }
.textured-chest .ch-sticker {
  left:27%; top:12%; width:37%; height:74%;
  transform:rotate(var(--sticker-tilt)) translateZ(.3px);
  filter:drop-shadow(0 2px 1px #06102085);
}
.textured-chest .ch-sticker.secondary { left:64%;top:1%;width:25%;height:50%;transform:rotate(var(--sticker-tilt-small)) translateZ(.4px); }
.ch-sticker .prize-art {
  width:100%; height:100%; overflow:visible;
  filter:drop-shadow(1.5px 0 0 #fffcf4) drop-shadow(-1.5px 0 0 #fffcf4) drop-shadow(0 1.5px 0 #fffcf4) drop-shadow(0 -1.5px 0 #fffcf4);
}
.ch-lid-gift { position:absolute;left:34%;top:20%;width:34%;height:70%;transform:rotate(-6deg);filter:drop-shadow(1px 0 #fff9e9) drop-shadow(-1px 0 #fff9e9) drop-shadow(0 1px #fff9e9) drop-shadow(0 -1px #fff9e9); }
.ch-lid-gift .prize-art { width:100%;height:100%;overflow:visible;border-radius:0; }
.textured-chest .ch-decal {
  left:74%; top:54%; width:23%; height:46%; object-fit:contain;
  transform:rotate(var(--decal-tilt)) translateZ(.35px);
  filter:drop-shadow(0 1px 1px #030a1445);
}
.ch-corners { inset:2px; pointer-events:none; }
.ch-corners::before,.ch-corners::after {
  content:""; position:absolute; top:0; bottom:0; width:9%;
  background:linear-gradient(130deg,var(--trim2),var(--trim) 42%,#0a15275c 47%,var(--trim) 52%,var(--trim2));
  clip-path:polygon(0 0,100% 0,100% 15%,35% 15%,35% 85%,100% 85%,100% 100%,0 100%);
}
.ch-corners::before { left:0; }
.ch-corners::after { right:0; transform:scaleX(-1); }
.ch-engraving {
  left:8%; bottom:8%; width:19%; height:23%; border-radius:3px;
  background:linear-gradient(140deg,var(--trim2),var(--trim) 50%,var(--trim2));
  box-shadow:inset 0 0 0 1px #f5f0d557,0 1px 1px #0006;
}
.ch-engraving svg { width:100%; height:100%; fill:none; stroke:#4a372c; stroke-width:1.3; opacity:.8; }
.textured-chest .ch-prize { --x:.046; --y:-.34; --z:.43; --tilt:0deg; --scale:.485; }
.textured-chest:not(.open) .rounded-lid {
  animation:none;
  transform:translateY(calc(var(--s) * -.27)) rotateX(0deg);
}
.textured-chest:not(.open) .ch-prize { visibility:hidden; }
.textured-chest.preview-chest:not(.open):not(.shake) .rounded-lid {
  animation:chest-barely-open 8.6s var(--idle-delay,0s) ease-in-out infinite;
}
@keyframes chest-barely-open {
  0%,68%,100% { transform:translateY(calc(var(--s) * -.27)) rotateX(0deg); }
  82% { transform:translateY(calc(var(--s) * -.27)) rotateX(2.2deg); }
  91% { transform:translateY(calc(var(--s) * -.27)) rotateX(.65deg); }
}
.textured-chest.peek:not(.open) .rounded-lid { animation:rounded-hinge 5.4s ease-in-out infinite; }
.textured-chest.peek:not(.open) .ch-prize { visibility:visible; }
.textured-chest:not(.open):not(.shake) .ch-glow {
  background:radial-gradient(ellipse,hsl(var(--h) 60% 75% / .18),transparent 70%);
}
.textured-chest .ch-float { filter:drop-shadow(0 2px 5px #ffc16f55); }
.textured-chest:not(.open) .ch-float { clip-path:inset(-12% -15% 42%); }
.textured-chest.open .ch-prize { --x:.046; --y:-.62; --z:.29; --scale:.485; }
.textured-chest[data-chest=candy] { --paint:#d95198; --paint-dark:#8c245c; --surface-alpha:.9; --tone-shift:3%; }
.textured-chest[data-chest=forest] { --paint:#68734a; --paint-dark:#263d29; --lid-saturation:22%; --tone-shift:-5%; --decal-tilt:-5deg; }
.textured-chest[data-chest=storm] { --paint:#566576; --paint-dark:#26313f; --lid-saturation:13%; --tone-shift:-9%; --surface-alpha:.9; }
.textured-chest[data-chest=wave] { --paint:#23a8ad; --paint-dark:#09676f; --lid-saturation:58%; --tone-shift:4%; }
.textured-chest[data-chest=neon] { --paint:#252430; --paint-dark:#0d111a; --trim:#9fa4b9; --trim2:#f3f4ff; --surface-alpha:.65; }
.textured-chest[data-chest=neon] .f.front { box-shadow:inset 0 0 0 1.7px #d1bddc,inset 0 0 0 3px #ff4ad090,0 0 6px #e238a838; }
.textured-chest[data-chest=cosmos] { --paint:#56477f; --paint-dark:#211739; --lid-saturation:32%; --tone-shift:-5%; --surface-alpha:.95; --decal-tilt:-4deg; }
.textured-chest[data-chest=lunar] { --paint:#243a61; --paint-dark:#101c39; --lid-saturation:38%; --tone-shift:-9%; }
.textured-chest[data-chest=royal] { --paint:#dfcfae; --paint-dark:#b8a081; --lid-saturation:30%; --tone-shift:27%; --surface-alpha:1; }
.textured-chest[data-chest=ice] { --paint:#b7e8ed; --paint-dark:#639ba9; --surface-alpha:.9; --decal-tilt:-5deg; }
.textured-chest[data-chest=ice] .f.front { box-shadow:inset 0 0 0 2px #d5faff,inset 0 0 8px #e7ffffa8,inset 0 -3px 2px #436f8a; }
.textured-chest[data-chest=empire] { --paint:#29252b; --paint-dark:#0b1018; --surface-alpha:1; }

/* Local collection cutouts already contain normalized, transparent artwork. */
.prize-art.nft-cutout { overflow:visible; border-radius:0; background:none; isolation:auto; }
.ch-float .prize-art.nft-cutout { width:100%; height:100%; }
.case-jackpots { display:grid; gap:12px; }
.jackpot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.jackpot-drop {
  min-width:0; padding:14px 12px 12px; gap:5px;
  background:radial-gradient(ellipse at 50% 22%,#74603e38,transparent 75%),linear-gradient(145deg,#2a2b32,#202737);
  box-shadow:inset 0 0 0 1px #cfad6caa,inset 0 1px 0 #f6e0a247;
}
.jackpot-drop .drop-art { min-height:126px; padding:8px; }
.jackpot-drop b { font-size:13px; overflow-wrap:anywhere; }
.jackpot-drop small { color:#e8d3a4; font-variant-numeric:tabular-nums; }
.jackpot-drop { text-align:left;transition:box-shadow .2s,background .2s; }
.jackpot-drop[aria-pressed=true] { box-shadow:inset 0 0 0 1.5px #ffe1a1,0 0 18px #b58f3a21; }
.jackpot-drop:focus-visible { outline:2px solid #ffe1a1;outline-offset:2px; }
.nft-badge {
  position:absolute; z-index:2; top:8px; left:8px;
  padding:3px 5px; border-radius:5px; color:#f1d293; background:#7c632c30;
  box-shadow:inset 0 0 0 1px #c6a15b65; font:800 8px/1 Golos,sans-serif; letter-spacing:.07em;
}
.reel-cell.reel-nft { position:relative; background:linear-gradient(145deg,#494235,#272d3c); box-shadow:inset 0 0 0 1px #cda55c,inset 0 -3px 0 #bd9453; }
.reel-nft .nft-badge { top:4px; left:4px; font-size:6px; padding:2px 3px; }

/* Games home: parallax is limited to clipped art layers, the grid itself stays still. */
.gt { --tile-light:#82baff; }
.gt-rocket,.gt-upgrade { --tile-light:#86f5d2; }
.gt::before {
  content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 35% 25%,color-mix(in srgb,var(--tile-light) 24%,transparent),transparent 56%);
  animation:tile-light-drift 8s ease-in-out infinite;
}
.gt:nth-child(2n)::before { animation-delay:-3.4s; }
@keyframes tile-light-drift { 0%,100%{transform:translate3d(-3%,2%,0);opacity:.45}50%{transform:translate3d(5%,-4%,0);opacity:.9} }
.gt-cases .tile-chest .ch-3d { animation:tile-case-orbit 8s ease-in-out infinite; }
@keyframes tile-case-orbit {
  0%,100%{transform:translateY(calc(var(--s) * .1)) rotateX(-21deg) rotateY(-30deg)}
  50%{transform:translateY(calc(var(--s) * .075)) rotateX(-20deg) rotateY(-24deg)}
}
.gt-flight { animation:tile-flight-parallax 8s ease-in-out infinite; }
@keyframes tile-flight-parallax { 0%,100%{transform:translate3d(-2px,2px,0) rotate(-.5deg)}50%{transform:translate3d(2px,-2px,0) rotate(.5deg)} }
.flight-specks { position:absolute;inset:0;pointer-events:none; }
.flight-specks i {
  position:absolute;left:calc(30% + var(--step) * 17%);top:calc(12% + var(--step) * 10%);width:2px;height:2px;border-radius:50%;
  background:#d8fff2;box-shadow:0 0 5px #a4ffe7;opacity:0;animation:tile-exhaust 2.8s calc(var(--step) * -.6s) ease-out infinite;
}
@keyframes tile-exhaust { 0%{opacity:0;transform:translate3d(16px,-16px,0)}18%{opacity:.7}100%{opacity:0;transform:translate3d(-34px,34px,0)} }
.rk-trail { width:84px;background:linear-gradient(90deg,transparent,#71ffd4ad); }
.rk-trail::after { content:"";position:absolute;right:0;top:2px;width:65%;height:1px;background:linear-gradient(90deg,transparent,#efffeac4); }
.mc.g,.mc.b { --delay:calc(var(--step) * 1.05s); }
.mc.g::after,.mc.b::after,.mc img,.mc .bomb { animation-duration:8s; }
.up-mini-ring .arc { animation:tile-running-arc 5.8s linear infinite;stroke-dasharray:96 270; }
@keyframes tile-running-arc { to{stroke-dashoffset:-270} }
@media (prefers-reduced-motion:reduce) {
  .rounded-chest .rounded-lid { transform:translateY(calc(var(--s) * -.27)) rotateX(18deg); }
  .op-chest .chest,.op-particles i,.opening.reels .reel-wrap { animation:none!important; }
  .textured-chest.peek:not(.open) .rounded-lid { transform:translateY(calc(var(--s) * -.27)) rotateX(18deg); }
  .gt::before { animation:none!important;transform:none;opacity:.45; }
  .gt .mc.g img,.gt .mc.g::after,.gt .mc.b .bomb { opacity:.85;scale:1; }
  .gt .up-gift { opacity:0; }
  .gt .up-gift-0 { opacity:1;transform:translate(-50%,-50%); }
}


/* ---------- RubUP-review polish: case results, upgrade sheets, mines, rocket ---------- */
/* Multi-prize result: one row per prize with its own actions */
.prize-sheet .prize-multi{grid-template-columns:1fr;gap:7px}
.prize-sheet .pm{grid-template-columns:58px minmax(0,1fr) auto;grid-template-rows:auto auto;justify-items:start;align-items:center;column-gap:10px;row-gap:1px;padding:8px 10px;text-align:left}
.prize-sheet .pm>.case-live-art{grid-row:1/3;width:58px;height:58px;--live-size:58px}
.prize-sheet .pm>b{grid-column:2;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.prize-sheet .pm>small{grid-column:2}
.pm-acts{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:5px}
.pm-acts .btn{height:30px;padding:0 10px;font-size:12px;white-space:nowrap}
.pm-sold{grid-column:3;grid-row:1/3;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.pm.sold{opacity:.5}
.row2.single{grid-template-columns:1fr}
.pm-total[hidden]{display:none}

/* Upgrade: quote status, multiplier tags, picker sheets */
.ug-quote{display:block;min-height:13px;margin-top:3px;font-style:normal;font-size:10px;font-weight:700;color:var(--muted)}
.ug-quote.error{color:var(--bad)}
.ug-center b.est{opacity:.6}
.ug-tabs .ug-all{margin-left:auto;color:#ffd27a;background:transparent;padding-inline:6px}
.ug-x{font-style:normal;font-size:10px;font-weight:800;color:#ffd27a;line-height:1}
.ug-sheet .sheet-body{display:grid;gap:10px}
.ug-filter{display:flex;gap:8px;align-items:center;min-width:0}
.ug-filter .search{flex:1;min-width:0;height:38px}
.ug-filter select{height:38px;border-radius:12px;background:var(--card);color:var(--text);border:0;padding:0 8px;font:inherit;font-size:13px}
.ug-filter .seg{flex:1;min-width:0}
.ug-range{display:flex;gap:6px;flex:0 0 auto}
.ug-range input{width:64px;height:36px;border-radius:12px;border:0;background:var(--card);color:var(--text);font:inherit;font-size:13px;padding:0 8px}
.ug-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:46vh;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.ug-pick-grid>.empty{grid-column:1/-1}
.ug-pick-grid .ug-card{min-height:104px}
.ug-add{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--card)}
.ug-add>span:first-child{display:grid;font-weight:700;font-size:13px}
.ug-add small{font-weight:500;font-size:11px;color:var(--muted)}
.ug-add .bet-field{width:116px;flex:0 0 auto}
.ug-sum{margin:0 0 8px;text-align:center;font-size:12.5px;color:var(--muted)}
.ug-sum b{display:inline-flex;align-items:center;gap:3px;color:var(--text)}
.ug-lose{padding:14px 6px;font-size:14px}
@media (max-width:380px){.ug-range input{width:54px}.ug-filter.wrap,.ug-sheet .ug-filter:nth-child(2){flex-wrap:wrap}}

/* Mines: payout now / next cell, result over the board */
.mines-top{grid-template-columns:1fr 1fr}
.mines-top div{gap:1px}
.mines-top b{display:flex;align-items:center;gap:4px}
.mines-top em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.mines-top.live .m-now{box-shadow:inset 0 0 0 1.5px #ffd27a8c}
.mines-top.live .m-now b{color:#ffe3a0}
.mn-board{position:relative}
.m-result{position:absolute;inset:0;z-index:2;isolation:isolate;display:grid;place-content:center;justify-items:center;gap:4px;pointer-events:none;animation:prize-in .35s}
.m-result[hidden]{display:none}
.m-result::before{content:"";position:absolute;inset:22% 12%;border-radius:22px;background:#0f1724e0;box-shadow:0 10px 30px #0008;z-index:-1}
.m-result small{font-size:12px;font-weight:700;color:#b9c8de}
.m-result b{display:flex;align-items:center;gap:5px;font:800 26px/1 Unbounded,sans-serif}
.m-result.win b{color:#ffd77e}
.m-result.lose b{color:var(--bad)}
.mines-busy .mcell{pointer-events:none}

/* Rocket: personal line + bet summary */
.rk-msg.won{color:var(--ok)}
.rk-msg.lost,.rk-msg.info{color:var(--muted)}
.rk-msg .coin,.rk-sum .coin{display:inline-block;width:13px;height:13px;vertical-align:-2px}
.rk-sum{margin:0 0 8px;text-align:center;font-size:13px;color:var(--muted)}
.rk-sum .coin{width:13px;height:13px;vertical-align:-2px}
.ug-sum .coin,.pm-total .coin,.m-result .coin,.mines-top .coin{display:inline-block;flex:0 0 auto;width:13px;height:13px;vertical-align:-2px}
.m-result .coin{width:20px;height:20px}