/* Diamonds */
/* ---------- Diamonds ---------- */
/* Stake layout: pay table rows on the top left, profit / chance next to the lit row, gems on plates below */
.dm-stage{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:12px;background:var(--bg)}
.dm-top{display:flex;gap:14px;align-items:flex-start;min-height:0}
.dm-pays{display:flex;flex-direction:column;gap:4px;width:290px;flex:none}
.dm-pay{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-radius:4px;padding:6px 12px 6px 14px;transition:background .15s}
.dm-pay .icons{display:flex;gap:9px}
.dm-pay .icons svg{width:15px;height:15px;display:block;transition:fill .2s,stroke .2s}
.dm-pay .icons .a{fill:#557086}
.dm-pay .icons .b{fill:none;stroke:#557086;stroke-width:2.2}
.dm-pay .icons .n{fill:#0f212e}
.dm-pay b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.dm-pay:hover,.dm-pay.hit{background:var(--tile)}
.dm-pay.hit .icons .a{fill:var(--gc)}
.dm-pay.hit .icons .b{stroke:var(--gc2)}
.dm-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;max-width:430px;visibility:hidden}
.dm-info.show{visibility:visible}
.dm-info .field{min-width:0}
.dm-info .inp{background:var(--bg-dark);min-width:0}
.dm-info .inp input{pointer-events:none}
.dm-board{flex:1;min-height:250px;background:var(--bg-dark);border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding:24px 16px 28px}
.dm-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.6vw,16px);width:100%;max-width:740px}
.dm-slot{display:flex;flex-direction:column;align-items:center}
.dm-gemwrap{width:74%;aspect-ratio:1;position:relative;z-index:1;margin-bottom:-13%}
.dm-gem{position:absolute;inset:0;animation:dmDrop .2s cubic-bezier(.5,0,.75,0) backwards}
.dm-gem svg{width:100%;height:100%;display:block}
.dm-gem.out{animation:dmOut .14s ease-in forwards}
.dm-slot.match .dm-gem{animation:dmHop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes dmDrop{from{transform:translateY(-140%);opacity:0}30%{opacity:1}}
@keyframes dmOut{to{transform:scale(.4);opacity:0}}
@keyframes dmHop{40%{transform:translateY(-9%) scale(1.07)}}
.dm-gem svg{filter:drop-shadow(0 5px 6px rgba(0,0,0,.35)) drop-shadow(0 0 10px color-mix(in srgb,var(--gr,#fff) 30%,transparent))}
/* light "pings": two sparkles that twinkle at different times, and a reflection sweeping across the gem */
.dm-gem .glint{position:absolute;width:20%;aspect-ratio:1;top:10%;right:16%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 13%,rgba(255,255,255,.5) 18%,transparent 30%),linear-gradient(90deg,transparent 46%,#fff 49% 51%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 49% 51%,transparent 54%);
  filter:drop-shadow(0 0 3px #fff);opacity:0;animation:dmGlint 2.6s ease-in-out infinite;animation-delay:var(--gd,0s)}
.dm-gem .glint.b{width:13%;top:auto;right:auto;bottom:24%;left:22%;animation-duration:3.4s;animation-delay:calc(var(--gd,0s) + 1.2s)}
@keyframes dmGlint{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:0;transform:scale(.4) rotate(90deg)}}
.dm-sweep{animation:dmSweep 3.8s ease-in-out infinite;animation-delay:var(--gd,0s)}
@keyframes dmSweep{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(190px)}}
.dm-plate{width:100%;height:clamp(30px,4.6vw,46px);background:#2f4553;border-radius:2px;position:relative;box-shadow:inset 0 -5px 0 #283d4a;transition:background .22s,box-shadow .22s}
/* shadow under the gem, tinted by its colour like a reflection on the plate */
.dm-plate::before{content:"";position:absolute;left:18%;right:18%;top:6%;height:50%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--gr,#0f212e) 45%,#0f212e) 0%,rgba(15,33,46,.6) 55%,transparent 72%)}
.dm-slot.match .dm-plate{background:var(--gp);box-shadow:inset 0 -5px 0 var(--gc)}
.dm-slot.match .dm-plate::before{background:radial-gradient(ellipse,rgba(255,255,255,.28) 0%,rgba(0,0,0,.18) 55%,transparent 72%)}
@keyframes dcPop2{from{transform:scale(.4);opacity:0}}