/* Dragon Pearl Link: Hoard meter, Hoard Bonus pearls, Dragon Coin, attract breathing. */
.dpl-hoard{display:flex;align-items:center;gap:7px;margin:0 2px 7px;padding:3px 8px;border-radius:999px;
  background:#0b0102;border:1px solid #6b4a14;box-shadow:inset 0 0 8px #000}
.dpl-hoard-l{font:800 .58rem/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;color:#9fe6ff;text-shadow:0 0 6px rgba(120,220,255,.6)}
.dpl-hoard-bar{position:relative;flex:1;height:10px;border-radius:6px;overflow:hidden;background:#200606;box-shadow:inset 0 0 0 1px #4a2a10}
.dpl-hoard-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;transition:width .35s cubic-bezier(.3,1.4,.5,1);
  background:linear-gradient(180deg,#e8ffff,#59d4ef 45%,#127a9a 70%,#8ff0ff)}
/* 25 notches drawn over the bar */
.dpl-hoard-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(4% - 1px),rgba(10,0,0,.85) calc(4% - 1px) 4%)}
.dpl-hoard b{min-width:3.6em;text-align:right;font:700 .72rem/1 'JetBrains Mono',monospace;color:#bff4ff}
.dpl-hoard--tick .dpl-hoard-bar i{animation:dpl-htick .35s ease-out}
@keyframes dpl-htick{40%{filter:brightness(1.8)}}
.dpl-hoard--hot{border-color:#59d4ef;animation:dpl-hhot 1s ease-in-out infinite alternate}
@keyframes dpl-hhot{to{box-shadow:inset 0 0 8px #000,0 0 12px 2px rgba(90,212,239,.6)}}
.dpl-hoard--burst{animation:dpl-hburst .3s steps(2) infinite}
@keyframes dpl-hburst{50%{background:#59d4ef}}

/* Hoard Bonus: three pearls over the stage */
.dpl-hoardfx{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:5%;
  background:radial-gradient(ellipse at center,rgba(0,40,60,.55),rgba(0,0,0,.78));pointer-events:none}
.dpl-horb{position:relative;width:26%;aspect-ratio:1;opacity:0;transform:translateY(-120%) scale(.6)}
.dpl-horb img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 18px 6px rgba(150,240,255,.7)}
.dpl-horb .dpl-pv{font-size:clamp(1rem,5vw,1.6rem)}
.dpl-horb--in{opacity:1;transform:none;transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .2s}
.dpl-horb--open img{animation:dpl-hopen .5s ease-out;box-shadow:0 0 0 3px #ffd86b,0 0 26px 10px rgba(190,250,255,.95)}
@keyframes dpl-hopen{40%{transform:scale(1.18);filter:brightness(1.7)}}
.dpl-horb--collect{transition:transform .35s ease-in,opacity .35s;transform:translateY(160%) scale(.3);opacity:0}

/* Dragon Coin */
.dpl-coin{position:absolute;z-index:6;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fffbe0 0%,#ffd84a 30%,#e2a10f 62%,#8a5200 100%);
  box-shadow:0 0 0 2px #fff0a0,0 0 0 4px #8a5200,0 0 22px 6px rgba(255,200,60,.75),inset 0 -4px 8px rgba(120,60,0,.6)}
.dpl-coin::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2px solid rgba(138,82,0,.7)}
.dpl-coin span{position:relative;font:900 clamp(.8rem,4vw,1.2rem)/1 'Plus Jakarta Sans',sans-serif;color:#4a1f00;text-shadow:0 1px 0 #fff6c8}
.dpl-coin--out{transition:opacity .4s,transform .4s;opacity:0;transform:scale(1.4)}

.dpl-banner--hoard .dpl-banner-t{background-image:linear-gradient(180deg,#f0ffff,#8ff0ff 40%,#127a9a 62%,#d8fbff)}

/* attract: one symbol breathes at a time */
.dpl-breathe{animation:dpl-breathe 1.5s ease-in-out}
@keyframes dpl-breathe{50%{transform:scale(1.08);filter:brightness(1.25)}}

@media (prefers-reduced-motion:reduce){
  .dpl-hoard--tick .dpl-hoard-bar i,.dpl-hoard--hot,.dpl-hoard--burst,.dpl-horb--open img,.dpl-breathe{animation:none!important}
  .dpl-horb,.dpl-horb--in,.dpl-horb--collect,.dpl-coin--out,.dpl-hoard-bar i{transition:none}
  .dpl::before,.dpl--attract .dpl-topper::after,.dpl--attract .dpl-jpbox,.dpl-spin.is-busy::before,.dpl--attract .dpl-spin{animation:none!important}
}