/* Cubiri board-game roll color hierarchy: Backgammon + Catan */

/* Shared purple die-card treatment, matched to Ludo/Monopoly family. */
.backgammon-roll-grid .backgammon-roll-tile:nth-child(1),
.backgammon-roll-grid .backgammon-roll-tile:nth-child(2),
.catan-roll-grid .catan-roll-tile:nth-child(1),
.catan-roll-grid .catan-roll-tile:nth-child(2) {
  border-color: color-mix(in srgb, var(--cubiri-brand-purple) 46%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-purple) 38%, #17131f),
      color-mix(in srgb, var(--cubiri-brand-purple) 18%, #111217));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.backgammon-roll-grid .backgammon-roll-tile:nth-child(1) .monopoly-die-face,
.backgammon-roll-grid .backgammon-roll-tile:nth-child(2) .monopoly-die-face,
.catan-roll-grid .catan-roll-tile:nth-child(1) .monopoly-die-face,
.catan-roll-grid .catan-roll-tile:nth-child(2) .monopoly-die-face {
  border-color: color-mix(in srgb, var(--cubiri-brand-purple) 64%, white 12%);
  background: color-mix(in srgb, var(--cubiri-brand-purple) 14%, transparent);
  color: #fff;
}

/* Backgammon MOVES = Cubiri orange. */
.backgammon-roll-grid .backgammon-roll-tile:nth-child(3),
.backgammon-roll-grid .backgammon-roll-tile.is-total {
  border-color: color-mix(in srgb, var(--cubiri-brand-orange) 58%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-orange) 28%, #21150f),
      color-mix(in srgb, var(--cubiri-brand-orange) 12%, #131313));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Catan TOTAL = Cubiri orange. */
.catan-roll-grid .catan-roll-tile.is-total {
  border-color: color-mix(in srgb, var(--cubiri-brand-orange) 58%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-orange) 28%, #21150f),
      color-mix(in srgb, var(--cubiri-brand-orange) 12%, #131313));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Catan EVENT = Cubiri pink. */
.catan-roll-grid .catan-roll-tile.is-event {
  border-color: color-mix(in srgb, var(--cubiri-brand-pink) 52%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-pink) 30%, #21131b),
      color-mix(in srgb, var(--cubiri-brand-pink) 14%, #131116));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Keep information inside orange/pink result cards white, not legacy purple. */
.catan-roll-grid .catan-roll-tile.is-total .monopoly-roll-label,
.catan-roll-grid .catan-roll-tile.is-total .monopoly-roll-value,
.catan-roll-grid .catan-roll-tile.is-total .monopoly-roll-hint,
.catan-roll-grid .catan-roll-tile.is-total .catan-roll-hint,
.catan-roll-grid .catan-roll-tile.is-event .monopoly-roll-label,
.catan-roll-grid .catan-roll-tile.is-event .monopoly-roll-value,
.catan-roll-grid .catan-roll-tile.is-event .monopoly-roll-hint,
.catan-roll-grid .catan-roll-tile.is-event .catan-roll-value,
.catan-roll-grid .catan-roll-tile.is-event .catan-roll-hint {
  color: #fff;
}