/* V17 ====================================================================
   EQUIPPED DICE SKINS — one visual language for cinematic, reroll and inventory.
   No data-dice-skin attribute means the original classic dice remain untouched.
   ======================================================================== */
.dice-cinematic[data-dice-skin] .die-face,
.np-reroll-choice[data-dice-skin] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin] .np-inventory-die{
  transition:border-color .18s,box-shadow .18s,filter .18s;
}
.dice-cinematic[data-dice-skin] .cinematic-die-shadow{background:color-mix(in srgb,var(--np-dice-accent,#000) 45%,#000 55%);filter:blur(11px)}
.dice-cinematic[data-dice-skin] .die-face{border-color:color-mix(in srgb,var(--np-dice-accent,#b78a52) 72%,#e9d3a3 28%)}
.dice-cinematic[data-dice-skin] .die-face i{border:1px solid #0006}

/* stone */
[data-dice-skin="dice_stone"] .die-face,
.np-reroll-choice[data-dice-skin="dice_stone"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_stone"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_stone"] .np-inventory-die{
  color:#e2dacb;background:radial-gradient(circle at 27% 21%,#b8b1a7 0 7%,transparent 8%),radial-gradient(circle at 78% 68%,#5f5a55 0 5%,transparent 6%),linear-gradient(138deg,#9b958c,#55524e 58%,#353330);box-shadow:inset 0 0 12px #fff2,inset -8px -10px 14px #171615aa,0 0 13px #8c817255!important
}
[data-dice-skin="dice_stone"] .die-face i{color:#ded7ca;background:radial-gradient(circle at 35% 30%,#35322f,#111 78%)}

/* bone */
[data-dice-skin="dice_bone"] .die-face,
.np-reroll-choice[data-dice-skin="dice_bone"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_bone"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_bone"] .np-inventory-die{
  color:#32261b;background:linear-gradient(26deg,transparent 46%,#725d424d 47% 49%,transparent 50%),linear-gradient(118deg,transparent 58%,#80694a4f 59% 61%,transparent 62%),radial-gradient(circle at 30% 20%,#fff6d6,#d9c49a 60%,#9f8867);box-shadow:inset 0 0 15px #fff9,inset -8px -9px 14px #765d3a66,0 0 14px #d8c59a55!important
}
[data-dice-skin="dice_bone"] .die-face i{color:#ead9b3;background:radial-gradient(circle,#60482f,#24190f 76%)}

/* obsidian */
[data-dice-skin="dice_obsidian"] .die-face,
.np-reroll-choice[data-dice-skin="dice_obsidian"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_obsidian"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_obsidian"] .np-inventory-die{
  color:#f2d6ff;background:linear-gradient(145deg,#44314f22,#040306 48%,#15081c),radial-gradient(circle at 30% 18%,#61336d,#08060b 62%);border-color:#9d54ca!important;box-shadow:inset 0 0 18px #b15ad833,inset -8px -8px 14px #000,0 0 19px #8b45c78c!important
}
[data-dice-skin="dice_obsidian"] .die-face i{color:#f2d7ff;background:radial-gradient(circle,#9a4bb7,#1a071f 72%);box-shadow:0 0 8px #bb59ec,inset 0 0 4px #fff6}

/* gold */
[data-dice-skin="dice_gold"] .die-face,
.np-reroll-choice[data-dice-skin="dice_gold"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_gold"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_gold"] .np-inventory-die{
  color:#3c2607;background:linear-gradient(125deg,#fff1a6 0,#c79523 22%,#f3cc58 47%,#8d5f12 74%,#f0c85e 100%);border-color:#ffda69!important;box-shadow:inset 0 0 15px #fff9,inset -8px -8px 13px #6c430d88,0 0 20px #e2b84e99!important
}
[data-dice-skin="dice_gold"] .die-face i{color:#ffe58e;background:radial-gradient(circle,#6e430d,#211306 77%);box-shadow:0 0 7px #ffdd72}

/* fire */
[data-dice-skin="dice_fire"] .die-face,
.np-reroll-choice[data-dice-skin="dice_fire"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_fire"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_fire"] .np-inventory-die{
  color:#ffe1b0;background:radial-gradient(circle at 22% 22%,#ffb026 0 5%,transparent 17%),radial-gradient(circle at 72% 72%,#e94816 0 9%,transparent 24%),linear-gradient(135deg,#6d1609,#200706 55%,#b72e0d);border-color:#ef6b2d!important;box-shadow:inset 0 0 18px #ff7b1e55,inset -8px -8px 14px #180100,0 0 23px #ff5b1f9c!important
}
[data-dice-skin="dice_fire"] .die-face i{color:#fff1c1;background:radial-gradient(circle,#ff7b1f,#651202 70%);box-shadow:0 0 11px #ff741f}
.dice-cinematic[data-dice-skin="dice_fire"] .cinematic-die{filter:drop-shadow(0 0 8px #ff5a1b)}

/* ice */
[data-dice-skin="dice_ice"] .die-face,
.np-reroll-choice[data-dice-skin="dice_ice"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_ice"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_ice"] .np-inventory-die{
  color:#07314b;background:linear-gradient(40deg,transparent 48%,#ffffff8a 49% 50%,transparent 51%),linear-gradient(126deg,#f4ffff,#8bdcf4 36%,#3a9fc8 70%,#d9f9ff);border-color:#a8efff!important;box-shadow:inset 0 0 16px #fff,inset -7px -9px 13px #2e739655,0 0 22px #67c8e8a8!important
}
[data-dice-skin="dice_ice"] .die-face i{color:#e9feff;background:radial-gradient(circle,#3dabc8,#0b405d 74%);box-shadow:0 0 10px #a6f2ff}
.dice-cinematic[data-dice-skin="dice_ice"] .cinematic-die{filter:drop-shadow(0 0 8px #91e7ff)}

/* cursed */
[data-dice-skin="dice_cursed"] .die-face,
.np-reroll-choice[data-dice-skin="dice_cursed"] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin="dice_cursed"] .np-defeat-ward-die,
.cosmetic-card[data-dice-skin="dice_cursed"] .np-inventory-die{
  color:#f1cbff;background:repeating-conic-gradient(from 12deg at 50% 50%,#27102d 0 8deg,#09050d 8deg 18deg),radial-gradient(circle at 50% 50%,#52215d,#09050c 67%);border-color:#a64bb6!important;box-shadow:inset 0 0 20px #bd58d544,inset -8px -8px 13px #000,0 0 25px #8b3d9f99!important
}
[data-dice-skin="dice_cursed"] .die-face i{color:#ffd6ff;background:radial-gradient(circle,#9f45b1,#250a2d 70%);box-shadow:0 0 12px #c45bd8}
.dice-cinematic[data-dice-skin="dice_cursed"] .cinematic-die{filter:drop-shadow(0 0 9px #a04ab6)}

/* Inventory mini preview: looks like the same family, not a generic reward icon. */
.cosmetic-card[data-dice-skin] .cosmetic-preview{isolation:isolate}
.cosmetic-card[data-dice-skin] .np-inventory-die{position:relative;display:grid;width:min(112px,65%);aspect-ratio:1;place-items:center;border:2px solid var(--np-dice-accent,#9d7446);border-radius:15%;transform:rotate(-8deg);font-size:2rem;font-weight:900}
.cosmetic-card[data-dice-skin] .np-inventory-die:before{position:absolute;inset:8%;border:1px solid #fff2;border-radius:12%;content:""}
.cosmetic-card[data-dice-skin] .np-inventory-die i{display:grid;width:34%;aspect-ratio:1;place-items:center;border-radius:50%;color:inherit;background:#140c08aa;font-size:1.05rem;font-style:normal}
.cosmetic-card[data-dice-skin].equipped .np-inventory-die{transform:rotate(-8deg) scale(1.05);filter:drop-shadow(0 0 10px var(--np-dice-accent,#d6a24e))}

/* Post-roll choice uses the same player's skin. */
.np-reroll-choice[data-dice-skin] .np-reroll-die,
.np-defeat-ward-choice[data-dice-skin] .np-defeat-ward-die{border:2px solid var(--np-dice-accent,#9a7041)!important;border-radius:14%!important;text-shadow:0 1px 2px #0007}


/* ========================================================================
   PROCEDURAL DICE MATERIALS V2
   Real-looking material layers with CSS only. No PNG assets.
   ======================================================================== */
.dice-cinematic[data-dice-skin] .die-face,
.cosmetic-card[data-dice-skin] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin] .np-dice-preview-face{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-size:100% 100%,100% 100%,100% 100%!important;
}
.dice-cinematic[data-dice-skin] .die-face::before,
.cosmetic-card[data-dice-skin] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin] .np-dice-preview-face::before{
  position:absolute;inset:-18%;z-index:0;pointer-events:none;content:"";
  opacity:.62;mix-blend-mode:overlay;transform:rotate(-7deg) scale(1.12)
}
.dice-cinematic[data-dice-skin] .die-face>i,
.np-dice-preview-face>i{position:relative;z-index:2}

/* Stone: grain, pores and fractured veins. */
[data-dice-skin="dice_stone"] .die-face,
.cosmetic-card[data-dice-skin="dice_stone"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_stone"] .np-dice-preview-face{
  background:
    radial-gradient(circle at 13% 22%,#d1ccc4 0 2%,transparent 2.8%),
    radial-gradient(circle at 72% 17%,#4a4743 0 2.5%,transparent 3.5%),
    radial-gradient(circle at 38% 76%,#c1bbb1 0 1.7%,transparent 2.7%),
    repeating-radial-gradient(ellipse at 42% 38%,#0000 0 5px,#fff08 6px,#0000 7px 13px),
    linear-gradient(142deg,#aca69d,#77716a 42%,#474440 73%,#2e2c2a)!important;
}
[data-dice-skin="dice_stone"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_stone"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_stone"] .np-dice-preview-face::before{
  background:linear-gradient(67deg,transparent 43%,#24211f 44% 45%,transparent 46%),linear-gradient(152deg,transparent 54%,#ddd5c733 55%,transparent 56%);opacity:.72
}

/* Bone: ivory pores and natural hairline cracks. */
[data-dice-skin="dice_bone"] .die-face,
.cosmetic-card[data-dice-skin="dice_bone"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_bone"] .np-dice-preview-face{
  background:
    radial-gradient(ellipse at 18% 30%,#8c734f29 0 4%,transparent 5%),
    radial-gradient(ellipse at 82% 67%,#7a604025 0 5%,transparent 6%),
    repeating-linear-gradient(18deg,transparent 0 13px,#9b83582e 14px,transparent 15px 29px),
    linear-gradient(145deg,#fff7dc,#eadbb6 44%,#c7ad7c 78%,#9b805c)!important;
}
[data-dice-skin="dice_bone"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_bone"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_bone"] .np-dice-preview-face::before{
  background:linear-gradient(74deg,transparent 46%,#6f573d77 47% 48%,transparent 49%),linear-gradient(143deg,transparent 56%,#72583b55 57%,transparent 58%);opacity:.46
}

/* Obsidian: glass-black volcanic shards, razor highlights. */
[data-dice-skin="dice_obsidian"] .die-face,
.cosmetic-card[data-dice-skin="dice_obsidian"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_obsidian"] .np-dice-preview-face{
  background:
    linear-gradient(116deg,transparent 0 31%,#c67cff20 32% 33%,transparent 34% 61%,#71239c42 62% 64%,transparent 65%),
    radial-gradient(ellipse at 24% 12%,#d7a1ff4d 0 3%,#762a9a30 10%,transparent 33%),
    linear-gradient(145deg,#1e1225 0,#050408 42%,#110518 72%,#020203)!important;
  box-shadow:inset 2px 2px 9px #e4c4ff20,inset -7px -9px 17px #000,0 0 20px #7c35aa96!important
}
[data-dice-skin="dice_obsidian"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_obsidian"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_obsidian"] .np-dice-preview-face::before{
  background:linear-gradient(104deg,transparent 39%,#f0d2ff44 40%,transparent 41% 64%,#7f2fbb55 65%,transparent 66%);opacity:.8
}

/* Gold: brushed metal with a travelling specular highlight. */
[data-dice-skin="dice_gold"] .die-face,
.cosmetic-card[data-dice-skin="dice_gold"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_gold"] .np-dice-preview-face{
  background:
    repeating-linear-gradient(96deg,#fff2b100 0 3px,#fff6c12d 4px,#6f470a20 5px,#fff0 7px),
    linear-gradient(118deg,#6d4307,#d79b22 18%,#fff0a0 35%,#9b6410 55%,#f6c852 72%,#714707 100%)!important;
  box-shadow:inset 2px 2px 8px #fff9,inset -8px -9px 15px #6d420988,0 0 18px #e7b94988!important
}
[data-dice-skin="dice_gold"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_gold"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_gold"] .np-dice-preview-face::before{
  background:linear-gradient(105deg,transparent 28%,#fff8cf00 35%,#fff8cfa8 44%,#fff7c500 53%,transparent 68%);animation:npDiceGoldSheen 2.8s linear infinite;opacity:.8
}
@keyframes npDiceGoldSheen{0%{transform:translateX(-65%) rotate(-7deg) scale(1.15)}100%{transform:translateX(65%) rotate(-7deg) scale(1.15)}}

/* Fire: cooled basalt with living lava fissures. */
[data-dice-skin="dice_fire"] .die-face,
.cosmetic-card[data-dice-skin="dice_fire"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_fire"] .np-dice-preview-face{
  background:
    linear-gradient(67deg,transparent 39%,#ffca2d 40% 42%,#ff4e13 43% 46%,transparent 47%),
    linear-gradient(147deg,transparent 53%,#ff8a16 54% 56%,#6d0800 57% 60%,transparent 61%),
    radial-gradient(circle at 18% 78%,#ff7a14 0 4%,transparent 19%),
    linear-gradient(145deg,#26100a,#080504 47%,#341008)!important;
  box-shadow:inset 0 0 18px #ff4d152b,inset -8px -9px 16px #000,0 0 24px #ff511ea8!important
}
[data-dice-skin="dice_fire"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_fire"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_fire"] .np-dice-preview-face::before{
  background:radial-gradient(circle at 30% 60%,#ffe85d99 0 2%,transparent 10%),radial-gradient(circle at 68% 34%,#ff551d99 0 3%,transparent 12%);animation:npDiceLava 1.75s ease-in-out infinite alternate;opacity:.95
}
@keyframes npDiceLava{0%{filter:brightness(.9);transform:translate(-3%,-2%) rotate(-7deg) scale(1.1)}100%{filter:brightness(1.45);transform:translate(4%,3%) rotate(-3deg) scale(1.16)}}

/* Ice: translucent frost, embedded cracks and cold internal light. */
[data-dice-skin="dice_ice"] .die-face,
.cosmetic-card[data-dice-skin="dice_ice"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_ice"] .np-dice-preview-face{
  background:
    linear-gradient(63deg,transparent 39%,#fff 40%,#bff5ff 41%,transparent 42%),
    linear-gradient(137deg,transparent 58%,#eaffffcc 59%,transparent 60%),
    radial-gradient(ellipse at 26% 17%,#fff 0 4%,#d8fbff88 17%,transparent 40%),
    linear-gradient(145deg,#eaffffcc,#73d5edc9 40%,#278ab8d9 73%,#b9f3ffdb)!important;
  backdrop-filter:blur(2px);box-shadow:inset 2px 2px 12px #fff,inset -7px -9px 15px #226b8b55,0 0 23px #77dbf4b0!important
}
[data-dice-skin="dice_ice"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_ice"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_ice"] .np-dice-preview-face::before{
  background:linear-gradient(103deg,transparent 45%,#ffffffbf 46%,transparent 47%),linear-gradient(20deg,transparent 63%,#b6f6ff88 64%,transparent 65%);animation:npDiceIceShimmer 2.3s ease-in-out infinite alternate;opacity:.72
}
@keyframes npDiceIceShimmer{from{filter:brightness(.9)}to{filter:brightness(1.35)}}

/* Cursed: black-violet rune field with pulsing veins. */
[data-dice-skin="dice_cursed"] .die-face,
.cosmetic-card[data-dice-skin="dice_cursed"] .np-inventory-die,
.np-dice-preview-modal[data-dice-skin="dice_cursed"] .np-dice-preview-face{
  background:
    repeating-conic-gradient(from 14deg at 50% 50%,#120918 0 9deg,#491b542b 10deg 13deg,#08040b 14deg 25deg),
    radial-gradient(circle at 52% 46%,#5a2166,#09050c 65%)!important;
  box-shadow:inset 0 0 22px #b94ed74d,inset -9px -9px 15px #000,0 0 27px #8b3ba5a8!important
}
[data-dice-skin="dice_cursed"] .die-face::before,
.cosmetic-card[data-dice-skin="dice_cursed"] .np-inventory-die::after,
.np-dice-preview-modal[data-dice-skin="dice_cursed"] .np-dice-preview-face::before{
  background:repeating-linear-gradient(62deg,transparent 0 13%,#e667ff55 14% 15%,transparent 16% 31%);animation:npDiceCurse 1.45s ease-in-out infinite alternate;opacity:.8
}
@keyframes npDiceCurse{0%{filter:hue-rotate(-12deg) brightness(.75);transform:rotate(-9deg) scale(1.05)}100%{filter:hue-rotate(13deg) brightness(1.35);transform:rotate(-3deg) scale(1.18)}}

/* Inventory card invitation. */
.inventory-page .cosmetic-card[data-dice-skin]{cursor:pointer}
.inventory-page .cosmetic-card[data-dice-skin]:hover .np-inventory-die{transform:rotate(4deg) scale(1.08);filter:drop-shadow(0 0 12px var(--np-dice-accent,#d6a24e))}
.np-dice-preview-hint{position:absolute;right:7px;bottom:6px;z-index:4;border:1px solid #fff2;border-radius:999px;padding:3px 6px;color:#f4e0b9;background:#120b08c7;font-size:0.70rem;font-weight:900;letter-spacing:.035em;pointer-events:none}
.cosmetic-preview{position:relative}

/* ========================================================================
   LIVE 3D DICE PREVIEW MODAL
   ======================================================================== */
.np-dice-preview-backdrop{position:fixed;inset:0;z-index:2147482500;display:grid;padding:clamp(10px,3vw,28px);place-items:center;background:#040204d9;backdrop-filter:blur(9px);opacity:0;transition:opacity .2s ease}
.np-dice-preview-backdrop.is-visible{opacity:1}
.np-dice-preview-modal{position:relative;width:min(720px,96vw);overflow:hidden;border:1px solid color-mix(in srgb,var(--np-dice-accent,#bd8b4e) 76%,#fff 24%);border-radius:18px;padding:22px;color:#f5e7ca;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--np-dice-accent,#8f6338) 22%,transparent),transparent 38%),linear-gradient(145deg,#20140ff5,#080506fa 62%,#100a08f7);box-shadow:0 30px 90px #000,0 0 45px color-mix(in srgb,var(--np-dice-accent,#a27343) 28%,transparent),inset 0 0 45px #ffffff09}
.np-dice-preview-modal header{text-align:center}.np-dice-preview-modal header small{color:var(--np-dice-accent,#d2a467);letter-spacing:.18em;font-size:0.78rem;font-weight:900}.np-dice-preview-modal header h2{margin:5px 0 3px;text-transform:uppercase;letter-spacing:.065em;font-size:clamp(1.1rem,4vw,1.7rem)}.np-dice-preview-modal header p{margin:0;color:#c8b795;font-size:0.86rem}
.np-dice-preview-close{position:absolute;top:10px;right:10px;z-index:20;width:38px;height:38px;border:1px solid #ffffff21;border-radius:50%;color:#f6e7c8;background:#120b08cc;font-size:1.35rem;cursor:pointer}
.np-dice-preview-arena{position:relative;display:flex;min-height:310px;margin:18px 0 8px;align-items:center;justify-content:center;gap:clamp(60px,13vw,125px);perspective:900px}
.np-dice-preview-glow{position:absolute;left:50%;bottom:20%;width:75%;height:22%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--np-dice-accent,#a87342) 30%,transparent),transparent 68%);filter:blur(16px);transform:translateX(-50%);pointer-events:none}
.np-dice-preview-stage{position:relative;width:112px;height:112px;perspective:720px;filter:drop-shadow(0 20px 14px #000b)}
.np-dice-preview-cube{position:absolute;inset:0;transform-style:preserve-3d;transform:var(--np-dice-end,rotateX(-7deg) rotateY(9deg))}
.np-dice-preview-cube.is-rolling{animation:npDicePreviewRoll 1.08s cubic-bezier(.18,.72,.19,1) var(--np-dice-delay,0ms) both}
@keyframes npDicePreviewRoll{0%{transform:translateY(-125px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.76)}24%{transform:translateY(-42px) rotateX(230deg) rotateY(175deg) rotateZ(80deg) scale(1.04)}52%{transform:translateY(18px) rotateX(520deg) rotateY(390deg) rotateZ(190deg) scale(.98)}73%{transform:translateY(-16px) rotateX(690deg) rotateY(590deg) rotateZ(315deg)}88%{transform:translateY(3px) rotateX(795deg) rotateY(705deg) rotateZ(355deg)}100%{transform:translateY(0) var(--np-dice-end)}}
.np-dice-preview-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7%;border:2px solid color-mix(in srgb,var(--np-dice-accent,#a67743) 72%,#fff 28%);border-radius:16%;padding:14%;backface-visibility:hidden;box-shadow:inset 0 0 14px #0005}
.np-dice-preview-face.front{transform:translateZ(56px)}.np-dice-preview-face.back{transform:rotateY(180deg) translateZ(56px)}.np-dice-preview-face.right{transform:rotateY(90deg) translateZ(56px)}.np-dice-preview-face.left{transform:rotateY(-90deg) translateZ(56px)}.np-dice-preview-face.top{transform:rotateX(90deg) translateZ(56px)}.np-dice-preview-face.bottom{transform:rotateX(-90deg) translateZ(56px)}
.np-dice-preview-face>i{display:block;aspect-ratio:1;border-radius:50%;opacity:0;align-self:center;justify-self:center;width:85%}.np-dice-preview-face>i.on{opacity:1;background:#160e0be8;box-shadow:inset 0 1px 2px #fff2,0 1px 2px #0008}
.np-dice-preview-modal[data-dice-skin="dice_obsidian"] .np-dice-preview-face>i.on,.np-dice-preview-modal[data-dice-skin="dice_cursed"] .np-dice-preview-face>i.on{background:#f2d7ff;box-shadow:0 0 8px var(--np-dice-accent,#b455cf)}
.np-dice-preview-modal[data-dice-skin="dice_fire"] .np-dice-preview-face>i.on{background:#fff3c2;box-shadow:0 0 8px #ff7b1e}.np-dice-preview-modal[data-dice-skin="dice_ice"] .np-dice-preview-face>i.on{background:#f5ffff;box-shadow:0 0 8px #a9f0ff}.np-dice-preview-modal[data-dice-skin="dice_gold"] .np-dice-preview-face>i.on{background:#301d05}
.np-dice-preview-result{min-height:24px;color:#ead7b3;text-align:center;font-size:.72rem;font-weight:900;letter-spacing:.04em}
.np-dice-preview-modal footer{display:flex;margin-top:13px;justify-content:center;gap:9px}.np-dice-preview-modal footer button{min-height:43px;border:1px solid color-mix(in srgb,var(--np-dice-accent,#a97843) 70%,#fff 30%);border-radius:7px;padding:0 18px;color:#faecd0;background:linear-gradient(180deg,color-mix(in srgb,var(--np-dice-accent,#704521) 30%,#352219 70%),#160e0b);font-size:0.82rem;font-weight:900;letter-spacing:.05em;cursor:pointer}.np-dice-preview-modal footer button:hover{filter:brightness(1.16)}.np-dice-preview-modal footer .np-dice-preview-done{background:#120c0a}

@media(max-width:650px){.np-dice-preview-modal{padding:18px 12px}.np-dice-preview-arena{min-height:255px;gap:48px}.np-dice-preview-stage{width:82px;height:82px}.np-dice-preview-face.front{transform:translateZ(41px)}.np-dice-preview-face.back{transform:rotateY(180deg) translateZ(41px)}.np-dice-preview-face.right{transform:rotateY(90deg) translateZ(41px)}.np-dice-preview-face.left{transform:rotateY(-90deg) translateZ(41px)}.np-dice-preview-face.top{transform:rotateX(90deg) translateZ(41px)}.np-dice-preview-face.bottom{transform:rotateX(-90deg) translateZ(41px)}.np-dice-preview-modal footer{flex-direction:column}.np-dice-preview-modal footer button{width:100%}}
@media(prefers-reduced-motion:reduce){.np-dice-preview-cube.is-rolling,[data-dice-skin] .die-face::before{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ========================================================================
   DICE CUBE GEOMETRY FIX V3
   Keep procedural materials, but restore unmistakable cubic proportions.
   On the board-center mobile layout the native face depth used the desktop
   54–82px cube while the visual die itself had already shrunk to 34–48px.
   That made skinned dice read as separated cards/tiles. Depth now follows
   the actual rendered die size, with face shading and real pip layouts.
   ======================================================================== */
.dice-cinematic[data-dice-skin]{--np-live-die-size:clamp(54px,8vw,82px);--np-live-die-half:calc(var(--np-live-die-size)/2);--np-dice-pip:#1a100b}
.dice-cinematic[data-dice-skin] .dice-cinematic-stage{perspective:760px;transform-style:preserve-3d}
.dice-cinematic[data-dice-skin] .cinematic-die-flight{width:var(--np-live-die-size)!important;height:var(--np-live-die-size)!important;margin:calc(var(--np-live-die-size)/-2)!important;transform-style:preserve-3d}
.dice-cinematic[data-dice-skin] .cinematic-die{inset:0!important;width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(0 10px 8px #0009)}
.dice-cinematic[data-dice-skin] .die-face{
  inset:0!important;
  width:100%;height:100%;
  border-width:1.5px!important;
  border-radius:9%!important;
  box-sizing:border-box;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-origin:50% 50%;
  box-shadow:inset 2px 2px 7px #ffffff28,inset -5px -6px 9px #0008!important;
}
.dice-cinematic[data-dice-skin] .die-face.front{transform:translateZ(var(--np-live-die-half))!important;filter:brightness(1.03)}
.dice-cinematic[data-dice-skin] .die-face.back{transform:rotateY(180deg) translateZ(var(--np-live-die-half))!important;filter:brightness(.69)}
.dice-cinematic[data-dice-skin] .die-face.right{transform:rotateY(90deg) translateZ(var(--np-live-die-half))!important;filter:brightness(.79)}
.dice-cinematic[data-dice-skin] .die-face.left{transform:rotateY(-90deg) translateZ(var(--np-live-die-half))!important;filter:brightness(.73)}
.dice-cinematic[data-dice-skin] .die-face.top{transform:rotateX(90deg) translateZ(var(--np-live-die-half))!important;filter:brightness(1.15)}
.dice-cinematic[data-dice-skin] .die-face.bottom{transform:rotateX(-90deg) translateZ(var(--np-live-die-half))!important;filter:brightness(.61)}

/* The number/question bubble was the main reason a face looked like a card.
   For equipped skins, cinematic faces use proper pips instead. */
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips]{
  position:relative;z-index:3;display:block!important;width:72%!important;height:72%!important;aspect-ratio:1;
  border:0!important;border-radius:0!important;color:transparent!important;background-color:transparent!important;
  box-shadow:none!important;font-size:0!important;text-shadow:none!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;
}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="1"]{background-image:radial-gradient(circle at 50% 50%,var(--np-dice-pip) 0 9%,transparent 10%)!important}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="2"]{background-image:radial-gradient(circle at 25% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 75%,var(--np-dice-pip) 0 9%,transparent 10%)!important}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="3"]{background-image:radial-gradient(circle at 25% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 50% 50%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 75%,var(--np-dice-pip) 0 9%,transparent 10%)!important}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="4"]{background-image:radial-gradient(circle at 25% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 25% 75%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 75%,var(--np-dice-pip) 0 9%,transparent 10%)!important}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="5"]{background-image:radial-gradient(circle at 25% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 25%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 50% 50%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 25% 75%,var(--np-dice-pip) 0 9%,transparent 10%),radial-gradient(circle at 75% 75%,var(--np-dice-pip) 0 9%,transparent 10%)!important}
.dice-cinematic[data-dice-skin] .die-face>i[data-np-pips="6"]{background-image:radial-gradient(circle at 25% 22%,var(--np-dice-pip) 0 8%,transparent 9%),radial-gradient(circle at 75% 22%,var(--np-dice-pip) 0 8%,transparent 9%),radial-gradient(circle at 25% 50%,var(--np-dice-pip) 0 8%,transparent 9%),radial-gradient(circle at 75% 50%,var(--np-dice-pip) 0 8%,transparent 9%),radial-gradient(circle at 25% 78%,var(--np-dice-pip) 0 8%,transparent 9%),radial-gradient(circle at 75% 78%,var(--np-dice-pip) 0 8%,transparent 9%)!important}

/* Pip contrast belongs to the material, not to a generic purple glow. */
.dice-cinematic[data-dice-skin="dice_stone"]{--np-dice-pip:#24211e}
.dice-cinematic[data-dice-skin="dice_bone"]{--np-dice-pip:#493720}
.dice-cinematic[data-dice-skin="dice_obsidian"]{--np-dice-pip:#f3dcff}
.dice-cinematic[data-dice-skin="dice_gold"]{--np-dice-pip:#392304}
.dice-cinematic[data-dice-skin="dice_fire"]{--np-dice-pip:#fff1b0}
.dice-cinematic[data-dice-skin="dice_ice"]{--np-dice-pip:#f3ffff}
.dice-cinematic[data-dice-skin="dice_cursed"]{--np-dice-pip:#f4c9ff}

/* Keep glow around the whole cube, not around every rectangular face. */
.dice-cinematic[data-dice-skin="dice_obsidian"] .cinematic-die{filter:drop-shadow(0 10px 8px #000b) drop-shadow(0 0 6px #7b3b9a80)}
.dice-cinematic[data-dice-skin="dice_fire"] .cinematic-die{filter:drop-shadow(0 10px 8px #000b) drop-shadow(0 0 6px #ef4f1980)}
.dice-cinematic[data-dice-skin="dice_ice"] .cinematic-die{filter:drop-shadow(0 10px 8px #000b) drop-shadow(0 0 6px #7cd9ef85)}
.dice-cinematic[data-dice-skin="dice_cursed"] .cinematic-die{filter:drop-shadow(0 10px 8px #000b) drop-shadow(0 0 6px #9944a980)}

/* Critical mobile/tablet correction: cube depth equals its actual compact size. */
.board-center .dice-cinematic[data-dice-skin]{--np-live-die-size:clamp(38px,10vw,50px)}
@media (max-width:650px){
  .board-center .dice-cinematic[data-dice-skin]{--np-live-die-size:clamp(38px,11vw,48px)}
  .dice-cinematic[data-dice-skin] .die-face{border-radius:8%!important}
}

/* Preview uses the same sharper cube language. */
.np-dice-preview-face{border-radius:9%!important}

/* ========================================================================
   DICE VOLUME FIX V4 — always reads as a cube on phone/tablet
   Samsung/Android can catch the old tumble at a face-on angle, which turns
   a technically 3D die into a flat square in screenshots. Skinned dice now
   tumble through off-axis orientations and settle isometrically, so the
   front, top and side remain visibly separate physical planes.
   ======================================================================== */
.dice-cinematic[data-dice-skin]{
  --np-live-die-size:clamp(58px,8.3vw,84px);
  --np-live-die-half:calc(var(--np-live-die-size)/2);
}
.dice-cinematic[data-dice-skin] .dice-cinematic-stage{
  perspective:520px!important;
  perspective-origin:50% 45%!important;
  transform-style:preserve-3d!important;
}
.dice-cinematic[data-dice-skin] .cinematic-die-flight,
.dice-cinematic[data-dice-skin] .cinematic-die{
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
}
.dice-cinematic[data-dice-skin] .cinematic-die{
  transform-origin:50% 50% 0!important;
}
/* Avoid flat snapshots during the flight: every quarter-turn retains an
   off-axis X/Y offset instead of crossing a perfect 0/90° presentation. */
.dice-cinematic[data-dice-skin] .cinematic-die-flight.rolling .cinematic-die{
  animation:npDiceSkinTumbleV4 .58s linear infinite!important;
  animation-delay:var(--delay)!important;
}
@keyframes npDiceSkinTumbleV4{
  0%{transform:rotateX(24deg) rotateY(34deg) rotateZ(-8deg)}
  25%{transform:rotateX(114deg) rotateY(124deg) rotateZ(82deg)}
  50%{transform:rotateX(204deg) rotateY(214deg) rotateZ(172deg)}
  75%{transform:rotateX(294deg) rotateY(304deg) rotateZ(262deg)}
  100%{transform:rotateX(384deg) rotateY(394deg) rotateZ(352deg)}
}
.dice-cinematic[data-dice-skin] .cinematic-die-flight.settled .cinematic-die{
  animation:npDiceSkinSettleV4 .66s cubic-bezier(.16,.86,.24,1.18) both!important;
}
@keyframes npDiceSkinSettleV4{
  0%{transform:rotateX(294deg) rotateY(304deg) rotateZ(82deg) scale(1.13)}
  62%{transform:rotateX(-27deg) rotateY(37deg) rotateZ(-7deg) scale(.95)}
  82%{transform:rotateX(-16deg) rotateY(25deg) rotateZ(-2deg) scale(1.025)}
  100%{transform:rotateX(-20deg) rotateY(30deg) rotateZ(-4deg) scale(1)}
}
.dice-cinematic[data-dice-skin] .die-face{
  border-radius:8%!important;
  border-width:1.5px!important;
  outline:1px solid #ffffff0d;
  box-shadow:inset 3px 3px 8px #ffffff24,inset -7px -8px 12px #0009!important;
}
/* Stronger plane separation. Material remains the same; only lighting differs. */
.dice-cinematic[data-dice-skin] .die-face.front{filter:brightness(1.02) saturate(1.02)!important}
.dice-cinematic[data-dice-skin] .die-face.top{filter:brightness(1.28) saturate(.92)!important}
.dice-cinematic[data-dice-skin] .die-face.right{filter:brightness(.72) saturate(1.08)!important}
.dice-cinematic[data-dice-skin] .die-face.left{filter:brightness(.62)!important}
.dice-cinematic[data-dice-skin] .die-face.back{filter:brightness(.48)!important}
.dice-cinematic[data-dice-skin] .die-face.bottom{filter:brightness(.42)!important}
.dice-cinematic[data-dice-skin] .cinematic-die-shadow{
  top:88%!important;right:-12%!important;bottom:-18%!important;left:-12%!important;
  opacity:.75;filter:blur(8px)!important;transform:translateZ(calc(var(--np-live-die-half)*-1.05)) rotateX(78deg)!important;
}
.board-center .dice-cinematic[data-dice-skin]{--np-live-die-size:clamp(48px,11vw,58px)}
@media(max-width:650px){
  .board-center .dice-cinematic[data-dice-skin]{--np-live-die-size:clamp(46px,12.5vw,56px)}
  .dice-cinematic[data-dice-skin] .dice-cinematic-stage{perspective:390px!important}
}

/* ========================================================================
   PREVIEW V4 — one clean 3D scene, no detached faces over the footer
   ======================================================================== */
.np-dice-preview-modal{overflow:hidden!important}
.np-dice-preview-arena{
  min-height:300px!important;
  perspective:620px!important;
  perspective-origin:50% 42%!important;
  transform-style:preserve-3d!important;
  isolation:isolate;
  overflow:hidden;
}
.np-dice-preview-ground{
  position:absolute;left:50%;bottom:15%;z-index:0;width:72%;height:24%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--np-dice-accent,#a87342) 34%,#0000),#0000 68%);
  filter:blur(13px);transform:translateX(-50%) rotateX(68deg);pointer-events:none
}
.np-dice-preview-stage{
  position:relative!important;z-index:2;width:118px!important;height:118px!important;
  flex:0 0 118px;perspective:none!important;transform-style:preserve-3d!important;
  filter:drop-shadow(0 22px 14px #000b)
}
.np-dice-preview-cube{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  transform-style:preserve-3d!important;-webkit-transform-style:preserve-3d!important;
  transform:rotateX(-20deg) rotateY(30deg) rotateZ(-4deg);
  transform-origin:50% 50% 0!important;will-change:transform
}
.np-dice-preview-cube.is-rolling{
  animation:npDicePreviewRollV4 .98s cubic-bezier(.18,.75,.19,1) var(--np-dice-delay,0ms) both!important
}
@keyframes npDicePreviewRollV4{
  0%{transform:translate3d(0,-108px,35px) rotateX(24deg) rotateY(34deg) rotateZ(-8deg) scale(.78)}
  24%{transform:translate3d(-10px,-42px,42px) rotateX(114deg) rotateY(124deg) rotateZ(82deg) scale(1.03)}
  50%{transform:translate3d(8px,10px,16px) rotateX(204deg) rotateY(214deg) rotateZ(172deg) scale(.96)}
  72%{transform:translate3d(-4px,-14px,8px) rotateX(294deg) rotateY(304deg) rotateZ(262deg) scale(1.01)}
  88%{transform:translate3d(2px,3px,2px) rotateX(344deg) rotateY(364deg) rotateZ(326deg) scale(.98)}
  100%{transform:translate3d(0,0,0) rotateX(340deg) rotateY(390deg) rotateZ(356deg) scale(1)}
}
.np-dice-preview-face{
  inset:0!important;width:100%!important;height:100%!important;box-sizing:border-box!important;
  border-radius:8%!important;border-width:2px!important;backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;overflow:hidden!important;
  box-shadow:inset 3px 3px 9px #ffffff25,inset -8px -9px 13px #0009!important
}
.np-dice-preview-face.front{transform:translateZ(59px)!important;filter:brightness(1.02)}
.np-dice-preview-face.back{transform:rotateY(180deg) translateZ(59px)!important;filter:brightness(.48)}
.np-dice-preview-face.right{transform:rotateY(90deg) translateZ(59px)!important;filter:brightness(.72)}
.np-dice-preview-face.left{transform:rotateY(-90deg) translateZ(59px)!important;filter:brightness(.62)}
.np-dice-preview-face.top{transform:rotateX(90deg) translateZ(59px)!important;filter:brightness(1.28)}
.np-dice-preview-face.bottom{transform:rotateX(-90deg) translateZ(59px)!important;filter:brightness(.42)}
.np-dice-preview-result{position:relative;z-index:5;margin-top:-2px!important}
.np-dice-preview-modal footer{position:relative;z-index:5}

@media(max-width:650px){
  .np-dice-preview-modal{width:min(94vw,520px)!important;max-height:calc(100dvh - 24px);padding:16px 12px!important}
  .np-dice-preview-arena{min-height:250px!important;margin:8px 0 4px!important;gap:42px!important;perspective:480px!important}
  .np-dice-preview-stage{width:88px!important;height:88px!important;flex-basis:88px!important}
  .np-dice-preview-face.front{transform:translateZ(44px)!important}
  .np-dice-preview-face.back{transform:rotateY(180deg) translateZ(44px)!important}
  .np-dice-preview-face.right{transform:rotateY(90deg) translateZ(44px)!important}
  .np-dice-preview-face.left{transform:rotateY(-90deg) translateZ(44px)!important}
  .np-dice-preview-face.top{transform:rotateX(90deg) translateZ(44px)!important}
  .np-dice-preview-face.bottom{transform:rotateX(-90deg) translateZ(44px)!important}
  .np-dice-preview-modal footer{margin-top:8px!important}
}

/* ========================================================================
   DICE CANVAS V5 — mobile-safe volume, no PNG and no CSS 3D flattening
   CSS 3D on Samsung/Android was being flattened by compositing properties
   (notably filter/overflow). Equipped skins now use a Canvas renderer with
   real 3D math while the native flight wrapper still controls trajectory.
   ======================================================================== */
.dice-cinematic[data-dice-skin].np-dice-canvas-ready .cinematic-die{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  overflow:visible!important;
  transform-style:flat!important;
  background:transparent!important;
  box-shadow:none!important;
}
.dice-cinematic[data-dice-skin].np-dice-canvas-ready .die-face{display:none!important}
.dice-cinematic[data-dice-skin].np-dice-canvas-ready .cinematic-die-shadow{display:none!important}
.np-dice-canvas-live{display:block;visibility:hidden;position:absolute;left:50%;top:50%;z-index:8;width:174%;height:174%;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%);pointer-events:none}
.dice-cinematic[data-dice-skin].np-dice-canvas-ready .np-dice-canvas-live{visibility:visible}
/* Neutralize old skin-specific filters that forced preserve-3d flattening. */
.dice-cinematic[data-dice-skin="dice_obsidian"].np-dice-canvas-ready .cinematic-die,
.dice-cinematic[data-dice-skin="dice_fire"].np-dice-canvas-ready .cinematic-die,
.dice-cinematic[data-dice-skin="dice_ice"].np-dice-canvas-ready .cinematic-die,
.dice-cinematic[data-dice-skin="dice_cursed"].np-dice-canvas-ready .cinematic-die{filter:none!important}

/* Preview V5: canvases live inside fixed boxes; there are no detached CSS
   faces that can escape into the buttons/footer on Samsung Browser. */
.np-dice-preview-canvas-modal{overflow:hidden!important}
.np-dice-preview-canvas-arena{display:flex!important;min-height:315px!important;margin:14px 0 8px!important;align-items:center!important;justify-content:center!important;gap:clamp(26px,7vw,70px)!important;perspective:none!important;transform-style:flat!important;isolation:auto!important;overflow:hidden!important}
.np-dice-preview-canvas-arena .np-dice-preview-stage{position:relative!important;z-index:2;width:170px!important;height:170px!important;flex:0 0 170px!important;perspective:none!important;transform-style:flat!important;filter:none!important;overflow:visible!important}
.np-dice-canvas-preview{display:block;width:100%;height:100%;max-width:none!important;max-height:none!important;pointer-events:none}
.np-dice-preview-canvas-arena .np-dice-preview-ground{bottom:12%!important;width:78%!important;height:24%!important}
.np-dice-preview-canvas-modal .np-dice-preview-result{position:relative;z-index:5;margin-top:-2px!important}
.np-dice-preview-canvas-modal footer{position:relative;z-index:5}
@media(max-width:650px){
  .np-dice-preview-canvas-modal{width:min(94vw,520px)!important;max-height:calc(100dvh - 24px);padding:16px 12px!important}
  .np-dice-preview-canvas-arena{min-height:275px!important;margin:8px 0 4px!important;gap:16px!important}
  .np-dice-preview-canvas-arena .np-dice-preview-stage{width:min(39vw,145px)!important;height:min(39vw,145px)!important;flex:0 0 min(39vw,145px)!important}
  .np-dice-preview-canvas-modal footer{margin-top:8px!important}
}
@media(max-width:390px){
  .np-dice-preview-canvas-arena{min-height:245px!important;gap:6px!important}
  .np-dice-preview-canvas-arena .np-dice-preview-stage{width:42vw!important;height:42vw!important;flex-basis:42vw!important}
}
/* V5 specificity guard: V4 had !important tumble/settle rules on a more
   specific selector. Canvas owns the rotation now, so the DOM wrapper must
   stay planar and must never rotate the rendered bitmap itself. */
.dice-cinematic[data-dice-skin] .cinematic-die-flight.rolling .cinematic-die,
.dice-cinematic[data-dice-skin] .cinematic-die-flight.settled .cinematic-die{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* ========================================================================
   ROLL EFFECTS V1 — real existing inventory category, shared in multiplayer.
   Effects are Canvas particles; no PNG/SVG assets and no gameplay changes.
   ======================================================================== */
.dice-cinematic[data-roll-effect]{position:relative;isolation:isolate}
.np-roll-effect-canvas{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.dice-cinematic[data-roll-effect] .cinematic-die-flight{z-index:9}

/* Inventory thumbnails: each existing roll_effect card now reads as an effect,
   not as a generic symbol tile. */
.cosmetic-card[data-roll-effect] .cosmetic-preview{isolation:isolate;overflow:hidden}
.np-roll-effect-thumb{position:relative;display:grid;width:min(126px,72%);aspect-ratio:1;place-items:center;border:1px solid color-mix(in srgb,var(--np-roll-effect-accent,#a26d43) 72%,#f6ddad 28%);border-radius:50%;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--np-roll-effect-accent,#a26d43) 34%,#16100c 66%),#0a0807 70%);box-shadow:inset 0 0 24px #0009,0 0 20px color-mix(in srgb,var(--np-roll-effect-accent,#a26d43) 38%,transparent);overflow:hidden}
.np-roll-effect-thumb i{position:relative;z-index:4;color:#fff3d8;font-size:2.55rem;font-style:normal;text-shadow:0 0 14px var(--np-roll-effect-accent,#d8a252)}
.np-roll-effect-thumb b,.np-roll-effect-thumb em{position:absolute;inset:12%;z-index:2;border:1px solid var(--np-roll-effect-accent,#d8a252);border-radius:50%;opacity:.52;content:"";animation:npRollThumbPulse 2.2s ease-in-out infinite}
.np-roll-effect-thumb em{inset:26%;opacity:.28;animation-delay:-1.1s}
@keyframes npRollThumbPulse{0%,100%{transform:scale(.78);opacity:.18}50%{transform:scale(1.08);opacity:.72}}
.np-roll-effect-thumb-lightning:before,.np-roll-effect-thumb-lightning:after{position:absolute;z-index:3;width:2px;height:78%;background:linear-gradient(#fff0,var(--np-roll-effect-accent),#fff0);box-shadow:0 0 9px var(--np-roll-effect-accent);content:"";transform:rotate(24deg)}
.np-roll-effect-thumb-lightning:after{height:48%;transform:translate(18px,8px) rotate(-18deg);opacity:.55}
.np-roll-effect-thumb-fireburst{background:radial-gradient(circle,#ffb23d 0 5%,#ed562b44 12%,#351008 34%,#080605 72%)}
.np-roll-effect-thumb-fireburst:before{position:absolute;inset:22%;border:2px dashed var(--np-roll-effect-accent);border-radius:50%;content:"";animation:npRollThumbSpin 5s linear infinite}
.np-roll-effect-thumb-frost{background:radial-gradient(circle at 45% 45%,#eaffff44,#3c8da633 38%,#090d10 72%)}
.np-roll-effect-thumb-frost:before{position:absolute;inset:14%;border:1px dashed #dffcff99;border-radius:50%;content:"";animation:npRollThumbSpin 8s linear infinite}
.np-roll-effect-thumb-smoke{filter:saturate(.35)}
.np-roll-effect-thumb-smoke:before,.np-roll-effect-thumb-smoke:after{position:absolute;width:54%;height:32%;border-radius:50%;background:radial-gradient(circle,#a8a19b66,#403b3866 55%,transparent 72%);filter:blur(5px);content:"";animation:npSmokeThumb 2.6s ease-in-out infinite}
.np-roll-effect-thumb-smoke:after{animation-delay:-1.3s;transform:translate(14px,-15px)}
.np-roll-effect-thumb-runes b{inset:8%;border-style:dashed;animation:npRollThumbSpin 7s linear infinite;opacity:.7}.np-roll-effect-thumb-runes em{inset:27%;border-style:dotted;animation:npRollThumbSpin 4s linear infinite reverse;opacity:.6}
@keyframes npRollThumbSpin{to{transform:rotate(360deg)}}
@keyframes npSmokeThumb{0%,100%{transform:translate(-12px,14px) scale(.72);opacity:.18}50%{transform:translate(14px,-16px) scale(1.22);opacity:.62}}
.cosmetic-card[data-roll-effect].equipped .np-roll-effect-thumb{box-shadow:inset 0 0 24px #0009,0 0 28px var(--np-roll-effect-accent,#d8a252)}

/* Full live preview for roll effects. */
.np-roll-preview-backdrop{position:fixed;inset:0;z-index:240;display:grid;padding:18px;place-items:center;background:#070504e8;backdrop-filter:blur(9px);opacity:0;transition:opacity .18s ease}
.np-roll-preview-backdrop.is-visible{opacity:1}
.np-roll-preview-modal{position:relative;width:min(720px,96vw);max-height:calc(100dvh - 28px);overflow:auto;border:1px solid color-mix(in srgb,var(--np-roll-effect-accent,#a97843) 70%,#ead4a7 30%);border-radius:22px;padding:24px;color:#f2dfba;background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--np-roll-effect-accent,#7c5335) 16%,transparent),transparent 42%),linear-gradient(160deg,#1b1410,#090706 72%);box-shadow:0 30px 100px #000,0 0 35px color-mix(in srgb,var(--np-roll-effect-accent,#9d6c43) 22%,transparent)}
.np-roll-preview-close{position:absolute;top:18px;right:18px;z-index:6;width:46px;height:46px;border:1px solid #73523a;border-radius:50%;color:#f1ddb7;background:#120d0a;font-size:1.5rem;cursor:pointer}
.np-roll-preview-modal header{text-align:center}.np-roll-preview-modal header small{color:var(--np-roll-effect-accent,#c99b64);font-size:0.82rem;font-weight:900;letter-spacing:.18em}.np-roll-preview-modal header h2{margin:.55rem 3rem .25rem;color:#f5e2bc;font-size:clamp(1.45rem,4vw,2.35rem);text-transform:uppercase;letter-spacing:.04em}.np-roll-preview-modal header p{margin:.2rem 0;color:#cdb995;font-size:.78rem}
.np-roll-preview-arena{position:relative;height:min(390px,46vh);min-height:285px;margin:14px 0 8px;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--np-roll-effect-accent,#8b6545) 17%,transparent),transparent 56%),linear-gradient(#0b0908,#120d0a 72%,#080605);box-shadow:inset 0 0 36px #000b}
.np-roll-preview-arena:after{position:absolute;left:16%;right:16%;bottom:12%;height:18%;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 68%);filter:blur(10px);content:""}
.np-roll-preview-fx{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.np-roll-preview-dice{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:clamp(12px,6vw,56px);pointer-events:none}
.np-roll-preview-die{width:min(34%,180px);aspect-ratio:1;pointer-events:none}
.np-roll-preview-result{min-height:26px;margin:8px 0 10px;color:#f0dab2;text-align:center;font-size:.85rem;font-weight:900;letter-spacing:.04em}
.np-roll-preview-modal footer{display:flex;gap:10px}.np-roll-preview-modal footer button{min-height:50px;border:1px solid color-mix(in srgb,var(--np-roll-effect-accent,#9f7041) 70%,#f2ddb3 30%);border-radius:9px;flex:1;color:#fae8c4;background:linear-gradient(180deg,color-mix(in srgb,var(--np-roll-effect-accent,#75492c) 24%,#39251a 76%),#130d0a);font-size:0.86rem;font-weight:900;letter-spacing:.055em;cursor:pointer}.np-roll-preview-modal footer .np-roll-preview-done{background:#110c09}
@media(max-width:650px){.np-roll-preview-backdrop{padding:10px}.np-roll-preview-modal{width:100%;padding:18px 12px;border-radius:18px}.np-roll-preview-arena{height:330px;min-height:280px}.np-roll-preview-dice{gap:0}.np-roll-preview-die{width:43%}.np-roll-preview-modal footer{flex-direction:column}.np-roll-preview-modal footer button{width:100%}.np-roll-preview-modal header h2{margin-left:2.5rem;margin-right:2.5rem}}
@media(prefers-reduced-motion:reduce){.np-roll-effect-thumb *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Current inventory bundle uses inventory-card names; older deployments use
   cosmetic-card. Both point to the same server-owned equipment slots. */
.inventory-card[data-dice-skin] .inventory-preview{isolation:isolate}
.inventory-card[data-dice-skin] .np-inventory-die{position:relative;display:grid;width:min(112px,65%);aspect-ratio:1;place-items:center;border:2px solid var(--np-dice-accent,#9d7446);border-radius:15%;transform:rotate(-8deg);color:#f5dfb3;background:linear-gradient(145deg,#dfbd7d,#6e451f);box-shadow:inset 3px 3px 8px #fff5,inset -7px -8px 12px #0008,0 8px 18px #0008;font-size:2rem;font-weight:900}
.inventory-card[data-dice-skin] .np-inventory-die i{display:grid;width:34%;aspect-ratio:1;place-items:center;border-radius:50%;color:inherit;background:#140c08aa;font-size:1.05rem;font-style:normal}
.inventory-card[data-roll-effect] .inventory-preview{isolation:isolate;overflow:hidden}
.inventory-card[data-roll-effect] .np-roll-effect-thumb{display:grid}
.inventory-card[data-dice-skin],.inventory-card[data-roll-effect]{cursor:pointer}
.np-hall-card[data-dice-skin],.np-hall-card[data-roll-effect]{cursor:pointer}
.np-hall-card[data-roll-effect] .np-hall-card-art{isolation:isolate;overflow:hidden}
.np-hall-card[data-roll-effect] .np-roll-effect-thumb{display:grid}
.np-hall-card[data-roll-effect].equipped .np-roll-effect-thumb{box-shadow:inset 0 0 24px #0009,0 0 28px var(--np-roll-effect-accent,#d8a252)}
.np-hall-card[data-dice-skin] .np-inventory-dice-canvas{display:block;width:100%!important;height:100%!important;min-width:1px;min-height:1px}

/* Exact live-render previews for every dice card. */
.cosmetic-preview>.np-inventory-dice-canvas,.inventory-preview>.np-inventory-dice-canvas{position:absolute!important;inset:0!important;z-index:3!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;pointer-events:none!important;filter:drop-shadow(0 12px 10px #0009)}
.cosmetic-preview.np-dice-thumb-ready>img,.cosmetic-preview.np-dice-thumb-ready>span:not(.np-roll-effect-thumb),.inventory-preview.np-dice-thumb-ready>img,.inventory-preview.np-dice-thumb-ready>span:not(.np-roll-effect-thumb){visibility:hidden!important;opacity:0!important}
.cosmetic-preview.np-dice-thumb-ready>.np-inventory-die,.inventory-preview.np-dice-thumb-ready>.np-inventory-die{display:none!important}
.cosmetic-preview.np-dice-thumb-ready>b,.cosmetic-preview.np-dice-thumb-ready>i,.inventory-preview.np-dice-thumb-ready>b,.inventory-preview.np-dice-thumb-ready>i{z-index:5!important}