/* V1.21: dice-only material surfaces. Existing timings and board UI are untouched.
   Each new material is shared by the reward preview, move tokens and 3D faces. */
:is(.game-die.walnut, .dr-skin-walnut, .dice-walnut) {
  --dc-hi:#64432a; --dc-lo:#291910; --dc-pip:#fff4d9; --dc-edge:#c5a66e;
  --dc-art:repeating-radial-gradient(ellipse at -45% 25%,transparent 0 4px,#160b0650 5px,transparent 6px 11px),linear-gradient(93deg,transparent,#ffcb7317,transparent);
  --dc-scene:radial-gradient(ellipse at 50% 65%,#52351f88,transparent 70%),linear-gradient(130deg,#171814,#1d1a17);
}
:is(.game-die.oak, .dr-skin-oak, .dice-oak) {
  --dc-hi:#edc788; --dc-lo:#ba8f51; --dc-pip:#271a0c; --dc-edge:#f9dfa4;
  --dc-art:repeating-radial-gradient(ellipse at -30% 15%,transparent 0 5px,#80491430 6px,transparent 7px 14px),linear-gradient(88deg,transparent,#ffe9b936,transparent);
  --dc-scene:radial-gradient(ellipse at 50% 65%,#94602a66,transparent 70%),linear-gradient(135deg,#21201b,#151719);
}
:is(.game-die.glacier, .dr-skin-glacier, .dice-glacier) {
  --dc-hi:#ebfbff; --dc-lo:#8ed4ec; --dc-pip:#0b2945; --dc-edge:#ecfcff;
  --dc-art:conic-gradient(from 45deg at 28% 32%,#ffffff50,transparent 16%,#619ac425 26%,transparent 46%,#ffffff66 55%,transparent 75%),linear-gradient(35deg,transparent 44%,#ffffff40 45% 46%,transparent 47%);
  --dc-scene:radial-gradient(ellipse at 50% 60%,#468faf40,transparent 70%),linear-gradient(135deg,#17222c,#111820);
}
:is(.game-die.obsidian, .dr-skin-obsidian, .dice-obsidian) {
  --dc-hi:#343b49; --dc-lo:#0c1018; --dc-pip:#f5fbff; --dc-edge:#899ab0;
  --dc-art:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(120deg,transparent 25%,#bacbe817 46%,transparent 64%);
  --dc-scene:radial-gradient(ellipse at 50% 58%,#707f9633,transparent 65%),linear-gradient(135deg,#191e27,#0d1119);
}
:is(.game-die.nebula, .dr-skin-nebula, .dice-nebula) {
  --dc-hi:#49306e; --dc-lo:#161229; --dc-pip:#fff4ff; --dc-edge:#b59beb;
  --dc-art:radial-gradient(circle at 18% 22%,#ffffff99 0 .6px,transparent 1.2px),radial-gradient(circle at 82% 72%,#cce3ff99 0 .7px,transparent 1.3px),radial-gradient(ellipse at 15% 65%,#8b386766,transparent 70%),radial-gradient(ellipse at 85% 20%,#655bae40,transparent 60%);
  --dc-scene:radial-gradient(ellipse at 33% 65%,#76489c4d,transparent 65%),radial-gradient(ellipse at 80% 20%,#2346893d,transparent 62%),#141326;
}
:is(.game-die.lunar, .dr-skin-lunar, .dice-lunar) {
  --dc-hi:#e2e8ed; --dc-lo:#aabcc9; --dc-pip:#172638; --dc-edge:#eef8ff;
  --dc-art:linear-gradient(118deg,transparent 17%,#63788c22 18% 19%,transparent 20% 80%,#ffffff55 81% 82%,transparent 83%),repeating-linear-gradient(90deg,#ffffff15 0 1px,transparent 1px 4px);
  --dc-scene:radial-gradient(ellipse at 50% 62%,#94c4dd35,transparent 70%),linear-gradient(135deg,#212630,#111a25);
}
:is(.game-die.circuit, .dr-skin-circuit, .dice-circuit) {
  --dc-hi:#12333a; --dc-lo:#08151e; --dc-pip:#bcffe3; --dc-edge:#4ecbb7;
  --dc-art:linear-gradient(90deg,transparent 17%,#44c9c326 18% 19%,transparent 20% 81%,#44c9c326 82% 83%,transparent 84%),linear-gradient(0deg,transparent 17%,#44c9c326 18% 19%,transparent 20% 81%,#44c9c326 82% 83%,transparent 84%),linear-gradient(135deg,transparent 48%,#65bebb0d 49% 51%,transparent 52%);
  --dc-scene:radial-gradient(ellipse at 50% 62%,#16b5ad25,transparent 65%),repeating-linear-gradient(90deg,transparent 0 23px,#56d9ce06 24px 25px),#111f24;
}
:is(.game-die.quantum, .dr-skin-quantum, .dice-quantum) {
  --dc-hi:#ebe7fd; --dc-lo:#aadfe0; --dc-pip:#272149; --dc-edge:#f0e6ff;
  --dc-art:conic-gradient(from 35deg at 50% 50%,#ecd4ff99,#c7eeff66,#dbffe866,#e6d7ff99,#ffdeed66,#c3f0ff77,#ecd4ff99),linear-gradient(125deg,transparent 42%,#ffffff66 43% 45%,transparent 46%);
  --dc-scene:radial-gradient(ellipse at 30% 60%,#8871b940,transparent 62%),radial-gradient(ellipse at 78% 50%,#4bada738,transparent 65%),#171b26;
}
.game-die:is(.walnut,.oak,.glacier,.obsidian,.nebula,.lunar,.circuit,.quantum) {
  background:var(--dc-art),linear-gradient(145deg,var(--dc-hi),var(--dc-lo));
  box-shadow:0 8px 18px #0005,inset 0 0 0 1px var(--dc-edge),inset 2px 2px 4px #ffffff24,inset -2px -2px 5px #0003;
}
.game-die:is(.walnut,.oak,.glacier,.obsidian,.nebula,.lunar,.circuit,.quantum) .die-pip {
  background:var(--dc-pip); box-shadow:0 0 0 .55px #00000018,inset 0 1px 1px #ffffff20;
}
.dr-stage:is(.dr-skin-walnut,.dr-skin-oak,.dr-skin-glacier,.dr-skin-obsidian,.dr-skin-nebula,.dr-skin-lunar,.dr-skin-circuit,.dr-skin-quantum) {
  --dr-face-hi:var(--dc-hi); --dr-face-lo:var(--dc-lo); --dr-edge:var(--dc-edge); --dr-pip:var(--dc-pip); --dr-pip-light:transparent;
}
.dr-stage:is(.dr-skin-walnut,.dr-skin-oak,.dr-skin-glacier,.dr-skin-obsidian,.dr-skin-nebula,.dr-skin-lunar,.dr-skin-circuit,.dr-skin-quantum) .dr-face {
  background:var(--dc-art),linear-gradient(145deg,var(--dc-hi),var(--dc-lo));
}
/* Card dice use the same real pip geometry and material as the game tokens. */
.dice-material-preview { background:var(--dc-scene,radial-gradient(ellipse at 50% 62%,#3a465933,transparent 70%),#121822); isolation:isolate; }
.dice-material-preview::after { content:""; position:absolute; left:18%; right:18%; bottom:27%; height:6%; border-radius:50%; background:#0008; filter:blur(7px); z-index:-1; }
.dice-material-tag { position:absolute; left:14px; top:12px; font-size:9px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:#c0cbd9; }
.dice-preview-pair { display:flex; gap:17px; align-items:center; padding-top:2px; }
.dice-preview-pair .game-die { width:62px; height:62px; padding:11px; border-radius:14px; transition:transform .22s ease; }
.dice-preview-pair .game-die:first-child { transform:translateY(-5px) rotate(-12deg); }
.dice-preview-pair .game-die:last-child { transform:translateY(6px) rotate(10deg); }
.dice-preview-pair .die-pip { width:8px; height:8px; }
.dice-preview-caption { position:absolute; bottom:13px; font-size:8px; letter-spacing:.14em; font-weight:700; color:#a9b8ca; }
#diceCollectionNote { margin:0 0 18px; padding:12px 15px; border:1px solid #66788b38; border-radius:13px; background:linear-gradient(110deg,#23384266,#1d193344); color:#bfccd9; font-size:12px; line-height:1.6; }
#diceCollectionNote strong { color:#edf4fa; }
.dice-reward-card .shop-copy { display:flex; flex-direction:column; gap:7px; }
.dice-reward-card .shop-copy p { margin:0; min-height:42px; }
.dice-unlock-meta { display:flex; justify-content:space-between; gap:8px; color:#bdc9d8; font-size:10px; line-height:1.5; }
.dice-unlock-meta strong { color:#ebd99d; font-weight:700; }
.dice-reward-card .shop-action { min-height:44px; margin-top:auto; }
@media (max-width:720px) {
  .dice-material-preview { height:154px; }
  .dice-preview-pair { gap:11px; }
  .dice-preview-pair .game-die { width:50px; height:50px; padding:9px; border-radius:11px; }
  .dice-preview-pair .die-pip { width:6px; height:6px; }
  .dice-material-tag { left:10px; font-size:8px; }
  .dice-preview-caption { font-size:7px; letter-spacing:.08em; }
  #diceCollectionNote { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .dice-preview-pair .game-die { transition:none; } }