/* Dice */
/* ---------- Dice ---------- */
.dc-wrap{width:100%;max-width:720px;display:flex;flex-direction:column;gap:34px;padding-top:40px}
.dc-slider{position:relative;background:var(--tile);border-radius:99px;padding:22px 30px;box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.06)}
.dc-scale{position:absolute;left:30px;right:30px;top:-30px;height:24px}
.dc-scale span{position:absolute;transform:translateX(-50%);font-weight:800;font-size:14px;color:var(--text)}
.dc-scale span::after{content:"";position:absolute;left:50%;top:22px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--tile)}
.dc-track{position:relative;height:10px;border-radius:99px;background:var(--red);cursor:pointer;touch-action:none}
.dc-track .lose,.dc-track .win{position:absolute;top:0;bottom:0;border-radius:99px}
.dc-track .lose{background:linear-gradient(90deg,#ff2d55,#ed4163);box-shadow:0 0 14px rgba(237,65,99,.55)}
.dc-track .win{background:linear-gradient(90deg,#00c801,#1fff20,#00e701);background-size:200% 100%;animation:dcShine 2.4s linear infinite;box-shadow:0 0 16px rgba(0,231,1,.6)}
@keyframes dcShine{to{background-position:-200% 0}}
.dc-handle{position:absolute;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:6px;background:linear-gradient(#2b8bff,#1475e1);box-shadow:0 4px 0 #0b4f9e,0 0 18px rgba(20,117,225,.55);cursor:grab;display:flex;align-items:center;justify-content:center;gap:4px;touch-action:none;transition:transform .12s}
.dc-handle i{width:3px;height:14px;border-radius:2px;background:rgba(255,255,255,.75)}
.dc-handle:active{cursor:grabbing;transform:scale(1.08)}
.dc-slider.locked .dc-handle,.dc-slider.locked .dc-track{pointer-events:none}
.dc-marker{position:absolute;bottom:calc(100% + 14px);left:0;width:0;height:0;transition:left .32s cubic-bezier(.2,.9,.3,1.15);pointer-events:none;z-index:3}
.dc-marker b{position:absolute;left:0;bottom:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:74px;height:62px;font-size:20px;font-weight:900;color:#1a2c38;font-variant-numeric:tabular-nums;
  background:#fff;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.dc-marker.win b{color:#00b800}
.dc-marker.lose b{color:#e11d48}
.dc-marker.pop b{animation:dcPop .45s cubic-bezier(.34,1.56,.64,1)}
.dc-marker::after{content:"";position:absolute;left:0;top:0;transform:translate(-50%,2px);border:8px solid transparent;border-top-color:#fff}
.dc-marker.hide{opacity:0}
@keyframes dcPop{0%{transform:translateX(-50%) scale(.5) rotate(-20deg)}60%{transform:translateX(-50%) scale(1.18) rotate(4deg)}100%{transform:translateX(-50%) scale(1)}}
.dc-marker.win::before{content:"";position:absolute;left:0;bottom:31px;width:110px;height:110px;margin-left:-55px;margin-bottom:-55px;border-radius:50%;background:radial-gradient(circle,rgba(0,231,1,.55),transparent 70%);animation:dcRing .6s ease-out forwards}
@keyframes dcRing{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.dc-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:var(--tile);border-radius:8px;padding:12px 14px 14px}
.dc-fields .field{min-width:0}
.dc-fields .field .inp{background:var(--bg-dark);min-width:0}
.dc-fields .toggle{cursor:pointer}
.dc-fields .toggle svg{width:16px;height:16px;color:var(--muted);transition:transform .3s}
.dc-fields .toggle:hover svg{color:var(--text)}
.dc-fields .toggle.flip svg{transform:rotate(180deg)}
.dc-big{font-size:clamp(46px,9vw,84px);font-weight:900;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1;color:var(--muted);text-shadow:0 0 30px rgba(255,255,255,.08);transition:color .2s}
.dc-big.win{color:var(--green);text-shadow:0 0 34px rgba(0,231,1,.6)}
.dc-big.lose{color:#ff4d6d;text-shadow:0 0 26px rgba(237,65,99,.45)}
.dc-big.roll{animation:dcShake .3s}
@keyframes dcShake{25%{transform:translateY(-4px) scale(1.04)}75%{transform:translateY(2px)}}