/* DICE rebuild: all rules are prefixed .dz- so the legacy .dice-* rules in games.css never apply */
#v-dice .dz-ctrl .betbox{margin:0}
#v-dice .dz-mode button .ic{width:16px;height:16px}
#v-dice .dz-roll{margin-top:16px;font-size:16px}
#v-dice .dz-roll.rolling{opacity:.85;cursor:progress}
.dz-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dz-sum > div{background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;min-width:0}
.dz-sum small{display:block;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.dz-sum b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-sum b.w{color:var(--win)}

/* ---------- stage ---------- */
.dz-stage{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px, 2.6vh, 26px);padding:58px clamp(20px, 4vw, 56px) 26px;
  background:radial-gradient(ellipse 70% 55% at 50% 30%, #1b3666 0%, #0f2147 55%, #0a1631 100%);}
/* faint donut watermark behind the number */
.dz-stage::before{content:"";position:absolute;left:50%;top:30%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, transparent 0 22%, #ffffff07 22.5% 49%, transparent 49.5%);}
.dz-stage.won{box-shadow:inset 0 0 0 2px #2fe08f55}
.dz-stage.lost{box-shadow:inset 0 0 0 2px #ff547044}

.dz-recent{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;gap:10px;height:30px;z-index:4;pointer-events:none}
.dz-recent-l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);flex:none}
.dz-chips{display:flex;gap:6px;overflow:hidden;flex:1;min-width:0;justify-content:flex-start;height:28px}
.dz-chips .chip{flex:none;font-size:13px;padding:4px 10px;line-height:18px;background:#0a1730;border:1px solid #ffffff12}
.dz-chips .chip:first-child{border-color:currentColor}
.dz-chips:empty::after{content:"No rolls yet";font-size:13px;color:var(--dim);line-height:28px}

.dz-hero{text-align:center;display:flex;flex-direction:column;align-items:center}
.dz-num{font-size:clamp(64px, 12vh, 124px);font-weight:800;letter-spacing:-.03em;line-height:1.04;color:#fff;font-variant-numeric:tabular-nums;
  transition:color .18s, opacity .18s;text-shadow:0 6px 28px #0008}
.dz-num.idle{color:#ffffff2e}
.dz-num.rolling{opacity:.35}
.dz-num.w{color:var(--win);text-shadow:0 0 36px #2fe08f40}
.dz-num.l{color:var(--lose);text-shadow:0 0 36px #ff547038}
.dz-num.land{animation:dz-land .22s cubic-bezier(.2,.9,.3,1.3)}
@keyframes dz-land{from{transform:scale(.94)}to{transform:scale(1)}}
.dz-out{height:46px;position:relative;width:100%;margin-top:6px}
.dz-out .outcome{bottom:auto;top:0}

/* ---------- scale ---------- */
.dz-scale{position:relative;background:#081430d9;border:1px solid #ffffff10;border-radius:16px;padding:58px 34px 14px;box-shadow:inset 0 1px 0 #ffffff08}
.dz-track{position:relative;height:16px;border-radius:99px;background:#1a2c4f;touch-action:none;cursor:pointer}
.dz-zone{position:absolute;top:0;bottom:0;transition:left .12s, width .12s}
.dz-zone.l{background:linear-gradient(#ff6f86,#e8445f)}
.dz-zone.w{background:linear-gradient(#4ff0a4,#22c97d)}
.dz-bar{position:absolute;inset:0;border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 3px #0004}
.dz-ticks i{position:absolute;top:22px;width:2px;height:6px;margin-left:-1px;background:#ffffff30;border-radius:1px}
.dz-labels{position:relative;height:18px;margin-top:16px;font-size:13px;font-weight:700;color:var(--muted)}
.dz-labels span{position:absolute;transform:translateX(-50%)}

.dz-thumb{position:absolute;top:50%;width:30px;height:40px;margin:-20px 0 0 -15px;border-radius:9px;z-index:2;cursor:grab;
  background:linear-gradient(#ffffff,#d9e3f5);box-shadow:0 4px 12px #0009, inset 0 -3px 0 #b9c6de;display:flex;align-items:center;justify-content:center;gap:3px;
  transition:left .12s, transform .12s, box-shadow .12s;outline:none}
.dz-thumb span{width:3px;height:16px;border-radius:2px;background:#7b8db0}
.dz-thumb:hover,.dz-thumb.drag{transform:scale(1.06)}
.dz-thumb.drag{cursor:grabbing;transition:transform .12s}
.dz-thumb:focus-visible{box-shadow:0 4px 12px #0009, inset 0 -3px 0 #b9c6de, 0 0 0 3px var(--accent)}
.dz-thumb.off{cursor:not-allowed}
.dz-stage.busy .dz-track{cursor:default}

/* result marker: the tip sits exactly on the value; the bubble is clamped inside the scale card */
.dz-marker{--x:50;position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;transition:opacity .15s}
.dz-marker.on{opacity:1}
.dz-tip,.dz-bub{transition:left .3s cubic-bezier(.25,.8,.3,1)}
.dz-tip{position:absolute;left:calc(var(--x) * 1%);top:-14px;width:0;height:0;margin-left:-8px;border:8px solid transparent;border-top-color:#eaf1ff;border-bottom:0}
.dz-tip::after{content:"";position:absolute;left:-1px;top:6px;width:2px;height:24px;background:#ffffffcc;border-radius:1px}
.dz-bub{position:absolute;top:-52px;width:104px;height:38px;left:clamp(-26px, calc(var(--x) * 1% - 52px), calc(100% + 26px - 104px));
  display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:#eaf1ff;color:#0b1a36;font-size:18px;font-weight:800;box-shadow:0 8px 18px -6px #000c}
.dz-dn{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle,transparent 0 30%,#e9a85c 32% 60%,#f2c48a 62%);box-shadow:inset 0 0 0 1px #0002}
.dz-marker.w .dz-bub{background:var(--win);color:#03261a}.dz-marker.w .dz-tip{border-top-color:var(--win)}
.dz-marker.l .dz-bub{background:var(--lose);color:#2b0710}.dz-marker.l .dz-tip{border-top-color:var(--lose)}
.dz-marker.w .dz-dn,.dz-marker.l .dz-dn{background:radial-gradient(circle,transparent 0 30%,#fff9 32% 60%,#fffc 62%)}

/* ---------- the three synchronised fields ---------- */
.dz-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dz-f{display:block;min-width:0}
.dz-f small{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 6px 2px}
.dz-in{display:flex;align-items:center;min-height:48px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 6px 0 12px;transition:border-color .15s, box-shadow .15s}
.dz-in:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.dz-in.bad{border-color:var(--lose)}
.dz-in input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:inherit;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;padding:12px 0}
.dz-in input:disabled{opacity:.6;cursor:not-allowed}
.dz-in em{font-style:normal;color:var(--muted);font-weight:700;padding:0 6px}
.dz-swap{flex:none;width:36px;height:36px;border:0;border-radius:6px;background:var(--control);color:var(--text);display:grid;place-items:center;cursor:pointer}
.dz-swap:hover:not(:disabled){background:var(--control-hi)}
.dz-swap:disabled{opacity:.5;cursor:not-allowed}
.dz-swap .ic{width:18px;height:18px}

@media (max-width:900px){
  .dz-stage{padding:48px 14px 14px;gap:10px;justify-content:space-between}
  .dz-num{font-size:52px}
  .dz-out{height:42px;margin-top:2px}
  .dz-out .outcome{font-size:15px;padding:8px 14px 8px 10px;gap:8px}
  .dz-out .outcome .det{font-size:12.5px}
  .dz-scale{padding:52px 22px 10px}
  .dz-labels{margin-top:12px}
  .dz-bub{left:clamp(-16px, calc(var(--x) * 1% - 52px), calc(100% + 16px - 104px))}
  .dz-fields{gap:8px}
  .dz-f small{font-size:12px;margin-bottom:4px}
  .dz-in{min-height:42px;padding:0 4px 0 8px}
  .dz-in input{font-size:15px;padding:9px 0}
  .dz-in em{padding:0 2px}
  .dz-swap{width:30px;height:30px}
  .dz-stage::before{width:300px;height:300px;margin:-150px 0 0 -150px}
}
@media (max-width:420px){ .dz-out .outcome .det{display:none} }
@media (prefers-reduced-motion: reduce){ .dz-tip,.dz-bub,.dz-zone,.dz-thumb{transition:none} .dz-num.land{animation:none} }