:root {
  --orange: #ff9e1b;
  --yellow: #fff02b;
  --pink: #ff4f9a;
  --red: #ff4e3d;
  --blue: #08a9e6;
  --deep-blue: #2f6fd8;
  --green: #19b75a;
  --teal: #67d9e3;
  --violet: #8576b5;
}

.card {
  color: white;
  background: var(--cream);
  text-shadow:
    0 2px 0 var(--ink),
    1px 0 0 var(--ink),
    -1px 0 0 var(--ink),
    0 -1px 0 var(--ink);
}

.card.number-0 { background: var(--pink); }
.card.number-1 { background: var(--violet); }
.card.number-2 { background: var(--yellow); }
.card.number-3 { background: var(--red); }
.card.number-4 { background: var(--blue); }
.card.number-5 { background: var(--green); }
.card.number-6 { background: #f07f57; }
.card.number-7 { background: #8fd36f; }
.card.number-8 { background: #88d66b; }
.card.number-9 { background: var(--orange); }
.card.number-10 { background: #f02020; }
.card.number-11 { background: #7aa5e8; }
.card.number-12 { background: #9c8d73; }

.card.plus,
.card.times {
  background: var(--orange);
  color: white;
  font-size: 27px;
}

.card.action,
.card.chance {
  width: 76px;
  color: white;
  font-size: 14px;
  line-height: .9;
  text-align: center;
}

.card.freeze { background: var(--teal); }
.card.flip-three { background: var(--yellow); }
.card.chance { background: var(--red); }