/* Visual/timing counterpart of the mobile ChestReward component. */
.chestReward {
  --cr-bg: #fff4de; --cr-accent: #ffb11b; --cr-glow: #ffd974;
  --cr-spark: #f0b440; --cr-dot: rgba(255,150,0,.16); --cr-text: #1e1e1e;
  --cr-button: #66b6e8; --cr-interior: #8a4a00; --cr-deep: #3f1e00; --cr-lip: #ffc961;
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center;
  background: var(--cr-bg); color: var(--cr-text); overflow: hidden; isolation: isolate;
  padding: max(26px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
  font-family: "Poppins", system-ui, sans-serif; touch-action: manipulation;
}
.chestReward--monthly {
  --cr-bg:#e1f3ff; --cr-accent:#57c4f4; --cr-glow:#8fd9ff; --cr-spark:#63b7e8;
  --cr-dot:rgba(82,124,255,.14); --cr-interior:#1d4bab; --cr-deep:#081c55; --cr-lip:#8fd9ff;
}
.chestReward--halloween {
  --cr-bg:#1e1636; --cr-accent:#ff8a1f; --cr-glow:#ffb347; --cr-spark:#ffb347;
  --cr-dot:rgba(255,138,31,.22); --cr-text:#fff; --cr-button:#ff8a1f;
}
.crBadge { flex:0 0 auto; border-radius:18px; padding:9px 22px; font-size:15px; font-weight:700; background:var(--cr-accent); color:#fff; text-align:center; }
.crTap { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; z-index:1; -webkit-tap-highlight-color:transparent; outline-offset:-8px; }
.crTap[aria-disabled="true"] { cursor:default; }
.crStage { position:absolute; top:calc(50% - 30px); left:50%; width:0; height:0; }
.crFloat { position:absolute; left:-108px; top:-108px; width:216px; height:216px; animation:crFloat 2.8s ease-in-out infinite; }
.crChest { display:block; position:relative; width:100%; height:100%; }
.chestReward--halloween .crFloat { width:184px; height:184px; left:-92px; top:-92px; }
.crBase, .crLid { position:absolute; left:0; width:100%; max-width:none; pointer-events:none; user-select:none; }
.crBase { bottom:0; height:calc(100% * 370 / 627); }
.crLid { top:0; height:calc(100% * 257 / 627); transform-origin:50% 100%; z-index:2; }
.crInterior { position:absolute; top:calc(100% * 257 / 627 - 16px); left:16%; width:68%; height:14px; border-radius:6.5px; border-top:1.8px solid var(--cr-lip); background:linear-gradient(var(--cr-deep),var(--cr-interior)); opacity:0; }
.crFullArtwork .crBase, .crFullArtwork .crLid { inset:0; height:100%; object-fit:contain; }
.crFullArtwork .crBase { clip-path:inset(46% 0 0); }
.crFullArtwork .crLid { clip-path:inset(0 0 54%); transform-origin:50% 46%; }
.crFullArtwork .crInterior { top:calc(46% - 10px); }
.crGlow, .crFlash { position:absolute; width:240px; height:240px; left:-120px; top:-120px; border-radius:50%; opacity:0; background:var(--cr-glow); pointer-events:none; }
.crFlash { width:280px; height:280px; left:-140px; top:-140px; background:#fff; }
.crSpark { position:absolute; transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--turn)); color:var(--cr-spark); font-weight:700; animation:crPulse 1.8s ease-in-out infinite; }
.crParticle { position:absolute; left:0; top:0; max-width:none; color:var(--cr-spark); opacity:0; pointer-events:none; }
.crAmount { position:absolute; left:50%; top:calc(50% - 30px); display:flex; align-items:center; gap:8px; font-size:46px; font-weight:800; white-space:nowrap; transform:translate(-50%,calc(-50% - 150px)); z-index:3; animation:crAmount .55s cubic-bezier(.2,1.4,.4,1) both; pointer-events:none; }
.crAmount img { width:42px; height:42px; }
.crFooter { position:absolute; bottom:calc(116px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:18px; pointer-events:none; }
.crDots { display:flex; gap:14px; }
.crDots > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--cr-dot); color:#fff; font-size:14px; font-weight:800; }
.crDots > .is-filled { background:var(--cr-accent); }
.crHint { font-size:19px; font-weight:600; min-height:29px; text-align:center; }
.crCollectWrap { position:absolute; z-index:3; bottom:max(20px, env(safe-area-inset-bottom)); width:88%; max-width:560px; text-align:center; }
.crCollect { width:100%; border-radius:52px; padding:20px; background:var(--cr-button); color:#fff; font-size:18px; font-weight:600; animation:crButton .32s ease-out both; }
.crCollect:disabled { opacity:.65; cursor:wait; }
.crError { font-size:14px; padding:8px; }
.is-opening .crChest { animation:crBurst .65s ease-out both; }
.is-opening .crLid { animation:crLid .65s .1s cubic-bezier(.2,1.4,.4,1) both; }
.is-opening .crInterior { opacity:1; transition:opacity .18s .1s; }
.is-opening .crGlow { animation:crGlow .65s ease-out both; }
.is-opening .crFlash { animation:crFlash .38s .09s ease-out both; }
.is-opening .crParticle { animation:crParticle .75s var(--delay) ease-out both; }
@keyframes crFloat { 0%,100% { transform:translateY(6px); } 50% { transform:translateY(-6px); } }
@keyframes crPulse { 0%,100% { opacity:.35; } 50% { opacity:.95; } }
@keyframes crBurst { 0% { transform:scale(1); } 15% { transform:translateY(10px) scale(1.14,.78); } 35% { transform:translateY(-16px) scale(.92,1.14); } 70% { transform:translateY(2px) scale(1.02,.98); } 100% { transform:none; } }
@keyframes crLid { to { transform:translate(-12px,-64px) rotate(-26deg); } }
@keyframes crGlow { 0% { opacity:0; transform:scale(.3); } 15% { opacity:.55; } 100% { opacity:0; transform:scale(2.4); } }
@keyframes crFlash { 0% { opacity:0; transform:scale(.4); } 18% { opacity:.85; } 100% { opacity:0; transform:scale(2.3); } }
@keyframes crParticle { 0% { opacity:0; transform:translate(-50%,-26px) scale(.2); } 5% { opacity:1; } 25% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--spin)) scale(.9); } }
@keyframes crAmount { from { opacity:0; transform:translate(-50%,26px) scale(.5); } to { opacity:1; transform:translate(-50%,calc(-50% - 150px)) scale(1); } }
@keyframes crButton { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@media (max-height:600px) {
  .crStage { top:45%; transform:scale(.78); }
  .crAmount { top:45%; font-size:36px; }
  .crFooter { bottom:92px; gap:8px; }
  .crHint { font-size:16px; }
  .crCollect { padding:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .chestReward *, .chestReward *::before { animation:none !important; transition:none !important; }
  .is-opening .crLid { transform:translate(-12px,-64px) rotate(-26deg); }
  .is-opening .crParticle, .is-opening .crGlow, .is-opening .crFlash { opacity:0; }
}