/* the field boss's reward chest opening (js/bosschest.js): the chest in the middle of a dark screen, light rays behind,
   it shakes, bursts open, and the prizes pop out one by one in their grade's colour */
#bchest { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(circle at 50% 42%, rgba(70, 48, 20, 0.92), rgba(10, 8, 6, 0.96) 62%); font-family: Mali, sans-serif; color: #fff3cf;
  --tc: #ffd36a; animation: bcIn 0.35s ease-out both; }
#bchest[hidden] { display: none; }
#bchest.bc-t2 { --tc: #bfe3ff; }
#bchest.bc-t3 { --tc: #ffb27a; }
.bc-rays { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; opacity: 0.35; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 55%, transparent) 0deg 7deg, transparent 7deg 22deg);
  mask: radial-gradient(circle, #000 18%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); animation: bcSpin 24s linear infinite; }
#bchest.open .bc-rays { opacity: 0.85; animation-duration: 9s; }
.bc-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(760px, calc(100vw - 32px)); }
.bc-title { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2px 18px; border-radius: 14px; background: radial-gradient(ellipse, rgba(20, 12, 6, 0.75), rgba(20, 12, 6, 0) 75%); }
.bc-title b { font: 800 30px/1.2 Mali, sans-serif; color: var(--tc); text-shadow: 0 2px 0 #2a1a0c; }
.bc-title small { font-size: 15px; color: #e8dcc0; }
.bc-chest { position: relative; width: 260px; height: 260px; padding: 0; border: 0; background: none; cursor: pointer; }
.bc-chest .bc-img { width: 100%; height: 100%; object-fit: contain; animation: bcBob 1.6s ease-in-out infinite, bcAura 1.8s ease-in-out infinite; }
/* the aura round the chest (2026-10-17, "ให้มีแสงออร่าด้วย"): a breathing glow in the rank's colour, the top rank the strongest */
.bc-chest::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 70%, transparent) 0, color-mix(in srgb, var(--tc) 25%, transparent) 38%, transparent 66%);
  animation: bcAuraBg 1.8s ease-in-out infinite; }
.bc-t1 .bc-chest::before { inset: -55%; }
.bc-t3 .bc-chest::before { inset: -18%; opacity: 0.8; }
#bchest.shake .bc-chest .bc-img { animation: bcShake 0.11s linear infinite; filter: drop-shadow(0 0 22px var(--tc)) drop-shadow(0 0 44px var(--tc)) brightness(1.2); }
#bchest.open .bc-chest .bc-img { animation: bcPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both, bcAura 1.4s ease-in-out 0.45s infinite; }
#bchest.shake .bc-chest::before, #bchest.open .bc-chest::before { animation-duration: 0.7s; }
/* the rank's burst (Codex picture) behind the chest: it blooms at the opening, then keeps turning; rank 1 bigger */
.bc-burstw { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; pointer-events: none; opacity: 0; transform: scale(0.3); }
.bc-burstw[hidden] { display: none; }
.bc-t1 .bc-burstw { width: 600px; height: 600px; margin: -300px 0 0 -300px; }
.bc-burst { width: 100%; height: 100%; object-fit: contain; animation: bcSpin 16s linear infinite; }
#bchest.open .bc-burstw { animation: bcBloom 0.9s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.bc-chest .bc-img { position: relative; }
/* coins and gems shooting out of the chest */
.bc-coins { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.bc-coins img { position: absolute; width: 30px; height: 30px; margin: -15px; opacity: 0; animation: bcCoin 1.4s cubic-bezier(.15, .6, .4, 1) var(--d) forwards; }
#bchest.bc-t1.open .bc-stage { animation: bcQuake 0.5s linear; }
.bc-flash { position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0, var(--tc) 30%, transparent 62%); }
#bchest.open .bc-flash { animation: bcFlash 0.8s ease-out both; }
.bc-hint { font-size: 16px; color: #e8dcc0; animation: bcBlink 1.2s ease-in-out infinite; }
.bc-hint[hidden] { display: none; }
.bc-prizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 120px; }
.bc-prize { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 108px; padding: 8px 6px; border-radius: 12px; text-align: center; cursor: pointer;
  background: linear-gradient(#2d2416, #18120b); box-shadow: inset 0 0 0 2px var(--gc), 0 0 14px color-mix(in srgb, var(--gc) 45%, transparent);
  animation: bcPrize 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.bc-prize .bc-slot { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 35%, #1b140c), #120d08); }
.bc-prize .bc-slot img { width: 52px; height: 52px; object-fit: contain; }
.bc-prize b { font: 700 13px/1.25 Mali, sans-serif; color: var(--gc); word-break: break-word; }
.bc-prize.big { width: 132px; box-shadow: inset 0 0 0 3px var(--gc), 0 0 26px var(--gc); }
.bc-prize.big .bc-slot { width: 76px; height: 76px; }
.bc-prize.big .bc-slot img { width: 68px; height: 68px; }
.bc-prize em { font: 800 12px Mali, sans-serif; font-style: normal; color: #ff7a7a; }
.bc-btns { display: flex; gap: 10px; min-height: 40px; }
.bc-btns .btn { min-width: 150px; font-size: 16px; }
.bc-btns .btn:not(.primary) { color: #2c2018; }
.bc-btns .btn[hidden] { display: none; }
@keyframes bcBloom { 0% { opacity: 0; transform: scale(0.3); } 40% { opacity: 1; } 100% { opacity: 0.72; transform: scale(1); } }
@keyframes bcCoin { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 240px)) rotate(var(--r)); } }
@keyframes bcQuake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(4px, -2px); } }
@keyframes bcAura { 0%, 100% { filter: drop-shadow(0 0 14px var(--tc)) drop-shadow(0 0 30px color-mix(in srgb, var(--tc) 60%, transparent)); } 50% { filter: drop-shadow(0 0 22px var(--tc)) drop-shadow(0 0 52px var(--tc)); } }
@keyframes bcAuraBg { 0%, 100% { transform: scale(0.92); opacity: 0.65; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes bcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcSpin { to { transform: rotate(360deg); } }
@keyframes bcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bcShake { 0% { transform: translate(-5px, 0) rotate(-3deg); } 50% { transform: translate(5px, -2px) rotate(3deg); } 100% { transform: translate(-5px, 0) rotate(-3deg); } }
@keyframes bcPop { from { transform: scale(0.85); } to { transform: scale(1); } }
@keyframes bcFlash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes bcBlink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes bcPrize { from { opacity: 0; transform: translateY(-60px) scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #bchest *, #bchest { animation: none !important; } .bc-prize { opacity: 1; } }