#dice-value {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── OUTER SCENE — tight perspective makes 3D very dramatic ── */
  .dice-3d-scene {
    width:  42px;
    height: 42px;
    perspective: 105px;
    perspective-origin: 55% 35%;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
  }

  /* ── CUBE ── */
  .dice-3d {
    width:  42px;
    height: 42px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
  }

  /* ── ROLLING KEYFRAME ANIMATION ──
     Drives through real face changes so you see 1→3→6→4 etc.
     Scale goes up (dice in air) then comes back down (landing).
     Timing is slow at start, fast in middle, slow at end.        */
  @keyframes diceRolling {
    0%   { transform: rotateX(  0deg) rotateY(  0deg) scale(1.00); }
    8%   { transform: rotateX( 60deg) rotateY( 40deg) scale(1.06); }
    18%  { transform: rotateX(130deg) rotateY(100deg) scale(1.12); }
    30%  { transform: rotateX(220deg) rotateY(175deg) scale(1.15); }
    42%  { transform: rotateX(320deg) rotateY(240deg) scale(1.15); }
    55%  { transform: rotateX(430deg) rotateY(300deg) scale(1.12); }
    67%  { transform: rotateX(540deg) rotateY(350deg) scale(1.08); }
    78%  { transform: rotateX(630deg) rotateY(390deg) scale(1.04); }
    88%  { transform: rotateX(690deg) rotateY(415deg) scale(1.02); }
    95%  { transform: rotateX(715deg) rotateY(428deg) scale(1.01); }
    100% { transform: rotateX(720deg) rotateY(432deg) scale(1.00); }
  }

  .dice-3d.is-rolling {
    animation: diceRolling 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  /* ── FACES — ivory casino dice with deep rounded corners ── */
  .dice-side {
    position: absolute;
    width:  42px;
    height: 42px;
    /* Warm ivory base — top face gets brightest light */
    background: linear-gradient(145deg, #fffff0 0%, #e8e4d0 100%);
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:    repeat(3, 1fr);
    padding: 5px;
    /* Subtle inner bevel */
    box-shadow:
      inset 0  2px 4px rgba(255,255,255,0.9),
      inset 0 -2px 4px rgba(0,0,0,0.15);
    outline: 1.5px solid rgba(180,168,140,0.6);
  }

  /* Different brightness per face to simulate single overhead light */
  .dice-side.front  { background: linear-gradient(145deg, #fffff2, #ede8d4); }
  .dice-side.top    { background: linear-gradient(145deg, #ffffff, #f0ece0); }
  .dice-side.right  { background: linear-gradient(145deg, #f5f0e0, #ddd8c4); }
  .dice-side.left   { background: linear-gradient(145deg, #e8e4d0, #d0ccb8); }
  .dice-side.back   { background: linear-gradient(145deg, #e0dcc8, #c8c4b0); }
  .dice-side.bottom { background: linear-gradient(145deg, #ddd8c4, #c4c0ac); }

  /* ── FACE POSITIONS — half-size = 21px ── */
  .dice-side.front  { transform: translateZ(21px); }
  .dice-side.back   { transform: rotateY(180deg)  translateZ(21px); }
  .dice-side.right  { transform: rotateY( 90deg)  translateZ(21px); }
  .dice-side.left   { transform: rotateY(-90deg)  translateZ(21px); }
  .dice-side.top    { transform: rotateX( 90deg)  translateZ(21px); }
  .dice-side.bottom { transform: rotateX(-90deg)  translateZ(21px); }

  /* ── DOTS — deep ink-black recessed pips ── */
  .dice-side .dot {
    width:  6px;
    height: 6px;
    background: radial-gradient(circle at 38% 32%, #3a3a3a, #0a0a0a);
    border-radius: 50%;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.15),
      0 1px 3px rgba(0,0,0,0.7);
    align-self:   center;
    justify-self: center;
  }

  /* Legacy flat-dice dot IDs — hidden, kept only for JS compatibility */
  #d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9 { display: none !important; }

  /* ── DOT GRID POSITIONS ── */
  .dot.tl     { grid-column:1; grid-row:1; }
  .dot.tc     { grid-column:2; grid-row:1; }
  .dot.tr     { grid-column:3; grid-row:1; }
  .dot.ml     { grid-column:1; grid-row:2; }
  .dot.center { grid-column:2; grid-row:2; }
  .dot.mr     { grid-column:3; grid-row:2; }
  .dot.bl     { grid-column:1; grid-row:3; }
  .dot.bc     { grid-column:2; grid-row:3; }
  .dot.br     { grid-column:3; grid-row:3; }

  /* ── LANDING GLOW — pulses once when dice settles ── */
  @keyframes diceGlow {
    0%   { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55)); }
    40%  { filter: drop-shadow(0 0 22px rgba(255,215,0,0.9)) drop-shadow(0 8px 18px rgba(0,0,0,0.4)); }
    100% { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55)); }
  }
  .dice-3d-scene.landed {
    animation: diceGlow 0.6s ease-out forwards;
  }