html,body{margin:0;background:transparent;font-family:var(--ps-font-family,Arial,Helvetica,sans-serif);color:var(--ps-text,#fff);overflow:hidden}
:root{
  --ps-font-scale-safe:var(--ps-font-scale,1);
  --chest-stage-fill-alpha:var(--ps-chest-stage-fill-alpha,.95);
  --chest-panel-fill-alpha:var(--ps-chest-panel-fill-alpha,.92);
  --chest-title-scale:var(--ps-chest-title-scale,1);
  --chest-title-y:var(--ps-chest-title-y,0px);
  --chest-panel-density:var(--ps-chest-panel-density,1);
  --chest-spark-opacity:.10;
  --chest-text-strong:var(--ps-text,#f8fafc);
  --chest-soft-text:color-mix(in srgb, var(--ps-text,#f8fafc) 82%, transparent);
  --chest-solid-panel:rgb(var(--ps-panel-bg-rgb,17 24 39) / var(--chest-stage-fill-alpha));
  --chest-solid-panel-2:rgb(var(--ps-panel-bg-rgb,17 24 39) / .98);
  --chest-card-edge:rgba(255,255,255,.10);
}
.wrap{display:flex;flex-direction:column;gap:14px;padding:18px;box-sizing:border-box}
.stage-card{
  position:relative;border-radius:26px;padding:20px 24px 92px;
  background:var(--chest-solid-panel);
  border:1px solid var(--chest-card-edge);
  box-shadow:0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px)
}
.stage-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 22%);
}
.hud{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px;position:relative;z-index:3}
.title-stack{display:flex;flex-direction:column;gap:6px}
.title{font-size:calc(34px * var(--ps-font-scale-safe));font-weight:1000;letter-spacing:.02em;color:var(--chest-text-strong);text-shadow:0 2px 10px rgba(0,0,0,.18)}
.status{font-size:calc(17px * var(--ps-font-scale-safe));font-weight:800;color:var(--chest-soft-text)}
.hud-metrics{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:240px}
.count,.meta{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:rgb(255 255 255 / .06);border:1px solid rgba(255,255,255,.10);font-weight:900;line-height:1;color:var(--chest-soft-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.count{font-size:calc(16px * var(--ps-font-scale-safe))}
.meta{font-size:calc(13px * var(--ps-font-scale-safe));text-align:center}
.scene{position:relative;min-height:360px;display:flex;align-items:flex-end;justify-content:center;overflow:visible;isolation:isolate}
.sparkles{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%, rgba(255,255,255,var(--chest-spark-opacity)) 0, rgba(255,255,255,0) 30%);pointer-events:none;filter:blur(6px)}
.entry-stream,.entry-label-layer,.entry-effect-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4}
.entry-stream{background:linear-gradient(135deg, transparent 0 8%, rgba(255,255,255,.10) 8% 9%, transparent 9% 100%);mask-image:linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.7) 30% 58%, transparent 68% 100%);opacity:0;transform:translateX(-30px) translateY(-20px) scale(.96)}
.scene.entry-animating .entry-stream{animation:entryBeam calc(.68s / max(.2, var(--ps-anim-speed,1))) ease-out}
.chest-shadow{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:360px;height:42px;background:radial-gradient(ellipse at center, rgba(0,0,0,.38), rgba(0,0,0,0) 72%);filter:blur(4px);z-index:0}
.front-label{
  position:absolute;left:50%;bottom:232px;transform:translateX(-50%) translateY(var(--chest-title-y)) scale(var(--chest-title-scale));transform-origin:center center;
  display:inline-flex;align-items:center;justify-content:center;min-width:280px;max-width:min(70vw,760px);padding:14px 28px;border-radius:999px;
  background:var(--chest-solid-panel-2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  font-size:calc(22px * var(--ps-font-scale-safe));font-weight:1000;line-height:1.1;text-align:center;color:var(--chest-text-strong);z-index:5
}
.chest{position:relative;width:300px;height:232px;transform-origin:center bottom;transition:transform .34s ease;z-index:2}
.chest .lid,.chest .base,.chest .lock,.custom-chest-image{position:absolute;left:50%;transform:translateX(-50%)}
.chest .lid{
  top:14px;width:262px;height:88px;border-radius:26px 26px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #d89b58 0%, #b56f31 58%, #8a4d1a 100%);
  border:2px solid rgba(95,48,12,.75);
  box-shadow:0 10px 18px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,235,200,.28), inset 0 -10px 20px rgba(74,37,10,.28);
  transform:translateX(-50%) rotate(0deg);transform-origin:center 88%;transition:transform .32s ease
}
.chest .lid::before{
  content:'';position:absolute;left:18px;right:18px;top:18px;height:24px;border-radius:999px;
  background:linear-gradient(180deg, #8b562b, #603411);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.18)
}
.chest .base{
  top:84px;width:282px;height:132px;border-radius:16px 16px 30px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, #c98245 0%, #985320 52%, #61300f 100%);
  border:2px solid rgba(95,48,12,.84);
  box-shadow:0 16px 28px rgba(0,0,0,.24), inset 0 2px 0 rgba(255,240,210,.24), inset 0 -14px 26px rgba(45,19,6,.32)
}
.chest .base::before,.chest .base::after{content:'';position:absolute;top:18px;bottom:16px;width:6px;border-radius:999px;background:linear-gradient(180deg, rgba(255,227,167,.55), rgba(125,66,20,.55))}
.chest .base::before{left:36px}.chest .base::after{right:36px}
.chest .lock{
  top:110px;width:54px;height:76px;border-radius:16px;
  background:linear-gradient(180deg, #ffe9a8 0%, #e0b44d 52%, #a86d16 100%);
  box-shadow:0 6px 12px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,249,214,.55), inset 0 -6px 10px rgba(128,80,12,.26);
  z-index:3;border:1px solid rgba(118,71,11,.55)
}
.chest .lock::before{content:'';position:absolute;left:50%;top:18px;transform:translateX(-50%);width:18px;height:24px;border-radius:999px;background:rgba(115,67,12,.42)}
.custom-chest-image{inset:auto 0 0 50%;width:300px;height:236px;object-fit:contain;display:none;z-index:4;filter:drop-shadow(0 18px 34px rgba(0,0,0,.28))}
.chest.custom-art .lid,.chest.custom-art .base,.chest.custom-art .lock{opacity:0}
.chest.custom-art .custom-chest-image{display:block}
.chest.open .lid{transform:translateX(-50%) rotate(-20deg)}
.scene.entry-animating .chest:not(.open){animation:chestPulse calc(.62s / max(.2, var(--ps-anim-speed,1))) ease-in-out}
.scene.entry-animating .chest:not(.open) .lid{animation:lidNod calc(.62s / max(.2, var(--ps-anim-speed,1))) ease-in-out}
.scene.entry-animating .chest.custom-art{animation:chestPulse calc(.62s / max(.2, var(--ps-anim-speed,1))) ease-in-out}
.fly-label{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:var(--chest-solid-panel-2);border:1px solid rgba(255,255,255,.12);color:var(--chest-text-strong);font-size:calc(18px * var(--ps-font-scale-safe));font-weight:900;white-space:nowrap;box-shadow:0 12px 28px rgba(0,0,0,.18);transform:translate(var(--start-x, 3%), var(--start-y, 8%)) scale(.88);opacity:0}
.fly-label.animate{animation:flyToChest calc(1.15s / max(.2, var(--ps-anim-speed,1))) cubic-bezier(.2,.82,.16,1)}
.entry-effect{position:absolute;left:0;top:0;width:82px;height:82px;object-fit:contain;transform:translate(var(--effect-x, 10%), var(--effect-y, 14%)) scale(.48);opacity:0;filter:drop-shadow(0 6px 18px rgba(255,255,255,.18))}
.entry-effect.animate{animation:effectToChest calc(1.0s / max(.2, var(--ps-anim-speed,1))) ease-out}
.picker{min-height:28px;font-size:calc(19px * var(--ps-font-scale-safe));font-weight:900;text-align:center;color:var(--chest-text-strong)}
.panels{display:grid;grid-template-columns:repeat(5,minmax(calc(126px * var(--chest-panel-density)),1fr));gap:calc(16px * var(--chest-panel-density));width:min(1120px,100%)}
.panel{
  --panel-color:#cbd5e1;position:relative;overflow:hidden;
  background:rgb(var(--ps-panel-bg-rgb,17 24 39) / var(--chest-panel-fill-alpha));
  border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:calc(18px * var(--chest-panel-density)) calc(16px * var(--chest-panel-density));min-height:calc(164px * var(--chest-panel-density));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:transform .2s ease, box-shadow .2s ease;backdrop-filter:blur(8px);color:var(--chest-text-strong);box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03)
}
.panel::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:var(--panel-color);opacity:.92;pointer-events:none}
.panel::after{content:'';position:absolute;inset:12px;border-radius:16px;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.panel .slot{font-size:calc(12px * var(--ps-font-scale-safe));opacity:.9;font-weight:900;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1;color:color-mix(in srgb, var(--ps-text,#f8fafc) 72%, white 28%)}
.panel .face{font-size:calc(58px * var(--chest-panel-density));line-height:1;font-weight:1000;position:relative;z-index:1;color:var(--chest-text-strong);text-shadow:0 3px 12px rgba(0,0,0,.24)}
.panel .label{font-size:calc(20px * var(--chest-panel-density) * var(--ps-font-scale-safe));line-height:1.12;font-weight:1000;text-align:center;position:relative;z-index:1;color:var(--chest-text-strong)}
.panel .amount,.panel .hint{font-size:calc(14px * var(--chest-panel-density) * var(--ps-font-scale-safe));font-weight:900;opacity:.98;position:relative;z-index:1;color:var(--chest-soft-text)}
.panel .hint{letter-spacing:.03em}
.panel.hidden .label,.panel.hidden .amount{display:none}.panel.hidden .hint{display:block}.panel.revealed .face{display:none}
.panel.selected{transform:translateY(-4px);box-shadow:0 0 0 2px rgba(255,214,102,.64),0 18px 40px rgba(0,0,0,.25)}
.panel.rarity-common{--panel-color:#94a3b8}.panel.rarity-uncommon{--panel-color:#22c55e}.panel.rarity-rare{--panel-color:#3b82f6}.panel.rarity-epic{--panel-color:#a855f7}.panel.rarity-legendary{--panel-color:#f59e0b}
.panel.revealed{background:linear-gradient(180deg, rgb(var(--ps-panel-bg-rgb,17 24 39) / .96), color-mix(in srgb, var(--panel-color) 18%, rgb(var(--ps-panel-bg-rgb,17 24 39) / .96) 82%))}
.panel.revealed::before{height:100%;opacity:.14}
.panel.revealed .label,.panel.revealed .amount{color:white}.panel.revealed.rarity-legendary{animation:spark 1.3s linear infinite}.panel.revealed.rarity-epic{animation:epicPulse 1.8s linear infinite}
@keyframes spark{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 20px rgba(255,214,102,.8))}}
@keyframes epicPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes chestPulse{0%,100%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.99)}}
@keyframes lidNod{0%,100%{transform:translateX(-50%) rotate(0deg)}40%{transform:translateX(-50%) rotate(-10deg)}70%{transform:translateX(-50%) rotate(-2deg)}}
@keyframes entryBeam{0%{opacity:0;transform:translateX(-26px) translateY(-16px) scale(.96)}25%{opacity:.78}100%{opacity:0;transform:translateX(16px) translateY(10px) scale(1.02)}}
@keyframes flyToChest{0%{opacity:0;transform:translate(var(--start-x,3%),var(--start-y,8%)) scale(.8)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(50%,62%) scale(.34)}}
@keyframes effectToChest{0%{opacity:0;transform:translate(var(--effect-x,10%),var(--effect-y,14%)) scale(.48)}20%{opacity:.95}80%{opacity:.78}100%{opacity:0;transform:translate(50%,60%) scale(.2)}}
@media (max-width:1100px){.panels{grid-template-columns:repeat(2,minmax(0,1fr))}.front-label{max-width:88vw;min-width:0;font-size:calc(18px * var(--ps-font-scale-safe))}}