/* Monopoly roll cards aligned with the Cubiri/Ludo gameplay palette.
   Layout intentionally remains owned by the existing Monopoly roll CSS. */

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile:not(.is-total) {
  --card-a: color-mix(in srgb, var(--cubiri-brand-purple) 38%, #17131f);
  --card-b: color-mix(in srgb, var(--cubiri-brand-purple) 18%, #111217);
  border-color: color-mix(in srgb, var(--cubiri-brand-purple) 46%, transparent);
}

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile:not(.is-total) .monopoly-roll-label,
.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile:not(.is-total) .monopoly-roll-value {
  color: #fff;
}

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile:not(.is-total) .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);
}

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile:not(.is-total) .monopoly-die-pip {
  background: #fff;
  box-shadow: 0 0 .35rem rgba(255,255,255,.28);
}

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile.is-total {
  --card-a: color-mix(in srgb, var(--cubiri-brand-orange) 28%, #21150f);
  --card-b: color-mix(in srgb, var(--cubiri-brand-orange) 12%, #131313);
  border-color: color-mix(in srgb, var(--cubiri-brand-orange) 58%, transparent);
}

.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile.is-total .monopoly-roll-label,
.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile.is-total .monopoly-roll-value,
.game-tab-content[data-game-component="monopoly-roll"] .monopoly-roll-tile.is-total .monopoly-roll-hint {
  color: var(--cubiri-brand-orange);
}