/* Dragon Pearl Link: cabinet, jackpot bar, reels, symbols, meters and button deck. */
.dpl-free{text-align:center;font-size:.8rem;color:#64748b;margin:.25rem 0 .6rem}
.dpl-free a{color:#7F1D1D;font-weight:700}

.dpl{--gold:#f6c453;--gold2:#a8701c;--lac:#3a0607;--pad:8px;position:relative;border-radius:18px;padding:16px 10px 12px;
  background:linear-gradient(180deg,#5c0b0c 0%,#2a0405 60%,#1a0203 100%);
  box-shadow:0 0 0 2px #b8862b,0 0 0 5px #3b0a06,0 0 0 7px #e9be5e,0 14px 34px rgba(60,0,0,.45),inset 0 1px 0 rgba(255,230,160,.35);
  color:#fff;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;scroll-margin-top:64px}

/* marquee bulbs along the top rail */
.dpl::before{content:"";position:absolute;left:14px;right:14px;top:5px;height:6px;border-radius:3px;pointer-events:none;
  background:radial-gradient(circle,#fff6c8 0 1.6px,#ffbf2e 2.4px,transparent 3.2px) 0 50%/14px 6px repeat-x,
             radial-gradient(circle,#7a2a10 0 2px,transparent 3px) 7px 50%/14px 6px repeat-x;
  filter:drop-shadow(0 0 3px #ffb300);animation:dpl-chase 1.6s steps(2) infinite}
@keyframes dpl-chase{to{background-position:14px 50%,21px 50%}}
.dpl--attract::before{animation-duration:.5s}

.dpl-topper{text-align:center;margin:-2px 0 6px;position:relative;overflow:hidden}
.dpl-logo{display:inline-block;font:900 1.32rem/1.05 Georgia,'Times New Roman',serif;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff7d6 0%,#ffd76a 38%,#c98a1d 62%,#ffe9a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #4a0b00) drop-shadow(0 0 8px rgba(255,190,60,.55))}
.dpl-logo em{font-style:normal;background:linear-gradient(180deg,#ffffff 0%,#bff4ff 45%,#4fc3d9 70%,#e8ffff 100%);-webkit-background-clip:text;background-clip:text}
.dpl-topper::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:overlay}
.dpl--attract .dpl-topper::after{animation:dpl-glint 2.8s ease-in-out infinite}
@keyframes dpl-glint{0%{left:-60%}55%,100%{left:120%}}

/* LED jackpot meters */
.dpl-jpbar{display:grid;grid-template-columns:1.25fr 1.1fr 1fr 1fr;gap:5px;margin-bottom:6px}
.dpl-jpbox{border-radius:8px;padding:3px 4px 4px;text-align:center;background:#0b0102;border:2px solid var(--c,#c9a24a);
  box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 6px var(--c,#c9a24a);min-width:0}
.dpl-jpbox span{display:block;font:800 .58rem/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;color:var(--c)}
.dpl-jpbox b{display:block;font:700 .82rem/1.25 'JetBrains Mono',ui-monospace,monospace;color:#ffe9a3;white-space:nowrap;overflow:hidden;text-overflow:clip;
  text-shadow:0 0 4px #ffb300,0 0 9px rgba(255,140,0,.75);letter-spacing:.02em}
.dpl-jpbox--grand{--c:#ff4b4b}.dpl-jpbox--major{--c:#d48bff}.dpl-jpbox--minor{--c:#55b8ff}.dpl-jpbox--mini{--c:#5fe08a}
.dpl-jpbox--grand b{font-size:.9rem}
.dpl-jpbox--hit{animation:dpl-jpflash .25s steps(2) infinite}
@keyframes dpl-jpflash{50%{background:var(--c);}}
.dpl-jpbox--hit b,.dpl-jpbox--hit span{color:#fff}
.dpl--attract .dpl-jpbox{animation:dpl-jpglow 2.4s ease-in-out infinite}
.dpl--attract .dpl-jpbox--major{animation-delay:.3s}.dpl--attract .dpl-jpbox--minor{animation-delay:.6s}.dpl--attract .dpl-jpbox--mini{animation-delay:.9s}
@keyframes dpl-jpglow{50%{box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 16px 3px var(--c)}}

/* stage + reels */
.dpl-stage{position:relative;border-radius:12px;padding:var(--pad);overflow:hidden;cursor:pointer;
  background:#2b0304 url("./assets/bg.webp") center/cover no-repeat;
  box-shadow:inset 0 0 0 2px #d9a845,inset 0 0 22px rgba(0,0,0,.85)}
.dpl-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;z-index:5;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 16%,transparent 84%,rgba(0,0,0,.35))}
.dpl-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;border-radius:8px;
  background:linear-gradient(90deg,#1a0202,#3a0a06 50%,#1a0202);box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.dpl-reel{position:relative;aspect-ratio:1/3;overflow:hidden;border-radius:7px;
  background:linear-gradient(90deg,rgba(8,0,0,.86),rgba(48,4,4,.72) 50%,rgba(8,0,0,.86));
  box-shadow:inset 0 0 0 1px rgba(246,196,83,.45),inset 0 10px 14px -8px rgba(0,0,0,.9),inset 0 -10px 14px -8px rgba(0,0,0,.9);transition:box-shadow .2s}
.dpl-strip{display:flex;flex-direction:column;will-change:transform}
.dpl-reel--blur .dpl-strip{filter:url(#dpl-vblur) brightness(1.08)}
.dpl-reel--stop{box-shadow:inset 0 0 0 1px rgba(255,236,170,.9),inset 0 0 14px rgba(255,200,90,.35)}
.dpl-reel--tease{box-shadow:inset 0 0 0 2px #fff3b0,0 0 14px 4px #ffcc33;animation:dpl-tease .35s ease-in-out infinite alternate}
@keyframes dpl-tease{to{box-shadow:inset 0 0 0 2px #fff,0 0 22px 8px #ff9d00}}

/* symbols: painted tiles share one gold-rimmed lacquer frame so every edge matches */
.dpl-sym{position:relative;width:100%;aspect-ratio:1/1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  transition:opacity .25s,filter .25s}
.dpl-sym img{position:relative;width:90%;height:90%;object-fit:cover;border-radius:10px}
.dpl-sym--hi::before{content:"";position:absolute;inset:5%;border-radius:12px;
  background:radial-gradient(circle at 50% 38%,#7a1410 0%,#3a0405 62%,#1c0102 100%);
  box-shadow:0 0 0 1.5px #e3b453,0 0 0 3px #4a1500,0 3px 7px rgba(0,0,0,.65)}
.dpl-sym--hi img{width:86%;height:86%;border-radius:9px;
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,rgba(0,0,0,.35) 90%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,rgba(0,0,0,.35) 90%,transparent 100%)}
.dpl-sym--hi::after{content:"";position:absolute;inset:5% 5% 55%;border-radius:12px 12px 40% 40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent)}
.dpl-sym--DR::before{box-shadow:0 0 0 1.5px #ffe08a,0 0 0 3px #6b3000,0 0 10px rgba(255,190,60,.55),0 3px 7px rgba(0,0,0,.65)}
.dpl-sym--SC::before{background:radial-gradient(circle at 50% 38%,#8a1a10,#3a0405 62%,#1c0102);box-shadow:0 0 0 1.5px #ff8a5a,0 0 0 3px #4a0a00,0 3px 7px rgba(0,0,0,.65)}
.dpl-sym--PL img{border-radius:50%;width:86%;height:86%;object-fit:cover;box-shadow:0 0 10px 2px rgba(150,240,255,.55);
  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
.dpl-low{position:relative;font:900 clamp(1.5rem,9vw,2.6rem)/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(50,12,0,.55);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.7))}
.dpl-sym--A .dpl-low,.dpl-sym--K .dpl-low{background-image:linear-gradient(180deg,#fffbe6,#ffd24a 42%,#a8650a 58%,#ffe28a 80%,#c98a1d)}
.dpl-sym--Q .dpl-low,.dpl-sym--J .dpl-low{background-image:linear-gradient(180deg,#f0fff6,#5fe0a0 42%,#0f6b40 60%,#9df5c9 82%,#2c9a64)}
.dpl-sym--T .dpl-low,.dpl-sym--N .dpl-low{background-image:linear-gradient(180deg,#fff0f0,#ff7a7a 42%,#951212 60%,#ffb3b3 82%,#c43c3c)}
.dpl-sym--T .dpl-low{letter-spacing:-.08em;font-size:clamp(1.3rem,7.6vw,2.2rem)}
.dpl-low--mini{font-size:1.4rem;display:inline-block;width:40px;text-align:center;background-image:linear-gradient(180deg,#fff6cf,#ffcc40 45%,#b5730e 60%,#ffe28a)}
.dpl-tag{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:1;font:900 .58rem/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em;
  padding:2px 6px;border-radius:4px;color:#3b1600;background:linear-gradient(180deg,#fff2b0,#f0b429 55%,#b97a0c);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.dpl-tag--sc{background:linear-gradient(180deg,#ffe0e0,#e8413b 55%,#8e0f0b);color:#fff}
.dpl-pv{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);text-align:center;z-index:1;
  font:900 clamp(.72rem,3.6vw,1.02rem)/1 'Plus Jakarta Sans',sans-serif;color:#fff;
  text-shadow:0 0 3px #000,0 1px 0 #000,0 0 8px rgba(0,30,60,.9);letter-spacing:-.01em;pointer-events:none}
.dpl-pv--mini{color:#7dff9f}.dpl-pv--minor{color:#8fd0ff}.dpl-pv--major{color:#f0a8ff}
.dpl-pv--mini,.dpl-pv--minor,.dpl-pv--major{font-size:clamp(.62rem,3.1vw,.9rem);letter-spacing:.04em}
#dpl-lines{position:absolute;inset:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));pointer-events:none;z-index:3;overflow:visible}
#dpl-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* message + meters + deck */
.dpl-msg{min-height:2.5em;margin:6px 2px 4px;text-align:center;font:600 .82rem/1.25 'Plus Jakarta Sans',sans-serif;color:#ffe7b0;
  display:flex;align-items:center;justify-content:center}
.dpl-msg--good{color:#9dffb8}.dpl-msg--bad{color:#ffb4a8}
.dpl-meters{display:grid;grid-template-columns:1.25fr 1fr 1.15fr;gap:6px}
.dpl-meter{background:#0b0102;border-radius:8px;padding:4px 6px;text-align:center;border:1px solid #6b4a14;box-shadow:inset 0 0 8px #000}
.dpl-meter span{display:block;font:800 .58rem/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;color:#d8b25a}
.dpl-meter b{display:block;font:700 1.02rem/1.3 'JetBrains Mono',ui-monospace,monospace;color:#ffd75e;text-shadow:0 0 6px rgba(255,170,0,.7);
  white-space:nowrap;overflow:hidden}
.dpl-bump{animation:dpl-bump .35s ease-out}
@keyframes dpl-bump{40%{transform:scale(1.18);color:#fff}}
.dpl-deck{display:grid;grid-template-columns:48px 48px 48px 1fr;gap:8px;margin-top:10px;align-items:center}
.dpl-deck--main{grid-template-columns:1fr auto 1fr;gap:12px}
.dpl-key{min-height:48px;min-width:44px;border-radius:12px;border:0;cursor:pointer;touch-action:manipulation;position:relative;
  font:800 .8rem/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;color:#3b1600;
  background:linear-gradient(180deg,#fff0b8 0%,#f2bf45 45%,#c1840f 55%,#f7d26a 100%);
  box-shadow:0 4px 0 #6e4304,0 6px 10px rgba(0,0,0,.45),inset 0 1px 0 #fff8d8;transition:transform .06s,box-shadow .06s,filter .15s}
@media (hover:hover){.dpl-key:hover:not(:disabled){filter:brightness(1.08)}}
.dpl-key:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #6e4304,0 2px 4px rgba(0,0,0,.5),inset 0 2px 4px rgba(0,0,0,.25);filter:brightness(.95)}
.dpl-key:disabled{filter:grayscale(.7) brightness(.7);cursor:default}
#dpl-betdn,#dpl-betup{font-size:1.5rem}
.dpl-key--info{font:italic 900 1.3rem/1 Georgia,serif;border-radius:50%;width:48px}
.dpl-key--auto,.dpl-key--turbo{color:#eaf6ff;background:linear-gradient(180deg,#5a6b8c,#28324a 55%,#1b2236);box-shadow:0 4px 0 #0b0f1a,0 6px 10px rgba(0,0,0,.45),inset 0 1px 0 #9fb3d8}
.dpl-key--auto:active:not(:disabled),.dpl-key--turbo:active:not(:disabled){box-shadow:0 1px 0 #0b0f1a,inset 0 2px 4px rgba(0,0,0,.4)}
.dpl-key--auto b{font:inherit}
.dpl-key.is-on{color:#062b10;background:linear-gradient(180deg,#d9ffe4,#3fd06e 50%,#13863a);box-shadow:0 4px 0 #064d1d,0 0 14px rgba(70,255,130,.6)}
.dpl-spin{width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;touch-action:manipulation;position:relative;
  background:radial-gradient(circle at 50% 35%,#ff9d8a 0%,#e42a1c 38%,#8a0b05 75%,#4a0300 100%);
  box-shadow:0 0 0 4px #f2c14e,0 0 0 7px #6b3a05,0 6px 0 7px #3a1f02,0 10px 20px rgba(0,0,0,.6),inset 0 4px 10px rgba(255,255,255,.45);
  transition:transform .07s,box-shadow .07s}
.dpl-spin span{position:relative;z-index:1;font:900 1.15rem/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;color:#fff;text-shadow:0 2px 0 #5a0000}
.dpl-spin::before{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 70%,#fff6c8 85%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 61%);mask:radial-gradient(circle,transparent 58%,#000 61%)}
.dpl-spin.is-busy::before{opacity:1;animation:dpl-ring .9s linear infinite}
@keyframes dpl-ring{to{transform:rotate(360deg)}}
.dpl-spin:active{transform:translateY(4px);box-shadow:0 0 0 4px #f2c14e,0 0 0 7px #6b3a05,0 2px 0 7px #3a1f02,0 4px 10px rgba(0,0,0,.6),inset 0 6px 14px rgba(0,0,0,.35)}
.dpl-spin.is-busy{background:radial-gradient(circle at 50% 35%,#ffd3a0 0%,#ff8a1c 38%,#9a4a05 75%,#4a2000 100%)}
.dpl--attract .dpl-spin:not(.is-busy){animation:dpl-spinpulse 1.4s ease-in-out infinite}
@keyframes dpl-spinpulse{50%{box-shadow:0 0 0 4px #fff0a8,0 0 0 7px #6b3a05,0 6px 0 7px #3a1f02,0 0 26px 8px rgba(255,120,60,.7),inset 0 4px 10px rgba(255,255,255,.45)}}
.dpl-wallet{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dpl-wallet:not(:has(:not([hidden]))){display:none}
.dpl-wallet .btn{background:linear-gradient(180deg,#22a35a,#0f6b37);min-height:44px}
.dpl-keys{text-align:center;font-size:.72rem;color:#c9a46a;margin-top:8px}
.dpl-key:focus-visible,.dpl-spin:focus-visible,.dpl-wallet .btn:focus-visible{outline:3px solid #7fd8ff;outline-offset:3px}

/* desktop: a landscape cabinet, not a stretched phone: big reels on the left,
   the meters and the button deck in a side console on the right */
@media (min-width:1000px){
  html body .game-wrap,html body[data-pip-frame] .game-wrap{max-width:960px}
  .dpl{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:16px;padding:20px 18px 14px;border-radius:24px;
    grid-template-areas:"top top" "jp jp" "hoard hoard" "stage meters" "stage deck" "stage main" "stage wallet" "msg keys";
    grid-template-rows:auto auto auto auto auto auto 1fr auto}
  .dpl-topper{grid-area:top}.dpl-jpbar{grid-area:jp}.dpl-hoard{grid-area:hoard}.dpl-stage{grid-area:stage;align-self:start}
  .dpl-msg{grid-area:msg;min-height:2em}.dpl-meters{grid-area:meters;grid-template-columns:1fr;align-self:end}
  .dpl-deck{grid-area:deck;margin-top:12px}.dpl-deck--main{grid-area:main}.dpl-wallet{grid-area:wallet;align-self:start}
  .dpl-keys{grid-area:keys;align-self:center;margin:0}
  .dpl-meter{display:flex;align-items:baseline;justify-content:space-between;padding:6px 10px}
  .dpl-meter b{font-size:1.25rem}
  .dpl-deck--main{margin-top:14px}
  .dpl-logo{font-size:1.9rem}
  .dpl-jpbox b{font-size:1.1rem}.dpl-jpbox--grand b{font-size:1.2rem}.dpl-jpbox span{font-size:.66rem}
  .dpl-stage{--pad:12px}
  .dpl-low{font-size:3.4rem}.dpl-sym--T .dpl-low{font-size:2.9rem}
  .dpl-pv{font-size:1.3rem}.dpl-pv--mini,.dpl-pv--minor,.dpl-pv--major{font-size:1.05rem}
  .dpl-tag{font-size:.7rem}
  .dpl-spin{width:100px;height:100px}
}