/* Dice / Diamonds / Hilo: particle overlay and result history */
/* ---------- Shared: particle overlay + result history pills (Dice, Diamonds, Hilo) ---------- */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.ng-history{position:absolute;top:14px;right:14px;left:14px;display:flex;justify-content:flex-end;gap:6px;overflow:hidden;z-index:2}
.ng-history span{flex:none;padding:7px 10px;border-radius:99px;font-weight:800;font-size:12px;background:var(--tile);color:var(--muted);font-variant-numeric:tabular-nums;animation:ngPill .35s cubic-bezier(.34,1.56,.64,1)}
.ng-history span.win{background:var(--green);color:#05080a;box-shadow:0 0 12px rgba(0,231,1,.45)}
@keyframes ngPill{from{transform:translateX(24px) scale(.6);opacity:0}}
.ng-stage{flex-direction:column;gap:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#16334a 0%,var(--bg-dark) 65%)}
.ng-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 50% 50%,var(--flash,rgba(0,231,1,.28)),transparent 65%);z-index:0}
.ng-stage.flash::before{opacity:1;transition:opacity .05s}
.ng-stage > *{position:relative;z-index:1}
.ng-stage > .fx-canvas{position:absolute;z-index:6}
.ng-stage > .ng-history{position:absolute}
.ng-profit{display:flex;justify-content:space-between;align-items:center;background:var(--bg-dark);border-radius:4px;padding:10px 12px;font-weight:700;font-variant-numeric:tabular-nums}
.ng-profit small{color:var(--muted);font-weight:600}